/*  GOOGLE FONTS */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
html{
    scroll-behavior: smooth;
}

/* SCROLL BAR */

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #39c2e6;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* GENERAL STYLING */

section {
    padding: 100px 0;
}
.max-width{
    max-width: 1300px;
    padding: 0 80px;
    margin: auto;
}
.about, .workflow, .skills, .portfolio, .contact, .project, footer {
    font-family: 'Poppins', sans-serif;
}
.about .about-content,
.workflow .work-content,
.skills .skills-content,
.contact .contact-content,
.project .project-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
section .title{
    position: relative;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 60px;
    padding-bottom: 20px;
    font-family: 'Ubuntu', sans-serif;
}
section .title::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #111;
    transform: translateX(-50%);
}
section .title::after{
    position: absolute;
    bottom: -8px;
    left: 50%;
    font-size: 20px;
    color: #39c2e6;
    padding: 0 5px;
    background: #fff;
    transform: translateX(-50%);
}

/* unvisited link */
a:link {
  color: #54668a;
}

/* visited link */
a:visited {
  color: #70a5b5;
}

/* mouse over link */
a:hover {
  color: navy;
}

/* selected link */
a:active {
  color: blue;
}

/* NAVBAR */

.navbar{
    position: fixed;
    width: 100%;
    z-index: 999;
    padding: 30px 0;
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.3s ease;
}
.navbar.sticky{
    padding: 15px 0;
    background: #39c2e6;
}
.navbar .max-width{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar .logo a{
    color: #fff;
    font-size: 35px;
    font-weight: 600;
}
.navbar .logo a span{
    color: #39c2e6;
    transition: all 0.3s ease;
}
.navbar.sticky .logo a span{
    color: #fff;
}
.navbar .menu li{
    list-style: none;
    display: inline-block;
}
.navbar .menu li a{
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    margin-left: 25px;
    transition: color 0.3s ease;
}
.navbar .menu li a:hover{
    color: #39c2e6;
}
.navbar.sticky .menu li a:hover{
    color: #fff;
}

/* MENU BTN */

.menu-btn{
    color: #fff;
    font-size: 23px;
    cursor: pointer;
    display: none;
}
.scroll-up-btn{
    position: fixed;
    height: 45px;
    width: 42px;
    background: #39c2e6;
    right: 30px;
    bottom: 10px;
    text-align: center;
    line-height: 45px;
    color: #fff;
    z-index: 9999;
    font-size: 30px;
    border-radius: 6px;
    border-bottom-width: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.scroll-up-btn.show{
    bottom: 30px;
    opacity: 1;
    pointer-events: auto;
}
.scroll-up-btn:hover{
    filter: brightness(90%);
}


/* HOME */

.home{
    display: flex;
    background: url("img/bg-2.jpg") no-repeat center;
    height: 100vh;
    color: #fff;
    min-height: 500px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Ubuntu', sans-serif;
    z-index: 0;
}
.home .max-width{
  width: 100%;
  display: flex;
}
.home .max-width .row{
  margin-right: 0;
}
.home .home-content .text-1{
    font-size: 27px;
}
.home .home-content .text-2{
    font-size: 75px;
    font-weight: 600;
    margin-left: -3px;
}
.home .home-content .text-3{
    font-size: 40px;
    margin: 5px 0;
}
.home .home-content .text-3 span{
    color: #39c2e6;
    font-weight: 500;
}
.home .home-content a{
    display: inline-block;
    background: #39c2e6;
    color: #fff;
    font-size: 25px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid #39c2e6;
    transition: all 0.3s ease;
}
.home .home-content a:hover{
    color: #39c2e6;
    background: none;
}

/* ABOUT */

.about .title::after{
    content: "who i am";
}
.about .about-content .left{
    width: 45%;
}
.about .about-content .left img{
    height: 350px;
    width: 250px;
    object-fit: cover;
    border-radius: 6px;
}
.about .about-content .right{
    width: 55%;
}
.about .about-content .right .text{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
}
.about .about-content .right .text span{
    color: #39c2e6;
}
.about .about-content .right p{
    text-align: justify;
}
.about .about-content .right a{
    display: inline-block;
    background: #39c2e6;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid #39c2e6;
    transition: all 0.3s ease;
}
.about .about-content .right a:hover{
    color: #39c2e6;
    background: none;
}

/* PROJECTS */

.workflow, .portfolio{
    color:#fff;
    background: #111;
}
.workflow .title::before,
.portfolio .title::before{
    background: #fff;
}
.workflow .title::after,
.portfolio .title::after{
    background: #111;
    content: "step by step";
}
.workflow .work-content .card{
    width: calc(33% - 20px);
    background: #222;
    text-align: center;
    border-radius: 6px;
    padding: 35px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.workflow .work-content .card:hover{
    background: #39c2e6;
}
.workflow .work-content .card .box{
    transition: all 0.3s ease;
}
.workflow .work-content .card:hover .box{
    transform: scale(1.05);
}
.workflow .work-content .card i{
    font-size: 50px;
    color: #39c2e6;
    transition: color 0.3s ease;
}
.workflow .work-content .card:hover i{
    color: #fff;
}
.workflow .work-content .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}

/* SKILLS */

.skills .title::after{
    content: "what i know";
}
.skills .skills-content .column{
    width: calc(50% - 30px);
}
.skills .skills-content .left .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.skills .skills-content .left p{
    text-align: justify;
}
.skills .skills-content .left a{
    display: inline-block;
    background: #39c2e6;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid #39c2e6;
    transition: all 0.3s ease;
}
.skills .skills-content .left a:hover{
    color: #39c2e6;
    background: none;
}
.skills .skills-content .right .bars{
    margin-bottom: 15px;
}
.skills .skills-content .right .info{
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
}
.skills .skills-content .right span{
    font-weight: 500;
    font-size: 18px;
}
.skills .skills-content .right .line{
    height: 5px;
    width: 100%;
    background: lightgrey;
    position: relative;
}
.skills .skills-content .right .line::before{
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    background: #39c2e6;
}
.skills-content .right .blender::before{
    width: 100%;
}
.skills-content .right .photoshop::before{
    width: 100%;
}
.skills-content .right .unity::before{
    width: 100%;
}
.skills-content .right .htmlcss::before{
    width: 100%;
}
.skills-content .right .substance::before{
    width: 100%;
}

/* PORTFOLIO */
/* Portfolio content starts at line 1343 or in the end */

.portfolio .title::after{
    content: "my work";
}
.portfolio .carousel .card{
    background: #222;
    border-radius: 6px;
    padding: 25px 35px;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s ease;
}
.portfolio .carousel .card:hover{
    background: #39c2e6;
}
.portfolio .carousel .card .box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.portfolio .carousel .card:hover .box{
    transform: scale(1.05);
}
.portfolio .carousel .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}
.portfolio .carousel .card img{
    height: 340px;
    width: 340px;
    object-fit: cover;
    border-radius: 2%;
    border: 0px solid #39c2e6;
    transition: all 0.3s ease;
}
.portfolio .carousel .card:hover img{
    border-color: #fff;
}
.owl-dots{
    text-align: center;
    margin-top: 20px;
}
.owl-dot{
    height: 13px;
    width: 13px;
    margin: 0 5px;
    outline: none!important;
    border-radius: 50%;
    border: 2px solid #39c2e6!important;
    transition: all 0.3s ease;
}
.owl-dot.active{
    width: 35px;
    border-radius: 14px;
}
.owl-dot.active,
.owl-dot:hover{
    background: #39c2e6!important;
}

/* CONTACT */

.contact .title::after{
    content: "get in touch";
}
.contact .contact-content .column{
    width: calc(50% - 30px);
}
.contact .contact-content .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.contact .contact-content .left p{
    text-align: justify;
}
.contact .contact-content .left .icons{
    margin: 10px 0;
}
.contact .contact-content .row{
    display: flex;
    height: 65px;
    align-items: center;
}
.contact .contact-content .row .info{
    margin-left: 30px;
}
.contact .contact-content .row i{
    font-size: 25px;
    color: #39c2e6;
}
.contact .contact-content .info .head{
    font-weight: 500;
}
.contact .contact-content .info .sub-title{
    color: #333;
}
.contact .right form .fields{
    display: flex;
}
.contact .right form .field,
.contact .right form .fields .field{
    height: 45px;
    width: 100%;
    margin-bottom: 15px;
}
.contact .right form .textarea{
    height: 80px;
    width: 100%;
}
.contact .right form .name{
    margin-right: 10px;
}
.contact .right form .field input,
.contact .right form .textarea textarea{
    height: 100%;
    width: 100%;
    border: 1px solid lightgrey;
    border-radius: 6px;
    outline: none;
    padding: 0 15px;
    font-size: 17px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}
.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus{
    border-color: #b3b3b3;
}
.contact .right form .textarea textarea{
  padding-top: 10px;
  resize: none;
}
.contact .right form .button-area{
  display: flex;
  align-items: center;
}
.right form .button-area button{
  color: #fff;
  display: block;
  width: 160px!important;
  height: 45px;
  outline: none;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  flex-wrap: nowrap;
  background: #39c2e6;
  border: 2px solid #39c2e6;
  transition: all 0.3s ease;
}
.right form .button-area button:hover{
  color: #39c2e6;
  background: none;
}

.social-list__link:hover {
    opacity: 0.7;
    color: #39c2e6;
    
}

.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
    color: #39c2e6;
    transform: scale(1.9);
}
.fa-facebook {
    color: #39c2e6;
}

