@charset "utf-8";

/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700); /* font-family: 'Noto Sans', serif; */
@import url(http://fonts.googleapis.com/css?family=Merriweather:400,700); /* font-family: 'Merriweather', serif; */
@import url(http://fonts.googleapis.com/css?family=Handlee);

/* Globals */
* { box-sizing: border-box; margin: 0; }
body { font-family: 'Noto Sans', sans-serif; font-size: 16px; }
a { text-decoration: none; }
p { margin: 0; }
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
.c { clear:both; }
section { width: 100%; }
section h2 {
	text-align: center;
	font-size: 2.2em;
	padding: 3px 0;
	background-color: #f6f3ef;
	color: #959595;
	box-shadow: 0 2px 1px rgba(0,0,0,.7),0 -1px 1px rgba(0,0,0,.7);
	margin-bottom: 2px;
	font-family: 'Noto Sans', sans-serif;
}

/* Top section & Navbar */
nav {
	width: 100%;
	background-color: #f6f3ef;
	box-shadow: 0 1px 1px rgba(0,0,0,0.6);
	position: relative;
	background: #f6f3ef url("../assets/kstarlogo-mobile.png") no-repeat;
	background-position: center;
	background-size: 30px auto;
	z-index: 100;
}

nav ul {
	padding: 0;
	margin-left: 2%;
	z-index: 20;
}

nav ul li {
	display: inline-block;
	width: 24%;
	text-align: center;
	padding: 15px 0;
	font-size: 1.2em;
	color: #959595;
}

nav ul li:nth-child(2) {
	text-align: left;
	padding-left: 40px;
}

nav ul li:nth-child(3) {
	text-align: right;
	padding-right: 40px;
}

nav a {
	color: #959595;
}

nav a:hover {
	color: #008bb7;
}

.smalllogolink {
	display: none;
 	width: 40px;
 	height: 54px;
 	margin: 0 auto;
}

.middlelogolink {
	display: none;
 	width: 80px;
 	height: 54px;
 	margin: 0 auto;
}

.logo img {
	background-color: #f6f3ef;
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    position: relative;
    top: -57px;
    width: 104px;
    box-sizing: content-box;
    padding: 0 5px 3px 5px;
    z-index: 101;
}

.middlelogo {
	display: none;
	padding: 6px 0 2px 0;
	margin: 0 auto;
}

.mobilelogo {
	display: none;
	padding: 4px 0;
	margin: 0 auto;
}

.mobilemenu {
	display: none;
	padding: 10px 0;
	position: absolute;
	top: 3px;
	right: 15px;
	cursor: pointer;
}

.rotatedmenu {
	padding: 10px 0;
	position: absolute;
	top: -3px;
	right: 15px;
	cursor: pointer;
	-webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.scrolled {
  padding-top: 12px;
  padding-bottom: 12px;
}

#intro {
	/*background-color: #126794;
	background-image: webkit-radial-gradient(ellipse farthest-corner at left top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.25) 100%);
 	background-image: radial-gradient(ellipse farthest-corner at left top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.25) 100%);*/
 	background: url(../assets/stardust.jpg) repeat;
	height: 655px;
	position: relative;
}

.comickyle {
	height: 215px;
	width: 215px;
	position: relative;
	display: block;
  	margin: 50px auto;
  	background-color: #fff;
  	box-sizing: content-box;
 	border: 3px solid #000;
 	overflow: hidden;
}

.comickyle img{
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

.comickyle.thanks img {
	top: 4px;
}

.bounce {
	-moz-animation: bounce 3s infinite;
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
	display: block;
	margin: 0 auto;
	opacity: .65;
}

/* Bouncing arrow - credit to dodozhang21 */
@-moz-keyframes bounce {
  10%, 30%, 50%, 70%, 90% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  0%, 20%, 40%, 60%, 80%, 100% {
    -moz-transform: translateY(-2px);
    transform: translateY(-2px);
  }
}
@-webkit-keyframes bounce {
  	10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
 	0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
}
@keyframes bounce {
	10%, 30%, 50%, 70%, 90% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  0%, 20%, 40%, 60%, 80%, 100% {
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
}

#typed {
	text-align: center;
	font-weight: bold;
	color: #fff;
  	text-shadow: 1px 2px 2px rgba(0,0,0,.5), 20px 5px 30px rgba(11,0,120,.35);
  	font-size: 2.3em;
  	font-family: 'Noto Sans', serif;
  	margin-top: -30px;
  	height: 110px;
}

.typed-cursor { display: none; }


/* Recent Work */

.portfolio {
	width: 100%;
  	height: 600px;
  	padding-top: 50px;
  	box-shadow: 1px 0 1px rgba(0,0,0,0.7) inset;
	/*background-image: webkit-radial-gradient(ellipse farthest-corner at left top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.25) 100%);
 	background-image: radial-gradient(ellipse farthest-corner at left top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.25) 100%);*/
}


.centered {
	max-width: 1200px;
	margin: -30px auto 0 auto;
	display: block;
}

.portfolio h3 {
	color: white;
	font-size: 2em;
	text-align: center;
	padding: 20px 4px;
	margin-bottom: 20px;
	font-family: 'Merriweather', serif;
}

.portfolio h3 span {
	border: 2px solid #fff;
	font-size: .6em;
	padding: 3px 5px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	display: block;
	width: 200px;
  	margin: 15px auto -5px auto;
  	background: linear-gradient(to right, white 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
  	transition: all 1s ease;

}

.portfolio h3 span:hover {
	background-position: left top;
}

.portfolio.cly h3 span:hover a { color: #35649e; }
.portfolio.sdm h3 span:hover a { color: #6190ce; }
.portfolio.wkf h3 span:hover a { color: #b8cef6; }
.portfolio.cbc h3 span:hover a { color: #528fcd; }
.portfolio.spt h3 span:hover a { color: #35649e; }
.portfolio.les h3 span:hover a { color: #bfd1e1; }

.portfolio h3 span a {
	color: #fff;
	display: block;
}

.portfolio .left {
	float: left;
	width: 60%;
	margin: 0;
}

.portfolio .right {
	float: left;
	width: 40%;
	margin: 0 0 0 0;
}

.portfolio img {
	margin: 0 auto;
	display: block;
	max-width: 100%;
}

.portfolio.cly {
	background-color: #35649e;
}

.portfolio.sdm {
	background-color: #6190ce;
}

.portfolio.wkf {
	background-color: #b8cef6;
}

.portfolio.cbc {
	background-color: #528fcd;
}

.portfolio.les {
	background-color: #bfd1e1;
}

.portfolio.spt {
	background-color: #35649e;
	height: auto;
	display: inline-block;
}

.callout {
	background-color: orange;
	width: 220px;
	height: 45px;
	box-sizing: content-box;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	font-size: 1em;
	padding: 12px;
	border-top: 2px solid rgba(255,255,255,0.7);
	border-left: 2px solid rgba(255,255,255,0.7);
	border-right: 3px solid rgba(255,255,255,0.7);
	border-bottom: 3px solid rgba(255,255,255,0.7);
	position: relative;
	top: -200px;
	left: 50px;
}

.callout a {
	color: #fff;
}

/* About */
#about {
	display: inline-block;
	text-align: center;
	background-color: #ece7b0;
	margin-top: -30px;

}

#about a {
	color: #0764a1;
}

#about a.hidden {
	color: #fff;
}

#about a.hidden:hover {
	color: #0764a1;
}

#about .centered {
	margin: 60px auto 30px auto;
	display: inline-block;
	width: 900px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.35);
	background: #fff url(../assets/stars.png) no-repeat;
  	background-size: 50px auto;
  	background-position: left 270px bottom 23px;

}

#about .left {
	width: 67%;
	float: left;
	text-align: left;
}

#about .left p {
	font-size: 1.2em;
	margin: 18px 26px;
	font-family: 'Merriweather', serif;
}

#about .left p.credit {
	font-size: .8em;
}

#about .right {
	width: 280px;
	float: right;
}

