/* XX-SMALL MOBILE: LIGHT BLUE; ************************************/

@media only screen and (min-width: 20em) {

	*{box-sizing: border-box}

	.footer{
		width: 100%;
		margin: 0;
		display: block;
		float: left;
	}
	.wrapper_footer{
		/*border: 1px solid red;*/
		padding: 30px 0 0 0; 
		background-color: rgba(0,0,0,1);
		width: 100%;
		float: left;
	}
		.footer_container1{
			/*border: 1px solid yellow;*/
			width: 5%;
			text-align: center;
			margin: 0 0 0 0;
			padding: 0;  
			float: left;
			height: 145px;
			display: none;
		}
		.footer_container2{
			/*border: 1px solid yellow;*/
			width: 100%;
			margin: 0 0 1em 0;
			padding: 0;
			float: left;
			height: auto;
			position: relative;
		}
				#auto-logo_footer{
					/*border: 1px solid lime;*/
					width: 250px;
					margin: 0 auto;
					padding: 0 0 0 0;
					display: block;
					position: relative;
					top: 0;		
					left: 0;
				}
				.slogan{
					/*border: 1px solid lime;*/
					font-family: "Roboto Slab";
					font-size: 1em;
					text-align: center;
					color: white;
					padding: 5px 55px 0 55px;
					margin: 0 0 0 0;
					position: relative;
					top: 0;		
					left: 0;
				}
		.footer_container3{
			/*border: 1px solid red;*/
			border-left: none;
			width: 100%;
			margin: 0 0 1em 0;
			padding: 0;
			float: left;
			height: auto;
		}
			.footer_box1{
				/*border: 1px solid lightblue;*/
				width: 50%;
				padding: 0 60px 0 60px;
				margin: 0 0 0 0;
				float: left
			}
				#linkedin-icon{
					width: 30px;
					margin: 0 0 0 0;
					padding: 0 0 0 0;
					float: left; 
				}		
			.footer_box2{
				/*border: 1px solid lightblue;*/
				width: 50%;
				padding: 0 0 0 15px;
				margin: 0 0 0 0;
				float: left;
			}
				.privacy{
					font-family: "Roboto";
					font-size: .9em;
					text-align: center;
					color: white;
					padding: 5px 0 5px 0;
					margin: 0 0 0 0;
					width: 100%;
				}
					.footer_box2 a{
						text-decoration: none;
					}
					.footer_box2:hover .privacy{
						font-weight: 900;
						color: #187ec6; 
					}
			.footer_box3{
				/*border: 1px solid lightblue;*/
				width: 100%;
				padding: .5em 0 .5em 0;
				margin: .5em 0 0 0;
				float: left;
			}
				.cookie-box{
					font-family: "Roboto";
					font-weight: 300;
					line-height: 1.5em;
					font-size: .75em;
					color: white;
					text-align: center;
					border: 1px solid grey;
					border-radius: 5px;
					padding: 5px 5px 5px 5px;
					width: 230px;
					margin: 0 auto;
					display: block;
				}
	.copyright{
		font-family: "Roboto";
		font-size: .7em;
		font-weight: 300;
		color: white;
		text-align: center;
		letter-spacing: 1px;
		padding: 0 0;
		width: 100%;
		float: left;
		margin: 0 0 2em 0;
	}
}

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


/** X-SMALL: SMARTPHONES LANDSCAPE: LIME *************************************/

@media only screen and (min-width: 30em) {

	.wrapper_footer{
		/*border: 1px solid red;*/
		padding: 30px 0 0 0; 
		background-color: rgba(0,0,0,1);
		width: 100%;
	}
		.footer_container1{
			/*border: 1px solid yellow;*/
			width: 5%;
			text-align: center;
			margin: 0 0 0 0;
			padding: 0;  
			float: left;
			height: 145px;
			display: block;
		}
		.footer_container2{
			/*border: 1px solid yellow;*/
			width: 65%;
			margin: 1em 0 0 0;
			padding: 0;
			float: left;
			height: 145px;
			position: relative;
		}
				#auto-logo_footer{
					/*border: 1px solid lime;*/
					width: 300px;
					margin: 0 auto;
					padding: 0 0 0 0;
					display: block;
					position: relative;
					top: 0;		
					left: 0;
				}
				.slogan{
					/*border: 1px solid lime;*/
					font-size: .9em;
					text-align: center;
					padding: 0 0 0 0;
					margin: .5em 0 0 0;
					position: relative;
					top: 0;		
					left: 0;
				}
		.footer_container3{
			border-left: 1px solid grey;
			width: 30%;
			margin: 0 0 0 0;
			padding: 0;
			float: left;
			height: 145px;
		}
			.footer_box1{
				width: 100%;
				padding: 0 0 0 15px;
				margin: 0 0 0 0;
			}
				#linkedin-icon{
					width: 30px;
					margin: 0 0 0 0;
					padding: 0 0 0 0;
					float: left; 
				}		
			.footer_box2{
				width: 100%;
				padding: 0 0 0 15px;
				margin: 1.25em 0 0 0;
			}
				.privacy{
					padding: 10px 0 0 0;
					margin: 0 0 0 0;
					text-align: left;
					width: 100%;
				}
			.footer_box3{
				width: 100%;
				padding: 0 0 0 15px;
				margin: 1.25em 0 0 0;
			}
		.cookie-box{
			font-size: .65em;
			text-align: left;
			margin: 0 0 0 0;
			padding: 5px 10px;
			width: 120px;
			display: block;
		}
	.copyright{
		margin: 2em 0 2em 0;
	}
}

