body, html {
    font-family:"avenir";
    height:100%;
        appearance:none;
    -moz-appearance:none; /* Firefox */
     -webkit-appearance:none; /* Safari and Chrome */
}
.clean {
    clear:both;
}
#menu-phone,#menu-phone2{
    position: fixed;
    float: left;
    display: block;
    background: #fff;
    z-index: 999;
    width: 100%;
    box-shadow: 0 1px 1px rgba(3,3,3,.08);
    top:-140px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#menu-phone.new-toping,#menu-phone2{
    top:0;
}
#menu-phone a,#menu-phone2 a{
     width: 100%;
    text-align: center;
    position: relative;
    float: left;
    font-size: 0.9375em;
    color: #FFFFFF;
    font-family: "oswald";
}
#menu-phone a#logo-mobile,#menu-phone2 a#logo-mobile{
    padding: 8px 0;
}
#menu-phone a#logo-mobile img,#menu-phone2 a#logo-mobile img{
width: 224px;
}
#menu-phone .topper,#menu-phone2 .topper{
    overflow: hidden;
    position: relative;
    height: 35px;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
}
.line{
    width: 60%;
    border-bottom: 3px solid #fff;
    margin: 4px auto;
}
#menu-phone #menu-number,#menu-phone2 #menu-number{
    width: 40%;
    padding: 11px 0;
    float: left;
    text-align: center;
    color: #bccad3;
    position: relative;
    font-size: 14px;
    letter-spacing: 1px;
}
#menu-number .fa, #menu-number2 .fa{
    color: #fff;
}
#menu-phone #menu-nav,#menu-phone #menu-user,#menu-phone2 #menu-nav,#menu-phone2 #menu-user{
    width: 10%;
    border-right: 1px solid #fff;
    cursor: pointer;
    padding: 5px 0;
    float: left;
    text-align: center;
    height: 100%;
}
#menu-phone #menu-user,#menu-phone2 #menu-user{
    padding-top: 7px;
}
#menu-option,#menu-option2{
    display: none;
    background: rgba(0, 0, 0,0.6);
    width: 100%;
    z-index: 988;
    position: relative;
    float: left;
    padding: 0 0 0;
    left: 0;
    font-size: 0.75em;
    box-shadow: 0 1px 1px rgba(3,3,3,.08);
}
#menu-option ul,#menu-option2 ul{
    width: 100%;
    margin: 0 auto;
}
#menu-option ul li,#menu-option2 ul li{
    width: 100%;
    float: left;
    background: #fff;
    text-align: center;
    margin: 0;
}
#menu-option ul li .fa,#menu-option2 ul li .fa{
    font-size: 16px;
    line-height: 22px;
}
#menu-option ul li:nth-child(odd),#menu-option2 ul li:nth-child(odd) { 
    background: #EEE;
}
#menu-option ul li a,#menu-option2 ul li a{
    color: #444;
    font-family: "oswald";
    padding:6px 0;
    display: block;
    font-size: 0.8em;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#menu-phone ul li img,#menu-phone2 ul li img{
    padding-top: 2px;
}
#touche{
    display: block;
    text-align: center;
    font-family: "oswald";
    margin-bottom: 20px;
    color: #333;
    float: left;
    width: 100%;
}
.incorrect{
    width: 96%;
    color: #fb0000;
    padding: 2px 0;
    margin: 2px;
    background: #fbcfcf;
    text-align: center;
    position: relative;
    border: 1px solid #fb0000;
    z-index: 888;
    font-family: "avenir";
    font-size: 12px;
}
.incorrect2{
    width: 99%;
    color: #fb0000;
    padding: 2px 0;
    margin: 2px;
    background: #fbcfcf;
    text-align: center;
    position: relative;
    border: 1px solid #fb0000;
    z-index: 888;
    font-family: "avenir";
    font-size: 12px;
}
.webkit{
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../imgs/portada-10.jpg) center center;
    background-size: cover;
    text-align: center;
}
#container #logo{
    width: 30%;
    max-width: 525px;
    margin-top: 200px;
}
#container p {
    font-family: "avenir";
    font-size: 50px;
    color: #fff;
    width: 45%;
    line-height: 60px;
    margin: 40px auto 0 auto;
    letter-spacing: 2px;
    text-align: center;
    color: #fff;
}
.mouse {
height: 20px;
    width: 25px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    border: 2px solid #1e2c35;
    z-index: 987;
    text-align: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1e2c35;
    opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.mouse.sh {
    opacity: 1;
}
.mouse span{
    display:none;
}
.mouse .wheel {
    color: #f8b912;
    margin: 5px;
    position: relative;
    -webkit-animation: movement 0.7s infinite;
    -moz-animation: movement 0.7s infinite;
    -ms-animation: movement 0.7s infinite;
    -o-animation: movement 0.7s infinite;
    animation: movement 0.7s infinite;
    font-size: 12px;
}
@-webkit-keyframes movement {
    0%{ margin-top: 4px; }
    50%{ margin-top: 7px;}
    100%{ margin-top: 4px;}
}
@-moz-keyframes movement {
    0%{ margin-top: 4px; }
    50%{ margin-top: 7px;}
    100%{ margin-top: 4px;}
}
@-ms-keyframes movement {
    0%{ margin-top: 4px; }
    50%{ margin-top: 7px;}
    100%{ margin-top: 4px;}
}
@-o-keyframes movement {
    0%{ margin-top: 4px; }
    50%{ margin-top: 7px;}
    100%{ margin-top: 4px;}
}
keyframes movement {
    0%{ margin-top: 4px; }
    50%{ margin-top: 7px;}
    100%{ margin-top: 4px;}
}
.mouse:hover .wheel {
    -webkit-animation: movement 0.3s infinite;
    -moz-animation: movement 0.3s infinite;
    -ms-animation: movement 0.3s infinite;
    -o-animation: movement 0.3s infinite;
    animation: movement 0.3s infinite;
}
#crossline30 .info-right p.correct,#admin-container p.correct, p.correct{
    width: 95%;
    color: #66B418;
    padding: 10px 0;
    margin: 5px 2.5% 20px;
    background: #E5FBCF;
    text-align: center;
    position: relative;
    border: 1px solid #66B418;
    z-index: 888;
    border-radius: 10px;
}
#admin-container p.incorrect{
    width: 100%;
    color: #fb0000;
    padding: 10px 0;
    margin: 5px 0 20px;
    background: #fbcfcf;
    text-align: center;
    position: relative;
    border: 1px solid #fb0000;
    z-index: 888;
    border-radius: 10px;
}
.up{
position: fixed;
    bottom: 25px;
    right: -150px;
    z-index: 999;
    font-family: "oswald";
    color: #444;
    font-size: 12px;
    text-align: center;
    width: 20%;
    display: block;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
     -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
    opacity: 0;
}
.up.new-top4{
    opacity: 1;
}
.up .fa{
    color: #DA261D;
     -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.up:hover .fa{
    color: #DA261D;
    margin-right: 20px;
}
a[href^=tel]{
    color:inherit;
    text-decoration:none;
}
@font-face {
    font-family: "josefin";
    src:url(../font/JosefinSans-Light.ttf) format("truetype");
}
@font-face {
    font-family: "oswald";
    src:url(../font/Oswald-Regular.ttf) format("truetype");
}
@font-face {
    font-family: "avenir";
    src:url(../font/AvenirNextLTPro-Regular.ttf) format("truetype");
}
@font-face {
    font-family: "signika";
    src:url(../font/Signika-Semibold.ttf) format("truetype");
}
#container0, #container1, #container2, #container3, #container4, #container5, #container6, #container7, #container8, #container9, #container10, #container11, #container12, #container13, #container14, #container15, #container16, #container17, #container18, #container19, #container20, #container21, #container22, #container23, #container24, #container25, #container26, #container27, #container28, #container29,#container30,.container31,#container32,#container33{
    width:100%;
    float:left;
    min-width:100%;
    padding:20px 0;
}
#crossline0, #crossline1, #crossline2, #crossline3, #crossline4, #crossline5, #crossline6, #crossline7, #crossline8, #crossline9, #crossline10, #crossline11, #crossline12, #crossline13, #crossline14, #crossline15, #crossline16, #crossline17, #crossline18, #crossline19, #crossline20, #crossline21, #crossline22, #crossline23, #crossline24, #crossline25, #crossline26, #crossline27, #crossline28, #crossline29,#crossline30,#crossline31,#crossline32,#crossline33{
    width:100%;
    margin:0 auto;
}
#crossline0 ul li a.budget-now {
display: block;
    color: #fff;
    margin-left: 10px;
    text-align: center;
    padding: 0;
    border-radius: 5px;
    position: relative;
    font-family: "oswald";
    letter-spacing: 1px;
    font-size: 12px;
    z-index: 888;
    margin-top: 11.5px;
    width: 200px;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    overflow: hidden;
    border: 1px solid #f8b912;
}
.btn-left {
    width: 25%;
    float: left;
    position: relative;
    padding: 8px 0;
}
.btn-left:before {
    content: '';
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -10px;
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    transform: skew(35deg);
    background: #ffffff;
    transition: all .3s ease;
}
.btn-left .fa {
    position: relative;
    z-index: 10;
    margin-right: 10px;
    font-size: 16px;
    color: #f8b912;
}
.btn-right{
    width: 75%;
    float: left;
    padding: 10px 0;
}
#container1 .apply-now {
    width: 30%;
    float: right;
    font-size: 16px;
    overflow: hidden;
    border-radius: 5px;
    letter-spacing: 1px;
    font-family: "oswald";
    color: #000;
    margin: 7.5px 35%;
    -webkit-animation: efectoweb 5s infinite;
    -moz-animation: efectoweb 5s infinite;
    -ms-animation: efectoweb 5s infinite;
    -o-animation: efectoweb 5s infinite;
    animation: efectoweb 5s infinite;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
}
#container1 .apply-now:hover {
    color: #333;
}
#container1 .apply-now .btn-left {
    width: 25%;
    float: left;
    position: relative;
    padding: 9px 0;
}
#container1 .apply-now .btn-left:before {
    content: '';
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    transform: skew(35deg);
    background: transparent;
}
#container1 .apply-now .btn-left .fa {
    position: relative;
    z-index: 10;
    margin-right: 10px;
    font-size: 16px;
    color: #fff;
    -webkit-animation: efectoweb 5s infinite;
    -moz-animation: efectoweb 5s infinite;
    -ms-animation: efectoweb 5s infinite;
    -o-animation: efectoweb 5s infinite;
    animation: efectoweb 5s infinite;
}
#container1 .apply-now .btn-right{
width: 70%;
    float: left;
    padding: 9px 0;
}
@-webkit-keyframes efectoweb{
    0%{color: #000;}
    5%{color: #fff;}
    10%{color: #000;}
    15%{color: #fff;}
    20%{color: #000;}
    25%{color: #fff;}
    100%{color: #fff;}
    }
@-moz-keyframes efectoweb{
    0%{color: #000;}
    5%{color: #fff;}
    10%{color: #000;}
    15%{color: #fff;}
    20%{color: #000;}
    25%{color: #fff;}
    100%{color: #fff;}
    }
@-o-keyframes efectoweb{
    0%{color: #000;}
    5%{color: #fff;}
    10%{color: #000;}
    15%{color: #fff;}
    20%{color: #000;}
    25%{color: #fff;}
    100%{color: #fff;}
    }
@-ms-keyframes efectoweb{
    0%{color: #000;}
    5%{color: #fff;}
    10%{color: #000;}
    15%{color: #fff;}
    20%{color: #000;}
    25%{color: #fff;}
    100%{color: #fff;}
    }
@keyframes efectoweb{
    0%{color: #000;}
    5%{color: #fff;}
    10%{color: #000;}
    15%{color: #fff;}
    20%{color: #000;}
    25%{color: #fff;}
    100%{color: #fff;}
    }
a.bt {
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: 0;
    border-radius: 5px;
    position: relative;
    font-family: "oswald";
    letter-spacing: 1px;
    font-size: 12px;
    z-index: 888;
    width: 220px;
    margin: 0 auto;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    overflow: hidden;
    border: 1px solid #f8b912;
}
a.bt:hover {
    color: #333;
}
a.bt .bt-left {
    width: 25%;
    float: left;
    position: relative;
    padding: 8px 0;
}
a.bt .bt-left:before {
    content: '';
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -10px;
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    transform: skew(35deg);
    background: #ffffff;
    transition: all .3s ease;
}
a.bt .bt-left .fa {
    position: relative;
    z-index: 10;
    margin-right: 10px;
    font-size: 16px;
    color: #f8b912;
}
a.bt .bt-right{
    width: 75%;
    float: left;
    padding: 10px 0;
}
.employs a.bt .bt-left {
    width: 25%;
    float: left;
    position: relative;
    padding: 12px 0;
}
.employs a.bt .bt-left:before {
    content: '';
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -12px;
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    transform: skew(35deg);
    background: #ffffff;
    transition: all .3s ease;
}
.employs a.bt .bt-right {
    width: 75%;
    float: left;
    padding: 12px 0;
    font-size: 16px;
}
.titles{
    width: 100%;
    position: relative;
}
.number-title{
    width: 10%;
    font-size: 55px;
    text-align: center;
    display: block;
    border-right: 4px solid #f6bb19;
    position: relative;
    font-family: "oswald";
    top: 0;
    color: #333;
    left: 0;
    float: left;
    margin: 0 1%;
}
.title{
    text-align: left;
    margin-bottom: 10px;
    color: #333;
    letter-spacing: 2px;
    position: relative;
    font-family: "avenir";
    text-transform: uppercase;
    font-size: 25px;
    width: 75%;
    float: left;
}
.semi-title{
    color: #444;
    font-size: 14px;
    margin-bottom: 0px;
    font-family: "oswald";
    position: relative;
    letter-spacing: 2px;
    width: 75%;
    padding: 8px 0 5px 0;
    float: left;
}
p.text-section{
font-family: "josefin";
    color: #666;
    text-align: left;
    line-height: 30px;
    margin-bottom: 30px;
    font-size: 18px;
    letter-spacing: 1px;
    margin-top: 10px;
    float: left;
    width: 95%;
    margin: 10px 2.5% 30px;
}
#menutwo{
display: none;
}
#menutwo.ss{
    opacity: 1;
}
#menutwo .leds{
    position: absolute;
    z-index: 8;
    top: 5px;
    left: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 8;
}
#menutwo ul li:hover .leds,#menutwo #leds1.leds.select,#menutwo #leds2.leds.select,#menutwo #leds3.leds.select,#menutwo #leds4.leds.select{
    background: url(../imgs/led-pequeno.png) center center;
    -webkit-animation:leds 1s infinite;
    -moz-animation:leds 1s infinite;
    -ms-animation:leds 1s infinite;
    -o-animation:leds 1s infinite;
    animation:leds 1s infinite;
}
@-webkit-keyframes leds {
 0% {opacity: 0.5;}
 50% {opacity: 1}
 100% {opacity: 0.5;}
}
@-moz-keyframes leds {
 0% {opacity: 0.5;}
 50% {opacity: 1}
 100% {opacity: 0.5;}
}
@-ms-keyframes leds {
 0% {opacity: 0.5;}
 50% {opacity: 1}
 100% {opacity: 0.5;}
}
@-o-keyframes leds {
 0% {opacity: 0.5;}
 50% {opacity: 1}
 100% {opacity: 0.5;}
}
@keyframes leds {
 0% {opacity: 0.5;}
 50% {opacity: 1}
 100% {opacity: 0.5;}
}
#menutwo ul{
    position: absolute;
    color: #FFF;
    z-index: 98;
    height: 220px;
    top: 42px;
    left: -6px;
}
#menutwo ul li {
    text-align: left;
    letter-spacing: 1px;
    margin: 34px 0;
    text-transform: uppercase;
    font-size: 13px;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    padding: 0;
    display: block;
}
#menutwo ul li a.mt1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid #f8a609;
    z-index: 900;
}
#menutwo ul li a.mt2 {
font-family: "oswald";
    display: block;
    font-size: 12px;
    opacity: 0;
    color: #485558;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    left: 20px;
    text-transform: capitalize;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#menutwo ul li:hover a.mt2,#menutwo ul li a#men1.mt2.select,#menutwo ul li a#men2.mt2.select,#menutwo ul li a#men3.mt2.select,#menutwo ul li a#men4.mt2.select  {
    font-family: "oswald";
    display: block;
    font-size: 12px;
    color: #485558;
    position: absolute;
    top: 50%;
    left: 18px;
    opacity: 1;
}
#menutwo ul li.select a.mt2{
    font-family: "oswald";
    display: block;
    font-size: 12px;
    color: #485558;
    position: absolute;
    top: 50%;
    left: 18px;
    opacity: 1;
}
#menutwo ul li.select .leds{
    background: url(../imgs/led-pequeno.png) center center;
    -webkit-animation:leds 1s infinite;
    -moz-animation:leds 1s infinite;
    -ms-animation:leds 1s infinite;
    -o-animation:leds 1s infinite;
    animation:leds 1s infinite;
}
#container30 img.apararecer{
    -webkit-animation: showAnim 0.5s ease-in 0s both;
    -moz-animation: showAnim 0.5s ease-in 0s both;
    -ms-animation: showAnim 0.5s ease-in 0s both;
    -o-animation: showAnim 0.5s ease-in 0s both;
    animation: showAnim 0.5s ease-in 0s both;
}
.ng-hide-add{
    -webkit-animation: hideAnim 0.5s ease-in 0s both;
    -moz-animation: hideAnim 0.5s ease-in 0s both;
    -ms-animation: hideAnim 0.5s ease-in 0s both;
    -o-animation: hideAnim 0.5s ease-in 0s both;
    animation: hideAnim 0.5s ease-in 0s both;
}

@-webkit-keyframes hideAnim{
    0%{ opacity: 1; }
    100%{ opacity: 0;}
}
@-moz-keyframes hideAnim{
    0%{ opacity: 1; }
    100%{ opacity: 0;}
}
@-ms-keyframes hideAnim{
    0%{ opacity: 1; }
    100%{ opacity: 0;}
}
@-o-keyframes hideAnim{
    0%{ opacity: 1; }
    100%{ opacity: 0;}
}
@keyframes hideAnim{
    0%{ opacity: 1; }
    100%{ opacity: 0;}
}
.ng-hide-remove {
    -webkit-animation: showAnim 0.5s ease-in 0s both;
    -moz-animation: showAnim 0.5s ease-in 0s both;
    -ms-animation: showAnim 0.5s ease-in 0s both;
    -o-animation: showAnim 0.5s ease-in 0s both;
    animation: showAnim 0.5s ease-in 0s both;
}

@-webkit-keyframes showAnim{
    0%{ opacity: 0; }
    100%{ opacity: 1;}
}
@-moz-keyframes showAnim{
    0%{ opacity: 0; }
    100%{ opacity: 1;}
}
@-ms-keyframes showAnim{
    0%{ opacity: 0; }
    100%{ opacity: 1;}
}
@-o-keyframes showAnim{
    0%{ opacity: 0; }
    100%{ opacity: 1;}
}
@keyframes showAnim{
    0%{ opacity: 0; }
    100%{ opacity: 1;}
}
#menu{
    position: fixed;
    z-index: 999;
    width: 100%;
    opacity: 0;
    top:-104px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    display: none;
}
#menu.new-top0 {
    top: 0;
    opacity: 1;
    -webkit-box-shadow: 0 20px 20px -25px rgba(0,0,0,0.9);
    -moz-box-shadow: 0 20px 20px -25px rgba(0,0,0,0.9);
    box-shadow: 0 20px 20px -25px rgba(0,0,0,0.9);
}
#menu-info{    
    text-align: right;
    border-top: 10px solid #1e2c35;
    background: #fff;
    overflow: hidden;
}
#scroll {
    position: absolute;
    z-index: 999;
    bottom: 20px;
    left: 50%;
    width: 60px;
    margin-left: -30px;
}
#menu-info #info{
    width: 800px;
    float: right;
    background: url(../imgs/cabecera.png);
    height: 32px;
    position: relative;
}
#menu-info #info::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 100%;
    width: 2000px;
    background: #1e2c35;
    height: 32px;
    z-index: 10;
    transition: background .3s ease;
}
#menu-info .fa{
    margin: 0 0 0 10px;
    color: #f8b912;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#menu-info a:hover .fa{
    color: #bccad3;
}
#menu-info p, #menu-info a {
    display: inline-block;
    color: #bccad3;
    font-family: "avenir";
    margin: 0 0 0 0px;
    font-size: 13px;
}
#menu-info a.social {
    margin: 0;
}
#container0{
    padding: 0;
    background: #fff;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#container0 #logo{
    height: 63px;
    margin: 5px 0;
    position: absolute;
    top: -23px;
    left: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#container0 #logo.new-top5{
    opacity: 1;
}
#crossline0{
    position: relative;
}
#crossline0 ul{
    width: 80%;
    float: right;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
}
#crossline0 ul li a{
    width: auto;
    padding: 24px 15px;
    float: right;
    display: block;
    font-size: 12px;
    color: #333;
    text-transform: uppercase;
    font-family: "oswald";
    letter-spacing: 1px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    z-index: 888;
}
#crossline0 ul li a:hover{
    color:  #666;
}
#crossline0 ul li a span{
    position: relative;
    z-index: 888;
}
#crossline0 ul li a:before{
    border-bottom: 1px solid #f8b912;
    content: "";
    left: 0;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    width: 0%;
    position: absolute;
    z-index: 333;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#crossline0 ul li a:hover:before{
    width: 100%;
}
#crossline0 ul li a.budget-now:hover:before{
    display: none;
}
#crossline0 ul li a.budget-now:hover{
    color: #333;
}
#container0.new-top1{
    background: #fff;
    -webkit-box-shadow: 0 20px 20px -25px rgba(0,0,0,0.9);
    -moz-box-shadow: 0 20px 20px -25px rgba(0,0,0,0.9);
    box-shadow: 0 20px 20px -25px rgba(0,0,0,0.9);
}
#container0 #crossline0 ul li a.budget-now.new-top2{
    color: #fff;
}
#container1{
    height: 655px;
    width: 100%;
    position: relative;
    z-index: 997;
    text-align: center;
    padding: 0;
}
#framework-slider{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    overflow: hidden;
}
#container1 #firstbg{
    background: url(../imgs/fondos/tb/portada-1-tensol.jpg) center center;
    background-size: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left: -100%;
}
#container1 #firstbg.init{
    left: 0%;
}
#container1 #secondbg{
    background: url(../imgs/fondos/tb/portada-2-solar.jpg) center center;
    background-size: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:-100%;
}
#container1 .text{
    position: relative;
    width: 100%;
    top: 0;
    margin-top: 110px;
}
#container1 .logo-fix{
    text-align: center;
    width: 80%;
    max-width: 400px;
    margin-bottom: 10px;
}
#container1 #thirdbg{
    background: url(../imgs/fondos/tb/portada-3-fotovoltaica.jpg) center center;
    background-size: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left: -100%;
}
#container12 .opinions div.desvanecer{
    opacity:0;
    z-index:0;
    -webkit-transition: all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
}
#container12 .opinions div.aparecer{
    opacity:1;
    z-index:10;
    -webkit-transition: all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
}

