@font-face {
      font-family: 'Loew-Regular';
      font-style: normal;
      font-weight: normal;
      src: local('Avenir LT Std 35 Light'), url('../fonts/Loew-Regular.otf') format('truetype');
   }
   

   @font-face {
      font-family: 'Loew-bold';
      font-style: normal;
      font-weight: normal;
      src: local('Avenir LT Std 35 Light'), url('../fonts/Loew-Bold.otf') format('truetype');
   }

   @font-face {
      font-family: 'Loew-heavy';
      font-style: normal;
      font-weight: normal;
      src: local('Avenir LT Std 35 Light'), url('../fonts/Loew-Heavy.otf') format('truetype');
   }

   @font-face {
      font-family: 'Loew-Medium';
      font-style: normal;
      font-weight: normal;
      src: local('Avenir LT Std 35 Light'), url('../fonts/Loew-Medium.otf') format('truetype');
   }
   
   body {
      margin: 0px;
      font-size: 14px;
      color: #4a4a4a;
      
   }
   
   * {
      font-family: Loew-Regular;
      line-height: 1.4;
      letter-spacing: .12px;
   }


/*
==================================================
COLORS & BACKGROUNDS
==================================================
*/

.c-style-red{
   color: #ef312b;
}

.bg-style-gray{
   background: #f6f6f6;
}

.bg-contact{
   background-image: url(../img/contact.jpg);
   background-size: cover;
}


/*
==================================================
FONTS
==================================================
*/

.bold{
   font-family: Loew-bold;
}

.heavy{
   font-family: Loew-heavy;
}

.medium{
   font-family: Loew-Medium;
}

/*
==================================================
BTN, INPUTS
==================================================
*/

/*li {
         overflow: hidden;
         
      }
      
       li a{
         
    color: rgba(0,0,0,0.2);
    font-weight: 700;
    text-shadow: none;
         
      }
      
      li a::before{
         color: #fff;
    content: attr(data-hover);
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
}
      
       li:hover a{
         -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);

         
      }

li a:hover::before{
         webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
opacity: 0;}*/

         
li a:hover{
   color: gray;
   transition: all .5s;
   
}


li a{
   color: white;
}
      
      

main div .section{
   height: 90vh;
}

.btn-contact{
   border: 2px solid rgba(255, 255, 255, 0.29);
   padding: 5px 10px;
   border-radius: 17px;
   background: transparent;
}

.btn-contact:hover, .btn-contact-2:hover{
       border: 2px solid rgba(246,41,12,1);
   background: white;
   color: red;
   transition: all 0.5s ease 0s;
}

.btn-contact-2:hover i{
      color: red;
   transition: all 0.5s ease 0s;
   
}

.btn-contact-2{
    border: 2px solid rgba(255, 255, 255, 0.29);
    padding: 7px 10px;
    border-radius: 17px;
    background: transparent;
}

.btn-send{
         border: 2px solid rgba(255, 255, 255, 0.29);
    padding: 5px 25px;
    border-radius: 17px;
    background: white;
   color: red;
      outline: none;
   transition: all 0.5s ease 0s;
}

.btn-send:hover{
         /*border: 2px solid white;*/
    padding: 5px 25px;
    border-radius: 17px;
    background: #464a4c;
   color: white;
      outline: none;
}



input:focus{
   outline: 0px transparent;
}

input{
   outline: transparent;
}

input, textarea{
   padding: 10px;
   border-radius: 35px;
   margin: 10px;
   border: 1px solid transparent;
   background: rgba(255, 255, 255, 0.28);
   color: white
}

textarea{
   border-radius: 10px;
}


.map-container {
	width: 100%;
}
.map-container iframe{
	width: 100%;
	display: block;
	pointer-events: none;
	position: relative; /* IE needs a position other than static */
}
.map-container iframe.clicked{
	pointer-events: auto;
}






