/*
Theme Name: Art Optick Theme
Theme URI: http://artoptick-pertuis.fr/
Description: Thème du site Art'Optick
Version: 1.6
Author: No mistake
Author URI: 
Tags: White, blue, full-width, responsive, simple

Css by Paul Grisolia from No Mistake for Art Optick */
	


	@font-face{
		font-family:'Arcknowledge';
		src: url('arcknowledge.ttf');
		}
	@font-face {
	  font-family: 'Allan';
	  font-style: normal;
	  font-weight: 400;
	  src: local('Allan'), local('Allan-Regular'), url(http://themes.googleusercontent.com/static/fonts/allan/v5/5aqh4PlcZKVdCD6zaeSMnQ.woff) format('woff');
	}	
	/* CODE GENERAL */
		body
		{
			background-image: url('/wp-content/themes/ArtOptickTheme/471.png');
		}
			@media screen and (max-width: 1000px)
				{
					body
					{
						background:none;
					}
					
				
				}
			

	/*  Navigateur */
	
	nav
		{
			margin-left: 20%;
			width:990px;
			background-color:white;
		}
		
			@media screen and (max-width: 1400px)
			{
				nav
				{
					margin-left:5%;
				}
				
			
			}
			@media screen and (max-width: 1000px)
			{
				nav
				{
					margin-left:0%;
					width:auto;
				}
				
			
			}
	nav a
		{
			text-decoration:none;
		}
	#nav
	{
		border-bottom: 3px solid #d0cece;
		width:900px;
		margin-left:40px;
		margin-top: -90px;
	}
			@media screen and (max-width: 1000px)
				{
					#nav
					{
						width:auto;
					}
					
				
				}
	
	#nav li , footer div
	{		
		display:inline-block;
		list-style:none;
		padding:20px;
		color:#42b0cd;
		text-align:center;
	}
			@media screen and (max-width: 600px)
				{
					#nav li, footer div
					{
						padding:5px;
						align:center;
					}
					
					
				
				}
	#nav li a  , footer a
	{
		color:#42b0cd;
		text-decoration:none;
		font-family: 'Allan';
		font-size:1.2em;
	}
			@media screen and (max-width: 600px)
				{
					#nav li a
					{
						font-size:1.5em;
						
					}
					
				
				}
	#nav li a:hover, footer a:hover
	{	
		text-shadow: 0 0.01em rgb(187, 185, 185);
	}
	
	#nav li:first-child
	{
		margin: 0 0 0 0px;
	}
	
	#nav li:not:first-child
	{
		margin: 0 0 0 5px;
	}
	
	#nav li:nth-child(1) .img
	{	
		width:100px;
		height:50px; 
		background:url(http://artoptick-pertuis.fr/wp-content/themes/ArtOptickTheme/lunette.png) 0 -88px no-repeat;
	}
	
	#nav li:nth-child(2) .img
	{	
		width:100px;
		height:50px; 
		background:url(http://artoptick-pertuis.fr/wp-content/themes/ArtOptickTheme/lunette.png) -100px -45px no-repeat;
	}
	
	#nav li:nth-child(3) .img
	{	
		width:103px;
		height:50px; 
		background:url(http://artoptick-pertuis.fr/wp-content/themes/ArtOptickTheme/lunette.png) 2px -44px no-repeat;
	}
	
	#nav li:nth-child(4) .img
	{	
		width:100px;
		height:50px; 
		background:url(http://artoptick-pertuis.fr/wp-content/themes/ArtOptickTheme/lunette.png) 0 0 no-repeat;
	}
	
	#nav li:nth-child(5) .img
	{	
		width:100px;
		height:50px; 
		background:url(http://artoptick-pertuis.fr/wp-content/themes/ArtOptickTheme/lunette.png) -100px 0 no-repeat;
	}
			@media screen and (max-width: 550px)
				{
					#nav li:nth-child(1) .img
					{
						width:auto;
						height:auto; 
						background:none;
					}
					#nav li:nth-child(2) .img
					{
						width:auto;
						height:auto; 
						background:none;
					}
					#nav li:nth-child(3) .img
					{
						width:auto;
						height:auto; 
						background:none;
					}
					#nav li:nth-child(4) .img
					{
						width:auto;
						height:auto; 
						background:none;
					}
					#nav li:nth-child(5) .img
					{
						width:auto;
						height:auto; 
						background:none;
					}
				
				}
	/* Corp de la page */

	section
		{
			margin-left: 20%;
			width:990px;
			background-color:white;	
			display:block;
		}
			@media screen and (max-width: 1400px)
			{
				section
				{
					margin-left:5%;
				}
				
			
			}
			@media screen and (max-width: 1000px)
			{
				section
				{
					margin-left:0%;
					width:auto;
				}
				
			
			}

	#container 
		{
			padding-top:40px;
			padding-bottom:40px;
			margin-left:20px;
			margin-right:20px;
			width:800px;
			display:block;
		}
			@media screen and (max-width: 1000px)
				{
					#container
					{
						width:auto;
					}
					
				
				}
			@media screen and (max-width: 600px)
			{
				#slider
				{
					display: none;
				}
				
			
			}
	aside
	{
		float:left;
		width:50%;
		border: 2px solid #42b0cd;
		border-radius:10px;
		padding:5px;
		margin:20px;
		text-align:center;
		font-family: 'Arcknowledge';

	}
		@media screen and (max-width: 500px)
			{
				aside
				{
					float:none;
					width:auto;
					border:none;
				}
				
			
			}
	aside *
	{
		padding:5px;
	}
	aside strong
	{
		color:#42b0cd;
	}
	aside img
	{
		width:90%;
		height:30%;
		display:block;
		margin: 20px;
		align:center;
	}
		@media screen and (max-width: 800px)
			{
				aside img
				{
					display: none;
				}
				
			
			}
	h1, h3, h4
		{
			font-family: 'Allan';
			color:#42b0cd;
			text-shadow: 0 0.01em rgb(187, 185, 185);
			font-weight:500;
			font-size:1.7em;
			margin-left:5%;
		}
	

	.bwg_title_spun2_0
	{
		color:#A7A7A7;;
	}
	.marque
	{
		padding-top : 10px;
		border-top: 3px solid #d0cece;
		text-align: center;
		color:black;
	}
	.imgMark
	{
		align:center;
	}
	
	/* Pied de page */
		

	footer
	  {
			text-align:center;
			margin-left: 20%;
			width:990px;
		}
			@media screen and (max-width: 1400px)
			{
				footer
				{
					margin-left:5%;
				}
				
			
			}
			@media screen and (max-width: 1000px)
			{
				footer
				{
					margin-left:0%;
					width:auto;
				}
				
			
			}


	footer a 
	{
		padding-left:-3px;
	 }	
	footer #breadcrumb
	{
		font-size:0.8em;
	}
	.b3_copyright
		{
			font-size:0.5em;
		}
	
	footer img
		{
			opacity:0.50;
		}
	footer img:hover
		{
			opacity:1;
		}

		footer
		{
		margin-top: 40px;
		}


	/* ANIMATION SLIDER */
	 
		 .jssorn21 div, .jssorn21 div:hover, .jssorn21 .av
				{
					background: url(n21.png) no-repeat;
					overflow:hidden;
					cursor: pointer;
				}
				.jssorn21 div { background-position: -5px -5px; }
				.jssorn21 div:hover, .jssorn21 .av:hover { background-position: -35px -5px; }
				.jssorn21 .av { background-position: -65px -5px; }
				.jssorn21 .dn, .jssorn21 .dn:hover { background-position: -95px -5px; }
		
	/* ANIMATION "ART OPTICK" */
	
	

	.cs-text {
		font-family:'Arcknowledge', serif;
		font-size: 4em;
		text-transform: uppercase;
		width: 900px;
		height: 100px;
		padding-left: 20px;
		font-weight: 800;
		position: relative;
	}

	/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
	.cs-text:before,
	.cs-text:after {
		content: ;
		display: table;
	}

	.cs-text:after {
		clear: both;
	}
	/* end clearfix hack */

	.cs-text span {
		cursor: default;
		display: block;
		float: left;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		margin: 0 0 0 -20px; 
		color: rgba(65,180,198,0.95);
		text-shadow: 0 -2px 2px rgba(0,0,0,0.1);
		-webkit-transition: all 0.6s ease-in-out;
		-moz-transition: all 0.6s ease-in-out;
		-o-transition: all 0.6s ease-in-out;
		-ms-transition: all 0.6s ease-in-out;
		transition: all 0.6s ease-in-out;
		
		
	}
	.cs-text span:nth-child(odd) {
		
	}

	.cs-text span:nth-child(even) {
		
	}
	.cs-text span:nth-child(1) {
		margin-left:50px;
		-webkit-transform: translate(0%) translate(-0px);
		-moz-transform: translate(0%) translate(-0px);
		-o-transform: translate(0%) translate(-0px);
		-ms-transform: translate(0%) translate(-0px);
		transform: translate(0%) translate(-0px);
	}
	.cs-text span:nth-child(2) {
		-webkit-transform: translate(10%) translate(-10px);
		-moz-transform: translate(10%) translate(-10px);
		-o-transform: translate(10%) translate(-10px);
		-ms-transform: translate(10%) translate(-10px);
		transform: translate(10%) translate(-10px);
	}

	.cs-text span:nth-child(3) {
		-webkit-transform: translate(20%) translate(-20px);
		-moz-transform: translate(20%) translate(-20px);
		-o-transform: translate(20%) translate(-20px);
		-ms-transform: translate(20%) translate(-20px);
		transform: translate(20%) translate(-20px);
	}

	.cs-text span:nth-child(4) {
		margin-left:20px;
		-webkit-transform: translate(30%) translate(-30px);
		-moz-transform: translate(30%) translate(-30px);
		-o-transform: translate(30%) translate(-30px);
		-ms-transform: translate(30%) translate(-30px);
		transform: translate(30%) translate(-30px);
	}

	.cs-text span:nth-child(5) {
		-webkit-transform: translate(40%) translate(-40px);
		-moz-transform: translate(40%) translate(-40px);
		-o-transform: translate(40%) translate(-40px);
		-ms-transform: translate(40%) translate(-40px);
		transform: translate(40%) translate(-40px);
	}

	.cs-text span:nth-child(6) {
		-webkit-transform: translate(50%) translate(-50px);
		-moz-transform: translate(50%) translate(-50px);
		-o-transform: translate(50%) translate(-50px);
		-ms-transform: translate(50%) translate(-50px);
		transform: translate(50%) translate(-50px);
	}


	.cs-text span:nth-child(7) {
		-webkit-transform: translate(60%) translate(-60px);
		-moz-transform: translate(60%) translate(-60px);
		-o-transform: translate(60%) translate(-60px);
		-ms-transform: translate(60%) translate(-60px);
		transform: translate(60%) translate(-60px);
	}


	.cs-text span:nth-child(8) {
		-webkit-transform: translate(70%) translate(-70px);
		-moz-transform: translate(70%) translate(-70px);
		-o-transform: translate(70%) translate(-70px);
		-ms-transform: translate(70%) translate(-70px);
		transform: translate(70%) translate(-70px);
	}

	.cs-text span:nth-child(9) {
		-webkit-transform: translate(80%) translate(-80px);
		-moz-transform: translate(80%) translate(-80px);
		-o-transform: translate(80%) translate(-80px);
		-ms-transform: translate(80%) translate(-80px);
		transform: translate(80%) translate(-80px);
	}

	.cs-text span:not(:last-child) {
		opacity: 0;
		pointer-events: none;
	}
			@media screen and (max-width: 1000px)
				{
					.cs-text span:not(:last-child)
					{
						display:none;
					}
					
				
				}
	.cs-text span:last-child{
		position: absolute;
		z-index: 100;
		background: url('470.png') no-repeat center center;

	}

	.cs-text:hover span:not(:last-child){
		-webkit-transition: all 0.1s ease-in;
		-moz-transition: all 0.1s ease-in;
		-o-transition: all 0.1s ease-in;
		-ms-transition: all 0.1s ease-in;
		transition: all 0.1s ease-in;
		opacity: 1;
	}

	.cs-text:hover span:last-child {
		width: 200px;
		height: 199px;
		opacity: 0;
		-webkit-transform: scale(1.4);
		-moz-transform: scale(1.4);
		-o-transform: scale(1.4);
		-ms-transform: scale(1.4);
		transform: scale(1.4);
	}
	.support-note span{
		color: #ac375d;
		font-size: 16px;
		display: none;
		font-weight: bold;
		text-align: center;
		padding: 5px 0;
	}