.animate-if.ng-enter, .animate-if.ng-leave {
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;
}

.animate-if.ng-enter{
  opacity:0;
}
.animate-if.ng-leave.ng-leave-active {
  display: none;
}

.animate-if.ng-leave{
  display: none;
}
.animate-if.ng-enter.ng-enter-active {
  opacity:1;
}
.lineJA-1{
    -webkit-animation: line1Anim 2.5s ease-in 0s both;
    -moz-animation: line1Anim 2.5s ease-in 0s both;
    -ms-animation: line1Anim 2.5s ease-in 0s both;
    -o-animation: line1Anim 2.5s ease-in 0s both;
    animation: line1Anim 2.5s ease-in 0s both;
}
@-webkit-keyframes line1Anim{
    0%{ width: 0%; }
    33%{ width: 100%;}
    100%{ width: 100%;}
}
@-moz-keyframes line1Anim{
    0%{ width: 0%; }
    33%{ width: 100%;}
    100%{ width: 100%;}
}
@-ms-keyframes line1Anim{
    0%{ width: 0%; }
    33%{ width: 100%;}
    100%{ width: 100%;}
}
@-o-keyframes line1Anim{
    0%{ width: 0%; }
    33%{ width: 100%;}
    100%{ width: 100%;}
}
@keyframes line1Anim{
    0%{ width: 0%; }
    33%{ width: 100%;}
    100%{ width: 100%;}
}
.lineJA-2{
    -webkit-animation: line2Anim 2.5s ease-in 0s both;
    -moz-animation: line2Anim 2.5s ease-in 0s both;
    -ms-animation: line2Anim 2.5s ease-in 0s both;
    -o-animation: line2Anim 2.5s ease-in 0s both;
    animation: line2Anim 2.5s ease-in 0s both;
}
@-webkit-keyframes line2Anim{
    0%{ height: 0%; }
    33%{ height: 0%;}
    50%{ height: 100%;}
    100%{ height: 100%;}
}
@-moz-keyframes line2Anim{
    0%{ height: 0%; }
    33%{ height: 0%;}
    50%{ height: 100%;}
    100%{ height: 100%;}
}
@-ms-keyframes line2Anim{
    0%{ height: 0%; }
    33%{ height: 0%;}
    50%{ height: 100%;}
    100%{ height: 100%;}
}
@-o-keyframes line2Anim{
    0%{ height: 0%; }
    33%{ height: 0%;}
    50%{ height: 100%;}
    100%{ height: 100%;}
}
@keyframes line2Anim{
    0%{ height: 0%; }
    33%{ height: 0%;}
    50%{ height: 100%;}
    100%{ height: 100%;}
}
.lineJA-3{
    -webkit-animation: line3Anim 2.5s ease-in 0s both;
    -moz-animation: line3Anim 2.5s ease-in 0s both;
    -ms-animation: line3Anim 2.5s ease-in 0s both;
    -o-animation: line3Anim 2.5s ease-in 0s both;
    animation: line3Anim 2.5s ease-in 0s both;
}
@-webkit-keyframes line3Anim{
    0%{ width: 0%; }
    50%{ width: 0%;}
    83%{ width: 100%;}
    100%{ width: 100%;}
}
@-moz-keyframes line3Anim{
    0%{ width: 0%; }
    50%{ width: 0%;}
    83%{ width: 100%;}
    100%{ width: 100%;}
}
@-ms-keyframes line3Anim{
    0%{ width: 0%; }
    50%{ width: 0%;}
    83%{ width: 100%;}
    100%{ width: 100%;}
}
@-o-keyframes line3Anim{
    0%{ width: 0%; }
    50%{ width: 0%;}
    83%{ width: 100%;}
    100%{ width: 100%;}
}
@keyframes line3Anim{
    0%{ width: 0%; }
    50%{ width: 0%;}
    83%{ width: 100%;}
    100%{ width: 100%;}
}
.lineJA-4{
    -webkit-animation: line4Anim 2.5s ease-in 0s both;
    -moz-animation: line4Anim 2.5s ease-in 0s both;
    -ms-animation: line4Anim 2.5s ease-in 0s both;
    -o-animation: line4Anim 2.5s ease-in 0s both;
    animation: line4Anim 2.5s ease-in 0s both;
}
@-webkit-keyframes line4Anim{
    0%{ height: 0%; }
    83%{ height: 0%;}
    100%{ height: 100%;}
}
@-moz-keyframes line4Anim{
    0%{ height: 0%; }
    83%{ height: 0%;}
    100%{ height: 100%;}
}
@-ms-keyframes line4Anim{
    0%{ height: 0%; }
    83%{ height: 0%;}
    100%{ height: 100%;}
}
@-o-keyframes line4Anim{
    0%{ height: 0%; }
    83%{ height: 0%;}
    100%{ height: 100%;}
}
@keyframes line4Anim{
    0%{ height: 0%; }
    83%{ height: 0%;}
    100%{ height: 100%;}
}


.fromright{
    -webkit-animation: fromRightAnim 1.1s ease-in 0s both;
    -moz-animation: fromRightAnim 1.1s ease-in 0s both;
    -ms-animation: fromRightAnim 1.1s ease-in 0s both;
    -o-animation: fromRightAnim 1.1s ease-in 0s both;
    animation: fromRightAnim 1.1s ease-in 0s both;
}
@-webkit-keyframes fromRightAnim{
    0%{ left: 100%; }
    100%{ left: 0%;}
}
@-moz-keyframes fromRightAnim{
    0%{ left: 100%; }
    100%{ left: 0%;}
}
@-ms-keyframes fromRightAnim{
    0%{ left: 100%; }
    100%{ left: 0%;}
}
@-o-keyframes fromRightAnim{
    0%{ left: 100%; }
    100%{ left: 0%;}
}
@keyframes fromRightAnim{
    0%{ left: 100%; }
    100%{ left: 0%;}
}
.toleft{
    -webkit-animation: toLeftAnim 1.1s ease-in 0s both;
    -moz-animation: toLeftAnim 1.1s ease-in 0s both;
    -ms-animation: toLeftAnim 1.1s ease-in 0s both;
    -o-animation: toLeftAnim 1.1s ease-in 0s both;
    animation: toLeftAnim 1.1s ease-in 0s both;
}
@-webkit-keyframes toLeftAnim{
    0%{ left: 0%; }
    100%{ left: -100%;}
}
@-moz-keyframes toLeftAnim{
    0%{ left: 0%; }
    100%{ left: -100%;}
}
@-ms-keyframes toLeftAnim{
    0%{ left: 0%; }
    100%{ left: -100%;}
}
@-o-keyframes toLeftAnim{
    0%{ left: 0%; }
    100%{ left: -100%;}
}
@keyframes toLeftAnim{
    0%{ left: 0%; }
    100%{ left: -100%;}
}
.fromleft{
    -webkit-animation: fromLeftAnim 1.1s ease-in 0s both;
    -moz-animation: fromLeftAnim 1.1s ease-in 0s both;
    -ms-animation: fromLeftAnim 1.1s ease-in 0s both;
    -o-animation: fromLeftAnim 1.1s ease-in 0s both;
    animation: fromLeftAnim 1.1s ease-in 0s both;
}
@-webkit-keyframes fromLeftAnim{
    0%{ left: -100%; }
    100%{ left: 0%;}
}
@-moz-keyframes fromLeftAnim{
    0%{ left: -100%; }
    100%{ left: 0%;}
}
@-ms-keyframes fromLeftAnim{
    0%{ left: -100%; }
    100%{ left: 0%;}
}
@-o-keyframes fromLeftAnim{
    0%{ left: -100%; }
    100%{ left: 0%;}
}
@keyframes fromLeftAnim{
    0%{ left: -100%; }
    100%{ left: 0%;}
}
.toright{
    -webkit-animation: toRightAnim 1.1s ease-in 0s both;
    -moz-animation: toRightAnim 1.1s ease-in 0s both;
    -ms-animation: toRightAnim 1.1s ease-in 0s both;
    -o-animation: toRightAnim 1.1s ease-in 0s both;
    animation: toRightAnim 1.1s ease-in 0s both;
}
@-webkit-keyframes toRightAnim{
    0%{ left: 0%; }
    100%{ left: 100%;}
}
@-moz-keyframes toRightAnim{
    0%{ left: 0%; }
    100%{ left: 100%;}
}
@-ms-keyframes toRightAnim{
    0%{ left: 0%; }
    100%{ left: 100%;}
}
@-o-keyframes toRightAnim{
    0%{ left: 0%; }
    100%{ left: 100%;}
}
@keyframes toRightAnim{
    0%{ left: 0%; }
    100%{ left: 100%;}
}
#container1 #thirdbg .text{
    position: relative;
}
#container1 #thirdbg .mask{    
    background: rgba(44, 165, 175,0.1);
    background: transparent;
    background-size: 100% auto;
    padding-right: 175px;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
#container1 .view {
    width: 120px;
    cursor: pointer;
    height: 120px;
    display: block;
    position: relative;
    padding: 10px;
    margin: 0 auto;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#container1 .view a {
    text-align: center;
    font-family: "oswald";
    color: #ffffff;
    position: absolute;
    top: 50%;
    margin-top: -9px;
    left: 0;
    margin-left: 2px;
    font-size: 18px;
    width: 100%;
}
#container1 h2{
    font-family: "avenir";
    font-size: 30px;
    color: #fff;
    width: 100%;
    min-width: 100%;
    line-height: 35px;
    margin: 10px auto 0 auto;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 20px;
}
#container1 hr {
    width: 4%;
    border: 0;
    border-bottom: 1px solid #FFF;
    display: block;
    margin: 30px auto 30px auto;
}
#container1 h3{
    font-size: 18px;
    color: #fff;
    line-height: 25px;
    font-family: "josefin","raleway";
    margin-bottom: 20px;
    text-align: center;
    margin-bottom: 40px;
}
#container1 a:hover.btn:after {
    margin-top: -9px;
    opacity: 1;
}
#container1 #arrow-left{
    position: absolute;
    width: 38px;
    height: 14px;
    z-index: 889;
    left: 15px;
    top: inherit;
    bottom: 170px;
    opacity: 0.5;
    margin-top: -7px;
    background: url(../imgs/flecha-izquierda.png) no-repeat;
    -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#container1 #arrow-left:hover{
    opacity: 1;
}
#container1 #arrow-right{
    position: absolute;
    width: 38px;
    height: 14px;
    z-index: 889;
    right: 15px;
    top: inherit;
    bottom: 170px;
    opacity: 0.5;
    margin-top: -7px;
    background: url(../imgs/flecha-derecha.png) no-repeat;
        -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#container1 #arrow-right:hover{
    opacity: 1;
}
#container1 #discount{
    background:rgba(0,0,0,0.5);
    width: 100%;
    position: absolute;
    bottom: 0;
    color: #fff;
    padding:0;
    text-align: center;
    z-index: 999;
}
#container1 #discount p{
    font-size: 22px;
    font-family: "avenir";
    display: inline-block;
    float: left;
    margin-top: 14px;
    margin-left: 0;
    line-height: 22px;
    width: 100%;
}
#container1 .countdown{
    width: 100%;
    position: relative;
    background: #f5be05;
    height: 50px;
}
#container1 .countdown ul {
    width: 60%;
    float: left;
    margin: 0 20%;
    display: inline-block;
    background: transparent;
    position: relative;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 777;
}
#word-1,#word-2,#word-3{
    width: 0;
    color: #fff;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#word-1.sel,#word-2.sel,#word-3.sel{
    display: inline-block;
    opacity: 1;
    overflow: hidden;
    margin-bottom: -10px;
     -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#word-1.sel{
    width: 182px;
}
#word-2.sel{
    width: 158px;
}
#word-3.sel{
    width: 212px;
}
#word-1.nonsel,#word-2.nonsel,#word-3.nonsel{
    width: 0;
    opacity: 0;
    margin-bottom: -10px;
    overflow: hidden;
    display: inline-block;
    -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.Dnone {
    display: none !important;
}
.triangulo-bot {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #F5BE05;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    bottom: -10px;
    -webkit-animation: arrowbott 1.5s infinite;
    -moz-animation: arrowbott 1.5s infinite;
    -ms-animation: arrowbott 1.5s infinite;
    -o-animation: arrowbott 1.5s infinite;
    animation: arrowbott 1.5s infinite;
    display: block;
}
@-webkit-keyframes arrowbott {
    0% {bottom: -10px;}
    50%{bottom: -5px;}
    100% {bottom: -10px;}
}
@-moz-keyframes arrowbott {
    0% {bottom: -10px;}
    50%{bottom: -5px;}
    100% {bottom: -10px;}
}
@-o-keyframes arrowbott {
    0% {bottom: -10px;}
    50%{bottom: -5px;}
    100% {bottom: -10px;}
}
@-ms-keyframes arrowbott {
    0% {bottom: -10px;}
    50%{bottom: -5px;}
    100% {bottom: -10px;}
}
@keyframes arrowbott {
    0% {bottom: -10px;}
    50%{bottom: -5px;}
    100% {bottom: -10px;}
}
.triangulo-der {
    width: 0;
    height: 0;
    border-top: 35px solid transparent;
    border-left: 40px solid #F5BE05;
    border-bottom: 35px solid transparent;
    position: absolute;
    right: -40px;
    top: -10px;
    -webkit-animation: arrowtop 1s infinite;
    -moz-animation: arrowtop 1s infinite;
    -ms-animation: arrowtop 1s infinite;
    -o-animation: arrowtop 1s infinite;
    animation: arrowtop 1s infinite;
    display: none;
}
@-webkit-keyframes arrowtop {
    0% {right: -40px;}
    50%{right: -35px;}
    100% {right: -40px;}
}
@-moz-keyframes arrowtop {
    0% {right: -40px;}
    50%{right: -35px;}
    100% {right: -40px;}
}
@-o-keyframes arrowtop {
    0% {right: -40px;}
    50%{right: -35px;}
    100% {right: -40px;}
}
@-ms-keyframes arrowtop {
    0% {right: -40px;}
    50%{right: -35px;}
    100% {right: -40px;}
}
@keyframes arrowtop {
    0% {right: -40px;}
    50%{right: -35px;}
    100% {right: -40px;}
}
#container1 .countdown ul:before {
    display: none;
}
#container1 .countdown ul li {
    width: 23%;
    margin: 1%;
    float: left;
    padding: 5px 0;
    text-align: center;
}
#container1 .countdown ul li span.draw-number {
    display: block;
    font-family: "oswald";
    font-size: 25px;
    color: #000;
}
#container1 .countdown ul li span.draw-time {
    display: block;
    font-family: "oswald";
    font-size: 10px;
    color: #000;
}
#container2{
    background: url(../imgs/fondo-web.jpg);
    padding: 110px 0 80px;   
    position: relative;
}
#container2 #touch{
    top:0;
    left: 0;
    position: absolute;
}
#crossline2 ul{
   margin-bottom: 30px; 
   text-align: center;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}
#crossline2 ul li{
    width: 95%;
    max-width: 202px;
    float: none;
    margin: 0 auto;
    height: 400px;
    position: relative;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    margin-bottom: 30px;
    display: inline-block;
}
#crossline2 ul li:last-child{
    margin-right: auto;
}

#crossline2 ul li .sectionDown {
    top:0 !important;
}

