@charset "utf-8";

/*
Colors:
Giraffe Tree Green: #74C044
Ian Sickles Brand Purple: #422D42
Off Black/Dark Purple: #231f20
Gold: #ffd700
Off White: #ecf0f1
Gray: #4c4c4c
Light Gray: #cccccc


*/
* {
/*    outline: thin solid red;*/
}
/*---------Header-------------------------*/
body {
    font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
    margin: 0;
}
header {
/*    padding-top: 1em;*/
/*    background-color: blue;*/
	background-color: white;
}
header .logo-and-wordmark {
    position: relative;
    display: flex;
    margin-left: auto;
    margin-right: auto;
/*    width: 100%;*/
    background-color: white;
    margin-top: 0;
    padding: 1em;
    z-index: 2;
}
header img {
    padding-right: 1em;
}
.wordmark {
    border-left: thin solid #422D42;
    padding-left: 1em;
}
.wordmark h1, .wordmark h3 {
    color: #422D42;
    padding: 0;
    margin: 0;
}
.wordmark h1 {
    font-size: 25pt;
    margin-bottom: -0.1em;
}
nav{
    
}
nav ul {
    list-style: none;
    padding-left: 0;
    text-align: center;
}
nav ul li {
    font-weight: 700;
    padding: 0.5em;
    font-size: 20pt;
}
nav ul li a:link, nav ul li a:visited {
    color: #422D42;
    text-decoration: none;
}
/*---------Main---------------------------*/
main {
    background-color: #231f20;
    color: #ecf0f1;
    padding: 1em;
	background-image: url("images/background-pattern-color.svg");
	background-repeat: no-repeat;
	background-size: cover;
}
.section-homepage {
/*    background-color: pink;*/
}
.section-homepage h1 {
    font-size: 24.27pt;
}
.section-homepage h1 span {
    font-weight: 100;
    white-space: nowrap;
}
.list-homepage li{
    background-color: black;
    width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    border-radius: 15px;
}
.list-homepage li:first-child {
	background-image: url("images/Still Life-01.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 225%;
}
.list-homepage li:nth-child(2) {
	background-image: url("images/image-1.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 190%;
}
.list-homepage li:last-child {
	background-image: url("images/Sickles-Emerald-And-Jade-Poster.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 250%;
}
.section-homepage ul {
    list-style: none;
/*        background-color: green;*/
    padding-left: 0;
}
.section-homepage ul li {
    padding: 0.5em;
    font-size: 15pt;
}
.call-to-action-div {
    text-align: center;
    display: block;
    margin: 5em 0;
}
.call-to-action {
    color: black;
    background-color: white;
    padding: 1em;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18pt;
    
}
/*---------Portfolio----------------------*/
.personal-brand-img img{
    width: 100%;
    height: auto;
}
.personal-brand-section {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/*---------Projects-----------------------*/
.salvation-army {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.salvation-army img{
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}



/*---------Footer-------------------------*/
footer {
    background-color: #ecf0f1;
/*    background-color: yellow;*/
    color: #422D42;
}
footer section {
    padding: 1em;
}
footer section h3 {
    background-color: #231f20;
    display: block;
/*    margin: 0;*/
    padding: 0.5em 0.5em 0.5em 1em;
    color: white;
    border-radius: 15px;
}
footer section ul {
    list-style: none;
    padding-left: 0;
}
footer section ul li {
    padding: 0.5em;
}
footer section ul li a:link, footer section ul li a:visited {
    color: #422D42;
    text-decoration: none;
}
.contact-form-footer-section form fieldset {
    border: none;
    margin: 0;
    padding: 0;
/*    text-align: center;*/
}
.contact-form-footer-section form fieldset label {
    margin-left: 0.5em;
    font-weight: 900;
    font-size: 10pt;
}
.contact-form-footer-section form fieldset .contact-form-input {
    margin: 0.5em 0.5em 1.5em 0.5em;
    padding: 0.5em;
    width: 80%;
    background-color:rgba(0,0,0,0.00);
    border: none;
    border-bottom: thin solid #cccccc;
    font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
    color: #422D42;
    font-size: 16.18pt;
    resize: none;
    
}
.form-submit-button {
    background-color: #422D42;
/*    margin: 0.5em 0.5em 1.5em 0.5em;*/
    padding: 1em;
    border: none;
    color: white;
    font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
    font-size: 16.18pt;
    border-radius: 15px;
    display: block;
    width: 90%;
    margin: 0.5em auto 1.5em;
}

.other-sites-footer-section ul {
    text-align: center;
}
.other-sites-footer-section ul li a img {
    padding: 2em 0;
    width: 80%;
}
.social-media-footer-section {
  
}
.social-media-footer-section ul {
    display: flex;
    width: 100%;
/*    background-color: pink;*/
}
.social-media-footer-section ul li a{
    padding: 0.5em;
    display: block;
/*    background-color: blue;*/
}

.social-media-footer-section ul li a i {
    font-size: 25pt;
    color: #231f20;
     padding-bottom: 0.1em;
}
.copyright {
    background-color: #231f20;
    display: block;
    margin-bottom: 0;
    padding: 1em;
    color: white;
	text-align: right;
}




@media (max-width:672px){
	/*------------Hamburger Menu-------------*/

.hamburger-label {
		position: absolute;
		display: block;
/*		margin: 1.25em 0 0 1.5em;*/
		width: 33px;
/*		height: 32px;*/
		  -webkit-touch-callout: none;
		cursor: pointer;
		transition: 0.5s;
		right: 1.5em;
		top: 2.5em;
    z-index: 3;
	}
.hamburger-label span {
		
		  display: block;
		  width: 33px;
		  height: 4px;
		  margin-bottom: 5px;
		  position: relative;

		  background: #422d42;
		  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;
	}
.hamburger-label span:first-child {
		transform-origin: 0% 0%;
	}
	.hamburger-label span:nth-last-child(2) {
		transform-origin: 0% 100%;
	}
	.hamburger-input:checked + .hamburger-label span:first-child {
			opacity: 1;
			transform: rotate(45deg) translate(0px, -1px);
/*			background: #74c044;*/
	}
	.hamburger-input:checked + .hamburger-label span:nth-child(2) {
			opacity: 0;
  			transform: rotate(0deg) scale(0.2, 0.2);
	}
	.hamburger-input:checked + .hamburger-label span:last-child {
		opacity: 1;
			transform: rotate(-45deg) translate(-4px, -1px);
/*		background: #74c044;*/
	}
	.hamburger-input:checked + .hamburger-label {
		padding-left: 5px;
		transition: 0.5s;
	}
	.hamburger-input:checked ~ nav {
		transform: translateX(0);
		transition: 0.5s;
	}


/*----------Dropdown--------------------*/

.dropdown {
    position: absolute;
    z-index: 1;
    transform: translateY(-130%);
    transition: 1s;
    width: 100%;
    background-color: #ecf0f1;
}
#hamburger-menu:checked + .dropdown {
    transform: translateY(130%);
    transition: 1s;
}
}
@media (min-width:672px){
	
/*----------Header-----------------------*/
	header {
/*		display: inline-flex;*/
		padding-left: 2em;
		padding-right: 2em;
/*		width: 88%;*/
/*		background-color: pink;*/
		display: block;
	}
	.header-flex {
		display: flex;
/*		outline: thin solid yellow;*/
		
	}
	.logo-and-wordmark {
/*		display: block;*/
/*		left: 0;*/
		margin-left: 0;
		margin-right: auto;
/*		outline: thin solid green;*/
		
	}
    .wordmark {
        padding-top: 1em;
    }
    .wordmark h1, .workmark h3{
        white-space: nowrap;
    }
    .wordmark h1 {
      font-size: 90%;  
    }
    .wordmark h3 {
        font-size: 70%;
    }
	.dropdown {
/*		float: right;*/
		margin-right: 0;
		margin-left: auto;
	}
	.dropdown ul {
		display: flex;
		
	}
	.dropdown ul li a {
		font-size: 10pt;
		white-space: nowrap;
	}
    .dropdown ul li a:hover {
        text-decoration: underline;
    }
/*----------Main---------------------------*/
    .section-homepage h1 {
        text-align: center;
    }
	.list-homepage {
		display: flex;
	}
    .list-homepage li {
        width: 180px;
        height: 260px;
    }
/*---------Footer--------------------------*/
    .footer-flex {
        display: flex;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
/*---------Portfolio----------------------*/
    .personal-brand-img {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
    .personal-brand-img h1 {
        text-align: center;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        padding-bottom: 0.5em;
    }
.personal-brand-img img{
    width: 100%;
    height: auto;
    max-width: 300px;
    margin: 5px;
}
.personal-brand-section {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.personal-brand-flex {
    display: flex;
}
.personal-brand-flex div{
    margin: 1em;
}
    .personal-brand-img div{
        display: flex;
        margin-left: auto;
        margin-right: auto;
        max-width: 672px;
    }
	
	.salvation-army-flex {
		display: flex;
	}
	.salvation-army-flex img {
		width: 50%;
	}
/*---------Contact-------------------------*/
	.contact-page-main .footer-form-flex {
		display: block;
	}
	.contact-page-main {
	max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media (min-width:1000px) {
	
/*----------Header-------------------------*/
    .wordmark {
        padding-top: 0.5em;;
    }
    .wordmark h1 {
      font-size: 180%;  
    }
    .wordmark h3 {
        font-size: 100%;
    }
    .dropdown ul li a {
		font-size: 12pt;
	}
/*----------Main---------------------------*/
	.list-homepage {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
    .list-homepage li {
        width: 280px;
        height: 500px;
    }
/*---------Footer--------------------------*/
    .social-media-footer-section ul li a i:hover{
    border-bottom-width: 2px;
        border-bottom-style: solid;
       
       
}
    .footer-form-flex {
        display: flex;
    }
    .footer-max-width-flex {
        display: flex;
    }
    .footer-flex {
        max-width: 1200px;
    }
/*--------Portfolio------------------------*/
    .personal-brand-img {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
    .personal-brand-img img{
    width: 100%;
    height: auto;
    max-width: 650px;
    margin: 25px;
}
    .personal-brand-img div{
        display: flex;
        margin-left: auto;
        margin-right: auto;
        max-width: 1400px;
    }
	/*---------Contact-------------------------*/
	.contact-page-main .footer-form-flex {
		display: block;
	}
}