/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #1A171B;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ---------------------------------------------------------
--- Reset */

	html { -webkit-tap-highlight-color: transparent; }

	figure {
		margin: 0;
/* 		padding: 1em; */
	}

	article { position: relative; }

	table {
		table-layout: fixed;
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
	}

	h1 + p,
	h2 + p,
	h3 + p { margin-top: 0; }

	p:first-child { margin-top: 0; }



	/* max values */
	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	video,
	svg { max-width: 100%; outline:none}

	body > script { display: none !important; }


/* reset form */

	button,
	input,
	optgroup,
	select,
	textarea {
	  margin: 0;
	  font: inherit;
	  color: inherit;
	}

	button {
	  overflow: visible;
	}

	button,
	select {
	  text-transform: none;
	}

	button,
	html input[type="button"],
	input[type="reset"],
	input[type="submit"] {
	  -webkit-appearance: button;
	  cursor: pointer;
	}

	button[disabled],
	html input[disabled] {
	  cursor: default;
	}

	button::-moz-focus-inner,
	input::-moz-focus-inner {
	  padding: 0;
	  border: 0;
	}

	input {
	  line-height: normal;
	}

	input[type="checkbox"],
	input[type="radio"] {
	  -webkit-box-sizing: border-box;
	          box-sizing: border-box;
	  padding: 0;
	}

	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
	  height: auto;
	}

	input[type="search"] {
	  -webkit-box-sizing: content-box;
	          box-sizing: content-box;
	  -webkit-appearance: textfield;
	}

	input[type="search"]::-webkit-search-cancel-button,
	input[type="search"]::-webkit-search-decoration {
	  -webkit-appearance: none;
	}

	legend {
	  padding: 0;
	  border: 0;
	}

	textarea {
	  overflow: auto;
	}

	optgroup {
	  font-weight: bold;
	}


  /**
  * Modall Shop
  */


  #shopModalCloseBtn {
    position: absolute;
    top: 0;
    right: 14px;
    font-size: 32px;
    transform: rotate(45deg);
    cursor: pointer;

 }

 #shopModalContent {
   text-align: center;
   padding: 20px;
   position: relative;
   margin-top: 190px;
 }

  #shopModalWrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10;
    transition: all .25s ease;
  }

  #shopModal {
    position: absolute;
    top: calc(50% - 250px);
    left: calc(50% - 400px);
    width: 800px;
    height: 500px;
    background: blue;
  }

  .modal-hidden {
    display: none;
  }

  #popup1{

     font-size: 32px;

  }

  #popup2{
    font-size: 25px;
    font-weight: lighter;
  }

 #popup3{
   margin-top: 150px;
   font-weight: lighter;

 }


	button,
	[role="button"],
	input,
	label,
	select,
	summary,
	textarea {
	  -ms-touch-action: manipulation;
	      touch-action: manipulation;
	}


	input,
	button,
	select,
	textarea {
	  margin: 0;
	  line-height: inherit;
	  border-radius: 0;
	  border: 0;
	}

	input[type="text"], input[type="password"],
	textarea, select {
	  font-size: 16px;
	}

	textarea {
	  resize: vertical;
	}

	fieldset {
	  min-width: 0;
	  padding: 0;
	  margin: 0;
	  border: 0;
	}


	input[type="search"] {
	  -webkit-box-sizing: inherit;
	          box-sizing: inherit;
	  -webkit-appearance: none;
	}

	/* Formulaire */

	.b-form__grp {
		display: block;
		overflow: hidden;
	}

	.b-form__grp > * { float: left; }

	.b-form__input,
	.b-form__textarea {
		border: 1px solid #1A171B;
	}



	/* tableaux */

	table th,
	table td {
		/*padding: 1.725em 0;*/
	}


