@charset "UTF-8";
/* ---------------------------------------
	Template Name : Site Web Michel Gosselin
	Version : 1.2   
	Author : Michel Gosselin
	E-mail : 939gosselin@videotron.ca      
	Last Date Modified :  March 2021
   --------------------------------------- */

body {
	margin:0;
	padding:0;
}

.clear{
	clear:both;
}
	
#web_site {
	width:990px;
	margin:0 auto;
	background-color:#005f7a;
}

#web_site_wrapper {
	width:930px;
	margin:0 auto;
	background-color:#fff;
}


/* -------------- Éléments du menu -------------*/
#header_menu_wrapper {
	width:930px;
	height:50px;
	margin:0 auto;
	padding:0;
}

#header_menu_container {
	width:930px;
	height:50px;
	margin:0 auto;
	padding:6px;
}

#h_1_fr {
	float:right;
	width:85px;
	height:50px;
	margin:0 auto;
	padding:0;
}

#h_1_en {
	float:right;
	width:85px;
	height:50px;
	margin:0 auto;
	padding:0;
}

#h_2 {
	float:right;
	width:135px;
	height:50px;
	margin:0 auto;
	padding:0;
}

#h_3 {
	float:right;
	width:135px;
	height:50px;
	margin:0 auto;
	padding:0;
}

#h_4_fr {
	float:right;
	width:135px;
	height:50px;
	margin:0 auto;
	padding:0;
}

#h_4_en {
	float:right;
	width:135px;
	height:50px;
	margin:0 auto;
	padding:0;
}

/** 
 * English version
 */

#header_btn_En {
	float:left;
	height:40px;
	width:37px;
	padding:16px 0 0 60px;
	background-repeat: no-repeat;
}

/* ----------------  En-tête -------------------*/
#header {
	width:930px;
	height:250px;
	margin:0 auto;
	background-color:#fff;
}

#header_po {
	width:930px;
	height:250px;
	margin:0 auto;
	background-color:#e9e7b4;
}

#header_wrapper {
	float:left;
	width:930px;
	height:545px;
	margin:0 auto;
	background: url('../images/bg_header.jpg') repeat-x top;
}

#header_logo {
	float:left;
	width:400px;
	height:495px;
	background: url('../images/ecusson.png') no-repeat;
}
 
/** 
 * Éléments d'entête pp.2-3
 */
 
#header_wrapper_2 {
	float:left;
	width:930px;
	height:210px;
	margin:0 auto;
	background: url('../images/bg_header_2.jpg') repeat-x top;
}

#header_logo_2 {
	z-index:200;
	float:left;
	width:400px;
	height:210px;
	margin-top:-50px;
	background: url('../images/ecusson_2.png') no-repeat;
}

/* ---------------------------------------------*/
#header_logo_en {
	float:left;
	width:400px;
	height:495px;
	background: url('../images/ecusson_en.png') no-repeat;
}

#header_logo_2_en {
	z-index:200;
	float:left;
	width:400px;
	height:210px;
	margin-top:-50px;
	background: url('../images/ecusson_2_en.png') no-repeat;
}

#header_picture_right {
	float:left;
	width:230px;
	height:495px;
	padding:145px 300px 0 0;
	text-align:center;
	background: url('../images/picture_right.png') no-repeat;
}

#header_picture_right h2 {
	font-family: 'Josefin Slab', Times serif;
	font-size: 20px;
	line-height:12px;
	color:#e9e7b4;
	font-weight:normal;
}

#header_picture_right h2 b {
	font-family: 'Josefin Slab', Times serif;
	font-size: 20px;
	line-height:18px;
	color:#fff;
	font-weight:bold;
}

#header_comment_right {
	float:left;
	font-family: 'Josefin Slab', Times serif;
	font-size: 16px;
	line-height:18px;
	text-align:left;
	width:510px;
	height:93px;
	padding:40px 20px 0 0;
}

/* ----------------- Centre --------------------*/
#bg_center_section {
	float:left;
	width:100%;
	height:300px;
	padding-top:50px;
	background-color:#e9e7b4;
}

#containeur_slideshow {
	width:930px;
	height:1500px;
	margin:0 auto;
}

#slideshow, #slideshow_2, #slideshow_3, #slideshow_4, #slideshow_5, #slideshow_6 {
	position:relative;
	width:640px;
	height:265px;
	margin:0 auto;
	padding-bottom:30px;
	background:transparent url('../images/portfolio/bg_slideshow.jpg') no-repeat 0 0;
}

