/*
=====================================================================
*   Woo v1.0 Layout Stylesheet
*   url: styleshout.com
*   05-02-2014
=====================================================================

   TOC:
   a. General and Common Styles
   b. Header Styles
   c. Hero Section
   d. Presentacion Section
   e. Pricing Section
   f. Memoria Section
   h. Planos Section
   i. Imagenes Section
   j. Footer
   k. lightbox

   todo: check bug in mobile z-index

===================================================================== */

/* ------------------------------------------------------------------ */
/* a. General and Common Styles
/* ------------------------------------------------------------------ */

body {}

.section-head {
  padding: 0  5.5%;
  text-align: center;
}
.section-head h1 {
    font-family: 'ScriptinaPro', Arial, sans-serif;
	font-size: 58px;
	color: #FFF;
	margin-bottom: 0px;
	text-align: left;
	letter-spacing: 4px;
}

/* for css animations */
.show { opacity: 1; }
.js #mc_embed_signup input[type="email"],
.js #mc_embed_signup input[type="submit"] {
   opacity: 0;
}

#imagen-fade{background: #000;position: fixed;left: 0;top: 0;width: 100%;height: 100%;opacity: 1;z-index: 999;line-height: 0px;}

/* Flex Slider
/* ------------------------------------------------------------------ */

/* Reset */
.flexslider a:active,
.flexslider a:focus  { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.flex-direction-nav { width: 100%;text-align: center;position: absolute;top: 40%;max-width: 1490px; }
.flex-direction-nav li a{font-size: 90px;font-family: Arial, sans-serif;color:#000;}
.flex-direction-nav li:first-child {float:left;}
.flex-direction-nav li:last-child {float:right;}
.slides li { margin: 0; padding: 0;}

/* Necessary Styles */
.flexslider {
   position: relative;
   zoom: 1;
   margin: 0;
   padding: 0;
   background: #FFF;
}
.flexslider .slides { zoom: 1; }
.flexslider .slides > li { position: relative; }

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
/* Suggested container for slide animation setups. Can replace this with your own */
.flex-container { zoom: 1; position: relative; }

/* Clearfix for .slides */
.slides:before,
.slides:after {
   content: " ";
   display: table;
}
.slides:after {
   clear: both;
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child { display: block; }

/* Slider Styles */
.slides { zoom: 1; }
.slides > li {
   /*margin-right: 5px; */
   overflow: hidden;
}

/* Control Nav */
.flex-control-nav {
   width: 100%;
   text-align: center;
   margin-top: 14px;
}
.flex-control-nav li {
   margin: 0 6px;
   display: inline-block;
   zoom: 1;
   *display: inline;
}
.flex-control-paging li a {
   width: 22px;
   height: 22px;
   display: block;
   background: none;
   cursor: pointer;
   text-indent: -9999px;
   border-radius: 20px;
   box-shadow: inset 0 0 3px  #4b5b13;
}
.flex-control-paging li a:hover {
    background: #CCC;
    background: rgba(255, 255, 255, .7);
}
.flex-control-paging li a.flex-active {
    background: #4b5b13;
    cursor: default;
}

/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header, #headermenu {
	width: 100%;
	height: 54px;
	background-position: 50% 0%;
	background-repeat: no-repeat;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	/*background-attachment: fixed;*/
	 -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#headermenu{
	height: 228px;
	background-image:url(../images/bg-menu.png);
	background-repeat:no-repeat;
}
#headermenu a{
	color:#000;
}
#headermenu .telefono a{
	background-image: url(../images/ico-tel.png);
}

/* header social */
header .header-social {
   font-size: 20px;
   font-weight: normal;
   line-height: 54px;
   color: #424a56;
   margin: 0 10px 0 0;
   padding: 0;
   float: right;
}
header .header-social li {
   display: inline-block;
   margin-right: 20px;
}
header .header-social li a { color: #fff; }
header .header-social li a:hover { color: #4d590d; }

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}

/* nav-wrap */
#nav-wrap {
   text-transform: uppercase;
   letter-spacing: 0px;
   margin:0px auto;
   padding: 8px 0px;
   width:50%;
   min-width: 620px;
}
#nav-wrap #toggle-btn{color: #4d590d;}
#nav-wrap ul#nav.mobile .current a{color: #000;}
#nav-wrap ul#nav.mobile a{color: #fff;}
/* hide toggle button */
#nav-wrap > a { display: none; }

