@font-face {
    font-family:'Affect-Bold';
    src: url('fonts/Affect-Bold.eot');
    src: url('fonts/Affect-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Affect-Bold.woff2') format('woff2'),
        url('fonts/Affect-Bold.woff') format('woff'),
        url('fonts/Affect-Bold.svg#Affect-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'Affect-Light';
    src: url('fonts/Affect-Light.eot');
    src: url('fonts/Affect-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Affect-Light.woff2') format('woff2'),
        url('fonts/Affect-Light.woff') format('woff'),
        url('fonts/Affect-Light.svg#Affect-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'Affect-Regular';
    src: url('fonts/Affect.eot');
    src: url('fonts/Affect.eot?#iefix') format('embedded-opentype'),
        url('fonts/Affect.woff2') format('woff2'),
        url('fonts/Affect.woff') format('woff'),
        url('fonts/Affect.svg#Affect') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

*, html { margin: 0; padding: 0; }
body { width: 100%; height: auto; overflow: hidden; background-color: #DBD4CC; }

#loader { position: fixed; top: 0; left: 0; background-color: #2e251f; width: 100%; height: 100vh; z-index: 10; }

#window { position: relative; width: 100%; height: 100vh; }
#window .logo { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); opacity: 0; z-index: 4; }

.loader-ring { position: absolute; top: 50%; left: 50%; margin: -60px 0 0 -60px; width: 120px; height: 120px; }
.loader-ring-light { width: 120px; height: 120px; -moz-border-radius: 120px; -webkit-border-radius: 120px; border-radius: 120px; -moz-box-shadow: 0 4px 0 #B2A277 inset; -webkit-box-shadow: 0 4px 0 #B2A277 inset; box-shadow: 0 4px 0 #B2A277 inset; animation: rotate-360 2s linear infinite; }

@keyframes rotate-360 {
  from { -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); }
  to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

#window .hover { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0); z-index: 0; width: 100%; height: 100vh; }

#window .text { position: absolute; bottom: 5vh; left: 50%; width: 50%; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; }
#window .text p { color: #2e251f; font-family:'Affect-Light'; letter-spacing: 1px; font-size: 1vw; text-transform: uppercase; margin-bottom: .5vh; z-index: 5; }
#window .text span { color: #2e251f; font-family:'Affect-Regular'; font-size: 12px; text-transform: uppercase; }
.animated { position: relative; opacity: 0; -ms-transform: translate(0, 50%); -webkit-transform: translate(0, 50%); transform: translate(0, 50%); }

@media only screen and (max-device-width: 768px) {
    #window .logo { width: 50vw; }
    #window .text { width: 90%; }
    #window .text p { font-size: 16px; margin-bottom: 1.5vh; }
    #window .text span { font-size: 12px; }
}