.mypanel{ /* Rolling panel */
    top: 0px;
    min-width: 100%;
    min-height: 478px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: -200%;
    z-index: 30;
    position: absolute;
    visibility: hidden;
    -webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
    line-height: 1.4;
}
.mypanel:target{
    margin-top: 0px;
    visibility: visible;
    background-color: #FFF;
}

#home:target ~ #header #link-home,
#competence:target ~ #header  #link-competence,
#hobby:target ~ #header #link-hobby,
#sport:target ~ #header #link-sport{
    background: #000;
    color: #fff;    
}

/* Panel contents */
.mycontent {
    position: absolute;
    right: 14px;
    left: 14px;
    top: 14px;
    bottom: 14px;
    box-shadow: 2px 5px 7px rgba(0,0,0,0.3); 
    border-radius: 3px;
    min-width: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

.story { /* Text section wrapper */
    position: relative;
    height: auto;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 7%;
    padding-right: 7%;
    padding-top: 7%;
    padding-bottom: 5%;
    font-family: 'Open Sans', sans-serif;
    background-color: rgba(255, 255, 255, 0.5);
}
.story p {
    hyphens: auto;
    text-align: justify;
}
.story img {
    padding-top: 5px;
    padding-bottom: 20px;
}
/*.story h1 {
font-size: 150%;
font-weight: bold;
}*/
.sidestory h2,
.story h2 {
    font-variant-caps: small-caps;
    font-size: 150%;
    font-style: italic;
    text-align: justify;
}
.sidestory h3,
.story h3 {
    padding-top: 15px;
    border-top: solid 1px #DDD;
    font-variant-caps: all-petite-caps;
    font-size: 200%;
}
.sidestory h4,
.story h4 {
    text-align: justify;
}
@media (min-width: 768px) {
    .story {
        padding-top: 3%;
        width: 80%;
        border-left: solid #FFF;
        border-right: solid #FFF;
    }
}

.sidestory { /* Text section wrapper */
    position: relative;
    height: auto;
    padding-left: 8%;
    padding-right: 8%;
    padding-top: 8%;
    padding-bottom: 5%;
    font-family: 'Open Sans', sans-serif;
    z-index: 1;
}
.sidestory p {
    hyphens: auto;
    text-align: justify;
}
@media (min-width: 768px) {
    .sidestory {
        left: 14px;
        padding-top: 3%;
    }
}

/* Specialites for competence panel */
.success { 
    background-color: #dedede;
    background-image: url(../images/success/wordcloud3.png);
    background-size: cover;    
    background-repeat: repeat;
    background-position: center;   
}
@media (min-width: 768px) {
    .success {
        background-size: auto;
    }
}


/* Specialites for competence panel */
.competence { 
    background-color: #dedede;
    background-image: url(../images/competence/wordcloud.png);
    background-size: cover;    
    background-repeat: repeat;
    background-position: center;   
}
@media (min-width: 768px) {
    .competence {
        background-size: auto;
    }
}

.competence .row .col-sm-5 {
    margin: 0;
    padding: 0;
}
.competence .row .col-sm-5 .whiteout {
    position: absolute;
    left: 14px;
    width: 100%;
    height: 100%;
    border-bottom: thick solid #FFF;
    background-color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 768px) {
    .competence .row .col-sm-5 .whiteout {
        width: inherit;
        position: fixed;
        min-width: 340px;
        min-height: 450px;
        height: calc(100% - 28px);
        border-right: thick solid #FFF;
        border-bottom: none;
    }
}

.competence .timeline {
    border-radius: 5px;
    max-width: 1100px;
    height: 80%;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    /*    background-color: rgb(255, 255, 255);*/
    padding: 0 5px;
    font-family: 'Open Sans', sans-serif;
}
@media (min-width: 400px) {
    .competence .timeline {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 5px;
        margin-bottom: 10px;
        padding: 0 10px;        
    }
}
@media (min-width: 768px) {
    .competence .timeline {
        margin-left: 0px;
        margin-right: 10%;
        margin-top: 10px;         
        padding: 20px;
    }
}
@media (min-width: 992px) {
    .competence .timeline {
        margin-left: auto;
        margin-right: auto;
    }
}
.competence .timeline li {
    font-size: 16px;
}
.competence .timeline img {
    margin-left: auto;
    margin-right: auto;
}

/* Specialites for entrepreneur panel */
.entrepreneur { 
    background-color: #dedede;
    background-image: url(../images/entrepreneur/background.jpg);
    background-size: cover;    
    background-repeat: repeat;
    background-position: center;   
}
@media (min-width: 768px) {
    .entrepreneur {
        background-size: auto;
    }
}

/* Specialites for leader panel */
.leader { 
    background-color: #dedede;
    background-image: url(../images/success/wordcloud3.png);
    background-size: cover;    
    background-repeat: repeat;
    background-position: center;   
}
@media (min-width: 768px) {
    .leader {
        background-size: auto;
    }
}

.hobby { /* Specialites for hobby content */
    background-color: #dedede;
    background-image: url(../images/tampere.jpg);
    background-size: cover;    
    background-repeat: repeat;
    background-position: center;      
}
@media (min-width: 768px) {
    .mypanel .hobby {
        padding-bottom: 1%;        
    }
}

.sport { /* Specialites for sport content */
    background-color: #dedede;
    background-image: url(../images/wordcloud2.png);
    background-size: cover;    
    background-repeat: repeat;
    background-position: center;       
    /*    background-color: rgb(255, 223, 163);  */
}
@media only screen and (min-width: 768px) {
    .mypanel .sport {
        padding-bottom: 1%;        
    }
}

.imageboard { /* Image containing part of panel */
    background-color: #ae9c8c;
    height: 100%;
    width: inherit;
    border-radius: 3px 0px 0px 3px;    
    overflow: hidden;
}
@media (min-width: 768px) {
    .imageboard {
        position: fixed;
        min-width: 340px;
        min-height: 450px;
        height: calc(100% - 28px);
        left: 14px;
        border-style: solid;

    }
}
.hobby .imageboard {
    background-color: transparent;
}
@media (min-width: 768px) {
    .hobby .imageboard {
        background-color: rgba(174, 156, 140, 0.7);  
        /*    background-color: rgba(159, 144, 129, 0.84);  */
        border-right: thick solid #d4c5B9;    
    }
}
.sport .imageboard {
    background-color: transparent;
}
@media (min-width: 768px) {
    .sport .imageboard {
        background-color: rgba(129, 159, 137, 0.7);  
        /*    background-color: rgba(159, 144, 129, 0.84);  */
        border-right: thick solid rgba(129, 159, 137, 0.7);    
    }
}
.imageboard_content { /* Content wrapper for imageboard */
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    width: auto;
    height: auto;
    padding-left: 24px;
    padding-right: 19px;
}
@media (min-width: 768px) {
    .imageboard_content {
        width: 70%;
        top: 10%;
        min-height: 200px;
        padding: 0px;
    }   
}
@media (max-width: 767px) { /* Special settings for small screens */
    .imageboard_content img {
        float: left;
        width: 50%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}


.imageboard_content .bordershade { /* Shading for image borders */
    position: absolute;
    width: 100%;
    width: calc(100% - 39px);
    height: 100%;    
    height: calc(100% - 16px);    
    top: 10px;
    -moz-box-shadow:inset 0px 0px 10px 10px #fafafa;
    -webkit-box-shadow:inset 0px 0px 10px 10px #fafafa;
    box-shadow:inset 0px 0px 10px 10px #fafafa;
}
@media (min-width: 768px) {
    .imageboard_content .bordershade {
        width: 100%;
        height: 100%;    
        top: 0px;
        -moz-box-shadow:inset 0px 0px 10px 10px #c3b6ab;
        -webkit-box-shadow:inset 0px 0px 10px 10px #c3b6ab;
        box-shadow:inset 0px 0px 10px 10px rgb(179, 166, 155);        
    }
}
.imageboard_content .bordershade2 { /* Shading for image borders */
    position: absolute;
    width: 100%;
    width: calc(100% - 39px);
    height: 100%;    
    height: calc(100% - 16px);    
    top: 10px;
    -moz-box-shadow:inset 0px 0px 10px 10px #fdfdfe;
    -webkit-box-shadow:inset 0px 0px 10px 10px #fdfdfe;
    box-shadow:inset 0px 0px 10px 10px #fdfdfe;
}
@media (min-width: 768px) {
    .imageboard_content .bordershade2 {
        width: 100%;
        height: 100%;    
        top: 0px;
        -moz-box-shadow:inset 0px 0px 10px 10px #a5baab;
        -webkit-box-shadow:inset 0px 0px 10px 10px #a5baab;
        box-shadow:inset 0px 0px 10px 10px #a5baab;
    }
}
@media (min-width: 768px) {
    /*    .imageboard_content > img, /* Make image partially grayed by default */
    .grayscale {
        -webkit-transition-property: -webkit-filter;
        -webkit-transition-duration: 0.5s;

        -moz-transition-property: -moz-filter;
        -moz-transition-duration: 0.5s;

        -ms-transition-property: -ms-filter;
        -ms-transition-duration: 0.5s;

        transition-property: all;
        transition-duration: 0.5s;

        -webkit-filter: grayscale(90%);
        -moz-filter: grayscale(90%);
        -ms-filter: grayscale(90%);
        -o-filter: grayscale(90%);
        filter: grayscale(90%);
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.0\'/></filter></svg>#grayscale");
        filter: gray;        
    }
    .imageboard_content:hover > img, /* Show full colors on hover */
    .grayscale:hover {
        -webkit-filter: none;
        -moz-filter: none;
        -ms-filter: none;
        -o-filter: none;
        filter: none;    
    }
}
@media (max-width: 767px) {
    .hobby .row {
        background-color: rgba(255, 255, 255, 0.5);
    }
}
.contentboard { /* Text section wrapper */
    height: 100%;
    border-radius: 8px;
    padding-left: 0px;
    padding-right: 10px;
    padding-bottom: 20px;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px) {
    .contentboard {
        background-color: rgba(255, 255, 255, 0.75);
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px;
        margin-top: 40px;
        margin-left: 90px;
        margin-right: 10%;
    }
}
.contentboard .textwrapper {
    hyphens: auto;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    font-family: 'Open Sans', sans-serif;
    padding-top: 30px;
}
@media (min-width: 768px) {
    .hobby .contentboard .textwrapper:nth-of-type(3) {
        width: 100%;      
        padding-left: 5%;         
        padding-right: 10%;    
        padding-top: 50px;
    }
    .hobby .contentboard .textwrapper:nth-of-type(5) {
        width: 100%;        
        padding-left: 5%; 
        padding-right: 10%;         
    }
}
.contentboard h2 {
    font-size: 14pt;
    margin-bottom: 20px;
    margin-left: 20px;
}
.contentboard h3 {
    font-size: 13pt;
    margin-top: 10px;
    margin-left: 20px;    
}
.hobby .contentboard p {
    font-size: 10pt;
    margin-left: 20px;
}
.sport .contentboard p {
    font-size: 10pt;
    padding-bottom: 10px;
}
.contentboard ul {
    margin-left: 20px;
    list-style-type: circle;
    font-size: 10pt;    
}
@media (min-width: 768px) {
    .contentboard h2 {
        font-size: 16pt;
        margin-bottom: 30px;
    }
    .contentboard h3 {
        font-size: 13pt;
        margin-top: 10px;
        margin-left: 20px;    
    }
    .hobby .contentboard p,
    .sport .contentboard p {
        font-size: 11pt;
        padding-bottom: 0px;        
    }
}
@media (min-width: 1192px) {
    .contentboard h2 {
        font-size: 18pt;
        margin-bottom: 30px;
    }
    .contentboard h3 {
        font-size: 14pt;
        margin-top: 10px;
        margin-left: 20px;    
    }
    .hobby .contentboard p,
    .sport .contentboard p {
        font-size: 14pt;
    }
    .contentboard ul {
        margin-left: 40px;
        font-size: 13pt;    
    }
}
@media (min-width: 1920px) {
    .contentboard h2 {
        font-size: 21pt;
        margin-bottom: 30px;
    }
    .contentboard h3 {
        font-size: 16pt;
        margin-top: 10px;
        margin-left: 20px;    
    }
    .hobby .contentboard p,
    .sport .contentboard p {
        font-size: 16pt;
    }
    .contentboard ul {
        font-size: 15pt;    
    }
}

/* Wrapper for linkedin panel */
.linkedin { 
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 320px;
    padding-top: 10px;
    padding-bottom: 30px;
    margin-bottom: 15px;
}
@media (min-width: 768px) {
    .linkedin {
        left: 14px;
        margin-left: auto; 
    }   
}
.linkedin_job { /* Wrapper for employee logos */
    position: relative;
    min-width: 320px;
    margin-right: auto;
    margin-left: auto;
}
#Digia { /* Show & hide depending on visible screen area*/
    display: none;
}   
#Digia_s {
    display: inherit;    
}
@media (min-height: 580px) {
    #Digia {
        display: inherit;
    } 
    #Digia_s {
        display: none;    
    }    
}
#Elopak {
    display: none;
}   
#Elopak_s {
    display: inherit;
}   
@media (min-height: 760px) {
    #Elopak {
        display: inherit;
    }   
    #Elopak_s {
        display: none;
    }       
}
#Nokia {
    display: none;
} 
#Nokia_s {
    display: inherit;
}   
@media (min-height: 945px) {
    #Nokia {
        display: inherit;
    }   
    #Nokia_s {
        display: none;
    }   

}
@media (max-width: 768px) {
    #Digia_s {
        display: inherit;    
    }    
    #Elopak_s {
        display: inherit;
    }           
    #Nokia_s {
        display: inherit;
    }
}

