/*------------------------------------*\
    #MOBILE STYLES
\*------------------------------------*/
/* 1000px */
@media only screen and (max-width : 1024px) {
	.entry-header .entry-content {
		width: 70%;
	}

	.single-portfolio .entry-header .entry-content {
		padding-right: 2%;
	}

	.entry-header .project-cta {
		width: 30%;
	}

	.page.content-right {
		margin-left: 30%;
	}

	.post-wrapper .post-meta {
		padding-right: 2%;
		width: 30%
	}
	
	.post-meta li {
		display: block;
		width: 100%;
	}

	.comments-wrap,
	.post-wrapper .post-content {
		width: 70%;
	}

	.page.content-left {
		margin-right: 30%;
	}	

	.page.content-fullwidth {
		width: 90%;
		margin-left: 5%;
	}

	.page .footer.content-right {
		margin-left: 36.5%;
		width: 61.5%;
	}

	.projects .project:nth-of-type(9n+2) .title-wrap span,
	.projects .project:nth-of-type(9n+3) .title-wrap span,
	.projects .project:nth-of-type(9n+5) .title-wrap span,
	.projects .project:nth-of-type(9n+7) .title-wrap span,
	.projects .project:nth-of-type(9n+8) .title-wrap span,
	.projects .project:nth-of-type(9n+9) .title-wrap span {
		opacity: 0;
	}

	.project-form form {
		padding-left: 3%;
		padding-right: 3%;
		padding-top: 5%;
	}

	.project-pagination .project {
		width: 15%;
	}
}


/* 768px */
@media only screen and (max-width : 768px) {
	/*===================================================================*/
	/* OTHER
	/*===================================================================*/
	.footer,
	.entry-header .project-cta,
	.entry-header .entry-content {
		width: 100%!important;
		padding: 0;
	}

	.entry-header .project-cta {
		margin-top: 7%;
		margin-bottom: -3%;
		text-align: left;
	}

	.header .site-title {
		display: inline-block!important;
	}

	.hamburger-icon span, 
	.hamburger-icon span:after,
	.hamburger-icon span:before {
		-webkit-transition: 0s!important;
		-moz-transition: 0s!important;
		-o-transition: 0s!important;
		transition: 0s!important;
	}

	.page.content-right,
	.page.content-left,
	.page.content-fullwidth {
		margin-left: 0;
		margin-right: 0;
		padding: 0;
	}

	.page .comments-wrap {
		width: 100%;
		padding: 0;
		padding-top: 10%;
	}

	.page.content-fullwidth {
		width: 100%;
		margin-left: 0%;
	}

	.footer .colophon {
		font-size: 17px!important;
		font-size: 1.7rem!important;
		text-align: center;
	}

	.footer p.copyright {
		display: block;
		margin-top: 15%;
		text-align: center;
	}

	.footer p.copyright span {
		display: block;
	}

	.back-to-top {
		float: none;
		display: inline-block;
		margin-top: 20px;
	}

	.page .entry-content.main-content {
		padding: 8% 0 0 0;
	}

	.page .entry-media,
	.post .entry-media {
		margin-left: -3.5%;
		margin-bottom: 3%;
		top:0!important;
		width: 107%;
	}
	
	.post .entry-media {
		margin-bottom: 8%;
	}

	#projects.projects { 
		bottom: 0!important; 
	}

	#projects.projects .project { 
		margin-left: 0;
		margin-right: 0;
		padding-top: 0;
		width: 50%; 
	}

	#projects.projects .thumb { 
		top:0!important; 
	}
	
	.project-filter {
		padding: 14% 5%;
	}

	.project-filter ul.sort-group {
		margin: 0;
	}

	.project-filter ul li {
		display: inline-block;
		float: none;
		margin-bottom: .3em;
	}

	#flyout-close.hamburger-icon {
		position: absolute;
		top: 10px;
		right: 10px;
	}
	
	.project-form {
		position: relative;
		left: 0;
		width: 90%;
		top: inherit;
		-webkit-transform: translate(0, 0); 
		-moz-transform: translate(0, 0); 
		-ms-transform: translate(0, 0); 
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	.project-form form { 
		padding-top: 10%;
	}

	.project-caption {
		padding: 2% 5% 5%;
		text-align: center;
	}
	
	.page-template-template-contact-php .project.square-link {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 3%;
		padding: 0!important;
		top: 0!important;
		width: 48.5%;
	}

	.page-template-template-contact-php .project.square-link.first-link {
		padding-right: 1.5%;
	}

	.page-template-template-contact-php .project.square-link.second-link {
		float: right;
		padding-left: 1.5%;
	}

	.page-template-template-contact-php .page,
	.page-template-template-contact-php .g-map {
		top: 0!important;
	}

	.page-template-template-contact-php .page .entry-content.main-content {
		padding-top: 3%;
	}

	.page-template-template-contact-php .page,
	.page-template-template-contact-php .g-map {
		margin: 0!important;
		padding: 0!important;
		width: 100%!important;
	}
	
	.contactform,
	.page-template-template-contact-php .g-map {
		margin-bottom: 3%!important;
	}

	.comments-wrap {
		padding-top: 10%;
	}

	.contactform,
	.comment-form {
		padding: 6%;
	}

	.contactform .button,
	.comment-form .submit {
		background-color: #DFDFDF!important;
		padding: 12px;
		margin: 0;
		width: 100%;
		text-align: center;
	}

	#BeanForm .button::after {
  		right: inherit;
	}
	
	.blog .post {
		margin-bottom: 12%;
	}

	.post-wrapper .post-meta {
		padding-right: 0%;
		width: 30%
	}

	.comments-title-wrap p {
		text-align: center;
	}

	.comments-wrap,
	.post-wrapper .post-content {
		width: 70%
	}

}	


