/* CSS GENERAL */
:root{
  --variable-color-base: #437775;
  /* --variable-color-sec: #21498f; */
}


body{
  overflow-x: hidden;
  background-color: #5294a330;
}

/* loading */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 99999;
  /* makes sure it stays on top */
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(https://www-tastemade-com.akamaized.net/dist/images/cookbook/preloader-6b4f61fcbb.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}


/* CSS GENERAL */


/* HEADER
 */
 .navbar-toggler-icon {
  display: block;
  width: 1.5em;
  height: 0.15em;
  vertical-align: middle;
  content: "";
  background: #517a78!important;
  background-size: 100% 100%;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
 #navHergu{
   background-color: white;
  
 }

 #navHergu li a{
  color: #437775;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-family: 'roboto';
  font-weight: 400;
 }
 #navHergu li {
margin-right: 0.2em;
margin-left: 0.2em;
 }
 #ulIcons{
  border-left: 1px solid #b1b1b1;
 
 }

 #ulIcons i{
   color: var(--variable-color-base);
 }
 .navbar-brand {
  display: inline-block;
  padding-top: 0rem;
  padding-bottom: 0rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: contawrap;
}
.navbar-brand img{
  width: 157px;
  position: absolute;
  margin-top: -1.7em;
}
.logo{
  transition: all 0.5s ease-in-out;
}

@media (min-width: 600px)
{
    .navbar.scrolling-navbar.top-nav-collapse {
      padding-top: 10px;
      padding-bottom: 10px;
  }
}
 /* HEADER
  */



  /* SLIDER
   */

   section.slider{
     margin-top: 3.4em;
   }
   .slick-slide img {
      display: block;
      width: 100%;
  }
   .slick-dots {
    top: 13em;
    right: 15px;
    list-style: none;
    position: absolute;
    
  }

  .slick-dots li button{
    color: transparent;
    width: 17px;
    border-radius: 23px;
    margin-bottom: 0.2em;
    height: 17px;
    cursor: pointer;

}


.slick-dots li button:before {
    color: transparent;
    width: 17px;
    border-radius: 23px;
    margin-bottom: 0.2em;
    height: 17px;
  }

  .slick-dotted.slick-slider {
    margin-bottom: 0px !important;
}

   /* SLIDER
   
   */
/* SUBSLIDER */
#subSlider{
  padding-top: 3em;
  padding-bottom: 3em;
}

#subSlider h1{
  font-family: 'poppins';
    font-weight: 800;
    color: var(--variable-color-base);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

#subSlider h5{
  font-family: 'poppins';
  font-weight: 100;
  color: gray;
}

.dividerSubSlider{
  height: 1px;
  width: 150px;
  background-color: rgb(179, 179, 179);
}

.lightFont{
  font-family: 'poppins';
  font-weight: 100;
}
/* SUBSLIDER */



   /* ABOUT */

#col1About{
  background: rgba(67,119,117,1);
  background: -moz-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(67,119,117,1)), color-stop(36%, rgba(77,133,130,1)), color-stop(100%, rgba(96,168,164,1)));
  background: -webkit-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
  background: -o-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
  background: -ms-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
  background: linear-gradient(to right, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#437775', endColorstr='#60a8a4', GradientType=1 );
  height: auto;
  width: 100%;
  padding-bottom: 4em;
  padding-top: 5em;
}

#col1About h1{
  font-family: 'poppins';
  font-weight: 800;
  color: white;
  text-transform: uppercase;
}
#col1About h5{
  font-family: "Poppins", sans-serif;
  color: rgb(201, 201, 201);
  text-transform: uppercase;
  
}

#col1About p{
  color: white;
  
}

#col2About{
  background: url(../img/slider/5.jpg) center center no-repeat fixed;
  background-size: cover ; 
  height: auto;
  
}

.homeIcon{
  width: 200px;
}

.h3mision{
  font-family: 'poppins';
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  margin-top: -1em;
  margin-bottom: 1em;
}
   /* ABOUT */



   /* PROYECTOS */
