/* =============================================================================
   Resets
   ========================================================================== */
   
   article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video, img{ display:block; }
   audio, canvas, video{ display:inline-block; *display:inline; *zoom:1; }
   audio:not([controls]){ display:none; }
   [hidden]{ display:none; }
   body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, section, nav, img{ margin:0; padding:0; }
   mark, rp, rt, ruby, summary, time{ display:inline; }
   html{}
   body{ -webkit-backface-visibility:hidden; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale;}
   input, textarea, select{ outline:none; resize:none; border:none; border:0; outline-offset:0;}
   a{ text-decoration:none; outline:none;}
   a.active{ outline:none; }
   .none{ display:none; }
   .float-left{ float:left; }
   .float-right{ float:right; }
   .align-left{ text-align:left; }
   .align-center{ text-align:center!important;}
   .align-right{ text-align:right; }
   .d-block{ display:block;	}
   .no-border{ border:none;}
   .no-margin-top{ margin-top:0!important;}
   .no-padding-top{ padding-top:0!important;}
   .no-margin-bottom{ margin-bottom:0!important;}
   table{ border-collapse:collapse; border-spacing:0; font-size:inherit; font:100%; }
   fieldset, img{ border:0; }
   address, caption, cite, code, dfn, em, /*strong,*/ th, var, optgroup{ font-style:inherit; font-weight:inherit; }
   li{	list-style:none; }
   h1, h2, h3, h4, h5, h6{	font-size:100%; }
   input, button, textarea, select, optgroup, option{ font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; }
   select, input, button, textarea, button{ font:100%; }
   input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0;}
   .clearfix:before, .clearfix:after{ content:""; display:table; }
   .clearfix:after{ clear:both; }
   .clearfix{ *zoom:1; }
   .chromeframe{ margin:0.2em 0; background:#ccc; color:#000; padding:0.2em 0;}
   *:focus { outline: 0 !important;}
   img{ width:100%;}
   .hidden{opacity:0;}
   .grecaptcha-badge{ display:none!important;}
   .animsition,.animsition-overlay{position:relative;opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animsition-overlay-slide{position:fixed;z-index:1;width:100%;height:100%;background-color:#ddd}@-webkit-keyframes overlay-slide-in-top{0%{height:100%}to{height:0}}@keyframes overlay-slide-in-top{0%{height:100%}to{height:0}}.overlay-slide-in-top{top:0;height:0;-webkit-animation-name:overlay-slide-in-top;animation-name:overlay-slide-in-top}@-webkit-keyframes overlay-slide-out-top{0%{height:0}to{height:100%}}@keyframes overlay-slide-out-top{0%{height:0}to{height:100%}}.overlay-slide-out-top{top:0;height:100%;-webkit-animation-name:overlay-slide-out-top;animation-name:overlay-slide-out-top}@-webkit-keyframes overlay-slide-in-bottom{0%{height:100%}to{height:0}}@keyframes overlay-slide-in-bottom{0%{height:100%}to{height:0}}.overlay-slide-in-bottom{bottom:0;height:0;-webkit-animation-name:overlay-slide-in-bottom;animation-name:overlay-slide-in-bottom}@-webkit-keyframes overlay-slide-out-bottom{0%{height:0}to{height:100%}}@keyframes overlay-slide-out-bottom{0%{height:0}to{height:100%}}.overlay-slide-out-bottom{bottom:0;height:100%;-webkit-animation-name:overlay-slide-out-bottom;animation-name:overlay-slide-out-bottom}@-webkit-keyframes overlay-slide-in-left{0%{width:100%}to{width:0}}@keyframes overlay-slide-in-left{0%{width:100%}to{width:0}}.overlay-slide-in-left{width:0;-webkit-animation-name:overlay-slide-in-left;animation-name:overlay-slide-in-left}@-webkit-keyframes overlay-slide-out-left{0%{width:0}to{width:100%}}@keyframes overlay-slide-out-left{0%{width:0}to{width:100%}}.overlay-slide-out-left{left:0;width:100%;-webkit-animation-name:overlay-slide-out-left;animation-name:overlay-slide-out-left}@-webkit-keyframes overlay-slide-in-right{0%{width:100%}to{width:0}}@keyframes overlay-slide-in-right{0%{width:100%}to{width:0}}.overlay-slide-in-right{right:0;width:0;-webkit-animation-name:overlay-slide-in-right;animation-name:overlay-slide-in-right}@-webkit-keyframes overlay-slide-out-right{0%{width:0}to{width:100%}}@keyframes overlay-slide-out-right{0%{width:0}to{width:100%}}.overlay-slide-out-right{right:0;width:100%;-webkit-animation-name:overlay-slide-out-right;animation-name:overlay-slide-out-right}
   html.with-featherlight{overflow:hidden}.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:25px 25px 0;border-bottom:25px solid transparent;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight link.featherlight-inner,.featherlight script.featherlight-inner,.featherlight style.featherlight-inner{display:none}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:25px;width:25px;cursor:pointer;text-align:center;font-family:Arial,sans-serif;background:#fff;background:rgba(255,255,255,.3);color:#000;border:0;padding:0}.featherlight .featherlight-close-icon::-moz-focus-inner{border:0;padding:0}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0;-webkit-overflow-scrolling:touch}.featherlight iframe{border:0}.featherlight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:0;margin-right:0;max-height:98%;padding:10px 10px 0;border-bottom:10px solid transparent}}@media print{html.with-featherlight>*>:not(.featherlight){display:none}}
   
/* ============================
Typography
============================ */

@font-face {
   font-family: 'Open Sans Extra Bold';
   src: url('https://abelcap.wantecno.com/css/fonts/OpenSans-ExtraBold.eot');
   src: url('https://abelcap.wantecno.com/css/fonts/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
   url('https://abelcap.wantecno.com/css/fonts/OpenSans-ExtraBold.woff2') format('woff2'),
   url('https://abelcap.wantecno.com/css/fonts/OpenSans-ExtraBold.woff') format('woff'),
   url('https://abelcap.wantecno.com/css/fonts/OpenSans-ExtraBold.ttf') format('truetype'),
   url('https://abelcap.wantecno.com/css/fonts/OpenSans-ExtraBold.svg#OpenSans-ExtraBold') format('svg');
   font-weight: 800;
   font-style: normal;
   font-display: swap;
}
   @font-face {
       font-family: 'Open Sans';
       src: url('https://abelcap.wantecno.com/css/fonts/OpenSans-Bold.eot');
       src: url('https://abelcap.wantecno.com/css/fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
           url('https://abelcap.wantecno.com/css/fonts/OpenSans-Bold.woff2') format('woff2'),
           url('https://abelcap.wantecno.com/css/fonts/OpenSans-Bold.woff') format('woff'),
           url('https://abelcap.wantecno.com/css/fonts/OpenSans-Bold.ttf') format('truetype'),
           url('https://abelcap.wantecno.com/css/fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
       font-weight: bold;
       font-style: normal;
       font-display: swap;
   }
   @font-face {
      font-family: 'Open Sans';
      src: url('https://abelcap.wantecno.com/css/fonts/OpenSans-SemiBold.eot');
      src: url('https://abelcap.wantecno.com/css/fonts/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
          url('https://abelcap.wantecno.com/css/fonts/OpenSans-SemiBold.woff2') format('woff2'),
          url('https://abelcap.wantecno.com/css/fonts/OpenSans-SemiBold.woff') format('woff'),
          url('https://abelcap.wantecno.com/css/fonts/OpenSans-SemiBold.ttf') format('truetype'),
          url('https://abelcap.wantecno.com/css/fonts/OpenSans-SemiBold.svg#OpenSans-SemiBold') format('svg');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
   }
   @font-face {
       font-family: 'Open Sans';
       src: url('https://abelcap.wantecno.com/css/fonts/OpenSans-Regular.eot');
       src: url('https://abelcap.wantecno.com/css/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
           url('https://abelcap.wantecno.com/css/fonts/OpenSans-Regular.woff2') format('woff2'),
           url('https://abelcap.wantecno.com/css/fonts/OpenSans-Regular.woff') format('woff'),
           url('https://abelcap.wantecno.com/css/fonts/OpenSans-Regular.ttf') format('truetype'),
           url('https://abelcap.wantecno.com/css/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }
   html {
       scroll-behavior: smooth;
   }
   body {
       margin: 0px;
       padding: 0px;
   } 
   
   /* Primary Styles */
   *, *::before, *::after {
      box-sizing: border-box;
   }
   .loader-page {
      position: fixed;
      z-index: 25000;
      background-color: #040608;
      left: 0px;
      top: 0px;
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition:all .3s ease;
    }
    .loader-page img{
      height:50px;
      margin-bottom: 10px;
    }
    .loader-page::before {
      content: "";
      position: absolute;
      border: 2px solid rgb(50, 150, 176);
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-sizing: border-box;
      border-left: 2px solid rgba(50, 150, 176,0);
      border-top: 2px solid rgba(50, 150, 176,0);
      animation: rotarload 1s linear infinite;
      transform: rotate(0deg);
    }
    @keyframes rotarload {
        0%   {transform: rotate(0deg)}
        100% {transform: rotate(360deg)}
    }
    .loader-page::after {
      content: "";
      position: absolute;
      border: 2px solid rgba(50, 150, 176,.5);
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-sizing: border-box;
      border-left: 2px solid rgba(50, 150, 176, 0);
      border-top: 2px solid rgba(50, 150, 176, 0);
      animation: rotarload 1s ease-out infinite;
      transform: rotate(0deg);
    }
   
   
   
   a {
      text-decoration: none;
      color: inherit;
   } 
/** LIGHTBOX MARKUP **/
.wrapperbar {
   max-width: 720px;
   height: 100%;
   background: #fff;
   border-bottom: 5px solid #ddd;
   border-radius: 5px 5px 3px 3px;
   margin: 40px auto 0 auto;
   position: relative;
 }
 
 .wrapperbar img{
   height: auto;
 max-width: 100%;
 }
 
 .browserbar {
   width: 100%;
   height: 30px;
   background: linear-gradient(to bottom, #ddd 0%, #c7c7c7 100%);
   border-radius: 5px 5px 0 0;
   border-bottom: 1px solid #c7c7c7;
   border-top: 1px solid #e4e4e4;
   position: relative;
 }
 .browserbar:after,
 .browserbar:before {
   content: '';
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #ebebeb;
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   display: block;
 }
 .browserbar:before {
   left: 15px;
   box-shadow: 15px 0 0 0 #ebebeb;
 }
 .browserbar:after {
   left: 45px;
 }
 .lightbox {
     /** Default lightbox to hidden */
     display: none;
 
     /** Position and style */
     position: fixed;
     z-index: 999;
     width: 100%;
     height: 100%;
     text-align: center;
     top: 0;
     left: 0;
     background:rgb(13, 13, 13, 0.9);
     overflow: auto;
 }
 .lightbox:target {
     /** Remove default browser outline */
     outline: none;
 
     /** Unhide lightbox **/
     display: block;
 }
 .box_content{
   padding: 20px;
 }
#contacto h4::selection {
   background: #0ACACA;
   color: #fff;
}


 


   
/* ============================
Layout
============================ */
h1 {
   font-family: 'Open Sans Extra Bold';
   font-weight: 900;
   font-size: 44px;
   font-style: normal;
   line-height: 64px;
   margin-bottom:40px;
   color:#ffffff;
}
h3 {
   font-family: 'Open Sans';
   font-weight: normal;
   font-size: 20px;
   font-style: normal;
   margin-bottom: 80px;
   position: relative;
   padding: 0 0 0 40px;
}
h3:after {
   content: '';
   position: absolute;
   border-bottom: 2px solid #595857;
   bottom: 12px;
   right: 0px;
   left: 0px;
   top: 0px;
   width: 26px;
}
h4 {
   font-family: 'Open Sans Extra Bold';
   font-weight: 900;
   font-size: 34px;
   font-style: normal;
   margin-bottom:6px;
   color:#ffffff;
}
h5 {
   font-family: 'Open Sans Extra Bold';
   font-weight: 900;
   font-size: 34px;
   font-style: normal;
   margin-bottom:16px;
   color:#fe6048;
}
p {
   font-family: 'Open Sans';
   font-size: 19px;
   font-weight: normal;
   font-style: normal;
   line-height: 30px;
   margin-bottom:20px;
   color:#ffffff;
}

#mainText, #mainText2, #mainText3, #mainText4 {
   display: inline-block;
   width: 0%;
   transition: width 2s;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: clip;
 }
.sub_portfolio {
   color:#1866f8;
}
.sub_portfolio:after {
   border-bottom: 2px solid #1866f8;
}
.sub_servicios {
   color:#dc5346;
}
.sub_servicios:after {
   border-bottom: 2px solid #fe6048;
}
.sub_contacto {
   color:#0acaca;
}
.sub_contacto:after {
   border-bottom: 2px solid #0acaca;
}
.s-layout__content {
   
}
/* Sidebar */
.sidebar {
   background: #040608;
   position: fixed;
   width: 100%;
   height: 60px;
   display: flex;
   top: -100%;
   justify-content: center;
   align-items: center;
   z-index: 99;
   -webkit-transition: .9s ease;
   -moz-transition: .9s ease;
   -o-transition: .9s ease;
   -ms-transition: .9s ease;
}
.sidebar.show{
   top: 0;
}
.logo {
   background: url(https://abelcap.wantecno.com/img/logo_phone.svg);
   background-size: 100% 100%;
   text-align: center;
   padding: 0;
   width: 30px;
   height: 30px;
   margin-left:12px;
}
.navigation {
   margin-left: auto;
   padding: 0;
}
.navigation ul {
   justify-content: center;
   align-items: center;
   text-align: center;
   width: 100%;
   margin: 0;
   padding: 0;
}
.navigation ul li {
   float:left;
   padding: 0;
   margin: 0;
   list-style: none;
}
.navigation ul li i {
   font-size: 24px;
   color: #68696a;
   text-align: center;
   align-items: center;
   justify-content: center;
   padding: 0 16px;
   box-sizing: border-box;
}
.navigation ul li span {
   display: none;
}
.navigation ul li a{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
   display: block;
}
.navigation ul li.active a i {
  color: #fff;
}
.navigation ul li.menu_hola a i {
   +color: #f30a58;
}
.navigation ul li.menu_portfolio a i {
   +color: #1866f8;
}
.navigation ul li.menu_servicios a i {
   +color:#fe6048;
}
.navigation ul li.menu_contacto a i {
   +color: #0acaca;
   
}
.navigation ul li a:link,
.navigation ul li a:visited,
.navigation ul li a:active,
.navigation ul li a:hover,
.navigation ul li a:focus {
   color: #333;
   text-decoration: none;
}


  
.size_content {padding: 100px 20px 60px 20px;
      
   
}



/* Hola */
 #hola {
    background:#0c182a;
 }
 .content_hola {
    position: relative;
    margin: 0;
    padding: 0;
 }
 .text_content {
    z-index: 1;
    width: 100%;
 }
 .url_text {
    background:
       linear-gradient(
         to right, #fefefe 0%, #fefefe 100%
       );
     background-repeat: repeat-y;
     background-size: 0 100%;
     box-shadow: inset 0 -0.1em #fc1561;
    color: #ffffff;
    text-decoration: none;
    transition: background-size .2s;
    font-weight: 900;
    font-family: 'Open Sans Extra Bold';
  }
  
  .url_text:hover {
    background-size: 100% 100%;
    color: #fc1561;
  }

 .hola_img {
    background: url(https://abelcap.wantecno.com/img/hola.svg);
    background-size: 100% 100%;
    width: 100%;
    height: 420px;
    position: relative;
    margin: 30px auto 0 auto;
 }

/* Portfolio */
 #portfolio {
    background: #0c1836;
 }
 .trabajos {
    background: #111;
    width: 100%;
    height: 260px;
    margin-bottom: 40px;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    border-radius: 14px;
 }
 .work_wantecno {
    background: url(https://abelcap.wantecno.com/img/back_wantecno.webp);
    background-size: cover;
    background-position: center;
    
 }
 .work_moduflex {
   background: url(https://abelcap.wantecno.com/img/back_moduflex.webp);
   background-size: cover;
   background-position: center;
   
}
 .work_ikuu {
   background: url(https://abelcap.wantecno.com/img/back_ikuu.webp);
   background-size: cover;
   background-position: center;
   
}
.work_casalimpia {
   background: url(https://abelcap.wantecno.com/img/back_casalimpia.webp);
   background-size: cover;
   background-position: center;
   
}
.work_clinica {
   background: url(https://abelcap.wantecno.com/img/back_clinica.webp);
   background-size: cover;
   background-position: center;
   
}
 .work_default {
    background: url(https://abelcap.wantecno.com/img/default.webp);
    background-size: cover;
    background-position: center;
    
 }
 
 .work_title {
    font-family: 'Open Sans Extra Bold';
    font-weight: 900;
    font-size: 26px;
    font-style: normal;
    color: #fff;
    letter-spacing: 3px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    position: absolute;
 }
 .work_title:before {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    white-space: nowrap;
    color: transparent;
    content: attr(data-hover);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #FFF;
    transition: all 1.1s cubic-bezier(0.17, 0.67, 0.32, 0.87);
  }
 .work_title:hover:before {
    width: 100%;
 }
 .work_title:hover {
    color: transparent;
 }
 .link_work{
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    border-radius: 12px;
 }

/* Servicios */
 #servicios {
    background: #220c38;
    position: relative;
 }
 .line_bottom {
    width: 100%;
    overflow: auto;
    position: relative;
    padding: 0 0 20px 0;
    margin: 0 0 60px 0;
    border-bottom: 1px solid #574668;
    
 }
 .text_services {
    width: 100%;
    left: 0;
    z-index: 1;
    position: relative;
    margin-bottom: 0;
 }
 .text_services_two {
   width: 100%;
   z-index: 1;
   position: relative;
   margin-bottom: 0;
 }
 .services_one {
    background: url(https://abelcap.wantecno.com/img/web.svg);
    background-size: 100% 100%;
    width: 100%;
    height: 400px;
    position: relative;
    margin: 0 0 20px 0;
 }
 .services_two {
    background: url(https://abelcap.wantecno.com/img/frontend.svg);
    background-size: 100% 100%;
    width: 100%;
    height: 400px;
    position: relative;
    margin: 0 0 20px 0;
 }
 .services_tree {
    background: url(https://abelcap.wantecno.com/img/wordpress.svg);
    background-size: 100% 100%;
    width: 100%;
    height: 400px;
    position: relative;
    margin: 0 0 20px 0;
 }
 .services_four {
    background: url(https://abelcap.wantecno.com/img/seo.svg);
    background-size: 100% 100%;
    width: 100%;
    height: 400px;
    position: relative;
    margin: 0 0 20px 0;
 }

/* Contacto */
 #contacto {
    background: #061e2a;
 }
 .left_contact {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0 auto;
    padding: 0;text-align: center;
 }
 .contact_text {
    width: 100%;
    z-index: 1;
    display: inline-block;
    vertical-align: top;
 }
 .img_email {
    height: 340px;
    background: url(https://abelcap.wantecno.com/img/contact.svg);
    background-size: 250px 250px;
    background-repeat: no-repeat;
    background-position: top center;
    border-bottom: 1px solid #334750;
    margin-bottom: 50px;
    display: block;
 }
 .left_contact ul {
    margin: 0 auto;
    position: relative;
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: left;

}
 .contact_list {
    font-family: 'Open Sans';
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    color:#d6dadc;
    margin: 0 0 14px 0;
    padding: 10px 0 10px 0px;
    
 }
 .contact_list i {
    color: #d6dadc;
    font-size: 30px;
    vertical-align: middle;
    width: 40px;
    text-align: center;
    margin-right: 14px;
 }
 .contact_list em {

    
 }

 form { width: 100%; margin:50px auto; }

 .feedback-input {
   color:white;
   font-family: Helvetica, Arial, sans-serif;
   font-weight:500;
   font-size: 18px;
   border-radius: 5px;
   line-height: 22px;
   background-color: transparent;
   border:2px solid #334750;
   transition: all 0.3s;
   padding: 13px;
   margin-bottom: 15px;
   width:100%;
   box-sizing: border-box;
   outline:0;
 }
 
 .feedback-input:focus { border:2px solid #9ba5aa; }
 
 textarea {
   height: 150px;
   line-height: 150%;
   resize:vertical;
 }
 
 [type="submit"] {
   font-family: 'Open Sans';
   font-style: normal;
   background-color: transparent;
   border-radius:80px;
   border: 2px solid #334750;
   box-sizing: border-box;
   cursor:pointer;
   color:#d6dadc;
   font-size:17px;
   padding:20px 40px;
   transition: all 0.3s;
   margin-top:20px;
   font-weight: normal;
   float: right;
  
 }
 [type="submit"]:hover { background:#0acaca;color:#086a70;
    border: 2px solid #086a70; }
    .terms {
       display: block;
       border-top: 1px solid #334750;
       border-bottom: 1px solid #334750;
       padding: 20px 0;
       margin: 40px 0;
    }
    .terms p {
       margin: 0;
       padding:0 ;
       color:#68767e;
       font-family: 'Open Sans';
       font-style: normal;
       font-weight: bold;
       font-size: 13px;
       line-height: 24px;
    }
    .sendok, .sendemail {
      position:fixed;
      background: #4ef278;
      color:#000;
      top:0;
      left: 0;
      right: 0;
      width:100%;
      text-align:center;
      font-family: 'Open Sans';
               font-style: normal;
               font-weight: normal;
               font-size: 14px;
               z-index: 9999;
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
   }
   .sendfail {
      position:fixed;
      background: #da2436;
      color:#fff;
      top:0;
      width:100%;
      text-align:center;
      font-family: 'Open Sans';
               font-style: normal;
               font-weight: normal;
               font-size: 14px;
               z-index: 999999;
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
   }
   .sendok span{
      font-weight:700;
   }
   
   @keyframes cssAnimation {
    to {
      width: 0;
      height: 0;
      overflow: hidden;
    }
   }
   
   @-webkit-keyframes cssAnimation {
    to {
      width: 0;
      height: 0;
      visibility: hidden;
    }
   }



   

/* ============================
Desktop 900px
 ============================ */
 @media (min-width: 900px) {
   h1 {
      font-family: 'Open Sans Extra Bold';
      font-weight: 900;
      font-size: 70px;
      font-style: normal;
      line-height: 90px;
      margin-bottom:60px;
      color:#ffffff;
   }
   h3 {
      font-family: 'Open Sans';
      font-weight: normal;
      font-size: 20px;
      font-style: normal;
      margin-bottom: 80px;
      position: relative;
      padding: 0 0 0 40px;
   }
   h3:after {
      content: '';
      position: absolute;
      border-bottom: 2px solid #595857;
      bottom: 12px;
      right: 0px;
      left: 0px;
      top: 0px;
      width: 26px;
   }
   h4 {
      font-family: 'Open Sans Extra Bold';
      font-weight: 900;
      font-size: 60px;
      font-style: normal;
      margin-bottom:6px;
      color:#ffffff;
   }
   h5 {
      font-family: 'Open Sans Extra Bold';
      font-weight: 900;
      font-size: 40px;
      font-style: normal;
      margin-bottom:16px;
      color:#fe6048;
   }
   p {
      font-family: 'Open Sans';
      font-size: 19px;
      font-weight: normal;
      font-style: normal;
      line-height: 30px;
      margin-bottom:20px;
      color:#ffffff;
   }
   .loader-page {
      display:none;
    }

   #mainText, #mainText2, #mainText3, #mainText4 {
      display: inline-block;
      width: 0%;
      transition: width 2s;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
    }
   .sub_portfolio {
      color:#1866f8;
   }
   .sub_portfolio:after {
      border-bottom: 2px solid #1866f8;
   }
   .sub_servicios {
      color:#dc5346;
   }
   .sub_servicios:after {
      border-bottom: 2px solid #fe6048;
   }
   .sub_contacto {
      color:#0acaca;
   }
   .sub_contacto:after {
      border-bottom: 2px solid #0acaca;
   }
   .s-layout__content {
      
   }
   /* Sidebar */
   .sidebar {
      background: #040608;
      position: fixed;
      padding: 0;
      margin: 0;
      width: 240px;
      height: 100vh;
      display: block;
      left: -100%;
      top: 0;
      z-index: 1;
      -webkit-transition: .9s ease;
      -moz-transition: .9s ease;
      -o-transition: .9s ease;
      -ms-transition: .9s ease;
   }
   .sidebar.show{
      left: 0;
   }
   .sidebar:after {
      content: '';
      position: absolute;
      border-right: 2px solid #111d2e;
      border-left: 2px solid #111d2e;
      bottom: 0;
      right: 6px;
      left: 6px;
      top: 0px;
      z-index: -1;
   }
   .logo {
      background: url(https://abelcap.wantecno.com/img/logo.svg);
      background-size: 100% 100%;
      text-align: center;
      padding: 0;
      width: 120px;
      height: 120px;
      margin: 50px auto;
      display: block;
      text-indent: -9999px;
   }
.navigation {
   margin: 0 6px;
}
.navigation ul {
   list-style: none;
   padding: 0;
   margin: 0;
   width: 100%;
}
.navigation ul li {
   width: 100%;
   text-align: center;
   padding: 0;
   font-size: 17px;
   font-family: 'Open Sans';
   font-weight: 600;
   font-style: normal;
   text-transform: uppercase;
}
.navigation ul li i {
   display: none;
}
.navigation ul li span {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 20px;
   color: #68696a;
   box-sizing: border-box;
}
.navigation ul li a{
   width: 100%;
   padding: 20px 0;
   margin: 0;
   display: inline-block;
   box-sizing: border-box;
}
.navigation ul li.active a span {
   border-right: 2px solid;
   border-left: 2px solid;
   color: #fff;
}
.navigation ul li.menu_hola a span {
   border-right-color: #f30a58;
   border-left-color: #f30a58;
}
.navigation ul li.menu_portfolio a span {
   border-right-color: #1866f8;
   border-left-color: #1866f8;
}
.navigation ul li.menu_servicios a span {
     border-right-color: #fe6048;
     border-left-color:#fe6048;
   }
.navigation ul li.menu_contacto a span {
     border-right-color: #0acaca;
     border-left-color: #0acaca;;
}
.navigation ul li a:link,
.navigation ul li a:visited,
.navigation ul li a:active,
.navigation ul li a:hover,
.navigation ul li a:focus {
   color: #333;
   text-decoration: none;
   }
   
   
   
   
   
   
   
      .size_content {
        padding:60px 60px 60px 300px;
        margin: 0;
      }
   

   
   /* Hola */
      #hola {
         background:#0c182a;
      }
      .content_hola {
         position: relative;
         margin: 0;
         padding: 0;
      }
      .text_content {
         z-index: 1;
         width: 550px;
      }
      .url_text {
         background:
            linear-gradient(
              to right, #fefefe 0%, #fefefe 100%
            );
          background-repeat: repeat-y;
          background-size: 0 100%;
          box-shadow: inset 0 -0.1em #fc1561;
         color: #ffffff;
         text-decoration: none;
         transition: background-size .2s;
         font-weight: 900;
         font-family: 'Open Sans Extra Bold';
       }
       
       .url_text:hover {
         background-size: 100% 100%;
         color: #fc1561;
       }

      .hola_img {
         background: url(https://abelcap.wantecno.com/img/hola.svg);
         background-size: 100% 100%;
         width: 420px;
         height: 420px;
         position: absolute;
         top: 100px;
         right: 0;
      }
   /* Portfolio */
      #portfolio {
         background: #0c1836;
      }
      .trabajos {
         background: #111;
         width: 100%;
         height: 260px;
         margin-bottom: 40px;
         align-items: center;
         justify-content: center;
         text-align: center;
         display: flex;
         border-radius: 14px;
      }
      .work_wantecno {
         background: url(https://abelcap.wantecno.com/img/back_wantecno.webp);
         background-size: cover;
         background-position: center;
         
      }
      .work_moduflex {
         background: url(https://abelcap.wantecno.com/img/back_moduflex.webp);
         background-size: cover;
         background-position: center;
         
      }
      .work_ikuu {
         background: url(https://abelcap.wantecno.com/img/back_ikuu.webp);
         background-size: cover;
         background-position: center;
         
      }
      .work_casalimpia {
         background: url(https://abelcap.wantecno.com/img/back_casalimpia.webp);
         background-size: cover;
         background-position: center;
         
      }
      .work_clinica {
         background: url(https://abelcap.wantecno.com/img/back_clinica.webp);
         background-size: cover;
         background-position: center;
         
      }
      .work_default {
         background: url(https://abelcap.wantecno.com/img/default.png);
         background-size: cover;
         background-position: center;
         
      }
      
      .work_title {
         font-family: 'Open Sans Extra Bold';
         font-weight: 900;
         font-size: 50px;
         font-style: normal;
         color: #fff;
         letter-spacing: 3px;
         margin: 0;
         padding: 0;
         vertical-align: middle;
         position: absolute;
      }
      .work_title:before {
         overflow: hidden;
         position: absolute;
         bottom: 0;
         left: 0;
         width: 0;
         white-space: nowrap;
         color: transparent;
         content: attr(data-hover);
         -webkit-text-fill-color: transparent;
         -webkit-text-stroke: 1px #FFF;
         transition: all 1.1s cubic-bezier(0.17, 0.67, 0.32, 0.87);
       }
      .work_title:hover:before {
         width: 100%;
      }
      .work_title:hover {
         color: transparent;
      }
      .link_work{
         height: 100%;
         width: 100%;
         align-items: center;
         justify-content: center;
         text-align: center;
         display: flex;
         border-radius: 12px;
      }

   /* Servicios */
      #servicios {
         background: #220c38;
         position: relative;
      }
      .line_bottom {
         width: 100%;
         overflow: auto;
         position: relative;
         padding: 0 0 40px 0;
         margin: 0 0 60px 0;
         border-bottom: 1px solid #574668;
         
      }
      .text_services {
         width: 550px;
         left: 0;
         bottom: 40px;
         z-index: 1;
         position: absolute;
         margin-bottom: 0;
      }
      .text_services_two {
         width: 550px;
         right: 0;
         bottom: 40px;
         z-index: 1;
         position: absolute;
         margin-bottom: 0;
      }
      .services_one {
         background: url(https://abelcap.wantecno.com/img/web.svg);
         background-size: 100% 100%;
         width: 400px;
         height: 400px;
         position: relative;
         float: right;
         right: 0;
         bottom: 0;
      }
      .services_two {
         background: url(https://abelcap.wantecno.com/img/frontend.svg);
         background-size: 100% 100%;
         width: 400px;
         height: 400px;
         position: relative;
         float: left;
         right: 0;
         bottom: 0;
      }
      .services_tree {
         background: url(https://abelcap.wantecno.com/img/wordpress.svg);
         background-size: 100% 100%;
         width: 400px;
         height: 400px;
         position: relative;
         float: right;
         right: 0;
         bottom: 0;
      }
      .services_four {
         background: url(https://abelcap.wantecno.com/img/seo.svg);
         background-size: 100% 100%;
         width: 400px;
         height: 400px;
         position: relative;
         float: left;
         right: 0;
         bottom: 0;
      }

   /* Contacto */
      #contacto {
         background: #061e2a;
      }
      .contact_content {
         display:flex; flex-direction:row;
      }
      .contact_text {
         z-index: 1;
         flex:auto;
         vertical-align: top;
         margin-right: 50px;
      }
      .left_contact {
         flex:initial;
         width: 600px;
         vertical-align: top;
         margin: 0 auto;
         padding: 0;
      }

      .img_email {
         height: 340px;
         background: url(https://abelcap.wantecno.com/img/contact.svg);
         background-size: 250px 250px;
         background-repeat: no-repeat;
         background-position: top center;
         border-bottom: 1px solid #334750;
         margin-bottom: 50px;
         display: block;
      }
      .contact_list {
         font-family: 'Open Sans';
         font-size: 16px;
         font-weight: 600;
         font-style: normal;
         color:#d6dadc;
         display: block;
         margin: 0 0 14px 0;
         padding: 10px 0 10px 30px;
         
      }
      .contact_list i {
         color: #d6dadc;
         font-size: 30px;
         vertical-align: middle;
         width: 40px;
         text-align: center;
         margin-right: 14px;
      }
      .contact_list em {
   
         
      }
   
      form { width: 100%; margin:50px auto; }
   
      .feedback-input {
        color:white;
        font-family: 'Open Sans';
        font-weight:500;
        font-size: 18px;
        border-radius: 5px;
        line-height: 22px;
        background-color: transparent;
        border:2px solid #334750;
        transition: all 0.3s;
        padding: 13px;
        margin-bottom: 15px;
        width:100%;
        box-sizing: border-box;
        outline:0;
      }
      
      .feedback-input:focus { border:2px solid #9ba5aa; }
      
      textarea {
        height: 150px;
        line-height: 150%;
        resize:vertical;
      }
      
      [type="submit"] {
        font-family: 'Open Sans';
        font-style: normal;
        background-color: transparent;
        border-radius:80px;
        border: 2px solid #334750;
        box-sizing: border-box;
        cursor:pointer;
        color:#d6dadc;
        font-size:17px;
        padding:20px 40px;
        transition: all 0.3s;
        margin-top:20px;
        font-weight: normal;
        float: right;
       
      }
      [type="submit"]:hover { background:#0acaca;color:#086a70;
         border: 2px solid #086a70; }
         .terms {
            display: block;
            border-top: 1px solid #334750;
            border-bottom: 1px solid #334750;
            padding: 20px 0;
            margin-top: 40px;
         }
         .terms p {
            margin: 0;
            padding:0 ;
            color:#68767e;
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: bold;
            font-size: 13px;
            line-height: 24px;
         }
         
.sendok, .sendemail {
   position:fixed;
   background: #4ef278;
   color:#000;
   top:0;
   left: 0;
   right: 0;
   width:100%;
   text-align:center;
   font-family: 'Open Sans';
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            z-index: 9999;
 -moz-animation: cssAnimation 0s ease-in 5s forwards;
 -webkit-animation: cssAnimation 0s ease-in 5s forwards;
 -o-animation: cssAnimation 0s ease-in 5s forwards;
 animation: cssAnimation 0s ease-in 5s forwards;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}
.sendfail {
   position:fixed;
   background: #da2436;
   color:#fff;
   top:0;
   width:100%;
   text-align:center;
   font-family: 'Open Sans';
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            z-index: 999999;
 -moz-animation: cssAnimation 0s ease-in 5s forwards;
 -webkit-animation: cssAnimation 0s ease-in 5s forwards;
 -o-animation: cssAnimation 0s ease-in 5s forwards;
 animation: cssAnimation 0s ease-in 5s forwards;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}
.sendok span{
   font-weight:700;
}

@keyframes cssAnimation {
 to {
   width: 0;
   height: 0;
   overflow: hidden;
 }
}

@-webkit-keyframes cssAnimation {
 to {
   width: 0;
   height: 0;
   visibility: hidden;
 }
}
   }






/* ============================
Desktop 900px
 ============================ */
 @media (min-width: 1400px) {
   .loader-page {
      display:none;
    }

    .s-layout__content {
      
      
    }
    #servicios {
    }
    .size_content {
      padding:60px 0 60px 0;
      margin: 0 auto;
      width: 1100px;
    }
}