/**
 * Theme Name: Dino Candosin
 * Author: Gabriele Venturato
 * Description: Theme for dinocandosin website.
 *
 * Table of Contents:
 *
 * 1.0 - Normalize
 * 2.0 - Animations
 * 3.0 - Typography
 * 4.0 - Elements
 * 5.0 - Forms
 * 6.0 - Navigation
 *   6.1 - Links
 *   6.2 - Menus
 * 7.0 - Accessibility
 * 8.0 - Alignments
 * 9.0 - Clearings
 * 10.0 - Widgets
 * 11.0 - Content
 *    11.1 - Header
 *    11.2 - Homepage
 *    11.3 - 404
 *    11.4 - Privacy
 *    11.5 - Footer
 * 12.0 - Cookie
 * 13.0 - Media Queries
 * 	  13.1 - Portrait
 *    13.2 - width < 1920px
 *    13.3 - width < 1366px
 *    13.4 - width < 1280px
 *    13.5 - width < 980px
 *    13.6 - width < 980px (landscape)
 *    13.7 - width < 768px (portrait)
 *    13.8 - width < 768px
 *    13.9 - width < 640px (landscape)
 *    13.10 - width < 480px
 *    13.11 - width < 360px
 *    13.12 - height < 800px
 *    13.13 - height < 600px
 *    13.14 - height < 300px
 */

/* FONTS
 * font-family: 'Montserrat', sans-serif;
 * font-family: 'Libre Baskerville', serif;
 */


/**
 * 1.0 - Normalize
 *
 * Normalizing styles have been helped along thanks to the fine work of
 * Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
 */
@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
    font-family: 'entypo', sans-serif;
}

html {
	font-family: 'Montserrat', sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: 700;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 0;
}

