* {
  margin: 0;
  padding: 0;
}

 /* START BANNER COOKIES  */
#overbox3 {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 999999;
  display: block;
}
#infobox3 {
  margin: auto;
  position: relative;
  top: 0px;
  height: 58px;
  width: 100%;
  text-align: center;
  background-color: #eeeeee;
}
#infobox3 p {
  line-height:58px;
  font-size:12px;
  text-align: center;
}
#infobox3 p a {
  margin-right:5px;
  text-decoration: underline;
}

 /* END BANNER COOKIES  */

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Roboto';
}
.logoidresponsive{
    display:none;
}

.logo {
  float: left;
  width: 100%;
  text-align: center;
}
.title,#titulo,#subtitulo,.logo,.menu,#header2{
    z-index:1;
}
.title {

    margin-top: 0px;
  
    float:right;
    
    }
#titulo,#subtitulo{
    font-family: 'Roboto'; 
     text-align: left;
    position:relative;
    margin-left: -110px; 
}
#titulo{
    font-size: 21px;
    top: 23px;
}
#subtitulo{
    font-size: 11.5px;
    top:15px;
}
.logoid {
  width: 65px;
  padding-top: 5px;
  margin-left:-100px;
  /* margin-bottom: -8%; */
}

#text1{
    color:white;
    padding-top: 55px;
    
    }
#text2{
 color:white;
    padding-top: 35px;
}
#trabajah, #contactosh, #centrosh, #deteccionh, #indiceh{
    border-right: 2px solid white;

}
#indiceh{
    border-left: 2px solid white;
}
#logoTitle {
  padding-top: 0.5em;
  padding-bottom: 7.5em;
  width: 100%;
  background: linear-gradient(90deg, #4783C9, rgba(0, 0, 0, 0.7));
}


#text1div,#text2div{
    border-radius: 8px;
}

header {
  color:white;
  position: relative;

}
#header2{
    height:100px;
      
}
.imagen{
  background: red;
position: relative;
margin: 0 0;



}
.imgPos{
  
  width: 100%;
  /* margin-top: 7em; */
  margin-bottom: 0;

  
}



@media (min-width: 800px) {
  .imgPos{
    min-height: 798px;
    
  }
}

.hidde-for-carrousel{
  display: none;
}

.navList li a{
  font-size: 155%;
}

@media screen and (min-width:1036px) {
  .logo {
    width: 100%;
    max-width: 200px;
    
  }
  .title {
    margin-left: 100px;
    text-align: center;
  }
}






/*---------------formato del menú desplegable---------------*/
/*---------------índice---------------*/
.indicef ul ul a {
  line-height: 120%;
  padding: 10px 15px;
}

.indicef ul ul li {
  float: none;
  width: 150px
}

.indicef:hover {
  text-decoration: none;
  color: skyblue;
}

ul #indiceh:hover ul {
  display: block;
  background-color: #4783C9
}

ul #indiceh:hover .element2 {
  color: skyblue;
}

.indicef {
  text-decoration: none;
  color: white;
}

/*---------------deteccion---------------*/
ul #deteccionh:hover ul {
  display: block;
  background-color: #4783C9;
}

ul #deteccionh:hover .element3 {
  color: skyblue;
}

/*---------------centros---------------*/
#centrot {
  width: 300px;
}

ul #centrosh:hover .element4 {
  color: skyblue;
  text-decoration: none;
}

.centrof {
  color: white;
  padding: 2px;
  padding-left: 10px;
}

.centrof:hover {
  text-decoration: none;
  color: skyblue;
}

ul #centrosh:hover ul {
  display: block;
  background-color: #4783C9;
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-animation: 7s opacityFullItsOp;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

/*---------------menu---------------*/
#external-link {
  margin: 4px;
}

.menu {
  color: white;
  position: relative;
  background-color: gray;
  height: 30px;
  width: 100%;
  text-decoration: overline;
  text-decoration: underline;
  text-align: center;
}

ul li ul {
  display: none;
  position: absolute;
  text-align: left;
  color: white;
}

.menuofform {
  position: absolute;
  background-color: black;
  height: 40px;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
  text-align: center;
}

ul li {
  display: inline-block;
  line-height: 30px;
  padding: 0px 10px 0px 10px;
  color: white;
  text-decoration: none;
}

.element1:hover, .element2:hover, .element3:hover,  .element5:hover, .element6:hover, .element7:hover {
  text-decoration: none;
  color: dimgray;
  -webkit-font-smoothing: subpixel-antialiased;
}

.element1:before, .element5:before, .element6:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -5px;
  left: -1px;
  background-color: dimgray;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.7s ease-in-out 0s;
  transition: all 0.7s ease-in-out 0s;
}

