body{ overflow-x: hidden!important; width: 100vw;}
h1, h2, h3, h4, h5, h6{
    text-transform: uppercase;
    /* font-family: 'Teko', sans-serif; */
    font-family: 'Viga', sans-serif;
    color: #272626;
    
    letter-spacing: 3px;
    font-weight: 900;
}
.simple-video{
 width: 100%;
}
/* h1::first-letter, 
h2::first-letter, 
h3::first-letter, 
h4::first-letter, 
h5::first-letter, 
h6::first-letter {
    color: var(--primary-color);
} */
h1 > small, 
h2 > small, 
h3 > small, 
h4 > small, 
h5 > small, 
h6 > small {
    color: var(--light-gray);
    position: absolute;
    bottom: 46px;
    padding-left: 15px;
    font-weight: 100;
}
p, div, ul, li, ol, main, section{
    font-family: 'Mukta', sans-serif;
    /* font-family: 'Viga', sans-serif; */
    color: #696969;
    font-size: 18px;
}
ul.list, ul.list-dark { 
    list-style-position: outside;
    list-style-image: url(../img/list.png);
    list-style: none;
}
ul.list li:before,
ul.list-dark li:before{
    content: '';
    display: inline-block;
    height: 16px;
    width: 16px;
    background-image: url(../img/list.png);
    background-position: center;
    background-size: cover;
    margin-right: 10px;
}
ul.list-dark *{
    color: var(--light-gray);
}
h1{ font-size: 50px!important; }
h2{ font-size: 44px!important;}
h2{ font-size: 38px!important;}
.white-text { color: white!important; }
.overlay {
    background-color: black;
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.4;
}
.under_line, .top_line{ 
    display: block;
    bottom: 10px;
    left: 15px;
    clear: both;
}
.top_line{ border-top: solid 4px var(--primary-color);}
.under_line{ border-bottom: solid 4px var(--primary-color); margin-bottom: 40px; }
.under {
    position: initial!important;
}
.bg-dark {
    padding: 70px 0;
    background: linear-gradient( 135deg, #4b4b4b 5%, #4b4b4b 75%, var(--dark-gray) 75%, var(--dark-gray) 95%, var(--dark-gray) 95%, var(--dark-gray) 100%);
}
.bg-light{
    background: linear-gradient( 
        135deg, 
        var(--dark-gray) 5%, var(--bg-light-gray) 5%, 
        var(--bg-light-gray) 5%, var(--bg-light-gray) 75%,
        #ececec 75%, #ececec 95%,
        var(--dark-gray) 95%, var(--dark-gray) 100%);
}
.bg-dark-solid { background-color: var(--dark-gray);}

.bg-dark-solid *, .bg-dark *{ color: white; }
.bg-light *{ color: var(--dark-gray); }
.bg-light p { color: #696969; }
.bg-fixed{
    background-attachment: fixed!important;
}
.light_gray_text{ color: var(--light-gray)!important; }
.btn-red {
    background: var(--primary-color);
    padding: 7px 20px;
    color: white;
    text-transform: uppercase;
    /* font-family: 'Teko', sans-serif; */
    font-family: 'Viga', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    border-bottom: solid 3px #a21d22!important;
    transition: all 0.3s!important;
    width: fit-content;
    margin: 0 auto;
    border:none;
}
a.btn-red:hover, input[type="submit"].btn-red:hover {
    color: white;
    text-decoration: none!important;
    background: #a21d22!important;
    border-bottom-color: var(--primary-color)!important;
    box-shadow: 0 0 3px #8a8787!important;
}
[class^='btn']{ position: relative; }
/* [class^='btn']:hover:after {
    content: ' →';       
    padding-right: 10px;
} */
.loading{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top:0;
    left: 0;
    background: #262627;;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #D12027;
    transition: all .75s;
}
.bars{
    width: 60px;
    height: auto;
    display: flex;
    margin: 0 auto;
    justify-content: space-around;
}
.loaded{
    background-color: #D12027;
}
span.bar {
    width: 7px;
    height: 15px;
    background: white;
}
@keyframes loaded{
    from {
        width: 80%;
        height: 80vh;
    }
    to {
        width: 40%;
        height: 40vh;
    }

}
.owl-carousel.owl-theme{
    background: var(--dark-gray);
}
.owl-carousel.owl-theme .owl-item{ 
    height: 100vh; 
    overflow: hidden;
    display: flex;
    justify-content: center;
}
#id{
    width: 100vw!important;
    height: 100vh!important;
}
.owl-carousel.owl-theme .owl-item img{
    /* width: auto!important; */
    height: 100%!important;
}
.owl-carousel.owl-theme .owl-item:hover:after {
    
    content: "";
    position: absolute;
    z-index: 9999;
    width: 100%;
    height: 100vh;
}
/* .owl-carousel.owl-theme .owl-item:hover .slider-content {
    display: flex!important;
} */
.slider-content {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    color: transparent;
    background: transparent;
    transition: all 1s;
    z-index: 10;
}
/* .owl-item:hover .slider-content{
    background: linear-gradient(23deg, #000000e6, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.7));
    color: white;
} */
.slider-content .title{
    /* font-family: 'Teko', sans-serif!important; */
    font-family: 'Viga', sans-serif;
    text-transform: uppercase;
    font-size: 32px;
    color: transparent;
    transition: all 1s;
}
/* .slider-content .title::first-letter{ color: transparent; } */
/* .owl-item:hover .slider-content .title::first-letter{ color: white; } */
.owl-item .slider-content .title{ color: white; }
.slider-content p{
    font-size: 15px;
    font-family: 'Mukta', sans-serif;
    /* font-family: 'Viga', sans-serif; */
    color: transparent;
    transition: all 1s;
}
.owl-item .slider-content p{ color: #d4d4d4; }
.owl-nav {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}
.owl-nav button.owl-prev, .owl-nav button.owl-next {
    background-color: #ffffff26!important;
    color: #3b3b3b!important;
    font-size: 30px!important;
    width: 44px;
    transition: all .3s;
}
.owl-nav button.owl-prev:hover, .owl-nav button.owl-next:hover {
    background-color: #ffffff60!important;
    box-shadow: 0 0 3px #00000020;
}
.about{
    padding: 70px 0;
    overflow: hidden;
    border-top: solid 5px var(--dark-gray);
    border-bottom: solid 5px var(--dark-gray);
    position: relative;
}
.about > .container{ position: relative; z-index: 2;}
.gray_logo {
    background-image: url(../img/rino.svg);
    background-size: 100%;
    background-position: 225px 160px;
    position: absolute;
    width: 100vw;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
}
/* .about p { text-align: left!important;} */

.dark h1, .dark h2, .dark h3,
.dark h4, .dark h5, .dark h6 {
    color: white;
}
.dark p{
    color: #d2d2d2;
}
.counters { background: var(--dark-gray); padding: 30px 0;}
.counters */*, .counters *::first-letter  */{ color: var(--light-gray); }

.counter /*, .counter::first-letter */{
    width: 100%;
    text-align: center;
    font-size: 3rem!important;
    line-height: 1;
    /* font-family: 'Teko', sans-serif; */
    font-family: 'Viga', sans-serif;
    margin: 0;
    font-weight: 700;
    letter-spacing: 10px;
    color: white;
}
.projects{
    padding: 70px 0 0 0;
    border-top: solid 5px var(--dark-gray);
    border-bottom: solid 5px var(--dark-gray);
}
.list-project > a, .list-project > div {
    width: 25%!important;
    height: fit-content;
    position: relative;
    overflow: hidden!important;
    float: left;
    margin: 0;
    padding: 0;
}
.list-project > a > img,
.list-project > div > img{
    width: 100%;
    transition: all 0.3s;
}
.list-project .description {
    position: absolute;
    z-index: 90;
    /* background: radial-gradient(#696969, transparent); */
    top: -100%;
    left: -100%;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    padding: 10px;
    color: white;
    margin: 10px;
    box-shadow: 0 0 0 0px #d1202738;
    transition: all 0.3s;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.list-project a:hover img,
.list-project div:hover img {
    filter: blur(3px);
    transform: scale(1.2);
}
.list-project a:hover > .description,
.list-project div:hover > .description{
    top: 0;
    left:0;
    opacity: 1;
}
.services{
    padding: 70px 0;
    background-image: url(../img/services/img_fondo_iconos.jpg);
    background-position: center;
    background-size: cover;
}
.flex-row{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.service {
    width: 18%;
    text-align: center;
}
.service img{ max-width: 60%; }
.service .circle{
    min-height: 80px!important;
    background: var(--dark-gray);
    padding: 30px 0;
    border-radius: 100px;
    margin: 15px auto;
    width: 150px;
    display: flow-root;
    box-shadow: 0px 0px 0px 3px var(--dark-gray);
    /* border: solid 3px var(--primary-color); */
}
.video-header{
    height: 100vh;
    width: 100vw;
}
.video-header .iframe{
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100vw;
    min-height: 100vh;
    height: 100vh;
}
a.nav-link {
    color: white!important;
}
li.nav-item.active a.nav-link {
    border-bottom: solid 3px var(--primary-color);
    padding-bottom: 0px;
}
.no-hover:hover{
    color: var(--light-gray)!important;
}
@media only screen and (max-width: 480px){
    .list-project .description h3 {
        font-size: 12px;
    }
    header .navbar-brand img{
        max-width: 230px;
    }
    #mainMenu{
        background: rgba(0, 0, 0, 0.5);
    }
    .simple-video{
        /*width: auto;
        height: 100%;*/
    }
    .video-header{
        /* height: fit-content; */
        height: 85vh;
        background-color: var(--dark-gray);
    }
    .video-header .overlay{
        display: none;
    }
}
@media only screen and (min-width: 768px){
    .video-header iframe{
        width: 100vw!important;
        height: 100vh;
    }
}
.service-title{
    font-size: 20px;
}
.about-section{
    padding: 0!important;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.about-image, .about-image-2{
    width: 50%;
    background-image: url(../img/about-us/intro.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
}
.about-image-2{
    background-image: url(../img/about-us/casco.jpg)!important;
}

.about-desc{
    width: 50%;
    height: 100vh;
    padding: 3em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-social {
    position: absolute;
    display: none;
    bottom: 15px;
    right: 70px;
}
.about-social a { margin-left: 10px; }
.about-social a i { 
    color: var(--light-gray);
    padding: 3px;
    background-color: #d12027de;
    border-radius: 4px;
    min-width: 24px;
    text-align: center;
}
.about-social a:hover{
    text-decoration: none;
}
.intro{
    background: url(../img/intro.jpg);
    background-position: center;
    background-size: cover;
    margin: 0;
    padding: 80px 0;
    height: 250px;
    text-align: center;
    color: white;
    position: relative;
}
.overlay-dark{
    background: rgba(0, 0, 0, 0.25);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.portfolio-section{ width: 100%; }
.portfolio-desc { 
    width: 90%; 
    padding: 3em;
    max-width: 980px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    text-align: justify;
}

.single-portfolio {
    max-width: 33.3%;
    /* border: solid red; */
    padding: 20px;
    float: left;
}
.header-portfolio {
    width: 100%;
    /* height: 200px; */
    overflow: hidden;
}
.header-portfolio img {
    width: 100%;
    height: auto;
    transition: all 0.3s;
}
.single-portfolio a:hover .header-portfolio img {
    transform: scale(1.05);
}
.desc-portfolio{
    border-top: transparent;
    padding: 10px;
    /* background: rgba(255, 255, 255, 0.01); */
    border: solid rgba(255, 255, 255, 0.01) 1px;
}
.desc-portfolio h3{
    font-family: "Mukta";
    font-size: 20px;
    font-weight: 100;
    transition: all 1s;
}
.single-portfolio a h3 small{
    transition: all 1s;
}
.single-portfolio a:hover h3{
    padding-left: 10px;
}
.single-portfolio a:hover h3 small{
    padding-left: 15px;
}
.single-portfolio a:hover {
    text-decoration: none!important;
}
.desc-portfolio small {
    position: initial;
    padding: 0;
}
.portfolio-filters {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.portfolio-filters li {
    display: inline;
    margin: 10px;
}
.hide-portfolio{
    width: 0!important;
    display: none!important;
}
.contact-section{
    padding: 70px 0;
}
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    background: transparent!important;
    color: var(--light-gray)!important;
    border-radius: 0!important;
    border: solid 1px var(--light-gray)!important;
    padding: 25px 20px!important;
}
@media(max-width: 768px){
    .img-about { margin-bottom: 20px; }
    .slider-content, .slider-content *{
        display: flex!important;
        color: white!important;
    }
    .services .flex-row{
        display: block!important;
    }
    .service{
        width: 50%;
        float: left;
        margin-bottom: 30px;
    }
    .service:last-child{
        width: 100%;
    }
    
}

@media(max-width: 480px){
    .about-image-2.rellax, .about-image {
        width: 100%;
        height: 50vh;
    }
    h1{ font-size: 40px!important; }
    h2{ font-size: 28px!important; }
    .single-portfolio{
        max-width: 100%;
    }
    .portfolio-desc {
        padding: 3em 15px;
    }
    .reverse-movil{
        display: flex;
        flex-direction: column-reverse!important;
    }
    small {
        display: contents;
    }
    .portfolio-filters{
        margin: 10px;
        width: 100%;
        overflow: scroll;
        display: flow-root;
        padding: 0!important;
        margin-left: 0;
    }
    .portfolio-filters li{
        line-height: 2;
    }
    .about-section{
        flex-direction: column;
    }
    .about-desc{
        width: 100%;
        height: fit-content;
        padding: 70px 20px;
        background-position: top center;
    }
    .about-social{ 
        position: inherit;
        text-align: right;    
    }
    .text-justify{
        text-align: justify;
    }
    .slider-content, .slider-content *{
        display: flex!important;
        color: white!important;
    }
    .service{
        width: 100%;
    }
    .services .flex-row{
        flex-direction: column!important;
    }
    .list-project > a, 
    .list-project > div{
        width: 50%!important;
    }
    .list-project a > .description {
        top: 0;
        left: 0;
        opacity: 1;
    }
    .list-project .description.bg-light {
        background: rgba(255, 255, 255, 0.35)!important;
    }
    .list-project .description.bg-dark {
        background: rgba(0, 0, 0, 0.35)!important;
    }
    .counter{
        margin-bottom: 30px;
    }
}