/************************* General *************************/
@import url("https://use.typekit.net/jfp6voy.css");

:root{
  --dark-blue: #24293D;
  --dark-blue-30: #3a3e50;
  --dark-blue-60: #1d2131;
  --medium-blue: #2F3855;
  --medium-blue-20: #979caa;
  --medium-blue-60: #262d44;
  --light-blue: #8EBBFF;
  --off-white: #F4F4FC;
  --white: #FFFFFF;
  --black: #000000;
}

html, body {margin: 0;height: auto;}
body{font-family: proxima-nova, sans-serif;font-style: normal;background-color: var(--dark-blue);}


/************************* Portfolio Page *************************/
.portfolio{height: auto;width: 100%;padding: 40px 0 16px 40px;margin-top: 60px;background-color: inherit;display: flex;justify-content:flex-start;align-items:flex-start;flex-direction: row;transition: .5s;}
.portfolio:after{content: "";display: table;clear: both;}

.portfolio_content{float: left;padding: 24px 0 0 0;}

/* Tabs */
.portfolio_content.tabs{max-width: 175px;position: fixed;}
.portfolio_content.tabs .button{background-color: inherit;color: var(--medium-blue-20);width: 100%;text-align: left;transition: .5s;}
.portfolio_content.tabs .button:hover{background-color: var(--dark-blue-60);}
.portfolio_content.tabs .button.active{border-left: 6px solid var(--light-blue);color: var(--light-blue);background-color: var(--dark-blue-30);padding: 15px 28px;}

/* Project Count */
.portfolio_content.project_names{position: fixed;background-color: inherit;margin-left: 180px;height: 100vh;width: 80px;display: flex;justify-content: flex-start;align-items:center;flex-direction: column;padding: 24px 0;}

.project_line{z-index: 1;width: 2px;height: 100%;background-color: var(--dark-blue-30);position: absolute;border-radius: 4px;}

.project_number{z-index: 2;height: 33.3%;width: 100%;display: flex;justify-content: center;}
.project_number a{color: var(--medium-blue-20);text-decoration: none;}
.project_number a:nth-child(1){margin-top: 8px;}

.websiteprojects .project_number{height: 33.3%;}
.uiuxprojects .project_number{height: 50%;}

/* Project Info */
.artworkprojects img, .digitalartprojects img, .otherprojects img{margin-top: 124px;}

.portfolio_content.indiv_project{margin-top: -100px;margin-left: 260px;height: 100vh;width: 90%;display: flex;justify-content: flex-start;align-items:flex-start;flex-direction: column;padding: 0 36px 0 0;}
.portfolio_content.indiv_project img{width: 100%;border-radius: 4px;}
.project_title{text-transform: capitalize;padding-top: 120px;font-weight: 600;color: var(--white);margin: 16px 0;}

#hexa, #weatherplanner, #robowrap{margin-top: 0;}


/************************* Responsive *************************/
@media only screen and (max-width: 1500px){
  .project_information{height: 80%;}
  .portfolio_content.tabs{max-width: 160px;}
  .portfolio_content.project_names{margin-left: 160px;}
  .portfolio_content.indiv_project{margin-left: 240px;}
}

@media only screen and (max-width: 1000px){
  .portfolio_works_col{width: 50%;}
}

@media only screen and (max-width: 800px){
  .portfolio{padding: 40px 0px 40px 0;flex-direction: column;transition: .5s;}
  .portfolio_content{float: left;}
  .portfolio_content.tabs{background-color: var(--dark-blue);display:inline-flex;justify-content:flex-start;align-items:flex-start;flex-direction: row;min-width: 99.9%;overflow-x: scroll;height: 80px;padding-left: 24px;padding-right: 24px;}
  .portfolio_content.tabs .button{font-size: 14px;min-width: 125px;text-align: center;padding: 15px 16px;}
  .portfolio_content.works{width: 100%;}
  .portfolio_works{padding: 4px 24px 4px 0px;margin: 0 56px;transition: .5s;}

  .portfolio_content.project_names{position: fixed;margin-left: 0;margin-top:80px;height: 80px;width: 100vw;display: flex;justify-content: center;align-items:center;flex-direction: row;padding: 8px 0 8px 24px;}
  .project_number{height: 100%;justify-content: flex-start;align-items:center;}
  .project_number a:nth-child(1){margin-top: 0px;}
  .websiteprojects .project_number{width: 33.3%;}
  .uiuxprojects .project_number{width: 50%;}

  .project_line{width: 100vw;height: 2px;position: absolute;border-radius: 4px;}
  .project_title{padding-top: 125px;font-weight: 600;margin-top: -40px;margin-bottom: 16px;}
  #weatherplanner{padding-top: 32px;}
  .artworkprojects img, .digitalartprojects img, .otherprojects img{margin-top: 16px;}

  .portfolio_projects_section{margin: 0;}
  .portfolio_content.indiv_project{margin-top:80px;margin-left: 24px;height: 100vh;width: calc(100vw - 24px);display: flex;justify-content: flex-start;align-items:flex-start;flex-direction: column;padding: 0 24px 0 0;}
  .portfolio_content.indiv_project img{padding-top: 24px;width: 100%;}
}

@media only screen and (max-width: 550px){
  .portfolio_works{margin: 0;transition: .5s;}
  .portfolio_content.tabs .button{font-size: 14px;}
  .artworkprojects img, .digitalartprojects img, .otherprojects img{margin-top: 0;}
}

@media only screen and (max-width: 450px){
  .portfolio_content.tabs .button{font-size: 16px;min-width: 135px;}
}

/************************* Phone *************************/
@media screen and (max-width: 414px) and (max-height: 896px){
  .portfolio_content.tabs .button{font-size: 14px;width: 100px;pointer-events: all;}
}