/*   
Theme Name: AC/VP MOBILE
Theme URI: http://html5reset.org
Description: A style-free theme to get you started on an HTML5-based Wordpress theme of your own.
Author: Monkey Do!
Author URI: http://monkeydo.biz
Version: 1
*/

@import url("../acvp/style.css");
@import url("_/css/utils.css");
									


@media screen and (max-device-width: 768px) {

	html.ios .aside_controls{bottom:74px}
	html.ios .page-template-page-mediatheque-php aside .sprite-right{visibility: hidden;}
	.page-template-page-mediatheque-php aside .sep_20{display: none;}

	.sub-menu{
		display: block;
		position: relative;
		top: 0;
		padding-top: 1em;
		padding-left: 1em;
	}
	.sub-menu li:last-child{margin-bottom: 0!important;}
	html, body{overflow-y: auto;}
	#wrapper {
	    margin: 0 20px 20px;
	    margin-top: 60px;
	}

	header{
		left: 20px;
		left: 0;
		padding-top: 20px;
		width: calc(100vw - 40px) !important;
		width: calc(100vw - 28px) !important;
		width: 100vw !important;
		padding: 0 0 0 20px;
			
		z-index: 3;
	}
	header h1{
		padding-top: 20px;
		z-index: 9999999;
		position: relative;
		background-color: transparent;
		width: calc(100% - 40px);
	}
	#wrapper.full header h1{
		background-color: transparent;
	}

	#wrapper > .container,
	section{
		height: auto !important;
		width: calc(100vw - 40px)!important;
		width: calc(100vw - 50px)!important;
		width: calc(100vw - 60px)!important;
	}

	.home #wrapper > .container{
		width: calc(100vw - 40px)!important;	
		height: calc(100vh - 60px)!important;	
		position: relative;
		z-index: 0;
	}
	
	#pager_wrapper{width: calc(100vw - 40px)!important;	}

	h1 img{
		max-width: 230px;
	}
	.burger{
		float: right;
		width: 24px;
		position: relative;
		z-index: 9999999;
		margin-top: 20px;
		margin-right: 8px;
	}

	
	.nav{
		display: flex;
		float: none;
		background-color: red;
		display: none;
    	text-align: center;height: auto;
    	position: fixed;
	    width: 100vw !important;
	    background: white;
	    z-index: 999999;
	    left: 0;
	    top: 60px;
	    top: 0;
	    height: 100vh;
	    text-align: left;
	    padding: 0 20px;
		padding-top: 60px;
    }
    .nav > div{
		margin: auto;
		margin-left: 0;
	}
	.menu-container, 
	.lang_sel_list_horizontal, .menu-social{
		float: none;
	    display: inline-block;
    	width: 100%;
    	margin: 0;
    	margin-bottom: 1em;
	}
	#menu-header li{
		float: none;
		margin-bottom: 1em;
		margin-left: 0;
		width: 100%;
	}
	.slideRight {
	    -webkit-transform: translate3d(calc(100vw - 40px),0,0);
	    -ms-transform: translate3d(calc(100vw - 40px),0,0);
	    transform: translate3d(calc(100vw - 40px),0,0);
	}
	aside{
		width: 100vw !important;
		height: 100vh !important;
		z-index: 2;
	}
	section:before{
		content: "";
		width: 100vw;
		height: 60px;
		background-color: white;
		position: fixed;
		left: 0;
		top: 0;
	}
	
	aside .aside_inner{
		margin: 155px 20px;	
	}
	.media_filtre{  margin-bottom: 5px;}
	.page-template-page-mediatheque-php aside{
		display: flex;
	}
	.page-template-page-mediatheque-php aside .aside_inner{
		margin: auto 20px;
	}
	aside.slideRight .aside_inner{margin: 155px 40px;}
	.aside_bande{width: 40px;display: none;}
	aside.slideRight .aside_bande{display: block;}
	aside .aside_controls{left: 20px;}
	aside.slideRight .aside_controls{
		left: 14px;
	}
	
	.page-template-page-mediatheque-php aside ul{
		margin-bottom: 1em;
	}
	.page-template-page-mediatheque-php aside input{
		background-color: transparent;
		border: 2px solid;
		padding: 5px 10px;
		text-align: center;
	}

	.del{
		padding-right: 10px;
		margin-right: 0;
	}
	.col_13, .col_23, .col_33, .col_12{
		display: block;
		width: 100%;
		padding-right: 20px;
	}
	.col_23{
		overflow: hidden;
		margin-bottom: 2em;
	}

	.col_23 img, .col_main img{
		max-width: 100%;
		height: auto;
	}

	.col_13 div,
	.col_13 p,
	.col_23 div,
	.col_23 p{width: auto !important; margin-right: 0}
	
	section img.thumb_media:nth-child(odd),
	#container_filtered img.thumb_media:nth-child(even){
		margin-right: 0;
	}

	#container_filtered{
		width: calc(100vw - 40px) !important;
		height: calc(100vh - 0px) !important;
		top: 0px !important; padding-left: 20px;
		padding-top: 60px;
		left: 0;
		z-index: 1;
	}

	#wrapper #modal, 
	#wrapper #modal_diaporama{
		width: calc(100vw - 40px) !important;
		height: calc(100vh - 0px) !important;
		top: 0px !important;
		padding-top: 60px;
		left: 0;
		z-index: 1;
	}
	#wrapper .modal_inner{overflow: initial}
	#wrapper .modal_item{
		width: calc(100vw - 40px) !important;
		height: calc(100vh - 60px) !important;
		opacity: 1;
		/*margin: 0 20px;*/
		background-size: calc(100% - 40px);
	}

	#modal .sprite-close, 
	#modal_diaporama .sprite-close{
		top: 60px;
		right: 20px;
	}
	#modal_diaporama .sprite-right, 
	#modal_diaporama .sprite-left{
		top: auto;
		bottom: 30px;
		display: none;
	}
	#modal_diaporama .sprite-left{left: 20px;}
	#modal_diaporama .sprite-right{right: 20px;}
	.credits{
		bottom: 0px!important;
		opacity: 0!important;
		padding: 0 40px;
		width: calc(100vw - 40px) !important;
		white-space: pre-line;
		font-size: 12px;
		line-height: 16px;
	}
	.credits.reveal{
		bottom: 0px!important;
		opacity: 1!important;
		padding: 20px 0;
	}
	#wrapper .modal_item:hover .credits{
		bottom: 0px!important;
		opacity: 1!important;
		padding: 20px 0;
	}
	/*.item_news,
	#slider_news{
		width: 100vw !important;
		height: calc(100vh - 60px)!important;
	}*/
	.cS-hidden {
	    height: 1px;
	    opacity: 0;
	    filter: alpha(opacity=0);
	    overflow: hidden;
	}
	
	
	.item_news{
		width: calc(100vw - 40px) !important;
		height: calc(100vh - 60px);
		position: static;
	}
	
	.page-template-page-double-colonne section{
		padding-bottom: 44px;
	}
	footer{
		left: 20px;
		bottom: 0;
		background-color: white;
		padding: 20px 0;
	}


	.item_news{
		height: auto;
		margin-bottom: 20px;
	}
	.item_news img{
		width: 100%;
		height: auto;
	}

	.text-center{text-align: center;}

	.page-template-page-double-colonne section{
		padding-bottom: 59px;
	}



















}