@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Nanum+Gothic&display=swap');
*{
	font-family: sans-serif;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 14px;
	scroll-behavior: smooth;
}
section{
	width: 100%;
}
h1{
	font-size: calc(2vw + 10px);
}
.subtitle{
	font-size: calc(0.5vw + 12px);
}
label, ul li{
	font-size: calc(0.3vw + 10px);
}
/*----- HEADER -----*/
	header{
		position: relative;
	    width: 100%;
	    z-index: 10;
	    background: #FFF;
	}
	header div{
		position: relative;
		/*top: 0;
	    left: 0;*/
	    width: 100%;
	    padding: 0 10%;
	    display: flex;
	    justify-content: space-between;
	    align-items: flex-start;
	}
	header ul{ list-style: none; }
	header .logo{
		display: flex;
		padding: 5px;
	}
	header .logo img{
		width: 100%;
		max-height: 110px;
	}
	header.simple{
		background: #032539;
	}
	header.simple div{
		position: relative;
		align-items: center;
	}
	header.simple .logo{
		width: 100px;
		margin-top: 0;
	}
	/*----- MENU -----*/
		.menu{
			display: flex;
			color: #FFF;
		}
		.menu a{
			display: block;
			padding: 20px 10px;
			color: #39a1a0;
			text-decoration: none;
			font-size: calc(0.5vw + 10px);
			font-weight: bold;
		}
		.menu label{
			position: relative;
			display: block;
			padding: 20px 10px;
			color: #39a1a0;
			text-decoration: none;
			font-size: calc(0.5vw + 10px);
			white-space: nowrap;
		}
		.menu li{
			position: relative;
		}
		.menu>li:last-child{
			padding-right: 20px;
		}
		.menu ul{
			display: none;
			position: absolute;
		    top: 100%;
		    left: 0;
		    background: rgba(3, 37, 57, 0.7);
		}
		.menu>li:last-child:hover ul{
			display: block;
		}
		.menu>li:last-child:hover{
			background: rgba(3,37,57,0.7);
		}
		/*.menu>li:last-child:hover label{
			color: #FFF;
		}*/
		.menu li:last-child:before{
			content: '';
		    position: absolute;
		    top: 50%;
		    transform: translateY(-3px);
		    right: 5px;
		    width: 0;
		    height: 0;
		    border-right: 6px solid transparent;
		    border-top: 6px solid #39a1a0;
		    border-left: 6px solid transparent;
		    border-bottom: 6px solid transparent;
		}
		.menu li:last-child:hover:before{
			content: '';
		    position: absolute;
		    top: unset;
		    bottom: 50%;
		    transform: translateY(3px);
		    right: 5px;
		    width: 0;
		    height: 0;
		    border-right: 6px solid transparent;
		    border-top: 6px solid transparent;
		    border-left: 6px solid transparent;
		    border-bottom: 6px solid #39a1a0;
		}
		.submenu li a{
			font-size: 12px;
			padding: 10px;
			color: #FFF;
		}
		.submenu li a:hover{
			background: rgba(255,255,255,0.2);
		}
/*----- TOP -----*/
	#top{
		position: relative;
	}
	#top .info{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding-top: 2%;
	}
	#top img{ width:100% }
	.info h1{
		font-size: calc(2vw + 14px);
		color: #FFF;
		text-align: center;
		opacity: 0.7;
	}
	.info a{
		background: rgba(3, 37, 57, 0.7);
		color: #FFF;
		width: 15%;
		min-width: 250px;
		font-size: calc(0.3vw + 12px);
		text-decoration: none;
		text-align: center;
		padding: 15px 30px;
		margin-top: 15px;
		border: 1px solid rgba(255,255,255,0.7);
	}
/*----- WELCOME -----*/
	#welcome{
		padding: 5% 10%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#welcome h1{
		display: block;
		width: 100%;
		color: #39a1a0;
		text-align: center;
		margin-bottom: 25px;
	}
	#welcome div{
		width: 27%;
		max-width: 300px;
		min-width: 200px;
		padding: 3% 0;
		margin: 0 2%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	#welcome div img{
		display: block;
	    width: 100%;
	    background: #032539;
	    border-radius: 100%;
	}
	#welcome div span{
		margin: 20px 0px;
	}
	#welcome div label{
		text-align: center;
	}
