/**
 * Base elements
 */
-------------------------------------------------------- */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
html {
    width: 100%;
    height: 100%;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}
body {
    width: 100%;
    height: 100%;
    font-family: 'Raleway', 'Open Sans', sans-serif;
    background-color: #fff;
    color: #252f30;
}

*, h1, h2, h3, h4, h5, h6, p, a, li, a.button {
    font-family: 'Raleway', 'Quattrocento Sans', sans-serif;
}

h3, h2{
    font-weight: 700 !important;
}

h3, h2 {
    font-size: 50px;
    line-height: 45px;
}

h1.cabecera-legal {
 font-size: 40px;
  line-height: 30px;
  font-weight: 600 !important;
}


h3.cabecera-legal {
 font-size: 30px;
  line-height: 30px;
  font-weight: 600 !important;
  margin-botom: 2rem;
}

p, ul{
    color: #252f30;
    font-size: 18px;
}

.bgLogo{
    background-image: url("qassets/Zener_logo_bg.png");
    background-position: right;
    background-size:contain;
    background-repeat: no-repeat;
}

.bgDark * {
    color: #ffffff;
}

.color-light {
    color: #ffffff;
}

a {
    text-decoration: none;
    color: #252f30;
}

a.button, *.button{
    height:50px;
    border-radius:15px;
    text-decoration: none;
}

::-moz-selection {
    background: #1aaa84;
}
::selection {
    background: #1aaa84   ;
}


/**
 * Negative margins
 */
.mt-n5 {
    margin-top: -3rem;
}

/**
 * Main elements
 */
#pageloader {
    background-color: #1aaa84;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}
#pageloader.bw {
    background-color: #000000;
}
.loader-item {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    height: 40px;
    width: 40px;
}
.loader-item img {
    width: 80px;
}

.animated {
 visibility:hidden;
}

.hidden {
 opacity: 0;
 display: none;
}

#quienes_somos{

}

#servicios, #soluciones{
    background-color: #1aaa84;
}

#info{
    background-color: #f19e4d;
}

#proyectos{

}

#trabaja_con_nosotros{
    background-color: #252f30;
}

#por_que{
    background-image: url("qassets/puente_bg_img@2x.png");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

#contacto{
    background-color: #1aaa84;
}

#footer{
    background-color: #252f30;
    font-size:16px;
}

#footer .zenright * {
    font-size: 13px !important;
}

/**
 * Main color distribution
 */
.mouse-icon .wheel, .bg-pasific {
    background-color: #1aaa84 !important;
    font-weight:700 !important;
}

a:hover, a[class*="color-"]:hover, .heading, .heading-icon-o, .button-o.button-pasific, .header-search:hover, .color-pasific, .button-o.button-pasific, .w3_megamenu .dropdown-menu .withoutdesc ul li a:hover, .w3_megamenu .dropdown-menu .withoutdesc ul li a:focus, .nav-tabs-vertical li a:hover, .nav-tabs-vertical li a:focus, .nav-tabs-vertical li.active, .nav-tabs-vertical li.active a, .testimonial .testimonial-header i, .testimonial .testimonial-footer, .box-content a:hover, .box-content a:focus, .modal-footer a:hover, .modal-footer a:focus, .testimonial-container a:hover, .testimonial-container a:focus, #portfolioGrid .portfolio .portfolio-item a span:hover, #portfolioMasonry ul li a.active, #portfolioGrid ul li a.active, #portfolioMasonry .portfolio-masonry-one-item .portfolio-mask a, #portfolioGrid .portfolio .portfolio-item a span:hover, #blog a:hover i.fa, #blog a:focus i.fa, #blog nav ul li a:hover, #blog nav ul li a:focus,  .feature-container-in:hover > div.feature-icon, #footer ul li a:hover, #footer ul li a:focus, .copyright i.fa, .typed-cursor {
    color: #1aaa84;
}

.navbar-collapse .navbar-nav .nav-link.active, .navbar-collapse .navbar-nav li a:hover, .navbar-collapse .navbar-nav li a:focus,  .navbar-collapse .navbar-nav li a.active, .navbar-collapse .navbar-nav li a.active:hover, .navbar-collapse .navbar-nav li.active a, .navbar-pasific .navbar-brand:hover, .navbar-pasific .navbar-brand:focus, a.color-light:hover, .megamenu .dropdown .dropdown-menu li a:hover{
    color: #1aaa84 !important;
}

