/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 07-Apr-2021, 15:26:24
    Author     : OMEN
*/

body{
    
}
.img-layout{
    position: absolute;
    left: 20px;
    top: 20px;
    width: 150px;
    height: 150px;
}
.welcome-panel{
    position:  absolute;
    height: 100%;
    width: 100%;    
    background-image: url("../images/landscape.jpg");
    /*background-attachment: fixed;*/
    background-position: center;
    background-size: cover;
    
}
.welcome-text{
    position: relative;
    margin: auto;
    width: 60%;
    color: white;
    top: 35%;
    font-size: 12rem;
}

.bkgrd-overlay{
     position: absolute;
    /*display: none;*/
    width: 100%;
    height: 100%;
    background: rgba(15,15,15, 0.7);
    /*z-index: 4;*/
}
#brand-text{
    display: none;
}
.brand-text{
    position: relative;
    margin: auto;
    color: white;
    text-align: center;
    top: 30%;
    font-size: 12rem;
    width: 75%;    
}
#explore{
    font-size: 3rem;
    color: #ffcc33;
}
@media (max-width: 768px){
    .welcome-panel{
        /*position:  relative;*/
        height: 100%;
        width: 100%;    
        background-image: url("../images/landscape.jpg");
        /*background-attachment: fixed;*/
        background-position: center;
        background-size: cover;
    }
    .img-layout{
        position: relative;
        margin-left: 40%;
        /*left: 20px;*/
        top: 40px;
        width: 100px;
        height: 100px;
        
    }
    .welcome-text{
        position: relative;
        margin: auto;
        width: 85%;
        color: white;
        top: 20%;
        font-size: 6rem;
    }
    .brand-text{
        position: relative;
        margin: auto;
        color: white;
        text-align: center;
        top: 10%;
        font-size: 6rem;
        width: 85%;    
    }
}
@media (min-width: 769px) and (max-width: 900px){
    .welcome-panel{
        /*position:  relative;*/
        height: 100%;
        width: 100%;    
        background-image: url("../images/landscape.jpg");
        /*background-attachment: fixed;*/
        background-position: center;
        background-size: cover;
    }
    .img-layout{
        position: relative;
        margin-left: 40%;
        /*left: 20px;*/
        top: 40px;
        width: 150px;
        height: 150px;
        
    }
    .welcome-text{
        position: relative;
        margin: auto;
        width: 85%;
        color: white;
        top: 20%;
        font-size: 6rem;
    }
    .brand-text{
        position: relative;
        margin: auto;
        color: white;
        text-align: center;
        top: 20%;
        font-size: 6rem;
        width: 85%;    
    }
}
@media (max-height: 600px){
    .welcome-panel{
        /*position:  relative;*/
        height: 100%;
        width: 100%;    
        background-image: url("../images/landscape.jpg");
        /*background-attachment: fixed;*/
        background-position: center;
        background-size: cover;
    }
    .img-layout{
        position: relative;
        margin: auto;
        /*left: 20px;*/
        top: 20px;
        width: 80px;
        height: 80px;
        
    }
    .welcome-text{
        position: relative;
        margin: auto;
        width: 85%;
        color: white;
        top: 10%;
        font-size: 2rem;
    }
    .brand-text{
        position: relative;
        margin: auto;
        color: white;
        text-align: center;
        top: 10%;
        font-size: 2rem;
        width: 85%;    
    }
}