/*
	#SPINNINGWHEELS #CYCLINGTOM #DREHT AM RAD
	http://www.cyclingtom.de
	Released under the Creative Commons Attribution 3.0 license (nodethirtythree.com/license)
*/

/*********************************************************************************************************************/
/* IPad (Hochformat):	@media only screen and (min-device-width: 480px) and (max-device-width: 768px)               */
/*********************************************************************************************************************/

@media only screen and (min-width: 481px) and (max-width: 768px) {
		
/* beginn navigation bereich --------------------------------------------------------------------------------------- */

	.nav_wrapper {
		margin: 0 auto;
		width: 100%;
		height:60px;	/* WICHTIG!! abstand navigation zum Banner */
		}
		
	.nav {
		position: fixed;
		width: 100%;
		height:49px;
		background: url('images/grid_light.png') repeat scroll 0% 0% transparent;
		border-radius: 0px 0px 10px 10px;
		margin: 0 auto;
		padding-bottom:5px;
		}

	.nav ul {
		padding: 0px;
		height:68px;
		width: 520px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		overflow:hidden;
		padding-left: 25px;
		}

	.nav li {
		display: inline;
		}

	.nav ul li a { /* Standard */
		font-size: 16px;
		color: #686868;
		text-align: center;
		font-weight: bold;
		text-decoration: none;
		display: block;
		float: left;
		padding: 16px 20px 16px 20px;	/* orul */
		border-radius: 0px 0px 8px 8px;
		background-color:#fff;
		margin-right:20px;
		display: inline-block;
		-moz-transition: background-color .2s ease-in-out;
		-webkit-transition: background-color .2s ease-in-out;
		-o-transition: background-color .2s ease-in-out;
		-ms-transition: background-color .2s ease-in-out;
		transition: background-color .2s ease-in-out;
		}

	.nav ul li a:hover {
		color: #fff; 
		background-color:#BDCBD5;
		padding: 21px 20px 20px 20px;	/* orul */
		}

	.nav ul li .active {
		color: #ffffff;
		background-color:#E3DAA8;
		padding: 16px 20px 22px 20px;	/* orul */
		/* background-color:blue; */
		}

/* ende navigation bereich ----------------------------------------------------------------------------------------- */

/* begin titel-linie unter den navigations bereich ----------------------------------------------------------------- */

	.line_wrapper {
		margin: 0px auto;
		margin: 60px auto 52px auto;	/* orul */
		width: 95%;
		padding:0px;
		}
		
	.line {
		display: table-cell;
		width:50%;
		vertical-align: middle;
		}
		
	.thing {
		background: #E7EAE8;
		width: 100%;
		height: 5px;
		border-radius: 0px;
		display: inline-block;
		}
		
	.lineheader {
		display: table-cell;
		background: white;
		font-size:28px;
		font-weight:bold;
		white-space: nowrap;
		color:#6B7770;
		padding: 0.5em;
		text-align:center;
		text-transform:uppercase;
		} 

/* ende titel-linie unter den navigations bereich ------------------------------------------------------------------ */

/* beginn banner bereich ------------------------------------------------------------------------------------------- */

	.banner_wrapper {
		width:100%;
		padding-bottom: 25%; /* 2000px/502px */
		background-image:url(images/banner.jpg);
		background-size:cover;
		background-position:center; /* IE fix */
		max-height:502px;
		/*border-bottom:30px solid #E3DAA8; */
		}
		
		.banner_title {
		font-size:28px;
		font-weight:bold;
		text-align:center;
		background: #E3DAA8;
		width:100%;
		background-size:cover;
		background-position:center; /* IE fix */
		padding: 12px 0 12px 0;	/* orul */
		}

/* ende banner bereich --------------------------------------------------------------------------------------------- */

/* beginn klickit bereich unter dem banner bereich ----------------------------------------------------------------- */

	.klickit_wrapper {
		margin: 0 auto;
		width: 95%;
		padding:0px;
		}

	#klickit {
        width:auto;
        max-width:100%;
        margin:0 auto;
		padding-left:0%;
		overflow:hidden;
		}
		
	#klickit_line{
		padding: 40px;
		}

	#klickit article {
        width:100%;
        margin-right:3%;
        font-size:18px;
		color: #6B7770;
		overflow:hidden;
		}

	#klickit article h3 {
        font-size:22px;
		font-weight:600;
		color: #6B7770;
        margin-bottom:10px;
        margin-left:65px;
		text-transform:uppercase;
		}
		
	.switch1{
		float:left;
		width:60px;
		height:60px;
		border-radius: 5px;
		background-color: #e1e8e4;
		display: inline-block;
		background: #e1e8e4 url(images/klickit1.png) no-repeat;
		-moz-transition: background-color .2s ease-in-out;
		-webkit-transition: background-color .2s ease-in-out;
		-o-transition: background-color .2s ease-in-out;
		-ms-transition: background-color .2s ease-in-out;
		transition: background-color .2s ease-in-out;
		}
		
	.switch2{
		float:left;
		width:60px;
		height:60px;
		border-radius: 5px;
		background-color: #e1e8e4;
		background: #e1e8e4 url(images/klickit2.png) no-repeat;
		-ms-transition: background-color .2s ease-in-out;
		display: inline-block;
		-moz-transition: background-color .2s ease-in-out;
		-webkit-transition: background-color .2s ease-in-out;
		-o-transition: background-color .2s ease-in-out;
		transition: background-color .2s ease-in-out;
		}
		
	.switch3{
		float:left;
		width:60px;
		height:60px;
		border-radius: 5px;
		background-color: #e1e8e4;
		background: #e1e8e4 url(images/klickit3.png) no-repeat;
		display: inline-block;
		-moz-transition: background-color .2s ease-in-out;
		-webkit-transition: background-color .2s ease-in-out;
		-o-transition: background-color .2s ease-in-out;
		-ms-transition: background-color .2s ease-in-out;
		transition: background-color .2s ease-in-out;
		}
		
	.switch1:hover, .switch2:hover, .switch3:hover {
		background-color:#ccd5d0;
		margin-top:2px;
		}

	#klickit article p {
        line-height:25px;
        margin-left:65px;
		}
		
