@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,700');




html, body
{
  width: auto;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  
   
}

@media screen and (max-width:400px)
 {.body {
  width: 100%;
}

}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Raleway', sans-serif;
}
 h1{
  font-size: 8em;
  font-weight: 200;
}

.slider{
  font-size: 36px;
  font-weight: 200;
  line-height:45px;
}

  

h2 {
  font-size: 30px;
  font-weight: 400;
}
h3 {
  font-size: 28px;
  font-weight: 300;
	text-align: justify;
	
}
h4 {
  font-size: 20px;
  font-weight: 200;
	
	
}
.primerostitulos {
  font-size: 20px;
  font-weight: 200;
	text-align: center;
	
}
h4 .parrafos {
  font-size: 20px;
  font-weight: 200;
	text-align: justify;
	
}
h5 {
  font-size: 18px;
  font-weight: 200;
	text-align: justify;
	
}
h6 {
  font-size: 15px;
  font-weight: 200;
	text-align: justify;
	
}
p {
  font-size: 15px;
  line-height: 28px;
  font-family: 'Raleway', sans-serif;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
a,
a:active,
a:focus,
a:active {
  text-decoration: none !important;
}
.section-title {
  margin-bottom: 70px;
}
.section-title h2 {
  text-transform: uppercase;
  font-size: 28px;
  font-weight: 600;
}
.section-title p {
  font-family: 'Raleway', serif;
  font-style: italic;
  color: #253646;
	
}

.img{
    float: left;
    width: 33.33%;
    padding: 5px;
  }

.row:after {
  content: "";
  clear: both;
  display: table;
}

@media only screen and (max-width: 960px)  and (orientation:portrait) {
  h1 {
    
    font-size: 5em;
  font-weight: 700;
  }
}
@media only screen and (max-width: 960px)  and (orientation:landscape) {
  h1 {
    
  font-size: 6em;
  font-weight: 700;
  }
}
@media only screen and (max-width: 812px)  and (orientation:landscape) {
  h1 {
    MARGIN-TOP:3%;
    font-size: 4em;
  font-weight: 700;
  }
}

@media only screen and (max-width: 480px) and (orientation:portrait) {
  h1 {
    
    font-size: 3em;
  font-weight: 700;
  }
}
/*--
	Header Start 
--*/
header {
  background: #fff;
  padding: 20px 0;
  position: relative;
  font-family:'Raleway';
}
header .navbar {
  margin-bottom: 0px;
  border: 0px;
}
header .navbar-brand {
  padding-top: 5px;
}
header .navbar-default {
  background: none;
  border: 0px;
	
}
header .navbar-default .navbar-nav {
  padding-top: 10px;
}
header .navbar-default .navbar-nav li a {
  color: #253646;
  padding: 10px 15px;
  font-size: 13px;
	font-weight: lighter;
}
font header .navbar-default .navbar-nav li a:hover {
  color: #D19100;
}


#fh5co-home {
	 position: relative;
   z-index: 1;
   
}

@media screen and (max-width: 450px) {
	#fh5co-home {
     position: relative;
	 z-index: 1;

}}
	

#fh5co-home .mySlides {
    position: relative;
    z-index: 1;
	 background-size: cover;
  background-attachment: fixed;
  width: 100%;
	height: 800px;
  background-color: #253646; 
  color: #fff;
  overflow: hidden;
  background-position: 100% 0% 0%;	
}
#fh5co-home .mySlides1 {
    position: relative;
    z-index: 1;
	 background-size: cover;
  background-attachment: fixed;
 
  width: 100%;
	height: 800px;
  background-color: #253646; 
  color: #fff;
  overflow: hidden;
	 background-position: 100% 0% 0%;	
}
#fh5co-home .mySlides2 {
    position: relative;
    z-index: 1;
	 background-size: cover;
  background-attachment: fixed;
 
  width: 100%;
	height: 800px;
  background-color: #253646; 
  color: #fff;
  overflow: hidden;
	 background-position: 100% 0% 0%;	
}

#fh5co-home .banner-top {
    background: url(../images/xiratech.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
	 background-position: 100% 0% 0%;	
	 background-attachment: fixed;
	background-color: transparent;
}

#fh5co-home .banner-top1 {
    background: url(../images/xira-ai.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
	 background-position: 100% 0% 0%;	
	 background-attachment: fixed;
	background-color: transparent;
}

#fh5co-home .banner-top2 {
    background: url(../images/xira-black.png) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
	 background-position: 100% 0% 0%;	
	 background-attachment: fixed;
	background-color: transparent;
}

#fh5co-home .banner-top3 {
    background: url(../images/xira2.gif) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
	
	 background-position: 100% 0% 0%;	
	 background-attachment: fixed;
	background-color: transparent;
}

#fh5co-home .w3layouts-banner-info {
    padding-top: 10px;
    max-width: 800px;
}

#fh5co-home .w3layouts-banner-info h3 {
    text-shadow: 3px 4px 6px rgba(45, 45, 45, 0.15);
    font-size: 3.3em;
    letter-spacing: 1px;
    color: #fff;
    font-weight: 300;
    text-transform: capitalize;
    line-height: 68px;
}

#fh5co-home .w3layouts-banner-info h4 {
    color: #eee;
    margin: 1em 0 1.5em;
    letter-spacing: 4px;
    text-transform: capitalize;
    font-weight: 200;
}
#fh5co-home .w3layouts-banner-info a.btn {
    border: 2px solid #fff;
    border-radius: 0px;
    padding: 11px 30px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 2px;
	text-transform: capitalize;
  font-family: 'Raleway', sans-serif;
  
}

a.btn2 {
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 8% 5%;
  color: #fff;
  font-size: 20px;
  letter-spacing: 2px;
text-transform: capitalize;
font-family: 'Raleway', sans-serif;
font-weight: 700;
align-content: center;

}

a.btn3 {
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 8% 5%;
  color: #fff;
  font-size: 20px;
  letter-spacing: 2px;
text-transform: capitalize;
font-family: 'Raleway', sans-serif;
font-weight: 700;
align-content: center;

}
a.btn4 {
  border: 2px solid #fff;
  border-radius: 1px;
  padding: 3% 5%;
  color: #fff;
  font-size: 15px;
  letter-spacing: 2px;
text-transform: capitalize;
font-family: 'Raleway', sans-serif;

}
@media screen and (max-width:420px) and (orientation:portrait) {
  a.btn2 {
    border: 2px solid #fff;
    border-radius: 12px;
    padding: 5% 3%;
    color: #fff;
    font-size: 12px;
    letter-spacing: 1px;
  text-transform: capitalize;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  align-content: center;
  }
  a.btn3 {
    border: 2px solid #fff;
    border-radius: 12px;
    padding: 5% 2%;
    color: #fff;
    font-size: 11px;
    letter-spacing: 1px;
  text-transform: capitalize;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  align-content: center;
  }
}
@media screen and (max-width:320px) and (orientation:portrait) {
  a.btn2 {
    border: 2px solid #fff;
    border-radius: 12px;
    padding: 5% 2%;
    color: #fff;
    font-size: 12px;
    letter-spacing: 1px;
  text-transform: capitalize;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  align-content: center;
  }
  a.btn3 {
    border: 2px solid #fff;
    border-radius: 12px;
    padding: 5% 2%;
    color: #fff;
    font-size: 9px;
    letter-spacing: 1px;
  text-transform: capitalize;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  align-content: center;
  }
}
@media screen and (max-width:823px) and (orientation:landscape) {
  a.btn2 {
    border: 2px solid #fff;
    border-radius: 12px;
    padding: 8% 5%;
    color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
  text-transform: capitalize;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  align-content: center;
  }
  a.btn3 {
    border: 2px solid #fff;
    border-radius: 12px;
    padding: 8% 5%;
    color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
  text-transform: capitalize;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  align-content: center;
  }
}
#fh5co-home.banner-top,
#fh5co-home.banner-top1,
#fh5co-home.banner-top2,
#fh5co-home.banner-top3 {
    min-height: 80%;
}
#fh5co-home.overlay {
    min-height: 80%;
    background: rgba(0, 0, 0, 0.5);
}
#fh5co-home.overlay1 {
    min-height: 80%;
    background: rgba(0, 0, 0, 0.6);
}

/*-- //banner style --*/




#fh5co-home, #fh5co-home .text-wrap {
  height: 900px;
}
#fh5co-home .text-wrap {
  display: table;
  width: 100%;
  position: relative;
  z-index: 4;
}
#fh5co-home .text-inner {
  display: table-cell;
  vertical-align: center;
  text-align: center;
	
}
#fh5co-home .text-inner a {
  color: white;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
#fh5co-home .text-inner a:hover, #fh5co-home .text-inner a:active, #fh5co-home .text-inner a:focus {
  text-decoration: none;
  color: white;
  border-bottom: 1px dashed white;
}
#fh5co-home .text-inner h1 {
  font-size: 50px;
  color: white;
  margin: 0 0 20px 0;
}
#fh5co-home .text-inner h2 {
  font-size: 28px;
  line-height: 38px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
	
}



/** xira en foto */
#fh5co-home .xira {
  color: #E3E3E4;
	transition: all 0.8s;
  	align-content: center; 
	font-weight: 100;
	 width: 90%;
}
#fh5co-home .xira h1{
  font-family: 'Raleway';
  font-size: 38px;
	font-weight: 700;
  line-height: 50px;
  letter-spacing: 3px;
  position: relative;
	margin-top:8px;
	align-content: left; 
	font-weight: 100;
	 width: 70%;
	}


