/*----------------Link--------------------*/

.link-logo-hero {
    position: relative;
    grid-column-start: 1;
    grid-column-end: 13;
    height: 100vh;
    margin: 0 -50px 0 -50px;
    background-color: var(--dark);
}

.link-logo-hero img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 20%;
    height: 20%;
}
.principles {}

.img-gallery-principles {
    grid-column-start: ;
    grid-column-end: 12;
    height: 85vh;
}

.principle-card { 
    padding: 40px 50px 40px 50px; 
    min-height: 75%;
    border-radius: 4px; 
    transition: all ease 0.2s
}

.principle-card:hover { transform: scale(1.01); }

.principle-card-make { background-color: #0f1d4c; }
.principle-card-give { background-color: #ffebe5; }
.principle-card-share { background-color: #122e95; }

.principle-topline {
    font-family: 'SuisseIntlMono';
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.5rem;
    letter-spacing: 0.1rem;
}
.principle-topline-make { color: #7E9BFF; }
.principle-topline-give { color: #D78175; }
.principle-topline-share { color: white; }

.principle-head {
    font-family: 'SuisseIntlSemibold';
    font-size: 1.6rem;
    margin-top: 8px;
}
.principle-head-make { color: white; }
.principle-head-give { color: black }
.principle-head-share { color: white; }

.principle-copy {
    margin-top: 40px;
    /* font-size: 1.25rem;
    line-height: 1.8rem; */
}
.principle-copy-make { color: white; }
.principle-copy-give { color: black; }
.principle-copy-share { color: white; }

.principle-01 { grid-column-start: 1; grid-column-end: 4; }
.principle-02 { grid-column-start: 4;grid-column-end: 7; }
.principle-03 { grid-column-start: 7;grid-column-end: 10; }
.principle-04 { grid-column-start: 10;grid-column-end: 14; }
.principle-05 { grid-column-start: 1;grid-column-end: 4; }
.principle-06 { grid-column-start: 4;grid-column-end: 7; }
.principle-07 { grid-column-start: 7;grid-column-end: 10; }
.principle-08 { grid-column-start: 10;grid-column-end: 14; }

@media only screen and (min-width : 890px) and (max-width : 1260px){
    .principle-01 { grid-column-start: 1; grid-column-end: 5; }
    .principle-02 { grid-column-start: 5; grid-column-end: 9; }
    .principle-03 { grid-column-start: 9; grid-column-end: 13; }
    .principle-04 { grid-column-start: 1; grid-column-end: 5; }
    .principle-05 { grid-column-start: 5; grid-column-end: 9; }
    .principle-06 { grid-column-start: 9; grid-column-end: 13; }
    .principle-07 { grid-column-start: 1; grid-column-end: 5; }
    .principle-08 { grid-column-start: 5; grid-column-end: 9; }
}
@media only screen and (min-width : 768px) and (max-width : 890px){
    .principle-01 { grid-column-start: 1; grid-column-end: 7; }
    .principle-02 { grid-column-start: 7; grid-column-end: 13; }
    .principle-03 { grid-column-start: 1; grid-column-end: 7; }
    .principle-04 { grid-column-start: 7; grid-column-end: 13; }
    .principle-05 { grid-column-start: 1; grid-column-end: 7; }
    .principle-06 { grid-column-start: 7; grid-column-end: 13; }
    .principle-07 { grid-column-start: 1; grid-column-end: 7; }
    .principle-08 { grid-column-start: 7; grid-column-end: 13; }
}
@media only screen and (max-width : 768px){
    .principles { margin: 0 -8px 0 -8px; }
    .img-gallery-principles { grid-column-start: 1; grid-column-end: 13; height: 60vh; min-height: 480px; margin-left: -10px; margin-right: -10px;}
    .principle-card { padding: 20px 10px 20px 15px; border-radius: 8px; min-height: 95%;} 
    .principle-copy {
        font-size: 0.8rem;
        line-height: 1.2rem;
        letter-spacing: 0.012rem;
    }
    .principle-01 { grid-column-start: 1; grid-column-end: 13; }
    .principle-02 { grid-column-start: 1; grid-column-end: 13; }
    .principle-03 { grid-column-start: 1; grid-column-end: 13; }
    .principle-04 { grid-column-start: 1; grid-column-end: 13; }
    .principle-05 { grid-column-start: 1; grid-column-end: 13; }
    .principle-06 { grid-column-start: 1; grid-column-end: 13; }
    .principle-07 { grid-column-start: 1; grid-column-end: 13; }
    .principle-08 { grid-column-start: 1; grid-column-end: 13; }
}

.core-concept { 
    position: relative;
    grid-column-start: 2; grid-column-end: 6;
    height: 100%;
}

.core-concept-video { 
    position: relative;
    grid-column-start: 6; grid-column-end: 13;
}

.core-concept-video video { 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

#concept-head {
    padding-right: 6vw;
}

.core-concept-text {
    margin-top: 36px;
    font-size: 0.8rem;
    line-height: 1.25rem;
}

.core-concept-button-left {
    position: absolute;
    opacity: 0.1;
    bottom: 0;
    left:0;
}

.core-concept-button-right {
    position: absolute;    
    bottom: 0;
    right: 20%;   
}



.dots {
    position: absolute;
    bottom: 23px;
    left: 43%;
    transform: translate(-50%, -0%);
}

.dots li{
    position: relative;
    display: block;
    float: left;
    margin: 0 4px;
    width: 6px;
    height: 6px;
    background-color: var(--lightgrey);
    border-radius: 100%;
}

.dots .dot-active {
    background-color: var(--midgrey);
}




.core-concept-alt {
    display: none;
}

.core-concept-wrapper {
 
}


@media only screen and (max-width : 1280px){
    .core-concept-wrapper {
        min-height: 650px;
    }
    .core-concept-text {
        padding-bottom: 65px;   
    }


}

@media only screen and (min-width : 1280px) and (max-width : 1680px){
    .core-concept-wrapper {
        min-height: 600px;
    }
}

@media only screen and (min-width : 1680px){
    .core-concept-wrapper {
        min-height: 700px;
    }
}


@media only screen and (max-width : 1000px){
    .core-concept-alt {
        display: block;
    }
    .core-concept-wrapper {
        display: none;
    }

    .dots {
        display: none;
    }
}








.link-menu-icons {
    position: relative;
    width: 20px;
    height: 22px;
    padding: 2px 4px 4px 4px;
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: white;
}


/*----------------Gesture--------------------*/

.gesture-img-01 {
    grid-column-start: 2;
    grid-column-end: 12;
    height: 55vh;
 }

 .gesture-evaluation {
    grid-column-start: 3;
    grid-column-end: 12;
    height: 60vh;
}
 
 .gesture-video-01 {
    grid-column-start: 1;
    grid-column-end: 13;
    height: 85vh;
 }

.gesture-video video { object-fit: cover; }




/*----------------Invitro--------------------*/

.project-hero-img-invitro {
    grid-column-start: 1;
    grid-column-end: 13;
    height: 100vh;
    overflow: hidden;
    margin-left: -50px;
    margin-right: -50px;
}

.project-hero-img-invitro img {
    height: 100%; 
    width: 100%;
    border-radius: 0px;
    object-fit: cover;
}

 .video-play-button {
     position: absolute;
     height: 100px;
     width: 100px;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     opacity: 1;
 }
 .video-progress {
    position: absolute;
    bottom: 8px;
    left: 0;
    background-color: black;
    width: 100%;
    height: 8px;
    transition: all ease 0.25s;
 }
 .invitro-video:hover .video-progress{
    height: 16px;
    background-color: var(--dark);
 }
 .video-progress-filled {
    position: absolute;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: var(--accent); 
 }




 .invitro-img-02 {
    background: url(../img/invitro/invitro_logo.jpg) center;
    background-size: cover;
 }
 .invitro-img-03 {
    background: url(../img/invitro/Invitro_Stick_CloseUp.jpg) center;
    background-size: cover;
 } 
 .invitro-img-04 {
    background: url(../img/invitro/invitro_packaging.jpg) center;
    background-size: cover;
 }


 .invitro-webshop-1 {
    grid-column-start: 3;
    grid-column-end: 8;
    height: 80vh;
}
 .invitro-webshop-2 {
    grid-column-start: 3;
    grid-column-end: 13;
    height: 80vh;
 }


 .invitro-img-06 {
    background: url(../img/invitro/Invitro_AW_Front.jpg) center;
    background-size: cover;
 }
 .invitro-img-07 {
    background: url(../img/invitro/Invitro_Interface_Progress.jpg) center;
    background-size: cover;
 } 
 .invitro-img-08 {
    background: url(../img/invitro/blueprint.jpg) center;
    background-size: cover;
 }





/*----------------Abstract--------------------*/








.project-abstract {
    margin: 30px 0 50px 0;
    font-size: 0.8rem;
    line-height: 1.2rem;
    color: rgb(100,100,100);
}

.project-abstract-medium {
    font-family: 'SuisseIntlMedium';
    color: rgb(48,48,48);
}


.project-challenge {
    grid-column-start: 5;
    grid-column-end: 9;
}
.project-outcome {
    grid-column-start: 9;
    grid-column-end: 13;
}






/*---------------------------Butons------------------------------*/

.button {
    background-color: white;
    border: none;
    border-radius: 6px;
    color: #586069;
    padding: 10px 18px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 8px 2px;
    cursor: pointer;
}

.button:hover {
    background-color: #EAECEF;
}

.button-active {
    background-color: var(--accent) !important;
    color: white;
}

@media only screen and (max-width :700px){
    .button {
        padding: 6px 12px;
        font-size: 16px;
        margin: 8px 2px;
    }
}


/*---------------------------------------------------------------*/






.core-concept-imgage { grid-column-start: 6; grid-column-end: 14; }
#core-concept-img { width: 100%; height: 60vh;}
.core-concept-01-img { background: url(../img/link/link-hero2.jpg) center; background-size: cover; background-repeat: no-repeat; }
.core-concept-02-img { background: url(../img/concept-test2.png) center; background-size: cover; background-repeat: no-repeat; }




.grid-walkthrough {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding: 0 50px 0 50px;
    grid-column-gap: 24px;
    grid-template-rows: 30% auto;
}

.walkthrough-head-left { 
    grid-column-start: 1; 
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    position: relative;
}
.walkthrough-head-left h1 { margin: 0; }

.walkthrough-head-right { 
    grid-column-start: 10; 
    grid-column-end: 13; 
    position: relative;
    font-size: 0.9rem;
}
.walkthrough-head-right h1 { margin: 0; }


.walkthrough-text-left { 
    grid-column-start: 1; 
    grid-column-end: 4; 
    grid-row-start: 2;
    grid-row-end: 3;
    position: relative;
    padding: 30px 14px 0 0;
    font-size: 0.9rem;
}

.walkthrough-text-left ul { 
    position: absolute;
    bottom: 30px;
    left: 0;
}

.walkthrough-text-right { 
    grid-column-start: 10; 
    grid-column-end: 13; 
    position: relative;
    padding: 30px 14px 0 0;
    font-size: 0.9rem;
    z-index: 5;
}

.walkthrough-text-right ul { 
    position: absolute;
    bottom: 30px;
    left: 0;
}


.walkthrough-video-right { 
    position: relative;
    grid-column-start: 4; 
    grid-column-end: 14;  
    grid-row-start: 1;
    grid-row-end: 3;
    height: 90vh;
    margin: 0 20px 0 0;
    border-radius: 2px;
}

.walkthrough-video-right video {
    position: absolute;
    top: 46%;
    left: calc(8vh);
    height: 71vh;
    width: auto;
    transform: translate(0%, -50%);
    z-index: 2;
  }

  .walkthrough-video-right img {
    position: absolute;
    top: 50%;
    left: -18vh;
    transform: translate(0%, -50%);
    height: 88vh;
    width: auto;
    z-index: 2;
  }


  .walkthrough-video-left { 
    position: relative;
    grid-column-start: 1; 
    grid-column-end: 10;
    grid-row-start: 1;
    grid-row-end: 3;
    height: 90vh;
    margin: 0 0 0 20px;
}

.walkthrough-video-left video {
    position: absolute;
    top: 46%;
    right: calc(8vh);
    height: 71vh;
    width: auto;
    transform: translate(0%, -50%);
    z-index: 2;
  }

  .walkthrough-video-left img {
    position: absolute;
    top: 50%;
    right: -18vh;
    transform: translate(0%, -50%);
    height: 88vh;
    width: auto; 
  }



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

    .grid-walkthrough {
        grid-template-rows: auto auto;
    }
    

    .walkthrough-head-left, .walkthrough-head-right { 
        grid-column-start: 1; 
        grid-column-end: 13; 
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .walkthrough-text-left, .walkthrough-text-right { 
        grid-column-start: 1; 
        grid-column-end: 13; 
        grid-row-start: 3;
        grid-row-end: 4;
        padding: 0;
        height: 40vh;
    }

    .walkthrough-text-left ul, .walkthrough-text-right ul { 
        position: relative;
        overflow: hidden;
        display: inline-block;
        bottom: 0;
        padding: 0;
        margin: 0 auto;
        list-style-type: none;
        vertical-align: middle;
    }
    .walkthrough-text-left li, .walkthrough-text-right li { 
        float: left;
        display: block;
    }
    
    .walkthrough-video-right, .walkthrough-video-left {
        position: relative;
        height: 45vh;
        grid-column-start: 1; 
        grid-column-end: 13; 
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .walkthrough-video-right video, .walkthrough-video-left video {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-33%, -55%);
        height: auto;
        width: 101vw;
        z-index: 2;
    }
    
      .walkthrough-video-right img, .walkthrough-video-left img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-38%, -50%);
        height: auto;
        width: 150vw; 
    }


    
}