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


:root {
    /*--blue: hsl(210 50% 50% / 1);
    --bluehover: hsl(210 90% 60% / 1);*/
    --blue: hsl(190 60% 35% / 1);
    --bluehover: hsl(190 60% 45% / 1);


    --darkgrey: hsl(180 10% 20% / 1);
    --darkgreyhover: hsl(180 10% 30% / 1);
    --darkgreyclick: hsl(180 10% 10% / 1);
    --lightgrey: hsl(0 0% 95% / 1);
    --white: hsl(0deg 0% 100%);
    --red: hsl(5 70% 60% / 1);
    --redhover: hsl(5 70% 50% / 1);
    --shadowcolor: hsl(0deg 0% 0% / 70%);
}
/*resume blue: #2079c7*/

html, body{
  height:100%;
}
body {
    color:var(--darkgrey);
    margin: 0px;
    position: relative;
}

@font-face {
    font-family: PoppinsRegular;
    src: url(fonts/Poppins-Regular.ttf);
}
@font-face {
    font-family: PoppinsItalic;
    src: url(fonts/Poppins-Italic.ttf);
}
@font-face {
    font-family: PoppinsBold;
    src: url(fonts/Poppins-Bold.ttf);
}
@font-face {
    font-family: PoppinsSemibold;
    src: url(fonts/Poppins-SemiBold.ttf);
}
@font-face {
    font-family: PoppinsLight;
    src: url(fonts/Poppins-Light.ttf);
}
@font-face {
    font-family: PoppinsThin;
    src: url(fonts/Poppins-Thin.ttf);
}

* {
    box-sizing: border-box;
	font-family: PoppinsRegular;
}

*:focus{
    outline: none;
}

img {
    max-width: 100%;
    vertical-align: middle;
}
video {
    max-width: 100%;
}

h1,h2, .portfolioItem h3 {
/*    color: var(--red);*/
    font-family: PoppinsBold;
}
h3 {
    font-family: PoppinsBold;
}
p, li {
    font-size: 18px;
}
blockquote {
    font-size: 18px;
    background-color: var(--lightgrey);
    padding: 10px 20px;
    border-left: 5px solid var(--blue);
}


::placeholder {
    color: hsl(0, 0%, 70%);
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

button {
    border: none;
    display: inherit;
}

button, .button {
/*    border: 1px solid #3095B4;*/
/*    display: inline-block;*/
    border-radius: 50px;
    padding: 10px 20px;
    margin-bottom: 10px;
/*    background-color: var(--darkgrey);*/
    background-color: var(--blue);
    /*width: 180px;*/
    width: auto;
    text-align: center;
    color: white !important;
    text-decoration: none;
    position: relative;
    font-size: 16px !important;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
button:hover, .button:hover {
    cursor: pointer;
/*    background-color: var(--darkgreyhover);*/
    background-color: var(--bluehover);
    text-decoration: none;
}
button:active, .button:active {
    background-color: var(--darkgreyclick);
}
/*button.disabled {
    opacity: 0.5;
}*/


.secondaryButton {
    border: 2px solid var(--blue);
    background-color: white;
    color: var(--blue) !important;
}
.secondaryButton:hover {
    border: 2px solid var(--bluehover);
/*    background-color: hsl(210deg 50% 50% / 10%);*/
/*    background-color: white;*/
    background-color: var(--bluehover);
    color: var(--white) !important;
/*    color: var(--bluehover) !important;*/
}


a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    color: var(--blue);
    text-decoration: underline;
}
strong {
    font-family: PoppinsBold;
}

ul.anchorLinkMenuUL {
    margin-bottom: 40px;
}
a.anchorLinkMenu {
    display: block;
    clear: both;
}




#headerArea {
/*    background-color:var(--darkgrey);*/
/*    background-color:var(--lightgrey);*/
    background-color:var(--blue);    
    height: 100px;
/*    border-bottom: 3px solid var(--blue);*/
}
.mainBody {
/*    padding: 0px 20px 20px 20px;*/
    background-color: white;
/*    float: left;*/
/*    height:calc(100% - 150px);*/
    width: 100%;
}
.logoText {
/*    color: var(--darkgrey);*/
/*    padding-left: 20px;*/
    margin: 0;

    font-size: 44px;
    padding-top: 18px;

    /*font-size: 56px;
    padding-top: 5px;*/
    float: left;
    width: 63%;
/*    border-bottom: 1px solid;*/
}
.logoText .name {
    font-family: PoppinsSemibold;
    letter-spacing: -2px;
    color: var(--white);
/*    color: var(--blue);*/
    text-decoration: none;
}
.logoText .headerPortfolio {
    opacity: 0.7;
    font-family: PoppinsThin;
    display: block;
    float: right;
    margin-right: 20px;
    font-size: 46px;
    margin-top: 10px;
}