.heading-icon, .heading-icon-o, .button-o.button-pasific, blockquote, blockquote.blockquote-reverse, blockquote.blockquote-pasific, blockquote.blockquote-pasific-reverse, nav-tabs-vertical li a:hover, .nav-tabs-vertical li.active, .nav-tabs-vertical li.active a, .testimonial-triangle-isosceles-has-bg.bottom-center .testimonial-body.bg-pasific:after, .button-pasific-o, .button-pasific-o:hover, .heading-divider, .hover-ripple-out:before, .hover-ripple-in:before, .button-pasific.hover-ripple-out:before, .button-pasific.hover-ripple-in:before, a.add-to-cart:hover, input[type=checkbox]:checked + label:before, #sidebar ul.tag li:hover, .copyright a:hover {
    border-color: #1aaa84;
}

a:focus{
    color: #1aaa84;
}

.bgDark .mouse-icon .wheel, .bgDark .bg-pasific, .bgDark .button-pasific-o:hover, .bgDark .button.button-pasific, .bgDark .button-3d.button-pasific, .bgDark .nav-pills > li.active > a, .bgDark .nav-pills > li.active > a:hover, .bgDark .nav-pills > li.active > a:focus, .bgDark .nav-pills-vertical li.active a, .bgDark a.add-to-cart:hover, .bgDark #blog form.blog-form-search button, .bgDark .badge-pasific, .bgDark .price-three .price-badge, .bgDark #sidebar ul.tag li:hover, .bgDark .irs-from, .bgDark .irs-to, .bgDark .irs-single, .bgDark input[type=checkbox]:checked + label:before, .bgDark .button-pasific.hover-fade:hover, .bgDark .button-pasific.hover-fade:focus, .bgDark .button-pasific.hover-fade:active, .bgDark .button-pasific.hover-back-pulse:hover, .bgDark .button-pasific.hover-back-pulse:focus, .bgDark .button-pasific.hover-back-pulse:active, .bgDark .button-pasific.hover-sweep-to-right:before, .bgDark .button-pasific.hover-sweep-to-left:before, .bgDark .button-pasific.hover-sweep-to-bottom:before, .bgDark .button-pasific.hover-sweep-to-top:before, .bgDark .button-pasific.hover-bounce-to-right:before, .bgDark .button-pasific.hover-bounce-to-left:before, .bgDark .button-pasific.hover-bounce-to-top:before, .bgDark .button-pasific.hover-bounce-to-bottom:before, .bgDark .button-pasific.hover-radial-out:before, .bgDark .button-pasific.hover-rectangle-out:before, .bgDark .button-pasific.hover-shutter-out-horizontal:before, .bgDark .button-pasific.hover-shutter-out-vertical:before {
    background-color: #f19e4d !important;
    color:#252f30 !important;
    font-weight:700 !important;
}


/*  ----------------------------------------------------
8. BUTTONS
-------------------------------------------------------- */
.button {
	display: inline-block;
	padding: 8px 16px;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	  touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	 -moz-user-select: none;
	  -ms-user-select: none;
		  user-select: none;
	background-image: none;
	border: 1px solid transparent;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
    text-shadow: none;
	font-weight: normal !important;
	letter-spacing: 1px;
	-webkit-transition: all .25s ease-in-out;
	   -moz-transition: all .25s ease-in-out;
			transition: all .25s ease-in-out;
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
	color: #fff !important;
}

.button:focus {
    outline: none;
    color: #fff;
}

.button-xs { font-size: 9px; padding: 5px 12px; }
.button-sm { font-size: 10px; padding: 8px 20px;}
.button-md { font-size: 11px; padding: 12px 25px;}
.button-lg { font-size: 13px; padding: 15px 30px;}

/* Main Colors */
.button.button-pasific {
	color: #fff;
}
.button i.fa-solid {
    margin-left: 5px;
    color: #252f30 !important;
}

/**
 * Navegación y cabecera
 */
.navbar-pasific {
    background: #fff;
    border-bottom: 1px solid #eee;
    height: 100px !important;
    padding-bottom: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 20px !important;
    box-shadow: rgba(47, 47, 48, 0.04) 0px 0px 1px, rgba(47, 47, 48, 0.08) 0px 4px 8px 1px;   
    width: 100vw; 
}

