@charset "utf-8";
/*******************************************/
/*****     CSS Document                *****/
/*****                                 *****/
/*****     Site web QUORUM             *****/
/*****                                 *****/
/*****     Auteur : Yann Choinard      *****/
/*****     c/o: MERYAN PRODUCTIONS     *****/
/*****                                 *****/
/*****     Version : Mars 2017         *****/
/*****     Modification : Nov 2022     *****/
/*****                                 *****/
/*******************************************/

/**
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
**/
*{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body{
	margin:0px;
	padding:0px;
	font-family: 'Dosis', verdana, calibri, Gill, serif, arial, 'Source code pro', time new roman;
	color:#444;
	font-size:16px;
	width:100%;
	background:#fff;
}

/**************************/
/*****     BANNER     *****/
/**************************/

.container-banner{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
	background: #000;
}

.logo{
	margin: 10px 10px;
}

.typo-logo{
	margin: 5px 10px;
	padding: 5px 10px;
	color: #fff;
	font-size: 48px;
	font-family: 'Dosis';
	font-variant: small-caps;
	text-shadow: 2px 2px 4px #000;
}

.btn-menu{
	margin: 10px 10px;
	padding: 5px 10px;
	text-decoration: none;
	color: #fff;
	font-size: 18px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.btn-menu:hover{
	border-top: 2px solid #fff;
	border-bottom: 4px solid #fff;
	border-radius: 8px;
	box-shadow: 0px 0px 20px #fff;
}

.container-btn-reseau{
	margin: 10px 20px;
}

.btn-reseau{
	margin: 2px 5px;
}

.ico-reseau:hover{
	transform: scale(0.8);
}

.btn-up{
	padding: 5px 5px 8px 5px;
	position: fixed;
	bottom: 30px;
	right: 15px;
	text-decoration: none;
	font-size: 22px;
	transform: rotate(90deg);
	font-family: arial;
	color: #333;
}

.btn-up:hover{
	border: 1px solid #333;
	border-radius: 5px;
	background-color: #eee;
}

/******************************/
/***** MENU HAMBURGER     *****/
/******************************/
/*****  Btn     *****/
.container-btn-hamb{
	position: fixed;
	top: 40px;
	right: 15px;
	width: 40px;
	height: 40px;
	border: 1px solid #ff0000;
	border-radius: 2px;
	cursor: pointer;
	z-index: 1000;
}

.btn-hamb-tiret-01{
	position: relative;
	top: 10px;
	left: 4px;
	width: 30px;
	height: 1px;
	background-color: #afafaf;
}

.btn-hamb-tiret-02{
	position: relative;
	top: 18px;
	left: 4px;
	width: 30px;
	height: 1px;
	background-color: #afafaf;
}

.btn-hamb-tiret-03{
	position: relative;
	top: 25px;
	left: 4px;
	width: 30px;
	height: 1px;
	background-color: #afafaf;
}

.btn-hamb-tiret-close-01{
	position: relative;
	top: 18px;
	left: 4px;
	width: 30px;
	height: 2px;
	background-color: #afafaf;
	transform: rotate(45deg);
}

.btn-hamb-tiret-close-02{
	position: relative;
	top: 16px;
	left: 4px;
	width: 30px;
	height: 2px;
	background-color: #afafaf;
	transform: rotate(-45deg);
}
/*****  Contenu  *****/
.container-content-menu-hamb{
	position: fixed;
	top: 0px;
	right: 0px;
	width: 100%;
	padding: 20px 20px;
	text-align: right;
	background-color: #222;
	z-index: 900;
	opacity: 0.98;
}

.btn-content-menu-hamb{
	margin: 5px 60px;
	padding: 5px 80px;
	text-decoration: none;
	color: #fff;
	line-height: 40px;
	font-size: 20px;
}

.btn-content-menu-hamb:hover{
	color: #00ff00;
}

/**************************/
/*****     SLIDER     *****/
/**************************/
.container-slider{
	margin: 5px auto;
	text-align: center;
}

.video-slider{
	margin: auto;
	max-width: 100%;
	height: auto;
}

/********************************************/
/*****     SECTION 1 - Présentation     *****/
/********************************************/
.container-presentation-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
}

.title-section{
	margin-top: 10px;
	margin-left: 10px;
	width: 90%;
	padding-bottom: 5px;
	padding-right: 50px;
	font-size: 24px;
	font-family: 'Dosis';
	font-weight: 400;
	border-bottom: 1px solid #333;
}
/************************************/
.title-section-expert{
	margin: 10px 40px;
	width: 90%;
	font-size: 24px;
	font-family: 'Dosis';
	font-weight: 400;
	border-bottom: 1px solid #333;
}

.container-present-child-soc{
	margin: 10px 10px;
	max-width: 360px;
}

.title-article{
	font-size: 20px;
	margin-left: 40px;
}

.content-article-present{
	margin-left: -30px;
}

.container-pict-dem-00{
	text-align: center;
}

.text-article{
	margin-left: 10px;
}

.title-article-ref{
	margin-left: 10px;
}

.text-article-ref{
	margin-left: 10px;
}

.container-expert-ref-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
    justify-content: space-around;
    align-items: start;
}



