/************************* 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: 100%;}
body{font-family: proxima-nova, sans-serif;font-style: normal;background-color: var(--white);}


/************************* About Page *************************/
.about{width: 100vw;height:100vh;background-color: var(--medium-blue);display: flex;justify-content: center;align-items: center;flex-direction: column;transition: .5s;}
.content_date{padding: 8px 0 16px 0;transition: .5s;}
.diamond_list{width: 14px;}

/* Tabs */
.about_tabs{width: 100%;height: 56px;background-color: transparent;margin: 40px 0 24px;display: flex;justify-content: center;align-items: center;flex-direction: row;}
.about_tabs a:hover{background-color: var(--medium-blue);}
.about_tabs .active a{color: var(--light-blue);}
.about_tabs .active .progressbar_circle{border: 1px solid var(--light-blue);}

#skills{margin: 0 0 0 -32px;}
#education{margin: 0 0 0 -32px;}
#experience{margin: 0 0 0 -40px;}

/* Button */
.about_tabs .button{color: var(--medium-blue-20);border-radius: 0;width: 170px;padding: 14px 0;transition: .5s;}
.about_tabs .button.active{color: var(--white);border-bottom: 2px solid var(--white);}
.about_tabs .button:hover{color: var(--white);}
.about_tabs .button:focus{outline: none;}

/* Section */
.about .about_information{width: 80%;height: 70vh;background-color: var(--dark-blue);display: flex;justify-content: center;align-items: center;flex-direction: row;border-radius: 4px;box-shadow: 10px 10px 32px rgba(36, 41, 61, 0.8);transition: .5s;}
.about .about_information p{margin: 0 24px;line-height: 1.5;color: var(--off-white);transition: .5s;}
.about .about_information span{color: var(--light-blue);}
.about .about_information .heading4 span{color: var(--light-blue);}
.about .about_information .subheader{padding-top: 48px;color: var(--light-blue);transition: .5s;}
.about .about_information .content_description{margin: 16px 0 0 24px;display: flex;justify-content: flex-start;align-items: center;}
.about .about_information .content_description .desc{margin: 0 16px;}

/* Content */
.about_content{float: left;padding: 0;}
.about_content.tabs{max-width: 220px;transition: .5s;}
.about_content.tabs .button{background-color: inherit;color: var(--medium-blue-20);width: 200px;text-align: left;transition: .5s;}
.about_content.tabs .button:hover{background-color: var(--dark-blue-60);}
.about_content.tabs .button.active{border-left: 6px solid var(--light-blue);padding: 15px 28px;color: var(--light-blue);background-color: var(--dark-blue-30);}
.about_content.info{width: 90%;background-color: inherit;height: 400px;padding: 0;}


/************************* Introduction Tab *************************/
#intro_info{display: flex;transition: .5s;}
#intro_info .intro_image{width: 30%;height: 85%;background-color: var(--off-white);background-image: url("../images/intro_image.png");background-position: center;background-size: cover;border-radius: 4px;transition: .5s;}
#intro_info .intro_description{margin: 0 24px;width: 350px;line-height: 1.5;color: var(--off-white);transition: .5s;}
#intro_info .intro_content{display: flex;justify-content: center;align-items: flex-start;flex-direction: column;}

.icons_socials{margin:24px 0 40px 0;display: flex;justify-content: flex-start;align-items: center;flex-direction: row;}
.icons_socials a{text-decoration: none;margin-left: 24px;padding: 8px;background-color: var(--medium-blue);border-radius: 4px;}
.icons_socials a:focus{outline: 1px solid var(--light-blue);border-radius: 4px;}
.icons_socials i{color: var(--off-white);font-size: 40px;transition: .5s;}
.icons_socials i:hover{color: var(--medium-blue-20)}
.icons_socials:focus{outline: none;box-shadow: none;}


