@charset "utf-8";
html { 
	background: no-repeat center center fixed; 
	background-size: 1400px;
	background-position-y: -30px;
	font-family: Arial;
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	color: #44494d;
	max-width: 100%;
}
.index{
	background: no-repeat center center fixed url(../recursos/Logo_coronaradiada_tallo_v1.png); 
	background-size: 1400px;
	background-position-y: -30px;
}
body {
	margin: 0;
	padding: 0;
	background-position: 200px -60px;
	max-width: 100%;
}
/* ~~ efectos ~~ */
.image-shadow1 {
  box-shadow: 3px 3px 3px gray;
}
/* ~~ Selectores de elemento/etiqueta ~~ */
ul, ol, dl { 
	padding: 10px 0px;
	margin: auto;
	max-width: 1200px;
}

h3 {
	margin-bottom: 0px;
	font-size: 25px;
	color: #1f6f74;
}
h4{
	color:#409dbc;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 24px;
	margin-top: 20px;
	text-align:left;
}
a img { 
	border: none;
}
a:link {
	color: #42413C;
	text-decoration: underline; 
}
a:visited {
	color: #42413C;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
	color: #7489d0;
}
a {
	padding: 0px;
	margin:0px;
}
.container {
	padding: 0px;
	min-width: 435px;
}
.separador{
	height: 10px;
	background-color: #231515;
}
	header {
		width:100%;
		text-align:center;
		position:relative;
		transition: all .2s ease;
		max-height: 85px;
	}
	header img {
		position: relative;
		right: 0px;
		height: 100%;
	}
				header .spamizq {
				position:absolute;
				color: #634747;
				font-size:20px;
				margin: 10px 0px 0px 30px;
				display:block;
				font-style: italic;
				font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
			}
     header .logo{
		position: relative;
		background-color:transparent;
		min-width: 200px;
		max-width: 1100px;
		margin: auto;
		text-align: left;
		height: 80px;
		transition: height 0.4s ease;
	}
		@media screen and (max-width: 700px) { 
			#logoheight{ 
			height: 50px;
			float: left;
			margin: 20px -25px 20px 0px;
			min-width: unset;
			}
			#logoheight img{
			
			} 
		}
     header .center{
		position: relative;
	    left: -500px;
	    max-width: 200px;
	    padding: 5px;
      }
     header .drch{
	    position: relative;
		color: black;
		max-width: 400px;
		min-width: 200px;			 
		margin: auto;
	  }

			header .spamdch {
				font-size:20px;
				color: #0070C0;
				font-style: italic;
				position: absolute;
				top: 50px;
				right: 100px;
			}
	.imgifem{
		float:right;
		border-radius: 40px;
	}
		@media screen and (max-width: 700px) { 
			.imgifem{ 
			transition: right 0.75s;
			display: none ;
			}
		}
	.menuscroll{
		width:101%;
		top:-100px;
		position:fixed;
		z-index:1;
		transition: top 0.5s;
		font-size:10px;
				
	}

	.menu{
		min-width:435px;
		background-color: #F8F8F8;
		text-transform: uppercase;
		height:100%;
		padding:12px 0px 12px 0px;
		transition: padding 1s ease;
	}
	@media screen and (max-width: 700px) { 
		.menu{ 
			padding:unset !important;
		}
	}
		.menu a {
			color: #1F6F74;
			font-size:25px;
			text-decoration:none;
			padding: 0px 10px 0px 10px;
			transition: all .2s ease;
			display:inline-block;
		}

		.menu a:hover, .sidebar1 li a:active  {
			color: #7489d0;
		}
			/* Underline From Center */
			.hvr-underline-from-center {
				vertical-align: middle;
				-webkit-transform: perspective(1px) translateZ(0);
				box-shadow: 0 0 11px rgba(0, 0, 0, 0);
				position: relative;
				overflow: hidden;
			}
			.hvr-underline-from-center:before {
				content: "";
				position: absolute;
				z-index: -1;
				left: 51%;
				right: 51%;
				bottom: 0;
				background: #d2d5e3;
				height: 2px;
				-webkit-transition-property: left, right;
				transition-property: left, right;
				-webkit-transition-duration: 0.2s;
				transition-duration: 0.2s;
				-webkit-transition-timing-function: ease-out;
				transition-timing-function: ease-out;
			}
			.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
				left: 0;
				right: 0;
			}
	.casa {
				margin: 0px 0px -10px 0%;
				background: url("../recursos/casa.png") center no-repeat;
				height: 30px;
				width: 30px;
				background-size: 30px;
				transition: all .2s ease;
		}
   .casa:hover {
		margin: 0px 0px -10px 0px;
		background: url("../recursos/casa.png") center no-repeat;
		height: 30px;
		width: 30px;
		background-size: 35px;
   }
  	#homeimg{
		width: 97%;
		}
	@media screen and (max-width: 850px) { 
		#copimg{ 
			visibility: hidden
		}
	}
	#generalimg{
		transition: width 0.5s;
	}
	@media screen and (max-width: 950px) { 
		#generalimg{
			float: unset !important;
			width: 75%;
		}
	}