#slidesContainer, #slidesContainer_2, #slidesContainer_3, #slidesContainer_4, #slidesContainer_5, #slidesContainer_6 {
	position:relative;
	overflow:hidden;
	width:560px;
	height:265px;
	margin:0 auto;
}

.slide, .slide_2, .slide_3, .slide_4, .slide_5, .slide_6 {
	width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
	height:265px;
	margin:0 auto;
}

/** 
 * Slideshow controls style rules.
 */
 
#leftControl, #leftControl_2, #leftControl_3, #leftControl_4, #leftControl_5, #leftControl_6 {
	top:0;
	left:0;
	background: url('../images/portfolio/control_left.jpg') no-repeat 0 0;
}

#rightControl, #rightControl_2, #rightControl_3, #rightControl_4, #rightControl_5, #rightControl_6 {
	top:0;
	right:0;
	background: url('../images/portfolio/control_right.jpg') no-repeat 0 0;
}

.control, .control_2, .control_3, .control_4, .control_5, .control_6 {
	position:absolute;
	display:block;
	width:39px;
	height:265px;
	text-indent:-10000px;
	cursor: pointer;
}

.slide h2 , .slide_2 h2, .slide_3 h2, .slide_4 h2, .slide_5 h2, .slide_6 h2 {
	font-family: 'Didact Gothic', Times serif;
	color:#fff;
	letter-spacing:-1px;
	padding-left:15px;
}

.slide p, .slide_2 p,  .slide_3 p, .slide_4 p, .slide_5 p, .slide_6 p {
	margin:15px;
}

.slide img,  .slide_2 img,  .slide_3 img, .slide_4 img, .slide_5 img, .slide_6 img {
	float:right;
	margin:0 15px;
}

/** 
 * Overlay style controls.
 */
 
#container_overlay {
	width:215px;
	height:146px;
	background: url('../images/overlay_picto_of_mine_3.jpg') no-repeat;
}

.container_overlay {
  	position: absolute;
	width: 215px;
	height: 146px;
	margin-left: 20.1em;
}

.image_overlay {
	position: absolute;
	width: 215px;
	height: 146px;
	padding-left: 18.78em;
}

.overlay {
	position: absolute;
	left: 100%;
	right: 0;
	bottom: 0;
	background-color: #669900;
	overflow: hidden;
	width: 0;
	height: 100%;
	transition: .5s ease;
	margin-left: -.4em;
	margin-bottom: 3.4em;
}

.container_overlay:hover .overlay {
	width: 100%;
	left: 0;
}

.text {
	font-family: 'Didact Gothic', Times serif;
	font-size: 40px;
	color: white;
	text-align: center;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

/* ---------------------------------------------*/
#container {
	width:930px;
	height:100%;
	margin:0 auto;
	background-color:#fff;
}

#container_po {
	width:930px;
	height:100%;
	margin:0 auto;
	background-color:#e9e7b4;
}

#container_left {
	float:left;
	max-width:375px;
	height:100%;
	min-height:200px;
}
	
#container_left_img_01 {
	width:375px;
	height:420px;
	background: url('../images/graphic_left_01.png') no-repeat;
}

#container_left_img_notebook_fr {
	width:375px;
	height:420px;
	background: url('../images/graphic_left_notebook_fr.png') no-repeat;
}

#container_left_img_notebook_en {
	width:375px;
	height:420px;
	background: url('../images/graphic_left_notebook_en.png') no-repeat;
}

#container_left_img_01_en {
	width:375px;
	height:420px;
	background: url('../images/graphic_left_01_en.png') no-repeat;
}

#container_left_img_02 {
	width:375px;
	height:388px;
	background: url('../images/graphic_left_02.png') no-repeat;
}

#container_left_img_02_en {
	width:375px;
	height:388px;
	background: url('../images/graphic_left_02_en.png') no-repeat;
}

#container_left_img_03 {
	width:375px;
	height:388px;
	background: url('../images/graphic_left_03.png') no-repeat;
}

#container_left_img_03_fr {
	width:375px;
	height:305px;
	background: url('../images/graphic_left_03_fr.png') no-repeat;
}

#container_left_img_03_en {
	width:375px;
	height:305px;
	background: url('../images/graphic_left_03_en.png') no-repeat;
}