#about .right img {
	margin: 0 auto;
	display: block;
}

		/* flip card */

		.card-container {
		 	box-sizing: border-box;
		}
		/* flip the card when hovered */
		.card-container:hover .card, .card-container.hover .card {
			transform: rotateY(180deg);
		}

		.card-container, .front, .back {
			width: 280px;
			height: 355px;
		}
		/* flip speed goes here */
		.card {
			transition: 0.6s;
			transform-style: preserve-3d;
			position: relative;
		}

		/* hide back of pane during swap */
		.front, .back {
			backface-visibility: hidden;
			position: absolute;
			top: 0;
			left: 0;
		}

		/* front pane, placed above back */
		.front {
			z-index: 2;
			transform: rotateY(0deg); /* for firefox 31 */

		}

		.front img {
		  height: 355px;
		  width: 280px;
		}

		/* back, initially hidden pane */
		.back {
			transform: rotateY(180deg);
		  border-left: 1px solid #d3d3d3;
		  box-sizing: border-box;
		  background-color: #fff;

		}

		.stats {
		  border: 10px solid #fff;
		  height: 355px;
		  background: #eee url(../assets/cardstar.png) no-repeat;
		  background-position: center bottom 14px;
		  background-size: 18px auto;
		}

		.stats h3 {
		  background-image: url(../assets/cardtop.jpg);
		  height: 55px;
		  margin: 0 0 14px 0;
		  padding: 15px 0;
		  box-sizing: border-box;
		  color: #fff;
		  font-family: 'Noto Sans', serif;
		  font-size: 1em;
		  font-weight: bold;
		  text-shadow: 0 0 20px rgba(0,50,100,1), 0 0 5px rgba(0,50,100,0.5);
		  text-align: center;
		}
		.stats ul {
		  list-style-type: none;
		  padding-left: 0;
		  font-size: .8em;
		  font-family: 'Noto Sans', serif;
		  text-align: center;
		  color: #000;
		  line-height: 1.5em;
		}

		.stats hr {
		  width: 100px;
		  border-top: 1px solid #d3d3d3;
		  display: block;
		  margin: 9px auto 7px auto;
		}

		.stats ul li a {
		  color: inherit;
		}