.topMenuWrapper {
/*    width: calc(100% - 250px);*/
    float: left;
    width: calc(37% - 30px);
    margin-left: 30px;
    height: 90px;
/*    border-bottom:1px solid;*/
    padding-top:47px;
/*    margin-left: 250px;*/
    z-index: 5;
}
.topMenu {
/*    float: right;*/
/*    width: calc(37% - 30px);*/
}

.menuItem {
    float: left;
    margin-right: 50px;
    font-size: 18px;
    color: var(--white);
}
.menuItem:hover {
    color: var(--white);
}
.hamburgerMenuButton {
    display: none;
}
.menuOverlayBlocker {
    display: none;
/*    background-color:hsl(0deg 0% 0% / 50%);*/
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4;
}



@keyframes accordionOpen {
  from {
        max-height:0px;
    }
  to {
        max-height:1700px;
    }
}
@keyframes accordionClose {
  from {
        max-height:1700px;
    }
  to {
        max-height:0px;
    }
}
.accordionButton {
    color: var(--blue);
    padding-top: 20px;
    display: block;
    clear: both;
    float: left;
}
.accordionButton:hover {
    color: var(--bluehover);
    cursor: pointer;
}
.accordionButton.hidden {
    display: none;
}
.accordionButton:after {
    display: block;
    left: 10px;
    top: 2px;
    width: 10px;
    height: 10px;
    border: solid var(--blue);
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: '';
    float: right;
    position: relative;
}
.accordionButton:hover:after {
    border: solid var(--bluehover);
    border-width: 0 4px 4px 0;
}
.accordionButton.open:after {
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
    top:9px;
}

/*.accordionButton.showMore.active.open {
    opacity: 0;
    margin-bottom: -44px;
}*/
.panel {
    max-height: 0;
    overflow: hidden;
/*    transition: max-height 0.2s ease-out;*/
    animation-name: accordionClose;
    animation-duration: 0.5s;
    float: left;
}
.panel.visible {
    max-height: 2300px; /* CHANGE THIS IF I ADD/REMOVE PROJECTS */
/*    overflow: visible;*/
    animation-name: accordionOpen;
    animation-duration: 0.5s;
}


.breadcrumb {
/*    color: var(--blue);*/
    color: var(--darkgrey);
    text-decoration: none;
    font-size: 20px;
    /*max-width: 1200px;
    padding-left: 20px;*/
    max-width: 800px;
    display: block;
    margin: 20px auto 40px auto;
}
/*.breadcrumb a {
    text-decoration: none;
    color: var(--darkgrey);
}*/
.breadcrumb .icon {
    font-size: 34px;
    position: relative;
    top: 6px;
}
.breadcrumbDivider {
    margin-left: 10px;
    margin-right: 10px;
}


.footer {
    background-color: var(--darkgrey);
    color: var(--white);
    width: 100%;
    padding: 20px 0px;
    text-align: center;
    height: 110px;
    clear: both;
    line-height: 2;
}