#container_left_img_04_fr {
	width:375px;
	height:217px;
	background: url('../images/graphic_left_04_fr.png') no-repeat;
}

#container_left_img_04_en {
	width:375px;
	height:217px;
	background: url('../images/graphic_left_04_en.png') no-repeat;
}

#container_left_img_05_fr {
	width:375px;
	height:174px;
	background: url('../images/graphic_left_05_fr.png') no-repeat;
}

#container_left_img_05_en {
	width:375px;
	height:172px;
	background: url('../images/graphic_left_05_en.png') no-repeat;
}

#container_left_img_06_fr {
	width:375px;
	height:302px;
	background: url('../images/graphic_left_06_fr.png') no-repeat;
}

#container_left_img_06_en {
	width:375px;
	height:302px;
	background: url('../images/graphic_left_06_en.png') no-repeat;
}
 
/** 
 * Commentaire, bloc 1
 */
 
#container_left_spacer_01_fr {
	width:375px;
	height:70px;
}

#container_left_spacer_01 {
	width:375px;
	height:45px;
}

#container_left_spacer_02 {
	width:375px;
	height:70px;
}

#container_left_comment_01 {
	font-family: 'Didact Gothic', Times serif;
	font-size:12px;
	color:#43778f;
	line-height:13px;
	padding-right:35px;
	padding-bottom:40px;
	text-align:right;
}

#container_left_comment_dihah {
	font-family: 'Didact Gothic', Times serif;
	font-size:12px;
	color:#43778f;
	line-height:13px;
	padding-top:40px;
	padding-bottom:100px;
	text-align:center;
}

#container_left_comment_caissette {
	font-family: 'Didact Gothic', Times serif;
	font-size:12px;
	color:#43778f;
	line-height:13px;
	padding-top:40px;
	padding-bottom:100px;
	text-align:center;
}

/** 
 * Commentaire, bloc 2
 */
 
#container_left_spacer_02_fr {
	width:375px;
	height:85px;
}

#container_left_spacer_02 {
	width:375px;
	height:100px;
}

#container_left_comment_02 {
	font-family: 'Didact Gothic', Times serif;
	font-size:12px;
	color:#43778f;
	line-height:13px;
	padding-right:35px;
	text-align:right;
}

#container_right {
	float:left;
	font-size:15px;
	color:#363;
	width:500px;
	height:100%;
	text-align:left;
	padding-left:20px;
	padding-right:20px;
}

#container_right_berger {
	width:500px;
	height:165px;
	background: url('../images/expedition_berger.png') no-repeat;
}

#container_right_precision-box {
	width:500px;
	height:470px;
	background: url('../images/making-of-the-vector.png') no-repeat;
}

#container_right_chateau_frontenac {
	width:500px;
	height:281px;
	background: url('../images/chateau_frontenac.jpg') no-repeat;
}

#container_right_unesco {
	width:500px;
	height:220px;
	background: url('../images/joyaux_patrimoine_mondial_quebec.png') no-repeat;
}

#container_right_ashes-to-ashes-dust-to-dust {
	width:500px;
	height:494px;
	background: url('../images/ashes-to-ashes-dust-to-dust.jpg') no-repeat;
}

#container_right_see-ya {
	width:500px;
	height:137px;
	background: url('../images/see-ya.png') no-repeat;
}

#container_right_blue-pill {
	width:500px;
	height:395px;
	background: url('../images/blue-pill-is-hit.jpg') no-repeat;
	padding-bottom: 50px;
}

#container_right_caissette_semis-verte {
	width:500px;
	height:393px;
	background: url('../images/caissette_semis-verte.png') no-repeat;
	padding-bottom: 50px;
}

#container_right_plan_du_match {
	width:500px;
	height:469px;
	background: url('../images/plan_du_match.png') no-repeat;
	padding-bottom: 50px;
}

#container_right_g_pour_gagnant-a-vie {
	width:500px;
	height:420px;
	background: url('../images/g_pour_gagnant-a-vie.png') no-repeat;
	padding-bottom: 50px;
}

#container_right_social_media_fr {
	width:500px;
	height:220px;
	background: url('../images/force_des_reseaux_sociaux.png') no-repeat;
}

#container_right_social_media {
	width:500px;
	height:220px;
	background: url('../images/power_of_social_media.png') no-repeat;
}

