@charset "UTF-8";

@font-face {
    font-family: Intro;
    src: url("fonts/Intro.otf") format("opentype");
}

a {
	text-decoration: none;
	color: #5200FF;
/*	transition: all 0.3s ease;*/
}

a:hover {
	text-decoration: none;
	color: #3500A6;
}

h1, h2, h3, h4, h5, h6, p,li {
	font-family: 'Karla', sans-serif;
}

body {
	margin: 0;
	background-color: white;
}

#canvas {
    max-width: 1400px;
    margin: 10px auto;
    padding: 75px;
}

.bold {
	font-weight: 700;
	font-size: 22px;
}

.red {
	background-color: #F24A4A;
}

.blue {
	background-color: #2F7FE6;
}

header {
	margin-bottom: 70px;
	padding: 0px 15px;
}

#left {

}

#right {
	margin-left: auto; 
}

#splash {
	width: 80%;
	display: block;
	margin: 0 auto;
	padding: 50px 40px;
	background-position: center;
}

#main {
	width: 100%;
    /*background-color: #2F7FE6;*/
}

#main-nav {
	display: flex;
	align-items: center;
}

#collapsed-nav {
	display: none;
}

#main-nav .nav-links {
	padding: 0;
}

#main-nav .category {
	font-family: 'Karla', sans-serif;
    font-weight: 400;
	display:inline;
	margin-bottom: 10px;
	font-size: 14px;
    color: #fc4444;
    padding: 0px 0px 0px 30px;
}

#main-nav .nav-links .work-links li {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
	display:inline;
	margin-bottom: 10px;
	font-size: 14px;
}

#main-nav .nav-links li a {
	text-decoration: none;
    color: black;
	transition: all 0.3s ease;
}

#main-nav .nav-links li .active-link {
	color: #5200FF;
}

#main-nav .nav-links li a:hover, #name a:hover {
	opacity: 0.6;
}

#collapsed-nav .work-links li a:hover {
/*	opacity: 0.3;*/
}

#main-nav .work-links {
	padding: 0;
	margin: 0 20px;
}

#main-nav .work-links li a {
	text-decoration: none;
	font-size: 14px;
	color: black;
	transition: all 0.3s ease;
}

#main-nav .work-links li a:hover {
    color: #2F7FE6;
/*	color: #fbcf23;*/
/*	opacity: 0.3;*/
}

#main-nav .work-links li a:active {
	color: #fbcf23;
}

.follow-links {
	padding: 0;
    margin: 0;
    text-align: center;
}

.follow-links li {
    padding: 0px 10px;
	display: inline-block;
	transition: all 0.3s ease;
}

.follow-links li img {
	height: 25px;
	width: 25px;
}

.follow-links li a i {
	color: black;
    transition: all 0.3s ease;
}

.follow-links li a i:hover, #collapsed-nav .follow-links li:hover {
	color: #5200FF;
}

footer {
	margin-top: 40px;
    display: block;
}

footer #copyright {
	text-align: center;
	font-family: 'Karla', sans-serif;
	font-size: 14px;
	margin: 20px 0px;
	color: black;
}

.project-tile {
	padding: 10px 10px 30px 10px;
	transition: .5s ease;
	
}

.project-tile .tags {
	padding-top: 20px;
	font-size: 14px;
	color: #808285;
	text-transform: uppercase;

}

.project-tile .title {
	font-size: 24px;
	color: black;
}

.project-tile:hover {
	opacity: .8;
}

.project-thumb {
	width: 100%;
	position: relative;
}

.overlay {
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	border-radius: 2px;
	/*background-color: rgba(255, 255, 255, 0.8);*/
	background-color: white;
	opacity: 0;
	transition: .5s ease;
		cursor: pointer;
}


.overlay:hover {
	opacity: 1;
}

.overlay-content {
	font-family: 'Karla';
	color: black;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: left;
}

.project-title {
	font-size: 36px;
	line-height: 42px;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.project-tags {
	font-size: 14px;
	color: #808285;
	text-transform: uppercase;
}

#siteWrapper {
	position: relative;
	padding: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

#grid {
	width: 100%;
}

.block {
	width: 200px;
	height: 200px;
	background-color: black;
	display: inline-block;
	margin: 10px;
	border-style: solid;
}

