body {font-family: 'Rubik', sans-serif;
margin: 0;
background-color: #E6EFF1;
}


/*NAV STYLE*/
a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

a:hover
{
  color: tomato;
}

nav {
    position: fixed;
      z-index: 3;
}
#menuToggle
{

  position: fixed;
  top: 50px;
  left: 50px;
  

  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #3c3c3c;
  border-radius: 18px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: fixed;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

/*end nav style*/

.mission {
     margin: 2%;
    padding-left: 90px;
    padding-top:10px;
    font-weight: 100;

}


h1 {
    font-size: 900%;
    font-weight: 100;
}
h2 {
        font-weight: 100;
    font-size: 60px;
    line-height: 90px;

}
h3{
    font-weight: 100;
    font-size:30px;
    line-height: 40px;
}

h4{
     color: #C44E47;
    font-weight: 100;
    font-size:30px;
    line-height: 40px;
    text-align: Center;
}
.title {
            color: #E6EFF1;
    margin-left: 4%;
}

.definition {
    margin-top:-50px;

}

.circle {
    outline: none;

}
.circle1, .circle2, .circle3 {
    margin-top: -20px;
    position: absolute;
   float:left;
}

.circle1 {
    padding-left: 75%;
    padding-top:15%;
    z-index: 3;
}
.circle2{
    z-index: 0;
    padding-left: 54%;

}

.circle3{
    z-index: 2;
    padding-right:2%;
    padding-left: 75%;
}


.scroll1{
    margin-top:10%;
    margin-left:0;
    background-color: white;
    color: #D3A5A0;
    height: 1000px;
}
.scroll2{
    margin-left:0;
    background-color: #E6EFF1;
    height: 2000px;
}

/*STYLES FOR THE MOVABLE GRID ON HOMEPAGE*/
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
 #sortable li { margin: 3px 3px 3px 0;  float: left; width: 163px; height: 163px; font-size: 4em; text-align: center; }
.movablegrid{
    margin-left: 8%;
    padding-top: 230px;
}

/*PARALLAX EFFECT*/
 .splash-container {

    z-index: -1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed !important;
     
     
     /* Chrome, Safari, Opera */
-webkit-animation-name:myfirst;
-webkit-animation-duration:10s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Standard syntax */
animation-name:myfirst;
animation-duration:10s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0%   {background: #c44e47; left:0px; top:0px;}
25%  {background: #bf7e7a; left:0px; top:0px;}
50%  {background: #bdadab; left:0px; top:0px;}
75%  {background: #c44e47; left:0px; top:0px;}
100% {background: #e5bd89; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst
{
0%   {background: #e5bd89; left:0px; top:0px;}
25%  {background: #bf7e7a; left:0px; top:0px;}
50%  {background: #bdadab; left:0px; top:0px;}
75%  {background: #bf7e7a; left:0px; top:0px;}
100% {background: #e5bd89; left:0px; top:0px;}
}

.splash {
    margin: auto;
    position: absolute;
    top: 0px; left: 80px; bottom: 0; right: 0;
}

.content {
    /* These styles are required for the "scroll-over" effect */
    position: absolute;
    top: 100%;
    width: 100%;
    min-height: 12%;
    z-index: 2;
    
    
    
}



/*for Name over image */
.name{position:absolute; bottom:0;
margin-left: 4%; margin-bottom: 15%;
 z-index: 1;}

.role {margin-top: -100px;}

/*bio styles*/
.bio {padding:2%;
    margin-left: 15%;
    margin-right: 15%;
margin-top: 15%;
}
p {
    line-height: 190%;
    font-size: 18px;
}

.portfoliotitle {
    font-size: 100px;
    margin-top: 25%;
}




/*SAVS GRID PORTFOLIO BELOW */





.section {
  display: none;
  padding: 2rem;
}
@media screen and (min-width: 768px) {
  .section {
    padding: 4rem;
  }
}
@supports (display: grid) {
  .section {
    display: block;
  }
}


.grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: row dense;
}

.item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  grid-column-start: auto;
  grid-row-start: auto;
  background-size: inherit;
  background-position: center;
  box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  cursor: pointer;
  counter-increment: item-counter;
}


.item:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0s ease-in-out;
}
.item:hover {
  height: 100%;
  width: 100%;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  
}

/*this is what colors the hover on images*/
.item:hover:after {
  opacity: .8;
  background-color: #C44E47;

}
.item--small{
  grid-row-end: span 1;
}
.item--medium {
  grid-row-end: span 2;
}
.item--large {
  grid-row-end: span 3;
}
.item--full {
  grid-column-end: auto;
}
@media screen and (min-width: 768px) {
  .item--full {
    grid-column: 1/-1;
    grid-row-end: span 2;
  }
}
.item__details {
 font-size: 18px;
  position: relative;
  z-index: 1;
  letter-spacing: 1px;
  color: #93251e;
  text-align:center;
  opacity:0;
  }

h5 {
    color: white;
    font-size: 20px;
    text-align: center;
}

/*SPECIFIC SIZING FOR THE HOVER OF THE PORTFOLIO TITLES*/

/*this is for laptop size screen*/
@media (min-width:1440px){
.item.item--small .item__details {
    padding-top: 15%;
    }
    
    .item.item--small .item__details h5 {
        padding-bottom: 8%;
    }

.item.item--large .item__details {
    padding-top:70%;
}
    .item.item--large .item__details h5 {
    padding-bottom:67%;
}


.item.item--medium .item__details {
    padding-top:74%;
}
    .item.item--medium .item__details h5 {
    padding-bottom:35%;
}

.item.item--full .item__details {
    padding-top:12%;
}
    .item.item--full .item__details h5 {
    padding-bottom:10%;
}
    
    
    
}


@media (max-width:1287px){
.item.item--small .item__details {
    padding-top: 8%;
    }
    
    .item.item--small .item__details h5 {
        padding-bottom: 6%;
    }

.item.item--large .item__details {
    padding-top:47%;
}
    .item.item--large .item__details h5 {
    padding-bottom:60%;
}


.item.item--medium .item__details {
    padding-top:35%;
}
    .item.item--medium .item__details h5 {
    padding-bottom:25%;
}

.item.item--full .item__details {
    padding-top:12%;
}
    .item.item--full .item__details h5 {
    padding-bottom:8%;
}
    
    
    
}

.item__details:before{
  font-weight: 0;
   opacity: 0;
}

.item__details:hover {
    height: 100%;
  width: 100%;
  transform: opacity 1;
  position: relative;
  padding: 5px;
  letter-spacing: 1px;
  color: #e6eff1;
  text-align:center;
  opacity:1;
 }

@media (max-width:1017px){
.item.item--small .item__details {
    padding-top: 8%;
    }
    
    .item.item--small .item__details h5 {
        padding-bottom: 6%;
    }

.item.item--large .item__details {
    padding-top:49%;
}
    .item.item--large .item__details h5 {
    padding-bottom:45%;
}


.item.item--medium .item__details {
    padding-top:30%;
}
    .item.item--medium .item__details h5 {
    padding-bottom:25%;
}

.item.item--full .item__details {
    padding-top:18%;
}
    .item.item--full .item__details h5 {
    padding-bottom:10%;
}
    
    
    
}

/*END PORTFOLIO HOVER MEDIA query*/



/*MEDIA QUERIES*/

@media (max-width:1320px){
    .scroll2 {
        height: 3000px;
    }
}
@media (max-width:890px){
    h1 {
        font-size: 90px;
    }
    h2 {
        font-size: 20px;
        line-height: 35px;
        margin-left: -80px;
    }
    svg {
        margin-left: -80px;
    }
    .circle1 {
        margin-left:70px;
        margin-top:80px;
    }
    .circle2{
        margin-left: -90px;
    }
    
        br {
       display:none;
    }
    
    .scroll1 {
        margin-top: 0;
        height: 750px;
    }
    .scroll2 {
        display: none;
    }
    
    
    /*PORTFOLIO PAGE MEDIA QUERY*/
    .portfoliotitle{
        font-size: 50px;
        margin-top:0;
        margin-left: 1%;
    }
    .name {
        
        margin-left: 40px;
        background-color: rgba(35, 35, 35, 0.65);
        padding-left: 100px;
        padding-right: 80px;
        margin-right: 20px;
}
    
  .role {
        padding-top: 30px;
    }
    .bio h2 {
        margin-left: 4px;
    }
    .bg {
margin-left: -220px;    }
    
}

@media (max-width:600px){
    h1 {
        font-size: 50px;
        padding-top: 30%;
   }
    h1, h3  {
        margin-left: -75px; 
    }
    #menuToggle {
        margin-left: -20px;
    }
 
       h3 {
        font-size: 20px;
           padding-top:10%;
           line-height: 30px;
           
    }

    
       svg {
        margin-left: -170px;
    }
    
}