/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {background:url(../img/wall.png); font-family: 'Basic', sans-serif;}
a {text-decoration: none;}
a, a:hover, a:active, a:focus {outline:0;}
.content {max-width: 960px; margin: auto;}
h1, h2, h3, h4, h5, h6 {font-family: 'Noto Sans', sans-serif;}

header {background: #fff; padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 999;
-webkit-box-shadow: #666 0px 2px 5px;
-moz-box-shadow: #666 0px 2px 5px;
box-shadow: #666 0px 2px 5px;
}
header #logo img {max-width: 350px; height: auto; float:left;}
nav {float: right; width: 590px; text-transform: uppercase; margin-top: 25px; font-family: 'Noto Sans', sans-serif;}
nav ul {margin: 0; padding: 0; float: right;}
nav ul li {display: inline-block; background: url(../img/bullet.png) left 10px no-repeat; padding-left: 14px; margin-left: 5px}
nav ul li a {color: #666666; text-align: left; font-weight: bold; font-size: 0.95em}
nav ul li:first-child {padding-left: 0; background: none; margin-left: 0}
nav ul li a:hover {color: #FF9933; }
.content {min-width: 960px;}

#video {background: #e2e2e2 url(../img/bg2.jpg) center center no-repeat; height: 450px; margin-top: 91px; position: relative; text-align: center;}
#video {text-align: right;}/*fix para acomodar el texto del slogan*/
#video .slogan {margin-top: 180px}
#video .video-btn {
    margin-right: 180px;
    margin-top: 20px;
    width: 100px;
}

#description {background: #FF9933; color: #fff; padding: 10px 0; position: relative; text-align: left; font-size: 1.2em}
#description .content {max-width: 700px}
#soluciones .arrow {margin-top: 20px}
#nosotros .arrow {margin-top: 50px}
/*
.arrow { width: 66px; height: 66px; background: url(../img/arrow-white.png) center center no-repeat; display: inline-block;}
.arrow a {display: block; width: 66px; height: 66px; text-indent: -500px; overflow: hidden;}
*/
.arrow {height: 66px; width: 100%; text-align: center;}
.arrow a {display: block; width: 66px; height: 66px; text-indent: -500px; overflow: hidden; background: url(../img/arrow-white.png) center center no-repeat; display: inline-block;}
#description .arrow {float: left; width: 66px; margin-right: 20px}

#nosotros {}
#nosotros .content {max-width: 700px; padding: 100px 0; min-width: 700px;}
#nosotros .bg {background: #333333; color: #fff; padding: 20px; position: relative;}
#nosotros .nosotros-menu {margin: 0; padding: 0; float: left; padding-right: 40px; margin-right: 40px; border-right: solid 1px #fff;}
#nosotros .nosotros-menu li {display: block; border: solid 1px #fff; text-align: right; padding: 8px; margin-bottom:15px; cursor: pointer;}
#nosotros .nosotros-menu li:last-child {margin-bottom: 0}
#nosotros .nosotros-menu li:hover {background: #FF9933}
#nosotros .textos { padding-top: 15px; font-size: 0.8em; line-height: 1.8em; float: left; width: 500px; height: 280px;}

#mision, #historia, #logros, #sedes {display: none;}


.cajas {height: 300px; overflow: hidden;}

.cajas .bg {background: url(../img/bg-fake.jpg)  center center repeat fixed; height: 600px; margin-top: -100px;}
.cajas .bg2 {background: url(../img/bg3.jpg)  center center repeat fixed; height: 600px; margin-top: -100px;}

#productos {background: #fff; padding: 150px 0; position: relative;}
#productos .content {max-width: 900px; text-align: center;}
#productos p {max-width: 600px; margin: auto}
#productos .ls-wrapper .ls-nav-left-arrow, #productos .ls-wrapper .ls-nav-right-arrow {margin-top: 200px}

#beneficios {color: #fff; padding: 150px 0 50px 0; text-align: center; position: relative;}
#beneficios h2 {color: #333; border: 1px solid #333; display: block; padding: 3px 5px; width: 25%; margin: auto;}
#beneficios h3 {display: block; color: #333; text-transform: uppercase;}
#icons div a {display: block; color: #fff}
#icons div a {background: #333; height: 60px; width: 60px; padding: 30px; display: inline-block; margin: 0 5px; position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

#icons div a img {height: 60px;}
#icons div a span {width: 100px; position: absolute; display: block; bottom: -30px; left: 10px; font-family: 'Noto Sans', sans-serif; font-weight: bold; text-transform: uppercase; font-size: 0.9em}
#icons div a:hover {background: #FF9933}
.usuario, .constructor {width: 50%; float: left; padding: 50px 0 100px 0; margin-bottom: 20px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}
 .usuario {border-right: 1px solid #333;}
 #beneficios .info {display: inline-block; padding: 10px; text-transform: uppercase; color: #fff; background: #333;
 -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#soluciones {padding: 100px 0; color:#fff; text-align: center; position: relative;}
#soluciones .slider {background: #333; width: 100%; height: 200px}
#soluciones .alignL, #soluciones .alignR {float: left; width: 50%; padding: 20px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}
#soluciones .alignL {border-right: 1px solid #fff; text-align: right; padding: 70px 20px;}
#soluciones .alignL li {margin-bottom: 10px}
#soluciones .alignR {text-align: left;}
#soluciones .fixpadding {padding: 0}
#soluciones h1 {border: 1px solid #fff; display: inline-block; padding: 3px 5px; text-transform: uppercase; font-size: 1.5em}
#soluciones .ls-wrapper .ls-nav-left-arrow {margin-top: 120px; background: url("../img/arrowb.png") no-repeat scroll left top}
#soluciones .ls-wrapper .ls-nav-right-arrow {margin-top: 120px; background: url("../img/arrowb.png") no-repeat scroll right top}


footer {background: #fff; padding: 8px 0;}
.social {height: 46px; float: left; margin-top: 25px}
.social a {height: 46px; width: 46px; background: url(../img/social_icons.png) left top; display: inline-block; text-indent: -200px; overflow: hidden;}
.social .twitter {background-position: right top; width: 50px;}

.social .skype {width: auto; text-indent: 0; background: no-repeat; height: 46px; margin-left: 20px; padding-left:20px; border-left: solid 1px #333;}
.social .skype .skype-txt {padding-top: 13px; display: inline-block;}
.social .skype .skype-icon {background: url(../img/social_icons.png) -49px top; display: block; float: left; margin-right: 15px; height: 46px; width: 46px}
.social a.skype {color: #666; text-decoration: none;}
.social a.skype:hover {color: #FF9933}

.social .face:hover {background-position: left bottom;}
.social .skype:hover .skype-icon {background-position: -49px bottom;}
.social .twitter:hover {background-position: right bottom;}

.social a.bolsaT  {height: 36px; padding-top: 10px; width: auto; background: none; display: inline-block; text-indent: 0; text-transform: uppercase;}
.bolsaT {height: 46px; margin-left: 20px; padding-left:20px; border-left: solid 1px #333;}
a.bolsaT {color: #666; text-decoration: none;}
a.bolsaT:hover {color: #FF9933}

.endeavor {float: right; text-align: center;}

#contacto {padding: 50px 0 120px 0; color: #fff}
#contacto input, #contacto textarea {background: #CCCCCC; border: none; padding: 5px; width: 280px; color: #666}
#contacto input.send {background: #333333; float: right; color: #fff; width: auto; padding: 5px 15px; margin-bottom: 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}
#contacto input.send:hover {background: #FF9933}
form {display: block; float: left;}
#contacto .mailtxt {text-align: right; color: #333; margin-top: 2px;}

#sedes-ubicacion {width: 630px; float: right; margin-top: 20px}
#sedes-ubicacion h3 {font-weight: normal; margin-top: 0; text-transform: uppercase; font-size: 1em}
.sede {width: 30%; float: left; margin: 0 3% 15px 0}
#contacto .sede p {color: #333; text-transform: uppercase; margin: 0; font-size: 0.8em}

.liquid-slider div img {max-width: 100%}

/*FIXES PARA PRELANZAMIENTO*/

#beneficios .info {display: none;}
#soluciones .alignL.fix ul {list-style: none; }
.error {max-width: 280px; color: red; text-align: right;}
.complete {max-width: 280px; color: green; text-align: right;}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}