/* CSS Document */

/* div.reflection {opacity: 0.5; margin-top: -25px;}
img.eye {display: block; margin: 0 auto; height: 500px; clear: both; cursor: pointer;}
#clock {position: absolute; top: 78%; left: 70%;  text-shadow: 0.25px 0.25px 0 red, -0.25px -0.25px red ; color: #fff; font-size: 24px;}
#nav{display: none; background-color:#fff; border-radius: 100%; animation: expand 1s forwards ease-out; height: 700px; width: 700px;
float: left; margin: 0 auto; position: absolute; left: 25.5%; top: -18%; z-index: 1000}
div.navigation nav ul {list-style: none; text-align: center; display: block; margin: 0 auto; margin-top: 300px; height: 700px; padding: unset;}
@keyframes expand{
	/* 0% {height: 0px; width: 0px;}
	100% {height: 1000px; width: 1000px;} */
	/*
	from{
		transform: scale(0);
	}
	to{ transform: scale(1); }
}

.original-obj{ position: relative; }

li a{text-decoration: none; font-family: sans-serif;}
 nav ul li {margin-bottom: 15px;}

 div.reflection{height: 260px; overflow: hidden;}


 div.content{margin-top: 100px;} */


/* @media only screen and (min-width: 900px) {

#fafaMobile {z-index:99999999;}
}

.mySlides{background-color: #fff;}
#player-open {z-index:99999999;}


 ------------------- */

 #genbody .fade img{
 	object-fit: cover;
    height: 500px;
 }

  


 #clock{font-family: sans-serif;}
 #clock {  text-shadow: 0.25px 0.25px 0 #cc3333, -0.25px -0.25px red ; color: #fff; font-size: 24px; 
     text-align: right;
    top: -60px;
    position: inherit;

    opacity: 0;
}

#contact-form{ transition: 1s; }

.contact-form {    top: 70px;
    position: fixed;
    margin-left: 22px;
/*z-index: 9999999999; */
width: 50%;
}

    form{ color: #cc3333;
    	/*width: 30%;*/
     }

     textarea{font-family: sans-serif; width: 100%; border: 1px #aaa solid;
    border-radius: 7px; height: 150px;}
     .contact-form input{width: 99%; border: 1px #aaa solid;
    border-radius: 7px; height: 20px; min-width: 100%;}

 .contact-form button{
    /* right: 0px;
    position: absolute;
	border:unset;
	border-radius: 7px;
	background-color: #cc3333;
	color: #fff; */
 	position: absolute;
	border:unset;
	background-color: #fff;
    color: #fff;
    -webkit-text-stroke: #cc3333 1px;
    font-size: 20px;
    font-family: 'uniwars';
    margin-top: 10px;
    cursor: pointer;



} 



