@media only screen and (max-width :960px) {
	
	/********************************	
	*	HEADER
	********************************/
	.header-navigation {
		display: none;
	}
	.header {
		width: 100%;
		display: block;
	}
	.header-logo {
		width: 30px;
		margin: 0 auto;
	}
	.header-navigation {
		display: none;
	}
	.header-footer {
		display: none;
	}
	.toggle-navig {
		display: block;
	}
	/********************************	
	*	CONTENT
	********************************/
	.content-container {
		width: 100%;
		height: 100%;
		padding: 40px 60px;
		margin-left: 0;
	}
	
	/********************************	
	*	INTRO
	********************************/
	
	.intro-container {
		display: block;
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
		margin-top: 20px;
		padding-bottom: 60px;

		background: #f9f9f9;
	}
	.intro-logo {
		display: none;
	}
	.intro-altruist-logo {
		width: 30px;
		margin: 0 auto;
		padding-top: 60px;
		
		cursor: pointer;
	}
	.intro-logo h4 {
		font-family: 'Lora', serif;
		font-size: 17px;
		line-height: 17px;
		font-weight: 400;
		text-transform: uppercase;
		color: #0d1e2a;
		letter-spacing: 1px;
		word-spacing: 1px;
		text-align: center;
		
		margin-top: 10px;
		margin-bottom: 40px;
	}
	.intro {
		width: 100%;
		padding: 0;
		margin: 0;
		text-align: center;
	}
	.intro-logo {
		display: block;
	}
	h1.intro-altruist {
		display: none;
	}
	
	.intro h1 {
		font-family: 'Lora', serif;
		font-size: 30px;
		line-height: 44px;
		font-weight: 200;
		text-transform: uppercase;
		color: #0d1e2a;
		letter-spacing: 2px;
		text-align: center;
	}
	
	.intro p {
		display: block;
		padding: 0 40px;
		font-family: 'Lora', serif;
		font-size: 18px;
		line-height: 30px;
		font-weight: 300;
		text-transform: none;
		color: #0d1e2a;
		text-align: center;
		
		margin-top: 30px;
	}

	.intro-container {
		padding-top: 0;
	}
	.intro-logo {
		display: block;
	}
	p#scroll-down {
		display: block;
	}
	
	/********************************	
	*	WORK
	********************************/
	.project {
		width: 100%;
		height: 45vw;
	}
	
	/********************************	
	*
	*	WORK PAGE
	*
	********************************/
	.work-container {
		margin-top: 20px;
		padding: 60px 0;
	}
}

@media only screen and (max-width :768px) {
	/********************************	
	*	CONTENT
	********************************/
	.content-container {
		width: 100%;
		height: 100%;
		padding: 40px 60px;
		margin-left: 0;
	}
	
	/********************************	
	*	INTRO
	********************************/
	/********************************	
	*	WORK
	********************************/
	.project {
		width: 100%;
		height: 45vw;
	}
	.caption {
		padding: 20px 20px;
		font-size: 40px;
		line-height: 54px;
	}
	.caption span {
		font-size: 14px;
		line-height: 20px;
		margin-top: 0;
	}
	.post:hover .caption span {
	}
	/********************************	
	*	ABOUT
	********************************/
	.about-altruist {
		width: 100%;
		margin-left: auto;
	}
	.about h1 {
		width: 100%;
		margin-left: 0;
		padding: 60px 40px 40px 40px;
		
		font-family: 'Lora', serif;
		font-size: 30px;
		line-height: 44px;
		font-weight: 200;
		text-transform: uppercase;
		color: #0d1e2a;
		letter-spacing: 2px;
		text-align: center;
	}
	.about-quote {
		width: 100%;
		margin-left: auto;
	}
	
	/********************************	
	*	SERVICE
	********************************/
	.service-list {
		display: table;
		padding: 0;
		margin: 0;
		margin-top: -20px;
		max-width: 100%;
		margin-left: auto;
		margin-bottom: 80px;
	}
	ul.service-ul {
		width: 100%;
		padding: 20px;
		margin: 0;
	}
	
	/********************************	
	*
	*	WORK PAGE
	*
	********************************/
	.work-description {
		width: 100%;
		margin-left: 0;
		padding: 20px 0px;
		background-color: transparent;
	}
}