#proyectos{
  padding-top: 5em;
  padding-bottom: 5em;
}
#proyectos h2{
  font-family: 'poppins';
  font-weight: 800;
  color: var(--variable-color-base);
  text-transform: uppercase;
}
.iconProyectos{
  width: 60px;
  height: 60px;
}

.box10 .icon li a {
  text-align: center;
}

.box10:after,.box10:before,.box1:after,.box1:before,.box2 .inner-content:after,.box3:after,.box3:before,.box4:before,.box5:after,.box5:before,.box6:after,.box7:after,.box7:before{content:""}
.box1 .title,.box10 .title,.box4 .title,.box7 .title{letter-spacing:1px}
.box10 .title,.box11 .title,.box4 .title,.box5 .title,.box6 .box-content,.box7 .title{text-transform:uppercase}
.box10{box-shadow:0 0 3px rgba(0,0,0,.3)}
.box10 .icon li a,.box9 .icon li a{line-height:35px;border-radius:50%}
.box10{background:#000;overflow:hidden;position:relative}
.box10:after,.box10:before{
  
  border-width: 0 250px 200px;
  border-style: solid;
  border-color: transparent transparent var(--variable-color-base);
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  transform: translate(-55%,100%);
  transition: all .5s 0s cubic-bezier(.6,-.28,.735,.045);
}
.box10:after{
  border-width: 192px 340px;
  border-color: transparent #437775 #348c8d #26a1a4;
  top: 25%;
  transform: translate(-60%,100%);

}
/*********************** Demo - 10 *******************/
.box10{background:#000;overflow:hidden;position:relative}
.box10:after,.box10:before{border-width:0 180px 140px;border-style:solid;border-color:transparent transparent #437775;position:absolute;bottom:0;left:50%;z-index:1;transform:translate(-55%,100%);transition:all .5s 0s cubic-bezier(.6,-.28,.735,.045)}
.box10:after{border-width:150px 250px;border-color:transparent #26a1a4 #26a1a4 #348c8d;top:25%;transform:translate(-60%,100%)}
.box10:hover:before{transition:all .4s 0s cubic-bezier(.175,.885,.32,1.275);transform:translate(-55%,0);transition-delay:.2s}
.box10:hover:after{transition:all .4s 0s cubic-bezier(.175,.885,.32,1.275);transform:translate(-60%,0);transition-delay:0s}
.box10 img{width:100%;height:auto;opacity:1;transform:scale(1.1) translateY(3%);transition:all .5s ease 0s}
.box10:hover img{transform:scale(1.1) translateY(-3%);opacity:.4}
.box10 .box-content{padding:20px 0 0 20px;position:absolute;top:0;left:0;opacity:0;z-index:2;transform:translateY(20%);transition:all .5s ease 0s}
.box10:hover .box-content{opacity:1;transform:translate(0);transition-delay:.1s}
.box10 .title{font-size:23px;font-weight:800;color:#fff}
.box10 .icon{padding:0;margin:0;list-style:none}
.box10 .icon li{display:inline-block}
.box10 .icon li a{display:block;width:35px;height:35px;background:#26a1a4;font-size:18px;color:#fff;margin-right:10px;transition:all .3s ease 0s}
.box11 .icon li,.box11 .icon li a,.box11 .title,.box12 .icon li,.box12 .title{display:inline-block}
.box10 .icon li a:hover{transform:rotate(360deg)}
@media only screen and (max-width:990px){.box10{margin-bottom:20px}
}
@media only screen and (max-width:767px) and (min-width:600px){.box10:before{border-width:0 250px 240px}
.box10:after{border-width:260px 460px}
}
@media only screen and (max-width:599px) and (min-width:430px){.box:before{border-width:0 220px 120px}
.box10:after{border-width:260px 460px}
}

#nombreProyecto h1{

  font-family: 'poppins';
  font-weight: 800;
  color: var(--variable-color-base);
  text-transform: uppercase;
}

#containerInfoProyecto{
  padding-bottom: 5em;
}
#containerInfoProyecto i{
  font-size: 2rem;
  position: relative;
  margin-right: 0.6em;
  color: var(--variable-color-base);
}
#containerInfoProyecto .row .col-md-6 .col-1{
  margin-bottom: 1.5em;
}
              /* PROYECTO 1.PHP */
              .banner{
                 height: auto;
                 margin-bottom: 1em;
              }
              #contambreProyecto h1{
                font-family: 'poppins';
                font-weight: 800;
                color: var(--variable-color-base);
                text-transform: uppercase;
                letter-spacing: 1.5px;
              }
              #contambreProyecto h5{
                font-family: 'poppins';
                font-weight: 100;
                color: gray;
              }
              #myCarousel .nav a small {
                display:block;
              }
              #myCarousel .nav {
                background: #f3f3f3;
              }
              #myCarousel .nav a {
                  border-radius:0px;
              }
              .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
                font-family: 'poppins';
                font-weight: 800;
                color: var(--variable-color-base);
                text-transform: uppercase;
                letter-spacing: 1.5px;
                padding-top: 2em;
            }
              .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
                font-family: 'poppins';
                font-weight: 800;
               
                text-transform: uppercase;
                letter-spacing: 1.5px;
                padding-top: 2em;
                color: white;
                background: rgba(67,119,117,1);
                background: -moz-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
                background: -webkit-gradient(left top, right top, color-stop(0%, rgba(67,119,117,1)), color-stop(36%, rgba(77,133,130,1)), color-stop(100%, rgba(96,168,164,1)));
                background: -webkit-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
                background: -o-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
                background: -ms-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
                background: linear-gradient(to right, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#437775', endColorstr='#60a8a4', GradientType=1 );

            }

            .imagenesFloat{
              position: absolute;
              width: 80%;
            }
            .imagenesFloat img{
              width: 59%;
              opacity: 0;
            }
            .imgFloat1{
              float: right;
              margin-right: 2.5em;
            }

            .imgFloat2{
              margin-left: -3.6em;
            }

            @media only screen and (max-width:520px){

              .imgFloat1 {
                  float: right;
                  margin-right: 0em;
              }
              .imgFloat2 {
                margin-left: -1em;
            }

            }
          

            #contGaleriaProyecto h2{
              font-family: 'poppins';
              font-weight: 800;
              color: var(--variable-color-base);
              text-transform: uppercase;
            }
          
           
          /* PROYECTO 1.PHP */


   /* PROYECTOS */



