/*
* Alexandria V1.0
* Copyright 2014, Limitless LLC
* www.limitless.ma
*/


/* 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) {}

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


		header .logo {
			margin-left: 15px;
		}

		.navigation {
			margin-right: 15px;
		}


		/* #Work
		================================================== */

		.project {
			margin: 30px auto;
			width: 720px !important;
		}

		.project .cover {
			background-color: #111111;
			left: 0;
			margin-bottom: 18px;
			right: 0;
			top: 0;
			width: 100%;
		}

		.project .cover video, .project .cover iframe {
			height: 405px;
			width: 720px;
		}

		.project .cover img {
			border: none;
			width: 720px;
		}

		.project .section, .project .container {
			position: relative;
			width: 720px;
		}

		.project .twelve {
			padding: 5px 25px 25px;
			width: 100% !important;
		}

		.project .devider {
			margin-bottom: 50px !important;
		}


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

		.blog .item {
			text-align: center;
		}

		.blog .devider {
			background-color: #cccccc;
			height: 1px;
			margin-bottom: 30px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 30px;
			width: 80px;
		}

		.blog .cover {
			height: 300px;
			margin-bottom: 0px;
		}

		.article {
			margin: 30px auto;
			width: 720px !important;
		}

		.article .cover {
			background-color: #111111;
			left: 0;
			margin-bottom: 18px;
			right: 0;
			top: 0;
			width: 100%;
		}

		.article img {
			border: none;
			width: 720px;
		}

		.article .container {
			position: relative;
			width: 720px;
		}

		.article .twelve {
			padding: 5px 25px 25px;
			width: 100% !important;
		}


	}

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

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

		/* #Basics
		================================================== */
		body {
			
		}

		h1 { font-size: 36px; line-height: 56px; margin-bottom: 8px; }
		h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
		h3 { font-size: 24px; line-height: 34px; margin-bottom: 7px; }
		h4 { font-size: 20px; line-height: 30px; margin-bottom: 4px; }
		h5 { font-size: 17px; line-height: 24px; }
		h6 { font-size: 14px; line-height: 21px; }

		/* #Header
		================================================== */

		header {
			padding: 15px 15px 0px;
		}

		header .logo {
			float: left;
		}

		header .menu {
			display: block;
			float: right;
			margin-right: 10px;
		}

		header .navigation {
			margin-bottom: 0px;
			margin-top: 20px;
			margin-right: 10px;
		}

		header .navigation ul {
			display: none;
			margin-bottom: 0px;
		}

		header .navigation li {
			border-bottom: 1px solid #414345;
			color: #77787a;
			display: block;
			margin: 0px auto;
			padding: 15px 5px;
			text-align: left;
		}

		header .navigation li:last-child {
			border-bottom: none;
		}


		/* #Work
		================================================== */

		.project {
			margin: 30px auto;
			width: 420px !important;
		}

		.project .cover {
			background-color: #111111;
			left: 0;
			margin-bottom: 18px;
			right: 0;
			top: 0;
			width: 100%;
		}

		.project .cover video, .project .cover iframe {
			height: 236px;
			width: 420px;
		}

		.project .cover img {
			border: none;
			width: 420px;
		}

		.project .section, .project .container {
			position: relative;
			width: 420px;
		}

		.project .twelve {
			padding: 5px 15px;
		}

		.project .devider {
			margin-bottom: 50px !important;
		}


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

		.blog .item {
			text-align: center;
		}

		.blog .devider {
			background-color: #cccccc;
			height: 1px;
			margin-bottom: 30px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 30px;
			width: 80px;
		}

		.blog .cover {
			height: 300px;
			margin-bottom: 0px;
		}

		.article {
			margin: 30px auto;
			width: 420px !important;
		}

		.article .cover {
			background-color: #111111;
			left: 0;
			margin-bottom: 18px;
			right: 0;
			top: 0;
			width: 100%;
		}

		.article img {
			border: none;
			width: 420px;
		}

		.article .container {
			position: relative;
			width: 420px;
		}

		.article .twelve {
			display: block !important;
			float: none !important; 
			margin-left: auto;
			margin-right: auto;
			padding: 5px 15px 15px;
		}

		/* #Contact
		================================================== */
		.contact .info {
			text-align: center !important;
		}

		/* #Footer
		================================================== */
		
		footer .social li {
			margin: 0px 5px;
		}


	}

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

		/* #Basics
		================================================== */
		body {
			
		}

		h1 { font-size: 36px; line-height: 56px; margin-bottom: 8px; }
		h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
		h3 { font-size: 24px; line-height: 34px; margin-bottom: 7px; }
		h4 { font-size: 20px; line-height: 30px; margin-bottom: 4px; }
		h5 { font-size: 17px; line-height: 24px; }
		h6 { font-size: 14px; line-height: 21px; }

		/* #Header
		================================================== */

		header {
			padding: 15px 15px 0px;
		}

		header .logo {
			float: left;
		}

		header .menu {
			display: block;
			float: right;
			margin-right: 10px;
		}

		header .navigation {
			margin-bottom: 0px;
			margin-top: 20px;
			margin-right: 10px;
		}

		header .navigation ul {
			display: none;
			margin-bottom: 0px;
		}

		header .navigation li {
			border-bottom: 1px solid #414345;
			color: #77787a;
			display: block;
			margin: 0px auto;
			padding: 15px 5px;
			text-align: left;
		}

		header .navigation li:last-child {
			border-bottom: none;
		}


		/* #Work
		================================================== */

		.project {
			margin: 30px auto;
			width: 300px !important;
		}

		.project .cover {
			background-color: #111111;
			left: 0;
			margin-bottom: 18px;
			right: 0;
			top: 0;
			width: 100%;
		}

		.project .cover video, .project .cover iframe {
			height: 169px;
			width: 300px;
		}

		.project .cover img {
			border: none;
			width: 300px;
		}

		.project .section, .project .container {
			position: relative;
			width: 300px;
		}

		.project .twelve {
			padding: 5px 15px 45px;
		}

		.project .devider {
			margin-bottom: 50px !important;
		}

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

		.blog .item {
			text-align: center;
		}

		.blog .devider {
			margin-bottom: 30px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 30px;
			width: 80px;
		}

		.blog .cover {
			height: 300px;
			margin-bottom: 0px;
		}

		.article {
			margin: 30px auto;
			width: 300px !important;
		}

		.article .cover {
			background-color: #111111;
			height: 196px;
			left: 0;
			margin-bottom: 18px;
			right: 0;
			top: 0;
			width: 100%;
		}

		.article img {
			border: none;
			height: 196px;
			width: 300px;
		}

		.article .container {
			position: relative;
			width: 300px;
		}

		.article .twelve {
			display: block !important;
			float: none !important; 
			margin-left: auto;
			margin-right: auto;
			padding: 5px 15px 15px;
		}


		/* #Contact
		================================================== */
		.contact .info {
			text-align: center !important;
		}

		/* #Footer
		================================================== */
		
		footer .social li {
			margin: 0px 5px;
		}

	}