/* 767px */
@media only screen and (max-width : 767px) {
	.comment .avatar {
		display: none;
	}

	.comment-body,
	.comments .children,
	.commentlist #respond.comment-respond {
		margin-left: 0!important;
	}

	#respond.comment-respond,
	.commentlist #respond.comment-respond {
		width: 100%;
	}

	.post-wrapper .post-meta {
		width: 100%
	}

	.comments-wrap,
	.post-wrapper .post-content {
		padding-left: 0;
		width: 100%
	}

	.post-meta li {
		display: inline-block;
		float: none;
		font-size: 1.4rem;
		font-size: 14px;
		margin-right: 20px;
		margin-bottom: 0;
		min-width: initial;
		width: auto;
	}

	.post-meta li span {
		display: inline-block;
	}

	.page-template-template-sidebar .page.content-left,
	.page-template-template-sidebar .page.content-right {
		width: 100%;
	}

	.sidebar.content-left,
	.sidebar.content-right {
		float: left;
		padding: 10%;
		margin-left: 0;
		margin-top: 15%;
		width: 100%;
	}

	.widget_bean_tweets .button::after {
		display: none;
	}

}


/* 640px */
@media only screen and (max-width: 640px) {
	.header {
		padding: 13% 0%;
	}

	.entry-header .entry-content p {
		font-size: 20px!important;
		font-size: 2.0rem!important;
		line-height: 1.7;
	}	
	
	.single-portfolio .entry-header .entry-content {
		padding-right: 0;
	}

	.entry-header .project-cta a.btn {
		width: 100%;
	}

	#projects.projects .project {  
		width: 100%;  
	}
	
	.projects .project:nth-of-type(9n+2) .title-wrap span,
	.projects .project:nth-of-type(9n+3) .title-wrap span,
	.projects .project:nth-of-type(9n+5) .title-wrap span,
	.projects .project:nth-of-type(9n+7) .title-wrap span,
	.projects .project:nth-of-type(9n+8) .title-wrap span,
	.projects .project:nth-of-type(9n+9) .title-wrap span {
		opacity: 1;
	}

	.project-meta {
		margin-bottom: 5px;
		margin-top: 15px;
	}
	
	.project-meta p {
		float: none; 
		text-align: left;
		display: block;
		margin-bottom: 5px;
		margin-right: 0;
	}

	body .entry-header .project-meta p {
		font-size: 15px!important;
		font-size: 1.5rem!important;
		line-height: 1.5!important;
	}

	.post-meta {
		margin-top: 1%;
	}

	.more-link {
		margin-top: 4%;
	}

	.post-meta li {
		display: block;
	}
	
	.archives-list {
		margin-top: 11%;
	}

	.archives-list ul {
		margin: 0 0 12% 0!important;
	}

	.archives-list li {
		list-style: none;
	}

}


