/*************************************
              style.css
 Apocaliptic Hybrid 2.0 CSS Framework
              EMPCHILE
***************************************/

/**************************************/
/*         MEYER RESET v2.0           */
/**************************************/ 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;padding:0;	border: 0;font-size:100%;font:inherit;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} body {line-height:1;} ol, ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:'';content:none;} table {border-collapse:collapse;border-spacing:0;}


/**************************************/
/*               GLOBAL               */
/**************************************/
html { background-color:#FFF; color: #878484 ; font-family: Helvetica, Arial, sans-serif; margin:0px; font-size:16px; font-weight: 500;}
body {}
a, a:visited, a:hover, a:link, a:active {text-decoration:none; color:#0f60ad;}
.placeholder { color: #aaa; }
.clr { clear:both;}

/*animations*/
.ani-flash {transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out;}
.ani-fast {transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out;}
.ani-med {transition: all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out;}
.ani-slow {transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out;}

a.a-main-btn { padding:10px 24px; background-color:#4cd9ed; border-radius:5px; text-transform:uppercase; color:#FFF;} 
a.a-main-btn:hover { background-color:#42c0d2;box-shadow: 0 0 5px rgba(50, 50, 50, 0.4); }

{font-family: 'Playfair Display', serif;}
/**************************************/
/*               BOXES                */ 
/**************************************/  
/*level 0 boxes*/
div.box-lvl0 { width:100%; clear:both;} 
	div.mainrow1 {} 
	div.mainrow2 {} 
	div.mainrow3 {} 
	div.mainrow4 {} 
	div.mainrow5 {}
	div.mainrow6 {}
	div.mainrow7 {}
	div.mainrow8 {} 
	div.mainrow9 {}
	div.mainrow10 {}

/*level 1 boxes*/
div.box-lvl1 { width:1180px; display:block; margin:auto;}

/*level 2 boxes*/
div.variable-cont, div.header-cont, div.nav-cont, div.core-cont, div.content-cont, div.footer-cont, div.credits-cont {}
	div.variable-cont {}
	div.header-cont {}
	div.nav-cont {}
	div.core-cont {}
	div.content-cont {}
	div.footer-cont {} 
	div.credits-cont {}

/*specific*/


/**************************************/
/*              HEADER                */
/**************************************/
.logo { display: inline-block; background-image:url(../img/logo.svg); position: 50% 50%; background-size: contain; text-indent: -9999px; background-repeat: no-repeat; }
.header { text-align: center;}

/**************************************/
/*              TOP NAV               */
/**************************************/
.mainmenu { float: right; margin-top: 90px; }  
.mainmenu .mainmenu-item-cont {float:left;}
.mainmenu .mainmenu-item-cont a { color: #878484; margin: 0 20px; padding-bottom: 10px; border-bottom: 1px solid #fff; font-size: 14px;}  
.mainmenu .mainmenu-item-cont a i { margin-left: 10px; font-size: 14px;}
.mainmenu .mainmenu-item-cont a:hover { color: #1a1818;  border-bottom: 1px solid #1a1818;} 

.dspl {background-color: #fff; border: 5px solid #ece6e6;  z-index: 9999;  margin-left: -100px;  padding: 20px;  position: absolute;  width: 180px; margin-top: 20px;}
.dspl a { color: #757575;  line-height: 36px;}

/**************************************/
/*            TOP NAV RESP            */
/**************************************/
.responsive-menu { float: right; margin-top: 70px;}
.responsive-menu a { display: block;}
.responsive-menu a.menu-resp { width: 50px; height: 50px; display: block; background-color: #1b1919; color: #fff; text-align: center; line-height: 50px; font-size: 24px; float: right;}
.responsive-menu .responsive-menu-items { border: 5px solid #ece6e6; background-color: #fff; padding: 20px; position: absolute; width:180px; margin-left: -180px; z-index: 99999;}
.responsive-menu .menu-item { line-height: 36px; color: #757575 ;}
.responsive-menu .menu-item-lvl2 .fa { font-size: 12px; font-weight: 200;}
.responsive-menu .menu-item-lvl2 {line-height: 36px; color: #757575 ; text-indent: 10px;}


.how-it-works { position: fixed; background-color: #fff; border: 5px solid #ece6e6; z-index: 10000; padding: 20px; top: 120px; }
.how-it-works .title { font-size: 30px!important;font-family: 'Playfair Display', serif; letter-spacing: 1px; margin-bottom: 20px!important;}

.close-hitw-box { float: right; margin: -50px 0 30px 0;}
.close-hitw-box .fa { color:#1a1818; border: 1px solid #1a1818; height: 40px; line-height: 40px; text-align: center; width: 40px; font-size: 24px;}

/**************************************/
/*              FOOTER                */
/**************************************/



.footer-block { float: left; margin-right: 20px; line-height: 26px; font-size: 12px; margin-bottom: 30px;}
.footer-block .title {font-family: 'Playfair Display', serif; font-size: 16px; color: #1a1818; margin-bottom: 30px; display: block; font-weight: 500; letter-spacing: 1px;}
.footer-block p {}
.footer-block strong { color: #1a1818;}
.footer-block a { display: block; color: #1a1818;}
.footer-block a:hover { text-decoration: underline;}

/*credits*/
.social { float: left; width: 33%; height: 63px; line-height: 63px;}
.social a { display: inline-block; width: 36px; height: 36px; margin-right: 10px; border-radius: 50%; background-color:#a9a5a5; text-align: center; line-height: 36px; color: #fff;}
.social a:hover { background-color: #1a1818;} 

.www { float: left; text-align: center; font-size: 12px; height: 63px; line-height: 63px;}
.logo-fo { float: right; width: 33%;}
.logo-fo a.logo-fo {float: right; width: 162px; height: 63px; background-image: url(../img/logo-fo.svg); background-position: 50% 50%; background-size: contain; text-indent: -9999px; margin-bottom: 50px;}

a.contact-fo { display: block; color: #1a1818; border:1px solid #1a1818; padding: 10px 0; width: 190px; text-align: center; margin-top: 10px;}
a.contact-fo:hover { color: #fff; background-color:#1a1818; text-decoration: none;}

/**************************************/
/*               HOME                 */
/**************************************/
.home-blocks {}
.home-blocks a { float: left; margin-right: 22px;}
.home-blocks .imagen { display: block; overflow: hidden; width: 100%;}
.home-blocks .title { width: 100%; height: 70px; line-height: 70px; text-align: center;font-family: 'Playfair Display', serif; color: #1a1818; font-weight: 500; letter-spacing: 1px;}

.home-blocks-a {background-image: url(../images/home-block-a.jpg); background-size: cover;}
.home-blocks-b {background-image: url(../images/home-block-b.jpg); background-size: cover;}

.overlay {  background-color: rgba(26, 24, 24, 0.95); width: 100%; display: block; text-align: center; top: 0px; opacity: 0;}
.home-blocks a:hover .overlay { opacity: 1; }



.overlay .overlay-sub { color: #fff; font-size: 16px; margin-bottom: 10px; letter-spacing: 2px;}
.overlay .overlay-tit { color: #fff; font-family: 'Playfair Display', serif; letter-spacing:2px; margin-bottom: 20px;}
.overlay .overlay-icon { width: 38px; height: 38px; display: inline-block;background-image: url(../img/icon-link.png); background-position: 50% 50%;}


/**************************************/ 
/*            BREADCRUMBS             */
/**************************************/
div.breadcrumbs { float:left; margin-bottom:5px;  padding-bottom: 15px; display: block; width: 100%; /*temporal*/ display: none; /*temporal*/ border-top: 1px solid #d7d6d6; padding-top: 15px; }
div.breadcrumbs span { margin-right:5px;}
div.breadcrumbs a { color:#878484; margin-right:5px; font-size: 12px;}
div.breadcrumbs a:hover, div.breadcrumbs a.current { color:#1a1818;}

a.volver-mo {padding:15px 40px; color: #fff!important; background-color: #f59701; border-radius: 10px; font-size: 16px; margin-top: 15px; width: 80px; text-align: center;}
a.volver-mo:hover { background-color:#0f60ad;} 


.breadcrumbs-right { float: right;}
.breadcrumbs-right a {}
.breadcrumbs-right span {font-size: 12px;}


.title-right { height: 40px; line-height: 24px; }
.title-right span { float: left; color: #262424 ; font-size: 14px; margin-right: 20px; padding-top: 9px;}
.title-right a { float: left; color: #1a1818; border:1px solid #1a1818; padding: 0px 50px; height: 40px; line-height: 40px; }

.title-right a:hover {background-color: #1a1818;color: #fff;} 

/**************************************/
/*             PAGINATION             */
/**************************************/
  
/**************************************/
/*              SLIDER                */
/**************************************/
div.slider { width: 100%; display: block; background-color: aquamarine; margin-bottom: 30px;}
div.slider-mobile { width: 100%; display: block; background-color: aquamarine; margin-bottom: 30px; height: 350px;}



.bx-wrapper .bx-viewport { box-shadow: none!important; border: none!important;}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { bottom: 20px!important;}

.bx-wrapper .bx-pager.bx-default-pager a { background-color: transparent!important; border: 2px solid #fff; border-radius: 50%!important;}
.bx-wrapper .bx-pager.bx-default-pager a:hover { background-color: #fff!important;} 
.bx-wrapper .bx-pager.bx-default-pager a.active {background-color: #fff!important;}

.bx-wrapper .bx-viewport { left: 0px!important;}
.bx-wrapper {margin: 0 auto 30px!important;}

/**************************************/
/*             categories             */
/**************************************/
h1 { color:#1a1818; font-family: 'Playfair Display', serif; letter-spacing:2px; padding: 0 0 30px 0; float: left; line-height: 36px;}
div.title a { color: #878484!important; }


.cat-block { float: left; margin:0 20px 20px 0;}
.cat-block .imagen { display: block; margin: 0px; background-size: cover; background-position: 50% 50%;}
a.cat-block .overlay-block { background-color: rgba(26, 24, 24, 0.95); width: 100%; text-align: center; opacity: 0;}
a.cat-block .overlay-block .overlay-btn { border: 1px solid #fff; color: #fff; padding:10px 20px; display: inline-block; letter-spacing: 1px;}
a.cat-block:hover .overlay-block { opacity: 1;}

.cat-block .title { text-align: center; height: 60px; line-height: 60px;font-size: 18px; color:#1a1818;font-family: 'Playfair Display', serif; letter-spacing:2px;}

.mobile-title {}
.mobile-title .subt { text-align: left; color: #1a1818; width: 220px;}
.mobile-title .title { text-align: left; font-size: 22px; height: 40px; line-height: 40px; width: 220px; margin-bottom: 10px;}
.mobile-title .arrow { border: 1px solid #1a1818; border-radius: 50%; height: 33px; width: 33px; line-height: 33px; text-align: center; float: right; margin-top: -60px;}
.mobile-title .fa { color: #1a1818;}

a.top {border: 1px solid #1a1818; background-color: #1a1818; color: #fff; border-radius: 50%; height: 33px; width: 33px; line-height: 30px; text-align: center; margin:0 auto 20px auto; }

/**************************************/
/*              DETALLE               */
/**************************************/

/*detalle1*/
.detalle-1 {}
.detalle-1 .detalle-1-block-a { float: left;}
.detalle-1 .detalle-1-block-b { }

.detalle-1 .title, .detalle-1 p { font-size: 12px; line-height: 20px;}

.detalle-1 .title { color: #1a1818; }
.detalle-1 p { color: #878484 ; margin-bottom: 20px;}
.detalle-1 br {}
.price { font-size: 30px; color: #1a1818; margin-bottom: 30px;font-family: 'Playfair Display', serif; letter-spacing:2px;}
.detalle-1 a { display: block; color: #1a1818; border:1px solid #1a1818; padding: 10px 50px;}


/*pasos*/
.pasos { display: block;}
.pasos .title { color: #1a1818; font-size:12px; margin-bottom:5px; }
.pasos .sucess { color: #878484; line-height: 18px; font-size: 12px; width: 540px; margin-bottom: 20px; }
.pasos b { color: #1a1818;}
.pasos .clr {}
.pasos .paso-block { width: 175px; float: left; margin-bottom: 20px;}
.paso-block {}
.paso-block .icon { height: 92px; width: 92px; display: block; margin: auto; margin-bottom: 12px; background-image: url(../img/icons.gif);}

.icon-a { background-position: 0 0 ;}
.icon-b { background-position: -92px 0 ;}
.icon-c { background-position: -184px 0 ;}
.icon-d { background-position: -276px 0 ;}
.icon-f { background-position: -368px 0 ;}
.icon-g { background-position: -460px 0 ;}


.title-block { text-align: center; font-size: 14px; display: block; color: #1a1818; margin-bottom: 10px;}
.paso-block p { font-size: 12px; text-align: center; line-height: 16px; display: block; margin: 0 10px;}
.paso-block b {}

/**************************************/
/*              CONTACTO              */
/**************************************/

.form-block { float: left;}
    .form-block.form-block-a{}
    .form-block.form-block-b{}
    .form-block.form-block-c{}

.form-block .title { color: #1a1818; margin-bottom: 25px; font-size: 14px;}
.form-block .subt {color: #1a1818; font-size: 12px; margin-bottom: 10px;}
.form-block p { font-size: 12px; color: #878484 ; margin-bottom: 25px;}

.form-block .social {}
.form-block .ani-fast {}
.form-block .ani-fast .fa {}
.form-block .ani-fast .fa.form-block .ani-fast .fa {}
.form-block .ani-fast .fa.form-block .ani-fast .fa {}
.form-block .ani-fast .fa.form-block {}
.form-block.form-block-b{}
.form-block .title {}
.form-block .title label {}
.form-block .title input {}
.form-block .title span {}
.form-block .input-cont {}
.form-block .input-cont label {}
.form-block .input-cont input {}
.form-block .input-cont span {}
.form-block {}
.form-block.form-block-c{}
.form-block .title {}
.form-block .input-cont {}
.form-block label {}
.form-block textarea {}
.form-block span {}


/**************************************/
/*            INSPIRACIONES           */
/**************************************/

.insp-block-m {float: left; margin-right: 20px;  margin-bottom: 20px;}
.insp-block-m .img { width: 100%; float: left;background-position: 50% 50%; background-size: cover;}
.insp-block-m .txt { height: 55px; line-height: 24px;font-family: 'Playfair Display', serif; letter-spacing:1px; color: #1a1818; float: left; font-size: 16px; padding: 15px 0;}
.insp-block-m .txt a { color: #1a1818; text-decoration: underline;}
.insp-block-l { float: left; margin-right: 40px; background-position: 50% 50%; background-size: cover; margin-bottom: 20px;}
a.subir {display: block; color: #1a1818; border:1px solid #1a1818; padding: 10px 0; width: 190px; text-align: center; margin-top: 10px; margin: 0 auto 40px auto;}
a.subir:hover { color: #fff; background-color: #1a1818;} 

/**************************************/
/*           QUIENES SOMOS            */
/**************************************/
p.qs {color: #1a1818;font-size: 14px;line-height: 24px; margin: 20px 0;}
.usr-block { float: left; margin-right: 10px;}
.usr-block .img { display: block; height: 205px;background-position: 50% 50%; background-size: cover;}
.usr-block .text { display: block; background-color: rgba(26, 24, 24, 0.95); color: #fff; font-size: 12px; text-align: center; padding:20px 20px 0px 20px; line-height: 18px; letter-spacing: 1px; height: 185px; opacity: 0; }
a.usr-block:hover .text { opacity: 1;}
.usr-block .txt { display: block; height: 50px; line-height: 50px; font-family: 'Playfair Display', serif; letter-spacing:2px; color: #1a1818; }


.qs-block-txt { width: 50%; float: left; min-width: 290px;}
    .qs-block-txt .number { display: block; text-align: center; font-size: 72px; color: #1a1818; font-family: 'Playfair Display', serif; letter-spacing:2px;}
    .qs-block-txt .line {display: block; text-align: center; border-bottom: 1px solid #1a1818; width: 110px; margin:20px auto;}
    .qs-block-txt .title {display: block; text-align: center; font-size: 24px; color: #1a1818; font-family: 'Playfair Display', serif; letter-spacing:2px;}
    .qs-block-txt .txt {display: block; text-align: center; font-size: 12px;  color: #1a1818; width: 300px; margin: auto; line-height: 18px;}

.qs-block-img {  float: left; margin-bottom: 30px; }
    .qs-block-img-a { background-image: url(../images/qs1.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;}
    .qs-block-img-b { background-image: url(../images/qs2.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;}
    .qs-block-img-c { background-image: url(../images/qs3.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;}

.qs-block-xl { display: block; float: left; margin-bottom: 30px;}
    .qs-block-xl-img-a { background-image: url(../images/qs4.jpg); background-repeat: no-repeat; background-size: cover;}
    .qs-block-xl-img-b { background-image: url(../images/qs5.jpg); background-repeat: no-repeat; background-size: cover;}


/*anim*/


.block {
  height: 5em;
  line-height: 5em;
  width: 10em;
  background: #464646;
  color: #fdfdfd;
  text-align: center;
  margin: 1em auto;
  text-shadow: 0 0 1px #333; /* so one can see fadeBgColor properly */
}

/* initially hide animatable objects */
.animatable {
  visibility: hidden;
  -webkit-animation-play-state: paused;        
  -moz-animation-play-state: paused;     
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;   
  animation-play-state: paused; 
}

/* show objects being animated */
.animated {
  visibility: visible;
  
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

/* CSS Animations (extracted from http://glifo.uiparade.com/) */
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}



@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}
	60% {
		-webkit-transform: translateX(20px);
	}

	80% {
		-webkit-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}

	60% {
		-moz-transform: translateX(20px);
	}

	80% {
		-moz-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-2000px);
	}

	60% {
		opacity: 1;
		-o-transform: translateX(20px);
	}

	80% {
		-o-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}

	60% {
		transform: translateX(20px);
	}

	80% {
		transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@-webkit-keyframes bounceInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
	}

	60% {
		-webkit-transform: translateX(-20px);
	}

	80% {
		-webkit-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(2000px);
	}

	60% {
		-moz-transform: translateX(-20px);
	}

	80% {
		-moz-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(2000px);
	}

	60% {
		-o-transform: translateX(-20px);
	}

	80% {
		-o-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes bounceInRight {
	0% {
		opacity: 0;
		transform: translateX(2000px);
	}

	60% {
		transform: translateX(-20px);
	}

	80% {
		transform: translateX(5px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInUp {
	0% {
		opacity: 0;
		-o-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}
	50% {
		-webkit-transform: scale(1.05);
	}

	70% {
		-webkit-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes bounceIn {
	0% {
		opacity: 0;
		-moz-transform: scale(.3);
	}

	50% {
		-moz-transform: scale(1.05);
	}

	70% {
		-moz-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-moz-transform: scale(1);
	}
}

@-o-keyframes bounceIn {
	0% {
		opacity: 0;
		-o-transform: scale(.3);
	}

	50% {
		-o-transform: scale(1.05);
	}

	70% {
		-o-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-o-transform: scale(1);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}

	50% {
		transform: scale(1.05);
	}

	70% {
		transform: scale(.9);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@-webkit-keyframes moveUp {
	0% {
		opacity: 1;
		-webkit-transform: translateY(40px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes moveUp {
	0% {
		opacity: 1;
		-moz-transform: translateY(40px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes moveUp {
	0% {
		opacity: 1;
		-o-transform: translateY(40px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes moveUp {
	0% {
		opacity: 1;
		transform: translateY(40px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#464646;
	}
}
@-o-keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#464646;
	}
}
@keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#464646;
	}
}

.animated.animationDelay{
	animation-delay:.4s;
	-webkit-animation-delay:.4s;
}
.animated.animationDelayMed{
	animation-delay:1.2s;
	-webkit-animation-delay:1.2s;
}
.animated.animationDelayLong{
	animation-delay:1.6s;
	-webkit-animation-delay:1.6s;
}
.animated.fadeBgColor {
	-webkit-animation-name: fadeBgColor;
	-moz-animation-name: fadeBgColor;
	-o-animation-name: fadeBgColor;
	animation-name: fadeBgColor;
}
.animated.bounceIn {
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
}
.animated.bounceInRight {
	-webkit-animation-name: bounceInRight;
	-moz-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name: bounceInRight;
}
.animated.bounceInLeft {
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
}
.animated.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}
.animated.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.animated.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
.animated.moveUp {
	-webkit-animation-name: moveUp;
	-moz-animation-name: moveUp;
	-o-animation-name: moveUp;
	animation-name: moveUp;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
}

#status {
  width: 200px;
  height: 111px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: /*url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif)*/ url(../img/logo.svg);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}

span.loader {background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);  width: 24px; height: 24px;position: absolute;
  left: 50%;top: 100%; margin-left: -16px; background-size: contain;}




/**************************************/
/*                TOOL                */
/**************************************/


.tool-a { float: left; width: 700px; margin-right: 27px; height: 540px; overflow: hidden;}
.tool-b { float: left; width: 375px;}

.title-tool-b { font-size: 14px; color: #1a1818; margin-bottom: 15px;}

.bloque-tool { border: 1px solid #1a1818; display: block; margin-bottom: 10px; padding:10px 20px 10px 20px;}
.bloque-tool .nro { height: 29px; width: 29px; line-height: 26px; text-align: center; border: 1px solid #1a1818; border-radius: 50%; color: #1a1818; position: relative; left: -35px; background-color: #fff;}
.bloque-tool .title-tool-block {color: #1a1818; font-size: 12px; text-indent: 5px; margin-bottom: 20px;}
.aaa {margin-top: -20px; }

/*option circles*/
a.option-circle { float: left; margin-bottom: 15px;}
.option-circle .circle { width: 41px; height: 41px; float: left; border: 1px solid #939393; border-radius: 50%; margin-right: 10px; }
a.option-circle:hover .circle {border: 1px solid #1a1818;} 
.option-circle .circle-title { color: #878484; font-size: 12px; height: 41px; line-height: 41px; float: left; margin-right: 20px;}

.tool-input { float: left; margin-bottom: 20px;}
.tool-input input { float: left; margin-right: 10px;}
.tool-input .label { float: left; font-size: 12px; color: #878484 ; margin-right: 20px;}


/*view*/

div.layer { width: 100%; display: block; height: 540px; position: relative; top: 0px; left: 0px;}
.on { opacity: 1;}
.off { opacity: 0;}
    
    div.layer-1 { top: -540px; z-index: 50;}
    div.layer-2 { top: -1080px; z-index: 51;} 
    div.layer-3 { top: -1620px; z-index: 52;} 
    div.layer-4 { top: -2160px; z-index: 53;} 
    div.layer-5 { top: -2700px; z-index: 54;} 
    div.layer-6 { top: -3240px; z-index: 55;} 
    div.layer-7 { top: -3780px; z-index: 56;} 
    div.layer-8 { top: -4320px; z-index: 57;} 
    div.layer-9 { top: -4860px; z-index: 58;} 
    div.layer-10 { top: -5400px; z-index: 59;} 
    div.layer-11 { top: -5940px; z-index: 60;} 
    div.layer-12 { top: -6480px; z-index: 61;} 
    div.layer-13 { top: -7020px; z-index: 62;}
    div.layer-14 { top: -7560px; z-index: 63;} 
    div.layer-15 { top: -8100px; z-index: 64;} 
    div.layer-16 { top: -8640px; z-index: 65;} 
    div.layer-17 { top: -9180px; z-index: 66;} 
    div.layer-18 { top: -9720px; z-index: 67;} 
    div.layer-19 { top: -10260px; z-index: 68;} 
    div.layer-20 { top: -10800px; z-index: 69;} 

.box-lvl0-slider { background-color: #000;}
.box-lvl0-footer {background-color: #000; padding: 10px 0 ; color: #fff; font-size: 12px; line-height: 18px; position: fixed; bottom: 20px;}
.box-lvl0-footer a {color: #fff;}

.footer-a { float: left; text-align: left; }
.footer-b {float: left; text-align: center; }
.footer-c {float: left; text-align:right;}

.bxslider img {  width: 100%;}

.sociall { display: block; text-align: center; margin-top: 20px; font-size: 14px;}
.sociall a { display: inline-block; margin: 10px 5px; font-size: 28px; color: #000;}