@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Oswald:wght@400;700&display=swap');

body{
	font: Normal 16px/28px Montserrat;
}
html, body {
    height: 100%;
}
h1, h2, h3, h4, h5 {
	font-family: 'Oswald', sans-serif;
}

.menu-principal, .menu-principal a{
	color: #ffffff;
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
}
.menu-principal a:hover{
	color:#D7A41A;
}.menu-principal li{
	margin-left: 30px;
}
.logo{
	font: Bold 18px/30px Oswald;
	color: #ffffff;
}
.logo img{
	margin-right: 20px;
}
.bg-black {
	background: #1A1A1A 0% 0% no-repeat padding-box;
	box-shadow: 0px 3px 6px #0000004D;
	opacity: 1;
}
.title-hero{
	font-size: 48px;
}
.tagline{
	font: Normal 21px/30px Oswald;
	color: #D7A41A;
	margin: 30px 0px;
}

.hero-image {
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	background-image: url("../images/bg@2x.jpg");
	background-image: url("../images/bg@2x.jpg");
}
.hero-image img{
	padding-bottom: 30px;
}
.hero-text {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	width: 90%;
}
.show .nav-item, .collapsing .nav-item{
	padding-top: 30px;
}

/* Set the border color to the desired color */ 
.custom-toggler.navbar-toggler { 
    border-color:#D7A41A;
}
.custom-toggler .navbar-toggler-icon { 
            background-image: url( 
"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(256, 256, 256, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); 
        }

.content{
	background: transparent linear-gradient(140deg, var(--unnamed-color-ffffff) 0%, #E0DED9 100%) 0% 0% no-repeat padding-box;
	background: transparent linear-gradient(140deg, #FFFFFF 0%, #E0DED9 100%) 0% 0% no-repeat padding-box;
}


.content h2{
	font: Bold 60px/72px Oswald;
	text-transform: uppercase;
}
.content h3{
	font: Bold 36px/48px Oswald;
}

.text_18 {
	font: Normal 18px/30px Montserrat;
}
.text_21 {
	font: Normal 21px/36px Montserrat;
}

.bg-logo{
	background: url("../images/jessica_caruso_notaire_montreal_watermark@2x.png") no-repeat;
	background-position: 100% 70%;
}

.btnj {

	padding-left: 0 !important;
	padding-right: 0 !important;
}
.btnj a{
	padding: 14px 28px;
	background: rgba(215, 164, 26, 1) 0% 0% no-repeat padding-box;
	color: #ffffff;
	font: Bold 18px/30px Montserrat;
}
.btnj a:hover {
	padding: 12px 26px;
	background: rgba(255, 255, 255, 1) 0% 0% no-repeat padding-box;
	opacity: 1;
	border: solid #000000 2px;
	font: Bold 18px/30px Montserrat;
	color: #000000;
	text-decoration: none;
}
.cardj{
	box-shadow: 0px 0px 30px #0000001A;
	height: calc(100% - 30px);
	padding: 50px 50px 80px 50px;
}
.cardj h3{
	margin-bottom: 30px;
}
.cardj ul{
	margin: 0;
	padding: 0;
}
.cardj li{
	list-style: none;
	margin-left: 2em;
}
.cardj li::before{
	content:"■";
	color: #D39A00;
	font-weight: bold;
	font-size: 1.4em;
	display: inline-block;
	width: 1.4em;
	margin-left: -1.4em;
}
.card01{
	background:url("../images/notaire_montreal_personnes_et_famille.svg") no-repeat #ffffff;
	background-position: 90% 20%;
}
.card02{
	background:url("../images/notaire_montreal_biens_et_propriete.svg") no-repeat #ffffff;
	background-position: 90% 15%;
}
.card03{
	background:url( "../images/notaire_montreal_affaires.svg") no-repeat #ffffff;
	background-position: 90% 20%;
}
.card04{
	background:url( "../images/notaire_montreal_successions.svg") no-repeat #ffffff;
	background-position: 90% 20%;
}
.contact{
	color: #FFFFFF;
	background: #222222;
}
.contact h3{
	font: Bold 24px/30px Oswald;
	margin-top: 10px;
	margin-bottom: 10px;
}

h3.phone::before {
    content: url("../images/numero_de_telephone.svg");
	margin-right: 10px;
}
h3.email::before {
    content: url( "../images/courriel.svg");
	margin-right: 10px;
}
h3.time::before {
    content: url("../images/heures.svg");
	margin-right: 15px;
}
h3.address::before {
    content: url("../images/pin.svg");
	margin-right: 15px;
}
.btsend{
	background: #222222;
	color: #FFFFFF;
	border: solid 4px #D7A41A;
	border-radius: 0;
}
.btsend:hover{
	background: #FFFFFF;
}

.mensagem_ok{
	background: #000000;
	text-align: center;
	padding: 100px 50px;
	color: white;
}
.mensagem_ok a{
	color: #d7a41a;
}

@media only screen and (max-width: 414px) {
	.logo {
	font-size: 12px !important;
	}
	.title-hero{
	font-size: 36px;
	}
	.content h2{
	font: Bold 48px/60px Oswald;	
	}
	.tagline{
		font-size: 18px;
	}
}
@media only screen and (max-width: 600px) {
	.card01, .card02, .card03, .card04{
	background-image:none;
	}
}