@charset "UTF-8";
/* CSS Document */


/* ---------------- ----------------   FONT FACE  ---------------- ---------------- */

@font-face {
    font-family: 'OpenSans-Bold';
    src: url('../fonts/OpenSans-Bold.eot');
    src: url('../fonts/OpenSans-Bold.woff') format('woff'),
         url('../fonts/OpenSans-Bold.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold.svg') format('svg');
}


@font-face {
    font-family: 'OpenSans-Light';
    src: url('../fonts/OpenSans-Light.eot');
    src: url('../fonts/OpenSans-Light.woff') format('woff'),
         url('../fonts/OpenSans-Light.ttf') format('truetype'),
         url('../fonts/OpenSans-Light.svg') format('svg');
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans.eot');
    src: url('../fonts/OpenSans.woff') format('woff'),
         url('../fonts/OpenSans.ttf') format('truetype'),
         url('../fonts/OpenSans.svg') format('svg');
}

@font-face {
    font-family: 'OpenSans-Semibold';
    src: url('../fonts/OpenSans-Semibold.eot');
    src: url('../fonts/OpenSans-Semibold.woff') format('woff'),
         url('../fonts/OpenSans-Semibold.ttf') format('truetype'),
         url('../fonts/OpenSans-Semibold.svg') format('svg');
}


/* ---------------- ----------------    ---------------- ---------------- */

html, body{
	background: url(../imagenes/back.png);
	width:100%;
    margin:0;
    padding:0;
	background:#FFF4CE;
   }
     
#container {
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
	position:absolute; 
	display: table;
	background-position:center;
	background-repeat:no-repeat;
	}

#centrado {
	display: table-cell; 
	vertical-align: middle;
	text-align: center; 
	}	

.box {
  height: 600px;
  width: 900px;
  background: url(../images/background.png) #FCC14E;
  margin-left:auto;
  margin-right:auto;
}
.box2 {
  height: 600px;
  width: 900px;
  position:absolute;
  overflow:hidden
}

.logo {
  width: 196px;
  height: 24px;
  background: url(../images/logo.svg);
  position: absolute;
  top:47px;
  left:52px;
}
	
/* ---------------- ----------------   STORE  ---------------- ---------------- */

.store_google {
  width: 135px;
  height: 40px;
  background: url(../images/store_google.svg);
  position: absolute;
  top:520px;
  left:310px;
  cursor:pointer
}

.store_apple {
  width: 135px;
  height: 40px;
  background: url(../images/store_apple.svg);
  position: absolute;
  top:520px;
  left:458px;
  cursor:pointer
}

/* ---------------- ----------------   NUBES  ---------------- ---------------- */

.nube_1 {
  width: 400px;
  height: 400px;
  background: url(../images/nube_1.svg);
  position: absolute;
  top:300px;
  left:580px;
  z-index:500;
}
		

.nube_2 {
  width: 250px;
  height: 250px;
  background: url(../images/nube_2.svg);
  position: absolute;
  top:200px;
  left:530px;
   z-index:450;
 
}
	
/* ---------------- ----------------   SOCIAL MEDIA  ---------------- ---------------- */
	
	
.i_mail {
  width: 20px;
  height: 20px;
  background: url(../images/i_mail.svg);
  position: absolute;
  top:530px;
  left:710px;
  z-index:500;
  opacity:.5;
  cursor:pointer
}
		
	
.i_facebook {
  width: 20px;
  height: 20px;
  background: url(../images/i_facebook.svg);
  position: absolute;
  top:530px;
  left:750px;
  z-index:500;
  opacity:.5;
  cursor:pointer
}
	
.i_twitter {
  width: 20px;
  height: 20px;
  background: url(../images/i_twitter.svg);
  position: absolute;
  top:530px;
  left:790px;
  z-index:500;
  opacity:.5;
  cursor:pointer
}
	
.i_instagram {
  width: 20px;
  height: 20px;
  background: url(../images/i_instagram.svg);
  position: absolute;
  top:530px;
  left:830px;
  z-index:500;
  opacity:.5;
  cursor:pointer
}
							
/* ---------------- ----------------   DECORATION  ---------------- ---------------- */

.phone {
  width: 157px;
  height: 340px;
  background: url(../images/phone.png);
  background-size: cover;
  position: absolute;
  top:130px;
  left:360px;
  z-index:300;
}
					
/* ---------------- ----------------   BUTTONS  ---------------- ---------------- */
							
.news {
  width: 150px;
  height: 120px;
  position: absolute;
  top:0px;
  left:300px;
  z-index:30;
  margin:auto;
  cursor:pointer
}

.about {
  width: 150px;
  height: 120px;
  position: absolute;
  top:0px;
  left:450px;
  z-index:30;
  margin:auto;
  cursor:pointer
}

.contact {
  width: 150px;
  height: 120px;
  position: absolute;
  top:0px;
  left:600px;
  z-index:30;
  margin:auto;
  cursor:pointer
}


