body{
	margin:0 ;
	padding: 0;
}
*{
	font-family: 'Lato', sans-serif;
	outline: none;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.active{
	opacity: 1!important;
}
.container{
	max-width: 996px;
	height: 410px;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border: solid 1px #eaeaea;
}
.container .left{
	width: 50%;
	height: 410px;
	background: black;
	float: left;
	position: relative;
}
.container .left .content-1{
	background-color: black;
	color: white;
}
.container .left .content-1 img.tasa-1{
	position: absolute;
	right: 0;
	top: 140px;
	z-index: 1;
}
.container .left .content-1 h1.txt-original{
	position: absolute;
	top: 20px;
	text-align: center;
	width: 80%;
	z-index: 2;
	font-size: 30px;
}
.container .left .content-1 h3.txt-autentica{
	position: absolute;
	top: 70px;
	text-align: center;
	width: 50%;
	margin-left: -35%;
	left: 50%;
	font-weight: 300;
	z-index: 2;
}
.container .left .content-1 p.txt-parrafo{
	position: absolute;
	top: 150px;
	text-align: center;
	width: 40%;
	margin-left: -30%;
	left: 50%;
	font-weight: 300;
	font-size: 12px;
	z-index: 2;
}
.container .left .content-1 button{
	text-align: center;
	width: 50%;
	font-weight: 400;
	font-size: 12px;
	background: none;
	border: solid 2px white;
	height: 40px;
	color: white;
	cursor: pointer;
	margin: 0 auto;
	display: block;
	max-width: 147px;
	min-width: 147px;
	position: absolute;
	left:50%;
	margin-left:-73.5px;
	bottom:20px;
}
.container .left .content-2{
	background-color: black;
}
.container .left .content-3{
	background-color: black;
}
.container .right .content-1{
	background-color: white;
}
.container .right .content-1 img.tasa-1{
	position: absolute;
	left: 0;
	top: 110px;
	width: 43%;
	min-width: 210px;
	max-width: 210px;
}
.container .right .content-1 img.fondo{
	position: absolute;
	left: 0;
	top: 82px;
	width: 42%;
	min-width: 209px;
	max-width: 209px;
}
.container .right .content-2 img.maquina{
	position: absolute;
	right: 0;
	bottom: 0;
}
.container .left .content-2 img.maquina{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 22%;
}
.container .left .content-3 img.capsula{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 35%;
	max-width: 70px;
	min-width: 70px;
}
.container .right .content-3 img.capsula{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 35%;
	max-width: 70px;
	min-width: 70px;
}
.container .right .content-2 section.inner-container{
	width: 70%;
	position: absolute;
	height: auto;
	background: gray;
	margin-left: 8%;
}
.container .right .content-2 section.inner-container h3{
	width: 100%;
	position: absolute;
	top: 172px;
	font-size: 15px;
}
.container .right .content-2 section.inner-container h2{
	width: 100%;
	position: absolute;
	top: 190px;
	font-size: 20px;
}
.container .right .content-2 section.inner-container p{
	width: 80%;
	position: absolute;
	top: 220px;
	margin-left: -40%;
	left: 50%;
	font-size: 14px;
}
.container .right .content-2 section.inner-container ul{
	width: 84%;
	position: absolute;
	top: 262px;
}
.container .right .content-2 section.inner-container ul li{
	display: inline-block;
	cursor: pointer;
	width: 15%;
	opacity: .5;
}
.container .right .content-2 section.inner-container ul li:hover{opacity: .5}
.container .left .content-2 section.inner-container ul li:hover{opacity: .5}
.container .right .content-2 section.inner-container button{
	text-align: center;
	width: 50%;
	font-weight: 400;
	font-size: 12px;
	background: none;
	border: solid 2px black;
	height: 40px;
	color: black;
	cursor: pointer;
	margin: 0 auto;
	display: block;
	margin-top: 40px;
	max-width: 148px;
	min-width: 148px;
	position: absolute;
	top: 315px;
	margin-left: -74px;
	left: 50%;
}
.container .right .content-2 section.inner-container button:{opacity: .5}
.container .left .content-2 section.inner-container button:{opacity: .5}
.container .left .content-2 section.inner-container{
	width: 70%;
	margin-left: 23%;
	position: absolute;
	height: auto;
	background: gray;
}
.container .left .content-2 section.inner-container h3{
	color: white;
	width: 100%;
	position: absolute;
	top: 172px;
	font-size: 15px;
}
.container .left .content-2 section.inner-container h2{
	color: white;
	width: 100%;
	position: absolute;
	top: 190px;
	font-size: 20px;
}
.container .left .content-2 section.inner-container p{
	color: white;
	width: 80%;
	position: absolute;
	top: 220px;
	margin-left: -40%;
	left: 50%;
	font-size: 14px;
}
.container .left .content-2 section.inner-container ul{
	width: 84%;
	position: absolute;
	top: 262px;
}
.container .left .content-2 section.inner-container ul li{
	display: inline-block;
	cursor: pointer;
	width: 15%;
	opacity: .5;
}
.container .left .content-2 section.inner-container button{
	text-align: center;
	width: 50%;
	font-weight: 400;
	font-size: 12px;
	background: none;
	border: solid 2px white;
	height: 40px;
	color: white;
	cursor: pointer;
	margin: 0 auto;
	display: block;
	margin-top: 40px;
	max-width: 148px;
	min-width: 148px;
	position: absolute;
	top: 315px;
	margin-left: -74px;
	left: 50%;
}
.container .left .content-2 section.inner-container button:hover{opacity: .5}
.container .right .content-2 section.inner-container button:hover{opacity: .5}
.container .right .content-2 section.inner-container img.maquina-2{
	position: absolute;
	display: block;
}
.container .left .content-2 section.inner-container img.maquina-2{
	position: absolute;
	display: block;
	width: 100%;
	top: 50px;
}
.container .right .content-1 h1.txt-original{
	position: absolute;
	top: 20px;
	width: 82%;
	z-index: 2;
	font-size: 30px;
	text-align: right;
}
.container .right .content-1 h3.txt-autentica{
	position: absolute;
	top: 70px;
	text-align: center;
	width: 50%;
	margin-left: 33%;
	font-weight: 300;
	z-index: 2;
}
.container .right .content-1 p.txt-parrafo{
	position: absolute;
	top: 150px;
	text-align: center;
	width: 40%;
	left: 39%;
	font-weight: 300;
	font-size: 12px;
	z-index: 2;
}
.container .right .content-1 button{
	text-align: center;
	width: 50%;
	font-weight: 400;
	font-size: 12px;
	background: none;
	border: solid 2px black;
	height: 40px;
	color: black;
	cursor: pointer;
	margin: 0 auto;
	display: block;
	max-width: 140px;
	min-width: 140px;
	position: absolute;
	left: 50%;
	margin-left: -70px;
	bottom:20px;
}
.container .right .content-1 p.txt-parrafo button:hover{opacity: .5}
.container .left .content-1 p.txt-parrafo button:hover{opacity: .5}
.container .right .content-2{
	background-color: white;
}
.container .right .content-3{
	background-color: white;
}
.container .right{
	width: 50%;
	height: 410px;
	background: white;
	float: left;
	animation: all 0.2s;
	position: relative;
}
.semi-circulo-1 {
	width: 50px; 
	height: 100px; 
	background: white;
	-moz-border-radius: 0 100px 100px 0;
	-webkit-border-radius: 0 100px 100px 0;
	border-radius: 0 100px 100px 0;
	position: absolute;
	left: 25px;
	z-index: 10;
	cursor: pointer;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	z-index: 10;
	color: black;
}
.semi-circulo-2 {
	width: 50px; 
	height: 100px; 
	background: white;
	-moz-border-radius: 0 100px 100px 0;
	-webkit-border-radius: 0 100px 100px 0;
	border-radius: 0 100px 100px 0;
	position: absolute;
	right: -25px;
	transform: translate(-50%, -50%) rotate(180deg);
	-webkit-transform: translate(-50%, -50%) rotate(180deg);
	z-index: 10;
	cursor: pointer;
	top: 50%;
	z-index: 10;
	color: black;
}
.semi-circulo-1:hover{
	opacity: .9;
	cursor: pointer;
	background: rgba(0,0,0,.9);
}
.semi-circulo-2:hover{
	opacity: .9;
	cursor: pointer;
	background: rgba(255,255,255,1);
}
.semi-circulo-1:hover > span{
	opacity: .9;
	cursor: pointer;
	color: rgba(255,255,255,1);
}
.semi-circulo-2:hover > span{
	opacity: .9;
	cursor: pointer;
	color: rgba(0,0,0,1);
}
.left .content-1{
	text-align: center;
	position: relative;
	width: 100%;
	height: 410px;
}
.left .content-2{
	text-align: center;
	position: relative;
	width: 100%;
	height: 410px;
}
.left .content-3{
	text-align: center;
	position: relative;
	width: 100%;
	height: 410px;
}
.right .content-1{
	text-align: center;
	position: relative;
	width: 100%;
	height: 410px;
}
.right .content-2{
	text-align: center;
	position: relative;
	width: 100%;
	height: 410px;
}
.right .content-3{
	text-align: center;
	position: relative;
	width: 100%;
	height: 410px;
}
.arrow-left{
	color: black;
	position: absolute;
	left: 15px;
	bottom: 38px;
	display: block;
	font-size: 24px;
	font-weight: 400;
}
.arrow-right{
	color: black;
	position: absolute;
	right: 23px;
	top: 34px;
	display: block;
	font-size: 24px;
	font-weight: 400;
}
.hide{
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.5s linear;
}
.font-w{
	font-weight: 300;
}
@media (max-width: 480px){
	.semi-circulo-1{
		border: solid 1px #9e9e9e;
		border-right: none;
		border-left: none;
	}
	.semi-circulo-2{
		border: solid 1px #9e9e9e;
		border-left: none;
		border-right: none;
	}
	.container .left .content-1 p.txt-parrafo{color: transparent;}
	.container .right .content-1 p.txt-parrafo{color: transparent;}
	.container .left .content-2 img.maquina{
		display: none;
	}
	.container .left .content-2 section.inner-container{
		width: 100%;
		margin-left: inherit;
	}
	.container .left .content-2 section.inner-container img.maquina-2 {
		width: 100%;
		margin-left: -50%;
		left: 50%;
	}
	.container .left .content-2 section.inner-container h3 {
		top: 130px;
	}
	.container .left .content-2 section.inner-container h2 {
		top: 157px;
	}
	.container .left .content-2 section.inner-container p {
		top: 227px;
		font-size: 12px;
	}
	.container .left .content-2 section.inner-container ul {
		width: 100%;
		top: 270px;
		display: block;
		left: 50%;
		margin-left: -50%;
		padding: 0;
	}
	.container .left .content-2 section.inner-container ul li{
		width: auto;
	}
	.container .right .content-2 img.maquina{
		display: none;
	}
	.container .right .content-2 section.inner-container{
		width: 90%;
		margin-left: -45%;
		left: 50%;
	}
	.container .right .content-2 section.inner-container img.maquina-2 {
		width: 100%;
		margin-left: -50%;
		left: 50%;
	}
	.container .right .content-2 section.inner-container h3 {
		top: 130px;
	}
	.container .right .content-2 section.inner-container h2 {
		top: 157px;
	}
	.container .right .content-2 section.inner-container p {
		top: 227px;
		font-size: 12px;
	}
	.container .right .content-2 section.inner-container ul {
		width: 100%;
		top: 270px;
		display: block;
		left: 50%;
		margin-left: -50%;
		padding: 0;
	}
	.container .right .content-2 section.inner-container ul li{
		width: auto;
	}
	.container{
		height: 100vh;
	}
	.container .left{
		height: 100vh;
	}
	.container .right{
		height: 100vh;
	}
	.left .content-1{
		height: 100vh;
	}
	.right .content-1{
		height: 100vh;
	}
	.left .content-2{
		height: 100vh;
	}
	.right .content-2{
		height: 100vh;
	}
	.left .content-3{
		height: 100vh;
	}
	.right .content-3{
		height: 100vh;
	}
}
@media (max-width: 768px){
	.container .left .content-1 h1.txt-original{width: 100%; font-size: 22px;}
	.container .left .content-1 h3.txt-autentica{
		width: 90%;
		margin-left: -45%;
		left: 50%;
		font-size: 12px;
	}
	.container .left .content-1 p.txt-parrafo{
		width: 90%;
		margin-left: -45%;
		left: 50%;
	}
	.container .left .content-1 p.txt-parrafo button{
		margin-top: 116px;
	}
	.container .right .content-1 h1.txt-original{width: 100%; text-align: center; font-size: 22px;}
	.container .right .content-1 h3.txt-autentica{
		width: 90%;
		margin-left: -45%;
		left: 50%;
		font-size: 12px;
	}
	.container .right .content-1 p.txt-parrafo{
		width: 90%;
		margin-left: -45%;
		left: 50%;
	}
	.container .right .content-1 p.txt-parrafo button{
		margin-top: 116px;
	}
}
@media (max-width: 768px){
	.container .left .content-2 section.inner-container p{
		top: 212px;
	}
	.container .left .content-2 section.inner-container h2{

		font-size: 18px;
	}
	.container .right .content-2 section.inner-container img.maquina-2{
		width: 115%;
	}
	.container .left .content-1 p.txt-parrafo {
		width: 50%;
		margin-left: -25%;
	}
}
@media (max-width: 768px){
	.container .right .content-1 p.txt-parrafo {
		width: 50%;
		margin-left: -25%;
	}
}
@media (max-width: 480px){
	.container .right .content-1 button, .container .left .content-1 button {
		display: none;
	}
}
@media (max-width: 480px){
	.semi-circulo-1 {
		width: 30px;
		height:60px;
		left: 15px;
	}
	.semi-circulo-2{
		width: 30px;
		height:60px;
		right: -15px;
	}
	.arrow-right{
		right: 10px;
		top: 15px;
	}
	.arrow-left{
		left: 7px;
		top: 13px;
	}
	.container .left .content-1 img.tasa-1{
		top:300px;
	}
	.container .right .content-1 img.tasa-1{
		top:270px;
	}
	.container .left .content-1 h3.txt-autentica{
		font-size: 20px;
	}
	.container .right .content-1 h3.txt-autentica{
		font-size: 20px;
		width: 80%;
		margin-left: -39%;
	}
}
@media (max-width: 480px){
	.container .right .content-2 section.inner-container img.maquina-2 {
		width: 200%;
		margin-left: -100%;
		left: 50%;
	}
	.container .left .content-2 section.inner-container img.maquina-2 {
		width: 200%;
		margin-left: -100%;
		left: 50%;
	}
	.container .right .content-2 section.inner-container ul li, .container .left .content-2 section.inner-container ul li{
		width: 24.33%;
	}
	.container .right .content-2 section.inner-container button, .container .left .content-2 section.inner-container button{
		display:none;
	}
	.container .right .content-2 section.inner-container ul{
		top:315px;
	}
	.container .left .content-2 section.inner-container ul{
		top:360px;
	}
	.container .right .content-2 section.inner-container p {
		top: 270px;
	}
	.container .left .content-2 section.inner-container p {
		top: 290px;
	} 
	.container .right .content-2 section.inner-container h2, .container .left .content-2 section.inner-container h2 {
		top: 230px;
	}
	.container .left .content-2 section.inner-container h2 {
		width: 80%;
		margin-left: 10%;
	}
	.container .right .content-2 section.inner-container h3, .container .left .content-2 section.inner-container h3 {
		top: 210px;
	}
	.container .right .content-3 img.capsula{
		display: none;
	}  
}