html {
    font-size:62.5%;
	height : 100%;
}

body {
	font-size : 1.4em;
	font-family: 'Cairo', sans-serif;
	font-weight:200;

	/*font-family: 'Monda', sans-serif;*/
	/*font-family: 'PT Sans Caption', sans-serif;*/
	font-family : verdana, sans-serif;
    /*font-family: 'Muli', sans-serif;*/
    background-color : white;
}

figure img {
		max-height : 15em;
		margin:3.5em;
}


img:hover {
		color : red;
}

section  {
	min-height : 100%;
}

		
footer {
	position : fixed;
	bottom : 0;
	width : 100%;
	position : fixed;
	display : block;
	z-index : 3;
	color : black;
}

footer > p {
	font-size : 0.6em;
	font-style : normal;
	text-align : center;
	background : rgba(0,0,0,0.2);
	line-height : 3em;
	margin-bottom:0;
	z-index : 25;
}


footer > p > a {
	color : black;
	text-decoration : none;
	display : inline-block;
}

footer > p > a:hover {
	color : white;
	text-decoration : none;
	display : inline-block;
}

h1 {
	color : black;
	font-size : 5.5;
	text-align : left;
	margin : 0;
	width : auto;
	letter-spacing: 0.1em;
}



h2, h3 {
	color : black;
}



h2 {
	font-size : 4em;
	font-style : normal;
	text-align : left;
	margin-bottom : 0;
}


h3 {
	/*font-size : 0.6em;*/
	font-size : 0.9em;
	text-align : center;
	width : 100%;
	display : inline-block;
	font-weight : normal;
	color : #8A8381;
}


h4 {
	font-size : 1em;
	padding : 0;
	margin : 0;
}



p {
	text-align : center;
		-webkit-hyphens : auto;
		-moz-hyphens : auto;
		-ms-hyphens : auto;
		-o-hyphens : auto;
	hyphens : auto;
	width : 100%;
	font-weight: 100;
}

	
p.description {
	text-align : justify;
	font-size : 0.6em;
	color : #CACEB5;/*#BFCDDA;*/
	font-weight: lighter;
}	
	
.descriptif {
font-size : 1.5em;
text-decoration:none;
text-align:justify;
text-decoration:none;
margin: 2.5em 2.5em 1.5em;
width: 15em;
}

.presentation_expo {
color:grey;
font-size : 0.7em;
text-align:justify;
z-index:200;
}

/*.info {
text-align:center;
text-decoration:none;
margin: 2.5em 2.5em 1.5em;
width: 11em;
}*/


article {
	width : 100%;
	float : left;
	margin-right : 1em;
    margin-bottom : 0;
}

header {
	/*height : 100%;*/
	width : 100%;
	background : url("../img/P1074128.jpg")  no-repeat 0 -8em;
	background-size : 100%;
	margin-top : 0;	
 }

/* Header slider */

/*#soustitre_slide {
	color:white;
	font-family : verdana, sans-serif;
	letter-spacing: 0.1em;
	width : 250%;
	font-size : 0.9em;
	Text-align : left;
	margin-top : 6.4em;
	margin-left : 0;
	padding-left : 2.5em;
	line-height : 1.5em;
	background : rgba(0,0,0,0.1);
}*/
 
	.first-header-slide {
 	color:white;
 	font-size:0,5em;
 	line-height:28px;
	text-align:center;
	vertical-align:center;
 }
 
  .first-header-slide a{
 	color:white;
 	text-align:center;
 	text-decoration:none;
 }
 
 #sous-header {
	width : 100%;
 }
 
  #sous-header p {
	color : white;
	opacity : 0.85;
 }
 
   #sous-header p:hover {
	color : white;
	opacity : 1;
 }
 
 #sous-header>h3 {
	font-size:1em;
	text-align:left;
	margin-left:2em;
	margin-top:0;
	position:relative;
	display:inline-block;
 }
 
 
 #barre_menu{
	margin-top:70%;
	display:block;
	width:100%;
 }
 
  #barre_menu >h3{
	text-align : left;
	margin-left:3em;
	margin-top:0;
	line-height : 0.1em;
 }
 
