/*
@font-face {
    font-family: 'Memphis';
    src: url('fonts/Memphis-Medium.eot');
    src: url('fonts/Memphis-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Memphis-Medium.woff2') format('woff2'),
        url('fonts/Memphis-Medium.woff') format('woff'),
        url('fonts/Memphis-Medium.ttf') format('truetype'),
        url('fonts/Memphis-Medium.svg#Memphis-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}
*/

/*body {font-family:'Memphis'}*/

body {font-family:'Roboto Slab'; font-weight:300;}

@-webkit-keyframes kenburns {
    0% {-webkit-transform: scale(1) rotate(0deg)}
    50% {-webkit-transform: scale(1.4) rotate(0.3deg)}
    100% {-webkit-transform: scale(1) rotate(0deg)}
}

@-moz-keyframes kenburns {
    0% {-moz-transform: scale(1) rotate(0deg)}
    50% {-moz-transform: scale(1.4) rotate(0.3deg)}
    100% {-moz-transform: scale(1) rotate(0deg)}
}

@-o-keyframes kenburns {
    0% {-o-transform: scale(1) rotate(0deg)}
    50% {-o-transform: scale(1.4) rotate(0.3deg)}
    100% {-o-transform: scale(1) rotate(0deg)}
}

@keyframes kenburns {
    0% {transform: scale(1) rotate(0deg)}
    50% {transform: scale(1.4) rotate(0.3deg)}
    100% {transform: scale(1) rotate(0deg)}
}

#global_wrapper {
    position:fixed; top:25px; left:25px; right:25px; bottom:25px;
    background-color:black;
    overflow:hidden;
}

#bg-b {
    position:absolute; width:600px; height:600px; left:50%; top:50%; margin-left:-300px; margin-top:-300px;
    background-image:url(images/b-white.png);
    opacity:0;
    background-size:100%;
    transition:opacity 0.5s;
/*    transition:transform 0.25s;*/
}

/*
#bg-b.pulse {
    transform:scale(1.05);
}
*/

body:not(.about) #global_wrapper:hover #bg-b {
    opacity:0.5;
}

#slideshow {
    position:absolute; top:0; left:0; width:100%; height:100%;
/*    filter:grayscale(0.5);*/
    -webkit-transform-origin: 80% 20%;
    -webkit-animation: kenburns 180s infinite linear;
    -moz-transform-origin: 80% 20%;
    -moz-animation: kenburns 180s infinite linear;
    -o-transform-origin: 80% 20%;
    -o-animation: kenburns 180s infinite linear;
    transform-origin: 80% 20%;
    animation: kenburns 180s infinite linear;
}

.slideshow_elem {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background-size:cover; background-position:center;
    background-image:url(images/02.jpg);
    opacity:0;
    transition:opacity 3s;
}

.slideshow_elem.current {
    opacity:1;
    transition:opacity 3s 0.5s;
}

#white-mask {
  position:absolute;
/*    top:0; left:0; width:100%; height:100%;*/
    top:50%; left:50%; width:100vw; height:100vw; margin-top:-50vw; margin-left:-50vw;
    border-radius:50%;
    transform:scale(1.5);
  background-color: white;
    opacity:0.85;
    transition:transform 3s, opacity 3s;
}

.about #white-mask {
    opacity:0;
}

body:not(.about) #global_wrapper:hover #white-mask {
    transform:scale(0.0);
    opacity:0;
    transition:transform 0.5s, opacity 1s;
}

#b-mask {
  position:absolute; top:0; left:0; width:100%; height:100%;
    background-color:black;
    transition:opacity 0.5s, background-color 1s, width 1s;
}

.loaded #b-mask {
    background-color:transparent;
    opacity:0.85;
}

body:not(.about).loaded #global_wrapper:hover #b-mask {
    opacity:0.35;
    filter:blur(1px);
    transition:opacity 0.35s, background-color 1s;
}

.loaded.about #b-mask {
   background-color:black;
}

#b-mask * {
    transition:margin 0.35s, width 0.35s, height 0.35s;
}

#b-m-top , #b-m-bottom , #b-m-left , #b-m-right {
    background-color:black; position:absolute;
}

#b-m-top {
    bottom:50%; margin-bottom:130px;
    width:200%; height:50%;
}

body:not(.about) #global_wrapper:hover #b-m-top {
    margin-bottom:300px;
}

#b-m-bottom {
    top:50%; margin-top:130px;
    width:200%; height:50%;
}

body:not(.about) #global_wrapper:hover #b-m-bottom {
    margin-top:300px;
}

#b-m-left {
    right:50%; margin-right:130px;
    width:50%; height:100%;
}

body:not(.about) #global_wrapper:hover #b-m-left {
    margin-right:300px;
}

#b-m-right {
    left:50%; margin-left:130px;
    width:150%; height:100%;
}

