/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.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,
   button,
   input,
   select,
   textarea {
    color: #222;
}

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    outline : none;
}

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

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * 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 #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

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


/*
 * Remove default fieldset styles.
 */

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

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

 textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

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

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

   #timer {
    position:absolute;
    z-index:999999;
    background:black;
    color:#fff;
}

@font-face {
  font-family: 'Trajan Pro';
  src: url('../fonts/TrajanPro-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/TrajanPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/TrajanPro-Regular.woff') format('woff'), /* Modern Browsers */
  url('../fonts/TrajanPro-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('../fonts/TrajanPro-Regular.svg#b8a70d5ec6d2a6627ed4d54bfa4580ba') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Trajan Pro Bold';
  src: url('../fonts/TrajanPro-Bold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/TrajanPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/TrajanPro-Bold.woff') format('woff'), /* Modern Browsers */
  url('../fonts/TrajanPro-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('../fonts/TrajanPro-Bold.svg#8533b8ff4f18ac8f5cb4208583e747f1') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  700;
}

body {
    /*font-family: 'Trajan Pro';*/
    font-family: Georgia;
    font-size: 1.06em;
    color:#555;
    overflow:hidden;
    margin:0;
    background:black;
    position:relative;
}

*:focus {
    border:0;
    border-style: none;
    outline: 0;
}


body#prehome #big-video-control-container {
    visibility:hidden;
}

a {
    border:0;
    border-style: none;
    outline: 0;
}

img {  
    border:0;
    border-style: none;
    outline: 0;
}

#filtre_vertical {
    display:none;
}

.filtre_ipad_prehome, .filtre_ipad_home, .filtre_ipad_video1 {
    display:none;
}

#main {
    /*background-image:url("../img/contour-prehome.png");
    background-repeat: no-repeat;
    background-size:90%;*/
    position:relative;
    z-index:97;
/*    ICI*/
    overflow: hidden;
/*    letter-spacing: 0.18em;*/
}

#contourPrehomeTop {
    position:absolute;
    top:30px;
    border-bottom:1px solid #fff;
    opacity: 0.44;
    margin:0 80px;
}

#contourPrehomeBottom {
    position:absolute;
    bottom:30px;
    border-top:1px solid #fff;
    opacity: 0.44;
    margin: 0 80px 0 260px;
}

#contourPrehomeLeft {
    position:absolute;
    top:0;
    left:0;
    width:30px;
    border-right:1px solid #fff;
    opacity: 0.44;
    margin:80px 0;
}

#contourPrehomeRight {
    position:absolute;
    top:0;
    right:0;
    width:30px;
    border-left:1px solid #fff;
    opacity: 0.44;
    margin:80px 0;
}

#logoPrehome {
    position:absolute;
    z-index:99;
    left:30px;
    bottom:14px;
}

#logoPoitouHome {
    bottom: 35px;
    left: 90px;
    position: absolute;
    z-index: 101;
}

#messageBrowser {
    bottom: 10px;
    color: #FFFFFF;
    font-family: 'Trajan Pro';
    position: absolute;
    right: 30px;
    text-align: right;
    width: 460px;
    z-index: 99;
}

.zonePrehome {
    background-image:url("../img/ornement-prehome.png");
    background-repeat:no-repeat;
    background-position: center top;
    height: 280px;
    left: 0%;
    right: 0%;
    position: absolute;
    bottom: 10%;
}

.buttonEntrance {
    height: 90px;
    line-height: 90px;
    margin: 180px auto 0px auto;
    text-align: center;
    width: 500px;
}


.buttonEntrance a {
    background-image: url("../img/bouton-prehome.png");
    background-repeat: no-repeat;
    font-family: 'Trajan Pro Bold';
    color:#909090;
    text-decoration:none;
    display:block;
    float: left;
    width:230px;
    height:90px;
    font-size:1.563em;
    line-height: 100px;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.buttonEntrance a.fright {
    float: right;
}
.buttonEntrance a:hover {
    color:#555;
}
.buttonEntrance .enterEN:hover {
    background-image: url("../img/btn-en-hover.jpg");
    background-repeat: no-repeat;
}
.buttonEntrance .enterFR:hover {
    background-image: url("../img/btn-fr-hover.jpg");
    background-repeat: no-repeat;
}

/* MENU GAUCHE */

#menuLeft {
    background-color: rgba(255, 255, 255, 0.20);
    background-repeat: no-repeat;
    left: -342px;
    overflow-x: hidden;
    position: absolute;
    width: 402px;
    z-index: 999;
    -webkit-transition:background-color 0.7s;
    -moz-transition:background-color 0.7s;
    -o-transition:background-color 0.7s;
    transition:background-color 0.7s;
}


#menuLeft.fondMenu {
    /*background-image:url("../img/fondmenu-left.png");*/
    background-color: rgba(255, 255, 255, 1);
    background-repeat:no-repeat;
}

