@font-face {
    font-family: 'Lato';
    src: url('../Fonts/Lato-Black.eot');
    src: url('../Fonts/Lato-Black.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Lato-Black.woff') format('woff'),
         url('../Fonts/Lato-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato-Thin';
    src: url('../Fonts/Lato-Thin.eot');
    src: url('../Fonts/Lato-Thin.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Lato-Thin.woff') format('woff'),
         url('../Fonts/Lato-Thin.ttf') format('truetype');
    font-weight: lighter;
    font-style: normal; 
}



@media only screen and (max-width:319px), only screen and (max-device-width:319px) {
    body {
        display: none;
    }
}

@media only screen and (min-width:320px) and (max-width: 799px), only screen and (min-device-width:320px) and (max-device-width: 799px) {
    body {
        margin: 0px;
    }


    a {
        color: black;
        text-decoration: none;
        font-family: Lato-Thin;
        font-weight: lighter;
        font-size: 12px;
        letter-spacing: .2em;
    }
        

    h1.title {
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        font-family: Lato-Thin;
        font-weight: lighter;
        font-size: 40px;
        line-height: 1.5em;
        color: black;
    }


        p.content_info {
        text-align: center;
        font-family: Lato;
        font-style: normal;
        font-weight: bold;
        color: black;
        font-size: 12px;
        line-height: 1.5em;
    }

    div {
        display: block;
    }

        div.wrap {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }

        div.image_window {
            position:relative;
            margin-left: auto;
            margin-right: auto;
            height: 180px;
            width: 100%;
            max-width:240px;
        }

    #header {
        width: 100%;
        cursor: pointer;
    }

    #map {
        margin-left: auto;
        margin-right: auto;
        height: 200px;
        width: 90%;
    }

    #menu_btn {
        display: block;
        width: 100%;
        height: 23px;
        padding-top: 17px;
        padding-bottom: 17px;
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        text-align: center;
        text-transform: uppercase;
        line-height: 1.5em;
    }

    ul.menu {
        display: normal;
        width: 100%;
        padding: 0px;
        margin: 0px;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 15px;
        background-color: white;
        line-height: 1.5em;
    }


        ul.menu li {
            display: normal;
            width: 100%;
        }

    ul.requirements {
        display: normal;
        width: 60%;
        padding: 0px;
        margin: auto;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 15px;
        background-color: white;
        line-height: 1.5em;
        font-family:Lato;
        list-style-image:url(../Static/Pointer.png);
    }


    button.apply_button {
        display: block;
        border: solid;
        border-width: 1.5px;
        border-color: white;
        font-family: Lato-Thin;
        font-weight: lighter;
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-left: auto;
        margin-right: auto;
        background-color: cornflowerblue;
        color: white;
        transition: 0.6s;
        width: 50%;
        height: 50px;
        min-width: 250px;
        max-width: 300px;
    }





        button.apply_button:hover {
            background-color: white;
            color: cornflowerblue;
            border-color: cornflowerblue;
            transition: 0.4s;
        }

        img.wide_window_img {
            display:block;
            margin-left:auto;
            margin-right:auto;
            max-width:240px;
    }



    .apply_input {
        display:block;
        width:80%;

        margin-left:auto;
        margin-right:auto;
        margin-bottom:2%;

        padding:3px;

        border-color:grey;
        border-style: solid;

        font-family:Lato-Thin;
        font-size:20px;
        font-weight:100;
    }

    #opp {
        display:block;
        resize:none;
        width:80%;

        margin-left:auto;
        margin-right:auto;

        padding:3px;

        border-color:grey;
        border-style: solid;
        border-width:2px;
        
        
        font-family:Lato-Thin;
        font-size:20px;
    }
}

@media only screen and (min-width:800px) {
    a {
        font-family: Lato-Thin;
        font-weight: lighter;
        font-size: 11px;
        line-height: 1.5em;
        text-decoration: none;
        text-transform: uppercase;
        color: black;
        transition: 0.4s;
        list-style-type: none;
        letter-spacing: .15em;
    }

        a.selected {
            color: blue;
            text-decoration: solid;
        }

        a:hover {
            color: burlywood;
            transition: 0.3s;
        }




    div {
        display: block;
    }


        div.wrap {
            margin-left: auto;
            margin-right: auto;
            
        }

        div.image_window {
            margin-left: auto;
            margin-right: auto;
            height: 180px;
            width: 33%;
            float: left;
        }

        div.sub_content {
            width: 45%;
            float: left;
            margin-left: auto;
            margin-right: auto;
            padding-left:5px;
            padding-right:5px;
            font-size: 19px;
            line-height: 1.5em;
        }


    #header {
        width: 80%;
        margin-top:25px;
        max-width:800px;
    }

    #content {
        margin-top: 2%;
        width: 80%;
        max-width: 800px;
    }

    #map {
        margin-left: auto;
        margin-right: auto;
        height: 265px;
        width: 80%;
        max-width:800px;
    }





    ul.menu {
        display: normal;
        width: 80%;
        min-width:600px;
        margin:auto;

    }

        ul.menu li {
            display: inline;
            text-align: center;
            width: 15%;
            margin-left: 1.5%;
            margin-right: 1.5%;
            line-height: 1.5em;
            
        }
        

    ul.requirements {
        font-family:Lato;
        display: normal;
        list-style-image:url(../Static/Pointer.png);
        font-size: 19px;
     
        line-height: 1.5em;
    }




    h1.title {
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        font-family: Lato-Thin;
        font-weight: 100;
        font-size: 60px;
        line-height: 1.5em;
        color: black;
    }




    p.content_info {
        text-align: center;
        font-family: Lato;
        font-style: normal;
        font-weight: bold;
        color: black;
        font-size: 19px;
        line-height: 1.5em;
        letter-spacing: 0.05em;
    }




    button.apply_button {
        display: block;
        border: solid;
        border-width: 1.5px;
        border-color: white;
        font-family: Lato-Thin;
        font-weight: lighter;
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-left: auto;
        margin-right: auto;
        background-color: cornflowerblue;
        color: white;
        transition: 0.6s;
        width: 50%;
        height: 50px;
        min-width: 250px;
        max-width: 300px;
    }




        button.apply_button:hover {
            background-color: white;
            color: cornflowerblue;
            border-color: cornflowerblue;
            transition: 0.4s;
        }




    img.wide_window_img {
        width: 100%;
    }



    .apply_input {
        display:block;
        width:80%;

        margin-left:auto;
        margin-right:auto;
        margin-bottom:2%;

        padding:3px;

        border-color:grey;
        border-style: solid;

        font-family:Lato-Thin;
        font-size:20px;
        font-weight:100;
    }

    #opp {
        display:block;
        resize:none;
        width:80%;

        margin-left:auto;
        margin-right:auto;

        padding:3px;

        border-color:grey;
        border-style: solid;
        border-width:2px;
        
        
        font-family:Lato-Thin;
        font-size:20px;
    }
}