.contact, .about{position: fixed;}
.contact h1 {opacity: 0;}
.contact-form h2{font-size: 72px; -webkit-text-stroke: #cc3333 1.5px; color: #fff; margin-top: 0; max-width: 500px; margin-bottom: 25px;}
.contact-form p {color:#000; font-family:helvetica, sans-serif; font-weight:100; max-width:340px; line-height:25px;}
.contact-form a {text-decoration:none; color:#cc3333; transition:0.5s;}
.contact-form a:hover {color:#026906; text-decoration:underline;}

 /* linear-gradient(0deg, white 20%, #eee, white 50%) */

 /* .navigation, #maineye {position: absolute; width: 100%;} */



 /* --------- ANIMATION TEST -----------*/

body.home{max-height: 1000px; overflow: hidden; font-family: uniwars,ethnocentric,sans-serif;}

 .animation{position: relative; width: 700px; margin:0 auto; margin-top: -70px;}
 .animation img {position: absolute; width: 700px; height: 700px;  transition: 1s; /* 2s was old value */

/*     filter: hue-rotate(120deg); */
   

 }
 .animation{transform: scale(0.75);
    max-height: 1000px;
   /* overflow: hidden; */}

 @keyframes rotateone{

 	from{transform: rotate(0);}
 	to {transform: rotate(22.5deg);}
 }

 @keyframes rotatetwo{

 	from{transform: rotate(0);}
 	to {transform: rotate(45deg);}
 }

 @keyframes rotatethree{

 	from{transform: rotate(0);}
 	to {transform: rotate(67.5deg);}
 }
@keyframes rotateall{

 	from{transform: rotate(0);}
 	to {transform: rotate(360deg); transform-origin:  center center;} }

 	/* Eye Animation */
 #one{animation: rotateone 5s forwards;}
 #two{animation: rotatetwo 5s forwards;}
 #three{animation: rotatethree 5s forwards;}
 .comp1{animation: rotateall 200s 3s infinite ease-out; height: 700px; width:700px; cursor: pointer;} 


 #five{animation: rotateone 5s forwards;}
 #six{animation: rotatetwo 5s forwards;}
 #seven{animation: rotatethree 5s forwards;}
 .comp1{animation: rotateall 200s 3s infinite ease-out; height: 700px; width:700px; cursor: pointer;} 

 #eye-pfo, #eye-contact, #eye-about {position: fixed; right: 0; bottom:5%; transition: 0.5s;}

 #nav-holder{background-color: #fff; height: 700px; width: 700px; border-radius: 100%; position: absolute;
 	animation: expand-nav 1s linear forwards; z-index: 1000; display: none;

    background-image: url(img/bg-lines.png);
    background-size: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    background-position-y: 220px;
 }


 #print-gallery, #web-gallery, #photo-gallery, #misc-gallery{/*background-color: #fff; height: 100%; width: 100%; border-radius: 100%; position: absolute;
 	animation: expand-pg 1s linear forwards; z-index: 1000; display: none; top: 0; left: 0;
*/
animation: expand-pg 1s linear forwards; z-index: 1000; display: none;
 	/* flex-wrap: wrap;
align-content: flex-start;
/* margin: 0 auto;
width: 100%;
position: absolute;
/* justify-content: space-between; 
flex-direction: row;

width: 100%;
    height: 90px;
    margin: 0 auto;
    flex-wrap: wrap; */

    grid-template-columns: repeat(auto-fit, minmax(200px, 250px));
    justify-content: center;
    background-color: #fff;
    width: 100vw;
    padding-top: 5%;
    



}

#web-gallery, #photo-gallery, #misc-gallery{grid-template-columns: repeat(auto-fit, minmax(200px, 350px));}

a#pgcloser, a#wgcloser, a#photogcloser, a#mgcloser{
opacity: 0;
transition: 1s;

    margin: 20px;
    margin-top: 24px;
    height: 70px;
    /* margin-top: 10px; */
   /* display: block;*/
    /* position: absolute; */
    background-color: #fff;
    margin-bottom: -30px;
color:#fff;
cursor:pointer;}

#print-gallery img,#web-gallery img, #photo-gallery img, #misc-gallery img {  max-height: 200px;
  max-width: 300px;
  margin: 10px;
 }



 /* #web-gallery img{  max-height: 200px;
  max-width: 300px;
  margin: 10px;
 } */

div.print{
	margin: 0 auto;
	width: 90%;
	top: -50px;
	position: absolute;
}

.center-pg{margin: 0 auto; width: 100%; height: 100%}

@keyframes expand-pg{
	/* 0% {height: 0px; width: 0px;}
	100% {height: 1000px; width: 1000px;} */
	from{
		transform: scale(0);
	}
	to{ transform: scale(1); }
}

@keyframes contract-pg{
	/* 0% {height: 0px; width: 0px;}
	100% {height: 1000px; width: 1000px;} */
	from{
		transform: scale(1);
	}
	to{ transform: scale(0); }
}

/*
	animation: bgmove 30s infinite;
@keyframes bg-move{
	from{background-size: 50%;
		background-position: 0px 220px}
	to {background-size: 80%;
		background-position: -100px 100px;}
} */

 @keyframes expand-nav{
	/* 0% {height: 0px; width: 0px;}
	100% {height: 1000px; width: 1000px;} */
	from{
		transform: scale(0);
	}
	to{ transform: scale(4); }
}