/* CONTACTO */
#contacto{
  padding-top: 5em;
  padding-bottom: 5em;
}
#contacto h2{
  font-family: 'poppins';
    font-weight: 800;
    color: var(--variable-color-base);
    text-transform: uppercase;
}
.form-header{
  -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
  box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
  color: #fff;
  text-align: center;
  margin-top: -3.13rem;
  margin-bottom: 3rem;
  padding: 1rem;
  -webkit-border-radius: .125rem;
  border-radius: .125rem;
  background: rgba(67,119,117,1);
  background: -moz-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(67,119,117,1)), color-stop(36%, rgba(77,133,130,1)), color-stop(100%, rgba(96,168,164,1)));
  background: -webkit-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
  background: -o-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
  background: -ms-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
  background: linear-gradient(to right, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#437775', endColorstr='#60a8a4', GradientType=1 );
}


.form-header h3{
  font-family: 'poppins';
  font-weight: 100 !important;
}

.btn-floating i{
  color: white;
  font-size: 1.5rem;
}

.contIconContacto{
  background-color: var(--variable-color-base);
  width: 43px;
  height: 43px;
  padding-top: 0.6em;
  border-radius: 23px;
}

.md-form i{
  font-size: 1.4rem !important;
    padding-top: 0.4em;
    color: #cacaca !important;
}
/* CONTACTO */



   /* FOOTER */