.block img:hover {
	-webkit-filter: blur(5px);
}

.block img {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

#page {
	display: block;
	box-sizing:border-box;
	width: auto;
	margin: auto;
	max-width: 1080px;
	padding: 1px 34px;
}

.mycontainer {
	width: 1120px;
}

#name {
	/*text-align: center;*/
    font-family: 'Karla', sans-serif;
	font-size: 24px;
	letter-spacing: 2px;
	transition: all 0.3s ease;
	color: black;
}

#name a {
 color: black;
 text-decoration: none;
 transition: all 0.3s ease;
}

#name:hover {
	color: #fbcf23;
}

#logo {
	/*height: 50px;
	width: 50px;
	fill: green;
	transition: all 0.3s ease*/
	font-weight: 700;
	color: black; 
	transition: all 0.3s ease;
}

#logo:hover {
	opacity: 0.6;
/*	color: #5200FF;*/
}

.page-container {
	margin: 50px;
}

.page-name {
	font-size: 28px;
	font-weight: 400;
	text-transform: uppercase;
}

.content {
	display: inline;
}

.col-2 {
	width: 50%;
	display: inline;
}

.col-2 img {
	max-width: 400px;
	padding: 20px;
}

.left {
	float: left;
}

.right {
	float: right;
}

.full-width {
	width: 100%
}

.round {
	border-radius: 2px;
}

/*.expand {
    align-items: center;
    display:flex;
}

.expand img{
    transition: transform .2s;
    width:100%;
    margin:0 auto;
    background-color: rgb(173, 173, 237);
}

.expand img:hover{
	transform:scale(1.6);
}*/

.center {
	text-align: center;
}

.project-blurb {
	padding: 15px 0px 30px 0px;
}

.project-name {
	font-family: 'Karla', sans-serif; 
	font-weight: 700;
	
}

.project-description {
	font-family: 'Karla', sans-serif; 
	font-size: 1.125em;
}

.project-intro {
	padding: 20px 10px;
	font-size: 16px;
	line-height: 24px; 
}

.last-row {
	padding-bottom: 60px;
}

.section {
	padding: 50px 0px 30px 0px;
}

.section-title h5 {
	font-weight: 700;
	letter-spacing: 2px;
	font-size: 1.5em;
	line-height: 1.15em;
}

.section-content p {
	font-weight: 400;
	font-size: 1.125em;
	line-height: 24px;
	margin-bottom: 20px;
}

.section-content img {
	margin-bottom: 40px;
}

.mock-title {
	padding-bottom: 10px;
}

.project-content {
	text-align: center;
	padding-top: 48px;
}

.project-content p{
	font-size: 18px;
}

#img-grid img {
	width: 32%;
	padding: 4px 2px;
}

.task-title {
	margin: 40px;
}

.carousel-item img {
	width: 100%;
}

.carousel-control-prev-icon {
	background-image: url(images/navigator/back.svg)
}

.carousel-control-next-icon {
	background-image: url(images/navigator/next.svg)
}

.carousel-indicators li {
	background-color: #525252;
}

.carousel-indicators li.active {
	background-color: #0F62FE;
}

.animations iframe{
	display: block;
	margin: 0 auto;
	padding: 10px;
}

#view-btn {
	color: white;
	padding: 10px;
	background-color: black;
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	border: none;
	display: block;
	margin: 0 auto;

	-webkit-transition: all 0.4s ease;
  	-moz-transition: all 0.4s ease;
  	-ms-transition: all 0.4s ease;
  	-o-transition: all 0.4s ease;
  	transition: all 0.4s ease;
}

#view-btn:hover {
	opacity: 0.3;
}

#view-btn:active {
	border: none;
}

button:focus {outline:0 !important;}

#about-text h2 {
	font-family: 'Karla', sans-serif;
	font-weight: 700;
	padding: 10px 0px;
}

#about-text p {
	font-size: 14px;
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	line-height: 20px;
}

#about-photo {
	/*-webkit-filter: grayscale(100%);  Safari 6.0 - 9.0 
    filter: grayscale(100%);*/
    width: 100%;
}

.yellow {
	color: #fbcf23;
}