/***************************************/
/*****     SECTION REALISATION     *****/
/***************************************/
.sub-titre{
	text-align: center;
	font-size: 22px;
	font-weight: 400;
}

.container-onglet-catalogue{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
}

.btn-onglet{
	margin: 0px 1px;
	padding: 5px 5px;
	border: 1px solid #666;
	border-radius: 5px 15px 0px 0px;
	cursor: pointer;
	color: #fff;
	background: linear-gradient(0deg, #2c0076, #b7a0d0);
}

.btn-onglet:hover{
	opacity: 0.6;
}

/*****  Container cache list PGM  *****/
.container-type-pgm{
	margin: 2px auto;
	width: 90%;
	padding: 5px 10px;
	border: 1px solid #000;
	background-color: #eee;
}

.titre-type-pgm{
	text-align: center;
	font-size: 24px;
	font-weight: 400;
	text-decoration: underline;
}

.list-pgm-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
}
/***********************************/
.section-catalogue-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}

.content-kind{
	margin: 10px 20px;
	padding: 5px 10px;
	border: 1px solid #000;
	cursor: pointer;
	width: 220px;
}

.titre{
	padding: 5px 10px;
	font-weight: 600;
	background: linear-gradient(-90deg, #333, #bbb);
	color: #fff;
	text-shadow: 2px 2px 4px #000;
	letter-spacing: 2px;
}

/************************************/
/*****     SECTION SHOWREEL     *****/
/************************************/

.container-show-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
}

.titre-vignette-showreel{
	text-align: center;
	font-size: 18px;
	font-weight: 600;
}

.content-show-chd{
	margin: 5px 10px;
	max-width: 240px;
}

.pict-show{
	overflow: hidden;
}

.btn-player{
	position: relative;
	top: -140px;
	left: 80px;
	cursor: pointer;
	opacity: 0.9;
	z-index: 10;
}

/**************************/
/*****     FOOTER     *****/
/**************************/
.color-ours{
	background: #000;
	color: #fff;
}

.section-contact{
	margin: 10px 30px;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
    justify-content: space-around;
    align-items: start;
	background: #000;
	color: #fff;
}

.ours{
	margin: 10px 30px;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
	background: #000;
	color: #fff;
}

.container-btn-meryan{
	margin: auto;
	text-align: center;
	background: #000;
}

.ours-menu-btn{
	margin: 0px 10px;
	padding: 5px 10px;
	text-decoration: none;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 5px;
}

.btn-legal{
	margin-top: 10px;
}

.btn-meryan{
	text-decoration: none;
	color: #fff;
}

/***************************************************/
/*****     GESTION DES ECRANS (Responsive)     *****/
/***************************************************/

@media only screen and (max-width: 540px) {
	.container-btn-menu{
		display: none;
	}
  }
  
@media only screen and (min-width: 540px) {
	.container-menu-hamb{
		display: none;
	}
  }