@charset "utf-8";
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* CSS Document */

/* ===============
    Global Items
   =============== */

.fourx {
    width: 25%;
    padding: 0 2%;
}

.flexrow.twoby {
	justify-content: space-evenly;
}

.threex {
	width: 33%;
	padding: 0 2%;
}

.imgcorners {
    border-radius: 50px;
    width: 100%;
    height: 75%;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}

.right {
    padding-left: 5%;
}

.left {
    padding-right: 5%;
}

.dbl {
    width: 50%;
}

.single {
    width: 40%;
    -ms-flex-line-pack: center;
        align-content: center;
}

.block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.socials, #herosocials{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}

.socials a {
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    min-width: 55px;
    width: 10%;
    margin: 1%;
    padding: 2%;
}

a.btnabout {
  text-align: center;
	border-radius: 50px;
    border-style: solid;
    border-width: 5px;
    padding: 1% 6%;
    margin: 4% 0 4% 0;
    font-size: 1.4rem;
	border-color: #427cbf;
	background-color: #427cbf;
	color: #ffffff;
	max-width: 250px;
	-ms-flex-item-align: end;
	    align-self: flex-end;
}
a.btnabout:hover {
	background-color:#ffffff;
	color:#427cbf;
}


.title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 2%;
}

.title a{
    -ms-flex-line-pack: center;
        align-content: center;
    padding-left: 5%;
    margin-left: 2%;
    margin-top: 1%;
    min-width: 35px;
}

.twospace {
    width: 61%;
    border-style: solid;
    border-width: 4px;
	border: 4px solid;
}

.onespace {
    width: 35%;
    border-style: solid;
    border-width: 4px;
	border: 4px solid;
}

.twospace, .onespace {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 40vh;
    margin-bottom: 2%;
}

.flexrow {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 4%;
}

.long {
	max-width: 70%;
}

.center {
	align-self: center;
}

/* ===============
    Landing Page
   =============== */

#contact {
	margin-bottom: 0;
}

#contacttitle{
    margin-bottom: 4%;
}

#hero, #form {
    margin-left: 10%;
}

#herodiv, #abtherocontent {
    width: 50%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

#herocontent h1{
    color: #554A92;
    height: 55px;
}

#hero img, #about img, #summary img {
    max-width: 100%;
}

 
#casehero {
	background-image: url("/img/casestudieshero.png");
	background-repeat: no-repeat;
	background-size: contain;
}

#casedescription {
	font-size: 175%;
}

#herotitle {
    padding-bottom: 4%;
}

#herosocials p {
    color: #ef5090;
    white-space: nowrap;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}


#aboutimg {
    background-image:url("/img/home/aboutimg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-origin: content-box;
    max-width: 100%;
    margin: 0 1%;
    min-height: 550px;
}

#abt, #case, #phototitle, #imaging {
    margin-bottom: 10%;
}

#case h5 {
    color: #3B7E91;
}

#cases {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
    gap: 2%;
    color: white;
    text-align: center;
    -ms-flex-line-pack: center;
        align-content: center
}

#cases h1{
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    color: #fff;
}

#chairman, #caseimgchairman {
    /*background-color: #3b7e91;*/
    border-color:#3b7e91;
	background-image: url("/img/chairman-main.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


#tech, #caseimgtech {
    background-color: #ef5090;
    border-color:#ef5090;

}

#wood, #caseimgwood {
   /* background-color: #554a92; */
    border-color:#554a92;
	background-image: url("/img/wood-main.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#whiskey, #caseimgwhiskey {
    background-color: #427cbf;
    border-color:#427cbf;
}

#coffee, #caseimgcoffee {
   /* background-color: #ef5090; */
    border-color:#ef5090;
	background-image: url("/img/coffee-main.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#more {
    width: 35%;
    color: #fff;
    background-color: #3b7e91;
	border-radius: 50px;
    border-style: solid;
    border-width: 4px;
	border: 4px solid #3b7e91;
}

#view {
    width: 100%;
    height:100%;
    -ms-flex-line-pack: center;
        align-content: center;
    font-size: 200%;
    line-height: 100%;
}

#view:hover{
        color: #3b7e91;
}

#more:hover{
    background-color: #fff;
}

#imaging h5{
    color: #ef5090;
}

#photo h5 {
    color: #427CBF;
}

.thumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    
}
.thumbs img {
    width: 28%;
    -o-object-fit: cover;
       object-fit: cover;
    border: 4px solid #BFBFBF;
    border-radius: 50px;
    margin: 1% 0;
    aspect-ratio: 1 / 1;
}

.mainimg {
 margin: 2% 0;
}

.mainimg img {
    border-radius: 50px;
    width: 100%;    
}
.digimain {
    max-height: 100%;
}

#phototitle h5, #abt h5 {
    color: #427cbf;
}

#digimgs>img:hover {
    border-color: #ef5090;
}
#photoimgs>img:hover {
    border-color: #427cbf;
}

#digimgs>img:active {
    border-color: #ef5090;
}
#photoimgs>img:active {
    border-color: #427cbf;
}

#photomain{
    min-height: 100%;
}

#contactimg {
    background-image:url("/img/home/contactimg.png");
    background-position-x: right;
    background-position-y: top; 
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 800px;
	max-width: 100%;
}

.contactinfo{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

.contactinfo img{
    max-width: 6%;
    margin-right: 2%;
}

#contactimg>.socials{
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

#contactimg>.socials img{
        max-width: 100px;
        margin-right: 4%;
}

#contacttitle h5{
    color: #554a92;
}

#form {
    width: 40%;
}

/* ===============
     About Page
   =============== */


#abtherotitle {
	margin-bottom: 5%;
	margin-top: 5%;
}

