body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body > section,
body > .map,
body > footer{
    position: relative;
    z-index: 99;
}

.color-olix, .color-olix:hover {background-color: #00B6E1 !important}
.color-denim, .color-denim:hover {background-color: #046C93  !important}
.color-denom, .color-denom:hover {background-color: #3CBF5D  !important}
.color-marigold, .color-marigold:hover {background-color: #046C93 !important}
.color-steel, .color-steel:hover {background-color: #42494E !important}
.color-screen, .color-screen:hover {background-color: whitesmoke !important}
.color-pastel, .color-pastel:hover {background-color: #AD6058 !important}
.text-olix{color: #00B6E1}
.text-denim{color: #42494E}
.text-marigold{color: #046C93}
.text-steel{color: #42494E }
.text-screen{color: whitesmoke}
.text-pastel{color: #E41844}
.color-osalix {background: #046c93;}
.color-osalix-3 {background: #3cbf5d !important;}

h2 {
    font-family: 'Cinzel', sans-serif;
    font-weight: 700;
    font-size: 42px;
    letter-spacing: 1px;
    line-height: 4.063rem;
    /*text-transform: capitalize;*/
}

.parallax img {
    background-color: white;
    width:100%; 
    object-fit: cover;
}
.parallax-container {
    min-height: 380px;
    line-height: 0;
    height: auto;
    color: rgba(255,255,255,.9);
}

.parallax-container .section {
    width: 100%;
}

.parallax-back-25 {
    background: rgba(49, 43, 43, 0.25);
}

.parallax-back-50 {
    background: rgba(49, 43, 43, 0.50);
}
.colored-line {
    margin: auto;
    z-index: 1;
    height: 1px;
}

.progress-wow {width: 0;}

.top-inset-box { box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4); }
.left-inset-box { box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4); }
.right-inset-box { box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4); }
.bottom-inset-box { box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4); }
/*CSS Nav*/
nav.nav-olix {
    position: absolute;
    top: 0;
    width: 100%;
    height: 64px;
    z-index: 102;
    padding: 0 20px;
}
/*END CSS Nav*/

/*CSS Home*/
section#home {
    height: calc(100vh - 73px);
    z-index: 50; 
    /*background: whitesmoke;*/
}
section#home .logo_main {width: 350px; padding-top: 100px; padding-bottom: 100px;}
section#home .header {height: 100%; display: flex;}
section#home .header .row{ margin: auto;display: flex; flex-direction: column;}
section#home .header h5{min-height: 81px;letter-spacing: 3px; font-size: 1.5rem;}
section#home .parallax img {display: block; transform: translate3d(-50%, 168px, 0px); width: 100%}
section#home .olix-laboratory { width:400px;  margin: 0 auto;}
section#home .text-title {line-height: 40px; text-shadow: 2px 2px 3px #312b2b;}
section#home h5 {
    width: 700px;
    height: 122px;
    display: block !important;
    margin: 0 auto;
}
section#home h2 {font-family: 'Playfair Display';}
section#home p {font-family: 'Playfair Display';}
section#home  .carousel.carousel-slider{
    height: 100%
}

.mouse-icon {
    border: 2px solid rgb(4 108 147);
    border-radius: 16px;
    height: 34px;
    width: 22px;
    display: block;
    z-index: 10;
    opacity: .7;
    position: fixed;
    left: 50%;
    bottom: 100px;
    margin: 0 0 0 -9px;
}

.mouse-icon .wheel {
    position: relative;
    border-radius: 10px;
    background: rgb(60 191 93);
    width: 2px;
    height: 6px;
    top: 4px;
    margin-left: auto;
    margin-right: auto;
}
.mouse-icon .wheel {
    -webkit-animation-name: 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: drop; 
    animation-name: 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;
}


.carousel-item {
    background-size: cover;
    transform: initial !important;
}

.carousel-block{
    background: #312b2b69;
    width: 250px;
    position: absolute;
    bottom: 20%;
    right: 10%;
}


.carousel .carousel-image {
    background-color: black;
    background-size: cover;
    width: 100%;
    height: 100%;
    min-height: 400px;
    position: absolute;
}
.carousel .carousel-text {
    position: absolute;
    background: #53535375;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 12.5% 25%;
    font-family: "Playfair Display", serif;
}

.carousel .indicators .indicator-item.active {
    background-color: white;
}
.carousel .indicators .indicator-item{
    height: 20px;
    width: 20px;
    background-color: rgba(130, 128, 128, 0.5);
    cursor: pointer
}

.shape-home {
    width: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    height: 130px;
    z-index: 22
}

.segment-double-triangle {position: absolute; height: 100%;}
.segment-double-triangle.sdt-right {right: 0 !important;}
.segment-double-triangle > div{  width: 100%; height: 100%;}
.segment-double-triangle > div.middle{  width: 100%; height: 50%;}
.segment-double-triangle > .sdt-top-left{
    left: 0px;
    bottom: 0px;
    background: linear-gradient(to right top, #046c93  50%, transparent 50%);
}
.segment-double-triangle > .sdt-bottom-left{
    left: 0px;
    top: 0px;
    background: linear-gradient(to right bottom, #3cbf5d 50%, transparent 50%);
}
.segment-double-triangle > .sdt-top-right{
    left: 0px;
    bottom: 0px;
    background: linear-gradient(to left top, #3cbf5d 50%, transparent 50%);
}


.segment-double-triangle > .sdt-top-right:after{

    background: linear-gradient(to bottom left, rgb(49 43 43) 12%, rgb(60 191 93) 5%,transparent 50%) right/104% 100%, 
        linear-gradient(to top left, #046c93 50%, transparent 49%);
    background-repeat: no-repeat;
}
.segment-double-triangle > .sdt-bottom-right{
    left: 0px;
    top: 0px;
    background: linear-gradient(to left bottom, #046c93 50%, transparent 50%);
}

.segment-double-triangle > .sdh-top-left{
    left: 0px;
    bottom: 0px;
    background: linear-gradient(to right top, #046C93 50%, transparent 50%);
}
.segment-double-triangle > .sdh-bottom-left{
    left: 0px;
    top: 0px;
    background: linear-gradient(to right bottom, #046C93 50%, transparent 50%);
}
.segment-double-triangle > .sdh-top-right{
    left: 0px;
    bottom: 0px;
    background: linear-gradient(to left top, #3CBF5D 50%, transparent 50%);
}
.segment-double-triangle > .sdh-bottom-right{
    left: 0px;
    top: 0px;
    background: linear-gradient(to left bottom, #3CBF5D 50%, transparent 50%);
}

.segmentTriangleLeft {
    top: 0;

    height: 50%;
    /* left: 0px; */
    /* top: 0px; */
    background: linear-gradient(to right bottom, rgb(244, 67, 54) 50%, transparent 50%);
    /* position: absolute; */
}

.segmentTriangleRight {
    width: 100%;
    height: 100%;
    right: 0px !important;
    top: 0px;
    background: linear-gradient(to right top, #fad65b 50%, transparent 50%);
    position: absolute;
}



/*END CSS Home*/

/*CSS Menu*/
header#menu {height: 56px;}
nav#navigation {padding: 0 20px; height: 56px; z-index: 100; position: fixed;}
nav#navigation.static{position:fixed}
nav#navigation .container-navigation {height: 56px; line-height: 56px }
nav#navigation li a.active {border-bottom: 3px solid #077091; height: 56px;}

nav#navigation .logo-div{
    background: #e4e4e4;
    text-align: center;
    /*width: 211px;*/
    margin-top: -4px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

nav#navigation .olix-laboratory-icon {
    width: 192px;
    margin-top: 21px;
}

nav#navigation li a {
    height: 56px;
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 10px;
    text-transform: uppercase;
    line-height: 56px;
}

nav#navigation a.signup {
    float: right;
    display: inline-block;
    height: 40px;
    line-height: 37px;
    padding: 0 13px 0 15px;
    font-weight: 100;
    position: relative;
    border-style: solid;
    margin: 8px 30px 8px 15px;
    font-weight: 500;
    width: 140px;
    text-align: center;
    background: #046c93;
    border-bottom-right-radius: 15px;
    border-radius: 15px 5px 15px 5px;
}

nav#navigation a.signup, nav#navigation a.signup:after {
    color: white !important;
    transition: 0s
}


nav#navigation ul#nav-menu {text-align: center; width: 100%;}
nav#navigation ul#nav-menu  li{display: inline; float: none;}
nav#navigation ul#nav-menu  li a{    display: inline-block;     line-height: 66px;}

nav#navigation a.signup:hover, nav#navigation a.signup:hover:after {
    background: #049ed9;
    color: #fff !important;
}
/*END CSS Menu*/

/*CSS Login*/
n



#login .login-header {background-image: url(https://static.olix.es/img/olix/comercial/pt-account.jpg); margin: 0; padding-top: 3em; border-bottom: 1px solid #ffea00 !important}
#login .login-header svg {width: 90px; margin: 0 auto; background: #ff8a80;}

#login .login-header .input-field {margin: 0 auto; padding-top:2em; padding-bottom: 2em;}

#login .login-container{overflow: hidden; margin:3em 0;}
#login .login-body {padding: 0 0.75rem; height: 100%; float: left; width: 100%; border-right: 1px solid #9c9b9b; padding-top:2em;}
#login .login-body .login-remenber{height: 40px;}

/*END CSS Login*/

/*CSS Index*/
section#index {z-index:99}
section#index .about-content { display: flex; width: 100%; flex-wrap: wrap;}
section#index .about-content .card{
    background: rgba(255, 255, 255, 0.5);;
    padding: 0;
    border: 1px solid rgba(125,125,125,0.2);
    height: calc(100% - 22px);
}

section#about {
    z-index: 65;
    position: relative;
}
section#about .container {
    margin-top: 5em;
    clear: both;
    margin-bottom: 5em;
}
section#about .container.style {
    margin-top: 2em;
    clear: both;
    margin-bottom: 2em;
    font-size: 2em;
}

section#index .card:hover .line-top, 
section#index .card:hover .line-bottom {
    width: 100%;
}

section#index .card:hover .line-left, 
section#index .card:hover .line-right {
    height: 100%;
}

section#index .card .line-top {top: 0; left: 0;}
section#index .card .line-bottom {bottom: -1px; right: 0;}
section#index .card .line-left {bottom: 0; left: 0;}
section#index .card .line-right {top: 0; right: -1px;}
section#index .card .line-top, section#index .card  .line-bottom {
    width: 0;
    height: 1px;
}

section#index .card .line-left, section#index .card .line-right {
    width: 1px;
    height: 0;
}

section#index .card .line-top,
section#index .card .line-bottom, 
section#index .card .line-left, 
section#index .card .line-right {
    position: absolute;
    -webkit-transition: width 210ms ease-out 10ms, height 210ms ease-out 10ms;
    -moz-transition: width 210ms ease-out 10ms, height 210ms ease-out 10ms;
    -o-transition: width 210ms ease-out 10ms, height 210ms ease-out 10ms;
    transition: width 220ms ease-out 10ms, height 220ms ease-out 10ms;
}


section#index .about-content .card -promo-caption {text-transform: uppercase;}
section#index .about-content .card i {
    margin: 40px 0;
    font-size: 7rem;
    display: block;
}

section#index .history {
    border-top: 1px solid #03a0e2;
    background-image: url(https://static.olix.es/img/texture/pt-percentage.png)

}

section#index .history .container {
    padding: 50px;
}

