@charset "ISO-8859-1";
html, body {
	margin: 0;
	min-height: 100%;	
	overflow-x: hidden;
	background-color: #363636;
	-webkit-text-size-adjust: 100%
}

@font-face {
	font-family: Quicksand;
	src: url(//dopjaan.com/_fonts/Quicksand-VariableFont_wght.ttf);
}

@font-face {
	font-family: Noto Sans;
	src: url(//dopjaan.com/_fonts/NotoSans-VariableFont_wdth,wght.ttf);
}

@font-face {
	font-family: Noto Sans-italic;
	src: url(//dopjaan.com/_fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf);
}

/* TWO MAIN CONTAINERS */

#info-wrap {
    margin-right: auto;
	margin-left: auto;
	padding-top: 4px;
	padding-left: 10px;
	padding-right: 6px;
	horizontal-align: middle;
	max-width: 1012px;
}

.info-chunk {
    margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	padding-left: 10px;
	padding-right: 6px;
	horizontal-align: middle;
	max-width: 1012px;
	overflow-x: auto;
}

.footer-wrap {
    margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	padding-left: 10px;
	padding-right: 6px;
	horizontal-align: middle;
	text-align: center;
	max-width: 1012px;
	overflow-x: auto;
}


/* SUB CONTAINERS */

#header {
	width: 100%;
	height: 54px;
	margin-top: 14px;
}
	@media only screen and (max-width: 640px) {
	#header {
		height: 38px;
		margin-top: 16px;
		text-align: left;
	}
}
	@media only screen and (max-width: 560px) {
	#header {
		height: 20px;
		margin-top: 6px;
		text-align: center;
	}
}
	@media only screen and (max-width: 430px) {
	#header {
		height: 20px;
		text-align: center;
		margin-top: 6px;
		margin-left: -4px;
	}
}


#nav-box {
	width: 100%;
	height: 44px;
}
	@media only screen and (max-width: 560px) {
	#nav-box {
		margin-top: 6px;
		text-align: left;
		height: 34px;
	}
}
	@media only screen and (max-width: 430px) {
	#nav-box {
		margin-top: 30px;
		text-align: center;
		height: 32px;
	}
}
	@media only screen and (max-width: 350px) {
	#nav-box {
		margin-top: 30px;
		text-align: center;
		height: 28px;
	}
}


#nav-box-footer {
	width: 100%;
	height: 44px;
}
	@media only screen and (max-width: 560px) {
	#nav-box {
		margin-top: 6px;
		text-align: center;
		height: 34px;
	}
}
	@media only screen and (max-width: 430px) {
	#nav-box {
		margin-top: 30px;
		text-align: center;
		height: 32px;
	}
}
	@media only screen and (max-width: 350px) {
	#nav-box {
		margin-top: 30px;
		text-align: center;
		height: 28px;
	}
}


#horizontalrule {
	width: 100%;
	margin-bottom: 30px;
	margin-top: -15px;
	opacity: 1;
}
	@media only screen and (max-width: 560px) {
	#horizontalrule {
		margin-bottom: 20px;
		opacity: 1;
	}
}
	@media only screen and (max-width: 430px) {
	#horizontalrule {
		margin-bottom: 00px;
		opacity: 0.6;
	}
}


#horizontalrule-footer {
	width: 100%;
	margin-bottom: 8px;
	margin-top: 26px;
	opacity: 1;
}
	@media only screen and (max-width: 560px) {
	#horizontalrule {
		margin-bottom: 20px;
		opacity: 1;
	}
}
	@media only screen and (max-width: 430px) {
	#horizontalrule {
		margin-bottom: 00px;
		opacity: 1;
	}
}


#home-spacer {
	width: 100%;
	margin-bottom: 30px;
	margin-top: -15px;
}
	@media only screen and (max-width: 560px) {
	#home-spacer {
		margin-bottom: 20px;
	}
}
	@media only screen and (max-width: 430px) {
	#home-spacer {
		margin-bottom: 26px;
	}
}


.project-box {
	width: 100%;
	margin-bottom: 32px;
}
	@media only screen and (max-width: 560px) {
	.project-box {
		margin-bottom: 20px;
	}
}
	@media only screen and (max-width: 430px) {
	.project-box {
		margin-bottom: 14px;
	}
}	
	@media only screen and (max-width: 350px) {
	.project-box {
		margin-bottom: 11px;
	}
}