#summary {
	margin-right: 5%;
}

#tools h1{
    color: #427cbf;
    height: 55px;
}

#abtimg{
	 width: 50%;
    -ms-flex-line-pack: center;
        align-content: center;
	align-content: flex-end;
	max-width: 700px;
}

#abtherocontent {
	max-width: 750px;
}

#experience h2 {
	margin-bottom: 0;
}

.abttitle {
	padding-bottom: 5%;
}
#abtwrap h5, #abtherotitle h5 {
	margin-bottom: -60px 0;
}

#abtwrap h5, #abtherotitle h5 {
    color: #427cbf;
}

#abtwrap h9, #abtwrap h5 {
	padding-bottom: 2%;
}

#skills h2 {
	max-width: 50%;
	padding-bottom:0;
}

#educationtitle h3{
	font-weight: 400;	
}

#educationtitle h2{
	font-weight: 500;
}

#resume {
	align-self: center;
	margin: 0;
}

.bckgrdimg {
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-origin: content-box;
    max-width: 100%;
    margin: 0 1%;
    min-height: 550px;
}

#awardtitle {
	margin-bottom: 2%;
}

#educationimg {
    background-image:url("/img/about/education.jpg");
}

#history1img {
    background-image:url("/img/about/deployment.JPG");
}
#history2img {
    background-image:url("/img/about/duty.JPG");
}
#history3img {
    background-image:url("/img/about/ghostbusters.JPG");
}
#history4img {
    background-image:url("/img/about/ups.JPG");
}
#history5img {
    background-image:url("/img/about/outback.JPG");
}

#award1 {
	background-image: url("/img/about/cplpromo.jpg");
}

#award2 {
	background-image: url("/img/about/goodcookie.jpg");
}

#award3 {
	background-image: url("/img/about/NMAC.jpg");
}

#award4 {
	background-image: url("/img/about/CertificateofAccomendation.jpg");
}


/* ===============
  Case Studies Page
   =============== */
.studytile {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    min-height: 40vh;
    margin-top: 4%;
}

#textchairman>h1 {
    color: #3b7e91;
    text-align: left;
}
#texttech>h1{
    color: #ef5090;
} 
#textwood>h1{
    color: #554a92;
}
#textwhiskey>h1{
    color: #427cbf;
} 

#textcoffee>h1{
    color:#ef5090;
}


#textchairman>p, #texttech>p, #textwood>p, #textwhiskey>p, #textcoffee>p {
    color: black;
}

.description {
    text-align: left;
    width: 50%;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}

#caseimgchairman, #caseimgtech, #caseimgwood, #caseimgwhiskey, #caseimgcoffee {
    border-radius: 50px;
    width: 40%;
    -ms-flex-line-pack: center;
        align-content: center;
}

#textcoffee, #textwhiskey {
    padding-left: 4%;
}


	

/* ===============
    Media Queries
   =============== */
@media all and (max-width:1604px) {

    
    #herocontent, #tools {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    
    .fourx {
        width: 46%;
}
    .long {
	max-width: 80%;
}
	.wrapper {
		width: 100%;
	}
	#abtpage {
	margin-top: 10%;
}
	

    }

@media all and (max-width:1330px) {
 
    
#about, #cases, #digital, #contact{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
    #more {width: 100%;}
    .single, .dbl {
        width: 100%;
    }
    
    #photo {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    

.flexrowwrap{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    
    .fourx {
        width: 46%;
}
    .twospace, .onespace {
        width: 100%;
    }
        #form {
    width: 80%;
}
.single {
		margin: 0 2%;
	}
	.right {
		padding-left: 0;
	}
	.left {
		padding-right: 0;
	}
	#awardcontent{
		flex-direction: column;
	}

	.threex {
		width: 100%;
	}
	
}

@media all and (max-width:1230px) {

	#navleft {
		flex-direction: column-reverse;
	}
	#abtpage {
		margin-top: 0;
	}
	
	#abtherocontent{
		width: 80%;
	}
    
#about, #cases, #digital, #contact{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
     #more {width: 100%;}
    .single, .dbl, #abtimg {
        width: 100%;
    }
	.single, .bckgrdimg {
		margin: 1% 0;
	}
    
    #photo {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    
    #herosocials {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    }

	#abtherocontent {
		align-self: center;
	}
    .fourx {
        width: 46%;
}
    .twospace, .onespace {
        width: 100%;
    }
    
    
    .right, .left {
        padding: 0;
    }
    .contactinfo {
        padding-left: 5%;
    }
    #form {
    width: 80%;
}

	.flexcolrev {
		flex-direction: column-reverse;
	}
	.flexcol {
		flex-direction: column;
	}
	.threex {
		width: 100%;
	}
	#skills h2 {
	max-width: 80%;
}
.long {
	max-width: 90%;
}

}

@media all and (max-width:750px) {

    
    #herodiv {
        width: 100%;
        margin-top: 5%;
    }
    .wrapper {
        padding: 0 2%;
    }
	#abtherocontent {
		margin: 0 10%;
		width: 90%;
	}
    
#about, #cases, #digital, #contact, #hero{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
     #more {width: 100%;}
    .single, .dbl, #abtimg {
        width: 100%;
    }
    
    #photo {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    
    #herosocials {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    }
#herocontent, #tools {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
    .fourx {
        width: 95%;
}
    .twospace, .onespace {
        width: 100%;
    }
    
    .right, .left {
        padding: 0;
    }
    .contactinfo {
        padding-left: 5%;
    }
    	#skills h2 {
	max-width: 100%;
}
 
        #form {
    width: 80%;
}
    .long {
	max-width: 100%;
}

}