@keyframes contract-nav{
	/* 0% {height: 0px; width: 0px;}
	100% {height: 1000px; width: 1000px;} */
	from{
		transform: scale(4);
	}
	to{ transform: scale(0); }
}

li a{text-decoration: none; font-family: ethnocentric, uniwars, sans-serif; color: #cc3333; font-weight: 200;
/* text-shadow: 0.35px 0 0 #cc3333, 0 -0.35px 0 #cc3333, 0 0.35px 0 #cc3333, -0.35px 0 0 #cc3333; */
-webkit-text-stroke: #cc3333 0.3px;
-webkit-text-fill-color:#fff;
cursor:pointer; 

}
 nav ul li {margin-bottom: 15px;}

 nav{height: 700px; width: 700px; text-align: center; overflow: hidden;}
 nav ul {margin-top:267px; padding: unset; list-style: none;}


 @media(max-width: 500px){
 	 nav{transform: scale(0.8);}
 }

.reflection {opacity: 0.6; margin-top: -100px;}


/* reflection animations */

@keyframes reflectone{

 	from{transform: rotate(0);}
 	to {transform: rotate(-22.5deg);}
 }

 @keyframes reflecttwo{

 	from{transform: rotate(0);}
 	to {transform: rotate(-45deg);}
 }

 @keyframes reflectthree{

 	from{transform: rotate(0);}
 	to {transform: rotate(-67.5deg);}
 }
@keyframes reflectall{

 	from{transform: rotate(0);}
 	to {transform: rotate(-360deg); transform-origin:  center center;} }

 	.reflection #one{animation: reflectone 5s forwards;}
 .reflection #two{animation: reflecttwo 5s forwards;}
 .reflection #three{animation: reflectthree 5s forwards;}
 .reflection .comp1{animation: reflectall 200s 3s infinite ease-out; height: 700px; width:700px;} 





/*

.reflection, {height: 350px; overflow: hidden;}


 @keyframes counter-rotate{

 	from{transform: rotate(0);}
 	to {transform: rotate(-360deg); transform-origin:  center center;}
 }
#lid{animation: counter-rotate 60s 3s infinite ease-out;} */

.ripple img{ margin-top: -370px; z-index: -100000; opacity: 0;}

#ripple1 {animation: rippleone 20s 2s infinite}
#ripple2 {animation: rippleone 20s 7s infinite}
#ripple3 {animation: rippleone 20s 12s infinite}
#ripple4 {animation: rippleone 20s 17s infinite}
#ripple5 {animation: rippleone 20s 22s infinite}

@keyframes rippleone {

	0%{transform: scale(0);
		opacity: 0;}
5%{opacity: 1}
	90%{opacity: 0.5;}
	100%{transform: scale(2);
		opacity: 0;}

	/*from{
		transform: scale(0);
		opacity: 1;
	}
	to{ transform: scale(3);
		opacity: 0; } 

		*/
} 

.player
{    height: 100vh;
    width: 100vh;
    background-color: darkred;
    border-radius: 0 50% 50% 0;
    /* float: left; */
   margin-left: -1000px;
    margin-top: 60px;
    position: fixed;
    z-index: 1000000000;
    transition: 1s;
    max-height: 1440px;
    max-width: 1440px;
    /*display: none;*/

}

.track-art{

    height: 20vh;
    width: 20vh;
    background-color: white;
    background-size: cover;
    border-radius: 12%;
    /* position: relative;
    right: -300px;
   top: 250px; */
    max-height: 288px;
    max-width: 288px;
    margin-bottom: 20px;
 /* -webkit-filter: brightness(100%);
	-moz-filter: brightness(100%);
	-o-filter: brightness(100%);
	-ms-filter: brightness(100%);
	filter: brightness(100%); */
}

/* div.track-art:hover{
	transition: 2s;
	 -webkit-filter: brightness(50%);
	-moz-filter: brightness(50%);
	-o-filter: brightness(50%);
	-ms-filter: brightness(50%);
	filter: brightness(50%);
} */


.ui-holder{ color: #fff; position: relative; top: 25%; left: 65%; 
			font-family: futura;
    		font-size: 10px;
    		line-height: 4px;
    		max-width: 20em;
    		margin-top: 20px;
    }