.social-list__item {
    margin: 0 1em;
}

.social-list__item:hover {
transform: scale(1.5);
}

.social__link {
    padding: 0.5em;
}
/* FOOTER */

footer {
    background: #111;
    padding: 15px 23px;
    color: #fff;
    text-align: center;
}
footer span a{
    color: #39c2e6;
    text-decoration: none;
}
footer span a:hover{
    text-decoration: underline;
}


/* RESPONSIVE MEDIA QUERIES */

@media (max-width: 1104px) {
    .about .about-content .left img{
        height: 350px;
        width: 350px;
    }
}

@media (max-width: 991px) {
    .max-width{
        padding: 0 50px;
    }
}
@media (max-width: 947px){
    .menu-btn{
        display: block;
        z-index: 999;
    }
    .menu-btn i.active:before{
        content: "\f00d";
    }
    .navbar .menu{
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        background: #111;
        text-align: center;
        padding-top: 80px;
        transition: all 0.3s ease;
    }
    .navbar .menu.active{
        left: 0;
    }
    .navbar .menu li{
        display: block;
    }
    .navbar .menu li a{
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;
    }
    .home .home-content .text-2{
        font-size: 70px;
    }
    .home .home-content .text-3{
        font-size: 35px;
    }
    .home .home-content a{
        font-size: 23px;
        padding: 10px 30px;
    }
    .max-width{
        max-width: 930px;
    }
    .about .about-content .column{
        width: 100%;
    }
    .about .about-content .left{
        display: flex;
        justify-content: center;
        margin: 0 auto 60px;
    }
    .about .about-content .right{
        flex: 100%;
    }
    .workflow .work-content .card{
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }
    .skills .skills-content .column,
    .contact .contact-content .column{
        width: 100%;
        margin-bottom: 35px;
    }
}

