@font-face {
  font-family: DIN;
  src: url('DIN Condensed Bold.ttf');
}

.detalles {
  font-family: Helvetica, Times, serif;
}

.main-nav{
	border-top: 2.5rem solid #1fa5de;
	color: #ffffff;
	font-size: 1.05rem;
	ffont-weight: lighter;
}

.navbar-light .bg-blue{
	background-color: #1fa5de !important;
}

.navbar-light .border-blue{
	background-image: url('img/esq1.svg');
	background-size: contain;
	background-position-x: -2px;
	background-repeat: no-repeat;
	width: 115px;
}

.white-text{
	color: #ffffff;
}

.gsc-control-cse {
	padding-left: 0;
}

.border-green{
	background-image: url('img/esq2.svg');
	background-size: contain;
	background-position-x: right;
	background-repeat: no-repeat;
	width: 150px;
}

.navbar-light .col-6:last-child{
	position: relative;
}

.navbar-light .navbar-nav .nav-link {
	color: #ffffff;
}

.nav-link:hover{
	/*color: #0f6c94 !important;*/
}

.nav-link.active{
	/*color: #b95656 !important;*/
}

.nav-pills .nav-link {
    background: 0 0;
    border: solid 1px blue;
    border-radius: .25rem;
    margin: 0.15rem;
}

.gsc-control-cse {
    background: none !important;
    border: none !important;
    max-width: 50%;
}

.green{
	color: #14ad59;
}

.blue{
	color: #1fa5de;
}

.justify{
	text-align: justify;
	text-justify: inter-word;
}


.shape a img { transition: all .2s ease-in-out; }
.bt-blue {border-top: 4px solid #1fa5de;}
.bt-green {border-top: 4px solid #14ad59;}
.shape a img:hover { transform: scale(1.1); }

#main{
	height: 40vw;
	background-image: url('img/fondo.jpg');
	background-size: cover;
	background-attachment: fixed;
}

#panal{
	top: -10rem;
	margin-bottom: 0rem;
	position: relative;
}

.no-top{
	position: static !important;
	top: 0 !important;
}

.no-top .main{
	margin-bottom:-5rem !important;
}

#navbar #panal{
	top: 0;
	width: 10rem;
	margin-bottom: 0;
	position: static;
}

#navbar #panal .main{
	margin-bottom: 0;
	--s: calc(7.5rem);
	width: 50rem;
}

#navbar #panal .main .hexa .subtitulo1{
	font-size: 0.7rem !important;
	top: -2.25rem;
}

#navbar #panal .main .hexa .subtitulo2{
	font-size: 0.7rem !important;
}

#footer{
	padding-top: 5rem;
	border-bottom: 2.5rem solid #14ad59;
	position: relative;
}

#footer .col-6{
	height: 2.8rem;
}

#contacto{
	position: relative;
	color: #565a5b;
}

#contacto h3{
	color: #000000;
}

#formulario{
	background-color: #14ad59;
	position: relative;
}

.nav-footer .col-6:last-child{
	background-color: #14ad59 !important;
}

.logo{
	position: absolute;
	top: 0;
	right: 0;
	max-width: 25rem;
}

/* ................. */
.main {
  display:flex;
  width: 90vw;
  --s: calc(90vw/7); /* size */
  --r: 0.85; /* ratio */
  /* clip-path */
  --h: 0.25;  
  --v: 0.5; 
  --hc:calc(clamp(0,var(--h),0.5) * var(--s)) ;
  --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r)); 
  margin-bottom: -12.5rem;
  
  /*margin */
  --mv: 4px; /* vertical */
  --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2); /* horizontal */
  /* for the float*/
  --f: calc(2*var(--s)*var(--r) + 4*var(--mv)  - 2*var(--vc) - 2px);
}

@media only screen and (min-width: 1800px) {.main {--s: calc(90vw/6.66);}}
@media only screen and (min-width: 2600px) {.main {--s: calc(90vw/6.66);}}

@media only screen and (min-width: 1200px) {#panal{margin-bottom: 0rem;}}

.funset{
	font-size: 1px !important;
}

.hexa {
  font-size: 0;
  padding-left: 2.5rem;
}

.hexa .forma{
  width: var(--s);
  margin: var(--mv) var(--mh); 
  display: inline-block;
  font-size:initial;
  margin-bottom: calc(var(--mv) - var(--vc)); 
  height: calc(var(--s)*var(--r));
  text-align: center;
}

.hexa .shape{
	clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0,100% var(--vc),100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%,var(--hc) 100%,0 calc(100% - var(--vc)),0 var(--vc));
}

