*{
    margin: 0;padding: 0px;border:0px;box-sizing: border-box;
}

body{
    background-image: url(../images/Drone.jpg);
    background-position:top;
    background-repeat: no-repeat;
    background-size: 100%;
}

header{
    background-color: #FDFCDC;
    border: 0px solid red;
    width: 80%;
    height: 100px;
    margin: 0 auto;
    margin-top: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    margin-bottom: 3px;

}

h1{
    color: #0081A7;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-shadow: 2.5px 2.5px 5px #f07167;
    text-align: center;
    margin-top: 10px;
    
}

section{ 
    background-color: #FED9B7;
    border: 0px solid blue;
    width: 80%;
    height: 564px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;

}

section p{
    color: black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    margin-top: 5px;
    
    
}

#phone {
    background-color: white;
    position: relative;
    left: 0%;
    bottom: 0%;   
   
    list-style: none;
    overflow: hidden;
    display: flex;
    flex-flow: row wrap;
    border:0px dashed yellow;
    width: 78%;
    height: 250px;
    justify-content: center;
    flex:1 0 50%;
}

#phone li{
    background-color: gray;
    padding-top: 10px;
    margin: 1px;
    width: 100%;
    list-style: square;
    border:2px solid gray;
    text-align: center;
    text-decoration: none;
    
}

#phone li a{
    text-decoration: none;
    color: white;
    font-size: 2em;
}

footer {

    background-color: #FDFCDC;
    border: 0px solid red;
    width: 80%;
    height: 100px;
    margin: 0 auto;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    color:black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    margin-top: -30px;

    
    
}

h2{
    color:black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    font-size: 1em;
    margin-top: 40px;
}

footer #use{
    display: none;
}

@media screen and (max-width:699px) {
    nav{
        display: none;
    }

    section #photos{
        display: none;
    }

    #events {
        display: none;
    }
    
}

    

@media screen and (min-width:700px) {
    h1{
        font-size: 3em;
        padding-top: 1%;
    }

    
    nav{
        background-color: #FED9B7;
        
        display: block;
        position: absolute;
        left: 10%;

        width: 20%;
        height: 76.5%;
        border: 0px solid green ;
        
    }

    nav h2{
        font-size: 2em;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: #0081A7;
        text-shadow: 1px 1px 2px #f07167;
        border-bottom: 1px solid gray;
        padding-bottom: 4%;

    }
    

    section{
        position: absolute;
        right:10%;
        width: 59.5%;
        height: 76.5%;
    }

    section p{
        font-size: 2em;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        text-shadow: 1px 1px 2px white;
    }

    #photos{
        display: flex;

    }

    #photos img{
        position: relative;
        left:7%;
        top: -15%;
        margin: 0 auto;
        width: 85%;
        float: none;
        box-shadow: 5px 10px 15px #fdfcdc;
    }

    #phone{display: none;}

    nav ul{
        
        position: relative;
        left: 0%;
        bottom: -5%;   
    
        list-style: none;
        overflow: hidden;
        display: flex;
        flex-flow: row wrap;
        border:0px dashed yellow;
        width: 90%;
        height: 80%;
        justify-content: center;
        margin: 0 auto;
        
        
    }

    

    nav li{
        position: relative;
        bottom: 0%;
        background-color: gray;
        width: 100%;
        height: 10%;
        border: 0px solid yellow;
        flex:1 0 100%;
        text-align: center;
        color: white;
        font-size: 2em;
        padding: 3% 0%;
        border-radius: 10px;
        box-shadow: 5px 10px 15px #fdfcdc;
        
    }

    nav li a{
        text-decoration: none;
    }

    #events{
        
        position: relative;
        left: -40%;
        bottom: 0%;   
    
        list-style: none;
        overflow: hidden;
        display: flex;
        flex-flow: row wrap;
        border:2px dashed gray;
        width: 15%;
        height: 30%;
        
        margin: 0 auto;
        
        
    }

    

    #events li{
        position: relative;
        bottom: 0%;
        
        width: 15%;
        height: 5%;
        border: 0px solid yellow;
        flex:1 0 100%;
        text-align: center;
        color: black;
        font-size: 1em;
       
       
        
    }

    
    #promo{
        color: black;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        position: absolute;
        right: 5%;
        bottom: 10%;
        width: 60%;
        height: 30%;
        text-shadow: 1px 1px 2px white;
    }

    nav li a:visited{
        text-decoration: none;
        color: white;
    }



    footer{
        position: absolute;
        bottom: 0%;
        left: 10%;
        
        color: black;
        
    }

    footer #use{
        display: block;
        color: white;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        position: absolute;
        left:10%;
        top: 40%;
    }

    
    
}