@media only screen and (max-width :600px) {
	/********************************	
	*	WORK
	********************************/
	.caption {
		padding: 0 20px;
		font-size: 30px;
		line-height: 30px;
		letter-spacing: 1px;
	}
}
@media only screen and (max-width :570px) {
	.toggle-navigation {
		padding-top: 160px;
	}
	/********************************	
	*	HEADER
	********************************/
	.header-logo {
		width: 26px;
		margin: 0 auto;
	}
	.header h1 {
		font-family: 'Lora', serif;
		font-size: 20px;
		line-height: 22px;
		font-weight: 400;
		text-transform: uppercase;
		color: #0d1e2a;
		letter-spacing: 1px;
		word-spacing: 1px;
		text-align: center;
		
		margin-top: 10px;
	}
	.toggle-navigation {
		display: none;
		position: fixed;
		z-index: 199;
		width: 100%;
		height: 100%;
		margin: 0;
		padding-top: 40%;
			
		text-align: center;
	}
	/********************************	
	*	CONTENT
	********************************/
	.content-container {
		width: 100%;
		height: 100%;
		padding: 40px 60px;
		margin-left: 0;
	}
	
	/********************************	
	*	INTRO
	********************************/
	.intro h1 {
		width: 100%;
		margin-left: 0;
		padding: 20px 20px 20px 20px;
		
		font-family: 'Lora', serif;
		font-size: 30px;
		line-height: 44px;
		font-weight: 200;
		text-transform: uppercase;
		color: #0d1e2a;
		letter-spacing: 1px;
		text-align: center;
	}
	.intro p {
		display: block;
		padding: 0;
		font-family: 'Lora', serif;
		font-size: 18px;
		line-height: 30px;
		font-weight: 300;
		text-transform: none;
		color: #0d1e2a;
		text-align: center;
		
		margin-top: 0px;
		margin-bottom: 60px;
	}
	/********************************	
	*	WORK
	********************************/
	.all-projects {
		max-width: 960px;
		margin: 0 auto;
		padding-top: 40px;
		margin-top: 0;
	}
	.project {
		width: 100%;
		height: 45vw;
	}
	.caption {
		padding: 0 20px;
		font-size: 24px;
		line-height: 30px;
		letter-spacing: 1px;
	}
	.caption span {
		font-size: 12px;
		line-height: 20px;
		margin-top: 0;
	}
	.post:hover .caption span {
	}
	/********************************	
	*	ABOUT
	********************************/
	.about-altruist {
		width: 100%;
		margin-left: auto;
	}
	.about h1 {
		width: 100%;
		margin-left: 0;
		padding: 40px 20px 20px 20px;
		
		font-family: 'Lora', serif;
		font-size: 30px;
		line-height: 34px;
		font-weight: 200;
		text-transform: uppercase;
		color: #0d1e2a;
		letter-spacing: 1px;
		text-align: center;
		
		margin-top: 40px;
	}
	.about-quote {
		width: 100%;
		margin-left: auto;
	}
	.about-quote h4 {
		margin-top: 40px;
		margin-bottom: 20px;
	}
	
	/********************************	
	*
	*	WORK PAGE
	*
	********************************/	
	img.work-image {
		width: 100%;
		float: left;
		margin-bottom: 3px;
		margin-left: 0;
		margin-right: 0;
		padding: 0 40px;
	}
}