/************************* Education Tab *************************/
#education_info{display: none;padding: 40px 32px;justify-content: center;align-items: center;transition: .5s;}
#education_info .about_content{width: 100%;}
#education_info .about_content .heading4{color: var(--light-blue);font-weight: 600;}

.timeline{position: relative;max-width: 1200px;margin: 0 auto;}
.timeline::after{content: '';position: absolute;width: 6px;background-color: var(--dark-blue-30);top: 0;bottom: 0;left: 50%;margin-left: -3px;border-radius: 4px;}
.timeline_container{padding: 10px 40px;position: relative;background-color: inherit;width: 49.5%;transition: .5s;}
.timeline_container::after{content: '';position: absolute;width: 16px;height: 16px;right: -17px;background-color: var(--dark-blue);border: 4px solid var(--medium-blue-20);top: 15px;border-radius: 50%;z-index: 1;}
.timeline_container .content{padding: 8px 0 16px 0;background-color: var(--dark-blue-30);position: relative;border-radius: 6px;}

.left{left: 0;}
.right{left: 50%;}
.left::before{content: " ";height: 0;position: absolute;top: 16px;width: 0;z-index: 1;right: 30px;border: medium solid white;border-width: 10px 0 10px 10px;border-color: transparent transparent transparent var(--dark-blue-30);}
.right::before{content: " ";height: 0;position: absolute;top: 18px;width: 0;z-index: 1;left: 30px;border: medium solid white;border-width: 10px 10px 10px 0;border-color: transparent var(--dark-blue-30) transparent transparent;}
.right::after{left: -12px;}


/************************* Skills & Experience Tab *************************/
.skills_and_experience{display: flex; justify-content: center;align-items: center;width: 100%;}
.skills_and_experience_content{flex: 50%;}
.skills_and_experience_content:nth-child(2){display: flex;flex-direction: column;}

/* Skills */
#skills_info{display: none;}

.skill_bar{width: 100%;height: 4px;background-color: var(--dark-blue-30);margin-bottom: 56px;}
.skill_bar .html{width: 90%;height: 4px;background-color: var(--light-blue);}
.skill_bar .css{width: 85%;height: 4px;background-color: var(--light-blue);}
.skill_bar .js{width: 85%;height: 4px;background-color: var(--light-blue);}
.skill_bar .php{width: 80%;height: 4px;background-color: var(--light-blue);}
.php_bar{margin-bottom: 0px;}

.skills_card{width: 95%;height: 200px;margin: 0 24px;background-color: var(--medium-blue);text-align: center;position: relative;border-radius: 4px;}
.skills_card:hover{cursor: pointer;}
.skills_card:nth-child(2){margin-top: 24px;}
.skills_card p{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index:1;width: 75%;}
.skills_card:hover .skills_bkg{opacity: 0;border-radius: 4px;transition: .5s;}
.skills_card:hover p{display: none;}

.skills_bkg{width: 100%;height: 100%;background-color: var(--medium-blue);position: absolute;opacity: 0.95;border-radius: 4px;transition: .5s;}
.skills_image{width: 100%;height: 100%;background-position: 50% 20%;background-size: cover;box-shadow: 4px 4px 12px 0 rgba(29, 33, 49, 0.75);border-radius: 4px;}

/* Experience */
#experience_info{display: none;padding: 40px 32px;justify-content: center;align-items: center;flex-direction: row;transition: .5s;}
#experience_info p{margin: 0 0 8px 0;}
#experience_info .about_content{width: 100%;display: flex;}
.experience_info:after{content: "";display: table;clear: both;}

.experience_images{margin: 16px 0 0 24px;}
.experience_images img{border-radius: 4px;height: 30vh;}
.img1{background-image: url("../images/experience/kpmg/img1.jpg");}
.img2{background-image: url("../images/experience/ksl/img1.JPG");}

#kpmg_info, #ksl_info{display: none;padding: 32px;justify-content: center;align-items: flex-start;flex-direction: row;transition: .5s;}


