*, ::before, ::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-drag: none;
  margin: 0;
  padding: 0; }

html,body {
    height: 100%;
    width: 100%;
}
body {
    margin: 0;
    font-family: 'Ubuntu' !important;
    font-weight: normal;
    font-style: normal;
    /*font-size: 62.5%;*/
    color: #777777;
    background: #1a2b3d;
    min-height: 320px;
    min-width: 320px;
}
ol, ul {
  list-style: none;
    list-style-position: inside; 
}
a, button {
  -webkit-transition:all 0.3s ease-out;  /* Chrome y Safari */
  -o-transition:all 0.3s ease-out;  /* Opera */
  -moz-transition:all 0.3s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 0.3s ease-out;   /* Internet Explorer */
  transition:all 0.3s ease-out;  /* W3C */
}
a {
    color: #4d4d4f;
}
a:hover {
    color: #00b6c8;
}
strong {
    font-weight: bold;
}
img {
    background: #FFF url("../images/loader.gif") no-repeat center center;
    background:none;
}

.wrap {
  padding: 0 50px;
  text-align: left;
  margin: 0 auto;
  width: 100%;
  max-width: 1500px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " "
}
.clearfix,
.clearfix:after {
  clear: both !important;
}

.no-float {
  float: none !important;
}

.full-width {
  margin: 0 -15px;
}

.padding0 {
  padding: 0 !important;
}


.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    /*justify-content: space-around;*/
    justify-content: center;
    text-align: center;
}



/* --------------- NAV --------------- */

/*!
 * Start Bootstrap - Scrolling Nav (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}



    .navbar {
        padding: 5px 0;
        background: rgba(12,12,13,0.75);
        border-bottom: 2px solid #000000;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }


@media(min-width:768px) {
    .navbar {
        padding: 20px 0;
        /*background: rgba(12,12,13,0.75);
        border-bottom: 2px solid #000000;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;*/
    }

    .top-nav-collapse {
        padding: 0;
    }
}


/* --------------- WEB --------------- */

/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

.main-menu  {
  padding-left: calc(100vw * 80 / 1920);;
  padding-right: calc(100vw * 80 / 1920);;
}
.main-menu .navbar-nav > li > a {
  font-weight: bold;
  color: #FFF;
  font-size: 1.7rem;
  font-family: 'Galatia SIL' !important;
}
.navbar-default .main-menu .navbar-nav > .active > a, 
.navbar-default .main-menu .navbar-nav > .active > a:hover, 
.navbar-default .main-menu .navbar-nav > .active > a:focus {
    color: #00a4e4;
    background-color: transparent;
}
.navbar-default .main-menu .navbar-nav > .active > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #00a4e4;
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);  
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.navbar-default .main-menu .navbar-nav > li > a:hover, 
.navbar-default .main-menu .navbar-nav > li > a:focus {
    color: #00a4e4;
    background-color: transparent;
}

.navbar-default .main-menu .navbar-nav > li > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #00a4e4;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.navbar-default .main-menu .navbar-nav > li > a:before:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}




header .logo {
  width: 57px;
  height: 42px;
  margin-top: 5px;
  display: block;
  /*margin: 10px auto 0 30px !important;*/
  background: rgba(0, 0, 0, 0) url("../images/logo-cym-horizontal.svg") no-repeat center bottom / 100% auto;
}
.menu-desktop {
  float: right;
}


/* ------ TXT ------ */
p.txt-small {
  font-size: calc(100vw * 18 / 1920) !important;
}
p {
  font-size: calc(100vw * 20 / 1920) !important;
}
/*h5 {
  font-size: 1.8rem !important;
}
h4 {
  font-size: 2.5rem !important;
}*/
h3 {
  font-size: calc(100vw * 24 / 1920) !important;
}
h2 {
  font-size: calc(100vw * 40 / 1920) !important;
}
h1 {
  font-size: calc(100vw * 52 / 1920) !important;
}


h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 0;
    margin-bottom: 0;
}


/* ------ SECCIONES ------ */
/*.seccion-content {
    width: 100%;
    min-height: 100%;
    height: auto;
    display: table;
    overflow: hidden;
}*/
.bk-img {
  background: rgba(0, 0, 0, 0) url("../images/bk.png") repeat center center / auto auto;
}
.bk-img-luz {
  background: rgba(0, 0, 0, 0) url("../images/bk-luz.jpg") repeat top center / cover;
}



