/************************************
*MEDIA QUERIES
 ************************************/

@media all and (min-width: 960px) {
	body{
		font-size: 18px;
	}
	#what-we-do {
		background-image: url("https://dl.dropboxusercontent.com/s/8ruqsd8d3wh8nyw/pexels-photo-238118-min.jpeg?dl=0");
		/*background-image: url("https://dl.dropboxusercontent.com/s/1uke37rz8x8qv92/color-dispersion-vert.jpg?dl=0");*/
	}
	#the-process {
		background-image: url("https://dl.dropboxusercontent.com/s/dp8agw4s3vw9vqn/pexels-photo-210643-min.jpeg?dl=0");
	}
}

@media all and (max-width: 959px) and (min-width: 600px) {
	body {
		font-size: 16px;
	}
	#what-we-do {
		background-image: none !important;
		background-color: white;
	}
	#the-process {
		background-image: none !important;
		background-color: white;
	}
}

@media all and (max-width: 599px) {
	body{
		font-size: 12px;
	}
	#what-we-do {
		background-image: none !important;
		background-color: white;
	}
	#the-process {
		background-image: none !important;
		background-color: white;
	}
}

/************************************
*GLOBAL
 ************************************/
.section-heading {
	text-align: left;
	margin: 1em;
	color: #40454f;
	font-size: 2.5em;
}

section {
	padding-top: 2rem;
}
/************************************
*NAV BAR
 ************************************/
.navbar {
	background-color: transparent;
	color: white;
	text-decoration: none;
	padding-top: 0;
}

nav a {
	color: #232A32;
	text-decoration: none;
}

/************************************
*JUMBOTRON
 ************************************/
.jumbotron {
	color: #232A32;
	font-family: 'Montserrat', sans-serif;
	font-weight: 200;
	background-image: url("https://dl.dropboxusercontent.com/s/mdjh7quyp87wt09/mountain.jpg?dl=0");
	height: 40rem;
	text-align: left;
	margin-bottom: 0;
	background-size: cover;
}

.title {
	font-size: 5em;
	text-align: left;
	margin-bottom: 0;
	padding-bottom: 0;
}

.subtext {
	text-align: left;
}

/************************************
*WHAT WE DO
 ************************************/
#what-we-do {
	text-align: center;
	background-size: cover;
	padding-bottom: 3em;
}

#about-text {
	text-align: left;
	padding-left: 1em;
	font-size: 2em;
	color: #464651;
}

#about-subtext {
	text-align: left;
	padding-left: 3em;
	font-size: 1.25em;
	color: #212126;
}

#blue-text {
	color: #0E0E1C;
	font-weight: bold;
}
/************************************
*PROJECTS
 ************************************/
.section-heading-white {
	text-align: center;
	margin: 1em;
	font-size: 2.5em;
	color: #464651;
}

.image {
	display: block;
	margin: auto;
}

#project-name {
	font-size: 1.5em;
	color: #666674;
}

li {
	color: #A5A38E;
	font-family: 'Montserrat', sans-serif;
}

#featured-work {
	background-color: #dedcdb;
}



/************************************
*OVERLAY FROM BOTTOM - CROWDVIBE
 ************************************/
.overlay-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000000;
	opacity: .7;
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: .5s ease;
}

.crowdvibe2:hover .overlay-bottom {
	height: 100%;
}

.text-bottom {
	color: white;
	font-size: 15px;
	position: absolute;
	overflow: hidden;
	width: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

/************************************
*OVERLAY FROM LEFT - LALANA
 ************************************/
.overlay-left {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000000;
	opacity: .7;
	overflow: hidden;
	width: 0;
	height: 100%;
	transition: .5s ease;
}

.lalana2:hover .overlay-left {
	width: 100%;
}

.text-left {
	color: white;
	font-size: 15px;
	position: absolute;
	overflow: hidden;
	width: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

/************************************
*OVERLAY FROM RIGHT - HANDOFF
 ************************************/
.overlay-left-handoff {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000000;
	opacity: .7;
	overflow: visible;
	width: 0;
	height: 100%;
	transition: .5s ease;
}

.handoff2:hover .overlay-left-handoff {
	width: 100%;
}

.text-left-handoff {
	color: white;
	font-size: 15px;
	position: absolute;
	overflow: hidden;
	width: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

/************************************
*TEST
 ************************************/
#featured-work {
	background-color: whitesmoke;
	padding-bottom: 2em;
}

#crowdvide-test {
	padding: 2em;
	display: block;
	border: 1em solid whitesmoke;
	background-image: url("https://dl.dropboxusercontent.com/s/wek7qbi19v3s5a1/cuisine-cutlery-delicious-299348.jpg?dl=0");
	background-size: cover;
	height: 25rem;
}

#crowdvide-test:hover {
	background-color: red;
}

