/****************************************************/
/************** FONTFACE - SECTION ******************/
/****************************************************/

@font-face {

    font-family:"Brandon";
    src : url('../fonts/HVD Fonts - BrandonText-Regular.otf') format('truetype');
    font-weight: normal;
    font-size: normal;

}

@font-face {

    font-family:"Brandon";
    src : url('../fonts/HVD Fonts - BrandonText-Medium.otf') format('truetype');
    font-weight: bold;
    font-size: normal;

}

@font-face {

    font-family:"Brandon";
    src : url('../fonts/HVD Fonts - BrandonText-Light.otf') format('truetype');
    font-weight: lighter;
    font-size: normal;

}

div#videoModal { border-radius: 0px!important;  }
div#videoModal div.modal-dialog { width: 970px; border-radius: 0px!important;  }
div#videoModal div.modal-dialog div.modal-content { border-radius: 0px!important; }

/******************************************/
/************** Reset CSS *****************/
/******************************************/

body { background-color: #f4f4f4; font-family: 'Fira Sans', sans-serif; }
a { text-decoration: none!important; color:inherit; }

.animate {

	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;

}

div.content-book ul li a {
  color: #0f558d; text-decoration: underline!important;
}

/*******************************************/
/************** POST BOX *******************/
/*******************************************/

section#post { margin-top: 20px; }

div.post-box { background-color: white; margin-bottom: 20px; }
div.post-box div.text { padding: 15px; height: 210px; }
div.post-box div.text h2 { font-size: 20px; }
div.post-box div.text a { color: #0f558d; text-decoration: underline!important; }
div.post-box div.text span.separator { display: block; width: 40px; height: 6px; background-color: #0f558d; margin-bottom: 10px; }
div.post-box div.date { font-size: 18px; padding-left: 15px; padding-top: 20px; margin-bottom: -20px; text-transform: uppercase; font-weight: bold; }

/*******************************************/
/************** CONTENT PAGE ***************/
/*******************************************/
div.content-page {}
div.content-page a { color: #0f558d; text-decoration: underline!important; } 
div.content-page table { width: 100%; vertical-align: top;}
div.content-page table tr td { vertical-align: top; }

/*************************************/
/************** HEADER ***************/
/*************************************/

header#header { background-color: white; height: 180px; }
header#header img { width: 70%; margin-left: 15%; margin-top: 20px; }

/********************************************/
/************** HEADER MOBILE ***************/
/********************************************/

header#header-mobile { background-color: white; height: 80px;  position: fixed; left: 0px; top:0px; width: 100%; z-index: 99; }
header#header-mobile img { width: 14%; margin-left: 8%; margin-top: 0px; }
header#header-mobile a { position: absolute; right: 20px; top:15px; color:#0f558d; font-size: 30px; }

/*************************************/
/********** NAVIGUATION MOBILE *******/
/*************************************/

nav#nav-mobile { display:none; position:fixed; top:-100%; left:0px; width:100%; height:100%; z-index: 1001; background-color: #0f558d; padding-top: 40px; overflow: hidden;  }
nav#nav-mobile div.box { position: absolute; left:0%; top:0px; width: 100%; height: 100%; }

nav#nav-mobile ul { list-style: none; margin: 0px; padding: 0px; padding-left: 25px; width: 100%; position: relative; }
nav#nav-mobile ul>li { text-align: left; padding-top: 15px; position: relative; }
nav#nav-mobile ul>li>span.next { position: absolute; right:25px; top:10px; color:white; }
nav#nav-mobile ul>li>a { color:white; font-size: 18px; font-weight: 300; }
nav#nav-mobile ul>li>ul { display: none; }

nav#nav-mobile>div.box>ul { padding-top: 80px; background-size: 60%; background-repeat: no-repeat; background-position: center; height: 100%; }
nav#nav-mobile>div.box>ul>div.toolbar { font-weight: bold; padding-top: 10px; font-size: 22px; position: absolute; left:0px; top:0px; width: 100%; height: 50px; text-align: center; background-color: white; }
nav#nav-mobile>div.box>ul>div.toolbar>a.back { position: absolute; left:15px; top:14px; font-size: 16px; color:inherit;}

nav#nav-mobile ul.lvl_0 { position: absolute; left:0%; width: 100%; }
nav#nav-mobile ul.lvl_1 { position: absolute; left:100%; width: 100%; }
nav#nav-mobile ul.lvl_2 { position: absolute; left:200%; width: 100%; }
nav#nav-mobile ul.lvl_3 { position: absolute; left:300%; width: 100%; }
nav#nav-mobile ul.lvl_4 { position: absolute; left:400%; width: 100%; }
nav#nav-mobile ul.lvl_5 { position: absolute; left:500%; width: 100%; }
nav#nav-mobile ul.lvl_6 { position: absolute; left:600%; width: 100%; }
nav#nav-mobile ul.lvl_7 { position: absolute; left:700%; width: 100%; }
nav#nav-mobile ul.lvl_8 { position: absolute; left:800%; width: 100%; }
nav#nav-mobile ul.lvl_9 { position: absolute; left:900%; width: 100%; }



section#slider div.item img { position: relative; top:-100px; }

/*************************************/
/********** NAVIGUATION **************/
/*************************************/

nav#nav-left { background-color: white; position: relative; z-index: 99; }
nav#nav-left ul { margin: 0px; padding: 0px; padding-top: 20px; padding-bottom: 20px; }
nav#nav-left ul li { margin: 0px; padding: 0px; position: relative;  padding-left: 30px; list-style: none; padding-right: 20px; padding-bottom: 5px; padding-top: 4px; }
nav#nav-left ul li span.line { position: absolute; display: block; height: 100%; width: 1px; background-color: #0f558d; left:14px; top:0px;  }
nav#nav-left ul li span.point { position: absolute; display: block; height: 6px; border-radius: 8px; width: 6px; background-color: #0f558d; left:12px; top:7px;  }
nav#nav-left ul li span.point_hover { position: absolute; display: none; height: 10px; border-radius: 12px; width: 10px; border: solid 1px #0f558d; left:10px; top:5px;  }
nav#nav-left ul li:hover, nav#nav-left ul li.active { background-color: white; }
nav#nav-left ul li:hover span.point_hover, nav#nav-left ul li.active span.point_hover { display: block; }
nav#nav-left ul li a { font-size: 13px; color: #0f558d; text-decoration: none; position: relative; top:-3px; }
nav#nav-left ul li:first-child span.line { bottom: 0px; top: auto!important; height: 55%; }
nav#nav-left ul li:last-child span.line { height: 45%; }

nav#nav-left>ul>li>ul { left:0%; display: none; border:1px solid #ededed; margin: 0px; padding: 0px; background-color: rgba(255, 255, 255, 0.95); padding-left: 20px; }
nav#nav-left>ul>li>ul li { padding: 0px; margin: 0px; padding-top: 6px; padding-bottom: 4px; position: relative; }
nav#nav-left>ul>li>ul li span.point { position: absolute; display: none; height: 6px; border-radius: 8px; width: 6px; background-color: #9b9b9b; left:-11px; top:11px; }
nav#nav-left>ul>li>ul li:hover span.point { display: block; }
nav#nav-left>ul>li>ul li a { color:#9b9b9b; font-size: 13px; font-weight: 200; }
nav#nav-left>ul>li>ul li a:hover { font-weight: 400; }
nav#nav-left>ul>li:hover>ul { display: block; position: absolute; top:0px; left:100%; width: 120%; }

/******************************************/
/********** NAVIGUATION PAGE **************/
/******************************************/

nav#nav-page { border-left: 1px solid #0f558d; position: relative; }
nav#nav-page span.point { height: 6px; width: 6px; position: absolute; left:-3px; display: block; bottom: -3px; background-color: #0f558d; border-radius: 6px; }

nav#nav-page ul.main { margin: 0px; padding: 0px; display: block; background-color: #0f558d; width: 100%; padding-top: 12px; padding-bottom: 12px; padding-left: 30px;}
nav#nav-page ul.main li a { border-bottom: 2px solid #0f558d; text-decoration: none; }
nav#nav-page ul.main li.active a { color:white;  font-weight: bold; border-bottom: 2px solid white; }

nav#nav-page ul.second { margin: 0px; padding: 0px; display: block; background-color: white; width: 100%; padding-top: 12px; padding-bottom: 12px; padding-left: 30px; color:#0f558d; border-bottom:1px solid #e0e0e0; border-right:1px solid #e0e0e0; }
nav#nav-page ul.second li a { color:#0f558d; text-decoration: none; }
nav#nav-page ul.second li.active a { color:#0f558d; font-weight: bold; }

nav#nav-page>ul {  }
nav#nav-page>ul>li { list-style: none; display: inline-block; padding-right: 15px; }
nav#nav-page>ul>li>a { color:white; }
nav#nav-page>ul>li>ul { display: none; }
nav#nav-page>ul>li>ul>li { list-style: none; }

/******************************************/
/********** SECTION PAGE **************/
/******************************************/

section#page {}
section#page div.box-title { margin-top: 20px; background-image: url('../img/template/logo-bezannes-fade.png'); background-size: 28%; background-position: center; background-color: #f87c7c; position: relative; }
section#page div.box-title h1 { border-right:1px solid white; z-index: 10; position: relative; color:white; margin: 0px; padding: 0px; background-color: #f87c7c; padding-right: 20px; padding-left: 20px; padding-top: 10px; padding-bottom: 10px; display: inline-block; }
section#page div.box-title div.overlay { z-index: 9; position: absolute; background-color: rgba(0,0,0,0.2); left:0px; top:0px; width: 100%; height: 100%; }
section#page div.box-title:hover { background-size: 40%; background-position: left -80px; }
section#page div.box { padding: 30px; border:1px solid #e0e0e0; background-color: white; margin-top: 20px; }
section#page table {}
section#page table tr td img { margin-bottom: 10px; }

/*************************************************/
/********** SECTION PAGE - BOOK ******************/
/*************************************************/

section#page.book {}
section#page.book h2 { margin: 0px; padding: 0px; margin-bottom: 30px; }
section#page.book span.point { width: 6px; height: 6px; background-color: #10558e!important; position: absolute; display: block;  left:-3px; border-radius:3px;  }
section#page.book span.point.top { top:0px; }
section#page.book span.point.bottom { bottom:0px; }
section#page.book ul.nav { margin: 0px; padding: 0px; border:0px!important; border-left:1px solid #10558e!important; padding-left: 10px;  position: relative; }
section#page.book ul.nav li { width: 100%; border:0px; height: auto;  border-radius: 3px!important; }
section#page.book ul.nav li.active { width: 100%; border:0px!important;  background-color: #10558e!important;  }
section#page.book ul.nav li a { width: 100%; border:0px; padding: 0px; color:inherit; padding-left: 5px!important; padding-right: 5px!important; border-radius: 3px!important; display: block;  }
section#page.book ul.nav li.active a { width: 100%; border:0px!important;  background-color: #10558e!important; color:white!important;  }

/*************************************************/
/********** SECTION PAGE - BOOK ******************/
/*************************************************/

section#page.map {}
section#page.map div#map_canvas { width: 100%; height: 500px;  border-radius: 5px; }
section#page.map div#searchAdress { display: inline-block; background-color: #10558e; color:white; border-radius: 3px; padding: 7px; padding-left: 15px; padding-right: 15px;  }
section#page.map input { width: 50%!important; display: inline-block; margin-left: 10px; }

/*******************************************************/
/**************** SECTION CALL TO ACTION ***************/
/*******************************************************/
section#calltoaction {}
section#calltoaction div.item { color:white; height: 75px; position: relative; }
section#calltoaction div.item span.icon { position: absolute; top:12px; left:0px; width: 140px; text-align: center; }
section#calltoaction div.item span.icon img { height: 50px; }
section#calltoaction div.item.red { background-color: #f87c7c; }
section#calltoaction div.item.gold { background-color: #f8ce7c; }
section#calltoaction div.item.blue { background-color: #7cc5f8; }
section#calltoaction div.item.green { background-color: #a9dc6d; }
section#calltoaction div.item h2 { background-image: url('../img/template/logo-bezannes-fade.png'); background-size: 80%;  background-color: rgba(0,0,0,0.2); background-position: -10px -40px; height:75px; text-transform: uppercase; font-size: 24px;  display: block; margin-left: 140px; padding-left: 20px; padding-top: 25px; padding-bottom: 20px; border-left:1px solid white; }
section#calltoaction div.item h2:hover { background-size: 90%;  background-position: 10px -40px;  background-color: rgba(0,0,0,0); }

/***********************************************/
/**************** SECTION SLIDER ***************/
/***********************************************/
section#slider div.carousel { height: 230px; overflow-y: hidden; }
section#slider .carousel-indicators { left:20px; margin: 0px; text-align: left; bottom:15px; }
section#slider .carousel-inner { height: 230px; }
section#slider .carousel-inner div.item { height: 230px; }
section#slider .carousel-inner div.item .carousel-caption { font-size: 18px; font-weight: bold; left: 0px; right: 0px; width: 100%; height: 50px; padding: 0px; bottom:0px; position: absolute; z-index: 9; background-color: rgba(82,100,109,0.80); text-shadow: none; text-align: left; padding-left: 90px; padding-top: 12px; }

/************************************************/
/**************** SECTION DISPLAY ***************/
/************************************************/
section#displaynews { margin-top: 24px; }
section#displaynews div.display_lvl_1 { position: relative; width: 100%; height: 300px; overflow: hidden; background-color: black; }
section#displaynews div.display_lvl_1 img { width: 110%; opacity: 0.6; }
section#displaynews div.display_lvl_1 div.text { position: absolute; width:80%; left:10%; top:100px; text-align: center; }
section#displaynews div.display_lvl_1 div.text h2 { color:white; font-size: 24px; text-transform: uppercase; }
section#displaynews div.display_lvl_1 div.text div.date { font-size: 20px; color:#7cc5f8;; font-weight: bold; }
section#displaynews div.display_lvl_1 div.text div.line-title { display: inline-block; width: 100px; height: 2px; background-color: white; }
section#displaynews div.display_lvl_1 div.text p { opacity: 0; margin-left: 60px; margin-right: 60px; color:white; margin-top: 20px; }
section#displaynews div.display_lvl_1 div.line { position: absolute; background-color: white; z-index: 9; }

section#displaynews div.display_lvl_1 div.line.left { left:-5%; top:3%; height: 94%; width: 1px; }
section#displaynews div.display_lvl_1 div.line.right { right:-5%; top:3%; height: 94%; width: 1px; }
section#displaynews div.display_lvl_1 div.line.top { top:-10%; left:2%; width: 96%; height: 1px; }
section#displaynews div.display_lvl_1 div.line.bottom { bottom:-10%; left:2%; width: 96%; height: 1px; }

section#displaynews div.display_lvl_1:hover div.text { top:50px; }
section#displaynews div.display_lvl_1:hover div.text p { opacity: 1; }
section#displaynews div.display_lvl_1:hover img { opacity: 0.4; }
section#displaynews div.display_lvl_1:hover div.line.left { left:5%; top:3%; height: 94%; width: 1px; }
section#displaynews div.display_lvl_1:hover div.line.right { right:5%; top:3%; height: 94%; width: 1px; }
section#displaynews div.display_lvl_1:hover div.line.top { top:10%; left:2%; width: 96%; height: 1.1px; }
section#displaynews div.display_lvl_1:hover div.line.bottom { bottom:10%; left:2%; width: 96%; height: 1px; }

section#displaynews div.display_lvl_2 { position: relative; width: 100%; height: 140px; overflow: hidden; background-color: black; margin-bottom: 20px; }
section#displaynews div.display_lvl_2 img { width: 100%; opacity: 0.6; }
section#displaynews div.display_lvl_2 div.title { position: absolute; width:100%; text-align: right; bottom:0px; padding: 15px; }
section#displaynews div.display_lvl_2 div.title h2 { color:white; font-size: 14px;  font-weight: bold; margin: 0px; padding: 0px; }
section#displaynews div.display_lvl_2 div.title div.date { font-size: 12px; color:#7cc5f8;; font-weight: bold; }
section#displaynews div.display_lvl_2 div.text { position: absolute; left:0px; top:-100%; height: 100%; width: 100%; padding-left: 20px; }
section#displaynews div.display_lvl_2 div.text p { border-left: 2px solid white; color:white; font-size: 11px; padding-right: 20px; padding-left: 10px; padding-top: 10px; }
section#displaynews div.display_lvl_2:hover div.text { top:0%; }
section#displaynews div.display_lvl_2:hover img { width: 100%; opacity: 0.4; }

/*********************************************/
/**************** SECTION NEWS ***************/
/*********************************************/
section#news { margin-top: 24px; }
section#news div.list div.item { background-color: white; border: solid 1px #ededed; margin-bottom: 20px; position: relative; height: 141px; }
section#news div.list div.item div.media { margin: 3px; width: 130px; height: 133px; overflow: hidden; position: absolute;}
section#news div.list div.item div.media img { height: 100%; }
section#news div.list div.item div.box { margin-left: 136px; padding: 12px; position: relative; height: 100%; }
section#news div.list div.item div.box div.title h3 { margin: 0px; padding: 0px; color: #0f558d; line-height: 1.1; font-size: 20px; font-weight: bolder; }
section#news div.list div.item div.box div.content { padding-top: 14px; padding-bottom: 24px; }
section#news div.list div.item div.box div.content p { font-size: 14px; line-height: 1.1; color: #6c6c6c; }
section#news div.list div.item div.box div.date { text-align: right; color: #0f558d; font-size: 14px; font-weight: bold; position: absolute; right:10px; bottom:10px; }

/**********************************************/
/**************** SECTION VIDEO ***************/
/**********************************************/
section#video { margin-top: 20px; background-color: #0f558d; color:white; }
section#video p { padding: 5px; }
section#video div.thumb { background-color: black; }
section#video div.thumb img { opacity: 0.5; width: 100%; }


/***********************************************/
/**************** SECTION PRESSE ***************/
/***********************************************/
section#presse { text-align: center; }
section#presse div.icon { background-color: #156fb7; color:white; padding-top: 10px; padding-bottom: 10px; }
section#presse div.text { background-color: #0f558d; color:white; text-transform: uppercase; }


/**********************************************/
/**************** SECTION EVENT ***************/
/**********************************************/
section#event { margin-top: 24px; }
section#event div.list div.item { background-color: white; border: solid 1px #ededed; margin-bottom: 5px; position: relative; height: 171px; }
section#event div.list div.item div.media { margin: 3px; width: 240px; height: 163px; overflow: hidden; position: absolute;}
section#event div.list div.item div.media img { height: 100%; }
section#event div.list div.item div.box { margin-left: 244px; padding: 12px; }
section#event div.list div.item div.box div.title { background-color: #f87c7c; margin-top: -4px; }
section#event div.list div.item div.box div.title h3 { margin: 0px; padding: 0px; font-size: 16px; color: #ffffff; height: 25px; padding-left: 10px; padding-top: 4px; }
section#event div.list div.item div.box div.content { padding-top: 14px; padding-bottom: 24px; }
section#event div.list div.item div.box div.content p { font-size: 14px; line-height: 1.1; color: #6c6c6c; }
section#event div.list div.item div.box div.date { text-align: right; color: #f87c7c; font-size: 14px; font-weight: bold; }

section#event div.header { background-color: #f87c7c; height: 80px; text-align: center; position: relative; }
section#event div.header h2 { margin: 0px; padding: 0px; }
section#event div.header img { width: 40%; margin-top: 36px; }
section#event div.header div.content { background-image: url('../img/template/logo-bezannes-fade.png'); background-size: 80%;  background-color: rgba(0,0,0,0.2); background-position: -10px -40px;  padding-left: 18px; padding-top: 14px; position: absolute; bottom:0px; left:0px; width: 100%; height: 80px; color:white; text-align: left; text-transform: uppercase; font-size: 24px; }
section#event div.header div.content:hover { background-size: 90%;  background-position: 10px -40px;  background-color: rgba(0,0,0,0); }
section#event div.header div.content h2 { font-size: 20px; }
section#event div.header div.content a:hover { color: white; }


section#event div.calendar div.calendar-title { width: 100%; height: 40px; background-color: #52646d; text-align: center; color:white; font-size: 14px; text-transform: uppercase; margin-top: 20px; padding-top: 10px; letter-spacing: 1px; font-weight: bold; }
section#event div.calendar .ui-datepicker { width: 100%; border-radius: 0px; border:none; margin-top: 0px; }
section#event div.calendar .ui-datepicker .ui-datepicker-header { border:none!important; background: none!important;}
section#event div.calendar .ui-datepicker .ui-datepicker-header a span { background: none!important; text-indent: 0px!important; font-size: 8px; }
section#event div.calendar .ui-datepicker .ui-datepicker-header a:hover { background: none!important; border:0px!important; }
section#event div.calendar .ui-datepicker .ui-datepicker-header a:hover span { background: none!important; text-indent: 0px!important; border:0px!important;  }
section#event div.calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-title { font-size: 12px; font-weight: 400; }
section#event div.calendar .ui-datepicker .ui-datepicker-calendar thead tr th { font-size: 11px; }
section#event div.calendar .ui-datepicker .ui-datepicker-calendar tbody tr td { text-align: center; font-size: 11px; border:0px!important; background:none!important; }
section#event div.calendar .ui-datepicker .ui-datepicker-calendar tbody tr td a { text-align: center; font-size: 11px; border:0px!important; background:none!important; }
section#event div.calendar .ui-datepicker .ui-datepicker-calendar tbody tr td span { text-align: center; font-size: 11px; border:0px!important; background:none!important; }

/*************************************/
/************** FOOTER ***************/
/*************************************/
footer#footer { background-color: white; color:white; margin-top: 30px; padding-top: 20px; }
footer#footer h4 { font-size: 16px; margin-bottom: 30px; color: #0f558d; }
footer#footer p { color: #0f558d; }
footer#footer ul { margin: 0px; padding: 0px; list-style: none; width: 100%; }
footer#footer ul li { width: 100%; position: relative; height: 40px; border-bottom: 1px solid white; padding-top: 10px; }
footer#footer ul li div.title { position: absolute; left:0px; color: #0f558d; }
footer#footer ul li div.number { position: absolute; right:0px; color: #0f558d; }
footer#footer button { width: 100%; margin-top: 20px; border:none; height: 50px; background-color: white; color:#0c426e; font-weight: bold; }
footer#footer input.form-control { border-radius: 0px; outline: none; box-shadow: none; background-color: #156fb7; color:white; border:2px solid white; height: 50px; }
footer#footer div.sub-footer { padding-top: 20px; padding-bottom: 15px; background-color: #0c426e; margin-top: 30px; font-size: 10px; }

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

footer#footer :-moz-placeholder { /* Firefox 18- */
   color: #b3c2ca!important;
}

footer#footer ::-moz-placeholder {  /* Firefox 19+ */
   color: #b3c2ca!important;
}

footer#footer :-ms-input-placeholder {
   color: #b3c2ca!important;
}


@media (min-width: 1200px){
	/*.container { width: 970px; }*/
}

@media (max-width: 470px){
	body { padding-top: 100px; }
}