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

html, html * {
	padding: 0;
	margin: 0;
}

body {
	margin-left: auto;
	margin-right: auto;
	background-color: var(--main);
}

/******************************************************************************|
|********************************************************************** MASTER |
|**************************************************************** COLOR PALLET |
|******************************************************************************/

:root {
	--main: #442d65; /*Dark Purple*/
	--body: #fae4c3; /*Cream*/
	--accent1: #f98a5f; /*Orange*/	
	--accent180: #f8a079; /*Orange80Tint*/
	--accent2: #91c5a9; /*Green*/
	--accent3: #d6cde5;/*Light Purple*/
	--accent350: #af9fc8;/*Light Purple50Tint*/
	--bodycopy: #584d4d;/*Dark Grey*/
}

/******************************************************************************|
|********************************************************************** MASTER |
|*********************************************************************** FONTS |
|******************************************************************************/

@font-face {
    font-family: 'serif-copy';
    src: url('./Fonts/ameri-webfont.eot');
    src: url('./Fonts/ameri-webfont.eot?#iefix') format('embedded-opentype'),
         url('./Fonts/ameri-webfont.woff2') format('woff2'),
         url('./Fonts/ameri-webfont.woff') format('woff'),
         url('./Fonts/ameri-webfont.ttf') format('truetype'),
         url('./Fonts/ameri-webfont.svg#americanaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'serif-copy-bold';
    src: url('./Fonts/ameriextbol-webfont.eot');
    src: url('./Fonts/ameriextbol-webfont.eot?#iefix') format('embedded-opentype'),
         url('./Fonts/ameriextbol-webfont.woff2') format('woff2'),
         url('./Fonts/ameriextbol-webfont.woff') format('woff'),
         url('./Fonts/ameriextbol-webfont.ttf') format('truetype'),
         url('./Fonts/ameriextbol-webfont.svg#americanaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sans-serif-copy';
    src: url('./Fonts/HelveticaNeue-Light.eot');
    src: url('./Fonts/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'),
        url('./Fonts/HelveticaNeue-Light.woff2') format('woff2'),
        url('./Fonts/HelveticaNeue-Light.woff') format('woff'),
        url('./Fonts/HelveticaNeue-Light.ttf') format('truetype'),
        url('./Fonts/HelveticaNeue-Light.svg#HelveticaNeue-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'sans-serif-copy-bold';
    src: url('./Fonts/HelveticaNeue-Bold-webfont.eot');
    src: url('./Fonts/HelveticaNeue-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('./Fonts/HelveticaNeue-Bold-webfont.woff2') format('woff2'),
         url('./Fonts/HelveticaNeue-Bold-webfont.woff') format('woff'),
         url('./Fonts/HelveticaNeue-Bold-webfont.ttf') format('truetype'),
         url('./Fonts/HelveticaNeue-Bold-webfont.svg#HelveticaNeue-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'sans-serif-copy-heavy';
    src: url('./Fonts/HelveticaNeue-Heavy.eot');
    src: url('./Fonts/HelveticaNeue-Heavy.eot?#iefix') format('embedded-opentype'),
        url('./Fonts/HelveticaNeue-Heavy.woff2') format('woff2'),
        url('./Fonts/HelveticaNeue-Heavy.woff') format('woff'),
        url('./Fonts/HelveticaNeue-Heavy.ttf') format('truetype'),
        url('./Fonts/HelveticaNeue-Heavy.svg#HelveticaNeue-Heavy') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/******************************************************************************|
|********************************************************************** MASTER |
|************************************************************** ROWS & COLUMNS |
|******************************************************************************/

.row:before, .row:after {
	content: "";
	display: table;
}

.row:after {
	clear: both;
}

.col {
	width: 100%;
}

.vertical-center-left {
	margin: 0;
	position: relative;
	float:left;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.vertical-center-right {
	margin: 0;
	position: relative;
	float: right;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/******************************************************************************|
|********************************************************************** MASTER |
|************************************************************************ COPY |
|******************************************************************************/

p {
	font-family: Georgia, 'TimesNewRoman', serif;
	text-align: justify;
	line-height: 1.4;
	margin: auto;
}

.alignleft {
    text-align: left;
}

.italic {
    font-style: italic;
}

.bodycopy {
    color: var(--bodycopy);
}    

.white {
    color: white;
}

h1 {
	font-family: 'serif-copy', 'Times New Roman', serif;
	font-weight: Normal;
}

h2 {
	font-family: 'sans-serif-copy', 'Arial', Sans-Serif;
	font-weight: Normal;
	line-height: 1.1;
}

h2-bold {
	font-family: 'sans-serif-copy-bold', 'Arial', Sans-Serif;
	font-weight: bold;
}

ul {
	list-style-type: disc;
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

bullet::before {
	font-family: inherit;
    font-size: inherit;
	color: var(--accent1);
	content:" • ";
    white-space: pre-wrap;
}

a {
	font-family: inherit;
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--accent1);
}


/******************************************************************************|
|********************************************************************** MASTER |
|********************************************************************* CONTENT |
|******************************************************************************/

video::-webkit-media-controls-panel {
    background-image: -webkit-linear-gradient(transparent, transparent) !important;
}

img, object, video {
	display: block;
	margin: auto;
}

.content img, object {
	width: 100%;
}

.content95 img, object {
	width: 95%;
}

.content85 img, object {
	width: 85%;
}

.content65 img, object {
	width: 65%;
}

.content58 img, object {
	width: 58%;
}

.content40 img, object {
	width: 40%;
}

/******************************************************************************|
|********************************************************************** MASTER |
|*********************************************************************** FILLS |
|******************************************************************************/

.fill-white {
	background-color: white;
}

.fill-black {
	background-color: black;
}

.fill-main {
	background-color: var(--main);
}

.fill-accent2 {
	background-color: var(--accent2);
}

.fill-body {
	background-color: var(--body);
}

/******************************************************************************|
|********************************************************************** MASTER |
|********************************************************************* PADDING |
|******************************************************************************/

.padding3 {
    padding: 3%;
}

.padding3top {
    padding: 3% 0 0 0;
}

.padding3bottom {
    padding: 0 0 3% 0;
}

.padding3topbottom {
    padding: 3% 0;
}

.margin3bottom {
    margin: 0 0 3% 0;
}

/******************************************************************************|
|********************************************************************** MASTER |
|************************************************************* HEADER & FOOTER |
|******************************************************************************/

#header-footer {
	padding: 2%;
	font-family: 'serif-copy', 'Times New Roman', serif;
	color: var(--accent2);
	background-color: var(--main);
}

#logo {
	float: left;
	margin: 0 1% 0 0;
	width: 100px;
	height: 100px;
	background-image: url('images/NewYinYang.png');
    background-size: 95px 95px;
}

#contact {
	float: left;
	height: 100px;
	text-align: left;
}

#navigation {
	float: right;
	height: 100px;
	text-align: right;
}

/******************************************************************************|
|********************************************************************** MASTER |
|*********************************************************************** TITLE |
|******************************************************************************/

.title {
    padding: 3%;
    font-family: 'serif-copy', 'Times New Roman', serif;
    text-align: center;
}

/******************************************************************************|
|********************************************************************** MASTER |
|**************************************************************** COMPETENCIES |
|******************************************************************************/

#competencies {
    background-color: var(--body);
	color: var(--bodycopy);
	text-align: center;
	padding: 3%;
}

.bulletlist {
	display: inline-block;
	margin: auto;
}

/******************************************************************************|
|********************************************************************** MASTER |
|******************************************************************** ABOUT-ME |
|******************************************************************************/

#about-me {
	background-color: var(--accent2);
	color: var(--main);
}

/******************************************************************************|
|********************************************************************** MASTER |
|********************************************************************** RESUME |
|******************************************************************************/

#resume {
	background-color: var(--body);
	color: var(--bodycopy);
}

#resume .hero {
	padding: 3%;
	background-color: black;
}

