:root {
    --darkblue:#141325;
    --turquoise:#05ffd2;
    --grey:#565656;        
--sand:#fff5e1;   
--sand-mid:#f9ebd0; 
--turquoise-dark:#00a083;
}
    
cursor {
mix-blend-mode: hard-light;    
}


/*Import fonts*/

@font-face {
    font-family: 'Rota';
    font-weight:300;
    src: url('/fonts/Rota/rota-light_300-webfont.eot'); /* IE9 Compat Modes */
    src: url('/fonts/Rota/rota-light_300-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/Rota/rota-light_300-webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('/fonts/Rota/rota-light_300-webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('/fonts/Rota/rota-light_300-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */

}

@font-face {
    font-family: 'Rota';
    font-weight:400;
    src: url('/fonts/Rota/rota-regular_400-webfont.eot'); /* IE9 Compat Modes */
    src: url('/fonts/Rota/rota-regular_400-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/Rota/rota-regular_400-webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('/fonts/Rota/rota-regular_400-webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('/fonts/Rota/rota-regular_400-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Rota';
    font-weight:500;
    src: url('/fonts/Rota/rota-medium_500-webfont.eot'); /* IE9 Compat Modes */
    src: url('/fonts/Rota/rota-medium_500-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/Rota/rota-medium_500-webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('/fonts/Rota/rota-medium_500-webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('/fonts/Rota/rota-medium_500-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Rota';
font-weight:700;
src: url('/fonts/Rota/rota-bold_700-webfont.eot'); /* IE9 Compat Modes */
src: url('/fonts/Rota/rota-bold_700-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('/fonts/Rota/rota-bold_700-webfont.woff2') format('woff2'), /* Super Modern Browsers */
     url('/fonts/Rota/rota-bold_700-webfont.woff') format('woff'), /* Pretty Modern Browsers */
     url('/fonts/Rota/rota-bold_700-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Kollektif';
    font-weight:400;
    src: url('/fonts/Kollektif/kollektif-webfont.eot'); /* IE9 Compat Modes */
    src: url('/fonts/Kollektif/kollektif-webfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('/fonts/Kollektif/kollektif-webfont.woff2') format('woff2'), /* Super Modern Browsers */
     url('/fonts/Kollektif/kollektif-webfont.woff') format('woff'), /* Pretty Modern Browsers */
     url('/fonts/Kollektif/kollektif-webfont.ttf')  format('truetype');/* Safari, Android, iOS */
}

@font-face {
    font-family: 'Kollektif';
    font-weight:700;
    src: url('/fonts/Kollektif/kollektif-bold-webfont.eot'); /* IE9 Compat Modes */
    src: url('/fonts/Kollektif/kollektif-bold-webfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('/fonts/Kollektif/kollektif-bold-webfont.woff2') format('woff2'), /* Super Modern Browsers */
     url('/fonts/Kollektif/kollektif-bold-webfont.woff') format('woff'), /* Pretty Modern Browsers */
     url('/fonts/Kollektif/kollektif-bold-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
}






/*Global styles*/

 body {
    width: 100%;
    margin: 0 auto;    
    font-size: 17px;
    /* line-height:1.45em; */
    font-family: 'Rota',sans-serif;
    color:var(--grey);
    background: var(--sand);
    overflow-x: hidden;
    }

    p {

        font-size: 17px;
        line-height:1.45em;   
    }
    
.p-med > p {
   font-size: 1.2rem;
   line-height: 1.75rem; 
}


    h1, h2, h3, h4, h5 {
    color: var(--darkblue);
    font-family: 'Kollektif',sans-serif;
    margin: 0;
    }


    h1 {
        font-size:6.25rem;

        
        }
        
        h2 {
        font-size: 3.5rem;
        }
        
        h3 {
        font-weight: 700;
        font-size: 2.75rem;
        }
        
        h4 {
        font-size: 1.5rem; 
        text-transform: uppercase;
        letter-spacing: 0.2rem;   
        }
        
        h5 {
        font-size: 1.25rem;    
        }


   a {
    color: var(--turquoise-dark); 
    text-decoration: none;   
    font-weight: 700;
    }

    a:hover {
        text-decoration: underline;
    }

.h1-long {
 font-size: 5.25rem;
 margin-bottom: 15px;
 line-height: 1em;

}
 h1 a:hover {
  text-decoration: none;
  color: var(--turquoise-dark);   
 }
    
    header {

    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 75px auto 1fr;    
    grid-template-areas: 
    "logo . burger";
    margin-top: 20px;
    }
    
    #logo {
    grid-area:logo;
    align-self: start;
    width: 75px; 
    margin-left: 20px;
 
    }

     .footer {
    grid-column: 1 / -1;
    background: orange;
     }
       
 
 /* Global element styles     */

.main {
display: grid;
grid-template-columns: repeat(12, 1fr);
padding:0 24px;
margin-bottom: 40px;
 }



.section {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows:auto;
column-gap: 24px;
}

.section > img {
border-radius: 10px;    
}

.intro {
grid-column: 1 / -1;    
}

.intro > h1 {
    font-size: 8rem;

    grid-row: 1 / 2;
    -webkit-text-stroke: 3px var(--darkblue);
    color: transparent;
    text-align: left;    
}

.intro > p {
    margin-left: 10px;
    font-size: 1.7rem;
    line-height: 2.3rem;
    grid-row:2 / 3;
}


/* Global element styles Breakpoints */

@media (min-width:1500px) {
    .main {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        padding:0 24px;
        margin-bottom: 40px;
        width:85%;
        margin-left: 7.5%;
         }

}

@media (min-width:1920px) {
    .main {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        padding:0 24px;
        margin-bottom: 40px;
        width:80%;
        margin-left: 10%;
         }

@media screen and (max-width:768px) {
  h2 {
 font-size: 3rem !important;   
  }  

}


}



/* Homepage styles */

/* Playing Cards */
.playing-card {
    min-height:360px;
    position:relative;
    grid-column: span 3;
  }

  .playing-card:first-of-type{
 grid-column: 5 / span 4;
  }

.flip-box-front > h2 {
font-size: 11rem;
}

  #playing-cards {
margin-top:50px;
  }



.flip-box {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%) ;
  -o-transform:translate(-50%, -50%) ;
  -ms-transform:translate(-50%, -50%) ;
  transform: translate(-50%, -50%);

}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {

  -webkit-transform:rotateY(180deg) ;
  -moz-transform:rotateY(180deg) ;
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility:hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
}

.flip-box-front {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid var(--darkblue);
  border-radius: 10px;
  flex-direction: column;

}

.flip-box-front img {
}

.flip-box-back {
    border: 4px solid var(--darkblue);
    border-radius:10px;

  -webkit-transform: rotateY(180deg);  
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding:30px;
}
/* .flip-box-back > p {
    font-size: 20px;
    line-height: 1.75rem;
} */



@media (min-width:1024px) and (max-width:1280px){

    .playing-card {
        grid-column: span 6;
      }
    
      .playing-card:first-of-type{
     grid-column: 4 / span 6;
      }

}


@media (min-width:768px) and (max-width:1024px){

    .playing-card {
        grid-column: span 6;
      }
    
      .playing-card:first-of-type{
     grid-column: 4 / span 6;
      }

}



@media (min-width:414px) and (max-width:768px) {

    .playing-card {
        grid-column: span 10;
      }
    
      .playing-card:first-of-type{
     grid-column: 2 / span 10;
      }

}


@media only screen and (max-width:500px) {

    .playing-card , .playing-card:first-of-type{
     grid-column: 1 / span 13;
      }

}


@media only screen and (max-width:375px) {
 .playing-card , .playing-card:first-of-type {
    min-height:450px;  }
}

@media (min-width: 375px) and (max-width:1024px) {
.playing-card , .playing-card:first-of-type {
min-height:380px;

}

}




/* Project styles */


/* Project intro */

.project {
grid-column: 1 / -1;
grid-template-rows: auto;
grid-template-columns: repeat(12 , 1fr);
text-align: left;
display: grid;
grid-row: 1 / 2;
}

.divider-line {
    grid-column: 1 / -1;
    /* grid-row: 3 / 4; */
    border-bottom: 1px solid var(--darkblue);
    padding-top: 20px;
    margin-bottom: 50px;    
    }
    

.project > h1 {
grid-column: 1 / 10;
grid-row: 1 / 2;
text-transform: none;

}

.project > h2 {
Font-family:'Rota'; 
Font-weight: 700;
Font-size:2.25rem;
grid-column: 1 / 10;
grid-row: 2 / 3;   
}

.project-info {
    grid-row: 1 / 2;
    grid-column: 10 / -1;
    align-self: center;
    justify-self: end;
}



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

.project-info_section:nth-child(1) {
    margin-bottom:15px;
    }

/* Project Intro Breakpoints */

@media only screen and (max-width:768px){
    .project-info {
        grid-row: 3 / 4;
        grid-column: 1 / -1;
        display: flex;
        align-self: end;
        justify-self: start;
        margin: 15px 0;
        align-items:baseline;
        flex-wrap: wrap;
    }  
    
    .project-info > h5 {
        margin-right: 6px;
    }

    .project-info_section:nth-child(1) {
        margin-right:30px;
        margin-bottom:0px;
        }

        .project-info_section {
           
            flex-direction: row;
            align-items: flex-end;
        }

        .project-info_section > span {
            font-size: 1.25rem;
        }

.divider-line {
    padding-top: 0px;
}

/* 
#project-role {
    margin-right: 15px;
} */

}

@media (min-width:768px) and (max-width:1024px){
}



/* Project content styles */

.project-content_text {
grid-column: 2 / 6;
align-self: center;
justify-self: start;    
padding-right: 20px;
}

.project-content_text > p {
    font-size: 1.2rem;
}


.project-content_image {
justify-self: start;
align-self: center;   
border-radius: 10px; 
}

.project-content_image > img {
    max-width: 100%;
    border-radius: 10px;
}

.project-content_number {
    color: var(--darkblue);
    color:rgb(20, 19, 37, 0.3);
    font-family: 'Kollektif',sans-serif;
    margin: 0;
    font-size:5rem;
    align-self: center;
    justify-self: center;
    font-weight: 700;
}


/* Project Content Styles Breakpoints */

@media only screen and (max-width:768px){
    
    .h1-long {
        font-size: 2.35rem !important;
        margin-bottom: 15px;
        line-height: 1em;
    }
    
    .project > h1 {
        grid-column: 1 / -1;
 
    font-size: 4.25rem;    
    }
    
    .project > h2 {
        grid-column: 1 / -1;
        font-size: 2rem;
    
        }
.project-info_section > h5 {
    margin-right: 8px;
}

}


@media (min-width:768px) and (max-width:1024px){

    .h1-long {
        font-size: 3.75rem;
        margin-bottom: 15px;
        line-height: 1em;
    }
}

@media only screen and (max-width:1024px) {
    .project-content_number {
     font-size:4rem;   
    }    
}


/* Project Section 1 */

.project-section_1 {
 grid-row: 2 / 3;   
}


.project-content_number.number-1.project-section_1 {
grid-column:1 / 2;
grid-row: 1 / 2;
 }

 .project-section_1.project-content_number {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
     }


 .project-content_text.project-section_1 {
    grid-column: 3 / 7;

    align-self: center;
    justify-self: start;    
    padding-right: 20px;
    grid-row: 1 / 2;
    }
    
    .project-content_text.project-section_1 > p {
        font-size: 1.3rem;
    }
    
    
    .project-content_image.project-section_1 {
    grid-column: 7 / 13;
    /* justify-self: center; */
    align-self: start;  
    grid-row: 1 / 2;

    }
    
    .project-content_image.project-section_1 > img {
        max-width: 70%;
        border-radius: 25px;
       
    }

/* Project Section 1 Breakpoints */



@media only screen and (max-width:500px) {
    .project-content_image.project-section_1 > img {

        max-width: 100%;
            }

}




@media only screen and (max-width:768px){
    .project-content_text.project-section_1 {
        grid-column: 2 / -1;
        grid-row: 1 / 2;
        padding-right:0px;
        font-size:1.2rem;
    }

    .project-content_text.project-section_1 > p {
        font-size:1.2rem;
    }

    .project-content_image.project-section_1 {
        grid-column: 2 / -1;
        max-width: 90%;
        justify-self: center;
        grid-row: 2 / 3;
    }

    .project-content_image.project-section_1 > img {

        max-width: 90%;
            }



    .project-content_number {
        grid-row: 1 / 2;
    }


    .carousel-cell.project-section_2 > h2 {

        font-size: 2.8rem;
    }

    .carousel-cell.project-section_2 > h3 {
        font-size: 1.8rem !important;
    }

}

@media (min-width:768px) and (max-width:1024px){
    .project-content_text.project-section_1 {
        grid-column: 2 / 8;
        }
        
.project-content_image.project-section_1 {
    grid-column: 7 / -2;
    max-width: 100%;
    grid-row: 1 / 2;
    align-self: start;
}

.project-content_image.project-section_1 > img {
    max-width: 100%;
}


}

@media only screen and (max-width:1024px){
   

}




/* Project section 2 */
.project-section_2.section {
grid-row: 3 / 4;
}

.project-content_number.project-section_2 {
    grid-column: 2 / 12;
    grid-row: 1 / 3;
    justify-self: center;
}

.project-section_2 > h2{
    grid-row: 2 / 3;
    grid-column: 2 / 12;
    text-align: center;
    align-self: center;
    justify-self: center;
}

.project-content_text.project-section_2 {
    grid-column: 8 / 12;
    /* grid-column: 9 / 12; */
    align-self: center;
   grid-row:1 /2;
    padding-right: 20px;
    }
    
    .project-content_text.project-section_2 > p {
        font-size: 1.35rem;
    }
    
    
    .project-content_image.project-section_2 {
    /* grid-column: 2 / 9; */
    grid-column: 2 / 8;
    justify-self: center;
    align-self: center;    
    grid-row: 1 / 2; 
    }

    .project-content_image.project-section_2 > h3{
font-size: 2.5rem;

    }


    
    .project-content_image.project-section_2 > img {
        max-width: 93%;
        border-radius: 25px;

    }

    .main-carousel.project-section_2 {
    grid-row: 5;
    grid-column: 1 / -1;
    }

.carousel-cell.project-section_2 > h3 {
    grid-column: 2 / 12;
    font-weight: 400;
    font-family: 'Rota';
    align-self: start;
    justify-self: center;
    text-align:center;
    font-size: 2.5rem;
}
    
/* Project Section 2 Breakpoints */

@media only screen and (max-width:768px){
    .main-carousel {
        grid-column: 1 / -1;
    }

    .project-content_text.project-section_2 > p {
        font-size: 1.05rem;
    }

    .project-content_text.project-section_2 {
        grid-column: 2 / 12;
        grid-row: 2 / 3;
        align-self: start;
        margin:0 13px;
        }

        .project-content_text.project-section_2 > p {
        text-align: center;
        padding-right:0px;
        font-size:1.2rem;
        }

        
        .project-content_image.project-section_2 {
        grid-column: 2 / 12;
        grid-row: 1 / 2;
        align-self: end;
        justify-self: center;
        padding: 0px 15px;
        }

        .project-content_image.project-section_2 > img {
            max-width: 100%;
        }


}

@media (min-width:768px) and (max-width:1024px){
    .project-content_text.project-section_2 {
        grid-column: 2 / -2;
        grid-row: 2 / 3;
        align-self: start;

        }

        .project-content_text.project-section_2 > p {
            text-align: center;
            }
        
        .project-content_image.project-section_2 {
        grid-column: 2 / -2;
        grid-row: 1 / 2;
        align-self: end;
        }
        .project-content_image.project-section_2 > img {
            max-width: 100%;
        }


}


@media only screen and (max-width:1024px){

    .project-section_2 > h3 {
            font-size: 2.1rem;
            text-align:center;
    }
    .project-section_2.section {
       margin-top: 45px;
        }

}


/* Project Section 3 */
.project-section_3.section {
    margin-top:150px;
    grid-row: 5 / 6;
    }

.project-section_3.project-content_number {
grid-row: 2 / 3;
grid-column: 1 / 2;
align-self: start;
 }

.project-section_3 h2 {
grid-column: 3 / 12;
} 


.project-section_3.project-content_text {
    grid-column: 1 / 5;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: start;
    padding-right: 20px;
}

.project-section_3.project-content_image {
    grid-column: 5 / -1;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;

}

/* Tabbed container (Project Section 3)*/

/* Tabs */
#tabs {
  
    grid-column: 3 / -2;
    /* margin: 5em auto; */
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

#tabs-nav {
  list-style: none;
  /* margin: 0; */
  padding: 0;
  /* overflow: auto; */
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  border-bottom: 1px solid var(--darkblue);
  width:100%;
  display: flex;
}

#tabs-nav li {
  /* float: left; */
  font-size: 2rem;
  margin-right: 6px;
  padding: 6px 10px;
  border-bottom: none;
  cursor: pointer;
  text-decoration: none;
}

#tabs-nav li:nth-child(1) {
padding: 6px 10px 6px 0;
}



#tabs-nav li a {
text-decoration: none  !important;
color:var(--darkblue)  !important;  
font-weight: 400;
}


#tabs-nav li.active a{
font-weight: 700;
}

/*   
#tabs-nav li:hover,
li.active {
} */


#tabs-content {
grid-column: 1 / -1;
grid-row: 3 / 4;
}

.content {
  padding: 10px;
  grid-template-columns:repeat(12, 1fr);
  display:grid;
}

.content > h3 {
  grid-column: 2 / -1;  
}

.content > p {
 grid-column: 1 / 4;   
}

/* Project Section 3 Breakpoints */

@media only screen and (max-width:768px){
    .project-section_3.project-content_text {
        font-size: 1.2rem;
        padding-right:0px;
    }
    .project-section_3 h2 {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        justify-self:center;
        } 

        .project-section_3 > h2 {
            font-size: 2.8rem;
        }

        .project-section_3 h2 > h2 {
            font-size: 2.8rem;
        }
        
    
        #tabs {
            grid-column: 1 / -1; 
            grid-row: 3 / 4;   
        }

.project-section_3.project-content_number {
    grid-row:1 / 2;
    grid-column: 1 / -1;
}


}

@media only screen and (max-width:1024px){



    .project-section_3.project-content_text , .project-section_3.project-content_image {
        grid-column: 1 / -1;
    }

    .project-section_3.project-content_image {
    grid-row: 4 / 5;    
    }




}

@media (min-width:768px) and (max-width:1024px) {

    .project-section_3 h2 {
        grid-column: 2 / -1;
        } 

        #tabs {
            grid-column: 2 / -2;    
        }

        #tabs-nav li {
            font-size: 1.8rem;
}
}