.cta-area i{
  font-size: 2em;
  color: white;
  transition: all 0.3s ease-in-out;
}
.cta-area i:hover{
text-shadow: 1px 1px 5px black;
}
.cta-area h3{
  font-family: 'poppins';
  font-weight: 800;
  font-size: 1.8em;
  color: white;
  letter-spacing: 2px;
  padding-top: 0.2em;
}
   .section-full{
    padding-top: 5em;
    height: auto;
  }

  .section-full p{
    color: gray;
  }
  .section-full h6{
    font-family: 'poppins' sans-serif;
    font-weight: 800;

  }

  .section-full a{
    text-decoration: none;
    color: gray;
  }  
  .section-full a:hover{
    text-decoration: none;
    color: var(--variable-color-base) !important;
  }
  
   .cta-area {
    background: rgba(67,119,117,1);
    background: -moz-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(67,119,117,1)), color-stop(36%, rgba(77,133,130,1)), color-stop(100%, rgba(96,168,164,1)));
    background: -webkit-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
    background: -o-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
    background: -ms-linear-gradient(left, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
    background: linear-gradient(to right, rgba(67,119,117,1) 0%, rgba(77,133,130,1) 36%, rgba(96,168,164,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#437775', endColorstr='#60a8a4', GradientType=1 );
    padding: 60px 0;
  }
  

  
  footer {
    background: #222222;
  }
  
  footer .footer-nav {
    margin-top: -7px;
    margin-left: -2.5em
  }
  
  footer .footer-nav li {
    margin-top: 8px;
  }
  

  

  

  .single-footer-widget {
    margin-bottom: 30px;
  }
  
  .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid #507878;
  }
  
  .footer-bottom .footer-text a:hover {
    color: #00ff8c;
  }
  .footer-social a {
    font-size: 18px;
    margin: 0 5px;
    padding: 0 5px;
    display: inline-block;
    color: rgba(255, 255, 255, 0.5);
}
   /* FOOTER */




   /* MEDIA QUERIS */
   @media only screen and (max-width:920px){
    .box10 .title {
        font-size: 12px;
        font-weight: 800;
        color: #fff;
    }
    #subSlider i{
      margin-right: 0px !important;
      margin-left: 0px !important;
    } 
   }

   @media only screen and (max-width:720px){
        .slick-dots {
          top: 2em;
          right: 4px;
          list-style: none;
          position: absolute;
      }
        .banner {
            height: auto;
            margin-top: 3em;
            margin-bottom: 0.5em;
        }
            .navbar-brand img {
            width: 120px;
            position: absolute;
            margin-top: -1.3em;
        }
        .navbar-collapse {
          padding-top: 1em;
         
         }
        #ulIcons {
          border-left: 0px;
          padding-left: 1px !important;
      }
      .box10 .title {
        font-size: 32px;
        font-weight: 800;
        color: #fff;
    }



   }


   @media only screen and (max-width: 560px){
      .navbar-brand img {
        width: 115px !important;
        margin-top: -1.2em !important;

      }

        section.slider {
          margin-top: 2.6em;  
      }
      #subSlider {
        padding-top: 2em;
        padding-bottom: 2em;
    }
      #subSlider h1 {
        font-size: 1.5rem !important;
      }


      #col1About .col-12{
        padding-right: 1em !important;
        padding-left: 1em !important;
      }
      #col1About h1 {
        
        font-size: 1.6rem;
      
      }
      .homeIcon {
        width: 120px;
      }
      #proyectos h2 {

        font-size: 1.6rem;
     }
     .iconProyectos {
          width: 40px;
          height: 40px;
      }
      #contacto {
        padding-top: 0em;
        padding-bottom: 5em;
      }
      #contacto h2 {

        font-size: 1.6rem;
      }
      .cta-area h3 {
       
        font-size: 1em;
       
     }
      .cta-area i {
        font-size: 1.4em;
       
     }
     .footer-bottom {
        padding-top: 22px;
        border-top: 1px solid #507878;
    }
    .footer-social{
      margin-top: -18px;
    }
    #nombreProyecto h1 {
        font-family: 'poppins';
        font-weight: 800;
        font-size: 1.6rem;
        color: var(--variable-color-base);
        text-transform: uppercase;
    }

   }