/** SMALL: TABLETS PORTRAIT: PINK; *************************************/

@media only screen and (min-width: 48em) {


	.wrapper_footer{
		/*border: 1px solid red;*/
		padding: 30px 0 0 0; 
		background-color: rgba(0,0,0,1);
		width: 100%;
	}
		.footer_container1{
			/*border: 1px solid pink;*/
			width: 25%;
			text-align: center;
			margin: 0 0 0 0;
			padding: 0;  
			float: left;
			height: 145px;
			display: block;
		}
		.footer_container2{
			/*border: 1px solid yellow;*/
			width: 50%;
			margin: 0 0 0 0;
			padding: 0;
			float: left;
			height: 145px;
			position: relative;
		}
				#auto-logo_footer{
					/*border: 1px solid pink;*/
					width: 370px;
					margin: 0 auto;
					padding: 1em 0 0 0;
					display: block;
					position: relative;
					top: 0;		
					left: 0;
				}
				.slogan{
					/*border: 1px solid pink;*/
					font-size: .9em;
					text-align: center;
					padding: 0 0 0 0;
					margin: 1em 0 0 0;
					position: relative;
					top: 0;		
					left: 0;
				}
		.footer_container3{
			border-left: 1px solid grey;
			width: 25%;
			margin: 0 0 0 0;
			padding: 0;
			float: left;
			height: 145px;
		}
			.footer_box1{
				width: 100%;
				padding: 0 0 0 30px;
				margin: 0 0 0 0;
			}
				#linkedin-icon{
					width: 30px;
					margin: 0 0 0 0;
					padding: 0 0 0 0;
					float: left; 
				}		
			.footer_box2{
				width: 100%;
				padding: 0 0 0 30px;
				margin: 1.25em 0 0 0;
			}
				.privacy{
					padding: 10px 0 0 0;
					margin: 0 0 0 0;
					text-align: left;
					width: 100%;
				}
			.footer_box3{
				width: 100%;
				padding: 0 0 0 30px;
				margin: 1.25em 0 0 0;
			}
		.cookie-box{
			text-align: left;
			margin: 0 0 0 0;
			padding: 5px 10px;
			width: 150px;
			display: block;
		}
}


/** MEDIUM: TABLET LANDSCAPE / DESKTOP: YELLOW; *************************************/

@media only screen and (min-width: 64em) {

	.wrapper_footer{
		/*border: 1px solid red;*/
		padding: 30px 0 0 0; 
		background-color: rgba(0,0,0,1);
		width: 100%;
	}
		.footer_container1{
			/*border: 1px solid yellow;*/
			max-width: 25%;
			text-align: center;
			margin: 0 0 0 0;
			padding: 0;  
			float: left;
			height: 145px;
		}
		.footer_container2{
			/*border: 1px solid yellow;*/
			width: 50%;
			margin: 0 0 0 0;
			padding: 0;
			float: left;
			height: 145px;
		}
				#auto-logo_footer{
					/*border: 1px solid yellow;*/
					width: 450px;
					margin: 0 auto;
					padding: 1em 0 0 0;
					display: block;
					top:0;
					position: relative;
				}
				.slogan{
					/*border: 1px solid yellow;*/
					font-size: 1em;
					text-align: center;
					padding: 0 0 0 0;
					margin: 0 0 0 0;
					position: none;
				}
		.footer_container3{
			border-left: 1px solid grey;
			width: 25%;
			margin: 0 0 0 0;
			padding: 0;
			float: left;
			height: 145px;
		}
			.footer_box1{
				width: 100%;
				padding: 0 0 0 30px;
				margin: 0 0 0 0;
			}
				#linkedin-icon{
					width: 30px;
					margin: 0 0 0 0;
					padding: 0 0 0 0;
					float: left; 
				}		
			.footer_box2{
				width: 100%;
				padding: 0 0 0 30px;
				margin: 1.25em 0 0 0;
			}
				.privacy{
					padding: 10px 0 0 0;
					margin: 0 0 0 0;
					text-align: left;
					width: 100%;
				}
			.footer_box3{
				width: 100%;
				padding: 0 0 0 30px;
				margin: 1.25em 0 0 0;
			}
		.cookie-box{
			font-size: .75em;
			text-align: left;
			width: 150px;
			margin: 0 0 0 0;
			padding: 5px 10px;
			display: block;
		}
} 

/* LARGE: DESKTOP: ORANGE; ************************************/

@media only screen and (min-width: 85.375em) {

	#auto-logo_footer{
			/*border: 1px solid orange;*/
			width: 500px;
			margin: 0 auto;
			padding: 0;
			display: block;
		}
		.slogan{
			/*border: 1px solid orange;*/
			font-size: 1.25em;
			text-align: center;
			padding: 0 0 0 0;
			margin: 0 0 0 0;
		}
}


/* X-LARGE: DESKTOP: CYAN; ************************************/

@media only screen and (min-width: 120em) {

}

/* XX-LARGE: DESKTOP: RED; ************************************/

@media only screen and (min-width: 160em) {

}