@charset "utf-8";
/* CSS Document */

body>.wrapper{
	background-color: #237c95;
	background-image: url("../img/background_color.png");
	background-repeat: no-repeat;
	background-size:cover;
}
.container{
	/*width: 970px;	*/
	height: auto;
    margin: 0px auto;
    padding: 0px;
	/*background-color:#237c95;*/
}

.header{
	/*width:100%;
	position:absolute;*/
	top:0;
	left:0;
	right:0;
	z-index:100;
}
.header .logo_bar{
	/*position:absolute;
	z-index:10;*/
	width: inherit;
	height:65px;
	background-color: #e0e5e3;
}
.header .logo_bar .logo{
	display:inline-block;
}
.header .logo_bar .logo img{
	width:260px;
	height:auto;
	margin-top:-22px;
	position:absolute;
	z-index:200;
}
.header .logo_bar .langauge{
	display:inline-block;
	float:right;
	padding-top: 15px;
	padding-right: 25px;
}
.header .logo_bar .langauge a{
	color:#000;
}
.header .bar_border{
	position:relative;
	z-index:100;
	vertical-align:top;
	width:100%;
}
.banner{
	width:auto;
	max-height:579px;
	overflow:hidden;
	/*margin-top:-2%;*/
	position: relative;
}
.banner #videocover{
    position: absolute;
    display: block;
    background: url(../img/play_button.png) center -100px no-repeat;
	background-position: center center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

.container .header .banner img{
	/*height:579px;*/
	width:100%;
}

.main_content{
	/*margin: 10px 0;*/	
}
.main_content .owl-carousel .box{
	/*background-color:#259FC2;*/	
	/*width:220px;
	height:260px;*/
	margin-left: 10px;
	box-shadow: 5px 5px 5px #1b5e71;
	color:#FFF;
	cursor:pointer;
	padding-bottom:10px;
}

.main_content .owl-carousel .box .wrapper{
	position: absolute;
    /*width: 100%;*/
    /*height: 100%;*/
	/*line-height:260px;*/
	display:inline-block;
    top: 0;
    left: 10px;
	right:0;
	bottom:0;
    color: #ffffff;
    overflow: hidden;
}

.main_content .owl-carousel .box .wrapper img{
	position:relative;
	/*top:30%;*/
	margin:auto;
	margin-top: 45%;
	visibility:hidden;
	width:40px;
}

.main_content .owl-carousel .box .wrapper:hover{
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
}

.main_content .owl-carousel .box .wrapper:hover img{
	visibility:visible;
}

.main_content .owl-carousel .box.yellow .wrapper:hover{
	background-color:rgba(243, 163, 9, 0.3);
}
.main_content .owl-carousel .box.green .wrapper:hover{
	background-color:rgba(19, 199, 147, 0.3);
}
.main_content .owl-carousel .box.light_green .wrapper:hover{
	background-color:rgba(131, 209, 8, 0.3);
}
.main_content .owl-carousel .box.blue .wrapper:hover{
	background-color:rgba(83, 201, 246, 0.3);
}
.main_content .owl-carousel .box.purple .wrapper:hover{
	background-color:rgba(181, 109, 242, 0.3);
}


.main_content .owl-carousel .box .bar{
	height:10px;
}

.main_content .owl-carousel .box.yellow{
	background-color: #f3a309;
}
.main_content .owl-carousel .box.yellow .bar{
	background-color: #fcc356;
}
.main_content .owl-carousel .box.green{
	background-color: #13c793;
}
.main_content .owl-carousel .box.green .bar{
	background-color: #5fe6bf;
}
.main_content .owl-carousel .box.light_green{
	background-color: #83d108 ;
}
.main_content .owl-carousel .box.light_green .bar{
	background-color: #a6ec38 ;
}
.main_content .owl-carousel .box.blue{
	background-color: #17baf8 ;
}
.main_content .owl-carousel .box.blue .bar{
	background-color: #53c9f6 ;
}
.main_content .owl-carousel .box.purple{
	background-color: #a64ef0 ;
}
.main_content .owl-carousel .box.purple .bar{
	background-color: #b56df2 ;
}




.main_content .owl-carousel .box .year{
	padding: 0 10px;
	font-size:2em;
}
.main_content .owl-carousel .box .title{
	padding: 0 10px;
	font-size:1.2em;
}

.main_content .owl-carousel .box .thumbnail_box {
	/*height: 163px;*/
	overflow:hidden;
}
.main_content .owl-carousel .box .thumbnail_box img{
	width:100%;
}

.main_content .owl-carousel .owl-dots{
	display:none;
}

.main_content .welcome_msg{
	color: #FFF;
	text-align:center;
	margin-top:80px;
	
}

.main_content .welcome_msg .logo{
	width:50%;
}

.main_content .full_banner{
	width:100%;
	position:absolute;
	bottom:0;
}

.footer{
	background-color: #e0e5e3;
	min-height:80px;
}
.bottom_bar_border{
	width:100%;
	vertical-align:bottom;
}
.footer .timeline_container{
	padding:15px 80px;
}
.footer .timeline_container .timeline{
	background-image:url(../img/timeline/line_2.png);
	max-height: 80px;
}
.footer .timeline_container .timeline .nav_dot{
	cursor:pointer;
	display:inline-block;
	overflow:hidden;
}
.footer .timeline_container .timeline .timeline_control{
	
}

/* overwirte owl carousel*/
.owl-theme .owl-controls .owl-nav div {
  position: absolute;
}
.owl-theme .owl-controls .owl-nav .owl-prev{
  left: -45px;
  top: 20px; 
}
 
.owl-theme .owl-controls .owl-nav .owl-next{
  right: -45px;
  top: 20px;
}
.owl-theme .owl-nav [class*=owl-] {
	background-color:transparent;
}
.owl-theme .owl-nav [class*=owl-]:hover {
	background-color:transparent;
}



