@import './reset.less';
@import './functions.less';
#app{
    &>header{
        display: grid;
        grid-template-columns: 35% auto;
        grid-gap: 6.5vw;
        padding: 1vw 0 1vw 0;
        position: relative;
        z-index: 100;
        background-color: rgba(18, 26, 46, 60%);
        color: white;
        #topLogo{
            width: 45%;
            justify-self: end;
            &>img{
                cursor: pointer;
            }
        }
        nav{
            width: 65%;
            display: grid;
            grid-auto-flow: column;
            margin-top: .8vw;
            text-align: center;
            &>ul{
                display: contents;
            }
            li{
                &:nth-of-type(1){
                    display: none;
                }
                &:hover{
                    color: @colors[redHover];
                }
                cursor: pointer;
            }
            .labelActive{
                color: @colors[redHover];
            }
        }
    }
    //header on subpage
    .full{
        background-color: rgba(18, 26, 46);   
    }
    #popup{
        position: fixed;
        top: 5vh;
        min-height: 35vw;
        padding: @sectionPadding;
        background-color: rgba(18, 26, 46, 60%);
        &>article{
            display: grid;
            grid-template-columns: .5fr 1fr;
            grid-column-gap: 5vw;
            color: white;
            &>h2{
                margin-bottom: 1vw;
                grid-column: span 2;
            }
        } 
        &>button{
            margin-left: 100%;
            font-size: 1vw;
            margin-bottom: 2vw;
        }  
    }
    main{
        #banner{
            min-width: 100%;
            position: relative;
            z-index: 0;
            top: -6vw;
            overflow: hidden;
            background-size: cover;
            article{
                margin: 23vw 20%;
                color: white;
                h1{
                    font-family: 'Oswald', sans-serif;
                }
                p{
                    margin: 2vw 0 4vw 0;
                }
            }
            &>div{
                width: 4%;
                height: auto;
                position: absolute;
                margin: -5vw 48%;
            }
        }
    }
    //main with subnav
    .grid{
        display: grid;
        grid-template-columns: 25% auto;
        grid-gap: 2vw;
        padding: 0 21% 3vw 19%;
        background-color: @colors[lightGray];
        &>header{
            margin-left: -19vw;
            width: 167%;
            grid-column: span 2;
            background-color: @colors[mainNavColor];
            color: white;
            padding: 0;
            h1{
                font-size: 2vw;
                padding: 3vw 0 3vw 19%;
            }
        }
        aside{
            float: right;
            nav>ul{
                &>li{
                    margin-top: .5vw;
                    padding: 1em 2em 1em 2em;
                    font-weight: bold;
                    background-color: white;
                    cursor: pointer;
                    transition-duration: @transitionDurr;
                    &:hover{
                        background-color: @colors[redHover];
                        color: white;
                    }
                }
                .subpageLabelActive{
                    background-color: @colors[redHover];
                    color: white;
                }
            }
            
        }
        #subMain{
            padding: 2vw;
            background-color: white;
            article{
                &>hr{
                    margin: unset;
                    margin-bottom: 2vw;
                }
                p span{
                    display: block;
                    margin-top: 1vw;
                }
                &>ul{
                    list-style-type: none;
                    margin: 1vw 0 1vw 0;
                    &>li{
                        &::before{
                            content: "\25A0";
                            color: @colors[redHover];
                            float: left;
                        }
                        p, a{
                            margin-left: 5%;
                        }
                    }
                }
                
            }
        }
    }
    footer{
        padding: @sectionPadding;
        display: inline-flex;
        background-color: @colors[mainNavColor];
        color: white;
        #footerContact{
            width: 25%;
            &>article{
                div{
                   
                    margin-bottom: 1vw;
                }
                ul{
                    margin-left: 4%;
                    li{
                        display: inline-flex;
                        width: 100%;
                        i{
                            width: 7%;
                            height: 1vw;
                            margin: .2vw 3%;
                            background-size: cover;
                            display: block;
                        }
                        &:nth-of-type(1){
                            i{
                                background-image: url(./img/footer/marker.svg);
                            }
                        }
                        &:nth-of-type(2){
                            i{
                                background-image: url(./img/footer/phone.svg);
                            }
                        }
                        &:nth-of-type(3){
                            i{
                                background-image: url(./img/footer/mail.svg);
                            }
                        }
                    }
                }
            }
        }
        nav{
            //padding: 2vw 0 4vw 0;
            width: 75%;
            ul{
                display: inline-flex;
                width: 100%;
                text-align: center;
                li{
                    margin-left: 3%;
                    cursor: pointer;
                }
            }
        }
    }
}
@import './home/home.less';
@import './about/history.less';
@import './about/authorities.less';
@import './about/mission.less';
@import './about/awards.less';
@import './offer/cleanliness.less';
@import './offer/integration.less';
@import './offer/protection.less';
@import './offer/aircraft.less';
@import './investors/shareholders.less';
@import './investors/balance.less';
@import './news/news.less';
@import './sport/sport.less';
@import './trainee/our_trainee.less';
@import './trainee/wsb.less';
@import './trainee/records.less';