/* 514px */
@media only screen and (max-width : 514px) {
	#projects.projects .project { 
		margin: 0 0 3%;
	}

	.project-pagination .project,
	.single-portfolio .project-pagination .project {
		padding: 0;
		width: 50%!important;
	}
	
	.project-pagination .project.prev,
	.single-portfolio .project-pagination .project.prev {
		padding-right: 1.25%;
	}

	.project-pagination .project.next,
	.single-portfolio .project-pagination .project.next {
		padding-left: 1.25%;
	}

	.project-taxonomy {
		display: none;
	}

	h2 span {
		font-size: 20px;
		font-size: 3.0rem;
	}

	.project-form form {
		padding-left: 0;
		padding-right: 0;
	}

	.group.phone,
	.group.timezone {
		float: none;
		width: 100%;
		margin-bottom: 0;
	}

	.group.phone,
	.group.timezone  { 
		margin-right: 0;
		margin-left: 0;
	}

	.project-caption {
		padding-bottom: 7%;
	}

	.project-form textarea {
		height: 180px;
	}

	.page-template-template-contact-php .project.square-link {
		width: 100%;
	}

	.more-link {
		display: none;
	}

	blockquote {
		margin-left: 0;
	}

	blockquote,
	blockquote p {
		font-size: 19px!important;
		font-size: 1.9rem!important;
		line-height: 1.6em!important;
	}

	.alignleft,
	.alignright,
	.aligncenter {
		display: inline-block;
		margin: 8% 0;
		max-width: 100%;
	}

	/* COMMENTS */
	#comments ul {
		margin-bottom: 0;
	}

	#comments ul.children {
  		margin-bottom: 3%;
	}

	ul.children li.comment:last-child .comment-body:last-of-type p {
		margin-bottom: 0;
	}

	.comment-meta {
		display: block;
		margin-bottom: 5px;
	}

	.comment-meta .at {
		display: none;
	}

	.comment-meta:before {
		content: "";
		display: none;
	}

	.comment-form .form-submit {
		text-align: center;
	}

	.moderation { 
		display: none;
	}
}


/* 414px */
@media only screen and (max-width : 414px) {
	.entry-header .entry-content p {
		font-size: 19px!important;
		font-size: 1.9rem!important;
		line-height: 1.6;
	}	

	p, ul, ol, .wp-caption, .bean-tab-content, .bean-panel-body {
		font-size: 16px;
		line-height: 1.7;
	}

	p,
	ul,
	ol,
	dl,
	dd,
	form
	table,
	address,
	fieldset,
	iframe,
	.gist,
	.bean-alert,
	.entry-content h1,
	.entry-content h2,
	.entry-content h3,
	.entry-content h4,
	.entry-content h5,
	.entry-content h6,
	#comments ul.children { 
		margin-bottom: 5%;
	}

	.entry-content ul,
	.entry-content ol { 
		margin-left: 20px;
		margin-left: 2.0rem;
		line-height: inherit;
	}
}








/**
 * 5.2 - Main Navigation
 */

