/*
 Theme Name:   Houle Légal 2022
 Theme URI:    http://www.houlelegal.com/
 Description:  Thème unique pour le site de Houle Légal
 Author:       Jordan Ouellet
 Author URI:   https://www.commparlimage.ca
 Template:     blankslate
 Version:      1.0.0
 Text Domain:  houlelegal
*/

/********************************************************************************************************************/

*{
	scroll-behavior: smooth;
}

html{
	font-size: 12pt;
	font-family: 'Roboto Slab', serif;
	font-weight:400;
}

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
	text-decoration: none; 
}

img, fieldset {
	border: 0;
}

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}


#human{display:none !important;}


html, body {
	width: 100%;
	height: 100%;
}

/* INITIALISATION ***************************************************************************************************/

.table{display:table;}
.flex{display:flex;}

/********************************************************************************************************************/
/* BACKGROUNDS */


/********************************************************************************************************************/

:root {
--my-color: #2a3666;
}

.wrap{position:relative; margin:0 auto; width: 1400px;}
.specialheight{min-height:760px;}
.bold{font-weight:700;}
.title{text-transform: uppercase;}
.flex{display:flex;}
body.no-scroll{overflow: hidden;}

.dark-img-overlay{position:absolute; top:0; left:0; width:100%; height:100%; background-color:#333; opacity:0.5; z-index:1;}
.undershadow{
	position:absolute; width:100%; padding-bottom:7%; z-index:-1; bottom:auto;
	background:url(img/shadow-bg.png) no-repeat top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.anchor{position:relative; visibility:hidden; top:-150px; display:block;}

/********************************************************************************************************************/

h2{text-transform: uppercase;}

.sous-titre p{font-size:24px; line-height: 1.6em;}

/********************************************************************************************************************/
/* NAVBAR */

#nav{position: fixed; top: 0; left: 0; width:100%; z-index:1000; color:#fff; background-color: #fff; background-repeat: no-repeat; background-size: cover; background-position: center center;
	box-shadow: 0 0 20px -4px #000;
	transition: padding 0.4s, height 0.4s, margin-bottom 0.4s, opacity 0.4s;
}
#nav .top{position: relative; padding: 20px 0;
	transition: all 0.4s;
}
#nav .wrap{align-items: center; justify-content: space-between;}
#nav .right{display: flex; align-items: center; gap: 20px; height: 62px; opacity: 1; transition: all 0.4s;}
#nav .right ul{list-style: none;}
#nav .right .menu{display: flex; align-items: center; height: 100%;}
#nav .right .menu > li{position: relative; height: 100%; line-height: 62px; cursor: pointer;}
#nav .right .menu > li > a{display: block; color: var(--my-color); padding: 0 15px; cursor: pointer;
	transition: all 0.4s;
}
#nav .right .menu > li > a:hover{color: #fff; background-color: var(--my-color);}
#nav .right .menu .sub-menu{display: none; position: absolute; left: 0; height: max-content; background-color: #fff; padding: 20px 0 0;}
#nav .right .menu .sub-menu li{line-height: initial; width: max-content; padding: 10px 15px; border-top: 2px solid var(--my-color);
	transition: all 0.4s;
}
#nav .right .menu .sub-menu li > a{color: var(--my-color);}
#nav .right .menu .sub-menu li:hover{background-color: var(--my-color);}
#nav .right .menu .sub-menu li:hover a{color: #fff;}
#nav .right .menu > li.menu-item-has-children:hover .sub-menu{display: block;}
#nav .right li.menu-item-has-children:hover > a{color: #fff; background-color: var(--my-color);}
#nav .right .telephone{display: flex; align-items: center; gap: 20px; background-color: var(--my-color); color: #fff; padding: 15px 20px; border-radius: 10px; font-size: 24px; font-weight: 200;
	transition: all 0.4s;
}
#nav .left a:hover{opacity: 0.8;}
#nav .right .telephone:hover{background-color: #58659a;}
#nav .right .langue{color: var(--my-color); font-weight: 700; font-size: 20px; border-bottom: 2px solid var(--my-color);}
#nav .right .langue:hover{color: #58659a; border-color: #58659a;}
#nav .right .menuicon{display: block; width: 28px; height: 22px; cursor: pointer;
	transition: all 0.4s;
}
#nav .right .menuicon:hover{opacity: 0.7;}
#nav .right .menuicon.blue{display: none; background: url(img/menuicon-blue.png) no-repeat center center/contain;}
#nav .right .menuicon.white{display: none; background: url(img/menuicon-white.png) no-repeat center center/contain;}

