* {
        padding: 0px;
        margin: 0px;
        }

        #project_wrapper a {
        color: #FFFFFF;
        text-decoration: none;
        }
        #project_wrapper p {
            font-size: 1vw;            
        }
        #project_wrapper br {
            margin: 5px 0;
        }
        iframe {
            border-style: none;
        }
        .main_project{
            position: relative;
            width: 50%;
            height: 32vw;
            float: left;
            overflow: hidden;
        }
        .secondar_project{
            position: relative;
            width: 50%;
            height: 16vw;
            float: left;
            overflow: hidden;
        }
        .tertiary_project{
            position: relative;
            width: calc(100/3*1%);
            height: 16vw;
            float: left;
            overflow: hidden;
        }
        .project_section, #project_wrapper ul {
            clear:both;
            
        }
        .project_section {
            width: 100%;
            display:block;
            overflow:auto;
        }
    
        #project_wrapper ul{
            width: 50vw;
        }
        
        /* agtivastion area */
        .activator {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        /* Background images */ 
        #project_wrapper img {
            vertical-align: top;
            
        }
    
        .bg_project{
            width: 101%; /* the ekstra 1% is to fix bug on firefow */
            height: 100% !important;   
            display: block;   
        }
        .bg_project  {
            -webkit-filter: grayscale(60%) brightness(80%);
            -moz-filter:    grayscale(60%) brightness(80%);
            -ms-filter:     grayscale(60%) brightness(80%);
            -o-filter:      grayscale(60%) brightness(80%);
            filter: gray; 
        }
        #bg_dungones2_mobile, #bg_dark_mobile {
            display: none;
        }
        
        .blur {
             -webkit-filter: grayscale(40%) blur(0.2vw) brightness(80%);
            -moz-filter:    grayscale(40%) blur(0.2vw) brightness(80%);
            -ms-filter:     grayscale(40%) blur(0.2vw) brightness(80%);
            -o-filter:      grayscale(40%) blur(0.2vw) brightness(80%);
            filter: gray; 
        }
    
        .project:hover .bg_project{
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        -moz-filter:    grayscale(0%);
        -ms-filter:     grayscale(0%);
        -o-filter:      grayscale(0%);
        }
    
        .project:hover .blur{
        filter: grayscale(0%);
        -webkit-filter: grayscale(40%) blur(0.2vw) brightness(80%);
        -moz-filter:    grayscale(40%) blur(0.2vw) brightness(80%);
        -ms-filter:     grayscale(40%) blur(0.2vw) brightness(80%);
        -o-filter:      grayscale(40%) blur(0.2vw) brightness(80%);
        }
    
        /* Logos */
        .in_pic_project {
            position: absolute;
        }
        .project:hover .project_logo{
            -webkit-filter: grayscale(0%);
            -moz-filter:    grayscale(0%);
            -ms-filter:     grayscale(0%);
            -o-filter:      grayscale(0%);
            filter: gray; 
        }
        .project_logo{
            -webkit-filter: grayscale(40%);
            -moz-filter:    grayscale(40%);
            -ms-filter:     grayscale(40%);
            -o-filter:      grayscale(40%);
            filter: gray; 
        }
    
        .project_logo.unmarked, .project:hover .project_logo.unmarked{
            -webkit-filter: grayscale(80%);
            -moz-filter:    grayscale(80%);
            -ms-filter:     grayscale(80%);
            -o-filter:      grayscale(80%);
            filter: gray; 
        }
       #project_wrapper .project:hover .project_logo.unmarked:hover {
            -webkit-filter: grayscale(0%);
            -moz-filter:    grayscale(0%);
            -ms-filter:     grayscale(0%);
            -o-filter:      grayscale(0%);
            filter: gray; 
        }
     
        /* Placement of the logoes */
        #dungeons3_logo {
            top: 16vw;
            left: 0;
            right: 0;
            bottom: 0;
            width: 65%;
            margin: 0 auto;
        }
    
        #dungeons2_logo {
            top: 0.5vw;
            left: 1.4vw;
            width: 43%;
        }
        #dungeons2AGOW_logo {
            top: 2.2vw;
            right: 1.4vw;
            width: 53%;
        }
    
        #dark_logo {
            top: 6.5vw;
            left: 26.5vw;
            width: 30%;
        }
    
        #dungeons_logo {
            top: 1.5vw;
            left: 16vw;
            width: 51%;
            
        }
        
        #dungeonsTDL_logo {
            top: 6.2vw;
            left: 16.8vw;
            width: 46%;
            
        }
        #mud_tv_logo {
            top: 1vw;
            left: 0vw;
            width: 49%;
        }
        #ceville_logo {
            top: 6.3vw;
            left: -0.3vw;
            width: 49%;
        }

        /* Logo placement on the mobile */
        #dungeons3_logo.small {
            top: 0vw;
            left: 2vw;
            margin: 0;
            width: 35%;
        }
        #dungeons2_logo.small {
            top: 0vw;
            left: 0.4vw;
            width: 23%
        }
        #dungeons2AGOW_logo.small {
            top: 0vw;
            right: 5vw;
            width: 30%;
        }
        #dark_logo.small {
            top: 0vw;
            left: 0.4vw;
            width: 19%;
        }
        #dungeons_logo.small {
            top: 0vw;
            left: 1.2vw;
            width: 35%
        }
        #dungeonsTDL_logo.small {
            top: -0.55vw;
            left: 19.5vw;
            width:31.6%;
        }
        #mud_tv_logo.small {
            top: 0vw;
            left: 1.2vw;
            width: 31.6%;
        }
        #ceville_logo.small {
            top: -0.5vw;
            left: 0vw;
            width: 31.6%
        }

        /* Description */
        .text_main{
            position: absolute;
            top: 8vw;
            left: 2.4vw;
            width: 20vw;
            visibility: hidden;
        }
        .text_secondar {
            position: absolute;
            top: 5.5vw;
            left: 1.2vw;
            width: 20vw;
            visibility: hidden;   
        }
        .text_projects p{
            font-size: 0.9vw !important;
        }
        .text_tertiary {
            position: absolute;
            top: 4.5vw;
            left: 1.2vw;
            width: 17vw;
            visibility: hidden; 
        }
    
        .text_projects p {
            color: aliceblue;
        }
        /* More information bottom */ 
        .more_info {
            position: absolute;
            top: 22.5vw;
            left: 7.5vw;
            background-color: black;
            visibility: hidden;
        }
    
        .more_info p {
            color: #d15c2cff;
            padding: 0.7vw;
            letter-spacing: 0.10vw;
        }
    
        .more_info_main {
            top: 23.5vw;
            left: 7.5vw;
        }
    
        .more_info_secondar {
            top: 10.75vw;
            left: 18vw;
        }
    
        .more_info_tertiary {
            top: 12.45vw;
            left: 5.8vw;
        }
        /* Platform logos */
        .Platform_logos{
            list-style-type: none;
            position: absolute;
            visibility: hidden;
        }
        .Platform_logos li {
            float: left;
            margin-right: 2.5vw;
        }
        
        .platform_main{
            top: 29vw;
            left: 2.4vw;
        }
        .platform_main li img{
            height: 1.3vw;
            width: auto;
        }
    
        .platform_secondar{
            top: 14vw;
            left: 1.2vw;
        }
        .platform_secondar li img{
            height: 1vw;
            width: auto;
        }
    
    
        .platform_tertiary{
            bottom: 1.8vw;
            left: 2vw;
        }
        .platform_tertiary li img{
            height: 1vw;
            width: auto;
        }

        
       

        /* Screen shots  */
        .wrapper_rings {
            width: auto;
            margin: auto; 
        }
        
    /* Main_screenshots */
        .main_screenshot {
            position: absolute;
            display: block;
            top: 4.3vw;
            left: 25vw;
            width: 21.6vw;
            visibility: hidden;
            
        }
         .main_big_screenshot{
            position: absolute;
            top: 0;
            left: 0;
            visibility: hidden;
            width: 100%;
            height: 100%;
        }
         .big_iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .main_big_showcase {
            position: relative;
            left: -1.7vw;
            width: 25vw;
            height: 14vw;
            border-style: solid;
            border-width: 0.2vw;
            border-color: black;
        }
        .main_screenshot a{
            width: 0vw;
            height: 0vw;
        }
        .main_screenshot ul {
            list-style-type: none;
            clear: both;
            
        }
        .main_screenshot .screenshot_section li {
            width: 6vw;
            height: 3.37vw;
            margin: 0.5vw;
            border-style: solid;
            border-width: 0.1vw;
            border-color: black;
            float: left;
            overflow: hidden;
        }
         
        .main_screenshot .screenshot {
            width: 100%;
            height: 100%;
        }
    
    /* the small ringes under the screenshots */ 
        #project_wrapper .main_screenshot .main_rings {
            list-style-type: none;
            clear:both;
            width: auto;
            display:table;
            margin: 0 auto;
        }
        .main_screenshot .main_rings li {
            
            height: 0vw;
            margin-bottom: 1vw;
            float: left;
        }
        .main_screenshot .main_rings img {
            margin: 0 0.5vw;
            width: 1vw;
            height: auto;  
            border-style: none;      
        }
        
        /* the arrows used to move though the screenshots */ 
        .main_right_link {
            position: absolute;
            top: 18.2vw;
            left: 21.3vw;
        }
        .main_right{
            width: 1vw;
            height: auto;
        }
        .main_left_link {
            position: absolute;
            top: 18.2vw;
            left: -1vw;
        }
        .main_left{
            width: 1vw;
            height: auto;
            transform: scale(-1);
       
        }
        .main_left:hover, .main_right:hover {
            filter: none;
            -webkit-filter: brightness(30%);
            -moz-filter:    brightness(30%);
            -ms-filter:     brightness(30%);
            -o-filter:      brightness(30%);
            cursor: pointer;     
        }
    /* secondar_screenshots*/
        .secondar_screenshot {
            position: absolute;
            display: block;
            top: 5vw;
            left: 26.5vw;
            width: 21.6vw;
            visibility: hidden;
        }
        .secondar_screenshot a{
            width: 0vw;
            height: 0vw;
        }
        .secondar_screenshot ul {
            list-style-type: none;
            clear: both;
            
        }
        .secondar_screenshot .screenshot_section li {
            width: 6vw;
            height: 3.37vw;
            margin: 0.5vw;
            border-style: solid;
            border-width: 0.1vw;
            border-color: black;
            float: left;
            overflow: hidden;
            
        }
        .secondar_screenshot .screenshot {
            width: 100%;
            height: 100%;
        }
    /* the small ringes under the screenshots */ 
        #project_wrapper .secondar_screenshot .secondar_rings {
            list-style-type: none;
            width: auto;
            display:table;
            margin: 0 auto;      
            clear:both;
        }
        .secondar_screenshot .secondar_rings li {
            height: 0vw;
            float: left;
            margin-bottom: 1vw;
        }
        .secondar_screenshot .secondar_rings img {
            width: 1vw;
            height: auto;  
            border-style: none;    
            margin: 0 0.5vw;  
        }
        
    /* the arrows used to move though the screenshots */ 
        .screenshots_arrows {
            clear:both;
            font-size: 0vw;
        }
        .secondar_right_link {
            position: absolute;
            top: 3.7vw;
            left: 21.5vw;
        }
        .secondar_right{
            width: 1vw;
            height: auto;
        }
        .secondar_left_link {
            position: absolute;
            top: 3.7vw;
            left: -1vw;
        }
        .secondar_left{
            width: 1vw;
            height: auto;
            transform: scale(-1);
       
        }
        .secondar_left:hover, .secondar_right:hover {
            filter: none;
            -webkit-filter: brightness(30%);
            -moz-filter:    brightness(30%);
            -ms-filter:     brightness(30%);
            -o-filter:      brightness(30%);
            cursor: pointer;     
        }
    
    /* teriary_screenshots*/
    
        .tertiary_screenshot{
            position: absolute;
            display: block;
            top: 4.6vw;
            left: 18vw;
            width: 13.6vw;
            visibility: hidden;

        }
        .tertiary_screenshot .screenshot_section {
            list-style-type: none;
        }
    
        .tertiary_screenshot .screenshot_section li{
            margin-left: 0.5vw;
            width: 6vw;
            height: 3.37vw;
            float: left;
            overflow: hidden;
            margin-bottom: 0.5vw;
            border-style: solid;
            border-width: 0.1vw;
            border-color: black;
        }
    
        .tertiary_screenshot .screenshot {
            width: 100%;
            height: 100%;
        }
        /* the small ringes under the screenshots */ 
        #project_wrapper .tertiary_screenshot .tertiary_rings {
            list-style-type: none;
            width: auto;
            display:table;
            margin: 0 auto;        
            clear:both;
        }
        .tertiary_screenshot .tertiary_rings li {
            height: 0vw;
            float: left;
            margin-bottom: 1vw;
        }
        .tertiary_screenshot .tertiary_rings img {
            width: 1vw;
            height: 1vw;  
            border-style: none;      
            margin: 0 0.5vw;
        }
        
    /* the arrows used to move though the screenshots */ 
        .screenshots_arrows {
            clear:both;
            font-size: 0vw;
        }
        .tertiary_right_link {
            position: absolute;
            top: 3vw;
            left: 13.7vw;
        }
        .tertiary_right{
            width: 1vw;
            height: auto;
        }
        .tertiary_left_link {
            position: absolute;
            top: 3vw;
            left: -1vw;
        }
        .tertiary_left{
            width: 1vw;
            height: auto;
            transform: scale(-1);
       
        }
        .tertiary_left:hover, .tertiary_right:hover {
            filter: none;
            -webkit-filter: brightness(30%);
            -moz-filter:    brightness(30%);
            -ms-filter:     brightness(30%);
            -o-filter:      brightness(30%);
            cursor: pointer;     
        }
    
        /* Pop Up Window */
        
        #popup_window {
            position: fixed;
            top: 0;
            left:0;
            width: 100%;
            height: 100%;
            z-index: 100;
            background-color: rgba(53, 56, 55, 0.8);
            visibility: hidden;
        }

        #popup_background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: default; 
        }

        #popup_window #popup_close {   
            position: fixed;
            width: 2.5vw;
            top: 6vw;
            right: 1vw;
        }
    
        #popup_window #popup_left { 
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);  
            position: fixed;
            height: 10vh;
            width: auto;
            padding: 2vw;
            top: 45vh;
            left: 10vw;
        }
    
        #popup_window #popup_right {   
            position: fixed;
            height: 10vh;
            width: auto;
            padding: 2vw;
            top: 45vh;
            right: 10vw;
        }
    


        #popup_image_wrapper {
            position: relative;
            height: calc(100vh - 8vw);
            top: 5vw;
            width: 60vw;
            left: 20vw;
        }
        #popup_image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            max-width: 60vw;
            max-height: calc(100vh - 12vw);
            width: auto;
            height: auto;
            margin: auto;
        }
    
        #popup_iframe {
            width: 60vw;
            height: 33.7vw;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            visibility: hidden;
        }
        #popup_image_press {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left:0;

        }