@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Bevan|Bowlby+One+SC|Calistoga|Fredericka+the+Great|Great+Vibes|Pinyon+Script|Source+Sans+Pro&display=swap');

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

.CallPhone { display: none;}
.textinfos { display: none; }
.textinfos2 { display: none; }


.whiter { background-color: #F5F5F5C9 !important; }
.whiter:hover { background-color: #F5F5F5 !important; }
.weat { background-color: #f5deb3a1; }
.weat:hover { background-color: #f5deb3; }

.red { 
	
	position: relative;
	top: -5%;
	border: 0 !important;
	background-color: #c62d49; }

.red:hover {background-color: #FF0004;  }
.red .Title {  color: #ececec !important; font-size: 48px !important; }
.animation {
	
  animation-name: angry-animation;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
	
	
}
.RYES { 
	
	display: none; 
	width: 444px !important;
		

}

.RYES .image { width: 200px !important; margin-left: auto; margin-right: auto; }

.BlackFriday-Black { height: 100px; line-height: 100px; text-align: center;  font-size: 120px; color: #000; position: relative; top: -60%; transform: rotate(-5deg);}

.slider-background { display: inline-block; width: 100% ; height: 100%; background-image: url("../img/soin2.jpg"); background-repeat: no-repeat; background-size: cover; }
.toolBar { display: inline-block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 80px; background-color: rgba(0,0,0,0.8); }
.toolBar .logo { width: 100%; height: 80px; background-image: url(../img/logo2.png); background-position: center; background-repeat: no-repeat; background-size:auto;}

.footer { display: inline-block; width: 100%; margin-left: auto; margin-right: auto; height: 40px; position: absolute; left: 0; bottom: 0;  }
.footer .infos { float: left;  min-height: 40px; padding-right: 15px; padding-left: 15px; min-width: 200px; }

.menu-container { position: absolute;  padding-left: auto; padding-right: auto; width: 100%; }

.menu-container .round-container { float: left; width: 200px; padding: 15px; margin: 5px; min-height: 200px;  cursor: pointer; border: 1px solid #b78b70;}


.menu-container .round-container .image { border-radius: 100%; height: 200px; box-sizing: border-box; transition: opacity .2s ease-out; border: 1px solid #b78b70;}
.menu-container .round-container .Title { width: 100%; min-height: 40px; margin: 15px 0; text-align: center; line-height: 100%; font-size: 38px; color: #000;  }



@media screen and (max-width: 1208px) { 
	
	.slider-background { display: inline-block; height: 100%; background-size: cover; background-position: center; }	

	.RNO { display: none;}
	.RYES { display: inline-block; }
	.slider-background { background-size: cover; }
	.CallPhone { display: none;}
    .textinfos { display: none; }
    .textinfos2 { display: none; }
}

@media screen and (max-width: 500px) { 
	
	
	.slider-background { display: inline-block; height: 100%; background-size: 150%!important; margin-top: 80px; background-position: 50% 0; }	
	.CallPhone { position: fixed; display: block; bottom: 30px;right: 20px; background-color: #428C2E; width: 80px; height: 80px; border-radius:100%; background-image: url(../img/telephone.png); background-position: center;  background-size: 50%; background-repeat: no-repeat;    }
	.round-container { display: inline-block; width: calc(100% - 42px) !important; min-height: 100px !important; }
	.round-container .image { width: 90% !important; height: 250px !important; margin-left: auto; margin-right: auto; }
	.menu-container { top: 380px !important; }
	.RNO { display: none;}
	.toolBar .logo { background-size: 70%; }
	.footer { display: none; }
    .BlackFriday-Black {
    position: absolute;
    top: -260px;
    left: 0;
    font-size: 70px;
    width: 100%;
}
    .BlackFriday { display: none; }
	.textinfos { display: inline-block; min-width: 100px; position: absolute; top: 320px; left: 20%; height: 50px; font-size: 18px; color: #000000; line-height: 24px; padding: 10px; }
	.textinfos2 { display: inline-block; min-width: 100px; position: absolute; top: 310px;  height: 50px; font-size: 18px !important; color: #000000 !important; line-height: 24px; padding: 10px; }
}

@keyframes angry-animation {
  0%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40%{
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  60%{
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  80%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}