body,h1,h2,h3,h4,h5,h6,p{
  font-family: "Raleway", sans-serif;
}

p{
  line-height: 1.5rem;
}

h4{
  color:#73757a;
}

body{
  max-width:100%;
  /*sets the min width that ths screen can be to avoid the elements getting squished if width is too small*/
  min-width:300px; 
  width: auto !important;  /* Firefox will set width as auto */
  width:300px; 
}

div{
  display: block;
}

a { 
   color: #906377;
   -webkit-transition: color 0.3s ease-in;
   -moz-transition: color 0.3s ease-in;
   -o-transition: color 0.3s ease-in;
   -ms-transition: color 0.3s ease-in;
   transition: color 0.3s ease-in;
   text-decoration: none;
} 

a:hover {
   color: #888777;
}

figure{
  margin:0.5rem;
}

figcaption{
  color: #73757a;
  padding-top: 0.5rem;
  text-align: center;
}

li{
  line-height: 1.5rem;
}

/*---------------------------------------------NAV BAR!-----------------------------------------*/
nav {
  height: 100%;
  width: 16rem;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(230, 231,232);
  overflow-x: hidden;
  padding-top: 4rem;
}

/*keep the name and title in the same div for nav responsiveness*/
.name-title{
  display: block;
}

/*Bianca Pricop text*/
nav h3{
  padding-left: 1.6rem;
  margin-bottom: 0;
  color: rgb(166, 141, 149);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-size: 1.52rem;
}

/*Designer|programmer text*/
nav h4{
  padding-left: 1.6rem;
  margin-top: 0.5rem;
  text-transform: uppercase;
  color: rgb(115,117,119);
  font-weight: lighter;
}

.nav-items{
  display: inline-block;
}