#titleMenu {
    background-color: transparent;
    background-image: url("../img/picto-menu-2.png");
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 60px;
    position: absolute;
    right: 0;
    top: 3px;
    width: 60px;
}

.hideCloseMenu {
    font-family: 'Trajan Pro';
    font-size: 1.1em;
    left: 40px;
    position: absolute;
    top: 23px;
    cursor:pointer;
}
.titre_TR {
    font-family: 'Trajan Pro';
}
.TitleCloseMenu {
    font-family: 'Trajan Pro';
    font-size: 0.5em;
    position: absolute;
    top: 45px;
    left: 12px;
    cursor:pointer;
    display:none;
}

#menuBlocA {
    font-size: 0.875em;
    height: 215px;
    left: 0;
    overflow: hidden;
    position: relative;
    top: 62px;
    width: 402px;
}

#contentMenuBlocA {
    position: absolute;
    width: 330px;
    margin-top: 15px;
    padding-left: 40px;
    top:-245px;
}

#menuBlocB {
    font-size: 0.875em;
    height: 290px;
    overflow: hidden;
    position: relative;
    top: 85px;
    width: 402px;
}

#contentMenuBlocB {
    position:relative;
    top:-295px;
}

p.questionMark {
    background-image: url("../img/questionMark.png");
    background-position: 0 13px;
    background-repeat: no-repeat;
    height: 60px;
    margin: 10px 0 30px 40px;
    padding-left: 70px;
    padding-right: 80px;
    padding-top: 8px;
}

.addNewsletter {
    overflow: hidden;
}

p.questionMark.pictoAddNewsletter {
    background-image:url("../img/exclamation.png");
}

p.pLeft40 {
    padding-left:40px;
}

.emailMenu {
    background-color: #F6F6F6;
    background-image: url("../img/pictoNewsletter.png");
    background-position: 40px center;
    background-repeat: no-repeat;
    height: 80px;
    width: 402px;
}

.emailMenu > input {
    background-color: #F6F6F6;
    border: 0 none;
    color: #999999;
    height: 30px;
    margin-left: 80px;
    margin-top: 25px;
    width: 220px;
}

.addNewsletterMenu input[type="submit"] {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    font-family: 'Trajan Pro';
    height: 70px;
    line-height: 40px;
    padding-left: 40px;
    text-align: left;
    width: 100%;
}

#menuBlocC {
    font-size: 0.875em;
    overflow: hidden;
    position: relative;
    top: 70px;
    width: 402px;
}

#contentMenuBlocC {
    position:relative;
}


#contentMenuBlocC a#showRessources {
    color: #555;
    display: block;
    font-family: 'Trajan Pro';
    height: 70px;
    line-height: 70px;
    padding-left: 40px;
    text-decoration: none;
}

#contentMenuBlocC a#showRessources:hover {
    color: #555;
}

#contentMenuBlocC a#showCredits {
    color: #555;
    display: block;
    font-family: 'Trajan Pro';
    height: 70px;
    line-height: 70px;
    padding-left: 40px;
    text-decoration: none;
}

#contentMenuBlocC a#showCredits:hover {
    color: #555;
}

#contentMenuBlocC a#showMentionsLegales {
    font-family: 'Trajan Pro';
    color: #555;
    text-decoration: none;
    height: 70px;
    line-height: 70px;
    display: block;
    padding-left: 40px;
}

#contentMenuBlocC a#showMentionsLegales:hover {
    color: #555;
}

.titleMentionsLegales {
    font-size:1.5em;
    display:block;
    margin:20px 0;
}

#contentMenuBlocC ul {
    display: block;
    height: 40px;
    list-style: none outside none;
    margin-left: 60px;
    margin-top: 30px;
}

#contentMenuBlocC ul li {
    float:left;
    margin-right:5px;
}

#contentMenuBlocC ul li:nth-last-child(1) {
    float:left;
    margin-right:0;
}

#logoPoitouMenuLeft {
    bottom: 40px;
    left: 120px;
    display : none;
    position: absolute;
}

.logoBackupMenu {
    text-align: center;
    margin-top: 30px;

    margin-left:-27px;
    padding-bottom:40px;
    position: relative;
}

@media screen and (max-height: 897px) {
    .logoBackupMenu {
        display: block;
    }

    #logoPoitouMenuLeft {
        display: none;
    }
}

#minLogoPoitouMenuLeft {
    bottom: 40px;
    position: absolute;
    right: 17px;
    display : none;
}

/* UPDATE FOR WEBSITE */

.listMenu {
    margin: 0;
    padding: 0;
    position: relative;
    top: 70px;
}

.listMenu li {
    height:70px;
    font-family: 'Trajan Pro';
    /* border-bottom:1px solid #f4f4f4; */
    padding-left:45px;
    line-height:70px;
    background-repeat: no-repeat;
    background-position: 362px 25px;
    font-size:0.85em;
    cursor:pointer;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
}