/*----- DIRECTION -----*/
	#direction{
	    padding: 5% 10%;
	    background: #6a7c44;
	    color: #FFF;
	    background-image: url(../img/ws_directions.png);
	    background-attachment: local;
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-position: right;
	}
	#direction h1{
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 4%;
	}
/*----- MEDIC -----*/
	#medic{
		padding: 5% 10%;
		background: #39a1a0;
	}
	#medic span{
		color: #333333;
		display: block;
		margin-bottom: 20px;
	}
	#medic ul{
		margin-left: 21px;
	}
	#medic ul:nth-child(2){ margin-bottom: 40px; }
	#medic ul li{
		color: #e2e2e2;
	}
/*----- EXPERIENCE -----*/
	#experience{
		padding: 5% 10%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		font-size: 20px;
	}
	#experience span.subtitle{
		margin-bottom: 20px;
	}
/*----- TREATMENT -----*/
	#treatment{
		padding: 5% 0%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#treatment h1{
		display: block;
		width: 100%;
		color: #39a1a0;
		text-align: center;
		margin-bottom: 25px;
	}
	#treatment div{
		position: relative;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#treatment div div{
		/*display: flex;*/
		position: relative;
		background: #3d89fd;
		border-radius: 100%;
		border: 6px solid #3d89fd;
		width: 33%;
		max-width: 400px;
		min-width: 120px;
		margin: 10px 0;
		overflow: hidden;
		z-index: 2;
	}
	#treatment div div img{ width: 100%; }
	#treatment div ul{
	    /*position: absolute;*/
	    list-style: none;
	    /*top: 0;
	    left: 0;*/
	    width: 33%;
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    font-size: 17px;
	    text-align: right;
	}
	#treatment div ul li{
		/*font-size: calc(0.2vw + 10px);*/
		margin-bottom: 10px;
	}
	#treatment div ul li:nth-child(2){
		padding-right: 40px;
	}
	#treatment div ul li:nth-child(3){
		padding-right: 40px;
	}
	#treatment div ul:last-child{
		left: unset;
		right: 0;
		text-align: left;
	}
	#treatment div ul:last-child li:nth-child(2){
		padding-right: unset;
		padding-left: 40px;
	}
	#treatment div ul:last-child li:nth-child(3){
		padding-right: unset;
		padding-left: 40px;
	}
/*----- CONTACT -----*/
	#contact{
		padding: 5% 10%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		background: #032539;
		color: #FFF;
	}
	#contact div{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		width: 50%;
	}
	#contact div h1{
		display: block;
		width: 100%;
		color: #39a1a0;
		text-align: left;
		margin-bottom: 25px;
		font-size: calc(0.5vw + 28px);
	}
	#contact div img{
		width: 250px;
	}
	#contact iframe{
		width: 50%;
		min-width: 300px;
		height: 450px;
	}
	#contact label{
		font-size: calc(0.2vw + 11px);
		margin-bottom: 20px;
	}
/*----- FOOTER -----*/
	footer{
		position: relative;
		padding: 2% 10%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		background: #032539;
		color: #39a1a0;
		font-size: 11px;
		text-align: center;
	}
	footer img{
		position: absolute;
		top: 0;
		right: 10%;
		width: 12%;
		max-width: 150px;
	}
	footer.simple{
		background: #FFF;
	}
	footer.simple img{
		position: relative;
		top: unset;
		right: unset;
		width: 200px;
	}
	footer.simple label{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 11px;
		margin: 2% 0%;
	}
	footer.simple div{
		width: 100%;
		display: flex;
		justify-content: center;
	}
	footer.simple div div{
		width: 50%;
		flex-direction: column;
	}
	footer.simple div div label{
		color: #000;
		font-size: 14px;
		margin: 0% 0% 2% 0%;
	}