#resume .hero img {
	width: 80%;
}

#experience {
	display: inline-block;
	padding: 0 7%;
	margin: auto;
	line-height: 1.2;
	font-family: 'sans-serif-copy';
	text-align: left;
}

#experience company {
	font-family: 'serif-copy-bold';
}

#experience company.second {
	padding-left: 3%;
}

#experience dates {
	font-style: italic;
}

#experience summary {
	padding: 1% 4% 1% 1%;
	font-style: italic;
}

#experience summary.second {
    padding: 1% 4% 1% 4%;
}

#experience ul {
	padding: 0 4% 1% 4%;
}

#experience ul.second {
	padding: 0 4% 1% 7%;
}

#experience li {
	list-style-type: disc;
	padding: 1% 0 0 0;
}

#experience li.header {
	padding: 0;
}

/******************************************************************************|
|********************************************************************** MASTER |
|******************************************************************* PORTFOLIO |
|******************************************************************************/



#portfolio .sectionheader {
    font-family: 'sans-serif-copy-heavy', 'Arial', Sans-Serif;
    font-weight: Normal;
    color: var(--accent1);
    text-align: center;
    padding: 1.3% 0 .5% 0;
    background-color: var(--main);
}

#portfolio .subsectionheader {
    font-family: 'sans-serif-copy-bold', 'Arial', Sans-Serif;
    font-weight: bold;
    color: var(--body);
    text-align: center;
    padding: 1% 0 1% 0;
    background-color: var(--main);
}