.navbar-op.navbar-fixed-top {
    position: fixed;
    top: 0;
    z-index: 3000;
}

.navbar-pasific .navbar-nav > li {
    font-size: 16px;
    font-weight: 600;
    font-family: 'Raleway', 'Open Sans', sans-serif;
    text-transform: none;
    letter-spacing: normal;
    padding-bottom: 6px;
}

.navbar-pasific .navbar-nav > li > a,
.navbar-op.top-nav-collapse .navbar-nav > li > a{
    color: #666b74;
}

.navbar-pasific .navbar-nav > li > a:hover,
.navbar-op.top-nav-collapse .navbar-nav > li > a:hover {
    color: #1aaa84;
}

.navbar-brand {
    padding:0;
    margin-bottom: 1rem;
}

.navbar-toggler {
    margin-bottom: 1rem;
}

#collapsable {
    background-color: #fff;
    padding-left: 2rem;
}

.navbar-brand img{
    max-width: 100%;
    max-height: 55px;
}

.navbar-toggler:focus {
    box-shadow: none;
    background-color: #ddd;
}

.navbar-op .collapse {
    justify-content: end;
}

.navbar-op .collapse.show {
    /* display: block !important; */
    background-color: #fff;
    marginpadding-left: 15px;
    padding-right: 15px;
}

.navbar-op .collapsing.show {
    background-color: #fff;
    padding-left: 2rem;
}

.navbar-right {
    padding-top: 18px;
}

.text-card {
    border-radius: 40px;
    padding: 3rem;
    box-shadow: rgba(47, 47, 48, 0.07) 0px 0px 1px, rgba(47, 47, 48, 0.17) 0px 4px 8px 1px;
}

.li-card {
    border-radius: 12px;
    padding: 1rem 2rem;
    box-shadow: rgba(47, 47, 48, 0.07) 0px 0px 1px, rgba(47, 47, 48, 0.17) 0px 4px 8px 1px;
}

/** INTRO **/

.intro {
    display: table;
    width: 100%;
    height: auto;
    text-align: center;
    background-color: #fff;
}

.intro .intro-body {
    display: table-cell;
    vertical-align: middle;
    background: rgba(0,0,0,0.3);
}

.intro .intro-body .brand-heading {
    margin-bottom: 25px;
    box-sizing: border-box;
    color: #545454;
    line-height: 1.3;
}
.intro .intro-body .intro-text {
    font-size: 16px;
    color:#545454;
    font-weight: 400;
    line-height: 25px;
}

.intro-direction {
    position: absolute;
    left: 50%;
    bottom: 5%;
}


h1.intro-title{
    line-height: 100px;
    font-size: 58px;
    font-weight: bold;
    letter-spacing: -1.5px;
}

@media(min-width:960px) {
    .intro {
        height: 100%;
        padding: 0;
    }
    .intro .intro-body .brand-heading{
        font-size: 50px;
    }
    .intro .intro-body .brand-heading-big{
        font-size: 60px;
        line-height: 1.3;
    }
    .intro .intro-body .brand-heading-big2{
        font-size: 80px;
        line-height: 1.3;
    }
    .intro .intro-body .intro-text {
        font-size: 15px;
    }
    .intro .intro-body .intro-text-big {
        font-size: 18px;
        line-height: 1.5;
    }

    h1.intro-title{
        line-height: 100px;
        font-size: 54px;
        font-weight: bold;
        letter-spacing: -1.5px;
    }    
}

@media(max-width:960px) {
    .intro {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        height: 100%;
        background-size: cover;
    }  
    .intro .intro-body .brand-heading {
        font-size: 250%;
    }

    .intro .intro-body .intro-text {
        font-size: 100%;
    }

    h1.intro-title{
        line-height: 80px;
        font-size: 48px;
        font-weight: bold;
        letter-spacing: -1.5px;
    }
    

}

@media(max-width:768px) {
    .intro {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        height: 100%;
        background-size: cover;
    }    
    h1.intro-title{
        line-height: 66px;
        font-size: 38px;
        font-weight: bold;
        letter-spacing: -1.5px;
    }    
}