.content {
	text-align:center;
	position: relative;
	max-width: 1000px;
	margin: auto;
	min-height:300px;
	margin-top: 20px;
	opacity:1;
	animation: fadeopacity 0.3s ease;
	padding:0px 5px 0px 5px;
}
	@keyframes fadeopacity {
	  0%   {opacity: 0;}
	  100% {opacity: 1;}
	}
	img {
		opacity:1;
		animation: fadeimg 1s ease;
	}
	@keyframes fadeimg {
		0%   {opacity: 0;}
		100% {opacity: 1;}
		}
	.typewriter {
		overflow: hidden; /* Ensures the content is not revealed until the animation */
		white-space: nowrap; /* Keeps the content on a single line */
		margin: 0 auto; /* Gives that scrolling effect as the typing happens */
		opacity:0;
		animation: fadedelay 2.5s steps(49, end);
		animation-delay: 0s;
		animation-fill-mode: forwards;
	}
	@keyframes fadedelay {
		from { width: 0; opacity:0 }
		to { width: 100%; opacity:1 }
		0% { opacity:0}
		25%{ opacity:1 }
		}
	.typewriter-2 {
		overflow: hidden; /* Ensures the content is not revealed until the animation */
		white-space: nowrap; /* Keeps the content on a single line */
		margin: 0 auto; /* Gives that scrolling effect as the typing happens */
		opacity:0;
		animation: fadedelay2 2.5s steps(49, end);
		animation-delay: 1.0s;
		animation-fill-mode: forwards;
	}
		@keyframes fadedelay2 {
			from { width: 0; opacity:0 }
			to { width: 100%; opacity:1 }
			0% { opacity:0}
			25%{ opacity:1 }
			}
		
		@media screen and (max-width: 730px) { 
			.typewriter, .typewriter-2{
				white-space: unset !important;
				animation: unset !important;
				opacity:1;
				}
			}
	.content .middle {
			margin: 50px 0px;
			font-size: 17px;
			padding: 0px;
	}
	.content .imgleft {
		margin: 0px 20px;
	}
	.content .imgfloleft {
		margin: 0px 40px;
		float: left;
	}
	.content .imgcenter {
		text-align: center;
		margin: 0px;
		padding: 0px;
	}
	.content .imgright {
		margin: 0px 20px;
	}
	.container ul{
	margin-bottom: 5px;

	}
	.content li{
		display:  list-item;
		text-align: left;
		font-size: 16px;
		margin: 0px 80px;
		color: #1f6f74;
		list-style: circle;
	}
	.content p {
		clear: both;
		padding:0px 5px 0px 5px;
		text-indent: 0px;
		text-align:justify;
		}

.footer {
	position: relative;
	clear: both;
	width:100%;
	margin: 10px 0px 0px 0px;
	text-align: center;
	background-color: rgba(219, 219, 219, 0.2);
	color: #0070C0;
	margin-bottom: 0px;
}
.contactos-logo {
	background-color:#ffffff;
	border-radius:5px;
	margin-right: 5px;
	transition-property: box-shadow;
	transition-duration: 0.3s;
}
	.contactos-logo:hover {
	box-shadow: 3px 3px 3px;
	color:black;
	}
