html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
* { box-sizing: border-box; } 



body{
	font-size: 16px;
	font-family: 'Manrope', sans-serif;
	max-width: 1020px;
	margin:auto;
	color:#333;

}

header{
	position: fixed;
	z-index: 900;
	background: white;
	top:0;
	height:120px;
	width: 1020px;
	
}

#rule{
	height: 14px;
	border:2px solid black;
	margin-top:18px;
	background-image: linear-gradient(to right, #FFF3FF, #E6FFE6);
}
nav{
	display: block;
	float: right;
	position: absolute;
	right:0;
	top:60px;
}

nav ul{
	list-style: none;
}

nav ul li{
	display: inline-block;
	margin: 10px;
}

nav ul li:nth-child(4n){
	margin-right: 0;
}

nav ul li a{
	color:#000 !important;
}

nav ul li a:link, a:visited{
	text-decoration: none;
	color:#000;
	transition: .2s ease;
}

nav ul li a:hover{
	color:#000 !important;
}

img{
	width: 100%;
	display: block;
	margin:auto;
	-webkit-user-drag: none;
}

a{
	color: #000;
	text-decoration: none;
}
a:hover{
	font-weight: 600;
}

a:hover .homecat h2{
	font-weight: 600;
}
footer{
	padding-top:40px;
	display:block;
	text-align:center;
	color:#000;
	font-size: .7em;
	clear:both;
}

.callout{
	font-family: "Manrope",sans-serif;
font-style: italic;
font-weight: 600;
	font-size: 1.4em;
}

.smaller{
	font-family: "Manrope",sans-serif;
font-style: italic;
font-weight: 400;
	font-size: .8em;
}

.smaller a:link, a:visited{
	color:#000;
	font-weight: normal;
}

#logo{
	position: relative;
	display: block;
	padding-top: 25px;
	width:100px;
	float: left;
}

#logo img{
	position: absolute;

}


.student{
	position: absolute;
	z-index: 800;
	float: left;
	border:2px solid black;
	margin:15px -2px;
	padding: 5px;
	background-image: linear-gradient(to right, #FFF3FF, #E6FFE6);

}


.name {
	padding-top: 50px;
	padding-left: 100px;
}

.name>a{
	text-decoration: none;
	color: black;
	font-size: 1.5em;
	line-height: 0.5em;
}

#header-small{
	height:60px;
}

#header-small>#logo{
	display: block !important;
	width:40px;
}

#header-small>#logo_name{
	display: none;
}

#header-small>nav{
	top:20px;
	font-size: .8em;
}






.main{
	position: relative;
	margin-top:135px;
    display: block;
	max-width: 1000px;
	margin-left:auto;
	margin-right: auto;
	height:100%;
}


.one{
	display: block;
	width:98%;
	float: left;
	margin: 1%;

}

.two{
	display: block;
	width:48%;
	float:left;
	margin:1%;
	
}


.three{
	width:31.33%;
	float:left;
	margin:1%;
}

.caption-mobile{
		display: none;
	}

.row{
	height: 310px;
}

.slides{
	height: 600px;

}

/*.long{
	height: 300px;
}*/

.short{
	height: 150px;
}

.logovid{
	height: auto;
}

@keyframes zoom {
	from {width: 49%;}
	to {width: 99%;}
}
.zoom{
	width: 99%;
	height: 600px;
	z-index: 800;
	animation-name: zoom;
}




.box{
	border: 2px solid black;
	text-align: center;
}

img.mobile-img{
	display: none;
}

.home:hover{
	cursor:pointer;
}

