@accenttype: 'Belleza',sans-serif;
@bodytype: 'Fira Sans',sans-serif;
@darkcolor: #222222;
@graycolor: rgba(0,0,0,.3);
@yellowaccent: #FFF2C1;
@purpleaccent: #94ABFF;
@pagecolor: #F5F2EB;


body{
	font-family: @bodytype;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.5;
	color: @darkcolor;
	background-color: @pagecolor;
}
h1{
	font-family: @bodytype;
	font-size: 42px;
	font-weight: 100;
	line-height: 1.5;
	text-align: center;
	align-self: center;
	a{
		color:white;
		border-bottom: 1px solid @yellowaccent;
	}
}
h2{
	font-family: @accenttype;
	font-size: 42px;
	color: @darkcolor;
	text-align: center;
	margin-top: 100px;
	line-height: 1;
	a{
		color: @darkcolor;
	}
}
h3{
	font-family: @bodytype;
	font-size: 22px;
	font-weight: 700;
	display: block;
	font-variant: small-caps;
	letter-spacing: 4px;
}
a{
	color: @graycolor;
	text-decoration: none;
	:hover{
		color: @graycolor;
		text-decoration: none;
	}
}
strong{
	font-weight: 700;
}


nav{
	position: absolute;
	top: 0px;
	width: 1170px;
	border-bottom: 1px solid rgba(255,255,255,.1);
	padding: 30px 0px 30px 0px;
	a{
		color: white;
		font-family: @accenttype;
	}
	a.name-link{
		color: @yellowaccent;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	span a{
		margin-left: 45px;
	}
}

header{
	position: relative;
    height: calc(~"90vh");
	min-height: 650px;
	max-height: 1000px;
	color: white;
	background-image: linear-gradient(#A28CDA, #E9B3BD);
	display: flex;
	justify-content: center;
	align-items: center;
}

.container{
	margin-left: auto;
	margin-right: auto;
}

.project{
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 100px;
}

.project-description{
	color: @graycolor;
	text-align: center;
	width: 770px;
	font-size: 24px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 50px;
}

.project-asset{
	display: block;
	margin-bottom: 70px;
}
.project-asset.final{
	margin-bottom: 30px;
}

.project-meta{
	color: @graycolor;
	.left{
		width: 970px;
	}
	a:hover{
		border-bottom: 1px solid;
	}
}
.socratic-vid-asset{
	position: relative;
	cursor: pointer;
	#socratic-vid{
		position: absolute;
		top: 86px;
		left: 435px;
		width: 300px;
		height: 533px;
	}
}
.alma-vid-asset{
	width: 1170px;
	height: 780px;
	cursor: pointer;
	border: 1px solid rgba(0,0,0,.1);
	#alma-vid{
		width: 1170px;
		height: 780px;
	}
}
.mobile-only{
	display: none;
}

.socratic-quotes{

	div{
		float: left;
		text-align: center;
		width: 300px;
		img{
			width: 159px;
			height: auto;
			margin-top: 20px;
		}
		&:nth-child(1){
			margin-left: 40px
		}
		&:nth-child(2){
			margin-left: 95px;
			margin-right: 95px;
		}
		&:nth-child(3){
			margin-right: 40px;
		}
	}

}

.socratic-cards{
	position: relative;
	height: 500px;
	img{
		width: 290px;
		height: auto;
		border-radius: 4px;
		position: absolute;
		top: 4px;
		box-shadow: 5px 0px 2px -1px rgba(0, 0, 0, 0.20);
		transition:  filter .7s ease;
		-webkit-transition: filter .7s ease;
		&:nth-child(1){
			left: 0px;
			z-index: 7;
		}
		&:nth-child(2){
			left: 240px;
			z-index: 6;
		}
		&:nth-child(3){
			left: 444px;
			z-index: 5;
		}
		&:nth-child(4){
			left: 663px;
			z-index: 4;
		}
		&:nth-child(5){
			left: 809px;
			z-index: 3;
		}
		&:nth-child(6){
			left: 880px;
			z-index: 2;
			box-shadow: -5px 0px 2px -1px rgba(0, 0, 0, 0.20);
		}
		&:hover{
			z-index: 10;
		}
		&.faded{
			filter:brightness(50%);
		}
	}

	.wash{
		width: 1170px;
		height: 500px;
		position: absolute;
		left: 0px;
		top: 0px;
		background-color: green;
		z-index: 0;
	}
}