li.levelOne.close {
    color: #bcbcbc !important;
}
li.levelOne.actif {
    border-bottom-width: 0px !important;
}


.listMenu li span {
/*    vertical-align: middle;*/
    display:inline-block;
    line-height:normal; /* on rétablit le line-height */
}

.listMenu li.pictoSocieteRomane {
    background-image:url("../img/pictoSocieteRomane.png");
}

.listMenu li.pictoArtRoman {
    background-image:url("../img/pictoArtRoman.png");
}

.listMenu li.pictoPatrimoineVivant {
    background-image:url("../img/pictoPatrimoineVivant.png");
}

.listMenu li.pictoPatrimoineDexception{
    background-image:url("../img/pictoPatrimoineDexception.png");
}

.listMenu li.pictoCQuoi {
    background-image:url("../img/pictoCQuoi.png");
}

.listMenu li.actif {
    border-left: 20px solid #eeab36;
    padding-left: 25px;
    background-position: 342px 25px;
}

.listMenuSub li.actif a {
    margin-left: 30px;
}

.listMenuSub li a {
    height : 50px !important;
    line-height: 50px;
}

.listMenuSub li.actif a span {
    vertical-align: middle;
    line-height: normal;
    display: inline-block;
}

.listMenuSub {
    /* border-top: 2px solid #cdcdcd; */
    max-height: 0;
    list-style: none outside none;
    margin: 0 0 0 -45px;
    overflow: hidden;
    padding: 0;
    -webkit-transition: max-height 0.6s;
    -moz-transition: max-height 0.6s;
    transition: max-height 0.6s;
}

.listMenuSub.show {
    max-height:500px;
    -webkit-transition: max-height 0.6s;
    -moz-transition: max-height 0.6s;
    transition: max-height 0.6s;
}

.listMenuSub li {
    background-color: #f1f1f1;
    background-image: url("../img/puceMenuLeft.png");
    background-position: 30px 21px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #cdcdcd;
    border-left: 20px solid #cdcdcd;
    font-size: 0.813em;
    height: 55px !important;
    line-height: 52px;
    padding-left: 55px;
    font-family : georgia,sans-serif;
}

.listMenuSub li.actif {
    border-left: 20px solid #a0a0a0;
    background-position: 30px 21px;
    background-image: url("../img/puceMenuLeftOn.png");
}

.listMenuSub a {
    color: #555555;
    display: inline-block;
    line-height: normal;
    text-decoration: none;
    vertical-align: middle;
    width: 100%;
}


/* MENU CENTRAL */

/* HOVER CIRCLE */
.circle_menu {
    background-image: url("../img/menuCentral-4.png");
    background-position: center center;
    background-repeat: no-repeat;
    height: 680px;
    left: 50%;
    margin-left: -347px;
    margin-top: -340px;
    position: absolute;
    top: 50%;
    width: 693px;
}

.repere_circle {
    width:100%;
    height:100%;
    position:relative;
}


.element_menu {
    height: 282px;
    position: absolute;
    width: 282px;
}

#picto_top {
    left: 203px;
    top: 63px;
}

#picto_bottom {
    left: 207px;
    top: 345px;
}

#picto_left {
    left: 65px;
    top: 200px;
}

#picto_right {
    left: 345px;
    top: 200px;
}

.declencheur {
    /*background-repeat: no-repeat;
    height: 99px;
    left: 90px;
    position: relative;
    top: 90px;
    width: 101px;
    z-index: 10;
    cursor:pointer;*/

    background-repeat: no-repeat;
    height: 145px;
    left: 65px;
    position: relative;
    top: 66px;
    width: 147px;
    z-index: 10;
    cursor: pointer;

}

#declencheur_picto_top {
}

#declencheur_picto_bottom {
}

#declencheur_picto_left {
}

#declencheur_picto_right {
}

.circle {
    width:282px;
    height:282px;
    position:absolute;
    top: 0;
    opacity: 0;
    -moz-transition:all 0.35s ease-in-out;
    -webkit-transition:all 0.35s ease-in-out;
    -o-transition:all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0); 
    z-index:9;
}

.circleOff {
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1); 
}

.circle.hover {
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1); 
    opacity: 1;
    z-index:11;
}



.nextVid {

}

.linkMenu {
    display : block;
    height : 100%;
    width : 100%;
    color : #555 !important;
}


.circle > img {
    position: absolute;
    z-index: 80;
}

.off_zone {
    height: 182px;
    position: absolute;
    width: 182px;
    z-index:99;
    margin-left:50px;
    margin-top:50px;
}

.off_zone > img {
    height: 182px;
    width: 182px;
}


/* LOGO TRESORS TOP */

#logoTresorsTop {
    position:absolute;
    top:40px;
    right:40px;
    z-index: 102;
}

