@charset "utf-8";

/* Entidades CSS generales */
html{font-size:1.25vw;}
body{background-color:#FFF;color:#369;}
h1{font:bold italic 1.5rem Arial;margin:0.5rem 1rem;cursor:default;}
h2{font:bold 1.5rem Arial;margin:0rem 1rem;cursor:default;}
h3{font:bold 1rem Arial;text-align:center;}
h4{font:bold italic 0.75rem Arial;}
figcaption{font:bold italic 0.75rem Arial;margin:0rem 0rem 0.1rem 0.2rem;}
p,span{font:1rem Arial;text-align:justify;margin:0rem 0.5rem 0rem 1rem;cursor:default;}
ul{list-style:none;padding:0.1rem 0rem;margin:0rem;}
li{list-style:none;padding:0rem 0rem;margin-right:0.5rem;}
a{color:#336;}
form,input,select,fieldset{font:1rem Arial;}
input[type="radio"]{transform:scale(1.25);}
input[type="checkbox"]{transform:scale(1.25);}
textarea{resize:none;font:1rem Arial;}
::placeholder {color:rgba(255,255,255,.5);}

#mainWrapper{width:100%;}

#header{position:fixed;top:0%;left:0%;width:100%;display:block;background-color:#C1D0D5;z-index:5;}
	#logoClinica{width:15%;float:left;margin:0.5rem;}
	.rightBox{float:right;padding:0.5rem 1rem;}
	.leftBox{float:left;padding:0.5rem 0rem;}
		.alejaBtn1{width:10rem;background:#369;color:white;border:none;border-radius:0.5rem;padding:0.2rem;margin:0.5rem;cursor:pointer;}
		.alejaBtn2{width:10rem;background:#4CD;color:white;border:none;border-radius:0.5rem;padding:0.2rem;margin:0.5rem;cursor:pointer;}
	
#whiteBox{position:fixed;top:4.5rem;width:100%;height:5.5rem;display:block;background-color:white;z-index:5;}

#footer {
	position:fixed;bottom:0rem;left:0%;width:100%;height:4.5rem;
	display:block;background-color:#C1D0D5;z-index:10;
}
	#footer a{color:#369;text-decoration:none;cursor:default;}
	
	
.navButton {
	display:inline-block;border-radius:0.5rem;background-color:#EEE;color:#336;cursor:pointer;
	box-shadow:0.25rem 0.25rem 0.5rem rgb(64,64,64);-webkit-transition:box-shadow .1s ease-in-out;
	-moz-user-select:none;user-select:none;
} 
	.navButton p {display:inline-block;-webkit-transition:-webkit-transform .1s ease-in-out;}
	.navButton:hover {box-shadow:0.25rem 0.25rem 0.75rem rgb(32,32,32);background:#F6F6F6;cursor:pointer;}
	.navButton:active {transform:translate(0.2rem, 0.2rem); /* depth of button press */}	

.inlineIcon{position:relative;top:0.35rem;height:1.5rem;width:1.5rem;margin-right:0.5rem;}
.centrado{text-align:center;}
.derecha{text-align:right;line-height:150%;}


/* CSS Portal de especialidades */	
#leftBtnBox{position:relative;top:5rem;left:5rem;width:50%;float:left;}
	.fancyButton{
		position:relative;width:80%;margin:0.5rem 5%;display:none;border-radius:2rem;background-color:#69C;color:white;
		cursor:pointer;box-shadow: 0.25rem 0.25rem 0.5rem rgb(64,64,64);-webkit-transition: box-shadow .1s ease-in-out;
	}
		.fancyButton:hover {box-shadow: 0.25rem 0.25rem 0.75rem rgb(32,32,32);background-color:#369;}
		.fancyButton:active {transform: translate(0.2rem, 0.2rem);}
		.fancyButton p{text-align:center;-moz-user-select:none;user-select:none;margin:0.25rem 2rem 0.25rem 0rem;}
		.roundLogo{height:3rem;width:3rem;float:left;margin:0.5rem 0.5rem;display:block;border-radius:2rem;background-size:contain;}
			.roundLogo img {max-width:100%;max-height:100%;}

#rightMessage{
	position:fixed;top:7.5rem;left:50rem;width:25%;height:25.5rem;border:solid black;overflow:hidden;
	background-image:url('images/portada.jpg');background-size:cover;transition:2s;border-radius:1rem;
}
	.sldTrans{position:absolute;top:0rem;left:0rem;opacity:0;transition:2s;width:100%;}
	#sldNone{width:100%;height:100%;display:none;opacity:0.75;transition:1s;background-color:#FFF;align-items:center;}
		#sldNone h1{text-align:center;}
	.cycle-slideshow img {width:100%;}
	
#loaderBox{position:fixed;display:none;top:0rem;left:0rem;width:100%;height:100%;background-color:#000;opacity:0.25;z-index:25;}
	#spinner{
		border:solid white 0.5rem;border-top-color:#69C;border-top-style:groove;height:3rem;width:3rem;border-radius:50%;
		position:absolute;top:0%;right:0%;bottom:0%;left:0%;margin:auto;
		animation: spin 1.5s linear infinite;
	}
		@keyframes spin {
			0%{transform:rotate(0deg);}
			100%{transform:rotate(360deg);}
		}

