body{ margin: 0;
    background-color: #000;}

        .col-half {width: 4.1%;}
        .col-1{ width: 8.33%}
        .col-2{ width: 16.6%}
        .col-3{ width: 25%}
        .col-4{ width: 33.3%}
        .col-5{ width: 41.6%}
        .col-6{ width: 50%}
        .col-7{ width: 58.3%}
        .col-8{ width: 66.66%}
        .col-9{ width: 75%}
        .col-10{ width: 83.3%}
        .col-11{ width: 91.6%}
        .col-12{ width: 100%}

        .header{
            height: 90px;
            border-bottom: 5px solid #fff;
            background-color: #000;
           position: fixed;
           top: 0;
           right: 0;
           z-index: 100;
        }

        nav{
            height: 80px;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .links-container{
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            transition: 0.75s ease-in;
        }

       

        nav a{
            font-family: "roboto-mono", monospace;
            font-weight: 900;
            font-style: normal;
            font-size: 2vh;
            letter-spacing: 2px;
            text-decoration: none;
            display: flex;
            text-decoration: none;
            color: #fff;
        }

        nav a:hover{
            background-color: #f3bf05;
            color: #000;
            cursor: pointer;
        }

       
        nav svg:hover{
            cursor: pointer;
        }

        .cls-1:hover{
            fill: #f3bf05;
            cursor: pointer;
        }

        .cls-2:hover{
            stroke: #fff;
            cursor: pointer;
        }

        #sidebar-active{
            display: none;
        }

        .close-sidebar-button svg:hover{
            fill: #f3bf05;
            cursor: pointer;
        }

        .open-sidebar-button, .close-sidebar-button{
            display: none;
        
        }

        .header .logo{
           
            float:left;
            height: 90px;
            position: fixed;
           
            
        }

        .header .logo img{
            width: 82px;
            margin-left: 10px;
            margin-top: 1px;
        }

        .spacer{
            height:90px;
            float: left;
        }

        .header .menu{
            float: right;
            height: 90px;
            position: fixed;
            top: 0;
            right: 0;  
        }

        
      
    
        .menu .menu-button:hover{
            background-color: #f3bf05;
        }

        .menu .menu-button a:hover{
            color:#fff;
        }

        .spacer{
            height: 70px;
            border: 0px solid #fff;
           /* background-color: rgb(4, 140, 251);*/
            float: left;

        }

        /* .spacer .col-12{
            background-color: #000;
            height: 30px;
        }*/

        .spacer-tall {
            height: 100px;
            float:left;
            /*background-color: #fff;*/
        }

        .main{
            height:510px;
            background-color: #000;
            margin-top: 90px;
            float:left;
        }

        .main .main-caption{
            height: 100px;
            float: left;
            background-color: #fff;
            border: 3px solid #fff;
        }

        .main-caption h4{
            font-family: "roboto-mono", monospace;
            font-weight: 900;
            font-style: normal;
            font-size: 2vh;
            letter-spacing: 2px;
            text-align: center;
            /*margin-top: 15px;*/
            color: #fff;
            position: absolute;
            bottom: 25;
            right: 15;
        }

        .index .hero{
            height: 490px;
            /*border:1px solid #f3bf05;*/
            background-image: url(../images/Logos/manfredo-b-designs-open-mind-pen-tool-parachute-black-gold-badge.png);
            background-position: center;
            /*background-color:rgb(255, 179, 0);*/
            background-repeat: no-repeat;
            background-size: contain;
            float:left;
            margin: 1% 0 5% 0;
            color: #fff;
            font-family: "roboto-mono", monospace;
            font-weight: 900;
            font-style: normal;
            font-size: 2vh;
            letter-spacing: 2px;
            text-align: center;
        }

        .thumbnail-row h3{
            font-family: "roboto-mono", monospace;
            font-weight: 900;
            font-style: normal;
            color:#000;
            text-align: center;
            margin-bottom: 15px;
            margin-top: 25px;
        }

        .thumbnail-row{
            float:left;
            margin-top: 3px;
            background-color: #eaeceb;
            padding: 0;
        }

         
        .thumbnail{
            position: relative;
            width: 31%;
            margin: 1%;
            float: left;
            outline: 5px solid #000;
        }

        .thumbnail_img{
            display: block;
            width: 100%;
         }

        .thumbnail_overlay{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0, 0.8);
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; 
            opacity: 0;
            transition: opacity 0.25s;
        }

        .thumbnail_overlay:hover{
            opacity: 1;
        }


        .thumbnail_title h3{
            color:#fff;
            align-items: center;
            justify-content: center;
            margin: 0;
        }

        .thumbnail:hover{
            outline: 5px solid #f3bf05;
        }

        .index .work1, .index .work2,.index .work3,.index .work4, .index .work5,.index .work6{
            height: 440px;
            
            float:left; 
            outline: 3px solid #000;
            
        }

        .index .work1 img, .index .work2 img,.index .work3 img,.index .work4 img, .index .work5 img,.index .work6 img{
             width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
        }
         

        .work-mockup-1, .work-mockup-2, .work-mockup-3, .work-mockup-4, .work-mockup-5, .work-mockup-6{
            outline: 3px solid #000;
            float: left;
        }

        .email-bar{
    width: 100%;
    height: 100px;
    background-color: #000;
    float: left;
    padding: 1%;
}

