/* BASE STYLES / RESET
-----------------------------------------------------------------------------

* { padding: 0; margin: 0; box-sizing: border-box; line-height: 1.6em; border: 0; vertical-align: baseline; }
 button::-moz-focus-inner {
 padding: 0;
 border: 0
}
a { color: #438dcd; text-decoration: none; }
a:hover { color: #59adf6; text-decoration: underline; }
p { margin-bottom: 1.2em; }
h1 { font-size: 64px; max-width: 1200px; line-height: 1.111em; margin-bottom: .5em; }
h2 { font-size: 30px; line-height: 1.111em; margin-bottom: .5em; }
h3 { font-size: 24px; line-height: 1.333em; margin-bottom: .5em; }
h4 { font-size: 18px; line-height: 1.5em; margin-bottom: .333em; }
h5 { font-size: 14px; line-height: 1.6em; margin-bottom: .25em; }
h6 { font-size: 12px; text-transform: uppercase; line-height: 1.6em; margin-bottom: .25em; }
.group:after { content: ""; display: table; clear: both; }
img { max-width: 100%; height: auto; }
ol,
ul { list-style: none; }
input,
textarea { border: 1px solid #ddd; }
*/
/* GRID
-----------------------------------------------------------------------------*/

.units-container:after,
.units-row:after { content: ""; display: table; clear: both; }
.units-container:after,
.units-row:after { content: ""; display: table; clear: both; }
.units-container { /* it's the trick to not collapse padding-top in the child element */ padding-top: 1px; margin-top: -1px; }
.units-row { margin-bottom: 1.618em; }
.width-100,
.unit-100 { width: 100%; }
.width-90,
.unit-90 { width: 90%; }
.width-80,
.unit-80 { width: 80%; }
.width-75,
.unit-75 { width: 75%; }
.width-70,
.unit-70 { width: 70%; }
.width-66,
.unit-66 { width: 66.6%; }
.width-65,
.unit-65 { width: 65%; }
.width-60,
.unit-60 { width: 60%; }
.width-50,
.unit-50 { width: 50%; }
.width-40,
.unit-40 { width: 40%; }
.width-35,
.unit-35 { width: 35%; }
.width-33,
.unit-33 { width: 33.3%; }
.width-30,
.unit-30 { width: 30%; }
.width-25,
.unit-25 { width: 25%; }
.width-20,
.unit-20 { width: 20%; }
.width-10,
.unit-10 { width: 10%; }
input.width-100,
input.unit-100 { width: 98.6%; }
textarea.width-100,
textarea.unit-100 { width: 98.8%; }
select.width-100,
select.unit-100 { width: 99.4%; }
.units-row .unit-90,
.units-row .unit-80,
.units-row .unit-75,
.units-row .unit-70,
.units-row .unit-66,
.units-row .unit-65,
.units-row .unit-60,
.units-row .unit-50,
.units-row .unit-40,
.units-row .unit-35,
.units-row .unit-33,
.units-row .unit-30,
.units-row .unit-25,
.units-row .unit-20,
.units-row .unit-10 { float: left; margin-left: 3%; }
.units-row .unit-90:first-child,
.units-row .unit-80:first-child,
.units-row .unit-75:first-child,
.units-row .unit-70:first-child,
.units-row .unit-66:first-child,
.units-row .unit-65:first-child,
.units-row .unit-60:first-child,
.units-row .unit-50:first-child,
.units-row .unit-40:first-child,
.units-row .unit-35:first-child,
.units-row .unit-33:first-child,
.units-row .unit-30:first-child,
.units-row .unit-25:first-child,
.units-row .unit-20:first-child,
.units-row .unit-10:first-child { margin-left: 0; }
.units-row .unit-90 { width: 89.7%; }
.units-row .unit-80 { width: 79.4%; }
.units-row .unit-75 { width: 74.25%; }
.units-row .unit-70 { width: 69.1%; }
.units-row .unit-66 { width: 65.66666666666666%; }
.units-row .unit-65 { width: 65.66666666666666%; }
.units-row .unit-60 { width: 58.800000000000004%; }
.units-row .unit-50 { width: 48.5%; }
.units-row .unit-40 { width: 38.2%; }
.units-row .unit-35 { width: 31.333333333333332%; }
.units-row .unit-33 { width: 31.333333333333332%; }
.units-row .unit-30 { width: 27.9%; }
.units-row .unit-25 { width: 22.75%; }
.units-row .unit-20 { width: 17.6%; }
.units-row .unit-10 { width: 7.3%; }
.unit-push-90,
.unit-push-80,
.unit-push-75,
.unit-push-70,
.unit-push-66,
.unit-push-65,
.unit-push-60,
.unit-push-50,
.unit-push-40,
.unit-push-35,
.unit-push-33,
.unit-push-30,
.unit-push-25,
.unit-push-20,
.unit-push-10 { position: relative; }
.unit-push-90 { left: 92.7%; }
.unit-push-80 { left: 82.4%; }
.unit-push-75 { left: 77.25%; }
.unit-push-70 { left: 72.1%; }
.unit-push-66 { left: 68.66666666666666%; }
.unit-push-65 { left: 68.66666666666666%; }
.unit-push-60 { left: 61.800000000000004%; }
.unit-push-50 { left: 51.5%; }
.unit-push-40 { left: 41.2%; }
.unit-push-35 { left: 34.33333333333333%; }
.unit-push-33 { left: 34.33333333333333%; }
.unit-push-30 { left: 30.9%; }
.unit-push-25 { left: 25.75%; }
.unit-push-20 { left: 20.6%; }
.unit-push-10 { left: 10.3%; }
.units-row .unit-push-right { float: right; }
.centered,
.unit-centered { float: none !important; margin: 0 auto !important; }
.unit-padding { padding: 1.618em; }
.units-padding .unit-100,
.units-padding .unit-90,
.units-padding .unit-80,
.units-padding .unit-75,
.units-padding .unit-70,
.units-padding .unit-66,
.units-padding .unit-65,
.units-padding .unit-60,
.units-padding .unit-50,
.units-padding .unit-40,
.units-padding .unit-35,
.units-padding .unit-33,
.units-padding .unit-30,
.units-padding .unit-25,
.units-padding .unit-20,
.units-padding .unit-10 { padding: 1.618em; }
.units-split .unit-90,
.units-split .unit-80,
.units-split .unit-75,
.units-split .unit-70,
.units-split .unit-66,
.units-split .unit-65,
.units-split .unit-60,
.units-split .unit-50,
.units-split .unit-40,
.units-split .unit-35,
.units-split .unit-33,
.units-split .unit-30,
.units-split .unit-25,
.units-split .unit-20,
.units-split .unit-10 { margin-left: 0; }
.units-split .unit-90 { width: 90%; }
.units-split .unit-80 { width: 80%; }
.units-split .unit-75 { width: 75%; }
.units-split .unit-70 { width: 70%; }
.units-split .unit-66 { width: 66.6%; }
.units-split .unit-65 { width: 65%; }
.units-split .unit-60 { width: 60%; }
.units-split .unit-50 { width: 50%; }
.units-split .unit-40 { width: 40%; }
.units-split .unit-35 { width: 35%; }
.units-split .unit-33 { width: 33.3%; }
.units-split .unit-30 { width: 30%; }
.units-split .unit-25 { width: 25%; }
.units-split .unit-20 { width: 20%; }
.units-split .unit-10 { width: 10%; }