hr {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

code,
kbd,
pre,
samp {
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

select {
	text-transform: none;
}

button {
	overflow: visible;
}

button,
input,
select,
textarea {
	max-width: 100%;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
  background-color: #0a71b1;
  border: 0 none;
  color: #fff;
  cursor: pointer;
  letter-spacing: 2px;
  padding: 5px 20px;
  text-transform: uppercase;
}

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
  background: none;
  border: 1px solid #fff;
  color: #fff;
  font-family: "Montserrat",sans-serif;
  font-size: 12px;
  line-height: 1.8;
  padding: 5px 10px;
  width: 400px;
  border-radius: 0;
}

select {
  padding: 7px 6px;
  width: 100%;
}

select option {
	color: #333;
  background-color: #fff;
}

select:invalid {
  color: rgba(255, 255, 255, 0.7);
}

button[disabled],
html input[disabled] {
	cursor: default;
	opacity: .5;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input[type="checkbox"],
input[type="radio"] {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-right: 0.4375em;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #d1d1d1;
	margin: 0 0 1.75em;
	min-width: inherit;
	padding: 0.875em;
}

fieldset > :last-child {
	margin-bottom: 0;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
  resize: none;
}

optgroup {
	font-weight: bold;
}


/**
 * 2.0 - Animations
 */

/**
 * 3.0 - Typography
 */

body,
button,
input {
	color: #333;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	line-height: 1.75;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: bold;
	margin: 0;
	text-rendering: optimizeLegibility;
	font-family: 'Montserrat', sans-serif;
	line-height: 1;
}

h1 {
  color: rgba(255,255,255,0.4);
  font-size: 54px;
  text-transform: uppercase;
  line-height: 44px;
  text-indent: -3px;
}

h2 {
  color: #0a71b1;
  font-family: 'Libre Baskerville', serif;
	font-size: 24px;
	font-weight: normal;
  font-style: italic;
  line-height: 1.4;
}

h3 {
  /* not yet defined */
}

h4 {
  color: #333;
  font-family: 'Libre Baskerville', serif;
  font-size: 18px;
  margin: 40px 0 10px;
}

h5 {
  color: #333;
  font-size: 13px;
  letter-spacing: 2px;
  line-height: 20px;
  padding: 20px 0 20px 50px;
  position: relative;
}
h5::before {
  border-top: 1px solid #333;
  bottom: 0;
  content: "";
  display: inline-block;
  margin-left: -50px;
  position: absolute;
  top: 0;
  width: 50px;
}

h6 {
  color: #333;
  font-size: 13px;
}

p {
	margin: 0 0 1em;
	line-height: 2;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	border: 0 solid #1a1a1a;
	border-left-width: 4px;
	color: #686868;
	font-size: 19px;
	font-size: 1.1875rem;
	font-style: italic;
	line-height: 1.4736842105;
	margin: 0 0 1.4736842105em;
	padding: 0 0 0 1.263157895em;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote p {
	margin-bottom: 1.4736842105em;
}

blockquote cite,
blockquote small {
	color: #1a1a1a;
	display: block;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.75;
}

blockquote cite:before,
blockquote small:before {
	content: "\2014\00a0";
}

blockquote em,
blockquote i,
blockquote cite {
	font-style: normal;
}

blockquote strong,
blockquote b {
	font-weight: 400;
}

blockquote > :last-child {
	margin-bottom: 0;
}

address {
	font-style: italic;
	margin: 0 0 1.75em;
}

code,
kbd,
tt,
var,
samp,
pre {
	font-family: Inconsolata, monospace;
}

pre {
	border: 1px solid #d1d1d1;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.3125;
	margin: 0 0 1.75em;
	max-width: 100%;
	overflow: auto;
	padding: 1.75em;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

code {
	background-color: #d1d1d1;
	padding: 0.125em 0.25em;
}

abbr,
acronym {
	border-bottom: 1px dotted #d1d1d1;
	cursor: help;
}

mark,
ins {
	background: #007acc;
	color: #fff;
	padding: 0.125em 0.25em;
	text-decoration: none;
}

big {
	font-size: 125%;
}


/**
 * 4.0 - Elements
 */

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

body {
	background: #fff;
	/* Fallback for when there is no custom background color defined. */
}

hr {
	background-color: #4d5058;
	border: 0;
	height: 1px;
	margin: 0 0 1.75em;
}

ul,
ol {
	margin: 0 0 1.75em 1.25em;
	padding: 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
	margin-left: 1.5em;
}

li > ul,
li > ol {
	margin-bottom: 0;
}

dl {
	margin: 0 0 1.75em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 0 1.75em;
}

img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to container width. */
	vertical-align: middle;
}

del {
	opacity: 0.8;
}

table,
th,
td {
	border: 1px solid #4d5058;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.75em;
	table-layout: fixed;
	/* Prevents HTML tables from becoming too wide */
	width: 100%;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

th {
	border-width: 0 1px 1px 0;
	font-weight: 700;
}

td {
	border-width: 0 1px 1px 0;
}

th,
td {
	padding: 0.4375em;
}

/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.7);
	font-family: 'Montserrat', sans-serif;
}

:-moz-placeholder {
	color: rgba(255, 255, 255, 0.7);
	font-family: 'Montserrat', sans-serif;
}

::-moz-placeholder {
	color: rgba(255, 255, 255, 0.7);
	font-family: 'Montserrat', sans-serif;
	opacity: 1;
	/* Since FF19 lowers the opacity of the placeholder by default */
}

:-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.7);
	font-family: 'Montserrat', sans-serif;
}


/**
 * 5.0 - Forms
 */

/**
 * 6.0 - Navigation
 */

/**
 * 6.1 - Links
 */

a {
	color: #0a71b1;
	text-decoration: none;
}

a:hover,
a:active {
	color: #0a71b1;
  text-decoration: underline;
}

a:hover,
a:focus,
a:active {
	outline: 0;
}

