/*------------------------------------------------------------------
[Table of contents]
SINGLE PAGE STYLES

1. Page head
2. Tabs
3. Full image section
4. Col section
5. Description section
6. Image section
7. Statistics section
8. Video section
9. Youtube video section
10. Scroll effect styles
-------------------------------------------------------------------*/

.single-page {
    .top_panel {
        z-index: 3;
        
        .logo {
            margin-left: 0;
        }
    }
}


/*----------------------------------------------------------------------------------
1. Page head
-----------------------------------------------------------------------------------*/
.page--head {
    height: 800px;
    overflow: hidden;
    position: relative;
    
    .blur-bg {
        position: absolute;
        top: -20px;
        left: -20px;
        width: auto;
        bottom: -20px;
        right: -20px;
        content: '';
        filter: blur(10px);
        -webkit-filter: blur(10px);
        -moz-filter: blur(10px);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .bg-color {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        opacity: .5;
        z-index: 1;
    }
    
    .wrap {
        height: 100%;
    }
    
    .wrap_float {
        max-width: 780px;
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 165px;
        
        &:hover {
            .link>span span.link-text {
                opacity: 1;
                margin-left: 0;
                transition: all .2s linear;
            }
        }
    }
    
    .title {
        font-size: 45px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 27px;
    }
    
    .subtitle {
        font-size: 22px;
        color: rgba(255, 255, 255, .6);
    }
    
    .link {
        font-size: 22px;
        font-weight: 500;
        color: #fff;
        position: relative;
        z-index: 1;
        margin-top: 70px;
        //padding-left: 10vw;
        
        & > span {
            padding-left: 140px;
            position: relative;
            
            span.link-text {
                opacity: 0;
                margin-left: 8px;
                transition: all .2s ease-out;
            }
            
            &:before {
                width: 128px;
                height: 8px;
                background: url(../img/arrow.svg) center center no-repeat;
                background-size: contain;
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -4px;
                content: '';
            }
        }
    }
}


/*----------------------------------------------------------------------------------
2. Tabs
-----------------------------------------------------------------------------------*/
.tabs-section {
    padding: 150px 0;
    
    .tabs {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 75px;
        
        .tab {
            width: auto;
            display: block;
            float: left;
            
            &:hover {
                cursor: pointer;
                
                * {
                    cursor: pointer;
                }
                
                span {
                    border-color: #BABABA;
                    transition: all .2s linear;
                }
            }
            
            &.active {
                pointer-events: none;
                
                span {
                    color: #191919;
                    border-color: #191919;
                }
            }
            
            span {
                color: #BABABA;
                border-bottom: 2px solid rgba(186, 186, 186, 0);
                transition: all .2s linear;
                font-size: 22px;
                font-weight: 700;
                display: inline-block;
                float: none;
                padding-bottom: 4px;
            }
        }
    }
    
    .section_content {
        .text {
            color: #8C8C8C;
            font-size: 45px;
            font-weight: 700;
            margin-bottom: 53px;
            
            &:last-child {
                margin-bottom: 0;
            }
            
            b, strong {
                color: #191919;
            }
        }
        
        .small-text {
            font-size: 22px;
            color: rgba(140, 140, 140, .9);
            font-weight: 700;
            max-width: 700px;
            
            ul {
                li {
                    margin-bottom: 8px;
                    
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
            
            * {
                font-weight: 700;
            }
        }
    }
}


/*----------------------------------------------------------------------------------
3. Full image section
-----------------------------------------------------------------------------------*/
.full-image-section {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    
    img {
        display: block;
        float: left;
        width: 100%;
    }
}


/*----------------------------------------------------------------------------------
4. Col section
-----------------------------------------------------------------------------------*/
.col-section {
    padding: 150px 0;
    background: #fff;
    
    .left {
        width: 50%;
        padding-right: 70px;
        
        .title {
            color: #8C8C8C;
            font-size: 45px;
            font-weight: 700;
        }
        
        b, strong {
            color: #191919;
        }
        
        .subtitle {
            font-size: 22px;
            color: #8C8C8C;
            line-height: 1.5;
            margin-top: 55px;
        }
    }
    
    .right {
        color: #8C8C8C;
        font-size: 22px;
        width: 50%;
        line-height: 1.5;
    }
}


/*----------------------------------------------------------------------------------
5. Description section
-----------------------------------------------------------------------------------*/
.description-section {
    padding: 180px 0;
    position: relative;
    overflow: hidden;
    height: 100vh;
    min-height: 660px;
    
    .wrap {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .wrap_float {
        position: relative;
        z-index: 2;
    }
    
    .text {
        font-size: 45px;
        font-weight: 700;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 50px;
        
        b, strong {
            color: #8C8C8C;
        }
    }
    
    .small-text {
        font-size: 22px;
        color: #fff;
        max-width: 700px;
        line-height: 1.4;
    }
    
    .blur-bg {
        position: absolute;
        top: -80px;
        left: -80px;
        width: auto;
        bottom: -80px;
        right: -80px;
        content: '';
//        filter: blur(40px);
//        -webkit-filter: blur(40px);
//        -moz-filter: blur(40px);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .bg-color {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        opacity: .5;
        z-index: 1;
    }
}


/*----------------------------------------------------------------------------------
6. Image section
-----------------------------------------------------------------------------------*/
.image-section {
    background: #F2F2F2;
    padding: 150px 0;
    
    img {
        width: 100%;
        float: left;
        display: block;
    }
}


/*----------------------------------------------------------------------------------
7. Statistics section
-----------------------------------------------------------------------------------*/
.statistics-section {
    background: #F2F2F2;
    padding: 150px 0;
    
    &.is-scrolled {
        .top .right .params .param .line .progress {
            width: 0 !important;
        }
    }
    
    .top {
        .left {
            width: 50%;
            padding-right: 50px;
            
            .title {
                font-size: 45px;
                font-weight: 700;
                color: #8C8C8C;
                margin-bottom: 45px;
                
                b, strong {
                    color: #191919;
                }
            }
            
            .subtitle {
                font-size: 22px;
                color: #8C8C8C;
                line-height: 1.5;
            }
        }
        
        .right {
            width: 50%;
            
            .params {
                .param {
                    margin-bottom: 34px;
                    
                    .line {
                        background: rgba(198, 198, 198, .34);
                        height: 16px;
                        border-radius: 8px;
                        position: relative;
                        margin-bottom: 10px;
                        
                        .progress {
                            height: 16px;
                            border-radius: 8px;
                            background: rgb(61,0,130); /* Old browsers */
                            background: -moz-linear-gradient(left, rgba(61,0,130,1) 0%, rgba(7,246,226,1) 100%); /* FF3.6-15 */
                            background: -webkit-linear-gradient(left, rgba(61,0,130,1) 0%,rgba(7,246,226,1) 100%); /* Chrome10-25,Safari5.1-6 */
                            background: linear-gradient(to right, rgba(61,0,130,1) 0%,rgba(7,246,226,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d0082', endColorstr='#07f6e2',GradientType=1 ); /* IE6-9 */
                            position: absolute;
                            top: 0;
                            left: 0;
                            transition: all 1.4s ease-out;
                        }
                    }
                    
                    .param-info {
                        position: relative;
                        padding-right: 70px;
                        
                        ._title {
                            font-size: 17px;
                            color: #191919;
                        }
                        
                        ._percent {
                            font-size: 17px;
                            color: #8C8C8C;
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 60px;
                            text-align: right;
                        }
                    }
                }
            }
        }
    }
    
    .bottom {
        margin-top: 70px;
        
        .col {
            width: 30%;
            margin-right: 5%;
            display: block;
            float: left;
            
            .col-title {
                font-size: 28px;
                color: #191919;
                font-weight: 700;
                margin-bottom: 30px;
            }
            
            &:hover {
                
                .link>span span.link-text {
                    opacity: 1;
                    margin-left: 0;
                    transition: all .4s ease-out;
                }
            }
            
            &:last-child {
                margin-right: 0;
            }
            
            ._title {
                font-size: 28px;
                font-weight: 700;
                color: #191919;
                margin-bottom: 32px;
            }
            
            ul {
                li {
                    font-size: 17px;
                    color: rgba(25, 25, 25, .5);
                    line-height: 1.6;
                    margin-bottom: 8px;
                }
            }
            
            .link {
                position: relative;
                color: #191919;
                font-size: 17px;
                font-weight: 500;
                display: block;
                float: left;
                margin-top: 40px;
                
                & > span {
                    padding-left: 130px;
                    position: relative;
                    
                    span.link-text {
                        opacity: 0;
                        margin-left: 8px;
                        transition: all .2s ease-out;
                    }
                    
                    &:before {
                        width: 116px;
                        height: 8px;
                        background: url(../img/arrow-black.svg) center center no-repeat;
                        background-size: contain;
                        content: '';
                        left: 0;
                        top: 50%;
                        margin-top: -4px;
                        position: absolute;
                    }
                }
            }
        }
    }
}


/*----------------------------------------------------------------------------------
8. Video section
-----------------------------------------------------------------------------------*/
.video-section {
    max-height: 96vh;
    overflow: hidden;
    position: relative;
    
    .video_wrap {
        height: 100%;
        position: relative;
    }
    
    .play-btn {
            width: 82px;
            height: 82px;
            border-radius: 50%;
            background: url(../img/play-button.svg) center center no-repeat;
            background-size: contain;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -41px;
            margin-left: -41px;
            z-index: 2;
            transition: all .2s linear;
            
            &:hover {
                cursor: pointer;
                transform: scale(.9);
                transition: all .2s linear;
            }
        }
    
    .video {
        position: relative;
                padding-bottom: 56.25%;
        height: 0;
        background: #000;
        
        
        
        video {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            
            &:focus {
                outline: 0;
            }
        }
    }
}


/*----------------------------------------------------------------------------------
9. Youtube video section
-----------------------------------------------------------------------------------*/
.youtube-video-section {
    .video {
        padding-bottom: 56.25%;
        height: 0;
        position: relative;
        background: #000;
        
        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
    }
}


/*----------------------------------------------------------------------------------
10. Scroll effect styles
-----------------------------------------------------------------------------------*/
.scroll-effect {
    position: relative;
    
    .first-level {
        position: absolute;
        top: 0;
        left: 0;
        
        bottom: 0;
        right: 0;
        height: auto;
    }
    
    .second-level {
        opacity: 0;
        transition: all .1s linear;
    }
}