/* Social */

#social {
  	background-color: #ece7b0;
	display: inline-block;
}

#social div.soc {
	height: 150px;
  	line-height: 150px;
  	font-size: 1.3em;
  	font-weight: bold;
  	color: #fff;
  	position: relative;
  	width: 25%;
  	float: left;
  	text-align: center;
  	font-family: 'Merriweather', serif;
}

#social div.soc a {
	color: #2590c9;
	opacity: .85;
}

#social div.soc a:hover {
	opacity: 1;
}

#social img {
	margin-bottom: -17px;
	margin-right: 5px;
	opacity: .85;
}

#social div.soc a:hover img {
	opacity: 1;
}

#social .left p {
	text-align: right;
	margin-right: 80px;
}

#social .right p {
	text-align: left;
	margin-left: 80px;
}


/* Contact */

#contact {
	width: 100%;
	margin-top: -3px;
	clear: both;
	display: inline-block;
	background-color: #9dbfd1;
}

.contactme {
	float: left;
	width: 50%;
	padding: 0 20px;
	margin: 80px auto;
}

.contacts {
	display: block;
	margin: 80px auto;
}

.contacts h3 {
	color: #0764a1;
	font-weight: bold;
	font-family: 'Merriweather', serif;
	text-align: center;
	box-shadow: 0 0 3px rgba(0,0,0,0.6);
	padding: 10px;
	background-color: rgba(255,255,255,0.85);
}