#crossline2 ul li .section {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #FFFFFF;
    z-index: 888;
    color: #838383;
    top: -75%;
    text-align: center;
    font-family: "avenir";
    color: #141414;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    -o-transition: all 0.7s;
    transition: all 0.7s;
}
#crossline2 ul li:hover .section{
    top:0;
}
#crossline2 ul li .section p {
    display: block;
    padding: 20px 7px;
    font-size: 15px;
    position: relative;
    z-index: 777;
    color: #777;
    font-family: "josefin";
    letter-spacing: 2px;
    line-height: 18px;
    text-align: center;
    margin: 0 auto;
}
#crossline2 ul li .dpto img {
    position: relative;
    z-index: 888;
    margin-top: 140px;
    margin-bottom: 20px;
}
#crossline2 ul li .section .dpto-img{
    z-index: 779;
    margin-left: -28px;
    position: absolute;
    bottom: 58px;
    left: 50%;
}
#crossline2 ul li .section span.dpto-name{
    color: #333;
    text-align: center;
    font-family: "oswald";
    z-index: 779;
    width: 100%;
    position: absolute;
    bottom: 35px;
    left: 0;
    font-size: 14px;
}
#crossline2 ul li .section span.dpto-slide{
    color: #888;
    text-align: center;
    font-family: "avenir";
    z-index: 779;
    width: 100%;
    position: absolute;
    bottom: 15px;
    left: 0;
    font-size: 12px;
}
#crossline2 ul li .section .icon{
    color: #f8b912;
    position: absolute;
    left: 50%;
    margin-left: -7px;
    bottom: 50px;
    font-size: 14px;
}
#container7{
    background: #fff;
    padding: 100px 0;
    width: 100%;
    position: relative;    
    border-bottom: 1px solid #e2e2e2;
}
#container7 p.clas {
    color: #666;
    font-family: "josefin";
    letter-spacing: 2px;
    width: 95%;
    line-height: 25px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 30px;
}
#container7 .mask{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
}
#crossline7{
    position: relative; 
    width: 80%;
}
#container7  ul{
 width: 100%;
    float: right;
    position: relative;
    padding: 0;
    margin-top: 0;
}
#container7  ul .liner{
    display: none;
}
#container7  ul .line-1{
    display: none;
}
#container7  ul .line-2{
    display: none;
}
#container7  ul .line-3{
    display: none;
}
#container7  ul .line-4{
    display: none;
}
#container7  ul .line-5{
    display: none;
}
#container7  ul #solar-system{
    display: none;
}
#container7  ul #sun-system{
    display: none;
}
#container7  ul #sun-system img{
    display: none;
}
#crossline7 ul .led-yellow{
    display: none;
}
@-webkit-keyframes ledyellow {
 0% {width:20px;height:20px;top:17px;left:17px;}
 50% {width:54px;height:54px;top:0px;left:0px;}
 100% {width:20px;height:20px;top:17px;left:17px;}
}
@-moz-keyframes ledyellow {
 0% {width:20px;height:20px;top:17px;left:17px;}
 50% {width:54px;height:54px;top:0px;left:0px;}
 100% {width:20px;height:20px;top:17px;left:17px;}
}
@-ms-keyframes ledyellow {
 0% {width:20px;height:20px;top:17px;left:17px;}
 50% {width:54px;height:54px;top:0px;left:0px;}
 100% {width:20px;height:20px;top:17px;left:17px;}
}
@-o-keyframes ledyellow {
 0% {width:20px;height:20px;top:17px;left:17px;}
 50% {width:54px;height:54px;top:0px;left:0px;}
 100% {width:20px;height:20px;top:17px;left:17px;}
}
@keyframes ledyellow {
 0% {width:20px;height:20px;top:17px;left:17px;}
 50% {width:54px;height:54px;top:0px;left:0px;}
 100% {width:20px;height:20px;top:17px;left:17px;}
}
#container7 ul li{
    width: 70%;
    float: left;
    position: relative;
    text-align: center;
    margin: 0 15% 100px;
    z-index: 975;
}
#crossline14 .pre input,#crossline14 .pre select{
    width: 86%;
}
#crossline14 .pre select{
    width: 98%;
}
#crossline14 .pre textarea{
    width: 87%;
}
#container7 ul li span{
    font-size: 320px;
    color: #F2F4F6;
    position: absolute;
    left: 50%;
    margin-top: -35px;
    margin-left: -99px;
    font-family: "oswald";
}
#container7 ul li img{
    position: relative;
    z-index: 2;
    padding-top: 40px;
}
#container7 ul li h5{
    font-size: 14px;
    font-family: "avenir";
    margin: 20px 0 20px;
    position: relative;
    z-index: 777;
    color: #bbc9d2;
    width: auto;
    display: inherit;
    padding: 5px 0;
    background: #1e2c35;
}
#container7 ul li h5.illuminated{
    background: #e7e9ea;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    color: #fff;
    width: 50%;
    margin: 20px 25% 0;
    border: 0;
}
#container7 a.noilluminated{
    background: #e7e9ea;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    color: #fff;
    width: 40%;
    margin: 20px 30% 0;
    border: 1px solid #e7e9ea;
}
#container7 ul li p{
    font-size: 15px;
    position: relative;
    z-index: 777;
    color: #666;
    font-family: "josefin";
    letter-spacing: 2px;
    width: 100%;
    line-height: 20px;
    text-align: center;
   margin: 15px auto 0 auto;
}
#container7 span.metters {
display: block;
    font-size: 35px;
    text-align: center;
    color: #1e2c35;
    font-family: "oswald";
}
#container7 span.system {
    display: block;
    letter-spacing: 2px;
    font-size: 13px;
    color: #f99400;
    text-align: center;
    font-weight: 700;
    font-family: "oswald";
}
#container7 a{
    position: relative;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    float: left;
    margin-left: 40%;
    color: #ffffff;
    font-family: "oswald";
    line-height: 30px;
    margin-top: 20px;
    display: block;
    width: 40%;
    margin: 20px 30% 0;
    text-align: center;
    border: 1px solid #ffa14d;
    border-radius: 5px;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    overflow: hidden;
    z-index: 980;
}
#container7 a .fa{    
    font-size: 18px;
    margin-right: 8px;
}
.rounded-arrow {
    position: absolute;
    left: 0;
    right: 0;
    height: 25px;
    text-align: center;
    bottom: -25px;
    background-image: url("../imgs/border-round.png");
    background-position: top center;
    z-index: 999;
}
.rounded-arrow::before {
    content: '';
    height: 25px;
    display: block;
    position: absolute;
    left: 0;
    width: 50%;
    margin-left: -55px;
    background: #fff;
}
.rounded-arrow::after {
    content: '';
    height: 25px;
    display: block;
    position: absolute;
    right: 0;
    width: 50%;
    margin-right: -55px;
    background: #fff;
}
.rounded-arrow i{
    position: absolute;
    bottom: 0;
    left: 50%;
    font-size: 16px;
    margin-left: -4px;
    color: #fff;
    z-index: 999;
    -webkit-animation: arrow-mov 0.7s infinite;
    -moz-animation: arrow-mov 0.7s infinite;
    -ms-animation: arrow-mov 0.7s infinite;
    -o-animation: arrow-mov 0.7s infinite;
    animation: arrow-mov 0.7s infinite;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
@-webkit-keyframes arrow-mov {
    0% {bottom: 0px;}
    50%{bottom: -5px;}
    100% {bottom: 0px;}
}
@-moz-keyframes arrow-mov {
    0% {bottom: 0px;}
    50%{bottom: -5px;}
    100% {bottom: 0px;}
}
@-o-keyframes arrow-mov {
    0% {bottom: 0px;}
    50%{bottom: -5px;}
    100% {bottom: 0px;}
}
@-ms-keyframes arrow-mov {
    0% {bottom: 0px;}
    50%{bottom: -5px;}
    100% {bottom: 0px;}
}
@keyframes arrow-mov {
    0% {bottom: 0px;}
    50%{bottom: -5px;}
    100% {bottom: 0px;}
}
#crossline2 ul li .dpto {
    width: 100%;
    text-align: center;
    height: 90%;
    position: absolute;
    bottom: 0;
    z-index: 777;
}
#crossline2 ul li .dpto#sl-1{
    background:url(../imgs/dpto-01.jpg) center; 
    background-size:cover;
}
#crossline2 ul li .dpto#sl-2{
    background:url(../imgs/dpto-02.jpg) center; 
    background-size:cover;
}
#crossline2 ul li .dpto#sl-3{
    background:url(../imgs/dpto-03.jpg) center; 
    background-size:cover;
}
#crossline2 ul li .dpto#sl-4{
    background:url(../imgs/dpto-04.jpg) center; 
    background-size:cover;
}
#crossline2 ul li .dpto#sl-5{
    background:url(../imgs/dpto-05.jpg) center; 
    background-size:cover;
}
#crossline2 ul li .dpto p{
    color: #fff;
    text-align: center;
    font-family: "oswald";
    position: relative;
    z-index: 779;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#crossline2 ul li .dpto .frame{
    background: url(../imgs/puntos-op2.png);
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 778;
    opacity: 0.6;
}
#container3{
    padding: 110px 0 80px;
    background: url(../imgs/fondo-web.jpg);
}
#crossline3 ul {
    overflow: hidden;
    float: left;
    width: 60%;
    margin: 0 20%;
}
#crossline3 ul li{
    width: 24.6%;
    float: left;
    border-right: 0;
    margin: 0 0.2%;
}
#crossline3 ul li span{
color: #F6F6EE;
    display: block;
    text-align: center;
    font-family: "oswald";
    background: #f8b912;
    padding: 10px 0;
    cursor: pointer;
}
#crossline3 ul li span:hover{
    color: #1e2c35;
}
#crossline3 ul li span strong{
 display: block;
    font-size: 12px;
    margin-top: 5px;
}
#crossline3 ul li .fa{
    font-size: 25px;
}
#crossline3 .xplains{
    width: 60%;
    height: 1300px;
    position: relative;
    margin: 50px 20%;
    float: left;
}
#crossline3 .explain{
    width: 100%;
    position: absolute;
    top:0;
    left:0;
}
#crossline3 .explain .xp-top {
    background: #ffffff;
    width: 240px;
    height: 300px;
    position: relative;
    float: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    -webkit-animation: proim1 0.7s;
    -moz-animation: proim1 0.7s;
    -ms-animation: proim1 0.7s;
    -o-animation: proim1 0.7s;
    animation: proim1 0.7s;
}
@-webkit-keyframes proim {
    0%{ width: 0; }
    100%{ width: 300px;}
}
@-moz-keyframes proim {
    0%{ width: 0; }
    100%{ width: 300px;}
}
@-ms-keyframes proim {
    0%{ width: 0; }
    100%{ width: 300px;}
}
@-o-keyframes proim {
    0%{ width: 0; }
    100%{ width: 300px;}
}
keyframes proim {
    0%{ width: 0; }
    100%{ width: 300px;}
}
#crossline3 .explain .xp-down {
    background: #ffffff;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 250px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    -webkit-animation: proim2 0.7s;
    -moz-animation: proim2 0.7s;
    -ms-animation: proim2 0.7s;
    -o-animation: proim2 0.7s;
    animation: proim2 0.7s;
}
@-webkit-keyframes proim2 {
    0%{ width: 0; }
    100%{ width: 200px;}
}
@-moz-keyframes proim2 {
    0%{ width: 0; }
    100%{ width: 200px;}
}
@-ms-keyframes proim2 {
    0%{ width: 0; }
    100%{ width: 200px;}
}
@-o-keyframes proim2 {
    0%{ width: 0; }
    100%{ width: 200px;}
}
keyframes proim2 {
    0%{ width: 0; }
    100%{ width: 200px;}
}
#crossline3 .explain .xp-down img{
    position: absolute;
    right: 0;
    top: 0;
}
#crossline3 .explain .xp-top .xp-image1{
    background-size: cover;
    overflow: hidden;
    position: relative;
    width: 0%;
    height:300px;
    width: 100%;
    -webkit-animation: proimg  1.2s ;
    -moz-animation: proimg 1.2s ;
    -ms-animation: proimg 1.2s ;
    -o-animation: proimg 1.2s ;
    animation: proimg 1.2s ;
}
@-webkit-keyframes proimg {
    0%{ width: 0; }
    100%{ width: 100%;}
}
@-moz-keyframes proimg {
    0%{ width: 0; }
    100%{ width: 100%;}
}
@-ms-keyframes proimg {
    0%{ width: 0; }
    100%{ width: 100%;}
}
@-o-keyframes proimg {
    0%{ width: 0; }
    100%{ width: 100%;}
}
keyframes proimg {
    0%{ width: 0; }
    100%{ width: 100%;}
}
#crossline3 .explain .xp-top .xp-image1 .xp-image1 img{
   position: absolute;
   top: 0px;
   left: 0;
}
#crossline3 .explain .xp-top .xp-image1 .xp-image2 img{
   position: absolute;
   top: 0px;
   right: 0;
}
#crossline3 .explain .xp-down .xp-image2{
    background-size: cover;
    overflow: hidden;
    position: relative;
    height:250px;
    width: 100%;
    float: right;
    -webkit-animation: proton  1.2s ;
    -moz-animation: proton 1.2s ;
    -ms-animation: proton 1.2s ;
    -o-animation: proton 1.2s ;
    animation: proton 1.2s ;
}
@-webkit-keyframes proton {
    0%{ width: 0; }
    100%{ width: 100%;}
}
@-moz-keyframes proton {
    0%{ width: 0; }
    100%{ width: 100%;}
}
@-ms-keyframes proton {
    0%{ width: 0; }
    100%{ width: 100%;}
}
@-o-keyframes proton {
    0%{ width: 0; }
    100%{ width: 100%;}
}
keyframes proton {
    0%{ width: 0; }
    100%{ width: 100%;}
}
#crossline3 .explain#explain-1{
    width: 100%;
}
#crossline3 .explain#explain-2,#crossline3 .explain#explain-3,#crossline3 .explain#explain-4{
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#crossline3 .explain#explain-2.new-xp1,#crossline3 .explain#explain-3.new-xp1,#crossline3 .explain#explain-4.new-xp1{
    opacity: 1;
}
#crossline3 .explain#explain-2.new-xp2,#crossline3 .explain#explain-3.new-xp2,#crossline3 .explain#explain-4.new-xp2{
    opacity: 0;
}
#crossline3 .explain .explain-text{
width: 95%;
    float: right;
    color: #fff;
    margin-right: 2.5%;
}
#crossline3 .explain .explain-text hr{
    width: 40px;
    border: 0;
    border-bottom: 4px solid #f8b912;
    display: block;
    float: none;
    margin: 10px 0 30px;
}
.explain-text .fa {
    color: #f8b912;
}
#crossline3 .explain .explain-img {
    width: 95%;
    float: left;
    height: 500px;
    margin-left: 2.5%;
    position: relative;
}
#crossline3 .explain .explain-text h2{
   font-family: "oswald";
    color: #555;
    text-align: left;
    line-height: 25px;
    margin-bottom: 30px;
    font-size: 14px;
}
#crossline3 .explain .explain-text p{
    margin-bottom: 30px;
    width: 95%;
    color: #666;
    font-size: 16px;
    line-height: 20px;
    font-family: "josefin";
    letter-spacing: 1px;
    text-align: left;
}
#crossline3 .explain .explain-text h3 {
    text-align: left;
    font-size: 22px;
    letter-spacing: 2px;
    width: 97%;
    margin: 0;
    font-family: "avenir";
    padding: 15px 0 0;
    line-height: 40px;
    color: #141414;
}
#crossline3 .explain .explain-text p span {
    font-family: "avenir";
    color: #333;
    letter-spacing: 0;
    font-size: 15px;
}
#container4{
    position: relative;
    padding:0;
    overflow: hidden;
    height: 300px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#container4 #view {
    width: 120px;
    cursor: pointer;
    height: 120px;
    display: block;
    margin: 0 auto;
    position: absolute;
    padding: 10px;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -60px;
    z-index: 777;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#container4 #view.new-cl4{
    top: -100%;
}
#container4 #view p{
    text-align: center;
    font-family: "oswald";
    color: #ffffff;
    position: absolute;
    top: 50%;
    letter-spacing: 1px;
    margin-top: -9px;
    left: 0;
    margin-left: 2px;
    font-size: 18px;
    width: 100%;
}
#container4 #view .line-1,#container1 .view .line-1 {
     width: 75%;
    height: 75%;
    display: block;
    margin: 0 auto;
    border: 1px solid #fff;
    position: absolute;
    border-radius: 50%;
    left: 50%;
    margin-left: -37.5%;
    top: 50%;
    opacity: 0.5;
    margin-top: -36.5%;
    -webkit-animation: movementer 1s infinite;
    -moz-animation: movementer 1s infinite;
    -ms-animation: movementer  1s infinite;
    -o-animation: movementer  1s infinite;
    animation: movementer  1s infinite;
}
@-webkit-keyframes movementer {
    0%{ height:75%;width: 75%;top:50%;left: 50%; margin-left:-37.5%; margin-top: -37.5%;opacity: 0.5; }
    100%{ height:100%;width: 100%;top:0%;left: 0%; margin-left:0; margin-top: 0;opacity: 0;}
}
@-moz-keyframes movementer {
    0%{ height:75%;width: 75%;top:50%;left: 50%; margin-left:-37.5%; margin-top: -37.5%;opacity: 0.5; }
    100%{ height:100%;width: 100%;top:0%;left: 0%; margin-left:0; margin-top: 0;opacity: 0;}
}
@-ms-keyframes movementer {
    0%{ height:75%;width: 75%;top:50%;left: 50%; margin-left:-37.5%; margin-top: -37.5%;opacity: 0.5; }
    100%{ height:100%;width: 100%;top:0%;left: 0%; margin-left:0; margin-top: 0;opacity: 0;}
}
@-o-keyframes movementer {
    0%{ height:75%;width: 75%;top:50%;left: 50%; margin-left:-37.5%; margin-top: -37.5%;opacity: 0.5; }
    100%{ height:100%;width: 100%;top:0%;left: 0%; margin-left:0; margin-top: 0;opacity: 0;}
}
keyframes movementer {
    0%{ height:75%;width: 75%;top:50%;left: 50%; margin-left:-37.5%; margin-top: -37.5%;opacity: 0.5; }
    100%{ height:100%;width: 100%;top:0%;left: 0%; margin-left:0; margin-top: 0;opacity: 0;}
}
#container4 #view .line-2,#container1 .view .line-2{
    width: 75%;
    height: 75%;
    display: block;
    margin: 0 auto;
    border: 2px solid #fff;
    position: absolute;
    border-radius: 50%;
    left: 50%;
    margin-left: -37.5%;
    top: 50%;
    opacity: 0.5;
    margin-top: -36.5%;
    -webkit-animation: movementer 1.2s infinite;
    -moz-animation: movementer 1.2s infinite;
    -ms-animation: movementer  1.2s infinite;
    -o-animation: movementer  1.2s infinite;
    animation: movementer  1.2s infinite;
}
@-webkit-keyframes movementer {
    0%{ height:75%;width: 75%;top:50%;left: 50%; margin-left:-37.5%; margin-top: -37.5%;opacity: 0.5; }
    100%{ height:100%;width: 100%;top:0%;left: 0%; margin-left:0; margin-top: 0;opacity: 0;}
}
@-moz-keyframes movementer {
    0%{ height:75%;width: 75%;top:50%;left: 50%; margin-left:-37.5%; margin-top: -37.5%;opacity: 0.5; }
    100%{ height:100%;width: 100%;top:0%;left: 0%; margin-left:0; margin-top: 0;opacity: 0;}
}
@-ms-keyframes movementer {
    0%{ height:75%;width: 75%;top:50%;left: 50%; margin-left:-37.5%; margin-top: -37.5%;opacity: 0.5; }
    100%{ height:100%;width: 100%;top:0%;left: 0%; margin-left:0; margin-top: 0;opacity: 0;}
}
@-o-keyframes movementer {
    0%{ height:75%;width: 75%;top:50%;left: 50%; margin-left:-37.5%; margin-top: -37.5%;opacity: 0.5; }
    100%{ height:100%;width: 100%;top:0%;left: 0%; margin-left:0; margin-top: 0;opacity: 0;}
}
keyframes movementer {
    0%{ height:75%;width: 75%;top:50%;left: 50%; margin-left:-37.5%; margin-top: -37.5%;opacity: 0.5; }
    100%{ height:100%;width: 100%;top:0%;left: 0%; margin-left:0; margin-top: 0;opacity: 0;}
}
#framework-map{
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    opacity: 0.8;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 666;
    top: 0;
    left: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    cursor: pointer;
}
#framework-map.new-cl1{
    top: -100%;
}
#container4 .close{
    width:60px;
    height: 27px;
    background: url(../imgs/border-triangulo-top.png);
    text-align:center;
    top:-40px;
    left: 50%;
    z-index: 997;
    margin-left: -30px;
    position: absolute;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    cursor: pointer;
}
#container4 .close .fa{
    color: #fff;
}
#container4 .close.new-cl3{
    top:0;
}
#container4 .google{
    width:100px;
    height: 45px;
    background: url(../imgs/border-triangulo-bottom.png);
    text-align:center;
    bottom:-46px;
    left: 50%;
    display: block;
    z-index: 997;
    margin-left: -50px;
    position: absolute;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    cursor: pointer;
}
#container4 .google .fa {
    color: #fff;
    margin-top: 13px;
}
#container4 .google span {
    display: block;
    color: #fff;
    font-family: "avenir";
    font-size: 10px;
}
#container4 .google.new-cl5{
    bottom:0;
}
#container5{
    background: url(../imgs/fondo-web.jpg);
    padding: 80px 0 80px 0;
    position: relative;
}
#container5 h3.title,#container8 h3.title{
    font-size: 35px;
    line-height: 35px;
    color: #1e2c35;
    font-family: "avenir";
    margin-left: 2.5%;
}
#crossline5 ul{
    float: left;
    width: 100%;
}
#crossline5 ul li{
width: 50%;
    float: none;
    margin: 0 auto;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