.contactInfoSection {
    margin-top: 40px;
    height: 60px;
}
.contactIcon {
    width: 44px;
    height: 44px;
    float: left;
    margin-right: 20px;
}
.contactText {
    float: left;
    margin-top: -5px;
}

.socialIcons {
/*    float: left;*/
    margin: auto 20px;
}
.socialIcons a {
    /*width: 44px;
    height: 44px;*/
    margin: auto 10px;
}
.socialIcon {
    width: 44px;
    height: 44px;
}
.socialIcon:hover {
    /*width: 48px;
    height: 48px;*/ 
    opacity: 0.9;
}
.copyright,
.email {
    clear: both;
    margin-top: 20px;
}

.label {
    opacity: 0.7;
    margin: 0px 0px 0px 0px;
    font-size: 16px;
}
.value {
    margin-top: 0px;
    font-size: 21px;
/*    color: var(--blue);*/
}


.backToHomeFooter {
    margin-top: 50px;
    display: block;
}

.profilePhoto {
    /*width: 310px;
    height: 310px;
    border-radius: 310px;*/
    width: 200px;
    height: 200px;
    border-radius: 200px;
    float: left;
    margin-bottom: 30px;
}


.aboutMePhoto {
    display: block;
    /*width: 200px;
    height: 200px;*/
/*    border-radius: 200px;*/

    float: left;
/*    width: calc(34% - 40px);*/
    width: 340px;
    margin-left: 40px;
    margin-bottom: 50px;
}





.aboutMeIntro {
    font-size: 48px;
/*    max-width: 1000px;*/
/*    float: left;*/
    margin-top: 0;
    line-height: 1.2;
    margin-bottom: 0px;
}
.aboutMeSection {
    float: left;
    /*width: calc(100% - 230px);
    margin-left: 230px;*/
}


.introText {
    float: left;
    width: 63%;
}
.aboutMeText {
    float: left;
/*    width: 63%;*/
    width: calc(100% - 380px);
}

.aboutMePage {
/*    width: calc(100% - 230px);
    margin-left: 230px;*/
}

.aboutMeMoreInfo {
    font-size: 18px;
}

.topSkillsSection {
    width: calc(37% - 30px);
    margin-left: 30px;
    float: left;
    background-color: var(--lightgrey);
    padding: 10px 20px 0px 20px;
    border-radius: 10px;
}
.topSkillsSection h2 {
    margin-top: 0;
    margin-bottom: 0px;
}
.topSkillsSection ul {
    margin-top: 0;
    padding-left: 20px;
}



.sectionHeader2 {
    font-size: 36px;
    margin: 0;
}


.sectionHeader {
    /*font-size: 48px;
    font-family: 'PoppinsThin';*/
    font-size: 36px;
    font-family: 'PoppinsRegular';
/*    text-align: center;*/
/*    padding-left: 230px;*/
    border-bottom: 1px solid var(--darkgrey);
    line-height: 1;
/*    letter-spacing: -2px;*/
    margin-bottom: 0px;
    padding-bottom: 10px;
}

.introduction {
    float: left;
    margin-top: 50px;
    margin-bottom: 70px;
}