/*nav bar links*/
nav a {
  padding: 0.6rem 0.6rem 0.6rem 1.6rem;
  text-decoration: none;
  font-size: 1rem;
  color: #73757a;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

/*nav link icons*/
nav i{
  margin-right: 0.7rem;
}

nav a:hover {
  color: rgb(166, 141, 149);
}

/*hide hamburger menu when on desktop and large tablet sized screen*/
.top-icon{
  display: none;
}

@media screen and (max-width: 1000px) {
/* start of large tablet styles */
nav {
  height: 5rem;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(230, 231,232);
  overflow-x: hidden;
  padding-top: 0;
}

.name-title{
  display: inline-block;
}

.nav-items{
  display: inline-block;
  float: right;
}

nav a {
  padding: 2rem 0.6rem 0.6rem 1rem;
  background-color: rgb(230, 231,232);
  text-decoration: none;
  font-size: 1rem;
  color: #73757a;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  float: right;
  z-index: 5;
}

/*nav link icons*/
nav i{
  margin-right: 0.7rem;
}

/*Bianca Pricop text*/
nav h3{
  padding-left: 1.6rem;
  margin-bottom: 0;
  color: rgb(166, 141, 149);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-size: 1.12rem;
}

/*Designer|programmer text*/
nav h4{
  padding-left: 1.6rem;
  margin-top: 0.5rem;
  text-transform: uppercase;
  color: rgb(115,117,119);
  font-weight: lighter;
  font-size: 0.8rem;
}
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */

nav {
  height: 5rem;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(230, 231,232);
  padding-top: 0;
}

.nav-items{
  display: flex;
  flex-direction: column;
  float: right;
  z-index: 500;
  width: 100%;
  margin-top: -1.2rem;
  padding-bottom: 1rem;
}

.top-nav a{display: none;}
  .top-nav a.top-icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .top-nav.responsive {
    position: fixed;
    height: auto;
  }
  .top-nav.responsive a.top-icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .top-nav.responsive a {
    display: block;
    text-align: center;
  }
}

@media screen and (max-width: 479px) {
/* start of phone styles */
nav {
  height: 3.5rem;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(230, 231,232);
  overflow-x: hidden;
  padding-top: 0;
}

nav h4{
  display: none;
}

.nav-items{
  display: flex;
  flex-direction: column;
  float: right;
  z-index: 500;
  width: 100%;
  margin-top: 0rem;
  padding-bottom: 1rem;
}

.top-nav a{display: none;}
  .top-nav a.top-icon {
    float: right;
    display: block;
    padding-top: 1.15rem;
  }

  .top-nav.responsive {
    position: fixed;
    height: auto;
  }
  .top-nav.responsive a.top-icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .top-nav.responsive a {
    display: block;
    text-align: center;
  }

}

/*---------------------------------------------NAV BAR END!-----------------------------------------*/


/*---------------------------------------------MAIN CONTENT!-----------------------------------------*/
.main {
  margin-left: 19rem; /* adding 3rems of space between nav and main content */
  margin-right: 3rem;
  padding-top: 6rem;
}

.main h2{
  color: rgb(166, 141, 149);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  margin-bottom: 3rem;
  font-size: 2rem;
}

.main h3{
  color: rgb(166, 141, 149);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  margin-bottom: 0.5rem;
}

.main h4{
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

hr{
  background-color: #c4c4c4; 
  height: 1px; 
  border: 0; 
}

.container{
  display: flex;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

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

/*make the item two thirds width of div parent*/
.two-thirds{
  width: 66.66%;
}

/*make the item one third width of div parent*/
.one-third{
  width: 33.33%;
}

/*make the item half width of div parent*/
.half{
  width: 50%;
}

@media screen and (max-width: 1000px) {
/* start of large tablet styles */
.main {
  margin-left: 3rem; /* adding 3rems of space between nav and main content */
  margin-right: 3rem;
  padding-top: 6rem;
}
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */
.container{
  display: block;
  }
}

@media screen and (max-width: 479px) {
/* start of phone styles */
.main {
  margin-left: 1.5rem; /* adding 3rems of space between nav and main content */
  margin-right: 1.5rem;
  padding-top: 4.5rem;
}
}

/*---------------------------------------------ABOUT!-----------------------------------------*/

.item-about{
  display: flex;
  flex-direction: column;
  float: left;
}

.item-about img{
  width: 100%;
  height: 100%;
  max-width: 90%;
  min-width: 50%;
  object-fit: cover;
}

.item-about p, .item-about h4{
  margin-left: 1rem;
}

.item-about h4{
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.item-about p{
  max-width: 100%;
}

@media screen and (max-width: 1000px) {
/* start of large tablet styles */
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */
.item-about img{
  max-width: 330px;
  max-height: 450px;
  align-items: center;
}

.item-about p, .item-about h4{
  margin-left: 0rem;
}
}

/*---------------------------------------------ABOUT END!-----------------------------------------*/


/*---------------------------------------------SKILLS!-----------------------------------------*/

.item-skills-container{
  display: flex;
  flex-direction: column;
}

.item-skills-container h4{
  margin-bottom: 0.5rem;
}

.item-skills{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item-skills img{
  width: 80px;
  height: 80px;
  margin: 1rem;
}

/*---------------------------------------------SKILLS END!-----------------------------------------*/

/*---------------------------------------------PORTFOLIO!-----------------------------------------*/

.portfolio-container{
  display: flex;
  flex-wrap: wrap;
  padding-top: 1.5rem;
}

.item-portfolio-container{
  display: flex;
  flex-direction: row;
  margin: 1rem;
}

.item-portfolio{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item-portfolio img{
  max-width: 300px;
  max-height: 300px;
  object-fit: contain;
}

/*---------------------------------------------PORTFOLIO END!-----------------------------------------*/


/*---------------------------------------------CONTACT!-----------------------------------------*/

.contact-container{
  display: flex;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.contact-item-container{
  display: flex;
  flex-direction: row;
  margin: 1rem;
}

.contact-item{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.contact-item i{
  color:rgb(166, 141, 149);
  transition: 0.5s ease;
}

.contact-item i:hover{
  color:rgb(115,117,119);
}

/*---------------------------------------------CONTACT END!-----------------------------------------*/


/*---------------------------------------------FOOTER!-----------------------------------------*/

footer{
  display: flex;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/*---------------------------------------------FOOTER END!-----------------------------------------*/


/*---------------------------------------------PORTFOLIO ITEMS!-----------------------------------------*/

/*-------HEADER!-------*/

.header-container{
  display: flex;
  padding-top: 0;
  margin-top: 0;
  padding-bottom: 0;
}

/*-------HEADER END!-------*/

/*-------VIDEOS!-------*/

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*-------VIDEOS END!-------*/

/*-------CONTEXT!-------*/

.context-objective-container{
  display: flex;
  flex-wrap: wrap;
  padding-top: 1.5rem;
}

.context-objective-item-container{
  display: flex;
  flex-direction: column;
}

.context-objective-item{
  display: flex;
  flex-wrap: wrap;
}

.context-icon{
  color: #73757a;
}

/*-------CONTEXT END!-------*/

/*-------OBJECTIVE!-------*/



/*-------OBJECTIVE END!-------*/

/*-------PROCESS!-------*/

.process-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  object-fit: contain;
  padding-top: 0;
  padding-bottom: 1.5rem;
}

.process-row{
  margin-top: 1rem;
}

.process-item{
  /*display: flex;*/
  flex-direction: column;
}

.icon-label h4{
  font-size:0.8rem;
}

.icon-label img{
  width:50px;
  height:50px;
}

.process-image{
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.process-image-full{
  object-fit: contain;
  width: 100%;
}

.process-image-half-screen{
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: contain;
}

.process-image-half-screen2{
  width: 100%;
  height: 100%;
  max-height: 300px;
  object-fit: contain;
}

.process-container p{
  margin-bottom: 0;
  min-width: 50%;
}

.space-between{
  margin-left: 1rem;
  margin-right: 1rem;
}

@media screen and (max-width: 1000px) {
/* start of large tablet styles */
.process-image{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.process-image-half-screen{
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: contain;
}

.process-image-half-screen2{
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: contain;
}
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */

}

@media screen and (max-width: 479px) {
/* start of phone styles */

}

/*-------PROCESS END!-------*/

/*-------CHALLENGE!-------*/

.challenge-container{
  display: flex;
  flex-direction: column;
  padding-top: 0;
}

.challenge-item{
  display: flex;
  flex-direction: column;
}

.challenge-item p{
  margin-top: 0;
}

/*-------CHALLENGE END!-------*/

/*-------LEARNING & INSIGHTS!-------*/

.learning-container{
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 1.5rem;
}

.learning-item{
  display: flex;
  flex-direction: column;
}

/*-------LEARNING & INSIGHTS END!-------*/


/*---------------------------------------------PORTFOLIO ITEMS END!-----------------------------------------*/

.row{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.column{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
}

.horizontal-centered{
  align-items: center;
}

.vertical-centered{
  justify-content: center;
}

.centered{
  justify-content: center;
  align-items: center;
}

.centered-text{
  text-align: center;
}

.linkimage{
  transition: 0.5s ease;
  cursor: pointer;
}

.linkimage:hover{
  opacity: 0.7;
}

/*---------------------------------------------MAIN CONTENT END!-----------------------------------------*/


/*---------------------------------------------RESPONSIVENESS!-----------------------------------------*/

@media screen and (max-width: 1000px) {
/* start of large tablet styles */

.two-thirds{
  width: 100%;
}

/*make the item one third width of div parent*/
.one-third{
  width: 50%;
}

/*make the item half width of div parent*/
.half{
  width: 100%;
}
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */
.one-third{
  width: 100%;
  align-items: center;
}
}

@media screen and (max-width: 479px) {
/* start of phone styles */

}