body{
  margin: 0px;
  padding: 0px;
  font-family: 'Raleway', sans-serif;
}

.card{
  margin: 1% 0% 0% 3.5%;
  height: 300px;
  border-radius: 2px;
  position: relative;
  background: white;
  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
  float: left;
  z-index: 0;
  transition: width 0.1s linear;
}

@media only screen and (min-width: 1000px) {
    .card {
        width: 45%;
    }
}

@media only screen and (max-width: 999px) {
    .card {
      width: 96%;
      margin: 10px 2%;
    }
  .expanded > .card-image{
    max-height: 35%;
  }
}

.right{
  float: right;
  margin-right: 3%;
  transform-origin: right;
}

.expanded{
  box-shadow: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99;
  margin:0px;
  transition: width 0.3s ease, height 0.5s 0.2s ease;
}

.expanded .right{
  right: 0px;
}


.card-control{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #444;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  position: absolute;
  right: 20px;
  bottom: 20px;
  border: 0px;
  cursor: pointer;
  outline: none;
}

.card-control:before{
  content: '';
  height: 2px;
  background: white;
  width: 60%;
  position: absolute;
  left: 20%;
  top: 50%;
  transform: rotate(0deg);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.6s ease-in-out, width 0.2s ease-in-out, top 0.1s linear, left 0.5s linear, right 0.5s linear;
}

.card-control:after{
  content: '';
  height: 2px;
  background: white;
  width: 60%;
  position: absolute;
  left: 20%;
  top: 50%;
  transform: rotate(90deg);
  transition: transform 0.6s ease-in-out, width 0.2s ease-in-out, top 0.1s linear, right 0.5s linear;
}

.expanded > .card-control{
  bottom: 85%;
  transition: bottom 0.3s 0.1s ease;
}

.expanded > .card-control:before{
  position: absolute;
  right: 15px;
  top: 22px;
  transform: rotate(180deg);
}

.expanded > .card-control:after{
  position: absolute;
  right: 15px;
  top: 24px;
  transform: rotate(360deg);
}
.card-image{
  width: 100%;
  max-height: 60%;
  overflow: hidden;
}

.expanded > .card-image{
  max-height: 35%;
}
.card-image img{
  width: 100%;
}

.card-desc{
  font-family: 'Raleway', serif;
  font-weight: 400;
  margin: 2% 1%;
  Overflow: auto;
}

.card-desc-head{
  font-size: 22px;
  padding: 0px;
  margin: 0px;
  font-weight: 600;
  font-family: 'Raleway', sans-serif;
  
}

.expanded > .card-desc > .card-desc-head{
    position: absolute;
    top: 20%;
    background: white;
    padding: 5px;
}

@media only screen and (max-width: 999px) {
    .expanded > .card-desc > .card-desc-head{
      position: absolute;
      top: 20%;
      font-size: 2.5vh;
      width: 80%;
    }
}

.expanded > .card-desc >  .article{
  overflow-y: scroll;
  height: 60%;
  width: 100%;
  position: absolute;
  bottom: 10px;
}

.card-desc-peak{
  color: #333;
  width: 80%;
  margin: 5px 0px;
  font-size: 14px;
  height: 36px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Gudea', sans-serif;
 
}

.expanded > .card-desc > .article > .card-desc-peak{
  height: auto;
  word-spacing: normal;
  text-overflow: inherit;
  white-space: normal;
  font-size: 18px;
  height: auto;
  white-space: normal;
  width: 96%;
  margin: 0px 2%;
  -webkit-animation: text-appear 0.5s ease;
}

@keyframes text-appear{
  0%{opacity: 0}
  50%{opacity: 0; position: relative; top: 10px;}
  100%{opacity: 1; position: relative; top: 0px;}
}



/******  cabecera *********/

.titulo {
	text-align: center;
	font-family: 'Rock Salt', cursive;
}

.resaltado {
		color: #9b2e00;
}

.elink {
	color:#0f6bc1;
	
	
}

/* ---  BOTON DE INICIO -- */
.fa-home {
    padding:10px 10px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #014b7a;
	width: 4%;
	height: auto;
	/*-webkit-border-radius: 50px; */
	border-radius: 60px;
	color: #fff;

}
.fa-home:hover {
    background-color: #0065a5;
}

.quickFade {
    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-timing-function: ease-in;
	
	-moz-animation-name: reset, fade-in;
    -moz-animation-duration: 2.5s;
    -moz-animation-timing-function: ease-in;
	
	animation-name: reset, fade-in;
    animation-duration: 2.5s;
    animation-timing-function: ease-in;
}
.delayFour {
	-webkit-animation-delay: 0, 2s;
	-moz-animation-delay: 0, 2s;
	animation-delay: 0, 2s;
}

#contactDetails {
	padding-left: 1%;
	padding-top: 1%;
	float: none;
	width: 100%;
	text-align: left;
	}