@font-face {
    font-family: 'Maax';
    src: url('../fonts/Maax/Maax.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Maax/Maax.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Maax/Maax.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/Maax/Maax.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/Maax/Maax.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../fonts/Maax/Maax.svg#Maax') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Maax';
    src: url('../fonts/Maax/Maax-bold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Maax/Maax-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Maax/Maax-bold.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/Maax/Maax-bold.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/Maax/Maax-bold.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../fonts/Maax/Maax-bold.svg#Maax') format('svg'); /* Legacy iOS */
    font-weight: bold;    
}

@font-face {
  font-family:"Freeland W00 Regular";
  src: url("../fonts/Freeland/1861867a-50e1-4970-a8e4-1638d38dac3d.eot?#iefix");
  src: url("../fonts/Freeland/1861867a-50e1-4970-a8e4-1638d38dac3d.eot?#iefix") format("eot"), 
  url("../fonts/Freeland/c1e6ccf0-cfd8-449d-8747-50d0e8b7fc24.woff2") format("woff2"), 
  url("../fonts/Freeland/261e11ea-c8bf-48e3-a4ef-d7a7fd5e8d1d.woff") format("woff"), 
  url("../fonts/Freeland/4663945d-000c-43bb-adf3-c433878adf4a.ttf") format("truetype");
}

@font-face {
  font-family:"Didot";
  src: url("../fonts/Didot/Didot.eot?#iefix");
  src: url("../fonts/Didot/Didot.eot?#iefix") format("eot"), 
  url("../fonts/Didot/Didot.woff2") format("woff2"), 
  url("../fonts/Didot/Didot.woff") format("woff"), 
  url("../fonts/Didot/Didot.ttf") format("truetype");
}

