body { background:#e81123 }

/* Фоновая заставка - десктоп */
body.zastavka {
    background-color: #151515;
    background-image: url('/fon-comp-b.jpg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Опционально: фиксированный фон */
}

/* Мобильные устройства до 768px */
@media (max-width: 768px) {
    body.zastavka {
        background-color: #151515 !important;
        background-image: url('/fon-mob.jpg') !important;
        background-size: 100% auto !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }
}

/* Мобильные устройства до 480px */
@media (max-width: 480px) {
    body.zastavka {
        background-size: cover !important; /* Лучше для маленьких экранов */
    }
}

#main { background:none }

#wrapper .content { background:#fff; margin-bottom:30px; border-radius:0; }
#wrapper .content:before, #wrapper .content:after {
	  z-index: -1;
	  position: absolute;
	  content: "";
	  bottom: 5px;
	  left: 20px;
	  width: 50%;
	  top: 80%;
	  max-width:500px;
	  background: rgba(0, 0, 0, 0.2);
	  -webkit-box-shadow: 0 15px 20px rgba(0,0,0, 0.2);
	  -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
	  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
	  -webkit-transform: rotate(-2deg);
	  -moz-transform: rotate(-2deg);
	  -o-transform: rotate(-2deg);
	  -ms-transform: rotate(-2deg);
	  transform: rotate(-2deg);
}

#wrapper .content:after {
	  -webkit-transform: rotate(2deg);
	  -moz-transform: rotate(2deg);
	  -o-transform: rotate(2deg);
	  -ms-transform: rotate(2deg);
	  transform: rotate(2deg);
	  right: 20px;
	  left: auto;
}

#wrapper .content .shadow { display:none }

#wrapper .timer { background:#8B5E3C; color:#fff; border-radius:0 }

#wrapper .feedback a { color:#95020e }
#wrapper .feedback a i {  }
#wrapper .feedback a:hover { color:#1c1c1c }


/* Footer
-------------------------------------------------- */
#footer { background:#5a3211; color:#fff }
#footer a { color:#fff }
#footer a span { border-bottom:1px solid #ca6e76 }
#footer a:hover span { color:#bbb; border-color:#999 }

#footer ul li { border-color:#d50c0c }
#footer ul li.auth i { background:url(../../img/soon-sprite.png) no-repeat -12px 2px }

/* Social Buttons */
.social-buttons ul li.fb a { background-position: 0 -50px }
.social-buttons ul li.fb a:hover { background-position: 0 0 }
.social-buttons ul li.tw a { background-position: -43px -50px }
.social-buttons ul li.tw a:hover { background-position: -43px 0 }
.social-buttons ul li.vk a { background-position: -85px -50px }
.social-buttons ul li.vk a:hover { background-position: -85px 0 }
.social-buttons ul li.gp a { background-position: -127px -50px }
.social-buttons ul li.gp a:hover { background-position: -127px 0 }
.social-buttons ul li.odn a { background-position: -167px -50px }
.social-buttons ul li.odn a:hover { background-position: -167px 0 }
.social-buttons ul li.in a { background-position: -209px -50px }
.social-buttons ul li.in a:hover { background-position: -209px 0 }
.social-buttons ul li.lj a { background-position: -251px -50px }
.social-buttons ul li.lj a:hover { background-position: -251px 0 }
.social-buttons ul li.ml a { background-position: -293px -50px }
.social-buttons ul li.ml a:hover { background-position: -293px 0 }
.social-buttons ul li.yt a { background-position: -335px -50px }
.social-buttons ul li.yt a:hover { background-position: -335px 0 }
.social-buttons ul li.pt a { background-position: -377px -50px }
.social-buttons ul li.pt a:hover { background-position: -377px 0 }
.social-buttons ul li.su a { background-position: -419px -50px }
.social-buttons ul li.su a:hover { background-position: -419px 0 }
.social-buttons ul li.ya a { background-position: -461px -50px }
.social-buttons ul li.ya a:hover { background-position: -461px 0 }
.social-buttons ul li.hb a { background-position: -503px -50px }
.social-buttons ul li.hb a:hover { background-position: -503px 0 }
.social-buttons ul li.vm a { background-position: -545px -50px }
.social-buttons ul li.vm a:hover { background-position: -545px 0 }
.social-buttons ul li.tb a { background-position: -587px -50px }
.social-buttons ul li.tb a:hover { background-position: -587px 0 }

/* Адаптивность для контента */
@media (max-width: 768px) {
    .inner {
        width: auto !important;
        padding: 0 15px !important;
    }
    
    #wrapper .content {
        padding: 20px 25px !important;
        margin: 20px 0 40px !important;
//opacity: 0.95;
    }
    
    #wrapper .content .left {
        margin-right: 0 !important;
        float: none !important;
    }
    
   #wrapper .content .right {
        border-left: none !important;
       padding: 20px 0 0 0 !important;
        margin-top: 20px !important;
        border-top: 1px solid #e1e1e1 !important;
    }
    
    #header {
        padding: 40px 0 0 0 !important;
        text-align: center !important;
        height: auto !important;
    }
    
    #header .logo img {
        max-width: 80% !important;
        height: auto !important;
    }
    
    #wrapper .timer {
        float: none !important;
        margin: 20px auto !important;
        text-align: center !important;
        padding: 20px !important;
    }
    
    #wrapper .timer ul li {
        margin: 0 0px !important;
    }
    
    #wrapper .timer ul li.title {
        width: auto !important;
        display: block !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }
    
    #wrapper .feedback {
        float: none !important;
        text-align: center !important;
        margin: 20px 0 0 0 !important;
    }
    
    #wrapper .feedback a {
        display: inline-block !important;
    }
    
    .social-buttons {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        text-align: center !important;
        margin-top: 20px !important;
    }
    
    .social-buttons ul li {
        display: inline-block !important;
        float: none !important;
    }
    
    #footer {
        text-align: center !important;
        height: auto !important;
        padding: 19px 0 19px 0 !important;
    }
    
    #footer .inner {
        text-align: center !important;
    }
    
    #footer .right {
        float: none !important;
        margin-bottom: 10px !important;
    }
    
    #footer ul li {
        float: none !important;
        display: inline-block !important;
        margin: 0 10px !important;
    }
    
    .shadow {
        width: 90% !important;
        margin-left: -45% !important;
        background-size: contain !important;
    }
}

@media (max-width: 480px) {
    #wrapper .content {
        padding: 15px !important;
    }
    
    #wrapper .timer ul li {
        width: 40px !important;
    }
    
    #wrapper .timer ul li .count {
        font-size: 25px !important;
    }
    
    .panel-page {
        width: 100% !important;
    }
}