.entry-content a,
.entry-summary a,
.taxonomy-description a,
.logged-in-as a,
.comment-content a,
.pingback .comment-body > a,
.textwidget a,
.entry-footer a:hover,
.site-info a:hover {
	box-shadow: 0 1px 0 0 currentColor;
}

.entry-content a:hover,
.entry-content a:focus,
.entry-summary a:hover,
.entry-summary a:focus,
.taxonomy-description a:hover,
.taxonomy-description a:focus,
.logged-in-as a:hover,
.logged-in-as a:focus,
.comment-content a:hover,
.comment-content a:focus,
.pingback .comment-body > a:hover,
.pingback .comment-body > a:focus,
.textwidget a:hover,
.textwidget a:focus {
	box-shadow: none;
}


/**
 * 6.2 - Menus
 */

.site-header-main {
  border-left: 1px solid rgba(5, 52, 74, 0.4);
  height: 100vh;
  position: fixed;
  right: 0;
  width: 20%;
  z-index: 999;
}

#navigation-wrapper {
  margin-top: 50px;
}

.site-branding > a {
  display: block;
  height: auto;
  margin: 0 auto;
  width: 215px; /* .site-branding img -> (width - margin) */
}

.site-branding img {
  margin-left: -35px;
  max-width: none;
  width: 250px;
}

#site-navigation {
  margin: 50px auto 0;
  width: 215px; /* same ad .site-branding > a */
}

#site-navigation ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

#site-navigation a {
  display: inline-block;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 32px;
  text-transform: uppercase;
}

#site-navigation a.current-menu-item,
#site-navigation a:hover,
#site-navigation a:active {
  color: #36a662;
  text-decoration: none;
}

.social-navigation.mobile {
  display: none;
}

/* Menu mobile */
/* .menu-icon start */
.menu-icon {
	width: 28px;
	height: 19px; /* 23 effective w/ animation */
	position: relative;
  cursor: pointer;
}

.menu-icon span,
.menu-icon {
	transition: all 300ms ease;
}

.menu-icon span {
	background-color: #fff;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.hamburger span {
	height: 3px;
	-webkit-transform:  translateY(8px);
	-moz-transform:     translateY(8px);
	-ms-transform:      translateY(8px);
	-o-transform:       translateY(8px);
	transform:          translateY(8px);
}
.hamburger .second {
	-webkit-transform:  translateY(1px);
	-moz-transform:     translateY(1px);
	-ms-transform:      translateY(1px);
	-o-transform:       translateY(1px);
	transform:          translateY(1px);
}
.hamburger .third {
	-webkit-transform:  translateY(15px);
	-moz-transform:     translateY(15px);
	-ms-transform:      translateY(15px);
	-o-transform:       translateY(15px);
	transform:          translateY(15px);
}

.hamburger.expand .second {
  -webkit-transform:  translateY(-2px);
	-moz-transform:     translateY(-2px);
	-ms-transform:      translateY(-2px);
	-o-transform:       translateY(-2px);
	transform:          translateY(-2px);
}

.hamburger.expand .third {
  -webkit-transform:  translateY(18px);
	-moz-transform:     translateY(18px);
	-ms-transform:      translateY(18px);
	-o-transform:       translateY(18px);
	transform:          translateY(18px);
}
/* .menu-icon end */

/**
 * 7.0 - Accessibility
 */


/**
 * 8.0 - Alignments
 */

.wrapper {
  margin: 0 auto;
  width: 80%;
}

.col-2 > div {
	float: left;
	width: 50%;
}

.col-3 > div { /* see '.grid-sizer' and '.grid-gutter' for width details */
  float: left;
  margin-right: 3.845%;
  width: 30.77%;
}

.col-3 > div:last-child {
  margin-right: 0;
}

