@charset "utf-8";
/* CSS Document */

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - Settings: used with preprocessors and contain font, colors definitions, etc.
2.0 - Tools: globally used mixins and functions. Use for preprocessor only.
3.0 - Generic: reset and/or normalize styles, box-sizing definition, etc. 
4.0 - Elements: styling for bare/generic HTML elements 
5.0 - Objects: class-based selectors which define undecorated design patterns, building blocks
        - Framework
6.0 - Components: specific designed components
        - Header
        - Home Hero
		- Buttons
        - About
        - Footer
        - Animation
7.0 - Utilities: utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class  
        -Background

--------------------------------------------------------------*/

/*--------------------------------------------------------------
3.0 - GENERIC
-------------------------------------------------------------- */

html {
	font-size: .95rem;
    line-height: 2.25em;
    border: 5px solid #2b87c8;
}

body {
    color: #2b87c8
}

@media only screen and (min-width: 40em) {
	html {
		font-size: .8rem;
	}
}

@media only screen and (min-width: 64em) {
	html {
		font-size: 1rem;
	}
}

/*--------------------------------------------------------------
4.0 - ELEMENTS
-------------------------------------------------------------- */

h1, h2, h3 {
    font-family: houschka-rounded, sans-serif;
    font-weight: 800;
    font-style: normal;
}

h2, h3 {
    font-size: 2rem;
    padding: 1rem 0;
    margin-bottom: 0;
}

address p {
    font-style: normal;
}

address p:first-child {
    font-family: houschka-rounded, sans-serif;
    font-weight: 800;
    font-size: 2rem;
    padding-top: 2rem;
	line-height: 1;
}

address p:nth-child(2) {
    padding-bottom: 1rem;
	font-size: 1.25rem;
}


/*--------------------------------------------------------------
5.0 - OBJECTS   
-------------------------------------------------------------- */

/* -- FRAMEWORK -- */ 



/*--------------------------------------------------------------
6.0 - COMPONENTS
-------------------------------------------------------------- */

/* -- Header -- */

body>header {
    background-color: #DCF0F4;
}

.title-bar {
    background-color: #DCF0F4;
    padding: 20px 10px 15px;
  }

.top-bar {
    padding: 15px 10px;
    background-color: #DCF0F4;
}

@media only screen and (min-width: 40em) {
    .top-bar {
        background-color: #DCF0F4;
    }
}

.top-bar ul, .drilldown a  {
    background-color: transparent;
}

.menu-icon::after {
    background: #2b87c8;
    height: 3px;
    line-height: 2;
    -webkit-box-shadow: 0 7px 0 #2b87c8, 0 14px 0 #2b87c8;
    box-shadow: 0 7px 0 #2b87c8, 0 14px 0 #2b87c8;
}

.menu-icon:hover::after {
    background: #007AB0;
    -webkit-box-shadow: 0 7px 0 #007AB0, 0 14px 0 #007AB0;
    box-shadow: 0 7px 0 #007AB0, 0 14px 0 #007AB0;
}

/* Home Hero */

#hero, .project {
    background-color: #FFF;
}

#hero .cell:first-child {
    padding: 5% 0 0 10%;
}

#hero h2  {
    font-size: 2.75em;
    margin-bottom: 0;
    padding-bottom: 0;
}

.typewrite {
    font-family: houschka-rounded, sans-serif;
    font-weight: 800;
    font-size: 2.75em;
    margin-bottom: 0;
}

@media only screen and (min-width: 40em) {
    #hero h2  {
        font-size: 3.75em;
    }

    .typewrite {
        font-size: 3.75em;
    }
}

/* -- Buttons - */

.button {
    background: #fff;
    color: #2b87c8;
    text-transform: uppercase;
    margin-left: 15px;
    font-family: houschka-rounded, sans-serif;
    font-weight: 800;
    font-style: normal;
}

.button:hover {
    background: #DCF0F4;
	color: #2b87c8;
    -webkit-box-shadow: .4rem .4rem 0 #2b87c8;
    box-shadow: .4rem .4rem 0 #2b87c8;
	transform: translateY(-0.5rem);
}

/* .nav-button {
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 8%;
    opacity: 0;
    -webkit-transform: translate(0px, 10px) scale(0.9);
    -ms-transform: translate(0px, 10px) scale(0.9);
    transform: translate(0px, 10px) scale(0.9);
}

.button-shadow {
    position: absolute;
    left: 7px;
    top: 7px;
    right: -7px;
    bottom: -7px;
    border: 3px solid black;
    background-color: white;
    background-image: url(../images/pattern-small.svg);
    background-position: 0px 0px;
}

.button-text {
    position: relative;
    width: 100%;
    padding: 13px 20px;
    border: 3px solid black;
    background-color: white;
    color: black;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
} */

/* Home - Work */

#work .grid-container.full {
    margin: 0;
}

#project-preview div a:first-child {
    background: url(../img/CMoM-SpendShareSave-Feature.jpg) no-repeat center/cover;
    height: 300px;
}

#project-preview div a:nth-child(2) {
    background: url(../img/OHDZ-Feature.jpg) no-repeat center/cover;
    height: 300px;
}

#project-preview div a:nth-child(3) {
    background: url(../img/DLA-Feature.jpg) no-repeat center/cover;
    height: 300px;
}

#project-preview div a:last-child {
    background: url(../img/CMoM-AutoMaintenance-Feature.jpg) no-repeat center/cover;
    height: 300px;
}