@media (max-width: 690px) {
    .max-width{
        padding: 0 23px;
    }
    .home .home-content .text-2{
        font-size: 60px;
    }
    .home .home-content .text-3{
        font-size: 32px;
    }
    .home .home-content a{
        font-size: 20px;
    }
    .workflow .work-content .card{
        width: 100%;
    }
}

@media (max-width: 500px) {
    .home .home-content .text-2{
        font-size: 50px;
    }
    .home .home-content .text-3{
        font-size: 27px;
    }
    .about .about-content .right .text,
    .skills .skills-content .left .text{
        font-size: 19px;
    }
    .contact .right form .fields{
        flex-direction: column;
    }
    .contact .right form .name,
    .contact .right form .email{
        margin: 0;
    }
    .right form .error-box{
       width: 150px;
    }
    .scroll-up-btn{
        right: 15px;
        bottom: 15px;
        height: 38px;
        width: 35px;
        font-size: 23px;
        line-height: 38px;
    }
}

/*  ===>>  PROJECTS  <<===  */


.project {
    max-width: 1300px;
    padding: 30px 80px;
    margin: auto;
}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;

}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
  z-index: 100;
}

.flex-item-right {
  background-color: #39c2e6;
  padding: 10px;
  flex: 50%;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}



.sectionsubtitle {
    color: #39c2e6;
    text-decoration: underline;
    padding-bottom: 20px;
}

.sectiongrey {
    background-color: #f5f5f5 !important;
    padding: 10px;
}

.sectionwhite {
    padding: 10px;
    background-color: #f5f5f5 !important;
}


/* WORKFLOW */

/* GAME GROUP PROJECT */

    /* LEVEL DESIGN & SKETCHES */

@media screen and (min-width: 800px){

.ggp1d3container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(8, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}  

.ggp1d3item1 {
    grid-area: 1/1/8/6;
    background: url("img/ggp/1.3.2.jpg") no-repeat; 
}
.ggp1d3item2 {
    grid-area: 7/1/8/2;
    margin-top: 75px;
}

.ggp1d3item3 {
    grid-area: 1/6/8/12;
    background: url("img/ggp/1.3.3.png") no-repeat; 
}

.ggp1d3item4 {
    grid-area: 7/6/8/7;
    margin-top: 75px;
}
}           

    /* MODELLING TREES */

@media screen and (min-width: 800px){

.ggp1d4container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(6, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}  

.ggp1d4item1 {
    grid-area: 1/1/2/5;
}

.ggp1d4item2 {
    grid-area: 3/1/6/5;
    background: url("img/ggp/1.4.1.png") no-repeat; 
    margin-top: 20px;
}

.ggp1d4item3 {
    grid-area: 6/1/6/2;
}

.ggp1d4item4 {
    grid-area: 1/5/6/12;
    background: url("img/ggp/1.4.2.png") no-repeat; 
}

.ggp1d4item5 {
    grid-area: 6/5/6/6;
}
}           

    /* OUTLINE TRACING */

 @media screen and (min-width: 800px){

.ggp1d5container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(6, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}     

.ggp1d5item1 {
    grid-area: 1/1/2/3;
}

.ggp1d5item2 {
    grid-area: 1/3/6/12;
    background: url("img/ggp/1.5.1.png") no-repeat;
    margin-left: 30px; 
}

.ggp1d5item3 {
    grid-area: 5/3/6/4;
    margin-top: 60px;
    margin-left: 30px; 
}
}

    /* THE ISLAND */

@media screen and (min-width: 800px){

.ggp1d6container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(4, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}  

.ggp1d6item1 {
    grid-area: 1/1/4/6;
    background: url("img/ggp/1.6.1.png") no-repeat; 
}

.ggp1d6item2 {
    grid-area: 3/1/4/2;
    margin-top: 80px;
}

.ggp1d6item3 {
    grid-area: 1/6/4/12;
    background: url("img/ggp/1.6.2.png") no-repeat; 
}

.ggp1d6item4 {
    grid-area: 3/6/4/6;
    margin-top: 80px;
}
}               

    /* CONCLUSION */

@media screen and (min-width: 800px){

.ggp1d7container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(10, 120px);
    grid-template-rows: repeat(6, 120px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}  

.ggp1d7item1 {
    grid-area: 1/1/3/3;
    background: url("img/ggp/1.7.1.png") no-repeat; 
}

.ggp1d7item2 {
    grid-area: 1/3/3/6;
    background: url("img/ggp/1.7.2.png") no-repeat; 
}

.ggp1d7item3 {
    grid-area: 1/5/3/8;
    background: url("img/ggp/1.7.3.png") no-repeat; 
}

.ggp1d7item4 {
    grid-area: 1/7/3/11;
    background: url("img/ggp/1.7.4.png") no-repeat; 
}

.ggp1d7item5 {
    grid-area: 3/1/6/3;
    background: url("img/ggp/1.7.5.png") no-repeat; 
}

.ggp1d7item6 {
    grid-area: 3/3/6/6;
    background: url("img/ggp/1.7.6.png") no-repeat; 
}

.ggp1d7item7 {
    grid-area: 3/5/6/8;
    background: url("img/ggp/1.7.7.png") no-repeat; 
}

.ggp1d7item8 {
    grid-area: 3/7/6/11;
    background: url("img/ggp/1.7.8.png") no-repeat; 
}
}

/* PORTFOLIO WEBSITE */

    /* DESIGN DILEMMA */

