/*! HTML5 Boilerplate v6.0.1 | 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
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * 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 #ccc;
    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,
img,
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;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */



/* NcDécor */



* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



body {
    background-color :#ff9900;
    background-image : url('../img/_layout/fond.jpg');
    background-position :  center;
    background-repeat: no-repeat;
    background-size : cover; 
    background-attachment : fixed; 
    display : flex;
	justify-content : center;
	/*align-items : center;
	min-height : 100vh;*/
	
}

.mainWrapper {
    border: 1px solid #000;
    box-shadow: 7px 5px 5px rgba(30,30,30,0.3);
    max-width: 1200px;
    /*margin: 0 auto;*/
	flex-basis : 100%;
	margin-top: 10px;
	margin-bottom : 10px;
	transition : all 300ms ease-in;
}

@font-face {
    font-family: 'share_techregular';
    src: url('../fonts/sharetech-regular-webfont.woff2') format('woff2'),
         url('../fonts/sharetech-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FusiNormal';
    src: url('../fonts/FusiNormal.woff2') format('woff2'),
         url('../fonts/FusiNormal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Asenine';    
	src: url('../fonts/Asenine.woff2') format('woff2'),
        url('../fonts/Asenine.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.navbar {
    max-width : 1200px;
    width : 100%;
    margin : 0 auto;
    padding : 0;
    background-color: #ff9900;
    background-image: url('../img/_layout/line.gif');
    background-repeat: repeat-x;
    background-position: bottom;
}

.navbar-expand-lg .navbar-collapse {
    justify-content: end;
    flex-direction : row-reverse;
}

.navbar-brand {
    padding-bottom: none;
    padding-top: 36px;
}

.navbar-nav > .nav-item > .nav-link {
    font-family: "FusiNormal";
	font-size: 20px;
	letter-spacing : 1px;
    color : #FFFFFF;
    text-shadow: 4px 2px 2px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.navbar-nav > .nav-item .active > .nav-link ,
.navbar-nav > .nav-item > .nav-link:hover {
    color : #FFFFFF;    
} 

.nav-item {
    height : 120px;
    vertical-align: bottom;
    width : 137px;
    z-index : 2;
    display : flex;
    align-items: flex-end;
    justify-content: center;
    padding : 0 0 5px 0;
}

    .navbar-light .navbar-nav .active > .nav-link{
        color : #FFF;
    }

   .navbar-toggler {
        margin-top :43px;
    }

.bg-nav {
    position : relative;
}

.bg-slide {
    position : absolute;
    background-color: #000000;
    color : #FFFFFF;
    background-image: url('../img/_layout/line.gif');
    background-repeat: repeat-x;
    background-position: bottom;
    width : 137px;
    z-index: 1;
    top : 0;
    height : 120px;
    transition: all 300ms ease-out;
    box-shadow: 0px 4px 18px 5px rgba(50, 50, 50, 0.3);
}

.ncWrapper {
    max-width: 1200px;
    margin : 0 auto;
}

.videoBox {
    border-right : 1px solid #ff9900;
}

.videoBox2 {
    border-left : 1px solid #ff9900;
}

ul {
    padding: 0;
    text-shadow: none;
}

ul li {
    list-style: none;
}

.miniatureCible {
    display : grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap : 0px;
}

    .miniatureCible img {
        width  : 100%;
    }

h1,h2,h3,h4,p.headline,h1.headline {
    color : #ff9900;
    font-weight : normal;
    font-size : 1.25em;
	text-shadow : 0.5px 0px 0px;
}   

h1,h2,h3,h4 {
    margin : 0.67em 0;
	font-family: "VERDANA";
}

.h-titre {
	border-bottom: 1px solid #ff9900;
	padding-bottom: 10px;
	color: #ff8900;
	font-family: "VERDANA";
}
	
	
b,strong {
	font-weight : 600;
}

h1.headline {
	text-align: center;
	font-size : 1.4em;
}

    section.accueil {
        padding : 20px;
        text-align: left;

    }

.a-accueil {
	color : #ff9900;
	transition  : color 0.3s ease-out;
	text-shadow : 0.5px 0px 0px;
}	

.a-headline {
	color : #ff9900;
	transition  : all 0.3s ease-out;
}

.a-accueil:hover {
	color : #ff9900;
	text-decoration : underscore;
	
}	

.p-legendPhoto {
	text-align: center;
	font-size : 12px;
	
}

.moule_Romain {
	font-size : 14px;
	margin-bottom: 17px;
	
}

.moule_Romain span {
	font-weight : bold;
}
	
.a-headline:hover {
	color : #ff9900;
	text-decoration : none;
	opacity : 0.7;
}

	section.equipement {
		padding : 0px;
		text-align : left;
	}
	
    section.equipement .videoBox{
        border-right : none;
        border-left : 1px solid #ff9900;
    }

	section.services {
		padding : 0px;
		text-align : left;
	}
	
    section.services .videoBox{
        border-right : none;
        border-left : 1px solid #ff9900;
    }
	
	section.contact,
    section.adresse,
    section.telephone {
        top : 25px;
		display: inline-block;
		position : relative ;
		border-right : 1px solid #c3c3c3;
        z-index : 1;
        color :#ff9900;
        opacity: 0;
        transform: translateY(-200px);
	}
	
    section.email {
       
        position: absolute;
        bottom: 34px;
        width: 80%;
        text-align: right;
        right: 5px;
        transform : translateX(50px);
        opacity : 0;
    }



    section.contact{
        animation : happenSection 600ms 200ms ease-out forwards;
    }

   section.adresse {
        animation : happenSection 600ms 600ms ease-out forwards;
   }

    section.telephone {
        animation : happenSection 600ms 900ms ease-out forwards;
    }

    section.email {
        animation : happenSection 600ms 1100ms ease-out forwards;
    }

@keyframes happenSection {
    100% {
        transform: translate(0px,0px);
        opacity : 1;
    }
}

    .border-b {
        border-bottom: 1px solid #ffCC00;
    }

    section.contact p,
    section.adresse p,
    section.telephone p {
        color: #7B7B7B;
        text-align: left;
        margin: 20px 30px;
        font-family: FusiNormal;
        letter-spacing: 1px;
    }

    section.telephone p {
        text-align : right;
    }
    
    section.email p {
        text-align :center;
        position : relative;
        top : 26px;
    }

    section.telephone a,
    section.email a {
        color: #7B7B7B;
    }

     h1.h-email {
        text-align: center;
        margin: 0;
        position: relative;
        top: 50px;
     }
        

    h1.h-bureau,
    h1.h-atelier,
    h1.h-telephone,
    h1.h-email
    {
        position: relative;
        font-size: 80px;
        font-family: "Asenine";
        margin: 20px 30px;
    }
    
    h1.h-atelier {
        text-indent: -11px;
    }

    h2.h-adresse,
    h2.h-gsm
    {
        margin : 0;
        position : absolute;
        font-size : 26px;
        font-family: "Asenine";
    }

    .contact h2.h-adresse {
        top : 32px;
        right : 27px;
        transform: translateX(100px);
        opacity: 0;
    }
    
    .adresse h2.h-adresse {
        top : 32px;
        right : 19px;
        transform: translateX(100px);
        opacity: 0;
    }

    .telephone h2.h-gsm {
        top : 32px;
        right : 95px;
        transform: translateX(100px);
        opacity: 0;
    }

    .contact h2.h-adresse  {
        animation : happenSection 600ms 800ms ease-out forwards;   
    }
    
    .adresse h2.h-adresse  {
        animation : happenSection 600ms 1100ms ease-out forwards;
    }

    .telephone h2.h-gsm {
        animation : happenSection 600ms 1400ms ease-out forwards;
    }

.separation {
    width : 235px;
    margin : 0 auto; 
    text-align:center;
}


.banniere {
    position : relative;
    background-color: #FFF;
	background: #fff url('../img/_layout/ncd.png');
	background-position : 86% 10%;
    background-repeat: repeat;
    background-size: auto auto;
	background-repeat: no-repeat;
	background-size: 116%;
    min-height : 10px;
    padding : 20px;
    color : #CCC;
}

.banniere.p-contact {
   background: url('../img/lettre.png'),-webkit-linear-gradient(top,  #ffffff 37%,#d8d8d8 100%);
   background: url('../img/lettre.png'),-o-linear-gradient(top,#ffffff 37%,#d8d8d8 100%);
   background: url('../img/lettre.png'),linear-gradient(to bottom,  #ffffff 37%,#d8d8d8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-repeat: no-repeat,repeat;
    background-position: 99% 172%,100%;
    background-size: 33%,100%;
	min-height : 347px;
}


.banniere-header,.contenuArticle {
    color : #7B7B7B;
}


    .contenuArticle h1 {
        animation : animateHeadline 300ms cubic-bezier(0.175, 0.885, 0.32,1.275) forwards;
        transform : translateX(200px);
        opacity : 0;
    }
    

    .contenuArticle p {
        color: #7B7B7B;
        text-align: left;
        margin: 20px 0px;
        letter-spacing: 1px;
        animation : animateP 300ms 200ms cubic-bezier(0.175, 0.885, 0.32,1.275) forwards;
        transform : translateX(200px);
        opacity : 0;
    }

    .contenuArticle .image-item img {
        animation : animateImg 300ms 400ms cubic-bezier(0.175, 0.885, 0.32,1.275) forwards;
        transform : translateX(250px);
        opacity : 0;
    }

@keyframes animateHeadline {
    100% {
        transform : translateX(0px);
        opacity: 1;
     }
}

@keyframes animateP {
    100% {
        transform : translateX(0px);
        opacity: 1;
    }
}
@keyframes animateImg {
    100% {
        transform : translateX(0px);
        opacity: 1;
    }
}

footer.footer {
    position : relative;
    border-top: 9px solid #ff9900;
    background-image :  url('../img/_layout/paternFooter.png'),
                        url('../img/_layout/gradiantBottom.png'),
                        url('../img/_layout/blackGround.gif');
    background-repeat: repeat , no-repeat , repeat;
    background-position: top right, top center, top right;
    background-size : auto, cover, auto ; 
	text-align: right;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 10px;
	color : #fff;
    }

a.footerAdresse_a {
	color : #fff;
}

p.footerAdresse_p {
	margin :0;
}

a.footerIco_a {
	color: #FFF;
	padding: 2px 10px;
	font-size: 20px;
	transition : all 150ms ease-in;
}

a.footerIco_a:hover {
	text-decoration: none;
}

i.footerIco_a:hover {
	transform : scale(1.2);
}

i.footerIco_a {
	transition : all 150ms ease-in;
}

.mentionslegales {
	color: #000;
	font-size: 14px;
}

a.mentionslegales  {
	color: #FFF;
	font-size: 14px;
}

.photoContent {
    position : relative;
    transition: all 150ms ease-in;
    opacity : 0.8;
}

.photoContent:hover {
    opacity : 1;
}

.dejavue {
    position : absolute;
    width :100%;
    max-width: 100%;
    left : 0;
    top : 0;
}



div.image-item {
    position : relative;
    text-align : center;
    box-shadow : 8px 10px 15px rgba(50, 50, 50, 0.3);
    background-color : rgba(255,255,255,0.5); 
    overflow: hidden;
}

div.image-item * {
  box-sizing: border-box;
}


div.image-item i {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  font-size: 12px;
  color: #454545;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: #ffffff;
  opacity:0.8;
}

div.image-item i {
  transform : translate(-50%, -50%) scale(0); 
  transition: transform 300ms 0ms cubic-bezier(0.6, -0.28, 0.735,0.045);
}

div.image-item:hover i {
  transform: translate(-50%, -50%)  scale(2);
  transition: transform 300ms 100ms cubic-bezier(0.175, 0.885, 0.32,1.275);
}

 .contenuArticle div.image-item {
        box-shadow: none;
        background-color :transparent; 
 }

/* my_tabs */

.my_tabs {
    display : flex;
    flex-wrap : wrap;
    margin : 0 0 20px 0;
}

.my_tabs li {
    flex-grow: 1;
    list-style: none;
    border: 1px solid #ff9900;
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
    text-align: center;
    margin : 5px;
    transition: all 300ms ease-out;
}

.my_tabs li:hover {
    background-color: #fdb74d;
}

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

.my_tabs li.active {
    background-color :#ff9900;
}

.my_tabs li.active a {
    color : white;
}

.my_tabs li a {
    color: #ff9900;
}

/* plan de site */
.plan-du-site__h {
    border-bottom : 1px solid #ff9900;
    padding : 5px 0;
}

a.plan-du-site__a {
    color : #999;
    transition : color 150ms ease-out;
}

a.plan-du-site__a:hover {
    color : #ff9900;
    text-decoration : none;
}

/* legende */

figcaption.captionLegend {
	margin: 10px 5px 5px;
}

.captionLegend {
	margin: 5px 5px 10px ;
	font-size: 12px;
}

.caption_Block {
	transform: translateY(50px);
	transition: all 200ms ease-in;
	opacity: 0;
	position: absolute;
	bottom: 0;
	text-align: center;
	color: white;
	width: 100%;
	background-color: rgba(55,55,55,0.55);
	text-shadow: 1px 1px #4C4C4C;
	padding : 5px;
}


	
/* ==========================================================================
   Bootstrap classes  
   ========================================================================== */
.modal-header {
    background-color : #ff9900;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
	border-bottom: 0px solid #e9ecef;
}
    
.modal-content {
    border-radius : 0px;
	background-color: #111111;
}

.modal-myLg {
    max-width : 1200px;
}

.modal-myLg2 {
    max-width : 1000px;
}

figure {

    margin: 0 0 1rem;

}

.modal-body {

    padding: 0rem;

}

.modal-body2 {

    padding: 1rem;

}

.modal-content2 {
    border-radius : 0px;
	background-color: #FFF;
}

.card {
    /* border-radius: 0px; */
    margin-bottom : 3px;
}

.card-body {
    padding : 0px;
}

.btn:focus {
    box-shadow: none;
}

.btn-ncd {
    font-weight: 400;
    background-color: transparent;
}

.card-header:first-child {
    /* border-radius: 0px; */
}

.card-header {
    padding : 0px;
    background-color: rgba(255, 153, 0, 1);
}

    .card-header .btn-ncd {
        color : white;
    }

.card-header.collapsed {
    background-color: white;
    border-bottom : none;
}

    .card-header.collapsed .btn-ncd {
        color : #ff9900;
    }

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

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}



img {
    max-width: 100%;
    /* width : 100%; */
}


/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */



@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (max-width:992px) {
    .nav-item {
        width : auto;
    }

	div.image-item {
    position : relative;
    text-align : center;
    /* box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4); */
    box-shadow : unset;
    background-color : rgba(255,255,255,0.5); 
    overflow: hidden;
    margin-bottom : 20px;
}

	div.image-item img{
    width : 100%;
}

footer.footer {
    position : relative;
    /* top : 50px; */
    border-top: 9px solid #ff9900;
    /* webkit-box-shadow: inset 0px 7px 10px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 7px 10px -3px rgba(0,0,0,0.75);
    box-shadow: inset 0px 7px 10px -3px rgba(0,0,0,0.75); */

    background-image :  url('../img/_layout/paternFooter.png'),
                        url('../img/_layout/gradiantBottom.png'),
                        url('../img/_layout/blackGround.gif');
    background-repeat: repeat , no-repeat , repeat;
    background-position: top right, top center, top right;
    background-size : auto, cover, auto ; 
	text-align: center;
	display: block;
	justify-content: left;
	align-items: center;
	padding: 0px;
	color : #fff;
    }

a.footerAdresse_a {
	color : #fff;
}

p.footerAdresse_p {
	margin :0;
}

a.footerIco_a {
	color: #FFF;
	font-size: 20px;
	transition : all 150ms ease-in;
}

 a.footerIco_a:hover {
	transform : scale(1.2);
	text-decoration: none;
	color : #FF9900;
}

.mentionslegales {
	color: #000;
	font-size: 14px;
}

a.mentionslegales  {
	color: #FFF;
	font-size: 14px;
	text-decoration: underline;
}

	.caption_Block {
	transform: translateY(0px);
	opacity: 1;
	position: relative;
	bottom: 0;
	text-align: center;
	color: white;
	width: 100%;
	background-color: rgba(55,55,55,0.55);
	text-shadow: 1px 1px #4C4C4C;
	padding : 5px;
}
	
    .nav-item.active ,
    .nav-item:hover {
        background-color: #000000;
        color : #FFFFFF;
        background-image: url('../img/_layout/line.gif');
        background-repeat: repeat-x;
        background-position: bottom;
    }

    .ui-tabs .ui-tabs-nav li {
        /* margin: 5px; */
		   border-bottom-width: 1px;
    }

    .ui-widget-header {
            border-bottom: 1px;
    }

    .banniere.p-contact {
        background-position: 49% 97%,100%;
    }


    section.email,
    section.contact,
    section.adresse,
    section.telephone { 
        display:block;
        border: none;
        width : 100%;
        text-align : center;
    }

    h2.h-adresse,
    h2.h-gsm {
        display:none;
    }
    
    section.contact p,
    section.adresse p,
    section.telephone p {
        text-align : center;
    }



    .border-b {
        border : none;
    }    

    section.email {
        position :relative;
        
    }

    .navbar-nav > .nav-item > .nav-link {
        text-indent : 10px;
    }
    .banniere-header {
        font-size : 15px;
        top : 10px;
    }
	
	.videoBox,
    .videoBox2,
    section.equipement .videoBox,
    section.services .videoBox {
		border-left : none;
        border-right : none;
       /* margin-bottom : 20px; */
	}
	
    .nav-item {
        height : inherit;
        line-height: inherit;
    }

    .nav-item.active ,
    .nav-item:hover {
        background-image: none;
    }
    .navbar {
        background-image: none;
    }
}


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

   .banniere-header {
        font-size : 12px;
        top : 10px;
    }
	
}

@media only screen and (max-width:580px) {
    /* Style adjustments for viewports that meet the condition */


	section.accueil,
    section.equipement,
	section.services,
    .banniere-header {
        padding : 0;
        text-align : left;
        font-size : 15px;
    }

	h1,h2,p.headline {
		font-size : 18px;
		font-family: "arial", sans-serif;
	}

	p.headline {
		text-align: center;
		font-size : 20px;
	}
	

    body {
        padding-top: 0;
   }

    .navbar-brand {
        width : 60%;
    }
   

	.banniere {        
        /* background-color: #d2d2d2; */
        min-height: inherit;
        padding :20px 10px;        
    }
    

	section.contact {
		width : 95%;
	}
	
    .banniere-header {
        top : 0px;
        font-size : 12px;

    }

    section {
        text-align: left;
    }

    a.plan-du-site__a {
        font-size : 17px;
    }
    
    iframe {
        margin-bottom : 20px;
    }

}


@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 {
        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 {
        white-space: pre-wrap !important;
    }
    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;
    }

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

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