.privacy {
  width: 150px;
  height: 120px;
  position: absolute;
  top:0px;
  left:750px;
  z-index:30;
  margin:auto;
  cursor:pointer
}


div.news p, div.about p, div.contact p, div.privacy p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	font-family:"OpenSans-Bold", "Myriad Pro", Helvetica, Arial, sans-serif;
	font-size:18px;
	color:#FFFFFF;
}

/* ---------------- ----------------   TEXTS HOME  ---------------- ---------------- */

		
.title {
  width: 300px;
  height: 120px;
  position: absolute;
  top:120px;
  left:0px;
  z-index:30;
  margin:auto;
}


.subtitle {
	width: 300px;
	height: 120px;
	position: absolute;
	top: 240px;
	left: 15px;
	z-index: 30;
	margin: auto;
}

.review {
  width: 300px;
  height: 120px;
  position: absolute;
  top:360px;
  left:0px;
  z-index:30;
  margin:auto;
}


.title p {
	color:#FFFFFF;
	font-size:30px;
	line-height:32px;
	padding:25px;
	font-weight:bold;
}

.subtitle p {
	color:#FFFFFF;
	font-size:16px;
	padding:25px;
}

.review {
	color:#8D2016;
	font-size:14px;
}

.reviewname {
	color: #8D2016;
	font-size:12px;
}



div.title p, div.subtitle p, div.review p, div.footer p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	font-family:"OpenSans", "Myriad Pro", Helvetica, Arial, sans-serif;
	text-align:center;
}


.footer {
  width: 300px;
  height: 120px;
  position: absolute;
  top:480px;
  left:0px;
  z-index:30;
  font-size:10px;
  margin:auto;
  color:#FFFFFF;
}

/* ---------------- ----------------   PRIVACY  ---------------- ---------------- */

.privacy_content {
  width: 600px;
  height: 360px;
  position: absolute;
  top:120px;
  left:0px;
  z-index:400;
  margin:auto;
  background-color:#e87421;
}


#color_news{
	position:absolute;
	width:600px;
	height:360px;
	top:120px;
}
#sec_news{
	position:absolute;
	width:600px;
	height:360px;
	top:120px;
}
.color_news{
	position:absolute;
	width:150px;
	height:120px;
	background-color:#fa9c22;
	display:none
}

#color_about{
	position:absolute;
	width:600px;
	height:360px;
	top:120px;
}
#sec_about{
	position:absolute;
	width:600px;
	height:360px;
	top:120px;
}
.color_about{
	position:absolute;
	width:150px;
	height:120px;
	background-color:#72c1c2;
	display:none
}


#color_contact{
	position:absolute;
	width:600px;
	height:360px;
	top:120px;
}
#sec_contact{
	position:absolute;
	width:600px;
	height:360px;
	top:120px;
}
.color_contact{
	position:absolute;
	width:150px;
	height:120px;
	background-color:#d64935;
	display:none
}


#color_privacy{
	position:absolute;
	width:600px;
	height:360px;
	top:120px;
}
#sec_privacy{
	position:absolute;
	width:600px;
	height:360px;
	top:120px;
}
.color_privacy{
	position:absolute;
	width:150px;
	height:120px;
	background-color:#e87421;
	display:none
}

.barra{
	position: absolute;
	width: 8px;
	height: 299px;
	background-image: url(../images/barra.png);
	left: 497px;
	top: 33px;
}
.arrastra{
	position: absolute;
	width: 41px;
	height: 31px;
	background-image: url(../images/arrastra.png);
	left: 479px;
	top: 21px;
}
.texto1{
	position: absolute;
	width: 409px;
	height: 300px;
	left: 52px;
	top: 30px;
	text-align: left;
	font-family: OpenSans;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 23px;
}
.mapa{
	position: absolute;
	width: 322px;
	height: 360px;
	background-image: url(../images/mapa.png);
}
.texto2{
	position: absolute;
	width: 214px;
	height: 313px;
	left: 310px;
	top: 69px;
	text-align: left;
	font-family: OpenSans;
	font-size: 15px;
	color: #FFFFFF;
	line-height: 20px;
	text-align: center
}

.formulario{
	position: absolute;
	width: 385px;
	height: 360px;
	background-image: url(../images/formulario.png);
}
.enviar{
	position: absolute;
	width: 136px;
	height: 27px;
	background-image: url(../images/enviar.png);
	left: 376px;
	top: 311px;
}
.texto3{
	position: absolute;
	width: 146px;
	height: 376px;
	left: 374px;
	top: 23px;
	text-align: left;
	font-family: OpenSans;
	font-size: 15px;
	color: #FFFFFF;
	line-height: 20px;
	text-align: center
}


::-webkit-scrollbar          { width:5px;}
::-webkit-scrollbar-button       { opacity:0}
::-webkit-scrollbar-track        { opacity:0}
::-webkit-scrollbar-track-piece  { opacity:0}
::-webkit-scrollbar-thumb        { background-color:#fff;}
::-webkit-scrollbar-corner       { opacity:0}
::-webkit-resizer{ opacity:0}