.clean-list {
  list-style: outside none none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

p.strong {
  font-weight: bold;
}

section {
  position: relative;
  z-index: 50;
  overflow: hidden;
}

section > * {
  z-index: 100;
}

/**
 * 9.0 - Clearings
 */
.hidden {
	display: none !important;
	visibility: hidden;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

.newline {
	display: block;
}

/**
 * 10.0 - Widgets
 */

/**
 * 11.0 - Content
 */

/**
 * 11.1 - Header
 */

#menu-toggle {
	display: none;
}

/**
 * 11.2 - Homepage
 */

.section-content {
  width: 80%;
}

.triangle-separator {
  left: 0;
  max-width: none;
  position: absolute;
  right: 0;
  width: 100%;
}
.triangle-separator.top {
  top: 0;
  bottom: auto;
}
.triangle-separator.bottom {
  top: auto;
  bottom: 0;
}

/* social navigation */
.social-navigation a {
  display: inline-block;
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 12px;
  text-indent: -99999px;
}
.social-navigation a:last-child {
  margin-right: 0;
}

/* linkedin */
.social-navigation a.linkedin {
	background: url('images/linkedin.svg') no-repeat center;
}
.social-navigation a.linkedin:before {
	content: url('images/linkedin_hover.svg');
	width: 0;
	height: 0;
	visibility: hidden;
}
.social-navigation a.linkedin:hover {
	background: url('images/linkedin_hover.svg') no-repeat center;
}

/* facebook */
.social-navigation a.facebook {
	background: url('images/facebook.svg') no-repeat center;
}
.social-navigation a.facebook:before {
	content: url('images/facebook_hover.svg');
	width: 0;
	height: 0;
	visibility: hidden;
}
.social-navigation a.facebook:hover {
	background: url('images/facebook_hover.svg') no-repeat center;
}

/* instagram */
.social-navigation a.instagram {
	background: url('images/instagram.svg') no-repeat center;
}
.social-navigation a.instagram:before {
	content: url('images/instagram_hover.svg');
	width: 0;
	height: 0;
	visibility: hidden;
}
.social-navigation a.instagram:hover {
	background: url('images/instagram_hover.svg') no-repeat center;
}

/* youtube */
.social-navigation a.youtube {
	background: url('images/youtube.svg') no-repeat center;
}
.social-navigation a.youtube:before {
	content: url('images/youtube_hover.svg');
	width: 0;
	height: 0;
	visibility: hidden;
}
.social-navigation a.youtube:hover {
	background: url('images/youtube_hover.svg') no-repeat center;
}

.bg-text {
  color: rgba(10, 113, 177, 0.05);
  font-size: 255px;
  font-weight: bold;
  position: absolute;
  z-index: -1;
}

/* HOME */
section#home {
  background-image: url('images/home.jpg');
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body.mobile-safari section#home,
body.mobile-andorid-stock section#home {
  background-attachment: scroll;
}

section#home .section-content {
  height: 100%;
}

section#home .wrapper {
  position: relative;
  padding-top: 50px;
  height: 100%;
}

#home-title {
  max-width: 300px;
  position: absolute;
  right: 0;
  bottom: 230px;
}

#home-title > span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 22px;
  font-weight: bold;
  margin-left: 5px;
}

/* PROFILO */
section#profilo {
  padding: 50px 0;
}

section#profilo .bg-text {
  left: -10%;
}

section#profilo h2 {
  max-width: 530px;
}

section#profilo h5 {
  margin: 70px 0 30px;
}

section#profilo .subtitle {
  margin-bottom: 0;
  font-weight: bold;
}
section#profilo .subtitle a {
  font-weight: normal;
}


/* SETTORI */
section#settori {
  background-color: #e7f1f6;
  padding: 250px 0;
}

section#settori .bg-text {
  color: rgba(255, 255, 255, 0.4);
  right: -10%;
}

section#settori h2 {
  margin-bottom: 80px;
  max-width: 400px;
}

section#settori .col-3 img {
  width: 100%;
}

section#settori .col-3 h5 {
  margin: 50px 0 10px;
}