/* POPIN FIN VIDEO TEASER */
#popinVideo {
    background-color: rgba(255, 255, 255, 1);
    display: none;
    height: 387px;
    left: 50%;
    margin-left: -288px;
    margin-top: -243px;
    position: absolute;
    top: 50%;
    width: 577px;
    z-index: 999;
    padding-top: 70px;
}

#popinVideoTop {
    height:110px;
    border-bottom: 1px solid #ebb963;
    cursor: pointer;
}


#popinVideoTop .restart {
    background-image: url("../img/btnRevoir.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    font-family: 'Trajan Pro';
    font-size: 1.188em;
    height: 80px;
    margin-left: 35px;
    margin-top: 40px;
    padding-left: 90px;
    padding-top: 24px;
    width: 245px;
}

.interactiveFormContent {
    padding: 10px 40px;
    font-family: 'Trajan Pro';
    
}

/* POPIN VIDEO PAGE */

#popinVideoPage {
    z-index:999;
    background-color:rgba(0,0,0,0.6);
    position:relative;
    width:100%;
    height:100%;
    display:none;
}

#containerPopinVideoPage {
    font-family: 'Trajan Pro';
    background-image: url("../img/bgPopinPageVideo.png");
    background-position: 0 70px;
    background-repeat: no-repeat;
    height: 590px;
    left: 50%;
    margin-left: -300px;
    margin-top: -295px;
    position: absolute;
    top: 50%;
    width: 630px;
}

.containerPopinVideoPageNoFocus {
    height : 260px !important;
    margin-top: -175px !important;
}


.titlePopinVideoPage {
    color:#ffffff;
    font-size:1.500em;
    text-align:center;
}

.containerPopinVideoPageL1 {
    position: relative;
    /*width: 440px;*/
    
    top: 45px;
    left: 50%;
/*    margin-left: -203px;*/
    margin-left: -229px; 
/*    ICI*/
    width:500px;
}

.containerPopinVideoPageL1-2 {
     position: relative;
    /*width: 440px;*/
    top: 45px;
    left: 50%;
    margin-left: -166px;
    width:500px;
}

.containerPopinVideoPageL1 ul {
    list-style: none outside none;
    margin-left:20px;
    padding: 0;
}

.containerPopinVideoPageL1 li {
    color: #fff;
    float: left;
    font-size: 16px;
/*    padding-top: 100px;*/
    text-align: center;
    background-repeat: no-repeat;
    background-position:center 10px;
    background-size: auto 66px;
    cursor:pointer;
    width : 115px;
    position : relative;

}

.containerPopinVideoPageL1 li img {
    margin-bottom : 20px;
}
.img_hover{
    position :absolute;
    top:0;
}



.containerPopinVideoPageL1 li:hover{

}

.containerPopinVideoPageL1 li:nth-last-child(1) {
    margin-right:0;
}

.retourPopinVideo {
    margin-left : 40px;
    margin-right : 40px !important;
}

.titleFocusPopinVideoPage {
    color: #ffffff;
    font-size: 1.5em;
    position: relative;
    text-align: center;
    top: 105px;
}

.containerPopinVideoPageL2 {
    margin-left: -138px;
    position: relative;
    top: 130px;
    width: 900px;
}

.art_roman .containerPopinVideoPageL2 {
    margin-left: -48px;
    position: relative;
    top: 130px;
    width: 770px;
}
.containerPopinVideoPageL2PV {
    margin-left: -48px;
    position: relative;
    top: 130px;
    width: 770px;
}
.containerPopinVideoPageL2PV li{
    font-size:14px!important;
}
.containerPopinVideoPageL3 {
    /*margin-left: 90px;*/
    margin-left: -10px;
    position: relative;
    top: 180px;
    /*width: 470px;*/
    width: 930px;
    margin-left: -156px;
}
.containerPopinVideoPageL2 ul {
    list-style: none outside none;
    margin-left:20px;
    padding: 0;
}

.containerPopinVideoPageL2 li {
    background-position: center 10px;
    background-repeat: no-repeat;
    background-size: auto 66px;
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 16px;
    margin-right: 10px;
    padding-top: 100px;
    text-align: center;
    width: 165px;
}

.art_roman .containerPopinVideoPageL2 li {
    font-size:11px;
}

.containerPopinVideoPageL3 ul {
    list-style: none outside none;
    margin-left:20px;
    padding: 0;
}

.containerPopinVideoPageL3 li {
    color: #fff;
    float: left;
    font-size: 18px;
    margin-right: 55px;
    padding-top: 100px;
    text-align: center;
    background-repeat: no-repeat;
    background-position:center 10px;
    cursor:pointer;
}
.revoirPopinVideo {
/*    background-image:url("../img/pictoRevoir.png");*/
}