section#index .history .container span {
    padding: 10px 0px;
    display: block;
    text-align: right;
}


.img-box-tile{
    width: 100%;
    background: rgba(0, 0, 0, 0.07);
    z-index: 2222;
    position: relative;
    height: 100%;
    padding-top: 200px;
}

.img-box-bg{
    position: absolute;
    top: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

.img-box-bg img {height: 100%; width: 100%; object-fit: cover;}

.img-box-div {
    width: 100%;
    background: rgba(0, 0, 0, 0.07);
    z-index: 1;
    position: relative;
    height: 100%;
    padding: 200px 20px 20px 20px;
    width: 100%;
    background: -webkit-linear-gradient(rgba(255, 0, 0, 0), rgba(29, 29, 29, 0.1), rgba(49, 43, 43, 0.5));
    background: -o-linear-gradient(rgba(255, 0, 0, 0), rgba(29, 29, 29, 0.1), rgba(49, 43, 43, 0.5));
    background: -moz-linear-gradient(rgba(255, 0, 0, 0), rgba(29, 29, 29, 0.1), rgba(49, 43, 43, 0.5));
    background: linear-gradient(rgba(255, 0, 0, 0), rgba(29, 29, 29, 0.1), rgba(49, 43, 43, 0.5));
    color: white
}

.box-tile {
    position: relative;
    z-index: 99;
    padding: 1.5rem !important;
}

.box-tile i, .img-box-div  i {
    float: left;
    line-height: 57px;
    /* margin: 15px 0; */
    margin-right: 5px;
    height: 45px;
}

.box-tile h2, .img-box-div  h2 {
    margin: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    line-height: 30px;
    margin: 15px 0;
}

.img-tile {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center
}

.img-tile:after{
    content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    background: linear-gradient(to right bottom, #ffffff 51%, transparent 50%);
    z-index: 20;
    box-shadow: -4px -4px 3px 0 rgba(0, 0, 0, 0.1);
}

.img-tile.img-tile-oil {
    background-image: url('https://static.olix.es/img/laboratory/oil.jpg');
}
.img-tile.img-tile-olivo {
    background-image: url('https://static.olix.es/img/laboratory/olivos.jpg');
}
.img-tile.img-tile-planta {
    background-image: url('https://static.olix.es/img/laboratory/planta.jpg');
}
.img-tile.img-tile-micro {
    background-image: url('https://static.olix.es/img/laboratory/micro.jpg');
}

.mod-organization {background-color: #e6e6e6;}
.mod-invoice {background-color: #00b5c1;}
.mod-traceability {background-color: #e41844;}
.mod-training { background-color: #FFD545;}
.bg-register { background-color: #c6d0ae;}
.bg-responsive { background-color: #d9c19f;}

.mod-organization:after{
    transform: rotate(315deg) skew(-15deg, -15deg);
    top: calc(50% - 12px);
    right: 0;
    margin-right: -15px;
}
.mod-traceability:after{
    transform: rotate(134deg) skew(-15deg, -15deg);
    left: 0;
    top: calc(50% - 12px);
    margin-left: -15px;
}

.mod-invoice:after{
    transform: rotate(45deg) skew(-15deg, -15deg);
    bottom: 0;
    left: calc(50% - 12px);
    margin-bottom: -15px;
}

.mod-training:after{
    transform: rotate(225deg) skew(-15deg, -15deg);
    top: 0;
    left: calc(50% - 12px);
    margin-top: -15px;
}

.hex-group {
    padding-bottom: 5.5rem;
    display: inline-block;
    width: 479px;
    margin: 0 auto;
}

.circle {
    width: 90px;
    height: 90px;
    background: #046C93;
    color: whitesmoke;
    line-height: 107px;
    -moz-border-radius: 50% 10% / 50% 10%;
    -webkit-border-radius: 50% 10% / 50% 10%;
    border-radius: 50% 10% / 50% 10%;
    transform: rotate(12deg);
    margin: 0 auto;
    margin-bottom: 2em;
}

.circle-l{
    background: #3cbf5d
}
.hex-row {
    clear: left;
}
.hex-row.odd {
    margin-left: 80px;
}
.hex span {
    position: absolute;
    top: 25%;
    bottom: 0;
    vertical-align: middle;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 20px;
    padding-top: 25px;
    height: 74px;
}
.slogan {
    color: #586067;
    padding: 80px 0 0px 0;
    margin-top: 0;
}

.slogan, .slogan-white, .slogan-black, .our-team {
    font-family: 'evergreen';
    font-size: 2.5em;
    line-height: 150%;
    text-align: center;
    font-weight: 400
}
.slogan-child{
    font-size: 1.5em !important;
}

.line-slogan {
    margin: auto;
    width: 160px;
}

.line-slogan img {
    opacity: 0.3;
    width: 100%;
}
/*END CSS Index*/
section#objectives .characteristics .col  { 

    text-align: center;
    padding: 2.4em 25px 2.3em 25px;
}
section#objectives .characteristics .sc_icon  {
    display: block;
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    margin: 0 auto;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #586067;
    background-color: #495055;
    font-size: 2em;
    line-height: 5rem;
    color: #ffd600;
}

section#objectives .characteristics .sc_icon:hover  {
    color: white
}

section#objectives .characteristics h4 {
    color: #586067;
    font-family: "Playfair Display", serif;
    font-size: 1.1em;
    line-height: 1.5em;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.8em
}

section#objectives .characteristics h4:after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    margin: 0.3em auto 0;
    background-color: rgba(88,96,103,0.9);
}
section#objectives .characteristics p{
    font-size: 0.85rem;
    text-align: center;
    color: #495055;
}

section#objectives .benefit {
    position: relative;
    background-image: url(https://static.olix.es/img/cortijolatoquera/background-2-1.jpg) !important;
    background-color: white;
    padding-top: 20px;
}

section#objectives .benefit .bn-title{ 
    text-align:center;
    color:#e9e4d0;
}

section#objectives .benefit .bn-image.bn-image-center {  
    display: flex;
    align-items: center;
    justify-content: center;
}

