/* GENERAL STYLING */

    * {
        padding:0px;
        margin:0px;
        transition: all .3s ease;
        }

    body {
        font-family: 'Montserrat', 'Helvetica', sans-serif;
        font-weight:100;
        width:100%;
        color:#444;
        overflow-x:hidden;
        }

    a {
        text-decoration: none;
        color:#444;
        }
    

/* MOBILE STYLING */

        #container {
            display:flex;
            flex-wrap:wrap;
            max-width:100vw;
            }

        #header {
            position:fixed;
            margin:0px;
            width:100%;
            height:80px;
            background-color: #FFF;
            }

        #logotype {
            font-size:6pt;
            font-weight:300;
            width:300px;
            height:80px;
            text-align:center;
            line-height:80px;
            }

        #nav_menu {
            position:absolute;
            right:0px;
            top:0px;
            width:80px;
            height:80px;
            
            }

        #nav_bar {
            display:none;
            }

        #nav_menu img {
            
            width:48px;
            height:auto;
            margin:16.5px;
            }

        #nm_links {
              display: none;
            }


        #nm_links {
            position:fixed;
            top:80px;
            background-color: white;
            width:100%;
            height:1200px;
            border:1px #DDD;
            border-style: solid none;
            }

        #nm_links a {
            display: block;
            width:100%;
            height:120px;
            background-color: white;
            text-align: center;
            line-height: 120px;
            border:0.5px #DDD;
            border-style: solid none;
            font-size:16pt;
            font-weight:300;
            }

        #nm_links > *:last-child {
          border-bottom:1px #DDD;
          border-bottom-style: solid;
            }


         .project_gallery {
            display:flex;
            flex-direction:column;
            width:100%;
            
            align-items: center;
            padding-top: 80px;
            }

        .project_element {
            margin:60px;
            }

        .project_element img {
                width:300px;
                height:200px;
                object-fit:cover;
                }

        .project_element p {
            margin-top:30px;
            font-weight:500;
            }

        #hero_img img {
            width:100vw;
            height:100vh;
            object-fit:cover;
            }

        #project_content {
            width:90vw;
            margin:50px auto;
            }

         #project_title {
            font-size:20pt;
            font-weight:500;
            padding:10px;
            }  

         .project_text {
            padding:10px;
            line-height: 20pt;
            }   
         .project_text p {
            margin: 15pt 0px;
            } 

        .single_img img {
            width:90vw;
            height:auto;
            margin:20px 0px;
            }

        .double_img {
            display:flex;
            width:90vw;
            margin:20px 0px;
            justify-content:space-between;
            }
        .double_img img {
            width:40vw;
            }



/* DESKTOP STYLING */

    @media (min-width:800px) {



            #nav_menu {
                display:none;
                }

            #nm_links{
                 display:none;
                }

            #nav_bar {
                display:flex;
                position:absolute;
                right:0px;
                top:0px;
                width:600px;
                height:80px;
                }
            #nav_bar a {
                display:block;
                width:200px;
                height:80px;
                text-align: center;
                line-height: 80px;
                font-size:12pt;
                font-weight:300;
                }

            #nav_bar a:hover {
                font-weight:600;
                }

            #work_sm_deploy {
                display:none
                }

            #nav_bar #work_sm:hover ~ #work_sm_deploy, #work_sm_deploy:hover {
                display:flex;
                position:absolute;
                right:0px;
                top:80px;
                height:80px;
                background-color: white;
                border-top:1px #DDD;
                border-top-style: solid;
                width: 100vw;
                justify-content: flex-end;
                }

            .project_element img {
                width:600px;
                height:400px;
                object-fit:cover;
                }

            .project_element p {
                margin-top:20px;
                font-weight:500;
                color:#999;
                }

            .project_element:hover p {
               
                color:#444;
                }

            #project_content {
                width:800px;
                }

            .single_img img{
                width:800px;
                height:auto;
                margin:25px 0px;
                }

            .double_img {
                width:800px;
                margin:25px 0px;
                }

            .double_img img {
                width:370px;       
                }

            }