ul#nav {
   min-height: 54px;
   width: auto;

   /* left align the menu */
   text-align: left;
}
ul#nav li {
	position: relative;
	list-style: none;
	height: 54px;
	display: inline-block;
	padding:0px 3.6%;
}

/* Links */
ul#nav li a {
   /* 8px padding top + 8px padding bottom + 38px line-height = 54px */
   display: inline-block;
   padding:18px 0px 8px 0px;
   line-height: 38px;
	text-decoration: none;
   text-align: left;
   color: #9DAA05;

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
	
	font-family: 'MyriadProRegular';
	font-size:18px;
}
ul#nav li a:hover { color: #FFF; }
ul#nav li a:active { background-color: transparent !important; color: #FFF;}
ul#nav li.current a { color: #FFF !important; }
ul#nav li.telefono{padding:0px;}
ul#nav li.telefono a {background-image:url(../images/ico-tel-green.png); background-position:left center; background-repeat:no-repeat;padding: 18px 0px 18px 22px;}

/* ------------------------------------------------------------------ */
h1.oculto{text-indent:-999999px;position:absolute;}
.logo{width: 100%;margin: 0px auto;padding-top:0%;position: absolute;left: 0px;right: 0px;top: 0%;}

/* Secciones */
#hero, #presentacion, #memoria, #planos, #imagenes, #precios, #contacto{position:relative;}
#presentacion, #memoria, #planos, #imagenes, #precios, #contacto{padding-top: 370px;}
.logoarc{position: absolute;left: 5.5%;z-index: 99;width: 8.4%;top: 0%;padding-top:10%;}
.logoallegra{position: absolute;right: 5.5%;z-index: 99;width: 9.5%;top: 0%;padding-top:10%;}
#imagen-fade .logoarc, #imagen-fade .logoallegra{z-index:99999;}

/* c. Hero Section
/* ------------------------------------------------------------------ */

#hero {
   overflow: hidden;
}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

	#hero { 
		background: #000000 url(img/hero-bg_@2X.png); 
		background-size: 200px 200px;
	}
  
}

#hero .oneslide { width: 100%;max-width: 100%; line-height: 0px;}

/* Hero Text */
.hero-text {
	color: #676e73;
   width: 83%;
   text-align: center;
   margin: 54px auto 24px auto;
}
.hero-text h1 {
   font-size:40px;
   color: #fff;
   padding: 0;
   margin: 0;
   text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}
.hero-text h1 span,
.hero-text a { color: #4d590d; }
.hero-text p {
   font-size:16px;
   padding: 0;
   margin: 12px 8% 0;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}

/* Hero Image */
.hero-image {
   width: 100%;
   margin: 0 auto;
}
.hero-image img {
   vertical-align: bottom;
   display: block;
}
.banda-slide{position:absolute;width:100%;}

/* Hero CTA Buttons */
#hero .buttons {
   text-align: center;
   margin: 0 0 18px 0;
}
#hero .buttons .button {
   font-size:14px;
   text-transform : uppercase;
   letter-spacing: 2px;
}
#hero .buttons .trial {
   background: #f64b39;
   margin-right: 30px;

   -webkit-animation-delay: 10s;
      -moz-animation-delay: 10s;
       -ms-animation-delay: 10s;
        -o-animation-delay: 10s;
   -webkit-animation-iteration-count: 3;
      -moz-animation-iteration-count: 3;  
}
#hero .buttons .trial:hover { background: #F86A5A; }
#hero .buttons .learn-more {}


/* ------------------------------------------------------------------ */
/* d. Presentacion Section
/* ------------------------------------------------------------------ */

#presentacion {
   padding-bottom: 78px;
   overflow: hidden;
}
.section-head{
	/*background: url(../images/flecha-titulo.png) 3% 0% no-repeat;*/
}