#titre {
	width:100%;
	height:auto;
	margin:0;
	color : white;
	display : block;
	/*width : 100%;
	background : url("../medias/header_background.jpg")  no-repeat 0 -28em ;
 	background-size : cover;
 	background-color : #5081AC;*/
}


#geographics{
	width : 100%;
	margin-top : 3.5em;
	margin-left : 2em;
	display : inline-block;
	z-index :40;
	position : relative;
	height : 0em;
}

#geographics h1{
	width : 100%;
	font-weight : 200;
	font-size : 1.9em;
	letter-spacing: 0.1em;
	color:rgb(300,300,300);
	margin-top:-0.8em;
}


#geographics a {
	opacity : 0.6;
	display:block;
	margin-top : -0.8em;
	text-decoration : none;
	text-align:center;
}

#geographics a:hover {
	opacity : 1;
}

#geographics a:hover h1 {
	font-size : 10em;
	opacity : 1;
	letter-spacing: 0.5em;
	margin-top:1.7em;
	text-align:center;
	width:100%;
}

#geographics a:hover {
	/*margin-top:-0.8em;*/
	text-decoration : none;
	/*font-color:rgba(300,300,300,0.8);*/
}

#geographics p{
	width : 100%;
	color : white;
	font-size : 1em;
	margin-top : 0.2em;
	margin-left : -2.5em;
	padding-left : 2.5em;
	line-height : 1.5em;
	/*background : rgba(0,0,0,0.1);*/
}


#sA {
	min-height : 100%;
	font-size : 1em;
	padding-top : 4em 0 4em 4em 4em ;
}

/*banner slideshow*/
#slideshow2 {
	margin-top:-3em;
	width:100%;
	margin-bottom:4em;
	display:block;
}
	
#slideshow2 ul, #slideshow2 li{
	margin:0;
	padding:0;
	list-style-type:none;	
} 

.slide_item{
	width : 100%;	
	position:absolute;
	left:0;
	top:-2em;
	list-style-type:none;	
} 

/* .slide_item a, .slide_item a:focus,.slide_item a:active,{
	display:none;	
}*/
 

.slide_item img{
	width : 100%;
	margin:0;
	padding:0;
	vertical-align:bottom;	
} 

 .slide_item p{
	width:100%;
	color:white;
	font-family : verdana, sans-serif;
	letter-spacing: 0.1em;
	font-size : 1em;
	Text-align : left;
	margin-top : 8.4em;
	margin-left : 0;
	padding-left : 2.5em;
	line-height : 1.8em;
	background: rgba(0,0,0,0.2); /* For browsers that do not support gradients */
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.5)); /* Standard syntax (must be last) */
	text-justify: distribute;
	hypens:none;
	-moz- hypens:none;
	text-align:center;	
}

a.next, a.prev {
	display:none;
}


#myModal_liste_projets, #myModal_presentation, #myModal_mentions_legales {
	padding : 4em;
}

#myModal_liste_projets h2, #myModal_presentation h2, #myModal_mentions_legales h2  {
	font-weight : 200;
	font-size : 0.9em;
	text-align : left;
	width : 100%;
	display : inline-block;
	font-weight : normal;
	color : black;
}

#myModal_liste_projets p, #myModal_presentation p, #myModal_mentions_legales p {
	font-size : 0.8em;
	text-align : left;
	width : 100%;
	display : inline-block;
	font-weight : normal;
	color : grey;
}

#myModal_liste_projets ul > li, #myModal_presentation ul > li  {
	font-size : 0.8em;
	text-align : left;
	width : 100%;
	display : inline-block;
	font-weight : normal;
	color : grey;
}

#myModal_liste_projets p> a:hover, #myModal_presentation p> a:hover {
	color : grey;
}


#photo aerienne {
	width : auto;
	top : 0;
	z-index :0;
	position : absolute;
}

#photo aerienne>img {
	width : 50%;
}


#presentationportfolio > p.soustitre {
	/*font-family : 'Sarina', cursive;*/
	font-size : 1.5em;
	font-weight : bold;
	text-align : left;
	color : #9EDFFF;
	margin : 0;
}