#video {
	width: 100%;
}

.youtube-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.youtube-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* May never use these */

#projectpage-title {
	width: 100%;
	margin-bottom: 0px;
	align: center;
}
	@media only screen and (max-width: 430px) {
	#projectpage-title {
		margin-top: 6px;
		margin-bottom: 2px;
	}
}

#projectpage-title-if-poster {
	width: 55%;
	margin-bottom: 42px;
	float: left;
}
#projectpage-poster {
	width: 45%;
	margin-bottom: 42px;
	float: right;
	margin-right: 42px;
	height: 410px;
	text-align: right;
	padding-right: 69px;
}



/*   |__   __\ \   / /  __ \|  ____|
    	| |   \ \_/ /| |__) | |__   
    	| |    \   / |  ___/|  __|  
    	| |     | |  | |    | |____ 
    	|_|     |_|  |_|    |______|  */

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

/* 200 = thin */
/* 400 = regular */
/* 600 = semibold */
/* 700 = bold */


/* TEXT BEHAVIORS */
a {
text-decoration: none; 
color: none; }

a:link {
	color: #CBCBCB;
	text-decoration: none; }
a:visited { 
	color: #CBCBCB; 
	text-decoration: none; }
a:hover {
	text-decoration: underline;
	color: #FFFFFF; }
	
a:hover img {
	outline: 4px solid white; }


/*  | |  | |  ____|   /\   |  __ \|  ____|  __ \ 
 	| |__| | |__     /  \  | |  | | |__  | |__) |
 	|  __  |  __|   / /\ \ | |  | |  __| |  _  / 
 	| |  | | |____ / ____ \| |__| | |____| | \ \ 
 	|_|  |_|______/_/    \_\_____/|______|_|  \_\  */

.name-title {
	font-family: 'Quicksand', sans-serif;
	font-size: 30px;
	color: #FFFFFF;
	line-height: 40px;
	font-weight: 400;
}
	@media only screen and (max-width: 640px) {
	.name-title {
		font-size: 26px;
		line-height: 22px;
	}
}
	@media only screen and (max-width: 560px) {
	.name-title {
		font-size: 20px;
		line-height: 22px;
	}
}
	@media only screen and (max-width: 430px) {
	.name-title {
		font-size: 20px;
		line-height: 22px;
	}
}


.name-title-thin {
	font-family: 'Quicksand', sans-serif;
	font-size: 30px;
	color: #B6B6B6;
	line-height: 40px;
	font-weight: 300;
}
	@media only screen and (max-width: 640px) {
	.name-title-thin {
		font-size: 25.7px;
		line-height: 22px;
	}
}
	@media only screen and (max-width: 560px) {
	.name-title-thin {
		font-size: 19.5px;
		line-height: 22px;
	}
}
	@media only screen and (max-width: 430px) {
	.name-title-thin {
		font-size: 19.5px;
		line-height: 22px;
	}
}


.nav-text {
	font-family: 'Quicksand', sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 23px;
	font-weight: 400;
}
	@media only screen and (max-width: 560px) {
	.nav-text {
		font-size: 12px;
	}
}
	@media only screen and (max-width: 430px) {
	.nav-text {
		font-size: 11px;
	}
}
	@media only screen and (max-width: 350px) {
	.nav-text {
		font-size: 10px;
	}
}


.nav-text-indic {
	text-decoration: underline;
}




/* 	| |  | |/ __ \|  \/  |  ____|
	| |__| | |  | | \  / | |__   
	|  __  | |  | | |\/| |  __|  
	| |  | | |__| | |  | | |____ 
	|_|  |_|\____/|_|  |_|______|  */

.project-title {
	font-family: 'Noto Sans', sans-serif;
	font-size: 19px;
	color: #FFFFFF;
	line-height: 23px;
	
}
	@media only screen and (max-width: 560px) {
	.project-title {
		font-size: 17px;
		line-height: 20px;
	}
}
	@media only screen and (max-width: 430px) {
	.project-title {
		font-size: 15px;
		line-height: 15px;
	}
}	
	@media only screen and (max-width: 350px) {
	.project-title {
		font-size: 13px;
		line-height: 13px;
	}
}

.project-genre {
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	color: #B6B6B6;
	font-weight: 300;
}
	@media only screen and (max-width: 560px) {
	.project-genre {
		font-size: 13.4px;
	}
}
	@media only screen and (max-width: 430px) {
	.project-genre {
		font-size: 11.9px;
	}
}	
	@media only screen and (max-width: 350px) {
	.project-genre {
		font-size: 10.3px;
		line-height: 13px;
	}
}

/*  |  __ \|  __ \ / __ \     | |  ____/ ____|__   __|
	| |__) | |__) | |  | |    | | |__ | |       | |   
 	|  ___/|  _  /| |  | |_   | |  __|| |       | |   
 	| |    | | \ \| |__| | |__| | |___| |____   | |   
 	|_|    |_|  \_\\____/ \____/|______\_____|  |_|   */
                                                    
.project-title-big {
	font-family: 'Noto Sans', sans-serif;
	font-size: 24px;
	color: #FFFFFF;
	line-height: 30px;
}
	@media only screen and (max-width: 560px) {
	.project-title-big {
		font-size: 20px;
		line-height: 26px;
	}
}
	@media only screen and (max-width: 430px) {
	.project-title-big {
		font-size: 20px;
		line-height: 26px;
		margin-top: 10px;
	}
}


.project-genre-big {
	font-family: 'Quicksand', sans-serif;
	font-size: 21px;
	color: #B6B6B6;
	font-weight: 300;
}
	@media only screen and (max-width: 560px) {
	.project-genre-big {
		font-size: 16px;
	}
}
	@media only screen and (max-width: 430px) {
	.project-genre-big {
		font-size: 16px;
	}
}


.linebreak-header {  
	display: inline;
}
	@media screen and (max-width: 430px) {
    .linebreak-header { 
		display: block; 
	}
}

.linebreak-dyd {  
	display: inline;
}
	@media screen and (max-width: 430px) {
    .linebreak-dyd { 
		display: block; 
	}
}

.linebreak-lmp {  
	display: inline;
}
	@media screen and (max-width: 430px) {
    .linebreak-lmp { 
		display: block; 
	}
}

.linebreak-213 {  
	display: inline;
}
	@media screen and (max-width: 430px) {
    .linebreak-213 { 
		display: block; 
	}
}

.linebreak-ggn {  
	display: inline;
}
	@media screen and (max-width: 660px) {
    .linebreak-ggn { 
		display: block; 
	}
}

			
.section-titles {
	font-family: 'Quicksand', sans-serif;
	font-size: 17px;
	color: #FFFFFF;
	font-weight: 300;
}
	@media only screen and (max-width: 560px) {
	.section-titles {
		font-size: 15px;
	}
}
	@media only screen and (max-width: 430px) {
	.section-titles {
		font-size: 15px;
	}
}

.page-titles {
	font-family: 'Quicksand', sans-serif;
	font-size: 21px;
	color: #FFFFFF;
	font-weight: 300;
}
	@media only screen and (max-width: 560px) {
	.section-titles {
		font-size: 18px;
	}
}
	@media only screen and (max-width: 430px) {
	.section-titles {
		font-size: 18px;
	}
}


/*   ____   ____  _______     __
 	|  _ \ / __ \|  __ \ \   / /
 	| |_) | |  | | |  | \ \_/ / 
 	|  _ <| |  | | |  | |\   /  
 	| |_) | |__| | |__| | | |   
 	|____/ \____/|_____/  |_|   */

p {
  margin-top: 3px;
}

.body-gray {
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	color: #B6B6B6;
	line-height: 22px;
}
	@media only screen and (max-width: 560px) {
	.body-gray {
		font-size: 13px;
		line-height: 18px;
	}
}
	@media only screen and (max-width: 430px) {
	.body-gray {
		font-size: 13px;
		line-height: 18px;
	}
}


.body-gray-italic {
	font-family: 'Noto Sans-italic', sans-serif;
	font-size: 14px;
	color: #B6B6B6;
	line-height: 23px;
}
	@media only screen and (max-width: 560px) {
	.body-gray-italic {
		font-size: 13px;
		line-height: 20px;
	}
}
	@media only screen and (max-width: 430px) {
	.body-gray-italic {
		font-size: 13px;
		line-height: 20px;
	}
}


.body-small-gray {
	font-family: 'Noto Sans', sans-serif;
	font-size: 11px;
	color: #B6B6B6;
	line-height: 14px;
}

.body-white {
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 23px;
}

.body-white-italic {
	font-family: 'Noto Sans-italic', sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 23px;
}