@charset "utf-8";

* {
    box-sizing: border-box;
}

/* ALL PAGES */

body {
    margin: 0;
    padding: 0;
    color: black;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}



/* HAMBURGER NAV */

/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */

#menuToggle {
    display:block;
    position: relative;
    left: 50px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    margin-top: -130px;
}

#menuToggle a {
    color: white;
    text-decoration: none;
}

#menuToggle a:hover {
    color: #d74b27;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;  
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #3CB1B5;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;  
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background:white;
}

#menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
    position: absolute;
    width: 100%;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    background: #3CB1B5;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    list-style-type: none;
}

#menu li {
    padding: 10px 0;
    font-size: 22px;
    color: white;    
    text-decoration: none;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}


.onclick-menu:focus {
    pointer-events: none;
}

.onclick-menu:focus-within .onclick-menu-content {
    opacity: 1;
    visibility: visible;
    display: inherit;
    pointer-events: auto;
}

.onclick-menu-content {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
}


.onclick-menu-content li{
    list-style: none;    
}

.onclick-menu-content li a {
    text-decoration: none;
    color: white;
}

/* END HAMBURGER NAV */

.headerimg {
	display:block;
	margin: 20px auto 0 auto;
	width:20%;
	padding-bottom:1em;
    position:sticky;
    z-index:1;
}

hr {
	border:none;
	height:2px;
	background-color:#f8d07b;
}

#top {
    margin-top: 100px;
}

footer li {
	font-size:75%;
	display: inline;
    margin: 10px;

}

footer li a {
    text-decoration: none;
    color: black;
}

footer ul {
	padding:1em 0 0 30px;
}

/* GALLERY PAGES */


.gallery-container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.gallery {
    width: 300px;
    margin: 20px auto;
}

/* CONSULTATION */

#name_input {
    margin: 1em .25em;
}

.col {
    margin: 0 0 1em 0;

}

#email_addr {
    margin: 0 0 0 .4em;
}

#phone_input {
    margin: 0 0 0 .1em;
}

#formbox {
    padding:.1em 0 1.5em 1.8em;
    background-color:#BAE7E8;
    
}

/* ABOUT */

#about {
	display: block;
    width: 300px;
    margin: 20px auto auto auto;
}

#resume {
	color:#d74b27;
	font-family:'Montserrat', sans-serif;
	text-decoration:underline;
	padding:0 1em;
}

#about-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.about {
    margin: 10px 20px;
}

/* PRINT MEDIA AND WEB DESIGN */

.gallery_container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 16px;
}

.webdesimg, .printMediaImg {
    display: block;
    width: 300px;
    margin: 0 auto
}

/*  MEDIA QUERIES */

/* TABLET AND ABOVE */

/* ALL PAGES */


@media screen and (min-width:768px){
    
    /* HIDE HAMBURGER NAV */
    
    #menuToggle span, #menuToggle input {
        display: none;
    }
    
    
    
    #menu {
        transform: none;
        width: 100%;
		margin: 0 0 0 -30px;
        display: flex;
        justify-content: left;
        padding: 0;
        
    }
    
    ul#menu li {
		display: list-item;
		padding: 0 .5em;
        color: black;
	}
    
    #menu {
		background-color: rgba(255,255,255,0)
    }
    
    #menuToggle a {
		color:black;
        text-decoration: none;
    }
    
    .onclick-menu-content {
        position: fixed;
        padding: 1em;
        border: 2px solid #f8d07b;
        background-color: white;
    }
    
    .onclick-menu-content li {
        margin: 10px auto;
    }
    
    .onclick-menu:hover, #menu li:hover {
        color: #d74b27;
    }
    
    .onclick-menu {
        cursor: pointer;
    }
    
/* END HIDE HAMBURGER NAV */    
    

/* ALL PAGES */
    
    .headerimg {
    width: 7%;
    padding-bottom: 160px;
    }

    nav li {
		font-size:2em;
    }
	
    footer {
		clear: left;
		margin-top: 1em;  
    }	
	
    footer nav {
		border-width: 5px 0 0 0;
    }

    footer li {
		font-size:1em;
    }
  
    #top {
        margin-top:50px;  
    }    
    
/* GALLERY PAGES */
    
    .gallery {
        width: 660px;
    }
    
/*CONSULT & CONTACT FORM */
   #formbox {
        margin:auto;
        max-width: 600px;
        margin:3em auto auto auto;
}

    #message {
        width:300px;
        height:150px;
        resize: none;
        margin-top: 1em;
} 
    
/* ABOUT */
    
    #about-container {
        justify-content: flex-start;
    }
    
    #about {
        width: 40vw;
        margin: 20px;
    }
    
    #text {
        width: 56%;
    }
   

}

@media screen and (min-width:1025px) {
    .gallery {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
}
    }