#crossline5 ul li:nth-child(3n){
    margin:0 auto;
}
#crossline5 ul li .notice-img{
    height: 250px;
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}
#crossline5 ul li .notice-img .notice-framework{
position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(248, 185, 18,0.3);
    bottom: -100%;
    left: 0;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}
#crossline5 ul li:hover .notice-img .notice-framework{
    bottom: 0%;
}
#crossline5 ul li .notice-img img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}
#crossline5 ul li:hover .notice-img img{
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
}
#crossline5 ul li .notice-text{
    padding: 20px;
    height: 150px;
    background: #fff;
    position: relative;
}
#crossline5 ul li .notice-text a {
font-size: 12px;
    overflow: hidden;
    font-family: "oswald";
    text-transform: uppercase;
    color: #333;
    letter-spacing: 1px;
    width: 100px;
    margin: 0 auto;
    text-align: center;
    display: block;
    position: relative;
    padding: 8px 25px;
    border-radius: 0px;
    border-radius: 5px;
}
#crossline5 ul li .notice-text a .fa {
    color: #f8b912;
    position: absolute;
    top: 50%;
    left: 25px;
    margin-top: -6px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#crossline5 ul li .notice-text a:hover .fa {
    left: 110px;
}
#crossline5 ul li .notice-text .center{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    background: #f8b912;
    top: -30px;
    left: 50%;
    margin-left: -35px;
    border: 10px #fff solid;
    text-align:center;
}
#crossline5 ul li .notice-text .notice{
    width: 95%;
    border-top: 1px solid #dcdcdc;
    padding: 10px 0;
    margin-top: 40px;
}
#crossline5 ul li .notice-text .notice .notice-left{
    width:50%;
    float: left;
    text-align: left;
    font-family: "josefin";
}
#crossline5 ul li .notice-text .notice .fa{
    color: #f99400;
}
#crossline5 ul li .notice-text .notice .notice-right{
    color: #008075;
    text-align: right;
    font-family: "oswald";
    letter-spacing: 1px;
    font-size: 13px;
}
#crossline5 ul li .notice-text .center .fa{
    font-size: 30px;
    color: #fff;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
    margin-top:10px;
}
#crossline5 ul li .notice-text h3{
font-family: "oswald";
    margin-bottom: 10px;
    font-size: 10px;
    color: #b5b5b5;
    letter-spacing: 2px;
    position: relative;
    text-align: center;
    padding-top: 30px;
    text-transform: uppercase;
}
#crossline5 ul li .notice-text h2{
    line-height: 24px;
    margin-bottom: 10px;
    color: #000;
    font-size: 20px;
    text-align: center;
    position: relative;
    height: 75px;
    font-family: "josefin";
}
#crossline5 ul li:hover .center .fa{
    -webkit-transform:rotate(359deg);
    -moz-transform:rotate(359deg);
    -ms-transform:rotate(359deg);
    -o-transform:rotate(359deg);
    transform:rotate(359deg);
}
#container5 .pages{
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 20px;
}
#container5 .pages .btn-page{
    width: 100%;
    float: left;
    font-family: "avenir";
    font-size: 25px;
    color: #333;
}
#container5 .pages .btn-not{
    display: inline-block;
    color: #fff;
    margin-left: 10px;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    border: 0px solid transparent;
    text-align: center;
    padding: 10px 20px;
    border-radius: 5px;
    position: relative;
    font-family: "oswald";
    letter-spacing: 1px;
    font-size: 12px;
    z-index: 888;
    margin-top: 13px;
    width: 15%;
    cursor: pointer;
    text-transform: uppercase;
}
#container5 .pages .btn-not.bt-right .fa{
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#container5 .pages .btn-not.bt-right:hover .fa{
    margin-left: 10px;
}
#container5 .pages .btn-not.bt-left .fa{
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#container5 .pages .btn-not.bt-left:hover .fa{
    margin-right: 10px;
}
#container6{
    background: url(../imgs/fondos/tb/fondo-tensol.jpg);
    background-size: cover;
    height: 400px;
    position: relative;
    overflow: hidden;
}
#container6 video{
    display: none;
}
#container6 .info-center{
    z-index: 45;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin-top: 0;
    padding: 100px 0;
}
#crossline6 p.top-phrase{
    color: #fff;
    letter-spacing: 2px;
    font-size: 15px;
    font-family: "oswald";
    margin-bottom: 30px;
}
#crossline6 p.bottom-phrase{
    color: #fff;
    font-size: 35px;
    font-family: "josefin";
    /* font-style: italic; */
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
}
#crossline6 p.bottom-phrase span.sp-1{
    -webkit-animation:appear1 30s infinite;
    -moz-animation:appear1 30s infinite;
    -ms-animation:appear1 30s infinite;
    -o-animation:appear1 30s infinite;
    animation:appear1 30s infinite;
    border-bottom: 1px solid #fff;
    display: inline-block;
}
@-webkit-keyframes appear1 {
 0% {opacity:0;display: inline-block}
 30% {opacity:1;display: none;}
 100% {opacity:1;display: none;}
}
@-moz-keyframes appear1 {
 0% {opacity:0;display: inline-block}
 30% {opacity:0;display: none;}
 100% {opacity:0;display: none;}
}
@-o-keyframes appear1 {
 0% {opacity:0;display: inline-block}
 30% {opacity:0;display: none;}
 100% {opacity:0;display: none;}
}
@-ms-keyframes appear1 {
 0% {opacity:0;display: inline-block}
 30% {opacity:0;display: none;}
 100% {opacity:1;display: none;}
}
@keyframes appear1 {
 0% {opacity:0;display: inline-block}
 30% {opacity:1;display: none;}
 100% {opacity:1;display: none;}
}
#crossline6 p.bottom-phrase span.sp-2{
    -webkit-animation:appear2 30s infinite;
    -moz-animation:appear2 30s infinite;
    -ms-animation:appear2 30s infinite;
    -o-animation:appear2 30s infinite;
    animation:appear2 30s infinite;
    border-bottom: 1px solid #fff;
}
@-webkit-keyframes appear2 {
 0% {display: none}
 50% {display: inline-block;}
 100% {display: none;}
}
@-moz-keyframes appear2 {
 0% {display: none}
 50% {display: inline-block;}
 100% {display: none;}
}
@-o-keyframes appear2 {
 0% {display: none}
 50% {display: inline-block;}
 100% {display: none;}
}
@-ms-keyframes appear2 {
 0% {display: none}
 50% {display: inline-block;}
 100% {display: none;}
}
@keyframes appear2 {
 0% {display: none}
 50% {display: inline-block;}
 100% {display: none;}
}
#crossline6 p.bottom-phrase span.sp-3{
    -webkit-animation:appear3 30s infinite;
    -moz-animation:appear3 30s infinite;
    -ms-animation:appear3 30s infinite;
    -o-animation:appear3 30s infinite;
    animation:appear3 30s infinite;
    border-bottom: 1px solid #fff;
}
@-webkit-keyframes appear3 {
 0% {display: none}
 50% {display: inline-block}
 100% {display: none;}
}
@-moz-keyframes  appear3 {
 0% {display: none}
 50% {display: inline-block}
 100% {display: none;}
}
@-ms-keyframes  appear3 {
 0% {display: none}
 50% {display: inline-block}
 100% {display: none;}
}
@-o-keyframes  appear3 {
 0% {display: none}
 50% {display: inline-block}
 100% {display: none;}
}
@keyframes appear3 {
 0% {display: none}
 50% {display: inline-block}
 100% {display: none;}
}
#container8{
    background: url(../imgs/fondo-web.jpg);
    padding: 110px 0 80px;
    position: relative;
}
#container8 ul.products{
    overflow: hidden;
    float: left;
    text-align: center;
    width: 100%;
}
#container8 ul.products li{
    width: 100%;
    max-width: 244px;
    float: none;
    text-align: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
#container8 ul.products li .ima-left{
    background: #d8d8d8;
    width: 0%;
    height: 250px;
    position: relative;
    float: left;
}
#container8 ul.products li .ima-left.sun{
    width: 100%;
    -webkit-animation: proim 0.7s ;
    -moz-animation: proim 0.7s;
    -ms-animation: proim  0.7s;
    -o-animation: proim 0.7s;
    animation: proim 0.7s;
}
@-webkit-keyframes proim {
    0%{ width: 0; }
    100%{ width: 100%;}
}
@-moz-keyframes proim {
    0%{ width: 0; }
    100%{ width: 100%;}
}
@-ms-keyframes proim {
    0%{ width: 0; }
    100%{ width: 100%;}
}
@-o-keyframes proim {
    0%{ width: 0; }
    100%{ width: 100%;}
}
keyframes proim {
    0%{ width: 0; }
    100%{ width: 100%;}
}
#container8 ul.products li .ima-left .ima-left-image{
    background-size: cover;
    overflow: hidden;
    position: relative;
    width: 0%;
    height:250px;
}
#container8 ul.products li .ima-left .ima-left-image.suny{
    width: 100%;
    -webkit-animation: proimg  1.2s ;
    -moz-animation: proimg 1.2s ;
    -ms-animation: proimg 1.2s ;
    -o-animation: proimg 1.2s ;
    animation: proimg 1.2s ;
}
@-webkit-keyframes proimg {
    0%{ width: 0; }
    100%{ width: 100%;}
}
@-moz-keyframes proimg {
    0%{ width: 0; }
    100%{ width: 100%;}
}
@-ms-keyframes proimg {
    0%{ width: 0; }
    100%{ width: 100%;}
}
@-o-keyframes proimg {
    0%{ width: 0; }
    100%{ width: 100%;}
}
keyframes proimg {
    0%{ width: 0; }
    100%{ width: 100%;}
}
#container8 ul.products li .ima-left .ima-left-image img{
   position: absolute;
   top: 0px;
   left: 0;
}
#container8 ul.products li h4{
    font-family: "oswald";
    text-transform: uppercase;
    color: #1e2c35;
    text-align: left;
    margin-bottom: 16px;
    font-size: 17px;
    letter-spacing: 1px;
}
#container8 ul.products li .icons {
    display: block;
    width: 62px;
    height: 62px;
    background: url(../imgs/energias.png);
    display: block;
    position: relative;
    z-index: 900;
    margin: 0 auto;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#container8 ul.products li .icons#sp-icon-1 {
    background-position: 0 0;
}
#container8 ul.products li .icons#sp-icon-2 {
    background-position: -60px 0;
}
#container8 ul.products li .icons#sp-icon-3 {
    background-position: -124px 0;
}
#container8 ul.products li .icons#sp-icon-4 {
    background-position: -186px 0;
}
#container8 ul.products li .icons#sp-icon-5 {
    background-position: -248px 0;
}
#container8 ul.products li .icons#sp-icon-6 {
    background-position: -310px 0;
}
#container8 ul.products li .icons#sp-icon-7 {
    background-position: -372px 0;
}
#container8 ul.products li .icons#sp-icon-8 {
    background-position: -434px 0;
}
#container8 ul.products li.sun{
    margin-top: 0px;
}
#container8 ul.products  li a{
    display: block;
    width: 100%;
    height: 250px;
    position: relative;
}
#container8 ul.products  li a .energy{
    margin: 30px 0 20px;
    letter-spacing: 1px;
    font-size: 15px;
    text-transform: uppercase;
}
#container8 ul.products  li a .framework{    
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#container8 ul.products  li:hover a .framework{
    background: rgba(0, 0, 0,0.3);
}
#container8 ul.products  li a .energy-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 94px 0;
    color: #fff;
    font-family: "oswald";
}
#container8 ul.products  li .energy-text{
    background: #fff;
    padding: 30px 10px 20px 10px;
    position: relative;
    height: 185px;
}
#container8 ul.products  li .energy-text .bot-border{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 23px;
    background: #f8b912;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  overflow: hidden;
}
#container8 ul.products  li .energy-text .bot-border.pi{
    height: 23px;
}
#container8 ul.products  li:hover .energy-text .bot-border{
    height: 23px;
}
#container8 ul.products  li .energy-text .bot-border a{
    font-family: "oswald";
    letter-spacing: 1px;
    font-size: 12px;
    color: #fff;
    padding: 5px 0;
}
#container8 ul.products  li .energy-text h2{
    text-align: left;
    margin-bottom: 20px;
    font-family: "oswald";
    font-size: 16px;
    color: #107a85;
    text-transform: uppercase;
}
#container8 ul.products  li .energy-text span{
    color: #444;
    display: block;
    text-align: left;
    margin-bottom: 15px;
    font-family: "avenir";
    font-weight: 400;
    font-size: 12px;
    margin-left: 10px;
}
#container8 ul.products  li .energy-text span .fa{
    color: #f8b912;
}
#container8 ul.products  li .energy-text p{
    color: #777777;
    line-height: 18px;
    font-size: 14px;
    text-align: left;
    letter-spacing: 1px;
    font-family: "josefin";
    margin-bottom: 20px;
    height: 80px;
    margin-left: 10px;
}
#container8 ul.products  li .energy-text .options{
    width: 95%;
    border-top: 1px solid #dcdcdc;
    padding: 10px 0;
}
#container8 ul.products  li .energy-text .options .option-left{
    width:50%;
    float: left;
    text-align: left;
}
#container8 ul.products  li .energy-text .options .option-left .fa{
    
    color: #f99400;
}
#container8 ul.products  li .energy-text .options .option-left img{
    float: left;
    margin-right: 3px;
}
.options .option-right,.options .option-left{
    color: #008075;
    text-align: right;
    font-family: "oswald";
    letter-spacing: 1px;
    font-size: 13px;
}
.options .option-left{
    text-align: left;
}
#container8 ul.products  li .energy-text .link{
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    display: block;
    width: 60px;
    height: 40px;
    top: -25px;
    right: -10px;
    margin: 0;
    color: #fff;
    position: absolute;
}
#container8 ul.products  li .energy-text .link .l-triangle {
    position: absolute;
    border-color: #bf7302  transparent transparent transparent;
    border-width: 6px 10px 0 0;
    right: 0;
    top: 40px;
    width: 0;
    height: 0;
    border-style: solid;
}
#container8 ul.products  li .energy-text .link .l-shadow {
    position: absolute;
    right: 10px;
    top: 40px;
    width: 40px;
    height: 3px;
    background-color: rgba(0,0,0,0.3);
}
#container8 .energys{
    position: relative;
    z-index: 888;
}
#crossline8 span#led-blue {
    background: url(../imgs/luz-naranja.png) center no-repeat;
    border-radius: 50%;
    position: absolute;
    z-index: 777;
    width: 5px;
    height: 5px;
    top: 121px;
    left: 125px;
    opacity: 0.3;
}
#crossline8 ul li:hover span#led-blue{
    -webkit-animation:ledblue 1s infinite;
    -moz-animation:ledblue 1s infinite;
    -ms-animation:ledblue 1s infinite;
    -o-animation:ledblue 1s infinite;
    animation:ledblue 1s infinite;
}
@-webkit-keyframes ledblue {
 0% {top:125px;left: 121px;width: 5px;height: 5px;}
 50% {top:90px;left: 86px;width: 70px;height: 70px;}
 100% {top:125px;left: 121px;width: 5px;height: 5px;}
}
@-moz-keyframes ledblue {
 0% {top:125px;left: 121px;width: 5px;height: 5px;}
 50% {top:90px;left: 86px;width: 70px;height: 70px;}
 100% {top:125px;left: 121px;width: 5px;height: 5px;}
}
@-ms-keyframes ledblue {
 0% {top:125px;left: 121px;width: 5px;height: 5px;}
 50% {top:90px;left: 86px;width: 70px;height: 70px;}
 100% {top:125px;left: 121px;width: 5px;height: 5px;}
}
@-o-keyframes ledblue {
 0% {top:125px;left: 121px;width: 5px;height: 5px;}
 50% {top:90px;left: 86px;width: 70px;height: 70px;}
 100% {top:125px;left: 121px;width: 5px;height: 5px;}
}
@keyframes  ledblue {
 0% {top:125px;left: 121px;width: 5px;height: 5px;}
 50% {top:90px;left: 86px;width: 70px;height: 70px;}
 100% {top:125px;left: 121px;width: 5px;height: 5px;}
}
p.phrase,p.phrase3{
margin: 0 10%;
    float: left;
    width: 80%;
    text-align: center;
    font-family: "josefin";
    font-size: 25px;
    line-height: 30px;
    position: relative;
    color: #1e2c35;
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
p.phrase3{
    margin-top: 150px;
}
p.phrase.uper,p.phrase3.uper{
    margin-top: 0px;
    opacity: 1;
}
p.phrase3.uper{
   margin-top: 35px; 
}
p.phrase span,p.phrase3 span{
    font-family: "avenir";
}
#container2 p.phrase::after{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 2px;
    width: 25px;
    background: #f05221;
}
#crossline8 ul.operations li{
    width: 30%;
    float: left;
    margin-top: 25px;
    text-align: center;
}
#crossline8 ul.operations li.operation{
    width: 5%;
    float: left;
    padding: 72px 0;
}
#crossline8 ul.operations li.operation span{
    font-family: "avenir";
    font-size: 40px;
    margin-top:30px;
}
#crossline8 ul.operations li span{
    font-family: "avenir";
    display: block;
    margin: 40px 0 25px;
    letter-spacing: 2px;
    color: #0D415A;
    font-size: 14px;
    font-weight: 600;
}
#crossline8 ul.operations li p{
    letter-spacing: 2px;
    font-family: "josefin";
    text-align: center;
    line-height: 30px;
    margin-bottom: 30px;
    float: right;
    color: #8f8f8f;
    font-size: 16px;
}
.text-install{
    text-align: center;
    width: 100%;
    float: left;
    height: 150px;
    overflow: hidden;
}
#crossline8 .text-install .arrow-move{
-webkit-animation: arrowmove 1s infinite;
    -moz-animation: arrowmove 1s infinite;
    -ms-animation: arrowmove 1s infinite;
    -o-animation: arrowmove 1s infinite;
    animation: arrowmove 1s infinite;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    margin: 0 auto;
}
#crossline8 .text-install .arrow-move.uper{
    margin-top: 0px;
    opacity: 1;
}
@-webkit-keyframes arrowmove {
 0% {
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
}
 50% {
    -webkit-transform:rotate(20deg);
    -moz-transform:rotate(20deg);
    -ms-transform:rotate(20deg);
    -o-transform:rotate(20deg);
    transform:rotate(20deg);
}
 100% {
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
}
}
.link .fa{
    font-size: 20px;
    padding: 10px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
    -webkit-animation: moves 1.7s infinite;
    -moz-animation: moves 1.7s infinite;
    -ms-animation: moves 1.7s infinite;
    -o-animation: moves 1.7s infinite;
    animation: moves 1.7s infinite;
}
@-webkit-keyframes moves {
    0%{ padding-left: 10px; }
    50%{ padding-left: 20px;}
    100%{ padding-left: 10px;}
}
@-moz-keyframes moves {
    0%{ padding-left: 10px; }
    50%{ padding-left: 20px;}
    100%{ padding-left: 10px;}
}
@-ms-keyframes moves {
    0%{ padding-left: 10px; }
    50%{ padding-left: 20px;}
    100%{ padding-left: 10px;}
}
@-o-keyframes moves {
    0%{ padding-left: 10px; }
    50%{ padding-left: 30px;}
    100%{ padding-left: 10px;}
}
keyframes moves{
    0%{ padding-left: 10px; }
    50%{ padding-left: 20px;}
    100%{ padding-left: 10px;}
}
.link:hover .fa{
    -webkit-animation: moves 0.5s infinite;
    -moz-animation: moves 0.5s infinite;
    -ms-animation: moves 0.5s infinite;
    -o-animation: moves 0.5s infinite;
    animation: moves 0.5s infinite;
}