@media screen and (max-width:400px) {
#fh5co-home .xira h1 {
	font-family: 'Raleway';
  font-size: 38px;
  line-height: 40px;
  letter-spacing: 2px;
  position: relative;
	margin-top:8px;
	align-content:left; 
	 width: 70%;
	
}
#fh5co-home .xira {

	 width: 90%;
}
}
	@media screen and (min-width:1020px) and (orientation:portrait) {
#fh5co-home .xira h1 {
	font-family: 'Raleway';
  font-size: 38px;
  line-height: 40px;
  letter-spacing: 2px;
  position: relative;
	margin-top:8px;
	text-align: left; 
	 width: 60%;
}
#fh5co-home .xira {
	 width: 100%;
}}
	@media screen and (min-width:1020px) and (orientation:landscape) {
#fh5co-home .xira h1 {
	font-family: 'Raleway';
  font-size: 38px;
  line-height: 40px;
  letter-spacing: 2px;
  position: relative;
	margin-top:8px;
	text-align: left;
	 width: 60%;
}
#fh5co-home .xira {
	 width: 50%;
}
}

	@media screen and (min-width:991px) and (orientation:landscape) {
#fh5co-home .xira h1 {
	font-family: 'Raleway';
  font-size: 35px;
  line-height: 40px;
  letter-spacing: 2px;
  position: relative;
	margin-top:8px;
	align-content: left;
	 width: 80%;
}
#fh5co-home .xira {

	 width: 80%;
}
}

	@media screen and (min-width:991px) and (orientation:portrait) {
#fh5co-home .xira h1 {
  font-family: 'Raleway';
  font-size: 35px;
  line-height: 40px;
  letter-spacing: 2px;
  position: relative;
  margin-top:8px;
  align-content: left; 
  width: 90%;
}
#fh5co-home .xira {

	 width: 80%;
}
}

	@media screen and (min-width:800px) and (orientation:landscape) {
#fh5co-home .xira h1 {
	font-family: 'Raleway';
  font-size: 35px;
  line-height: 40px;
  letter-spacing: 2px;
  position: relative;
	margin-top:0px;
	align-content: left; 
	 width: 80%;
}
#fh5co-home .xira {

	 width: 80%;
}
}




@media screen and (min-width:797px)  and (orientation:landscape){
#fh5co-home .xira h1 {
	font-family: 'Raleway';
  font-size: 35px;
  line-height: 40px;
  letter-spacing: 2px;
  position: relative;
	margin-top:0px;
	align-content: left; 
	 width: 80%;
	
}
#fh5co-home .xira {

	 width: 80%;
}
}

@media screen and (min-width:360px)  and (orientation:portrait){
#fh5co-home .xira h1 {
	font-family: 'Raleway';
  font-size: 28px;
  line-height: 30px;
  letter-spacing: 1px;
  position: relative;
 /* background-color: rgba(37,54,70,1.00);*/
 /*padding: 50px 15px 0px 0px;*/
	margin-top:3px;
	align-content: left; 
	/*text-shadow: 2px 2px 2px #FFFFFF; ^*/
	 width: 85%;
	
}
#fh5co-home .xira {

	 width: 70%;
}
}
@media screen and (max-width:360px)  and (orientation:portrait){
#fh5co-home .xira h1 {
	font-family: 'Raleway';
  font-size: 28px;
  line-height: 30px;
  letter-spacing: 1px;
  position: relative;
	margin-top:3px;
	align-content: left; 
	/*text-shadow: 2px 2px 2px #FFFFFF; ^*/
	 width: 85%;
	
}
#fh5co-home .xira {

	 width: 90%;
}
}



#fh5co-home .xira p {
  font-size: 25px;
  line-height: 25px;
  font-family: 'Raleway';
  letter-spacing: 3px;
  position: relative;
  /*background-color: rgba(37,54,70,1.00);*/
	padding: 200px 10px 10px 5px;
	/*margin-top: 100px;*/
	text-shadow: 1px 1px 1px #000;	
align-content: right; 
	color: #D19100;
  
}







#fh5co-home .sombra {
	
  
  /*text-shadow: 2px 2px 2px #FFFFFF;*/
  color: #D19100 ;
	font-weight: 100; 
  font-family: 'Raleway', sans-serif;
  /*background: #253646;*/
  display:inline;
	
	
}

#fh5co-home .som {
	
  font-family: 'Raleway', sans-serif;
 /* text-shadow: 2px 2px 2px #000;*/
	color: #FFF;
	display: inline-block;
	font-weight: 100;
	/*background: #253646;*/
	
	
}

#fh5co-home .som1 {
	
  font-family: 'Raleway', sans-serif;
 /* text-shadow: 2px 2px 2px #000;*/
	color: #253646;
	display: inline;
	font-weight: 100;
	/*background: #253646;*/

}







 .box {
	transition: all 0.8s;
  /*margin-top: 50px;
/*  text-shadow: 2px 2px 2px #000;*/
	 	/*width: 60%;
    height: 155px;
    float: right;*/
    background: #253646;
    border-left: 2px solid #253646;	
	/*float: left;*/
 display: inline; /* the default for span */
  border: 1px solid #253646; 

}
.box2 {
  transition: all 0.8s;
  margin-top: 5px;
  margin-left: 50px;
	 	width: 90%;
    height: 120px;
    font-size:30px;
 
	border-left: 2px solid #FFFFFF;	
	border: 1px #FFFFFF;
	
}
@media screen and (min-width:1366px)  and (orientation:landscape){
.box {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
	width: 60%;
    height: 150px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
 display: inline; /* the default for span */
 border: 1px solid #253646; 

	
}
}

@media screen and (min-width:1024px)  and (orientation:landscape){
.box {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 60%;
    height: 180px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
 display: inline; /* the default for span */
 border: 1px solid #253646; 

	
}
}


@media screen and (max-width:1024px)  and (orientation:landscape){
.box {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 50%;
    height: 220px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
 display: inline; /* the default for span */
 border: 1px solid #253646; 

	
}
}
@media screen and (max-width:1024px)  and (orientation:portrait){
.box {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 70%;
    height: 90px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
 display: inline; /* the default for span */
 border: 1px solid #253646; 

	
}
}
@media screen and (max-width:991px)  and (orientation:landscape){
.box {
	transition: all 0.8s;
  margin-top: 20px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 71%;
    height: 200px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
 display: inline; /* the default for span */
 border: 1px solid #253646; 

	
}
}


@media screen and (max-width:991px)  and (orientation:portrait){
.box {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 60%;
    height: 280px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
 display: inline; /* the default for span */
 border: 1px solid #253646; 

	
}
}




@media screen and (max-width:797px)  and (orientation:landscape){
.box {
	transition: all 0.8s;
  margin-top: 20px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 70%;
    height: 180px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
 display: inline; /* the default for span */
 border: 1px solid #253646; 

	
}
}

@media screen and (max-width:797px)  and (orientation:portrait){
.box {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 70%;
    height: 280px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
 display: inline; /* the default for span */
 border: 1px solid #253646; 

	
}
}

@media screen and (max-width:768px)  and (orientation:landscape){
.box {
	transition: all 0.8s;
  margin-top: 20px;
/*  text-shadow: 2px 2px 2px #000;*/
	 width: 60%;
    height: 275px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
 display: inline; /* the default for span */
  border: 1px solid #253646; 

	
}
}
@media screen and (max-width:768px)  and (orientation:portrait){
.box {
	transition: all 0.8s;
  margin-top: 30px;
/*  text-shadow: 2px 2px 2px #000;*/
	 width: 80%;
    height: 110px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
 display: inline; /* the default for span */
  border: 1px solid #253646; 

	
}
}
@media screen and (max-width:668px) and (orientation:portrait){
.box {
	transition: all 0.8s;
  margin-top: 5px;
/*  text-shadow: 2px 2px 2px #000;*/
	 width: 90%;
    height: 220px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
 display: inline; /* the default for span */
  border: 1px solid #253646; 

	
}
}

@media screen and (max-width:668px) and (orientation:landscape){
.box {
	transition: all 0.8s;
  margin-top: 10px;
/*  text-shadow: 2px 2px 2px #000;*/
	 width: 90%;
    height: 250px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
 display: inline; /* the default for span */
  border: 1px solid #253646; 

	
}
}

@media screen and (max-width:360px) and (orientation:portrait) {
.box {
	transition: all 0.8s;
    margin-top: 5px;
/*  text-shadow: 2px 2px 2px #000;*/
	width: 92%;
	
    height: 220px;
    float: right;
    background: #253646;
    border-left: 2px solid #253646;	
	float: left;
    display: inline; /* the default for span */
    border: 1px solid #253646; 

	
}
}

.box2 {
	transition: all 0.8s;
  margin-top: 20px;
  margin-left: 50px;
	 	width: 100%;
    height: 120px;
    
 
	border-left: 2px solid #FFFFFF;	
	border: 1px #FFFFFF;
 
}

@media screen and (min-width:1366px)  and (orientation:landscape){
.box2 {
  transition: all 0.8s;
  margin-top: 5px;
  margin-left: 50px;
	 	width: 90%;
    height: 120px;
    font-size:30px;
 
	border-left: 2px solid #FFFFFF;	
	border: 1px #FFFFFF;
	
}
}

@media screen and (min-width:1024px)  and (orientation:landscape){
.box2 {
  transition: all 0.8s;
  margin-top: 5px;
  margin-left: 50px;
	 	width: 90%;
    height: 120px;
    
 
	border-left: 2px solid #FFFFFF;	
	border: 1px #FFFFFF;
   
	
 
	
}
}


@media screen and (max-width:1024px)  and (orientation:landscape){
.box2 {
	transition: all 0.8s;
  margin-top: 20px;
  margin-left: 50px;
	 	width: 90%;
    height: 120px;
    
 
	border-left: 2px solid #FFFFFF;	
	border: 1px #FFFFFF;
 

	
}
}
@media screen and (max-width:1024px)  and (orientation:portrait){
.box2 {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 70%;
    height: 90px;
    float: right;
    
	float: left;
 display: inline; /* the default for span */
 

	
}
}
@media screen and (max-width:991px)  and (orientation:landscape){
.box2 {
	transition: all 0.8s;
  margin-top: 20px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 71%;
    height: 200px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
 

	
}
}


