@charset "UTF-8";
/* CSS Document */
/*
Colores
azul claro
RGB	0 114 206
HEX/HTML	#0072CE
CMYK	90 48 0 0
azul obscuro
RGB	0 79 113
HEX/HTML	#004F71
CMYK	100 27 10 56
verde
RGB	62 177 200
HEX/HTML	#3EB1C8
CMYK	74 0 13 0

 #BDC3C7 gris
*/

*{margin:0; padding: 0; box-sizing: border-box;}

a{ text-decoration: none; color:#0D47A1;}
a:hover{color: #BDC3C7;}

h2{ font-size:40px; color:#0D1780; text-align: center; }
h3{ margin: 20px;}

.imgcien{width: 100%;}

.col-4, .col-6, .col-8{ display: inline-block; padding: 3% ;}
.col-4{  width: 30%;  }
.col-6{  width: 40%;  }
.col-8{  width: 20%; }

#cabeza{position: fixed; width: 100%; z-index: 999; background: #fff; top: 0; padding: 0 5%; height: 120px;}
header{ width:100%; background:white;}
#btn-menu{display:none;}
header label {display:none;width:30px;height:30px;margin-top:-80px;}
header label:hover {cursor:pointer;background:white;}
#cabeza h1, #cabeza #Menu, #cabeza #Menu ul li{
    display: inline-block;  
}
#cabeza h1 img{ width: 280px;}

.menu ul {list-style:none; display:flex;justify-content:flex-end;margin:-115px 90px;}
.menu ul:hover {background:white;}
.menu li{border-right:1px solid white;}
.menu li a {display:flex; padding: 10px 10px;text-decoration: none;font-size:20px;color: #3EB1C8;font-family: 'Thasadith', sans-serif;right: 0px;margin:35px 10px 0px 0px;font-weight:bold;}
.menu a:hover {color:#004F71;background:#004F71;color:#fff;}

#menu, h1, h2, h3, h4, h5, h6{ font-family: 'Thasadith', sans-serif; color: #29B6F6;}

#faciales {background:#004F71; width:100%; height:55px; margin:110px 0px 0px 0px;padding:0px;}
#faciales h2 a{color:white; font-size:24px;font-family: 'Thasadith', sans-serif;}

#servicios1 figure{ position: relative; overflow: hidden; margin-top: 0px; }
#servicios1 figure figcaption{ background: rgba(0, 79, 113, .9); position: absolute; top: 0px; left: 0px; width: 50%; height: 99.5%; text-align: center; padding-top: 10%;}
#servicios1 figure figcaption a{ color:#fff;  text-decoration: none;}
#servicios1 figure figcaption p{color: white; padding: 10%; font-size:24px;font-family: 'Thasadith', sans-serif;;margin:-120px 0px 0px 0px; text-align:justify;}

#areas {background:#004F71;width:100%;height:100px;}
.dos ul li{list-style:none; margin:-5px 10px 0px 20px;width:100%;background-color:#004F71;}
.dos ul li a{text-decoration:none;color:#fff; display:block; float:left;background-color:#004F71;padding:18px 18px;font-size:22px; text-align:center; box-shadow:2px 2px 10px #E4E4E4;height:60px;font-family: 'Thasadith', sans-serif;
transition::2s;
-webkit-transition: 1s;
-o-transition:1s;
-moz-transition:1s;
-ms-transition:1s;}
.dos ul li a:hover{background-color:#3EB1C8;color:#fff;border:1px solid #fff;}

#pie{ background: #68C1D5; color: #004F71; width: 100%; height: auto; text-align: center; padding: 10px; position: fixed; bottom: 0; font-family: 'Thasadith', sans-serif;font-weight:bold;}

@media screen and (max-width: 1068px){
	header{width:100%;}
	.menu ul {margin:-120px 90px;}
	#servicios1 figure figcaption{width: 60%;}
	#areas{height:150px;}
	#servicios1 figure figcaption p{margin:-150px 10px 20px 10px;}
	.dos ul li a{padding:15px 25px;}
	}
	
@media screen and (max-width: 990px){
	header{height:100px;}
	header label{display:block;margin:-50px 0px 0px -10px;width:15px;}
	#cabeza h1 img{ width: 30%;margin:5px 0px 0px 40px; }
	.menu{background:white; width:18%;transition: all 
	0.5s;margin:-70%}
	.menu ul{flex-direction:column;margin:-60px -20px 
	0px 0px;}
	.menu li{border-top:1px solid white;margin-top:
	70px;}
	.menu li a {padding:0px;font-size:18px;}
	#btn-menu:checked ~ .menu {margin:0px;}
	#faciales h2 a{font-size:24px;}
	#servicios1 figure figcaption{width: 55%;}
	#servicios1 figure figcaption p{font-size:18px;
	margin:-100px 10px 20px 10px;}
	#areas{height:170px;}
	.dos ul li a{font-size:20px;height:60px;}
	#pie{font-size:14px; }
	}
@media (max-width:768px){
	header{height:90px;}
	header label{display:block;margin:-40px 0px 0px 0px;width:15px;}
	#cabeza h1 img{ width: 30%; margin:5px 0px 0px 
	50px;}
	.menu ul li a {font-size:18px;}
	#btn-menu:checked ~ .menu {margin:0px;}
	#faciales h2 a{font-size:24px;}
	#servicios1 figure figcaption p{font-size:20px;
	margin:-100px 10px 20px 10px;}
	#areas{height:140px;margin:0px 0px 0px 0px;}
	.dos ul li a{font-size:20px;height:40px;margin:10px 10px 0px -10px;padding:10px;}
	#pie{font-size:14px; }
	}
@media (max-width:480px) {
	header label{display:block;margin:-40px 0px 0px 0px;}
	#cabeza {margin:40px 0px 0px 0px; height: 80px;}
	#cabeza h1 img{width: 40%; margin:-20px 0px 0px 
	40px;}
	.menu{background:white; width:23%;transition: all 
	0.5s;margin:-50%}
	.menu li a{padding:0px;}
	#faciales h2 a{font-size:18px;}
	#servicios1 figure figcaption{width:100%;}
	#servicios1 figure figcaption p{font-size:15px;
	margin:-60px 0px 0px 0px;padding:18px;}
	.dos ul li a{font-size:14px;height:40px;margin:5px 0px 0px 0px;}
	#pie{font-size:13px;}
	}
@media (max-width:320px) {
	header label{display:block;margin:-40px 0px 0px 0px;}
	#cabeza {margin:40px 0px 0px 0px; height:60px;}
	#cabeza h1 img{width: 30%; margin:-20px 0px 0px 
	40px;}
	.menu{background:white; width:23%;transition: all 
	0.5s;margin:-50%}
	.menu ul li a{font-size:14px;margin:0px 0px -10px 0px;}
	#faciales{margin-top:80px;}
	#faciales h2 a{font-size:14px;height:40px;}
	#servicios1 figure img{height:250px;}
	#servicios1 figure figcaption{background:rgba(0, 79, 113, .7);width:100%;height:300px;}
	#servicios1 figure figcaption p{font-size:14px;
	margin:-40px 0px 0px 0px;}
	#areas{height:170px;}
	.dos ul{margin:5px 0px 0px -15px;}
	.dos ul li a{font-size:14px;height:40px;padding: 10px 13px;}
	#pie{font-size:12px;}
	}