#container_right h1 {
	font-family: 'Didact Gothic', Times serif;
	font-size:30px;
	font-style:normal;
	color:#c5c425;
	letter-spacing: 1px;
	word-spacing: 3px;
	line-height: 26px;
}

#container_right h2 {
	font-family: 'Didact Gothic', Times serif;
	font-size:18px;
	font-style:normal;
	color:#c5c425;
	letter-spacing: 1px;
	word-spacing: 3px;
	line-height: 20px;
	text-align: center;
}

#container_right p {
	font-family: 'Didact Gothic', Times serif;
	font-size:15px;
	font-style:normal;
	margin:0;
	padding:0;
	padding-bottom:30px;
}

#container_right_index_spacer_bottom {
	float:left;
	width:500px;
	height:100px;
}

#container_right_contact_spacer_bottom {
	float:left;
	width:500px;
	height:100px;
}

/* ------------Pied de page-------------*/
#footer {
	width:930px;
	height:200px;
	margin:0;
	padding:0;
}

#footer_wrapper {
	width:930px;
	height:200px;
	margin:0 auto;
	padding:0;
	background: url('../images/bg_footer_gradient.png') repeat-x;
}

ul li { 
	font-family: 'Didact Gothic', Times serif ;
	font-size:15px;
	list-style: none ;
}

a:link {
	color:#d3135a;
	text-decoration: none;
}

a:hover {
	color:#acab56;
	text-decoration: none;
}

a:visited {
	color:#888964; 
	text-decoration: none;
}

img {
	border:0;
}

/** 
 * Colonne 1
 */
 
#col_1_container {
	float:left;
	height:200px;
	width:350px;
}

#col_1_wrapper {
	float:left;
	height:200px;
	width:350px;
}

#col_1_nav_title {
	float:left;
	height:80px;
	width:350px;
	background-image: url('../images/navigation.png');
	background-repeat:no-repeat;
}

#col_1_treeLinks {
	height:185px;
	width:230px;
	padding-left:120px;
}

#col_1_navigation { 
	float:left;
	height:185px;
	width:230px;
	font-family: 'Didact Gothic', Times serif;
	font-size:15px;
	font-style:normal;
	list-style: none ;
    margin:0 ; 
    padding:0 ; 
}

/** 
 * Colonne 2
 */
 
#col_2_container {
	float:left;
	height:200px;
	width:40px;
}

#col_2_stroke_wrapper {
	float:left;
	height:200px;
	width:2px;
}

#col_2_stroke {
	height:200px;
	width:2px;
	background-image: url('../images/separator.png');
	background-repeat:no-repeat;
}

/** 
 * Colonne 3
 */
 
#col_3_container {
	float:left;
	height:200px;
	width:213px;
}

#col_3_wrapper {
	float:left;
	height:200px;
	width:213px;
}

#col_3_res_title {
	height:80px;
	width:213px;
	background-image: url('../images/reseauxSociaux.png');
	background-repeat: no-repeat;
}

#col_3_res_title_en {
	height:80px;
	width:213px;
	background-image: url('../images/socialNetworks.png');
	background-repeat: no-repeat;
}

#col_3_treeLinks {
	height:120px;
	width:213px;
	
}

#col_3_btn_1 {
	float:left;
	height:67px;
	width:67px;
	background-repeat: no-repeat;
}

#col_3_btn_2 {
	float:left;
	height:67px;
	width:67px;
	background-repeat: no-repeat;
}

#col_3_btn_3 {
	float:left;
	height:67px;
	width:67px;
	background-repeat: no-repeat;
}

/** 
 * Colonne 4
 */
 
#col_4_container {
	float:left;
	height:200px;
	width:70px;
}

#col_4_stroke {
	float:right;
	height:200px;
	width:2px;
	margin-right:40px;
	background-image: url('../images/separator.png');
	background-repeat: no-repeat;
}

/** 
 * Colonne 5
 */
 
#col_5_container {
	float:left;
	height:200px;
	width:150px;
}

#col_5_wrapper {
	height:200px;
	width:150px;
}

#col_5_title {
	float:left;
	height:80px;
	width:150px;
	background-image: url('../images/title_pdf.png');
	background-repeat:no-repeat;
}

#col_5_btn_1 {
	float:left;
	height:67px;
	width:67px;
	background-repeat: no-repeat;
}