/* ------ HOME ------ */
#home {
  max-height: 100vh;
  position: relative;
  overflow: hidden;
}
#home .captions {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 99;
  color: #FFF;
  text-align: center;
  pointer-events: none;
}
#home .captions h1 {
  /*width: 300px;
  height: 210px;*/
  font-family: 'Galatia SIL';
  font-size: calc(100vw * 90 / 1920) !important;
  letter-spacing: calc(100vw * -15 / 1920);
  font-weight: bold;
  position: relative;
  display: table;
  margin: 0 auto;
  padding: calc(100vw * 70 / 1920) calc(100vw * 76 / 1920) calc(100vw * 70 / 1920) calc(100vw * 62 / 1920);
  background: rgba(0, 0, 0, 0) url("../images/logo-cym-background.svg") no-repeat center center / contain;
}/*
#home .captions h1:before,
#home .captions h1:after {
  content: "";
  display: block;
  width: 200px;
  width: 100%;
  height: 4px;
  background: #FFF;
  position: absolute;
  left: 0;
}
#home .captions h1:before {
  bottom: 0;
}
#home .captions h1:after {
  bottom: -10px;
}*/
#home .captions h2 {
  font-family: 'Blacksword';
  line-height: 1.8;
  font-size: calc(100vw * 90 / 1920) !important;
}
#home .captions h3 {
  font-family: 'Galatia SIL';
  font-size: calc(100vw * 50 / 1920) !important;
  line-height: 0.5;
  letter-spacing: 1px;
}

/* ------ NOSOTROS ------ */
#nosotros {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
}
#nosotros .col-xs-12.col-sm-6 {
    padding: 0;
}
#nosotros .txt-area {
  background: #FFF;
  margin-top: calc(100vw * 90 / 1920);
  padding: calc(100vw * 40 / 1920) calc(100vw * 80 / 1920) calc(100vw * 60 / 1920) calc(100vw * 80 / 1920);
  margin-left: calc(100vw * 140 / 1920);
}
#nosotros .txt-area h1 {
  font-family: 'Galatia SIL';
  position: relative;
  margin-bottom: calc(100vw * 60 / 1920);
}
#nosotros .txt-area h1:after {
  content: "";
  width: calc(100vw * 180 / 1920);
  height: calc(100vw * 6 / 1920);
  background: #777;
  position: absolute;
  left: 0;
  bottom: calc(100vw * -20 / 1920);
}
#nosotros .txt-area p {
  line-height: 1.8;
}
/* ------ ZAFIRO ------ */
#zafiro {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
  color: #FFF;
}
#zafiro h2 {
  font-family: 'Galatia SIL';
  color: #5ebeea;
  margin-bottom: calc(100vw * 40 / 1920);
}
#zafiro p {
  margin-bottom: 20px;
}
#zafiro .logo {
  width: 100px;
  height: 70px;
  position: relative;
  margin: calc(100vw * 100 / 1920) auto 0 auto;
  background: rgba(0, 0, 0, 0) url("../images/logo-cym-iso.svg") no-repeat center bottom / 100% auto;
}
#zafiro .logo:before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100vw * -40 / 1920);
  transform: translate(-50%);
  background: #5ebeea;
  width: calc(100vw * 180 / 1920);
  height: calc(100vw * 4 / 1920);
}

/* ------ SERVICIOS ------ */
#servicios {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}
#servicios h1 {
  font-family: 'Galatia SIL';
  position: relative;
  color: #43505c;
  margin-bottom: calc(100vw * 60 / 1920);
}
#servicios h1:after {
  content: "";
  width: calc(100vw * 180 / 1920);
  height: calc(100vw * 6 / 1920);
  background: #43505c;
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
  bottom: calc(100vw * -20 / 1920);
}
#servicios .txt-area {
  background: #FFF;
  padding: calc(100vw * 30 / 1920) calc(100vw * 20 / 1920);
  margin-left: calc(100vw * 15 / 1920);
  margin-right: calc(100vw * 15 / 1920);
}
#servicios .txt-area h3 {
  font-family: 'Galatia SIL';
  position: relative;
  color: #5ebeea;
  margin-bottom: calc(100vw * 40 / 1920);
}
#servicios .txt-area h3:after {
  content: "";
  width: calc(100vw * 100 / 1920);
  height: calc(100vw * 4 / 1920);
  background: #5ebeea;
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
  bottom: calc(100vw * -16 / 1920);
}
#servicios article {
  padding: 0 !important;
  display: inline-block;
  margin-bottom: 30px;
}

/* ------ PROMOCIONES ------ */
#promociones,
#galeria {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}
#promociones {
  padding-bottom: 50px;
}
#promociones h1,
#galeria h1{
  font-family: 'Galatia SIL';
  position: relative;
  color: #FFF;
  margin-bottom: calc(100vw * 80 / 1920);
}
#promociones h1:after,
#galeria h1:after {
  content: "";
  width: calc(100vw * 180 / 1920);
  height: calc(100vw * 6 / 1920);
  background: #FFF;
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
  bottom: calc(100vw * -20 / 1920);
}
#promociones .owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 40px;
}
#promociones .btn-terminos {
    height: 50px;
    border: none;
    display: inline-block;
    padding: 15px 30px 15px 30px;
    color: #FFF;
    margin: 30px auto 0 auto;
    text-align: center;
    font-size: calc(100vw * 20 / 1920) !important;
    text-transform: uppercase;
    background: #43505c;
}