/* Project Section 4 */

.project-section_4.section {
grid-row: 6 / 7;
margin-top:130px;  
 
}

.project-section_4.project-content_number {
grid-row:1 / 2;
grid-column: 1 / -1;
justify-self: center;

}

.project-section_4 > h2 {
grid-row: 2 / 3;
grid-column: 1 / -1;
justify-self: center;
align-self: center;
margin-bottom: 55px;
}

.project-section_4.project-content_image {
    grid-row: 3 / 4;
    grid-column: 2 / -2;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(2 , auto);

}


.project-section_4.project-content_image > div > img {
max-width:100%;
border-radius: 10px;
}

/* Project Section 4 Breakpoints */

@media only screen and (max-width:768px){
    .project-section_4.project-content_image {

        grid-template-columns: repeat(1 , auto);
        grid-column: 1 / -1;
    
    }

    .project-section_4 > h2 {
        font-size: 2.8rem;
    }
}


@media (min-width:768px) and (max-width:1024px){
    .project-section_4.project-content_image {

        grid-template-columns: repeat(2 , auto);
    
    }  
}







/* Mobile breakpoint */

@media only screen and (max-width:768px) {

    .project > h2 {
    grid-column: 1 / -1;
    }
    .project-content_text {
        grid-column: 2 / -1;
        font-size: 1.2rem;
        margin-right:0px;
    }
    
    .project-content_text > h2 {
        font-size: 2.8rem;
    }

        .project-content_number {
         grid-column: 1 / 2;   
        }
        
        .project-content_image {
        grid-column: 2 / -1;
        }

        #tabs-nav {
            flex-wrap: wrap;
            justify-content: center;
        }

        #tabs-nav li {
            font-size: 1.65rem;
    
}



        }