@media only screen and (max-width: 768px) {
    .main-navigation {
        height: 100%;
        left: 0;
        line-height: 60px;
        position: fixed;
        text-align: center;
        top: 0;
        width: 100%;
        z-index: 10;
        z-index: 9999999;
        background-color: #181818;
        -webkit-transform: translate3d(0, -120%, 0);
        transform: translate3d(0, -120%, 0);
        -webkit-transform-style: preserve-3d;
    }

    .js--animating .main-navigation {
        -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .open-nav .main-navigation {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding: 0;
        left: 50%;
        position: absolute;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .header .nav.main-navigation li {
        margin: 0;
        padding: 0;
        display: block;
        opacity: 1;
    }

    .main-navigation a {
        display: inline-block;
        height: 60px;
        font-size: 20px;
        letter-spacing: 2px;
        position: relative;
    }

    .header .nav.main-navigation a,
    .nav.main-navigation ul li a:hover,
    .header .nav li a:hover,
    .header .nav ul > .sfHover > a.sf-with-ul {
        color: #fff;
        opacity: 1;
    }
    
    .header .nav ul li.current-menu-item a {
        border: none;
        color: #fff;
        opacity: 1;
    }

    .main-navigation a:after {
        background-color: #fff;
        bottom: 13px;
        content: "";
        height: 1px;
        left: 51%;
        position: absolute;
        right: 50%;
        opacity: .4;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
        z-index: 1;
    }

    .main-navigation a:hover:after,
    .main-navigation .current-menu-item a:after {
        left: 0;
        right: 0;
    }

    .main-navigation .sub-menu {
        display: none!important;
    }
}


.mobile-menu-toggle {
    display: none;
}

@media only screen and (max-width: 768px) {
    .mobile-menu-toggle {
        background-color: #181818;
        cursor: pointer;
        height: 40px;
        overflow: hidden;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 0.4s ease-in-out;
        transition: 0.4s ease-in-out;
        width: 40px;
        display: block;
        float: right;
        margin-left: 20px;
        z-index: 99999999;
        position: fixed;
        bottom: 20px;
        left: -2px;
    }

    .open-nav .mobile-menu-toggle {
        background-color: #fff;
    }

    .admin-bar .mobile-menu-toggle {
        top: 57px;
    }

    .mobile-menu-toggle span {
        background-color: #fff;
        display: block;
        height: 1px;
        left: 10px;
        opacity: 1;
        position: absolute;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .4s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: .4s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 20px;
    }

    .open-nav .mobile-menu-toggle span {
        background-color: #181818;
    }

    .mobile-menu-toggle span:nth-child(1) {
        top: 13px;
    }

    .mobile-menu-toggle span:nth-child(2) {
        top: 19px;
    }

    .mobile-menu-toggle span:nth-child(3) {
        top: 25px;
    }

    .open-nav .mobile-menu-toggle span:nth-child(1) {
        top: 20px;
        -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .open-nav .mobile-menu-toggle span:nth-child(2) {
        left: -30px;
        opacity: 0;
    }

    .open-nav .mobile-menu-toggle span:nth-child(3) {
        top: 20px;
        -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }

    .open-nav {
        height: 100%;
        overflow: hidden;
        position: relative;
    }
}





/*===================================================================*/
/*
/* RETINA CSS
/*
/*===================================================================*/
/* @2x */
@media only screen and (-webkit-min-device-pixel-ratio : 2),only screen and (min--moz-device-pixel-ratio : 2),only screen and (-o-min-device-pixel-ratio : 2/1),only screen and (min-device-pixel-ratio : 2),only screen and (min-resolution : 192dpi),only screen and (min-resolution : 2dppx) {
	
	.pswp__button,.nav-flyout-toggle,.nav-social-toggle,.nav-cart-toggle,.social-flyout li a {
		background-image: url(../images/retina/sprite@2x.png);
		background-size: 100px 550px!important;
	}
	
	a.jp-play span, a.jp-pause span { 
		background-image:url(../images/retina/jplayer@2x.png);
		background-size: 100px 250px!important;
	}
}

/* @3x - IPHONE 6 PLUS AND SIMILAR HD RETINA */
@media screen and (min-device-width : 414px) and (-webkit-device-pixel-ratio: 3) {
	
	.pswp__button,.nav-flyout-toggle,.nav-social-toggle,.nav-cart-toggle,.social-flyout li a {
		background-image: url(../images/retina/sprite@3x.png)!important;
	}
	
	a.jp-play span, a.jp-pause span { 
		background-image:url(../images/retina/jplayer@3x.png)!important;
	}
}