
/*
====================================================

* 	[Master Stylesheet]
	
	Theme Name : messalineraverdy.me 
	Version    :  1.0.0
	Author     :  Franck Halatre
	Author URI :  artinthebox.be

====================================================

	TOC
	
	1. PRIMARY STYLES
	2. COMMONS FOR PAGE DESIGN
		JQUERY LIGHT BOX
	3. LEFT SECTION
	4. RIGHT SECTION

====================================================

/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

html{ 	font-size: 100%;  
		width: 100%; 
		overflow-x: hidden; 
		margin: 0px;  
		padding: 0px; 
		touch-action: manipulation;
}


body{ font-size: 16px; 
    font-family: 'Quicksand', sans-serif;
    font-weight: normal;
    font-style: normal;
    width: 100%; 
    margin: 0;
	-webkit-font-smoothing: antialiased; 
	-moz-osx-font-smoothing: grayscale; 
	word-wrap: break-word; 
	color: #333; }
	
.container-fluid.max-width {
	max-width: 1440px
}

h1, h2, h3, h4, h5, h6, p, a, ul, span, li, img, inpot, button{ margin: 0; padding: 0; }

h1,h2,h3,h4,h5,h6{ line-height: 1.5; font-weight: inherit; }

.ff1,h2,h3,.item-menu-onglet { font-family: 'Conv_belgika-8th-webfont' !important;}

h1 { font-family: 'Conv_belgika-16th-webfont' !important;}

p{ line-height: 1.6; font-size: 1.05em;  color: #555; }

h1{ font-size: 2em; line-height: 1; }
h2{ font-size: 3em; line-height: 1.1; }
h3{ font-size: 2.5em; }
h4{ font-size: 1.5em; }
h5{ font-size: 1.2em; }
h6{ font-size: .9em; letter-spacing: 1px; }

section.sous-section h3.intertitre-section {
	border-bottom: 1px solid #4A8389;
	font-size: 1em; 
	
}

.event-date-info-a-venir {
	border: 1px solid #4A8389;
	font-size: 12px;
	padding: 4px;
	border-radius: 4px;
	text-align: center
}

.color-1 {
	color:#4A8389 !important
}
.projections-a-venir {
	border-left: 4px solid #4A8389;
	font-size: 1.5em;
	border-bottom: none !important
}
.projections-a-venir td  {
	padding-left: 11px !important
}
.color-2 {
	color:#E45F74 !important
}
.projections-passees {
	border-left: 4px solid #E45F74;
	font-size: 1.5em;
	border-bottom: none !important
	
}
.projections-passees td {
	padding-left: 11px !important
}
section.sous-section h2 {
	font-size: 32px;
	font-family: 'Conv_belgika-16th-webfont' !important;
}
section.sous-section h4 {
	font-size: 12px;
	line-height: 13px;
	color: #333
}
section.sous-section h5 {
	font-size: 12px !important;
	line-height: 13px !important;
	color: #333
}

section.sous-section header {
	margin: 30px 0px
}

a, button{ display: inline-block; text-decoration: none; color: inherit; transition: all .3s; line-height: 1; }

table.staff {
	width: 100%
}



table.staff .td-label {
padding-right: 5px; border-right: 1px solid rgba(0,0,0,.5)	
}
table.staff tr {border-bottom: 1px solid rgba(0,0,0,.1)}
table.staff tr:last-child  {
	border-bottom: none
}
table.staff .td-content {
padding-left: 5px; 	
}
table.staff .td {
	vertical-align: middle !important;
	line-height: 32px
}

a:focus, a:active, a:hover,
button:focus, button:active, button:hover,
a b.light-color:hover{ text-decoration: none; color: #E45F74; }

b{ font-weight: 500; }

img{ width: 100%; }

li{ list-style: none; display: inline-block; }

span{ display: inline-block; }

button{ outline: 0; border: 0; background: none; cursor: pointer; }

b.light-color{ color: #444; }

.icon{ font-size: 1.1em; display: inline-block; line-height: inherit; }

[class^="icon-"]:before, [class*=" icon-"]:before{ line-height: inherit; }



/* ---------------------------------
2. COMMONS FOR PAGE DESIGN
--------------------------------- */