/*----- TREATMENTS -----*/
	.treat h1{
		display: block;
		width: 100%;
		color: #39a1a0;
		text-align: center;
		font-size: calc(0.8vw + 18px);
		margin: 2% 0% 0%;
	}
	/*----- DESCRIPTION -----*/
		.desc{
			width: 100%;
			padding: 3% 10%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.desc label{
			display: block;
			width: 100%;
			color: #000;
			font-size: calc(0.5vw + 18px);
			margin-bottom: 1%;
		}
		.desc div{
			font-size: calc(0.3vw + 10px);
		}
		.desc div ul, .desc div ol{
			margin: 10px 0px 10px 20px;
		}
		.desc div div{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
		}
		.desc div div img{
			max-width: 300px;
			height: auto;
		}
	/*----- VIDEO -----*/
		.video{
			width: 100%;
			padding: 3% 10%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: #092863;
		}
		.video label{
			display: block;
			color: #FFF;
			font-size: calc(0.5vw + 18px);
			margin-bottom: 20px;
		}
		video{
			min-width: 300px;
			max-width: 700px;
			height: 400px;
		}
	/*----- SLIDER (Caso Clinico) -----*/
		.case{
			width: 100%;
			padding: 3% 10%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: #010066;
		}
		.case label{
			display: block;
			color: #FFF;
			font-size: calc(0.5vw + 18px);
			margin-bottom: 40px;
		}
		.case div label{
			width: 100%;
		}
		.case>div{
			position: relative;
		}
		.slider .btnCtrl{
			position: absolute;
			width: 40px;
			height: 100%;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: "Nanum Gothic", sans-serif;
			font-weight: bold;
			font-style: normal;
			z-index: 2;
		}
		.slider .btnCtrl:hover{
			cursor: pointer;
			background: rgba(0,0,0,0.2);
		}
		#btnLast{ left: 0; }
		#btnNext{ right: 0; }
		.slider ul{
			list-style: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		.slider ul li{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 0 40px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			background: #010066;
		}
		.slider ul li div{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.slider ul li img{
			max-height: 100%;
		}
/*----- MEDIA BREAKPOINTS -----
	@media only screen and (max-width:1200px){
		header .logo{ width: 330px; }
		h1{ font-size: 36px; }
		#contact iframe{
			width: 400px;
			height: 350px;
		}
		#contact h1{ font-size: 32px; }
		.case, .video{
			justify-content: center;
		}
		.case label, .video label{
			display: block;
			width: 100%;
		}
	}
	@media only screen and (max-width:1024px){
		h1{ font-size: 27px; }
		header .logo{ width: 200px; }
		.menu>li:last-child{ width: 250px; }
		.menu label, .menu a{ font-size: 14px; }
		.menu li:last-child:before{
			border-right: 7px solid transparent;
		    border-top: 7px solid #FFF;
		    border-left: 7px solid transparent;
		    border-bottom: 7px solid transparent;
		}
		.menu li:last-child:hover:before{
			border-right: 7px solid transparent;
		    border-top: 7px solid transparent;
		    border-left: 7px solid transparent;
		    border-bottom: 7px solid #FFF;
		}
		#welcome div label{ font-size: 16px; }
		#welcome div span{ font-size: 22px; }
		#medic label{ font-size:26px; }
		#direction label,#medic ul li, #experience label{ font-size: 18px; }
		#treatment div div{
			width: 250px;
			height: 250px;
		}
		#treatment div ul:last-child{ padding-left:78px; }
		#treatment div ul{ font-size: 11px; }
		#treatment div ul:last-child li:nth-child(2), #treatment div ul:last-child li:nth-child(3){ padding-left:67px }
	}
	@media only screen and (max-width:768px){
		#contact div{
	    	margin-bottom: 10px;
	    }
	    #contact div label{
	    	margin-bottom: 15px;
	    }
	    footer{
	    	height: 80px;
	    }
	    footer img{
	    	top: unset;
	    	bottom: 15px;
	    	right: 5%;
	    	width: 80px;
	    }
	    #treatment div{
	    	flex-direction: column;
	    	align-items: center;
	    }
	    #treatment div ul, #treatment div ul:last-child{
	        position: relative;
	        left: unset;
	        top: unset;
	        right: unset;
	        width: 100%;
	        padding: 0;
	        text-align: left;
	        height: 50%;
	        font-size: 14px;
	    }
	    #treatment div ul:last-child li:nth-child(2), #treatment div ul:last-child li:nth-child(3){ padding: 0; }
	    #treatment div div{
	    	width: 250px;
	    	height: 400px;
	    	margin: 15px 0;
	    }
	}
	@media only screen and (max-width:640px){
		.menu label, .menu a{ font-size: 10px; }
		header .logo{
			width: 120px;
			margin-top: 36px;
		}
		.menu>li:last-child{ width: 190px; }
		h1{ font-size: 20px; }
		#welcome div label{ font-size: 14px; }
		#welcome div span{ font-size: 18px; }
		#medic label { font-size: 18px; }
	    #direction label, #medic ul li, #experience label{ font-size: 14px; }
	}*/