/*  bootstrap modal */
.modal-dialog{
	margin-top:30px;
}
.modal-header, .modal-footer{
	border:0px;	
	width:100%;
	text-align:center;
	padding:0;
}

.modal-header .close{
	opacity:1;
	margin-top:-8px;
	margin-right:-8px;
}

.modal-header .close img{
	width:30px;
}

.modal-body{
	height:620px;
}

.modal-body .image{
	width:100%;
}

.modal-body .description{
	font-size:18px;
	padding-top:10px;
}

.modal-body .photo_slider{
	width:100%;
	overflow:hidden;
}

.modal-body .photo_slider .slide_main{
	min-height:400px;
	width:100%;
	/*height:400px;*/
	margin: auto;
}

.modal-body .photo_slider .slider_img{
	/*width:100%;*/
	/*opacity: 0; filter:alpha(opacity=0);*/
}

.modal-footer .btn_panel{
	display:inline-block;
	background-color:#f3a309;
	width:100%;
	border:1px solid #f3a309;
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
	cursor:pointer;
	
}
.modal-footer .btn_panel div{
	display:inline-block;
	color:#999;
	margin:0;
	width:32%;
	padding:10px;
}
.modal-footer .btn_panel div.active{
	color:#FFF;
}
.modal-footer .btn_panel div.btn_index{
	border-left:1px solid #bbbbbb;
	/*border-right:1px solid #bbbbbb;*/
}
.modal-footer .btn_panel div.btn_next{
	border-left:1px solid #bbbbbb;
}
/*  bootstrap modal */
.indexModal_yellow .btn_panel, #indexModal_yellow .btn_panel{
	background-color:#f3a309;
	border:1px solid #f3a309;
}
.indexModal_green .btn_panel,#indexModal_green .btn_panel{
	background-color:#13c793;
	border:1px solid #13c793;
}

.indexModal_light_green .btn_panel,#indexModal_light_green .btn_panel{
	background-color:#83d108 ;
	border:1px solid #83d108 ;
}
.indexModal_blue .btn_panel,#indexModal_blue .btn_panel{
	background-color:#17baf8 ;
	border:1px solid #17baf8 ;
}
.indexModal_purple .btn_panel,#indexModal_purple .btn_panel{
	background-color:#a64ef0 ;
	border:1px solid #a64ef0 ;
}


.indexModal .modal-body .story_box{
	display:inline-block;
	width:49%;
	/*height:120px;*/
	padding:10px;
	text-align:center;
}

.indexModal .modal-body .story_box .tumbnail_box{
	width:80%;
	height:135px;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden
}

.indexModal .modal-body .story_box .tumbnail_box img{
	/*max-width:80%;
	max-height:100%;*/
}

.indexModal .modal-body .paging{
	width:100%;
	/*margin:10px auto;*/
	text-align:center;
}

.indexModal .modal-body .paging span{
	display:inline-block;
	border: 1px solid #000;
    background: rgba(0, 0, 0, 0);
	border-radius: 50%;
	width: 8px;
    height: 8px;
	margin: 5px;
}

.indexModal .modal-body .paging .active span{
	background:rgba(0, 0, 0, 1);
}
.modal-title{
	text-align:left;
	padding-top:15px;
	padding-left:15px;
	padding-right:15px;
}
.modal-title .year{
	font-size:30px;
	font-weight:bolder;
}
.modal-title .title{
	font-size: 24px;
	margin-bottom: 0px;
}
.cycle-slideshow { width: 100%; height:350px; overflow:hidden; }
.cycle-slideshow img { opacity: 0; filter:alpha(opacity=0); }


/* bootstrap tabs*/
.tab-content{
	height:530px;
}
.nav-tabs{
	border:none;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .nav-tabs>li>a:hover, .nav-tabs>li>a:hover {
	border:none;
	background:none;
}
.nav{
    list-style:none;
    white-space: nowrap;
	text-align:center;
}
.nav > li{
    display: inline-block;
	float:none;
}
.nav > li > a {
	padding-top:0px;
	padding-bottom:0px;	
}

video#bgvid { 
    width:100%;
}

@media only screen and (max-device-width: 480px) {
	.btn_panel{
		font-size:36px;
	}
	.langauge{
		font-size:24px;
	}
	.cycle-slideshow { height:350px; }
	.modal-title .year{
		font-size:2.2em;
	}
	.modal-title .title{
		font-size:2.0em;
	}
	.modal-body {
		height: 880px;
	}
	.modal-body .description{
		font-size:2.5em;	
	}
	.modal-body .photo_slider .slide_main{
		min-height:600px;
	}
	
	.main_content .owl-carousel .box .year {
		font-size:2.5em;
	}
	.main_content .owl-carousel .box .title {
		font-size:2.3em;
		height:100px;
	}
	.story_box{
		font-size:28px;
	}
	.modal-header .close img{
		width:60px;
	}
	.indexModal .modal-body .story_box .tumbnail_box{
		width:60%;
		height:auto;
	}
	.indexModal .modal-body .story_box .tumbnail_box img{
		width:100%;
	}
	.tab-content{
		height:788px;
	}
	
	.footer .timeline_container .timeline .nav_dot{
		padding-top:5px;
	}
	
	.owl-carousel .owl-item img{
		width:146px;
		
	}
	.footer .timeline_container .timeline{
		max-height:151px;
		background-size:contain;
	}
	.owl-prev img{
		height:24px;
	}
	.owl-next img{
		height:24px;
	}
	.owl-theme .owl-controls .owl-nav .owl-prev{
		top:55px;
	}
	.owl-theme .owl-controls .owl-nav .owl-next{
		top:55px;
	}
}