/*
	Theme Name: Ornate Future;
	Theme URI: http://yeonryoo.info;
*/

@font-face{
	font-family: "f grotesk";
	src: url("FGroteskDemi-Regular.otf");
}


html{
	width: 100%;
	height: 100%;
}
body{
	background-color: white;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

object{
	width: 100%;
	height: 100%;
}
p{
	position: relative;
	width: 100%;
	height: 100%;	
}

svg{
	max-height: 100%;
	max-width: 100%;
	pointer-events: none;
}


.clicker{
	position: absolute;
	margin: 0;
	left:0;
	top:0;
	height: 100%;
	width: 100%;
}

.floatingWrapper{
	position: fixed;
	left:50%;
	top:50%;
	display: none;
	width: 100px;
	height: 100px;
	z-index: 1000;
	-webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none;
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none;
		
}

.stampWrapper{
	position: fixed;
	-webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none;
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none;
    pointer-events: auto;
}

.stamp{
	position: relative;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}
#mouse{
	-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    pointer-events: none;
}

.arrow{
	position: fixed;
	width: 45px;
	height: 45px;
	top: 50%;
	margin: 0px;
	margin-top: -22.5px;
	color:#7000ff;
	font-size: 72px;
	opacity: 1;
}

.arrow:hover{
	opacity: 0.4;
	cursor: pointer;
}

.arrowContent{
	position: relative;
	margin-top: -22px;
}

#a1{
	left:14px;
	display: none;
}

#a2{
	right:14px;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@-moz-keyframes spin2 { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin2 { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin2 { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }


.floating{
	position: relative;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}


.panel{
	width: 100%;
	height: 100%;
	left: 0;
	top:0;
	position: absolute;
	background-color: #ffffff;
}

#library{
	box-shadow: none;
	background-color:rgb(65,60,60) !important;
	z-index: 999;
	overflow: scroll;
	transition: top 1s;
	opacity: 0;
	position: fixed;
}


#medium{
	width: 1350px;
	height: 1000px;
	margin-left: -675px;
	margin-top:-500px;
	opacity: 1;
	display: none;
}

.svgWrapper{
	 width: 15%;
	 height: 15%;
	 padding: 2.3%;
	 float: left;
	 position: relative;
	 z-index: 1002;

}

.svgWrapper:hover{
	background-color: #7000ff;
}

.svgWrapperNum{
	position: absolute;
	top: 8px;
	right: 15px;
	color:white;
	font-size: 20px;
	font-family: "f grotesk";
	font-weight: 800;
}

#drawingBoard{
	background-color: transparent !important;
	position: fixed;
	pointer-events: none;
}

.title{
	font-family: "f grotesk";
	position: absolute;
	color: #7000ff;
	font-size: 3vw;
	margin:0px;
 -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none;
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none;
}

.text{
	font-family: "f grotesk";
	font-weight: 600;
	font-size: 22px;
	color:#7000ff;
	width:600px;
	height: 82%;
	top:115px;
	right:158px;
	position: absolute;
	overflow: scroll;
}

.colorWrapper{
	left:20px;
	bottom: 90px;
	position: absolute;
	pointer-events: auto;
}

.colorWrapper:hover{
	cursor: pointer;
}

.colorBox{
	position: relative;
	margin: 0px;
	margin-top: 10px;
	height: 20px;
	width: 20px;
	border: 1px solid white;	
}

.cursorWrapper{
	left:18px;
	bottom: 15px;
	height: 40px;
	position: absolute;
	pointer-events: auto;

}

.cursorWrapper:hover{
	cursor: pointer;
}

.cursorBox{
	position: relative;
	margin: 0px;
	margin-top: 0px;
	height: 35px;
	width: 35px;
	transform: rotate(-30deg);
	float: left;
}

.cursorBox p{
	margin: 0px;
	pointer-events: none;
}

.cursorBox: hover{
	opacity: 0.4;
}


#c1{
	background-color: #7000ff;
}

#c2{
	background-color: #986462;
}

#c3{
	background-color: #698d77;
}

#c4{
	background-color: #c04b59;
}

#c5{
	background-color: #ffffff;
}

#floatingColor{
	position: fixed;
	pointer-events: none;
	z-index: 1010;
}


#floatingCursor{
	position: fixed;
	pointer-events: none;
	width: 35px;
	height: 35px;
	transform: rotate(-30deg);
	z-index: 1010;
}


.text p{
	width: 100%;
	height: auto;
	position: relative;
	margin-top:0px;
	margin-bottom: 40px;
}


.libWrapper{
	width: 97%;
	margin-left:1.5%;
	margin-top: 10px;
	position: absolute;
}

.libPadding{
	width: 100%;
	height:30px;
	position: relative;
	float: left;
}

.downloadWrapper{
	width: 100%;
	margin: 0;
	margin-bottom:50px;
	position: relative;
	float: left;
}

.credit{
	width: 20%;
	margin: 0;
	margin-bottom: 30px;
	position: relative;
	float: left;
	font-family: "f grotesk";
	color: white;
	font-size: 1.2vw;

}

#line1{
	width: 100%;
	float: left;
	margin-top: 5px;
	position: relative;
}