#seeker{transform: rotate(90deg); position: relative;

     right: 168px;
    top: 135px;
    width: 250px;8}

#artist{margin-top: 30px;}

.track-genre{margin-bottom: 15px;}

#player-open{

	    position: fixed;
    top: 25px;
    background-image: url(img/play-outline.svg);
    font-size: 0px;
    height: 30px;
    width: 50px;
    background-repeat: no-repeat;
    left: 25px;
    cursor: pointer;
}

p.nav-mobile{
	left: 70px;
	 position: fixed;
    top: 25px;
    background-image: url(img/fafa.svg);
    font-size: 0px;
    height: 30px;
    width: 40px;
    background-repeat: no-repeat;
    cursor: pointer;
    display: none;
}


@media(max-width: 640px){

	p.nav-mobile{ display: inline; }
	#eye-pfo, #eye-contact {display: none;}
	.contact-form {width: 90%;}
}


@media(min-width: 640px) and (max-width: 750px){

	#eye-pfo, #eye-contact{right: -45%;}
}

@media(min-width: 750px) and (max-width: 920px){
	#eye-pfo, #eye-contact{right: -25%;}

	}
@media(min-width: 920px) and (max-width: 1200px){
	 #eye-contact{right: -10%;}

	}

#closer{
	height: 100%;
	width: 90%;
	/*background-color: blue;*/
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
}

#logo{
	height: 100%;
	width: 100%;
	background-image: url(img/index-logo.svg);
	background-repeat: no-repeat;
	position: fixed;
	top: 10%;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	animation: fadeinout 5s forwards;

	
}

@keyframes fadeout{
	0%{opacity: 0}
	100%{opacity: 1;}
}
@keyframes fadeinout{
	0%{opacity: 0}
	40%{opacity: 1;}
	80%{opacity: 1;}
	100%{opacity: 0;}
}


@keyframes fadein{
	0%{opacity: 1}
	100%{opacity: 0;}
}

.small-block{background-color: #fff ;  height: 150px; width: 33.33%; margin-top: 29%;}
#noah-block{animation: fadein 1s 1s forwards;}
#elin-block {width: 25.2%; animation: fadein 1s 1.5s forwards;}
#smith-block {animation: fadein 1s 2s forwards;}

 #all{animation: fadeout 2s forwards;} 


/******************* RANGE INPUT STYLING OVERRIDE *********************/

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

/******************* RANGE INPUT CUSTOM STYLING *********************/

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 100%;
  background: darkred;
  cursor: pointer;
   /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
 margin-top: -1.7px;
 transition: 1s;
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
 height: 16px;
  width: 16px;
  border-radius: 50%;
  background: darkred;
  cursor: pointer;
  border: unset;
  transition: 1s;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
 height: 16px;
  width: 16px;
  border-radius: 50%;
  background: darkred;
  cursor: pointer;
   border: unset;
   transition: 1s;
}


input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background: #fff;
  border-radius: 5px;

}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #fff;
}


/***************** under construction V **************/

input[type=range]::-moz-range-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background: #fff;
  border-radius: 5px;
}

input[type=range]::-ms-track {
   width: 100%;
  height: 12px;
  cursor: pointer;
  background: #fff;
  border-radius: 5px;
}


#previous{

	height: 40px;
    width: 40px;
    background-color: unset;
    border: unset;
    background-image: url(img/player-icons/previous.svg);
    background-repeat: no-repeat;

}
#pause-play {

	    height: 40px;
    width: 20px;
    background-color: unset;
    border: unset;
    background-image: url(img/player-icons/play.svg);
    background-repeat: no-repeat;
    margin-left: 15px;
}

#next{    height: 40px;
    width: 40px;
    background-color: unset;
    border: unset;
    background-image: url(img/player-icons/next.svg);
    background-repeat: no-repeat;
    margin-left: 15px;
}



/* ------------------------------  Portfolio ------------------------------ */