#presentationportfolio   > p.description {
	text-align : justify;
	font-size : 1.2em;
	color : #CACEB5;
	margin-top:1.5em;
	font-weight: lighter;
}


.visuallyhidden {
	display : none;
}

.chaptericon {
	width : 100%;
	display : block;
	position : left;
	margin : 0;
}

.typographie { 
	width: 25%;
	margin : 3em;
	$container.isotope({ filter: '.metal' });
	border-radius : 0.3em;
}
	
.galerie img {
	border-radius : 0.3em;
	width : 20%;
	margin :1em;

}

.galerie a:hover {
	opacity : 0.7;
}


.galerie2 img {
	background-color:blue;
}

.galerie2 a:hover {
	opacity : 0.7;
}

.galerie2: target {
	background-color:blue;
}



.bg1 {
	background-color : black;
	padding : 10px;
	border-radius: 5px 5px 5px 5px;
	overflow : hidden;
}

	
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
 
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}
 
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}
 
/**** disabling Isotope CSS3 transitions ****/
 
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}
	
	
	/*h1#myHeading{
    color: white;
    text-align: center;
    margin: 0;
    padding: 20px;
    background: #0081E7;
    margin-bottom: 13px;
}*/
 
.portfolioFilter {
	color : grey;
	font-weight : light;
    text-align: center;
    margin-bottom: 4.5em;
    margin-top:-1.5em;
	font-size : 1em;
	width : auto;
	display : block;
	top : 2em;
	position : relative;	
}
 
.portfolioFilter a {
	color : grey;
	display : block;
	width : auto;
	font-size : 1.2em;
    margin : 0;
    text-decoration:none;
    text-align : center;
}

.portfolioFilter a:hover {
	color:#3F4668;
	display : block;
}
 
.portfolioFilter a:active {
	color:#3F4668;
	display : block;
}
 
 
 .portfolioFilter a:focus {
	color:#3F4668;
	display : block;
	border:none;
}
 
 
 
img {
    margin : 0 0 3em 0;
}
 
.isotope-item {
    z-index: 2;
}
 
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

#haut_de_page {
		color: #2078C0;
}

#haut_de_page:hover {
		color : white;	
}


#s1, #s2, #s3 {
height:100em;
		position : relative;
		width :100%;
		font-size :0.8em;
}



#s2{c
	height : auto;
	position : relative;
	padding :0;
	margin:0;
	background-size : 100%;
	width : 100%;
	z-index : 2;	
}


#s21{
	height : 100%;
	width : 100%;
	text-align : center;
}

#22{
	height : 200%;
	width : 100%;
	text-align : center;
	position : relative;
}	

#slideshow { 
	position:relative;
	padding : 0;
	text-align : center;
	width:100%;
	z-index : 10;
	margin:0;
}

#slideshow 2{ 
	position:relative;
	padding : 0;
	text-align : center;
	width:100%;
	z-index : 10;
	margin:0;
}


#s23 {
	height : 100%;
	width : 100%;
	text-align : center;
}

#competences, #formation {
	padding : 1.8em;
	text-align : left;
	list-style : none;
	margin : 0;
	line-height : 1.5;
	background : rgba(255, 255, 255, 0.5);
	width : 60%;
	border-radius: 0 1em 1em 1em;	
}


#experienceprofessionnelle {
	background : rgba(255, 255, 255, 0.5);
	border-radius: 0 1em 1em 1em;
	width : 200%;
	text-align : left;	
	padding : 1.8em;
}


p.experience {
	width : auto;
	padding : 1.8em;
	text-align : left;
	list-style : none;
	margin : 0;
	line-height : 1.5;
}

#slider, #slider2, #slider3, #slider4, #slider5, #slider6, #slider7, #slider8, #slider9, #slider10, #slider11, #slider12, #slider13, #slider14, #slider15, #slider16, #slider20 {
  		position: relative;
  		max-height : 100%;
		width : 100%;
		margin-top:0;
		text-align:center;
		margin-left: auto;
  		margin-right: auto;
}