@media only screen and (max-width :480px) {
	/********************************	
	*	HEADER
	********************************/
	.toggle-navigation {
		display: none;
		position: fixed;
		z-index: 199;
		width: 100%;
		height: 100%;
		margin: 0;
		padding-top: 40%;
			
		text-align: center;
	}
	/********************************	
	*	CONTENT
	********************************/
	.content-container {
		width: 100%;
		height: 100%;
		padding: 40px 0;
		margin-left: 0;
	}
	
	/********************************	
	*	INTRO
	********************************/
	.intro-container {
		padding: 0 20px;
	}
	.intro h1 {
		width: 100%;
		margin-left: 0;
		padding: 0 20px 20px 20px;
		
		font-family: 'Lora', serif;
		font-size: 26px;
		line-height: 34px;
		font-weight: 200;
		text-transform: uppercase;
		color: #0d1e2a;
		letter-spacing: 1px;
		text-align: center;
	}
	.intro p {
		font-family: 'Lora', serif;
		font-size: 16px;
		line-height: 24px;
	}
	a.more-about {
		width: 240px;
	}
	a.more-about::before {
		width: 239px;
	}
	
	/********************************	
	*	WORK
	********************************/
	.post {
		margin-top: 3px;
	}
	.project {
		width: 100%;
		height: 60vw;
	}
	.caption {
		padding: 20px 20px;
		font-size: 24px;
		line-height: 30px;
		margin-top: -20px;
	}
	.caption span {
		font-size: 12px;
		line-height: 20px;
		margin-top: 0;
	}
	.post:hover .caption {
	}
	.post:hover .caption span {
	}
	
	/********************************	
	*	ABOUT
	********************************/
	.about-container {
		padding: 0 20px;
		padding-top: 80px;
		margin-top: 0;
	}
	.about-altruist {
		width: 100%;
		margin-left: 0;
		padding: 0;
		background-color: transparent;
	}
	.about-altruist p,
	.about-quote p {
		padding: 0;
		font-family: 'Lora', serif;
		font-size: 18px;
		line-height: 30px;
		font-weight: 300;
		text-transform: none;
		color: #0d1e2a;
		text-align: left;
		
		padding-top: 25px;
	}
	.about h1 {
		width: 100%;
		margin-left: 0;
		padding: 20px 10px;
		margin-top: 40px;
		
		font-family: 'Lora', serif;
		font-size: 26px;
		line-height: 34px;
		font-weight: 200;
		text-transform: uppercase;
		color: #0d1e2a;
		letter-spacing: 1px;
		text-align: center;
	}
	.about-quote {
		width: 100%;
		margin-left: 0;
		padding: 40px 0;
	}
	.about-quote h4 {
		margin-top: 40px;
		margin-bottom: 20px;
	}
	/* INDEX IMAGE */
	.index-image-container {
		margin: 0 0 0 0;
	}
	.index-image {
		width: 240px;
		height: 240px;
	}
	
	/********************************	
	*	SERVICE
	********************************/
	.service-container {
		padding: 0 20px;
	}
	
	/********************************	
	*	CONTACT
	********************************/
	.contact-container {
		padding: 0 20px;
	}
	.contact {
		padding: 80px 0 80px 0;
	}
	/* FORM */
	form.message-form {
		width: 240px;
	}
		
	.g-recaptcha {
		
	}
	/********************************	
	*
	*	WORK PAGE
	*
	********************************/	
	.work-container {
		margin-top: -40px;
	}
	
	.work h1 {
		max-width: 700px;
		margin: 0 auto;
		padding: 40px 20px 20px 20px;
		
		font-family: 'Lora', serif;
		font-size: 30px;
		line-height: 34px;
		font-weight: 200;
		text-transform: uppercase;
		color: #0d1e2a;
		letter-spacing: 2px;
		text-align: center;
	}
	.work h1 span {
		display: block;
		padding: 20px 0;
		font-family: 'Lora', serif;
		font-size: 16px;
		line-height: 24px;
		font-weight: 300;
		text-transform: none;
		letter-spacing: 0;
		color: #0d1e2a;
	}

}