@charset "utf-8";
/* CSS Document */
body{margin: 0; padding: 0; font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; }
a{text-decoration: none;}
.bgc_white{background-color: #fff}
.bgc_blue{ background-color: #00b0d0;}

.section{padding: 2% 0 3%;}

.pagination{ width: 90%; height: 30px; margin: 0 auto; margin-top: 5%; margin-bottom: 3%; display:flex;justify-content:center;align-items:center;}
.pagination_item{width: 5px; height: 5px; border-radius: 1em; border:1px solid #00b0d0; margin: 0 auto; float: left; margin: 0 5px;}
.pagination_item.on{ background-color: #00b0d0;}

.list_item{width: 100%; border-bottom: 1px  dotted #999; padding: 5% 0;}
.list_icon{width: 2.2em; height:2.2em; float: left; margin-top: -3%; margin-left: 5%; margin-right: 2%; border-radius: 5em;display:flex;justify-content:center;align-items:center; font-size: 1.2em;}
.list_icon img{width:80%;} 
.list_name{font-size: 1em; color: #666; padding-left: 5%}

.tutorial_title{width: 90%; color: #00b0d0; font-size: 1.2em; margin: 12% 0 2% 5%;}
.tutorial_high_light_title{width: 90%; color: #fff; font-size: 1.2em; margin: 10% 0 2% 0%; padding: 5%; text-align: left;}
.btn_watch_video{width: auto; background-color: #666;  color: #fff; text-align: right; float: right; padding: 0.5em 1em 0.5em 2em; height: auto; font-size: 0.6em; text-align: center; border-radius: 1.5em; color: #fff; margin-bottom: 1em 0;}
.play_icon{ background-image:url(../img/icon_paly.svg); background-repeat: no-repeat;}
.title_bar{ background-color: #00b0d0; /*padding: 5% 5% 5% 2%;*/color: #fff; overflow: auto;}
.page_title{ float: right; text-align:center;line-height:50px;width:100%; font-size:1.2em; position: relative;}
.back_icon{ display: block; width:20px; height: 20px; float: left; background-image: url(../img/icon_arrow_back.svg); background-size: 30%; background-repeat:no-repeat; background-position: 15% 55%; width: 15%; height: 50px; background-color: #00b0d0; float: left; position: absolute; left: 0;}

.arrow_icon{background: url(../img/icon_arrow_right.svg) right center no-repeat; background-size: 10% 50%;}
.hl_feature{width: 100%; height:100%;vertical-align: middle; background-size: cover; background-repeat: no-repeat; border-radius: 0.5em; text-align: center}
.hl_feature.f0{background-image: url(../img/firmwareupdate.jpg); background-position: center;}
.hl_feature.f1{background-image: url(../img/automation.jpg); background-position: center;}
.hl_feature.f2{background-image: url(../img/cloud_recording.jpg); background-position: center;}
.hl_feature.f3{background-image: url(../img/rich_notifications.jpg); background-position: center;}

.feature_title{width: 90%; color: #00b0d0; font-size: 1.5em; margin: 5% 5% 2% 5%;}
.feature_content{width: 90%; color: #666; font-size: 1.2em; line-height: 1.5em; margin: 0% 5% 5% 5%;}
.video_section{margin: 1em 0 ; overflow: auto;}
.video_size{ width:100%; height:330px; display:flex;justify-content:center;align-items:center;margin: 0 auto;}

/* iPhone 6,7,8 in landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
.title_bar{ background-color: #00b0d0;padding: 2% 5% 2% 2%;color: #fff; overflow: auto;}
.page_title{ position: absolute;font-size: 1.2em; left: 45%; overflow: auto;}
.video_section{margin: 1em 0 ; overflow: auto;}
.video_size{ width:600px; height:480px; display:flex;justify-content:center;align-items:center;margin: 0 auto; overflow-x: hidden}
}

/* iPad in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
.swiper-container{width:90%; max-height: 400px !important;  position:relative; overflow:hidden; z-index:1; margin: 0 auto; z-index: 9998;}
.swiper-wrapper{height:400px !important;position:relative;	z-index:1;	display:flex;}
.hl_feature{width: 100%; height:344px;vertical-align: middle; background-size: cover; background-repeat: no-repeat; border-radius: 0.5em; text-align: center}

  
  
.tutorial_title{width: 90%; color: #00b0d0; font-size: 2em; margin: 5% 0 2% 5%;}
.tutorial_high_light_title{width: 90%; color: #fff; font-size: 1.2em; margin: 10% 0 2% 0%; padding: 5%; text-align: left;}
.list_item{width: 100%; border-bottom: 1px  dotted #999; padding: 3% 0;}
.list_icon{width: 2.5em; height:2.5em; float: left; margin-top: -1%; margin-left: 5%; margin-right: 2%; border-radius: 5em;display:flex;justify-content:center;align-items:center; font-size: 1.2em;}
.list_name{font-size: 1.2em; color: #666; padding-left: 5%}
.feature_title{width: 90%; color: #00b0d0; font-size: 1.5em; margin: 2% 5% 2% 5%;}
.feature_content{width: 90%; color: #666; ;font-size: 1em; line-height: 1.5em; margin: 0% 5% 1% 5%;}

.title_bar{ background-color: #00b0d0;padding:0.5% 0;color: #fff; overflow: auto;}
.page_title{ font-size: 1.4em; overflow: auto;}
.video_size{ width:600px; height:480px; margin-top: 5%; padding: 5% ;display:flex;justify-content:center;align-items:center;margin: 0 auto; overflow-x: hidden}
.back_icon{ display: block; width:20px; height: 20px; float: left; background-image: url(../img/icon_arrow_back.svg); background-size: 20%; background-repeat:no-repeat; background-position: 15% 55%; width: 15%; height: 50px; background-color: #00b0d0; float: left; position: absolute; left: 0;}

}