/************************* Volunteer Tab *************************/
#volunteer_info{display: none;padding: 40px 32px;justify-content: center;align-items: flex-start;flex-direction: row;transition: .5s;}
#volunteer_info .button{width: 240px;}
#volunteer_info .about_content.tabs{max-width: 250px;transition: .5s;}

#mealsonwheels_info, #digitalwonderland_info{display: none;}
#mealsonwheels_info .mealsonwheels_collage, #digitalwonderland_info .digitalwonderland_collage{height:45vh;transition: .5s;}

#mealsonwheels_tab:focus, #digitalwonderland_tab:focus{outline: none;}

.close_tab{position: fixed;top:57vh;left:11vw;writing-mode: vertical-lr;color: var(--light-blue);font-size: 1em;transition: .5s;}
.close_tab:hover{color: var(--medium-blue-20);cursor: pointer;}


/************************* Responsive *************************/
@media only screen and (max-width: 1250px){
  .icons_socials a{margin-right: 4px;margin-left: 16px;}
  .icons_socials i{font-size: 24px;}
}

@media only screen and (max-width: 1000px){
  /* General */
  .about_tabs{height: 56px;}
  .about_tabs .button{width: 140px;transition: .5s;}

  /* Introduction Tab */
  #intro_info .intro_image{width: 40%;height: 85%;transition: .5s;}
  #intro_info .intro_description{margin: 0 0 0 24px;width: 300px;transition: .5s;}

  /* Education Tab */
  #education_info{padding: 40px 32px;justify-content: flex-start;align-items: flex-start;flex-direction: column;transition: .5s;}

  /* Skills & Experience Tab */
  .timeline_container{padding: 10px 40px;width: 55%;transition: .5s;}
  .left{left: -38px;}
  .left::after{right: -18.5px;}

  /* Volunteer Tab */
  .about_content.info{width: 100%;padding: 0;}

  #digitalwonderland_info .digitalwonderland_collage, #mealsonwheels_info .mealsonwheels_collage{height:250px;}
  .experience_images{display: none;}
}

@media only screen and (max-width: 800px){
  /* General */
  .about{padding: 0 24px;transition: .5s;}
  .about .about_information{width: 100%;transition: .5s;}
  .about .about_information .subheader{padding-top: 24px;transition: .5s;}

  .about_content.tabs{max-width: none;display: flex;flex-direction: row;margin: -8px 0 16px 0;transition: .5s;}
  .about_content.tabs .button{width: 190px;text-align: center;transition: .5s;}

  .diamond_list{margin-right: 8px;}
  .content_date{padding: 8px 0;font-size: 14px;transition: .5s;}

  /* Introduction Tab */
  #intro_info{display: flex;justify-content: flex-start;transition: .5s;}
  #intro_info .intro_image{width: 50%;height: 100%;transition: .5s;}
  #intro_info .intro_description{margin: 0 0 0 24px;width: 300px;transition: .5s;}

  .icons_socials{margin:0;display: flex;justify-content: center;align-items: center;flex-direction: row;width: 100%;}
  .icons_socials a{margin-right: 0;}
  .icons_socials a:nth-child(1){margin-left: 0;}
  .icons_socials i{font-size: 24px;transition: .5s;}

  /* Education Tab */
  #education_info{display: flex;justify-content: center;align-items: flex-start;transition: .5s;}

  /* Skills & Experience Tab */
  #experience_info{display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;transition: .5s;}
  #experience_info p{margin: 0;}
  #experience_info .content_description{margin: 16px 0 0 0;}
  .skills_and_experience{flex-direction: column;}
  .skills_and_experience_content{flex: 100%; width: 100%;}
  .skills_and_experience_content:nth-child(2){display: flex;flex-direction: row;}

  .skills_card{width: 100%;height: 185px;margin: 0;}
  .skills_card:nth-child(2){margin: 0 0 0 16px;}
  .skill_bar{margin-bottom: 24px;}

  .timeline::after{left: 31px;}
  .timeline_container{width: 100%;padding-left: 70px;padding-right: 25px;}
  .timeline_container::before{left: 60px;border: medium solid var(--dark-blue-30);border-width: 10px 10px 10px 0;border-color: transparent var(--dark-blue-30) transparent transparent;}
  .left::after, .right::after{left: 18px;}
  .left, .right{left: 0%;}

  .close_tab{left:3vw;transition: .5s;}

  /* Volunteer Tab */
  #volunteer_info{padding: 32px;justify-content: flex-start;flex-direction: column;transition: .5s;}
  #volunteer_info .about_content.tabs{max-width: 100%;margin-top: 0;transition: .5s;}
  #volunteer_info p, #volunteer_info .content_description{margin-left: 0;}
}

