/* ==================================================
   AENEAS HOME PAGE CSS

   Used by:
   index.asp
   index_eng.asp

   Features:
   - Responsive Hero Slider
   - Image height = slider height
   - Blur background
   - Slide animation
   - Text animation
   - Home page responsive layout
   ================================================== */


/* ==================================================
   Global
   ================================================== */

.aeneas-home{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}


/* ==================================================
   HERO SLIDER

   Height:
   min 400px
   max 700px

   1920 x 680 ratio:
   680 / 1920 = 35.4167vw
   ================================================== */


.aeneas-hero-slider{

    position:relative;

    width:100%;

    height:clamp(
        400px,
        35.4167vw,
        700px
    );

    margin:0;

    padding:0;

    overflow:hidden;

    background:#000;

    isolation:isolate;

    /*
     * Mobile:
     * vertical scroll works normally
     * horizontal swipe handled by JS
     */
    touch-action:pan-y;

}



/* ==================================================
   Slide Base
   ================================================== */

.aeneas-hero-slide{

    position:absolute;

    top:0;

    left:0;


    width:100%;

    height:100%;


    overflow:hidden;


    /*
     * Default:
     * waiting from right side
     */

    transform:
        translate3d(
            100%,
            0,
            0
        );


    opacity:1;

    visibility:visible;


    transition:
        transform .70s cubic-bezier(
            .645,
            .045,
            .355,
            1
        );


    will-change:transform;


    z-index:1;

}



/* Current slide */

.aeneas-hero-slide.active{

    transform:
        translate3d(
            0,
            0,
            0
        );


    z-index:3;

}



/* Old slide leave left */

.aeneas-hero-slide.slide-out-left{

    transform:
        translate3d(
            -100%,
            0,
            0
        );


    z-index:2;

}



/* New slide prepare right */

.aeneas-hero-slide.slide-from-right{

    transform:
        translate3d(
            100%,
            0,
            0
        );


    transition:none;


    z-index:4;

}



/* New slide prepare left */

.aeneas-hero-slide.slide-from-left{

    transform:
        translate3d(
            -100%,
            0,
            0
        );


    transition:none;


    z-index:4;

}



/* Old slide leave right */

.aeneas-hero-slide.slide-out-right{

    transform:
        translate3d(
            100%,
            0,
            0
        );


    z-index:2;

}



/* ==================================================
   Blur Background

   When main image width is smaller,
   use same image blurred.
   ================================================== */

.aeneas-hero-blur{

    position:absolute;


    top:-35px;

    right:-35px;

    bottom:-35px;

    left:-35px;



    background-size:

        cover;



    background-position:

        center center;



    background-repeat:

        no-repeat;



    filter:

        blur(28px);



    -webkit-filter:

        blur(28px);



    transform:

        scale(1.08);



    opacity:.72;



    pointer-events:none;


    z-index:1;

}



/* ==================================================
   Main Image Link
   ================================================== */

.aeneas-hero-link{

    position:absolute;


    inset:0;


    display:flex;


    justify-content:center;


    align-items:center;


    overflow:hidden;


    z-index:2;


    touch-action:pan-y;

}



/* ==================================================
   Main Image

   Important:

   height = slider height

   width auto:
   keep original ratio

   max-width none:
   prevent bootstrap override
   ================================================== */


.aeneas-hero-image{

    position:relative;


    display:block;


    flex:none;


    width:auto!important;


    height:100%!important;


    max-width:none!important;


    min-height:100%!important;


    user-select:none;


    -webkit-user-drag:none;

}



/* ==================================================
   Hero Text Container
   ================================================== */


.aeneas-hero-text{

    position:absolute;


    inset:0;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    padding:

        20px 80px;


    text-align:center;


    pointer-events:none;


    z-index:20;

}



/* ==================================================
   Hero Main Title
   ================================================== */


.aeneas-hero-text h5{

    width:100%;


    max-width:1400px;


    margin:

        0 0 20px 0;


    padding:0;



    font-size:47px;


    font-weight:700;


    line-height:1.3;



    color:red;



    text-align:center;



    text-shadow:

        0 2px 5px rgba(
            0,
            0,
            0,
            .45
        );



    opacity:0;



    transform:

        translate3d(
            0,
            32px,
            0
        );



    transition:

        opacity .55s ease,

        transform .55s ease;

}



/* ==================================================
   Hero Subtitle
   ================================================== */


.aeneas-hero-text h2{


    width:100%;


    max-width:1500px;


    margin:0;


    padding:0;



    font-size:32px;


    font-weight:700;


    line-height:1.5;



    color:#ffffff;



    text-align:center;



    text-shadow:

        0 2px 5px rgba(
            0,
            0,
            0,
            .55
        );



    opacity:0;



    transform:

        translate3d(
            0,
            32px,
            0
        );



    transition:

        opacity .55s ease,

        transform .55s ease;

}