.themePopinVideo {
    background-image:url("../img/pictoThemeSuivant.png");
}

.retourPopinVideo {
/*    background-image:url("../img/pictoRetourAccueil.png");*/
}

.retourPopinVideo a {
    display:block;
}

.savoirPlusPopinVideo {
/*    background-image:url("../img/pictoBigEnSavoirPlus.png");*/
}

.fc-chateau {
    background-image:url("../img/focusChateau.png");
}
.fc-comtes {
    background-image:url("../img/focusComtes.png");
}
.fc-ceuxQuiTravaillent {
    background-image:url("../img/focusPaysans.png");
}
.fc-ceuxQuiPrient {
    background-image:url("../img/focusReligieux.png");
}
.fc-ceuxQuiCombattent {
    background-image:url("../img/focusSeigneurs.png");
    margin-right: 0px;
}



.fc-saintEutrope {
    background-image:url("../img/focus2-stEutrope.png");
}


.fc-notreDame {
    background-image:url("../img/focus2-notreDame.png");
}
 {
   background-size: auto 75px;
}

.fc-aulnay {
    background-image:url("../img/focus2-Aulnay.png");
}

.fc-saintSavin {
    background-image:url("../img/focus2-stSavin.png");
}

.fc-icon {
    /*transition*/
    -webkit-transition:all 0.2s;
       -moz-transition:all 0.2s;
         -o-transition:all 0.2s;
            transition:all 0.2s;
}

.fc-icon:hover {
    background-size: auto 72px; 
     /*transition*/
    -webkit-transition:all 0.2s;
       -moz-transition:all 0.2s;
         -o-transition:all 0.2s;
            transition:all 0.2s;
}


.fc-rcDelPierreDidier {
    background-image:url("../img/focus3-1.png");
}
.fc-rcAnneBrice {
    background-image:url("../img/focus3-2.png");
}
.fc-rcAnael {
    background-image:url("../img/focus3-3.png");
}
.fc-rcMathieu{
    background-image:url("../img/focus3-4.png");
}



.portails {
    background-image:url("../img/partB.png");
    margin-right: 0px;
}

form.addNewsletterPopin .emailMenu {
    background-color: #F6F6F6;
    background-image: url("../img/pictoNewsletter.png");
    background-position: 40px center;
    background-repeat: no-repeat;
    height: 80px;
    width: 577px;
    margin-top: 30px;
}

form.addNewsletterPopin .emailMenu > input {
    background-color: #F6F6F6;
    width: 460px;
}

.addNewsletterPopin input[type="submit"] {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    font-family: 'Trajan Pro';
    height: 80px;
    line-height: 80px;
    padding-left: 40px;
    text-align: left;
    width: 100%;
}

.margeBottom {
    height: 50px;
    display: block;
}


/* FOCUS VIDEO */



.vjs-control-bar {
  /* Start hidden */
  display: none;
  position: absolute;
  /* Place control bar at the bottom of the player box/video.
     If you want more margin below the control bar, add more height. */
  bottom: 0;
  /* Use left/right to stretch to 100% width of player div */
  left: 0;
  right: 0;
  /* Height includes any margin you want above or below control items */
  height: 3.0em;
  /* background-color-with-alpha */
/*  background-color: #EEAB36 !important;*/
}

/* CONTROLS */

.noPlus {
    right : -45px !important; 
}

.noSub {
    right : -105px !important; 
}

#big-video-control-container {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    left: 60px;
    padding-left: 0;
    width: 100%;
    z-index: 100;
    padding-bottom:0px;
    z-index: 1;
}

#big-video-control {
    height: 11px;
    position: relative;
    width: 100%;
}

#big-video-control-bar {
    background: none repeat scroll 0 0 #FFFFFF;
    cursor: pointer;
    height: 26px;
    position: relative;
    width: 100%;
}

#big-video-control-progress {
    background: none repeat scroll 0 0 #EEAB36;
    height: 26px;
    position: absolute;
    top: 0;
    width: 0;
}

#big-video-control-track {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 26px;
    position: absolute;
    top: 0;
    width: 100%;
}

#big-video-control-track .ui-slider-handle {
    opacity:1;
}

#big-video-control .ui-slider-handle {
    background-image: url("../img/controlTrack.png");
    height: 52px;
    margin-left: -22px;
    outline: medium none;
    position: absolute;
    top: -40px;
    width: 40px;
    border-left: 0;
    display:none;
}

#big-video-control-middle {
    margin: 0;
}

#big-video-control-timer {
    display: none;
}

#big-video-control #big-video-control-play {
    display:none;
}

#big-video-control-playhead, #big-video-control-bound-left, #big-video-control-bound-right {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.videoContainer {
    width: 914px;
    height: 360px;
    margin: auto;
    margin-top: 180px;
    padding-top: 15px;
    background: url('../img/sep-videoContainer.png') center top no-repeat;
}