.mouse-icon {
    border: 2px solid #fff;
    height: 40px;
    width: 24px;
    display: block;
    z-index: 10;
    opacity: 0.7;
    background-color: rgba(255,255,255,.5);
    -webkit-border-radius: 16px;
       -moz-border-radius: 16px;
            border-radius: 16px;
}
.mouse-icon .wheel {
    -webkit-animation-name: mouse-anim-drop;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    -webkit-animation-name: mouse-anim-drop;
          animation-name: mouse-anim-drop;
    -webkit-animation-duration: 1s;
          animation-duration: 1s;
    -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
    -webkit-animation-delay: 0s;
          animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
          animation-play-state: running;
}
.mouse-icon .wheel {
    position: relative;
    width: 2px;
    height: 6px;
    top: 4px;
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}
@-webkit-keyframes mouse-anim-drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}
@keyframes mouse-anim-drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}
.icon-svg {
    max-height: 80px;
}

/*  --------------------------------------------------------
  PARALLAX
-------------------------------------------------------- */
.parallax-window {
    min-height: 400px;
    background: transparent;
}
.parallax-window-2 {
    min-height: 350px;
    background: transparent;
}
.parallax-window-3 {
    min-height: 250px;
    max-width: 1920px;
    background: transparent;
}
.parallax-window-4 {
    min-height: 92%;
    max-width: 1920px;
    background: transparent;
}
.parallax-window-5 {
    min-height: 600px;
    max-width: 1920px;
    background: transparent;
}

/** WEARE **/

.weareTag{
    text-align: center;
}

.weareTag h4{
    font-weight: 700 !important;
    color: #1aaa84;
    color: #089570;
    font-size: 25px;
}

.weareTag img{
    max-width: 100%;
    max-height: 142px;
}

.weareTag p{
    max-width: 260px;
    margin: 0 auto;
}


/** SERVICES **/

#servicios h4{
    color: #364647;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 20px;
}

.serviceRow .serviceImage {
    margin-bottom: 1rem;
}

.serviceRow .serviceImage div{
    width: 153px;
    height: 153px;
    position: absolute;
}

.serviceRow.text-left .serviceImage div{
    right: 0;
}

.serviceRow.text-right .serviceImage div{
    left: 0;
}

.serviceRow .serviceImage img{
    max-width: 100%;
    max-height: 162px;
}



/** INFO **/

#info .owl-controls{
    display: none !important;
}

#info p{
    font-size: 44px;
    font-weight: 600;
    line-height: 45px;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

#info .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.animationFrame{
    height:90px;
    padding:10px 0;
}

.animationFrame img{
    max-height:80px;
}

@keyframes heartbeat {
    0%   {max-width:88px; margin-left:5px;}
    40%  {max-width:92px; margin-left:2px;}
    50%  {max-width:98px; margin-left:0;}
    60%  {max-width:92px; margin-left:2px;}
    100% {max-width:88px; margin-left:5px;}
}

@keyframes  balancing{
    0%   {-ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg); right:20px}
    25%  {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    50%  {-ms-transform: rotate(-7deg); -webkit-transform: rotate(-7deg); transform: rotate(-7deg); right:36px}
    75%  {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    100% {-ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg); right:20px}
}

@keyframes  moveright{
    0%   {left:-100px; max-width:0}
    10%  {max-width:140px}
    90%  {max-width:140px}
    100% {left:calc(100% - 100px); max-width:0}
}

@keyframes  falldown{
    0%   {top:0; max-width:0; margin-left:50px;}
    10%  {max-width:100px; margin-left:0;}
    70%  {max-width:100px; margin-left:0;}
    80%  {top:calc(100% - 60px); margin-left:50px;}
    100% {top:calc(100% - 60px); max-width:0; margin-left:98px;}
}

@keyframes codemessaging {
    0%   {right: 100px; top:20px; max-width: 0;}
    5%   {max-width: 100px}
    50%  {right: 100px; top: calc(100% - 80px)}
    95%  {max-width: 100px}
    100% {right: calc(100% - 100px); top: calc(100% - 80px); max-width: 0}
}

.animationFrame #heart{
    position: absolute;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 1.5s;
    animation-name: heartbeat;
}

.animationFrame #stethoscope{
    position: absolute;
    right:20px;
    max-width:160px;
}

.animationFrame #ambulance{
    position: absolute;
    max-width:160px;
    left: 20px;
    bottom:-10px;
}

.animationFrame #hospital{
    position: absolute;
    max-width:160px;
    right:20px;
}