@media screen and (min-width: 800px){

.web1d2container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(6, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}  

.web1d2item1 {
    grid-area: 1/1/5/6;
    background: url("img/web/1.2.1.jpg") no-repeat; 
}
.web1d2item2 {
    grid-area: 4/1/5/2;
    margin-top: 60px;
}

.web1d2item3 {
    grid-area: 5/1/6/6;
    background: url("img/web/1.2.2.png") no-repeat; 
}

.web1d2item4 {
    grid-area: 6/1/6/2;
}

.web1d2item5 {
    grid-area: 1/6/5/11;
    background: url("img/web/1.2.3.jpg") no-repeat; 
}
.web1d2item6 {
    grid-area: 4/6/5/7;
    margin-top: 60px;
}

.web1d2item7 {
    grid-area: 5/6/6/11;
    background: url("img/web/1.2.4.png") no-repeat; 
}

.web1d2item8 {
    grid-area: 6/6/6/7;
}
}           

    /* STRUCTURE */

@media screen and (min-width: 800px){

.web1d3container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(3, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}  
.web1d3item1 {
    grid-area: 1/1/3/4;
}

.web1d3item2 {
    grid-area: 1/4/4/6;
    background: url("img/web/1.3.1.png") no-repeat; 
    margin-left: 20px;
}
.web1d3item3 {
    grid-area: 3/4/4/4;
    margin-top: 80px;
    margin-left: 20px;
}

.web1d3item4 {
    grid-area: 1/5/4/7;
    background: url("img/web/1.3.2.png") no-repeat; 
    margin-left: 40px;
}

.web1d3item5 {
    grid-area: 3/5/4/6;
    margin-top: 50px;
    margin-left: 40px;
}
}

    /* WIREFRAMES */

@media screen and (min-width: 800px){

.web1d4container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(8, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}  
.web1d4item1 {
    grid-area: 1/1/8/6;
    background: url("img/web/1.4.1.jpg") no-repeat; 
}
.web1d4item2 {
    grid-area: 7/1/8/2;
    margin-top: 80px;
}

.web1d4item3 {
    grid-area: 1/6/8/11;
    background: url("img/web/1.4.2.jpg") no-repeat; 
}

.web1d4item4 {
    grid-area: 7/6/8/7;
    margin-top: 80px;
}
}

    /*

@media screen and (min-width: 800px){

.web1d5container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(8, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}  
.web1d5item1 {
    grid-area: 1/1/8/6;
    background: url("img/web/1.4.1.jpg") no-repeat; 
}
.web1d5item2 {
    grid-area: 7/1/8/2;
    margin-top: 80px;
}

.web1d5item3 {
    grid-area: 1/6/8/11;
    background: url("img/web/1.4.2.jpg") no-repeat; 
}

.web1d5item4 {
    grid-area: 7/6/8/7;
    margin-top: 80px;
}
}

    */  

/* MOBILE DEVICE PROJECT */


/* CONCEPT */

@media screen and (min-width: 800px){

.mdp1d1container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(7, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.mdp1d1item1 {
    grid-area: 1/1/5/4;
}    

.mdp1d1item2 {
    grid-area: 1/5/7/12;
    background: url("img/mdp/1.1.1.png") no-repeat;
}
.mdp1d1item3 {
    grid-area: 6/5/7/6;
    margin-top: 90px;
}
}

/* STRUCTURING */

@media screen and (min-width: 800px){

.mdp1d3container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(9, 100px);
    grid-template-rows: repeat(5, 100px);
    grid-column-gap: 20px;
}

.mdp1d3item1 {
    grid-area: 1/1/2/4;
}

.mdp1d3item2 {
    grid-area: 1/4/5/9;
    background: url("img/mdp/1.3.1.png") no-repeat;
}

.mdp1d3item3 {
    grid-area: 4/4/5/5;
    margin-top: 60px;  
}
}

/* MODELLING THE CHARACTER*/

@media screen and (min-width: 800px){

.mdp1d4container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(12, 100px);
    grid-column-gap: 15px;
    grid-row-gap: 10px;
}

.mdp1d4item1 {
    grid-area: 1/1/8/3;
}

.mdp1d4item2 {
    grid-area: 1/3/8/7;
    background: url("img/mdp/1.4.1.png") no-repeat;
}

.mdp1d4item3 {
    grid-area: 7/3/8/4;
    margin-top: 110px; 
}

.mdp1d4item4 {
    grid-area: 1/7/8/11;
    background: url("img/mdp/1.4.2.png") no-repeat;
}

.mdp1d4item5 {
    grid-area: 7/7/8/8;
    margin-top: 110px;   
}

.mdp1d4item6 {
    grid-area: 8/1/11/11;
    background: url("img/mdp/1.4.3.png") no-repeat;
    margin-top: 40px;
}
.mdp1d4item7 {
    grid-area: 11/1/12/2;
     
}
}

/* MODELLING THE HANGAR*/

@media screen and (min-width: 800px){

.mdp1d5container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(12, 100px);
    grid-column-gap: 15px;
    grid-row-gap: 10px;
}

.mdp1d5item1 {
    grid-area: 1/1/2/11;
}

.mdp1d5item2 {
    grid-area: 2/1/7/11;
    background: url("img/mdp/1.5.3.png") no-repeat;
}

.mdp1d5item3 {
    grid-area: 6/1/7/2;
    margin-top: 100px; 
}

.mdp1d5item4 {
    grid-area: 7/1/12/6;
    background: url("img/mdp/1.5.1.png") no-repeat;
    margin-top: 40px;
}

.mdp1d5item5 {
    grid-area: 11/1/12/2;
    margin-top: 20px;   
}

.mdp1d5item6 {
    grid-area: 7/6/12/11;
    background: url("img/mdp/1.5.2.png") no-repeat;
    margin-top: 40px;
}
.mdp1d5item7 {
    grid-area: 11/6/12/7;
    margin-top: 20px;
     
}
}

    /* TEXTURING */