.contactpic {
	background-color: #e18a1a;
	width: 58px;
	height: 58px;
	padding: 5px;
	box-shadow: 0 0 3px rgba(0,0,0,0.85);
	display: block;
	margin: 30px auto 0 auto;

}

.contactpic img {
	margin: 0 auto 5px auto;
	display: block;
	width: 36px;
	height: 36px;
	box-sizing: border-box;
}

.contactpic img.email {
	width: 28px;
	height: 28px;
	margin: 5px auto;
}

.contactme p {
	background-color: #fff;
	color: #0764a1;
	box-shadow: 0 0 3px rgba(0,0,0,0.6);
	padding: 5px;
 	width: 120px;
	text-align: center;
	display: block;
	margin: -12px auto 0 auto;
	font-weight: bold;
	font-family: 'Noto Sans', sans-serif;
}

.contactme p:nth-of-type(2) {
	width: 215px;
}

.contactme a {
	color: #0764a1;
}

.form {
	float: left;
	width: 50%;
	margin: 80px 0 20px 0;
	padding: 0 20px;

}

form {
	display: block;
    margin: 30px auto;
    width: 480px;
    text-align: center;
    padding: 10px 20px 20px 20px;
	box-shadow: 0 0 3px rgba(0,0,0,0.6);
	background-color: rgba(255,255,255,0.85);
}

label {
	margin-top: 20px;
	display: inline-block;
	color: #0764a1;
	font-weight: bold;
	font-size: 1.2em;
	font-family: 'Merriweather', serif;
}

input, textarea {
	width: 80%;
	border-bottom: 1px solid #00a1d9;
	height: 30px;
	border: none;
	margin-top: 5px;
	background-color: rgba(0,0,0,.1);
	color: #777;
	font-size: 1.1em;
	font-weight: bold;
	font-family: 'Merriweather', serif;
	padding: 2px 6px;
}

textarea {
	margin-top: 12px;
	height: 55px;
	resize: none;
}

input[type="submit"] {
	width: 100px;
 	margin-top: 20px;
 	background-color: #e18a1a;
	color: #fff;
 	font-weight: bold;
 	border: none;
 	font-size: 1em;
 	text-transform: uppercase;
 	opacity: .8;
	cursor: pointer;
}

input[type="submit"]:hover {
	opacity: 1;
}

input:focus,
textarea:focus {
    color: #777;
    border-bottom: 3px solid #00a1d9;
    opacity: 1;
    text-indent: 0;
    box-shadow: none;
    outline: none;
}


#totop {
	position: fixed;
	bottom: 20px;
	right: 30px;
	opacity: .65;
	display: none;
}

.bottom {
	display: none;
	background-color: #9dbfd1;
}

.bottom img {
	display: block;
  	padding: 10px 0 20px 0;
  	margin: 0 auto;
  	opacity: .65;
}

footer p {
	text-align: center;
	font-size: .8em;
	padding: 3px 0;
	background-color: #f6f3ef;
	color: #959595;
	font-family: 'Noto Sans', sans-serif;
}

footer p a {
	color: #7d7d7d;
}

/* Thank you page */

body#thankyou {
	background: url(../assets/stardust.jpg) repeat;
	background-size: cover;
}

section h2.thanksmsg {
	font-size: 1.5em;
  	padding: 6px 0;
  	background-color: #ff6600;
  	color: #fff;
}

h3.thanksmsg2 {
	text-align: center;
	margin: 10px auto;
}

h3.thanksmsg2 a {
	color: #fff;
}



/* Responsive */

@media screen and (max-width: 1200px){
	#about { margin-top: -3px; }
}