.pfo-nav li a {font-family: uniwars; font-size: 72px; -webkit-text-stroke: #cc3333 1.5px; line-height: 100px;}
.pfo-nav {list-style: none; transition: 1s;}
.portfolio{position: fixed; top: 10%; left: -15px;}
.portfolio::before{
	background-image:url(img/bg-lines.png); 
	content: "";
	position: absolute;
	width: 100%;
	height: 200%;
	z-index: -1;
	top: 100px;
	left: -100px;
	transform: rotate(30deg);
	background-size: 100%;
	background-repeat: no-repeat;
	opacity: 0.8;
}

.eye-moved { position: absolute; right: -500px; }





/* ------------------------------- GALLERIES PAGE ----------------------------------*/


/* .gallerypagenav {margin-top: -400px;} */



.mag-zoom{    object-fit: cover;
    min-height: 500px;}

.cup-zoom{    width: 300px;
    object-fit: cover;}



    /* --------------------------- MOBILE HOME --------------------------*/

    #mobile-nav-holder nav ul li a {font-size: 80px; -webkit-text-stroke: #cc3333 1.5px;}
#mobile-nav-holder nav {overflow: none; width: unset; height: unset;

    /*margin-left: -5000px;*/
    position: fixed;
    background-color: #fff;
    z-index: 999;
   height: 1000px;
    opacity: 0;
    transition: 0.5s;
    width: 100%;
    pointer-events: none;
    margin-top: -150px;


}

.conmob #mobile-nav-holder nav {
    margin-top: -770px;
    width: 120%;
    height:3000px;
    margin-left:-60px;
}

.conmob #contact-form {margin-top:90px; position:unset;}
.conmob #contact-form h2 {font-size:66px;}


p.nav-mobile2{
  left: 20px;
   position: fixed;
    top: 25px;
    background-image: url(img/fafa.svg);
    font-size: 0px;
    height: 30px;
    width: 40px;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 9999;

   /* display: inline; */

}

body.mobile {max-height: 1000px; font-family: uniwars,ethnocentric,sans-serif;}

@media(max-width: 500px){
  .mobile nav{transform: scale(1);}
 }

div.mobile-animation{ transform: scale(0.5); left: -150px; }

#mobnavi  ul li a {

  font-size: 50px; /* 70 */
  line-height:90px ;
 -webkit-text-stroke: #cc3333 1.5px;}

#mobnavi {

   height: 100%;
    width: 100%;
    z-index: 999999;
    background-color: #fff;
    position: fixed;
    opacity:0;
    text-align: center;
    font-size: 60px;
    overflow: scroll;
    display: none;
    top: 0
}
#mobnavi ul{list-style: none;}

#nav-buttons{

    z-index: 99999999999999999;
    height: 80px;
    position: fixed;
    width: 100%;
    top: 0;
    transition: 0.2s;
}

@media(min-width: 701px){
#nav-buttons{
background-image: linear-gradient(180deg, #fff 40%, rgba(255,255,255,0) 100%);
}

}


/* 404 Page */


.fourofourpage {background-color: #000;}

.fourofourpage .animation  img { animation: glow 1.5s ease-in infinite alternate; }

.fourofourpage .ripple {filter: invert(1);
                        display: none;}

                        .fourofourpage nav{background-color: #000; background-image: none;}
                        .fourofourpage nav li a {-webkit-text-fill-color: #000;}

@keyframes glow{

  0%{filter: drop-shadow(0px 0px 0px red);}
 /* 50% {filter: drop-shadow(2px 4px 6px red);} */
  100% {filter: drop-shadow(4px 6px 8px red);}
 }
/*
.fourofourpage img#comp2, .comp1 img {filter: drop-shadow(4px 6px 8px red);} */

div.fourofourtext p {color: #000; font-size: 50px;
 -webkit-text-stroke: #cc3333 1px;

    margin: 0;
    width: 767px;
    animation: glow 1.5s ease-in infinite alternate;
    margin-left: -30px;
  }
  div.fourofourtext a {color: #cc3333; cursor: pointer; z-index: 9999999999999999;
    margin-left: -27px; display: block; height: 20px; position: absolute;}
    
    .conani {    margin-top: -170px;
    margin-left: -12px;
    position:fixed;
    }