@media(max-width: 1200px){
	.content-detail p {font-size: 24px;}
	.content-detail .button-group .btn-primary{margin:33px 20px 0}
	.button-group .btn-content{ left: 20px;}	
	.video-outer{margin: 0 95px;}
}

@media(max-width: 991px){
	.content-detail{ margin-left: 0; width: 100%;}
	.content-detail p{ font-size: 20px;}
	.content-detail .button-group{ padding-bottom: 20px;}
	.stage3 .content-header{ padding: 92px 20px 0;}
	.main-content .robot-thumb{width: 350px; margin-left: -175px;}
	.content-detail .btn-content{width: 93px; top: 17px;}
}
@media(min-width: 768px){

	/* element hide for animation */
	.animation .content-detail, .animation .main-content .condition-text,.animation .content-header{display: none;}
	.animation .content-header{padding-top: 250px;}
	.animation .main-content .robot-thumb{margin-top: 250px;}
	.animation .main-content .robot-thumb{width: 30px; margin-left: -15px; display: none;}



	.button-group .information-btn.hovered .btn-content{display: block;}
	.footer-listing li:hover .footer-tooltip{ display: block;}
	.content-detail .nav-slider.open{right: 0;}
}
@media(max-width: 767px){
	.content-header h2{ text-align: center !important;}
	
	.hamburger{ right: 20px; position: absolute;}
	.content-detail .nav-slider ul{margin: 0;}
	.content-detail .nav-slider ul li{margin-bottom: 10px;}
	.content-detail .nav-slider ul li a{background: #659196; display: block; color: #fff; line-height: 60px;  font-size: 20px;}
	.content-detail .nav-slider ul li a:hover{background: #00444e; color: #fff;}



	.stage3 .content-header{padding: 20px 0 100px!important;}
	.content-detail{border-left: 0; border-right: 0;  border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; margin: 0 -15px; width: auto;}
	.content-detail .nav-slider{border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; width: 100%; right: auto; left: 100%;}
	.content-detail .nav-slider.open{left: 0;}
	.main-content h2{margin: 0; padding: 0;}
	.main-content .robot-thumb{top: 150px; width: 290px!important; margin-left: -145px!important; margin-top: 0;}
	.content-detail .nav img{padding: 0;}
	.hamburger{right: 25px; top: 10px;}
	.logo img{width: 175px; height: auto;}
	.content-detail h3{font-size: 26px; line-height: 30px;}
	.button-group .information-btn{display: block;}
	.content-detail .button-group .btn-primary{margin: 0;}
	.content-detail .btn-primary{width: 100%; height: 60px; line-height: 60px;  font-size: 20px;}
	.content-detail .button-group .btn-primary span{display: inline-block;}
	.content-detail .button-group{padding: 20px 0 10px;}
	.content-detail .information-btn{padding-bottom: 5px;}	
	.button-group .information-btn.open .btn-primary{background: #00444e;}
	.button-group .btn-content{position: static; width: auto; margin: 0; padding: 10px;} 
	.button-group .information-btn.open .btn-content{display: block;}
	.content-detail .media-listing{padding-left: 10px;}
	.content-detail .os-version{padding-right: 10px;}

	.video-outer{margin: 0 10px; padding-bottom: 55%;}
	.content-detail .button-group .btn-content p{font-size: 16px; line-height: 18px;}

	.trial-block-xs{padding: 0 0 20px;}
	.trial-block-xs .btn-primary{margin: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; background: #0082aa;}
	.trial-block-xs .btn-primary.btn-security-mob{font-size: 12px;}
	.content-header h2, .robot-thumb, .content-header, .content-detail h1, .content-detail h3, .logo img{
		transition: all 0.3s;
		-o-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-webkit-transition: all 0.3s;
	}
	.content-scroll .content-header h2{font-size: 45px;}
	.content-scroll .main-content .robot-thumb{width: 200px!important; margin-left: -100px!important; top: 120px;}
	.content-scroll.stage3 .content-header{padding: 20px 0 70px!important;}
	.content-scroll .content-detail h4{display: none;}
	.content-scroll .content-detail h1{float: left; padding: 10px;}
	.content-scroll .content-detail h3{position: absolute; left: 120px; padding: 20px 0 0; text-align: left; right: 70px; font-size: 18px; line-height: 22px;}  
	.content-scroll .logo img{width: 80px;}

	/*Modal */
	.modal-dialog{margin-top: 40px; max-width: 100%;}
	.login-modal .modal-title{font-size: 14px;}
	.login-modal .modal-title span{font-size: 17px;}
	.login-modal .modal-body{padding: 10px;}

	.success-modal .modal-body{padding-left: 170px; position: relative; z-index: 1;}
	.success-modal p{font-size: 13px;}
	.success-modal .btn-default{width: auto;padding: 0 20px;}
	.success-modal .modal-content{height: 230px}
	.success-modal .modal-content:after{-webkit-background-size: 100px;background-size: 100px;}
}
@media(max-width: 560px){
	.content-scroll .content-detail h3{font-size: 14px; line-height: 18px; padding: 15px 0 0;}
	.success-modal .modal-content{height: 230px;}
	.success-modal .modal-body{padding-left: 100px;padding-bottom: 8px;}
	.success-modal h4{font-size: 30px; padding-bottom: 0}
	.success-modal p{min-height: 60px; line-height: 16px;}
	.login-modal .btn-default{font-size: 18px;}
	.success-modal .btn-default{font-size: 18px;margin-top: 0;}
	button.close img{height: 18px; width: 18px;}
	.modal-header .close{padding: 10px;}
}