/**
*
*		Media queries
**/


/* Portrait tablets to landscapes and desktops */
@media only screen and (max-width:61.188em), only screen and (max-width: 979px), all and (max-width:1025px) and (orientation:landscape) {
html { font-size: 90%; padding: 0; margin: 0; }	
body { font-size: 90%; padding: 0; margin: 0; }
        .bg-violences{ 
        -webkit-background-size: 100%;
	-moz-background-size: 100%;
	-o-background-size: 100%;
	background-size: 100%;
	}
	.md-modal {
	left:50%;
	}
	.sidebar{
	margin-top:0px !important;
	}
        
}


/* Phones and little tablets */
@media only screen and (max-width:47.938em) and (orientation:portrait), only  screen and (max-width: 767px) and (orientation:portrait),only screen and (max-width:47.938em) and (orientation:landscape), only  screen and (max-width: 767px) and (orientation:landscape) {
  
html { font-size: 80%; padding: 0; margin: 0; }
body { font-size: 80%; padding: 0; margin: 0; }

	.md-modal {
	position:absolute;
	left:60%;
	top: 27%;
	width: 40%;
	max-width:400x;
	min-width: 300px;
	height:auto;
	z-index:8;
	visibility: hidden;	 
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

	.column {
	width: 100%;
	min-width: auto;
	min-height: auto;
	padding: 1em;
	display:block ;
	clear:both;
	}
	.column p {
	text-align: left;
	font-size: 1.5em;
	}
	.column:nth-child(2) {
	box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
	}
	img, embed, object, video, .scale {
	/* IE7-8 need help adjusting responsive images */
	width: auto;
	}	
	.sidebar {
	margin-top:0;
	width:auto;
	padding:1em;
	}	
}


/* Smart Phones */
@media handheld, only screen and (max-device-width: 31.250em), only screen and (max-device-width: 641px), only screen and (max-width: 641px) and (orientation:landscape), only screen and (min-width: 321px) and (max-width: 500px), only screen and (max-width:321px) and (orientation:portrait) {

	.codrops-icon span {
	display: none;
	}
	
        .sidebar {
        width:auto;
        max-width:100%;
        display:block;
        clear:both;
	top:0;
	padding:1em;	
	}
	.md-modal {
        width:auto;
        max-width:100%;
        display:block;
        clear:both;
	top:30%;
	padding:1em;	
	}
	
	button {
	padding: 0 1.2em !important;
	}
	.md-content > div > figure {
   	 width : 100%;
  	 margin : 0;  
	}
	.md-content > div > figure  figcaption {
 	 font-size : 1.6rem;
  	 padding :1rem;
  	 background :transparent; 
 	 display :block;
 	 text-align :justify;
 	 font-family : 'PT sans narrow';
 	 font-style : normal;
  	 border-radius : 0 0 7px 7px ;
  	 -moz-border-radius : 0 0 7px 7px ;
  	 -webkit-border-radius : 0 0 7px 7px ;
	}
	
	.md-content-color-mecanic {
	background-size: 30rem 50rem;
	font-size:0.1rem;
	}
	.sidebar .sidebar-video {
	display:none;
	}
	.credit-photo {
	font-size:1.5em ! important;
	}
	.md-content-color-book-mecanic > figure  figcaption {
	font-size:0.8em;
	}

}
	

@media all (max-width: 40.000em), media all (max-width: 640px) {

}

@media all (max-width: 37.500em), media all (max-width: 600px) {

	

}


@media all (max-width: 28.125em), media all (max-width: 450px) {

	

}

@media all (max-width: 21.875em), media all (max-width: 350px) {

	

}