#presentacion .fila {
	float: none;
	clear: both;
}
#presentacion .lado {
	margin:0px;
	padding:0px;
}
#presentacion .ladoi {
	width: 51%;
	float:left;
}
#presentacion .ladod {
	width: 48%;
	float:right;
}

#presentacion .titulo{font-family: 'MyriadPro-Light';font-size:20px;}

#presentacion .lado .foto.ub01{margin-top: 50px;margin-bottom: 10px;}

.flexslider-presentacion{border:10px solid #000;width: 80%;margin: 0px auto;padding: 20px 20px 25px 20px;}
.flexslider-presentacion .flex-prev{}
.flexslider-presentacion .flex-next{}

.flexslider-presentacion .texto{padding: 10px 20px;color: #000;}
.flexslider-presentacion .texto .imagen{}
#presentacion .ladoi .foto{padding-right:1%;}

.flexslider-presentacion .texto .parrafo{font-size: 14px;line-height: 17px;margin-bottom: 1px;}
.flexslider-presentacion .texto .parrafo br{line-height: 24px;}

.fluid-video-wrapper { margin-top: 18px; }


/*----------------------------------------------*/
/*	e. Pricing Section
/*----------------------------------------------*/

#precios {
   padding-bottom: 77px; 
   text-align: center;
}
#precios .fila {
	width:100%;
	float: left;
}
#precios .th , #precios .td{
   background: #fff;
   border: 1px solid #E6E6E6;
   text-align: center;
   float:left;
}
#precios .th{border-bottom:1px solid #909090;}
#precios .col1{width: 14%}
#precios .col2{width: 8%}
#precios .col3{width: 22%}
#precios .col4{width: 18%}
#precios .col5{width: 14%}
#precios .col6{width: 20%}
#precios .col7{width: 18%}
#precios footer {
   background: #fff;
}

#precios .th.col1{height: 82px;padding: 22px 0px 0px 0px;}
#precios .th.col2{height: 82px;padding: 22px 0px 0px 0px;}
#precios .th.col3{height: 82px;padding: 0px 0px 0px 0px;}
#precios .th.col4{height: 82px;padding: 10px 0px 0px 0px;}
#precios .th.col5{height: 82px;padding: 10px 0px 0px 0px;}
#precios .th.col6{height: 82px;padding: 10px 0px 0px 0px;}
#precios .th.col6 h3{padding: 10px 4px;}
#precios .th.col7{height: 82px;padding: 10px 0px 0px 0px;}
#precios .col1 .plan-title{}
#precios .col2 .plan-title{}
#precios .col3 .plan-title{}
#precios .col4 .plan-title{}
#precios .col5 .plan-title{}
#precios .col6 .plan-title{}
#precios .col7 .plan-title{}

.plan-title {
	font-size: 15px;
	padding: 10px 10px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	line-height: 20px;
	margin: 0px;
	font-weight: bold;
	color: #4D4A4A;
}


ul.presentacion {
   margin: 12px 0 0 0;
   list-style: none;
}
ul.presentacion li {
   line-height: 39px;
   margin-bottom: 0;
}
ul.presentacion li:nth-child(odd) { }
ul.presentacion li:nth-child(even) { }

.plan-sign-up {
  	padding: 24px 15px;
   margin: 0;
   text-align: center;
}
.plan-sign-up .button {
   font-size:24px;
   text-transform: uppercase;
   letter-spacing: 2px;
}


/* ------------------------------------------------------------------ */
/* c. Memoria
/* ------------------------------------------------------------------ */

#memoria {
   padding-bottom: 120px;
}
#memoria .row{
   width:60%;
}
#memoria .lado {
	float:left;
	margin:0px;
	padding:0px;
}
#memoria .ladoi {
	width:51%;
	float:left;
}
#memoria .ladod {
	width:48%;
	float:right;
}
#memoria .nota{
	font-size: 11px;
	width: 65%;
	float: right;
	text-align: justify;
	line-height: 14px;
}

