@charset "utf-8";
/* CSS Document */
:root {
		--col-primario-shrimp: #d55f4a ;
		--col-primario-fish: #e8486f;
		--col-secundario-fish: #1b4372 ; 
		--col-secundario-shrimp: #ffcf00 ; 
		--font-family: 'gobold', sans-serif;
		--font-family2: 'gothin', sans-serif;
		--font-family3: 'golight', sans-serif;		
		--font-xss: clamp(0.1rem, calc(1rem + 0.1vw), 1.4rem);
		--font-xs: clamp(0.2rem, calc(1.1rem + 0.2vw), 1.7rem);
		--font-sm: clamp(1.42rem, calc(1.24rem + 0.9vw), 1.88rem);
		--font-md: clamp(1.89rem, calc(1.53rem + 1.8vw), 2.81rem);
		--font-lg: clamp(2.52rem, calc(1.85rem + 3.32vw), 4.22rem);
  		--font-xl: clamp(3.35rem, calc(2.19rem + 2.8vw), 6.33rem);  
		--padding-xl: clamp(3.35rem, calc(2.19rem + 111.8vw), 6.33rem); 
		--padding-xll: clamp(4.35rem, calc(2.99rem + 141.8vw), 8.33rem); 	
}
	  
@font-face {
 font-family: 'gobold';
 src:  url("../fonts/gobold.otf") format('otf'),
	   url("../fonts/gobold.woff") format('woff');
}
	
@font-face {
 font-family: 'gothin';
 src:  url("../fonts/gothin.otf") format('otf'),
	    url("../fonts/gothin.woff") format('woff');
}

@font-face {
 font-family: 'golight';
 src:  url("../fonts/golight.otf") format('otf'),
	    url("../fonts/golight.woff") format('woff');
}

.font-xs { font-size: var(--font-xs)}
.font-xss { font-size: var(--font-xss)}

.colorprimario-shrimp { color: var(--col-primario-shrimp) }
.colorprimario-fish { color: var(--col-primario-fish) }

.font-sm { font-size: var(--font-sm) !important}
.revealOnScroll { opacity: 0; }

.gobold { font-family: 'gobold'; }
.gothin { font-family: 'gothin'; }
.font-xl {	font-size: var(--font-xl); }

#contactows * .col-lg-7 { transform: scale(1); transition: 0.1s all}
#contactows * .col-lg-7:hover { transform: scale(1.05); transition: 0.2s all}

#contactows * h4  { transform: scale(1); transition: 0.1s all}
#contactows * h4:hover { transform: scale(1.01); transition: 0.2s all}

#contactows * .datos { color: #1b4372}
.form-check-input { --bs-border-width: 2px; cursor: pointer;}

.textocontactows  {display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    line-height: 36px;}


body, html {font-family: var(--font-family2);    font-weight: 100;    }

.textoazul {    color: #1b4372;}
a {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    
}
a {    color: #FFFFFF;    text-decoration: none;}
a:hover {    color: #1fa3ea;    text-decoration: none;}
a {
    background-color: transparent;
}
* {
    outline: none;
}

.nav-link {color: rgb(255 255 255)}
.headerlogo { width: 100px}

.menuactive {color: #1b4372}
.menuactive2 {color: #82f3f7 !important}

#mainNavbar::after {content: " ";
    background: #256680;
    background: linear-gradient(180deg, rgba(9, 9, 9, 0.7) -36%, rgba(37, 102, 128, 0) 100%);
    mix-blend-mode: multiply;
    filter: blur(20px) !important;
    width: 146%;
    height: 139px;
    position: absolute;
    z-index: -1;
    left: -80px;
    top: -50px;}
/* assets funcionalidad */

section.seccionline::before {
	content: " ";
    position: absolute;
    height: 100%;
    background-image: url(../images/patron.svg);
    background-repeat: repeat;
    background-size: 140px 144px;
    opacity: 0.3;
    width: 100%;
    display: block;
    z-index: -1;
    margin-top: -100px;
}

section.seccionline2::before {
	content: " ";
    position: absolute;
    height: 120%;
    background-image: url(../images/patron.svg);
    background-repeat: repeat;
    background-size: 140px 144px;
    opacity: 0.3;
    width: 100%;
    display: block;
    z-index: -1;
    margin-top: -100px;
}

section.seccionlineb::before {
	content: " ";
    position: absolute;
    height: 100%;
    background-image: url(../images/patron.svg);
    background-repeat: repeat;
    background-size: 140px 144px;
    opacity: 0.3;
    width: 100%;
    display: block;
    z-index: -1;
    margin-top: -100px;
}

section.seccionline2b::before {
	content: " ";
    position: absolute;
    height: 100%;
    background-image: url(../images/patron.svg);
    background-repeat: repeat;
    background-size: 140px 144px;
    opacity: 0.3;
    width: 100%;
    display: block;
    z-index: -1;
    margin-top: -100px;
}

.contenedoricon-contact {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.paddingtop100 { padding-top: 100px}
.paddingbottom250 { padding-bottom: 250px}



.seccionlineb h2 { color: #ea6852}
.seccionline2b h2 { color: #ea6852}

.seccionline h2 { color: #e8486f}
.seccionline2 h2 { color: #e8486f}

.sticker::before {
    content: " ";
    background: #256680;
    background: linear-gradient(0deg, rgba(9, 9, 9, 1) -57%, rgba(37, 102, 128, 0) 72%);
    mix-blend-mode: multiply;
    filter: blur(20px) !important;
    width: 100%;
    height: 200px;
    position: absolute;
    z-index: 1;
    left: 0px;
    bottom: -15px;
    margin: auto;
    display: block;}

footer .footerimg {width: 100%; height: auto;}
footer {color: #ffffff; }
#shrimpfooter.footer {position: relative; display: block; padding-top: 150px; padding-bottom: 50px; background-color: #ea6852; z-index: 9;}
#shrimpfooter.footer::before{content: " ";position: absolute;width: 100%;height: 200px;background-image: url(../images/footerimgb.png);top: -200px;background-size: cover;    background-position: center;}
#shrimpfooter .footerhr { border: none; height: 2px; color: #ed7e57;    background-color: #ed7e57;    opacity: 1;}

.footer {position: relative; display: block; padding-top: 50px; padding-bottom: 50px; background-color: #026fc2; z-index: 9; font-family: system-ui;}
.footer::before{content: " ";position: absolute;width: 100%;height: 200px;background-image: url(../images/footerimg.png);top: -199px;background-size: cover;    background-position: center;}
.footerlogo { width: 180px}
.footerhr { border: none; height: 2px; color: #1fa3ea;    background-color: #1fa3ea;    opacity: 1;}


footer .copyright{padding-top: 20px}
footer .footercols {padding-bottom: 20px; padding-top: 20px}

#contacto section.contactoinfo::before {
	content: " ";
	position: absolute;
    height: 100%;
    background-image: url(../images/patron.svg);
    background-repeat: repeat;
    background-size: 140px 144px;
    opacity: 0.3;
    width: 100%;
    display: block;
	}


#contactows * p.margincero { margin: 0}

#contactows * b { font-weight: bolder;  color: #e8486f}

.contactoinfo {   background : #ebddd1;}
.contactoinfo .padding100 {    padding: 100px 0px;}
 

.preabout { padding: 150px  0 }
.about { padding: 200px  0 }



@media (max-width: 767px) {	  
	 .padding30px { padding: 30px}

}

@media screen and (max-width: 550px) {
	.webpadding {padding-left: 20px; padding-right: 20px}

  }