section#objectives .benefit .bn-image img{ 
    border-radius: 50%;
    width: 75%;
    margin-top: 25%;
}

section#objectives .benefit .bn-card-left{ 
    text-align: right
}

section#objectives .benefit .bn-card-right{ 
    text-align: left
}

section#objectives .benefit .bn-card p{ 
    color: whitesmoke;
    font-size: 0.9rem;
}

section#objectives .benefit .bn-card h4{ 
    color: #ffcf00;
    font-size: 1rem;
    font-family: 'Playfair Display';
}

section#objectives .benefit .bn-card-left .bn-num span{ 
    margin-left: 10px;
}

section#objectives .benefit .bn-card-right .bn-num span{ 
    margin-right: 10px;
}
section#objectives .benefit .bn-num span{ 
    font-size: 1.3em;
    font-weight: 400;
    display: inline-block;
    width: 1.65em;
    height: 1.65em;
    line-height: 1.65em;
    text-align: center;
    background: #e4ba0d;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #ffcf00;
    color: #586067;
    margin-top: 5px;
}
section#services {
    z-index: 12;
    position: relative;
}
section#services .services > .col  { 

    text-align: center;
    padding: 2.4em 25px 2.3em 25px;
}
section#services .services > .col > .col  { 
    text-align: center;
    padding: 1.4em 0px 2.3em 0px;
}