.center-text{ text-align: center; } 

.display-table{ display: table; height: 100%; width: 100%; }

.display-table-cell{ display: table-cell; vertical-align: middle; }



::-webkit-input-placeholder { font-size: .9em; letter-spacing: 1px; }

::-moz-placeholder { font-size: .9em; letter-spacing: 1px; }

:-ms-input-placeholder { font-size: .9em; letter-spacing: 1px; }

:-moz-placeholder { font-size: .9em; letter-spacing: 1px; }


.main-area{ position: relative; height: 100%; }


/* ---------------------------------
3. LEFT SECTION
--------------------------------- */

/*
.left-section{ float: left; width: 50%; position: relative; }
*/

.left-section .logo{ position: absolute; top: 40px; height: 30px; }

.left-section .logo img{ height: 100%; width: auto; } 


.left-section .main-content{ padding: 40px 40px 40px 0; }

.main-content .title{ margin-bottom: 15px; }

.main-content .email-input-area{ margin: 40px 0 20px; position: relative; width: 400px; height: 47px; }

.main-content .email-input-area .email-input{ width: 100%; position: absolute; top: 0; bottom: 0; left: 0; 
	border-radius: 40px; border: 0; outline: 0; padding: 0 140px 0 25px; transition: all .2s; background: #F1F2F3; 
	box-shadow: inset 0 0 1px rgba(0,0,0,.1); border: 1px solid transparent; }

.main-content .email-input-area .email-input:focus{ border-color: #f89fbc; }


.main-content .email-input-area .submit-btn{ width: 120px; text-align: center; position: absolute; top: 0; bottom: 0; right: 0; font-size: .9em;
	border-radius: 0 40px 40px 0; transition: all .3s; background: #F84982; color: #fff; }

.main-content .email-input-area .submit-btn:hover{ background: #e40b52; }


.main-content .post-desc{ color: #999; }


.left-section .footer-icons{ position: absolute; bottom: 30px;}

.left-section .footer-icons > li > a{ display: inline-block; font-size: 1.07em; padding: 0 0px; }

.left-section .footer-icons > li:first-child{ margin-right: 10px; }

.left-section .footer-icons > li > a > i{ display: inline-block; height: 35px; line-height: 33px; 
	transition: all .2s; border-radius: 40px; text-align: center; width: 35px; }

.left-section .footer-icons > li > a:hover > i{ border: 1px solid; }

.left-section .footer-icons > li > a > i[class*="facebook"]{ color: #2A61D6; border-color: #2A61D6; }
.left-section .footer-icons > li > a > i[class*="twitter"]{ color: #3AA4F8; border-color: #3AA4F8; }
.left-section .footer-icons > li > a > i[class*="google"]{ color: #F43846; border-color: #F43846; }
.left-section .footer-icons > li > a > i[class*="instagram"]{ color: #8F614A; border-color: #8F614A; }
.left-section .footer-icons > li > a > i[class*="pinterest"]{ color: #E1C013; border-color: #E1C013; }



/* ---------------------------------
4. RIGHT SECTION
--------------------------------- */


.right-section:after{ content:''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: -2;
	/* opacity: .7; background: linear-gradient(to right, #ca331e, #4A8389); */ }



/* ---------------------------------
5. CUSTOM
--------------------------------- */

#rounded-countdown{ width: 80%; margin: 0 auto; }




	@media screen and (min-width: 992px) {	
				nav.menu-onglet {padding: 30px 0px 0px 30px !important;}

		
		#head-page nav {
			position: fixed;
			top: 30px;
		}
		
		.right-section article.content-onglet {
			margin-top: 90px
		}
		
	.logos-pv {margin-top: 210px}
		
	nav.menu-onglet {position: fixed !important;right: 0px; z-index: 9999; background: #FFF; padding: 30px 0px 0px 0px;}
		
	.right-section,
	.left-section {
		height: 100%;
		overflow: scroll !important;
		-webkit-overflow-scrolling: touch;
		
	}
	.right-section {
		padding: 0px !important
	}
		#intro {
			background: #FFF; 
			position: absolute; 
			height: calc( 100% - 94px);
			overflow: auto;
			-webkit-overflow-scrolling: touch;
		}
		
		#plusdinfo-xs {
			display: none !important
		}
		.left-section .display-table {
		}
		.item-menu-onglet-top {
			display: none !important
		}

	}
	
	@media screen and (max-width: 991px) {		
		.logos-pv {margin-top: 30px}
		nav.menu-onglet {padding: 30px 0px 30px 0px; text-align: center; font-size: 130%}
		}
	
	
@media screen and (min-width: 1440px) {
}
	@media screen and (max-width: 992px) {
		#intro {
			background: #FFF; 
			position: relative; 
			height: auto !important;
			overflow: visible;
		}

		#head-page h3,
		.text-intro {
			padding: 20px
		}
	}	

	.c1 {
		color: #4A8389
	}
	.c2 {
		color: #b35668
	}

	
#plusdinfo-xs:hover {
	margin-top: 15px;
	display:block;
	text-align: center;
	border: 1px solid #4A8389;
	background: #4A8389;
	color:#FFF !important;
	border-radius: 6px;;
	padding: 7px;
}
#plusdinfo-xs {
	margin-top: 15px;
	display:block;
	text-align: center;
	border: 1px solid #58566b;
	background: #58566b;
	color:#FFF !important;
	border-radius: 6px;;
	padding: 7px;
}
#rounded-countdown {
	height: 155px !important;
	max-width: 570px;
	}

#intro table td {
	text-align: left !important; 
	padding: 7px 0px;
}
#intro table td:first-child {
	padding-left: 25px;
}
#intro ul {
	padding: 0px !important;
	padding-left: 25px !important;
	margin: 0px !important;

}
#intro ul li {
	padding: 5px 0px;
	list-style-position: outside;
	display: block
}