.email-bar h1{
    font-family: roboto-mono, monospace;
    font-weight: 500;
    font-style: normal;
    font-size: 3vh;
    color: #fff;
    text-align: center;
   justify-content: center;
}

.work1, .work2, .work3, .work4, .work6{
    background-color: #fff;
}
       

       

/*------------------------------------------END INDEX STYLE--------------------------------------*/



/*---------------------------------BEGIN WORK STYLE--------------------------------------------*/

.work-main{
            width: 100%;
            height: auto;
            
            /*border: 3px solid #f3bf;*/
        }

        .work-main-img{
            display: block;
        }

        .work-details{
            width: 90%;
            height: auto;
            float: left;
            position: relative;
            margin: 20px 5% 0 5%;
            border: 6px outset #000;
            background-color: #eaeceb;

        }

        .work-specialty, .work-logistics{
            outline: 3px solid #000;
            height: 80px;
            float: left;
        }

        .work-description, .work-remarks{
            height: auto;
            float: left;
            outline: 3px solid #000;
            display: block;
            
        }

        

        .title, .remarks, .name{
            margin-left: 15px;
            margin-right: 5px;
        }

        .name{
            font-family: anton, sans-serif;
            font-weight: 400;
            font-style: normal;   
            font-size: 12vh;
            color:#fff;
            
        }


        .work-description .title{
             font-family: "roboto-mono", monospace;
            font-weight: 400;
            font-style: normal;
            color: #fff;
            font-size: 3vh;
            margin-left: 15px;
            margin-bottom: 10px;
            margin-top: 3px;
        }

        .title{
            font-family: "roboto-mono", monospace;
            font-weight: 400;
            font-style: normal;
            color: #000;
            font-size: 2vh;
            margin-top: 1%;
        }

        .remarks{
            font-family: anton, sans-serif;
            font-weight: 400;
            font-style: normal;   
            font-size: 3vh;
            color:#000;
            margin-bottom: 1%;
        }


        .work-description{
            background-color: #000;
            color: #fff;
            text-align: center;
        }

        .email-bar h1{
    font-family: roboto-mono, monospace;
    font-weight: 500;
    font-style: normal;
    font-size: 3vh;
    color: #fff;
    text-align: center;
   justify-content: center;
}

.work-mockup-container{
            width: 90%;
            margin: 20px 3% 0 5%;
        }

        .work-mockup-image{
            padding: 1%;
            float: left;
            
        }



/*---------------------------------END WORK STYLE--------------------------------------------*/

/*---------------------------------BEGIN WORK 1 STYLE--------------------------------------------*/





/*---------------------------------END WORK 1 STYLE--------------------------------------------*/



/*---------------------------------BEGIN WORK 2 STYLE--------------------------------------------*/

.work2 .mockup{
    outline: 3px solid #000;
    
}




/*---------------------------------END WORK 2 STYLE--------------------------------------------*/










/*---------------------------------BEGIN WORK 4 STYLE--------------------------------------------*/


        .work4 .work-mockup-container{
            width: 90%;
            margin: 20px 3% 0 5%;
        }

        .work4 .work-mockup-image{
            margin-top: 1%;
            float: left;
            
        }

        .mockup{
            display: block;
            width: 100%;
            height: auto; 
            
        }

   

   

   



/*---------------------------------END WORK 4 STYLE--------------------------------------------*/

/*---------------------------------BEGIN WORK 5 STYLE--------------------------------------------*/

.logo-container{
    margin-top: 90px;
}



.logo1, .logo2, .logo3, .logo4, .logo5, .logo6{
    height: auto;
    float: left;
}

.logos img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    
}


/*---------------------------------END WORK 5 STYLE--------------------------------------------*/





/*---------------------------------BEGIN CREATIVE SAMPLES STYLE--------------------------------------------*/

.creative-samples{
    background-color: #fff;
}

.sample-container{
    min-height: 100vh;
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 50px 3%;
    margin-top: 50px;
}

.sample-gallery{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 30px;
}

.sample-gallery img{
    width: 100%;
    cursor: pointer;
    
}

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

