/*--MAIN HISTORIA --*/
@import url('reset.css');
@import url('fuentes.css');
#img-contact{
	float:left;
	width:90%;
	margin-top:30px;
	margin-bottom:10px;
	margin-left:5%;
	display:flex;
	justify-content:center;	
	position:relative;
}
#img-contact #vert{
	float:left;
	display:flex;
	flex-direction:column;
	justify-content:center;	
}
.qs-historia{
	width:100%;
	margin:auto;
	border-radius:10px;
	box-shadow:1px 0px 2px #82ECFA;
	animation-name:zoomInDown-contact;
	animation-duration:5s;
	
}
@media screen and (max-width:440px){
	.qs-historia{
	width:100%;
	}
}
@media screen and (max-width:880px){
	.qs-historia{
	width:100%;
	}
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes zoomInDown-contact {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes bounceIn-contact {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

#main #Entrada-historia article {
	float:left;
	width:100%;
	margin-bottom:40px;
	box-shadow:1px 0px 2px #82ECFA;
	border-radius:10px;
	margin-top:20px;
}
#main #Entrada-historia h2{
	color:#ff3300;
	font-family:Overlock-Regular;
	font-size:20px;
	line-height:150%;
	text-align:center;
	padding:10px;
	animation-name:anime-rubberBand; 
	animation-duration:4s;
	animation-iteration-count: infinite;
	
}
/*Animacion titulo Historia*/
@keyframes anime-rubberBand {
  from {
    -webkit-transform: scale3d(3, 3, 3);
    transform: scale3d(3, 3, 3);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/*Fin animacion titulo historia*/


#main #Entrada-historia p{
	color:#fff;
	font-family:Overlock-Regular;
	font-size:15px;
	line-height:150%;
	text-align:justify;
	padding:20px;
	float:left; 
}
#servicios-realizados {
	
}

#servicios-realizados article h3{
	
	color:#ff3300;
	font-family:Overlock-Regular;
	font-size:15px;
	text-align:center;
	padding:20px 0px 10px 0px;
}

#srz1 ul li,#srz2 ul li {
	color:#fff;
	font-family:Overlock-Regular;
	font-size:15px;
	line-height:150%;
	text-align:left;
	list-style:disc;
}

#srz1 {
	
	float:left;
	display:inline;
	margin-left:15px;
	margin-bottom:50px;
	/* box-shadow:1px 0px 2px #82ECFA; */
}

#srz2{
	
	float:right;
	display:inline;
	/* box-shadow:1px 0px 2px #82ECFA; */
}