section#settori .col-3 div:nth-child(1) h5 {
  max-width: 300px;
}
section#settori .col-3 div:nth-child(2) h5 {
  max-width: 240px;
}
section#settori .col-3 div:nth-child(3) h5 {
  max-width: 170px;
}

section#settori .col-3 div:nth-child(2) {
  margin-top: 80px;
}

section#settori .col-3 div:nth-child(3) {
  margin-top: 160px;
}

/* OFFERTA */
section#offerta {
  padding: 100px 0;
}

section#offerta .bg-text {
  left: -10%;
}

.hidden-gallery {
  display: none;
}

/* fluid 3 columns */
.grid-sizer,
.grid-item { width: 30.77%; }
/* 2 columns */
.grid-item--big { width: 65.385%; }
.grid-gutter { width: 3.845%; }

.grid-item img {
  max-width: none;
  width: 100%;
}

.grid-item > a {
  color: #fff;
  display: block;
  font-weight: bold;
  letter-spacing: 3px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
}

.grid-item--small > a > span {
  display: inline-block;
  max-width: 150px;
}

.grid-item--big > a  > span {
  display: inline-block;
  max-width: 250px;
}

.grid-item:hover > a {
  color: #fff;
  text-decoration: none;
}

.grid-item > .overlay {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.grid-item:hover > .overlay {
  opacity: 1;
}

.grid-item > .overlay {
  background: rgba(10, 113, 177, 0.7);
}

/* CONTATTI */
section#contatti {
  background-color: #074466;
  padding: 230px 0 100px;
  color: #fff;
}

section#contatti .bg-text {
  right: -10%;
}

section#contatti h6,
section#contatti a {
  color: #fff;
}

section#contatti .dino-profile {
  float: left;
  min-width: 250px;
  width: 40%;
  padding-bottom: 50px;
}

section#contatti .dino-profile h6 {
  letter-spacing: 3px;
  line-height: 1.6;
  margin: 20px 0 5px;
}

section#contatti .dino-profile > span {
  display: block;
  margin-top: 5px;
}

section#contatti .contact-form {
  float: left;
}

section#contatti .contact-form textarea {
  height: 100px;
}

section#contatti .contact-form span.wpcf7-list-item {
  margin: 0;
}

/**
 * 11.3 - 404
 */

#page404 p {
	font-size: 36px;
	padding: 130px 0 0;
  margin: 0;
  line-height: 1;
}

body.error404 #footer {
	position: absolute;
	bottom: 0;
	width: 100%;
}

/**
 * 11.4 - Privacy
 */
body.page-privacy .site-header-main {
  border-left: 0;
  height: auto;
  position: relative;
  margin: 0 auto;
  background-color: #fff;
}

body.page-privacy #site-navigation {
  display: none;
}

body.page-privacy #content {
  margin-bottom: 50px;
  margin-top: 30px;
}

body.page-privacy .site-branding > a {
  position: relative;
  left: 0;
}

body.page-privacy #navigation-wrapper {
  margin-top: 40px;
}

body.page-privacy #menu-toggle {
  display: none;
}

/**
 * 11.5 - Footer
 */
#footer {
  padding: 50px 0;
  background-color: #074566;
  color: #0a71b1;
  font-size: 12px;
}

#footer > div {
  float: left;
}

#footer .left {
  width: 80%; /* width as .section-content */
}
#footer .right {
  width: 20%; /* width ad .site-header-main */
}

#footer .right > div {
  width: 215px; /* width as ##site-navigation */
  margin: 0 auto;
}

#footer .right a {
  position: relative;
  z-index: 9999;
}

/**
 * 12.0 - Cookie
 */

#cookie-notice {
  font-family: 'Montserrat', sans-serif;
}

.cookie-notice-container {
  padding: 8px;
}

#cookie-notice a {
  color: #000000;
  background: #FFFFFF;
  border-radius: 0;
  padding: 0.1em 0.5em 0.3em;
}



/**
 * 13.0 - Media Queries
 */

