@charset "UTF-8";

/* Responsive */

/*--- Mobile Portrait ---*/
@media only screen and (max-width: 495px){
	body{
  		-webkit-text-size-adjust: none;
  	}
	#header .container{
		padding: 20px;
	}
	#header .links,
	#header .logoc{
		width: 100%;
		float: none;
		clear:both;
		padding: 0;
		margin: 0;
	}
	#header .logoc{
		margin: 20px auto;
	}
	#header .logoc a.logo{
		width: 150px;
		height: 261px;
	}
	#header .menucontainer{
		background: none;
	}
	#header .menucontainer ul#menu-header-menu li{
		float: none;
		clear: both;
		margin: 0 auto 10px auto;
		text-align: center;
	}
	#header .menucontainer ul#menu-header-menu li:last-child{
		margin-bottom: 0;
	}
	#header .menucontainer #menu-header-menu ul.sub-menu{
		width: 100%;
	}
	#header .menucontainer #menu-header-menu ul.sub-menu li{
		width: 100%;
		padding: 0 0 10px 0;
		margin: 0;
		text-align: center;
	}
	#archivecontent{
		padding: 20px;
	}
	#sidebar{
		width: 100%;
		float: none;
		clear: both;
		margin: 0 0 20px 0;
		text-align: center;
	}
	#archivecontent .container .rightcolumn{
		width: 100%;
		float: none;
		clear: both;
	}
	#archivecontent .container h1.pagetitle{
		padding: 0 0 20px 0;
	}
	#archivecontent .container .rightcolumn .hentry{
		width: 100%;
		float: none;
		clear: both;
		padding: 0;
	}
	#lessoncontent .videodetailbox,
	#lessoncontent .postdescription{
		padding: 20px;
	}
	#archivecontent .container h1.whatwerecommend{
		height: 35px;
		margin: 0 0 20px 0;
	}
	#footer .container{
		padding: 20px;
	}
	#footer .links,#footer .logoc{
		width: 100%;
		float: none;
		clear: both;
		padding: 0;
		margin: 0;
	}
	#footer .logoc{
		margin: 20px auto;
	}
	#footer .logoc a.logo{
		width: 150px;
		height: 261px;
	}
}

/* Landscape Mode */
@media only screen and (max-width: 999px){
	body{
  		-webkit-text-size-adjust: none;
  	}
	#howtousethiscourse .fl-row-content-wrap{
		background-image: none;
	}
	#archivecontent .container h1.whatwerecommend{
		width: 100%;
		background-size: contain;
	}
}

/* iPad in Portrait orientation */
@media screen and (min-width: 768px) and (orientation: portrait) {
	body{
  		-webkit-text-size-adjust: none;
  	}
}

/* iPad in Landscape orientation */
@media only screen and (device-width: 768px) and (orientation: landscape) {
	body{
  		-webkit-text-size-adjust: none;
  	}
	#howtousethiscourse .fl-row-content-wrap{
		background-position: left 835px, right 95%;
		background-size: 20%;
	}
}