#line2{
	width: 100%;
	float: left;
	margin-top: 5px;
	position: relative;
}

#t1{
	top:10px;
	left:15px;
}

#t2{
	top:10px;
	right:15px;
	z-index: 5;
}

#t3{
	top:10px;
	right: 15px;
	pointer-events: auto;
}

#t3:hover{
	cursor: pointer;
	opacity: 0.6;
}



#t4{
	position: relative;
	margin: 0;
	color: white !important;
	float: left;
}

#t5{
	bottom: 10px;
	right: 15px;
	pointer-events: auto;
}

#t6{
	position: relative;
	margin: 0;
	margin-bottom: 20px;
	color: white !important;

}

#t5:hover{
	cursor: pointer;
	opacity: 0.5;
}

.close{
	height: 3vw;
	width:3vw;
	margin-top: 0.35vw;
	float:right;
	position: absolute;
	right: 0px;
	top: 0px;
}

.close:hover{
	cursor: pointer;
	opacity: 0.5;
}

#x1{
	transform: rotate(45deg);
	width: 3vw;
	position: absolute;
	left: 0px;
	top: 1.5vw;
	margin: 0px;
}

#x2{
	transform: rotate(-45deg);
	width: 3vw;
	position: absolute;
	left: 0px;
	top: 1.5vw;
	margin: 0px;
}



#p2{
	background-color: white;
	overflow:visible;
	height: auto;
	left:100%;
	transition: left 1s;
}

#p3{
	left: 100%;
	transition: left 1s;
}

#p4{
	left: 100%;
	transition: left 1s;
}
#p5{
	left: 100%;
	transition: left 1s;
}

#p5 .pImageWrapper{
	background-image: url("http://yeonryoo.info/ornatefuture/wp-content/uploads/2018/05/Screen-Shot-2018-05-23-at-12.18.56-AM.jpg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 80%;
	height: 80%;
	display: block;
	margin:auto;
	position: relative;
	 top: 50%;
     transform: perspective(1px) translateY(-50%);
}

iframe{
	pointer-events: none;
}

.manifestoWrapper{
	position: relative;
	margin-left: 18.5%;
	width:65%;
	height:auto;
	font-size: 2vw;
	font-family: "f grotesk", san-serif;
	font-weight: 500;
	padding-top: 200px;
	padding-bottom:100px;
	color: #7000ff;
	overflow: visible;
}

.pImageWrapper{
	background-image: url("https://www.ecestaticos.com/imagestatic/clipping/87b/9a7/87b9a7107e041e6f78c62a9398829378/adolf-loos-el-revolucionario-arquitecto-de-interiores.jpg?mtime=1523361889");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 80%;
	height: 80%;
	display: block;
	margin:auto;
	position: relative;
	 top: 50%;
     transform: perspective(1px) translateY(-50%);
}

.videoWrapper{
	width: 80%;
	height: 80%;
	display: block;
	margin:auto;
	position: relative;
	 top: 50%;
     transform: perspective(1px) translateY(-50%)
}

a{
	color: #7000ff;
}

a:hover{
	opacity: 0.4;
}
.manifestoWrapper p{
	height: auto;
}

.list{
	width: 70%;
}

.dwnLink{
	width:17%;
	position: relative;
	font-size: 3vw;
	float: left;
	color: white;
	padding: 10px;
	font-family: "f grotesk";
}

.dwnLink:hover{
	background-color: #7000ff;
	opacity: 1;
}

.mTitle{
	display: none;
}
#mOrn{
	display: none;
}

.loadingPage{
	width: 100%;
	height: 100%;
	background-color: #7000ff;
	position: fixed;
	top: 0;
	left: 0;
	margin:0;
	display: flex;
	justify-content: center;
  	align-items: center; 
}

.loading{
	max-width: 100%;
	max-height: 100%;
	fill:white;
	margin: 7px;
}

.loadingWrapper{
	position: relative;
	width: 100px;
	margin: 0 auto;
}

#loading1{
	-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

#loading2{
	-webkit-animation:spin2 4s linear infinite;
    -moz-animation:spin2 4s linear infinite;
    animation:spin2 4s linear infinite;
}
@media (pointer: coarse){
	.panel{display:none;}
	.arrow{display: none;}
	.floatingWrapper{display: none;}
	#p2{display: block; left: 0px; background-color: #7000ff;position: relative;margin: 0px}
	.mTitle{display: block; color: white; font-family: "f grotesk"; position: relative;font-size: 10vw}
	#mt1{float: left;margin-left: 2.3%}
	#mt2{float: right; margin-right: 6.8%}
	#mOrn{display:block; fill: #7000ff; stroke:white;height: 90%; left:0;position: fixed; stroke-width:0.5px;margin-left: 4%; margin-top: 12%;
		-webkit-animation:spin 5s linear infinite;
    -moz-animation:spin 5s linear infinite;
    animation:spin 5s linear infinite;}
	.manifestoWrapper{ width: 90%; margin-left: 3%; font-size: 4vw; padding: 0; margin-top: 180%; color:white;float: left}
	body{overflow: scroll; background-color: #7000ff}
	a{color: white}
}