.home{
	background-image: linear-gradient(to right, #FFF3FF, #E6FFE6);
	position: relative;
}

.home:hover img{
	opacity: 0.2;
}
.home h2{
	display: none;
	color: #000;
	position: absolute;
	font-size: 1.5em;
	font-weight: 400;
	top: 20px;
	left: 20px;
}

.home:hover h2{
	display: block;
}


.homecat{
	background-image: linear-gradient(to right, #FFF3FF, #E6FFE6);
}
.homecat h2{
	display: block;
	color: #000;
	font-size: 1.5em;
	font-weight: 400;
	padding: 20px;
	text-align: left;
}



.home-logo p{
	color:black;
	font-size: .8em;
	opacity: 0.3;
}

.home-logo{
	
}

.home-hover{
	padding:15px;
	background-color: rgba(18,49,43,0.5);
	height:100%;
}

.home-logo img{
	
}
.home-hover img{
	opacity: 1;
}
.home-hover p{
	opacity: 1;
}


.camp{
	max-height:300px;
}

.title{
	height:40px;
	font-size: 2em;
	font-weight: bold;
}
.letter{
	
}

.letter img{
	max-width: 100%;
}

.link{
	padding: 10px 0;
	text-align: center;
}

.link a{
	text-decoration: none;
}

.link img{
	max-width: 100%;
}

.link:hover{
	background-image: linear-gradient(to right, #FFF3FF, #E6FFE6);
}

.info{
	text-align: center;
}

.info p{
	opacity: 1 !important;
	padding: 10px 140px;
}

.proto{
	text-align: center;
}

iframe{
	max-width: 100%;
	max-height: 100%;
}



.swiper {
  height: 500px;
}



.process{
	margin-top: 10px;
	max-height: 720px;
	overflow: hidden;
	text-align: center;
	-webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none;    
  -ms-user-select: none;    
  user-select: none; 
}

.invisible{
	display: block;
	content: " ";
	opacity: 0;
}
.process p{
	color: #000;
	padding-bottom: 100px;
}
.process>h2>a{
	color: #000;
	font-size: .7em;
}

.process_img{
	overflow:hidden; 
	/*white-space: nowrap;*/
}

.process_show{
	color: #000;
	padding-top: 10px;
	font-weight: bold;
}
.process_show{
	color:#000;

}

.process_img h3{
	display: inline-block;
	font-size: 1.5em;
	padding-bottom:5px;
	color: #000;

}
.process_img div{
	max-width:100%;
	text-align: center;
}


.slideshow_left{
	
	display:inline-block;
	width:50px;
	height:50px;
	cursor:pointer;
	font-size: 3em;
	color:#000;
}


.slideshow_right{
	
	display:inline-block;
	width:50px;
	height: 50px;
	cursor:pointer;
	font-size: 3em;
	color:#000;
}

/*#last{
	display: inline-block;
	width:50px;
	height:50px;
	color: transparent;
}

#first{
	display: inline-block;
	width:50px;
	height:50px;
	color: transparent;
}
*/

.home h1{
	display: block;
	position: absolute;
	width: 100%;
	top:15%;
	text-align: center;
	color: white;
	font-size: 2.5em;
	letter-spacing: .1em;
	
}

.h3{
	font-size: 1.2em;
}

hr{
	border: 1px solid black;
	margin: 20px 0;
	float: left;
	width: 100%
}

.hd{
	background-color:#AD4211;
}

.para{
	background-color: #8D0000;
	max-height:740px;
}

.knit{
	border:2px solid black;
	max-height:720px;
}

.lmk{
	background-color: #B8C8D1;
	max-height: 735px;
}

.knit-head{
	background-image: url('../img/home_knitster.jpg');
	background-size: cover;
}

.diy-head{
	background-image: url('../img/home_hddiy2.jpg');
	background-size: cover;
}

.para-head{
	background-image: url('../img/home_paradox.jpg');
	background-size: cover;
}

.trill-head{
	background-image: url('../img/home_trillian.jpg');
	background-size: cover;
}

.rolet-head{
	background-image: url('../img/home_rolet.jpg');
	background-size: cover;
}

.lmk-head{
	background-image: url('../img/home_lmk.jpg');
	background-size: cover;
}

.logo-head{
	background-image: url('../img/home_50.jpg');
	background-size: cover;
}

.greek-head{
	background-image: url('../img/home_greeks.jpg');
	background-size: cover;
}

.html-head{
	background-image: url('../img/home_html.jpg');
	background-size: cover;
}

.letter-head{
	background-image: url('../img/home_letter.jpg');
	background-size: cover;
}



/************ FINE ART ***************/


#art-overlay{
	position: fixed;
	top:0;
	left:0;
	z-index: 950;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.7);
}

.art{
	max-height:500px;
	border: 2px solid black;
}

.art:hover{
	cursor: pointer;
}

.big{
	position: fixed;
	top:40px;
	z-index: 999;
	max-width: 1020px;
	display: block;
	text-align: center;
}

.big img{

	margin:auto;
}

.big iframe{
	display: block;
	margin-top: 30px;
	max-height: 690px;
	
}

.big h2{
	color: #fff;
	font-size: .8em;
	font-weight: normal;
}

.big h3{
	color: #fff;
	font-size: .7em;
	font-weight: normal;
}

.exit{
	font-weight: 700;
	font-size: 1.5em;
	position: relative;
	float:right;
	z-index: 999;
	color:#fff;
}

.exit:hover{
	cursor: pointer;
}

/*********** CONTACT**************/

/*.me{
	background: url(../img/new/selfie.png) top no-repeat;
	height:600px;
}*/

.contact{
	display: block;
	margin-top: 80px;
	padding-left: 20px;
}

.contact h1{
	font-size: 2em;

}



.contact h3>a{
	text-decoration: none;
	font-size: 1.2em;
	font-weight: 400;

	padding-bottom: 20px;
}

.contact a{
	text-decoration: none;
	font-size: 1em;

}

.contact a:hover{
	font-weight: 600;
}

.contact p{
	padding-top: 10px;
	padding-bottom: 20px;
	color:#333 !important;
	opacity:1 !important;
}










@media (max-width: 1020px) {
	.main{
		padding:0 20px;
	}
   header{
		width:100%;
	
	}
	nav{
		padding:0 10px;
	}
	#rule{
		width: 98%;
		margin-left: 1%;
	}
	.two{
		
	}

	.three{
		
	}

	.process{
		max-height: 680px;
	}

	.info p{
	padding: 10px 100px;
	}

	.big{
			left: 0;
	}
}



