@charset "utf-8";

/* topnav bar -----------------*/
.topnav {width: 100%; overflow: hidden; background-color: RGBA(255,255,255,0.8); z-index: 9999; top: 0;position: fixed;}
.topnav a { margin-top: 20px; float: right; display: block; color: #666; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;}
.topnav a:hover { color: #666;}
.topnav .icon { display: none;}
.nav_bar{height: 50px; background-color:rgba(255,255,255,0.8); text-align: center; width: 100%; margin: 0; padding: 10px; z-index: 9999; overflow: auto;  background:transparent;  background-color:transparent;  border-color:transparent;  margin-bottom:0px;}
.logo{ margin: 0 auto;  width: 40%; height: auto; margin:20px 30px 10px 30px; float: left}
.logo_ifttt{ margin: 0 auto;  width: 40%; height:6.5%; margin:20px 30px 10px 30px; float: left}
.logo_ga{ margin: 0 auto;  width: 40%; height:6.5%; margin:20px 30px 10px 30px; float: left}
.nav_section{display: block; height: 80px; overflow: auto;}

@media screen and (max-width: 414px) {
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon { display: block; position: absolute; top: 0px; right: 0;}
	.topnav a { margin-top: 0; float: left; display: block; color: #666; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;}
	.topnav a:hover { color: #666;}
	.topnav .icon { display: none;}
	.topnav.responsive {position:}
    .topnav.responsive .icon { position: absolute; right: 0; top: 0;}
    .topnav.responsive a { float: none; display: block; text-align: left; color: #000; font-size: 1.2em;}
	.nav_bar{height: auto; background-color:rgba(255,255,255,0.5); text-align: center; width:100%; margin: 0 auto; padding: 10px 0}
	.logo{margin: 0 auto; margin-top: 10px; width: 75%; height: auto; overflow: auto;  margin-bottom: 5px;  float: none;}
	.logo_ifttt{margin: 0 auto; margin-top: 10px; width: 75%; height: 6%; overflow: auto;  margin-bottom: 5px; float: none; margin-left: 20%;}
	.logo_ga{margin: 0 auto; margin-top: 10px; width: 75%; height: 6%; overflow: auto;  margin-bottom: 5px; float: none; margin-left: 13%;}

	.nav_section{display: block; height: 52px; overflow: auto;}


}


/* Webpage Unit container ----------------------*/
.container{height: auto; width: 1040px; margin: 0 auto; overflow: hidden;}




.more-description_banner-for_ga{display: block; height: 500px; background-image:url(../images/ga_hero_03.png); background-size: cover; margin-top: -50px; background-color: #efefef;}


.scenery{float: right; width: 520px; height: 520px; overflow: hidden;}
.scenery_2{float: left; width: 520px; height: 520px; overflow: hidden;}

.description{ float: left; width: 520px; height: 520px; padding: 40px 50px 60px 50px; background-color: #00b0d0;}
.description_2{ float: right; width: 520px; height: 520px; padding: 70px 50px 0 50px; background-color: #fff;}
.ifttt_description{float: left;width: 50%;height: 520px;padding: 50px 50px 60px 50px; background-color: #00b0d0; overflow:hidden; }
.ifttt_description_2{ float: right; width: 50%; height: 520px; padding: 90px 50px 0 50px; background-color: #fff; }
.ga_description{float: left;width: 50%;height: 520px;padding: 70px 50px 10px 50px; background-color: #00b0d0; overflow: auto;}

.ifttt_recipe{overflow: hidden; padding: 2%; background-color: #00b0d0;}
.ifttt_recipe_item{ width:50%; height: 230px; float: left;}
.ifttt_recipe_item_icon{margin: 0 auto; border:none; border-radius: 5em; width:120px; height: 120px; display: block; margin-top: 30px; margin-bottom: 15px;}
.ifttt_recipe_item_icon img{width: 100%; height: 100%;}
.ifttt_recipe_item_name{text-align: center;}

.get_start{padding-bottom: 5%;}
.get_start_content{ width:auto; padding: 50px 10% 0; height: auto; display: block; overflow: auto;}
.get_start_content .iphone{  float:left; display: block; width:300px; height: 400px; margin: 20px 50px;}
.get_start_content .download_area{width: 400px; height: 250px; padding-top: 2%;  float: left; display:block; margin: 0 15px; }
.get_start_content .download_btn{background-color: #00b0d0; margin: 0 auto; border:1px solid #00b0d0; text-align: center;color: #fff; margin: 50px 15px 0; border-radius: 0.2em; padding: 10px 0; cursor: pointer;}


.ifttt_get_start{overflow:hidden;margin-top: 30px;}
.ifttt_step_by_step{ display: block; width: 25%; height: 531px; float: left; margin: 4%}
.ifttt_step_by_step_img{ margin: 0 0 10px 0;}




.video_clip{width:100%; height: 550px; }
.product_title{height: 160px; background-image: url(../images/blue_bar.png); width: 100%; margin: 0 auto; background-color: #fff; padding-top: 5px;}

.title-product{ margin-top:15px; font-size: 2em; line-height: 1em; }
.product_title_no_dec{ margin-top: 3%}
.deck-product{margin-top:10px; font-size: 1em; line-height: 0.8em;}

.product_list{width: 100%; height:auto; padding: 5px 0px 0 0px; background-color: #fff; margin: 0 auto; overflow: hidden;}
.product_list_items{width: 20%; height: 420px; margin: 0 auto; float: left; display: block;margin: 0 1.6em; text-align: center;}
.product_item{ width: 100%; height: 70%;}
.product_list_items_2item{width: 50%; height: 420px; margin: 0 auto; float: left; display: block;margin: 0 0%; text-align: center;}
.product_list_items_3item{width: 33%; height: 420px; margin: 0 auto; float: left; display: block;margin: 0 0%; text-align: center;}
.product_item{ width: 100%; height: 60%;}
.footer{display: block; width: 100%; height: 50px; text-align: center; color: #666; padding-top: 30px; font-size: 0.8em; margin: 10px 0; background-color: #fff;}



@media(max-width:414px) {

.description{ float: left; width: 100%; height: auto; padding: 0% 10% 10%; background-color: #00b0d0;}
.description_2{ float: right; width:  100%; height: auto; padding: 0% 10% 10%; background-color: #fff;}
.ifttt_description{float: left;width: 100%; height: 420px;padding: 10px 50px 10px 50px; background-color: #00b0d0; overflow: auto;}
.ifttt_description_2{ float: left; width: 100%; height: 420px;padding: 10px 50px 10px 50px; background-color: #fff;}
.ga_description{float: left;width: 100%;height: 520px;padding: 10px 50px 10px 50px; background-color: #00b0d0; overflow: auto;}


	
.ifttt_recipe{overflow: hidden; padding: 5%; background-color: #00b0d0;}
.ifttt_recipe_item{ width: 100%;float: left;}
.ifttt_recipe_item_icon{margin: 0 auto; border:none; border-radius: 5em; width:120px; height: 120px; display: block; margin-top: 30px; margin-bottom: 15px;}
.ifttt_recipe_item_icon img{width: 130%; height: 130%;}
.ifttt_recipe_item_name{text-align: center;}
	
.scenery{float: left; width: auto; height: auto; overflow: hidden;}
.scenery_2{float: left; width: auto; height: auto; overflow: hidden;}
	
.get_start{padding: 0 0 5% 0;}
.get_start_content{ width:auto; padding: 30px 0; height: auto; display: block; overflow:hidden;}
.get_start_content .iphone{  float:left; display: block; width:75%; height: auto; margin: 0 atuo;}
.get_start_content .download_area{width:85%;  height: 300px; padding-top: 0; float: left; display:block; margin: 0 30px; text-align:left;}
.get_start_content .download_btn{background-color: #00b0d0; margin: 0 auto; border:1px solid #00b0d0; text-align: center;color: #fff; margin: 20px 15px 0; border-radius: 0.2em; padding: 10px 0; cursor: pointer;}

	
.ifttt_get_start{padding-bottom: 5%; overflow:hidden; height: auto; width: 90%; margin: 0 auto; padding-top: 10%;}
.ifttt_step_by_step{display: block; width: 100%; height: auto; float: left; margin: 5% 0; text-align: center;}
.ifttt_step_by_step_img{ margin: 0 0 10px 0; width: 80%; margin: 0 auto;}
	
.video_clip{width:100%; height: 210px; margin:5% 0 0 0;}
.product_title{height: 145px; background-image: url(../images/blue_bar_mobile.png); background-position-x:-35px;  width: auto; margin: 0 auto; background-color: #fff; padding-top: 3px;z-index: 9997;}
.title-product{ margin-top:15px; font-size: 1.1em; line-height: 0.8em; }
.product_title_no_dec{ margin-top: 6%}
.deck-product{margin-top:10px; font-size: 0.6em; line-height: 0.8em;}
.product_list{width: 100%; padding: 10px 0px 0 0px; background-color: #fff; margin: 0 auto; z-index: 9998; margin-top: -40px; overflow: hidden; font-size: 1.5em;}
.product_list_items{width: 100%; margin: 0 auto; text-align: center; padding:0 0 0 0; display: block;}
.product_list_items_2item{width: 100%; margin: 0 auto; text-align: center; padding: 20px 0; display: block;}
.product_list_items_3item{width: 100%; margin: 0 auto; text-align: center; padding: 20px 0; display: block;}

	
}



@media (width: 1024px) {
	.container{width:1040px; margin: 0 auto; overflow: hidden;}
	.scenery{float: right; width: 50%; height: 520px; overflow: hidden;}
	.scenery_2{float: left; width: 50%; height: 520px; overflow: hidden;}
	.description{ float: left; width: 50%; height: 520px;  padding: 5% 5% 8.1%; background-color: #00b0d0;}
	.description_2{ float: right; width:  500px; height:  520px; padding: 5%; background-color: #fff;}
}


@media (width: 768px) {
	.container{width:1040px; margin: 0 auto; overflow: hidden;}
	.scenery{float: right; width: 520px; height: 520px; overflow: hidden;}
	.scenery_2{float: left; width: 520px; height: 520px; overflow: hidden;}
	.description{ float: left; width: 520px; height: 520px;  padding: 5% 5% 8.1%; background-color: #00b0d0;}
	.description_2{ float: right; width:  520px; height:  520px; padding: 5%; background-color: #fff;}

}
	

@media  (max-width: 414px) {
	.container{width: auto; margin: 0 auto; overflow: hidden;}
}