#cestQuoiArtRoman{
    position : absolute;;
    bottom : 85px;
    right : 60px;
    z-index : 100;
    cursor : pointer;
}


#controlPlayer {
    bottom: 25px;
    height: 30px;
    position: absolute;
    right: 25px;
    z-index: 98; 
/*    ICI*/
}


#controlPlayer a#playPauseButton {
    float:left;
    background-repeat:no-repeat;
    height: 28px;
    width: 30px;
    display: block;
}

a#playPauseButton.getPause {
    background-image:url("../img/pauseButton.png");
}

a#playPauseButton.getPlay {
    background-image:url("../img/playButton.png");
}

#controlPlayer a#fullButton {
    float:left;
    background-image:url("../img/fullButton.png");
    background-repeat:no-repeat;
    height: 28px;
    width: 50px;
    display: block;
}

#controlPlayer a#soundButton {
    float:left;
    background-image:url("../img/soundButton.png");
    background-repeat:no-repeat;
    height: 28px;
    width: 50px;
    display: block;
}

#controlPlayer a#soundButton.mute {
    background-position:11px -56px;
}

#controlPlayer a#soundButton.mute:hover {
    background-position:11px -81px !important;
}

#controlPlayer a#hdButton {
    float:left;
    background-image:url("../img/hdButton.png");
    background-repeat:no-repeat;
    height: 28px;
    width: 45px;
    display: block;
}

#controlPlayer a#enSavoirPlusButton {
    background-image: url("../img/pictoEnSavoirPlus.png");
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 32px;
    margin-left: 30px;
    margin-top: -2px;
    width: 45px;
}

#controlPlayer a.sousTitres {
    background-image: url("../img/btnSousTitres.png");
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 26px;
    margin-top: 2px;
    width: 45px;
    margin-left: 10px;
}
#controlPlayer a.sousTitresEn {
    background-image: url("../img/btnSubTitles.png");
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 26px;
    margin-top: 2px;
    width: 45px;
    margin-left: 10px;
}

#controlPlayer a:hover {
    background-position:0 -28px !important;
}

#controlPlayer a#enSavoirPlusButton:hover {
    background-position:0 -32px !important;
}

#controlPlayer a.sousTitres:hover {
    background-position:0 -26px !important;
}

#controlPlayer a.sousTitres.actif {
    background-position:0 -26px !important;
}
#controlPlayer a.sousTitresEn:hover {
    background-position:0 -26px !important;
}
#controlPlayer a.sousTitresEn.actif {
    background-position:0 -26px !important;
}

/* CONTENU INTERNE DES PAGES */

#ressources,#credits, #mentionsLegales, #focusA, #focusB, #focusC, #focusD, #focusE {
    display:none;
}

.pageIn {
    position:relative;
    z-index:99999;
    left:50%;
    margin-left:-457px;
    background-image:url("../img/fondPageIn.jpg");
    background-repeat:repeat-y;
    height:100%;
    width:914px;
    overflow-y: auto;
}

.titlePageIn {
    position:absolute;
    background-image:url("../img/illuPageTitre.jpg");
    background-repeat:no-repeat;
    background-position: center top;
    height:110px;
    text-align:center;
    font-family: 'Trajan Pro';
    font-size:1.375em;
    top:50px;
    width:100%;
}

.titlePageIn p {
    margin: 70px 0 0;
}

.contentPageIn {
    background-image: url("../img/fondCenterPageIn.jpg");
    background-repeat: no-repeat;
    left: 50%;
    letter-spacing: 0px;
    margin-left: -353px;
    padding-top: 30px;
    position: absolute;
    top: 170px;
    width: 706px;
    font-size:0.875em;
}

.contentPageIn p.alignCenter {
    text-align:center;
    /*padding:0 50px;*/
}

.sliderFocus {
    background-image: url("../img/bgSlider.png");
    height: 468px;
    left: 120px;
    position: relative;
    top: 200px;
    width: 684px;
}

div.flecheGauche {
    width: 70px;
    height: 70px;
    top: 202px;
    position: absolute;
    left: -60px;
}

div.flecheDroite {
    width: 70px;
    height: 70px;
    top: 202px;
    position: absolute;
    right: -60px;
}

.zoneSlide {
    left: 50px;
    position: relative;
    top: 70px;
    width:584px;
    height:410px;
    overflow: hidden;
}

.owl-carousel .owl-wrapper-outer {
    overflow: visible;
}

#sFocus1 {
    height:410px;
}

.flecheGauche, .flecheDroite {
    cursor:pointer;
}

.item {
    width:584px;
}

.item span.copyrightPhoto {
    display:none;
    position: absolute;
    top: 292px;
    right:0;
    padding: 5px 5px 5px 15px;
    background-color: rgba(255,255,255,0.7);
    font-size:10px;
}

