section#home {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
        align-items: center;
-webkit-align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
        justify-content: center;
-webkit-align-content: center;
min-height:  600px;
height:100vh;
   
}

body.main section.main.loaded {
background: url(/images/bg.jpg); 
background-position: 40% 50%;
background-size: cover;
}

.blink-1 {
  -webkit-animation-name: blink;
  animation-name: blink;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.offers {
position: absolute;
    width: 176px;
    text-align: center;
    margin: auto;
	
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;



}
.offers.offer-1 {
	top: 20%;
    left: 35%;
   -webkit-animation-duration: 7s;
	animation-duration: 7s;        
}


.offers.offer-2 {
    top: 35%;
    left: 52%;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
}

.offers.offer-3 {    
    top: 54%;
    left: 20%;
   -webkit-animation-duration: 6s;
    animation-duration: 6s;
}

.offers.offer-4 {
    top: 75%;
   left: 45%;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
}


.offers h2 a {
	display: block;
	position: relative;
	color: #555555;
    padding: 2px;
    font-size: 12px;
	z-index: 1;
	text-align: center;
}
.offers h2 a:hover {
color: #000;
}

 .offer-1 a, .offer-4 a {
	display: inline-block;
-webkit-animation-duration: 6s;        
		animation-duration: 6s;        
		-webkit-animation-name: bounce;        
		        animation-name: bounce;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;  
}

 .offer-2 a {
display: inline-block;
-webkit-animation-duration: 10s;        
		animation-duration: 10s;        
		-webkit-animation-name: bounce;        
		        animation-name: bounce;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;  
}

 .offer-3 a,  .offer-4 a {
display: inline-block;
-webkit-animation-duration: 12s;        
		animation-duration: 12s;        
		-webkit-animation-name: bounce;        
		        animation-name: bounce;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;  
}


.offers h2 a:hover::before, .offers:hover h2 a::before {
	 width: 100%;
	 background: #fde231;

-moz-transition: all 2.25s ease;
-webkit-transition: all 2.25s ease;
-o-transition: all 2.25s ease;
transition: all 0.25s ease;
}

.offers h2 a:before {
    position: absolute;
    width: 0%;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
-moz-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
    z-index: -1;
}


.offers .ofbg {
    position: absolute;   
	top: -11px;
    left: 33%;
    width: 59px;
    height: 50px;
    border: 1px solid #fde231;
	opacity:1;
	background: rgb(255 255 255 / 64%);
    z-index: -3;
      transition: all 0.25s ease;
	 -webkit-transition: all 0.25s ease;
     -moz-transition: all 0.25s ease;
     -o-transition: all 0.25s ease;
}
.offers:hover > .ofbg { 
border: 1px solid #333;
background: #fff;
}


.offer-1:hover  > .ofbg {
	 
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
-moz-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
	
}

.offer-2 > .ofbg {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.offer-2:hover  > .ofbg {
		-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	
-moz-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
	
}


.offer-4 > .ofbg {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.offer-4:hover  > .ofbg {
		-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	
-moz-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
	
}



.offer-3 > .ofbg {
		-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.offer-3:hover  > .ofbg {
		-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	
-moz-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
	
}

.sayt-kiiv, .sayt {
	min-height: 200px;
display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
}
.sayt-kiiv:before {
    content: "";
    position: absolute;
    left: 83%;
    top: 0px;
    transition: .3s all ease;
	 -webkit-transition:.3s all ease;
     -moz-transition: .3s all ease;
     -o-transition: .3s all ease;
    background: url(/images/arrow_right.jpg) no-repeat right;
    display: block;
    width: 70px;
    height: 202px;
    z-index: -1;
}

.sayt_zakazat img {
	margin: auto;
    -webkit-filter: grayscale(1); 
	filter: grayscale(1);
}


@media (max-width: 768px) {
.sayt-kiiv:before {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
left: 41%;
    top: 3px;
 transition: .3s all ease;
	 -webkit-transition:.3s all ease;
     -moz-transition: .3s all ease;
     -o-transition: .3s all ease;
}

.sayt-kiiv {
   min-height: 119px;
}

}