section#services .services .sc_icon  {
    display: block;
    width: 5rem;
    height: 5rem;
    line-height: 3rem;
    margin: 0 auto;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #586067;
    background-color: #e0e0e0;
    font-size: 2em;
    line-height: 5rem;
    color: #312b2b;
}

section#services .services .sc_icon:hover  {
    background-color: #ffd600;
    color: white
}

section#services .services h4 {
    color: #586067;
    font-family: "Playfair Display", serif;
    font-size: 1.1em;
    line-height: 1.5em;
    font-weight: 700;
    margin-bottom: 0.8em;
    text-align: left;
}

section#services .services h4:after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    margin: 0.3em 0 0;
    background-color: rgba(88,96,103,0.9);
    text-align: left;
}
section#services .services p{
    font-size: 0.85rem;
    text-align: center;
    color: #495055;
    text-align: left;
}

/*CSS Block*/
section#services {z-index:99}

section#services .btn-dropdown-services {
    background: white;
    color: #868a52;
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.service-view .collection{border: 0}
.service-view .collection .collection-item{border: 0; margin-bottom: 2rem;}
.service-view .collection .collection-item p {font-size: 1.2rem;}

.service-view .collection .img-icon {
    position: absolute;
    width: 25px;
    height: 25px;
    overflow: hidden;
    left: 15px;
    display: inline-block;
    vertical-align: middle;

    border-radius: 71px;
    line-height: 107px;
    margin: 0 auto;
    margin-bottom: 2em;
}
/*END CSS Block*/