#container9{
    display: none;
    width: 100%;
    background: url(../imgs/fondos/tb/fondo-carpetas.jpg);
    background-size: cover;
    position: relative;
    padding: 0;
}
#crossline9 .framework-employ{
    width: 70%;
    float:left;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background:url(../imgs/puntos-op2.png);
}
#crossline9 .employ-left{
    width: 500px;
    float: left;
    margin: 120px 0;
    position: relative;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    background: #fff;
    border: 1px solid #f8b912;
    outline-style: solid;
    outline-color: #fff;
    outline-width: 10px;
}
#crossline9 .employ-left .img-1{
    position: absolute;
    z-index: 777;
    top: 2px;
    left: 28px;
}
#crossline9 .employ-left .img-2{
    position: absolute;
    z-index: 666;
    top: 72px;
    left: 9px;
}
#crossline9 .employs{
    width: 57%;
    float: right;
    text-align: center;
}
#crossline9 .employ-left h3{
    font-family: "avenir";
    font-size: 30px;
    width: 100%;
    text-align: center;
    color: #223347;
}
#crossline9 .employ-left p {
    font-family: "josefin";
    text-align: center;
    line-height: 30px;
    margin: 20px 0;
    width: 100%;
    color: #8f8f8f;
    font-size: 15px;
}
#container11{
    background: #fff;
    position: relative;
    padding: 100px 0;
    z-index: 111;
    text-align: center;
    border-bottom: 1px solid #e2e2e2;
    height: 1450px;
}
#container11 .im-sl{
    background: #d8d8d8;
    width: 0%;
    height: 500px;
    position: relative;
    float: left;
    width: 100%;
    -webkit-animation: proim 0.7s;
    -moz-animation: proim 0.7s;
    -ms-animation: proim 0.7s;
    -o-animation: proim 0.7s;
    animation: proim 0.7s;
}
#container11 .im-sl .im-sl-image{
background-size: cover;
    overflow: hidden;
    position: relative;
    width: 0%;
    height: 600px;
    width: 100%;
    -webkit-animation: proimg 1.2s;
    -moz-animation: proimg 1.2s;
    -ms-animation: proimg 1.2s;
    -o-animation: proimg 1.2s;
    animation: proimg 1.2s;
}
#container11 .im-sl .im-sl-image img{
    height: 100%;
    width: 100%;
}
.im-sl .im-sl-image{
    position: absolute;
    top: 0px;
    left: 0;
}
.pico{
    background: url(../imgs/border-pico-blanco.png);
    position: absolute;
    width: 68px;
    height: 34px;
    top: -34px;
    left: 50%;
    margin-left: -34px;
}
.pico-2{
    background: url(../imgs/border-pico-gris.png);
    position: absolute;
    width: 68px;
    height: 34px;
    top: -34px;
    left: 50%;
    margin-left: -34px;
    text-align: center;
}
.pico-2 .fa{
    margin-top: 10px;
    color: #f99400;
        -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-animation: arrowstyle 1s infinite;
    -moz-animation: arrowstyle 1s infinite;
    -ms-animation: arrowstyle 1s infinite;
    -o-animation: arrowstyle 1s infinite;
    animation: arrowstyle 1s infinite;
}
@-webkit-keyframes  arrowstyle{
    0%{ margin-top:10px; }
    50%{ margin-top: 15px}
    100%{ margin-top: 10px}
}
@-moz-keyframes  arrowstyle{
    0%{ margin-top:10px; }
    50%{ margin-top: 15px}
    100%{ margin-top: 10px}
}
@-ms-keyframes  arrowstyle{
    0%{ margin-top:10px; }
    50%{ margin-top: 15px}
    100%{ margin-top: 10px}
}
@-o-keyframes   arrowstyle{
    0%{ margin-top:10px; }
    50%{ margin-top: 15px}
    100%{ margin-top: 10px}
}
@keyframes  arrowstyle{
    0%{ margin-top:10px; }
    50%{ margin-top: 15px}
    100%{ margin-top: 10px}
}
.rhombes2,.rhombes1{
    width: 5px;
    height: 5px;
    position: absolute;
    z-index: 99;
    top: -8px;
    left: 50%;
    margin-left: -2.5px;
        -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#rhomb-1,#rhomb-2{
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #bfbfbf;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#rhomb-1.app,#rhomb-2.app{
    background: #f8b912;
    border: 2px solid #f8b912;
}
.rhombes1 #rhomb-li1,.rhombes2 #rhomb-li2{
    display: block;
    margin: 5px 3px 0;
    width: 1px;
    height: 100px;
    border-left: 1px dashed #bfbfbf;
}
.rhombes1 #rhomb-la1,.rhombes2 #rhomb-la2{
    display: block;
    margin: 5px 2px 0;
    width: 1px;
    border-left: 2px solid #f8b912;
    position: absolute;
    top: 0;
    height: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.rhombes1 #rhomb-la1.apk,.rhombes2 #rhomb-la2.apk{
    height:100px;
}
.rhombes1 #rhomb-rh1,.rhombes2 #rhomb-rh2 {
    padding: 0;
    font-size: 36px;
    position: absolute;
    bottom: -109px;
    left: 50%;
    margin-left: -4px;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    border: 2px solid #bfbfbf;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.rhombes1 #rhomb-rh1.appi,.rhombes2 #rhomb-rh2.appi{
    background: #f8b912;
    border: 2px solid #f8b912;    
    -webkit-animation: ale 1.5s;
    -moz-animation: ale 1.5s;
    -ms-animation: ale 1.5s;
    -o-animation: ale 1.5s;
    animation: ale 1.5s;
}
@-webkit-keyframes ale {
    0%{ background: #fff;border: 2px solid #bfbfbf;}
    50%{ background: #fff;border: 2px solid #bfbfbf;}
    100%{ background: #f8b912;border: 2px solid #f8b912;}
}
@-moz-keyframes ale  {
    0%{ background: #fff;border: 2px solid #bfbfbf;}
    50%{ background: #fff;border: 2px solid #bfbfbf;}
    100%{ background: #f8b912;border: 2px solid #f8b912;}
}
@-ms-keyframes ale  {
    0%{ background: #fff;border: 2px solid #bfbfbf;}
    50%{ background: #fff;border: 2px solid #bfbfbf;}
    100%{ background: #f8b912;border: 2px solid #f8b912;}
}
@-o-keyframes ale  {
    0%{ background: #fff;border: 2px solid #bfbfbf;}
    50%{ background: #fff;border: 2px solid #bfbfbf;}
    100%{ background: #f8b912;border: 2px solid #f8b912;}
}
keyframes ale  {
    0%{ background: #fff;border: 2px solid #bfbfbf;}
    50%{ background: #fff;border: 2px solid #bfbfbf;}
    100%{ background: #f8b912;border: 2px solid #f8b912;}
}
#crossline11{
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    height: 1480px;
}
#container11 .center-fin .border-top{
    height: 5px;
    width: 0%;
    position: absolute;
    background:  #e5e5e5;
    background:  #f8b912;
    top: 0px;
    left: 0;
    z-index:888;
}
#container11 .center-fin .border-bottom{
    height: 5px;
    width: 0%;
    position: absolute;
    background: #e5e5e5;
    background:  #f8b912;
    bottom: 0px;
    right: 0;
    z-index:888;
}
#container11 .center-fin .border-left{
    height: 0%;
    width: 5px;
    position: absolute;
    background:  #e5e5e5;
    background:  #f8b912;
    bottom: 0px;
    left: 0;
    z-index:888;
}
#container11 .center-fin .border-right{
    height: 0%;
    width: 5px;
    position: absolute;
    background: #e5e5e5;
    background:  #f8b912;
    top: 0px;
    right: 0;
    z-index:888;
}
#container11 .n-arrow-left{
    height: 50px;
    width: 30px;
    top: 50%;
    margin-top: -25px;
    left: -30px;
    position: absolute;
    display: none;
}
#container11 .n-arrow-right{
    height: 50px;
    width: 30px;
    top: 50%;
    margin-top: -25px;
    right: -30px;
    position: absolute;
    display: none;
}
#container11 .n-arrow-left .fa, #container11 .n-arrow-right .fa{
    color: #e5e5e5;
    font-size: 25px;
    cursor: pointer;
}
#container11 .n-arrow-left .fa:hover, #container11 .n-arrow-right .fa:hover{
    color: #f8b912;
}
#container11 .center-fin{
    background: #fff;
    height: 1150px;
    width: 98%;
    position: relative;
    padding: 20px 0;
    margin: 40px 1% 0;
    overflow: hidden;
}
#container11 .center-fin ul{
    width: 95%;
    padding: 10px 2.5% 20px;
    position: relative;
    overflow: hidden;
}
#container11 .center-fin ul li{
    width: 33.3%;
    float: left;
    font-family: "avenir";
    letter-spacing: 2px;
    font-size: 10px;
    position: relative;
}
#container11 .center-fin ul li span.text{
    position: relative;
    z-index: 444;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    font-family: "oswald";
    letter-spacing: 2px;
    color: #141414;}
#container11 .center-fin ul li span.throug{
    border-bottom: 1px solid #f8b912;
    content: "";
    left: 50%;
    margin-left: -51%;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    width: 100%;
    z-index: 1;
    position: absolute;
    z-index: 333;
}
#container11 .center-fin .panels{
    border-right: 0px;
    height: auto;
    width: 100%;
    float: left;
    position: relative;
    margin: 15px 0;
    text-align: center;
}
#container11 .center-fin .panels span {
    position: absolute;
    color: #141414;
    opacity: 1;
    font-size: 30px;
    font-family: 'avenir';
    text-align: center;
    top: 50%;
    margin-top: -35px;
    left: 7px;
    transition: all ease-out 0.3s;
    -webkit-transition: all ease-out 0.3s;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}
#container11 .center-fin .panels span#op1 {
    top: 0;
    margin-top: 0;
    left: 0;
    width: 95%;
    position: relative;
    margin: 30px 2.5%;
}
#container11 .center-fin .panels span#op2 {
    top: 0;
    margin-top: 0;
    left: 0;
    width: 95%;
    position: relative;
    margin: 30px 2.5%;
}
#container11 .center-fin .panels span#op3 {
    top: 0;
    margin-top: 0;
    left: 0;
    width: 95%;
    position: relative;
    margin: 30px 2.5%;
}
#container11 .center-fin .panel-left{
    height: auto;
    width: 95%;
    margin: 0 2.5%;
    position: relative;
    float: left;
    overflow: hidden;
}
#container11 .center-fin .panel-left .phrase-left{
    height: 95px;
    width: 100%;
    background: rgba(249, 171, 0, 0.8);
    position: absolute;
    bottom: 0;
    z-index: 888;
}
#container11 .center-fin .panel-left .phrase-left p{
    color: #fff;
    font-size: 26px;
    font-family: "avenir";
    margin-top: 25px;
    text-align: left;
    line-height: 26px;
    letter-spacing: 0px;
    width: 100%;
}
#container11 .center-fin .panel-left .phrase-left .quote{
width: 20%;
    float: left;
    font-size: 70px;
    margin-top: 20px;
    margin-left: 10px;
    color: #fff;
    margin-right: 10px;
}
#container11 .center-fin .panel-right{
    height: auto;
    width: 100%;
    position: relative;
    float: right;
    overflow: hidden;
}
#container11 .center-fin .panel-right .acl-fin{
    width: 300px;
    margin: 0 auto;
    padding: 8px 0;
    border: 1px solid #d1e4ea;
    background: #f7fafb;
}
#container11 .center-fin .panel-right a.fin {
    font-size: 12px;
    font-family: "oswald";
    text-transform: uppercase;
    color: #333;
    letter-spacing: 1px;
    width: 150px;
    margin: 0 auto;
    text-align: center;
    display: block;
    margin-top: 10px;
    padding: 10px 25px;
    border-radius: 5px;
    position: relative;
}
#container11 .center-fin .panel-right a.fin .fa {
    color: #f8b912;
    position: absolute;
    top: 50%;
    left: 15px;
    margin-top: -6px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#container11 .center-fin .panel-right a.fin:hover .fa {
    left: 170px;
}
#container11 .center-fin .panel-right.le{
    float: left;
}
#container11 .center-fin .panel-right.ri{
    float: right;
}
#container11 .center-fin .panel-right .brand{
    width: 232px;
    margin: 20px 30px 0;
    float: left;
    height: 44px;
    background: url(../imgs/sprite-web.png);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#container11 .center-fin .panel-right .brand#brand-1{
    background-position: -1px -44px;
}
#container11 .center-fin .panel-right .brand#brand-1:hover{
    background-position: 0 0;
}
#container11 .center-fin .panel-right .brand#brand-2{
    background-position: 0 -136px; 
}
#container11 .center-fin .panel-right .brand#brand-2:hover{
    background-position: 0 -90px; 
}
#container11 .center-fin .panel-right .brand#brand-3{
    background-position: -232px -45px; 
}
#container11 .center-fin .panel-right .brand#brand-3:hover{
    background-position:  -232px 0px;
}
#container11 .center-fin .panel-right .brand#brand-4{
     background-position: -232px -136px; 
}
#container11 .center-fin .panel-right .brand#brand-4:hover{
    background-position: -232px -90px; 
}
#container11 .center-fin .difs{
    width:100%;
    margin:0 auto;
}
.panel-right .fa{
    color:#f8b912;
}
#container11 .center-fin .panel-right p{
width: 95%;
    color: #666;
    font-size: 16px;
    line-height: 20px;
    font-family: "josefin";
    letter-spacing: 1px;
    text-align: left;
}
#container11 .center-fin .panel-right p span{
   font-family: "avenir";
    color: #333;
    letter-spacing: 0;
    font-size: 15px;
}
#container11 .center-fin .panel-right h4 {
    font-family: "avenir";
    color: #333;
    letter-spacing: 0;
    font-size: 18px;
    display: block;
    line-height: 24px;
    text-align: center;
}
#container11 .center-fin .panel-right p.acla{
    width: 85%;
    margin: 25px 20px;
    border-left: 2px solid #f8b912;
    padding-left: 3%;
}
#container11 h2, #container7 h2{
text-align: center;
    font-size: 20px;
    letter-spacing: 2px;
    width: 95%;
    margin: 0 auto;
    font-family: "avenir";
    padding: 20px 0;
    line-height: 40px;
    color: #141414;
    text-transform: uppercase;
}
#container11 h3{
    text-align: center;
    font-size: 28px;
    letter-spacing: 2px;
    width: 95%;
    margin: 0 auto;
    font-family: "avenir";
    padding: 15px 0;
    line-height: 40px;
    color: #141414;
}
#container11 p{
    color: #666;
    font-family: "josefin";
    letter-spacing: 2px;
    width: 95%;
    line-height: 25px;
    text-align: center;
    margin: 0 auto;
}
#container12{
    padding: 100px 0 80px;    
    border-bottom: 1px solid #e2e2e2;
    position: relative;
    z-index: 888;
}
#container12 .opinions{
width: 80%;
    position: relative;
    margin: 0 auto;
    background: #fff;
    margin-top: 0px;
    height: 450px;
    margin-top: -150px !important;
}
#container12 p.others,#crossline22 .notice p.others{
    float: left;
    margin-top: 400px;
    width: 100%;
    color: #141414;
    font-weight: 600;
    text-align: center;
    font-family: "avenir";
}
#container12 p.others{
    float: left;
    margin-top: 460px;
    width: 100%;
    color: #141414;
    font-weight: 600;
    text-align: center;
    font-family: "avenir";
}
#container12 p.others a,#container22 p.others a {
    width: 25px;
    height: 25px;
    display: inline-block;
    border: 1px solid #fff;
    position: relative;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#container12 p.others a:hover,#container22 p.others a:hover {
    background:  #f8b912;
}
#container12 p.others a:hover .fa,#container22 p.others a:hover .fa{
    color: #fff;
}
#container12 p.others a.lines,#container22 p.others a {
    border: 1px solid #f8b912;
}
#container12 .opinions .arrow-opleft{
    width: 20px;
    height: 20px;
    position: absolute;
    background: #f8b912;
    z-index: 666;
    left: -30px;
    top: 20px;
    font-size: 20px;
    padding: 20px;
    color: #fff;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
#container12 .opinions .arrow-opright{
    width: 20px;
    height: 20px;
    position: absolute;
    background: #f8b912;
    z-index: 666;
    right: -30px;
    top: 20px;
    font-size: 20px;
    padding: 20px;
    color: #fff;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
#container12 .opinions .arrow-opright .fa,#container12 .opinions .arrow-opleft .fa{
    color: #fff;
    margin-top: 0;
}
#container12 .opinions .arrow-opleft:hover{
    padding: 20px 25px 20px 15px;
    background: #f99400;
    cursor: pointer;
}
#container12 .opinions .arrow-opright:hover{
    padding: 20px 15px 20px 25px;
    background: #f99400;
    cursor: pointer;
}
#container12 .opinions .people{
width: 125px;
    height: 125px;
    display: block;
    border: 8px solid #f8b912;
    margin-top: -75px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin: -75px auto 30px;
}
#container12 .opinions .people.img{
    position: absolute;
    top: 0;
    left: 0;
}
#container12 .opinions .fa,#crossline22 .notice p.others .fa{
    color: #f99400;
    margin-top: 5px;
}
.slide2{
    opacity:0;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
}
.commentinit{
    opacity:1;
}