.element1:hover:before, .element2:hover:before, .element3:hover:before, .element4:hover:before, .element5:hover:before, .element6:hover:before, .element7:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.element1, .element2, .element3, .element4, .element5, .element6, .element7 {
  font-family: 'Roboto';
  position: relative;
  font-size: 13px;
  color: white;
  transition: 0.6s ease;
  border-bottom: 2px solid while;
  -webkit-font-smoothing: subpixel-antialiased;
}

.element1:focus, .element2:focus, .element3:focus, .element4:focus, .element5:focus, .element6:focus, .element7:focus {
  text-decoration: none;
  color: white;
}

.contaright {
  position: relative;
  height: 100%;
  width: 50%;
  float: right;
}

.shadow {
  -moz-box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(0, 0, 0, 0.4), -12px 0 15px -4px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(0, 0, 0, 0.4), -12px 0 15px -4px rgba(0, 0, 0, 0.4);
  box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(0, 0, 0, 0.4), -12px 0 15px -4px rgba(0, 0, 0, 0.4);
  padding-top: 50px;
  height: auto;
}

.hidden {
  opacity: 0;
}

.visible {
  opacity: 1;
}

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #4783C9;
}

.foot {
  text-align: center;
}

/*---------------small menu---------------*/
.dropside {
  
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  opacity: 1;
  overflow-x: hidden;
  transition: 0.5s;
  background-color: #4783C9;
  padding-top: 60px;
}
.navbar-nav > *{
  padding-top: 3%;
  padding-right: 10%;
  padding-left: 10%;
  
}
.navbar-nav > li {
  line-height: 1.3em;
}
.navbar-nav > li > a {
  color: aliceblue;
}
.navbar-nav > li> div{
  background: #4783C9;
  margin-left: 5em;
  padding: 3em;
  width: 75%;
}

.dropside .item {
  text-decoration: none;
  font-size: 1.4em;
  font-family: 'Francois One', sans-serif;
  padding: 10px;
  color: black;
  position: relative;
  display: block;
  transition: 0.3s;
  text-transform: uppercase;
}


.dropside .item:hover, .offcanvas .item:focus {
  color: #600;
}

.dropside .close:hover, .offcanvas .close:focus {
  color: #600;
}

.dropside .close {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 70px;
  margin-left: 50px;
  text-decoration: none;
  color: black;
  transition: 0.5s;
  font-weight: bold;
}

.bars {
  position: fixed;
  color: gray;
  font-size: 50px;
  cursor: pointer;
  margin-left: 2%;
  transition: 0.3s;
  display: none;
}

.bars:hover, .bars:focus {
  color: #EAC67A;
}
/* deleted
#MargenArtificial{
    display:none;
    margin-bottom: 100px;
} */
.div1-1,.div1-2{
    opacity: 0;
    display:none;
}

/*---------------Menus responsive---------------*/
@media screen and (min-width:1500px) {
    .div1,.div2{
       width:1px;
        
    }
    body{
        background-color:red;
    }
    #MargenArtificial{
        margin-bottom: 400px;
    } 
}
@media screen and (min-width:1400px){
    #MargenArtificial{
        margin-bottom: 300px;
    } 
}
@media screen and (min-width:1300px){
    #MargenArtificial{
        margin-bottom: 200px;
    } 
}
@media screen and (min-width:1200px){
   #MargenArtificial{
        display:block;
    }
    
}

@media screen and (max-width:1200px) {
    .title{
        margin-top: -20px;
    }
    #titulo{
        font-size:18px;
    }
    #subtitulo{
        font-size:10px; 
    }
    
}
@media screen and (max-width:1150px) {

    .element1, .element2, .element3, .element4, .element5, .element6, .element7 {
     font-size: 10px;   
    }
    #titulo{
        font-size: 15px;
    }
    #subtitulo{
        font-size: 8.3px;
    }
    .logo{
        width: 20%;
    }
    .title{
        margin-top: 0px;
    }
}
@media screen and (max-width:1000px) {
.element1, .element2, .element3, .element4, .element5, .element6, .element7 {
     font-size: 8px;   
    padding: 0px;
    margin:0px;
    }
    .title{
     padding: 0px;
    margin:0px;   
    }
    #titulo{
        font-size: 14.5px;
        margin-left: -95px;
    }
    #subtitulo{
        font-size: 8px;
        margin-left: -95px;
    }
    .logoid{
        width: 60px;
    }
    .external-link{
        display:none;
    }
}
@media screen and (max-width:850px) {
.title {
    display: none;
  }
    .bars {
    display: block;
    color: black;
    z-index: 2;
    top: 3%;
    } 
    .logo{
        margin-left:90%;
        display:none;
        z-index: 2;
    }
    .logoidresponsive{
        display:block;
         width: 50px;
        margin-top: -60px;
        margin-left: 600px;
    }
    #titulo{
        font-size: 19px;
    }
    #subtitulo{
        font-size: 10.5px;
    }
    #titulo,#subtitulo{
        margin-left: 60px;
        margin-top: 500px;
    }
}
@media screen and (max-width:675px) {
    #titulo{
        font-size: 15px;
    }
    #subtitulo{
        font-size: 8.3px;
    }
    #titulo,#subtitulo{
        margin-top: 100px;
    }
    .logoidresponsive{
        margin-left: 500px;
        width:45px;
    }
}
    @media screen and (max-width:575px){
     .logoidresponsive{
        margin-left: 450px;
        width:45px;
    }   
    }
