* {
    margin: 0;
    padding: 0
}
.robo-font {
    : @import url(https://fonts.googleapis.com/css?family=Roboto:700&subset=latin,cyrillic-ext,cyrillic)
}
.arimo-normal {
    : @import url(https://fonts.googleapis.com/css?family=Arimo&subset=latin,cyrillic-ext,cyrillic)
}
.arimo-bold {
    : @import url(https://fonts.googleapis.com/css?family=Arimo:700&subset=latin,cyrillic-ext,cyrillic)
}
body {
    height: 100%;
    height: 100vh
}
.block-size {
    height: 100%;
    position: relative
}
.container-fluid {
    position: relative;
    color: #fff;
    height: 100%
}
.row {
    height: 50%
}
.first {
    height: 100%;
    position: relative;
    background: url(../img/bg-red.png), url(../img/photo-1_griff.jpg) no-repeat;
    background-size: cover
}
.second {
    height: 100%;
    position: relative;
    background: url(../img/bg-green.png), url(../img/photo-3_decor.jpg) no-repeat;
    background-size: cover
}
.third {
    height: 100%;
    position: relative;
    background: url(../img/bg-orange.png), url(../img/photo-2_organization.jpg) no-repeat;
    background-size: cover
}
.fourth {
    height: 100%;
    position: relative;
    background: url(../img/bg-blue.png), url(../img/photo-4_attributes.jpg) no-repeat;
    background-size: cover
}
.text-wrapper-first {
    position: absolute;
    right: 50px;
    bottom: 25px;
    width: 400px
}
@media screen and (max-width: 768px) {
    .text-wrapper-first {
        position: initial;
        width: 100%
    }
}
.text-wrapper-second {
    position: absolute;
    left: 50px;
    bottom: 25px;
    width: 400px
}
@media screen and (max-width: 768px) {
    .text-wrapper-second {
        position: initial;
        width: 100%
    }
}
.text-wrapper-third {
    position: absolute;
    right: 50px;
    top: 25px;
    width: 400px
}
@media screen and (max-width: 768px) {
    .text-wrapper-third {
        position: initial;
        width: 100%
    }
}
.text-wrapper-fourth {
    position: absolute;
    left: 50px;
    top: 25px;
    width: 400px
}
@media screen and (max-width: 768px) {
    .text-wrapper-fourth {
        position: initial;
        width: 100%
    }
}
.title {
    display: block;
	font-family: 'Russo One', sans-serif;
    margin-left: 18%;
    padding-left: 28px;
    line-height: 34px
}
@media screen and (max-width: 768px) {
    .title {
        margin-left: 15%
    }
}
ul {
    list-style-type: none;
    : @import url(https://fonts.googleapis.com/css?family=Arimo:700&subset=latin,cyrillic-ext,cyrillic);
    margin-left: 18%;
    font-size: 18px;
    line-height: 26px
}
ul li {
    padding-left: 28px;
    position: relative
	
}
ul li a {
    text-decoration: none;
    color: #fff;
    border-bottom: 1px dotted rgba(255, 255, 255, .7);
	font-family: 'Philosopher', sans-serif
}
ul li a:focus,
ul li a:hover,
ul li a:visited {
    text-decoration: none;
    color: #fff
}
ul .submenu {
    display: none;
    position: absolute;
    top: 120%;
    left: 15%;
    z-index: 1;
    width: 360px;
    padding: 20px 10px 10px 20px;
	border-radius: 0 10px 10px 10px;
    /*border: 1px solid;
	text-indent: 21px;
    : @import url(https://fonts.googleapis.com/css?family=Arimo&subset=latin,cyrillic-ext,cyrillic);*/
    color: #eee;
    font-size: 14px;
    line-height: 18px
}
@media screen and (min-width: 768px) {
    ul .sub-func:hover>div.submenu {
        display: block
    }
}
ul .submenu-first {
    background: #960e16;
    border-color: #fe9e9e
}
ul .submenu-second {
    background: #114302;
    border-color: #73b338
}
ul .submenu-third {
    background: #d64404;
    border-color: #fda044
}
ul .submenu-fourth {
    background: #0b4055;
    border-color: #60c0d3
}
ul .vid {
    background: url(../img/iconVid.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .vid:hover>div.submenu {
        display: block
    }
}
ul .dj {
    background: url(../img/iconDj.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .dj:hover>div.submenu {
        display: block
    }
}
ul .music {
    background: url(../img/iconMusic.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .music:hover>div.submenu {
        display: block
    }
}
ul .artist {
    background: url(../img/iconArtists.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .artist:hover>div.submenu {
        display: block
    }
}
ul .light {
    background: url(../img/iconLight.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .light:hover>div.submenu {
        display: block
    }
}
ul .zal {
    background: url(../img/iconZal.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .zal:hover>div.submenu {
        display: block
    }
}
ul .floristics {
    background: url(../img/iconFloristics.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .floristics:hover>div.submenu {
        display: block
    }
}
ul .bouquet {
    background: url(../img/iconBouquet.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .bouquet:hover>div.submenu {
        display: block
    }
}
ul .rose-plants {
    background: url(../img/iconRose-petals.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .rose-plants:hover>div.submenu {
        display: block
    }
}
ul .visage {
    background: url(../img/iconHair-visage.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .visage:hover>div.submenu {
        display: block
    }
}
ul .logistics {
    background: url(../img/iconLogistics.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .logistics:hover>div.submenu {
        display: block
    }
}
ul .place {
    background: url(../img/iconPlace.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .place:hover>div.submenu {
        display: block
    }
}
ul .auto {
    background: url(../img/iconAvto.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .auto:hover>div.submenu {
        display: block
    }
}
ul .photo {
    background: url(../img/iconPhoto.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .photo:hover>div.submenu {
        display: block
    }
}
ul .video {
    background: url(../img/iconVideo1.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .video:hover>div.submenu {
        display: block
    }
}
ul .cake {
    background: url(../img/iconCake.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .cake:hover>div.submenu {
        display: block
    }
}
ul .karavay {
    background: url(../img/iconKaravay.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .karavay:hover>div.submenu {
        display: block
    }
}
ul .email {
    background: url(../img/iconEmail.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .email:hover>div.submenu {
        display: block
    }
}
ul .facebook {
    background: url(../img/iconFacebook.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .facebook:hover>div.submenu {
        display: block
    }
}
ul .vkontakte {
    background: url(../img/iconVkontakte.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .vkontakte:hover>div.submenu {
        display: block
    }
}
ul .reviews {
    background: url(../img/iconReviews.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .reviews:hover>div.submenu {
        display: block
    }
}
ul .instagram {
    background: url(../img/iconInstagram.png) 0 50% no-repeat;
    background-size: auto auto
}
@media screen and (min-width: 768px) {
    ul .instagram:hover>div.submenu {
        display: block
    }
}
@media screen and (max-width: 768px) {
    ul {
        margin-left: 15%
    }
}
.list-first a:hover {
    color: #fe9e9e;
    border-color: #fe9e9e
}
.list-second a:hover {
    color: #67c842;
    border-color: #67c842
}
.list-third a:hover {
    color: #fda044;
    border-color: #fda044
}
.list-fourth a:hover {
    color: #60c0d3;
    border-color: #60c0d3
}
.video-block {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 217px;
    height: 217px;
    background: url(../img/iconVideo.png) center no-repeat, url(../img/photo_centr.jpg) 40% 100% no-repeat;
    background-size: auto, 170%;
    border: 7px solid #fff;
    border-radius: 50%;
    text-align: center
}
.video-block .video-button {
    display: block;
    height: 100%;
    width: 100%;
    padding-top: 70%;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 18px;
    line-height: 20px;
    text-decoration: none;
    color: #eee;
    box-sizing: border-box
}
.video-block .video-button:focus,
.video-block .video-button:hover,
.video-block .video-button:visited {
    text-decoration: none;
	background-color: rgba(255, 0, 0, 0.3);
    color: #fff
}
@media screen and (max-width: 1024px) {
    .video-block {
        width: 150px;
        height: 150px
    }
}
@media screen and (max-width: 768px) {
    .video-block {
        position: fixed;
        left: inherit;
        right: 2px;
        top: 2px;
        bottom: inherit;
        height: 105px;
        width: 105px;
        background-size: 50%, 170%
    }
    .video-block .video-button {
        font-size: 12px;
        line-height: 12px
    }
}
@media screen and (max-width: 400px) {
    .video-block {
        height: 50px;
        width: 50px;
        border: 4px solid #fff
    }
    .video-block .video-button {
        font-size: 0
    }
}
.modal-video {
    width: 100%
}

.modal-text {
    width: 100%
}

iframe {
    width: 100%;
    height: 100%
}
@media screen and (max-width: 768px) {
    iframe {
        width: 100%;
        height: 100%
    }
}