@import './reset.less';
@import './functions.less';

#page>:nth-child(1){
    .size(100%, 4vw, 'normal');
    button{
        float: right;
        font-weight: bolder;
        padding: .6vw 1vw .6vw 1vw;
        color: @colors[darkpurple];
    }
}
header{
    //top logo
    &>div{
        .position(absolute, 0vw, 2%);
        .size(20%, 10vw, 'normal');
        .backgroundImage(contain, center);
        background-image: url(../../../source/cocoTimeLogo.png); 
        z-index: 0;
    }
    nav{
        .size(75%, auto, 'normal');
        float: right;
        text-align: right;
        //menu
        &>ul{
            display: inline-flex;
            @paddingBottom: 3vw;
            &>li{
                padding-bottom: @paddingBottom;
                p{
                    padding: 0 1vw 0 1vw;
                    font-size: 1.3vw;
                    border: solid 1px transparent;
                    text-align: left;
                    cursor: pointer;
                }
                &:hover{
                    &>p{
                        border-color: @colors[darkpurple];
                    }
                    &>ul{
                        height: auto;
                    }
                }
                //submenu
                &>ul{
                    .size(12%, 0vw, 'normal');
                    .position(absolute, 10vw, unset);
                    background-color: white;
                    border-top: solid 1px #f5f5f5;
                    box-shadow: 0 -2px 0px #f9f9f9;
                    overflow: hidden;
                    z-index: 100;
                    &>li{
                        p{
                            border: solid 1vw white;
                            border-bottom: none;
                            font-size: 1.3vw;
                            text-align: center;
                            cursor: pointer;
                        }
                        &:hover{
                            background-color: @colors[lightgray];
                        }
                    }
                }
            }
        }
    }
    //baneer video
    video{
        .size(100%, auto, 'normal');
    }
    //banner
    &>section{
        .size(100%, 18vw, 'normal');
        .position(relative, 6vw);
        padding-top: 6vw;
        .backgroundImage(url(../../../source/pages/about_us/team/baner.png), cover);
        &>article{
            .size(56%, auto, 'normal');
            padding: 2vw;
            margin: auto;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            &>h1{
                font-weight: bold;
            }
            &>p{
                padding-top: 1vw;
            }
        }
    }
}
main{
    box-sizing: border-box;
    display: grid;
    #savedata{
        .position(fixed, 93vh, 85%);
        font-size: 2vw;
        font-weight: bolder;
        color: white;
        animation-name: saveData;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
}
main * img {.size(100%, 100%, 'normal');}

.page_0_subpage_0{
    grid-template-rows: repeat(6, auto);
    &>:nth-child(1){
        .size(60%, auto, 'max');
        margin: auto;
        padding: 5em 0;
        text-align: center;
    }
    &>:nth-child(2){
        //padding for text containers
        display: inline-flex;
        //left
        &>:nth-child(1){
            .size(50%, 57vw, 'normal');
        }
        //right
        &>:nth-child(2){
            .size(50%, auto, 'normal');
            .backgroundImage(url(../../../source/pages/about_us/our_philosophy/background1.png), cover, center);
            color: white;
            h3{
                .size(11em, auto, 'normal');
                margin: auto;
                padding-top: 12vw
            }
        }
    }
    &>:nth-child(3){
        background-color: @colors[darkgray];
        p{
            .size(39em, auto, 'max');
            padding: 3em;
            margin: auto;
            text-align: center;
            color: white;
        }
    }
    &>:nth-child(4){
        display: grid;
        grid-template-columns: 1fr 1fr;
        //left
        &>:nth-child(1){
            padding: 6em 3em 6em 3em;
        }
        //right
        //&>:nth-child(2){}
    }
    &>:nth-child(5){
        padding: 3vw 0 3vw 0;
        .backgroundImage(url(../../../source/pages/about_us/our_philosophy/background2.png), cover, center);
        article{
            .size(50%, auto, 'normal');
            margin: auto;
            padding: .7vw 0 5vw 0;
            border: solid 1px white;
            text-align: center;
            color: white;        
            //h
            &>:nth-child(2){padding-bottom: 2vw;}
            //input
            &>:nth-child(3){
                .size(50%, 3vw, 'normal');
                padding: .3em 0em .3em 1em;
                .position(relative, unset, 13%);
                background-color: rgba(100%, 100%, 100%, 0.502);
                border: none;
                color: white;
                transition-duration: .3s;
                &:focus{
                    background-color: white;
                    color: @colors[darkpurple];
                }
            }
            //button
            &>:nth-child(4){
                .position(relative, 6.7vw, -25%);
                padding: .5em 2em .5em 2em;
                color: white;
                background-color: @colors[darkpurple];
                transition-duration: .3s;
                &:hover{
                    background-color: @colors[darkpurple] * 1.2;
                }
            }
    
        }
        &>button{
            .size(100%, auto, 'normal');
            @editPageButton();
            position: relative;
            top: 3vw;
        }  
    }
    &>:nth-child(6){
        .size(100%, auto, 'normal');
        padding: 4vw 0 10vw 0;
        text-align: center;
        p{
            padding-bottom: 5vw;
            color: @colors[darkpurple];
            font-weight: bolder;
        }
        //logotypes
        article{
            box-sizing: border-box;
            display: grid;
            grid-template-columns: repeat(5, auto);
            grid-template-rows: repeat(2, auto);
            grid-gap: 6vw 9%;
            padding: 0 13vw 0 13vw;
            &>*{
                .size(100%, 6vw, 'max');
                .backgroundImage(contain, center); 
                &>button{
                    .size(100%, auto, 'normal');
                    @editPageButton();
                    .position(relative, 4vw, unset);
                    font-size: 1.2vw;
                }  
            }
        }
    }
}
.page_0_subpage_1{
    grid-template-columns: auto;
    padding-top: 6vw;
    //workers list
    &>article{
        .size(80%, 21vw, 'normal');
        margin: auto;
        display: grid;
        grid-template-columns: 25% auto;
        padding: 4vw 0 4vw 0;
        //picture
        &>:nth-child(1){
            .size(100%, 100%, "normal")
        }
        //describe
        &>:nth-child(2){
            h3{
                //name
                &:nth-last-of-type(1){
                    padding-top: 3vw;
                    font-weight: bold;
                }
                //job title
                &:nth-child(2){
                    margin-top: -5.5vw;
                    font-weight: lighter; 
                    font-style: italic;
                }
            }
            p{
                height: 10vw;
                padding-top: 2vw;
                line-height: 2vw;
                overflow: auto;
            }
        }
    } 
    hr{
        .size(85%, .1vw, 'normal');
        background-color: @colors[gray];
        border: none;
    }
}