/* Header*/
#header {background-color: #24579c;}    /* Color */

/* Title */ 
#portfoliotitel {
    height: 10vh;                                               /* Size */
    padding: 30vh 17vw 10vh 17vw; margin: 0px auto 0px auto;    /* Position */
    background-color: white;                                    /* Color */
}

/* Postition of portfolio and content*/ 
.portfoliorow {
    padding: 0 15vw 0 15vw; margin: 0px auto 0px auto;  /* Position */ 
    display: flex; justify-content: space-between;      /* Flex */
}

/* Design within portfoliobox*/ 
.box{
    background-color: white;                        /* Color */
    border-style: solid; border-color: black;     /* Border */
    height: 45vh; width:20vw;                       /* Size */
    margin: 2vw auto 2vw auto;                      /* Position */
    display: inline-block;                          
}   
    #boxempty{border-style: none;}         /* Empty portfoliobox */ 
    .portfolioimage {
    height: 12vw;                                   /* Size */
    display: flex; justify-content: center;         /* Flex */
    align-items: center;                            /* Position */
}
    .portfoliotext {margin: 0 1vw 0 1vw;}

/* Size & position of images + size when hovering */ 

#savrp { width: 8vw; }
    #savrp:hover { width: 12vw; }

#sportwayp { width: 14vw; }
    #sportwayp:hover { width: 19vw; }

#pocketlawp { width: 10vw; }
    #pocketlawp:hover { width: 18vw; }

#mindmorep { width: 13vw; }
    #mindmorep:hover { width: 19vw; }

#imagilabsp { width: 5vw; }
    #imagilabsp:hover { width: 10vw; }

#yaylohp { width: 8vw; }
    #yaylohp:hover { width: 12vw; }

#synccp { width: 10vw; }
    #synccp:hover { width: 18vw; }  

#propelp { width: 6vw; }
    #propelp:hover { width: 10vw; }  

/* #varnishp { width: 8vw; }
    #varnishp:hover { width: 12vw; }


/* Designing for mobile */
@media (max-width: 1024px) { 
    
    /* Title */ 
    #portfoliotitel {
        text-align: center; padding-top: 5vh; padding-bottom: 5vh; /* Position */
    }
    
    /* Postition of portfolio and content*/      
    .portfoliorow {
        width: 90%;     /* Size */
        display: block; padding: 0px 0px 0px 0px; margin: 0px auto 0px auto; /* Position */
    }
    
    /* Design within portfoliobox*/     
    .box {
        height: 250px; width: 60%;      /* Size */
        display: block; padding: 10px 0px 5px 0px; margin: 15px auto 15px auto; /* Position */
    }
        .portfolioimage {height: 18vw;}

    /* Size & position of images + size when hovering */ 

    #savrp { width: 23vw; }
        #savrp:hover { width: 28vw; }

    #sportwayp { width: 35vw; }
        #sportwayp:hover { width: 40vw; } 

    #pocketlawp {  width: 28vw; }
        #pocketlawp:hover { width: 33vw; }

    #mindmorep { width: 35vw;}
        #mindmorep:hover { width: 40vw; }

    #imagilabsp { width: 15vw; }
        #imagilabsp:hover { width: 20vw; ;}

    #yaylohp { width: 20vw; }
        #yaylohp:hover { width: 25vw; } 

    #synccp { width: 22vw; }
        #synccp:hover { width: 28vw; }    

    #propelp { width: 15vw; }
        #propelp:hover { width: 20vw; }      

    /* #varnishp { width: 25vw; }
        #varnishp:hover { width: 30vw; }*/
}