#portfolio .title {
    color: var(--bodycopy);
    background-color: var(--body);
}

/******************************************************************************|
|******************************************************************************|
| iPHONE VIEW ******** iPHONE VIEW ********** iPHONE VIEW ******** iPHONE VIEW |
| iPHONE VIEW ******** iPHONE VIEW ********** iPHONE VIEW ******** iPHONE VIEW |
| iPHONE VIEW ******** iPHONE VIEW ********** iPHONE VIEW ******** iPHONE VIEW |
| iPHONE VIEW ******** iPHONE VIEW ********** iPHONE VIEW ******** iPHONE VIEW |
| iPHONE VIEW ******** iPHONE VIEW ********** iPHONE VIEW ******** iPHONE VIEW |
|******************************************************************************|
/******************************************************************************/

/******************************************************************************|
|***************************************************************** iPHONE VIEW |
|************************************************************************ COPY |
|******************************************************************************/

p {
	font-size: 14px;
}

h1 {
	font-size: 24px;
}

h2, h2-bold {
	font-size: 14px;
}

/******************************************************************************|
|***************************************************************** iPHONE VIEW |
|********************************************************************* CONTENT |
|******************************************************************************/

video.col-one-third-resize {
    width: 30%;
    padding-bottom: 3%;
}

img.col-one-third-resize {
    width: 43%;
    padding-bottom: 3%;
}

/******************************************************************************|
|***************************************************************** iPHONE VIEW |
|********************************************************************* BORDERS |
|******************************************************************************/

.border-bottom {
	border-bottom: 6px var(--accent1) solid;
}

.border-top {
	border-top: 6px var(--accent1) solid;
}

/******************************************************************************|
|***************************************************************** iPHONE VIEW |
|************************************************************* HEADER & FOOTER |
|******************************************************************************/

#header-footer li {
    font-size: 14px;
}

#contact li {
	padding: 1% 0;
}

#contact bullet::before {
content:"";
}  

#navigation li {
	padding: 5% 0;
}

/******************************************************************************|
|***************************************************************** iPHONE VIEW |
|*********************************************************************** TITLE |
|******************************************************************************/



/******************************************************************************|
|***************************************************************** iPHONE VIEW |
|**************************************************************** COMPETENCIES |
|******************************************************************************/

#competencies img {
    width: 50%;
}

/******************************************************************************|
|***************************************************************** iPHONE VIEW |
|******************************************************************** ABOUT ME |
|******************************************************************************/

