/* ==========================================================================
   1400x...
========================================================================== */
@media only screen and (max-width : 1460px) {
	/*.page-icon{height: 160px; margin-top: -100px;}
	.page-icon .icon{width: 160px; height: 160px;}

	.page-icon .icon span{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 160px; z-index: 5;}

	.page-icon .icon:after{display: block; position: absolute; top: 5px; left: 5px; width: 150px; height: 150px; background: #fff; content: ""; border:1px solid #999;
	    -webkit-border-radius: 50%;
	    -moz-border-radius: 50%;
	    border-radius: 50%;
	}

	.title-wrap{padding-top: 240px;}*/

	/* icons */
	/*
	.page-icon .icon span .references{display: inline-block; width: 60px; height: auto; margin-top: 25px; margin-left: 4px;}
	.page-icon .icon span .pop_history{display: inline-block; width: 88px; height: auto; margin-top: 19px;}
	.page-icon .icon span .private{display: inline-block; width: 112px; height: auto; margin-top: 35px;}
	.page-icon .icon span .company{display: inline-block; width: 128px; height: auto; margin-top: 50px;}
	.page-icon .icon span .contact{display: inline-block; width: 104px; height: auto; margin-top: 25px; margin-left: -12px;}
	.page-icon .icon span .about{display: inline-block; width: 84px; height: auto; margin-top: 22px; margin-left: -4px;}*/

	.dotted-box h3{font-size: 70px; line-height: 1em;}
	.company .dotted-box h3{font-size: 70px;}

	.pop_history .pic .frame img.frame-img{width: 300px;}
	.pop_history .pic .frame .image{padding:30px; padding-top: 31px;}

}

/* ==========================================================================
   1280x...
========================================================================== */
@media only screen and (max-width : 1281px) {
	.title-wrap{padding-top: 310px;}
}

/* ==========================================================================
   1280x...
========================================================================== */
@media only screen and (max-width : 1025px) {
	/*.page-icon{height: 160px; margin-top: -100px;}
	.page-icon .icon{width: 160px; height: 160px;}

	.page-icon .icon span{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 160px; z-index: 5;}

	.page-icon .icon:after{display: block; position: absolute; top: 5px; left: 5px; width: 150px; height: 150px; background: #fff; content: ""; border:1px solid #999;
	    -webkit-border-radius: 50%;
	    -moz-border-radius: 50%;
	    border-radius: 50%;
	}

	.title-wrap{padding-top: 240px;}*/

	/* icons */
	/*
	.page-icon .icon span .references{display: inline-block; width: 60px; height: auto; margin-top: 25px; margin-left: 4px;}
	.page-icon .icon span .pop_history{display: inline-block; width: 88px; height: auto; margin-top: 19px;}
	.page-icon .icon span .private{display: inline-block; width: 112px; height: auto; margin-top: 35px;}
	.page-icon .icon span .company{display: inline-block; width: 128px; height: auto; margin-top: 50px;}
	.page-icon .icon span .contact{display: inline-block; width: 104px; height: auto; margin-top: 25px; margin-left: -12px;}
	.page-icon .icon span .about{display: inline-block; width: 84px; height: auto; margin-top: 22px; margin-left: -4px;}*/

	.dotted-box h3{font-size: 70px; line-height: 1em;}
	.company .dotted-box h3{font-size: 70px;}

	.pop_history .pic .frame img.frame-img{width: 300px;}
	.pop_history .pic .frame .image{padding:30px; padding-top: 31px;}

}

/* ==========================================================================
   1280x...
========================================================================== */
@media only screen and (max-height: 769px) {
	nav#nav ul li a{padding:20px 0;}
	nav#nav ul li a span.title{font-size: 14px;}
}

