/*Home Page Header Carousel Styles*/

/*Background*/

.PageBackground{ max-width:1920px; height:1080px; }

@media screen and (max-width:1600px){
    .PageBackground{
        height: 67.5vw; 
        max-width: 100%;
    }
}

@media screen and (max-width:680px){
    .PageBackground{
        height: 60vw;
    }
}

.PageHeader .Header330{ height:480px;}

@media screen and (max-width:1600px){
    .PageHeader .Header330{
        height: 30vw;
    }
}

.welcome_carousel_background_container{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.welcome_header_background{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;
    position:absolute;
    top:0px;
    left:0px;
    opacity:0;
    transition:opacity 0.8s;
}

.welcome_header_background.slideoutleft{
    /*animation-name:slideoutleft;*/
    animation-duration:0.8s;
}

.welcome_header_background.slideoutright{
    /*animation-name:slideoutright;*/
    animation-duration:0.8s;
}

.welcome_header_background.slideinleft{
    /*animation-name:slideinleft;*/
    animation-duration:0.8s;
}

.welcome_header_background.slideinright{
    /*animation-name:slideinright;*/
    animation-duration:0.8s;
}

.welcome_header_background.active{
    opacity:1;
}

.PageBackgroundContainer{
    height: 1237px;
    background: linear-gradient(180deg, rgba(32,70,120,1) 657px, rgba(33,103,164,1) 100%);
}

.welcome_carousel_background_overlay{
    background-repeat:no-repeat;
    background-size:cover;
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    background: radial-gradient(circle, rgba(32,70,120,0) 0%, rgba(32,70,120,0) 75%, rgba(32,70,120,1) 87%);
}

@media screen and (max-width:1600px){
    .welcome_carousel_background_overlay{
        display:none;
    }
}

.welcome_carousel_midground_overlay{
    background: linear-gradient(90deg, rgba(32,70,120,1) 0%, rgba(32,70,120,0) 220px, rgba(32,70,120,0) 80%, rgba(32,70,120,0) calc(100% - 200px), rgba(32,70,120,1) 100%);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

@media screen and (max-width:1600px){
    .welcome_carousel_midground_overlay{
        display:none;
    }
}

.welcome_carousel_foreground_overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(32,70,120,0) 500px, rgba(33,103,163,1) 100%);
}

@media screen and (max-width:1600px){
    .welcome_carousel_foreground_overlay{
        display:none;
    }
}

/*Foreground*/
.Carousel_Controls{
    width: 100%;
    height: 100%;
}

.Carousel_Controls_Margins{
    width: 100%;
    height: 100%;
}

.welcome_carousel_foreground_container{
    width: 100%;
    height: 100%;
    overflow:hidden;
    position:relative;
}

.welcome_header_foreground{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity:0;
    transition:opacity 0.8s;
}

.welcome_header_foreground.slideoutleft{
    /*animation-name:slideoutleft;
    animation-duration:0.8s;
    z-index:1;
    opacity:0;*/
}

@keyframes slideoutleft{
    from{left:0px; opacity:1;}
    to{left:-5%; opacity:0;}
}

.welcome_header_foreground.slideoutright{
    /*animation-name:slideoutright;
    animation-duration:0.8s;
    z-index:1;
    opacity:0;*/
}

@keyframes slideoutright{
    from{left:0px; opacity:1;}
    to{left:5%; opacity:0;}
}

.welcome_header_foreground.slideinleft{
    /*animation-name:slideinleft;
    animation-duration:0.8s;
    opacity:1;
    z-index:2;*/
}

@keyframes slideinleft{
    from{left:-5%; opacity:0;}
    to{left:0px; opacity:1;}
}

.welcome_header_foreground.slideinright{
    /*animation-name:slideinright;
    animation-duration:0.8s;
    opacity:1;
    z-index:2;*/
}

@keyframes slideinright{
    from{left:5%; opacity:0;}
    to{left:0px; opacity:1;}
}

.welcome_header_foreground.active{
    z-index:2;;
    opacity:1;
}