/* ------ GALERIA ------ */
#galeria .imagen {
 padding: 0;
}

/* ------ NUESTROS TRABAJOS ------ */
#trabajos {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}
#trabajos h1 {
  font-family: 'Galatia SIL';
  position: relative;
  color: #43505c;
  margin-bottom: calc(100vw * 60 / 1920);
}
#trabajos h1:after {
  content: "";
  width: calc(100vw * 180 / 1920);
  height: calc(100vw * 6 / 1920);
  background: #43505c;
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
  bottom: calc(100vw * -20 / 1920);
}
#trabajos .imagen {
  margin-bottom: calc(100vw * 40 / 1920);
}
#trabajos .imagen a {
  height: 100%;
  padding: calc(100vw * 20 / 1920);
  display: block;
  background: #FFF;
}
#trabajos .imagen a:hover {
  text-decoration: none;
}
#trabajos .imagen img {
  margin: 0 auto;
}
#trabajos .imagen .no-show {
  display: none !important;
}
#trabajos .imagen h3 {
  text-decoration: none;
  font-family: 'Galatia SIL';
  position: relative;
  line-height: 1.3;
  margin-top: calc(100vw * 30 / 1920);
  margin-bottom: calc(100vw * 30 / 1920);
}


/* ------ CONTACTO ------ */
#contacto {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
}
#contacto .col-xs-12.col-sm-6 {
    padding: 0;
}
#contacto .txt-area {
  width: calc(100% - calc(100vw * 140 / 1920));
  display: table;
  background: #FFF;
  margin-top: calc(100vw * 90 / 1920);
  padding: calc(100vw * 40 / 1920) calc(100vw * 80 / 1920) calc(100vw * 60 / 1920) calc(100vw * 80 / 1920);
  margin-right: calc(100vw * 140 / 1920);
}
#contacto .txt-area h1 {
  font-family: 'Galatia SIL';
  position: relative;
  margin-bottom: calc(100vw * 60 / 1920);
}
#contacto .txt-area h1:after {
  content: "";
  width: calc(100vw * 180 / 1920);
  height: calc(100vw * 6 / 1920);
  background: #777;
  position: absolute;
  left: 0;
  bottom: calc(100vw * -20 / 1920);
}
#contacto form input,
#contacto form textarea {
  height: 50px;
  border: 1px solid #43505c;
  background: none;
  color: #777777;
  border-radius: 0;
  margin-bottom: 18px;
  font-size: calc(100vw * 20 / 1920) !important;
}
#contacto form textarea {
  height: 140px;
}
#contacto form .btn-enviar {
  height: 50px;
  border: none;
  padding: 10px 60px 10px 30px;
  color: #FFF;
  float: right;
  font-size: calc(100vw * 20 / 1920) !important;
  background: #43505c url("../images/arrow-right.svg") no-repeat right 20px center / auto 15px;
}


/* ------ trabaja ------ */
#trabaja {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
}
#trabaja .col-xs-12.col-sm-6 {
  padding: 0;
}
#trabaja .txt-area {
  /*width: calc(100% - calc(100vw * 140 / 1920));*/
  display: table;
  background: #FFF;
  margin-top: calc(100vw * 90 / 1920);
  padding: calc(100vw * 40 / 1920) calc(100vw * 80 / 1920) calc(100vw * 60 / 1920) calc(100vw * 80 / 1920);
  margin-left: calc(100vw * 140 / 1920);
}
#trabaja .txt-area h1 {
  font-family: 'Galatia SIL';
  position: relative;
  margin-bottom: calc(100vw * 60 / 1920);
}
#trabaja .txt-area h1:after {
  content: "";
  width: calc(100vw * 180 / 1920);
  height: calc(100vw * 6 / 1920);
  background: #777;
  position: absolute;
  left: 0;
  bottom: calc(100vw * -20 / 1920);
}
#trabaja .txt-area p {
  line-height: 1.8;
  margin: 0;
  margin-top: 5px;
  margin-bottom: 20px;
}
#trabaja form input {
  width: 100%;
  height: 50px;
  border: 1px solid #43505c;
  background: none;
  color: #777777;
  border-radius: 0;
  margin-bottom: 18px;
  font-size: calc(100vw * 20 / 1920) !important;
}
#trabaja .form-control {
  border: 1px solid #43505c;
  background: none;
  color: #777777;
  border-radius: 0;
  line-height: 0;
  height: 50px;
}
#trabaja .adjuntar .form-control {
  padding-top: 14px;
}
#trabaja form .adjuntar input {
  margin-bottom: 8px;
}
#trabaja form .btn.btn-file {
    border: 1px solid #43505c;
    border-radius: 0;
    background: #43505c;
    color: #fff;
    height: 50px;
    padding-top: 13px;
}
#trabaja form .fileinput-remove {
    border: 1px solid #43505c;
    color: #43505c;
    height: 50px;
}
#trabaja form .btn-enviar {
  height: 50px;
  border: none;
  padding: 10px 60px 10px 30px;
  color: #FFF;
  float: right;
  font-size: calc(100vw * 20 / 1920) !important;
  background: #43505c url("../images/arrow-right.svg") no-repeat right 20px center / auto 15px;
}