.spacer-nav{position: relative;}

/********************************************************************************************************************/

#mobile-menu{display: none; position: fixed; right: 0; width: 40%; height: 100%; background-color: #fff; padding: 30px 0; z-index: 1000; box-sizing: border-box; overflow: hidden;}
#mobile-menu ul{list-style: none;}
#mobile-menu .container{display: flex; justify-content: space-between; flex-direction: column; padding: 0 30px; height: 300px;}
#mobile-menu .container .menu{display: flex; flex-direction: column; gap: 10px;}
#mobile-menu .container .menu > li > a{color: var(--my-color); cursor: pointer; font-size: 20px;
	transition: all 0.4s;
}
#mobile-menu .container .sub-menu{display: none; margin: 10px 0 20px;}
#mobile-menu .container .sub-menu > li > a{display: block; color: var(--my-color); padding-left: 10px;
	transition: all 0.4s;
}
#mobile-menu .container .menu > li > a:hover, #mobile-menu .container .sub-menu > li > a:hover, #mobile-menu .container .langue:hover{opacity: 0.7;}
#mobile-menu .extra{display: flex; flex-direction: column; gap: 30px;}
#mobile-menu .extra .langue{height: max-content; color: var(--my-color); border-bottom: 2px solid var(--my-color); padding-bottom: 5px; font-size: 20px; width: max-content;
	transition: all 0.4s;
}
#mobile-menu .extra .telephone{display: none; align-items: center; gap: 10px; color: var(--my-color); font-size: 18px;
	transition: all 0.4s;
}
#mobile-menu .extra .telephone img{width: 24px;}

#mobile-menu .mobile-bg{position: absolute; width: 800px; height: 1000px; background-color: var(--my-color); border: 50px solid #9fa4ba; transform: rotate(45deg); bottom: -700px;}
.mobile-overlay{display: none; position: fixed; width: 100%; height: 100%; z-index: 500; background-color: #00000033;}

/********************************************************************************************************************/
/* ACCUEIL */

#accueil-top{color:#fff; position:relative; background-color:#e4e4e4; background-size: cover; background-repeat: no-repeat; overflow: hidden;}
#accueil-top .wrap{align-items: center; justify-content: space-between;}
#accueil-top img{position: absolute; bottom: 0; right: 10%; width: 630px;}
#accueil-top .text{width: 45%; color: #000; font-size: 18px; z-index: 5;}
#accueil-top .text h2{color: var(--my-color); font-size: 42px; margin-bottom: 50px; transform: translateX(-300px); opacity: 0;
	transition: transform 1.2s, opacity 3s;
}
#accueil-top .text .title{font-size: 30px; margin-bottom: 50px; font-weight: 400; transform: translateX(-300px); opacity: 0;
	transition: transform 1.2s, opacity 3s;
}
#accueil-top .text p{line-height: 1.8em; transform: translateX(-300px); opacity: 0;
	transition: transform 1.2s, opacity 3s;
}

#accueil-top .text h2.show, #accueil-top .text .title.show, #accueil-top .text p.show{transform: translateX(0); opacity: 1;}

/********************************************************************************************************************/

