/*
Theme Name: Oddeyesee
Theme URI: http://themekraft.com/store/_tk-free-wordpress-starter-theme-based-on-twitter-bootstrap/
Template: _tk
Author: ThemeKraft
Author URI: http://themekraft.com/
Description: Hi, I am the ultra minimal starter theme _tk, ready for your next awesome WordPress project! I am the most seamless and minimalistic integration of Twitter Bootstrap Framework into the _s starter theme from Automattic, the guys behind WordPress. You can find me on GitHub. Fork me! I'm waiting for you ;)
Tags: gray,light,two-columns,right-sidebar,responsive-layout,custom-background,custom-colors,custom-header,custom-menu,featured-images,flexible-header,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.1.10.1634679520
Updated: 2021-10-19 21:38:40

*/


@font-face {
    font-family: 'Brilon';
    src: url('fonts/brilon-regular.woff2') format('woff2'),
         url('fonts/brilon-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*
@font-face {
  font-family: 'Brilon-Regular';
  src: url('fonts/Brilon-Regular.eot?#iefix') format('embedded-opentype'),  
        url('fonts/Brilon-Regular.otf')  format('opentype'),
         url('fonts/Brilon-Regular.woff') format('woff'), 
         url('fonts/Brilon-Regular.ttf')  format('truetype'), 
         url('fonts/Brilon-Regular.svg#Brilon-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.main-content{
	background-image: url(images/oddeyesee2.jpg);
	background-size: 105%;
	background-position: center;
	min-height: 100vh;
	border: 20px solid #000;
}*/
.main-content{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*pointer-events: none;*/
}
.main-title{
    font-family: 'Brilon';
    width: 640px;
    text-align: center;
    font-size: 100px;
    color: #232e51;
    position: fixed;
    margin-top: 55px;
    z-index: 9999;
    top: 0;
    display: block;
    background-image: url(images/oddeyesee-title.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    height: 150px;
    left: 50%;
    margin-left: -330px;

    cursor: pointer;
}
.soul-window{
	width: 100%;
	height: 100vh;
	position: fixed;
	overflow: hidden;
	top:0;
	left: 0;


}
.teevee{
	border: 40px solid #000;
	background: transparent;
	z-index: 99;
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;

    pointer-events: none;
}
.inner-border{
	border: 60px solid #d70272;
    background: transparent;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0.5;
    mix-blend-mode: multiply;

    pointer-events: none;
}

.vizzz{
    opacity: 1!important;
}

.dream-basket{

}
.beard-background{
	background-image: url(images/background-beard2.jpg);
	background-size: 105%;
	background-position: center;
	min-height: 100vh;

	position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;

    pointer-events: none;
}
.glow{
	background-image: url(images/glow.png);
	background-size: 105%;
	background-position: center;
	min-height: 100vh;

	position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;

    pointer-events: none;

    animation: pulse-animation 20s ease-in-out infinite;
}
.man-container{
    min-height: 100vh;

    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    transform: rotate(1deg);
}
.man{
	background-image: url(images/man-noeyes.png);
	    background-size: 90%;
    background-position: top center;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    z-index: 1;
    width: 100%;
}
.third-eye{
	background-image: url(images/this-eye.png);
	    background-size: 90%;
    background-position: center;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    margin-left: 10px;
    margin-top: -35px;
}
.pupil-eye{
    background-image: url(images/dialated-pupil-eye.png);
        background-size: 90%;
    background-position: center;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    margin-left: 6px;
    margin-top: -37px;
    opacity: 0;

    -webkit-transition: opacity 3s ease-in-out;
  -moz-transition: opacity 3s ease-in-out;
  -o-transition: opacity 3s ease-in-out;
  transition: opacity 3s ease-in-out;
}
.key-eye{
    background-image: url(images/keyhole-eye.png);
    background-size: 90%;
    background-position: center;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    margin-left: -1px;
    margin-top: -4px;
    opacity: 0;

    -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.left-eye{
	background-image: url(images/left-eye.png);
	    background-size: 90%;
    background-position: center;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    margin-left: 9px;
    margin-top: -34px;

    /*-webkit-transition: background-position 50ms ease-in-out;
  -moz-transition: background-position 50ms ease-in-out;
  -o-transition: background-position 50ms ease-in-out;
  transition: background-position 50ms ease-in-out;*/
}
.right-eye{
	background-image: url(images/right-eye.png);
	background-size: 90%;
    background-position: center;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    margin-left: 9px;
    margin-top: -34px;

     /*-webkit-transition: background-position 50ms ease-in-out;
  -moz-transition: background-position 50ms ease-in-out;
  -o-transition: background-position 50ms ease-in-out;
  transition: background-position 50ms ease-in-out;*/
}
.big-pupil{
    background-image: url(images/dialated-pupil-eye.png);
}
.left-eye.big-pupil{
    margin-left:-88px;
    margin-top:56px;
}
.right-eye.big-pupil{
    margin-left:90px;
    margin-top:46px;
}
.eye-color{
    animation: colour-change 5s ease-in-out infinite;
}
.eye{
	background-image: url(images/eye-outer.png);
        background-size: 113px 113px;
        background-position: 50% 50%;
    min-height: 100vh;
    position: absolute;
    z-index: 16;
    margin-top: -175px;
    margin-left: 0px;
    width: 100%;
    background-repeat: no-repeat;
}
.eyeball{
	background-image: url(images/eye-ball2.png);
    background-size: 98px 94px;
    background-position: 50% 50%;
    min-height: 100vh;
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    margin-top: -175px;
    margin-left: 1px;
    background-repeat: no-repeat;
    top: 0px;
    left: 0px;
}
.magic-key{
    width: 68px;
    height: 160px;
    position: fixed;
    margin-top: 50px;
    z-index: 99999;
    top: 0;
    display: block;
    background-image: url(images/magic-key.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    left: 50%;
    margin-left: -14px;

   touch-action: none;
  user-select: none;
  transform: translate(0px, 0px);
  cursor: pointer;

  opacity: 0;

  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.beard-chin{
    background-image: url(images/beard-chin.png);
    background-size: 90%;
    background-position: center;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    margin-left: 10px;
    margin-top: 4px;
    opacity:0;

    -webkit-transition: margin-top 2s;
  -moz-transition: margin-top 2s;
  -o-transition: margin-top 2s;
  transition: margin-top 2s;
}
.mustache{
    background-image: url(images/mustache.png);
    background-size: 90%;
    background-position: center;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    margin-left: 6px;
    margin-top: -3px;
    opacity:0;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.2);
    transform: scale(1);
    filter: hue-rotate(0deg);
  }
  50% {
    box-shadow: 0 0 80px 100px rgba(255, 255, 255, 0);
    transform: scale(1.05);
    filter: hue-rotate(360deg);
  }
  90% {
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.2);
    transform: scale(1);
    filter: hue-rotate(0deg);
  }
}

@keyframes colour-change {
  0% {
     filter: hue-rotate(0deg);
  }
  50% {
     filter: hue-rotate(360deg);
  }
  90% {
     filter: hue-rotate(0deg);
  }
}