@media screen and (max-width:991px)  and (orientation:portrait){
.box2 {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 60%;
    height: 280px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
  

	
}
}




@media screen and (max-width:797px)  and (orientation:landscape){
.box2 {
	transition: all 0.8s;
  margin-top: 20px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 70%;
    height: 180px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
 

	
}
}

@media screen and (max-width:797px)  and (orientation:portrait){
.box2 {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 70%;
    height: 280px;
    float: right;
    
	float: left;
 display: inline; /* the default for span */
 

	
}
}

@media screen and (max-width:768px)  and (orientation:landscape){
.box2 {
	transition: all 0.8s;
  margin-top: 20px;
/*  text-shadow: 2px 2px 2px #000;*/
	 width: 60%;
    height: 275px;
    float: right;
    
	float: left;
 display: inline; /* the default for span */
  

	
}
}
@media screen and (max-width:768px)  and (orientation:portrait){
.box2 {
	transition: all 0.8s;
  margin-top: 30px;
/*  text-shadow: 2px 2px 2px #000;*/
	 width: 80%;
    height: 110px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
  

	
}
}
@media screen and (max-width:668px) and (orientation:portrait){
.box2 {
	transition: all 0.8s;
  margin-top: 5px;
/*  text-shadow: 2px 2px 2px #000;*/
	 width: 90%;
    height: 220px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
  

	
}
}

@media screen and (max-width:668px) and (orientation:landscape){
.box2 {
	transition: all 0.8s;
  margin-top: 10px;
/*  text-shadow: 2px 2px 2px #000;*/
	 width: 90%;
    height: 250px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
  

	
}
}
@media screen and (max-width:450px) and (orientation:portrait){
.box2 {
 transition: all 0.8s;
    margin-top: 50px;
/*  text-shadow: 2px 2px 2px #000;*/
	/*width: 92%;
	
    height: 220px;
    float: right;
    float: left;*/
    display: inline; /* the default for span */
  
}
}

@media screen and (max-width:360px) and (orientation:portrait) {
.box2 {
	transition: all 0.8s;
   /* margin-top: 50px;*/
/*  text-shadow: 2px 2px 2px #000;*/
	  /*width: 92%;
	
    height: 220px;
    float: right;
    float: left;*/
    display: inline; /* the default for span */
   
	
}
}

.box2 {
	transition: all 0.8s;
  margin-top: 50px;
	 	width: 60%;
    height: 155px;
    float: right;
	float: left;
 display: inline; 
	border-left: 2px solid #FFFFFF;	
	border: 1px #FFFFFF;
 
}

@media screen and (min-width:1366px)  and (orientation:landscape){
.box2 {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
	width: 60%;
    height: 150px;
    float: right;
	float: left;
 display: inline; /* the default for span */
 

	
}
}

@media screen and (min-width:1024px)  and (orientation:landscape){
.box2 {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 60%;
    height: 180px;
    float: right;
   
   
	float: left;
 display: inline; /* the default for span */
 
	
}
}


@media screen and (max-width:1024px)  and (orientation:landscape){
.box2 {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 50%;
    height: 220px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
 

	
}
}
@media screen and (max-width:1024px)  and (orientation:portrait){
.box2 {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 70%;
    height: 90px;
    float: right;
    
	float: left;
 display: inline; /* the default for span */
 

	
}
}
@media screen and (max-width:991px)  and (orientation:landscape){
.box2 {
	transition: all 0.8s;
  margin-top: 20px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 71%;
    height: 200px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
 

	
}
}


@media screen and (max-width:991px)  and (orientation:portrait){
.box2 {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 60%;
    height: 280px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
  

	
}
}




@media screen and (max-width:797px)  and (orientation:landscape){
.box2 {
	transition: all 0.8s;
  margin-top: 20px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 70%;
    height: 180px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
 

	
}
}

@media screen and (max-width:797px)  and (orientation:portrait){
.box2 {
	transition: all 0.8s;
  margin-top: 30px;
  /*text-shadow: 2px 2px 2px #000;*/
		width: 70%;
    height: 280px;
    float: right;
    
	float: left;
 display: inline; /* the default for span */
 

	
}
}

@media screen and (max-width:768px)  and (orientation:landscape){
.box2 {
	transition: all 0.8s;
  margin-top: 20px;
/*  text-shadow: 2px 2px 2px #000;*/
	 width: 60%;
    height: 275px;
    float: right;
    
	float: left;
 display: inline; /* the default for span */
  

	
}
}
@media screen and (max-width:768px)  and (orientation:portrait){
.box2 {
	transition: all 0.8s;
  margin-top: 30px;
/*  text-shadow: 2px 2px 2px #000;*/
	 width: 80%;
    height: 110px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
  

	
}
}
@media screen and (max-width:668px) and (orientation:portrait){
.box2 {
	transition: all 0.8s;
  margin-top: 5px;
/*  text-shadow: 2px 2px 2px #000;*/
	 width: 90%;
    height: 220px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
  

	
}
}

@media screen and (max-width:668px) and (orientation:landscape){
.box2 {
	transition: all 0.8s;
  margin-top: 10px;
/*  text-shadow: 2px 2px 2px #000;*/
	 width: 90%;
    height: 250px;
    float: right;
   
	float: left;
 display: inline; /* the default for span */
  

	
}
}
@media screen and (max-width:450px) and (orientation:portrait){
.box2 {
 transition: all 0.8s;
    margin-top: 50px;
/*  text-shadow: 2px 2px 2px #000;*/
	/*width: 92%;
	
    height: 220px;
    float: right;
    float: left;*/
    display: inline; /* the default for span */
  
}
}

@media screen and (max-width:360px) and (orientation:portrait) {
.box2 {
	transition: all 0.8s;
   /* margin-top: 50px;*/
/*  text-shadow: 2px 2px 2px #000;*/
	  /*width: 92%;
	
    height: 220px;
    float: right;
    float: left;*/
    display: inline; /* the default for span */
   
	
}
}


.slant {
  position: absolute;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
  background-color: #fff;
  content: "";
  z-index: 3;
  display: inline-block;
  height: 70px;
  bottom: 0;
  margin-bottom: -35px;
  padding: 0;
  width: 101%;
}

#fh5co-intro {
  position: relative;
  bottom: 0;
  margin-top: -150px;
  z-index: 10;
  padding-bottom: 7em;
}

@media screen and (max-width: 768px) {
  #fh5co-intro {
    padding-bottom: 3em;
	  width:100%;
	  
  }
}
@media screen and (max-width: 450px) and (orientation:portrait) {
  #fh5co-intro {
    padding-bottom: 3em;
	  width:100%;
	 
	  
  }
}


#fh5co-intro > div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
}
#fh5co-intro .fh5co-block {
  width: 25%;
  float: left;
  text-align: center;
  font-size: 16px;
  min-height: 300px;
  vertical-align: middle;
  padding: 40px;
  background: #fff;
  -webkit-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  -moz-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  -ms-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  -o-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  z-index: 7;
  flex-grow: 1;
  background-size: cover;
  position: relative;
  background-repeat: no-repeat;
}
@media screen and (max-width: 868px) {
  #fh5co-intro .fh5co-block {
   width: 100%;
  float: left;
  text-align: center;
  font-size: 16px;
  min-height: 300px;
  vertical-align: middle;
  padding: 40px 0px 40px 0px;
  background: #fff;
  -webkit-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  -moz-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  -ms-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  -o-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  z-index: 7;
  flex-grow: 1;
  background-size: cover;
  position: relative;
  background-repeat: no-repeat;
	
  }
}

#fh5co-intro .fh5co-block > .overlay-darker {
  z-index: 8;
  opacity: .5;
  background: #474747;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
	width: 100%;
}



#fh5co-intro .fh5co-block > .overlay {
	background: #fff;
	opacity: 1;
	z-index: 9;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	width: 100%;
}



#fh5co-intro .fh5co-block > .fh5co-text {
  position: relative;
  z-index: 10;
}
#fh5co-intro .fh5co-block > .fh5co-text .fh5co-intro-icon {
  font-size: 50px;
  /*color: #rgba(37,54,72,1.00);*/
  margin-bottom: 30px;
  display: block;
}
#fh5co-intro .fh5co-block h2 {
  font-size: 24px;
  font-weight: 400;
}
#fh5co-intro .fh5co-block:hover > .overlay, #fh5co-intro .fh5co-block:focus > .overlay {
  opacity: 0;
  z-index: 9;
}
#fh5co-intro .fh5co-block:hover > .fh5co-text, #fh5co-intro .fh5co-block:focus > .fh5co-text {
  color: #fff;
}
#fh5co-intro .fh5co-block:hover > .fh5co-text .fh5co-intro-icon, #fh5co-intro .fh5co-block:focus > .fh5co-text .fh5co-intro-icon {
  color: #fff;
}
#fh5co-intro .fh5co-block:hover h2, #fh5co-intro .fh5co-block:focus h2 {
  color: #fff;
}
#fh5co-intro .fh5co-block:hover .btn, #fh5co-intro .fh5co-block:focus .btn {
  border: 2px solid #fff !important;
  background: transparent;
}
.btn2{
  border: 2px solid #fff !important;
  background: transparent;
}


#messenger{
  
  color:#00C6FF;
}
#messenger:hover{
  
  color:#253646;
}

#facebook{
  
  color:#3B5998;
}
#facebook:hover{
  
  color:#253646;
}

#whatsapp{
  
  color: #25D366;
}
#whatsapp:hover{
  
  color:#253646;
}
#telegram{
  
  color:#0088CC;
}
#telegram:hover{
  
  color:#253646;
}
#phone{
  color:goldenrod;
}

#phone:hover{
  
  color:#253646;
}

#mail {
  color: #3B5998;
}

#mail:hover{
  
  color:#253646;
}

#web {
  color: #3B5998;
  
}
#web:hover{
  
  color:#253646;
}
.icon:hover {
  background-color: #253646;
}