/* ---------------------------------------------------------
--- Typo */

	html {
		font-size: 1em;
		line-height: 1.4;

		}
		*,
		*::before,
		*::after {
		-webkit-box-sizing: inherit;
		        box-sizing: inherit;
		}


	body,
	.body {
		font-weight: normal;
		font-size: 14px;
		cursor: url('../img/cursor.png') 4 12, auto;
	}

	body a
	 {
		cursor: url('../img/cursor.png') 4 12, auto !important;
	}


	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		padding: 0;
		font-weight: normal;
		font-style: normal;
	}

	.bold {
		font-weight: bold;
	}

	.bigger { font-size: 1.4em; }

	.smaller { font-size: .8em; }


	ul {
		list-style-type: none;
		padding: 0;
		margin:0;
	}


	a {
		text-decoration: none;
	}

	input::-webkit-input-placeholder {
	color: #ff4040 !important;
	}

	textarea:-moz-placeholder { /* Firefox 18- */
	input: #ff4040 !important;
	}

	textarea::-moz-placeholder {  /* Firefox 19+ */
	input: #ff4040 !important;
	}

	textarea:-ms-input-placeholder {
	input: #ff4040 !important;
	}

	.clear {
		clear:both;
	}

	a {
		color:#FFF;
		word-wrap: break-word;
	}

	a:hover {
		color:#FFF;
	}


	p {
		line-height:1.3;

	}

	.underline:hover {
		text-decoration: underline;
	}

	.hide {
		display: none;
	}

	p {
		padding:0;
		margin:0;
	}

	strong, b, .bold {
		font-family: 'Roboto', sans-serif;
		font-weight: 500 !important;
		font-style: normal;
	}

	.medium {
		font-family: 'Roboto', sans-serif;
		font-weight: 400 !important;
		font-style: normal;
	}

	em {
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-style: italic;
	}

	.o-embed {
		margin: auto;
		}

		.o-embed .o-embed-content {
		position: relative;
		height: 0;
		padding-bottom: 56.25%;
		}

		.o-embed  .o-embed-content iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none !important;
		}

		iframe {
			width: calc(100vw - 200px);
			height: 100%;
		}

/* ---------------------------------------------------------
--- Layout -- */
	:root {
	  --height-footer: 40px;
	}


	html,
	body {
		color:#FFF;

	}

	body {
		background-color: #000;
		font-family: 'Roboto', sans-serif;

	}

	body {
		margin: 0;
		padding: 0;
	}

	a, .is-cursor {
		cursor: url('../img/cursor.png') 4 12, auto;
	}

	#videoHome {
	  position: fixed;
	  right: 0;
	  bottom: 0;
	  min-width: 100%;
	  min-height: 100%;
	}