#intro ul li:before {
	font-family:'FontAwesome';
	content: '\f105';
	display: inline-block;
	position: absolute;
	margin-left: -10px;
}

#intro ul ul li:before {
	font-family:'FontAwesome';
	content: '\f0da';
	position: absolute;
	margin-left: -10px;
}

#intro p {
	padding-bottom: 10px;
}

#head-page {
	background: #FFF
}
.text-intro {
	 text-align: justify;
	 padding: 10px;
}
a { color: #4A8389 !important; }
a:hover { color: #b35668 !important; text-decoration: underline dotted }
a,
a:hover {
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out ;
}
.b1 {
	background: #4A8389;
	color: #FFF;
	border-radius: 6px;
	display: inline-block;
	padding: 4px;
	font-size: 80%
}
.item-menu-ajax,
.item-menu-onglet {
	display: inline-block;
	cursor: pointer;
	padding: 5px;
	border:1px solid #FFF;
}
.item-menu-ajax.actif,
.item-menu-onglet.actif, 
.item-menu-ajax:hover,
.item-menu-onglet:hover {
	border:1px solid #4A8389;
	color:  #4A8389 
}

.item-menu-ajax.actif:before,
.item-menu-onglet.actif:before {
	font-family:'FontAwesome';
	content: '\f105';
	color:#4A8389;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out ;
}
.item-menu-ajax.actif:hover:before,
.item-menu-onglet.actif:hover:before {
	font-family:'FontAwesome';
	content: '\f105';
	color:#4A8389;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out ;
}
.content-onglet {
	display: none;
	
	
}
.content-onglet.actif {
	display: block
}
.transition500:hover, .transition500, .transition500tree *, .transition500tree:hover * {
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out ;
	}
	
#intro {display: block !important; width: 100%}
#menu-p2 {margin-top: 5px; padding-top: 5px;}
#menu-p2.menu-ajax .item-menu-ajax:before {
  padding-right: 5px
}
	.table-infos {
		width: 100%
		
	
	}
	.table-infos tr {
		border-bottom: 1px solid  rgba(98,93,118,.2);
		vertical-align: middle
	}
	.table-infos td:nth-child(2) {
		
		padding-left: 5px !important;		
	}
	.table-infos tr:hover td:nth-child(2) {
		background: rgba(208,68,92,.1);
	}
	.table-infos tr:hover {
		cursor: pointer;
		background: rgba(208,68,92,.1);
		border-bottom: 1px solid  rgba(208,68,92,1);		
	}
	.table-infos tr:hover,
	.table-infos tr:hover .c1,
	.table-infos tr:hover a {
		color: #b35668 !important
		
	}

	#intro section h2 {
		font-size: 22px;
		padding: 20px 0px
	}
	
	#intro section h3 {
		font-size: 20px;
		padding: 20px 0px		
	}