#slider figure > img, #slider2 figure > img, #slider3 figure > img, #slider4 figure > img, #slider5 figure > img, #slider6 figure > img, #slider7 figure > img, #slider8 figure > img, #slider9 figure > img, #slider10 figure > img, #slider11 figure > img, #slider12 figure > img, #slider13 figure > img, #slider14 figure > img, #slider15 figure > img, #slider16 figure > img, #slider16 figure > img, #slider20 figure > img  {
	padding : 0;
	margin-left: auto;
    margin-right: auto;
    margin-top:0;
	max-height : 100%;
	text-align:center;
	width : auto;
}

/*#slider figure.item active > img, #slider2 figure.item active > img, #slider3 figure.item active > img, #slider4 figure.item active > img, #slider5 figure.item active > img, #slider6 figure.item active > img, #slider7 figure.item active > img, #slider8 figure.item active > img, #slider9 figure.item active > img {
	padding : 0;
	margin : 0;
	max-height : 100%;
	text-align:center;
	width : 100%;
}*/

.chevron-left, .chevron-right {
background:white;
border-radius:2em;
color:black;
font-size:1.2em;
font-weight:100;
}


.container {
	width : auto;
	margin : 0;
	padding : 0;
	width : 100%;
}
		
		
#name, #firstname, #email, #objet, #message {
	color : black;
	background : none;
	border : 1px solid white;
	border-radius : 0.2em;
	display : block;
}



#subtitle { 
	font-family : 'Sarina', cursive;
	font-size : 1.4em;
	width : 100%;
	display : inline-block;
	margin : 0 0 2em 0;
	color : rgba(0,0,0,0.9);
	opacity : 0.7;
	word-spacing : 0.08em;
	letter-spacing : 0.02em;
	font-weight : 100;
}


#intro { 
	position : relative;
	padding : 0;
	text-align : center;
	display : inline-block;
	margin-bottom :0;
	margin-right : 3em;
	z-index : 1;
	float : left;
	width : 40%;
	left : 5em;
}

#intro > p { 
	font-size : 1.2em;
	margin-top : 1.8em;
}

#contact {
	/*font-family : 'Sarina', cursive;*/
	position : relative;
	display : inline-block;
	margin-top:5em;
	margin-bottom :0;
	margin-right : 3em;
	z-index : 10;

}

#contact > p {
	font-size : 1.5em;
	letter-spacing:0.05em;
	margin-top :0.5;
	/*color : rgba(0,0,0,0.9);*/
	position : relative;
	text-align : center;
	display : inline-block;
	margin-bottom :0;
	margin-right : 3em;
	z-index : 10;
	float : none;

}

#langues {
	height:100px;
}

#language_menu {
	display : block;
	text-align : center;
	/*float : right;*/
	margin-top : 0;
	margin-bottom: 6em;
	z-index : 6;
}

#language_menu > li {
	display : inline-block;
	line-height : 0.3em;
}

#language_menu > li > a {
	opacity : 0.7;
}

#language_menu > li > a:hover {
	opacity : 1;
}


	/*
#langues {
	display : block;
	text-align : center;
	margin-top : 0;
	margin-bottom: 6em;
	z-index : 6;
}

#langues > li {
	display : inline-block;
	line-height : 0.3em;
}

#langues > li > a {
	opacity : 0.8;
}

#langues > li > a:hover {
	opacity : 1;
}
*/

img.cocarde {
	width : 4em;
	margin : 0.7em 0.7em 0 0.7em;
}

#presentationportfolio { 
	position : relative;
	padding : 0;
	text-align : center;
	display : inline-block;
	margin-bottom :0;
	left : 5em;
	z-index : 1;
	width : 100%;
}

#isotope { 
	position: relative;
	padding : 0;
	text-align : center;
	display : inline-block;
	margin-bottom :0;
	margin-right : 3em;
	margin-left : 0;
	z-index : 1;
	float : none;
	width : 100%;	
}



.container {
	width : 100%;
}

.portfolioContainer > a{
	display : inline-block;
	text-decoration:none;
	text-align:center;

}