#container12 .opinion-people{
    font-size: 18px;
    color: #141414;
    font-weight: 600;
    text-align: center;
    font-family: "avenir";
}
#container12 .opinion-text{
color: #666;
    font-family: "josefin";
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 10px;
}
#container12 .opinion-text .fa-quote-left {
    color: #EBF2FF;
    margin-left: -35px;
    display: inline-block;
    font-size: 36px;
}
#container12 .opinion-text .fa-quote-right {
    color: #EBF2FF;
    margin-left: 7px;
    display: inline-block;
    position: absolute;
    font-size: 36px;
}
#crossline12{
    text-align: center;
}
#container13{    
    padding: 50px 0;
    background: #fff;
    position: relative;
    border-top: 1px solid #c0c8cc;
}
#container13 h6{
    font-family: "oswald";
    color: #f7f7f7;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    bottom: 100px;
    top: inherit;
    font-size: 55px;
    letter-spacing: 4px;
    width: 100%;
    left: 0;
    text-align: center;
}
#container13 ul {
    background: #fff;
    overflow: hidden;
    padding: 20px 13px;
    width: 75%;
    margin: -140px auto 0;
    border: 1px solid #c0c8cc;
}
#container13 ul li{
    width: 47%;
    float: left;
    margin-right: 2.6%;
}
#container13 ul li:last-child{
    margin-right: 0;
}
#container13 ul li p{
    width: 100%;
    float: left;
    font-family: "oswald";
    font-size: 14px;
}
#container13 ul li .numbers{
    width: 70%;
    float: left;
    color: #233859;
    font-size: 40px;
    font-weight: 500;
    font-family: "avenir";
}
#container13 ul li img{
    width: 20%;
    float: left;
    margin-right: 10px;
    margin-bottom: 15px;
}
#container13 ul li .number{
    width: 40%;
    float: left;
    color: #233859;
    font-size: 40px;
    font-weight: 500;
    font-family: "avenir";
}
.one{
    width: 118px;
    color: #233859;
    font-family: "signika";
    height: 118px;
    display: block;    
    background: url(../imgs/premium.png) 3px center no-repeat;
    text-align: center;
    position: relative;
    font-size: 140px;
    padding-top: 20px;
    margin: 20px auto 0;
}
#container13 ul li .text{
    width: 100%;
    float: left;
    font-family: "avenir";
    font-size: 13px;
    font-weight: 600;
    color: #1e2c35;
}
#container13 p.phrase-2{
    float: left;
    width: 60%;
    text-align: center;
    margin: 20px 20%;
    font-family: "josefin";
    font-size: 30px;
    line-height: 40px;
    position: relative;
    color: #1e2c35;
}
#container15{
    background:url(../imgs/fondos/tb/fondo-footer.jpg) center center;
    background-size: cover;
    padding: 40px 0;
    text-align: center;
    position: relative;
}
#container15 .framework {
    width: 100%;
    height: 100%;
    background: rgba(18, 31, 40,0.95);
    z-index: 778;
    position: absolute;
    top: 0;
    left: 0;
}
#container15 .footer-items {
    width: 100%;
    float: right;
    text-align: center;
    font-family: "avenir";
}
.items, #container15 .footer-items span, #container15 .footer-items a{
    float: none;
    text-align: center;
    font-size: 10px;
    color: #9eb7cb;
    margin: 0;
    width: auto;
    display: inline-block;
}
#container15 .footer-items span{
    cursor:pointer;
}
#crossline15{
    position: relative;
    z-index: 888;
}
#crossline15 ul.social {
    width: 20%;
    margin: 0 40% 100px;
}
#crossline15 ul.social li a {
    text-align: center;
    width: 20%;
    float: left;
    font-size: 14px;
    color: #fff;
    font-family: "oswald";
    text-transform: uppercase;
}
.items a{
    color: #9eb7cb;
}
#container15 .remember{
    position: absolute;
    width: 664px;
    top: -20px;
    left: 50%;
    font-size: 20px;
    font-family: "oswald";
    color: #9b1639;
    margin: 0 0 0 -332px;
}
#crossline15 ul{
    width: 95%;
    margin-left: 2.5%;
}
#crossline15 ul li{
    width: 48%;
    float: left;
    margin: 10px 0 10px 0%;
    height: 200px;
}
#crossline15 ul li:last-child{
    margin-right: 0%;
}
#crossline15 hr.hr-big{
    width: 50px;
    border: 0;
    border-bottom: 1px solid #bccad3;
    display: block;
    margin: 5px 0;
}
#container15 hr.hr-small{
    width: 30px;
    border: 0;
    border-bottom: 1px solid #bccad3;
    display: block;
    margin: 5px 0 20px;
}
#container15 #logo-footer{
        margin-top: -50px;
}
#container15 h5{
    color: #a1905d;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 2px;
    font-family: "oswald";
    font-size: 14px;
}
#container15 p{
    color: #FFD619;
    margin: 15px 0;
    text-align: center;
    font-size: 21px;
    margin-left: 15px;
    font-family: "oswald";
}
#container15 .license{
    width: 100%;
    float: left;
    color: #fff;
    font-family: "josefin";
    font-size: 14px;
    margin: 10px 0;
}
#container15 .license a{
    color: #fff;
    display: inline-block;
    margin: 0;
}
#container15 .footer-search{
width: 95%;
    text-align: left;
    float: left;
    margin-left: 2.5%;
}
#container15 .footer-search h6{
   text-align: left;
}
#container15 .footer-search a{
    color: #9db4c3;
    line-height: 20px;
    margin: 0 0 15px 0;
    text-align: left;
    font-size: 16px;
    font-family: "josefin";
    display: inline-block;
    cursor: pointer;
    margin-right: 10px;
}
.footer-search a .fa{
    color: #f8b912;
    margin-right: 5px;
}
.license{
    display: none;
}
#searchers li{
    width:25%;
    overflow:hidden;
    float:left;
    padding: 0 0 25px 0;
    font-size:14px;
    text-align: left;
    color:#333;
    }
#searchers li .fa{
    color:#f8b912;
    margin-right: 5px;
    }
#searchers li p{
    width: 100%;
    font-family: "josefin";
    float: left;
    padding: 0 0 0 0;
    font-size: 17px;
    text-align: left;
    color: #9db4c3;
    margin: 0 0 10px 0;
    line-height: 18px;
    }
#searchers li p.text-check{
    width: 80%;
    font-size: 14px;
    margin-bottom: 0;
}
#searchers li a.ref-check{
    width: auto;
    display: inline-block;
    margin: 0;
    font-size: 14px;
    text-decoration: underline;
}
#container15 h6{
    color: #bccad3;
    text-align: left;
    margin-bottom: 10px;
    letter-spacing: 2px;
    font-family: "oswald";
    font-size: 18px;
    position: relative;
    }
#searchers li img{
    margin-bottom: 5px;
    width: 90%;
    }
#searchers li a,#searchers li span{
    color: #9db4c3;
    line-height: 20px;
    margin: 15px 0;
    text-align: left;
    font-size: 17px;
    font-family: "josefin";
    display: block;
    cursor: pointer;
    }
#searchers li a:hover:before,#searchers li span:hover:before {
  margin-right: 4px;
    border-radius: 50%;
}
#searchers li:last-child{
    border-left:0;
    border-right:0;
    }
#container15 .footer-items {
    width: 100%;
    float: right;
    text-align: center;
}
#searchers input {
    background: url(../imgs/newsletter.png) 5px center no-repeat #fff;
    padding-left: 50px;
    width: 85%;
    margin: 5px 0 0;
    color: #CCCCCC;
    font-weight: 400;
    padding: 10px 40px 10px;
    border: 0;
    float: left;
    border-top-left-radius: 5px;
}
#searchers input#news-btn {
    width: 100%;
    margin: 0;
    color: #fff;
    background: #f8b912;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    overflow: hidden;
    font-weight: 400;
    padding: 10px 15px 10px;
    float: left;
    border: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 5px;
    text-transform: uppercase;
    font-family: "oswald";
    letter-spacing: 1px;
    font-size: 12px;
}
#searchers input.check {
    padding: 20px 20px 20px 10px;
    margin: 0;
    border: 0;
    height: auto;
    display: inline-block;
    width: 20px;
    box-shadow: none;
}
.items, #container15 .footer-items span, #container15 .footer-items a{
    float: none;
    text-align: center;
    font-size: 12px;
    color: #9eb7cb;
    width: auto;
    display: inline-block;
}
#container15 .footer-items span{
    cursor:pointer;
}
.items a{
    color: #9eb7cb;
}
#container14{
    background: url(../imgs/fondo-web.jpg);
    padding: 80px 0 80px;
    position: relative;
}
#crossline14 .contact-right,#crossline21 .contact-right{
    width: 95%;
    float: left;
    text-align: left;
    padding: 0;
    margin-left: 2.5%;
    margin-bottom: 20px;
}
#crossline14 .contact-right h2,#crossline21 .contact-right h2{
text-align: left;
    font-size: 35px;
    letter-spacing: 2px;
    width: 100%;
    margin: 0 auto;
    font-family: "avenir";
    padding: 0 0 20px 0;
    line-height: 40px;
    color: #141414;
    text-transform: uppercase;
}
#crossline14 .contact-right .fa,#crossline21 .contact-right .fa{
    color: #f99400;
    font-size: 30px;
    margin-top: 2px;
    margin-right: 5px;
}
#crossline14 .house-info img{
    width: 100%;
}
.contact-right ul li h4{
    color: #444;
    margin-bottom: 10px;
    display: block;
    font-size: 15px;
    margin-top: 0px;
    font-family: "avenir";
    float: left;
}
.contact-right ul li a,.contact-right ul li p,.contact-right p{
    margin-bottom: 10px;
    font-family: "josefin";
    line-height: 20px;
    font-size: 16px;
    color: #666;
    float: left;
    width: 90%;
    margin-left: 10%;
}
.contact-right p.texte{
    width: 100%;
    float: left;
    margin-left: 0;
}
#crossline14 .contact-left,#container21 .contact-left{
    width: 88%;
    margin-right: 4%;
    float: right;
    background: #fff;
    padding: 20px 2%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    position: relative;
}
#crossline14 #appe.contact-left,#container21 .contact-left{
    width: 91%;
    margin-right: 2.5%;
}
#crossline14 .contact-left .of-text{
margin-bottom: 30px;
    float: left;
    padding: 5px 10px;
    background: #1e2c35;
    display: block;
    width: 100%;
    top: 0px;
    left: -10px;
    margin: 0;
    height: 68px;
    color: #fff;
    position: absolute;
}
#crossline14 .contact-left .of-text .of-left{
    width: 100%;
    float: left;
    border-right: 0;
}
#crossline14 .contact-left .of-text .of-left p {
font-size: 18px;
    font-family: "avenir";
    display: inline-block;
    color: #fff;
    margin-top: 8px;
    margin-left: 10px;
}
#crossline14 .contact-left .of-text .of-right{
    display: none;
}
#crossline14 .other-form,#crossline21 .other-form{
    width: 100%;
    margin-top: 30px;
    border-top: 1px solid #dcdcdc;
    display: inline-block;
    color: #888;
    font-family: "avenir";
    margin: 0 0 0 0px;
    font-size: 13px;
    padding: 10px 0;
}
#crossline14 .other-form p,#crossline21 .other-form p{
    display: inline-block;
    color: #888;
}
#crossline14 .other-form a,#crossline21 .other-form a{
    color: #888;
    display: inline-block;
    margin-left: 0px;
}
#crossline14 .other-form p .fa, #crossline14 .other-form a .fa{
    color: #888;
}
#crossline14 .contact-left .input-group,#container21 .contact-left .input-group,#crossline14 .contact-left .input-select,#container21 .contact-left .input-select{
    position: relative;
    margin-bottom: 20px;
}
#crossline14 .contact-left .input-group span,#crossline21 .contact-left .input-group span,#crossline14 .contact-left .input-select span,#crossline21 .contact-left .input-select span{
position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    text-align: center;
    color: #777;
    display: block;
    z-index: 889;
    height: 100%;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
}
#crossline14 .contact-left .input-group span i,#crossline21 .contact-left .input-group span i,#crossline14 .contact-left .input-select span i,#crossline21 .contact-left .input-select span i{
    padding: 15px;
    color: #fff;
}
#crossline14 label,#crossline21 label{
    margin-bottom: 5px;
    display: block;
    font-size: 16px;
    color: #141414;
    font-weight: 400;
    text-align: left;
    font-family: "avenir";
}
#crossline14 ::-webkit-input-placeholder {
    color: #aaa;
    font-family: "josefin";
}
#crossline14 :-moz-placeholder { /* Firefox 18- */
    color: #aaa;
    font-family: "josefin";
}
#crossline14 ::-moz-placeholder {  /* Firefox 19+ */
    color: #aaa;
    font-family: "josefin";
}
#crossline14 :-ms-input-placeholder {  
    color: #aaa;
    font-family: "josefin";
}
#crossline14 input,#crossline21 input{
color: #555;
    font-family: "josefin";
    background: #ffffff;
    font-size: 16px;
    width: 88%;
    padding: 14px;
    border: 1px solid #E6E6E6;
    padding-left: 66px;
}
#crossline14 table{
    width: 100%;
    float: left;
    margin-bottom: 20px;
}
#crossline14 tr td{
    width: 100%;
    float: left;
    margin:5px 0 10px;
}
#crossline14 input.check,#crossline21 input.check {
    padding: 20px 20px 20px 10px;
    margin: 0;
    border: 0;
    height: auto;
    display: inline-block;
    width: 20px;
    box-shadow: none;
}
.check-of{
    color: #fff;
    margin-left: 10px;
    margin: 5px 10px;
}
.check-of span{
    color: #fff;
    margin-left: 10px;
    margin: 5px 10px;
}
.check-ph{
        margin: 4px 8px 5px;
}
.check-ph a{
    color: #999; 
    text-decoration: underline;
}
#crossline14 .check-ph span {
    color: #bccad3;
}
#crossline14 ul.count li{
    width: 25%;
    float: left;
}
#crossline14 ul.count li span{
    color: #bccad3;
    font-family: "oswald";
    font-size: 9px;
}
#crossline14 ul.count li span.nu{
    font-size: 22px;
}
#crossline14 span,#crossline21 span {
    font-family: "josefin";
    letter-spacing: 1px;
    color: #666;
    font-size: 15px;
    display: inline-block;
    width: 90%;
}
#crossline14 span a,#crossline21 span a{
    font-family: "josefin";
    letter-spacing: 1px;
    color: #999;
    font-size: 14px;
    display: inline-block;
    text-decoration: underline;
}
#crossline14 select,#crossline21 select{
    color: #555;
    background: transparent;
    position: relative;
    z-index: 888;
    font-size: 16px;
    width: 100%;
    border-radius: 0;
    padding: 14px;
    border: 1px solid #E6E6E6;
    font-family: "josefin";
    padding-left: 66px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#crossline14 .input-select::after,#crossline21 .input-select::after  {
    content: '\f107';
    font-family: "fontawesome";
    position: absolute;
    z-index: 11;
    top: 50%;
    font-size: 24px;
    right: 22px;
    margin-top: -12px;
    color: #f8b912;
}
#crossline14 textarea,#crossline21 textarea{
    color: #555;
    background: #ffffff;
    font-size: 16px;
    border-radius: 0;
    width: 88%;
    padding: 12px 10px;
    height: 100px;
    padding-left: 66px;
    border: 1px solid #E6E6E6;
    font-family: "josefin";
}
#crossline14 h3.title,#crossline21 h3.title {
        text-align: left;
    margin-bottom: 10px;
    color: #1e2c35;
    letter-spacing: 2px;
    position: relative;
    font-family: "avenir";
    text-transform: uppercase;
    font-size: 25px;
    margin-top: 30px;
}
#crossline14 #msg-btn,#crossline21 #msg-btn{
color: #fff;
    display: inline-block;
    padding: 13px;
    border: 0;
    letter-spacing: 1px;
    border-radius: 4px;
    font-size: 15px;
    font-family: "oswald";
    margin: 5px auto 30px;
    width: 60%;
    text-align: center;
    cursor: pointer;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
}
#container16{
    height: auto;
    padding-top: 0px;
    padding-bottom: 0;
    width: 100%;
    margin: 0 0;
    position: relative;
    margin-bottom: 50px;
    margin-top: 90px;
}
#crossline16{
    position: relative;
    height: auto;
}
#container16 .info-section{
     width: 100%;
    margin: 70px 0;
    opacity: 1;
    position: relative;
    z-index: 998;
    -webkit-animation: animsection 0.8s ease-in 0s both;
    -moz-animation: animsection 0.8s ease-in 0s both;
    -ms-animation: animsection 0.8s ease-in 0s both;
    -o-animation: animsection 0.8s ease-in 0s both;
    animation: animsection 0.8s ease-in 0s both;
}
@-webkit-keyframes animsection{
    0%{ opacity:0; margin-top: 50px; }
    100%{ opacity:1; margin-top: 50px;}
}
@-moz-keyframes animsection{
    0%{ opacity:0; margin-top: 50px; }
    100%{ opacity:1; margin-top: 50px;}
}
@-ms-keyframes animsection{
    0%{ opacity:0; margin-top: 50px; }
    100%{ opacity:1; margin-top: 50px;}
}
@-o-keyframes animsection{
    0%{ opacity:0; margin-top: 50px; }
    100%{ opacity:1; margin-top: 50px;}
}
@keyframes animsection{
    0%{ opacity:0; margin-top: 50px; }
    100%{ opacity:1; margin-top: 50px;}
}
#container16 span{
    letter-spacing: 6px;
    font-family: "avenir";
    color: #fff;
    font-size: 12px;
    margin-top: 0px;
    margin-bottom: 5px;
    left: 0;
    text-align: center;
    border-radius: 3px;
    display: block;
    z-index: 999;
    position: relative;
}
#container16 h2{
    z-index: 994;
    text-align: center;
    position: relative;
    font-size: 35px;
    bottom: 0;
    font-family: "avenir";
    color: #fff;
    left: 0;
    border-radius: 3px;
}
#container16 p{
    z-index: 994;
    text-align: center;
    position: relative;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 2px;
    font-family: "josefin";
    width: 60%;
    margin: 20px auto 0;
    color: #fff;
    font-weight: bold;
    left: 0;
    border-radius: 3px;
}
#container16.contact{
    background: url(../imgs/fondos/tb/fondo-contacto.jpg) center center;
    background-size: cover;
}
#container16.budget{
    background: url(../imgs/fondos/tb/fondo-presupuesto.jpg) center center;
    background-size: cover;
}
#container16.install{    
    background: url(../imgs/fondos/tb/fondo-instalaciones.jpg) center center;
    background-size: cover;
}
#container16.employ{
    background: url(../imgs/fondos/tb/fondo-empleo.jpg) center center;
    background-size: cover;
}
#container16.blog{
    background: url(../imgs/fondos/tb/fondo-blog.jpg) center center;
    background-size: cover;
}
#container16 .center-img{
    position: absolute;
    z-index: 888;
    bottom: -42px;
    left: 50%;
    margin-left: -42px;
}
#container16 .framework {
    width: 100%;
    height: 100%;
    background: url(../imgs/puntos-op1.png);
    z-index: 778;
    position: absolute;
    top: 0;
    left: 0;
}
#container17{
    background: url(../imgs/fondo-web.jpg);
    position: relative;
    min-height: 1000px;
}
#container17 h2.title{
 font-size: 22px;
    line-height: 24px;
    width: 95%;
    margin: 0 2.5% 10px;
    text-align: center;
}
#crossline17{
    width:100%;
    padding: 80px 0;
}
#container17 .countdown{
    width: 100%;
    position: relative;
}
#container17 .countdown ul {
    width: 80%;
    float: left;
    margin: 0 10%;
    display: inline-block;
    background: transparent;
    position: relative;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 777;
}
#container17 .countdown ul li {
    width: 23%;
    margin: 1%;
    float: left;
    padding: 5px 0;
    text-align: center;
}
#container17 .countdown ul li span.draw-number {
    display: block;
    font-family: "oswald";
    font-size: 25px;
    color: #000;
}
#container17 .countdown ul li span.draw-time {
    display: block;
    font-family: "oswald";
    font-size: 10px;
    color: #000;
}
#container17 .offert{
    width: 100%;
    position: relative;
}
#crossline17 ul.energys li{
    width: 24%;
    height: 100px;
    margin: 0.5%;
    padding-top: 10px;
    float: left;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    background: #fff;
    border-top: 3px solid #ffc50d;
    position: relative;
    overflow: hidden;
}
#crossline17 ul.energys li .m-energy{
    display: block;
    width: 62px;
    height: 62px;
    background: url(../imgs/energias.png);
    display: block;
    position: relative;
    z-index: 900;
    margin:0 auto;

    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}
