/**********---------------*************/
/********** MEDIA QUERIES *************/
/**********---------------*************/

/*   Medium Devices, Desktops   */
/*           GREY			    */
@media only screen and (max-width : 1280px) {

	/**Test**/
	.mq-test{
		background-color: #888888;
	}

	#content{
		top: 680px;
		height: 5500px;
	}
	#banner{
		top: 140px; /* Hoehe des Headers*/
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.video-box{
		width: 500px;
		height: 281px;

	}

	.section-1{
		padding-right: 10%;
	}

	.tab{
		padding-left: 120px;
		padding-right: 120px;
	}
}


/*   Medium Devices, Desktops   */
/*         YELLOW			    */
@media only screen and (max-width : 992px) {

	.col{
		width: 100% !important;
		margin: 5px 0px 5px 0px;
	}

	/**Test**/
	.mq-test{
		background-color: #ffff00;
	}

	.footer{
		padding: 0px 80px;
	}

	#content{
		top: 560px;
		height: 5400px;
	}

	.content{
		padding: 0px 80px;
	}

	#banner{
		top: 140px; /* Hoehe des Headers*/
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.tab{
		padding-left: 0px;
		padding-right: 0px;
	}



}



/*     Small Devices, Tablets      */
/*           MAGENTA		       */
@media only screen and (max-width : 768px) {

	/**Test**/
	.mq-test{
		background-color: #ff00ff;
	}


	.header{
		padding: 0px;
		text-align: center;
	}



	#content{
		top: 460px;
		height: 5600px;
	}


	#banner{
		top: 140px; /* Hoehe des Headers*/
		position: fixed;
		width: 100%;
		height: 100%;
	}

	#contact-name, #contact-mail{
		width: 100%;
	}

	#contact-message{
		width: 100%;
	}

	.img-list{
		padding-left: 24px;
		padding-top: 12px;
		padding-bottom: 24px;
	}

	.img-list li{
		width: 42%;
	}

	.video-box{
		width: 350px;
		height: 196px;

	}
}

/*    Extra Small Devices, Phones   */ 
/*               CYAN               */
@media only screen and (max-width : 480px) {

	/**Test**/
	.mq-test{
		background-color: #00ffff;
	}

	.header{
		height: 138px;
	}


	#content{
		top: 340px;
		height: 6000px;
	}

	.content{
		padding: 0px 24px;
	}

	#banner{
		top: 138; /* Hoehe des Headers*/
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.footer{
		height:30px;
		font-size: 10px;
		padding: 0px;
		margin-bottom: 4px;
		text-align: center;
	}


	.img-list li{
		width: 52%;

	}	

	.video-box{
		width: 250px;
		height: 140px;

	}

	.section-1{
		padding-right: 0px;
	}



}

/*   Custom, iPhone Retina   */ 
/*          BLACK            */
@media only screen and (max-width : 320px) {
	/**Test**/
	.mq-test{
		background-color: #000;
	}

	#content{
		top: 380px;
		height: 4980px;
	}

	.video-box{
		width: 125px;
		height: 70px;

	}

	.header{
		height: 182px;
	}

	#banner{
		top: 172px; /* Hoehe des Headers*/
		position: fixed;
		width: 100%;
		height: 100%;
	}
	
}