#accueil-content .champs{padding: 200px 0; box-sizing: border-box;}
#accueil-content .champs h2{text-align: center; color: #fff; font-size: 36px; text-shadow: 0 0 10px #000; margin-bottom: 100px;}
#accueil-content .champs .boxes{display: flex; justify-content: space-between; width: 70%; margin: auto; gap: 30px;}
#accueil-content .champs .boxes .box{background-color: #f0f0f0; padding: 40px 30px; font-weight: 200; width: 33%; box-shadow: 0 0 15px #3f3f3f; box-sizing: border-box;}
#accueil-content .champs .boxes ul{list-style:none;}
#accueil-content .champs .boxes .box ul li{margin-bottom: 15px; background-repeat: no-repeat; background-position: 0px 50%; padding-left: 30px;}
#accueil-content .champs .boxes .box ul li a{color: var(--my-color); border-bottom: 0 solid transparent; transition: all 0.2s;}
#accueil-content .champs .boxes .box ul li a:hover{border-bottom: 1px solid var(--my-color);}


/********************************************************************************************************************/

#accueil-content .spacer550{}

/********************************************************************************************************************/
/* General Page Style */

#page-top{background-position: center center; background-size: cover; height: 500px;}
#page-top .wrap{height: 100%;}
#page-top h2{position: absolute; left: 0; right: 0; bottom: 100px; margin: auto; text-align: center; font-size: 42px; color: #fff;}

.page-content .divider{background-color: #9fa4ba; padding: 20px 0;}
.page-content .divider a{display: flex; justify-content: center; align-items: center; gap: 10px; color: #fff;
	transition: all 0.2s;
}
.page-content .divider a:hover{opacity: 0.8;}
.page-content .divider a img{display: block; height: 20px;}
.page-content .text-section p:not(:last-child){margin-bottom: 30px;}

/* RECOUVREMENT DE COMPTES */

#recouvrement-de-comptes .text-section{display: flex; justify-content: center;}
#recouvrement-de-comptes .text-section .wrap{margin: 0;}
#recouvrement-de-comptes .text-section h2{font-size: 30px; margin-bottom: 30px;}
#recouvrement-de-comptes .text-section p{line-height: 2em;}
#recouvrement-de-comptes .text-section .comptes{width: 100%;}
#recouvrement-de-comptes .text-section .comptes .wrap{width: 700px; box-sizing: border-box; padding: 60px 50px 60px 0; color: var(--my-color); margin-left: auto;}
#recouvrement-de-comptes .text-section .b2b{position: relative; width: 100%; background-color: #e4e4e4;}
#recouvrement-de-comptes .text-section .b2b .wrap{width: 700px; box-sizing: border-box; padding:  60px 0 60px 50px; color: var(--my-color); margin-right: auto; z-index: 5;}
#recouvrement-de-comptes .text-section .b2b .symbol{position: absolute; bottom: 0; right: 50px; width: 300px; height: 300px; z-index: 1;}
#recouvrement-de-comptes .bande{padding: 30px 0; text-align: center; color: #fff; font-size: 20px; font-weight: 600; background-color: var(--my-color);}
#recouvrement-de-comptes .divider{background-color: #9fa4ba; padding: 20px 0;}
#recouvrement-de-comptes .divider a{display: flex; justify-content: center; align-items: center; gap: 10px; color: #fff;
	transition: all 0.2s;
}
#recouvrement-de-comptes .divider a:hover{opacity: 0.8;}
#recouvrement-de-comptes .divider a img{display: block; height: 20px;}


/* IMMIGRATION */

#immigration .flex-section{display: flex; gap: 50px; align-items: center; padding: 60px 0;}
#immigration .flex-section .text-section{width: 60%;}
#immigration .flex-section .text-section h2{font-size: 30px; color: var(--my-color); margin-bottom: 30px;}
#immigration .flex-section .text-section p{line-height: 2em; color: var(--my-color);}
#immigration .flex-section img{width: 40%; height: 600px; object-fit: cover;}
#immigration .bande{padding: 30px 0; text-align: center; color: #fff; font-size: 20px; font-weight: 600; background-color: var(--my-color);}