/**
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
/*noinspection ALL*/
@-ms-viewport {
	width: device-width;
}

/*noinspection ALL*/
@viewport {
	width: device-width;
}

/**
 * 13.1 - Portrait
 */
@media screen and (orientation:portrait) {
  section#home {
    background-image: url("images/home_portrait.jpg");
  }
}

/**
 * 13.2 - width < 1920px
 */
@media screen and (max-width: 1919px) {
  /* HEADER */
  .site-branding > a {
    width: 151px;
  }

  .site-branding img {
    margin-left: -25px;
    width: 176px;
  }

  #site-navigation {
    width: 151px;
  }

  #site-navigation a {
    font-size: 13px;
  }

  /* FOOTER */
  #footer .right > div {
    margin: 0 auto;
    width: 151px;
  }
}

/**
 * 13.3 - width < 1366px
 */
@media screen and (max-width: 1365px) {
  .wrapper {
    width: 90%;
  }
}

/**
 * 13.4 - width < 1280px
 */
@media screen and (max-width: 1279px) {
  .site-header-main {
    width: 25%;
  }

  .section-content {
    width: 75%;
  }

  /* CONTATTI */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  textarea {
    width: 100%;
  }

  section#contatti .dino-profile {
    width: 35%;
    min-width: auto;
  }

  section#contatti .contact-form {
    width: 60%;
  }
}

/**
 * 13.5 - width < 980px
 */
@media screen and (max-width: 979px) {
  /* HEADER */
  .site-branding > a {
    left: 5%;
    position: absolute;
    top: 15px;
    width: 112px;
  }

  .site-branding img {
    margin-left: -18px;
    width: 130px;
  }

  .site-header-main {
    background-color: #084567;
    border-left: 0 none;
    height: 85px;
    position: fixed;
    width: 100%;
    z-index: 999;
  }

  #site-navigation {
    display: none;
    background-color: #084567;
    width: 100%;
    position: fixed;
    top: 85px;
    margin: 0;
  }

  #menu-toggle {
    display: block;
    padding: 2px 0;
    position: absolute;
    right: 5%;
    top: 31px;
  }

  .section-content {
    width: 100%;
  }

  #site-navigation a {
    border-top: 1px solid rgba(5, 52, 74, 0.4);
    display: inline-block;
    height: 100%;
    line-height: 50px;
    text-align: center;
    width: 100%;
  }

  .social-navigation.desktop {
    display: none;
  }
  .social-navigation.mobile {
    border-top: 1px solid rgba(5, 52, 74, 0.4);
    display: block;
    text-align: center;
    height: 50px;
  }

  .social-navigation.mobile span {
    display: inline-block;
  }

  #site-navigation .social-navigation a {
    border-top: 0 none;
    float: left;
    height: 50px;
    line-height: 50px;
    width: 32px;
  }

  /* SETTORI */
  section#settori {
    padding: 150px 0;
  }

  /* CONTATTI */
  section#contatti {
    background-color: #074466;
    color: #fff;
    padding: 150px 0 50px;
  }

  /* FOOTER */
  #footer .right {
    margin-right: 5%;
    width: 15%;
  }

  #footer .right > div {
    margin: 0;
    text-align: right;
    width: auto;
  }
}

/**
 * 13.6 - width < 980px
 */
@media screen and (max-width: 979px) and (orientation:landscape) {
  /* HEADER */
  #home-title {
    bottom: 140px;
    max-width: 210px;
  }

  #home-title > span {
    font-size: 15px;
  }

  h1 {
    font-size: 35px;
    line-height: 30px;
    text-indent: 0;
  }
}

/**
 * 13.7 - width < 768px
 * above iPad with vetical device
 */
@media screen and (max-width: 767px) and (orientation:portrait) {
  /* HEADER */
  #home-title {
    bottom: 140px;
    max-width: 210px;
  }

  #home-title > span {
    font-size: 15px;
  }

  h1 {
    font-size: 35px;
    line-height: 30px;
    text-indent: 0;
  }
}