.h3-mini,
.h3-sstitre {
	font-size: 16px
}

.h3-mini  {
	font-size: 18px !important;
	padding: 10px 0px !important
}	

h4  {
	font-size: 18px !important;
	padding: 10px 0px !important;
	color: #b35668 !important
}	


iframe {
	border: none !important
}


	h2.slide {
	cursor: pointer
}

	h2.slide:before {
	position: relative;
	
	}
h2.slide:hover {

}



h2.slide {
	position: relative
}

	h2.slide:before{
		content: '';
		bottom: 0px;
			left: 0px;
	position: absolute;
		width: 100%;
		border-bottom: 1px solid #000;
	bottom: 0px
	
	}

	h2.slide:after{
		bottom: 0px;
			left: 0px;
	position: absolute;
	content: '';
				border-bottom: 1px solid #b35668;
		width: 0px;
		display: block;
		-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out ;
	z-index: 9
	}

	h2.slide:hover:after{
		width: 100%;
		-webkit-transition: all 1500ms ease-in-out;
	-moz-transition: all 1500ms ease-in-out;
	-ms-transition: all 1500ms ease-in-out;
	-o-transition: all 1500ms ease-in-out;
	transition: all 500ms ease-in-out ;
	
	}
	
.section-slide {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

.section-slide .section-slide {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}


section.text-intro {
	padding-top: 0px !important;
}

/* AGENDA */

table.agenda tr { border-bottom: 1px solid #000}
.tr-annee {font-size: 170%}
.tr-annee  td {
padding-left: 15px !important}
.event-heure-debut,
.tr-mois {font-size: 120%}
.tr-mois td {
padding-left: 15px !important}
.event-jour-num { display: inline-block; width: 30px; text-align: left}
.event-jour  {font-size: 140%;}
.event-mois {font-size: 50%!important; padding-left: 5px}
.event-heure-fin {font-size: 80%}
.event-infos-date {min-width: 95px; padding-left: 15px !important;  padding-right: 5px !important}
.event-lieu {
	font-size: 90%;
	border-top: 1px dotted #000 
}

.tr-sep {
	border-bottom: none !important;
	height: 30px !important
}
.content-toggle-section-toggle {
  border-left: 2px solid #000;
	padding: 0px 0px 30px 10px;
	margin: 20px 0px;
	border-bottom: 2px solid #000;
	
}

.content-toggle-section-toggle section {
	padding-bottom: 20px;
	border-bottom:  1px solid rgba(0,0,0,.5);
}


@font-face {
	font-family: 'Conv_belgika-8th-webfont';
	src: url('../fonts/belgika-8th/belgika-8th-webfont.eot');
	src: local('?'), url('../fonts/belgika-8th/belgika-8th-webfont.woff') format('woff'), url('../fonts/belgika-8th/belgika-8th-webfont.ttf') format('truetype'), url('../fonts/belgika-8th/belgika-8th-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Conv_belgika-16th-webfont';
	src: url('../fonts/belgika-16th/belgika-16th-webfont.eot');
	src: local('?'), url('../fonts/belgika-16th/belgika-16th-webfont.woff') format('woff'), url('../fonts/belgika-16th/belgika-16th-webfont.ttf') format('truetype'), url('../fonts/belgika-16th/belgika-16th-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