/***************************************************/

.result-message{background:var(--my-color); padding: 15px; color: #fff; margin-bottom: 40px;}
.result-message p:not(p:last-child){margin-bottom: 10px;}

/********************************************************************************************************************/

#rv{position:relative; padding:40px 0; text-align:center; background-color:#ddd;}
#rv .wrap{text-align:center;}
.calendly-inline-widget{height:800px !important;}

/********************************************************************************************************************/

/********************************************************************************************************************/

/********************************************************************************************************************/

/********************************************************************************************************************/

/********************************************************************************************************************/

/********************************************************************************************************************/

/********************************************************************************************************************/

/********************************************************************************************************************/

/********************************************************************************************************************/

#mc_embed_signup{margin-top:50px;}
#mc_embed_signup input[type="email"]{
	position:relative; display:block; background:transparent; color:#fff; margin:10px 0; height:40px; border:2px solid #fff; padding:0 15px; width:80%;
}
#mc_embed_signup input[type="submit"]{
	position:relative; display:block; height:35px; padding:0 15px; background:#fff; color:var(--my-color); border:0; font-size:1em; transition: all 0.4s;
}

#mc_embed_signup input[type="submit"]:hover{
	background:#222; color:#fff; cursor:pointer; transition: all 0.4s;
}

/********************************************************************************************************************/
/* FOOTER */

#footer{position: relative;}
#footer a{color: #fff;}
#footer > .wrap{justify-content: space-between; padding: 100px 0;}
#footer .title{font-size: 30px; font-weight: 400;}
#footer p{font-size: 24px; font-weight: 700; line-height: 1.8em;}
#footer .left{position: relative; color: #fff; width: 500px;}
#footer .left p{font-weight: 400;}
#footer .left .title{margin-bottom: 80px;}
#footer .left .socials{display: flex; gap: 20px; margin-top: 50px;}
#footer .left .socials a{transition: all 0.2s;}
#footer .left .socials a:hover{transform: translateY(-5px);}
#footer .left .droits{font-size: 16px; position: absolute; bottom: 0; left: 0;}
#footer .right{color: var(--my-color); width: 500px;}
#footer .right .title, #footer .right p{margin-bottom: 30px;}
#footer .right form{display: flex; flex-direction: column; gap: 20px;}
#footer .right form input[type="text"]{height: 60px; border: 2px solid var(--my-color); padding: 5px 20px; font-size: 18px; color: var(--my-color); font-family: 'Roboto Slab', serif;
	-webkit-appearance: none; 
}
#footer .right form input[type="submit"]{height: 60px; border: none; background-color: var(--my-color); padding: 5px 20px; color: #fff; text-align: left; font-size: 18px; font-family: 'Roboto Slab', serif; cursor: pointer;
	transition: all 0.4s; -webkit-appearance: none; 
}
#footer .right form input[type="submit"]:hover{background-color: #58659a;}
#footer .right form textarea{height: 120px; border: 2px solid var(--my-color); padding: 20px 20px; font-size: 18px; color: var(--my-color); font-family: 'Roboto Slab', serif;
	-webkit-appearance: none; 
}
.mobile{display: none;}
.mobile .left{background-color: var(--my-color);}
.notmobile{display:block;}

/********************************************************************************************************************/

#general-page{padding-top: 50px;}
#general-page h1, #general-page h2, #general-page h3, #general-page h4{color: #000;}
#general-page h1{margin-bottom: 30px;}
#general-page h2{margin-bottom: 15px;}
#general-page h3, #general-page p{margin-bottom: 10px;}
#general-page p + h2, #general-page ul + h2{margin-top: 30px;}
#general-page ul{padding-left: 50px;}
#general-page ul li{list-style-type: initial; color: var(--font-color); margin-bottom: 10px;}
#general-page .wrap{padding-bottom: 50px;}

