/* CSS: LZ > Landing */

/* ОСНОВНЫЕ */

@font-face {
    font-family: 'Bebas Neue Bold';
    src: url('fonts/bebas/BebasNeueBold-webfont.woff2') format('woff2'),
         url('fonts/bebas/BebasNeueBold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bebas Neue Bold';
    src: url('fonts/bebas/BebasNeueBold-webfont.woff2') format('woff2'),
         url('fonts/bebas/BebasNeueBold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    /*border: 0;*/
}

a {
    color: #FFFFFF;
}
a:hover {
    color: #9999FF;
}

img {
    border: 0;
}

b, strong, h1, h2, h3 {
    font-weight: bold;  /* Исправляем отображение толщины шрифтов в Windows 7 */
}


/* ВЁРСТКА */

.landingWrapper {
    font: 13px/1 Arial, Helvetica, sans-serif;
    color: #FFF;
    background: #171313;
    overflow: hidden;
    min-width: 980px;
        height: 860px;  /* Для Opera 12 */
    height: 100vh;
    min-height: 600px;
    transform-origin: 50% 0;
}

.landingWrapperInner {
    max-height: 1080px;
    position: relative;
}

/* Видео */

.landing-bgWrapper {
    width: auto;
    max-width: 1920px;
    height: 1080px;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 0;
}

.landing-bgVideo {
    height: 100%;
    position: relative;
    left: -50%;
    display: block;
}

.landing-bg {
    background: url(img/landing-bg.png) 50% 0 / auto 100% no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -50%;
}

/* КОНТЕНТ */

.landing-contentOuter {
        width: 100%;  /* Для Opera 12 */
    width: 100vw;
        height: 100%;  /* Для Opera 12 */
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.landing-content {
    max-width: 1920px;
    height: 100%;
    max-height: 1080px;
    margin: 0 auto;
}

.landing-contentInner {
    background: url(img/landing-logoBg.png) center top no-repeat;
    width: 1002px;
    margin: 0 auto;
        transform-origin: 50% 0;
}

.landing-logoLink {
    background: url(img/landing-logoLink.spr.png) left top no-repeat;
    width: 340px;
    height: 46px;
    margin: 0 auto;
    display: block;
}
.landing-logoLink:hover {
    background-position: left bottom;
}

.landing-intro {
    background: url(img/landing-intro.png) 50% 52px no-repeat;
    height: 365px;
}

/* Медиа */

.landing-media {
    height: 268px;
    position: relative;
}

.landing-media > div {
    width: 486px;
    height: 276px;
    box-shadow: 7px 6px 6px rgba(0, 0, 0, 0.09);
    position: absolute;
    top: 0;
/* Блочная модель border-box !!! */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.landing-media-video {
    background: #000;
    border: 3px solid #FFF;
    left: 1px;
}

.landing-media-video-title, .landing-media-subscribe-title {
    font: 29px/40px 'Bebas Neue Bold', Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    color: #FFF;
    width: 363px;
    height: 50px;
    position: absolute;
/* Блочная модель border-box !!! */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.landing-media-video-title {
    text-transform: uppercase;
    background: url(img/landing-media-video-title.png) no-repeat;
    padding-left: 16px;
    top: -13px;
    left: -9px;
}

.landing-media-video-title > span {
    color: #FFFC00;
}

.landing-media-subscribe {
    background: rgba(255, 255, 255, 0.7);
    padding-left: 56px;
    padding-right: 38px;
    margin-right: 0px;
    right: 1px;
/* Блочная модель border-box !!! */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.landing-media-subscribe-title {
    text-align: right;
    text-transform: uppercase;
    background: url(img/landing-media-subscribe-title.png) no-repeat;
    padding-right: 18px;
    top: -10px;
    right: -6px;
}

.landing-media-subscribe-social {
    text-align: right;
    height: 48px;
    padding-right: 4px;
    padding-left: 1px;
    margin-top: 58px;
}

.landing-media-subscribe-social-title {
    font-size: 21.4px;
    line-height: 44px;
    color: #535353;
    float: left;
}

.landing-media-subscribe-social > a {
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: top;
}
.landing-media-subscribe-social-vk {
    background-image: url(img/landing-media-subscribe-social-vk.png);
    margin-left: 0;
}
.landing-media-subscribe-social-fb {
    background-image: url(img/landing-media-subscribe-social-fb.png);
}
.landing-media-subscribe-social-ok {
    background-image: url(img/landing-media-subscribe-social-ok.png);
}
.landing-media-subscribe-social-mm {
    background-image: url(img/landing-media-subscribe-social-mm.png);
}

.landing-media-subscribe-form {
    margin-top: 21px;
}

.landing-media-subscribe-form > input {
    width: 100%;
    height: 51px;
    border-width: 3px;
    border-style: solid;
    border-radius: 11px;
    box-shadow: inset rgba(0, 0, 0, 0.8);
    display: block;
/* Блочная модель border-box !!! */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.landing-media-subscribe-form-email {
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #000;
    border-color: #6262AD;
    box-shadow: inset 3px 2px 4px rgba(0, 0, 0, 0.2);
    outline: none;
    text-align: center;
}
.landing-media-subscribe-form-email:focus {
    border-color: #FE6700;
}
.landing-media-subscribe-form-email:valid {
    border-color: #46CA1D;
}

.landing-media-subscribe-form-email::-webkit-input-placeholder { color: #777; opacity: 1; }  /* Chrome */
.landing-media-subscribe-form-email::-moz-placeholder { color: #777; opacity: 1; }  /* FF */
.landing-media-subscribe-form-email:-ms-input-placeholder { color: #777; opacity: 1; }  /* IE */
.landing-media-subscribe-form-email::-ms-input-placeholder { color: #777; opacity: 1; }  /* Edge */
.landing-media-subscribe-form-email::placeholder { color: #777; opacity: 1; }  /* STD */

.landing-media-subscribe-form-email:focus::-webkit-input-placeholder { opacity: 0; }  /* Chrome */
.landing-media-subscribe-form-email:focus::-moz-placeholder { opacity: 0; }  /* FF */
.landing-media-subscribe-form-email:focus:-ms-input-placeholder { opacity: 0; }  /* IE */
.landing-media-subscribe-form-email:focus::-ms-input-placeholder { opacity: 0; }  /* Edge */
.landing-media-subscribe-form-email:focus::placeholder { opacity: 0; }  /* STD */

.landing-media-subscribe-form-button {
    font: 28px/1 'Bebas Neue Bold', Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFF;
    background: #6262AD;
    padding-bottom: 1px;
    border-color: #FFF;
    margin-top: 13px;
}
.landing-media-subscribe-form-button:hover {
    background: #8686C0;
    cursor: pointer;
}

/* Копирайт */

.landing-copyright {
    color: #DBEAF8;
    text-align: center;
    margin-top: 122px;
}

.landing-copyright > a {
    color: #DBEAF8;
    text-decoration: none;
}
.landing-copyright > a:hover {
    color: #8686C0;
    text-decoration: underline;
}


/* Layout: <IZEM©STUDIO> • 2017 */