.animationFrame #caduceus{
    position: absolute;
    max-width:160px;
    top: 10px;
    right: 20px;
}

.animationFrame #blister{
    position: absolute;
    max-width:160px;
    right: 20px;
    bottom:10px;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 1.5s;
    animation-name: balancing;
}

.animationFrame #microscope{
    position: absolute;
    max-width:160px;
    left:20px;
    bottom:10px;
}

.animationFrame #drugs{
    position: absolute;
    max-width:160px;
    left:20px;
}

.animationFrame #cityhall{
    position: absolute;
    max-width:160px;
    right: 20px;
}

.animationFrame #funcionario{
    position: absolute;
    max-width:160px;
    left: 20px;
    bottom:10px;
}

.animationFrame #paperwork{
    position: absolute;
    max-width:160px;
    left:20px;
}

.animationFrame #waitingroom{
    position: absolute;
    max-width:160px;
    right:20px;
    bottom:10px;
}

.animationFrame #school{
    position: absolute;
    max-width:160px;
    right:20px;
}

.animationFrame #desk{
    position: absolute;
    max-width:160px;
    right:20px;
}

.animationFrame #books{
    position: absolute;
    max-width:160px;
    left:20px;
}

.animationFrame #diploma{
    position: absolute;
    max-width:160px;
    left:20px;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-name: balancing;
}

.animationFrame #bbdd{
    position: absolute;
    max-width:160px;
    right:20px;
}

.animationFrame #server{
    position: absolute;
    max-width:160px;
    right:20px;
}

.animationFrame #terminal{
    position: absolute;
    max-width:160px;
    left:20px;
}

.animationFrame #code{
    position: absolute;
    max-width:160px;
    left:20px;
}

@media screen and (min-width: 768px) {

    .animationFrame #funcionario{
        left: 100px;
    }

    .animationFrame #paperwork{
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-duration: 3s;
        animation-name: falldown;
    }

    .animationFrame #code{
        left:inherit;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-duration: 5s;
        animation-name: codemessaging;
    }
}



/** PROYECTS **/

.clientLogo{
    height: 220px;
    text-align: center;
}

.clientLogo img{
    max-height: 75px;
    max-width: 100%;
    margin: 20px;
}

#proyectos h4{
    font-size: 35px;
    line-height: 40px;
}

/* #proyectos p{
    font-size:18px;
    font-weight: 700;
} */

#proyectos ul{
    /* font-size:18px; */
    list-style-image: url("qassets/icono_zener_16.png"); 
    padding: 20px 40px;
    margin: 10px auto;
    float: right;
    width: 90%;
}

#proyectos ul li{
    padding-left: 1rem;;
    margin: 10px 5px;
}


#proyectos ul span{
    display: inline-block;
}

.slick-dots li button {
  font-size: 12px;
}

.slick-dots li button::before {
  font-size: 12px;
  line-height: 20px;
  margin-top: 3rem;
  color:#1aaa84 !important;  
}

/** SOLUTIONS **/

#soluciones a {
    float: right;
    color:#252f30 !important;
}

#soluciones i {
    color:#252f30 !important;
    font-weight: 600;
}


/** WORK WITH US **/

#trabaja_con_nosotros p{
    margin: 0;
    /* font-size:20px; */
    line-height:45px;
}

#trabaja_con_nosotros p + p{
    margin-bottom: 25px;
}

#trabaja_con_nosotros a.correo {
    color:#1aaa84 !important;
}

#trabaja_con_nosotros i {
    color:#252f30 !important;
    font-weight: 600;;
}

/** WHY **/

#por_que img{
    max-height:285px;
    max-width:100%;
}

#por_que p {
    font-size: 23px;
    display: table-caption;
    vertical-align: middle;
}



/** CONTACT **/

#contacto input, #contacto textarea {
    background: transparent;
    border: 0;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid #a5a8a8;
    color: #fff;
}

#contacto ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #fff;
}
#contacto ::-moz-placeholder { /* Firefox 19+ */
    color: #fff;
}
#contacto :-ms-input-placeholder { /* IE 10+ */
    color: #fff;
}
#contacto :-moz-placeholder { /* Firefox 18- */
    color: #fff;
}

.statusMessage {
    opacity: 1;
    text-align: center;
    margin: 5px auto;
    width: 400px;
    height: 80px;
    padding: 10px;
    position: relative;
    z-index: 100;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}