/*CSS Clients*/


.olix-products {
    border: 2px solid #ffd600;
    margin: 25px;
    background: white;
}

section#products  > div.white{
    padding-bottom: 20em !important;
    background-image: url(../repository/fondo4.png) !important;
    background-position: bottom;
    background-repeat: no-repeat !important;
    background-color: white;
    /* opacity: 0; */
}
/*END CSS Client*/

/*CSS Contact*/

section#contact {
    z-index: 98;
    line-height: 1.5;
    font-family: "Roboto", sans-serif;
    font-weight: normal;
}
.parallax-contact .line {
    background: #16243e;
    margin-top: 35px;
}

.parallax-contact .send i{
    color: #16243e;
    font-size: 5rem;
    -ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}

.parallax-contact .contact-text{
    position: absolute;
    font-size: 5rem;
    font-family: 'Lato';
    padding: 0 20px;
    bottom: 12px;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 1px -3px 12px #312b2b;
    color: whitesmoke;
}

.contact-form {
    display:flex;
    flex-wrap: wrap;
    z-index: 20;
    position: relative;
    box-shadow: 6px 6px 6px 0 rgba(0,0,0,0.16);
    border: 1px solid #203641;
}

.contact-form a.btn{margin-top: 10px; margin-bottom: 20px;}
.contact-form p i{vertical-align: sub; font-size: 1.2rem; margin-right: 10px;}
.contact-form p .margin-city{margin-left: 32px;}
.contact-form p .margin-city{margin-left: 32px;}
.contact-form p+div{width: 232px;margin: 0 auto;}
.g-recaptcha > div {float:right}

.contact-address span {
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: 10px;
    display: block;
}
.contact-address ul > li {
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 18px;
    padding: 10px;
}

.contact-address ul > li i{
    vertical-align: sub;
    font-size: 19px;
}

.contact-address ul > li strong{
    font-weight: bold;
    font-size: 1em;
}

.contact-address > div{
    margin-bottom: 10px;
}
/*END CSS Contact*/

/*CSS Map*/
.map, .map > div {height: 426px; position: relative}

.map.border-triangle:after {
    content: "";
    width: 0;
    height: 0;
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
    border-top: 40px solid #fff;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -80px;
}

.map .map-controller{
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -115px;
    right: 21px;
    z-index: 1;
}

.map .map-controller .btn {
    color: #c8c9c9;
    font-size: 1.8em;
    font-family: 'Lato';
    text-align: center;
    margin: 1px 0;
    width: 65px;
    height: 65px;
    padding: 25px 0;
    display: block;
    background: #424242;
    cursor: pointer;
    font-size: 2rem;
    line-height: .5;
}

.map .map-controller .btn.type-map {
    font-size: 1rem;
}

.map .map-controller .transition-map {
    -webkit-transition: all 100ms linear 0ms;
    -moz-transition: all 100ms linear 0ms;
    -ms-transition: all 100ms linear 0ms;
    -o-transition: all 100ms linear 0ms;
    transition: all 100ms linear 0ms;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.map .map-controller .transition-in {
    webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.map .map-controller .transition-out {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
}

.map .map-controller .zoom-in:hover {
    -webkit-transform: rotateX(-20deg);
    -moz-transform: rotateX(-20deg);
    -ms-transform: rotateX(-20deg);
    -o-transform: rotateX(-20deg);
    transform: rotateX(-20deg);
}

.map .map-controller .zoom-out:hover {
    -webkit-transform: rotateX(20deg);
    -moz-transform: rotateX(20deg);
    -ms-transform: rotateX(20deg);
    -o-transform: rotateX(20deg);
    transform: rotateX(20deg);
}
/*END CSS Map*/

/*CSS SignUp*/

#signup .tabs { margin-bottom: 15px;}
#signup .signup-back {
    background-image: url(https://static.olix.es/img/olix/comercial/signup-code.svg);
    background-position: center -75px, 0 0;
    background-size: 100% auto;
}

#signup .signup-avatar {
    width: calc(60% - 20px);
    margin-top: 20px;
    text-align: center;
}
#signup .select-type img.active {
    box-shadow: 0 0px 10px 0px rgba(49, 43, 43, 0.3);
    -moz-box-shadow: 0 0px 10px 0px rgba(49, 43, 43, 0.3);
    -webkit-box-shadow: 0 0px 10px 0px rgba(49, 43, 43, 0.3);
    -o-box-shadow: 0 0px 10px 0px rgba(49, 43, 43, 0.3);
}
#signup .select-type button {margin-bottom: 20px;}
#signup .input-field.border-right{border-right: 1px solid #e0e0e0;}