@media only screen and (max-width: 550px){
  /* General */
  .about_content.tabs .button{width: 170px;text-align: center;transition: .5s;}

  /* Introduction Tab */
  #intro_info{display: flex;justify-content: center;flex-direction: column;transition: .5s;}
  #intro_info .intro_image{margin-top: 0vw;width: 80vw;height: 40vw;transition: .5s;}
  #intro_info .intro_description{padding: 6vw;margin: 0;text-align: center;width: 100%;transition: .5s;} 
}

@media only screen and (max-width: 450px){
   /* General */
  .about_content.tabs .button{width: 120px;}
  .about_content.tabs{margin: 8px 0 24px 0;}

  #education_info #experience_info{padding: 24px;}
  #digitalwonderland_info .digitalwonderland_collage, #mealsonwheels_info .mealsonwheels_collage{height:200px;}

  /* Introduction Tab */
  #intro_info .intro_image{margin-top: 4vw;width: 75vw;height: 75vw;transition: .5s;}
  #intro_info .intro_description{padding: 6vw;margin: 0;text-align: center;width: 100%;transition: .5s;} 

  /* Education Tab */
  .timeline_container{width: 100%;padding-left: 0px;padding-right: 25px;}
  .timeline_container::before{left: 0px;}
  .timeline_container .content{width: 280px;margin-left: 32px;}
  .timeline::after{left: 0;right: -32px;}

  .right::after, .left::after{left: -12px;}

  .skills_card{height: 140px;}
  .skills_and_experience_content:nth-child(2){display: flex;flex-direction: column;}
  .skills_card:nth-child(2){margin: 16px 0 0 0;}
}

/************************* Tablet *************************/
@media screen and (width: 768px) and (height: 1024px){

  #experience_info{display: flex;justify-content: center;align-items: flex-start;flex-direction: column;transition: .5s;}

  .icons_socials{margin: 16px 0 0 16px;}

  #digitalwonderland_info .digitalwonderland_collage, #mealsonwheels_info .mealsonwheels_collage{height:35vh;}

  .close_tab{left:6vw;}
}

/************************* Phone *************************/
@media screen and (max-width: 414px) and (max-height: 896px){
  #intro_info .intro_description{font-size: 14px;}
  .icons_socials{margin: 0;}
  .icons_socials a{padding: 4px;}
  .icons_socials i{font-size: 24px;}

  .about_tabs .button{font-size: 14px;width: 100px;pointer-events: all;}
  #digitalwonderland_info .digitalwonderland_collage{height:auto;width: 75vw;}
  #mealsonwheels_info .mealsonwheels_collage{height:auto;width: 80vw;}
  .about_content.tabs .button{width: fit-content;pointer-events: all;}

  #kpmg_info, #ksl_info{padding: 24px;}
  #kpmg_info .about_content p, #kpmg_info .about_content .content_description{margin: 0 16px;}
  #ksl_info .about_content p, #ksl_info .about_content .content_description{margin: 0 16px;}
  .close_tab{left:32px;}

  .timeline_container .content{width: 100%;margin-left: 32px;}
}