.maxWidthWrapper, .mainBody, .aboutMe, .contactPage, .breadcrumb, .portfolioContent {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.maxWidthWrapper, .mainBody, .contactPage, .breadcrumb {
    padding-left: 20px;
    padding-right: 20px;
}

.portfolioSection {
    clear: both;
    margin-top: 40px;
}
.projectIntro {
    font-size: 18px;
    clear: left;
}
.portfolioItem {
    float: left;
    border-bottom: 1px solid var(--darkgrey);
    padding: 50px 0px;
    padding: 50px 0px 50px 0px;
    width: 100%;
}
/*.aboutMePage .portfolioItem:last-child {
    border-bottom: none;
}*/
.portfolioItem:last-child {
    border-bottom: none;
}

.projectPageBanner {
    display: none;

    margin: auto;
    max-width: 1000px;
}
.projectPageCoverImage {
    /*width: 800px;
    margin: auto;
    display: block;*/

    max-width: 300px;
    margin: auto;
    display: block;
}



@keyframes zoomIn {
  from {
    border: 10px solid white;
    margin-bottom:0px;
    }
  to {
    border: 0px solid white;
    margin-bottom:8px;
    }
}
@keyframes zoomOut {
  from {
    border: 0px solid white;
    margin-bottom:8px;
    }
  to {
    border: 10px solid white;
    margin-bottom:0px;
    }
}

.coverImage {
    float: left;
    width: 63%;
    border: 10px solid white;

    animation-name: zoomOut;
    animation-duration: 0.2s;
}
.coverImage:hover {
    border: 0px solid white;
    margin-bottom: 8px;

    animation-name: zoomIn;
    animation-duration: 0.2s;
}

.coverImageButton {
/*    display: none;*/
    opacity: 0.2;
    /*background-color: var(--white);
    color: var(--darkgrey) !important;*/

    border: 2px solid var(--blue);
    background-color: white;
    color: var(--blue) !important;
    
    float: right;
/*    margin: auto;*/
    bottom: 55px;
    margin-bottom: -48px;
    margin-right: 10px;
    border: 2px solid white;

    padding: 0;
    width: 44px;
    height: 44px;
}
.coverImageButton span {
    font-size: 36px;
    position: relative;
    top: -6px;
    color: var(--blue);
}

.coverImage img {
/*    opacity: 0.8;*/
}

/*.coverImage::after {
    content: '';
    box-shadow: inset 0px 0px 4px 5px white;
}*/

.coverImage:hover img {
/*    opacity: 1;*/
    box-shadow: inset 0px 0px 4px 5px white;

}
.coverImage:hover .coverImageButton {
/*    display: block;*/
    opacity: 1;
    
/*    opacity: 0.8;*/
}
.coverImage:hover .coverImageButton:hover {
    background-color: var(--white);
/*    margin-bottom: -48px;*/
/*    bottom: 70px;*/
/*    opacity: 1;*/
}
.coverImage a {
    text-decoration: none;
}



.projectInfo {
    float: left;
    width: calc(37% - 40px);
/*    width: calc(50% - 40px);*/
/*    margin-right: 40px;*/
    margin-top: 10px;
    margin-left: 40px;
}

.projectTitle {
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 1.1;
    font-family: PoppinsBold;
}
.portfolioContent .projectTitle {
    margin-top: 20px;
}
.projectSubhead {
    margin-bottom: 20px;
    font-size: 21px;
    opacity: 0.7;
}
.projectShortDescription {
    margin-top: 0px;
    font-size: 18px;
    margin-bottom: 30px;
}

.portfolioContent .projectShortDescription {
    opacity: 0.8;
    font-size: 21px;
}


.portfolioPopup {
    background-color: white;
    width: 80%;
    max-width: 1200px;
    box-shadow: 0px 5px 10px 0px var(--darkgrey);
    margin: 150px auto 100px auto;
    padding: 20px 70px;
    border-radius: 20px;
    position: relative;
}

.section {
    /*background-color: hsl(0 0% 95% / 1);
    padding: 20px;*/
    margin-bottom: 70px;
    border-top: 1px solid hsl(0 0% 60% / 1);
    padding-top: 30px;
    clear: both;
}
.portfolioContent h1 {
    margin-top: 40px;
/*    margin-bottom: 0px;*/
    line-height: 1.2;
}
.portfolioContent h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    color: var(--darkgrey);
}
.portfolioContent h2 + p {
    margin-top: 0px;
}
.portfolioContent h3 {
/*    margin-bottom: 0px;*/
}
.portfolioContent h3 + p {
    margin-top: 0px;
}
.portfolioImage {
    border: 1px solid var(--lightgrey);
    margin: auto auto 50px auto;
    display: block;
}
.imagePopup {
    position: fixed;
    top: 50px;
    left: 10%;
    width: 80%;
    background: black;
}
.imageOverlay {
    display: none;
    background:hsl(0deg 0% 0% / 50%);
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.imageOverlay img {
    width: 80%;
/*    left:10%;*/
    border: none;
    top: 100px;
    position: relative;
}

.mobileImage {
    max-width: 400px;
}

.worreaseImage {
    width: calc(50% - 10px);
    margin-right: 10px;
    margin-bottom: 50px;
    float: left;
}
.simportImage {
    width:50%;
    float: left;
}


.popupOverlay {
    display: none;
    position: fixed;
    background-color: var(--shadowcolor);
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
}
.closeButton {
    background-color: var(--red);
    width: 44px;
    height: 44px;
    border-radius: 100%;
    color: var(--white);
    padding: 10px;
    /*float: right;
    position: relative;
    right: -50px;*/
    position: absolute;
    right: 20px;
    top: 20px;
}
.closeButton:after{
    display: inline-block;
    content: "\00d7"; /* This will render the 'X' */
    font-size: 36px;
    position: relative;
    top: -14px;
    left: 0px;
}
.closeButton:hover {
    background-color: var(--redhover);
}
.openProjectButtons {
    margin-top: 40px;
    margin-bottom: 50px;
}
.openProjectButtons h3 {
    float: left;
    margin-top: 0;
    margin-right: 19px;
}
.projectCallouts {
    clear: both;
    margin-bottom: 20px;
    float: left;
}
.calloutBox {
/*    float: right;*/
/*    clear: both;*/
    background-color: var(--lightgrey);
    padding: 20px 30px;
    border-radius: 10px;
    margin: 0px 50px 20px 00px;
    float: left;
}
.calloutBox h3 {
    margin: 0;
}
.calloutBox ul {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 20px;
}


.skillsSection h2 {
    margin-bottom: 0px;
}
.skillsSection ul {
    margin-top: 0px;
}

.pastWork {
    margin-top: 50px;
}
.pastWork a {
    margin-left: 10px;
}
.highlight {
/*    color: var(--red);*/
/*    font-family: PoppinsBold;*/
}



.imageDesktopWRA {
    /*width: calc(70% - 20px);
    float: left;
    margin-right: 20px;*/
/*    box-shadow: 0px 0px 7px 0px var(--shadowcolor);*/
    border: 1px solid var(--lightgrey);
}
.imageMobileWRA {
    width: 40%;
/*    float: left;*/
/*    box-shadow: 0px 0px 7px 0px var(--shadowcolor);*/
    border: 1px solid var(--lightgrey);
}

.imageMobile2 {
    width: 50%;
    float: left;
    border: none;
    max-width: none;
}


.scrollToTopButton {
    width: 44px;
    height: 44px;
    border-radius: 70px;
    padding: 3px 5px 5px 5px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 24px !important;
    border: 2px solid white;
}
.scrollToTopText {
    color: var(--blue);
    cursor: pointer;
}
.scrollToTopText:hover {
    color: var(--bluehover);
    text-decoration: underline;
}









/*MEDIA QUERIES*/
@media (max-width: 1160px) {
    iframe {
        width: 100%;
    }
}


@media (max-width: 1024px) {
   .portfolioPopup {
        margin: 20px auto 20px auto;
        width: calc(100% - 40px);
        padding: 20px 40px;
    }
    /*.aboutMeText {
        width: 100%;
    }
    .topSkillsSection {
        clear: both;
        width: 100%;
        margin-left: 0;
    }*/
    .coverImage {
        width: 100%;
    }
    .projectInfo {
        width: 100%;
        margin-left: 0px;
        margin-top: 20px;
    }
}



@media (max-width: 768px) {
    #headerArea {
        height: 70px;
    }
    .logoText {
        font-size: 36px;
        padding-top: 10px;
    }
    .logoText .headerPortfolio {
        clear: both;
        float: initial;
        margin-top: -20px;
        padding-left: 0px;
        font-size: 32px;
    }
    .hamburgerMenuButton {
        display: block;
        width: 44px;
        height: 44px;
        border-radius: 70px;
        padding: 0px;
        top: 15px;
        right: 0px;
        font-size: 35px !important;
        float: right;
        background: none;
/*        color: var(--blue) !important;*/
        line-height: 1.1;
    }
    .hamburgerMenuButton:hover {
        color: var(--white) !important;
    }
    .topMenu {
        display: none;
        position: absolute;
        background: white;
        box-shadow: 0px 2px 10px hsl(180 10% 60% / 1);
        padding: 20px 20px 5px 20px;
        border-radius: 10px;
        top: 65px;
        right: 0px;
        clear: both;
        width: 200px;
    }
    /*.topMenu.hidden {
        display: none !important;
    }*/
    .topMenu .menuItem {
        margin: 0px 0px 10px 0px;
        clear: both;
        display: block;
        float: initial;
        color: var(--blue);
    }
    .topMenuWrapper {
        height: 66px;
        padding-top: 0px;
        width: 44px;
        margin-left: 0;
        position: absolute;
        right: 20px;
    }
    .aboutMe {
        margin-top: 10px;
    }
    .aboutMePhoto {
        margin: auto auto 50px auto;
        float: initial;
    }
    .profilePhoto {
        margin: 0px auto 30px auto;
        display: block;
        float: initial;
        width: 200px;
        height: 200px;
    }
    .aboutMeSection {
        clear: both;
        width: 100%;
        margin-left: 0px;
    }
    .introText {
        width: 100%;
    }
    .aboutMeText {
        width: 100%;
    }
    .topSkillsSection {
        clear: both;
        width: 100%;
        margin-top: 20px;
        margin-left: 0;
    }
    .aboutMeIntro {
        font-size: 36px;
    }
    .aboutMeMoreInfo {
/*        font-size: 16px;*/
    }
    li {
/*        font-size: 16px;*/
    }
    .sectionHeader {
        padding-left: 0px;
    }
    .projectTitle {
        font-size: 32px;
    }
    .projectSubhead {

    }
    .projectShortDescription {
/*        font-size: 16px;*/
    }

    .intro {
        font-size: 16px;
    }
    
    .projectInfo {
        width: 100%;
        margin-bottom: 20px;
        margin-right: 0px;
    }
    .coverImage {
        width: 100%;
    }
    .simportImage {
        width: 100%;
    }
    .portfolioItem {
        padding-left: 0px;
    }
    /*.coverImage {
        width: 100%;
    }
    .projectInfo {
        width: 100%;
        margin-left: 0px;
        margin-top: 20px;
    }*/



}




@media(max-width: 600px){
    .openProjectButtons h3 {
        float: none;
        margin-right:0px;
    }
    .calloutBox {
        clear: both;
        float: initial;
        margin: 30px 0px 0px 0px;
    }
    .mobileImage {
        width: 100%;
        margin: auto auto 10px auto;
        display: block;
        float: initial;
    }
    .worreaseImage {

    }
    blockquote {
        margin: 0;
    }
    .value {
        font-size: 18px;
    }
}

@media(max-width: 440px){
    .viewProject {
        width: 100%;
        display: block;
    }
    .pastWork a {
/*        width: 100%;*/
        margin: 10px 0px 30px 0px;
    }
    .mobileImage {
        max-width: 100%;
    }
    /*.footer {
        height: 110px;
    }*/
}

@media(max-width: 370px){
    .aboutMeIntro {
        font-size: 26px;
    }
}


@media(max-width: 320px){
    .openProjectButtons .button {
        display: block;
        width: 100%;
    }
}