body:not(.about) #global_wrapper:hover #b-m-right {
    margin-left:300px;
}

#b-m-center {
   position:absolute; width:260px; height:260px; left:50%; top:50%; margin-left:-130px; margin-top:-130px;
    background-image:url(images/b-mask.png);
    background-size:100%;
}

body:not(.about) #global_wrapper:hover #b-m-center {
    width:600px; height:600px; margin-left:-300px; margin-top:-300px;
}

#logo_wrapper , #loading_wrapper {
    position:fixed; top:0; left:0; width:100%; height:100%;
    display:flex;
    align-items: center; justify-content: center;
    transition:width 0.75s;
}

.about #logo_wrapper {
    width:50%;
}

#loading_wrapper {
    color:white;
}

.loaded #loading_wrapper {
    display:none;
}

#logo {
    width:170px; position:relative; height:48px;
    transition:width 0.35s, height 0.35s, transform 0.1s, opacity 0.35s;
}

.about #logo {
    cursor:pointer;
    transform:scale(1.25);
    transition:width 0.35s, height 0.35s, transform 1s, opacity 0.35s;
}


#logo.pulse {
    transform:scale(1.03);
}

body:not(.about) #global_wrapper:hover #logo {
    width:140px; height:38px; opacity:0.65;
}

#logo * {
    transition:opacity 1s;
    position:absolute; width:100%;
}

#logo .show_on_hover , body:not(.about) #global_wrapper:hover #logo .hide_on_hover {opacity:0}

body:not(.about).loaded #global_wrapper:hover #logo .show_on_hover {opacity:1}

.about #logo .show_on_hover {opacity:1}

.about #logo .hide_on_hover {opacity:0}

#links {
    position:absolute; top:0; margin-top:75px; left:0px; height:100%; width:100%;
    opacity:0;
    display:flex;
    align-items:center; justify-content: center;
    transition:opacity 1s;
}

.about #links {
    opacity:0;
}

.about #links.destroyed {
    display:none;
}

#links a {
    color:white; text-decoration:none;
    font-size:18px;
    line-height:20px;
    border:1px solid transparent; border-radius:20px;
    margin:2px; padding:6px;
    letter-spacing:0.5px;
    transition: border-color 0.3s, padding 0.3s, margin 0.3s;
}

#links a:hover {
    border-color:white; padding-left:12px; padding-right:12px; margin-left:6px; margin-right:6px;
}

#links span {
  color:white; font-size:18px; 
}

body:not(.about).loaded #global_wrapper:hover #links {
    opacity:1;
}

#bio {
    position:absolute; top:100%; left:50%; right:0; height:100%;
    color:#ffffff;
    transition:top 0.75s;
}

#bio_inner {
    position:absolute; top:25px; right:-50px; padding-right:100px; left:0;
    bottom:25px; overflow-y:scroll;
    display:flex; flex-direction:column; justify-content: flex-start;
    font-size:14px; text-align:right; color:#EEEEEE;
}

#bio_inner b {
/*   margin-left:1px; margin-right:1px; letter-spacing:1px;*/
    font-size:15px; color:#FFFFFF;
}

#bio_inner .block {
    flex-shrink:0; margin:auto;
}

.about #bio {
    top:0;
}

#bio p {
    max-width:600px;
}

#close_bio_btn {
    position:absolute; top:25px; right:25px; width:25px; height:25px; text-align:center; line-height:23px;
    cursor:pointer; font-size:30px; opacity:0;
    border-radius:50%; border:transparent solid 1px;
    transition:opacity 1s, border-color 0.3s;
}

#close_bio_btn:hover {
    border-color:#ffffff;   
}

.about #close_bio_btn {
    opacity:1;
    transition:opacity 1s 1s, border-color 0.3s;
}

#in_bio_logo {
    display:none; width:200px; margin-bottom:50px; margin-top:50px;
    cursor:pointer;
}


@media (max-width:1000px) {
    
    .about #logo {
        display:none;
    }
    
    #bio {left:0%}
    
    #bio_inner {
        left:65px;
    }
    
    #in_bio_logo {
        display:inline-block;
    }
    
}

@media (max-height:600px) , (max-width:800px) {
    
    #bg-b {
        width:300px; height:300px; margin-left:-150px; margin-top:-150px;
    }
    
    body:not(.about) #global_wrapper:hover #b-m-top {
        margin-bottom:150px;
    }
    
    body:not(.about) #global_wrapper:hover #b-m-bottom {
        margin-top:150px;
    }
    
    body:not(.about) #global_wrapper:hover #b-m-left {
        margin-right:150px;
    }
    
    body:not(.about) #global_wrapper:hover #b-m-right {
        margin-left:150px;
    }

    body:not(.about) #global_wrapper:hover #b-m-center {
        width:300px; height:300px; margin-left:-150px; margin-top:-150px;
    }
    
}