#signup .input-field {
    position: relative;
    margin-top: 20px;
    padding: 0 20px;
}

#signup .input-field label {
    left: 1.5rem;
    color: #9e9e9e;
    position: absolute;
    top: 0.8rem;
    font-size: 0.85rem;
    cursor: text;
    transition: .2s ease-out;
}

#signup .input-field .select-wrapper+label {top: -1rem;}

#signup .input-field.literal-field span {
    font-size: 1.1rem;
    cursor: text;
}

#signup #div-register button {width: 75%;}
#signup #div-register p {
    margin-top: 14px;
    margin-bottom: 20px;
    font-size: 12px;
    color: #6a737d;
}

#signup #div-register a {color: #0366d6; text-decoration: none;}
#signup #div-register a:hover { text-decoration: underline;}
#signup #div-register a:active, #signup #div-register a:hover {outline-width: 0;}
/*END CSS SignUp*/

/*CSS Footer*/
footer.page-footer {
    margin-top: 0;
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 20%;
}

footer.page-footer .footer-copyright {
    background-color: rgba(10, 10, 10, 0.16);
}

footer i {
    vertical-align: middle;
}

footer.page-footer .footer-copyright i {
    font-size: 1.5rem;
    color: #e41844;
    vertical-align: sub;
}
.tecnologies {
    float: right;
    width: 21px;
    height: 31px;
    margin: 10px;
    margin-left: 0;
    background-size: 347px;
    background-position-y: 0;
}

.responsive {
    float: left;
    width: 41px;
    height: 41px;
    margin: 10px;
    margin-left: 0;
    background-size: 327px;
    background-position-y: 78px;

}

footer .div-language p {float: initial; margin: 0}
/*END CSS Footer*/

/**/

.blog-paralax {      
    background-image: url(https://static.olix.es/img/cortijolatoquera/blog.png); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-color: #0ca4b2; 
    background-position: center; 
}

.blog-categories-tags {
    border-bottom: 1ps solid red
}

.blog-categories-tags .collection {background: transparent; border: 0;}
.blog-categories-tags .collection .collection-item{background: transparent; border: 0; padding: 10px 5px;}
.blog-categories-tags .collection .collection-item a {line-height: 20px;float: initial; padding: 0;}
.blog-categories-tags .collection .collection-item a.secondary-content span {color: #26a69a;}
.blog-categories-tags .collection .collection-item span { color: #524a4a;}
.blog-categories-tags .collection .collection-item a i {
    font-size: 1rem;
    padding-right: 10px;
    line-height: 15px;
    float: left;
    padding-top: 3px;
}
.blog-categories-tags > span {
    text-transform: uppercase;
    font-size: 0.75rem;
}

.blog-modes {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap-reverse;
}
.blog-categories-tags .btn-tags.active {
    background-color: #26a69a !important;
}
.blog-time, .blog-type {
    width: 60px;
    padding: 10px 10px;
    height: 60px;
    float: right;
    text-align: center;
    border-radius: 4px;
    text-transform: uppercase;
    margin: 0.5rem 0 0.5rem;
}

.blog-type i{
    padding-top: 8px;
    color: white;
}

.blog-card {
    min-height: 175px !important;
}

.article-header{ 
    font-size: 10px; 
} 

.article-header > a{ 
    float: none; 
    padding-left: 5px; 
} 
.article-header > a > i{ 
    font-size: 10px; 
} 

.btn-tags {
    margin-top: 10px;
    font-size: 0.75rem;
    padding: 0 0.65rem;
    margin-right: 10px;

}

#blog .card-image .article-image {
    max-height: 350px;
    object-fit: cover;
}

#blog .card-image .article-video{
    max-height: 350px;
}

#blog .card-image .article-audio {
    background: #f1f3f4;
}
/**/

