@font-face {
    font-family: 'Gratise';
    src: url('../fonts/Gratise.eot');
    src: url('../fonts/Gratise.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gratise.woff2') format('woff2'),
        url('../fonts/Gratise.woff') format('woff'),
        url('../fonts/Gratise.ttf') format('truetype'),
        url('../fonts/Gratise.svg#Gratise') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body{
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
    font-style: normal;
	height:100vh;
	margin:0;
	background:#312f2d;
}
.bg{background:#312f2d; height:100vh;max-height:920px}
.content{position:relative;height:100vh;max-width:100%;margin-left:auto;margin-right:auto;background:url(../img/slogan.jpg) center right no-repeat;background-size:auto 80%;}
.col-left{height:100vh;max-width:60%;width:60%;float:left;background:url(../img/coeur.jpg) right center #312f2d;background-size:cover;background-repeat:no-repeat;}
.col-right{max-width:560px;width:40%;float:left;text-align:center}
img.logo{max-width:507px;width:100%;margin-top:160px}
img.coeur{max-height:100vh}
.mailto{margin-top:20px}
.mailto a{padding:4px 15px 7px;text-decoration:none;color:#312f2d;font-size:23px;line-height:28px;letter-spacing: 0px;background: #EC730A;border-radius: 20px;border: 2px solid #EC730A;}
.mailto a:hover{color:#EC730A;background:transparent;}
.reseaux{padding-top:154px;text-align:center}
.reseaux a{text-decoration:none}
.reseaux img{ transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;}
.reseaux img:hover{
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.mobile{display:none;}

@media (max-width:321px){
	.slogan{font-size:35px;}
	.mailto a{font-size:20px}
}
@media (max-width:500px){
	.mobile{display:block}
	.content{background-image:none;}
	.slogan{ font-family: 'Gratise';color:#FFFFFF;opacity:0.2;position:absolute;bottom:0;text-align:center;width:100%;font-size:45px}
	.image{padding-left:25px;padding-right:25px;}
	img.logo{margin-top:50px;}
}
@media (min-width:1024px) and (max-width:1440px){
	img.logo{max-width:380px}
	.col-right{width:33%;}
	.reseaux{padding-top:125px}
	.content{background-size: auto 60%}
}
@media (max-width:1023px) {
	.col-right{max-width:100%;float:none;width:100%;}
	.col-left{display:none}
	img.logo{margin-top:90px;}
}