/* RESPONSIVE
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
.mobile-width-100 { width: 100%; }
.units-row .unit-90,
 .units-row .unit-80,
 .units-row .unit-75,
 .units-row .unit-70,
 .units-row .unit-66,
 .units-row .unit-65,
 .units-row .unit-60,
 .units-row .unit-50,
 .units-row .unit-40,
 .units-row .unit-35,
 .units-row .unit-33,
 .units-row .unit-30,
 .units-row .unit-25,
 .units-row .unit-20,
 .units-row .unit-10 { width: 100%; float: none; margin-left: 0; margin-bottom: 1.618em; }
.unit-push-90,
 .unit-push-80,
 .unit-push-75,
 .unit-push-70,
 .unit-push-66,
 .unit-push-65,
 .unit-push-60,
 .unit-push-50,
 .unit-push-40,
 .unit-push-35,
 .unit-push-33,
 .unit-push-30,
 .unit-push-25,
 .unit-push-20,
 .unit-push-10 { left: 0; }
.units-row .unit-push-right { float: none; }
.units-mobile-50 .unit-90,
 .units-mobile-50 .unit-80,
 .units-mobile-50 .unit-75,
 .units-mobile-50 .unit-70,
 .units-mobile-50 .unit-66,
 .units-mobile-50 .unit-65,
 .units-mobile-50 .unit-60,
 .units-mobile-50 .unit-40,
 .units-mobile-50 .unit-30,
 .units-mobile-50 .unit-35,
 .units-mobile-50 .unit-33,
 .units-mobile-50 .unit-25,
 .units-mobile-50 .unit-20,
 .units-mobile-50 .unit-10 { float: left; margin-left: 3%; width: 48.5%; }
.units-mobile-50 .unit-90:first-child,
 .units-mobile-50 .unit-80:first-child,
 .units-mobile-50 .unit-75:first-child,
 .units-mobile-50 .unit-70:first-child,
 .units-mobile-50 .unit-66:first-child,
 .units-mobile-50 .unit-65:first-child,
 .units-mobile-50 .unit-60:first-child,
 .units-mobile-50 .unit-40:first-child,
 .units-mobile-50 .unit-35:first-child,
 .units-mobile-50 .unit-30:first-child,
 .units-mobile-50 .unit-33:first-child,
 .units-mobile-50 .unit-25:first-child,
 .units-mobile-50 .unit-20:first-child,
 .units-mobile-50 .unit-10:first-child { margin-left: 0; }
}
/* SPECIFIC STYLES
-----------------------------------------------------------------------------

body { color: #333; font-size: 18px; font-family: 'Roboto', sans-serif; }
header { background-color: #FAFAFA; width: 100%; color: white; padding: 20px 30px; height: 85px; }
.title { margin-top: 20%; }
.title img { border: 12px solid #FAFAFA; }
p { color: #444; }
h1,
h2,
h3 { font-family: 'Spectral', serif; font-weight: 400; }
h1 a { text-align: center; display: inline-block; color: #ffffff; background-color: #0371ff; border-radius: 8px; padding: 5px 10px 5px 10px; }
h1 a:hover { color: white; }
#icons img { max-width: 170px; margin: 50px auto 0px auto; display: block; }
#icons h2 { text-align: center; margin-top: 10px; }
.logo { float: left; max-width: 250px; padding-top: 5px; }
#nav { float: right; padding-top: 10px; }
#nav li { display: inline; margin-left: 20px; font-family: 'Spectral', serif; font-weight: 300; }
#nav a { color: black; text-decoration: none; }
#nav a:hover { text-decoration: underline; }
#footer { max-width: 1000px; margin: 0px auto; [disabled]border-top: 12px solid #FAFAFA; padding: 30px 0; }
#footer p { color: #999; font-size: 15px; }
.intro { font-size: 24px; padding-bottom: 10px; text-align: center; }
.inner { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }
.copyright { float: left;  }
input { border: 1px solid #ddd; }
textarea { border: 1px solid #ddd; }
*/

