div#header div#slide-holder {
    z-index: 40;
    width: 660px;
    height: 290px;
    position: absolute;
}

    div#header div#slide-holder div#slide-runner {
        width: 660px;
        height: 290px;
        overflow: hidden;
        position: absolute;
    }

    div#header div#slide-holder li img {
        margin: 0;
        display: none;
        position: absolute;
        width: 660px;
        height: 290px;
    }

    div#header div#slide-holder div#slide-controls p.text {
        float: left;
        color: #fff;
        display: inline;
        font-size: 10px;
        line-height: 16px;
        margin: 15px 0 0 20px;
        text-transform: uppercase;
    }

#slide-controls p#slide-nav {
    height: 24px;
    margin: 298px 0px 0px 300px;
}

    #slide-controls p#slide-nav a {
        width: 50px;
        height: 24px;
        display: inline;
        font-size: 11px;
        margin: 0 5px 0 0;
        line-height: 24px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        background-position: 0 0;
        background-repeat: no-repeat;
    }

div#slide-controls p#slide-nav a.on {
    background-image: url(../images/slide-hover.png);
}

div#slide-controls p#slide-nav a {
    background-image: url(../images/slide.png);
    width: 8px;
    height: 8px;
    float: left;
}

div#nav ul li a {
    background: url(../images/slide.png) no-repeat;
}

/*NEWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW*/
:root {
    --primary-color: #df0024 !important;
}
/*EFFECT 1*/
.hovereffect {
    /*width: 100%;
    height: 100%;
    float: left;*/
    /*overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;*/
}

    .hovereffect .overlay {
        /*width: 100%;
        height: 100%;*/
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        /*background-color: rgba(0,0,0,0.6);*/
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: translate(460px, -100px) rotate(180deg);
        -ms-transform: translate(460px, -100px) rotate(180deg);
        transform: translate(460px, -100px) rotate(180deg);
        -webkit-transition: all 0.2s 0.4s ease-in-out;
        transition: all 0.2s 0.4s ease-in-out;
    }

    .hovereffect img {
        display: block;
        position: relative;
        -webkit-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
    }

    .hovereffect h2 {
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 17px;
        padding: 10px;
        /*background: rgba(0, 0, 0, 0.6);*/
    }

    .hovereffect li.info {
        display: inline-block;
        text-decoration: none;
        padding: 7px 14px;
        text-transform: uppercase;
        color: #fff;
        /*border: 1px solid #fff;*/
        margin: 50px 0 0 0;
        background-color: transparent;
        -webkit-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        transform: translateY(-200px);
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

        .hovereffect li.info:hover {
            /*box-shadow: 0 0 5px #fff;*/
        }

    .hovereffect:hover .overlay {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }

    .hovereffect:hover h2 {
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-transition-delay: 0.5s;
        transition-delay: 0.5s;
    }

    .hovereffect:hover li.info {
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }


/*SmallEnvelop : Simple PreLoader*/
.no-js #loader {
    display: none;
}

.js #loader {
    display: block;
    position: absolute;
    left: 100px;
    top: 0;
}

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../images/LOGO_gif-White.png) center no-repeat #df0024;
}


/*--------------------hovereffect2---------------------------*/

.hovereffect2 {
    overflow: hidden;
}

    .hovereffect2 .overlay {
        position: absolute;
        overflow: hidden;
        bottom: 15%;
        left: 0;
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

.hovereffect2-1 .overlay {
    position: absolute;
    overflow: hidden;
    bottom: 5%;
    left: 7%;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-align: start;
}

    .hovereffect2 .overlay-sample {
        border: solid 1px white;
        position: absolute;
        overflow: hidden;
        bottom: 15%;
        left: 0;
        width: 90%;
        margin: 0px 5% 0 5%;
        bottom: 5%;
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

        .hovereffect2 .overlay-sample p {
            padding: 8% 0 0 0;
        }

    .hovereffect2 .overlay1 {
        top: 60% !important;
    }

    .hovereffect2 img {
        display: block;
        position: relative;
        -webkit-transition: all .4s linear;
        transition: all .4s linear;
    }


    .hovereffect2 .overlay-sample .info-title {
        padding: 1% 0 0 0;
    }
    .hovereffect2 .info-title {
        font: Italic 16px "Barlow-Bold";
        text-transform: initial;
    }

.hovereffect2 li.info {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

    .hovereffect2 div.info {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .hovereffect2 p.info {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .hovereffect2 p.info {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }
    .hovereffect2 p.infoSample {
        text-transform: none;
        text-align: center;
        margin: 0 8% 8% 8%;
    }


.hovereffect2:hover li.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
    .hovereffect2:hover div.info {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    .hovereffect2:hover p.info {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    .hovereffect2:hover p.info {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    .hovereffect2:hover img {
        -ms-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    .hovereffect2:hover {
        /*background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(var(--primary-color)));
        background: linear-gradient(180deg, #fff, var(--primary-color));*/
        background: #1a2d59;
    }

    .hovereffect2-1:hover {
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(var(--primary-color))) !important;
        background: linear-gradient(180deg, #fff, var(--primary-color)) !important;
    }
        
    .hovereffect2:hover img {
            opacity: 0.2;
        }


/*--------------------hovereffect3---------------------------*/

.hovereffect3 {
    overflow: hidden;
}
    .hovereffect3 .overlay {
        position: absolute;
        overflow: hidden;
        top: 30%;
        left: 0;
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .hovereffect3 .overlay1 {
        top: 60% !important;
    }

    .hovereffect3 img {
        display: block;
        position: relative;
        -webkit-transition: all .4s linear;
        transition: all .4s linear;
    }

    .hovereffect3 li.info {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }
    .hovereffect3 p.info {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }
.hovereffect3 p.info {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

   
.hovereffect3:hover li.info {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    .hovereffect3:hover p.info {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

.hovereffect3:hover p.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.hovereffect3:hover img {
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}


@media (max-width: 479px) {
    .se-pre-con {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url(../images/LOGO_gif-White.png) center no-repeat #df0024;
        background-size: auto 7%;
    }

    .hovereffect2 .overlay-sample {
        bottom: 16%;
    }

    .hovereffect3 .overlay1 {
        top: 56% !important;
    }

    .hovereffect3 .overlay {
        top: 30%;
    }

    .imgli ul li.descript {
        text-align: left;
        font: 15px "Barlow-Regular";
        color: #fff;
        margin-top: 1%;
        line-height: 19px;
    }
    .imgli ul li.country {
        text-align: left;
        font: bold 15px "Barlow-Regular";
        color: #fff;
        text-transform: uppercase;
        line-height: 22px;
    }
}



@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
    /* iPhone 6 Portrait */

}


@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
    /* iPhone 6 landscape */
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
    /* iPhone 6+ Portrait */
    .hovereffect2 .overlay-sample {
        bottom: 16%;
    }
    .hovereffect3 .overlay1 {
        top: 56% !important;
    }
    .hovereffect3 .overlay {
        top: 50%;
    }
    .imgli ul li.descript {
        text-align: left;
        font: 15px "Barlow-Regular";
        color: #fff;
        margin-top: 1%;
        line-height: 19px;
    }

}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
    /* iPhone 6+ landscape */
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) {
    /* iPhone 6 and iPhone 6+ portrait and landscape */
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait) {
    /* iPhone 6 and iPhone 6+ portrait */
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape) {
    /* iPhone 6 and iPhone 6+ landscape */
}