@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,900&subset=latin,cyrillic);

html, body {
    height: 100%;
    width: 100%;
}

.bg1 {
    background-color: #0B0B0B;
}

.bg2 {
    background: -webkit-image-set(url('../img/bg2.png') 1x, url('../img/bg2@2x.png') 2x, url('../img/bg2@3x.png') 3x);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

* {
    box-sizing: border-box;
}

p {
    margin: 0;
}

img {
    max-width: 100%;
}

.content {
    width: 70%;
    max-width: 100%;
    margin: 0 auto;
}

.content:after {
    content: "";
    display: table;
    clear: both;
}

div.section:nth-of-type(1) {
    padding-top: 60px;
}

div.section:nth-of-type(2) {
}

div.section:nth-of-type(3) {
}

div.section:nth-of-type(4) {
}


#menu {
    height: 60px;
    left: 0;
    /* margin: 0; */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 70;
    text-align: right;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
}

#menu .icon1 {
    left: 60px;
    position: absolute;
    max-width: 80px;
    width: 10%;
}

#menu .icon2 {
    right: 60px;
    position: absolute;
    max-width: 60px;
    width: 10%;
    top: 35px;
}

#cursor {
    position: fixed;
    left: 0;
    top: 40%;
    z-index: 20;
}

#cursor li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 10px;
    /* border:1px white solid; */
    cursor: pointer;
    background: gray
}

#cursor li.active {
    /* background:white; */
    background: -webkit-image-set(url('../img/cursor.png') 1x, url('../img/cursor@2x.png') 2x, url('../img/cursor@3x.png') 3x);
    cursor: default;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 16px;
    height: 16px;
    margin-left: 7px;
}

#scrollicon {
    background: -webkit-image-set(url('../img/scrollicon.png') 1x, url('../img/scrollicon@2x.png') 2x, url('../img/scrollicon@3x.png') 3x);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 10px;
    z-index: 40;
    left: 50%;
    transform: translate(-50%, -20%);
}

#scrollicon enactive {
    display: none;
}


/**/
#title-block {
    background: -webkit-image-set(url('../img/bg1.png') 1x, url('../img/bg1@2x.png') 2x, url('../img/bg1@3x.png') 3x);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;

    height: 100%;
    min-height: 300px !important;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    text-align: center;
}

#title-block h1 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 95px;
    padding-top: 50px;
    margin: 0 0 20px;
    text-align: center;
    left: 50%;
    position: absolute;
    top: 23%;
    box-sizing: border-box;
    transform: translate(-50%, -20%);
    z-index: 30;
}

#title-block h2 {
    color: #fff;
    /* font-size: 24px; */
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 36px;
    /* padding: 20px; */
    text-align: center;
    left: 50%;
    position: absolute;
    top: 75%;
    box-sizing: border-box;
    transform: translate(-50%, -20%);
    z-index: 30;
}

#title-block h3 {
    color: #fff;
    /* font-size: 18px; */
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 36px;
    /* padding: 20px; */
    text-align: center;
    left: 50%;
    position: absolute;
    top: 80%;
    box-sizing: border-box;
    transform: translate(-50%, -20%);
    z-index: 30;

}

.projects-block {
    height: 100%;
    min-height: 300px !important;
    /* position: relative; */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    text-align: center;
}

.projects-block .text1 {
    /* max-height: 65px; */
}

.projects-block .text2 {
    margin-top: 5px;
}

.projects-block .text3 {
    margin-top: 15px;
}

@media screen and (max-width: 600px) {
    .projects-block .text1 {
        font-size: 20px;
    }
}

@media screen and (min-width: 601px) {
    .projects-block .text1 {
        font-size: 46px;
    }
}

.projects-block text1 {
    color: #fff;
    font-weight: bolder;
}

.projects-block text2 {
    color: #fff;
    font-size: 14px;
    font-weight: 300;
}

.projects-block text3 {
    color: #fff;
    font-size: 18px;
    font-weight: 300;
}

#headerblock3 {
    min-height: 300px !important;
    position: relative;
    text-align: center;
    top: 30%;
}

#contact-block {
    height: 100%;
    min-height: 300px !important;
    position: relative;
    text-align: center;
    top: 30%;
}

#contact-block .text1 {
    color: #fff;
    font-size: 7vw;
    font-weight: 300;
}

#contact-block .text2 {
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    margin-top: 20px;
}

#contact-block .text3 {
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    margin-top: 50px
}

.content1 {
    width: 250px;
    height: 200px;
    display: inline-block;
}

.content2 {
    width: 250px;
    height: 200px;
    display: inline-block;
}

.content3 {
    width: 250px;
    height: 200px;
    display: inline-block;
}


.biiiiip {
    background: -webkit-image-set(url('../img/biiiiip.png') 1x, url('../img/biiiiip@2x.png') 2x, url('../img/biiiiip@3x.png') 3x);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
    position: absolute;
    /* left: 50%; */
    top: 20%;
    /* box-sizing: border-box;
    transform: translate(-50%, -20%); */
    width: 70%;
    min-height: 70%;
}

.light {
    background: -webkit-image-set(url('../img/light.png') 1x, url('../img/light@2x.png') 2x, url('../img/light@3x.png') 3x);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 20;
    /* left: 50%; */
    top: 20%;
    /* box-sizing: border-box; */
    /* transform: translate(-50%, -20%); */
    width: 70%;
    min-height: 70%;
}

img {
    height: auto;
    width: auto \9;
    width: 100%;
}

.opacity {
    /* for IE */
    filter: alpha(opacity=40);
    /* CSS3 standard */
    opacity: 0.4;
}

/* .scrollicon,.imgNumber {
  text-align: center;
} */

/* .imgNumber img {
  margin-top: 12%;
} */


/*######Стили для демо###########*/

/*Кнопка "К статье"*/
.backToSitehereBtn {
    display: block;
    width: 150px;
    height: 150px;
    background: #01BC78;
    text-align: center;
    line-height: 170px;
    font-size: 20px;
    border-radius: 50%;
    color: #fff;
    position: absolute;
    text-decoration: none;
    top: 29px;
    left: -40px;
    transform: rotate(-45deg) scale(1);
    transition: all 0.25s linear;
}

.backToSitehereBtn:hover {
    text-decoration: none;
    top: 30px;
    left: -10px;
    transform: rotate(-45deg) scale(1.3);
}