/*
* Talamone (HTML)
* Copyright 2014, Limitless LLC
* www.limitless.company
*/


/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */


/* #Page Styles
================================================== */


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {

		/* #Home
		================================================== */

		.home .title {
			font-size: 60px;
			line-height: 84px;
			margin-bottom: 20px;
		}

		.home .subtitle {
			font-size: 15px;
			font-weight: 400;
			letter-spacing: 0.1em;
			margin-bottom: 30px;
		}

		.flex-direction-nav .flex-prev {
			left: 5px !important;
		}

		.flex-direction-nav .flex-next {
			right: 5px !important;
		}

		/* #About
		================================================== */

		.about .image {
			height: 407px;
			width: 364px !important;
		}

		.about .story {
			height: 407px;
			padding: 30px 20px;
			width: 364px !important;
		}

		.about .story .title {
			margin-bottom: 10px;
		}

		.about .story p {
			line-height: 24px;
		}

		/* #Team
		================================================== */

		.team .row {
			margin-bottom: 20px;
		}

		/* #Gallery
		================================================== */		

		section.gallery .image.half {
			width: 374px;
		}

		/* #Works
		================================================== */

		.works .filter li {
		}

		.works .row {
			margin-bottom: 20px;
		}

		.works .project .thumbnail, .works .project img {

		}

		/* #Project
		================================================== */

		section.project .image.half {

		}

		section.project .social .facebook {
			margin-right: 20px;
		}

		section.project .links .all {
			margin-left: 10px;
		}

		section.project .social {
			margin-right: 10px;
		}


		/* #Services
		================================================== */

		.services .service .info .text {
			line-height: 24px;
			margin-top: 10px;
		}

		/* #Blog
		================================================== */

		.blog .col-1 .post {
			padding-right: 0px;
		}

		.blog .col-2 .post {
			padding-left: 0px;
		}

		.blog .post, .blog .post:last-child {
			margin-bottom: 20px;
		}

		.blog .post .thumbnail, .blog .post .thumbnail img {

		}	

		.blog .post .info {
			padding: 15px 20px;
		}

		/* #Article
		================================================== */

		section.article .social .facebook {
			margin-right: 20px;
		}

		section.article .links .all {
			margin-left: 10px;
		}

		section.article .social {
			margin-right: 10px;
		}	

		section.article .info .thumbnail {
			margin-bottom: 30px;
			margin-top: 20px;
		}

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

		section.article .content p {
			padding: 0px 20px;
		}

		/* #Contact
		================================================== */

		.contact .image, .contact .image img {

		}

		.contact .content {
			padding-left: 20px;
			padding-right: 20px;
		}

		.contact .info {
			margin-bottom: 20px;
		}

		.contact .info .title {
			margin-bottom: 10px;
		}

		.contact .form .title {
			margin-bottom: 10px;
		}

	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {


		/* #Works
		================================================== */

		.works .filter li {
			margin-right: 30px;
		}

		.works .row {
			margin-bottom: 20px;
		}

		.works .project .thumbnail, .works .project img {
			height: 236px;
			width: 236px;
		}

		/* #Project
		================================================== */

		section.project .image.half {
			width: 374px;
		}

		section.project .social .facebook {
			margin-right: 20px;
		}

		section.project .links .all {
			margin-left: 10px;
		}

		section.project .social {
			margin-right: 10px;
		}
		

		/* #Services
		================================================== */

		.services .service .image {
			height: 364px !important;
			width: 364px !important;
		}

		.services .service .info {
			background-color: #ffffff;
			height: 364px !important;
			padding-left: 30px;
			padding-right: 30px;	
			width: 364px !important;
		}

		/* #Blog
		================================================== */

		.blog .post .thumbnail, .blog .post .thumbnail img {
			height: 204px;
			width: 364px;
		}	

		/* #Contact
		================================================== */

		.contact .image, .contact .image img {
			height: 425px;
			width: 364px !important;
		}


	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

		.offset {
			padding: 30px 0px 0px;
		}


		/* #.header
		================================================== */

		header.header {

		}		

		header.header.active {
			background-color: #f0f0f0 !important;
			height: auto;
			bottom: 0px;
		}

		header.header .logo {
			float: left;
			width: 50%;
		}

		header.header .menu {
			display: block;
		}

		header.header .navigation {
			display: none;
		}

		header.header.active .navigation {
			display: block;
		}

		header.header .navigation ul {
			display: block;
		}

		header.header .navigation li {
			font-size: 20px;
			display: block;
			margin: 0px auto 25px;
			padding: 0px 5px;
			text-align: center;
		}

		header.header .navigation li:last-child {
			margin: 0px auto 0px;
		}


		/* #Home
		================================================== */

		section.home {

		}

		section.home .title {
			font-size: 40px;
			line-height: 48px;
			margin-bottom: 15px;
		}

		section.home .subtitle {
			font-size: 15px;
			font-weight: 400;
		}

		section.home .buttons {
			bottom: 0px;
		}

		section.home .discover, section.home .watch {
			bottom: 25px;
		}

		section.home .watch {
			left: 0px;
		}

		section.home .discover {
			background-image: url(../img/misc/home-discover-mobile.png);
			background-position: right 2px;
			background-size: 8px 17px;
			left: auto;
			margin-top: 4px;
			opacity: 0.4;
			padding-right: 15px;
			right: 0px;
			text-align: left;
		}

		/* #About
		================================================== */
		
		section.about .image {
			display: none;
		}		

		section.about .story {
			height: auto !important;
			text-align: center;
			width: 300px !important;
		}


		/* #Team
		================================================== */

		section.team .member {
			margin-bottom: 50px;
		}

		section.team .member:last-child {
			margin-bottom: 0px;
		}


		/* #Gallery
		================================================== */		

		section.gallery .container {
			padding: 0px;
		}

		section.gallery .image, section.gallery .image.half {
			width: 300px;
		}


		/* #Facts
		================================================== */

		section.facts {

		}

		section.facts .fact {
			margin-bottom: 20px;
			text-align: center;
		}

		section.facts .fact:last-child {
			margin-bottom: 0px;
		}

		/* #Works
		================================================== */

		.works .filter li {
			margin-right: 30px;
		}

		.works .row {
			margin-bottom: 0px;
		}

		.works .project {
			margin-bottom: 10px;
		}

		.works .project .thumbnail, .works .project img {
			height: 300px;
			width: 300px;
		}

		/* #Project
		================================================== */

		section.project .offset {
			padding-top: 100px !important;
		}

		section.project .info p {
			padding: 0px 20px;
		}

		section.project .gallery .container {
			padding: 0px;
		}

		section.project .image.half {
			width: 300px;
		}

		section.project .social .facebook {
			margin-right: 20px;
		}

		section.project .links {
			text-align: center;
		}

		section.project .links .all {
			margin-left: 10px;
		}

		section.project .social {
			margin-right: 10px;
			margin-top: 20px;
			text-align: center;
		}


		/* #Services
		================================================== */

		.services {

		}

		.services .filter li {
			margin-right: 20px;
		}

		.services .service .image {
			display: none;
		}

		.services .service .info {
			height: auto !important;
			margin-left: 0px !important;
			padding: 30px !important;
			text-align: center;
			width: 300px !important;
		}

		.services .service .info .text {
			margin-top: 30px;
		}

		/* #Blog
		================================================== */

		.blog .post .thumbnail, .blog .post .thumbnail img {
			height: 169px;
			width: 300px;
		}	

		/* #Article
		================================================== */

		section.article .social .facebook {
			margin-right: 20px;
		}

		section.article .links {
			text-align: center;
			width: 300px;
		}

		section.article .links .all {
			margin-left: 10px;
		}

		section.article .social {
			margin-top: 20px;
			text-align: center;
		}

		/* #contact
		================================================== */
		
		section.contact .map {
			height: 200px;
			width: 300px !important;
		}

		section.contact .content {
			margin-bottom: 100px;
			margin-top: -100px;
		}

		section.contact .info {
			height: auto !important;
			padding: 30px;
			text-align: center;
			width: 100% !important;
		}

		section.contact .info .title {
			line-height: 36px;
		}

		section.contact .info .text {
			margin-bottom: 20px;
		}

		section.contact .info .link {
			background-image: none;
			padding: 0px;
		}

		section.contact .form {
			height: auto;
			text-align: center;
		}

		/* #Footer
		================================================== */

		footer.footer {
			margin-top: 30px;
		}

		footer.footer .copyright {
			background-position: center top;
			margin-top: 0px;
			text-align: center;
		}

		footer.footer .social {
			margin-top: 20px;
			text-align: center;
		}

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {



	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {

		section.works .filter li {
			margin-right: 30px;
		}

	}