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

body {
	height : 100%;
	font-size : 1.4em;

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

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

img:hover {
		color : red;
}


section  {
	min-height : 100%;
}


header {
	min-height : 200%;
	width : 100%;
	background : url("../medias/header_background.jpg")  no-repeat 0 -28em ;
 	background-size : cover;
 	background-color : #5081AC;
	color : black;
	padding-top : 2em;
	z-index : 30;
	}
	
	
footer {
	position : fixed;
	bottom : 0;
	width : 100%;
	position : fixed;
	display : block;
	z-index : 3;
	color : black;
}

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


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

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

h1 {
	color : #136EC4; /*#126DCE; #2F7DD6; #2761A3;#2078C0; */
	font-size : 11.3em;
	text-align : center;
	margin : 0;
	width : auto;
}



h2, h3 {
	color : #9EDFFF;/*#B2C9FF; /*#63CDFF; /*#4CBBF7;/* /*#90B2D6;/*#136EC4;/*#30BAFF;/*#87CBFF;/*#9EDFFF; /*#8CADD6;*/
}



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


h3 {
	font-size : 2.5em;
	text-align : center;
	width : 100%;
	display : inline-block;
	padding-top : 0.5em;
	font-weight : bold;
	z-index : 8;
}


h4 {
	font-size : 1em;
	padding : 0;
	margin : 0;
	/*text-align : left;*/
}


a {
	color : black;
	font-style : normal;
}



a:hover {
	color : white;
	text-decoration: none;
}



span {
	font-size : 0.5em;
}


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;
}	
	

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

}

fieldset  {
	display : none;
}


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

#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;
}



#langues {
	display : inline-block;
	text-align : center;
	float : right;
	margin-top : 2em;
	margin-right : 2em;
	z-index : 8;
}

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

#ding {
	height : 1em;
	padding:3em;
	display:block;
	text-align : center;
	background : url("../medias/cocarde_grise.svg") no-repeat center;
	margin:0;
	z-index : 200;
}

#sd_card {
	position : relative;
	margin-left : 70em;
	margin-top : -35em;
	width : 4%;
}

#calepin {
	position : relative;
	margin-left : 55em;
	margin-top : -14em;
	width : 30%;
}



img.cocarde {
	width : 2em;
	margin : 0.7em;
}

.name {
	color : pink;
}

.placeholder {
	width : 50px;
}

.form-group {
	color : white;

}

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


.typographie { 
	width: 25%;
	margin : 3em;
	$container.isotope({ filter: '.metal' });
	border-radius : 0.3em;
}
	
.illustration { 
	border-radius : 0.3em;
	width: 25%;
	margin : 3em;
	$container.isotope({ filter: '.metal' });
}
	
.photos { 
	border-radius : 0.3em;
	width: 25%; 
	margin : 3em;
	$container.isotope({ filter: '.metal' });
}
	
.graphisme{ 
	border-radius : 0.3em;
	width: 25%;
	margin : 3em;
	$container.isotope({ filter: '.metal' });
}

.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;
}
	
	
	
	
/*.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  height: auto;
position : center;
}*/
	
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  	display: block;
 	height: 100%;
	margin:0;
}
	
	/*h1#myHeading{
    color: white;
    text-align: center;
    margin: 0;
    padding: 20px;
    background: #0081E7;
    margin-bottom: 13px;
}*/
 
.portfolioFilter {
	color:black;
    text-align: center;
    margin-bottom: 2em;
    margin-top:-2em;
	font-size : 1.5em;
	width : auto;
	display : block;
	top : 2em;
	position : relative;	
}
 
.portfolioFilter a {

    margin-left: 4em;
    margin-right: 4em;
    text-decoration:none;
}
 
.portfolioFilter a hover{
	color:white;
    margin-right: 0;
    text-decoration:none;
}
 
img {
    margin : 0 0 3em 0;
}
 
.isotope-item {
    z-index: 2;
}
 
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

#carteillustree {
	width : 70%;
	margin : 2em;

}

/*#mouette {
	display : none;
	font-size : 5em;
	color : white;
	opacity : 0.5;
	text-align:center;
}*/

#haut_de_page {
		color: #2078C0;
}

#haut_de_page:hover {
		color : white;	
}
	

#goeland:hover > p#mouette {
		display: block;
}

#oiseau {
	/*display : none;*/
	height:8em;
	top : 32em;
	text-align : center;
	opacity : 0;
	   -webkit-transition: opacity 2s;
   -moz-transition: opacity 2s;
   -o-transition: opacity 2s;
   transition: opacity 2s;
   z-index : 1;

}
	
/*#oiseau:hover {
	display : none;
	text-align : center;
}*/
	
	
#oiseau p {
	z-index : 5;
	color : white;
	font-size : 7em;
	font-style : normal;
	opacity : 0.5;

	/*Fonctionne déjà sur webkit */
		   -webkit-transition-property: opacity;
				-webkit-transition-duration: 2s;
				
				/* Bientôt supporté par Firefox */
        	-moz-transition-property: opacity;
				-moz-transition-duration: 2s;
				
						/* … et lorsque ce sera standardisé */
						transition-property: opacity;
						transition-duration: 2s;
	
}
	


/* Insertion du l'icone fontello directement sur l'éément (sans utiliser la classe fournie, en appliquant simplement les même règles ) */
/*#haut_de_page:before {
	font-family: "mouette";
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: inline-block;
	text-decoration: inherit;
	width: 3em;
	margin-right: .5em;
	margin-left: .2em;
	text-align: center;
	font-variant: normal;
	text-transform: none;
	line-height: 1em;
	content: '\6d';
}*/