.img-box{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:rgb(0,0,0,0.7);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
}

.img-box img{
    height: 700px;
}

.img-box span{
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #fff;
    top: 5%;
    right: 5%;
    font-size: 30px;
    text-align: center;
    line-height: 30px;
    font-weight: 600;
    cursor: pointer;
}

.img-box.show{
    display: flex;
}

/*---------------------------------END CREATIVE SAMPLES STYLE--------------------------------------------*/


/*---------------------------------BEGIN MAIN PHOTOGRAPHY STYLE--------------------------------------------*/

.photography-main, .photography-travel, .photography-pets, .photography-objects, .photography-people{
   /* margin:20px;*/
    padding:0;
    text-align:center;
    background-color: #fff;
}

.photography-main h1{
    text-align: center;
    font-family: anton, sans-serif;
    font-weight: 400;
    font-style: normal;   
    font-size: 6vh;
    color:#fff;
   
}

.photography-main .main-caption{
    height: 20px;
    justify-content: center;
    color: #000;
    margin-top: 95px;
}

.photography-main .container{
    display: grid;
    grid-template-columns: repeat(2 ,1fr);
    grid-auto-rows: 300px 150px;
    grid-gap: 10px;
    grid-auto-flow: dense;
    margin-top: 10px;
}

.gallery-item{
    width: 100%;
    height: 100%;
    position: relative;
}

.gallery-item .image{
    width: 100%;
    Height: 100%;
    overflow: hidden;
}

.gallery-item .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    cursor: pointer;
    transition: 5s ease-in-out;
}

.gallery-item:hover .image img{
    transform: scale(1.5);
}

.gallery-item .title{
    opacity:0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    color: #fff;
    pointer-events: none;
    z-index: 4;
    transition: .3s ease-in-out;
    -webkit-backdrop-filter: blur(5px) saturate(1.8);
    backdrop-filter: blur(5px) saturate(1.8);
}

.gallery-item:hover .title{
    opacity: 1;
    animation: move-down .3s linear;
    padding:1em;
    width: 100%;
}
 
.w-1{
    grid-column: span 1;
}

.w-2{
    grid-column: span 2;
}
.w-3{
    grid-column: span 3;
}
.w-4{
    grid-column: span 4;
}
.w-5{
    grid-column: span 5;
}
.w-6{
    grid-column: span 6;
}

.h-1{
    grid-row: span 1;
}

.h-2{
    grid-row: span 2;
}

.h-3{
    grid-row: span 3;
}

.h-4{
    grid-row: span 4;
}

.h-5{
    grid-row: span 5;
}

.h-6{
    grid-row: span 6;
}




/*@keyframes move-down{
    0%{
        top:10%
    }

     50%{
        top:35%
    }

     100%{
        top:50%
    }
}*/


/*---------------------------------END MAIN PHOTOGRAPHY STYLE--------------------------------------------*/

/*---------------------------------BEGIN BIO STYLE--------------------------------------------*/

.bio-main{
    height: 800px;
    margin-top: 120px;
    background-color: #000;
}

.bio-pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;

}

.bio-pic{
    float:left;
    outline: 3px solid #f3bf05;
}

.bio-text{
    font-family: roboto-mono, monospace;
    font-weight: 500;
    font-style: normal;
    font-size: 2.3vh;
    color: #fff;
    text-align: left;
   justify-content: left;
    float:left;
}

/*------------------------------------------END BIO STYLE--------------------------------------*/


/*------------------------------------------BEGIN MEDIA STYLE--------------------------------------*/

  @media(min-width: 450px){
            .links-container{ 
                
                flex-direction: column;
                align-items: flex-start;
                position: fixed;
                top:0;
                right: -100%;
                z-index: 10;
                width: 300px;
                background-color: #000;
                box-shadow: -5px 0 5px rgba(203, 203, 203, 0.25);
                transition: 0.75s ease-in;
            }

            nav a{
                box-sizing: border-box;
                height: auto;
                width: 100%;
                padding: 20px 30px;
                justify-content: flex-start;
            }

            .open-sidebar-button, .close-sidebar-button{
                padding: 20px;
                display: block;
        }

        #sidebar-active:checked ~ .links-container{
            right: 0;
        }

        }

        #sidebar-active:checked ~ #overlay{
            background-color: rgba(rgb(190, 190, 190 0.20));
            height: 100%;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9;
        }


/*------------------------------------------END MEDIA STYLE--------------------------------------*/


@media(max-width: 1020px) {

.thumbnail{
    width: 48%;
}

.header{
    height: 120px;
}

nav{
    height: 110px;
}

nav svg{
    height: 100px;
    width: auto;
}

}

@media(max-width: 660px) {
    .thumbnail{
        width: 98%;
    }
}