body {
	font-family: 'Didact Gothic', sans-serif;
	background: #383838;	
}
body p {
	font-weight: 400;
	font-size: 20px
}
@media (max-width: 1380px) {
	body p {
		font-size: 19px
	}
}
button:focus {
	box-shadow: none;
	outline: 0
}
a,
a:hover {
	text-decoration: none
}
h1 {
	font-weight: 700;
	font-size: 2.2rem
}
.no-margin-sides {
	margin-left: 0;
	margin-right: 0
}
.no-padding-sides {
	padding-left: 0;
	padding-right: 0
}

.transition {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.v-center {
	width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

@media (max-width: 768px) {
	.v-center {
		position: inherit;
		left: inherit;
		top: inherit;
		transform: none
	}
}
.z-index {
	z-index: 4
}

main {
	margin-top: -100px;
	z-index: 2;
}

.invoition-nav { 
	z-index: 1000;  
	font-size: 20px;
	font-weight: 700;
	background-color: transparent;
	border-bottom: none;
	height: 100px;
	padding: 0 5%
}
.invoition-nav a {
	color: #d1ca9d!important;
	padding: 10px 15px!important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.invoition-nav a:hover {
	color: #eb422e!important
}
.invoition-nav .navbar-brand img {
	height: 50px
}
@media (max-width: 768px) {
	.invoition-nav .navbar-brand {
		padding: 0!important
	}
	.invoition-nav .navbar-brand img {
		height: 40px
	}
}
.invoition-nav .register-btn {
	padding: 0 15px;
	border: 2px solid #aeaa8c
}
.invoition-nav .register-btn img {
	height: 30px;
	margin-right: 15px
}
.invoition-nav .register-btn:hover {
	background-color: #000
}
.invoition-nav .navbar-toggler {
	background-color: #aeaa8c;
	padding: 13px 10px;
	border-radius: 100%
}
.invoition-nav .navbar-toggler img {
	height: 25px
}
.screen-1 {
	position: relative;
	overflow: hidden;
}

.screen-1:after{
	position: absolute;
	content: "";
	width: 110%;
	height: 20px;
	right: -5%;
	left: -5%;
	z-index: 3;
	background: #fc4b38;
	bottom: 69px;
	transform: rotate(-3deg);
}

.screen-1:before{
	position: absolute;
	content: "";
	width: 110%;
	height: 20px;
	right: -5%;
	left: -5%;
	z-index: 3;
	background: #d1ca9d;
	bottom: 49px;
	transform: rotate(-3deg);
}


.screen-1-inside {
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
	padding-top: 100px;
	width: 100%;
	z-index: 2;
	position: relative;
	background-image: url(../img/FONDO-CABECERA-negro.png);	
	background-repeat: no-repeat;
	background-size: cover;
}

.screen-1 .screen-1-text h1 {
	color: #eb422e;
	font-size: 30px;
}

.screen-1 .screen-1-text p {
	color: white;
}

.screen-1 .screen-1-text .white {
	position: relative;
	z-index: 1;
	margin-top: 20px;
	margin-bottom: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.screen-1 .screen-1-text .white span {
	color: #333 !important;
}

.screen-1 .screen-1-text .white h2 {
	color: #eb422e;
	font-weight: 700;
}

.screen-1 .screen-1-text .white:after{
	position: absolute;
	content: "";
	background: white;
	width: 100vw;
	height: 100%;
	opacity: .8;
	top: 0;
	z-index: -1;
	right: -50%;
}

.screen-1 .screen-1-text .white p {
	color: #333;
}

.screen-1 a {
	border: none;
	background: #d1ca9d;
	color: #fff;
	font-weight: 700;
	font-size: 30px;
	padding: 10px 15px;    
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.screen-1 a:hover {
	background: #d22814
}

.screen-1 .tango-logo  {
	max-height: 150px;
	margin-bottom: 20px;
}

.screen-2 {
	margin-top: -140px;
	width: 100%;
	z-index: 1;
	position: relative;
	background-image: url(../img/FONDO-CABECERA-blanco.png);
	padding-top: 170px;
	background-repeat: no-repeat;
	background-size: cover;
}

.screen-2 h1 {
	font-size: 45px;
	width: 100%;
	text-align: center;
	margin-bottom: 50px;
}

.screen-2 .beneficio-card {
	background-color: white;
	border-radius: 10px;
	padding: 25px;
	box-shadow: 10px 10px 10px #0000005c;
}

.screen-2 .beneficio-card h3 {
	color:#fc4b38;
	text-align: center;
	font-weight: 700;
	margin-bottom: 30px;
}

.screen-2 .screen-1-text h1 {
	color: #eb422e
}
.screen-2 .screen-1-text p {
	color: #fff
}

.btnWhatsappFloat {
	position: fixed;
	right: 0px;
	bottom: 30px;
	padding-top: 15px;
	margin-bottom: 0;
	z-index: 997;
}

.footer {
	background: #1e1e1e; 
	padding-top: 50px;     
	padding-bottom: 80px;
	color: #fff;
}

.footer hr.separador {
	margin: 55px 0px;
}

.footer hr {
	border: #2f2f2f 1px solid;
}

.footer a {
	font-size: 16px;
	color: #888888;
}

.footer p {
	font-size: 16px;
	color: #888888;
}


.footer a:hover {
	color: #fc4b38;
}

.icono-redes {
	height: 20px;
	margin-right: 20px;
}

.footer .datos > div {
	margin-bottom: 40px;
	text-align: left;
}

.footer .logo {
	max-width: 260px;
}

@media (max-width: 1680px) {
	.screen-1:after{
		transform: rotate(-3.4deg);
	}
	.screen-1:before{
		transform: rotate(-3.4deg);
	}
}

@media (max-width: 1440px) {
	.screen-1:after{
		transform: rotate(-4deg);
	}
	.screen-1:before{
		transform: rotate(-4deg);
	}
}

@media (max-width: 1024px) {
	.screen-1:after{
		transform: rotate(-5.5deg);
	}
	.screen-1:before{
		transform: rotate(-5.5deg);
	}
	.screen-1-inside {
		padding-bottom: 90px;
	}

}

@media (max-width: 768px) {
	.screen-1-inside {
		clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 96%);
	}

	.screen-1 .screen-1-text .white:after {
		left: -10%;
		right: inherit;
		width: 115%;
	}

	.dude-img img {
		margin-left:-15%; ;
	}

	.screen-2 .beneficio-card {
		margin-bottom: 50px;
	}
	.navbar-collapse {
		background: #2b2b2b;
	}

	.screen-1-inside {
		padding-bottom: 0px;
	}

	.mbm-2 {
		margin-bottom: -40px;
	}

}