@media (min-width:768px) and (max-width:1024px) {
   
    .project > h2 {
        grid-column: 1 / -3;
        grid-row: 2 / 3;
        }
 
  
   
   
        }







/* Mobile breakpoint */

@media only screen and (max-width:768px) {

    .project > h2 {
    grid-column: 1 / -1;
    }
    .project-content_text {
        grid-column: 2 / -1;
    }
        .project-content_number {
         grid-column: 1 / 2;   
        }
        
        .project-content_image {
        grid-column: 2 / -1;
        }

        .intro > h1 {
       font-size: 5rem;
       line-height: 5rem;
       -webkit-text-stroke: 2.5px var(--darkblue);
    
        }
    }


@media (min-width:768px) and (max-width:1024px) {
    .project-content_text {
        grid-column: 2 / 11;
    }
        .project-content_number {
         grid-column: 1 / 2;   
        }
        
        .project-content_image {
        grid-column: 2 / 11;
        }
}




/* project navigation */

.project-navigation {
display: grid;
grid-template-rows: 80px;
grid-template-areas: 
"previous all next";
justify-content:space-between;  
grid-column: 1 / -1;
grid-row: 7 / 8;;
margin-top: 30px;
padding: 0px 24px 24px 24px;
}


.next-project {
grid-area: next;
align-self: center;
justify-self: end;
}

.next-project img, .previous-project img {
    max-width: 100%;
    width:45px;
 }


.previous-project {
grid-area: previous;
align-self: center;
justify-self: start;
}


.all-projects img {
    max-width: 100%;
    width:35px;
}

.previous-project:hover, .next-project:hover, .all-projects:hover {
    -webkit-transform:scale(0.9);
    -moz-transform:scale(0.9);
    -o-transform: scale(0.9);
    -ms-transform: scale(0.9);   
 transform: scale(0.9);




}

.all-projects {
grid-area: all;
align-self: center;
justify-self: center;
}


@media (min-width:375px) and (max-width:768px) {
    h1 {
    font-size:5rem;    
    }
}

@media only screen and (max-width:375px) {
    h1 {
    font-size:4rem;    
    }
}