::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: white;
}
::-moz-placeholder { /* Firefox 19+ */
  color: white;
}
:-ms-input-placeholder { /* IE 10+ */
  color: white;
}
:-moz-placeholder { /* Firefox 18- */
  color: white;
}
/*
==================================================
BTN, CONTAINERS
==================================================
*/
.line-b-footer{
   background: rgba(179,29,2,1);
background: -moz-linear-gradient(45deg, rgba(179,29,2,1) 0%, rgba(186,51,34,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(179,29,2,1)), color-stop(50%, rgba(186,51,34,1)), color-stop(51%, rgba(246,41,12,1)), color-stop(71%, rgba(240,47,23,1)), color-stop(100%, rgba(231,56,39,1)));
background: -webkit-linear-gradient(45deg, rgba(179,29,2,1) 0%, rgba(186,51,34,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: -o-linear-gradient(45deg, rgba(179,29,2,1) 0%, rgba(186,51,34,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: -ms-linear-gradient(45deg, rgba(179,29,2,1) 0%, rgba(186,51,34,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: linear-gradient(45deg, rgba(179,29,2,1) 0%, rgba(186,51,34,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b31d02', endColorstr='#e73827', GradientType=1 );
}

footer{

   padding: 60px 10px;
}

footer img{
   
}

.logo > img{
   width: 200px;
   transition: all 0.25s ease 0s;
}

.flex-header .menu-btn:checked ~ .menu{
    max-height: 320px;
}


.flex-header li{
   padding: 20px 13px;
}

.trust{
       background: #d91d16;
    padding: 0px 6px;
    /*margin: 0px 3px;*/
    margin-right: 3px;
   line-height: 1;
}

.s-p-icon{
   border-radius: 100%;
   border:1px solid gray;
   width: 100px;
}

.bg-camion-2{
   background-image: url(../img/img-servicios.jpg);
}

.img-camion-2{
       width: 450px;
}

.div-camion-2{
     position: relative;
     bottom: 70px;
     left: 290px;
}

main p{
   /*letter-spacing: 1px*/
   /*font-size: 12px;*/
}



   aside * {
      color: inherit;
   }
   
   aside > ul {
      height: 80% !important;
   }
   
   table {
/*      font-family: Arial, Helvetica, sans-serif;*/
/*      color: #666;*/
      font-size: 1.2rem;
      width: 100%;
/*      text-shadow: 1px 1px 0px #fff;*/
      
      /* margin: 20px; */
      border: #ccc 1px solid;
      border-radius: 3px;
/*      -moz-box-shadow: 0 1px 2px #d1d1d1;*/
/*      -webkit-box-shadow: 0 1px 2px #d1d1d1;*/
/*      box-shadow: 0 1px 2px #d1d1d1;*/
   }
   
/*
   table th {
      padding: 21px 25px 22px 25px;
      border-top: 1px solid #fafafa;
      border-bottom: 1px solid #e0e0e0;
      background: #ededed;
      background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
      background: -moz-linear-gradient(top, #ededed, #ebebeb);
   }
   
   table tr {
      text-align: center;
      padding-left: 20px;
   }
   
   table td {
      padding: 18px;
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #e0e0e0;
      border-left: 1px solid #e0e0e0;
      background: #fafafa;
      background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
      background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
   }
   
   table tr.even td {
      background: #f6f6f6;
      background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
      background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
   }
   
   table tr:hover td {
      background: #f2f2f2;
      background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
      background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
*/
   }
   /*fin estilos visuales de la tabla*/
   
   .table-container {
      /* width: 100%; */
      /* overflow-y: auto; */
      _overflow: auto;
      /* margin: 0 0 1em; */
   }
   /* añadimos las barras para dispositivos IOS */
   
   .table-container::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
   }
   
   .table-container::-webkit-scrollbar-thumb {
      border-radius: 8px;
      border: 3px solid #fff;
      background-color: rgba(0, 0, 0, .3);
   }
   
   .flue-color-blue {
      color: #2eaae1;
   }
   

   
   .bg-header {
      background-image: url(../img/main.jpg);
      height: 190vh;
      background-size: cover;
      background-repeat: no-repeat;
      background-position-x: 50%;
      background-position-y: 80%;
      /*   padding: 150px 0;*/
      height: 95%;
      /* height: 100vh; */
      /* height: 120vh; */
      padding-top: 50px;
      background-origin: border-box;
      
      overflow: hidden;
      width: 100%;
   }
   
   .bg-header-second {
      background-image: url(../img/bg-header-second.png);
      /*   height: 100vh;*/
      background-size: cover;
      background-repeat: no-repeat;
      /*   background-position-y: -1px;*/
      /*   padding: 150px 0;*/
      min-height: 20rem;
      background-origin: border-box;
      z-index: -1;
      overflow: hidden;
   }

.logo-scroll > img{
   width: 100px;
   transition: all 0.25s ease 0s;
}
   
   .header {
      transition: all 0.25s ease 0s, visibility 0.35s linear;
      background: linear-gradient(180deg, #3b3b3b, #bae8fe);
      background-size: 400% 400%;
      -webkit-animation: AnimationName 30s ease infinite;
      -moz-animation: AnimationName 30s ease infinite;
      animation: AnimationName 30s ease infinite;
      @-webkit-keyframes AnimationName {
         0% {
            background-position: 0% 50%
         }
         50% {
            background-position: 100% 50%
         }
         100% {
            background-position: 0% 50%
         }
      }
      @-moz-keyframes AnimationName {
         0% {
            background-position: 0% 50%
         }
         50% {
            background-position: 100% 50%
         }
         100% {
            background-position: 0% 50%
         }
      }
      @keyframes AnimationName {
         0% {
            background-position: 0% 50%
         }
         50% {
            background-position: 100% 50%
         }
         100% {
            background-position: 0% 50%
         }
      }
   }
   
   .flexus-logo {
      background-image: url(../img/flexus-logo.svg);
      width: 150px;
   }
   
   .flexus-title {
      font-family: 'Avenir LT Std 65 Medium';
      font-weight: normal;
      font-size: 170px;
      font-size: 9rem;
      color: black;
      margin: 0;
      line-height: .9;
   }
   
   .flexus-subtitle {
      font-family: 'Avenir LT Std 35 Light';
      font-weight: normal;
      font-size: 30px;
      font-size: 1.3rem;
      color: gray;
      margin: 0;
      letter-spacing: 17.5px;
      letter-spacing: 1.13rem;
      text-align: end;
      margin: 0rem 1rem;
   }
   
   .flexus-subtitle-2 {
      font-family: 'Avenir LT Std 35 Light';
      font-weight: bold;
      font-size: 30px;
      font-size: 1.3rem;
      color: #2eaae1;
      margin: 0;
      letter-spacing: 3.5px;
      letter-spacing: .05rem;
      margin: 0rem .5rem;
   }
   
   .main-description {
      white-space: pre-line;
      text-align: center;
      font-size: 28px;
      font-size: 1.8rem;
      color: #2eaae1;
   }
   
   .c-blue {
      color: #2eaae1;
   }
   
   .flex-header {
      display: inline-flex;
      width: 100%;
      z-index: 1;
   }
   
   .border-home {
      border: 2px solid #0094b9;
      border-radius: 10px;
   }
   
   .bg-home {
      background-image: url(../img/bg-home.png);
      background-size: cover;
      background-position-y: -6px;
   }
   
   .bg-browser {
      background-image: url(../img/browser-tools.png);
      background-size: cover;
   }
   
   .bg-screens {
      /*   background-image: url(../img/bg-screens.png)*/
   }
   
   #box {
      width: 100%;
      height: 30rem;
      /* border: 5px black solid; */
      overflow: hidden;
      /* background-color: #F2F2F2; */
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      bottom: 0;
   }
   
   #contentContainer {
      position: relative;
      width: 100%;
      display: flex;
      height: 100%;
      justify-content: flex-start;
      align-items: center;
   }
   
   .thing {
      transition-property: transform;
      transition-timing-function: ease-in-out;
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50px;
      background-color: rgba(46, 170, 225, 0.18);
      opacity: .5;
   }
   /*
   header > .icon{
   display: none;
   opacity: 0; 
   } 
   
*/

.no-menu{
   max-height: 0px;
}
   
   @media (max-width: 1200px) {}
   
   @media (max-width: 992px) {}
   
   @media (max-width: 768px) {
      
      .logo > img{
         width: 100px;
         transition: all 0.25s ease 0s;
         
      }
      
      .logo{
         padding: 5px 15px !important;
         transition: all 0.25s ease 0s;
      }
      
      .div-camion-2{
         position: static;
         width: 300px;
         margin-bottom: 50px;
      }
      
      
      
      
      .flex-header {
         transition: all 0.25s ease 0s, visibility 0.35s linear;
         background: linear-gradient(180deg, #3b3b3b, #bae8fe);
         background-size: 400% 400%;
         -webkit-animation: AnimationName 30s ease infinite;
         -moz-animation: AnimationName 30s ease infinite;
         animation: AnimationName 30s ease infinite;
         @-webkit-keyframes AnimationName {
            0% {
         background-position: 0% 50%;}
            50% {
         background-position: 100% 50%;}
            100% {
         background-position: 0% 50%;}
         }
         @-moz-keyframes AnimationName {
            0% {
         background-position: 0% 50%;}
            50% {
         background-position: 100% 50%;}
            100% {
         background-position: 0% 50%;}
         }
         @keyframes AnimationName {
            0% {
         background-position: 0% 50%;}
            50% {
         background-position: 100% 50%;}
            100% {
         background-position: 0% 50%;}
         }
         box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
      }
      
      
      /*
.flex-navbar > *{
   display: none;
   opacity: 0; 
}
*/
      header {
         transition: all 0.3s;
      }
      .flex-navbar {
         justify-content: space-between;
      }
      .flex-navbar .flexus {
         /*
   display: inherit;
   opacity: 1;
*/
         font-size: 2rem;
      }
      header .icon {
         /*
   display: inherit;
   opacity: 1;
*/
/*         font-size: 2rem;
      }
      html {
         font-size: 70%;
      }*/
   }
}
   
   @media (max-width: 568px) {
      html {
         font-size: 12px;
      }
   }
   
   .flex-img-thumbnail {
      min-width: 200px !important;
      width: 210px !important;
      height: auto !important;
      border: 10px solid #f1f1f1;
      box-shadow: 0px 0px 1px 1px #ddd;
      margin: 10px;
      position: relative;
      align-self: baseline;
      background: white;
   }
   
   aside > ul li ul li a {
      color: inherit;
   }
   
   pre {
      position: relative;
      background: #edf9ff;
      word-break: break-all;
/*      word-wrap: break-word;*/
      white-space: pre;
      /* font-size: 1.1rem; */
      letter-spacing: .5px;
      color: #0085c2;
      border-left: 3px solid #008ecf;
      padding: 5px;
      display: flex;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      flex: 1;
/*      width: 100%;*/
   }
   
pre code {
    display: block;
    overflow-x: auto;
   -webkit-overflow-scrolling: touch;
    padding: 0px 1.1rem;
   white-space: pre;
   
    /* width: 100; */
}


   .browser {
      /*
    background-image: url(../img/navegadormini.png); 
    background-size: 107%;
    background-position: -9px -10px;
    background-repeat: no-repeat;
    background: white;
    border: 1px solid #c2c2c2;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
*/
      background: white;
      border: 1px solid #c2c2c2;
   }

.flex-header .menu-icon .navicon{
       background: #ffffff;
}

.flex-header .menu-icon .navicon:before, .flex-header .menu-icon .navicon:after{
       background: #ffffff !important;
}