/*******************************************************************
 * @author	Kingsley O. Uwode II, freelance web-developer/designer
 * @since	November 1 2016
 * @email	kmd@kingsleyuwode.com
 */

/* FONT imports */
@font-face{
    font-family: 'EurostileLTStdBold';
    src: url('../../media/fonts/EurostileLTStdBold.woff2') format('woff2');
    src: url('../../media/fonts/EurostileLTStdBold.woff') format('woff'),
         url('../../media/fonts/EurostileLTStdBold.ttf') format('truetype'),
         url('../../media/fonts/EurostileLTStdBold.svg#EurostileLTStdBold') format('svg'),
         url('../../media/fonts/EurostileLTStdBold.eot?#iefix') format('embedded-opentype'),
         url('../../media/fonts/EurostileLTStdBold.eot');
}

@font-face {
    font-family: 'Century Gothic';
    src: url('../../media/fonts/CenturyGothic.woff2') format('woff2');
    src: url('../../media/fonts/CenturyGothic.woff') format('woff'),
         url('../../media/fonts/CenturyGothic.ttf') format('truetype'),
         url('../../media/fonts/CenturyGothic.svg#CenturyGothic') format('svg'),
         url('../../media/fonts/CenturyGothic.eot?#iefix') format('embedded-opentype'),
         url('../../media/fonts/CenturyGothic.eot');
}


/* GENERAL stylings */
@keyframes general-opacity-in{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

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

body{
    background-color: #312926;
    cursor: default;
}

.bkg_full_size{
    background-color: transparent;
    background-position: left top;
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    background-attachment: scroll;
}


/* MAIN styling */
div[id=main]{
    position: relative;
    overflow: hidden;
    background-image: url(../../media/images/ku.svg);
    margin-left: auto;
    margin-right: auto;
    width: 719px;
    height: 1080px;
}


/* PHOTO styling */
div[id=photo]{
    background-image: url(../../media/images/ku.jpg);
    width: 100%;
    height: 100%;
    opacity: 0;
    animation-name: general-opacity-in;
    animation-delay: 2s;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}


/* EXPOSURE styling */
@keyframes exposure-bottoms-up{
    from{
        bottom: -19%;
    }
    to{
        bottom: 4%;
    }
}

div[id=main] > div[id=exposure]{
    position: absolute;
    bottom: -19%;
    width: 100%;
    animation-name: exposure-bottoms-up;
    animation-delay: 1s;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}


/* MENU styling */
div[id=main] > div[id=exposure] > div[id=menu]{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 80.807%;
    opacity: 0;
    animation-name: general-opacity-in;
    animation-delay: 4.5s;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    /*padding-bottom: 7.649543889845095%; dev only: render's a height so I can see containing elements boundaries */
}


/* IE_SVG_SCALE and related stylings: IE11 does not scale SVG properly, so, need to scale the <div> the <svg> is placed in instead. */
div[id=main] > div[id=exposure] div[class~=ie_svg_scale]{
    position: relative;
    height: 0px;
    overflow: hidden;
}

div[id=main] > div[id=exposure] div[class~=ie_svg_scale] svg{
    display: block;
    position: absolute;
    width: 100%;
}

div[id=main] > div[id=exposure] div[class~=ie_svg_scale] svg text{
    text-anchor: middle;
}

div[id=main] > div[id=exposure] div[class~=ie_svg_scale] svg > text{
    font-family: Century Gothic;
    fill: rgb(255,255,255);
}


/* BUTTON styling */
div[id=main] > div[id=exposure] > div[id=menu] > div[class~=button]{
    float: left; /* note: removes empty-space between elements but parent elemet <div id="menu">'s height will be rendered at zero(0) pixles */
    padding-bottom: 9.468%;
}

div[id=main] > div[id=exposure] > div[id=menu] > div[class~=button]:not(:first-child){
    margin-left: 7.658%;
}

div[id=main] > div[id=exposure] > div[id=menu] > div[class~=button]:hover a > svg > defs > mask > rect{
    opacity: 1;
    transition-duration: 0s;
}

div[id=main] > div[id=exposure] > div[id=menu] > div[class~=button] > a > svg > defs > mask > rect{
    fill: rgb(255,255,255);
    opacity: .5;
    transition: opacity 1.5s ease;
}

div[id=main] > div[id=exposure] > div[id=menu] > div[class~=button] > a > svg > defs > mask > text,
div[id=main] > div[id=exposure] > div[id=menu] > div[class~=button] > a > svg > defs > mask > g > path{
    fill: rgb(0,0,0);
}

div[id=main] > div[id=exposure] > div[id=menu] > div[class~=button] > a > svg > defs > mask > text{
    font-family: EurostileLTStdBold;
    font-size: 39px;
    font-weight: 700;
}

div[id=main] > div[id=exposure] > div[id=menu] > div[class~=button] > a > svg > rect{
    fill: rgb(255,255,255);
}


/* BRAND stylings */
div[id=main] > div[id=exposure] > div[id=menu] > div[id=imdb]{
    width: 21.173%;
}

div[id=main] > div[id=exposure] > div[id=menu] > div[id=facebook],
div[id=main] > div[id=exposure] > div[id=menu] > div[id=twitter],
div[id=main] > div[id=exposure] > div[id=menu] > div[id=instagram],
div[id=main] > div[id=exposure] > div[id=menu] > div[id=youtube]{
    width: 12.051%;
}


/* PHOTOGRAPHER stylings */
div[id=main] > div[id=exposure] > div[id=photographer]{
    margin-top: 25%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3.199%;
    width: 47.705%;
}

div[id=main] > div[id=exposure] > div[id=photographer] > svg > text{
    font-size: 20px;
    font-weight: 100;
    opacity: .5;
    letter-spacing: 3px;
}