﻿/*#region Right Side Banner Slider*/
.live_cam_banner_container {float:right;width:24%;margin-left:1%;margin-top:4em;display:inline-block;vertical-align:top;padding-bottom:30.3%;position:relative;float:right;}
.live_cam_banner_slider{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;}
.banner_item {width:100%;border:3px solid #fff;position:relative;height:100%;overflow:hidden;}
.banner_item[aria-hidden=true]{visibility:hidden}
.banner_item img {max-width:100%;width:100%;}
.banner_item figcaption {position:absolute;top:0;width:100%;padding:2em;color:#fff;}
.banner_item h2 {font-size:2.3em;font-weight:bold;font-family: Alef;}
.banner_item .banner_desc_wrap {display:inline-block;}
.banner_item .banner_desc {font-family: Alef;font-size: 1.6em;}
.banner_item .small_text {text-align:left;}
.banner_item .link_box {float: left;margin-top:1em;}
.live_cam_banner_slider .flickity-page-dots {bottom:14px}
.live_cam_banner_slider .flickity-page-dots .dot {background: none;border: 1px solid #fff;height: 12px;margin: 0 4px;width: 12px;opacity:1;}
.live_cam_banner_slider .flickity-page-dots .dot.is-selected {background-color: #fff;}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .live_cam_banner_container {width:100%;padding-bottom:30%;margin-top:2%;margin-bottom:2%;}
}
@media only screen and (max-width: 767px) {
    .live_cam_banner_container {width:100%;/*padding-bottom:126.25%;*/padding-bottom:80%; margin-top:5%;margin-bottom:0;}
	.banner_item figcaption{padding:1em;}
}
@media only screen and (max-width: 460px) {
    .live_cam_banner_container {padding-bottom:100%;}

}
/*#endregion Right Side Banner Slider*/
/*#region Main Video Container*/
.camera_main_item {float:left;width:50%;margin-left:1%;display:inline-block;position:relative;vertical-align:top;margin-top:4em;padding-bottom: 30.3%;}
.camera_view_floated {position:absolute;bottom:100%;color:#fff;width:100%;left:0;right:0;padding-bottom:0.7em;display:flex; justify-content:space-between; align-items:flex-end}
.camera_view_floated h2 {color:#be7b17;font-family: Alef;font-size: 1.6em;}
.ltr .camera_view_floated h2{font-family:bitter}
.camera_view_floated h2 span{color:#fff;line-height: 1;display: inline-block;vertical-align: text-bottom;}
.icon-camera{display:inline-block;font-family:"hakotel";font-size:1.7em;margin-left:5px;vertical-align:text-bottom;line-height:1;}
.icon-camera:before { content: '\E829'; }
.camera_view {width:100%;}
.camera_view figure {overflow:hidden;border:3px solid #fff;position:absolute;top:0;bottom:0;left:0;right:0;-moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;}
.camera_view[data-rel='item1'] {display:block;}
.camera_view img {width:100%;max-width:100%;}
@media only screen and (max-width: 1024px) {
    .camera_main_item {/*width:100%;margin:0;margin-top:4em;padding-bottom:60.6%;*/display:none}
    .camera_view_floated {background:rgba(0,0,0,0.8);z-index:2;border:3px solid #fff;border-bottom:0 none;padding:0.5em 1em;}
    .camera_view_floated .icon-camera {font-size:1em;}
}
@media only screen and (max-width: 767px) {
	.camera_main_item {margin-top:6em;}
    .camera_view_floated {background:rgba(0,0,0,0.8);z-index:2;border:3px solid #fff;border-bottom:0 none;padding:0.5em 1em;}
    .camera_view_floated .icon-camera {font-size:1em;}
    .camera_view_floated .date {font-size:0.7em;}
}
/*#endregion Main Video Container*/
/*#region Left Side Camera Selection Slider*/
.live_cam_selec_container {width:24%;margin-top:4em;display:inline-block;vertical-align:top;padding-bottom:30.3%;position:relative;float:left;}
.live_cam_selec_container ul {padding:0;margin:0;list-style:none;position:absolute;top:0;bottom:0;left:0;right:0;}
.live_cam_selec_container li {width:100%;padding-bottom:39.4%;margin-bottom:4%;position:relative;}
.camera_selection_item {position: absolute;top:0;bottom:0;left:0;right:0;width:100%;background: #fff;cursor:pointer;}
.camera_selection_item:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    border: 0 none;
    -moz-box-shadow: 0 none;
    -webkit-box-shadow: 0 none;
    box-shadow: 0 none;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.camera_selection_item:after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 100%;
    z-index: 1;
    width: 0;
    height: 0;
    border:0 none;
    margin-top: -0.25em;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.camera_selection_item figure, .camera_selection_item section {height:100%;width:50%;float:right;display:inline-block;vertical-align:middle;position:relative;overflow:hidden;}
.camera_selection_item figure img{width:100%; height:auto;}
.camera_selection_item section {height:auto;padding-left:3em;padding-right:20px;}
.camera_selection_item section:before {content: "";display: inline-block;height: 100%;width: 1px;margin-left: -5px;vertical-align: middle;}
.camera_selection_item h3 {font-family: Alef;font-size: 1.5em;font-weight: bold;line-height: 1.1;}
.camera_selection_item .link_arrow {color:#5c3500;position:relative;z-index:0;}
.camera_selection_item .link_arrow:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    width: 0;
    height: 100%;
    z-index: -1;
    background:#000; 
    -moz-transition: width 0.5s ease;
    -o-transition: width 0.5s ease;
    -webkit-transition: width 0.5s ease;
    transition: width 0.5s ease;
}
.camera_selection_item.active {border-top: 0 none;}
.camera_selection_item.active:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    border: 3px solid #fff;
    -moz-box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,0.4);
    -webkit-box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,0.4);
    box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,0.4);
}
.camera_selection_item.active:after {
    border-style: solid;
    border-width: 0.3em 0 0.3em 0.5em;
    border-color: transparent transparent transparent #fff;
}
.camera_selection_item.active figure {opacity:0.4;}
.camera_selection_item.active h3 {opacity:0.6;}
.camera_selection_item.active .link_arrow {color:#fff;padding:0 0.3em;}
.camera_selection_item.active .link_arrow:before{width:100%}    
.camera_selection_item.active .link_arrow:after {content:"";margin:0;}
@media only screen and (max-width: 1024px) {
	.live_cam_selec_container {width:100%;padding-bottom:0;margin-top:0;}
	.live_cam_selec_container .camera_view_floated {display:none;}
	.live_cam_selec_container ul {position:static;}
    .live_cam_selec_container li {
        width:32.3%;
        float:right;
        margin-right:1%;
        padding-bottom:0;
        margin-bottom:0;
    }
    .camera_selection_item {position:static;}
    .live_cam_selec_container li:first-child {
        margin-right:0;
    }
	.camera_selection_item.camera_mobile a{display:block}
    .camera_selection_item figure {display:none;}
	.camera_selection_item .link_arrow{font-size:0.8em}
    .camera_selection_item section {width:100%;padding:1em;float:none;}
    .camera_selection_item.active {border-top: 4px solid transparent;}
    .camera_selection_item:after {
        top:100%;
        bottom: auto;
        left: 50%;
        margin-left:-0.25em;
        margin-top:0;
    }
    .camera_selection_item.active:after {
		display:none;
        border-width: 0.5em 0.5em 0 0.5em;
        border-color: #fff transparent transparent transparent;
    }
	.camera_selection_item section:before{display:none;}

}
@media only screen and (max-width: 768px) {
    .camera_selection_item h3 {font-size:1em;}
    .camera_selection_item section {padding: 1em 0.2em;text-align:center;}
}
@media only screen and (max-width: 380px) {
	.live_cam_selec_container li{width:100%; float:none; margin:0;margin-bottom:2%;}
}

/*#region Promo Banner*/
.bottom_line_bg {border-bottom: 4px solid #DB8E15;}
.promo_banner_container{position:relative;padding-bottom:31%}
.promo_banner_slider{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%}
.promo_slide {width:100%;overflow:hidden;}
.promo_slide img {width:100%;}
.promo_slide figcaption {position:absolute;top:0;width:100%;color:#fff;max-width: 1280px;left:0;right:0;margin:auto;padding-top: 8em;}
.promo_slide h2{font-size:4.6em;font-weight:bold;font-family:Alef;-moz-transition:all .8s ease .75s;-o-transition:all .8s ease .75s;-webkit-transition:all .8s ease .75s;transition:all .8s ease .75s;opacity:0}
.promo_slide .banner_desc_wrap{display:block;-moz-transition:all .8s ease .5s;-o-transition:all .8s ease .5s;-webkit-transition:all .8s ease .5s;transition:all .8s ease .5s;opacity:0}
.promo_slide .banner_desc {font-family: Alef;font-size: 3.2em;display:inline-block;}
.promo_slide .small_text {display:inline-block;padding-right:1em;}
.promo_slide .link_box {
    float: none;
    margin-top: 1em;
    font-size: 1.5em;
    padding-left: 1.2em;
    padding-right: 1.2em;
    -moz-transition: all 0.8s ease 0.25s;
    -webkit-transition: all 0.8s ease 0.25s;
    -o-transition: all 0.8s ease 0.25s;
    transition: all 0.8s ease 0.25s;
}
.promo_slide h2, 
.promo_slide .banner_desc_wrap,
.promo_slide .link_box {
    -moz-transform: translate3d(0, -200%, 0px);
    -ms-transform: translate3d(0, -200%, 0px);
    -o-transform: translate3d(0, -200%, 0px);
    -webkit-transform: translate3d(0, -200%, 0px);
    transform: translate3d(0, -200%, 0px);
    opacity:0;
}
.promo_banner_slider .flickity-page-dots {bottom:14px}
.promo_banner_slider .flickity-page-dots .dot {background: none;border: 1px solid #fff;height: 12px;margin: 0 4px;width: 12px;opacity:1;}
.promo_banner_slider .flickity-page-dots .dot.is-selected {background-color: #fff;}
.promo_slide.is-selected h2, 
.promo_slide.is-selected .banner_desc_wrap,
.promo_slide.is-selected .link_box {
    -moz-transform: translate3d(0, 0, 0px);
    -ms-transform: translate3d(0, 0, 0px);
    -o-transform: translate3d(0, 0, 0px);
    -webkit-transform: translate3d(0, 0, 0px);
    transform: translate3d(0, 0, 0px);
    opacity:1;
}
@media only screen and (max-width: 1024px) {
	.promo_slide figcaption {width:94%;margin:auto;padding-top: 2em;}
    .promo_slide h2 {font-size:2.6em;}
    .promo_slide .banner_desc {font-size:1.8em;}
    .promo_slide .link_box {margin-right:15%;font-size: 1em;}
}
@media only screen and (max-width: 767px) {
    .promo_banner_container {
        position: relative;
        padding-bottom: 61%;
    }
    .promo_slide figcaption {width:94%;margin:auto;padding-top: 0;}
    .promo_slide {height:100%;}
    .promo_slide img {
        width: auto;
        height: 100%;
        -moz-transform: translateX(25%);
        -ms-transform: translateX(25%);
        -o-transform: translateX(25%);
        -webkit-transform: translateX(25%);
        transform: translateX(25%);
    }
}
/*#endregion Promo Banner*/