@media only screen and (max-width: 480px) and (orientation:portrait) {
#telegram, #phone, #mail, #whatsapp, #facebook, #messenger, #web {

  
  font-size:80%;
}
}
@media only screen and (max-width: 768px) and (orientation:landscape) {
  #telegram, #phone, #mail, #whatsapp, #facebook, #messenger, #web {
  
    
    font-size:95%;
  }
  }
.watch-video {
  text-align: center;
  width: 100%;
  display: block;
  float: left;
}
.watch-video span {
  display: block;
  margin-bottom: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: bold;
}
.watch-video .btn-video {
  display: block;
  font-size: 60px;
  height: 120px;
  width: 120px;
  margin: 0 auto;
 /* border: 2px solid #rgba(37,54,72,1.00);*/
  line-height: 0px;
  display: table;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.watch-video .btn-video:hover, .watch-video .btn-video:focus, .watch-video .btn-video:active {
  text-decoration: none;
}
.watch-video .btn-video i {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  right: -9px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.watch-video .btn-video:hover i, .watch-video .btn-video:focus i {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

#fh5co-services, #fh5co-testimonials, #fh5co-counters, #fh5co-work, #fh5co-contact, #fh5co-about {
  padding: 4em 0;
}
@media screen and (max-width: 768px) {
  #fh5co-services, #fh5co-testimonials, #fh5co-counters, #fh5co-work, #fh5co-contact, #fh5co-about {
    padding: 2em 0;
  }
}

#fh5co-services, #fh5co-work, #fh5co-counters {
  padding: 7em 0;
}
@media screen and (max-width: 768px) {
  #fh5co-services, #fh5co-work, #fh5co-counters {
    padding: 4em 0;
  }
}

#fh5co-services {
  /*background-color: #rgba(37,54,72,1.00);*/
	background-position: 0% 100% 0% 0%;
  /* IE9, iOS 3.2+ */
 background-image: url(../images/tecnologia.gif);
 
 /* overflow: hidden;*/
  position: relative;
  color: rgba(255, 255, 255, 0.7);
}

#fh5co-form {
 
	background-position: 0% 0% 100% 0%;
  /* IE9, iOS 3.2+ */
  /*overflow: hidden;*/
  position: relative;
  color: rgba(255, 255, 255, 0.7);
}



#fh5co-services:before, #fh5co-services:after {
  position: absolute;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
  background-color: #fff;
  content: "";
  z-index: 3;
  display: inline-block;
  height: 70px;
  padding: 0;
  width: 100%;
}
#fh5co-services:before {
  top: 0;
  margin-top: -35px;
}
#fh5co-services:after {
  bottom: 0;
  margin-bottom: -35px;
}
#fh5co-services .fh5co-service {
  padding-right: 30px;
}
#fh5co-services h3 {
  font-size: 24px;
  color: #fff;
}
#fh5co-services .icon {
  font-size: 70px;
  margin-bottom: 30px;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  display: inline;
}
#fh5co-services .icon:before {
  color: #fff;
}
#fh5co-services .section-heading h2 {
  color: #fff;
}
#fh5co-services .section-heading h2.left-border:after {
  background: rgba(255, 255, 255, 0.3);
}

/* empieza seccion modulos */

#fh5co-modulos  {
  padding: 4em 0;
}

@media screen and (max-width: 768px) {
  #fh5co-modulos  {
    padding: 2em 0;
  }
}

#fh5co-modulos  {
  padding: 7em 0;
}
@media screen and (max-width: 768px) {
  #fh5co-modulos  {
    padding: 4em 0;
  }
}

#fh5co-modulos {
  
	background-position: 0% 50% 0% 0%;
	

	
	
 /*overflow: hidden;*/
  position: relative;
  color: rgba(255, 255, 255, 0.7);
	
}
#fh5co-modulos:before, #fh5co-modulos:after {
  position: absolute;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
  background-color: #fff;
  content: "";
  z-index: 3;
  display: inline-block;
  height: 70px;
  padding: 0;
  width: 100%;
}
#fh5co-modulos:before {
  top: 0;
  margin-top: -35px;
}
#fh5co-modulos:after {
  bottom: 0;
  margin-bottom: -35px;
}
#fh5co-modulos .fh5co-service {
  padding-right: 30px;
}
#fh5co-modulos h3 {
  font-size: 24px;
  color: #fff;
}
#fh5co-modulos .icon {
  font-size: 70px;
  margin-bottom: 30px;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
#fh5co-modulos .icon:before {
  color: #fff;
}
#fh5co-modulos .section-heading h2 {
  color: #fff;
}
#fh5co-modulos .section-heading h2.left-border:after {
  background: rgba(255, 255, 255, 0.3);
}






#fh5co-counters {
	font-family: 'Raleway', sans-serif;
  /*overflow: hidden;*/
  background-color: transparent;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  width: 100%;
  padding: 9em 0 10em 0;
}
@media screen and (max-width: 768px) {
  #fh5co-counters {
    padding: 4em 0;
  }
}
#fh5co-counters .fh5co-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.7);
}
#fh5co-counters:before, #fh5co-counters:after {
  position: absolute;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
  background-color: #fff;
  content: "";
  z-index: 3;
  display: inline-block;
  height: 70px;
  padding: 3px;
  width: 101%;
}
#fh5co-counters:before {
  top: 0;
  margin-top: -35px;
}
#fh5co-counters:after {
  bottom: 0;
  margin-bottom: -35px;
}
#fh5co-counters .section-heading {
  position: relative;
  z-index: 3;
  margin-bottom: 0;
}
#fh5co-counters .section-heading h2 {
  color: #fff;
}
#fh5co-counters .section-heading h2:after {
  background: rgba(255, 255, 255, 0.3) !important;
}
#fh5co-counters .section-heading .subtext h3 {
  color: rgba(255, 255, 255, 0.7) !important;
}
#fh5co-counters .fh5co-counter {
  position: relative;
  z-index: 3;
  text-align: center;
}
@media screen and (max-width: 992px) {
  #fh5co-counters .fh5co-counter {
    margin-bottom: 50px;
    float: left;
    width: 100%;
  }
}
#fh5co-counters .fh5co-counter .fh5co-counter-icon,
#fh5co-counters .fh5co-counter .fh5co-counter-number,
#fh5co-counters .fh5co-counter .fh5co-counter-label {
  display: block;
}
#fh5co-counters .fh5co-counter .fh5co-counter-icon {
  font-size: 40px;
  color: #fff;
}
#fh5co-counters .fh5co-counter .fh5co-counter-number {
  font-size: 70px;
  color: #fff;
  font-weight: 300;
	padding: 30px;
}





.value{
  
  color: #fff;
  font-weight: 300;
	
  font-size: 2em;
  color: #ffffff;
  padding: 2px;
}
.millones {
  
  
  margin-left:0%;
}
.fh5co-counter-number2 {
 
  font-size: 2em;
  color: #fff;
  font-weight: 300;
  padding: 2px;
  
}
#fh5co-counters .fh5co-counter .fh5co-counter-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  font-weight: 400;
}

#fh5co-testimonials .box-testimony {
  margin-bottom: 10px;
  float: left;
}
#fh5co-testimonials .box-testimony a {
  color: rgba(255, 255, 255, 0.5);
}
#fh5co-testimonials .box-testimony a:hover, #fh5co-testimonials .box-testimony a:focus, #fh5co-testimonials .box-testimony a:active {
  color: white;
  text-decoration: none;
}
#fh5co-testimonials .box-testimony blockquote {
  padding-left: 0;
  border-left: none;
  padding: 10px;
  background: #fff;
 
  font-size: 10px;
  font-weight: 300;
  position: relative;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
}
#fh5co-testimonials .box-testimony blockquote:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10px;
  border-top: 10px solid black;
  border-top-color: #fff;
  border-top-color: rgba(37,54,72,1.00);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
#fh5co-testimonials .box-testimony blockquote p {
  font-style: italic;
  color: #fff;
}
#fh5co-testimonials .box-testimony .author {
  line-height: 10px;
  color: black;
  font-size: 16px;
  margin-left: 10px;
  font-weight: 400;
}
#fh5co-testimonials .box-testimony .author a {
  color: #rgba(37,54,72,1.00);
}
#fh5co-testimonials .box-testimony .author a:hover {
  text-decoration: underline;
}
#fh5co-testimonials .box-testimony .author > figure {
  float: left;
  margin-right: 10px;
}
#fh5co-testimonials .box-testimony .author > figure img {
  width: 60px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
#fh5co-testimonials .box-testimony .author p {
  float: left;
  margin-top: 10px;
}
#fh5co-testimonials .box-testimony .author .subtext {
  display: block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 10px;
  font-weight: 400 !important;
}

#fh5co-work {
 /* overflow: hidden;*/
  position: relative;
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(37,54,72,1.00);
  /* IE9, iOS 3.2+ */
  background-image: url(images/fondo3.gif);
 
}
#fh5co-work a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: underline;
}
#fh5co-work a:hover {
  color: white;
}
#fh5co-work:before, #fh5co-work:after {
  position: absolute;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
  background-color: #fff;
  content: "";
  z-index: 3;
  display: inline-block;
  height: 70px;
  padding: 0;
  width: 101%;
}
#fh5co-work:before {
  top: 0;
  margin-top: -35px;
}
#fh5co-work:after {
  bottom: 0;
  margin-bottom: -35px;
}
#fh5co-work .section-heading h2 {
  color: #fff;
}
#fh5co-work .section-heading h2:after {
  background: rgba(255, 255, 255, 0.3);
}
#fh5co-work .section-heading h3 {
  color: rgba(255, 255, 255, 0.8);
}
#fh5co-work .fh5co-project-item {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  background: #fff;
  overflow: hidden;
  z-index: 9;
  margin-bottom: 30px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#fh5co-work .fh5co-project-item img {
  z-index: 8;
  opacity: 1;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#fh5co-work .fh5co-project-item .fh5co-text {
  padding: 10px 20px;
	height: auto;
}
#fh5co-work .fh5co-project-item .fh5co-text h2, #fh5co-work .fh5co-project-item .fh5co-text span {
  text-decoration: none !important;
	height: auto;
}
#fh5co-work .fh5co-project-item .fh5co-text h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
	height: auto;
}
#fh5co-work .fh5co-project-item .fh5co-text span {
  color: #b3b3b3;
  font-size: 16px;
  font-weight: 400;
	height: auto;
}
#fh5co-work .fh5co-project-item:hover, #fh5co-work .fh5co-project-item:focus {
  -webkit-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
  -ms-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
  -o-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  top: -15px;
}
#fh5co-work .fh5co-project-item:hover img, #fh5co-work .fh5co-project-item:focus img {
  opacity: .7;
}
#fh5co-work .fh5co-project-item:hover h2, #fh5co-work .fh5co-project-item:hover span, #fh5co-work .fh5co-project-item:focus h2, #fh5co-work .fh5co-project-item:focus span {
  text-decoration: none !important;
}