#showreel {
  width:100vw;
  height:100vh;
}

	.container {
		display: flex;
		height: calc(100vh - 100px);
		width: calc(100vw - 200px);
		padding: 50px;
		padding-left: 100px;

	}
	
	.container.is-home {
		height: auto;
	
	}

	nav {
    font-family: 'Roboto Mono';
		float: left;
    width: calc(100vh - 100px);
    text-align: center;
	position: fixed;
    right: 100%;
    white-space: nowrap;
    height: 200px;
    padding-top:40px;
    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: right top;
    -moz-transform: rotate(270deg);
    -moz-transform-origin: right top;
    -ms-transform: rotate(270deg);
    -ms-transform-origin: right top;
    -o-transform: rotate(270deg);
    -o-transform-origin: right top;
    transform: rotate(270deg);
    transform-origin: right top;
	}

	.logo {
		font-family: 'Roboto';
	}

	.option {
		float: left;
    width: calc(100vh - 100px);
    text-align: center;
	position: fixed;
    right:100px;
    white-space: nowrap;
    height: 200px;
    padding-top:40px;
    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: right top;
    -moz-transform: rotate(270deg);
    -moz-transform-origin: right top;
    -ms-transform: rotate(270deg);
    -ms-transform-origin: right top;
    -o-transform: rotate(270deg);
    -o-transform-origin: right top;
    transform: rotate(270deg);
    transform-origin: right top;
	}


	.primary-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.sub-nav {
		display: inline-flex;
		margin: 0 -5px;
	}
	.sub-nav li {
		margin: 0 15px;
	}

	.sub-nav li.selected {
		text-decoration: line-through;
	}


	.l-main {
		width:100%;
		height:100%;
		position: relative;
		z-index:1;
		margin-top:30px;
		margin-left:230px;
		margin-right:30px;
	}

	.project-list {
		flex: 1 1 auto;
  overflow: auto;
  		position: relative;

	}

	.project-list::-webkit-scrollbar {
    display: none;
}

	.project-list .zone-1 {
		position: absolute;
		left:0;
		top:0;
		width:25%;
		height:100%;
		pointer-events: none;
	}



	.project-list .zone-2 {
		position: absolute;
		right:0;
		top:0;
		width:40%;
		height:100%;
	}

	.project-list .item {
		display: block;
		margin-bottom:0px;
		font-size: 50px;
    font-weight: 100;
    margin-left: 15%;

	}

	.project-list .item sup, .project-detail .titre sup {
		font-size: 20px;
	}

	.project-list .item.inactif, .project-grid .item.inactif {
		opacity:0;
	}

	.project-list .item a:hover {
		/*text-decoration:line-through;*/
	}

	.project-list .item a:hover {
	    display: inline-block;
	    text-decoration: none;
	    position: relative;
	  }

	.project-list .item a:hover:after {
	    content: '';
	    display: block;
	    width: 100%;
	    height: 50%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    border-bottom: 3px solid;
	}

	.project-list .imgList {
		position: absolute;
		left:0;
		z-index:9999;
	}

	.project-list .imgList img {
		width:100%;
	}

	.bottom-nav.rotate {
		transform: rotate(270deg);
		width: 20px;
	}

	.project-grid {
		display:grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.project-grid .item {
		/*display: inline-grid;
		vertical-align: bottom;
		margin-bottom:20px;*/
	}

	.project-grid .item.marge {
		/*margin-right:20px;*/
	}

	.project-grid .item.col-25 {
		width:calc(25% - 20px);
	}

	.project-grid .item.col-33 {
		/*width:calc(33.3333% - 20px);
		width:33.3333%;*/
	}

	.project-grid .item.col-50 {
		width:calc(50% - 20px);
	}

	.project-grid .item.col-66 {
		width:calc(66.6666% - 20px);
	}

	.project-grid .item.col-75 {
		width:calc(75% - 20px);
	}

	.project-grid .item.col-100 {
		width:100%;
	}



	.project-grid .item video {
		width: 100% !important;
		height: auto !important; /* à la place */
		aspect-ratio: 16 / 9; /* ou 9 / 16 selon vos vidéos */
		object-fit: cover;
		display: block; /* pour supprimer un éventuel espace sous l'élément */
	}

	.project-grid .item img {
		width:100%;
	}

	.project-detail {
		display: inline-block;
		width:100%;
		height:100%;
	}

	.project-detail .titre {
		height:60px;
		width:100%;
		vertical-align: top;
	}

	.project-detail .titre h1 {
		font-size:50px;
		padding-left:300px;
		float:left;
    font-weight:lighter;
	}

	.plus-texte {
		float:right;
	}

	.plus-texte img {
		width:20px;
	}

	.content {
		position: relative;
	}

	.texte-projet {
		position: absolute;
		left:0;
		top:0;
		width:100%;
		background-color: #000;
		padding-bottom:40px;
    padding-top:50px;
		z-index:999;
		padding-left:300px;
	}
	.texte-projet p {
		width:70%;
		max-width:550px;
    font-weight: lighter;
	}

	.project-detail .content {
		display: inline-block;
		margin-top:40px;
		width:100%;
		height:calc(100% - 110px);
	}

	.swiper-container.projet {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper-container.projet .swiper-slide {
	    width:auto;
	    height:100%;
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-container.projet .swiper-slide img {
	   width:auto;
	   height:100%;
	}



	.tampon {
		opacity: 0;
	}

	.swiper-slide.swiper-slide-active {
		/*border:1px solid red;*/
	}

	.about {
		display: inline-block;
		width:100%;
		height:100%;
font-weight: lighter;
	}

/*.about .col-right {
  display:none;
  	}*/

	.about .col-left,.about .col-right {
		display: inline-block;
		width:49%;
		height:100%;
		position: relative;
		vertical-align: top;
	}

      
	.about .bottom {
		position: absolute;
		width:100%;
		bottom:0;
	}


	.about .presentation {
		width:65%;
		margin-left: auto;
		margin-right:auto;
	}

	.about .col-left .contact {
		width:65%;
		margin-left: auto;
		margin-right:auto;
    padding-bottom: 5%;
    border-top:black;
    border-top-style: solid;
    border-top-color:white;
    border-top-width:1px;
    padding-top:5%;
    border-bottom:white;
    border-bottom-style: solid;
    border-bottom-color:white;
    border-bottom-width: 1px;
    padding-top:5%;
	}

	.about .col-left .contact .contact-left,.about .col-left .contact .contact-right {
		display: inline-block;
		width:calc(50% - 10px);
		vertical-align: top;
	}

	.about .col-left .contact .contact-left {
		margin-right:10px;
	}

  .about .col-left .contact .contact-bottom {
		padding-top: 7%;
    border-top: black;
    border-top-style: solid;
    border-top-color: black;
    border-top-width: 1px;

	}

	.about .col-left .rs {
		width:65%;
		margin-left: auto;
		margin-right:auto;
		margin-top:40px;
	}

	.about .bloc{
		width:100%;
	}

	.about .bloc.work{
		margin-bottom:60px;
	}

	.about .bloc.projet{
		margin-top:20px;

	}

	.about .bloc .bloc-left, .about .bloc .bloc-right{
		display: inline-block;
		width:49%;
		vertical-align: top;
    font-weight: lighter;
	}

	.about .imgList {
		position: absolute;
		left:0;
		z-index:999999999;
	}

	.about .imgList img,.about .imgList video  {
		width:200px;
	}

	/* reset/remove right position so scrollbar appears on left */
	.mCustomScrollbar .mCSB_scrollTools{
	  right: auto;
	}

	/* switch margin from right to left */
	.mCustomScrollbar .mCSB_inside > .mCSB_container{
	  margin-right: 0;
	  margin-left: 30px;
	}

	.nav-desktop {
		display:block;
	}

	.nav-mobile {
		display:none;
	}

	.hide {
		display:none !important;
	}

	.hide-mobile {
		display:block !important;
	}

	.hide-desktop {
		display:none !important;
	}





@media all and (max-width: 1100px) {

	.project-list .item a:hover {
	    display: inline-block;
	    text-decoration: none;
	    position: relative;
	  }

	.project-list .item a:hover:after {
	    content: '';
	    display: block;
	    width: 100%;
	    height: 50%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    border-bottom: 1px solid;
	}

	.work-mobile {
		font-style: italic;
	}

  .texte-projet {
		position: absolute;
		left:0;
		top:0;
		width:100%;
		background-color: #000;
		padding-bottom:40px;
    padding-top:50px;
		z-index:999;
		padding-left:10px;
	}

  .project-list .item sup, .project-detail .titre sup {
		font-size: 10px;
	}

  .project-list .item {
		display: block;
		margin-bottom:0px;
		font-size: 20px;
    font-weight: lighter;
    line-height:1.4;
    margin-left:0;
	}

	.hide-mobile {
		display:none !important;
	}

	.nav-desktop {
		display:none;
	}

	.hide-desktop {
		display:block !important;
	}

	.nav-mobile {
		display:block;
		float: none;
    width: calc(100% - 40px);
    height:100px;
    text-align: center;
	position: fixed;
    bottom:0;
    left:0;
    right:auto;
    white-space: nowrap;
    padding-top:0px;
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: right top;
    -moz-transform: rotate(0deg);
    -moz-transform-origin: right top;
    -ms-transform: rotate(0deg);
    -ms-transform-origin: right top;
    -o-transform: rotate(0deg);
    -o-transform-origin: right top;
    transform: rotate(0deg);
    transform-origin: right top;
    padding-left:20px;
    padding-right: 20px;
    padding-bottom:20px;
    background-color: #000;
    z-index:9999;
	}

	.nav-mobile .menu {
		width:50%;
		float:left;
		text-align: left;
		padding-top: 20px;
	}

	.nav-mobile .menu img.active {
		 transform: rotate(180deg);
	    transform-origin: right top;
	    margin-top: 77px;
	    margin-left: -15px;
	}

	.nav-mobile .logo {
		width:auto;
		float:right;
		text-align: right;
		-webkit-transform: rotate(270deg);
	    -webkit-transform-origin: right top;
	    -moz-transform: rotate(270deg);
	    -moz-transform-origin: right top;
	    -ms-transform: rotate(270deg);
	    -ms-transform-origin: right top;
	    -o-transform: rotate(270deg);
	    -o-transform-origin: right top;
	    transform: rotate(270deg);
	    transform-origin: right top;
    	margin-right:15px;
    	margin-top: 25px;
	}

	.nav-mobile img {
		width:12px;
	}

	.option {
		display:none;
	}

	.container {
	    display: flex;
	    height: auto;
	    width: 100%;
	    padding: 0;
	    padding-left: 0;
	    padding-bottom:100px;
	}
	
	body {
	  overflow: auto;             /* enable scrolling */
	  scrollbar-width: none;      /* Firefox */
	}
	
	body::-webkit-scrollbar {      /* Chrome, Safari */
	  display: none;
	}

	.project-grid {
		padding-bottom:100px;
		display:block;
	}
	
	.project-grid .item video {
		width: 100% !important;
		height:auto !important;
		object-fit: cover;
	}

	nav, .zone-1, .zone-2 {
    	display: none;
    }

    .menu-mobile {
	    position: fixed;
	    left:0px;
	    top:0px;
	    padding-left:20px;
	    z-index:999999999;
	    width:100%;
	    height:calc(100% - 120px);
	    display:inline-flex;
	    background-color: #000;
	    vertical-align: middle;
	    align-items: center;
    }

    .menu-mobile ul li {
	    margin-bottom:20px;
    }

    .menu-mobile ul li.marge-top {
	    margin-top:60px;
    }

    .nav-mobile-grid {
	    position:fixed;
	    right:20px;
	    top:20px;
	    z-index:9999;
    }

    .project-list, .project-detail, .about  {
	    height:fit-content;
	    padding-bottom:140px;
    }

    .project-detail .content {
	    height:auto;
    }

    .project-detail .swiper-container {
	   overflow: visible;
   }

    .project-detail .swiper-container .swiper-wrapper {
	   display:block;
   }

   .project-detail .swiper-container .swiper-slide {
	   display:inline-block;
	   margin-bottom:20px;
	   width:100% !important;
	   height:auto;
	   vertical-align: top;
   }

   .swiper-container .swiper-slide img, .swiper-container .swiper-slide video {
	    width: 100% !important;
	    height:auto !important;
	}

	.project-detail .titre {
		height:40px;
	}

	.project-detail .titre h1 {
	    padding-left: 0px;
	    width:95%;
      font-size: 20px
	}

	.project-detail .titre sup {
	    display:none;
	}

	.project-detail .nav-projet {
		height:30px;
	}

	.project-detail .nav-projet img, .nav-mobile-grid img {
		width:15px;
	}

	.project-detail .nav-projet > div {
		float:left;
		width:50%;
	}

	.project-detail .nav-projet > div:last-child {
		text-align: right;
	}

	.project-grid .item.col-25 {
		width:100%;
	}

	.project-grid .item.col-33 {
		width:100%;
	}

	.project-grid .item.col-50 {
		width:100%;
	}

	.project-grid .item.col-66 {
		width:100%;
	}

	.project-grid .item.col-75 {
		width:100%;
	}

	.project-grid .item.col-100 {
		width:100%;
	}

    .project-grid .item {
	    width:100%;
    }

    .project-grid .item.marge {
	    margin-right:0;
    }

    .about {
	    width:100%;
	    margin-top:0px;
    }

    .about .col-left,.about .col-right {
	    width:100%;
	    height:auto;
    }

    .about .presentation,.about .col-left .contact,.about .col-left .rs {
	    width: 100%;
	    margin-left:0;
	    margin-right: 0;
	    margin-top:20px;
	}

	.about .col-left .bottom {
		display: inline-block;
	    position: relative;
	    bottom:auto;

	}

	.about .col-left .contact .contact-left, .about .col-left .contact .contact-right {
		width:100%;
	}

	.about .col-left .contact .contact-right {
		margin-top:20px;
	}

	.contact .contact-left, .contact .contact-right {
		margin-right:0;
		width:100%;
	}
	.about .bloc .bloc-left, .about .bloc .bloc-right {
	    display: inline-block;
	    width: 100%;
	    vertical-align: top;
	}
	.about .bloc.work {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.about .bloc.work .bloc-left, .about .bloc.projet .annee {
		font-weight: 500;
	}

	.about .bloc.work .bloc-left {
		margin-bottom:20px;
	}

	.about .bloc.projet .bloc-right {
		font-style: italic;
		opacity: 0.8
	}

	iframe {
			width: 100%;
			height: 100%;
		}


}

@media all and (max-width: 420px) {

}

@media all and (max-width: 340px) {

}


@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        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) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

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

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

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

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

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

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

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