html, body {
	margin: 0;padding: 0;width: 100vw;height: 100vh;font-size: ;font-family: OpenSans;
}
@font-face {
	font-family:'OpenSans';
	src: url('../fonts/OpenSans-Regular.ttf');
}
.appcontainer{width: 100%;height: 100%;background: url(../images/location.png) 0px 0px no-repeat;background-size: 100% 100%;display: flex;flex-direction: row;}
.leftcontainer{width: 63%;margin: 10px 1%;height: calc(100% - 20px);}
.rightcontainer{width: 34%;margin: 10px 0.5%;height: calc(100% - 20px);}
.headerLine{display: flex;flex-direction: row;height: 6%;width: 100%;min-height: 20px;}
.headerLine_logo{width: 43%;height: auto;display:flex;margin-left: 5%;background: url(../images/logo.png) 0px 0px no-repeat;background-size: auto 100%;background-position:center top;}
.headerLine_logo{background: none}
#get_images_siez{position: absolute;z-index: -90;}
.headerLine_time{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width: 100%;text-align:center;font-size: 25px;line-height:30px;font-weight:bold;color:#fff;text-shadow:0px 0px 10px #000;
letter-spacing: 1px;margin: auto 0;
}
.headerLine_weather{width: 100%;height: auto;position: relative;display:flex;}
.owl_container{background-color: rgba(0,0,0, 0.1);height:100%;width:100%;}
.img_item{width: 100%;height: 100px;position: absolute;top:0;left:0}
.img_item_default{background: url(../images/pictureA.jpg) 0px 0px no-repeat;background-size:100% auto;background-position:left center;height: 100%;}
.right_box{width: 100%;height: 48%;margin-top: 2%;}
.welcome_box{background: url(../images/location.png) 0px 0px no-repeat;background-size: 100% 100%}
.owl_set_here{position: relative;height: calc(90% - 10px);margin-top: 10px;width: 100%;}
.the_show_txt{position: absolute;top: 30px;width: calc(100% - 60px);background-color: rgba(255, 255, 255, 0.5);height: auto;z-index: 90;font-size: 20px;line-height: 28px;color: rgb(31, 31, 31);font-weight: bold;left: 30px;max-height: calc(100% - 60px);font-family: 'Helvetica';overflow:hidden;height: 100%}
.right_box_header{height: 120px;text-align: center;font-size: 40px;line-height: 60px;font-weight: bolder;color: #fff;background-image: linear-gradient(to right, rgba(10,90,160,0.5),rgba(100,200,250,0.5));
display: flex;
flex-direction: row;
}
.right_box_txt{width: 52%;
text-align: center;
height: auto;
margin: auto 0;
}
.welcome_container{height: calc(100% - 120px);display:flex;background-color: rgba(255,255,255,0.3)}
.location_name{margin:auto;width: 100%;height: auto;text-align: center;font-size: 50px;line-height: 50px;overflow: hidden;text-shadow: 0px 0px 10px #e5e5e5;color: #f9f9f9}
.the_image_box{background: url(../images/bakground.jpg) 0px 0px no-repeat;background-size: 100% 100%}
/* .weather_line{width: 100%;height: calc(100% - 50px);background-color: rgba(255, 255, 255, 0.1);margin-top: 50px;display: flex;flex-direction: row;} */
.weather_item{width: 20%;height: auto;margin: auto 0px;display:flex;flex-direction: column;}
.weather_item_border{width: calc(20% - 1px);border-right: 1px solid #fff;}
.weather_item_border:last-child{border:none}
.weather_icon{width: 60px;height: 60px;margin: 0 auto;}
.temp_max,.temp_min{text-align: center;color: #fff;font-size: 16px;line-height: 25px;font-weight: bold;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}
#darkMask{position: fixed;background-color: #000;overflow: hidden;width: 100vw;height: 100vh;z-index: 99;}
.weather_item_row>.weather_icon{width: 30px;height: 30px;}
.weather_item_row>*{font-size: 12px;line-height: 16px;}
.weather_icon_row{width: 30px;height: 30px;}
.temp_txt_row{font-size: 12px;line-height: 16px;}

.columnContainer>.leftcontainer{width: 98%;display:flex;
flex-direction: column;justify-content: flex-start;
}
.columnContainer>.rightcontainer{display: none}
.middleBox{min-height: 15%;margin: 1% 0px;width: 100%;position: relative;height: auto;display: none}
.middleBox::after{content: " ";width: 70%;height: 100%;position: absolute;z-index: 1;background-color: rgba(255,255,255,0.2);top: 0; left: 0;}
.middle_left{width: 70%;margin-right: 0%;display: flex;flex-direction: column;}
.middle_welcome_txt{text-align: center;font-size: 40px;line-height: 70px;font-weight: bolder;color: #fff;height: auto;text-shadow: 0px 0px 10px #000;}
.middle_location_txt{margin:auto;width: 100%;height: auto;text-align: center;font-size: 50px;line-height: 80px;overflow: hidden;text-shadow: 0px 0px 10px #e5e5e5;color: #f9f9f9;display: table;flex: auto;text-shadow: 0px 0px 10px #000;}
#mid_location_name{display: table-cell;vertical-align: middle;}
.middle_right{width: 30%;height: 100%;}
.columnContainer>.leftcontainer>.headerLine{height: auto;margin-bottom: 20px;}
.columnContainer>.leftcontainer>.middleBox{flex-direction: row;display: flex;margin-bottom: 20px;}
.columnContainer>.leftcontainer>.owl_set_here{height: auto;flex:auto}
.columnContainer>.leftcontainer>.owl_set_here>.the_show_txt{
	color: #1f1f1f;text-shadow: 0px 0px 5px #fff;
}
.rotate90{
	width: 100vh;
	height: 100vw;
	overflow: hidden;
	transform-origin: top left;
	transform: rotate(90deg);
}
.rotate0{
	width: 100%;
	height: 100%;
	overflow: hidden;
	transform-origin: top left;
	transform: rotate(90deg);
}
.translateVw{
	transform: translate(0px,-100vw);
}
.translateVh{
	transform: translate(0px,-100vh);
}
.translateWh{
	transform: translate(-100vw,-100vh);
}