html {
	color: #20201E;
	background-color: #f2c279;
	margin: 0;
	padding: 0;
}

body {
	margin-left:auto;
	margin-right:auto;
	font-family: "arial";
	font-size: 16px;
	margin: 0;
	padding: 0;
	min-height: 100%;
    background-color: rgba(242, 194, 121, 1);
	background-image: url('../images/grain.png'), linear-gradient(to bottom, rgba(242, 194, 121, 1), rgba(253, 217, 152, 1) 21%, rgba(254, 224, 168, 1) 38%, rgba(240, 193, 124, 1) 65%);
	background-image: url('../images/grain.png'), -moz-linear-gradient(to bottom, rgba(242, 194, 121, 1), rgba(253, 217, 152, 1) 21%, rgba(254, 224, 168, 1) 38%, rgba(240, 193, 124, 1) 65%);
	background-image: url('../images/grain.png'), -webkit-linear-gradient(to bottom, rgba(242, 194, 121, 1), rgba(253, 217, 152, 1) 21%, rgba(254, 224, 168, 1) 38%, rgba(240, 193, 124, 1) 65%);
	box-shadow: inset 0 0 75px rgba(255,210,0,0.3), inset 0 0 20px rgba(255,210,0,0.4), inset 0 0 40px rgba(220,120,0,0.8);
}

::selection { 
	background: #20201E;
	color: #f2c279;
}

::-moz-selection { 
	background: #20201E;
	color: #f2c279;
}

::-webkit-selection { 
	background: #20201E;
	color: #f2c279;
}

.bordgauche, .borddroit, .bordhaut, .bordbas {
	position:fixed;
	background:green;
	z-index:100;
	}

.bordgauche, .borddroit {
	height: 100%;
	width: 10px;
	top: 0;
	}
	
.bordhaut, .bordbas {
	width: 100%;
	height: 10px;
	left: 0;
	}

.bordgauche {
	left: 0;
	}
	
.borddroit {
	right: 0;
	}
	
.bordhaut {
	top: 0;
	}
	
.bordbas {
	bottom: 0;
	}

.pointer {
cursor: url("../images/pointer.png"), pointer;
}
	
footer {
	text-align:center;
	bottom:0;
	width:100%;
	vertical-align:top;
	display:inline-block;
	font-weight:bold;
	}

footer a {
	font-size:13px;
	text-decoration: none;
	color: #20201E;
	}

footer a:hover {
	color: #b6bac4;
	}
	
table, th, td {
	  border: 0;
	}

td {
	 text-align: left;
	 width: 50%;
	}
	
td a {
	text-decoration: none;
	color: #20201E;
}
	
td a:hover {
	text-decoration: none;
	color: #b6bac4;
}

a.adate:hover {
	color: #20201E;
}

table {
	  height: 50px;
	  width: 100%;
	}

h1,h2,h3,h4,h5,h6 {
	font-family: "Times";
	}
	
h1, h2, div p {
		color: #20201E;
	}
	
h1 {
		font-size: 30px;
	}
	
h2 {
		font-size: 16px;
		font-family: "arial";
	}

.okto-light,.okto-light:hover {
	color:#000!important;
	background-color:#ffffff!important;
	}
	
.content {
	margin-left:auto;
	margin-right:auto;
	max-width:980px;
	}
	
.w3-display-container:hover .w3-display-hover {
	display:block;
	}
	
.w3-display-container:hover span.w3-display-hover {
	display:inline-block;
	}
	
.okto-image {
	padding-top: 10px;
	max-width:100%;
	height:auto;
	}

header {
	padding-top: 2%;
}

#bannerm {
	display: none;
}

img {
	vertical-align: middle;
	}

.vintage {
	mix-blend-mode: multiply;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	}

/*--------------------------------------------------------------
	# Menu
	--------------------------------------------------------------*/	 
nav {
	margin: 0;
	padding: 0;
	margin-top: 20px;
	height: 36px;
	color: #FBD698;
	}
	 
nav .main_pages {
	display: flex;
	justify-content: space-around;
	align-items: center;
	}
	 
nav .main_pages a {
padding-left: 20px;
padding-right: 30px;
display: flex;
align-items: center;
justify-content: center;
height: 36px;
margin:auto;
position:relative;
text-decoration: none;
font-family: Arial, sans-serif;
color: #FBD698;
font-weight: bold;
font-size: 14px;
background: #20201E;
}
 
nav .main_pages a:after{
  content:"";
  position:absolute;
  left:-20px;
  width:0;
  height:0;
  border-style:solid;
  border-color:transparent transparent #20201E transparent;
  border-width:0px 0px 36px 20px;
}

nav a.active {
	color: #20201E;
	background: transparent;
	border-color:transparent transparent transparent transparent;
	}
	
nav .main_pages.active a.active:after{
	  border-color:transparent transparent transparent transparent;
	}
	
label, #toggle {
	display: none;
	}
	
.okto-margin-large {
	padding-right:44px!important;
	}
	
@media all and (max-width: 830px){
nav .main_pages a {
	padding-left: 12px;
	padding-right: 18px;
	}
}
	
@media all and (max-width: 705px){
	.okto-margin-large {
	padding-right:16px!important;
	}

#banner {
		display: none;
	}

#bannerm {
		display: block;
	}
	
nav {
	height: 48px;
	background: #20201E;
	}

nav .main_pages {
	display: none;
	flex-direction: column;
	}

nav .main_pages a {
	width: 100%;
	background: #20201E;
	height: 34px;
	padding: 0;
  	top:0;
	z-index: 3;
	}

