html {
     font-size: 10px;
     line-height: 10px;
}
 html, body, header, section, .wrapper, .layout, nav {
     margin: 0;
     padding: 0;
     width: 100%;
     margin: 0 auto;
     vertical-align: top;
     box-sizing: border-box;
     z-index: 1;
}
 body, header, section {
     max-width: 1920px;
}
 body {
     font-family: 'Montserrat', Helvetica;
     font-weight: normal;
     text-rendering: optimizeLegibility;
}
 a:hover, .button:hover, #video:hover, header .wrapper, header .layout {
     -o-transition: 0.5s;
     -ms-transition: 0.5s;
     -moz-transition: 0.5s;
     -webkit-transition: 0.5s;
     transition: 0.5s;
}
 .layout {
     padding: 0 50px;
     max-width: 1750px;
}
 .wrapper {
     position: relative;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
}
 header {
     white-space: nowrap;
     position: fixed;
     z-index: 2;
}
 header .layout {
     padding-top: 60px;
}
 header div#logo {
     width: 210px;
     height: 30px;
     display: inline-block;
     background-image: url('../img/TraversoLogo.png');
     background-position: center center;
     background-repeat: no-repeat;
     background-size: 100%;
}
 header nav {
     width: 100%;
     width: calc(100% - 200px);
     display: inline-block;
     text-align: right;
}
 header nav ul {
     list-style: none;
     margin-top: 0;
}
 header nav li {
     display: inline-block;
     padding-right: 50px;
}
 header nav li a {
     color: #ffffff;
     border: none;
     border-bottom: solid 2px transparent;
     padding: 12px 0;
     text-decoration: none;
     display: block;
     text-transform: uppercase;
     font-size: 18px;
     line-height: 0.78;
     letter-spacing: 0.72px;
}
 header nav li a:hover, header nav li a.active {
     background: transparent;
     border-bottom-color: #e30613;
}
 section#slider .wrapper {
     background-image: url('../img/TraversoHeader.jpg');
     display: inline-block;
}
 section#slider #slide {
     padding-bottom: 380px;
}
 section#slider #slide h4 {
     color: #ffffff;
     font-size: 72px;
     line-height: 1.08;
     font-weight: 700;
     margin-top: 300px;
     margin-bottom: 80px;
}
 section#slider #slide .button {
     padding: 26px 54px;
     text-decoration: none;
     display: inline-block;
     text-transform: uppercase;
     font-size: 16px;
     line-height: 1.13;
     font-weight: 700;
     letter-spacing: 1.92px;
     color: #ffffff;
     background: #e30613;
}
 section#slider #slide .button:hover {
     background: #000000;
}
 section#nosotros .layout {
     padding: 240px 200px;
}
 section#nosotros .left, section#nosotros .right {
     width: 49%;
     display: inline-block;
     box-sizing: border-box;
     vertical-align: top;
}
 section#nosotros .left {
     padding-right: 50px;
}
 section#nosotros .right {
     padding-left: 50px;
     background-image: url('../img/NosotrosSide.jpg');
     height: 640px;
     background-size: cover;
}
 section#nosotros h3 {
     width: 320px;
     text-transform: uppercase;
     font-size: 18px;
     line-height: 0.1em;
     margin: 10px 0 20px;
     border-bottom: 2px solid #e30613;
     color: #b3b3b3;
}
 section#nosotros h3 span {
     background: #ffffff;
     padding-right: 10px;
}
 section#nosotros h2 {
     font-size: 48px;
     line-height: 1.17;
     font-weight: 700;
     color: #000000;
}
 section#nosotros p {
     font-size: 16px;
     line-height: 1.5;
     color: #919191;
}
 section#nosotros .icon {
     width: 49%;
     display: inline-block;
     font-size: 16px;
     font-weight: 700;
     line-height: 3.5;
     color: #000000;
     box-sizing: border-box;
     margin-top: 20px;
}
 section#nosotros .icon img {
     vertical-align: middle;
     margin-right: 10px;
}
 section#traverso {
     background-image: linear-gradient(to bottom, #f8f8f8, #f2f2f2);
}
 section#traverso .wrapper {
     background-image: url('../img/TraversoTitle.png');
     background-position: top;
     background-size: auto;
     background-position-y: -10px;
}
 section#traverso .layout {
     padding: 120px 200px;
}
 section#traverso h2 {
     font-size: 48px;
     line-height: 1.17;
     font-weight: 700;
     color: #000000;
     text-align: center;
}
 section#traverso p {
     font-size: 16px;
     line-height: 1.5;
     color: #000000;
     text-align: center;
     text-transform: uppercase;
}
 section#traverso #video {
     width: 100%;
     max-width: 1080px;
     margin: 20px auto;
     background: #e30613;
}
 section#traverso #video:hover {
     -webkit-filter: grayscale(49%);
     filter: grayscale(49%);
}
 section#productos .layout {
     padding: 240px 200px;
}
 section#productos .left, section#productos .right {
     width: 49%;
     display: inline-block;
     box-sizing: border-box;
     vertical-align: top;
}
 section#productos .right {
     padding-left: 50px;
}
 section#productos .left {
     padding-right: 50px;
     min-height: 640px;
}
 section#productos h3 {
     width: 320px;
     text-transform: uppercase;
     font-size: 18px;
     line-height: 0.1em;
     margin: 10px 0 20px;
     border-bottom: 2px solid #e30613;
     color: #b3b3b3;
}
 section#productos h3 span {
     background: #ffffff;
     padding-right: 10px;
}
 section#productos h2 {
     font-size: 48px;
     line-height: 1.17;
     font-weight: 700;
     color: #000000;
}
 section#productos .icon {
     width: 35%;
     display: inline-block;
     font-size: 16px;
     line-height: 1.5;
     color: #919191;
     box-sizing: border-box;
     margin-top: 5px;
}
 section#productos .icon span {
     color: #e30613;
     padding-right: 10px;
}
 section#productos .button {
     padding: 26px 54px;
     text-decoration: none;
     display: inline-block;
     text-transform: uppercase;
     font-size: 16px;
     line-height: 1.13;
     font-weight: 700;
     letter-spacing: 1.92px;
     color: #ffffff;
     background: #e30613;
     margin-top: 50px;
}
 section#productos .button:hover {
     background: #000000;
}
 section#servicios .wrapper {
     background-image: url('../img/ServiciosTitle.png');
     background-position: top;
     background-size: auto;
}
 section#servicios .layout {
     padding: 180px 200px;
}
 section#servicios .box {
     width: 22%;
     display: inline-block;
     font-size: 16px;
     line-height: 1.5;
     color: #b3b3b3;
     box-sizing: border-box;
     padding: 40px 0;
     margin-top: 5px;
     margin-right: 3%;
     text-align: center;
     border-radius: 12px;
     box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.13);
     background-color: #ffffff;
     vertical-align: top;
     min-height: 315px;
}
 section#servicios .box.last {
     margin-right: 0;
}
 section#servicios .box .cicle {
     width: 94.5px;
     height: 94.5px;
     box-shadow: 0 10px 20px 0 rgba(227, 6, 19, 0.35);
     background-color: #e30613;
     border-radius: 49%;
     margin: -80px auto 40px auto;
}
 section#servicios .box .cicle img {
     padding: 25%;
}
 section#servicios .box h5 {
     font-size: 16px;
     line-height: 1.5;
     color: #000000;
}
 section#servicios .box span {
     width: 54px;
     height: 0;
     display: block;
     margin: 0 auto;
     border-bottom: solid 2px #e30613;
}
 section#contacto .layout {
     padding: 240px 200px 140px 200px;
}
 section#contacto .left, section#contacto .right {
     width: 49%;
     display: inline-block;
     box-sizing: border-box;
     vertical-align: top;
}
 section#contacto .left {
     padding-right: 50px;
}
 section#contacto .right {
     background-size: cover;
     margin-top: -80px;
}
 section#contacto h3 {
     width: 320px;
     text-transform: uppercase;
     font-size: 18px;
     line-height: 0.1em;
     margin: 10px 0 20px;
     border-bottom: 2px solid #e30613;
     color: #b3b3b3;
}
 section#contacto h3 span {
     background: #ffffff;
     padding-right: 10px;
}
 section#contacto h2 {
     font-size: 48px;
     line-height: 1.17;
     font-weight: 700;
     color: #000000;
}
 section#contacto .icon {
     width: 100%;
     display: inline-block;
     font-size: 16px;
     line-height: 1.5;
     color: #919191;
     box-sizing: border-box;
     margin-top: 20px;
}
 section#contacto .icon img {
     vertical-align: middle;
     margin-right: 10px;
}
 section#contacto #form {
     border-radius: 12px;
     box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.13);
     background-color: #ffffff;
     vertical-align: top;
     min-height: 520px;
     padding: 60px 0 60px 60px;
}
 section#contacto input, section#contacto textarea {
     padding: 20px 25px;
     margin: 10px auto;
     width: 80%;
     border-radius: 4px;
     border: solid 2px #efefef;
     background-color: #ffffff;
     line-height: 1.5;
     font-size: 16px;
     color: #000000;
}
 section#contacto .button {
     padding: 26px 54px;
     text-decoration: none;
     display: inline-block;
     text-transform: uppercase;
     font-size: 16px;
     line-height: 1.13;
     font-weight: 700;
     letter-spacing: 1.92px;
     color: #ffffff;
     background: #e30613;
     margin-top: 20px;
}
 section#contacto .button:hover {
     background: #000000;
}
 section#foot {
     background-color: #e30613;
     text-align: center;
}
 section#foot p {
     margin: 0;
}
 section#foot img {
     padding: 80px 0;
}
 section#copy {
     background-color: #b4000b;
     text-align: center;
}
 section#copy p {
     padding: 30px 0;
     color: #ffffff;
     font-size: 16px;
     line-height: 1.5;
     margin: 0;
}
 .toggle, [id^=drop] {
     display: none;
}
 .message {
     font-size: 14px;
     line-height: 24px;
}
 @media only screen and (max-width: 1600px) {
     .layout {
         padding-right: 50px !important;
         padding-left: 50px !important;
    }
}
 @media only screen and (max-width: 1024px) {
     header nav li a {
         font-size: 16px;
    }
     header nav li {
         padding-right: 25px;
    }
     section#slider #slide h4 {
         font-size: 64px;
    }
     section#nosotros h2, section#productos h2, section#traverso h2, section#contacto h2 {
         font-size: 42px;
    }
     section#nosotros .left, section#nosotros .right, section#productos .left, section#productos .right, section#contacto .left, section#contacto .right {
         width: 100%;
         padding-bottom: 50px;
         padding-left: 0;
         padding-right: 0;
    }
     section#servicios .box {
         width: 46%;
         padding-bottom: 50px;
    }
     section#nosotros .layout, section#nosotros .layout, section#productos .layout, section#contacto .layout {
         padding: 80px 200px;
    }
     section#traverso #player{
         width: 100%;
         height: auto;
    }
     nav {
         margin: 0;
    }
     header nav li a:hover, header nav li a.active {
         border-bottom-color: transparent;
         color: #e30613;
    }
     .toggle + a, .menu {
         display: none;
    }
     .toggle {
         display: block;
         padding: 0 20px;
         color: #FFF;
         font-size: 20px;
         line-height: 60px;
         text-decoration: none;
         border: none;
         margin-top: -10px;
    }
     .toggle:hover {
         color: #ffffff;
    }
     [id^=drop]:checked + ul {
         display: block;
    }
     nav ul li {
         display: block;
         width: 100%;
    }
     nav ul ul .toggle, nav ul ul a {
         padding: 0 40px;
    }
     nav ul ul ul a {
         padding: 0 80px;
    }
     nav a:hover, nav ul ul ul a {
         background-color: #000000;
    }
     nav ul li ul li .toggle, nav ul ul a {
         background-color: #212121;
    }
     nav ul ul {
         float: none;
         position: static;
         color: #ffffff;
    }
     nav ul ul li:hover > ul, nav ul li:hover > ul {
         display: none;
    }
     nav ul ul li {
         display: block;
         width: 100%;
    }
     nav ul ul ul li {
         position: static;
    }
}
 @media only screen and (max-width: 800px){
     section#slider #slide h4 {
         font-size: 52px;
    }
     section#nosotros h2, section#productos h2, section#traverso h2, section#contacto h2 {
         font-size: 34px;
    }
}
 @media only screen and (max-width: 600px){
     section#slider #slide h4 {
         font-size: 34px;
    }
     section#nosotros h2, section#productos h2, section#traverso h2, section#contacto h2 {
         font-size: 22px;
    }
     section#contacto #form{
         padding-left: 20px;
         padding-right: 20px;
    }
}
 @media only screen and (max-width: 480px){
     section#slider #slide h4 {
         font-size: 28px;
    }
     section#nosotros h2, section#productos h2, section#traverso h2, section#contacto h2 {
         font-size: 14px;
    }
     section#slider #slide .button, section#nosotros p, section#nosotros .icon, section#productos .icon, section#productos .button, section#servicios .box h5, section#servicios .box, section#contacto .icon{
         font-size: 14px;
    }
     .toggle{
         font-size: 16px;
    }
     section#productos .icon {
         width: 48%;
    }
     section#servicios .box {
         width: 100%;
    }
     section#contacto #form {
         padding: 60px 0 60px 15px;
    }
     .layout {
         padding-right: 10px !important;
         padding-left: 10px!important;
    }
     section#nosotros .icon{
         width: 100%;
    }
     section#nosotros .right{
         height: 320px;
    }
     section#nosotros .right{
         height: 320px;
    }
}