.item span.descriptionPhoto {
    position: relative;
    bottom: -28px;
    left: 0;
    font-size: 14px;
    background-color: #fff;
    text-align: center;
    width: 584px;
    display: block;
}

.contentFocus {
    padding: 20px 110px 60px;
    position: relative;
    top: 220px;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: normal;
}

.contentFocusVideo {
    margin-top : -20px;
    padding: 0px 110px 60px;
    position: relative;
    top: 220px;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: normal;
}

/* BTN CLOSE FR */
.closePageIn,.closePageInFin,.closePageInMail,.closePageInCredit {
    position:absolute;
    right:65px;
    top:35px;
    cursor:pointer;
    width : 144px;
    height : 32px;
    background : url(../img/btnRevenirVideo.jpg) no-repeat;
     -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.closePageIn:hover,.closePageInFin:hover,.closePageInMail:hover,.closePageInCredit:hover {
    background : url(../img/btnRevenirVideoHover.png) no-repeat;
     -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
/* BTN CLOSE EN */
.closePageInBis,.closePageInFinBis,.closePageInMailBis,.closePageInCreditBis {
    position:absolute;
    right:65px;
    top:35px;
    cursor:pointer;
    width : 144px;
    height : 32px;
    background : url(../img/close.png) no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.closePageInBis:hover,.closePageInFinBis:hover,.closePageInMailBis:hover,.closePageInCreditBis:hover {
    background : url(../img/Hoverclose.png) no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
#SPLien {
    text-decoration: none;
    color : #555;
}

#filter {
    position:absolute;
    z-index:101;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    display:none;
}

.logosCredits a {
    float: left;
    margin-left: 132px;
}

.logoVDP {
    margin-left: 270px;
}

/* EN SAVOIR PLUS */

#enSavoirPlus {
    position:absolute;
    width:500px;
    height:100%;
    top:0;
    right:-500px;
    background-image:url("../img/bgEnSavoirPlus.png");
    background-repeat: repeat-y;
    overflow: auto;
    z-index: 1001;
    overflow-x:hidden;
}

.containerEnSavoirPlus {
    padding-bottom: 60px;
}

.headerEnSavoirPlus {
    position:relative;
    height:140px;
    border-bottom:2px solid #babcc0;
    background-image:url("../img/logoEnSavoirPlus.png");
    background-position: center 55px;
    background-repeat: no-repeat;
}

.closeEnSavoirPlus {
    position:absolute;
    right:20px;
    top:20px;
    cursor: pointer;
    width : 125px;
    height : 28px;
    background : url(../img/btnRevenirVideo.png) no-repeat;
    background-size:  125px 28px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.closeEnSavoirPlus:hover {
    background : url(../img/btnRevenirVideoHover.png) no-repeat;
    background-size:  125px 28px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.closeMore {
    position:absolute;
    right:20px;
    top:20px;
    cursor: pointer;
    width : 125px;
    height : 32px;
    background : url(../img/close.png) no-repeat;
    background-size:  125px 32px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.closeMore:hover {
    background : url(../img/Hoverclose.png) no-repeat;
    background-size:  125px 32px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.contentEnSavoirPlus {
    position: relative;
    background-image:url("../img/bgContentEnSavoirPlus.png");
    background-repeat:repeat-y;
    background-position: 12px top;
    padding:0 20px 0 70px;
}

.titleEnSavoirPlus {
    color:#474747;
    font-size:1.125em;
    margin:25px 0;
}

.contentEnSavoirPlus > p {
    color:#707273;
    font-size:14px;
    line-height: 19px;
    letter-spacing: normal;
}

.imgSavoirPlus {
    background-image: url("../img/bgImageSavoirPlus.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    height: 310px;
    margin: 35px 0 35px -30px;
    position: relative;
    width: 452px;
}

.imgSavoirPlus > img {
    left: 32px;
    position: absolute;
    top: 45px;
}

/* ZONE DE CLICK */

.societe_epoque_romane .zoneClickA {
    position: absolute;
    height: 40%;
    width: 100%;
    right: 0;
    line-height: 200px;
    display: none;
    cursor: pointer;
    z-index:101;
}

.societe_epoque_romane .zoneClickB {
    position: absolute;
    height: 40%;
    width: 40%;
    left: 35%;
    line-height: 200px;
    display: none;
    cursor: pointer;
    z-index:101;
}

.societe_epoque_romane .zoneClickC {
    position: absolute;
    height: 40%;
    width: 40%;
    right: 30%;
    line-height: 200px;
    display: none;
    cursor: pointer;
    z-index:101;
}

.societe_epoque_romane .zoneClickD {
    position: absolute;
    height: 70%;
    width: 60%;
    left: 0;
    line-height: 200px;
    display: none;
    cursor: pointer;
    bottom: 0;
    z-index:101;
}

.societe_epoque_romane .zoneClickE {
    position: absolute;
    height: 80%;
    width: 60%;
    left: 0;
    line-height: 200px;
    display: none;
    cursor: pointer;
    bottom: 0;
    z-index:101;
}

/* ZONE CLICK ART ROMAN */

.art_roman .zoneClickA {
    position: absolute;
    height: 70%;
    width: 50%;
    right: 0;
    line-height: 200px;
    display: none;
    cursor: pointer;
    z-index: 101;
}

.art_roman .zoneClickB {
    position: absolute;
    height: 70%;
    width: 80%;
    left: 0;
    line-height: 200px;
    display: none;
    cursor: pointer;
    z-index: 101;
}

.art_roman .zoneClickC {
    position: absolute;
    height: 75%;
    width: 50%;
    right: 0;
    line-height: 200px;
    display: none;
    cursor: pointer;
    z-index: 101;
}

.art_roman .zoneClickD {
    position: absolute;
    height: 60%;
    width: 60%;
    left: 0;
    line-height: 200px;
    display: none;
    cursor: pointer;
    z-index: 101;
}

/* ZONE CLICK PATRIMOINE_VIVANT */

.patrimoinve_vivant .zoneClickA {
    display: none;
    position: absolute;
    height: 83%;
    width: 50%;
    right: 0;
    line-height: 200px;
    /* display: none; */
    cursor: pointer;
    z-index: 101;
    top: 15%;
}

.patrimoinve_vivant .zoneClickB {
    position: absolute;
    height: 65%;
    width: 34%;
    right: 0;
    line-height: 200px;
     display: none; 
    cursor: pointer;
    z-index: 101;
    top: 0%;
    left: 30%;
}

.patrimoinve_vivant .zoneClickC {
    position: absolute;
    height: 65%;
    width: 34%;
    right: 0;
    line-height: 200px;
    /* display: none; */
    cursor: pointer;
    z-index: 101;
    top: 0%;
    left: 23%;
}

.patrimoinve_vivant .zoneClickD {
    position: absolute;
    height: 87%;
    width: 34%;
    right: 0px;
    line-height: 200px;
    cursor: pointer;
    z-index: 101;
    top: -1%;
    left: 30%;
    display: none;
}


#subtitles {
    display:none;
    font-family:Arial, sans-serif;
    left: 50%;
    position: absolute;
    text-align: center;
    width: 50%;
    z-index: 5;
    bottom: 5%;
    margin-left: -25%;
    color: #fff;
    font-size: 1.3em;
    letter-spacing: 0.12em;
}

#subtitles p {
    background-color: rgba(0, 0, 0, 0.4);
    margin: 5px 0;
}

/* IPAD */

.playerVimeo {
    text-align:center;
    width:640px;
    height:361px;
}

.playerVimeo.mobile {
    text-align:center;
    width:320px;
    height:180px;
}

.playerVimeo iframe {
    width:320px;
    height:180px;  
    display : block;
    margin : auto;
}

.onglet {
    text-align: center;
    width: 100%;
    display: block;
    padding-top: 15px;
    height: 55px;
    cursor: pointer;
    font-size: 18px;
    position: relative;
    border-bottom: 1px solid #e9e9e9;
    background: white;
}


.temoin {
    position: absolute;
    background: url('../img/ouvrirOnglet.png') no-repeat;
    width: 26px;
    height: 26px;
    top: 14px;
    right: 0
}

.ongletActif .temoin {
    position : absolute;
    background : url('../img/fermeOnglet.png') no-repeat !important;
}

.ongletContent {
    padding : 20px;
    background : #e9e9e9;
    display : none;
}

.ongletContent a {
    color : #222222;
    
}
.ongletContent ul li {
    margin-bottom : 10px;
}

#cestQuoiArtRomanRelative {
    position : relative;
    width : 160px;
    height : 160px;
}

#cestQuoiArtRomanRelative img {
    position : absolute;
    top : 0;
    left : 0;
}

#cestQuoiArtRomanHover {
    display : none;
    z-index : 100;
}

#cestQuoiArtRomanContour {
    z-index : 200;
}

#englishVersion {
     float: left;
     background-image: url("../img/langButton.png");
     background-repeat: no-repeat;
     height: 28px;
     width: 45px;
     display: block;
 }
#englishVersion:hover {
    background-image: url("../img/langButton.png");
}
#frenchVersion {
    float: left;
    background-image: url("../img/langFrButton.png");
    background-repeat: no-repeat;
    height: 28px;
    width: 45px;
    display: block;
}
#frenchVersion:hover {
    background-image: url("../img/langFrButton.png");
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

 .ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

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

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

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

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

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

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

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

/*
 * Hide visually and from screenreaders, 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;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

 .clearfix {
    *zoom: 1;
}

/* ==========================================================================
   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 print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

   @media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        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 for images, or javascript/internal links
     */

     .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; /* h5bp.com/t */
    }

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