.portfolioContainer > a > img {
	opacity : 1;
	margin : 2.5em 2.5em 1.5em 2.5em;
	width : 15em;
	height : auto;
	display : block;
	

	
}

.portfolioContainer > a > img:hover {
	opacity : 1;
	
		filter: saturate(500%);
        -webkit-filter: saturate(500%);
        -moz-filter: saturate(500%);
        -o-filter: saturate(500%);
        -ms-filter: saturate(500%);
	
}


#galerie { 
	position : relative;
	padding : 0;
	text-align : center;
	margin-top :4em;
	z-index : 5;
	float : right;
	width : 100%;
}


#menu { 
	text-align : center;
	margin : 0 0 0 0 ;
	width : auto;
	z-index : 400;
}


#menu a {
		color : #868D89;
		text-decoration : none;
}
 
#menu ul, #menu li {
	display : inline;
	text-align : center;
	padding:0;
	z-index : 400;
}


#menu > ul > li > a {
	text-align:center;
	display : inline-block;
	font-size : 2em;
	width : 18%;
	margin:0;
	z-index : 400;
} 

#menu > ul > li > a:hover, a:focus, a:active  {
	color : white;
	display : inline-block;
	z-index : 400;

} 

#menuS2 {
	background:#898381;
	color : white;
	font-size : 0.5em;
	height : 3.4em;
	padding-top : 2px;
	padding-bottom : 2em;
	width : 100%;
	display : block;
	position : relative;
	margin-top : 0;
	margin-bottom : 1.8em;
	line-height : 1.8em;
	text-align : center;
}

#menuS2 a {
		padding : 0;
		text-align : left;
		font-weight : 200;
		color : white;
		display : inline-block;
		text-decoration : none;
		vertical-align:middle;
}
 
#menuS2 a:hover, #menu a:focus, #menu a:active { 
	color:#b6eafb;
	text-decoration : none;
	display : inline-block;
	text-align : left;
	margin-left : 0;
}



#menuS2 > ul {
	display : inline;
	text-align : center;
	margin: 0;
	padding : 0;
	vertical-align:middle;
	width:100%;
}


#menuS2 > ul > li {
	border-right: 1px solid;
	display : inline-block;
	font-size : 2em;
	font-weight : 100;
	vertical-align:middle;
	width : 18%;
}

#menuS2 > ul > li > a {
	letter-spacing: 0.4em;
}


#portfolio_communication {
	margin-top : 0;
}

#portfolio_communication > a > img {
	border-radius : 0.3em;
	margin : 2.5em;	
}

.portfolio_menu {
	display: inline-block;
	text-align:center;
	margin: 20px;
}

.portfolio_icon {
	width: 200px;

	
}

.portfolio_icon:hover {
	width: 200px;
	
        filter: invert(1);
        -webkit-filter: invert(1);
        -moz-filter: invert(1);
        -o-filter: invert(1);
        -ms-filter: invert(1);


}


#cv { 
	position : relative;
	padding : 0;
	text-align : center;
	display : inline-block;
	margin-bottom :0;
	margin-right : 3em;
	z-index : 1;
	float : left;
	width : 40%;
	left : 5em;
 	/*background : rgba(200,200,200,0.4);
  	border-radius : 10px;*/
}

#cv > p { 
	font-size : 1.2em;
	margin-top : 1.8em;
	z-index:20;
}


 #cv > p.soustitre {
	/*font-family : 'Sarina', cursive;*/
	font-size : 1.5em;
	font-weight : bold;
	text-align : left;
	color : #9EDFFF;
	margin : 0 0 1em 0;
}

#cv > p.description {
	text-align : left;
	font-size : 1.2em;
	color : black;
	margin-top:0;
	font-weight: lighter;
	width : 100%;
}

#cv > p.description:hover {
	color : white;
}





#menuS4 a {
		font-weight : 200;
		color : black;
		display : inline-block;
		text-decoration: none;
		text-align : center;
		padding : 0;
		margin : 0;
}
 
#menuS4 a:hover, #menu a:focus, #menu a:active { 
	color : white;
	text-decoration : none;
	display : inline-block;

}