.statusMessage p {
    font-size: 16px;
    color: #fff !important;
    padding: 0 1rem;
    width: 100%;
    text-align: center;
}

.sending-message {
    background: #0d5c8a;
    padding-top: 22px;;
}

.incompleteMessage {
    background: #0d5c8a ;
}
.success-message {
    background: #0adfa6;
}
.failure-message {
    background: #e74c3c;
}

.toast-container {
    width: 100%;
    position: relative;
    top: -250px;
    height: 150px;
}

.toast-body {
    padding: 0;    
}

.toast-body span {
  margin-right: 15px;
  display: inline-block;
  font-size: 24px;
  position: relative;
  top: 10px;
}   

.sending-message .toast-body span {
  top: 4px;
}


/** CONTACT **/

#footer .contactItems a{
    display: block;
    margin: 10px 0;
}

#footer .container{
    padding: 0 50px;
}

#linkedin {
    width: 50px;
    height: 50px;
    display: inline-block;
    border: none;
    border-radius: 0;
    background: url(qassets/RRSS/ic_linkedin@2x.png) 0 0;
    background-size: 200% 100%;
    transition: none;
}
#linkedin:hover {
    background: url(qassets/RRSS/ic_linkedin@2x.png) 50px 0;
    background-size: 200% 100%;
}

.intro .intro-body .brand-heading{
    font-weight: bold !important;
}


/** RESPONSIVE **/

@media screen and (max-width: 767px) {
    #services *{
        text-align: center !important;
    }

    .serviceRow .serviceImage div{
        margin: 0 auto;
        position: inherit;
    }
}


@media screen and (min-width: 768px) {
    #por_que p {
        height: 200px;
        margin: 20px auto;
        text-align: left;
    }
}


h2.titulo {
	font-size: 18px;
	color: black;
    line-height: 24px;    
}

.svg-arco {
    position:relative;
    line-height:0;
    margin-bottom:-1px;
    overflow:hidden;
    width:100%;
}

.svg-arco-inverso {
    position:relative;
    line-height:0;
    margin-top:-1px;
    margin-bottom:-1px;
    overflow:hidden;
    transform:rotate(180deg);
    width:100%;
}

.broken-word {
   white-space: unset;   
}

@media screen and (min-width: 1280px) {
  .broken-word {
     white-space: nowrap;
  }
  .container-fluid, .container {
    width: 1250px;
  }
    .intro-direction {
        bottom: 10%;
    }
}

@media screen and (min-width: 993px) and (max-width: 1280px) {
  .broken-word {
     white-space: nowrap;
  }
  .container-fluid, .container {
    width: 98vw;
  }
  .intro-direction {
      bottom: 18%;
  }

}

@media screen and (min-width: 769px) and (max-width: 992px) {
  .container-fluid, .container {
    width: 98vw;
  }

 .slick-dots li button::before  {
    margin-top: 2rem;
  }

  .intro-direction {
      bottom: 18%;
  }

  span.broken-word span:not(#cursor) {
      display: block;
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {

  .container-fluid, .container {
    width: 98vw;
  }

  .broken-word {
     white-space: wrap;
  }
   .cdp-cookies-alerta .cdp-cookies-texto  {
     width: 80%;
    }

  .intro-direction {
      bottom: 15%;
  }
 .slick-dots li button::before  {
    margin-top: 2rem;
  }

    span.broken-word span:not(#cursor) {
        display: block;
    }

}

@media screen and (max-width: 480px) {
  .broken-word {
     white-space: wrap;
  }
    .intro-direction {
        bottom: 20%;
    }
  .container-fluid, .container {
      margin-right: unset;
      margin-left: unset;
   }
   
   h3 {
    font-size: 40px;
   }

    #proyectos h4{
        font-size: 25px;
    }

  .cdp-cookies-alerta .cdp-cookies-texto  {
    width: 60%;
   }

  .slick-dots li  {
    width: 15px;
    height: 20px;
    }

  .slick-dots li button::before  {
    margin-top: 1rem;
  }
  .statusMessage {
    width: 98vw;
   }

   .statusMessage p {
     font-size: 13px;
   }

   .statusMessage p span {
     font-size: 20px;
   }

    span.broken-word span:not(#cursor) {
        display: block;
    }

}