#crossline17 ul.energys li #energys-1{
    background-position: 0 0;
}
#crossline17 ul.energys li:hover #energys-1{
    background-position: 0 -62px;
}
#crossline17 ul.energys li #energys-2{
    background-position: -60px 0;
}
#crossline17 ul.energys li:hover #energys-2{
    background-position: -60px -62px;
}
#crossline17 ul.energys li #energys-3{
    background-position: -124px 0;
}
#crossline17 ul.energys li:hover #energys-3{
     background-position: -124px -62px;
}
#crossline17 ul.energys li #energys-4{
    background-position: -186px 0;
}
#crossline17 ul.energys li:hover #energys-4{
    background-position: -186px -62px;
}
#crossline17 ul.energys li #energys-5{
    background-position: -248px 0;
}
#crossline17 ul.energys li:hover #energys-5{
    background-position: -248px -62px;
}
#crossline17 ul.energys li #energys-6{
    background-position: -310px 0;
}
#crossline17 ul.energys li:hover #energys-6{
    background-position: -310px -62px;
}
#crossline17 ul.energys li #energys-7{
    background-position: -372px 0;
}
#crossline17 ul.energys li:hover #energys-7{
    background-position: -372px -62px;
}
#crossline17 ul.energys li #energys-8{
    background-position: -434px 0;
}
#crossline17 ul.energys li:hover #energys-8{
    background-position: -434px -62px;
}
#crossline17 ul.energys li span.en{
    display: block;
    background: #fff;
    padding: 10px 0;
    font-family: "oswald";
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
    font-size: 14px;
    position: relative;
    z-index: 888;
    height: 20px;
}
#crossline17 ul{
    width: 95%;
    margin: 0 auto;
}
#crossline17 ul.energys li .mask-en{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffc50d;
    top:-100%;
    left: 0;
    z-index: 888;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}
#crossline17 ul.energys li:hover .mask-en{
    top:0;
}
#crossline17 ul.energys li:last-child{
    margin-right: 0%;
}
#crossline17 .gallery{
    width: 100%;
    float: left;
}
#crossline17 .instalation{
    width: 46%;
    background: #fff;
    padding: 1%;
    float: left;
    margin: 0 1% 1% 1%;
    -webkit-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.1);
}
#crossline17 .instalation .image-install{
    width: 100%;
    height: 230px;
    display: block;
    float: left;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
#crossline17 .instalation .image-install::after{
    content: '';
    width: 0px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -120px;
    opacity: 0.4;
    background: #F6BB19;
    transition: all .3s ease;
    -webkit-transition:all 0.8s;
    -moz-transition:all 0.8s;
    -ms-transition:all 0.8s;
    -o-transition:all 0.8s;
    transition:all 0.8s;
}
#crossline17 .instalation .image-install:hover::after{
    width: 640px;
}
#crossline17 .instalation .image-install::before{
    content: '';
    width: 0px;
    height: 100%;
    position: absolute;
    opacity: 0.6;
    top: 0;
    left: -120px;
    background: #F6BB19;
    transition: all .3s ease;
    -webkit-transition:all 1.3s;
    -moz-transition:all 1.3s;
    -ms-transition:all 1.3s;
    -o-transition:all 1.3s;
    transition:all 1.3s;
}
#crossline17 .instalation .image-install:hover::before{
    width: 640px;
}
#crossline17 .instalation .data-install {
    padding: 15px 0 0px;
    float: left;
    width: 100%;
}
#crossline17 .instalation .data-install .install{
    border-left: 3px solid #f99501;
    padding-left: 10px;
    font-family: "avenir";
    color: #333;
    font-weight: bold;
    letter-spacing: 1px;
}
#crossline17 .instalation .data-install ul li {
    width: 49.5%;
    float: left;
    margin-top: 10px;
    background: #f1f1f1;
    padding: 10px 0;
    text-align: center;
    margin-right: 1%;
    letter-spacing: 2px;
}
#crossline17 .instalation .data-install ul li:last-child {
    margin-right: 0%;
}
#crossline17 .instalation .view {
    width: 70px;
    cursor: pointer;
    height: 70px;
    display: block;
    position: relative;
    padding: 10px;
    margin: 0 auto;
    top: 50%;
    margin-top: -45px;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
    z-index: 777;
    opacity: 0;
}
#crossline17 .instalation:hover .view {
    opacity: 1;
}
#crossline17 .instalation .view .line-1 {
    width: 75%;
    height: 75%;
    display: block;
    margin: 0 auto;
    border: 1px solid #fff;
    position: absolute;
    border-radius: 50%;
    left: 50%;
    margin-left: -37.5%;
    top: 50%;
    opacity: 0.5;
    margin-top: -36.5%;
    -webkit-animation: movementer 1s infinite;
    -moz-animation: movementer 1s infinite;
    -ms-animation: movementer 1s infinite;
    -o-animation: movementer 1s infinite;
    animation: movementer 1s infinite;
}
#crossline17 .instalation .view .line-2 {
    width: 75%;
    height: 75%;
    display: block;
    margin: 0 auto;
    border: 1px solid #fff;
    position: absolute;
    border-radius: 50%;
    left: 50%;
    margin-left: -37.5%;
    top: 50%;
    opacity: 0.5;
    margin-top: -36.5%;
    -webkit-animation: movementer 1s infinite;
    -moz-animation: movementer 1s infinite;
    -ms-animation: movementer 1s infinite;
    -o-animation: movementer 1s infinite;
    animation: movementer 1s infinite;
}
#crossline17 .instalation .view a {
text-align: center;
    font-family: "oswald";
    color: #ffffff;
    position: absolute;
    top: 50%;
    margin-top: -17px;
    left: 0;
    margin-left: 2px;
    font-size: 14px;
    text-transform: uppercase;
    width: 100%;
}

#crossline17 #lines{
    width: 100%;
    float: left;
    position: relative;
    margin-top: 50px;
    margin-bottom: 40px;
}
#crossline17 #lines:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #e5e5e5;
    top: 0;
    margin-top: 15px;
    left: 0;
    z-index: 0;
}
#crossline17 .line-circle{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background: #333;
    margin: 0 auto;
}
#crossline17 .line-arrow{
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    position: relative;
        z-index: 100;
    color: #fff;
    background: #333;
    margin: 0 auto;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
}
#crossline17 .line-arrow .fa{
    position: relative;
    z-index: 12;
}
#crossline17 .line-arrow:after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: 10;
    opacity: 0;
    background: rgba(249, 148, 0,0.5);
    border-radius: inherit;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -webkit-animation: cirsa 1s infinite;
    -moz-animation: cirsa 1s infinite;
    -ms-animation: cirsa 1s infinite;
    -o-animation: cirsa 1s infinite;
    animation: cirsa 1s infinite;
}
@-webkit-keyframes cirsa  {
    0%{width: 100%; height:100%;top:0%;left: 0%; opacity: 1}
    100% {width: 200%; height:200%;top:-50%;left: -50%;opacity: 0}
}
@-moz-keyframes cirsa  {
    0%{width: 100%; height:100%;top:0%;left: 0%; opacity: 1}
    100% {width: 200%; height:200%;top:-50%;left: -50%;opacity: 0}
}
@-o-keyframes cirsa  {
    0%{width: 100%; height:100%;top:0%;left: 0%; opacity: 1}
    100% {width: 200%; height:200%;top:-50%;left: -50%;opacity: 0}
}
@-ms-keyframes cirsa  {
    0%{width: 100%; height:100%;top:0%;left: 0%; opacity: 1}
    100% {width: 200%; height:200%;top:-50%;left: -50%;opacity: 0}
}
@keyframes cirsa  {
    0%{width: 100%; height:100%;top:0%;left: 0%; opacity: 1}
    100% {width: 200%; height:200%;top:-50%;left: -50%;opacity: 0}
}
#crossline17 .line-arrow .fa{
    margin-top: 7px;
}
#crossline17 .instalation span{
   width: 100%;
    font-size: 12px;
    letter-spacing: 0;
    padding: 2px 0;
    color: #666;
    font-weight: 500;
    font-family: "avenir";
}
#crossline17 .interest,#container22 .interest,#container28 .interest{
    width:300px;
    float: right;
    height: 100%;
    display: none;
}
#crossline17 .interest .back-top {
    width: 100%;
    color: #fff;
}
#crossline17 .interest .back-top .top{
    background: #f5be05;
    border-bottom: 1px solid #333;
    padding: 5px 0;
    text-align: center;
}
#crossline17 .interest .back-top .top p{
    font-family: "avenir";
    letter-spacing: 2px;
    font-size: 13px;
}
#crossline17 .interest .back-bottom {
    background: #f4f4f4;
    width: 100%;
    height: 45%;
    color: #fff;
}
#crossline17 .interest .back-bottom input{
    color: #555;
    background: #ffffff;
    font-size: 16px;
    width: 68%;
    border-radius: 0;
    padding: 14px;
    border: 1px solid #E6E6E6;
    font-family: "josefin";
    margin-bottom: 10px;
    margin: 10px;
    padding-left: 66px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#crossline17 .interest .back-bottom input#mail-btn{
    display: block;
    color: #fff;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    border: 0px solid transparent;
    text-align: center;
    padding: 10px 20px;
    border-radius: 5px;
    position: relative;
    font-family: "oswald";
    font-size: 12px;
    z-index: 888;
    margin-top: 13px;
}
#crossline17 .dribbblite,#crossline22 .dribbblite,#crossline28 .dribbblite {
    width: 275px;
    min-height: 518px;
    background: #fff;
    padding: 10px;
    position: relative;
}
#crossline17 .dribbblite.new-top6,#crossline22 .dribbblite.new-top6,#crossline28 .dribbblite.new-top6{
    position: fixed;
    top: 108px;
    z-index: 888;
}
#crossline17 .dribbblite.new-top7,#crossline22 .dribbblite.new-top7,#crossline28 .dribbblite.new-top7{
    position: absolute;
    bottom: 95px;
    top: inherit;
}
#crossline17 .dribbblite .count,#crossline22 .dribbblite .count,#crossline28 .dribbblite .count {
    float: left;
    padding: 5px 0;
    background: #1e2c35;
    display: block;
    width: 315px;
    top: 0px;
    left: -10px;
    margin: 0;
    height: 50px;
    color: #fff;
    position: absolute;
}
.count .l-triangle,.of-text  .l-triangle {
    position: absolute;
    border-color: #999  transparent transparent transparent;
    border-width: 10px 10px 0 0;
    right: 0;
    top: 78px;
    width: 0;
    height: 0;
    border-style: solid;
}
.count .r-triangle,.of-text  .r-triangle{
    position: absolute;
    border-color: #999  transparent transparent transparent;
    border-width: 10px 0px 0 10px;
    left: 0;
    top: 78px;
    width: 0;
    height: 0;
    border-style: solid;
}
#crossline17 .count p,#crossline22 .count p,#crossline28 .count p {
    width: 100%;
    float: left;
    color: #b7cace;
    text-align: center;
    margin: 5px 0;
    font-size: 16px;
    line-height: 20px;
    font-family: "avenir";
    letter-spacing: 1px;
}
#crossline17 .count p .fa,#crossline22 .count p .fa,#crossline28 .count p .fa, .of-left .fa{
    color: #f8b912;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
   -webkit-animation: mover 1s infinite;
    -moz-animation: mover 1s infinite;
    -ms-animation: mover 1s infinite;
    -o-animation: mover 1s infinite;
    animation: mover 1s infinite;
}
@-webkit-keyframes mover  {
    0% {    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);}
    50%{    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);}
    100% {    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);}
}
@-moz-keyframes mover  {
    0% {    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);}
    50%{    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);}
    100% {    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);}
}
@-o-keyframes  mover  {
    0% {    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);}
    50%{    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);}
    100% {    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);}
}
@-ms-keyframes  mover  {
    0% {    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);}
    50%{    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);}
    100% {    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);}
}
@keyframes  mover  {
    0% {    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);}
    50%{    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);}
    100% {    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);}
}
#crossline17 .count-2,#crossline22 .count-2,#crossline28 .count-2 {
    margin-top: 65px;
}
#crossline17 .count-2 ul,#crossline22 .count-2 ul,#crossline28 .count-2 ul{
    width: 75%;
    margin: 0 auto;
}
.count-2 p{
    font-size: 17px;
    font-family: "oswald";
    text-align: center;
    color: #1e2c35;
    letter-spacing: 1px;
    margin: 10px 0 0px;
    float: left;
    width: 100%;
}
#crossline17 .count-2 ul li span,#crossline22 .count-2 ul li span,#crossline28 .count-2 ul li span {
    color: #1e2c35;
    font-family: "oswald";
    letter-spacing: 1px;
    font-size: 10px;
    display: block;
    width: 80%;
}
#crossline17 .count-2 ul li span.nu,#crossline22 .count-2 ul li span.nu,#crossline28 .count-2 ul li span.nu {
    font-size: 18px;
}
#crossline17 .count-2 ul li,#crossline22 .count-2 ul li,#crossline28 .count-2 ul li {
    width: 25%;
    float: left;
    text-align: center;
}
#crossline17 ul.count li span,#crossline22 ul.count li span,#crossline28 ul.count li span {
    color: #fff;
    font-family: "oswald";
    letter-spacing: 1px;
    font-size: 10px;
    display: inline-block;
    width: 80%;
}
#crossline17 .dribbblite .text-count,#crossline22 .dribbblite .text-count,#crossline28 .dribbblite .text-count  {
    width: 100%;
    float: left;
    background: #fff;
    margin: 20px 0;
}
#crossline17 .dribbblite .text-count ul li,#crossline22 .dribbblite .text-count ul li,#crossline28 .dribbblite .text-count ul li  {
    width: 100%;
    float: left;
    padding: 5px 0;
    color: #8f8f8f;
    font-size: 14px;
    font-family: "josefin";
    letter-spacing: 1px;
    text-align: left;
    padding-left: 10px;
}
#crossline17 .dribbblite .text-count ul li:last-child,#crossline22 .dribbblite .text-count ul li:last-child,#crossline28 .dribbblite .text-count ul li:last-child{
    border-bottom: 0;
}
#crossline17 .dribbblite .form-count,#crossline22 .dribbblite .form-count,#crossline28 .dribbblite .form-count {
    min-height: 282px;
    width: 93%;
    float: left;
    background: #f6f6f6;
    padding: 10px;
}
#crossline17 .dribbblite .form-count .input-group,#crossline22 .dribbblite .form-count .input-group,#crossline28 .dribbblite .form-count .input-group{
    position: relative;
    margin-bottom: 10px;
}
.dribbblite .form-count .input-group span{
position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    text-align: center;
    color: #777;
    display: block;
    z-index: 889;
    height: 100%;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
}
.dribbblite .form-count .input-group span i{
    padding: 7.5px;
    color: #fff;
}
.dribbblite .form-count label{
    margin-bottom: 5px;
    display: block;
    font-size: 12px;
    color: #141414;
    font-weight: 400;
    text-align: left;
    font-family: "avenir";
}
.dribbblite .form-count input.check {
    padding: 20px 20px 20px 10px;
    margin: 0;
    border: 0;
    height: auto;
    display: inline-block;
    width: 20px;
    box-shadow: none;
}
.dribbblite .form-count input#msg-btn {
    display: block;
    color: #fff;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    border: 0px solid transparent;
    text-align: center;
    padding: 8px 20px;
    border-radius: 5px;
    position: relative;
    font-family: "oswald";
    letter-spacing: 1px;
    font-size: 12px;
    z-index: 888;
    margin: 10px auto 5px auto;
    cursor: pointer;
}
.dribbblite .form-count input#msg-btn:hover {
    background: #f8b912;
    background: -moz-linear-gradient(left, #f8b912 0%, #f99400 100%);
    background: -webkit-linear-gradient(left, #f8b912 0%, #f99400 100%);
    background: linear-gradient(to right, #f8b912 0%, #f99400 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8b912', endColorstr='#f99400',GradientType=1 );
}
.dribbblite .form-count span {
    font-family: "josefin";
    letter-spacing: 1px;
    color: #999;
    font-size: 14px;
    display: inline-block;
    width: 80%;
}
.dribbblite .form-count span a {
    font-family: "josefin";
    letter-spacing: 1px;
    color: #999;
    font-size: 14px;
    display: inline-block;
    text-decoration: underline;
}
#crossline17 ::-webkit-input-placeholder,#crossline22 ::-webkit-input-placeholder,#crossline28 ::-webkit-input-placeholder {
    color: #aaa;
    font-family: "josefin";
}
#crossline17 :-moz-placeholder,#crossline22 :-moz-placeholder,#crossline28 :-moz-placeholder { /* Firefox 18- */
    color: #aaa;
    font-family: "josefin";
}
#crossline17 ::-moz-placeholder,#crossline22 ::-moz-placeholder,#crossline28 ::-moz-placeholder {  /* Firefox 19+ */
    color: #aaa;
    font-family: "josefin";
}
#crossline17 :-ms-input-placeholder,#crossline22 :-ms-input-placeholder,#crossline28 :-ms-input-placeholder  {  
    color: #aaa;
    font-family: "josefin";
}
.dribbblite .form-count .input-group input{
color: #555;
    font-family: "josefin";
    background: #ffffff;
    font-size: 14px;
    width: 72%;
    padding: 6px;
    border: 1px solid #E6E6E6;
    padding-left: 58px;
}
#container18{
    background: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #dcdcdc;
}
#crossline18{
}
#container19{
}
#crossline19 .install-left{
    width: 30%;
    float:left;
}
#crossline19 .install-right{
    width: 30%;
    float:right;
}
#crossline19 .install-right h3{
    color:#b3b3b3;
}
#container20{
    background: #1f2d36;    
    padding-bottom: 40px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#container20 .footer-cpr{
    width: 100%;
    float: left;
    position: relative;
}
#container20 .top{
 background: #1f2d36;
    width: 40px;
    top: -40px;
    padding: 5px 0;
    position: absolute;
    left: 50%;
    font-size: 13px;
    margin-left: -20px;
    z-index: 990;
    text-align: center;
    color: #fff;
}
#container20 .top:before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 0;
    top: 0;
    left: -34px;
    border-left: 34px solid transparent;
    border-right: 34px solid transparent;
    border-bottom: 34px solid #1f2d36;
}
#container20 .top a{
     color: #fff;
    position: relative;
    display: block;
    height: 20px;
    transition: all 0.2s;
    padding-top: -12px;
}
#container20 .top a .fa{
    padding-top: 4px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
#container20 .top a:hover .fa{
    padding-top: 0px;
}
#container20 .footer-cpr p{
    text-align: center;
    font-family: "josefin";
    margin-left: 0;
    font-size: 14px;
    color: #fff;
    letter-spacing: 2px;
}
#container20 .footer-cpr p a{
    color:#f8b912;
}
#container21{
    background: url(../imgs/fondo-web.jpg);
    padding: 80px 0 80px;
    position: relative;
}
#crossline21 h2.title {
    font-size: 35px;
    width: 95%;
    margin: 0 2.5% 10px;
}
#crossline21 ul.offert{
    width: 100%;
    float: left;
}
#crossline21 ul.offert li{
    width: 45%;
    margin: 5px 2.5%;
    float: left;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
#crossline21 ul.offert li:last-child{
    margin-right: 0%;
}
#crossline21 ul li .notice-img{
    height: 250px;
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}
#crossline21 ul li .notice-img .notice-framework{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(248, 185, 18,0.3);
    bottom: -100%;
    left: 0;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}