#about-me .bio {
		padding: 4%;
	}
	
#about-me img {
	width: 30%;
    border: 4px var(--accent1) solid;
}

/******************************************************************************|
|***************************************************************** iPHONE VIEW |
|********************************************************************** RESUME |
|******************************************************************************/

#resume img {
	width: 375px;
}

.resume {
    width: 350px;
}

.experience company {
	font-size: 14px;
}

.experience dates {
	font-size: 10px;
}

.experience summary {
	font-size: 11px;
}

.experience li {
    font-size: 11px;
}

/******************************************************************************|
|***************************************************************** iPHONE VIEW |
|******************************************************************* PORTFOLIO |
|******************************************************************************/

#portfolio .sectionheader {
    font-size: 18px;
}

#portfolio .subsectionheader{
    font-size: 15px;
}

#portfolio .socialcontent img, object {
	width: 100%;
}

#portfolio .title{
    border-top: 6px var(--accent1) solid;
    border-bottom: 6px var(--accent1) solid;
}

/******************************************************************************|
|******************************************************************************|
| TABLET VIEW ******** TABLET VIEW ********** TABLET VIEW ******** TABLET VIEW |
| TABLET VIEW ******** TABLET VIEW ********** TABLET VIEW ******** TABLET VIEW |
| TABLET VIEW ******** TABLET VIEW ********** TABLET VIEW ******** TABLET VIEW |
| TABLET VIEW ******** TABLET VIEW ********** TABLET VIEW ******** TABLET VIEW |
| TABLET VIEW ******** TABLET VIEW ********** TABLET VIEW ******** TABLET VIEW |
|******************************************************************************|
/******************************************************************************/

@media (min-width: 768px) {
	
/******************************************************************************|
|***************************************************************** TABLET VIEW |
|************************************************************** ROWS & COLUMNS |
|******************************************************************************/

.col {
    float: left;
}

.col-one-half {
	float: left;
	position: relative;
	width: 50%;
}

.col-one-third {
	float: left;
	position: relative;
	width: 33.3%;
}

.col-two-third {
	float: left;
	position: relative;
	width: 66.6%;
}

/******************************************************************************|
|***************************************************************** TABLET VIEW |
|************************************************************************ COPY |
|******************************************************************************/

p {
	font-size: 16px;
}

h1 {
	font-size: 30px;
}

h2, h2-bold {
	font-size: 17px;
}

/******************************************************************************|
|***************************************************************** TABLET VIEW |
|********************************************************************* BORDERS |
|******************************************************************************/
	
.border-bottom {
    border-bottom: 8px var(--accent1) solid;
}

.border-top {
    border-top: 8px var(--accent1) solid;
}

/******************************************************************************|
|***************************************************************** TABLET VIEW |
|********************************************************************* CONTENT |
|******************************************************************************/
	
video.col-one-third-resize {
    width: 68%;
    padding: 0;
}

img.col-one-third-resize {
    width: 72%;
}
	
/******************************************************************************|
|***************************************************************** TABLET VIEW |
|*********************************************************************** TITLE |
|******************************************************************************/



/******************************************************************************|
|***************************************************************** TABLET VIEW |
|************************************************************* HEADER & FOOTER |
|******************************************************************************/
	
#header-footer li {
    display: inline-block;
	font-size: 14px;
}

#contact li {
	padding: 0;
}

#contact bullet::before {
    content:"• ";
}   

#navigation li {
	padding: 0 0 0 .75em;
}

/******************************************************************************|
|***************************************************************** TABLET VIEW |
|**************************************************************** COMPETENCIES |
|******************************************************************************/

 #competencies img {
    width: 30%;
}   

/******************************************************************************|
|***************************************************************** TABLET VIEW |
|******************************************************************** ABOUT ME |
|******************************************************************************/

#about-me .container {
     padding: 0 11% 3% 0;
}

#about-me .image {
    padding: 0 8% 0 0;
}