/*CSS Icons */
.icon-olix{  background-image: url(https://static.olix.es/img/olix/comercial/icons.png);}

.social {
    width: 54px;
    height: 64px;
    background-size: 400px;
    background-position-y: -88px;
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    margin-right: 15px;
    margin-bottom: 10px;
}

.icono-facebook, .icono-facebook:hover, .icono-facebook:focus{background-position-x: -32px; background-color: #4e71a8;}
.icono-twitter, .icono-twitter:hover, .icono-twitter:focus{background-position-x: -136px; background-color: #1cb7eb;}    
.icono-linkedin, .icono-linkedin:hover, .icono-linkedin:focus{background-position-x: -241px; background-color: #1686b0;}
.icono-google, .icono-google:hover, .icono-google:focus{background-position-x: -345px; background-color: #da4835;}



/*END CSS Icons*/

/*CSSS Shadow*/
.shadow-mid:after{
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-box-shadow: 0 0 20px rgb(49, 43, 43);
    box-shadow: 0 0 13px rgb(49, 43, 43);
    bottom: 0px;
    width: 100%;
    height: 50%;
    -moz-border-radius: 100%;
    border-radius: 20%;
}
.shadow-mid:before{
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-box-shadow: 0 0 20px rgb(49, 43, 43);
    box-shadow: 0 0 13px rgb(49, 43, 43);
    top: 0px;
    width: 100%;
    height: 50%;
    -moz-border-radius: 100%;
    border-radius: 20%;
}
/*EDN CSS Shadow*/

/*CSS Preload*/
#preload-01 { background: url(https://static.olix.es/img/olix/logo/laboratory.svg") no-repeat -9999px -9999px; }
#preload-02 { background: url(https://static.olix.es/img/olix/comercial/bg-home.png") no-repeat -9999px -9999px; }
/*End CSS Preload*/

/*CSS Transiciones*/
.transition-03 {
    transition: .3s ease;
    transition-property: initial;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-delay: initial;
}
/*END CSS Transiciones*/

/*CSS Fonts*/
.font-lato { font-family: 'Playfair Display', 'sans-serif';}
.font-evergreen {     font-family: 'evergreen', 'sans-serif';
                      font-weight: 100;
                      font-style: normal;
                      font-size: 2.5em;
                      letter-spacing: 0px;
}
.font-lato-slim { font-family: 'Playfair Display'; font-weight: 400; font-style: normal;}
.font-lato-slim { font-family: 'Playfair Display'; font-weight: 400; font-style: normal;}
.font-beaver { font-family: 'beaver';     letter-spacing: 5px; font-weight: 400; font-style: normal;}


@font-face {
    font-family: 'evergreen';
    src: url('../fonts/evergreen/evergreen.otf');
    src: url('../fonts/evergreen/evergreen.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'beaver';
    src: url('../fonts/beaver/beaver.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/*End CSS Fonts*/
@media only screen and (max-width : 992px) {
    .parallax-container .section {
        position: absolute;
        top: 40%;
    }
}

/*COLOR*/
.yellow.accent-4  {
    background-color: #d6d700 !important;
}
section#news  {
    position:relative;
    z-index:99;
}
section#news .grid-news .card .card-image img {
    height: 250px !important;
}

.div-percent {text-align: center}
.div-percent p {font-size: 4rem;}
.div-percent p span{font-size: 100%;}
.div-percent h3{font-size: 18px; color: whitesmoke;}


.contact-social ul{
    text-align: center;
    width: 100%;
}

.contact-social ul li{
    line-height: 56px;
    width: 56px;
    padding: 0;
    text-align: center;
}

.contact-social ul li a {display: block;}
.contact-social ul li i{
    font-size: 1.2em;
    color: white;
}

.contact-social ul li:nth-child(even):hover a i{
    color: #00baac
}
.contact-social ul li:nth-child(odd):hover a i{
    color: #F44336
}

section {z-index: 99}

section#news article{
    background-size: cover;
    padding: 0;
    padding-top: 25em;
    position: relative
}

section#news article a{
    background: rgba(0, 0, 0, 0.25);
    color: white;
    display: block;
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 1em;
}
section#news article:hover a {
    background: #9ab00e87;
    cursor: pointer
}

section#news article a time {
    display: block;    
    font-size: 0.75em;
}

section#news article a span {
    font-size: 1.375em;
    letter-spacing: 0.0625em;
    line-height: 1.3636364;
    font-weight: normal;
    text-transform: uppercase;
    padding-top: 5px;
    display: block;
}


.modal-content h4 {font-size: 1.7rem;}
.modal-content h3,
.modal-content h2 {
    border: 0;
    font-size: 1.25rem;
    text-align: left;
    margin: 0;
}
.modal-content p {
    font-size: 13px;
}

.carousel-text h3 {
    font-size: 2.25rem;  
}
.carousel.carousel-slider .carousel-item p {
    font-size: 1.7rem;
    font-weight: 100;
}

.modal.modal-fixed-footer {
    z-index: 5003 !important;
}

.modal-overlay {
    z-index: 5002 !important;  
}

.cc-banner.cc-bottom {
    background-color: #3c3f45 !important;
}

.cc-btn.cc-dismiss {
    background-color: #2e5c8a !important;
    color: whitesmoke !important;
    margin-left: 10px;
}



.hex-group {
    padding-bottom: 5.5rem;
    display: inline-block;
    width: 479px;
    margin: 0 auto;
}
.hex {
    float: left;
    margin-left: 3px;
    margin-bottom: -43px;
    position: relative;
}
.hex .top {
    width: 0;
    border-bottom: 45px solid #046C93 ;
    border-left: 78px solid transparent;
    border-right: 78px solid transparent;
}
.hex .middle {
    width: 156px;
    height: 90px;
    background: #046C93;
    color: whitesmoke
}
.hex .bottom {
    width: 0;
    border-top: 45px solid #046C93;
    border-left: 78px solid transparent;
    border-right: 78px solid transparent;
}
.hex.bounceInUp  .top {
    border-bottom: 45px solid #3CBF5D;  
}

.hex.bounceInUp  .middle {
    background: #3CBF5D;  

}
.hex.bounceInUp  .bottom {
    border-top: 45px solid #3CBF5D;  
}

.hex-row {
    clear: left;
}
.hex-row.odd {
    margin-left: 80px;
}
.hex span {
    position: absolute;
    top: 25%;
    bottom: 0;
    vertical-align: middle;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 20px;
    padding-top: 25px;
    height: 74px;
}
section#objectives {
    z-index: 52;
    position: relative;
}
section#laboratory {
    z-index: 52;
    position: relative;
}

