/**
   Файл:    <шаблон>/css/showcase/showcase.css
   Раздел:  Стили заставки
   Автор:   BVP
 */

/*  Cтруктура */
#sc-cover {
    position:       relative;
    width:          100%;
    /*
    height:         672px;
    */
    overflow:       hidden;
    text-align:     center;
    vertical-align: middle;
    background:     #000;
}

/* фоновое изображение */
#sc-bg {
    position: relative;
    width:    100%;
    /*
    height:   672px;
    */
    opacity:  0;
    vertical-align: middle;
    /*
    -webkit-background-size: 1734px 672px;
    -moz-background-size:    1734px 672px;
    -o-background-size:      1734px 672px;
    background-size:         1734px 672px;
    background-position:     0 114px;
    */
    background-repeat:       no-repeat;
    background-attachment:   fixed;
    transform:         translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform:    unset;
}
#sc-bg.loaded {
    opacity: 1;
    -webkit-transition: opacity 700ms;
     -moz-transition:   opacity 700ms;
     -o-transition:     opacity 700ms;
     transition:        opacity 700ms;
}

/* фильтр фонового изображения (окно) */
#sc-filter {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0.50), rgba(0,0,0,0.50));
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.50), rgba(0,0,0,0.50));
    background-image: -o-linear-gradient(top, rgba(0,0,0,0.50), rgba(0,0,0,0.50));
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0.50), rgba(0,0,0,0.50));
    background-image: linear-gradient(top, rgba(0,0,0,0.50), rgba(0,0,0,0.50));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7f000000', endColorstr='#7f000000');
}

/*  Информация */
#sc-slides {
    position: absolute;
    width:    100%;
    height:   100%;
    top:      0;
}
#sc-slides > div {
    position: relative;
    height:   100%;
    top: 0;
}
#sc-slides > div > div {
    position: absolute;
}
/*
#sc-slides .bvp-container {
    position: relative;
}
#sc-slides .bvp-container > div {
    position: absolute;
    display:  block;
    overflow: hidden;
}
*/

/*  "Что делать..." */
#sc-left {
    bottom:     220px;
    text-align: left;
    padding:    2%;
    border:     solid 5px;
}
#sc-what-do {
}
#sc-subtitle {
    margin: 3% 0 3% 5%;
    font-size: 1.1em;
}
.sc-large-link {
    font-size:   2em;
    font-weight: bold;
    line-height: 1.2em;
}
#sc-title {
    font-size: 1.8em;
}

/*  Кнопки справа */
#sc-right {
    right:  0;
    bottom: 50px;
    width:  220px;
}
#sc-right > * {
    width:   100%;
    padding: 6% 0;
    border:  solid 2px;
    cursor:  pointer;
    text-transform: uppercase;
}
#sc-check {
    margin-bottom: 10%;
}
#sc-right > .scb-disabled,
#sc-right > .scb-disabled:hover {
    cursor: default;
    color:  #bbb;
    border-color: #bbb !important;
    background:   none;
}

/*  Формы */
#sc-slides .sc-form {
    position: absolute;
    width:    auto;
}
.sc-form input,
.sc-form .sc-result {
    width:      100%;
    padding:    .825em 2em;
    border:     solid 2px;
    background: transparent;
    text-align: left;
}
.sc-form svg {
    position: absolute;
    width:    0;
    cursor:   pointer;
}

/*  Форма обратной связи */
#cb-name {
    float: left;
    width: 49%;
}
#cb-phone {
    float: right;
    width: 49%;
}


/*  Форма над двумя кнопками */
.sc-place-2 {
    position: absolute;
    width:    0;
}


@media (max-width: 1400px) 
{
    #sc-left {
        left: 50px;
    }
}

@media (max-width: 1300px) 
{
    #sc-left {
        left: 75px;
    }
}

@media (max-width: 1250px) 
{
    #sc-right {
        right: 25px;
    }
}

@media (max-width: 1200px) 
{
    #sc-left {
        left: 100px;
    }
}

@media (max-width: 1100px) 
{
    #sc-left {
        bottom:  300px;
        padding: 3%;
    }
}

@media (max-width: 1000px) 
{
    /*  "что делать..." размещаем по центру */
    #sc-slides .bvp-container > #sc-left {
        position:   relative;
        display:    inline-block;
        left:       auto;
        top:        124px;  /* вариант "20%" не работает на Chrome */
        text-align: center;
        margin:     0 5%;
    }
    #sc-left > div {
        width:  auto;
        margin: 0 auto;
    }
    #sc-subtitle {
        margin-right: 0;
    }
    
    /*  А кнопки разносим по края */
    #sc-right {
        left:   50px;
        right:  50px;
        bottom: 50px;
        width:  auto;
    }
    #sc-right > * {
        width: auto;
        padding: 2% 3%;
    }
    #sc-check {
        float: left;
        margin-bottom: 0;
    }
    #sc-callback {
        float: right;
    }
    .sc-form input,
    .sc-form .sc-result {
        padding: 2% 3%;
    }
}

@media (max-width: 700px) 
{
    #sc-slides .bvp-container > #sc-left {
        top: 96px;
        padding: 4%;
    }
    #sc-subtitle {
        margin: 4% 0;
    }
}

@media (max-width: 500px) 
{
    .sc-large-link {
        font-size: 1.8em;
    }
    #sc-title {
        font-size: 1.6em;
    }
    #sc-subtitle {
        font-size: 1.05em;
    }
    #sc-right {
        left:  25px;
        right: 25px;
    }
}

@media (max-width: 450px) 
{
    #sc-right {
        left:  15px;
        right: 15px;
    }
}

@media (max-width: 450px) 
{
    #sc-slides .bvp-container > #sc-left {
        top:    65px;
        margin: 0 2%;
    }
    .sc-large-link {
        font-size: 1.6em;
    }
    #sc-title {
        font-size: 1.4em;
    }
    #sc-subtitle {
        font-size: 1em;
    }
}

@media (max-width: 400px) 
{
    #sc-right {
        text-align: center;
    }
    #sc-right > * {
        display: inline-block;
        float:   none;
        clear:   both;
        margin:  0 10%;
        padding: 4% 6%;
    }
    #sc-check {
        margin-bottom: 10%;
    }
    #sc-callback {
    }
    .sc-form input,
    .sc-form .sc-result {
        padding: 4% 6%;
    }
}