/*
*   Boden (HTML)
*   Copyright 2015, Limitless
*   www.limitless.company
*/


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

	@media screen and (min-resolution: 2dppx) { 

		footer.footer .social-links li .button.apple:before {
			background-image: url("../images/icons/icon-apple-dark@2x.png");
		}

		footer.footer .social-links li .button.behance:before {
			background-image: url("../images/icons/icon-behance-dark@2x.png");
		}

		footer.footer .social-links li .button.dribbble:before {
			background-image: url("../images/icons/icon-dribbble-dark@2x.png");
		}

		footer.footer .social-links li .button.facebook:before {
			background-image: url("../images/icons/icon-facebook-dark@2x.png");
		}

		footer.footer .social-links li .button.flickr:before {
			background-image: url("../images/icons/icon-flickr-dark@2x.png");
		}

		footer.footer .social-links li .button.github:before {
			background-image: url("../images/icons/icon-github-dark@2x.png");
		}

		footer.footer .social-links li .button.google:before {
			background-image: url("../images/icons/icon-google-dark@2x.png");
		}

		footer.footer .social-links li .button.instagram:before {
			background-image: url("../images/icons/icon-instagram-dark@2x.png");
		}

		footer.footer .social-links li .button.linkedin:before {
			background-image: url("../images/icons/icon-linkedin-dark@2x.png");
		}

		footer.footer .social-links li .button.pinterest:before {
			background-image: url("../images/icons/icon-pinterest-dark@2x.png");
		}

		footer.footer .social-links li .button.twitter:before {
			background-image: url("../images/icons/icon-twitter-dark@2x.png");
		}

		footer.footer .social-links li .button.youtube:before {
			background-image: url("../images/icons/icon-youtube-dark@2x.png");
		}

		footer.footer .social-links li .button.vimeo:before {
			background-image: url("../images/icons/icon-vimeo-dark@2x.png");
		}

		footer.footer .back .back-button {
			background-image: url("../images/icons/footer-back-arrow@2x.png");
		}

		section.landing .item-content .button.icon:after {
			background-image: url("../images/icons/icon-arrow-dark@2x.png");
		}

		section.about .item-content .button.icon:after {
			background-image: url("../images/icons/icon-arrow-light@2x.png");
			opacity: 0.5;
		}

		section.quotes .slider-navigation .prev:before,
		section.quotes .slider-navigation .next:before {
			background-image: url("../images/icons/icon-arrow-light@2x.png");
		}	

		section.quotes .slider-navigation .prev:hover:before,
		section.quotes .slider-navigation .next:hover:before {
			background-image: url("../images/icons/icon-arrow-dark@2x.png");
		}	

		section.portfolio .section-header .item-content .filter .filter-button:before {
			background-image: url("../images/icons/icon-filter@2x.png");
		}
		section.portfolio .portfolio-filter li:before {
			background-image: url("../images/icons/icon-filter-unchecked@2x.png");
		}

		section.portfolio .portfolio-filter li.active:before {
			background-image: url("../images/icons/icon-filter-checked@2x.png");
		}

		section.portfolio.active .section-header .item-content .filter .filter-button:before {
			background-image: url("../images/icons/icon-filter-hover@2x.png");
		}

		section.project .section-header .entry-extra .button.icon:after {
			background-image: url("../images/icons/icon-arrow-light@2x.png");
		}

		section.project .section-content .item-content .button.circle:before {
			background-image: url("../images/icons/icon-play-dark@2x.png");
		}

		section.project .section-footer .social .facebook:before {
			background-image: url("../images/icons/icon-facebook-dark@2x.png");
		}

		section.project .section-footer .social .twitter:before {
			background-image: url("../images/icons/icon-twitter-dark@2x.png");
		}

		section.article .section-footer .social .facebook:before {
			background-image: url("../images/icons/icon-facebook-dark@2x.png");
		}

		section.article .section-footer .social .twitter:before {
			background-image: url("../images/icons/icon-twitter-dark@2x.png");
		}

		section.contact .section-content a.arrow:after {
			background-image: url("../images/icons/icon-arrow-dark@2x.png");
		}

		section.start .section-content .item-content .button.icon:after {
			background-image: url("../images/icons/icon-arrow-light@2x.png");
		}

		section.start .section-footer .action:before {
			background-image: url("../images/icons/icon-sent@2x.png");
		}

		section.cta .item-content .button.icon:after {
			background-image: url("../images/icons/icon-arrow-light@2x.png");
		}

		.loading {
			background-image: url("../images/icons/icon-loading-dark@2x.png");
		}

	}

	@media only screen and (min-width:1500px) {



	}

	@media only screen and (min-width: 768px) and (max-width: 959px) {


		/* Grid
		================================================== */

			.container .one-quarter.column, 
			.container .one-third.column { 
				margin-left: 9.090909090909091%;
				width: 45.45454545%; 
			}

			.container .one-quarter.column:first-child,
			.container .one-quarter.column:nth-child(4n+1),
			.container .one-third.column:first-child, 
			.container .one-third.column:nth-child(3n+4) { 
				margin-left: 9.090909090909091%;
			}

			.container .one-quarter.column:nth-child(2n+1), 
			.container .one-third.column:nth-child(2n+1) { 
				margin-left: 0px;
			}

			.container .one-half.column { 
				margin-left: 0px;
				width: 100%;
			}

			.container .one-half.column:nth-child(2n+1) { 
				margin-left: 0px;
			}


		/* Basic
		================================================== */

			.container,
			.container.narrow, 
			header.header,
			section.start .container {
				padding-left: 50px;
				padding-right: 50px;
			}


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

			header.header .logo, 
			header.header .cta {
				width: 30%;
			}

			header.header .navigation {
				width: 40%;
			}


		/* Quotes
		================================================== */

			section.quotes .slider-navigation {
				display: none;
			}


	}

	@media only screen and (max-width: 767px) {

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

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

			header.header .menu {
			    display: block;
			    position: absolute;
			    right: 20px;
			}

			header.header .navigation {
			    position: absolute;
			    top: 50%;
			    width: auto;
			    transform: scale(0,1) translateY(-50%);
			}

			header.header .navigation ul {
				opacity: 0;
			    text-align: left;
				transform: translateY(20%);
			}

			header.header .navigation ul > li {
				display: block;
			    margin-bottom: 20px;
				margin-right: 0px;
			}

			header.header .navigation ul > li span {
			    color: #222222 !important;
			    font-size: 24px;
			    font-weight: 300;
			    letter-spacing: 0.025em;
				text-transform: capitalize;
			}

			header.header .cta {
				bottom: 40px;
			    position: absolute;
			    width: auto;
			    transform: scale(0,1);
			}

			header.header .cta .button {
				float: left;
				opacity: 0;
			}

			header.header.active {
				background-color: #eeeeee;
			    bottom: 0px;
			    height: auto;
			    left: 0px;
				position: fixed;
			    right: 0px;
			    top: 0px;
			}

			header.header.active .logo {
				opacity: 0;
			}

			header.header.active .navigation {
				transform: scale(1,1) translateY(-50%);
			}

			header.header.active .navigation ul {
				opacity: 1;
				transform: translateY(0%);
				transition: all 1.5s ease 0s;
			}

			header.header.active .cta {
				transform: scale(1,1);
			}

			header.header.active .cta .button {
				opacity: 1;
				transition: all 1.5s ease 1s;
			}


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

			section.about .section-content {
			    padding-right: 0px;
			}

	}

	@media only screen and (min-width: 480px) and (max-width: 767px) { 

			.container,
			.container.narrow, 
			header.header,
			section.start .container {
				padding-left: 50px;
				padding-right: 50px;
			}

			header.header.active .cta,
			header.header.active .navigation {
				left: 50px;
			}

	}

	@media only screen and (max-width: 479px) {


		/* Basic
		================================================== */

			.offset {
			    padding-bottom: 50px;
			    padding-top: 50px;
			}

			.container,
			.container.narrow,
			header.header,
			section.start .container {
				padding-left: 30px;
				padding-right: 30px;
			}


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

			header.header.active .cta,
			header.header.active .navigation {
				left: 30px;
			}


		/* Footer
		================================================== */
		
			footer.footer {
    			padding-bottom: 50px;
				padding-top: 50px;
			    text-align: center;
			}

			footer.footer .social-links {
			    margin-bottom: 25px;
			}

			footer.footer .back {
				display: none;
			}


		/* Landing
		================================================== */

			section.landing .item-content .main {
			    width: 90%;
			}

			section.landing .item-content .main .title {
			    font-size: 48px;
			    margin-bottom: 10px;
			}

			section.landing .item-content .main .text {
			    font-size: 18px;
			    margin-bottom: 30px;
			}


		/* Quotes
		================================================== */

			section.quotes .item {
			    padding: 130px 0px;
			}

			section.quotes .item-content {
			    padding-left: 20px;
			    padding-right: 20px;
			}

			section.quotes .item-content .title {
			    font-size: 10.5px;
			}

			section.quotes .item-content .title:before {
			    margin-right: 10px;
			    width: 15px;
			}

			section.quotes .item-content .text {
			    font-size: 18px;
			    line-height: 36px;
			}

			section.quotes .slider-navigation {
				display: none;
			}


		/* Portfolio
		================================================== */

			section.portfolio.with-filtermenu .section-header {
			    height: 420px;
			}

			section.portfolio.with-filtermenu .section-header .item-content .headline {
   				padding: 0px 30px;
				width: 100%;
			}

			section.portfolio.with-filtermenu .section-header .item-content .title {
			    font-size: 28px;
			    margin-bottom: 15px;
			}

			section.portfolio.with-filtermenu .section-header .item-content .text {
				font-size: 15px;
				line-height: 36px;
				margin-bottom: 14px;
			}

			section.portfolio.with-filterbar .section-header .item-content .filterbar {
			    background-color: #222222;
			    bottom: 0px;
			    height: auto;
			    left: 30px;
			    position: absolute;
			    right: 30px;
			}

			section.portfolio.with-filterbar .section-header {
			    height: 305px;
			}

			section.portfolio.with-filterbar .section-header .item-content .headline {	
				top: 50%;
			}

			section.portfolio.with-filterbar .section-header .item-content .filterbar .bar {
				display: none;
			}

			section.portfolio.with-filterbar .section-header .item-content .filterbar select {
				display: block;
			}


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

			section.project .section-header {
			    margin-bottom: 120px;
			    padding-right:30px;
			}

			section.project .section-content .two-images img {
				display: block;
    			margin-bottom: 2%;
				width: 100%;
			}

			section.project .section-content .two-images img:last-child {
			    float: none;
    			margin-bottom: 0px;
			}

			section.project .section-footer .social {
			    text-align: center;
			}

			section.project .section-footer .social div {
			    margin-left: 30px;
			}

			section.project .section-footer .social div:first-child {
			    margin-left: 0px;
			}


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

			section.blog .section-header .item-content .title {
			    font-size: 36px;
			}


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

			section.article .container {
			    padding-left: 30px;
			    padding-right: 30px;
			}

			section.article .section-header .entry-thumbnail {
			    margin-bottom: 20px;
			}

			section.article .section-header .entry-meta, 
			section.article .section-header .entry-title {
			    padding-right: 30px;
			}

			section.article .section-content {
			    margin-bottom: 25px;
			    padding-right: 30px;
			}

			section.article .section-footer .social {
				text-align: center;
			}

			section.article .section-footer .social div {
			    margin-left: 30px;
			}

			section.article .section-footer .social div:first-child {
			    margin-left: 0px;
			}


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

			section.contact .section-header .title {
			    font-size: 36px;
			}


		/* Start a Project
		================================================== */

			section.start .section-header {
			    margin-bottom: 50px;
			}

			section.start .section-header .title {
			    font-size: 36px;
			}

			section.start .item .item:last-child {
				margin-bottom: 0px;
			}

			section.start .item-content.container {
				padding-left: 0px;
				padding-right: 0px;
			}
		
		
		/* CTA
		================================================== */

			section.cta {
				text-align: center;
			}

	}