section#laboratory .about-content { display: flex; width: 100%; flex-wrap: wrap;}
section#laboratory .about-content .card{
    background: rgba(255, 255, 255, 0.5);;
    padding: 15px;
    border: 1px solid rgba(125,125,125,0.2);
    height: calc(100% - 22px);
}
section#laboratory .about-content .card:hover {
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    padding-top: 16px;
    padding-left: 16px;
}
section#laboratory .card:hover .line-top, 
section#laboratory .card:hover .line-bottom {
    width: 100%;
}

section#laboratory .card:hover .line-left, 
section#laboratory .card:hover .line-right {
    height: 100%;
}

section#laboratory .card .line-top {top: 0; left: 0;}
section#laboratory .card .line-bottom {bottom: -1px; right: 0;}
section#laboratory .card .line-left {bottom: 0; left: 0;}
section#laboratory .card .line-right {top: 0; right: -1px;}
section#laboratory .card .line-top, section#laboratory .card  .line-bottom {
    width: 0;
    height: 2px;
}

section#laboratory .card .line-left, section#laboratory .card .line-right {
    width: 2px;
    height: 0;
}

section#laboratory .card .line-top,
section#laboratory .card .line-bottom, 
section#laboratory .card .line-left, 
section#laboratory .card .line-right {
    position: absolute;
    -webkit-transition: width 210ms ease-out 10ms, height 210ms ease-out 10ms;
    -moz-transition: width 210ms ease-out 10ms, height 210ms ease-out 10ms;
    -o-transition: width 210ms ease-out 10ms, height 210ms ease-out 10ms;
    transition: width 220ms ease-out 10ms, height 220ms ease-out 10ms;
}

.color-information-top {background: linear-gradient(to left, #046C93,#3CBF5D 75%);}
.color-information-bottom {background: linear-gradient(to right, #046C93,#3CBF5D 75%);}
.color-information-left {background: linear-gradient(to top, #046C93,#3CBF5D 75%);}
.color-information-right {background: linear-gradient(to bottom, #046C93,#3CBF5D 75%);     width: 2.75px;}

section#laboratory .about-content .card -promo-caption {text-transform: uppercase;}
section#laboratory .about-content .card i {
    margin: 40px 0;
    font-size: 7rem;
    display: block;
}

section#laboratory .about-content .card img {
    width: 150px;
    margin: 40px auto;
    display: block;
}
section#services {z-index:99; 
                  position:relative
}
section#services > div.second {
    background-image: url(https://static.olix.es/img/olix/comercial/pt-percentage.png); 

}

section#services .collection .collection-item{font-size: 0.8rem;
                                              line-height: 1rem;}

section#services .progress-wrap { padding: 20px;}
section#services .progress-bar {height: 100%}
section#services  .olix-imac {
    background-image: url(https://static.olix.es/img/olix/comercial/imac2.png); 
    background-size: cover;
    height: 100%
}

section#services .counter {
    padding: 96px 0;
}


.other-service {
    height: 200px;
    width: calc(100% - 46px);
    margin-left: 23px;
}

.other-service img {
    width: 100%;
    object-fit: cover;
}


.trapezoid {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.trapezoid:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: red;
    border-radius: 20px 0 0 0;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: perspective(400px) rotateX(45deg);
    -moz-transform:  perspective(400px) rotateX(45deg);
    -ms-transform: perspective(400px) rotateX(45deg);
    -o-transform: perspective(400px) rotateX(45deg);
    transform: perspective(400px) rotateX(45deg);
}

.zigzag:after {
    background: linear-gradient(-30deg, #424242 8px, transparent 0), linear-gradient(30deg, #424242 8px, transparent 0),linear-gradient(30deg, #046c93ad 10px, transparent 0),linear-gradient(-30deg, #3cbf5dad 10px, transparent 0);
    background: linear-gradient(30deg, #424242 50%, transparent 55%) 0 0,                linear-gradient(-30deg, #424242 50%, transparent 55%) 0 0;
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

section#news .grid-news .card .card-image a.btn-floating {
    position: absolute;
    right: 24px;
    bottom: -28px;
}