/* ------ ERROR ------ */
#error {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0) url("../images/slider/slider-01.jpg") no-repeat center center / cover;
}
#error .captions {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
  color: #FFF;
  text-align: center;
}
#error .captions h1 {
  font-family: 'Galatia SIL';
  font-size: calc(100vw * 50 / 1920) !important;
  font-weight: bold;
  position: relative;
  display: table;
  margin: 0 auto;
}
#error .captions h3 {
  font-family: 'Galatia SIL';
  font-size: calc(100vw * 30 / 1920) !important;
  letter-spacing: 1px;
}
#error .captions .btn-volver {
  color: #FFF;
  text-align: center;
  display: table;
  margin: 40px auto 0 auto;
  padding: 10px 30px 10px 60px;
  font-size: calc(100vw * 20 / 1920) !important;
  background: #5ebeea url("../images/arrow-left.svg") no-repeat left 20px center / auto 15px;
}




/* ------ FOOTER ------ */
footer .main-footer {
  padding-top: 80px;
  padding-bottom: 80px;
  background: #1a2b3d;
  color: #FFF;
}
footer .second-footer {
  height: 60px;
  background: #43505c;
}
footer .logo {
  display: block;
  width: calc(100vw * 131 / 1920);
  height: calc(100vw * 93 / 1920);
  /*margin: 10px auto 0 30px !important;*/
  background: rgba(0, 0, 0, 0) url("../images/logo-cym-vertical.svg") no-repeat center bottom / 100% auto;
}
footer .menu,
footer .contactanos,
footer .seguinos {
  padding-left:  calc(100vw * 50 / 1920);
  border-left: 1px solid #FFF;
}
footer .menu ul {
  font-size: 0;
}
footer .menu ul li {
  width: 40%;
  display: inline-block;
  color: #fff;
}
footer .menu ul li a {
  color: #fff;
}
footer .contactanos h3,
footer .seguinos h3 {
  color: #FFF;
  font-family: 'Galatia SIL';
  position: relative;
  margin-bottom: calc(100vw * 40 / 1920);
  text-align: left;
}
footer .contactanos h3:after,
footer .seguinos h3:after {
  content: "";
  width: calc(100vw * 80 / 1920);
  height: calc(100vw * 2 / 1920);
  background: #FFF;
  position: absolute;
  left: 0;
  bottom: calc(100vw * -10 / 1920);
}
footer .contactanos ul {
  width: 100%;
}
footer .contactanos ul li {
  height: 32px;
  padding-left: 50px;
  margin-bottom: 10px;
}
footer .contactanos ul li.tel {
  background: rgba(0, 0, 0, 0) url("../images/icon-tel.svg") no-repeat left bottom / 32px 32px;
}
footer .contactanos ul li.cel {
  background: rgba(0, 0, 0, 0) url("../images/icon-cel.svg") no-repeat left bottom / 32px 32px;
}
footer .contactanos ul li.mail {
  background: rgba(0, 0, 0, 0) url("../images/icon-mail.svg") no-repeat left bottom / 32px 32px;
}
footer .contactanos a {
  color: #FFF;
}
footer .seguinos ul li {
  width: 40px;
  height: 40px;
  display: inline-block;
  margin-right: 10px;
}
footer .seguinos ul li.fb {
  background: rgba(0, 0, 0, 0) url("../images/icon-facebook.svg") no-repeat left bottom / 40px 40px;
}
footer .seguinos ul li.in {
  background: rgba(0, 0, 0, 0) url("../images/icon-instagram.svg") no-repeat left bottom / 40px 40px;
}
footer .seguinos ul li a {
  width: 100%;
  height: 100%;
  display: block;
}



@media screen and (max-width: 1199px) {
header .nav > li > a {
    padding: 10px 8px;
}

}

@media (max-width: 1024px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
        border-radius: 0;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #fff;
    }

    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
        background-color: #5ebeea;
    }

    .navbar-collapse {
        border-top: none;
        box-shadow: none;
    }
    .navbar-fixed-top {
        top: 0;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}