@media screen and (max-width: 1024px){
	.portfolio { height: auto; }
	.portfolio.spt { height: auto; }
	.portfolio.spt .right { margin-top: -30px; }
	.callout { left: 20%; }
	.portfolio .left, .portfolio .right { float: none; width: 100%; }
	.portfolio .right { margin-top: 30px; }
	.portfolio .right img { padding-bottom: 20px; }
	#about { background-image: none; }
	.contactme { float: none; margin: 60px auto 30px auto; }
	.contacts { margin: 30px auto; }
	.form { float: none; width: 100%; margin: 50px 0 20px 0}
}

@media screen and (max-width: 950px) {
	#about .left { background-color: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.35); padding: 10px; margin-bottom: 20px; }
	#about .left p { font-size: 1em; margin: 20px; }
	#about .right, #about .left { float: none; width: 100%; }
	#about .centered { width: 75%; padding-bottom: 30px; background-image: none; background: none; box-shadow: none; margin: 30px auto 0px auto; }
	.card-container { display: block; margin: 0 auto; }
	.front { box-shadow: 1px 1px 1px rgba(0,0,0,.6); }
	.back { border-left: 1px solid #d3d3d3; box-shadow: 1px 1px 1px rgba(0,0,0,.6); }
	#social div.soc { height: 110px; line-height: 100px;
}

@media screen and (max-width: 900px) {
	#social div.soc { width: 50%; height: 80px; line-height: 60px; }
}

@media screen and (max-width: 725px){
	#typed { height: 170px; }
	.bounce { display: none; }
}

@media screen and (max-width: 700px){
	#intro { height: 565px; padding-top: 1px; margin-top: -1px; }
	.logo img { display: none; }
	.middlelogolink { display: block; }
	.mobilemenu, .middlelogo { display: block; }
	nav { background-image: none; position: fixed; }
	nav ul { display: none; margin-left: 0; }
	nav ul li { width: 100%; border-top: 1px solid #dbdbdb; padding: 10px 0;}
	nav ul li:nth-child(2), nav ul li:nth-child(3) { text-align: center; padding: 15px 0;}
	#typed { padding-top: 110px; height: 260px; }
	.callout { left: 10%; }
	#social .right p, #social .left p { text-align: center; margin: 0; }
	.contactme { width: 80%; }
}

@media screen and (max-width: 600px) {
	#intro { height: 515px; }
	#social .left, #social .right { float: none; width: 100%;}
	#typed { font-size: 1.7em; height: 220px; }
	.callout { display: none; }
	.portfolio.spt .right { margin-top: 30px; }
	#about .left p { margin: 8px; }
	.form { padding: 0 10px; }
	form { width: 100%; }
	.contactme { margin: 60px auto 30px auto; }
	#totop { display: none; }

	section h2.thanksmsg, h3.thanksmsg2 { font-size: 1.1em; padding: 5px; }
}

@media screen and (max-width: 480px) {
	section h2 { font-size: 1.4em; }
	#about .centered { width: 280px; padding-bottom: 0; }
	#social { padding: 20px 0; }
	#social div.soc { width: 100%; line-height: 80px; }
	.bottom { display: block; }
	footer span { display: none; }
}

@media screen and (max-width: 400px) {
	#intro { height: 455px; }
	.middlelogo, .middlelogolink { display: none; }
	.mobilelogo, .smalllogolink { display: block; }
	#typed { font-size: 1.3em; height: 170px; padding: 105px 10px 0 10px; }
	.portfolio .right { margin-top: 15px; }
	.portfolio .right img { max-width: 75%; }
	.portfolio h3 { padding: 4px; font-size: 1.5em; }
	.portfolio h3 span { width: 170px; font-size: .8em; }
	#about .centered { margin: 20px auto; }
	#about .right img { max-width: 100%; }
	.front { box-shadow: none; }
	.back { border-left: 0px solid #d3d3d3; box-shadow: none; }
	#social { padding: 0px 0 20px 0; }
	.contactme { width: 100%; }
	input, textarea { width: 90%; }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */
/* don't allow card to be flipped in IE */
.card-container:hover .card, .card-container.hover .card { transform: rotateY(0deg); }
}