#about-me .bio {
    padding: 0;
}

#about-me img {
    float: right;
    width: 60%;
    border: 5px var(--accent1) solid;
}


	
/******************************************************************************|
|***************************************************************** TABLET VIEW |
|********************************************************************** RESUME |
|******************************************************************************/

#experience company {
	font-size: 22px;
}

#experience dates {
	font-size: 16px;
}

#experience summary {
	font-size: 18px;
}

#experience li {
	font-size: 18px;
}

/******************************************************************************|
|***************************************************************** TABLET VIEW |
|******************************************************************* PORTFOLIO |
|******************************************************************************/

#portfolio .socialcontent img, object {
	width: 100%;
}

#portfolio .sectionheader {
    font-size: 24px;
}

#portfolio .subsectionheader{
    font-size: 18px;
}

#portfolio .title{
    border-top: 8px var(--accent1) solid;
    border-bottom: 8px var(--accent1) solid;
}
}

/******************************************************************************|
|******************************************************************************|
| DESKTOP VIEW ******* DESKTOP VIEW ******** DESKTOP VIEW ******* DESKTOP VIEW |
| DESKTOP VIEW ******* DESKTOP VIEW ******** DESKTOP VIEW ******* DESKTOP VIEW |
| DESKTOP VIEW ******* DESKTOP VIEW ******** DESKTOP VIEW ******* DESKTOP VIEW |
| DESKTOP VIEW ******* DESKTOP VIEW ******** DESKTOP VIEW ******* DESKTOP VIEW |
| DESKTOP VIEW ******* DESKTOP VIEW ******** DESKTOP VIEW ******* DESKTOP VIEW |
|******************************************************************************|
|******************************************************************************/

@media (min-width: 1024px){
	
/******************************************************************************|
|**************************************************************** DESKTOP VIEW |
|************************************************************** ROWS & COLUMNS |
|******************************************************************************/



/******************************************************************************|
|**************************************************************** DESKTOP VIEW |
|************************************************************************ COPY |
|******************************************************************************/

p {
	font-size: 16px;
	line-height: 1.25;
}

h1 {
    font-size: 32px;
}

h2, h2-bold {
	font-size: 18px;
}

/******************************************************************************|
|**************************************************************** DESKTOP VIEW |
|*********************************************************************** TITLE |
|******************************************************************************/



/******************************************************************************|
|**************************************************************** DESKTOP VIEW |
|********************************************************************** HEADER |
|******************************************************************************/
	
#header-footer li {
    font-size: 15px;
}

/******************************************************************************|
|**************************************************************** DESKTOP VIEW |
|**************************************************************** COMPETENCIES |
|******************************************************************************/

#competencies img {
    width: 30%;
}

/******************************************************************************|
|**************************************************************** DESKTOP VIEW |
|******************************************************************** ABOUT ME |
|******************************************************************************/



/******************************************************************************|
|**************************************************************** DESKTOP VIEW |
|******************************************************************* PORTFOLIO |
|******************************************************************************/

#portfolio .sectionheader {
    font-size: 30px;
}

#portfolio .subsectionheader {
    font-size: 20px;
}

}

/******************************************************************************|
|******************************************************************************|
| DEFAULT VIEW ******* DEFAULT VIEW ******** DEFAULT VIEW ******* DEFAULT VIEW |
| DEFAULT VIEW ******* DEFAULT VIEW ******** DEFAULT VIEW ******* DEFAULT VIEW |
| DEFAULT VIEW ******* DEFAULT VIEW ******** DEFAULT VIEW ******* DEFAULT VIEW |
| DEFAULT VIEW ******* DEFAULT VIEW ******** DEFAULT VIEW ******* DEFAULT VIEW |
| DEFAULT VIEW ******* DEFAULT VIEW ******** DEFAULT VIEW ******* DEFAULT VIEW |
|******************************************************************************|
|******************************************************************************/

@media (min-width : 414px ){
    
body {
	max-width: 1024px;
}
}