ul.rig {
	list-style: none;
	font-size: 0px;
	margin-left: -2.5%; /* should match li left margin */
	padding: 0;
}
ul.rig li {
	display: inline-block;
	padding: 10px;
	margin: 0 0 2.5% 2.5%;
	background: #fff;
	/*border: 1px solid #ddd;*/
	font-size: 16px;
	font-size: 1rem;
	vertical-align: top;
	/*box-shadow: 0 0 5px #ddd;*/
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
ul.rig li img {
	max-width: 100%;
	height: auto;
	/*margin: 0 0 10px;*/
}
ul.rig li h3 {
	margin: 0 0 5px;
}
ul.rig li p {
	font-size: .9em;
	line-height: 1.5em;
	color: #999;
}

/* class for 1 column */
ul.rig.columns-1 li {
	width: 97.5%; /* this value + 2.5 should = 100%*/
}

/* class for 2 columns */
ul.rig.columns-2 li {
	width: 47.5%; /* this value + 2.5 should = 50% */
}
/* class for 3 columns */
ul.rig.columns-3 li {
	width: 30.83%; /* this value + 2.5 should = 33% */
}
/* class for 4 columns */
ul.rig.columns-4 li {
	width: 22.5%; /* this value + 2.5 should = 25% */
}
 
 /*breakpoint originally at 480*/
@media (max-width: 640px) {
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	}
	ul.grid-nav li a {
		display: block;
	}
	ul.rig {
		margin-left: 0;
	}
	ul.rig li {
		width: 100% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	}
}

@media (max-width: 560px) {
	#splash {
		display: block;
		margin: 0;
		padding: 0;
		position: fixed;
		width: auto;
	}
}

.padding-bottom-60 {
	padding-bottom: 60px;
}

.single-img {
	max-width: 70%;
}

#pull img {
	width: 40px;
	height: 40px;
}

nav a#pull {
    display: none;
}   

@media screen and (max-width: 900px) {
	/*#main-nav ul {
		display: none;
	}
	
	header {
		width: 100%;
		height: auto;
		
		background-color: white;
		position: relative;
	}
	
	#name {
		width: 50%;
		padding: 32px 40px;
		margin: 0;
	}

	.project-blurb {
		width: 100%;
	}
	
	#main {
		width: 100%;
		position: relative;
	}
	
	#collapsed-nav {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		background-color: black;
		padding: 16px 0px;
	}
	
	#collapsed-nav h3, #collapsed-nav h3 a {
		color: white;
		transition: all 0.3s ease;
	}
	
	#collapsed-nav h3:hover > a{
		opacity: 0.3;
	}
	
	#collapsed-nav .nav-links {
		padding-top: 25px;
		width: auto;
		margin: 0;
		padding-left: 0;
	}
	
	#collapsed-nav .nav-links li {
		font-size: 16px;
		font-family: 'Quicksand', sans-serif;
		display: block;
	}
	
	#collapsed-nav .work-links {
		padding: 0;
		font-size: 20px;
	}
	
	#collapsed-nav .work-links li {
		margin-top: 20px;
		font-family: 'Quicksand', sans-serif;
	}
	
	#collapsed-nav .work-links li a {
		color: white;
		transition: all 0.3s ease;
	}
	
	#pull {
		display: block;
		width: 100%;
		position: relative;
	}
	
	#pull:after {
		content: "";
		background: url(images/menu.png) no-repeat;
		width: 40px;
		height: 40px;
		display: inline-block;
		position: absolute;
		right: 40px;
		top: 32px;
	}
	
	#collapsed-nav .follow-links {
		margin: 25px;
		padding: 0;
	}
	
	#collapsed-nav .follow-links li {
		padding: 0px 5px;
		display: inline;
		transition: all 0.3s ease;
	}
	
	
	#collapsed-nav .follow-links li img {
		height: 50px;
		width: 50px;
	}*/
}

@media screen and (max-width: 768px) {
	#canvas {
		padding: 50px 10px;
	}

	header {
		padding: 0px;
	}

	#main-nav { 
		text-align: center; 
		display: block;
	}

	#main-nav #left { 
		float: none; 
	}

	#main-nav #right { 
		padding-top: 20px; 
	}

	#main-nav .category {
		padding: 0px 15px;
	}
}