/*<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable = no">
ADD TO HTML*/

@font-face{font-family: "MADE-TOMMY-Black";src:url(fonts/MADE-TOMMY-Black.otf);}
@font-face{font-family: "MADE-TOMMY-Bold";src:url(fonts/MADE-TOMMY-Bold.otf);}
@font-face{font-family: "MADE-TOMMY-ExtraBold";src:url(fonts/MADE-TOMMY-ExtraBold.otf);}
@font-face{font-family: "MADE-TOMMY-Light";src:url(fonts/MADE-TOMMY-Light.otf);}
@font-face{font-family: "MADE-TOMMY-Medium";src:url(fonts/MADE-TOMMY-Medium.otf);}
@font-face{font-family: "MADE-TOMMY-Regular";src:url(fonts/MADE-TOMMY-Regular.otf);}
@font-face{font-family: "MADE-TOMMY-Thin";src:url(fonts/MADE-TOMMY-Thin.otf);}


html {overflow-x: hidden !important;scroll-behavior: smooth;}
body{background:#fff;color:#181818;font-size:10px;overflow-x:hidden !important; padding: 0px !important; font-family: "Prata-Regular";}

body::-webkit-scrollbar{width:7px;}
body::-webkit-scrollbar-thumb{-webkit-border-radius:0px;border-radius:0px;background: linear-gradient(45deg, #0f1f2d, #fff);}

::selection{background-color: #0f1f2d;color: #fff;}

.form-control::-webkit-input-placeholder {color: #fff;font-family: "MADE-TOMMY-Light";font-size: 15px;}
.form-control:-ms-input-placeholder {color: #fff;font-family: "MADE-TOMMY-Light";font-size: 15px;}
.form-control::placeholder {color: #fff;font-family: "MADE-TOMMY-Light";font-size: 15px;}

option {color: #fff;font-family: "MADE-TOMMY-Light";font-size: 15px;}
label.error {color: #000;font-family: "MADE-TOMMY-Light";font-size: 15px;}

.header-main {}

.sec1 {background-image: url(img/sec1-fondo.png);background-repeat: no-repeat;background-position: top right;background-size: 50%;padding-bottom: 3rem;}
.sec1 .logo {display: block;margin: auto;width: 17rem;}
.sec1 h1 {font-family: "MADE-TOMMY-Regular";margin: 2rem 0px;font-size: 50px;}
.sec1 h1 b {font-family: "MADE-TOMMY-Black";text-transform: uppercase;}
.sec1 h4 {font-family: "MADE-TOMMY-Regular";font-size: 40px;}
.sec1 .col-md-6 img {width: 17rem;margin-top: 2rem;}
.sec1 .formulario-header #commentForm-1 {}
.sec1 .formulario-header #commentForm-1 .medio {background-color: #fff;padding: 15px;}
.sec1 .formulario-header #commentForm-1 .form-control {border: solid 2px #e5eaf3;border-radius: 30px;margin-bottom: 1rem;color: #fff;font-family: "MADE-TOMMY-Light";font-size: 15px;background-color: #0f1f2d;font-weight: normal;height: 45px;}
.sec1 .formulario-header #commentForm-1 .enviar {font-family: 'MADE-TOMMY-Bold';color: #fff;border: 0px;background-color: transparent;box-shadow: 0px 5px 15px 2px #00000052;width: 8rem;font-size: 18px;margin-left: auto;display: block;padding-top: 5px;padding-bottom: 5px;cursor: pointer;border-radius: 0px;z-index: 1;position: relative;}
.sec1 .formulario-header #commentForm-1 .container-btn {position: relative;width: fit-content;margin: auto;}
.sec1 .formulario-header #commentForm-1 .container-btn:before {content: "";display: block;position: absolute;right: 0px;top: 0px;width: 100%;height: 100%;background: #0f1f2d;z-index: 0;}
.sec1 .formulario-header #commentForm-1 .container-btn:after {content: "";display: block;position: absolute;left: 0px;top: 0px;width: 0%;height: 100%;background: #55abdd;z-index: 0;transition: all 0.5s;}
.sec1 .formulario-header #commentForm-1 .container-btn:hover:after {width: 100%;}

.sec2 {background-color: #0f1f2d;padding: 3rem 0px;}
.sec2 h1 {font-family: "MADE-TOMMY-Black";margin: 0px;font-size: 50px;text-transform: uppercase;color: #fff;text-align: center;}
.sec2 .col-md-4 {margin-top: 2rem;}
.sec2 .img-contnt {position: relative;width: fit-content;margin: auto;}
.sec2 .img-contnt:before {content: "";display: block;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 11rem;height: 11rem;background: #55abdd;border-radius: 50%;}
.sec2 .img-contnt img {position: relative;display: block;margin: auto;width: 9rem;margin-bottom: 1rem;}
.sec2 h5 {color: #fff;font-family: 'MADE-TOMMY-Regular';text-align: center;text-transform: uppercase;font-size: 27px;margin-top: 2rem;}

.sec3 {padding: 4rem 0px;background-image: url(img/sec1-fondo-alt.png);background-repeat: no-repeat;background-position: bottom left;background-size: 50%;}
.sec3 h1 {font-family: 'MADE-TOMMY-Black';color: #0f1f2d;font-size: 80px;line-height: 0.6;margin-bottom: 2rem;}
.sec3 h1 b {color: #55abdd;margin-left: 10px;}
.sec3 p {font-family: 'MADE-TOMMY-Regular';font-size: 28px;margin-bottom: 2rem;}
.sec3 p b {font-family: "MADE-TOMMY-Bold";}

.sec4 {background-color: #0f1f2d;padding: 3rem 0px;border-bottom: solid 8px #55abdd;}
.sec4 h1 {color: #fff;font-family: 'MADE-TOMMY-Regular';font-size: 35px;margin-bottom: 1rem;}
.sec4 ul {padding: 0px;margin: 0px;}
.sec4 li {color: #fff;font-family: 'MADE-TOMMY-Regular';font-size: 25px;display: block;position: relative;z-index: 0;}
.sec4 li:before {content: "";display: block;position: absolute;right: calc(100% - 40px);top: 0px;width: 100%;height: 100%;background: #55abdd;z-index: -1;border-radius: 30px;}
.sec4 li:nth-child(2) {padding-left: 50px;}
.sec4 li:nth-child(2):before {display: none;}
.sec4 li a {color: #fff;font-family: 'MADE-TOMMY-Regular';font-size: 25px;}
.sec4 li img {width: 30px;margin-right: 20px;}
.sec4 .col-md-6 {margin: auto;}
.sec4 .formulario-footer #commentForm-2 {}
.sec4 .formulario-footer #commentForm-2 .form-control {border: solid 2px #e5eaf3;border-radius: 30px;margin-bottom: 1rem;color: #fff;font-family: "MADE-TOMMY-Light";font-size: 15px;background-color: #0f1f2d;font-weight: normal;height: 45px;}
.sec4 .formulario-footer #commentForm-2 .enviar {font-family: 'MADE-TOMMY-Bold';color: #fff;border: 0px;background-color: transparent;box-shadow: 0px 5px 15px 2px #00000052;width: 8rem;font-size: 18px;margin-left: auto;display: block;padding-top: 5px;padding-bottom: 5px;cursor: pointer;border-radius: 0px;z-index: 1;position: relative;}
.sec4 .formulario-footer #commentForm-2 .container-btn {position: relative;width: fit-content;margin: auto;}
.sec4 .formulario-footer #commentForm-2 .container-btn:before {content: "";display: block;position: absolute;right: 0px;top: 0px;width: 100%;height: 100%;background: #55abdd;z-index: 0;}
.sec4 .formulario-footer #commentForm-2 .container-btn:after {content: "";display: block;position: absolute;left: 0px;top: 0px;width: 0%;height: 100%;background: #0f1f2d;z-index: 0;transition: all 0.5s;}
.sec4 .formulario-footer #commentForm-2 .container-btn:hover:after {width: 100%;}


.th-page {position: relative;min-height: 100vh;background: linear-gradient(45deg, #0f1f2d, #55abdd);overflow: hidden;}
.th-page .th-logo {padding-top: 5rem;}
.th-page .th-logo img {display: flex;margin: auto;width: 15rem;}
.th-page .th-txt1 {width: fit-content;margin: auto;border: solid 2px #fff;padding: 15px;margin-top: 5rem;}
.th-page .th-txt1 h1 {font-family: "MADE-TOMMY-Bold";color: #fff;text-align: center;text-transform: uppercase;font-size: 45px;letter-spacing: 4px;}
.th-page .th-txt1 h2 {font-family: "MADE-TOMMY-Regular";font-size: 25px;letter-spacing: normal;text-transform: initial;color: #fff;text-align: center;margin: 0px;}
.th-page .th-txt1 p {font-family: "MADE-TOMMY-Regular";text-align: center;color: #fff;font-size: 17px;margin: 0px;}
.th-page .th-txt2 {margin-top: 5rem;}
.th-page .th-txt2 h5 {font-family: "MADE-TOMMY-Bold";color: #fff;text-align: center;font-size: 25px;}
.th-page .th-txt2 a {font-family: "MADE-TOMMY-Regular";color: #fff;text-align: center;display: block;width: fit-content;margin: auto;font-size: 17px;position: relative;}
.th-page .th-txt2 a:before {content: "";display: block;position: absolute;left: -25px;top: calc(50% - 10px);width: 20px;height: 20px;background-image: url(img/footer-icon-3.png);background-repeat: no-repeat;background-position: center center;background-size: contain;}
.th-page .th-redes {display: flex;flex-direction: column;align-items: center;position: absolute;bottom: 0px;width: 12rem;left: calc(50% - 6rem);background: #166938;}
.th-page .th-redes ul {display: flex;padding: 10px 0px;margin: 0px;}
.th-page .th-redes ul li {padding-right: 10px;display: block;}
.th-page .th-redes ul li img {width: 20px;margin-bottom: 0rem;}



/* ---------------------------------------- RESPONSIVE --------------------------------------------- */

@media (min-width: 320px) and (max-width: 575px){
	.sec1 .logo {width: 10rem;}
	.sec1 h1 {font-size: 30px;}
	.sec1 h1 br {display: none;}
	.sec1 h4 {font-size: 25px;text-align: center;}
	.sec1 .col-md-6 img {width: 10rem;margin: auto;margin-top: 2rem;display: block;}

	.sec2 h1 {font-size: 35px;}
	.sec2 h5 {font-size: 20px;}
	.sec2 .img-contnt img {width: 6rem;}
	.sec2 .img-contnt:before {width: 7rem;height: 7rem;}

	.sec3 {padding: 1rem 0px;}
	.sec3 h1 {font-size: 50px;text-align: center;}
	.sec3 p {font-size: 18px;margin-bottom: 1rem;text-align: justify;}

	.sec4 h1 {font-size: 28px;text-align: center;}
	.sec4 li {font-size: 18px;}
	.sec4 li a {font-size: 18px;}
	.sec4 .formulario-footer #commentForm-2 {margin-top: 2rem;}
	
/* ---------------------------------------- TH PAGE 320 --------------------------------------------- */
	.th-page .th-logo {padding-top: 3rem;}
	.th-page .th-logo img {width: 15rem;}
	.th-page .th-txt1 {margin-top: 3rem;}
	.th-page .th-txt1 h1 {font-size: 28px;letter-spacing: 2px;}
	.th-page .th-txt2 {margin-top: 3rem;}
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
	.sec1 .logo {width: 13rem;}
	.sec1 h1 {font-size: 35px;}
	.sec1 h1 br {display: none;}
	.sec1 h4 {font-size: 25px;text-align: center;}
	.sec1 .col-md-6 img {width: 10rem;margin: auto;margin-top: 2rem;display: block;}

	.sec2 h1 {font-size: 35px;}
	.sec2 h5 {font-size: 20px;}
	.sec2 .col-md-4 {width: 50%;}
	.sec2 .img-contnt img {width: 6rem;}
	.sec2 .img-contnt:before {width: 7rem;height: 7rem;}

	.sec3 {padding: 1rem 0px;}
	.sec3 h1 {font-size: 50px;text-align: center;}
	.sec3 p {font-size: 18px;margin-bottom: 1rem;text-align: justify;}

	.sec4 h1 {font-size: 28px;text-align: center;}
	.sec4 li {font-size: 20px;}
	.sec4 li a {font-size: 20px;}
	.sec4 .formulario-footer #commentForm-2 {margin-top: 2rem;}
	

/* ---------------------------------------- TH PAGE 576 --------------------------------------------- */
	.th-page .th-logo {padding-top: 3rem;}
	.th-page .th-logo img {width: 15rem;}
	.th-page .th-txt1 {margin-top: 3rem;}
	.th-page .th-txt1 h1 {font-size: 28px;letter-spacing: 2px;}
	.th-page .th-txt2 {margin-top: 3rem;}
}

/*Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
	.sec1 .logo {width: 14rem;}
	.sec1 h1 {font-size: 42px;}
	.sec1 h4 {font-size: 34px;}
	.sec1 .col-md-6 img {width: 14rem;}
	.sec1 .formulario-header #commentForm-1 .form-control {height: 35px;}

	.sec2 h1 {font-size: 40px;}
	.sec2 h5 {font-size: 20px;}
	.sec2 .img-contnt img {width: 6rem;}
	.sec2 .img-contnt:before {width: 7rem;height: 7rem;}

	.sec3 h1 {font-size: 60px;}
	.sec3 p {font-size: 23px;margin-bottom: 1rem;}

	.sec4 li {font-size: 21px;}
	.sec4 li a {font-size: 21px;}
	.sec4 .formulario-footer #commentForm-2 .form-control {height: 35px;}


/* ---------------------------------------- TH PAGE 768 --------------------------------------------- */
	.th-page .th-logo {padding-top: 3rem;}
	.th-page .th-txt1 {margin-top: 3rem;}
	.th-page .th-txt2 {margin-top: 3rem;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
	
	.sec2 .img-contnt:before {width: 9rem;height: 9rem;}
	.sec2 .img-contnt img {width: 7rem;}
	.sec2 h5 {font-size: 22px;}
	

/* ---------------------------------------- TH PAGE 992 --------------------------------------------- */
	.th-page .th-logo {padding-top: 3rem;}
	.th-page .th-txt1 {margin-top: 3rem;}
	.th-page .th-txt2 {margin-top: 3rem;}
}

/* Bigger devices (desktops, 992px and up) */
@media (min-width: 1200px) and (max-width: 1399.98px) {	

/* ---------------------------------------- TH PAGE 1200 --------------------------------------------- */
	.th-page .th-logo {padding-top: 3rem;}
	.th-page .th-txt1 {margin-top: 3rem;}
	.th-page .th-txt2 {margin-top: 3rem;}
}

@media (min-width: 1400px) and (max-width: 1599.98px) {

/* ---------------------------------------- TH PAGE 1400 --------------------------------------------- */
}

/* Extra large devices  */
@media (min-width: 1600px) {

/* ---------------------------------------- TH PAGE 1600 --------------------------------------------- */
}