/* ipad portrait */
@media only screen and (max-width: 768px) {
	.dotted-box h3, .company .dotted-box h3{font-size: 50px; padding-right: 0;}
	.pic{padding-right: 0;}
	.about .pic{padding-right: 30px;}
	.about .dotted-box h3{padding-right: 30px;}
	.dashed-box .inner{padding:35px 10px; padding-top: 45px;}

	.contact .grid-60, .contact .grid-40{display: block; float: left; width: 100%;}
	.form-wrap{padding:0; background: none;}
	.dashed-box .inner .form-title{display: none;}

	.mobile-title{display: block; float: left; width: 100%; margin-bottom: 15px;}
	.mobile-wrap{padding:20px; background: #e1cabe;}
	.mobile-wrap.first{margin-bottom: 25px;}
	.form-actions{padding-top: 16px;}

	.checkboxes{padding-left: 0;}
}

/* smartphone */
@media only screen and (max-width: 767px) {
	.panel-nav .table{display: none;}
	.page-titles h3{font-size: 36px; padding:0 20px;}
	.page-titles h3 span.big{padding:20px 20px;}

	.panel-nav{margin-right: 15px;}
	.menu-toggle{margin-top: 15px;}

	.page-icon{display: none;}

	.more-wrap{margin-top: 35px;}

	.title-wrap{padding-top: 0;}
	.page-titles{position: absolute; bottom: 35px; left: 0;}

	.panel-content .table-cell{position: relative;}

	a.detail-button{color: #000; background: #fff;}

	.page-titles{
		-webkit-transform: translate3d(0,-50px,0);
	    -moz-transform: translate3d(0,-50px,0);
	    -ms-transform: translate3d(0,-50px,0);
	    transform: translate3d(0,-50px,0);

	    -webkit-transition: all 400ms;
	    -moz-transition: all 400ms;
	    -o-transition: all 400ms;
	    transition: all 400ms;
	}

	.page-titles h3 span.small, .page-titles h2{font-size: 18px;}
	.page-titles h3 span{padding-left: 10px; padding-right: 10px;}
	.page-titles h3 span.small{line-height: 1.2em;}

	.page-titles h3 span.big{padding-bottom: 18px;}

	nav#nav{display: block; position: fixed; top: 0; right: 0; width: 220px; height: 100%; background: #fff; border:15px solid #fff; border-left: 0; border-bottom: 0;
	    -webkit-backface-visibility: hidden; 
	    -webkit-transform: translate3d(220px,0,0);
	    -moz-transform: translate3d(220px,0,0);
	    -ms-transform: translate3d(220px,0,0);
	    transform: translate3d(220px,0,0);

	    -webkit-transition: all 400ms;
	    -moz-transition: all 400ms;
	    -o-transition: all 400ms;
	    transition: all 400ms;
	}

	body.open #section-wrap{
	    -webkit-transform: translate3d(-220px,0,0);
	    -moz-transform: translate3d(-220px,0,0);
	    -ms-transform: translate3d(-220px,0,0);
	    transform: translate3d(-220px,0,0);
	}

	nav#nav ul li a{padding:22px 0;}
	nav#nav ul li a span.page{padding-bottom: 0; margin-bottom: 0; font-size: 18px;}
	nav#nav ul li a span.page:after{display: none;}
	nav#nav ul li a span.title{display: none;}

	nav#nav .fb a.fb-button span{display: none;}

	nav#nav .fb a.fb-button i{font-size: 22px; margin-right: 0;}

	nav#nav .fb a.fb-button{height: 70px; line-height: 70px;}
	nav#nav .fb .close{height: 70px; line-height: 70px;}

	#page-wrap{height: 100%; margin-top: 0; border-top: 15px solid #fff; padding-top: 45px; background: #fff;}

	.detail-content{padding-top: 0;}

	#page-wrap .header{display: none;}

	.intro{padding-top: 20px;}
	.intro .text{padding: 20px 0;}

	.intro .left{text-align: left;}

	.intro p{margin-bottom: 10px;}

	.arrow-down{display: none;}

	#close-detail{top: 0; right: 0;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		transition: none;
	}

	.grid-container{padding:0;}

	.dotted-box{padding:35px 10px;}

	.dotted-box h3, .company .dotted-box h3{font-size: 30px; text-align: center; padding:0; margin: 0; margin-bottom: 20px; line-height: 1.2em;}

	.picture-button{display: none;}

	.full-slider{padding:0;}
	.full-slider .grid-100{padding:0;}
	.owl-controls .owl-buttons, .owl-controls{display: none !important;}

	.note{margin-bottom: 35px;}

	.pic{display: block; float: left; width: 100%; text-align: center;}
	.pic img{display: inline-block; float: none;}

	.pop_history .pic{display: none;}

	.dotted-box .text{font-size: 13px;}

	.ugly-button{display: none;}

	.contact .grid-60, .contact .grid-40{padding:0 5px;}
	.mobile-wrap{padding:10px;}

	.dashed-box .inner{padding:15px 10px;}

	.checkboxes{padding-left: 0;}

	.map{height: 200px;}

	.dashed-title{padding:45px 0;}

	.form-actions{padding-bottom: 5px; padding-top: 15px;}

	.about .pic{padding-right: 0;}
	.about .dotted-box h3{padding-right: 0;}

	#close-social{top: 0; right: 0;}
	#social{padding-top: 90px;}

}