/* SMALL SCREENS ---------------------------------------------------- */

@media only screen and (max-width: 800px) {
header { text-align: center; height: 150px; }
h1 { font-size: 44px; }
.inner { padding: 30px 10px; }
.intro { font-size: 20px; }
.logo { float: none; }
#nav { float: none; padding-top: 10px; text-align: center; }
#nav li { margin: 0 7px; font-size: 16px; }
.headline { font-size: 42px; margin-top: 200px; }
#footer { margin: 0 10px; }
.copyright { float: none; }
.soc { float: left; }
.feature { max-width: 100%; float: none; margin: 1%; }
.feature:last-child { margin-right: 1%; }
.feature:first-of-type { margin-left: 1%; }
.unit-80 { width: 100%; }
}

/* XX. Large devices (less than 1200px) */
@media (max-width: 1199.98px) {
}

/* XX. Large tablets (less than  992px) */
@media (max-width: 991.98px) {
.main-header { padding: 15px 0; }
.main-header .row { position: relative; }
.main-header .row > div { position: static; }
#menu-button { position: relative; display: inline-block; width: 35px; height: 27px; border-top: 5px solid #000; border-bottom: 5px solid #000; margin-top: 5px; }
#menu-button:before { content: ''; position: absolute; background: #000; height: 5px; width: 100%; left: 0; top: 0; bottom: 0; margin: auto; }
#nav > ul { display: none; text-align: left; position: absolute; width: calc(100% - 30px); left: 15px; padding: 20px; top: 76px; background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); }
#nav > ul > li { display: block; margin: 0 !important; }
#nav > ul > li > a { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
#nav li { font-size: 16px; }
#nav a { padding: 5px 0; }
.menu-caret { position: absolute; right: 0; width: 35px; height: 35px; }
.menu-caret:before { content: ''; position: absolute; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #000; margin: auto; left: 0; right: 0; top: 0; bottom: 0; }
#nav > ul ul { display: none; position: inherit; width: 100%; opacity: 1; visibility: visible; box-shadow: none; left: 0; top: 0; }
#nav > ul ul li a { padding: 5px 15px; }
aside { margin-top: 80px; }
.contact-right { margin-top: 80px; }
}

/* XX. Medium devices (less than  768px) */
@media (max-width: 767.98px) {
.copyright { text-align: center; margin-top: 10px; }
}

/* XX. Small devices (less than  576px) */
@media (max-width: 575.98px) {
.banner h1 { font-size: 2rem; }
}


/* Visreal Productions Extras */