@media screen and (min-width: 800px){

.mdp1d7container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(12, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.mdp1d7item1 {
    grid-area: 1/1/2/6;
}

.mdp1d7item2 {
    grid-area: 2/1/5/6;
    background: url("img/mdp/1.7.1.png") no-repeat;
    margin-top: 50px;
}

.mdp1d7item3 {
    grid-area: 4/1/5/2;
     margin-top: 70px;
}

.mdp1d7item4 {
    grid-area: 1/7/6/12;
    background: src("img/mdp/1.7.2.m4v") no-repeat;
}

.mdp1d7item5 {
    grid-area: 5/7/6/8;
    padding-top: 170px;   
}

.mdp1d7item6 {
    grid-area: 5/1/11/6;
    background: url("img/mdp/1.7.3.png") no-repeat; 
    
}
.mdp1d7item7 {
    grid-area: 6/1/7/2;
    margin-top: 80px;
    
}

.mdp1d7item8 {
    grid-area: 7/1/12/5;
    margin-top: 20px;  
}
.mdp1d7item9 {
    grid-area: 7/6/12/12;
    background: url("img/mdp/1.7.4.png") no-repeat;   
}
.mdp1d7item10 {
    grid-area: 11/6/12/7;
    margin-top: 100px;   
}
}

    /* RENDERING */

 @media screen and (min-width: 800px){

.mdp1d8container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(12, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.mdp1d8item1 {
    grid-area: 1/1/5/4;
}

.mdp1d8item2 {
    grid-area: 1/5/6/12;
    background: url("img/mdp/1.8.1.png") no-repeat;
    margin-right: 80px;
}

.mdp1d8item3 {
    grid-area: 5/5/6/6;
    margin-top: 100px;   
}

.mdp1d8item4 {
    grid-area: 6/1/12/12;
    background: url("img/mdp/1.8.2.png") no-repeat;
    margin-right: 80px;
    margin-top: 40px;
}

.mdp1d8item5 {
    grid-area: 10/1/11/2;
    margin-top: 80px;   
}
}   

    /* CAMERA ANIMATION */

@media screen and (min-width: 800px){

.mdp2d0container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(12, 100px);
    grid-column-gap: 10px;
}

.mdp2d0item1 {
    grid-area: 1/1/5/6;
    background: url("img/mdp/2.0.1.png") no-repeat;
}

.mdp2d0item2 {
    grid-area: 4/1/5/2;
     margin-top: 100px;
}

.mdp2d0item3 {
    grid-area: 6/1/12/6;
    background: url("img/mdp/2.0.2.png") no-repeat;
}

.mdp2d0item4 {
    grid-area: 8/1/12/2;
    padding-top: 100px;   
}

.mdp2d0item5 {
    grid-area: 1/6/12/11;
    background: src("img/mdp/2.0.3.m4v") no-repeat;
    margin-left: 20px;
}
.mdp2d0item6 {
    grid-area: 11/6/12/7;
}
}        

/* INTERACTIVE PROJECT */

    /* STRUCTURING */   

@media screen and (min-width: 800px){

.ip1d3container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(4, 180px);
    grid-column-gap: 20px;
}

.ip1d3item1 {
    grid-area: 1/1/2/5;
    padding-bottom: 20px;
}

.ip1d3item2 {
    grid-area: 2/1/5/5;
    background: url("img/ip/1.3.2.png") no-repeat;
}

.ip1d3item3 {
    grid-area: 4/1/6/2;
    padding-top: 140px;  
}

.ip1d3item4 {
    grid-area: 1/5/5/9;
    background: url("img/ip/1.3.1.png") no-repeat;
}

.ip1d3item5 {
    grid-area: 4/5/5/8;
    padding-top: 80px;   
}
}

    /* MODELLING */

@media screen and (min-width: 800px){

.ip1d4container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(7, 100px);
    grid-column-gap: 15px;
    grid-row-gap: 10px;
}

.ip1d4item1 {
    grid-area: 1/1/2/6;
}

.ip1d4item2 {
    grid-area: 2/1/7/6;
    background: url("img/ip/1.4.1.png") no-repeat;
}

.ip1d4item3 {
    grid-area: 5/1/7/2;
    padding-top: 15px; 
}

.ip1d4item4 {
    grid-area: 1/6/5/12;
    background: url("img/ip/1.4.2.png") no-repeat;
}

.ip1d4item5 {
    grid-area: 4/6/6/7;
    padding-top: 90px;   
}

.ip1d4item6 {
    grid-area: 5/6/6/11;
    padding-top: 20px;     
}
}

    /* TEXTURING */