nav a:hover {
	width: 100%;
	background: #FBD698;
	color: #20201E;
	border: 1px dashed #20201E;
	height: 32px;
	}

nav a.active {
	color: #fff;
	padding-left: 0;
	padding-right: 0;
	}
		
label {
	width: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	font-size: 32px;
	color: #FBD698;
	cursor: pointer;
	}

#toggle:checked + .main_pages {
	display: flex;
	}
}




.okto-center {
text-align:center!important;
}

/*--------------------------------------------------------------
# Portfolio Select
--------------------------------------------------------------*/
.select-col {
	float: left;
	width: 100%;
	}
	
.select-col.s1 {
	width: 100%;
	}
	
@media (min-width: 705px){
	.select-col.l1 {
		width: 43.82%;
		}
	.select-col.l2 {
		width: 56.18%;
		}
	}

.okto-white, .w3-hover-white:hover {
		color:#000!important;
		padding-top: 10px;
		padding-bottom: 15px;
	}


/*--------------------------------------------------------------
	# Index Left Right
	--------------------------------------------------------------*/
.w3-col {
	float: left;
	width: 100%;
	padding-top: 30px;
	}
	
.w3-col.s1 {
	width: 100%;
	}
	
@media (min-width: 705px){
	.w3-col.l1 {
		width: 80%;
		}
	.w3-col.l2 {
		width: 20%;
		}
	}
	
.w3-white, .w3-hover-white:hover {
		color:#000!important;
		padding-top: 10px;
	}







.box-margin {
	margin:14px!important;
	}
	
.w3-container {
	padding:0.01em 16px;
	}

.w3-container:after,.w3-container:before {
	content:"";
	display:table;
	clear:both;
	}

.justify {
	text-align:justify!important;
	line-height: 25px;
	color: #20201E;
	}
	
.padding-16 {
	padding-top:16px!important;
	padding-bottom:16px!important;
	}
	
	/****  portfolio min ****/
	
a.min {
		text-decoration: none;
		}
	
	a.min:focus {
	border: 0;
	outline:0;
	}
	
	@media (max-width: 835px){
	a.min img {
	margin-bottom: 4%;
	width: 48%;
	-webkit-transform: scale(1);
	transform: scale(1);
	}
	}
	
	@media (max-width: 705px){
	a.min img {
	margin-bottom: 8%;
	width: 100%;
	-webkit-transform: scale(1);
	transform: scale(1);
	}
	}
	
	
	a.min img {
	margin-bottom: 4%;
	position: relative;
	width: 32%;
	}
	
	a.min img:hover {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
		}
	
	.vintagemin {
	mix-blend-mode: multiply;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	}
	
	a.vintagemin:hover {
	mix-blend-mode: none;
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	}




	/********* ADMIN *********************************+
	***************************************************/
	.absolute {
		position: absolute;
	}
	
	.redborder {
		border: 2px dotted green;
	}
	
	.delete {
		width: 30px;
		height: 30px;
		background-size: cover;
		display: block;
		position:relative;
		left:-220px;
		top:190px;
		z-index: 2;
		background-image: url('../images/colorbox/delete-02.png');
	}
	
	.delete:hover {
		background-image: url('../images/colorbox/delete-01.png');
	}
	
	.vintageadmin {
	mix-blend-mode: multiply;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	}
	
	a.vintageadmin:hover {
	mix-blend-mode: none;
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	}
	
	a.admin img {
	margin-bottom: 4%;
	position: relative;
	width: 32%;
	}
	
	/********* PORTFOLIO *********************************+
	***************************************************/
	#galerie {
		width: 100%;
		margin: 0 auto;
		padding-top: 10px;
	}
	
	#galerie form{
		padding: 20px;
		margin: 0;
		background: #20201E;
		color: #ffffff;
		}
		
	#galerie form:hover{
	border: 0;
	}
	
	/** inout envoyer **/
	input[type=submit] {
		width: 120px;
		height: 30px;
		border: none;
		cursor: pointer;
		color: #fff;
		font-family: Arial;
		font-size: 1rem;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
		background: gray;
		}
		
	input[type=file] {
		font-size: 1rem;
		}
	
	input[type=submit]:hover {
		background: green;
		}
		
	p.non-valide {
		font-family: Arial;
		padding-bottom: 10px;
		font-size: 2rem;
		}
		
		
		
		
		
		
	/*--------------------------------------------------------------
		# Menu Admin
		--------------------------------------------------------------*/	 
	.nav_admin {
		display: flex;
		padding:0;
		margin: 0;
		margin-bottom: 10px;
		background-color: #20201E;
	}
	
	.nav_admin li {
		list-style-type: none;
		width: 100%;
	}
	
	.nav_admin a {
		display:block;
		margin: 0;
		padding: 0.4rem 0.8rem;
		font-family: arial;
		font-size: 0.8rem;
		text-align: center;
		background-color: gray;
		color: #fff;
		text-decoration: none;
		transition: all 1s ;
	}

	.nav_admin a.active {
		color: #ffffff;
		background: transparent;
		}
		
	nav .nav_admin.active a.active:after{
		background: transparent;
		}
		
	.nav_admin a:hover, .menu a:hover.active{
	  background-color: green;
	  color: #ffffff;
	}
	
	.zoomimg {
	transition-property: all;
	transition-duration: 0.4s;
	transition-timing-function: ease;
	transition-delay: 0s;
	}
	
	.zoomimg:hover {
	transform: rotate(0deg) scale(1.03);
	}