#crossline21 ul li:hover .notice-img .notice-framework{
    bottom: 0%;
}
#crossline21 ul li .notice-img img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}
#crossline21 ul li:hover .notice-img img{
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
}
#crossline21 ul li .notice-text{
    background: #fff;
    position: relative;
}
#crossline21 ul li .notice-text a {
    font-size: 12px;
    font-family: "oswald";
    float: right;
    text-transform: uppercase;
    color: #b9b9b9;
    letter-spacing: 1px;
    width: 100px;
    margin: 0 auto;
    text-align: center;
    display: block;
    margin-top: 19px;
}
#crossline21 ul li .notice-text a:hover{
    color: #333;
}
.notice-text span{
    display: block;
    width: 30%;
    color: #444;
    margin: 10px auto;
    background: #fff;
    position: relative;
    font-family: "josefin";
}
.notice-text span:after{
    display: block;
    background:#333;
    width: 100%;
    height: 1px;
}
#crossline21 ul li .notice-text .center{
    width: 50px;
    height: 50px;
    float: left;
    background: #f8b912;
    text-align:center;
}
#crossline21 ul li .notice-text .notice{
    width: 95%;
    border-top: 1px solid #dcdcdc;
    padding: 10px 0;
    margin-top: 40px;
}
#crossline21 ul li .notice-text .notice .notice-left{
    width:50%;
    float: left;
    text-align: left;
    font-family: "josefin";
}
#crossline21 ul li .notice-text .notice .fa{
    color: #f99400;
}
#crossline21 ul li .notice-text .notice .notice-right{
    color: #008075;
    text-align: right;
    font-family: "oswald";
    letter-spacing: 1px;
    font-size: 13px;
}
#crossline21 ul li .notice-text .center .fa{
    font-size: 30px;
    color: #fff;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
    margin-top:10px;
}
#crossline21 ul li .notice-text h3{
font-family: "oswald";
    margin-bottom: 10px;
    font-size: 10px;
    color: #666;
    letter-spacing: 2px;
    position: relative;
    text-align: center;
    padding-top: 30px;
}
#crossline21 ul li .notice-text h2{
font-family: "avenir";
    line-height: 24px;
    margin-bottom: 10px;
    color: #333;
    font-size: 15px;
    text-align: left;
    position: relative;
    float: left;
    width: 75%;
    margin-left: 10px;
    margin-top: 14px;
}
#crossline21 ul li:hover .center .fa{
    -webkit-transform:rotate(359deg);
    -moz-transform:rotate(359deg);
    -ms-transform:rotate(359deg);
    -o-transform:rotate(359deg);
    transform:rotate(359deg);
}
#container22 {
    background: url(../imgs/fondo-web.jpg);
    position: relative;
    min-height: 100%;
    padding: 80px 0 92px 0;
}
#container22 .curriculum{
    display: block;
    color: #fff;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    border: 0px solid transparent;
    text-align: center;
    padding: 10px 20px;
    border-radius: 1000px;
    position: relative;
    font-family: "oswald";
    font-size: 14px;
    z-index: 888;
    margin-top: 14px;
    width: 20%;
}
#crossline22{
    width: 100%;
    padding: 80px 0 120px;
}
#crossline22 .notice {
    width: 90%;
    float: left;
    background: #fff;
    padding: 2.5%;
    margin-left: 2.5%;
}
#crossline22 .notice img.first-notice,#crossline22 .notice img.img-notice{
    margin: 30px 0 0;
    max-width: 100%;
}
#crossline22 .notice span.type {
    letter-spacing: 2px;
    color: #f99400;
    font-family: "oswald";
    font-style: inherit;
    font-size: 12px;
    margin-left: 3px;
    margin-bottom: 5px;
    display: block;
    text-transform: uppercase;
}
#crossline22 .notice span.date{
    color: #444;
    display: block;
    font-size: 14px;
    line-height: 20px;
    font-family: "josefin";
}
#crossline22 .notice h2.title{
    font-size: 25px;
    line-height: 35px;
    color: #1e2c35;
    font-family: "avenir";
    margin: 0;
}
#crossline22 .notice p{
    color: #666;
    font-size: 16px;
    line-height: 22px;
    font-family: "josefin";
    letter-spacing: 2px;
    margin: 30px 0;
}
#crossline22 .notice span.footer{
    color: #444;
    display: block;
    font-size: 14px;
    font-style: italic;
    line-height: 20px;
    font-family: "josefin";
    letter-spacing: 2px;
    font-weight: bold;
}
#crossline22 .notice p.others {
    margin-top: 40px;
}
.buttons{
    width: 100%;
    float: left;
    margin-top: 50px;
    text-align: center;
}
.buttons a.btn {
    position: relative;
    z-index: 910;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    float: left;
    color: #ffffff;
    font-family: "oswald";
    line-height: 30px;
    width: 46%;
    text-align: center;
    border: 1px solid #ffa14d;
    border-radius: 5px;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
    display: inline-block;
    margin-left: 0;
    margin: 0 1.6%;
    margin-top: 0;
}
.buttons a.btn:hover {
    color: #333;
}
#crossline17 h4{
    background: #ffc50d;
    padding: 15px 0;
    text-align: center;
    font-family: "oswald";
}
#crossline17 .dribbblite.new-top6,#crossline22 .dribbblite.new-top6{
    position: fixed;
    top: 108px;
}
#crossline25{
}
#container26{    
    background: url(../imgs/fondo-web.jpg);
    padding: 50px 0;
    position: relative;
}
#crossline26{
    width: 95%;
}
#crossline26 h6{
    font-family: "avenir";
    font-size: 20px;
    font-weight: 600;
}
#crossline26 p {
    letter-spacing: 2px;
    font-family: "josefin";
    text-align: left;
    line-height: 30px;
    margin-bottom: 30px;
    float: right;
    color: #8f8f8f;
    font-size: 16px;
}
#container33,#container28{
    background: url(../imgs/fondo-web.jpg);
    position: relative;
}
#crossline17 .middle{
width: 95%;
    margin: 0 2.5% 10px;
    float: left;
    text-align: center;
    font-family: "avenir";
    font-size: 22px;
    color: #444;
}
#crossline17 .middle .center {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 5px #fff solid;
    text-align: center;
    margin: 30px auto 10px;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
}
.cassell{
    width: 100%;
    float: left;
    margin-top: 50px;
}
#crossline17 .middle .center .fa {
    font-size: 30px;
    color: #fff;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin-top: 20px;
}
#crossline17 .middle p {
    width: 100%;
    font-family: "avenir";
    font-size: 20px;
    line-height: 25px;
}
#container28{
    padding: 150px 0 20px;
}
#crossline28{
    width: 100%;
}
#crossline28 .file {
    width: 100%;
    float: left;
}
#container28 .file-left{
    background: #d8d8d8;
    width: 80%;
    height: auto;
    position: relative;
    float: left;
    margin-left: 10%;
    -webkit-animation: intro 1s;
    -moz-animation: intro 1s;
    -ms-animation: intro 1s;
    -o-animation: intro 1s;
    animation: intro 1s;
}
@-webkit-keyframes intro {
    0%{width:80%;}
    100%{ width: 80%;}
}
@-moz-keyframes intro {
    0%{width: 80%;}
    100%{ width: 80%;}
}
@-ms-keyframes intro {
    0%{width: 80%;}
    100%{ width: 80%;}
}
@-o-keyframes intro {
    0%{width: 80%;}
    100%{ width: 80%;}
}
keyframes intro {
    0%{width: 80%;}
    100%{ width: 80%;}
}
#container28 .file-left-image{
    background-size: cover;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    -webkit-animation: introimg 1.5s;
    -moz-animation: introimg 1.5s;
    -ms-animation: introimg 1.5s;
    -o-animation: introimg 1.5s;
    animation: introimg 1.5s;
}
@-webkit-keyframes introimg {
    0%{ width: 100%; }
    100%{ width: 100%;}
}
@-moz-keyframes introimg {
    0%{ width: 100%; }
    100%{ width: 100%;}
}
@-ms-keyframes introimg {
    0%{ width: 100%; }
    100%{ width: 100%;}
}
@-o-keyframes introimg {
    0%{ width: 100%; }
    100%{ width: 100%;}
}
keyframes introimg {
    0%{ width: 100%; }
    100%{ width: 100%;}
}
#crossline28 .file-left-image img{
    position: relative;
    top: 0px;
    left: 0;
    width: 100%;
}
#crossline28 .file-right{
    width: 95%;
    float: left;
    height: auto;
    padding-bottom: 38px;
    margin-top: 0;
    margin-left: 2.5%;
    text-align: left;
    background: #fff;
    position: relative;
    overflow: hidden;
    -webkit-animation: introbio 1s;
    -moz-animation: introbio 1s;
    -ms-animation: introbio 1s;
    -o-animation: introbio 1s;
    animation: introbio 1s;
    -webkit-box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
@-webkit-keyframes introbio {
    0%{ width: 95%; }
    100%{ width: 95%;}
}
@-moz-keyframes introbio {
    0%{ width: 95%; }
    100%{ width: 95%;}
}
@-ms-keyframes introbio {
    0%{ width: 95%; }
    100%{ width: 95%;}
}
@-o-keyframes introbio {
    0%{ width: 95%; }
    100%{ width: 95%;}
}
keyframes introbio {
    0%{ width: 95%; }
    100%{ width: 95%;}
}
#crossline28 .bio{
    text-align: left;
    width: auto;
    background: #fff;
    position: relative;
    top: 0;
    right: 0;
    height: 100%;
}
#crossline28 .file-right p.others{
position: absolute;
    bottom: -35px;
    font-size: 14px;
    font-family: "oswald";
    color: #1e2c35;
}
#crossline28 .others a{
width: 20px;
    height: 20px;
    margin: 0 2px;
    text-align: center;
    display: inline-block;
    border: 1px solid #f8b912;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.file-right .fa{
    color: #f8b912;
    padding-top: 2px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    transition: all 0.5s;
}
#crossline28 .others a:hover{
    background: #f8b912;
    border: 1px solid #f8b912;
}
.file-right a:hover .fa{
    color: #fff;
}
#crossline28 .file-right p{
    color: #8f8f8f;
    font-size: 16px;
    line-height: 20px;
    font-family: "josefin";
    letter-spacing: 1px;
    text-align: left;
    padding: 20px;
}
#crossline28 .file-right p span.elite-1{
    font-family: "avenir";
    color: #333;
    letter-spacing: 0;
    font-size: 18px;
}
#crossline28 .file-right p span.elite-2{
    font-family: "avenir";
    color: #333;
    letter-spacing: 0;
    font-size: 15px;
}
#crossline28 .file-right h1 {
text-align: left;
    margin-bottom: 10px;
    color: #333;
    letter-spacing: 2px;
    position: relative;
    font-family: "avenir";
    line-height: 35px;
    text-transform: uppercase;
    font-size: 30px;
    border-left: 3px solid #f99400;
    padding: 5px 10px;
    margin: 20px 20px 0 20px;
}
#container29{
    padding: 0;
}
#container29 .budget-left{
    width: 50%;
    float: left;
    padding: 100px 0;
    color: #fff;
    background: blue;
    display: block;
}
#container29 .budget-right{
    width: 50%;
    float: right;
    padding: 100px 0;
    color: #fff;
    background: red;
    display: block;
}
#container30{
    background:#f7fafb;
}
#crossline30 .certificate{    
    width: 100%;
    text-align: center;
    float: left;
    margin-right: 20px;
    height: 120px;
    font-size: 24px;
    line-height: 30px;
}
#crossline30 .certificate p{
    width: 100%;
    text-align: center;
    float: left;
    font-size: 30px;
    margin-top: 35px;
    font-family: "avenir";
    letter-spacing: 2px;
}
#crossline30 .certificate span{
    width: 100%;
    text-align: center;
    float: left;
    font-size: 17px;
    color: #8f8f8f;
    font-family: "josefin";
    letter-spacing: 2px;
}
#crossline30 .certificate span .fa{
   -webkit-animation: lefter 1s infinite;
    -moz-animation: lefter 1s infinite;
    -ms-animation: lefter 1s infinite;
    -o-animation: lefter 1s infinite;
    animation: lefter 1s infinite;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);
}
@-webkit-keyframes lefter  {
    0% {margin-left: 0px;}
    50%{margin-left: 0px;}
    100% {margin-left: 0px;}
}
@-moz-keyframes lefter  {
    0% {margin-left: 0px;}
    50%{margin-left: 0px;}
    100% {margin-left: 0px;}
}
@-o-keyframes lefter  {
    0% {margin-left: 0px;}
    50%{margin-left: 0px;}
    100% {margin-left: 0px;}
}
@-ms-keyframes lefter  {
    0% {margin-left: 0px;}
    50%{margin-left: 0px;}
    100% {margin-left: 0px;}
}
@keyframes lefter  {
    0% {margin-left: 0px;}
    50%{margin-left: 0px;}
    100% {margin-left: 0px;}
}
#crossline30 img {
     margin-right: 12.5px;
    opacity: 0;
    width: 16%;
    margin: 0 4% 20px 4%;
}
#crossline30 img.last-img {
    margin-right: 0;
    display: none;
}
.container31{
    width: 100%;
    height: 0%;
    top:50%;
    left: 0;
    background: rgba(0,0,0,0.8);
    position: fixed;
    z-index: 999;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    padding: 0;
}
.effectopen{
    height: 100%;
    top:0;
    left: 0;
    background: rgba(0,0,0,0.8);
    position: fixed;
    z-index: 999;
}
.container31 .open-image{
    width: 70%;
    height: auto;
    text-align: center;
    position: absolute;
    top: 20px;
    left: 15%;
    margin-left: 0;
    margin-top: 20px;
    margin: 0 auto;
    float: none;
}
.container31 .open-image img{
        width: 100%;
    margin-left: -2px;
    border: 2px solid #fff;
}
.container31 .open-image p{
    color: #fff;
    font-family: "avenir";
    font-size: 20px;
}
.container31 #close{
    color: #f00;
    font-size: 20px;
    top: -7px;
    right: -7px;
    cursor: pointer;
    position: absolute;
}
#container32{
    padding: 50px 0;
    background: #aeaeae;
}
#admin-panel{
    color: #555;
    width: 100%;
    height: auto;
    padding-bottom: 110px;
    position: relative;
    background-color: #EFF1F2;
    text-align: center;
}
#admin-panel #admin-emegex{
    margin-top: 60px;
}
#admin-panel p{
    font-family: "oswald";
    font-size: 20px;
    color: #666;
}
#admin-panel span{
    font-family: "oswald";
    color: #B3B2B2;
    font-size: 10px;
    margin: 0px 0 5px;
    display: block;
    letter-spacing: 2px;
}
#admin-center{
position: relative;
    width: 95%;
    margin-top: 100px;
    height: auto;
    background: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    margin: 100px auto 0;
}
#admin-center img {
    margin-top: -65px;
}
#admin-center form{
    width: 90%;
    margin: 0 auto;
    padding: 5% 2%;
}
#admin-center input{
    border-radius: 5px;
    display: block;
    width: 95%;
    padding: 10px 8px;
    font-size: 12px;
    line-height: 1.42857;
    color: #555;
    background-color: #F5F8F9;
    background-image: none;
    border: 1px solid #C7D6DB;
    margin: 0;
}
#admin-center input#administra{
    font-family: "oswald";
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px;
    padding: 15px;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    background: #f99400;
    color: #fff;
    width: 101%;
    border: 0;
}
#admin-center input#administra:hover{
    background: #f99400;
    color: #000;
}
#admin-center input#admin-bt, .admin-button{
    background-color: #dbc798;
    border: 0;
    color: #fff;
    width: 88%;
    font-family: "oswald";
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px;
    padding: 15px;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    background: #f99400;
    background: -moz-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: -webkit-linear-gradient(left, #f99400 0%, #f8b912 100%);
    background: linear-gradient(to right, #f99400 0%, #f8b912 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
}
.admin-button{
    width: 85%;
    border-radius: 5px;
}
#admin-center input#admin-btn:hover{
    background-color: #BBAB84;
    border: 5px solid #BBAB84;
    color: #fff;
}
#admin-center label{
    font-family: avenir;
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
    text-align: left;
    width: 100%;
    display: block;
}
#admin-header{
    background: url(../imgs/fondoe.png);
    width: 100%;
    position: absolute;
    float: left;
    text-align: center;
}
#admin-data {
    background-color: #EFF1F2;
    padding: 50px 20px;
}
#admin-data p {
    font-family: "oswald";
    font-size: 20px;
    color: #666;
}
#admin-data span {
    font-family: "oswald";
    color: #B3B2B2;
    font-size: 10px;
    margin: 10px 0;
    display: block;
    letter-spacing: 2px;
    text-align: center;
}
#admin-container{
    overflow: hidden;
    background: #eff1f2;
    height: 70%;
}
#admin-container ul {
    width: 100%;
    height: 100%;
    min-height: auto;
    float: left;
    background: #363A41;
    overflow: hidden;
}
#admin-container ul li:first-child{
    font-size: 20px;
    margin: 50px 0 30px 0;
    color: #fff;
    font-family: "oswald";
}
#admin-container ul li:first-child:hover{
    font-size: 20px;
    margin: 50px 0 30px 0;
    color: #fff;
    font-family: "oswald";
}
#admin-container ul li a:hover{
    background: #dbc798;
    color:#333;
}
#admin-container ul li a:hover:before {
    content: url("../imgs/admin-cruz-2.png");
}
#admin-container ul li a{
    color: #BEBEBE;
    padding: 10px 20px;
    width: 100%;
    float: left;
    text-align: left;
    font-size: 15px;
    font-family: "oswald";
}
#admin-container ul li a:before {
    content: url("../imgs/admin-cruz-1.png");
    margin-right: 7px;
    display: inline-block;
    font-size: 17px;
    position: relative;
}
.admin-form {
    float: left;
    width: 100%;
    text-align: center;
    min-height: auto;
    background: #fff;
    padding-bottom: 120px;
}
.admin-form a{
color: #fff;
    font-family: "oswald";
    background: #f99400;
    padding: 5px;
    display: block;
    width: 56%;
    margin: 0 auto;
    cursor: pointer;
    border-bottom: 4px solid #dc8300;
}
.admin-form label{
font-family: "avenir";
    text-align: left;
    width: 90%;
    margin: 20px auto 5px auto;
    display: block;
    text-align: left;
    color: #1d1d1d;
    font-weight: bold;
    font-size: 18px;
}
.admin-form h4{
    font-family: "oswald";
    font-size: 25px;
    color: #1e2c35;
    margin: 50px 0 30px 0;
}
.admin-form input, .admin-form select{
    display: block;
    width: 85%;
    padding: 10px 8px;
    font-size: 12px;
    line-height: 1.42857;
    color: #000;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #C7D6DB;
    margin: 5px auto;
}
.admin-form input.twn{
    width: 11.8%;
    display: inline-block;
}
.admin-form select{
    display: block;
    height: 40px;
    width: 85%;
}
.admin-form textarea{
    height: 80px;
    display: block;
    width: 83%;
    padding: 10px 8px;
    font-size: 12px;
    line-height: 1.42857;
    color: #555;
    background-image: none;
    border: 1px solid #C7D6DB;
    margin: 5px auto;
}
.admin-form input#admin-btn {
    background-color: #dbc798;
    border: 0;
    color: #fff;
    width: 85%;
    font-family: "oswald";
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px;
    padding: 15px;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    background: #f99400;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f99400 ', endColorstr='#f8b912 ',GradientType=1 );
}
.admin-form input#admin-btn:hover {
    background:#f8b912;
    color: #fff;
}
#return-web{
    position: absolute;
    bottom: 10px;
    right: 10px;
}
#cookiebar{
    width: 100%;
    background: rgba(0,0,0,0.6);
    bottom: 0;
    position: fixed;
    z-index: 999;
    }
#cookiebar p{
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 10px;
    font-family: Verdana, Geneva, sans-serif;
    }
#info{
    color:#189acc;
    }
#yes{
    padding:2px;
    color:#fff;
    background:#999;
    }
@media screen and (min-width:0px) and (max-width:1350px){
    .mouse{
        opacity: 0;
    }

}