#policy-subfooter{background-color: #000; padding: 15px 0;}
#policy-subfooter .policy-link-container{display: flex; justify-content: center; gap: 10px 25px; flex-wrap: wrap; width: 85%; margin: auto;}
#policy-subfooter .policy-link-container a{color: #fff; font-size: 0.9em; font-weight: 300; transition: all 0.2s;}
#policy-subfooter .policy-link-container a:after{display: block; content: ''; width: 100%; height: 1px; border-bottom: 1px solid transparent; transition: all 0.2s;}
#policy-subfooter .policy-link-container a:hover{opacity: 0.8;}
#policy-subfooter .policy-link-container a:hover:after{border-bottom: 1px solid #fff; opacity: 0.8;}

/********************************************************************************************************************/

/* COVER CLASS::START */
.tall-img {
	height: auto;
	width: 100%;
	max-height: none;
	text-align: center;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.wide-img {
	width: auto;
	height: 100%;
	max-width: none;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.cover {
	position: relative;
	overflow: hidden;
}
.cover > img{
	position:absolute;
}

/********************************************************************************************************************/

/* CSS MEDIA QUERIES - WIDTH */

@media screen and (min-width: 2000px) {
	#nav{background-size: 125%; background-position: -75px;}
}

@media screen and (max-width: 1450px) {
	.wrap{width:1100px;}

	#nav{background-position: -60px;}
	#nav .bottom .table .right ul > li.langue > a{padding: 0 15px;}
	
	#accueil-top img{right: 0;}
	#accueil-top .text h2{font-size: 36px;}
	#accueil-top .text .title{font-size: 24px;}
	#accueil-top .text p{font-size: 16px;}

	#accueil-content .champs .boxes{width: 85%;}

	#footer .left{width: 400px;}
	#footer .right{width: 350px;}

	#recouvrement-de-comptes .text-section .comptes .wrap, #recouvrement-de-comptes .text-section .b2b .wrap{width: 550px;}

}

@media screen and (max-width: 1150px) {
	.wrap{width:900px;}
	.specialheight{min-height: 650px;}

	#nav{background-position: -100px;}
	#nav .right .menuicon.blue{display: block;}
	#nav .right .menu, #nav .right .langue{display: none;}

	#accueil-top img{right: -30px; width: 530px !important;}
	#accueil-top .wrap{align-items: flex-start;}
	#accueil-top .text{width: 75%; margin-top: 50px;}
	#accueil-top .text h2{font-size: 30px; margin-bottom: 30px;}
	#accueil-top .text .title{width: 80%; margin-bottom: 30px;}
	#accueil-top .text p{width: 65%;}

	#accueil-content .champs .boxes{width: 100%;}

	#recouvrement-de-comptes .text-section .comptes .wrap, #recouvrement-de-comptes .text-section .b2b .wrap{width: 450px;}

}

@media screen and (max-width: 950px) {
	.wrap{width:700px;}
	.specialheight{min-height: 0;}

	#nav .left a img{width: 200px;}
	#nav .right .telephone{gap: 10px; padding: 10px; font-size: 16px;}
	#nav .right .telephone img{width: 24px;}
	#nav .right .langue{font-size: 16px;}
	
	#accueil-top{background-position: -250px;}
	#accueil-top img{position: static; display: block; margin: auto;}
	#accueil-top .text, #accueil-top .text .title, #accueil-top .text p{width: 100%;}

	#accueil-content .champs{padding: 100px 0;}
	#accueil-content .champs h2{margin-bottom: 50px;}
	#accueil-content .champs .boxes{flex-wrap: wrap; justify-content: space-around;}
	#accueil-content .champs .boxes .box{width: 47%;}

	#footer{background-image: none !important;}
	#footer > .wrap{padding: 50px 0;}
	#footer > .wrap.flex{display: none;}
	#footer .left, #footer .right{width: 100%; text-align: center;}
	#footer .left .title{margin-bottom: 30px;}
	#footer .left .socials{margin: 60px 0; justify-content: center;}
	#footer .left .droits{position: static;}
	.mobile{display: block;}
	.notmobile{display:none;}
	
	#mc_embed_signup{text-align:center; margin-bottom:50px;}
	#mc_embed_signup input[type="email"]{display:inline-block; width:70%; text-align:center;}
	#mc_embed_signup input[type="submit"]{display:inline-block; width:50%;}

	#page-top{height: 300px;}
	#page-top h2{font-size: 36px; bottom: 50px;}

	#recouvrement-de-comptes .text-section{flex-direction: column;}
	#recouvrement-de-comptes .text-section .comptes .wrap, #recouvrement-de-comptes .text-section .b2b .wrap{width: 700px; margin: auto; padding: 60px 0;}
	#recouvrement-de-comptes .text-section .b2b .symbol{display: none;}

	#immigration .flex-section{flex-direction: column;}
	#immigration .flex-section .text-section, #immigration .flex-section img{width: 100%;}

}

@media screen and (max-width: 750px) {
	.wrap{width:500px;}	

	#nav{background-image: none !important; background-color: var(--my-color);}
	#nav .right .telephone{background-color: #58659a; font-weight: 400;}
	#nav .right .telephone img{display: none;}
	#nav .right .langue{color: #fff; border-color: #fff;}
	#nav .right .menuicon.blue{display: none;}
	#nav .right .menuicon.white{display: block;}
	#mobile-menu{width: 60%;}
	#mobile-menu .container{height: 300px;}
	#mobile-menu .mobile-bg{top: 400px;}

	#accueil-top{background-position: -550px;}

	#accueil-content .champs h2{font-size: 30px;}
	#accueil-content .champs .boxes .box{width: 100%;}

	#footer .bg-bottom{height: 40%;}

	#recouvrement-de-comptes .text-section .comptes .wrap, #recouvrement-de-comptes .text-section .b2b .wrap{width: 500px;}

	#immigration .flex-section img{height: 300px;}
}

@media screen and (max-width: 550px) {
	.wrap{width: 80%;}

	#nav .top{padding: 10px 0;}
	#nav .left a img{width: 450px;}
	#nav .right{width: 100%; justify-content: flex-end;}
	#nav .right .telephone{display: none;}
	#mobile-menu .container .menu > li > a{font-size: 18px;}
	#mobile-menu .container .sub-menu{margin: 10px 0;}
	#mobile-menu .container .sub-menu > li > a{font-size: 12px;}
	#mobile-menu .extra .telephone{display: flex;}

	#accueil-top{background-position: -500px;}
	#accueil-top .text{margin-top: 30px;}
	#accueil-top .text h2{font-size: 24px;}
	#accueil-top .text .title{font-size: 18px;}
	#accueil-top .text p{font-size: 14px;}

	#accueil-content .champs h2{font-size: 24px;}

	#footer .title{font-size: 24px;}
	#footer .left .socials{margin: 30px 0;}
	#footer .left .socials a img{width: 40px;}
	#footer .right .title, #footer .right p{margin-bottom: 15px;}
	#footer p, #footer .left .droits{font-size: 16px;}
	#footer .right form input[type="text"]{font-size: 14px; height: 40px;}
	#footer .right form input[type="submit"]{font-size: 14px;}
	#footer .right form textarea{height: 100px; font-size: 14px;}

	#page-top{height: 250px;}
	#page-top h2{font-size: 30px;}

	#recouvrement-de-comptes .text-section h2, #immigration .flex-section .text-section h2{font-size: 20px;}
	#recouvrement-de-comptes .text-section p, #immigration .flex-section .text-section p{font-size: 14px;}
	#recouvrement-de-comptes .text-section .comptes .wrap, #recouvrement-de-comptes .text-section .b2b .wrap{width: 80%;}


	.result-message{font-size: 14px; margin-bottom: 25px;}

	#general-page{padding-top: 0;}
	#policy-subfooter .policy-link-container a{font-size: 0.8em;}
}

/* CSS MEDIA QUERIES - HEIGHT */