//Imports
//Fonts
@import url('https://fonts.googleapis.com/css?family=Roboto, Raleway');
$mainFont: 'Raleway', sans-serif;
$secondaryFont: "Roboto", sans-serif;
$testColor: transparentize(pink, 0.2);

body, html{
    padding: 0;
    margin: 0;
}

//Global
.container{
    height: 100vh;
    background-color: black;
}

a{
    text-decoration: none;
    cursor: pointer;
    color:inherit;
}
//text tags
h1,h2,h3,h4,h5,h6,p{
    color: white;
    font-family: $mainFont;
}
h2{
    margin: 10px 0;
    font-size: 5em;
    font-weight: 900;
}

h3{
    font-size: 4em;
    font-weight: 900;
}

h4{
    font-size: 2em;
    font-weight: 600;
    letter-spacing: .1em;
}

//button tags
.btn{
    padding: 20px 15px;
    outline:none;
    background: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-family: $mainFont;
    font-weight: 700;
    color: black;
}

//misc
.clearfix::before{
    content:"";
    display: table;
    clear: both;
}

.centered{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.full-img{
    min-height: 100%;
    min-width: 100%;
}

::-webkit-scrollbar{
    width:2px;
}

::-webkit-scrollbar-thumb{
    background:rgb(71, 71, 71);
}

#page{
    min-width: 100%;
}

//Local
header{
    position: relative;
    display: block;
    width: 100%;
    height: 100px;
    background:rgba(2,2,2,0.2);
    z-index: 2;

    .logo{
        margin-left: calc(80px - 22px); //logo has spacing around it
        max-width: 120px;
        height: 100%;
        filter: invert(100%);
    }

    .navSocial{
        float:right;
        height: 100%;

        ul{ 
            list-style-type: none;
            margin-right: 80px;
            text-align: center;
            vertical-align: middle;

            li{
                line-height: 10px;
                width: 16px;
                float:left;
                background:white;
                padding: 20px;
                margin: 10px;
                border-radius: 50%;
            }
        }
    }
}

#intro{
    position: relative;
    background: url("../images/sections/intro.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    margin-top:-100px;
    z-index: 1;

    .info-container{
        width: 80%;
        height: 500px;
        color:grey;
        //background: $testColor;

            .name{
                position: relative;
                margin-top: 150px;
            }
    }
}

#garantija{
    position: relative;
    background-image: url(/images/sections/garantija.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: left center;

    .garantija-container{
        display: table-cell;
        vertical-align: middle;
        position:absolute;
        width: 50%;
        height: 500px;
        //background:$testColor;
        top: 50%;
        left: 90%;
        transform: translate(-80%, -50%);

        .imgVtxt-container{
            position: relative;
        
            .image-with-text{
                float: left;
                padding:30px;

                &:first-child{
                    padding-left: 0;
                }
            }            
        }
    }
}

#projektai{
    position: relative;
    background-image: url(/images/sections/projektai.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: right center;

    .projektai-container{
        width: 60%;
        //background-color:$testColor;

        h2{
            font-size: 7em;
        }
    }
}

#prez-projektai{
    position: relative;
    background-image: url(/images/sections/prez-projektai-madwoch.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;

    .prez-proj-container{
        //background-color: $testColor;
        text-align: center;

        img{
            width: 350px;
            height: auto;
            margin-bottom:50px;
        }

        .btn-view{
            padding: 20px 25px;
            background-color: transparent;
            border:solid 2px #EEB21B;
            color:#EEB21B;
            transition: all .4s ease;

            &:hover{
                transition: all .2s ease;
                background-color: rgba(238, 178, 27, 0.8);
                border:solid 2px rgba(238, 178, 27, 0);
                color: black;
            }
        }
    }
}

#kontaktai{
    position: relative;
    background-image: url(/images/sections/contact.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: right center;

    .kontaktai-container{
        width: 80%;

        .title{
            display: table;
            position: relative;

            .title-with-socials{
                display: table;
                position: relative;

                h3{
                    float:left;
                    margin-top: 15px;
                }

                .social{
                    float: left;
                    height: 100%;
            
                    ul{ 
                        list-style-type: none;
                        text-align: center;
                        vertical-align: middle;
            
                        li{
                            line-height: 10px;
                            width: 16px;
                            float:left;
                            background:white;
                            padding: 20px;
                            margin: 10px;
                            border-radius: 50%;
                        }
                    }
                }
            }
        }

        #contact-form{
            display:block;
            width: 60%;
            height: 500px;
            max-height:300px;
            font-family: $mainFont;

            hr{
                float: left;
                border: none;
                border-left: 2px solid whitesmoke;
                opacity: 0.5;
                height: 225px;
                margin-left: -10px;
                width: 1%;       
            }

            label{
                display: block;
                color: rgb(161, 161, 161);
                font-weight: 600;
                padding-bottom: 25px;
                margin-right: 0!important;
            }

            .lbmail{
                padding-top: 79px;
            }

            .left-form{
                float:left;
                width: 49%;
            }

            .right-form{
                float:right;
                width: 49%;
            }
            
            input[type=text], input[type=email], textarea{
                width: 90%;
                resize: none;
                background-color:transparent;
                color:white;
                outline: none;
                border:none;
                border-bottom: 2px solid rgb(161, 161, 161);

                &:focus{
                    border-bottom: 2px solid white;
                }
            }

            input[type=text], input[type=email], textarea, input[type=button]{
                font-weight: 600;
                font-size: 1.2em;
            }

            input[type=text], input[type=email]{
                padding-top:12px;
            }

            textarea{
                font-family: $secondaryFont;
                font-size: 1em;      
                letter-spacing: .07em;          
            }
        }
        .mygtukas{
            display: block;
            position: relative;
            text-align: center;
            width: 60%;

            .siusti{
                margin-left: auto;
                margin-right: auto;
                display: block;
                position: relative;
                width: 40%;
                padding: 12px 0; 
                background-color: white;
                border:none;
            }
        }
    }
}


//MEDIA QUERIES

@media only screen and (max-width: 1200px){
    
}

@media only screen and (max-width: 769px){
    #garantija, #intro, #projektai, #kontaktai{
        background-image: none;
        background-color: black;
    }
}