.whatsapp {
	position:fixed;
	right:2.5%;
	bottom:7%;
	background-color:#bee3e582;
	border-radius:5px;
	animation-name: example;
	animation-duration: 1.75s;
	transition-property: box-shadow;
	transition-duration: 0.3s;
	box-shadow: 2px 2px 2px;
}
	.whatsapp:hover {
	box-shadow: 4px 4px 4px;
	}
	@keyframes example {
	  0%	{right:2.5%;bottom:-10%;}
	  50%  	{right:2.5%;bottom:-10%;}
	  75%	{right:2.5%;bottom:7.5%;}
	  87.5%	{right:2.5%;bottom:6.9%;}
	  100% 	{right:2.5%;bottom:7%;}
}
.sobremi-nu{
	clear:none;
	width: 25%;
	/*min-width: 110px;*/
	max-width: 150px;
	float: left;
	margin: 0px 20px 0px 10px;
}


/******************blog**************************/

* {
	box-sizing: border-box;
  }

  /* Fake image */
  .blogdivimg {
	background-color: rgba(175, 175, 175, 0.603);
	padding: 1px;
  }
  
  /* Add a card effect for articles */
  .sdisplay-inline-flex{
	  display: flex;
	  flex-wrap: wrap;
	}

  .cont-card{
	margin: 15px auto;
	/*box-shadow: 0px 0px 3px gray;*/
	height: 300px;
	width: 210px;
  }
  .card {
	 background-color: whitesmoke;
	 padding: 0px 5px 1px 5px;
	 box-shadow: 0px 0px 3px gray;
	 overflow: hidden;
	 font-size: 14px;
	 font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	 border-radius: 5px;
	 min-height: 300px;
	 max-height: 300px;
	 transition: max-height .2s;
	 width: 200px;
	 cursor: pointer;

  }
  .card:hover{
	position: absolute;
	box-shadow: 0px 0px 5px rgb(64, 64, 64);
	max-height: 400px;
	transition: max-height .5s;
  }
  .card h4 {
	  font-size: 12px;
	  margin-top: 8px;
	  margin-bottom: 2px;
	  font-weight: bold;
	}
  .card h3 {
	font-size: 16px;
	margin-top: 8px;
	font-weight: bold;
  }	
  .card p{
	  text-align: justify;
  }
  .blogimg #generalimg{
	  width: 60%;
  }
  @media screen and (max-width: 950px) {
	.blogimg #generalimg{
		width: 80%;
	}
  }

  .separador-top{
	height:90px;
	clear: both;
	transition: height .2 linear;
}

  .separador-bottom{
	height: 40px;
	clear: both;
  }
  
  /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */

	

.overviewvcont {
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 0px 5px rgb(64, 64, 64);
	border-radius: 5px;
	position: fixed;
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
	z-index: 300;
	padding: 10px 5% 10px 5%;
	left: 5px;
	top: 20px;
	overflow-y: scroll;
	visibility: hidden;
	height: 95%;
	line-height: 1.6;
}
@media screen and (max-width: 1016px) {
	.separador-top{
		height:115px;
		transition: height .2 linear;
	}
	.overviewvcont{
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}
  }
@media screen and (max-width: 700px) {
.separador-top{
	height:50px;
	transition: height .2 linear;
}
.overviewvcont{
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
}
}
.overviewvcont  h4 {
	font-size: 12px;
	margin-top: 8px;
	margin-bottom: 2px;
	font-weight: bold;
}
.overviewvcont h3 {
  font-size: 16px;
  margin-top: 8px;
  font-weight: bold;
}

.overviewvcontbkg {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgb(128, 128, 128);
	z-index: 200;
	visibility: hidden;
}
.overviewneufeeb{
	text-align: center!important;
	font-size: .90em;
	font-style: italic;
}
.paginacion spam{
	font-size: 14px;
	text-decoration: none;
	box-shadow: 0px 0px 2px rgb(64, 64, 64);
	margin: 0px 5px;
	padding: 3px 3px;
	font-style: italic;
	color:#7489d0;
}
.paginacion spam:hover{
	color: #7489d0;
	cursor: pointer;
}