.hexa::before {
  content: "";
  width: calc(var(--s)/2 + var(--mh));
  float: left;
  height: 135%;
  shape-outside: repeating-linear-gradient(     
                   #0000 0 calc(var(--f) - 2px),      
                   #000  0 var(--f));
}

body > p {
	font-size: 1.5rem;
	margin: 2rem 0 1rem calc(var(--size) * .5);
	font-weight: 200;
}

body{
	font-family: DIN;
}

.subtitulo1{
	position: relative;
	top: -3.5rem;
	vertical-align: top;
	font-weight: bold;
	font-size: 1.30vw !important;
	color: #434647;
}

.subtitulo2{
	position: relative;
	top: -1.8rem;
	font-weight: bold;
	font-size: 1.4vw !important;
	color: #434647;
}

.subtitulo:nth-child(even) {
  background:green;
}

.icon{
	height: 2.5rem;
	vertical-align: middle;
	padding-right: 0.5rem;
}

.icon2{
	height: 1.5rem;
	vertical-align: middle;
	padding-right: 0.5rem;
}

.cotiza {
    position: absolute;
    top: 1rem;
    left: 10%;
}

.cotiza img{
	height: 5rem;
	vertical-align: middle;
	padding-right: 0.5rem;
}

.cotiza .burbuja {
    background-image: url(img/burbuja.svg);
    padding: 0 2rem;
    background-size: 100% 100%;
    font-size: 1.65rem;
    color: #222222;
}

.burbuja a{
	text-decoration: none;
	color: #222222;
}

.nav-link .icon{
  display: inline-block;
  width: 25px;
  height: 25px;
  background-size: cover;
  background-image: url('img/bullet.svg');
  margin-right: 0.5rem;
}

.nav-link:hover > .icon{
  background-image: url('img/bullet2.svg');
}


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

		.animate-in {
	    animation: fadeInAnimationMov ease 3s
	    animation-iteration-count: 1;
	    animation-fill-mode: forwards;
	    -webkit-animation-name: fadeInAnimationMov;
	    animation-name: fadeInAnimationMov;
	    -webkit-animation-duration: 4.5s;
	            animation-duration: 4.5s;
	}

	.lema{
		font-size: 1.5rem !important;
		padding-top: 3.5rem !important;
	}

	#main{
		background-size: initial;
		background-position: top;
	}

	.navbar{
		border-top: none;
		background: #1fa5de;
	}

	.navbar-light .border-blue {
		width: 0 !important;
	}

	.gsc-control-cse {
		max-width: 100%;
	}

	.logo{
		display: none;
	}

	#panal{
		top: -2rem;
	}

	#main{
		height: 65vh;
	}

	.main{
		margin-bottom: -5.5rem;
	}

	#footer{
		padding-top: 0;
	}

	.cotiza{
		position: relative;
		top: 0;
		left: 0;
	}

	.cotiza img{
		max-height: 3rem;
	}

	a{
		text-decoration: none;
		color: #000000;
	}

	.aviso{
		background-color: red;
		color: #ffffff;
		padding: 1rem 0.5rem;
	}

	#panal{
		display: none;
	}
}

@media only screen and (min-width: 1440px) {
	#main{
		height: 40vw;
	}
}

@media only screen and (min-width: 2040px) {
	#main{
		height: 33vw;
	}
}

@media only screen and (max-width: 1440px) {
	.logo img{
		/*width: 14.5rem;*/
	}

	.logo{
		top: 13px;
	}

	.subtitulo1{
		top: -2.5rem;
	}
}

@media only screen and (max-width: 1024px) {
	.logo img{
		width: 14.5rem;
	}

	.logo{
		top: 3rem;
	}
}

@media only screen and (max-width: 768px) {
	.logo img{
		display: none;
	}

}


.hexagon {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
    cursor: pointer;
    }
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }

    .hexagon1 {
    width: 400px;
    height: 200px;
    margin: 0 0 0 -80px;
    }

.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
        background-size: 60%;
    }