/*-----------------------------------------------------------------------------------*/
/*	TABLE OF CONTENTS
/*-----------------------------------------------------------------------------------*/
/*
	00. RESET
	01. GENERAL
	02. FOOTER	
	03. BUTTON
	05. HEADER
	05. FIXED MENU	
	06. PARALAX	 
    07. nosotros
    08. contacto
    09. logo
    10. banner-home
    11. estrategias
    12. trabajos es servicios
    13. PROYECTOS es branding
	14. RESPONSIVE
*/
/*-----------------------------------------------------------------------------------*/
/*	00. RESET
/*-----------------------------------------------------------------------------------*/
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
:focus {
    outline: 0 !important
}
.fit-vids-style {
    display: none
}
figure {
    margin: 0;
    padding: 0;
}
figure img {
    width: 100%;
    height: auto;
}
iframe {
    border: none
}
::selection {
    background: #fefac7; /* Safari */
    color: #2f2f2f;
}
::-moz-selection {
    background: #fefac7; /* Firefox */
    color: #2f2f2f;
}
/*-----------------------------------------------------------------------------------*/
/*	01. GENERAL
/*-----------------------------------------------------------------------------------*/
body {
    /*font-family: 'Maax', helvetica, sans-serif;*/
    font-family: 'Raleway', sans-serif;
    overflow-x: hidden;
    background-color: #f4f4f4;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}
.container {
    padding-right: 0;
    padding-left: 0;
}
body,
li,
address {
    line-height: 24px
}
input,
button,
select,
textarea {    
    font-size: 14px;
    font-weight: normal;
}
p {
    margin: 0 0 15px
}
a {
    color: #000;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
}
a:hover,
a:focus {
    color: #868585;
    text-decoration: none;
}
 
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: #2e2e2e;
    margin-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
h1 {
    font-size: 26px;    
}
h2 {
    font-size: 20px;    
}
h3 {
    font-size: 16px;   
}
h4 {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 8px;
}
h5 {
    font-size: 13px;
    line-height: 17px;
}
h6 {
    font-size: 12px;
    line-height: 16px;
}
h1.post-title {
    font-size: 18px;
    line-height: 25px;
}
h2.post-title {
    margin-bottom: 5px;
    font-size: 16px;
}
h2.post-title a {
    color: #2e2e2e
}
h2.post-title a:hover {
    color: #549dc5
}
ul {
    /*padding: 0 0 0 18px*/
    padding: 0;
}
ol {
    padding: 0 0 0 20px
}
ul,
ol {
    margin-bottom: 15px
}
 
.section-title {
    font-size: 34px;     
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: bold;
    letter-spacing: .05em;
    font-weight: lighter;     
    font-style: italic;
    font-family: initial;
}
.lead {
    font-size: 17px;
    line-height: initial;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #2e2e2e;   
    letter-spacing: .05em;
}
.main.lead { margin-bottom: 40px }
.inner { padding-top: 100px; padding-bottom: 100px; }
.thin { width: 80%; margin: 0 auto; }
.dropcap { font-weight: 800; display: block; float: left; font-size: 49px; padding: 0; margin: 0; margin: 12px 8px 0 0;
    text-transform: uppercase; }
hr { border: none; border-bottom: 1px solid rgba(0,0,0,0.16); padding-bottom: 40px; margin-bottom: 70px; }
.anchor { display: block }
.alert { padding-bottom: 13px }
blockquote { color: #FFF; font-size: 22px; line-height: 32px; background: #549dc5; padding: 25px 30px 20px 30px; font-weight: 400; border: 0; }
blockquote small {line-height: inherit; color: #FFF; font-size: 16px; font-weight: 400; margin-top: 5px; }

section{padding: 70px 0 0 0;}
.section{padding: 70px 0 70px;}

.jumbotron{background: none; padding: 70px 0 0 0; margin: 0;}
.jumbotron h2{ font-size:8vw; line-height: 1.19444; text-align: left; max-width: 8em; font-weight: bold; letter-spacing: 0.025em; color: #000; font-family: "Freeland W00 Regular", Georgia, Times, "Times New Roman", serif;  text-transform: initial;}
.jumbotron h3{ text-transform: none;  text-align: left; max-width: 17em; color: #000; font-size: 3.2vw; font-weight: lighter; font-style: italic; font-family:'Georgia', serif; padding-left: 2vw; }
.jumbotron .container-fluid{background-color: #d1cece; padding: 70px 70px 60px 70px;}

#bootstrap-touch-slider .slide-text p:before{content: "\201C"; }
#bootstrap-touch-slider .slide-text p:after {content: "\201D"; }
#bootstrap-touch-slider .slide-text p:before, #bootstrap-touch-slider .slide-text p:after {    
    color: #fff;
    display: inline;    
    font-size: 70px;
    position: absolute;
    margin-top: -17px;   
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
}
#bootstrap-touch-slider .slide-text p:before{ -webkit-transform: rotate(30deg); transform: rotate(30deg);
    margin-left: -38px; }
#bootstrap-touch-slider .slide-text p:after { -webkit-transform: rotate(-30deg); transform: rotate(-30deg);
margin-left: 14px; }

.ko-loader{ display: block; color:#fff; position:absolute; left:33%; top:35%; background: transparent url("../../../resources/images/frontend/ko-loader.png") no-repeat;    width: 50px; height: 41px;}
.bg-gray{background-color: #2f2f2f; color: #fff;}
#brandingModal ul li{margin-left: 15px;}
.center-text{ text-align: center;}
.right-text{ text-align: right;}
.no-margin-top{ margin-top: 0 !important;}

/*-----------------------------------------------------------------------------------*/
/*	02. FOOTER
/*-----------------------------------------------------------------------------------*/
.footer { background: #000; color: #fff; padding-top: 33px; }
.footer a { color: #fff }
.footer a:hover { color: #cacaca }
.footer .container p.copyright{margin: 20px auto; text-align: center;}
.footer p { padding: 0; margin: 0; font-size: 13px; }
#brand {
    background: transparent url("../../../resources/images/frontend/logo.svg") no-repeat scroll 0% 0%;     
    text-indent: -9999px;
    width: 180px;
    height: 60px;
   /* margin: 0 auto 20px auto;*/
    position: relative;
}
#brand span{display: block; border-left: 1px solid #fff; height: 48px; position: absolute; top: 5px; left: 50%; }
.footer .footer-slogan{max-width: 16em; float: right; text-align: right; }
.footer-trabaja{font-weight: bold; font-size: 18px;}
.footer-expresamos{text-transform: uppercase; font-weight: bold; }
.developed{ font-size: 10px;}

/*-----------------------------------------------------------------------------------*/
/*	03. BUTTON
/*-----------------------------------------------------------------------------------*/
.btn {
    color: #fff ;
    background: #000;
    margin-bottom: 10px;
    margin-right: 4px;
    padding: 11px 20px 11px 20px;
    font-weight: 600;
    font-size: 14px;
    text-shadow: none;
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: inline-block;
    border-radius: 4px;
}
 
.btn:hover,
.btn:focus,
.btn:active,
.btn.active {
    background: #9e9d9d;
    color: #fff !important;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
 
.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active,
.btn-blue.active { background: #468eb5 !important }
  
/*===== toTop =====*/ 
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  opacity: 0.7;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /* IE 5-7 */
  filter: alpha(opacity=70);
  /* Netscape */
  -moz-opacity: 0.7;
  /* Safari 1.x */
  -khtml-opacity: 0.7; 

    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;

-moz-box-shadow: 4px 4px 8px 0 rgba(0,0,0,0.4);
-webkit-box-shadow: 4px 4px 8px 0 rgba(0,0,0,0.4);
box-shadow: 4px 4px 8px 0 rgba(0,0,0,0.4);
}

#myBtn:hover {
  background-color: #555;
  opacity: 0.7;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /* IE 5-7 */
  filter: alpha(opacity=70);
  /* Netscape */
  -moz-opacity: 0.7;
  /* Safari 1.x */
  -khtml-opacity: 0.7; 
  color: #fff;
}

/*-----------------------------------------------------------------------------------*/
/*	04. HEADER
/*-----------------------------------------------------------------------------------*/
#main-brand {margin: 0; padding: 0;}
#main-brand a {
    background: url("../../../resources/images/frontend/logo-karla-ojalvo.png") no-repeat;
    display: block; height: 60px; /*text-indent: -9999px;*/ width: 154px; margin: 10px 0 5px 15px; position: relative;padding: 0; }
#main-brand a:hover{ color: #000;}   
#main-brand .slogan{ font-family: 'Lato', sans-serif; text-transform: initial;font-size: 13px; line-height: 13px; position: absolute; right: -5px; top: 2px; display: block;  margin-left: 90px; text-align: left;}
#main-brand .white-line { display: block; border-left: 2px solid #000; height: 38px; position: absolute; top: 3px; left: 52%; }

.navbar-header { float: none !important }
.navbar .container { padding: 0 }
.navbar { margin: 0; border-radius: 0; border: none; position: fixed; z-index: 999; min-height: inherit; width: 100%; }
.navbar .container { position: relative }
.navbar-header { padding: 0; background: #f4f4f4; }
.navbar-collapse {
    width: auto;
    padding: 0;
    border: none;
    background: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.navbar-nav { margin: 0 }
.navbar-nav > li > a {
    font-size: 12px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1;    
    color: #000;
    position: relative;
    transition: color 0.2s cubic-bezier(0.555, 0.205, 0.295, 0.975);
    text-decoration: none;   
    letter-spacing: .05em;
    padding: 33px 5px 31px;
}

.navbar-nav > li > a:after{
    content: ''; 
    height: 1px;
    display: block;
    border-bottom: 2px solid #000;
    width: 0;    
    -webkit-transition: width 0.4s;
    transition: width 0.4s;
    position: absolute;
    top: 50%;
    left: 0;
}
.navbar-nav > li > a:hover:after { width: 100%; }
.navbar-nav .active span{
   /* color: #999999 !important; */  
    position: absolute;
    top: 50%;
    left: 0;
    height: 1px;
    display: block;
    border-bottom: 2px solid #000;
    width: 100%;
}

.nav > li > a:focus { background: none; color: #000; }
.nav > li > a:hover { background: none;   }
.nav > li.current > a:after {
    background: none;    
    content: ''; 
    height: 1px;
    display: block;
    border-bottom: 2px solid #000;
    width: 0;    
    -webkit-transition: width 0.4s;
    transition: width 0.4s;
    position: absolute;
    top: 50%;
    left: 0;
     width: 100%;
}
.navbar .dropdown-menu {
    padding: 0;
    margin: 0;
    min-width: 190px;
    background: #fff;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.navbar .dropdown-menu li {
    background: transparent;
    border: none;
    text-align: left;   
}
.navbar .dropdown-menu li a {
    padding: 7px 8px 7px;
    line-height: 1;
    color: #000;
    font-size: 12px;
    font-weight: 700;   
}
.navbar .dropdown-menu li a:hover,
.navbar .dropdown-menu li a.active {
    padding: 7px 8px 7px;
    filter: none;
    line-height: 1;
    background: #414141;
    color: #e9e9e9;
}
.navbar .nav .open > a,
.navbar .nav .open > a:hover,
.navbar .nav .open > a:focus {
    background: none;
    color: #000;
}
.navbar .nav > li > .dropdown-menu:after {    display: none}
.navbar .nav > li > .dropdown-menu:before {    display: none}
.navbar .dropdown-menu > li > a:hover,
.navbar .dropdown-menu > li > a:focus,
.navbar .dropdown-submenu:hover > a,
.navbar .dropdown-submenu:focus > a,
.navbar .dropdown-menu > .active > a,
.navbar .dropdown-menu > .active > a:hover,
.navbar .dropdown-menu > .active > a:focus {
    background: none;
    color: #ccc;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn.responsive-menu {
    padding: 9px 12px 9px;
    margin: 27px 0 0 0 !important;
    display: none;
    font-size: 15px;
    line-height: 1;
}
.btn.responsive-menu i {
    margin: 0
}
.music-ko{ /*display: none;*/}
.title-site{ text-indent: -99999999999999999px; display: block;}
.body-wrapper .navbar{background-color: #f4f4f4;}
/*-----------------------------------------------------------------------------------*/
/*	05. FIXED MENU
/*-----------------------------------------------------------------------------------*/
.offset {    display: block}
.navbar.default {
    width: 100%;
    position: absolute;
}
.navbar.fixed {
    position: fixed;
    left: 0;
    padding: 0;
    margin: 0;
    width: 100%;
}

/*-----------------------------------------------------------------------------------*/
/*	06. PARALAX
/*-----------------------------------------------------------------------------------*/
.parallax {      position: relative;    color: #FFF;}
.parallax .inner {    padding-top: 130px;    padding-bottom: 130px;}
   
.parallax.mobile {
    background-attachment: scroll !important
}
.parallax.parallax1 {
    background: url(../../../resources/images/frontend/art/office.jpg) fixed no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover; 
    position: relative; 
}
.parallax.parallax1:after {
    width:100%;
    height:100%
}

.parallax.parallax1:after {   
    content:'';
    display:block;
    top:0;
    left:0;
    position:absolute;
    background:-webkit-linear-gradient(left,transparent,rgba(0,0,0,.79) 56%,rgba(0,0,0,.8) 57%);
    background:linear-gradient(90deg,transparent 0,rgba(0,0,0,.79) 56%,rgba(0,0,0,.8) 57%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#cc000000',GradientType=1)
}
 
.parallax h1 {
	font-size: 28px;
    font-weight: 600;
}
/*-----------------------------------------------------------------------------------*/
/*  07. nosotros
/*-----------------------------------------------------------------------------------*/
.dash-holder { position: relative; padding-left: 6.5rem; /*margin-bottom:50px; margin-top: 100px;*/margin-bottom:25px; margin-top: 50px;}
.title{text-transform: uppercase; 
    font-weight: 700;
    word-wrap: break-word;
    /*max-width: 21em;*/
    line-height: 1.19444;
    font-size: 10px;
    letter-spacing: 0.025em;
}
.dash-holder .dash {
    position: absolute;
    top: 0.5rem;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
    display: inline-block;
    vertical-align: middle;    
    border-top: 0.2rem solid;
    height: 0;
    width: 4rem;
    display: inline-block;
    vertical-align: middle;
    border-top: 0.2rem solid;
    border-bottom: 0;
}
hr {border-color: #d9d9d9;}
.text-big{ font-size: 20px;}
.text-big-bold{ font-size: 25px; line-height: 34px; font-weight: bold;}
.text{ margin: 35px 0;}
.text-upper-bold{ text-transform: uppercase; font-weight: bold;}
.bold{font-weight: bold !important;}
.bold-big{ font-size: 20px; font-weight: bold;}
.bold-bigger{ font-size: 30px; font-weight: bold;}
.bg-desc{background-color: #e7e7e7; padding: 20px;}
ul.list-with-style{margin-top: 10px;}
ul.list-with-style li{list-style: circle; }
ul.list-with-style-num li{list-style: url; }

.video-player__thumb{
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    -moz-animation-duration: 2s;   
    -o-animation-duration: 2s;
    -ms-animation-duration: 2s;
    animation-duration: 2s;
    position: relative;
    margin-bottom: 10px;
}
.video-player__thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#nosotros .dash-holder:last-child{margin: 0;}
#nosotros h3{text-transform: none;}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0px;
    background-color: transparent;
    text-align: center;
}
.video-overlay-center {
    margin: auto;
    margin-top: auto;
    margin-top: 23%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: #ffffff;   
    font-size: 480%;
    font-size: 4.3vw;
    font-weight: initial;
    text-shadow: #000000 3px 3px 3px;
    white-space: nowrap;
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
    text-transform: uppercase;
    line-height: 1.19444;
}
/*-----------------------------------------------------------------------------------*/
/*  08. contacto
/*-----------------------------------------------------------------------------------*/
.parallax.parallax5 {
    background: url(../../../resources/images/frontend/art/contacto2.jpg) fixed no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}
.parallax.parallax5:after {
    width:100%;
    height:100%
}
.parallax5:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: rgba(0,0,0,.6);
    z-index: 1;
}
section#contacto{padding-bottom:0; margin-top: 65px;}
#contacto .container { z-index: 3; position: relative; }
.inner { padding-top: 130px; padding-bottom: 130px; }
#contacto .inner { padding: 100px; }
.control-label{text-transform: uppercase; display: inline-block; color: #fff; float: left; font-weight: initial; }
#contacto form textarea.form-control { height: 214px; resize: vertical; }
#contacto form .form-control {
    background: none;
    border: 1px solid #fff;
    padding: 10px;    
    border-radius: 0;
    background-color: transparent;
    height: auto;
    color: #fff;
}
#contacto form .form-control:active, #contacto form .form-control:focus {  border-color:#fff200;  -o-box-shadow:none;
 box-shadow:none; }
#contacto form .btn {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;     
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    padding: 10px 20px;
    display: block;
    width: 100%;
    letter-spacing: .1em;
    border-radius: 0;
}
#contacto form .btn:hover { background-color:#999100; border-color:#999100 }
.contact-info{ background-color: transparent; margin: 0; overflow: hidden; color: #fff; padding: 30px 0; margin: 0 0 20px 0;}
.contact-info h2, .contact-info h3{ color: #fff;}
.contact-info h2{font-size: 60px;}
.contact-info h3{font-size: 18px; font-weight: normal;}
.contact-title{ text-align: center; margin: 0 auto; background-color: transparent; padding: 20px; margin: 0 auto 25px auto; }
.cell, .email{ font-weight: bold;}
.reverse { unicode-bidi: bidi-override; direction: rtl; }
.contact-info .text-left{ font-size: 23px; line-height: 35px;}
.contact-info .text-right{ font-family: Hero,sans-serif; font-size: 25px; border-right: 2px solid #fff;
line-height: 35px; padding-right: 10px;}
.icon-mobile, .icon-mail-1{font-size: 35px; }
.icon-mobile{margin: 0 0 0 10px;}
.icon-mail-1{margin: 0 10px 0 0;}
.contact-info .text-center{margin: 15px 0 0 0;}
#contacto form .captcha-img{margin-top: 15px;}
.success{color:yellow;}
.error_message, .error_title{color: red; text-shadow: 2px 2px 4px #000000;}
.error_title{text-align: center;}
.message{display: none;}
.smile-hide{height: 7em; position: absolute; bottom: 20%; left: 45%;}
.sending{position: absolute; bottom: 17%; left: 47%; color: yellow; }


/*-------- 09. logo------------*/
.navbar-brand img{ height: inherit; }

/*--------- 10. banner-home--------*/
section#inicio{padding: 70px 0 70px;}
#banner-home{padding: 0; /*background-color: yellow;*/ margin-bottom: 75px;}

#banner-home .item { height: 400px;  display: table; width: 100%; }
#banner-home .item .row{  /*display: table-cell; vertical-align: middle;*/  color: #000; }
/*#banner-home {padding: 80px 0 0 0;}*/

/* Required for scroll effects */
.hidden-element{ opacity: 0; }
.visible{ opacity: 1; }

.owl-theme .owl-nav [class*="owl-"] { background: none; color: #919396; font-size: 54px; }
.owl-next:hover, .owl-prev:hover{ background: transparent !important; color: #000 !important;}

.text-right {text-align: right;}
.text-left {text-align: left; }
 
#banner-home .row > div{ text-align: center; }
#banner-home .lead{font-size: 24px;}

#banner-home .owl-prev{position: absolute; top: 40%; left: 10%;}
#banner-home .owl-next{position: absolute; top: 40%; right: 10%;}
 
#banner-home h2{ font-style: italic; font-size: 40px; margin: 0 auto;  text-transform: uppercase; font-weight: lighter; font-family: 'Georgia', serif; padding-top: 80px;}
#banner-home h3{ font-family: 'Lato', sans-serif; text-transform: none; font-size: 23px; font-weight: 300; font-style: italic; max-width: 48vw; margin: 0 auto; color: #000;}
#banner-home h4, #ingredientes h4{font-family: "Freeland W00 Regular", Georgia, Times, "Times New Roman", serif; text-transform: initial;   font-size: 27px; margin: 0 auto; /*margin-top: 5vw;*/ line-height: 35px; padding: 0 0 0 7px;}
#banner-home h4 { margin-top: 5vw!important; }
#banner-home .row hr{width: 30%; text-align: center; margin: 3vw auto; padding: 0;}

#ingredientes{margin-top: 75px;}
#ingredientes .item h4{margin-bottom: 20px;}
#ingredientes .section-title{ font-family: 'Georgia', sans-serif;}

.banner-marca{}

/*--------- 11. slider--------*/
.bs-slider{
    overflow: hidden;    
    max-height: 559px;
    position: relative;
    background: #000000;
}
.bs-slider:hover {
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.bs-slider:active {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
.bs-slider .bs-slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.60);
}
.bs-slider > .carousel-inner > .item > img,
.bs-slider > .carousel-inner > .item > a > img { margin: auto; width: 100% !important; }
 
/********************
*****Slide effect
**********************/
 
.fade {
    opacity: 1;
}
.fade .item {
    top: 0;
    z-index: 1;
    opacity: 0;
    width: 100%;
    position: absolute;
    left: 0 !important;
    display: block !important;
    -webkit-transition: opacity ease-in-out 1s;
    -moz-transition: opacity ease-in-out 1s;
    -ms-transition: opacity ease-in-out 1s;
    -o-transition: opacity ease-in-out 1s;
    transition: opacity ease-in-out 1s;
}
.fade .item:first-child { top: auto; position: relative; }
.fade .item.active {
    opacity: 1;
    z-index: 2;
    -webkit-transition: opacity ease-in-out 1s;
    -moz-transition: opacity ease-in-out 1s;
    -ms-transition: opacity ease-in-out 1s;
    -o-transition: opacity ease-in-out 1s;
    transition: opacity ease-in-out 1s;
}

#ingredientes .owl-carousel {position: relative; }
#ingredientes .owl-prev, #ingredientes .owl-next { position: absolute; top: 50%;  margin-top: -10px; z-index: 10; // Half of the prev/next buttons height here in negatives to center them perfectly }
#ingredientes .owl-prev { left: 0; }
#ingredientes .owl-next { right: 0; }

#ingredientes .item .row div:first-child{ /*padding-right: 80px; padding-left: 10%;*/ }
#ingredientes .item .row { height: 100%; display: flex; align-items: center; justify-content: center; color: #000; left: auto;
    right: auto; top: auto; bottom: auto;  position: relative; margin: auto; z-index: 2; padding: 0; text-align: center;
}
#ingredientes .text-left{padding: 0;}

#ingredientes p{line-height: 30px;}
#ingredientes .modal-title{font-size: 20px;}
#ingredientes .modal-footer { text-align: center; }
#ingredientes .row hr{width: 50%; text-align: center; margin: 20px auto; padding: 0;}

/*---------- LEFT/RIGHT ROUND CONTROL ----------*/
 
.control-round .carousel-control {
    top: 47%;
    opacity: 0;
    width: 45px;
    height: 45px;
    z-index: 100;
    color: #ffffff;
    display: block;
    font-size: 24px;
    cursor: pointer;
    overflow: hidden;
    line-height: 43px;
    text-shadow: none;
    position: absolute;
    font-weight: normal;
    background: transparent;
    -webkit-border-radius: 100px;
    border-radius: 100px;
}
.control-round:hover .carousel-control{ opacity: 1; }
.control-round .carousel-control.left {  left: 1%; }
.control-round .carousel-control.right { right: 1%; }
.control-round .carousel-control.left:hover,
.control-round .carousel-control.right:hover{
    color: #fdfdfd;
    background: rgba(0, 0, 0, 0.5);
    border: 0px transparent;
}
.control-round .carousel-control.left>span:nth-child(1){ left: 45%; }
.control-round .carousel-control.right>span:nth-child(1){ right: 45%; }
 
/*---------- INDICATORS CONTROL ----------*/
 
.indicators-line > .carousel-indicators{
    right: 45%;
    bottom: 3%;
    left: auto;
    width: 90%;
    height: 20px;
    font-size: 0;
    overflow-x: auto;
    text-align: right;
    overflow-y: hidden;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    white-space: nowrap;
}
.indicators-line > .carousel-indicators li{
    padding: 0;
    width: 15px;
    height: 15px;
    border: none;
    text-indent: 0;
    overflow: hidden;
    text-align: left;
    position: relative;
    letter-spacing: 1px;
    background: rgb(158, 158, 158);
    -webkit-font-smoothing: antialiased;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-right: 5px;
    -webkit-transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99);
    transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99);
    z-index: 10;
    cursor:pointer;
}
.indicators-line > .carousel-indicators li:last-child{ margin-right: 0; }
.carousel-indicators li{ border-radius: initial !important; opacity: .5; }
.indicators-line > .carousel-indicators .active{    
    margin: 1px 5px 1px 1px;
    box-shadow: 0 0 0 2px #fff; 
    background-color: #fff;
    position: relative;
    -webkit-transition: box-shadow 0.3s ease;
    -moz-transition: box-shadow 0.3s ease;
    -o-transition: box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
     opacity: .5;
}
  
/*---------- SLIDE CAPTION ----------*/
.slide_style_left { text-align: left !important; }
.slide_style_right { text-align: right !important; }
.slide_style_center { text-align: center !important; }
.slide-text {
    left: 0;    
    top: 23%;
    right: 0;
    margin: auto;
    padding: 10px;
    position: absolute;
    text-align: left;
    padding: 10px 85px;
    
}
.slide-text > p {    
    padding: 0;
    color: #ffffff;
    font-size: 35px;
    font-style: normal;    
    margin: 0 0 10px 0;    
    display: inline-block;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
    text-transform: uppercase;
    max-width: 23em;
    font-weight: 500;
    line-height: 1.1;
}
.slide-text > small {
    padding: 0;
    color: #b1b1b1;
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    margin: 15px 0 0 0;     
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    text-transform: none;
    display: block;
}
.slide-text > a.btn-default{
    color: #000;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    margin-right: 10px;
    text-align: center;
    padding: 17px 30px;
    white-space: nowrap;
    letter-spacing: 1px;
    display: inline-block;
    border: none;
    text-transform: uppercase;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;

}
.slide-text > a.btn-primary{
    color: #ffffff;
    cursor: pointer;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    margin-left: 10px;
    text-align: center;
    padding: 17px 30px;
    white-space: nowrap;
    letter-spacing: 1px;
    background: #00bfff;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.slide-text > a:hover,
.slide-text > a:active {
    color: #ffffff;
    background: #222222;
    -webkit-transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}

/* SERVICES */
/*section#home-servicios{padding: 0;}*/

/* RESPONSIVE*/
@media (max-width: 991px) {
    .slide-text p { font-size: 25px; }
    .slide-text > small { font-size: 18px; }
    #contacto .text-right, #contacto .text-left { text-align: center; }  
    
    #banner-home .row hr{ margin: 4vw auto;}
   /* #banner-home{padding: 50px 0 0 0;}
    */
}
 
@media (max-width: 768px) {
    section#inicio{padding: 70px 0 35px 0;}
    .slide-text { padding: 10px 50px; }
    .slide-text p { font-size: 20px; }
    .slide-text > small { font-size: 14px; line-height: 20px; margin-bottom: 20px; }
    
    #banner-home h3{font-size: 18px; max-width: 80vw;  }
    #banner-home h4{font-size: 20px;}
    #banner-home .item { height: 350px;}      
    #banner-home h2{ font-size: 25px; }      
    section {padding: 35px 0 0 0;}

    #contacto .inner { padding: 50px; }
    .footer #brand{ margin: 0 auto;}
    .footer .footer-slogan {max-width: initial; float: none; text-align: center; padding: 20px 0; }
    .footer-trabaja{ padding: 10px 0 20px 0; display: block; text-align: center;     }
    
    #ingredientes .section-title {font-size: 25px !important;}  
    #ingredientes .item .row{ display: block;}
    #ingredientes .item .row div:last-child{ /*display: none !important; */}
    #ingredientes .item .row div:first-child { padding-right: 2%; padding-left: 2%; }
    #ingredientes .item .row .text-right { text-align: center; }
    #ingredientes .section-title { margin-bottom: 30px; }   
    #ingredientes img{padding: 20px 20px 0 20px;} 

    .section-servicios .row div { padding-left: 20px !important; }      
    .section-servicios .container-fluid a{ max-width: none !important; }  
    
    .section-servicios .row .post{padding: 0 !important;}
    .section-servicios .row .post:first-child{ padding-top: 30px !important;}
    
    #proyectos .row div { padding: 0 0 0 20px !important; }  
    #proyectos .container-fluid a{ max-width: none !important; }
    #proyectos .row  div.post{ margin-top: 40px;}

    .right-corder-container {left:8% !important;}  
    #home-servicios .dash-holder, #ingredientes .dash-holder, #contacto .dash-holder { margin-top: 0; }
    .dash-holder.second { margin-top: 50px; }

    #last-projects .row div{ margin-bottom: 20px;}
    #last-projects .row div:last-child{ margin-bottom: 0;}
}
@media  (max-width: 480px) {
    .jumbotron { padding:20px 0 0 0; }     
    .jumbotron h3{ font-size: 4vw;}
    .jumbotron .container-fluid {padding: 35px 40px 30px 40px;}
    .wrapper-text h2, .wrapper-text h3{ margin: 0 auto;}
    
    #nosotros .dash-holder .text1{font-size: 16px; line-height: 23px;}
    #nosotros .dash-holder .text3{font-size: 15px; }
    .indicators-line > .carousel-indicators{ right: 34%; }    
    #brandingModal .modal-body p, #marcaModal .modal-body p{font-size: 16px;}  

    .slide-text { padding: 10px 30px; }
    .slide-text p { font-size: 14px;  }
    .slide-text > small {
        font-size: 12px;
        line-height: 18px;
        margin: 0;
    }
    .slide-text > a.btn-default, 
    .slide-text > a.btn-primary {
        font-size: 10px;
        line-height: 10px;
        margin-right: 10px;
        text-align: center;
        padding: 10px 15px;
    }
  
    #banner-home h3{font-size: 16px;}
    #banner-home h4{font-size: 18px; }
    #banner-home h2{ font-size: 17px; max-width: initial;} 
    #banner-home .item { height: 300px;}    
    #banner-home .row > div { text-align: center; padding-right: 5px; padding-left: 5px; }
  
    #contacto .inner { padding: 25px; }
    #contacto .contact-info .text-right, #contacto .contact-info .text-left{ font-size: 15px !important;}
    #contacto .contact-info h2{font-size: 25px;}
    #contacto .contact-info h3{font-size: 15px;}
    .icon-mobile, .icon-mail-1 { font-size: 20px;}
    #contacto .control-label {font-size: 15px;}

    .section-servicios .container-fluid a{ font-size: 25px !important; }
    #proyectos .container-fluid a{ font-size: 20px !important; }

    #ingredientes .section-title { font-size: 17px !important;}
    #ingredientes h4{font-size: 23px;}
}
@media (min-width: 480px) and (max-width: 991px) {
    .slide-text { top: 30%; }
     #nosotros .dash-holder .text1{font-size: 20px; }
    .jumbotron { padding:35px 0 0 0; }    
    
}
 
/*------------------------------------------------------*/
/* 12. TRABAJOS
/*------------------------------------------------------*/ 
#servicios{padding-top: 90px;}
#trabajos{ padding-bottom: 0;}
.section-servicios .row  .post{margin: 0 0 30px 0; padding: 0 10px 60px 150px;}
.section-servicios .container-fluid a{color: #fff; font-size: 35px; font-weight: bold; max-width: 6em; display: inline-block;
line-height: 1; font-family: "Freeland W00 Regular", Georgia, Times, "Times New Roman", serif;}
.section-servicios .container-fluid h3 a:hover{color: #5b5b5b;}
.title-2{text-transform: uppercase; font-weight: normal; font-size: 12px; letter-spacing: 0.025em; color: #fff; margin: 0 0 15px 0; }
.section-servicios .row .post:first-child{ padding-top: 90px;}
.section-servicios .row .post:first-child .right-corder-container{top: 55%;}
.section-servicios h3{text-transform: none;}
.right-corder-container { position: absolute; top: 15%; /*left: 70%;*/ left: 33%; }
.right-corder-container .right-corder-container-button {
    height: 42px;
    width: 42px;
    border:none;
    background-color:#2f2f2f;          
    transition: all 300ms;      /*Animation to close the button (circle)*/    
    cursor:pointer;
    position: relative;
    border:1px solid #fff;
    font-family: 'Raleway', sans-serif;
}
.right-corder-container .right-corder-container-button span {font-size: 20px; color:#c8a559; position: absolute; left: 12px;
    top: 8px;  line-height: 28px; }
.right-corder-container .right-corder-container-button:hover {
    transition: all 400ms cubic-bezier(.62,.1,.5,1);      
    width:140px;                                            
    background-color: #fff;                   
}

/*
    Long text appears slowly with an animation. That code prepare the animation by hidding the text.
    The use of display is not there because it does not work well with CSS3 animation.
*/
.right-corder-container .right-corder-container-button .long-text {
    transition: opacity 1000ms; /*Only the text fadein/fadeout is animated*/
    opacity:0;                /*By default we do not display the text, we want the text to fade in*/
    color:#2f2f2f;
    white-space: nowrap;      
    font-size: 0;             /*Set to 0 to not have overflow on the right of the browser*/
    width: 0;                 /*Set to 0 to not have overflow on the right of the browser*/
    margin:0;                 /*Set to 0 to not have overflow on the right of the browser*/
}

/*
    Animation to have a text that appear progressively. We need to play with a delay
    on the width and the font-size to not have the browser have the text appears on the right
    side of the browser view port. This has the side-effect of having an horizontal bar.
*/
.right-corder-container .right-corder-container-button .long-text.show-long-text{
  transition: opacity 700ms,
              width 1ms linear 270ms,       /*two thirds of the animation on the container width*/
              font-size 1ms linear 270ms;   /*two thirds of the animation on the container width*/
  opacity:1;
  margin-top: 0px;                          /*Center the position vertically*/
  margin-left: 45px;                        /*Center between the + and the right end side*/
  font-size: 12px;                          /*Text size, cannot be defined initially without moving the scrollbar*/
  width: auto;                              /*Required to be set with a delay (see animation) to not have scrollbar. Delay is to wait container to size up*/
  text-transform: uppercase;
}

/*anterior hover*/
/*
#servicios .row a{display:block; margin: 0 0 15px 0; position: relative; cursor: url('../../../resources/images/frontend/search.png') 5 15, move; background-color: #fff;  padding: 20px 0; } 
#servicios .row a img{margin: 0 auto;    position: relative; z-index: 2; opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    -ms-transition: opacity .25s ease-in-out;
}
*/
/* end anterior hover*/
 
#servicios .row a{display:block; margin: 0 0 15px 0; position: relative; background-color: #fff;  padding: 20px 0; } 
#servicios .row a img{ margin: 0 auto;}
a[data-gal] .overlay {
    display: block;
    background: rgba(39,39,39,0);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
a[data-gal] .hover {
    display: block;
    visibility: hidden;
    height: 50px;
    width: 61px;
    text-align: center;
    position: absolute !important;
    left: 50%;
    margin-left: -15px;
    top: 50%;
    margin-top: -15px !important;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

a[data-gal]:hover .overlay { background:rgba(39,39,39,0.73);  }
a[data-gal]:hover .hover, a[data-gal]:hover .hover-text { visibility:visible; }
#servicios .container{margin-bottom: 30px;}
/*.fancybox {position:relative; display:block; }*/
.breadcrumb a, .breadcrumb > .active{ font-size: 12px;}
.breadcrumb > li + li::before {padding: 0;}
.breadcrumb-top .breadcrumb{ margin-bottom: 0; padding-top: 0; }
.item-description{ margin-left: 65px;}
.item-description ul li{list-style-type: none;}
.item-description ul li:before{content: "\2014\00a0";}

/*fancybox horizontal*/
.fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0;
    left: 0;
    right : 0;
    height: 95px;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
}
.fancybox-show-thumbs .fancybox-inner { right: 0; bottom: 95px; }

.fancybox-inner{ width: 100% !important; }
.fancybox-thumbs{top: initial !important; width: 100% !important;}

/*------------------------------------------------------*/
/* 13. PROYECTOS
/*------------------------------------------------------*/ 
#proyectos .row .post{margin: 0 0 30px 0; padding: 0 10px 60px 150px;}
#proyectos .container-fluid a{color: #fff; font-size: 35px; font-weight: bold; max-width: 10em; display: inline-block;
line-height: 1;}
#proyectos .container-fluid h3 a:hover{color: #5b5b5b;}
#proyectos .row .post:first-child{ padding-top: 90px;}
#proyectos .row .post:first-child .right-corder-container{top: 55%;}
#proyectos .right-corder-container .right-corder-container-button:hover { background-color: #fff; }
#proyectos .right-corder-container .right-corder-container-button .long-text{ color: #2f2f2f;}
#proyectos .row h3{margin:0; text-transform: none;}
#proyectos .container ul, #proyectos .container ol{padding: 20px 0 0 30px;}
#proyectos .container{margin-bottom: 50px;}
#proyectos .branding{margin-bottom: 50px;}

#proyects-gallery .row a{display:block; margin: 0 0 15px 0; position: relative;  /*cursor: url('../../../resources/images/frontend/search.png') 5 15, move;*/ background-color: #fff; padding: 20px 0;}
/*
#proyects-gallery .row a img{width: auto;  height: auto; margin: 0 auto;  position: relative; z-index: 2; 
    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    -ms-transition: opacity .25s ease-in-out;
}
 */
#proyects-gallery .row h3{ text-align: center; text-transform: none; }
#proyects-gallery .proyect-description dt{float: left; margin-right: 10px; }
#proyects-gallery .proyect-description i{margin-right: 10px; }
#proyects-gallery .proyect-description  h2{margin: 40px 0 30px 0;}
#proyects-gallery h3{margin: 30px 0 40px 0;}
#proyects-gallery .proyect-description ul li{list-style-type: none;}
#proyects-gallery .proyect-description ul li:before{content: "\2014\00a0";}

.shadow { position: absolute; width: 100%;left: 0; bottom: 0; text-align: center; 
    height: 20%; background-color: rgba(0, 0, 0, 0.40);
}
.info { position: absolute; width: 100%;left: 0; top: 85%; /*margin-top: -37.5px;*/ text-align: center; color: #ffffff;
}
.info a { display: block;  /*background: transparent url(../../../resources/images/frontend/gallery_hover2.png) no-repeat bottom center !important;*/
    height: 75px; padding: 0 !important; color: #fff; text-transform: initial; background-color: transparent !important;
}
.info h3{ color: #fff;text-transform: initial;}

/*-----------------------------------------------------------------------------------*/
/*   LAST PROJECTS
/*-----------------------------------------------------------------------------------*/
#last-projects .row div{ /*max-height: 200px; overflow: hidden;*/ height: 300px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }
#last-projects{ margin-top: 75px; display: none;}

/*-----------------------------------------------------------------------------------*/
/*  14. RESPONSIVE
/*-----------------------------------------------------------------------------------*/
@media (min-width: 1200px) {    
    .navbar-nav > li {         
        margin-left: 2rem;
    }
}
@media (min-width: 992px) { 
    .nav.navbar-nav > li:last-of-type > ul {
        left: auto;
        right: 0;
    }
    .nav.navbar-nav> li:last-of-type > ul ul {
        left: auto;
        right: 100%;
        margin-top: -1px;
        margin-right: -1px;
        border-right: 1px solid rgba(255,255,255, 0.06) !important;
    }
    .navbar .dropdown-submenu > a:after {
        display: none
    }
    .navbar .dropdown-submenu > .dropdown-menu {
        margin-top: 0
    }
    .dropdown-submenu {
        position: relative
    }
    .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px !important;
        margin-left: 0;
        border-left: 1px solid rgba(255,255,255, 0.06) !important;
    }
    .dropdown-submenu:hover>.dropdown-menu {
        display: block
    }
    .dropdown-submenu>a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        margin-top: 5px;
        margin-right: -10px;
    }
    .dropdown-submenu:hover>a:after {

    }
    .dropdown-submenu.pull-left {
        float: none
    }
    .dropdown-submenu.pull-left>.dropdown-menu {
        left: -100%;
        margin-left: 10px;
    }
    .open > .dropdown-menu,
    .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu {
        animation-name: slidenavAnimation;
        animation-duration: .3s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        -webkit-animation-name: slidenavAnimation;
        -webkit-animation-duration: .3s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: ease;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-name: slidenavAnimation;
        -moz-animation-duration: .3s;
        -moz-animation-iteration-count: 1;
        -moz-animation-timing-function: ease;
        -moz-animation-fill-mode: forwards;
    }
    @keyframes slidenavAnimation {
        from {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }
    @-webkit-keyframes slidenavAnimation {
        from {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }
    .navbar-nav > li {
        border-right: 1px solid rgba(255,255,255, 0.06);
        margin-left: 2rem;
    }
    .navbar-nav > li:first-child {
        border-left: 1px solid rgba(255,255,255, 0.06)
    }
        
    .navbar.fixed .navbar-collapse {
        max-height: inherit;
       /* float: none !important;*/
    }
    .navbar.fixed .navbar-collapse .navbar-nav {
        text-align: center;
        float: none;
        padding: 0;
    }
    .navbar.fixed .navbar-collapse .navbar-nav > li {
        /*float: none;*/
        display: inline-block;
    }
}
@media (min-width: 991px) { 
    #proyectos .col-md-3:nth-child(5n) { clear: left; }
}
 
@media (max-width: 991px) { 
    .navbar-brand {
        position: relative;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        margin: 0;
    }
    .navbar.fixed { height: 53px  }
    .navbar.fixed .navbar-brand {
        /*display: none*/
    }
    .navbar.fixed .btn.responsive-menu {
        /*margin: 9px auto !important;*/
        /*float: none !important;*/
        display: inline-block;
    }
    .btn.responsive-menu { display: block  }
    .navbar .nav,
    .navbar .dropup,
    .navbar .dropdown,
    .navbar .collapse {
        position: relative
    }
    .navbar .dropdown-menu {
        position: relative;
        left: inherit;
        top: inherit;
        float: none;
        width: auto;
        display: block !important;
        background: none;
    }
    .navbar .dropdown-menu li { border: none  }
    .navbar-nav > li > a,
    .navbar .dropdown-menu li a,
    .navbar li a:hover {
        border-bottom: 1px solid rgba(255,255,255, 0.06)
    }
    .navbar .nav .open > a,
    .navbar .nav .open > a:hover,
    .navbar .nav .open > a:focus {
        background: none;
        border-color: rgba(255,255,255, 0.06);
    }
    .navbar-nav > li > a,
    .navbar .dropdown-menu li a,
    .navbar .dropdown-menu li a:hover,
    .navbar .dropdown-menu li a.active {
        padding: 13px 5px 11px !important
    }
    .navbar-nav .open .dropdown-menu > li > a { line-height: 1 }
    
    .navbar .dropdown-menu { padding-left: 20px }
    .navbar-nav > li { border: none  }
    .navbar .dropdown-menu a { font-size: 13px !important  }
    .navbar.basic .btn.responsive-menu { margin: 31px 0   }
    .navbar-header .in{  background: #f4f4f4;   }
    .navbar-header { float: left;  width: 100%;    }
    .navbar-header:after {
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .navbar .container { width: 100%; padding: 0;  }
    .navbar .navbar-collapse {
        width: 100%;
        float: none !important;
        margin: 0;
        max-height: none;
    }
    .navbar .navbar-nav {
        width: 720px;
        margin: 20px auto 0;
        padding: 0;
    }
    .navbar .basic-wrapper {
        width: 720px;
        margin: 0 auto;
        display: block;
        text-align: center;
    }   
    .nav > li > a{display: inline-block; font-size: 15px;}

    #contacto .contact-info .text-right{border:none;}

    #bootstrap-touch-slider .slide-text p:before, #bootstrap-touch-slider .slide-text p:after {
        font-size: 40px;
        margin-top: -7px;  
    }
    #bootstrap-touch-slider .slide-text p:before{  margin-left: -23px; }
    #bootstrap-touch-slider .slide-text p:after { margin-left: 5px; }   

    .item-description{ margin-left:0 !important; }     
}
@media (max-width: 960px) {
    #banner-home .owl-prev{  left: 0;}
    #banner-home .owl-next{  right: 0;}
}
@media (max-width: 767px) { 
    .navbar.fixed .navbar-collapse .navbar-nav {
        max-height: 230px !important;
        overflow-y: scroll;
    }
    .container {padding-right: 20px; padding-left: 20px;    }
    .navbar .container { padding-right: 0px; padding-left: 0px;    }
    .navbar .navbar-nav {
        width: 100%;
        margin: 20px auto 0;
        padding-left: 20px;
        padding-right: 20px;
    }
    .navbar .basic-wrapper {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        margin: 0 auto;
        display: block;
    }
    .navbar .navbar-nav > li { margin-left: 0 }
    .inner { padding-top: 70px; padding-bottom: 70px; }    

}
@media (max-width: 1200px) { 
    #contacto .contact-info .text-right, #contacto .contact-info .text-left{ font-size: 20px;}
    #ingredientes .section-title {font-size: 30px;}
    #ingredientes .item .row div:first-child { padding-right: 3%; padding-left: 3%; }
}
@media (min-width: 768px) and (max-width: 991px) { 
    .navbar .container,
    .container { padding-right: 15px; padding-left: 15px; } 
    #ingredientes .section-title {font-size: 23px;} 
    #proyectos .col-sm-4:nth-child(4n) { clear: left; }
    #banner-home h2 {font-size: 28px; }
}
 
@media (min-width: 480px) and (max-width: 768px) {
    .indicators-line > .carousel-indicators{ right: 40%; }
    .section-servicios .container-fluid a{ font-size: 30px !important; }
    #proyectos .container-fluid a{ font-size: 25px !important; }
     
    .col-xxs-12 { width: 50%; float: left;}
    .contact-info h2 {font-size: 40px;}
}

@media only screen and (min-width: 768px) { 
    /*=====dropdown hover=====*/
    li.dropdown:hover > .dropdown-menu {display: block; }    
} 
@media  (max-width: 550px) {
    .owl-nav{ display: none;}
}
@media  (max-width: 360px) {    
    .jumbotron h2{ font-size: 35px;}
    .jumbotron h3{ font-size: 16px;}
    #banner-marca{max-width: 95vw !important;}

    .right-corder-container .right-corder-container-button .long-text.show-long-text{ margin-left: 25px; }
    .right-corder-container .right-corder-container-button:hover {width:110px; }
}    
/*--------- POPUP HOME MODAL -------------*/

#ads-birthday .modal-body {padding-top: 5px;}
#ads-birthday .modal-header{border-bottom: none !important; overflow: hidden; padding: 0 15px;}
#ads-birthday .modal-header .close{font-size: 41px;}
#ads-birthday .img-responsive { display: block; max-width: 100%; height: auto; margin: 0 auto;}
#ads-birthday .modal-footer{ text-align: center; }  
#ads-birthday .hablamos{ color: #000; text-decoration: none; }
#ads-birthday .hablamos:hover{ text-decoration: none; color: #000; }
@media only screen  and (max-width: 768px) {
#ads-birthday .hablamos{ font-size: 27px !important; display: block; margin: 0 auto; }
}