#lalana-test {
	padding: 2em;
	border: 1em solid whitesmoke;
	background-image: url("https://dl.dropboxusercontent.com/s/fxlmrl5kzroybb9/calenar.jpg?dl=0");
	background-size: cover;
	height: 25rem;
}

#handoff-test {
	padding: 2em;
	display: block;
	border: 1em solid whitesmoke;
	background-image: url("https://dl.dropboxusercontent.com/s/4ufbwubvpw75yi9/handoff.jpg?dl=0");
	background-size: cover;
	height: 25rem;
}

#project-description-title {
	text-align: right;
	font-weight: bold;
	color: #232A32;
	font-size: 2.5em;
	padding-bottom: 0;
	margin-bottom: 0;
	font-family: 'Special Elite', cursive;
}

#project-description-subtext {
	text-align: right;
	font-weight: bold;
	color: #232A32;
	font-size: 1em;
	font-family: 'Special Elite', cursive;
}

#project-description-title-left {
	text-align: left;
	font-weight: bold;
	color: #232A32;
	font-size: 2.5em;
	padding-bottom: 0;
	margin-bottom: 0;
	font-family: 'Montserrat', sans-serif;
}

#project-description-subtext-left {
	text-align: left;
	font-weight: bold;
	color: #232A32;
	font-size: 1em;
	font-family: 'Montserrat', sans-serif;
}


#project-description-title-center {
	text-align: center;
	font-weight: bold;
	color: #232A32;
	font-size: 2.5em;
	padding-bottom: 0;
	margin-bottom: 0;
	font-family: 'Vollkorn SC', serif;
}

#project-description-subtext-center {
	text-align: center;
	font-weight: bold;
	color: #232A32;
	font-size: 1em;
	font-family: 'Vollkorn SC', serif;
}
	/************************************
	*APPROACH
	 ************************************/
#the-process {
	background-size: cover;
	padding-bottom: 2.5rem;
}

.process-name {
	color: #081120;
	text-align: left;
	font-size: 2.5em;
	font-weight: bold;
}

.process-description {
	color: #081120;
	text-align: left;
	font-size: 1.5em;
	margin-bottom: 1em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

.process-number-odd {
	font-family: 'Abril Fatface', cursive;
	color: #081120;
	font-size: 10rem;
	display: inline-block;
	text-align: right;
	margin-top: 0;
	padding-top: 0;
}

#process-number-two {
	writing-mode: vertical-lr;
	text-orientation: sideways;
	font-family: 'Abril Fatface', cursive;
	color: #081120;
	font-size: 10rem;
	display: inline-block;
	text-align: right;
	margin-top: 0;
	padding-top: 0;
}

#process-number-four {
	transform:rotate(-180deg);
	writing-mode: vertical-lr;
	text-orientation: sideways;
	font-family: 'Abril Fatface', cursive;
	color: #081120;
	font-size: 10rem;
	display: inline-block;
	text-align: right;
	margin-top: 0;
	padding-top: 0;
}


/************************************
*CONTACT US
 ************************************/
#contact-us {
	text-align: center;
	padding-bottom: 2rem;
	background-color: #F8F9FA;
}

#contact-us-text {
	text-align: center;
	font-size: 2em;
	margin-bottom: 0;
	padding-bottom: 0;
}

.contact-us-subtext {
	text-align: center;
	font-size: 1.25em;
	color: #666674;
}

#contact-us a {
	color: #081120;
}

#headingOne {
	background-color: #13131C;
	border: none;
}

/************************************
*FOOTER
 ************************************/
footer {
	background-color: #b0aead;
	color: #081120;
	padding: 2em;
	text-align: center;
}

footer p {
	color: #081120;
	text-align: center;
	padding-bottom: .5em;
}

footer a {
	color: #666674;
	text-align: center;
	padding-bottom: .5em;
}

#reach-out {
	text-align: center;
	padding-bottom: 1em;
}