/**
 * 13.8 - width < 768px
 */
@media screen and (max-width: 767px) {
  .wrapper {
    width: 75%;
  }

  .site-branding > a {
    left: 12.5%;
  }

  #menu-toggle {
    right: 12.5%;
  }

  .col-3 > div {
    margin-right: 0;
    width: 100%;
  }

  /* SETTORI */
  section#settori {
    padding: 100px 0;
  }

  section#settori h2 {
    margin-bottom: 40px;
  }

  section#settori .col-3 div:nth-child(2) {
    margin-top: 40px;
  }

  section#settori .col-3 div:nth-child(3) {
    margin-top: 40px;
  }

  /* OFFERTA */
  section#offerta {
    padding: 50px 0;
  }

  .grid-sizer,
  .grid-item { width: 47.06%; }
  /* 2 columns */
  .grid-item--big { width: 100%; }
  .grid-gutter { width: 5.88%; }

  /* CONTATTI */
  section#contatti {
    padding: 100px 0 30px;
  }

  section#contatti .dino-profile {
    width: 45%;
  }

  section#contatti .contact-form {
    width: 55%;
  }

  /* FOOTER */
  #footer {
    padding: 20px 0;
  }
}

/**
 * 13.9 - width < 640px
 * with horizontal device
 */
@media screen and (max-width: 639px) and (orientation:landscape) {
  /* sistema altezze delle cose (credo head title)
   magari controllo la galleria perchè sennò in orizzontale non si stringe */
}

@media screen and (max-width: 639px) {
  section#contatti .dino-profile {
    text-align: center;
    width: 100%;
  }

  section#contatti .contact-form {
    margin-top: 50px;
    width: 100%;
  }
}

/**
 * 13.10 - width < 480px
 */
@media screen and (max-width: 479px) {
  h2 {
    font-size: 22px;
  }

  .wrapper {
    width: 85%;
  }

  .site-branding > a {
    left: 7.5%;
  }

  #menu-toggle {
    right: 7.5%;
  }

  /* OFFERTA */
  .grid-item > a {
    letter-spacing: 2px;
  }

  .grid-sizer,
  .grid-item { width: 100%; }
  /* 2 columns */
  .grid-item--big { width: 100%; }
  .grid-gutter { width: 5.88%; }


  /* FOOTER */
  #footer .left {
  text-align: center;
    width: 100%;
  }

  #footer .right {
    margin-right: 0;
    width: 100%;
  }

  #footer .right > div {
    text-align: center;
  }

  #footer {
    padding: 30px 0;
  }
}

/**
 * 13.11 - width < 360px
 */
@media screen and (max-width: 359px) {
  .site-branding > a {
    width: 130px;
  }

  .site-branding img {
    margin-left: 0;
  }
}

/**
 * 13.12 - height < 800px
 */
@media screen and (max-height: 799px) {
  #home-title {
    bottom: 180px;
  }
}

/**
 * 13.13 - height < 600px
 */
@media screen and (max-height: 599px) {
  #home-title {
    bottom: 80px;
  }
}

/**
 * 13.14 - height < 300px
 */
@media screen and (max-height: 299px) {
  /* HEADER */
  .site-branding img {
  	margin-left: -15px;
  	width: 100px;
  }

  .site-branding > a {
  	top: 10px;
  	width: 85px;
  }

  .site-header-main {
  	height: 60px;
  }

  #menu-toggle {
    top: 18px;
  }

  #site-navigation {
    top: 60px;
  }

  #home-title {
    bottom: 40px;
  }

  #page404 p {
  	padding: 100px 0 0;
  }
}



/* update settori */

.col-3.clearfix {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  align-items: baseline;
}

.col-3 > div {
  float: left;
  margin-right: 3%;
  width: 30%;
  margin-bottom: 50px;
}