/* ende klickit bereich unter dem banner bereich ------------------------------------------------------------------- */

/* beginn storytelling bereich unter dem banner bereich ------------------------------------------------------------ */

	#storytelling_wrapper {
		margin: 0 auto;
		width: 95%;
		padding: 0px;
		}
		
	#storytelling {
        width: auto;
        max-width: 100%;
        margin: 0 auto;
		padding-left: 0%;
		overflow: hidden;
		}
		
	#storytelling_pic{
		padding: 0;
		margin: 0;
		height: 10px;
		}
		
	#storytelling_text {
		float: left;
		margin-left: 0px;
		margin-top: 15px;
		padding: 0px;
		}
		
	#storytelling_line{
		padding: 30px;
		}

	#storytelling article {
        width: 100%;
        font-size:18px;
		color: #6B7770;
		overflow: hidden;
		}

	#storytelling article h3 {
        font-size: 20px;
		font-weight: 600;
		color: #6B7770;
        margin-bottom: 10px;
        margin-left: 0px;
		text-transform:uppercase;
		}

	#storytelling article img {
		max-width: 100%;
		height: auto;
		width: auto; /* ie 8 */
		border-radius: 5px;
		}

	#storytelling article p {
        line-height: 25px;
        margin-left: 0px;
		}
		
/* ende storytelling bereich unter dem banner bereich -------------------------------------------------------------- */

/* beginn timetotime bereich unter dem banner bereich -------------------------------------------------------------- */

	.timetotime_wrapper {
		margin: 0 auto;
		width: 95%;
		padding:0px;
		}

	#timetotime {
        width: auto;
        max-width:100%;
        margin: 0 auto;
		overflow: auto;
		}
		
	#timetotime_line{
		padding: 20px;
		}
		
	#timetotime_pic{
		padding: 0;
		margin: 0;
		height: 10px;
		}

	#timetotime article {
        width:100%;
        font-size:18px;
		color: #6B7770;
		overflow:hidden;
		}
	
	#timetotime article h1 {
        font-size:16px;
		color: #6B7770;
		margin-top:10px;
        margin-bottom:30px;
		}
		
	#timetotime article h2 {
        font-size:20px;
		font-weight:600;
		color: #D0D4D2;
		margin-top:10px;
        margin-bottom:10px;
		}
		
	#timetotime article h3 {
        font-size:28px;
		font-weight:600;
		color: #6B7770;
        margin-bottom:10px;
		text-transform:uppercase;
		}

	#timetotime article img {
		max-width:100%;
		height:auto;
		width: auto; /* ie 8 */
		border-radius: 5px;
		}

	#timetotime article p {
        line-height:25px;
		margin-top:26px;
		}
	
	#timetotime article hr {
		border: none;
		background-color: #C1CAC5;
		margin: 46px 0 35px 0;	/* orul */
		height:1px;
		}
		
	#timetotime menue {
        width:90%;
        font-size:18px;
		}
		
	#timetotime menue h3 {
		margin: 50px 0 30px 0;	/* orul */
		font-size:22px;
		font-weight:600;
		color: #6B7770;
		text-transform:uppercase;
		}
	
	#timetotime menue hr {
		border: none;
		background-color: #C1CAC5;
		margin: 25px 0 15px 0;	/* orul */
		height:1px;
		}

	.menueline_2{
		height: 5px;
		background-color: #C1CAC5;
		margin: 60px 0 60px 0;	/* orul */
		}
		
	#timetotime ul	{
		list-style: none;
		margin-left:-40px;
		font-size: 16px;
		color: #6B7770;
		}
		
	#timetotime .link-list li	{
		list-style: none;
		margin-bottom: 10px;
		font-size:18px;
		font-weight:600;
		color: #6B7770;
		text-transform:uppercase;
		}
		
/* ende timetotime bereich unter dem banner bereich ---------------------------------------------------------------- */

/* beginn button unter timetotime bereich -------------------------------------------------------------------------- */
	.button {
		margin-top:60px;
		margin-left:0px;
		}
/* ende button unter timetotime bereich ---------------------------------------------------------------------------- */

/* begin kurs bereich ---------------------------------------------------------------------------------------------- */

	.kurs_wrapper {
		width:auto;
		margin:auto;
		}

	.kurs_text {
		float: left;
		width: 70%;
		margin-right:2%;
		margin-top:2%;
		}
		
	.kurs_pic {
		float: left;
		width: 28%;
		}
		
/* ende kurs bereich ----------------------------------------------------------------------------------------------- */

}