.fh5co-person {
  border: 2px solid #f2f2f2;
  padding: 80px 30px 30px 30px;
  float: left;
  width: 100%;
  position: relative;
}
@media screen and (max-width: 992px) {
  .fh5co-person {
    margin-bottom: 3.5em;
  }
}
.fh5co-person figure {
	position: absolute;
	margin-top: -60px;
	top: 44px;
	left: 645px;
	margin-left: -60px;
	display: block;
	margin-bottom: 50px;
}
.fh5co-person figure img {
  width: 120px;
  border: 2px solid #f2f2f2;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.fh5co-person h3 {
  margin-bottom: 0px;
}
.fh5co-person .fh5co-position {
  color: #b3b3b3;
  display: block;
  margin-bottom: 20px;
}

.form-control {
  box-shadow: none;
  background-color: white;
  border: 2px solid #AAAx;
  height: 54px;
  font-size: 18px;
  font-weight: 100;
	font-family: 'Raleway', sans-serif;
	box-sizing: 40px;
}
.form-control:active, .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #FFF;
		box-sizing: 40px;
    font-family: 'Raleway', sans-serif;
	font-weight: 100;
}

.btn {
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
	color: #D19100;
		font-family: 'Raleway', sans-serif;
}
.btn:hover, .btn:active, .btn:focus {
  outline: none;
}

.btn2 {
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  color: #D19100;
  size: 30%;
}
.btn4 {
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
	color: #D19100;
}
#fh5co-contact {
  padding-bottom: 0;
}
#fh5co-contact .fh5co-contact-info {
  padding: 0;
  margin: 0 0 1.5em 0;
}
#fh5co-contact .fh5co-contact-info li {
  position: relative;
  padding: 0;
  margin: 0 0 1.5em 0;
  padding-left: 50px;
  list-style: none;
}
#fh5co-contact .fh5co-contact-info li i {
  position: absolute;
  top: .2em;
  left: 0;
}

.section-heading {
  float: left;
  width: 100%;
  padding-bottom: 50px;
  margin-bottom: 50px;
  clear: both;
}
.section-heading h2 {
  margin: 0 0 30px 0;
  font-size: 50px;
  font-weight: 300;
  color: #444;
  text-transform: uppercase;
  position: relative;
  display: block;
  padding-bottom: 20px;
  line-height: 1.5;
}
.section-heading .h3-contact {
  margin: 0 0 30px 0;
  font-size: 30px;
  font-weight: lighter;
  color: #444;
  position: relative;
  display: block;
  padding-bottom: 20px;
  line-height: 1.5;
  align-content: center;
  font-family:'Raleway';
}
.section-heading .h5-contact {
  margin: 0 0 30px 0;
  font-size: 20px;
  font-weight: lighter;
  color: #444;
  position: relative;
  display: block;
  padding-bottom: 20px;
  line-height: 1.5;
  align-content: center;
  font-family: 'Raleway', sans-serif;
}
.section-heading h2.left-border:after {
  content: "";
  position: absolute;
  display: block;
  width: 80px;
  height: 2px;
  background: #D3AA13;
  left: 0%;
  margin-left: 0px;
  bottom: 0;
}
.section-heading h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 80px;
  height: 2px;
  background: #rgba(37,54,72,1.00);
  left: 50%;
  margin-left: -40px;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .section-heading h2 {
    font-size: 30px;
  }
}
.section-heading h3 {
  font-weight: 300;
  line-height: 1.5;
  color: #929292;
}
@media screen and (max-width: 768px) {
  .section-heading h3 {
    font-size: 24px !important;
    line-height: 34px;
  }
}

.btn {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
	color: #D19100;
}

.fh5co-nav-toggle {
  width: 25px;
  height: 25px;
  cursor: pointer;
  text-decoration: none;
}
.fh5co-nav-toggle.active i::before, .fh5co-nav-toggle.active i::after {
  background: #rgba(37,54,72,1.00);
}
.fh5co-nav-toggle:hover, .fh5co-nav-toggle:focus, .fh5co-nav-toggle:active {
  outline: none;
  border-bottom: none !important;
}
.fh5co-nav-toggle i {
  position: relative;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  width: 25px;
  height: 3px;
  color: #rgba(37,54,72,1.00);
  font: bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent: -55px;
  background: #rgba(37,54,72,1.00);
  transition: all .2s ease-out;
}
.fh5co-nav-toggle i::before, .fh5co-nav-toggle i::after {
  content: '';
  width: 25px;
  height: 3px;
  background: #rgba(37,54,72,1.00);
  position: absolute;
  left: 0;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.fh5co-nav-toggle i::before {
  top: -7px;
}

.fh5co-nav-toggle i::after {
  bottom: -7px;
}

.fh5co-nav-toggle:hover i::before {
  top: -10px;
}

.fh5co-nav-toggle:hover i::after {
  bottom: -10px;
}

.fh5co-nav-toggle.active i {
  background: transparent;
}

.fh5co-nav-toggle.active i::before {
  top: 0;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.fh5co-nav-toggle.active i::after {
  bottom: 0;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}

.fh5co-nav-toggle {
  position: absolute;
  top: 2px;
  right: 0px;
  z-index: 21;
  padding: 6px 0 0 0;
  display: block;
  margin: 0 auto;
  display: none;
  height: 44px;
  width: 25px;
  border-bottom: none !important;
}
@media screen and (max-width: 768px) {
  .fh5co-nav-toggle {
    display: block;
  }
}

#footer {
  padding: 50px 0;
  color: #7f7f7f;
  position: relative;
}
#footer2 {
  padding: 5% 1%;
  color: #7f7f7f;
  position: relative;
}
#footer .gotop {
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -40px;
  background: #fff;
  z-index: 8;
  width: 80px;
  height: 80px;
  font-size: 30px;
  padding-top: 5px;
  text-align: center;
  vertical-align: middle;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
#footer .gotop:hover, #footer .gotop:focus {
  top: -25px;
  text-decoration: none !important;
}
#footer .copyright {
  font-size: 16px;
  margin-bottom: 0px;
  padding-bottom: 0;
}

.btn {
  text-transform: uppercase;
  letter-spacing: 2px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.btn.btn-primary {
  background:#D19100;
  color: #fff;
  border: none !important;
  border: 2px solid transparent !important;
}
.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus {
  box-shadow: none;
  background: #rgba(37,54,72,1.00);
}
.btn:hover, .btn:active, .btn:focus {
  background: #393e46 !important;
  color: #fff;
  outline: none !important;
}
.btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default:active {
  border-color: transparent;
}

.btn2 {
  text-transform: uppercase;
  letter-spacing: 2px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.btn2.btn2-primary {
  background:#D19100;
  color: #fff;
  border: none !important;
  border: 2px solid transparent !important;
}
.btn2.btn2-primary:hover, .btn2.btn2-primary:active, .btn2.btn2-primary:focus {
  box-shadow: none;
  background: #rgba(37,54,72,1.00);
}
.btn2:hover, .btn2:active, .btn2:focus {
  background: #393e46 !important;
  color: #fff;
  outline: none !important;
}
.btn2.btn2-default:hover, .btn2.btn2-default:focus, .btn2.btn2-default:active {
  border-color: transparent;
}

.social {
  padding: 0;
  margin: 0;
  display: inline-block;
  position: relative;
  width: 100%;
}
.social li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}
.social li a {
  font-size: 16px;
  display: table;
  width: 40px;
  height: 40px;
  margin: 0px;
}
.social li a i {
  display: table-cell;
  vertical-align: middle;
}
.social li a:hover, .social li a:active, .social li a:focus {
  text-decoration: none;
  border-bottom: none;
}
.social li a.social-box {
  background: #rgba(37,54,72,1.00);
  color: #rgba(37,54,72,1.00);
}
.social li a.social-circle {
  background: #rgba(37,54,72,1.00);
  color: #rgba(37,54,72,1.00);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.social li a:hover {
 /* background: #rgba(209,145,0,1.00) !important;*/
}
.social.social-box a {
 /* background: #rgba(209,145,0,1.00);
  color: #rgba(209,145,0,1.00);*/
}
.social.social-circle a {
 /* background: #rgba(209,145,0,1.00);
  color: #rgba(37,54,72,1.00);*/
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

#map {
  width: 100%;
  height: 500px;
  position: relative;
}
@media screen and (max-width: 768px) {
  #map {
    height: 200px;
  }
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}

.js .to-animate,
.js .to-animate-2,
.js .single-animate {
  opacity: 0;
}

@media screen and (max-width: 480px) {
  .col-xxs-12 {
    float: none;
    width: 100%;
  }
}

.row-bottom-padded-lg {
  padding-bottom: 7em;
}
@media screen and (max-width: 768px) {
  .row-bottom-padded-lg {
    padding-bottom: 2em;
  }
}