/* Close panel button */
.close-btn { 
    position: fixed;
    width: 10%;
    max-width: 40px;
    right: 3px;
    margin-top: 3px;
    z-index: 35;
    -webkit-transition: .5s all ease;
    -o-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;  
}
@media (min-width: 768px) {
    .close-btn {
        margin-top: 30px;
        right: 40px;        
    }
}
.close-btn:hover {
    filter: brightness(0.5);
    -webkit-filter: brightness(0.5);
    -moz-filter: brightness(0.5);
    -o-filter: brightness(0.5);
    -ms-filter: brightness(0.5); 
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='bright30'><feComponentTransfer><feFuncR type='linear' slope='0.5'/><feFuncG type='linear' slope='0.5' /><feFuncB type='linear' slope='0.5' /></feComponentTransfer></filter></svg>#bright30");
    transform: scale(1.2);
}

/* Generic helper classes */
.row,
.col-sm-4,
.col-sm-5
{
    height: auto;
}
@media (min-width: 768px) {
    .row,
    .col-sm-4,
    .col-sm-5,
    .col-md-6
    {
        height: 100%;
    }
}

hr {
    width: 70%;
    border-width: 2px;
    margin-top: 5%;
    margin-bottom: 5%;
    border: solid 2px #DDD;
}

.divlink 
{ 
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
    /*cursor: default;*/

    /* edit: added z-index */
    z-index: 35;

    /* edit: fixes overlap error in IE7/8, make sure you have an empty gif */
    background-image: url('../images/empty.gif');
}   

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
    margin-bottom: 10px;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.citation {
    font-style: italic;
    font-family: 'Cardo', serif;
}

blockquote {
    border-color: #BBB;
    border-style: none solid none none;
    border-width: 5px;
    text-align: right;
    font-size: 120%;
    margin-right: 2px;
    margin-left: auto;
    max-width: 600px;

}
@media (min-width: 768px) {
    blockquote {
            font-size: 130%;
    }
}


/* Let's get scrollbar party started */
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track { /* Track */
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 3px;
    border-radius: 3px;

}
@media (max-width: 768px) {
    ::-webkit-scrollbar-track {
        margin-top: 20px;
    }
}
::-webkit-scrollbar-thumb { /* Handle */
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: rgba(100, 100, 100, 0.7); 
    -webkit-box-shadow: inset 0 0 6px rgba(100, 100, 100, 0.7); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(100, 100, 100, 0.7); 
}

/* Image inverted 
.inverted > img {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;        
}

.inverted:hover > img {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;      
transition: all .3s ease-in-out;    
-webkit-filter: invert(0.8);
-moz-filter: invert(0.8);
-o-filter: invert(0.8);
-ms-filter: invert(0.8);
filter: invert(0.8);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/></filter></svg>#invert");
} */