@media (max-width: 780px) {

	img.mobile-img{
		display: block;
	}

	img.desk-img{
		display: none;
	}
	.home-logo img{
		opacity: 1;
	}
	.home-logo p{
		opacity: 1;
	}
	.home-hover img{
		opacity: 1;
	}
	.home-hover p{
		opacity: 1;
	}
 	.two{
 		width: 98%;
		margin:1%;
	}

	.caption{
		display: none;
	}

	.caption-mobile{
		display: block;
	}
	
	.process{
		max-height: 570px;
	}

	.info p{
	padding: 10px 60px;
	}

	.art{
		width: 48%;
	}
}






@media (max-width: 500px) {
	header{
		width: 100%;
		margin: 0;
	}
	
	nav{
		margin-top: 20px;
		font-size: .9em;
	}

	#header-small>nav{
	top:5px;
	
	}

	#logo{
		width:60px;
	}

	.name {
		padding-top: 30px;
		padding-left: 60px;
		}

	#rule{
		margin-top: 43px;
	}

	.main{
		margin-top: 140px;
	}
	.one{
		margin:5px 0;
		width: 100%;
	}

	.two{
		margin:5px 0;
		width:100%;
	}

	.three{
		margin:5px 0;
		width: 100%;
	}

	.camp{
		height:auto;

	}

	iframe{
		height:auto;
		width: 100%;
	}
	.process{
		max-height: 420px;
	}
	
	.info p{
	padding: 10px 40px;
	}



}