.welcome_header_url{
    width: 100%;
    height: 100%;
    color: white;
    display: block;
    text-decoration: none;
    position:absolute;
    top:0px;
    left:0px;
    font-size:0px;
}

.welcome_header_text{
    height: 100%;
    width:100%;
}

.welcome_header_text_margins{
    margin-left: auto;
    margin-right: auto;
    max-width:900px;
    height: 100%;
}

@media screen and (max-width:1600px){
    .welcome_header_text_margins{
        max-width: 56.16vw;
    }
}

@media screen and (max-width:680px){
    .welcome_header_text_margins{
        max-width: 100%;
        margin-left: 50px;
        margin-right: 50px;
    }
    .welcome_header_text_margins.no_icon_margins{
        margin-left: auto;
        margin-right: auto;
        max-width: 50vw;
    }
}

.welcome_header_text_table{
    height: 100%;
    width: 100%;
    display: table;
}

.welcome_header_text_table_cell{
    display: table-cell;
    vertical-align: middle;
}

.welcome_header_text_icon{
    display: inline-block;
    float: left;
    width: 170px;
    height: 170px;
    margin-left: -85px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (max-width:1380px){
    .welcome_header_text_icon{
        width: 12.3vw;
        height: 12.3vw;
        margin-left: -6.15vw;
    }
}

.noicon .welcome_header_text_icon{
    display:none;
}

.welcome_header_text_box{
    margin-left: -100px;
    display: block;
    margin-right: 50px;
    min-height: 170px;
    background: linear-gradient(to right, rgba(32, 46, 87, 0.8) 0%,rgba(32, 46, 87, 0.5) 80%,rgba(32,46,87,0) 100%);
}

@media screen and (max-width:1600px){
    .welcome_header_text_box{
        margin-right: 3.25vw;
    }
}

@media screen and (max-width:1380px){
    .welcome_header_text_box{
        margin-left: -7.25vw;
        min-height: 12.3vw;
    }
}

@media screen and (max-width:680px){
    .welcome_header_text_box{
        margin-left: 7.25vw;
        margin-right:0px;
    }
}

.welcome_header_text_box.noicon{
    margin-left: 0px;
}

.welcome_header_text_region{
    min-height: 170px;
    display: table;
}

@media screen and (max-width:1380px){
    .welcome_header_text_region{
        min-height: 12.3vw;
    }
}

.welcome_header_text_region_margins{
    display:table-cell;
    vertical-align:middle;
    padding-left:30px;
    padding-top:20px;
    padding-bottom:20px;
}

@media screen and (max-width:1380px){
    .welcome_header_text_region_margins{
        padding-top: 1.5vw; 
        padding-bottom: 1.5vw; 
        padding-left: 2.18vw;
    }
}

.noicon .welcome_header_text_region_margins{
    padding-left:20px;
}

@media screen and (max-width:1380px){
    .noicon .welcome_header_text_region_margins{
        padding-top: 1.5vw; 
        padding-bottom: 1.5vw; 
        padding-left: 1.45vw;
    }
}

.welcome_title{
    font-size: 44px;
    font-weight: bold;
    max-width: 740px;
    text-transform: uppercase;
    line-height: 0.9em;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
    color:white;
    margin-top:5px;
    margin-bottom:5px;
}

@media screen and (max-width:1380px){
    .welcome_title{
        font-size: 3.18vw;
        margin-top: 0.25vw;
        margin-bottom: 0.25vw;
    }
}

/*For Translate*/
.welcome_title > font{
    font-size:0.75em;
    line-height:0.75em;
}

.welcome_subtitle{
    text-transform: uppercase;
    line-height: 1em;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
    font-size: 25px;
    max-width: 400px;
    color:white;
}

@media screen and (max-width:1380px){
    .welcome_subtitle{
        font-size: 1.82vw;
    }
}

@media screen and (max-width:600px){
    .welcome_subtitle{
        font-size: 11px;
    }
}

@media screen and (max-width:480px){
    .welcome_subtitle{
        font-size: 2.3vw;
    }
}

.welcome_subtitle > font{
    font-size:0.8em;
    line-height:0.8em;
}

.welcome_subtitle .bold{
    font-weight:bold;
}

.welcome_subtitle .bold > font{
    font-size:0.8em;
    line-height:0.8em;
}

.iTunesLink{
    display:inline-block;
    width:120px;
    height:40px;
    background-image:url(/App_Themes/jaxready/img/carousel/iTunesLink.png);
    margin-right:15px;
    background-repeat:no-repeat;
    background-size:contain;
    font-size:0px;
    margin-top:10px;
    vertical-align:top;
}

@media screen and (max-width:1024px){
    .iTunesLink{
        width: 11.75vw;
        height: 3.9vw;
        margin-top: 1vw;
        margin-right: 1.5vw;
    }
}

@media screen and (max-width:680px){
    .iTunesLink{
        width: 80px; 
        height: 24px;
    }
}

@media screen and (max-width:400px){
    .iTunesLink{
        width: 20vw;
        height: 6vw;
    }
}

.Android .iTunesLink{ display:none; }

.GooglePlayLink{
    display:inline-block;
    width:120px;
    height:40px;
    background-image:url(/App_Themes/jaxready/img/carousel/googlePlayLink.png);
    background-repeat:no-repeat;
    background-size:contain;
    font-size:0px;
    margin-top:10px;
    vertical-align:top;
}

@media screen and (max-width:1024px){
    .GooglePlayLink{
        width: 11.75vw;
        height: 3.9vw;
        margin-top: 1vw;
    }
}

@media screen and (max-width:680px){
    .GooglePlayLink{
        width: 80px; 
        height: 24px;
    }
}

@media screen and (max-width:400px){
    .GooglePlayLink{
        width: 20vw;
        height: 6vw;
    }
}

.iOS .GooglePlayLink{ display:none; }

/*Previous / Next Buttons*/

.Carousel_Previous{
    position: absolute;
    top: 50%;
    left: 15px;
    width: 70px;
    height: 70px;
    margin-top: -35px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 70px;
    background-image: url(/App_Themes/jaxready/img/carousel/carousel_previous.png);
    background-size: 66%;
    background-position: 33% center;
    background-repeat: no-repeat;
    display: block;
    font-size: 0px;
    color: white;
    background-color: rgba(32, 66, 109, 0.8);
    z-index:3;
}

@media screen and (max-width:1600px){
    .Carousel_Previous{
        width: 4.38vw;
        height: 4.38vw;
        margin-top: -2.166vw;
        border-radius: 4.38vw;
        left: .95vw;
    }
}

@media screen and (max-width:900px){
    .Carousel_Previous{
        margin-top: 0px;
        left: 0px;
        width: 40px;
        height: 100%;
        top: 0px;
        border-radius: 0px;
        border: 0px;
        border-right: 1px solid rgba(255, 255, 255, 0.28);
    }
}

.Carousel_Next{
    position: absolute;
    top: 50%;
    right: 15px;
    width: 70px;
    height: 70px;
    margin-top: -35px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 70px;
    background-image: url(/App_Themes/jaxready/img/carousel/carousel_next.png);
    background-size: 66%;
    background-position: 66% center;
    background-repeat: no-repeat;
    display: block;
    font-size: 0px;
    color: white;
    background-color: rgba(32, 66, 109, 0.8);
    z-index:3;
}

@media screen and (max-width:1600px){
    .Carousel_Next{
        width: 4.38vw;
        height: 4.38vw;
        margin-top: -2.166vw;
        border-radius: 4.38vw;
        right: .95vw;
    }
}

@media screen and (max-width:900px){
    .Carousel_Next{
        margin-top: 0px;
        right: 0px;
        width: 40px;
        height: 100%;
        top: 0px;
        border-radius: 0px;
        border: 0px;
        border-left: 1px solid rgba(255, 255, 255, 0.28);
    }
}