.hex-geomembrana{
	background-image: url('img/m-geomembranas.jpg');
}

.hex-geotextil{
	background-image: url('img/geo2.jpg');
}

.hex-geomalla{
	background-image: url('img/m-geomallas.jpg');
}

.hex-geoceldas{
	background-image: url('img/m-geoceldas.jpg');
}

.hex-absorbente{
	background-image: url('img/m-absorbente-hidro.jpg');
}

.hex-ecologica{
	background-image: url('img/m-membrana-eco.jpg');
}

.hex-geoestructuras{
	background-image: url('img/m-geoestructuras.jpg');
}


.carousel-inner img {
    width: 100%;
    height: 100%
}

#custCarousel .carousel-indicators {
    position: static;
    margin-top: 20px
}

#custCarousel .carousel-indicators>li {
    width: 100px
}

#custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5
}

#custCarousel .carousel-indicators li.active img {
    opacity: 1
}

#custCarousel .carousel-indicators li:hover img {
    opacity: 0.75
}

.carousel-item img {
    width: 80%
}

.usos{
	padding: 0.5rem 1rem;
	background-color: #4eaae3;
	max-width: 25%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2.5rem;
	color: #ffffff;
	font-weight: bolder;
}

.plan-box .fondo-blanco {
	padding-top: 0;
	padding-left: 0;
	margin: 0;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.5s linear;
	position: relative;
	left: 0;
	right: 0;
	z-index: 4;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
	background-color: #e1e1df;
}

.plan-box .fondo-blanco ul{
	/*margin: -2rem 20px 1rem 20px;*/
	padding: 0.5rem 1rem;
	list-style: square inside;
	text-align: left;
}

.plan-box ul li{
	color: #000000;
	padding: 0.30rem 0.45rem;
	width: 100%;
	max-width: 100%;
	font-size: 0.85rem;
	line-height: 1rem;
}

.plan-box:hover > .fondo-blanco {
	visibility: visible;
	opacity: 1;
}

.descripcion {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 35%;
    background-color: #1fa5de;
    padding: 1rem;
}

.effect img.image{
/*type your css here which you want to use for both*/
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:inline-block;
}

.double li{
  width: 50%;
  float: left;
}

@media only screen and (min-width: 680px) {
	.animate-in {
	    animation: fadeInAnimation ease 3s
	    animation-iteration-count: 1;
	    animation-fill-mode: forwards;
	    -webkit-animation-name: fadeInAnimation;
	    animation-name: fadeInAnimation;
	    -webkit-animation-duration: 4.5s;
	            animation-duration: 4.5s;
	}
}
  
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
        width: 0;
        font-stretch: ultra-condensed;
    }
    100% {
    	width: 100%;
        opacity: 1;
        font-size: 3rem;
        font-stretch: initial;
     }
}

@-webkit-keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        font-size: 3rem;
     }
}

@keyframes fadeInAnimationMov {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        font-size: 1.8rem;
     }
}

@-webkit-keyframes fadeInAnimationMov {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        font-size: 1.8rem;
     }
}

.lema{
	color: #ffffff;
	text-shadow: 2px 2px 2px black;
	font-size: 3rem;
	text-align: center;
	padding-top: 15rem;
}

.small{
	font-size: 0.69rem;
	padding-top: 0.25rem;
}

.efecto-rebote{-webkit-animation:anim 2s ease-in;animation:anim 2s ease-in;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}

@-webkit-keyframes anim{
	0%{-webkit-transform:rotateY(90deg);}
	100%{-webkit-transform:rotateY(0);}
}

@keyframes anim{
	0%{transform:rotateY(90deg);}
	100%{transform:rotateY(0);}
}

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

	#panal{
		top: -5rem;
		margin-bottom: 5rem;
	}

	.lema{
		padding-top: 8.5rem	;
	}
} 

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

	.lema{
		padding-top: 3.5rem;
		font-size: 2.45rem;
	}
} 

.cat .descripcion{
	font-size: 0.9rem;
	color: #ffffff;
}

.nav-pills .nav-link, .nav-item{
	width: 100%;
}

.nav-item > .active, .nav > .active{
	background-color: #1fa5de !important;
}

.nav-link{
	border: solid 1px #1fa5de !important;
	color: #1fa5de;
}

.navbar a{
	color: #ffffff;
}

ul.dashed {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}