#menuS4 ul {
	display : inline;
	text-align : center;
	padding : 0;
	margin : 0;
}


#menuS4 > ul > li {
	text-align : center;
	display : inline-block;
	width : 18%;
	margin-right : 1em;
	margin-left : 1em;
	font-size : 1.5em;
	font-weight : 200;
}


#volet {
    width : 40em;
    height : 30em;
	background: url("../medias/plateauhd.jpg") no-repeat center;
	background-size : cover;
	background-color : green;
	border-radius : 0 1em 1em 0;
	position : fixed;
    left: -40em; top : 18em;
	-webkit-transition : all .5s ease-in;
    transition: all .5s ease-in;
	z-index : 20;
}

#volet a.ouvrir {
    padding:10px 25px;
    background: black;
    color: black;
    opacity : 0.6;
    text-decoration: none;
	position: absolute;
    right: -70px;
    top: 190px;

    /* quelques styles CSS3 */
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    border-radius: 0 0 8px 8px;
}

#volet a.ouvrir:hover {
    color: white;
}

#volet a.fermer {
    /* les styles donnés précédemment */
    padding:10px 25px;
    background: black;
    opacity : 0.6;
    color: white;
    text-decoration: none;
	position: absolute;
    right: -70px;
    top: 190px;

    /* quelques styles CSS3 */
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    border-radius: 0 0 8px 8px;
    display:none;
}

#volet a.fermer:hover {
    color: grey;
}

#volet:target {
    left: 0; top:3em;

}

#volet_clos:target #volet {
    left: -40em;


}

#volet:target a.ouvrir {
     display: none;
}

#volet:target a.fermer {
    display: block;
}



#menuS3 {
		margin : 2em 0 0 0;
}



#menuS3 > ul > li > a  {
		font-size : 2em;
		color : grey;
		text-decoration : none;
		display : block;
		padding : 0;
		margin : 0.5em 0 0 0em;
		width : auto;
}


#menuS3 a:hover, #menuS3 a:focus, #menuS3 a:active { 
	color : white;
	text-decoration : none;
}






label {
	color : grey;
}

.wrapper {
    width:;
    margin:;
}








/* ==============
    MOBILE: Menu
   ============== 

nav ul {
    margin:;
    padding:;
}

nav a {
    display:;
    margin-bottom:;
    padding:;

    text-align: ;
    text-decoration:;
    font-weight:;

    color:;
    background:;
}

nav a:hover,
nav a:visited {
    color: ;
}

nav a:hover {
    text-decoration:;
}

/* ==============
    MOBILE: Main
   ==============

.main {
    padding: 30px 0;
}

.main article h1 {
    font-size: 2em;
}

.main aside {
    color: white;
    padding: 0px 5% 10px;
}

.footer-container footer {
    color: white;
    padding: 20px 0;
}
*/

/* ===============
    ALL: IE Fixes
   ===============

.ie7 .title {
    padding-top: 20px;
}
 */














/* ==========================================================================
   Media Queries
   ==========================================================================

@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== 

    nav a {
        float: left;
        width: 27%;
        margin: 0 1.7%;
        padding: 25px 2%;
        margin-bottom: 0;
    }

    nav li:first-child a {
        margin-left: 0;
    }

    nav li:last-child a {
        margin-right: 0;
    }

/* ========================
    INTERMEDIATE: IE Fixes
   ======================== 

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }
}

@media only screen and (min-width: 768px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== 

    .header-container,
    .main aside {
        -webkit-box-shadow: 0 5px 10px #aaa;
           -moz-box-shadow: 0 5px 10px #aaa;
                box-shadow: 0 5px 10px #aaa;
    }

/* ============
    WIDE: Menu
   ============ 

    .title {
        float: left;
    }

    nav {
        float: right;
        width: 38%;
    }

/* ============
    WIDE: Main
   ============ 

    .main article {
        float: left;
        width: 57%;
    }

    .main aside {
        float: right;
        width: 28%;
    }
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== 

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins 
        margin: 0 auto;
    }
}

/* ==========================================================================
   Helper classes
   ========================================================================== 

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== 

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}