/* ==================================================
   Text Show Animation

   Added by theme.js
   ================================================== */


.aeneas-hero-slide.text-show
.aeneas-hero-text h5{


    opacity:1;


    transform:

        translate3d(
            0,
            0,
            0
        );


    transition-delay:

        .05s;

}



.aeneas-hero-slide.text-show
.aeneas-hero-text h2{


    opacity:1;


    transform:

        translate3d(
            0,
            0,
            0
        );


    transition-delay:

        .22s;

}



/* ==================================================
   Arrow Button
   ================================================== */


.aeneas-hero-prev,
.aeneas-hero-next{


    position:absolute;


    top:50%;


    width:62px;


    height:62px;


    margin:0;


    padding:0;



    transform:

        translateY(-50%);



    border:

        1px solid rgba(
            255,
            255,
            255,
            .9
        );



    background:

        rgba(
            0,
            0,
            0,
            .16
        );



    color:#ffb800;



    font-family:

        Arial,
        sans-serif;



    font-size:42px;



    font-weight:700;



    line-height:56px;



    text-align:center;



    cursor:pointer;



    z-index:9999!important;



    pointer-events:auto!important;



    touch-action:manipulation;



    -webkit-tap-highlight-color:transparent;



    outline:none;



    transition:

        background .2s ease;

}



.aeneas-hero-prev:hover,
.aeneas-hero-next:hover{


    background:

        rgba(
            0,
            0,
            0,
            .38
        );

}



.aeneas-hero-prev{

    left:7%;

}



.aeneas-hero-next{

    right:7%;

}



/* ==================================================
   Tablet / Notebook
   ================================================== */


@media(max-width:1599px){


    .aeneas-hero-text h5{

        font-size:38px;

    }


    .aeneas-hero-text h2{

        font-size:26px;

    }


}



/* ==================================================
   Mobile Hero
   ================================================== */


@media(max-width:767px){


    .aeneas-hero-slider{


        height:400px;


    }



    .aeneas-hero-text{


        padding:

            0 50px;



        transform:

            translateY(
                -42px
            );

    }



    .aeneas-hero-text h5{


        font-size:30px;


        line-height:1.2;


    }



    .aeneas-hero-text h2{


        font-size:22px;


        line-height:1.35;


    }



    .aeneas-hero-prev,
    .aeneas-hero-next{


        width:46px;


        height:46px;


        font-size:32px;


        line-height:42px;


    }



    .aeneas-hero-prev{

        left:0;

    }



    .aeneas-hero-next{

        right:0;

    }


}



/* ==================================================
   Small Mobile
   ================================================== */


@media(max-width:480px){


    .aeneas-hero-text{


        padding-left:

            48px;


        padding-right:

            48px;



        transform:

            translateY(
                -38px
            );

    }



    .aeneas-hero-text h5{

        font-size:26px;

    }



    .aeneas-hero-text h2{

        font-size:19px;

    }


}



/* ==================================================
   NEWS
   ================================================== */


.news-row{

    display:flex;


    align-items:flex-start;


    width:100%;


    max-width:100%;


    border-bottom:

        1px dotted #bcbcbc;



    padding:

        14px 0;

}



.news-date{

    flex:

        0 0 145px;


    padding-right:15px;


    font-size:17px;


    font-weight:700;


    line-height:1.5;


    white-space:nowrap;

}



.news-category{


    flex:

        0 0 100px;



    padding-right:15px;

}



.news-type{


    display:inline-block;


    min-width:76px;


    padding:2px 6px;


    font-size:15px;


    line-height:1.5;


    text-align:center;


    white-space:nowrap;


    color:#fff;

}



.news-title{


    flex:

        1 1 auto;


    min-width:0;


    max-width:100%;


    padding-right:5px;


    font-size:16px;


    line-height:1.5;


    overflow-wrap:break-word;

}



.news-title a,
.news-title .f_location-N,
.news-title .news-title-text{


    font-size:16px!important;


    line-height:1.5!important;


}



@media(max-width:991px){


    .news-row{

        flex-wrap:wrap;

    }


}



@media(max-width:767px){


    .news-row{

        display:block;

    }



    .news-date{


        display:inline-block;


        width:auto;


    }



    .news-category{


        display:inline-block;


        width:auto;


    }



    .news-title{


        display:block;


        width:100%;


    }


}



/* ==================================================
   Home Sections
   ================================================== */


.featured_works,
.blog_tow_area,
.our_partners_area{


    width:100%;


    max-width:100%;


    overflow:hidden;

}



.featured_gallery,
.owl-carousel{


    width:100%;


    max-width:100%;

}