.flexslider-memo{border:10px solid #000;width: 80%;margin: 0px auto;padding: 12px 18px;background:#FFF;}
.flexslider-memo .texto{color: #FFF;padding: 10px 10px;font-size: 14px;line-height: 22px;}
.flexslider-memo .flex-prev{}
.flexslider-memo .flex-next{}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

   #memoria {
      background: #000 url(img/grey_@2X.png);
      background-size: 397px 322px;
   }

}

/* Portfolio Content */
#memoria-wrapper .columns { padding: 0; }
.item .item-wrap {
   background: #fff;
   overflow: hidden;
   position: relative;

   -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.item .item-wrap a {
   display: block;
   cursor: pointer;
}

/* overlay */
.item .item-wrap .overlay {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;

	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
.item .item-wrap .link-icon {
   display: block;
   color: #fff;
   height: 30px;
   width: 30px;
   font-size: 18px;
   line-height: 30px;
   text-align: center;

   opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -15px;
   margin-top: -15px;
}
.item .item-wrap img {
   vertical-align: bottom;

   -webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

/* on hover */
.item:hover .overlay {
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}
.item:hover .link-icon {
   opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}
.item:hover .item-wrap img {
   -moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

/* ------------------------------------------------------------------
/* h. Planos
/* ------------------------------------------------------------------ */

#planos {
   padding-bottom: 66px;
   position: relative;
   min-height: 198px;
   width: 100%;
   overflow: hidden;
   text-align: center;
}
#planos .section-head{width: 60%;margin: 0 auto;}
#planos .flex-containerplanos .flexslider .fotos{
	width: 70%;
	margin: 0 auto;
	padding: 20px;
}
#planos .flex-containerplanos .flexslider .fotos img{
	-webkit-box-shadow: 1px 1px 25px 0px rgba(0, 0, 0, 1);
	-moz-box-shadow:    1px 1px 25px 0px rgba(0, 0, 0, 1);
	box-shadow:         1px 1px 25px 0px rgba(0, 0, 0, 1);
}
#planos .flex-containerplanos .flexslider .descargar{
	background:url(../images/flecha-pdf.png) top left no-repeat;
	width: 10%;
	padding-left: 4%;
	position: absolute;
	bottom: 80px;
	right:1%;
	font-size: 18px;
	line-height: 22px;
}
#planos .flex-containerplanos .flexslider .descargar img{
	width: 70%;
	margin-bottom: 12px;
}
#planos .flex-containerplanos .flex-control-paging li a{
	width:15px;
	height:15px;
}
#planos .flex-containerplanos .flexslider-planos{width: 80%;margin: 0 auto;}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

	#planos {
		background: #000 url(img/escheresque_@2X.png);
		background-size: 46px 29px;
	}
  
}

#planos .quote-left, 
#planos .quote-right {
   position: absolute;
   top: 50%;
   color: #fff;
   font-size: 40px;
   margin-top: -25px;
}
#planos .quote-left { left: 5%; }
#planos .quote-right { right: 5%; }

#planos .text-container {
   width: 86%;
   margin: 0 auto;
}
#planos h1 {}

/*	Blockquotes */
#planos blockquote {
   margin: 0 0px 30px 0px;
   padding-left: 0;
   position: relative;   
}
#planos blockquote:before { content: none; }
#planos blockquote p {
   font-family: 'DIN-Medium', Arial, sans-serif;
   font-style: normal;
   color: #fff;
   padding: 0;
   font-size: 26px;
   line-height: 42px;   
}
#planos blockquote cite {
   display: block;
   font-size: 12px;
   font-style: normal;
   line-height: 18px;
   color: #fff;
}
#planos blockquote cite:before { content: "\2014 \0020"; }
#planos blockquote cite a,
#planos blockquote cite a:visited { color: #8B9798; border: none }

/* Contacto */
.politica{color:#FFF;}
#politica_privacidad{display:none;}
/* popup */
#politica_privacidad {
	width:575px;
	height:800px;
	background:#FFFFFF;
	display: none; /* Hidden as default */
	float: left;
	position: absolute;
	top: 50%; left: 50%;
	z-index: 99999;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	padding:20px 30px;
}
#politica_privacidad .texto{
	overflow: hidden;
	overflow-y: scroll;
	height: 670px;
	margin-top: 35px;
}
#fade { 
	display: none; /* Hidden as default */
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.botoncerrar{
	position: absolute;
	top: 20px;
	right: 29px;
	cursor: pointer;
	cursor: hand;
	color: #000;
	background: #fff;
	padding: 5px 10px;
	text-align: center;
	border: 1px solid #ccc;

}

