@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');


html, body				{font-family: 'Libre Baskerville', sans-serif; height:100%; background-color:#fff;}
body a					{font-family: 'Roboto', sans-serif;}
body h1					{color:#003975!important;}
body p					{font-family: 'Roboto', sans-serif;}
p strong				{font-weight:normal!important;}
.marg-top				{margin-top: 50px;}

/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: url(../design/big-pic.jpg);

  /* Set a specific height */
  height: 85%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-bottom:80px;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-text img					{width:100%;}/*-------------------------------------------------------------------------------------------------------LOOK HERE*/
.hero-image h1					{font-size:60px; color:#fff; font-family: 'Libre Baskerville', serif;}
.hero-image h3					{text-transform : uppercase; font-family: 'Libre Baskerville', serif!Important; font-weight:400;}
.hero-image h2					{text-transform : uppercase; font-family: 'Libre Baskerville', serif; font-weight:400;}
.hero-text h3					{text-transform : uppercase; font-family: 'Libre Baskerville', serif; font-weight:400;}
.cases							{margin-bottom:50px;}
.cases h2						{font-weight:900; font-size:25px; color:#3f2d0d; margin-top:35px;  font-family: 'Libre Baskerville', serif;}
.cases a						{text-decoration:none!important; font-family: 'Libre Baskerville', serif; color:#3f2d0d;}
.cases a:hover					{color:#f34747;}
.cases h3						{color:#6c6a67; font-size:20px;}

.btn {
  background-color: #ffa200;
  color: #fff;
  border: none;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
}

.btn:hover {
  background-color: #fff;
  color: #ffa200;
}

.btn-devis {
  background-color: #f34747;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
}

.btn-devis:hover {
  background-color: #0b2864;
  color: #fff;
}

.btn-devis-case {
  background-color: #f2f2f2;
  color: #0f0f0f;
  font-weight:400;
  border: none;
  border-radius: 30px;
  padding: 10px 25px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.2s;
}

.btn-devis-case:hover {
  background-color: #f34747;
  color: #fff;
}

.intro	{ margin-top:50px; margin-bottom:70px;}
.intro-2{ margin-top:50px; margin-bottom:30px;}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.centered h2 { color:#fff; text-transform : uppercase;}

/* The hero image */
.hero-contact-us {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: url(../design/bread-bg.jpg);

  /* Set a specific height */
  height: 60%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top:130px;
}

/* Place text in the middle of the image */
.hero-contact-us-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.jumbtron {margin-bottom: 50px;}

.hero-image h1			{font-size:60px; color:#fff; font-family: 'Roboto', sans-serif; font-weight:900;}
.hero-image h3			{text-transform : uppercase; font-family: 'Roboto', sans-serif; font-weight:400;}

.hero-contact-us h2		{font-size:50px; color:#fff; font-family: 'Roboto', sans-serif; font-weight:900;}
.hero-contact-us h3		{text-transform : uppercase; font-family: 'Libre Baskerville', serif; font-weight:900; color:#3f2d0d;}
.hover					{margin-left:0px!important; margin-right:0px!important; padding-left:0px!important; padding-right:0px!important;}
.location				{text-align:center; color:#fff; padding-bottom:70px; padding-top:50px;}
.location h2			{display:inline; font-size:24px;}
.red					{background-color:#f34747; margin-top:50px;}
.red h3					{font-size:30px;}

.ingredient				{font-family: 'Roboto', sans-serif; color:#2760d3;}
.pains					{margin-bottom:50px;}
.pains img				{margin-bottom:30px;}
.raccourci				{margin-top:100px;}
.raccourci img			{width:50%;}
.no-padding				{padding:0px;}
.zoom img				{transition: transform .2s;}
.zoom:hover img {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  -webkit-filter: drop-shadow(0px 5px 5px #a9a9a9);
  filter: drop-shadow(0px 5px 5px #a9a9a9);
}

.focus					{color:#f34747; font-weight:900;}

/*CONTACT---------------------------------------------*/
.contact-box			{margin-top:30px; margin-bottom:100px;}
.infos h1				{margin-top:0px;}
.infos h2				{font-family: 'Roboto', serif; color:#fff; font-size:20px;}
.infos h4				{font-family: 'Roboto', sans-serif; color:#f34747; font-size:20px; margin-bottom:5px;}
.infos p				{color:#6f6f6f}
.infos p a				{color:#6f6f6f}
.infos p a:hover		{color:#ae6739;}
.mention				{color:#000;}
/*-------FORMULAIRE-----------------------------------------------------------*/

form .block{
	position: relative;
}
form .block i{
	position: absolute;
	line-height: 50px;
	left: 15px;
	font-size: 18px;
	color: #fd8c02;
}

form input, form textarea{
	display: block;
	margin-bottom: 30px;
	outline: none;
	font-size: 16px;
	padding-left: 45px;
	font-family: Arial, sans-serif;
	width: 100%;
	border: none;
	color: #555;
	background-color:#f6f6f6;
}

form input{
	height: 50px;
	background-color:#f6f6f6;
}

form input:focus,
form textarea:focus{
	border: 1px solid #f6f6f6; background-color:#f6f6f6;
}

form textarea{
	min-height: 150px;
	padding-top: 15px;
	line-height: 24px;
}

form button{
	/*height: 50px;*/
	padding: 15px 20px;
	font-size: 16px;
	background: #f15856;
	color: white;
	cursor: pointer;
	border:none;
	border-radius: 2px!important;
}

form button.disabled{
	opacity: 0.2;
}

form button i{
	display: inline-block;
	padding-left: 20px;
	transform: scale(1.2);
}

form button:hover{
	background: #df1815;
}
form button:active{
	background: green;
	color: #fff;
}

.error{
	color: #a71f1f;
	margin-top: 20px;
	background: #fde3e8;
	padding: 10px;
	display: none;
}

.success{
	color: #086508;
	margin-top: 20px;
	background: #c9fdc9;
	padding: 10px;
	display: none;
}

.please-wait{
	text-align: center;
	margin-top: 30px;
	font-weight: 900;
}

/*form input, form textarea {
    display: block;
    margin-top: 20px;
    padding: 10px;
    width: 100%;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    border-radius: 2px;
    border-width: 1px;
    border-style: none;
	background-color:#f6f6f6!important;
}*/

/*form input[type=submit] {
    width: auto;
	background-color:#ef4d4b!important;
	color:#fff;
}*/
/*
button			{background-color:#ef4d4b!important; color:#fff; padding:10px; border-style: none; border-radius: 2px;}
button:hover	{background-color:#ca3c3a!important;}
*/
/*form input[type=submit]:hover {
	background-color:#ca3c3a!important;
}*/

/*------------FORMULAIRE---------------*/

/*FOOTER---------------------*/
.footer					{ background-color:#141b29; color:#fff; font-family: 'Roboto', sans-serif; padding-top:50px; padding-bottom:50px;}
.footer h4				{ color:#fac87a; font-family: 'Roboto', sans-serif;}
.footer a				{ font-size:14px; color:#e6e6e6; font-family: 'Roboto', sans-serif;}
.footer a:hover			{ color: #7b9de1;}
.footer-marg			{margin-top: 100px;}

/*SM----------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
.infos					{margin-top:40px;}
.social-icon			{margin-right:20px;}
.services h3			{font-size:20px;}
.fb-box					{margin-top:23px; margin-bottom:15px;}

/*SERVICES--------------------------------------------*/
.services				{margin-top:60px; margin-bottom:60px;}
.marg-bottom			{margin-bottom:50px;}


/*ENTRETIENS--------------------------------------------*/
.marg-bottom-entretien	{margin-bottom:35px;}
}

@media only screen and (max-width: 767px) {
.name h1				{margin-bottom:80px; font-size:30px;}	
.case-catalogue			{margin-bottom:-10px!important;}
.fb-box					{margin-top:23px; margin-bottom:15px;}
.infos					{margin-top:40px;}
.social-icon			{margin-right:20px;}

/*SERVICES--------------------------------------------*/
.services				{margin-top:60px; margin-bottom:60px;}
.marg-bottom			{margin-bottom:50px;}
}

@media only screen and (max-width: 768px) {
.name h1				{margin-bottom:80px; font-size:30px;}	
.fb-box					{margin-top:10px; margin-bottom:5px;}
}

@media screen and (max-width: 768px) and (min-width: 750px) {
/*CATALOGUE-------------------------------------------
.intro h1				{font-size:20px;}
.services h3			{font-size:15px;}
}*/
/*XS----------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 435px) {
.name h1				{margin-bottom:80px; font-size:28px;}
.case-marge				{margin-bottom:20px;}
.image					{margin-bottom:30px;}
.reseau-box				{margin-top:30px;}
.fb-box					{margin-top:30px; margin-bottom:15px;}
.hero-image h1			{font-size:24px; color:#fff; font-family: 'Roboto', sans-serif;}
.hero-image h3			{font-size:20px; text-transform : uppercase; font-family: 'Roboto', sans-serif; font-weight:400; margin:0; padding:0;}
.btn					{margin-top:30px;}
.case-marg-bottom		{margin-bottom:30px;}
.hero-contact-us-text h2{font-size:30px;}
.hero-contact-us-text h3{font-size:19px;}
.footer					{ text-align:center; padding-top:30px; padding-bottom:30px;}
.footer p				{ font-size:20px; color:#fff; font-family: 'Roboto', sans-serif;}
.footer p a				{ font-size:20px; color:#fff; font-family: 'Roboto', sans-serif;}
}