@media screen and (max-width:530px) {
      .firstrowa, .firstrowb, .firstrowc, .firstrowd, .firstrowe, .firstrowf {
        width: 100%;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        font-size: 1.8em;
        float: left;
        clear: both;
      }
        #subtitulo{
            margin-left: 40px;
            font-size:7.7px;
        }
         #titulo{
             font-size:14px;
             margin-top: -50px;
            margin-left: 40px;
        }

    .logoidresponsive{
            margin-left: 400px;
        }
}
    @media screen and (max-width:475px){
        #subtitulo{
            display:none;
        }
        #titulo{
            font-size:12px;
        }
        .logoidresponsive{
            margin-left:350px;
            margin-top: -30px;
        }
    }

@media screen and (max-width:420px){
        .logoidresponsive{
            margin-left:150px;
            margin-top:40px;
        }
        #titulo{
            font-size:12px;
        }
       .element5,.element6{
            font-size:6px;
        }
}
@media screen and (max-width:375px){
        #titulo{
            font-size:11px;
        }
}
@media screen and (max-width:350px){
        #titulo{
            font-size:10px;
        }
}
@media screen and (max-width:330px) {
      .firstrowa, .firstrowb, .firstrowc, .firstrowd, .firstrowe, .firstrowf {
        width: 100%;
        padding-top: 0;
        padding-left: 0px;
        padding-right: 0px;
        font-size: 1.5em;
        float: left;
        clear: both;
      }
        #titulo{
            font-size:9px;
        }
        .element5,.element6{
            font-size:5px;
        }
}

@media screen and (max-height:1360px) {
  .firstrowa, .firstrowb, .firstrowc, .firstrowd, .firstrowe, .firstrowf {}
}

@media screen and (max-width:950px) {
  .logoffc {
    display: none;
  }
}

.slider {
  margin-top: 50px;
  margin-bottom: 50px;
}

.firstpage-text {
  text-align: justify;
  font-size: 20px;
  margin-top: 30px;
}

.datos-contacto {
  border-style: solid;
  border-color: #4783C9;
  border-radius: 50px;
  border-width: 5px;
  padding: 20px;
  height: 400px;
}

.map-contacto {
  border-style: solid;
  border-color: #990000;
  border-radius: 50px;
  border-width: 5px;
  padding: 20px;
  height: 400px;
}

/*---------------footer---------------*/
.footer-distributed {
  background-color: #4783C9;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font: bold 16px sans-serif;
  padding: 20px 20px;
}

.footer-center {
  display: inline-block;
  vertical-align: top;
}

.footer-design-name {
  color: #8f9296;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
  text-align: center;
  color: black;
}

.footer-center .footer-company-name {
  display: block;
  font-weight: normal;
  font-size: 14px;
  line-height: 2;
  color: #ffffff;
}

.footer-center {
  width: 100%;
}

.footer-icons {
  text-align: center;
}

.footer-icons a {
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color: #33383b;
  border-radius: 2px;
  font-size: 21px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;
  margin-right: 3px;
  margin-left: 3px;
  margin-bottom: 5px;
}

@media (max-width: 880px) {
  .footer-distributed {
    font: bold 14px sans-serif;
  }

  .footer-distributed .footer-center {
    display: block;
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
  }

  .footer-distributed .footer-center i {
    margin-left: 0;
  }
}

/*---------------Body de la web---------------*/

/* estilo dowpdown */

.fixPosItem{
  /* por alguna razon este item se desplaza de su posicion */
  margin-left: 0; 
  width: 100%;
}

/* START Estilos carousel  */

.content-carousel{

  margin-top: -9em;
  
}

.center-indicadors{
  
  width: auto;

}



.Nvar-IconText{
  
  display: block;
}

.iconLetter{
  font-size: 3em;
  font-weight: bold;
  font-family: 'Roboto';
}