@import 'mediaqueries/iphone5-landscape.css';
@import 'mediaqueries/iphone5-portrait.css';
/* http://pxtoem.com/
for 13px
		iOS
-->			320px 	== 24.615em (portrait: iPhone 3,4,5),
			480px 	== 36.923em (landscape: iPhone 3,4),
-->			568px 	== 43.692em (landscape: iPhone 5 landscape),
-->			768px 	== 59.077em (portrait: iPad),
-->			1024px 	== 78.769em (landscape: iPad),

		Android
			240px 	== 18.462em (portrait: crappy Android), 
			320px 	== 24.615em (landscape: crappy Android),
			384px 	== 29.538em (portrait: Nexus 4),
			600px 	== 46.154em (landscape: Nexus 4),
		Kindle
			600px 	== 46.154em (portrait: Kindle),
			1024px 	== 78.769em (landscape: Kindle),
*/


/* ==========================================================================
   border menus
   ========================================================================== */

@media screen and (max-width: 568px) {
	.cbm-content > header h3 {
	    font-size: 1em;
	    margin: .5rem 0 0.5rem;
	    line-height: 1rem;
	}
	.cbm-content > header h3 a,
	.cbm-downloadlink a {
	    color: #3d7489;
	    text-decoration: underline;
	    font-size: 15px;
	    font-size: 1rem;
	}
}


/* ==========================================================================
   homepage (boxlayouts)
   ========================================================================== */
/* 46.5 em == 604px */
@media screen and (max-width: 604px) {

	.boxlayout-content,
	.boxlayout-box {
		font-size: 75%;
	}

	.boxlayout-expand .boxlayout-box {
		height: 130px;
	}

	.boxlayout-content > ul li {
		width: 40%;
	}
}


@media (max-width: 568px) {
	.boxlayout-content,
	.boxlayout-box {
		font-size: 50%;
	}

	.boxlayout-content, 
	div.boxlayout-panel-items > div > div {
		top: 10px;
		left: 5px;
		right: 5px;
		bottom: 5px;
		padding: 0 5px;
	}

	.boxlayout-box:hover h2 .kickass,
	.boxlayout-box:hover h2 .introducing,
	.boxlayout-box:hover h2 .top10 {
		background-size: 100px 105px;
	}
	.boxlayout-box:hover h2 .package {
		background-size: 110px 115px;
	}
	.cbm-icon-kickass,
	.cbm-icon-introducing,
	.cbm-icon-top10 {
		max-width: 100px;
		max-height:105px;
	}
	.cbm-icon-package{
		max-width: 100px;
		max-height:115px;
	}
	.boxlayout-box h2 {
		padding: 0px;
	}
	.no-touch section:not(.boxlayout-expand) .boxlayout-box:hover h2 {
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-ms-transform: translateY(0px);
		transform: translateY(0px);
	}
	.boxlayout-main > section .boxlayout-icon-close {
		font-size: .9em;
	}
}

/* ==========================================================================
   introducing
   ========================================================================== */
@media screen and (max-width: 800px){
	.no-js .menu-panel {
		display: none;
	}
	.no-js .introducing-container {
		padding: 0;
	}
	.cbm-downloadlink {
		display: none;
	}
}

@media screen and (max-width: 400px){
	.menu-panel,
	.introducing-content {
		font-size: 75%;
	}
}
@media screen and (max-device-height: 480px) {
	.cbm-content {
		max-height: 300px;
		overflow: auto;
	}
}

@media screen and (max-width: 24.6em) {

}
/* ==========================================================================
   kickass
   ========================================================================== */

@media screen and (max-width: 660px) {
	.kickass-container .deco {
		width: 130px;
		height: 130px;
		margin-left: -65px;
		margin-bottom: 50px;
	}

	.kickass-container [data-icon]:after {
		width: 110px;
		height: 110px;
		line-height: 110px;
		font-size: 40px;
		margin: -55px 0 0 -55px;
	}
/*	.kickass-container .sl-slide h2 {
		line-height: 22px;
		font-size: 18px;
		margin-bottom: -40px;
		letter-spacing: 8px;
	}
*/}

/*@media screen and (max-width: 77em) {
	
	.hidden-list.top {
		top: 15%;
	}
}

@media screen and (max-width: 36.625em), screen and (max-height: 41.75em) {

	.hidden-list.top {
		top: 5%;
	}
	.hidden-list.horizontal {
		font-size: 1.7em;
		width: 6.2em;
	}

	.hidden-list.horizontal a {
		display: block;
		text-align: left;
	}
*/
	/* Special Case */
/*	.effect-rotatetop .hidden-list.horizontal {
		width: 95%;
		bottom: auto;
		top: 50%;
	}

	.effect-rotatetop .hidden-list.horizontal a {
		display: inline-block;
	}

}

@media screen and (max-width: 31em), screen and (max-height: 36.2em) {
	.hidden-list.horizontal,
	.hidden-list.vertical {
		font-size: 1.2em;
		width: 6.8em;
	}

	.hidden-list.right {
		right: auto;
		left: 50%;
	}
}

@media screen and (max-height: 31.6em) {
	.hidden-list a {
		margin-bottom: 20px;
	}
}
*/

/* ==========================================================================
   top10
   ========================================================================== */

@media screen and (max-width: 767px) {

}

@media (max-width: 480px) {

}


/* ==========================================================================
   package
   ========================================================================== */
/* Media Queries */
@media screen and (max-width: 767px) {
	.package-container > header{
		text-align: center;
	}
}