@media screen and (min-width: 800px){

.ip1d5container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(15, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.ip1d5item1 {
    grid-area: 1/1/9/4;
    background: url("img/ip/1.5.1.png") no-repeat;
}

.ip1d5item2 {
    grid-area: 8/1/9/2;
    padding-top: 10px;
}

.ip1d5item3 {
    grid-area: 1/4/5/11;
    background: url("img/ip/1.5.2.png") no-repeat;
}

.ip1d5item4 {
    grid-area: 3/4/5/5;
    padding-top: 80px;
}

.ip1d5item5 {
    grid-area: 3/4/5/11;
    padding-top: 110px;   
}

.ip1d5item6 {
    grid-area: 5/4/8/7;
    background: url("img/ip/1.5.3.png") no-repeat; 
    padding-top: 90px;    
}
.ip1d5item7 {
    grid-area: 7/4/9/5;
    padding-top: 80px;
}

.ip1d5item8 {
    grid-area: 5/7/8/10;
    background: url("img/ip/1.5.5.png") no-repeat;
    margin-left: 20px;  
}

.ip1d5item9 {
    grid-area: 7/7/9/8;
    padding-top: 80px;
    margin-left: 20px;      
}
.ip1d5item10 {
    grid-area: 8/1/15/11;
    background: url("img/ip/1.5.4.png") no-repeat;  
    margin-top: 50px;
}

.ip1d5item11 {
    grid-area: 14/1/15/2;
    padding-top: 110px;     
}
}

    /* LIGHTING EFFECTS */

 @media screen and (min-width: 800px){

.ip1d6container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(8, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.ip1d6item1 {
    grid-area: 1/1/3/5;
}

.ip1d6item2 {
    grid-area: 1/8/4/12;
    background: url("img/ip/1.6.1.png") no-repeat;
    margin-left: 100px;
}

.ip1d6item3 {
    grid-area: 3/9/4/10;
    margin-top: 30px;  
}

.ip1d6item4 {
    grid-area: 1/5/3/8;
    background: src("img/ip/1.6.4.m4v") no-repeat;
}

.ip1d6item5 {
    grid-area: 3/5/4/6;
    padding-top: 10px;   
}

.ip1d6item6 {
    grid-area: 3/1/8/5;
    background: url("img/ip/1.6.2.png") no-repeat; 
    margin-top: 60px;
       
}
.ip1d6item7 {
    grid-area: 6/1/8/2;
    padding-top: 90px;
}

.ip1d6item8 {
    grid-area: 3/5/8/11;
    background: url("img/ip/1.6.3.png") no-repeat;
    margin-top: 60px;  
}

.ip1d6item9 {
    grid-area: 7/5/9/6;
    padding-top: 70px;      
}
}

    /* COLOURS AND RENDERING */


@media screen and (min-width: 800px){

.ip1d7container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(6, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.ip1d7item1 {
    grid-area: 1/1/2/9;
}    

.ip1d7item2 {
    grid-area: 2/1/6/6;
    background: url("img/ip/1.7.1.png") no-repeat; 
    margin-top: 20px;
       
}
.ip1d7item3 {
    grid-area: 5/1/6/2;
    margin-top: 90px;
    
}

.ip1d7item4 {
    grid-area: 2/5/6/12;
    background: url("img/ip/1.7.2.png") no-repeat;
    margin-top: 20px;
    margin-left: 100px;  
}

.ip1d7item5 {
    grid-area: 5/5/6/6;
    margin-top: 90px;

}
}       



    /* TEXTURING */

@media screen and (min-width: 800px){

.ip1d5container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(15, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.ip1d5item1 {
    grid-area: 1/1/9/4;
    background: url("img/ip/1.5.1.png") no-repeat;
}

.ip1d5item2 {
    grid-area: 8/1/9/2;
    padding-top: 10px;
}

.ip1d5item3 {
    grid-area: 1/4/5/11;
    background: url("img/ip/1.5.2.png") no-repeat;
}

.ip1d5item4 {
    grid-area: 3/4/5/5;
    padding-top: 80px;
}

.ip1d5item5 {
    grid-area: 3/4/5/11;
    padding-top: 110px;   
}

.ip1d5item6 {
    grid-area: 5/4/8/7;
    background: url("img/ip/1.5.3.png") no-repeat; 
    padding-top: 90px;    
}
.ip1d5item7 {
    grid-area: 7/4/9/5;
    padding-top: 80px;
}

.ip1d5item8 {
    grid-area: 5/7/8/10;
    background: url("img/ip/1.5.5.png") no-repeat;
    margin-left: 20px;  
}

.ip1d5item9 {
    grid-area: 7/7/9/8;
    padding-top: 80px;
    margin-left: 20px;      
}
.ip1d5item10 {
    grid-area: 8/1/15/11;
    background: url("img/ip/1.5.4.png") no-repeat;  
    margin-top: 50px;
}

.ip1d5item11 {
    grid-area: 14/1/15/2;
    padding-top: 110px;     
}
}

    /* LIGHTING EFFECTS */

 @media screen and (min-width: 800px){

.ip1d6container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(8, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.ip1d6item1 {
    grid-area: 1/1/3/5;
}

.ip1d6item2 {
    grid-area: 1/8/4/12;
    background: url("img/ip/1.6.1.png") no-repeat;
    margin-left: 100px;
}

.ip1d6item3 {
    grid-area: 3/9/4/10;
    margin-top: 30px;  
}

.ip1d6item4 {
    grid-area: 1/5/3/8;
    background: src("img/ip/1.6.4.m4v") no-repeat;
}

.ip1d6item5 {
    grid-area: 3/5/4/6;
    padding-top: 10px;   
}

.ip1d6item6 {
    grid-area: 3/1/8/5;
    background: url("img/ip/1.6.2.png") no-repeat; 
    margin-top: 60px;
       
}
.ip1d6item7 {
    grid-area: 6/1/8/2;
    padding-top: 90px;
}

.ip1d6item8 {
    grid-area: 3/5/8/11;
    background: url("img/ip/1.6.3.png") no-repeat;
    margin-top: 60px;  
}

.ip1d6item9 {
    grid-area: 7/5/9/6;
    padding-top: 70px;      
}
}

/* ---------   YEAR TWO   ---------*/

/* CSI PROJECT */

    /* SOFTWARE */   

@media screen and (min-width: 800px){

.csi1d2container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr, 1fr;
    grid-column-gap: 20px;
    padding-left: 10px;
}

.csi1d2item1 {
    grid-area: 1/1/1/1;
    padding-bottom: 20px;
}

.csi1d2item2 {
    grid-area: 1/2/1/2;
    padding-bottom: 20px;
}

.csi1d2item3 {
    grid-area: 1/3/1/3;
    padding-bottom: 20px;  
}

.csi1d2item4 {
    grid-area: 2/1/2/6;
    padding-bottom: 20px;  
}
}

    /* STRUCTURING */

@media screen and (min-width: 800px){    

.csi2d1container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 20px;
    padding-left: 10px;
}

.csi2d1item1 {
    grid-area: 1/1/3/1;
}

.csi2d1item2 {
    grid-area: 1/2/4/2;
    background: url("img/csi/2.1.1.jpg") no-repeat;
}

.csi2d1item3 {
    grid-area: 4/2/4/2;
    padding-top: 10px;  
}
}

    /* SITEPLAN */

@media screen and (min-width: 800px){

.csi2d9container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(6, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.csi2d9item1 {
    grid-area: 1/1/2/9;
}    

.csi2d9item2 {
    grid-area: 2/1/6/6;
    background: url("img/csi/2.9.1.jpg") no-repeat; 
    margin-top: 20px;
       
}
.csi2d9item3 {
    grid-area: 5/1/6/2;
    margin-top: 25px;
    
}

.csi2d9item4 {
    grid-area: 2/5/6/12;
    background: url("img/csi/2.9.2.jpg") no-repeat;
    margin-top: 20px;
    margin-left: 100px;  
}

.csi2d9item5 {
    grid-area: 5/6/6/6;
    margin-top: 25px;

}
}     

    /* BUILDING PROGRESSION */

@media screen and (min-width: 800px){

.csi2d8container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(5, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.csi2d8item1 {
    grid-area: 1/1/5/6;
    background: url("img/csi/2.8.1.jpg") no-repeat; 
    margin-top: 20px;
       
}
.csi2d8item2 {
    grid-area: 4/1/5/2;
    margin-top: 105px;
    
}

.csi2d8item3 {
    grid-area: 1/5/5/12;
    background: url("img/csi/2.8.2.jpg") no-repeat;
    margin-top: 20px;
    margin-left: 100px;  
}

.csi2d8item4 {
    grid-area: 4/6/5/6;
    margin-top: 105px;

}
} 

   /* THE FENCE */

@media screen and (min-width: 800px){

.csi2d5container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(8, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.csi2d5item1 {
    grid-area: 1/1/4/9;
}    

.csi2d5item2 {
    grid-area: 4/1/8/6;
    background: url("img/csi/2.5.1.jpg") no-repeat; 
    margin-top: 20px;
       
}
.csi2d5item3 {
    grid-area: 7/1/8/2;
    margin-top: 105px;
    
}

.csi2d5item4 {
    grid-area: 4/5/8/12;
    background: url("img/csi/2.5.2.jpg") no-repeat;
    margin-top: 20px;
    margin-left: 100px;  
}

.csi2d5item5 {
    grid-area: 7/6/8/6;
    margin-top: 105px;

}
}     

    /* COLOURS AND RENDERING */

/* RSA PROJECT */

    /* SOFTWARE */   

@media screen and (min-width: 800px){

.rsa1d0container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    padding-left: 10px;
}

.rsa1d0item1 {
    grid-area: 1/1/1/1;
    padding-bottom: 20px;
}

.rsa1d0item2 {
    grid-area: 1/2/1/2;
    padding-bottom: 20px;
}
}

   /* STRUCTURING */

@media screen and (min-width: 800px){

.rsa1d7container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(6, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.rsa1d7item1 {
    grid-area: 1/1/2/9;
}    

.rsa1d7item2 {
    grid-area: 2/1/6/6;
    background: url("img/rsa/1.7.1.jpg") no-repeat; 
    margin-top: 20px;
       
}
.rsa1d7item3 {
    grid-area: 5/1/6/2;
    margin-top: 105px;
    
}

.rsa1d7item4 {
    grid-area: 2/5/6/12;
    background: url("img/rsa/1.7.2.jpg") no-repeat;
    margin-top: 20px;
    margin-left: 100px;  
}

.rsa1d7item5 {
    grid-area: 5/6/6/6;
    margin-top: 105px;

}
}      

   /* THE SEAFLOOR */

@media screen and (min-width: 800px){

.rsa1d8container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(7, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.rsa1d8item1 {
    grid-area: 1/1/3/9;
}    

.rsa1d8item2 {
    grid-area: 3/1/7/6;
    background: url("img/rsa/1.8.1.jpg") no-repeat; 
    margin-top: 20px;
       
}
.rsa1d8item3 {
    grid-area: 6/1/7/2;
    margin-top: 15px;
    
}

.rsa1d8item4 {
    grid-area: 3/5/7/12;
    background: url("img/rsa/1.8.2.jpg") no-repeat;
    margin-top: 20px;
    margin-left: 100px;  
}

.rsa1d8item5 {
    grid-area: 6/6/7/6;
    margin-top: 15px;

}
}  

/* GROUP CLIENT PROJECT - THE EARTH MUSEUM */

    /* FUTURE IMPLICATIONS */

@media screen and (min-width: 800px){

.gcptem1d4container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(3, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.gcptem1d4item1 {
    grid-area: 1/1/4/6;
    background: url("img/gcptem/1.4.1.jpg") no-repeat; 
       
}
.gcptem1d4item2 {
    grid-area: 4/1/4/2;
    
}

.gcptem1d4item3 {
    grid-area: 1/5/4/12;
    background: url("img/gcptem/1.4.2.jpg") no-repeat;
    margin-left: 100px;  
}

.gcptem1d4item4 {
    grid-area: 4/6/4/6;

}

    /* DELIVERABLES */

.gcptem1d7container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(5, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.gcptem1d7item1 {
    grid-area: 1/1/5/6;
    background: url("img/gcptem/1.7.1.jpg") no-repeat; 
       
}
.gcptem1d7item2 {
    grid-area: 4/1/5/2;
    margin-top: 75px;
}

.gcptem1d7item3 {
    grid-area: 1/5/5/12;
    background: url("img/gcptem/1.7.2.jpg") no-repeat;
    margin-left: 100px;  
}

.gcptem1d7item4 {
    grid-area: 4/6/5/6;
    margin-top: 75px;

}

    /* MODELLING */

.gcptem2d3container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(10, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.gcptem2d3item1 {
    grid-area: 1/1/5/6;
    background: url("img/gcptem/2.3.2.jpg") no-repeat; 
       
}
.gcptem2d3item2 {
    grid-area: 4/1/5/2;
    margin-top: 105px;
}

.gcptem2d3item3 {
    grid-area: 1/5/5/12;
    background: url("img/gcptem/2.3.3.jpg") no-repeat;
    margin-left: 100px;  
}

.gcptem2d3item4 {
    grid-area: 4/6/5/6;
    margin-top: 105px;
}
.gcptem2d3item5 {
    grid-area: 6/1/10/6;
    background: url("img/gcptem/2.3.4.jpg") no-repeat; 
       
}
.gcptem2d3item6 {
    grid-area: 9/1/10/2;
    margin-top: 105px;
}

.gcptem2d3item7 {
    grid-area: 6/5/10/12;
    background: url("img/gcptem/2.3.5.jpg") no-repeat;
    margin-left: 100px;  
}

.gcptem2d3item8 {
    grid-area: 9/6/10/6;
    margin-top: 105px;    

}
} 

/* MAJOR RESEARCH PROJECT - THE EARTH MUSEUM */

    /* INITIAL IDEAS */

@media screen and (min-width: 800px){

.mrp1d3container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(8, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.mrp1d3item1 {
    grid-area: 1/1/8/6;
    margin-top: 20px;      
}

.mrp1d3item2 {
    grid-area: 1/5/8/12;
    background: url("img/mrp/1.3.1.jpg") no-repeat;
    margin-top: 20px;
    margin-left: 100px;  
}

.mrp1d3item3 {
    grid-area: 7/6/8/6;
    margin-top: 65px;

}





}    

/* PORTFOLIO CONTENT */

/* SKYSCRAPER */  

    /*THE PARAMETRIC SKYSCRAPER */

@media screen and (min-width: 800px){

.sky1d2container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(9, 100px);
    grid-column-gap: 20px;
}

.sky1d2item1 {
    grid-area: 1/1/3/10;
}
.sky1d2item2 {
    grid-area: 3/1/9/11;
    background: url("img/ow/sky/1.2.1.jpg") no-repeat;
}
.sky1d2item3 {
    grid-area: 8/1/9/2; 
    margin-top: 70px; 
}
}
    /* GOOGLE G.I.S. */ 

@media screen and (min-width: 800px){

.sky1d3container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(10, 100px);
    grid-template-rows: repeat(10, 100px);
    grid-column-gap: 20px;
}

.sky1d3item1 {
    grid-area: 1/1/4/5;
    padding-bottom: 20px;
}

.sky1d3item2 {
    grid-area: 1/5/5/10;
    background: url("img/ow/sky/1.3.1.png") no-repeat;
}

.sky1d3item3 {
    grid-area: 3/5/4/6;
    padding-top: 120px;  
}

.sky1d3item4 {
    grid-area: 5/1/9/5;
    background: url("img/ow/sky/1.3.2.png") no-repeat;
}

.sky1d3item5 {
    grid-area: 8/1/9/2;
    padding-top: 20px;   
}
.sky1d3item6 {
    grid-area: 5/5/10/10;
    background: url("img/ow/sky/1.3.3.png") no-repeat;
}

.sky1d3item7 {
    grid-area: 7/5/8/6;
    padding-top: 70px;   
}
}

/* NEON CITY */

    /* TECHNIQUES */

@media screen and (min-width: 800px){

.neon1d2container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(10, 100px);
    grid-template-rows: repeat(10, 100px);
    grid-column-gap: 20px;
}

.neon1d2item1 {
    grid-area: 1/1/4/5;
    padding-bottom: 20px;
}

.neon1d2item2 {
    grid-area: 1/5/5/10;
    background: url("img/ow/neon/1.2.1.png") no-repeat;
}

.neon1d2item3 {
    grid-area: 5/5/6/6;  
}

.neon1d2item4 {
    grid-area: 6/1/11/10;
    background: url("img/ow/neon/1.2.2.png") no-repeat;
}

.neon1d2item5 {
    grid-area: 10/1/11/2;
    padding-top: 20px;   
}
}

    /* ALTERNATIVE PERSPECTIVE */

@media screen and (min-width: 800px){

.neon1d3container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(4, 100px);
    grid-column-gap: 20px;
}

.neon1d3item1 {
    grid-area: 1/1/3/5;
    padding-bottom: 20px;
}

.neon1d3item2 {
    grid-area: 1/5/3/12;
    background: url("img/ow/neon/nca.m4v") no-repeat;
}

.neon1d3item3 {
    grid-area: 4/5/4/6;  
    margin-top: 50px;
}
}    

    /* BAR BOX */

@media screen and (min-width: 800px){

.bb1d4container {
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(12, 100px);
    grid-template-rows: repeat(5, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.bb1d4item1 {
    grid-area: 1/1/5/6;
    background: url("img/bb/plasticb.jpg") no-repeat; 
    margin-top: 20px;
       
}
.bb1d4item2 {
    grid-area: 4/1/5/2;
    margin-top: 105px;
    
}

.bb1d4item3 {
    grid-area: 1/5/5/12;
    background: url("img/bb/plasticg.jpg") no-repeat;
    margin-top: 20px;
    margin-left: 100px;  
}

.bb1d4item4 {
    grid-area: 4/6/5/6;
    margin-top: 105px;

}
}