@charset "UTF-8";
/* CSS Document */


.projects {
    position: relative;
	 top: 0;
	 left: 0;
	 width: 100vw;
	 height: 22vw;
    
    background-image: url("../images/projects.svg");
    background-size: 100% auto;
    background-position: left center;
    background-repeat: no-repeat;
    
    z-index: 1;
}

.projects_menu {
    position: relative;
	left: 6vw;
    width: 88vw;
    height: 6vw;
    z-index: 100;
}

.projects_menu ul {
    margin: -6.5vw auto;
}

.projects_menu ul li {
    font-family: 'univers-Light';
    font-size: 1.48vw;
    letter-spacing: 0.09vw;
    line-height: 3vw;
    color: white;
    display: inline;
    text-align: center;
    margin: 0 1vw;
}

.projects_menu a {
    color: white;
}

.mix {
    display: none;
}

/*/////PROJECTS INSIDE PAGE/////*/


/*.project_page_wrapper {
    position: relative;
    width: 100vw;
    top: 0;
    height: auto;
   background-color: white;
    
}*/

.project_page_wrapper {
    position: relative;
    width: 100vw;
    top: 0;
    height: auto;
   background-color: white;
    padding-bottom: 10vw;
}

.project_bg {
    position: relative;
    
    top: 0;
    left: 6vw;
    
    width: 88vw;
    height: 40vw;
    
    background-size: cover;
    background-position: center center;
}

.description {
    width: 30vw;
    height: 40vw;
    background-color: white;
   position: relative;
   
    padding-left: 6vw;
    padding-right: 1vw;
   float: left;
   z-index: 10;
}

.description_text {
    width: 29vw;
}


.description_text p {
    font-family: 'univers-Light';
    color: gray;
    font-size: 17px;
    line-height: 25px;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.description_text p span {
    color: #0073FF;
}

.video_container {
    width: 52vw;
    height: 32vw;
    
    position: relative;
    top: 0vw;
    left: 37vw;
   padding-right: 6vw;
    margin-top: 0vw;
   border-right: 5vw solid white;
}

.video {
   position: absolute;
    
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;    
    object-fit: cover;
    object-position: center center;   
}

.video:focus {
    outline: none;
    border: none;
}

.thumbnails {
    width: 100vw;
    height: 40vw;
    padding-top: 13vw;
    background-color: white;
    position: relative;
}

.thumbnail_item {
    width: 25.3vw;
    height: 15vw;
    margin-left: 6vw;
    margin-bottom: 3vw;    
    background-size: cover;
    background-position: center center;
    
    display: inline-block;
}








/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/* ----------------------------TABLET---------------------------- */



@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) and (orientation : landscape)  {
    
 .thumbnails {
    padding-top: 35vw;
}   
    
}



@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation : portrait) {

    
    
.description {
    width: 88vw;
    height: 55vw;
   
    padding-left: 6vw;
    padding-right: 6vw;
   float: none;
}

.description_text {
    width: 88vw;
}
   
.video_container {
    width: 88vw;
    height: 55vw;
    
    top: 0vw;
    left: 0vw;
   padding-right: 0vw;
    margin-top: 0vw;
   border-right: 6vw solid white;
   border-left: 6vw solid white;
}

.thumbnails {
    padding-top: 20vw;
} 
    
}





/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/* ---------------------------- MOBILE ---------------------------- */


@media only screen and (max-width: 736px), only screen and (max-device-width: 736px) and (orientation : landscape) {
    
    
}


@media only screen and (max-width: 667px), only screen and (max-device-width: 667px) and (orientation : landscape) {
    
}


@media only screen and (max-width: 414px), only screen and (max-device-width: 414px) and (orientation : portrait) {

.projects {
	width: 100vw;
	height: 38vw;
    
    background-image: url("../images/projects_mobile.svg");
}

.projects_menu {
	left: 0vw;
    width: 100vw;
    height: 70vw;
    background-color: white;
}

.projects_menu ul {
    width: 76vw;
    margin: -3vw 12vw;
}

.projects_menu ul li {
    font-size: 5.5vw;
    letter-spacing: 1px;
    line-height: 8vw;
    color: rgba(0,115,255,1);
    display: block;
    text-align: left;
    margin: 1vw 0vw 1vw 0vw;
}

.projects_menu a {
    color: rgba(0,115,255,1);
}

.mix {
    display: none;
}

/*/////PROJECTS INSIDE PAGE/////*/
    
    
.project_page_wrapper {
    padding-top: 8vw;
}
   

.project_bg {    
    top: 0;
    left: 0vw;
    
    width: 100%;
    height: 70vw;
}

.description {
    width: 100%;
    height: 130vw;
   
    padding-left: 0vw;
    padding-right: 0vw;
}

.description_text {
    width: 88vw;
    padding-left: 6vw;
}



    
.video_container {
    width: 88vw;
    height: 55vw;
    
    top: 0vw;
    left: 0vw;
   padding-right: 0vw;
    margin-top: 0vw;
   border-right: 6vw solid white;
   border-left: 6vw solid white;
}

.thumbnails {
   height: auto;
    padding-top: 30vw;
   padding-bottom: 30vw;
} 

.thumbnail_item {
    width: 88vw;
    height: 55vw;
    margin-left: 6vw;
    margin-bottom: 6vw;
    
    display: block;
}


    
}