#project-preview-2 div a:first-child {
    background: url(../img/StarCityPride-Preview.jpg) no-repeat center/cover;
    height: 300px;
}

#project-preview-2 div a:nth-child(2) {
    background: url(../img/PlannedParenthoodPoster.jpg) no-repeat center/cover;
    height: 300px;
}

#project-preview-2 div a:nth-child(3) {
    background: url(../img/CopicApp-Mockup.jpg) no-repeat center/cover;
    height: 300px;
}
/* 
#project-preview-2 div a:last-child {
    background: url(../img/CopicApp-Mockup.jpg) no-repeat center/cover;
    height: 300px;
} */

#feature-project {
    background: url(../img/ExtinctionEscape-feature.jpg) no-repeat center/cover;
    height: 605px;
}

#feature-project-2 {
    background: url(../img/UBT-Feature.jpg) no-repeat center/cover;
    height: 605px;
}

.project .cell {
	position: relative;
}

.project img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project img:hover {
	cursor: pointer;
}

.project .caption {
	position: absolute;
	font-family: houschka-rounded, sans-serif;
    font-weight: 800;
    font-style: normal;
	color: #FFF;
	right: 1rem;
	bottom: 0;
	margin-bottom: .5rem;
}

.project .caption a {
	color: #FFF;
}

.project h2 {
    background-color: #DCF0F4;
}

.project div div:nth-child(2) header p {
	padding-top: 1rem;
    margin-bottom: .25rem;
}

.project div div:nth-child(2) p {
    padding: 0 1.5rem 0;
}

.responsibilities {
	font-weight: 900;
    font-size: .75rem;
}

/* About */
#about {
    position: relative;
}

#about-content header, #about-content p {
    padding: 0 15px;
}

.fab::before {
    font-size: 2em;
}

@media only screen and (min-width: 40em) {
    #about .polka-dots {
        height: 780px;
        z-index: -2;
    }
    
    #about .stripes {
        height: 230px;
        flex-grow: 2;
    }
    
    #about-content {
        background-color: #FFF;
        padding: 60px 90px;
        margin-bottom: 30px;
        position: absolute;
        top: 100px;
        left: 30%;
    }
    
    .portrait {
        position: absolute;
        bottom: -50px;
        left: -200px;
        background-color: #FFF;
        width: 275px;
    }
}

@media only screen and (min-width: 64em) {
    #about-content {
        top: 125px;
        left: 35%;
    }

    .portrait {
        bottom: -125px;
        left: -300px;
        width: 350px;
    }
}

/* Footer */

#footer-nav {
    padding: 2rem 0;
}

#footer-nav li:first-child a {
    margin-left: 0;
}

#copyright {
    padding-top: 1rem;
}
  
/*--------------------------------------------------------------
7.0 - UTILITIES
-------------------------------------------------------------- */

/* Colors */

.bg-white {
    background-color: #FFF;
}

.bg-light-blue {
    background-color: #DCF0F4;
}

/* Borders */

.outline-blue {
    outline: 5px solid #2b87c8;
}

.border-blue {
    border: 5px solid #2b87c8;
}

.border-blue-top {
    border-top: 5px solid #2b87c8;
}

.border-blue-bottom {
    border-bottom: 5px solid #2b87c8;
}px

.border-blue-left {
    border-left: 5px solid #2b87c8;
}

.border-blue-right {
    border-right: 5px solid #2b87c8;
}

.border-white {
    border: 5px solid #FFF;
}

.border-white-top {
    border-top: 5px solid #FFF;
}

.border-white-bottom {
    border-bottom: 5px solid #FFF;
}

.border-white-left {
    border-left: 5px solid #FFF;
}

.border-white-right {
    border-right: 5px solid #FFF;
}


/* Medium/Large Display Borders */
@media print, screen and (min-width: 40em) {
    .border-blue-medium {
        border: 5px solid #2b87c8;
    }

    .outline-blue-medium {
        outline: 5px solid #2b87c8;
    }

    .border-blue-medium-top {
        border-top: 5px solid #2b87c8;
    }

    .border-blue-medium-bottom {
        border-bottom: 5px solid #2b87c8;
    }

    .border-blue-medium-left {
        border-left: 5px solid #2b87c8;
    }

    .border-blue-medium-right {
        border-right: 5px solid #2b87c8;
    }

    .outer-rotate {
        writing-mode: vertical-rl;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
    }
    
    .rotate {
        transform: rotate(180deg);
        text-align: center;
        padding: 2.25rem 1rem;
    }
}

/* Patterns */

.stripes {
    background-image: linear-gradient(45deg, #2b87c8 10%, transparent 10%, transparent 50%, #2b87c8 50%, #2b87c8 60%, transparent 60%, transparent 100%);
    background-size: 35.36px 35.36px;
}

.polka-dots {
    background: #FFF;
    background-image:
      radial-gradient(#2b87c8 20%, transparent 0), 
      radial-gradient(#2b87c8 20%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

/* Small display only */
@media print, screen and (max-width: 40em){
    .stripes {
        height: 10vh;
    }

    .border-blue-bottom-small-only {
        border-bottom: 5px solid #2b87c8;
    }

	#feature-project {
		height: 300px;
	}

    .top-bar {
        padding: 0;
    }

    #footer-nav img {
        padding-bottom: 1.5rem;
    }
}