hr{
	margin-top: 0px;
	margin-bottom: 0px;
	border: none;
	height: 2px;
	background: @pagecolor;
}
/*--------MOBILE PHONES-------*/
@media (max-width: 800px) {
	body {
		background-color: white;
		padding: 0px;
		font-size: 18px;
	}
	.container{
		padding-left: 20px;
		padding-right: 20px;
	}
	nav{
		width: calc(~"100vw - 40px");
	}
	h1{
		font-size: 26px;
		font-weight: 200;
		text-align: left;
	}
	.project{
		padding-bottom: 50px;
	}
	.project-description{
		font-size: 18px;
		width: auto;
	}
	.project-asset{
		margin-bottom: 30px;
	}
	h2{
		font-size: 36px;
		margin-top: 70px;
	}
	.socratic-vid-asset{
		display: none;
	}
	.alma-vid-asset{
		display: none;
	}
	.socratic-quotes{
		div{
			width: calc(~'50vw - 25px');
			font-size: 12px;
			&:nth-child(1){
				display: none;
			}
			&:nth-child(2){
				margin-left: 0px;
				margin-right: 5px;
				margin-top: 0px;
				margin-bottom: 0px;
			}
			&:nth-child(3){
				margin-left: 5px;
				margin-right: 0px;
			}
			img{
				margin-top: 5px;
				width: 70px;
			}
		}
	}
	.socratic-cards{
		display: none;
	}
	.project-meta{
		.left{
			width: 50vw;
		}
		a{
			color: @graycolor;
			text-decoration: none;
		}
	}
	.mobile-only{
		display: block;
	}
}
/*--------TABLETS-------*/
@media (min-width: 768px) and (max-width: 1024px) {
	.socratic-quotes{
		div{
			width: calc(~'33vw - 28px');
			font-size: 12px;
			&:nth-child(1){
				margin-left: 0px;
				margin-right: 0px;
				display: block;
			}
			&:nth-child(2){
				margin-left: 20px;
				margin-right: 20px;
				margin-top: 0px;
				margin-bottom: 0px;
			}
			&:nth-child(3){
				margin-left: 0px;
				margin-right: 0px;
			}
			img{
				margin-top: 5px;
				width: 70px;
			}
		}
	}
}

/*--------DEAD ZONE I DON'T CARE ABOUT, SORRY-------*/
@media (min-width: 800px) and (max-width: 980px) {
	body {
		background-color: white;
		padding: 0px;
	}
	h1{
		width: 1170px !important;
	}
	header{
		justify-content: left;
	}
	.row{
		margin-left: 20px;
		margin-right: 20px;
	}
	.container{
		width: 1170px !important;
	}
	.span12{
		width: 1170px  !important;
	}
	.project{
		width: 1170px !important;
	}
}

/*-------- LAPTOPS SMALL -------*/
@media (min-width: 980px) and (max-width: 1200px) {
	body {
		background-color: white;
	}
	nav{
		width: 940px;
	}
	h1{
		font-size: 38px;
	}
	.socratic-vid-asset{
		#socratic-vid{
			left: 350px;
			top: 69px;
			width: 242px;
			height: auto;
		}
	}
	.socratic-quotes{
		div{
			width: 290px;
			&:nth-child(1){
				margin-left: 0px;
			}
			&:nth-child(2){
				margin-left: 35px;
				margin-right: 35px;
			}
			&:nth-child(3){
				margin-right: 0px;
			}
		}
	}
	.socratic-cards{
		height: 402px;
		img{
			width: 233px;
			height: auto;
			&:nth-child(1){
				left: 0px;
			}
			&:nth-child(2){
				left: 192px;
			}
			&:nth-child(3){
				left: 356px;
			}
			&:nth-child(4){
				left: 532px;
			}
			&:nth-child(5){
				left: 649px;
			}
			&:nth-child(6){
				left: 707px;
			}
		}
	}
	.alma-vid-asset{
		width: 940px;
		height: 626px;
		#alma-vid{
			width: 940px;
			height: 626px;
		}
	}
}

/*-------- LAPTOPS FULL -------*/
@media (min-width: 1200px) and (max-width: 1440px) {
	body {
		background-color: white;
	}
	.project{
		width: 1170px;
	}
}
/*--------BIG SCREENS-------*/
@media (min-width: 1800px) {
	h1 {
		font-size: 47px;
	}
	.project{
		width: 1400px;
	}
}


.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

.box-shadow (@shadow) {
  box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  -webkit-box-shadow: @shadow;
}

.left{
	float:left;
}
.right{
	float:right;
}

.retina{
	width: 1170px;
	height: auto;
}