.row-bottom-padded-md {
  padding-bottom: 4em;
}
@media screen and (max-width: 768px) {
  .row-bottom-padded-md {
    padding-bottom: 2em;
  }
}

.row-bottom-padded-sm {
  padding-bottom: 2em;
}
@media screen and (max-width: 768px) {
  .row-bottom-padded-sm {
    padding-bottom: 2em;
  }
}

.fh5co-animated {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* disappear in top */
.top {
 opacity: 1;
 /* margin: 0px; */
 position: relative;
 
 text-align: left;
}

.dis {
  opacity: 1;
  position: relative;
}
.title {
	position: relative;
text-align:left;

}

.title1 {
	position: relative;
text-align:left;
	padding-top: 12%;

}
.title4 {
	position: absolute;
text-align:left;
	padding-top: 12%;

}

.title2 {
	position: relative;
text-align:left;
	padding-top: 12%;
    

}
.title3 {
	position: relative;
text-align:left;
	padding-top: 12%;
    width:100%;

}
@media screen and (min-width:1500px) and (min-height:800px) and (orientation:landscape){
.title2{
	position: relative;
    text-align:left;
	padding-top: 28%;
	width:70%;

}
}


@media screen and (min-width:1600px) 
 and (min-height:800px) and (orientation:landscape) {
.title1, .title, .title4, .title3{
	position: relative;
    text-align:left;
	padding-top: 28%;
	width:80%;

}
}


	
@media screen and (max-width:820px) and (orientation:landscape){
.title1,.title2 {
	position: relative;
    text-align:left;
	padding-top: 10%;

}
}

	
	
.image {
	position: relative;
text-align:left;
   max-width:100%;
   margin-bottom:8%;
/*	top: 0px;
    left: 0px;
	width: 100 %;
	height: 100 %; */
}

.photo {
	position: relative;
text-align: center;
	 max-width:100%;
	width: 100%;
	
/*	top: 0px;
    left: 0px;
	width: 100 %;
	height: 100 %; */
}

@media screen and (min-width:850px) and (landscape){
.photo {
	position: absolute;
text-align:left;
	 max-width:100%;
	width: 100%;
/*	top: 0px;
    left: 0px;
	width: 100 %;
	height: 100 %; */
}
}

/* final disappear in top */



/* contact form */

#contact-form
{
	 background: #F9F9F9;
  padding: 25px;
  margin: 150px 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

}

#form-group
{
box-sizing: content-box 50;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 8px;	
	height: 40px;
	width: 30%;
	color: black;
	}


.empleados
{
  box-sizing: content-box 40px;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;	
	height: 40px;
	width: 90%;
	color: darkgray;
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
	}

  #button1  {
 
   margin-top: 26%; 
   margin-left:18%;
   position:absolute;
    
}
#button4  {
  margin-top: 26%; 
  margin-left:38%;
  position:absolute;
  
   
}
#button2  {
  
	 margin-left:20%;
   padding: 15px 5px 0px 5px;
   
    
}
#button3  {
   margin-left: 15%;
	 
    padding: 10px 5px 0px 5px;
   
    
}


@media screen and (max-width:450px) and (orientation:portrait){
  #button1  {
 
	 
    margin: 96% 10%;
   position:absolute;
    
}

#button4  {
  margin: 110% 10%;
  position:absolute;
  
   
}
#button2  {
  
  margin-left:20%;
  padding: 15px 5px 0px 5px;
  
   
}
}

@media screen and (min-width: 375px) 
  and (max-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
    #button1  {
 
	 
      margin-top: 43% ;
      margin-left:40%;
     position:absolute;
      
  }
}
 


#button2  {
  
  margin-left:20%;
  padding: 15px 5px 0px 5px;
  
   
}
}

#prueba .buttons   {
   margin-left: 15%;
	 
    padding: 10px 5px 0px 5px;
   
    
}
#demo .buttons   {
   margin-left: 15%;
	 
    padding: 10px 5px 0px 5px;
   
    
}

.btn{
   border: 1px solid #ccc;
  background: #253646;
}

.btn2{
  border: 2px solid #ccc;
 background: #D3AA13;
}
.btn3{
  border: 2px solid #ccc;
 background: #D3AA13;
}

.btn4{
  border: 2px solid #ccc;
 background: #D3AA13;
}
.slideshowContainer {
  position: relative;
  
  margin: 50px 0 75px;
  width: 100%;
  height: 500px;
}

@media screen and (min-width:850px) and (landscape){
.slideshowContainer {
	 position: relative;
  
  margin: 30px 0 75px;
  width: 100%;
  height: 500px;
}
}

.imageSlides {
    position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: -1;
	 background-size: cover;
	background-repeat: no-repeat;
 
}

/* add 'visible' class via Javascript */
.visible {
  opacity: 1;
}

.slideshowArrow {
  font-size: 7em;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.slideshowArrow:hover {
  opacity: 0.75;
}

#leftArrow {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#rightArrow {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translate(50%, -50%);
}

.slideshowCircles {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.circle {
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: solid 2px rgba(255, 255, 255, 0.5);
  transition: 1s ease-in-out;
}

.dot {
  background-color: rgba(255, 255, 255, 0.7);
  border: solid 2px rgba(255, 255, 255, 0.5);
}

.container  {

	margin-top: 0px;
}


.buttons1  {

	z-index: 1;
}
.buttons2  {

	z-index: 2;
}
.buttons3  {

	z-index: 3;
}


/*contacto sección RPA y MAS*/
#contacto {
  padding-left:33.5%;
}
#contacto2 {
  padding-left:25%;
}
#contacto3 {
    padding-left:30%;
}
#contacto4 {
  margin-left:80%;
  padding-left:30%;
  padding-top:10%;
}

/* ----------------scroll down*--------------------*/

#sectiontop {
  height: 50%;
  width: 100%;
  display: table;
  
}

/*boton bajar 1 */
.scroll-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
  position: absolute;
  bottom: -8%;
  
  left: 53.5%;
  margin-left: -5%;
  display: block;
  width: 32px;
  height: 32px;
  
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)

}

.scroll-down:before {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 6px);
  transform: rotate(-45deg);
  display: block;
  width: 18px;
  height: 18px;
  content: "";
  border: 3px solid #AAA;
  border-width: 0px 0 5px 5px;
}



@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
/*boton bajar 2 */
.scroll-down2  {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down2 {
  position: absolute;
  top: 180vh;
  left: 53.8%;
  margin-left: -5%;
  display: block;
  width: 32px;
  height: 32px;
  
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}

.scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
}
.scroll-down2-2 {
  position: absolute;
  top: 210%;
  left: 53.8%;
  margin-left: -5%;
  display: block;
  width: 32px;
  height: 32px;
  
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}

.scroll-down2-2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
}

.scroll-down2-3 {
  position: absolute;
  top: 250%;
  left: 53.8%;
  margin-left: -5%;
  display: block;
  width: 32px;
  height: 32px;
  
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}

.scroll-down2-3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
}

#about2 {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

#about2 {
  position: absolute;
  top: 250%;
  left: 53.8%;
  margin-left: -5%;
  display: block;
  width: 32px;
  height: 32px;
  
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}

#about2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
}


@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