/* ------------------------------------------------------------------ */
/* i. Imagenes Section
/* ------------------------------------------------------------------ */

#imagenes {
   padding-bottom: 66px;
   overflow: hidden;
   text-align: center;
}
#imagenes .cab {color:#000;text-align:left;clear: both;float:none;}
#imagenes a, #imagenes a:visited  { color: #fff; }
#imagenes a:hover, #imagenes a:focus { color: #4d590d; }

#imagenes p {
   color: #7A7A7A;
   text-align: center;
   padding: 0;
}

/* mailchimp signup form */
#mc_embed_signup {
   background: none;
   clear: both;
   display: block;
   margin: 6px auto 30px auto;
   width: 70%;
  	text-align: center;   
}
#mc_embed_signup:before,
#mc_embed_signup:after {
    content: " ";
    display: table;
}
#mc_embed_signup:after {
    clear: both;
}
#mc_embed_signup input[type="submit"] {
   float: right;
   height: 60px;
   margin: 0;
   padding: 0 20px;
   font-size: 16px;
   line-height: 60px;
   width: 47%;  
}
#mc_embed_signup input[type="email"] {
   display: inline;
   float: left;
   height: 60px;
   margin: 0;
   padding: 18px 20px;
   font-size: 18px;
   line-height: 24px;
   font-family: 'DIN-Medium', Arial, sans-serif;
   width: 47%;  
   text-align: center;
}


/* ------------------------------------------------------------------ */
/* j. Footer
/* ------------------------------------------------------------------ */

footer {
   position: relative;   
   background: #000;
   padding-top: 50px;
}

footer a, footer a:visited { color: #4d590d; }
footer a:hover, footer a:focus { color: #fff; }

footer .info { padding-right: 90px; }

footer .footer-logo a {
   display: block;
   margin-bottom: 12px;
   margin-top: 12px;
   margin-left: 3px;
}
footer .footer-logo a img {
   width: 220px;
}

footer .right-cols .columns {
   padding-right: 5px;
   padding-left: 5px;
   width: 33.33333%; ;
}
footer .right-cols .columns p { margin-bottom: 6px; }

footer h3 {
	font-size: 20px;
	margin-bottom: 10px;
	font-weight: bold;
	color: #4d590d;
	text-transform: uppercase;
	letter-spacing: 1px;
}
footer h3:before {
   font-family: 'FontAwesome';   
	margin: 0 0 6px 3px;
	font-size: 30px;
   line-height: 48px;
   text-align: left;
   color: #738291;
   display: block;
}
footer h3.address:before { content: "\f041"; }
footer h3.social:before { content: "\f0c0"; }
footer h3.contact:before { content: "\f0e0"; }

footer .texto{}

footer ul {
   margin: 0;
   padding: 0;
}
footer ul li {
   margin: 0;
   line-height: 24px;
}
footer ul li a,
footer ul li a:visited { color: #C3C3C3; }
footer ul li a:hover,
footer ul li a:focus { color: #fff; }
footer p{line-height: 16px;font-size: 14px;color: #C3C3C3;}

/* copyright */
footer .copyright {
   margin: 0;
   padding: 0px;
   clear: both;
}
footer .nota{
	padding: 6px 0px;
	font-size: 11px;
}

#cookies{
	display: none;
	position: fixed;
	bottom: 0px;
	left: 0px;
	z-index: 999;
	width: 100%;
	height: auto;
	background-color: rgba(40, 40, 40, 0.95);
	color: rgba(40, 40, 40, 0.95);
	box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.5);
	padding: 22px 25px 10px 25px;
}
#cookies .title{color: #D5E7F5;font-family: 'Rotis', Arial, sans-serif;font-size:22px;}
#cookies .texto{color: #FFF;}
#cookies button{float: right;margin: 15px;}
/* Go To Top Button */
#go-top {
	position: absolute;
	top: -24px;
   left: 50%;
   margin-left: -30px;
   text-align: center;
   z-index: 889;
}
#go-top a {
	text-decoration: none;
	border: 0 none;
	display: block;
	width: 60px;
	height: 60px;
	background: #525252;

	-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;
   transition: all 0.2s ease-in-out;

   color: #fff;
   font-size: 21px;
   line-height: 60px;
 	border-radius: 100%;
}
#go-top a:hover { background: #0F9095; }


/* ------------------------------------------------------------------ */
/* k. lightbox
/* ------------------------------------------------------------------ */

#imagelightbox {
   cursor: pointer;
   position: fixed;
   z-index: 995;
   -ms-touch-action: none;
   touch-action: none;
   -webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */
   -moz-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */
   box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */
}

