/*------------------------------------*\
            Common.css
\*------------------------------------*/
/*
    * General.....................General use
    * Footer......................
    * Media Query.................RWD Setting
        * General.....................
*/

/*------------------------------------
            $General
------------------------------------*/
section[id]:before {
    content: "";
    display: block;
    /* margin-top: -59px;
    height: 59px; */
    visibility: hidden;
}

.preload {
    background: url(../../images/preloader.gif) no-repeat center center;
}
ul.rl-text-desc {
    padding-left: 20px;
}

/*--- Banner ---*/
.banner{
	background-image: url(../../images/Main-Banner.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0%;
	background-size: cover;
    height: calc(23.9375vw + 173.4px); /*633-250*/
    position: relative;
}

.banner .title-thin {
    font-size: calc(24px + 4.167vw); /*5.416vw */
    font-family: 'Roboto';
    font-weight: 300;
    line-height: 1;
    padding-top: calc(2000vw/1920);
}

.banner .title {
    font-family: 'Roboto';
    font-size: calc(26px + 4.531vw);
    line-height: 1.1;
    font-weight: 700;
}

.banner .sub-title {
    font-size: calc(10px + 1.458vw);
    font-weight: 300;
    padding-top: calc(2000vw/1920);
}

.banner .text-wrapper {
    padding-top: calc(3vw + 14px); /*100-30*/
}

/*--- rl-declareBoard ---*/
.rl-declareBoard-header-common {
    background-image: url(../../images/background.jpg);
    background-repeat: no-repeat;
}
.rl-declareBoard-header-common {
    background-attachment: fixed;
    background-size: 100% 100%;
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
}
.rl-declareBoard-header .title {
    color: #fff;
    font-family: 'Oswald', sans-serif; 
    font-weight: 400;
    
}

.divider { 
    border-bottom: 1px solid #b1b1b1; 
}

.flex-container {
    display: flex;
    align-content: center;
    align-items: center;
}

.flex-container .space {
    padding-top: 30px;
}

.flex-container .flex-left {
    flex: 7;
    padding: 15px;
    order: 1;
}

.flex-container .flex-right {
    flex: 5;
    padding: 15px;
    order: 2;
}

.flex-container.flex-aling-start-pad {
    align-items: flex-start;
}

.flex-container.flex-align-center-mobile {
    
}

.flex-container .flex-left-reverse {
    flex: 5;
    padding: 15px;
    order: 1;
}


.flex-container .flex-right-reverse {
    flex: 7;
    padding: 15px;
    order: 2;
}

.item-title {
    font-size: calc(22px + 200vw/1920);
    padding-top: 10px;
    padding-bottom: 10px;
}

.item-description {
    font-size: calc(18px);
}

/*------------------------------------
            $Media Query
------------------------------------*/

@media screen and ( max-width: 1024px ){
    .banner .logos img {
        position: relative;
        top: 0;
        padding-left: 0;
        padding-bottom: 10px;
        height: calc(50px);
    }

    .rl-declareBoard-header-common {
        background-attachment: scroll;
    }
}

@media screen and (max-width: 767px) {
    .banner{
        background-image: url(../../images/Main-Banner-767.jpg);
        height: calc(117.34vw); 
    }

    .banner .title-thin {
        font-size: calc(10.5vw);
        text-align: center;
    }
    
    .banner .title {
        text-align: center;
        font-size: calc(11.5vw);
    }

    .banner .sub-title {
        font-size: calc(3.95vw);
        text-align: center;
    }

    .flex-justify-content-center-mobile {
        justify-content: center;
    }

    .flex-container {
        flex-direction: column !important;
        align-items: left;
    }

    .flex-container.flex-aling-start-pad {
        
    }
    
    .flex-container.flex-align-center-mobile {
        align-items: center;
    }

    .flex-container .flex-left,
    .flex-container .flex-right,
    .flex-container .flex-left-reverse,
    .flex-container .flex-right-reverse {
        flex: 1;
    }

    .flex-container .flex-left-reverse {
        order: 2;
    }

    .flex-container .flex-right-reverse {
        order :1;
    }

}