/*boton bajar 3 */
.scroll-down3 {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down3 {
  position: absolute;
  top: 120%;
  left: 53.5%;
  margin-left: -5%;
  display: block;
  width: 32px;
  height: 32px;
  
  border-radius: 50%;
  z-index: 20;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}

.scroll-down3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

/*MEDIA QUERIES BUTTON 1 */
@media only screen and (max-width: 1024px)  and (orientation:portrait) {
  .scroll-down {
    
    position: absolute;
    TOP: 100%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}
@media only screen and (max-width: 812px) AND (max-width: 640px) AND (orientation:LANDSCAPE) {
  .scroll-down {
    
    position: absolute;
    TOP: 100%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}
@media only screen and (max-width: 640px) AND (orientation:LANDSCAPE) {
  .scroll-down {
    
    position: absolute;
    TOP: 100%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}
@media only screen and (max-width: 768px)  and (orientation:portrait) {
  .scroll-down {
    
    position: absolute;
    top: 100%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}
@media only screen and (max-width: 460px)  and (orientation:portrait) {
  .scroll-down {
    
    position: absolute;
    top: 100%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}
@media only screen and (max-width: 360px)  and (orientation:portrait) {
  .scroll-down {
    
    position: absolute;
    top: 100%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}

/*MEDIA QUERIES BUTTON 2&3 */
@media only screen and (max-width: 1024px)  and (orientation:portrait) {
  .scroll-down2 {
    
    position: absolute;
    TOP: 145%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  #about2 {
    
    position: absolute;
    TOP: 100%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  #about2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }

.scroll-down3 {
    
  position: absolute;
  TOP: 105%;
  left: 53.5%;
  margin-left: -5%;
  display: block;
  width: 3%;
  height: 3%;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}
.scroll-down3:before {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 6px);
  transform: rotate(-45deg);
  display: block;
  width: 18px;
  height: 18px;
  content: "";
  border: 3px solid #AAA;
  border-width: 0px 0 5px 5px;
}
}
@media only screen and (max-width: 960px) and (orientation:LANDSCAPE) {
  .scroll-down2 {
    
    position: absolute;
    top: 230%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  .scroll-down3 {
    
    position: absolute;
    TOP: 110%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}
@media only screen and (max-width: 812px) and (orientation:LANDSCAPE) {
  .scroll-down2 {
    
    position: absolute;
    top: 225%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  .scroll-down3 {
    
    position: absolute;
    TOP: 110%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}

@media only screen and (max-width: 731px) and (orientation:landscape) {
  .scroll-down2 {
    
    position: absolute;
    top: 200%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  .scroll-down3 {
    
    position: absolute;
    TOP: 110%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}

@media only screen and (max-width: 640px) AND (orientation:landscape) {
  .scroll-down2 {
    
    position: absolute;
    TOP: 210%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  .scroll-down2-2 {
    
    position: absolute;
    TOP: 100%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2-2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  .scroll-down2-3 {
    
    position: absolute;
    TOP: 100%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2-3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  .scroll-down3 {
    
    position: absolute;
    TOP: 105%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}

@media only screen and (max-width: 768px)  and (orientation:portrait) {
  .scroll-down2 {
    
    position: absolute;
    top: 150%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  .scroll-down2-2 {
    
    position: absolute;
    top: 105%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2-2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  .scroll-down2-3 {
    
    position: absolute;
    top: 105%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2-3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  .scroll-down3 {
    
    position: absolute;
    top: 105%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}
@media only screen and (max-width: 460px)  and (orientation:portrait) {
  .scroll-down2 {
    
    position: absolute;
    top: 180%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}
@media only screen and (max-width: 420px)  and (orientation:portrait) {
  .scroll-down2 {
    
    position: absolute;
    top: 150%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  
  }
  .scroll-down2-2 {
    
    position: absolute;
    top: 150%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2-2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  
  }
  .scroll-down2-3 {
    
    position: absolute;
    top: 150%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2-3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  
  }
  .scroll-down3 {
    
    position: absolute;
    top: 135%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
}
@media only screen and (max-width: 375px)  and (max-height: 812px)  and (orientation:portrait) {
  .scroll-down2 {
    
    position: absolute;
    top: 210%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }

.scroll-down3 {
    
  position: absolute;
  top: 125%;
  left: 53.5%;
  margin-left: -5%;
  display: block;
  width: 3%;
  height: 3%;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}
.scroll-down3:before {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 6px);
  transform: rotate(-45deg);
  display: block;
  width: 10px;
  height: 10px;
  content: "";
  border: 3px solid #AAA;
  border-width: 0px 0 5px 5px;
}
}
@media only screen and (max-width: 375px)  and (max-height: 667px)  and (orientation:portrait) {
  .scroll-down2 {
    
    position: absolute;
    top: 220%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  .scroll-down2-2 {
    
    position: absolute;
    top: 150%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2-2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }

  .scroll-down2-3 {
    
    position: absolute;
    top: 150%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down2-3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  

.scroll-down3 {
    
  position: absolute;
  top: 125%;
  left: 53.5%;
  margin-left: -5%;
  display: block;
  width: 3%;
  height: 3%;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}
.scroll-down3:before {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 6px);
  transform: rotate(-45deg);
  display: block;
  width: 10px;
  height: 10px;
  content: "";
  border: 3px solid #AAA;
  border-width: 0px 0 5px 5px;
}
}
@media only screen and (max-width: 360px)  and (orientation:portrait) {
  .scroll-down2 {
    
    position: absolute;
    top: 220%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll2-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }
  .scroll-down3 {
    
    position: absolute;
    top: 125%;
    left: 53.5%;
    margin-left: -5%;
    display: block;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  .scroll-down3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border: 3px solid #AAA;
    border-width: 0px 0 5px 5px;
  }


}







/* progress bar resultados */
.circular-progress-bar {
    position: relative;
    margin: 0 auto;
}

.progress-percentage, .progress-text {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 0px 60px;
    
  
}

.progress-percentage {
  
	font-size: 60px;
    transform: translate(-50%, -85%);
    color: #FFF;
    font-family: 'Raleway', sans-serif;
}

.progress-text {
  
    transform: translate(-50%, 0%);
    color: #FFF;
    font-size: 20px;
    font-family: 'Raleway', sans-serif;
    
}

.counter {
  display: table-cell;
  margin:1.5%;
  font-size:50px;
  background-color: #FF6F6F;
  width:200px;
  border-radius: 50%;
  height:200px;
  vertical-align: middle;
}



/*FLIP ANIMATION */
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove per
tive if you don't want the 3D effect */
.flip-card {
  background-color: #fff;
  width: 100%;
  height: 18em;
  border: 1px solid #ffffff;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

#flip-card2 {
  background-color: #fff;
  width: 100%;
  height: 18em;
  border: 1px solid #ffffff;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
#flip-card-inner2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

#flip-card2:hover .flip-card2-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

#flip-card-front2, .flip-card-back2 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #FFF;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #FFF;
  color: #7f7f7f;
  transform: rotateY(180deg);
}
#flip-card-back2 {
  background-color: #AAA;
  color: #7f7f7f;
  transform: rotateY(180deg);
}

/* Modals */
.hover_bkgr_fricc1{
  background:rgba(0,0,0,1);
  cursor:pointer;
  display:none;
  height:100%;
  position:fixed;
  text-align:center;
  top:0;
  width:100%;
  z-index:10000;
}
.hover_bkgr_fricc1 .helper{
  display:inline-block;
  height:100%;
  vertical-align:middle;
}
.hover_bkgr_fricc1 > div {
  background-color: #253646;
  box-shadow: 10px 10px 60px #555;
  display: inline-block;
  height: auto;
  max-width: 551px;
  min-height: 100px;
  vertical-align: middle;
  width: 60%;
  position: relative;
  border-radius: 8px;
  padding: 15px 5%;
}
.popupCloseButton1 {
  background-color: #fff;
  border: 3px solid #999;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  font-family: arial;
  font-weight: bold;
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 25px;
  line-height: 30px;
  width: 30px;
  height: 30px;
  text-align: center;
  z-index: 2;
}
.popupCloseButton1:hover {
  background-color: #ccc;
}
.trigger_popup_fricc1 {
  cursor: pointer;
  font-size: 20px;
  margin: 20px;
  display: inline-block;
  font-weight: bold;
}
/* Popup box BEGIN */

[id^=modal] {
  display: none;
  border: 5px solid #D19100;
  background: #FFF;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  min-height: 20em;
  min-width: 20em;
  max-width: 40em;
  z-index: 1;
  font-family: 'Raleway', sans-serif;
  font-size:20px;
  align-content: center;
  padding: 10%;
  }

#modal1:target {
  display: block;
  }
#modal2:target {
  display: block;
  }
  #modal2:target {
    display: block;
    }
[id^=modal] a {
  float: right;
  }

  #close {
    float:right;
    display:inline-block;
    padding:20px 50px;
    background:#ccc;
}




/*Results graph 1*/
 #graph {
  width: 40vw;
  height: 40vh;
  position: relative;
  overflow: visible;
}

  #16 {
  width: 40vw;
  height: 40vh;
  position: relative;
  overflow: visible;
}  
   #10x {
    width: 40vw;
    height: 40vh;
    position: relative;
    overflow: visible;

  }
/* animation css velocity */
.fast {
  -vendor-animation-duration: 1s;
  -vendor-animation-delay: 0s;
}
.slow {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 1s;
}
.reallyslow {
  -vendor-animation-duration: 6s;
  -vendor-animation-delay: 3s;
}




/* animation svg graph 4 */
/***************************************************
 * Generated by SVG Artista on 9/30/2019, 10:28:45 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
/*
 @-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(35, 35, 35);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(35, 35, 35);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
          animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(35, 35, 35);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(35, 35, 35);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
          animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(244, 144, 140);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(244, 144, 140);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
          animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(251, 213, 2);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(251, 213, 2);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
          animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(46, 67, 86);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(46, 67, 86);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
          animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(204, 225, 52);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(204, 225, 52);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
          animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}
*/

/***************************************************
 * Generated by SVG Artista on 9/30/2019, 10:36:44 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************
 Animation graph 1*/
/*
 @-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 431.9892883300781px;
    stroke-dasharray: 431.9892883300781px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 431.9892883300781px;
    stroke-dasharray: 431.9892883300781px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 3s ease-in 0s both;
          animation: animate-svg-stroke-1 3s ease-in 0s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 100px;
    stroke-dasharray: 100px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 100px;
    stroke-dasharray: 100px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 3s ease-in 0.12s both;
          animation: animate-svg-stroke-2 3s ease-in 0.12s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 461.82171630859375px;
    stroke-dasharray: 461.82171630859375px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 461.82171630859375px;
    stroke-dasharray: 461.82171630859375px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 3s ease-in 0.24s both;
          animation: animate-svg-stroke-3 3s ease-in 0.24s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 834.5611572265625px;
    stroke-dasharray: 834.5611572265625px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 834.5611572265625px;
    stroke-dasharray: 834.5611572265625px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 3s ease-in 0.36s both;
          animation: animate-svg-stroke-4 3s ease-in 0.36s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 360.00714111328125px;
    stroke-dasharray: 360.00714111328125px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 360.00714111328125px;
    stroke-dasharray: 360.00714111328125px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 3s ease-in 0.48s both;
          animation: animate-svg-stroke-5 3s ease-in 0.48s both;
}
*/

/* Animation 3 graph 16x*/
/***************************************************
 * Generated by SVG Artista on 9/30/2019, 10:41:11 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/


 @-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 272.0910949707031px;
    stroke-dasharray: 272.0910949707031px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 272.0910949707031px;
    stroke-dasharray: 272.0910949707031px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 10s linear 5s both;
          animation: animate-svg-stroke-1 10s linear 5s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 272.08721923828125px;
    stroke-dasharray: 272.08721923828125px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 272.08721923828125px;
    stroke-dasharray: 272.08721923828125px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 10s linear 5.12s both;
          animation: animate-svg-stroke-2 10s linear 5.12s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 246.4638214111328px;
    stroke-dasharray: 246.4638214111328px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 246.4638214111328px;
    stroke-dasharray: 246.4638214111328px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 10s linear 5.24s both;
          animation: animate-svg-stroke-3 10s linear 5.24s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 137.93653869628906px;
    stroke-dasharray: 137.93653869628906px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 137.93653869628906px;
    stroke-dasharray: 137.93653869628906px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 10s linear 5.36s both;
          animation: animate-svg-stroke-4 10s linear 5.36s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 335.2357482910156px;
    stroke-dasharray: 335.2357482910156px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 335.2357482910156px;
    stroke-dasharray: 335.2357482910156px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 10s linear 5.48s both;
          animation: animate-svg-stroke-5 10s linear 5.48s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 317.57958984375px;
    stroke-dasharray: 317.57958984375px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 317.57958984375px;
    stroke-dasharray: 317.57958984375px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 10s linear 5.6s both;
          animation: animate-svg-stroke-6 10s linear 5.6s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 59.72693634033203px;
    stroke-dasharray: 59.72693634033203px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 59.72693634033203px;
    stroke-dasharray: 59.72693634033203px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 10s linear 5.72s both;
          animation: animate-svg-stroke-7 10s linear 5.72s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 341.7816467285156px;
    stroke-dasharray: 341.7816467285156px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 341.7816467285156px;
    stroke-dasharray: 341.7816467285156px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 10s linear 5.84s both;
          animation: animate-svg-stroke-8 10s linear 5.84s both;
}


/*graph 2*/
/***************************************************
 * Generated by SVG Artista on 10/1/2019, 11:31:51 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************

 @-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 372.7079331235956px;
    stroke-dasharray: 372.7079331235956px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 372.7079331235956px;
    stroke-dasharray: 372.7079331235956px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 10s linear 5s both,
                       animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
          animation: animate-svg-stroke-1 10s linear 5s both,
               animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 372.7079331235956px;
    stroke-dasharray: 372.7079331235956px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 372.7079331235956px;
    stroke-dasharray: 372.7079331235956px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 10s linear 5.12s both,
                       animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
          animation: animate-svg-stroke-2 10s linear 5.12s both,
               animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 372.7079331235956px;
    stroke-dasharray: 372.7079331235956px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 372.7079331235956px;
    stroke-dasharray: 372.7079331235956px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 10s linear 5.24s both,
                       animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
          animation: animate-svg-stroke-3 10s linear 5.24s both,
               animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 165.06558227539062px;
    stroke-dasharray: 165.06558227539062px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 165.06558227539062px;
    stroke-dasharray: 165.06558227539062px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 10s linear 5.36s both,
                       animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
          animation: animate-svg-stroke-4 10s linear 5.36s both,
               animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 209.10873413085938px;
    stroke-dasharray: 209.10873413085938px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 209.10873413085938px;
    stroke-dasharray: 209.10873413085938px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 10s linear 5.48s both,
                       animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
          animation: animate-svg-stroke-5 10s linear 5.48s both,
               animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 113.19998931884766px;
    stroke-dasharray: 113.19998931884766px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 113.19998931884766px;
    stroke-dasharray: 113.19998931884766px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 10s linear 5.6s both,
                       animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
          animation: animate-svg-stroke-6 10s linear 5.6s both,
               animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 119.99907684326172px;
    stroke-dasharray: 119.99907684326172px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 119.99907684326172px;
    stroke-dasharray: 119.99907684326172px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 10s linear 5.72s both,
                       animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
          animation: animate-svg-stroke-7 10s linear 5.72s both,
               animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
}

*/
/* Counter*/
#shiva
{
  width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  float:left;
  margin:5px;
}
.count
{
  line-height: 100px;
  color:white;
  margin-left:8px;
  font-size:70px;
  
}
#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
  float:left;
  margin:20px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

.linker
{
  font-size : 20px;
  font-color: black;
}


.fa-facebook-square {
  padding-left:10%;
}
.fa-telegram {
  padding-left:12%;
  padding-bottom: 10%;
}
.fa-facebook-messenger  {
  padding-left:14%;
  padding-bottom: 12%;
}
.fa-skype {
  padding-left: 16%;
  padding-bottom: 14%;
}
.fa-mail-bulk{
  padding-left:18%;
  padding-bottom: 16%;
}

.fa-globe {
  padding-left:20%;
  padding-bottom: 18%;
}

/* Titulo páginas secundarias */

.elemento{
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.titulocss{
  font-size:2.5em;
  font-weight:lighter;
  font-family: 'Raleway', sans-serif;
  text-align:center;
  color:#253646;
  letter-spacing:0px;
  transition:1s;
  -webkit-transition:1s;
  -ms-transition:1s;
  position: relative;
}

.titulocss2{
  font-size:2em;
  font-weight:lighter;
  font-family: 'Raleway', sans-serif;
  text-align:center;
  color: #253646;
  letter-spacing:0px;
  transition:1s;
  -webkit-transition:1s;
  -ms-transition:1s;
  position: relative;
}

.rpatitle{
  font-size:2em;
  font-weight:200;
  font-family: 'Raleway', sans-serif;
  text-align:center;
  color:#253646;
}
.titleparagraphs{
    font-size:1.8em;
    font-weight:200;
    font-family: 'Raleway', sans-serif;
    text-align:justify;
    color:#253646;
  
}
.benefitstitle{
  font-size:4em;
  font-weight:200;
  font-family: 'Raleway', sans-serif;
  text-align:center;
  color:#253646;
  
}
.titletitle{
  font-size:4em;
  font-weight:200;
  font-family: 'Raleway', sans-serif;
  text-align:center;
  color:#253646;
  margin-top:10%;
  
}

.titulocss:before,
.titulocss:after{
  content:"";
  position: absolute;
  height: 2%;
  width: 0px;
  background:#D39000;
  transition:300ms;
  -webkit-transition:1s;
  -ms-transition:1s;
  opacity:0.3;
}

.titulocss:before{
  bottom:0;
  left:0;
}

.titulocss:after{
  top:0;
  left:0;
}

.titulocss:hover{
  letter-spacing:5%;
}

.titulocss:hover:before,
.titulocss:hover:after{
   width: 95%;
    opacity:1;

}
.titulocss:hover ~ h2{
  opacity:0;
}

/* animation 2 */
.wrapper {
  text-align:center;
  color:#555;
  font-family:'Raleway';
  font-weight:100;
  font-size:2.5em;
  padding-top:20vh;
  height:70vh;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 10000;
  -webkit-transform: translate3d(0,0,0);
}
.show, .animation{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

.show:first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 7s infinite;
}

.animation:last-of-type {
  width:0px;
  animation: reveal 7s infinite;
}

.animation:last-of-type .newtext {
  margin-left:-30%;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-30%; }
    20% { margin-left:-50%; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:100%;}
    80% {opacity:1;}
    100% {opacity:0;width:100%;}
}
/* NEXT SECTION */
.prev-section, .next-section {
  display:inline-block;
  float:left;
}

/*animation1 graph 1 */

.graph1 {
  height: 30vh;
  width: 30vw;
  
}

.graph2 {
  height: 30vh;
  width: 30vw;
  
}

.graph3 {
  height: 30vh;
  width: 30vw;
  
}

path {
  stroke-dasharray: 900;
  animation: draw 10s infinite;
}

@keyframes draw {
  from {
    stroke-dashoffset: 900
  }
  to {
    stroke-dashoffset: 0;
  }
}

/*button arriba*/
/*buttontop*/

#buttonscroll {
  display: inline-block;
  color: solid #AAA
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 3px  solid #AAA;
  position: fixed;
  bottom: 10px;
  right: 20px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#buttonscroll::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: solid #AAA;
}

#buttonscroll:active {
  background-color: #555;
}
#buttonscroll.show {
  opacity: 1;
  visibility: visible;
}



/*QUERY button*/
@media only screen and (max-width: 460px)  and (orientation:portrait) {
  #buttonscroll {
    display: inline-block;
    color: solid #AAA
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 3px  solid #AAA;
    position: fixed;
    bottom: 10px;
    right: 20px;
    transition: background-color .3s, 
      opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
  }
  #buttonscroll::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: solid #AAA;
  }
  #contacto {
    padding-left:22%;
  }
  #contacto2 {
    padding-left:15%;
  }
  #contacto3 {
    padding-left:18%;
  }
}

@media only screen and (max-width: 1024px)   and (orientation:portrait) {
  #contacto {
    padding-left:22%;
  }
  #contacto2 {
    padding-left:15%;
  }
  #contacto3 {
    padding-left:24%;
  }
}

@media only screen and (max-width: 812px) and (max-height: 375px)  and (orientation:landscape) {
  #contacto {
    padding-left:33%;
  }
  #contacto2 {
    padding-left:22%;
  }
  #contacto3 {
    padding-left:20%;
  }
}
@media only screen and (max-width: 414px) and (max-height: 736px)  and (orientation:portrait) {
  #contacto {
    padding-left:22%;
  }
  #contacto2 {
    padding-left:15%;
  }
  #contacto3 {
    padding-left:20%;
  }
}