#pegase {
		width : 30%;
		top: 10%;
		left : 35%;
		opacity :0.1;
		position : absolute;
		z-index : 5;
		text-align : center;
}

#s1, #s2, #s3 {

		position : relative;
		width :100%;
		font-size :0.8em;
}

#s1 {
	/*background-color : rgb(51,130,174);*/
	/*background-color : rgba(89,130,174,0.5);
	height:100%;*/
	/*background-image : url("../medias/fondS1.jpg"); */
	/*opacity : 0.9;*/
	/* background-size:contain;
	background-repeat:no-repeat;
	/*background-position:bottom;*/
	background-color : #5081AC; 
	position : relative;
	padding : 0;
	width : 100%;
}

#nuagesS1 {
	position : absolute;
	display : block;
	opacity : 0.5;
	width : 100%;
	margin : 0;
	top : 28em;
}


#s2{
	height : auto;
	position : relative;
	padding :0;
	margin:0;
	/*background-image : url("../medias/S1_background.jpg");
	background-repeat : no-repeat;
	background-position:top;
	background-size : 100%;
	background-color : #5081AC; */
	width : 100%;
	z-index : 2;
	
}


#s21{
	height : 100%;
	width : 100%;
	text-align : center;
	background-color : #5081AC;
}

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

#slideshow { 
	position:relative;
	padding : 0;
	text-align : center;
	width:100%;
	z-index : 10;
	margin-bottom : 30%;
	background-color : #5081AC;
}

/*.carousel-inner figure img {
		/*max-height : 50em;
		height : 40em;
		width : 100%;
}*/


#s23 {
	height : 100%;
	width : 100%;
	text-align : center;
	background-color : #5081AC;
}


#s3 {
	padding : 0;
	height:100%;
	width : 100%;
	background-image :url("../medias/S2_background.jpg");
	background-size : cover;
	background-repeat : no-repeat;
	background-position : center;
	position : relative;
	background-color : #5081AC;
}


#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 {
  		position: relative;
  		height:auto;
		width : 100%;
		top : -2em;
		text-align:center;
}

#slider figure > img {
		max-height : 100%;
		text-align:center;
		width : 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;
}

#join {
	height : 200%;
}

#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;

	
	 	/*background : rgba(200,200,200,0.4);*/
  	/*border-radius : 1em;
	border : white 0.1em solid;*/
}

#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;
	
	 	/*background : rgba(200,200,200,0.4);*/
  	/*border-radius : 1em;
	border : white 0.1em solid;*/
}


#presentationportfolio { 
	background-image : url("../medias/S1_background.jpg");
	background-repeat : no-repeat;
	background-position:top;
	background-size : 100%;
	height:80em;
	position : relative;
	padding : 0;
	text-align : center;
	display : inline-block;
	margin-bottom :0;
	left : 0em;
	padding-left:5em;
	z-index : 1;
	width : 100%;
}

/*#slider {
	text-align : center;
	margin-right : auto;
	margin-left : auto;
	max-width : 80%;
	padding : 0;
}*/

/*#slider {
	text-align : center;
	height: auto;
	top:-7em;
	left:25%;
	position:relative;
}*/



#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%;	
	/*background-color:#86A2C5;*/
	background:url("../medias/Cargo.JPG");
	background-size : cover;
	background-repeat : no-repeat;
	background-position : top;
}


.container {
	width : 100%;
}



.portfolioContainer > a > img {
	margin : 3.5em;
	width : 65%;
}



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

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

form {
	width : 40%;
	height : auto;
	position : relative;
	z-index : 2;
	display : inline-block;
	margin-right:10em;
	left : 5em;
	top : 10.5em;
	text-align : center;
	border-radius : 1em;
	border-color : none;
	color : #9EDFFF;
}


fieldset {
  border-radius : 1em;
  border-color : none;
  padding : 2em 2em 0 2em;
  background : rgba(200,200,200,0.5);
  height : 20%;
  width : 100%;
  color:#9EDFFF;
}

legend {
	text-align: center;
	font-size : 1em;
	padding : 0 1em 1em;
}


input, textarea {
	width : 100%;
	display : none;
}

button {	
	width : 9em;
	height : 2em;
	color : black;
  	background : rgba(200,200,200,0.5);
	border-radius : 0.5em;
	position : center;
	border-color : none;
	border : solid 1px white;
}

#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;

} 


/*#menu a:hover, #menu a:focus, #menu a:active { 
	color : white;
	display : inline;
		margin : 2em 0 ;
}*/





#menuS2 {
	text-align : center;
	font-size : 1em;
	width : 100%;
	margin-left:-15em;
	display : inline-block;
	top : 2em;
	position : relative;	
}

#menuS2 a {
		font-weight : 200;
		color : black;
		display : inline-block;
		text-decoration: none;
}
 
#menuS2 a:hover, #menu a:focus, #menu a:active { 
	color : white;
	text-decoration : none;
	display : inline-block;

}

#menuS2 ul {
	display : inline;
	text-align : center;
}


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


#portfolio_communication {
	margin-top : 0;
}

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




#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;

}


.visuallyhidden {
	display : none;
}



label {
	color : grey;
}

.wrapper {
    width:;
    margin:;
}




/*#goeland {
	text-align : center;
	position : relative;
	height : 20%;
}


#goeland img {

		display : inline-block;
		top: 7%;
		left : 35%;
		opacity :0.8;
		-webkit-transition: opacity 1s ease-in-out;
  		-moz-transition: opacity 1s ease-in-out;
 		 -o-transition: opacity 1s ease-in-out;
 		 transition: opacity 1s ease-in-out;
}








/* ==============
    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;
    }
}