/* activity indication */
#imagelightbox-loading,
#imagelightbox-loading div { border-radius: 50%; }
#imagelightbox-loading {
   width: 2.5em; /* 40 */
   height: 2.5em; /* 40 */
   background-color: #444;
   background-color: rgba( 0, 0, 0, .5 );
   position: fixed;
   z-index: 999;
   top: 50%;
   left: 50%;
   padding: 0.625em; /* 10 */
   margin: -1.25em 0 0 -1.25em; /* 20 */
   -webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */
   -moz-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */
   box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */
}
#imagelightbox-loading div {
   width: 1.25em; /* 20 */
   height: 1.25em; /* 20 */
   background-color: #fff;

   -webkit-animation: imagelightbox-loading .5s ease infinite;
   -moz-animation: imagelightbox-loading .5s ease infinite;
   -o-animation: imagelightbox-loading .5s ease infinite;
   animation: imagelightbox-loading .5s ease infinite;
}

@-webkit-keyframes imagelightbox-loading {
	from { opacity: .5; -webkit-transform: scale( .75 ); }
	50% { opacity: 1; -webkit-transform: scale( 1 ); }
	to { opacity: .5; -webkit-transform: scale( .75 ); }
}   
@-moz-keyframes imagelightbox-loading {
	from { opacity: .5; -moz-transform: scale( .75 ); }
	50% { opacity: 1; -moz-transform: scale( 1 ); }
	to { opacity: .5; -moz-transform: scale( .75 ); }
}
@-o-keyframes imagelightbox-loading {
	from { opacity: .5; -o-transform: scale( .75 ); }
	50% { opacity: 1; -o-transform: scale( 1 ); }
	to { opacity: .5; -o-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading {
	from { opacity: .5; transform: scale( .75 ); }
	50% { opacity: 1; transform: scale( 1 ); }
	to { opacity: .5; transform: scale( .75 ); }
}

/* lightbox overlay */
#imagelightbox-overlay {
   background-color: #383838;
   background-color: rgba( 0, 0, 0, .8 );
   position: fixed;
   z-index: 994;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

/* close button */
#imagelightbox-close {	  
   position: fixed;
   z-index: 999;
   top: 2.5em; /* 40 */
   right: 2.5em; /* 40 */ 
}

#imagelightbox-close i {	  
	display: block;
	background: #fff;
	padding: 10px;
	border-radius: 100%;

	-webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */
	-moz-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */
	box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */
}
a#imagelightbox-close { color: #333; }
a#imagelightbox-close:hover, a#imagelightbox-close:focus { color: #4d590d; }

/* lightbox caption */
#imagelightbox-caption {
	text-align: center;
	color: #fff;
	background-color: #000;
	position: fixed;
	z-index: 999;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.625em; /* 10 */
}

#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption {
	-webkit-animation: fade-in .25s linear;
	-moz-animation: fade-in .25s linear;
	-o-animation: fade-in .25s linear;
	animation: fade-in .25s linear;
}

@-webkit-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-moz-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-o-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media only screen and (max-width: 41.250em) { /* 660 */

	#container	{ width: 100%; }
	#imagelightbox-close	{
		top: 1.25em; /* 20 */
		right: 1.25em; /* 20 */
	}

}