@media only screen and (max-width: 320px) and (max-height: 568px)  and (orientation:portrait) {
  #contacto {
    padding-left:22%;
  }
  #contacto2 {
    padding-left:15%;
  }
  #contacto3 {
    padding-left:13%;
  }
}
@media only screen and (max-width: 375px) and (max-height: 812px)  and (orientation:portrait) {
  #contacto {
    padding-left:8%;
  }
  #contacto2 {
    padding-left:8%;
  }
  #contacto3 {
    padding-left:13%;
  }
}
@media only screen and (max-width: 768px)  and (orientation:portrait) {
  #contacto {
    padding-left:30%;
  }
  #contacto2 {
    padding-left:15%;
  }
  #contacto3 {
    padding-left:20%;
  }
}



/*QUERY button landscape*/
@media only screen and (max-width: 760px)  and (orientation:landscape) {
  #buttonscroll {
    display: inline-block;
    background-color: #AAA;
    border: 1px solid #AAA;
    width: 1px;
    height: 1px;
    text-align: center;
    border-width: 0px 0 1px 1px;
    position: fixed;
    bottom: 9%;
    right: 40px;
    transition: background-color .3s, 
      opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  
  }
  
  #buttonscroll::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: 1px;
    font-style: normal;
    font-size: 2em;
    line-height: 1px;
    color: #AAA;
  } 
}