@media only screen and (max-width: 850px) {
	.close-button h1 {
		font-size: 1.2em;
	}
}

/* tablet Size */
@media only screen and (max-width: 769px) {
	html {
		font-size: 16px;
	}
	header {
		overflow-x: hidden;
	}

	/* header */
	#splash {
		width: 150%;
		margin-left: 50%;
		-webkit-transform: translateX(-50%);
		   -moz-transform: translateX(-50%);
		    -ms-transform: translateX(-50%);
		     -o-transform: translateX(-50%);
		        transform: translateX(-50%);
	}

	#logoBG img {
		width: 30%;
	}

	/* nav */
	nav.desktop {
		width: 100%;
		height: 100%;
		opacity: 0;
		-webkit-transform: translateY(-100%);
		   -moz-transform: translateY(-100%);
		    -ms-transform: translateY(-100%);
		     -o-transform: translateY(-100%);
		        transform: translateY(-100%);
		-webkit-transition: all 1s ease;
		   -moz-transition: all 1s ease;
		    -ms-transition: all 1s ease;
		     -o-transition: all 1s ease;
		        transition: all 1s ease;
	}

	.nav-sticky {
		-webkit-transform: translateY(-100%) !important;
		   -moz-transform: translateY(-100%) !important;
		    -ms-transform: translateY(-100%) !important;
		     -o-transform: translateY(-100%) !important;
		        transform: translateY(-100%) !important;
	}

	nav.desktop h2 {
   		display: none;
	}

	nav.desktop ul {
		position: absolute;
		top: 50%;
		float: none;
		width: 100%;
		margin: 0;
		text-align: center;
		-webkit-transform: translateY(-50%);
		   -moz-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		     -o-transform: translateY(-50%);
		        transform: translateY(-50%);
	}

	nav.desktop ul li {
	    color: rgba(255,255,255, 1);
	    display: block;
	    float: none;
	    margin: 0;
	    font-size: 2.616rem;
	}

	nav.desktop ul li:nth-of-type(n+2) {
    	margin-left: 0;
    	margin-top: 1.618rem;
    }

    nav.desktop ul li:hover {
		border-bottom: 2px solid #dc3b3d;
    }

	nav.mobile {
		display: block;
	}

	#burger {
		display: block;
	}

	nav.mobile img {
		display: block;
	}

	/* work-containers */
	#web .work-container, #graphic .work-container {
		background-color: #dc3b3d;
	}

	.tri-bottom {
		display: none;
	}

	.tri-top {
		opacity: .65;
		bottom: 6px;
	}

	/*	project sections */
	#web-projects article div.web-article-inner img.site-image {
	    width: 60%;
	    margin: 0 20%;
	    float: none;
	    position: static;
	    -webkit-transform: none;
	       -moz-transform: none;
	        -ms-transform: none;
	         -o-transform: none;
	            transform: none;
	}

	.project-container article {
		padding-bottom: 4.236rem;
	}

	.city .gallery a:before {
		right: 5%;
	}

	.gallery {
		margin-bottom: 0;
	}

	.description {
	    float: none;
	    width: 75%;
	    margin: 4.236rem 12.5% 0;
	}

	.project-container .back {
		text-align: center;
		margin-top: 4.236rem;
	}

	.arrow-animate {
		left: 25% !important;
	}

	#graphic-projects .description, #art-projects .description, .city .description {
		width: 75%;
	}

	.mfp-image-holder .mfp-content {
    	max-width: 90% !important;
	}

	.back-arrow {
		display: none;
	}

	.arrow-animate {
		left: -25% !important;
	}

	/*	about page */
	#about-pic {
		width: 25%;
	}

	.skills-icon {
		width: 85px;
	}

	.skills h3 {
		font-size: 1em;
		text-transform: uppercase;
		font-variant: normal;
	}

	.skills ul h3 {
		font-size: .9em;
	}

	/*	mask section */
	#mask-container {
		overflow: hidden;
	}

	#mask-inner-container {
		-webkit-transform: translate(-50%, -50%) rotate(90deg);
		   -moz-transform: translate(-50%, -50%) rotate(90deg);
		    -ms-transform: translate(-50%, -50%) rotate(90deg);
		     -o-transform: translate(-50%, -50%) rotate(90deg);
		        transform: translate(-50%, -50%) rotate(90deg);
	}

	g#mask-logo_1_ {
		transform-origin: 34% 163%;
		-webkit-transform: rotate(270deg);
		   -moz-transform: rotate(270deg);
		    -ms-transform: rotate(270deg);
		     -o-transform: rotate(270deg);
		        transform: rotate(270deg);
	}

	#Layer_1 {
		width: 100%;
	}
}

@media only screen and (max-width: 725px) {
	.work-container {
		float: none;
	    width: 80%;
	    margin: 4.235rem 10% 0;
	}

	.work {
		padding-top: 2.618rem;
	}

	#Layer_1,#layer-mask-top {
		width: 100%;
	}

	.back-arrow {
		left: 25%;
	}

	.arrow-animate {
		left: 22% !important;
	}

	.ab-bar {
		display: none;
	}

	.triangle-background {
		display: none;
	}

	#about-pic {
		position: relative;
		width: 50%;
		max-width: 300px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		   -moz-transform: translateX(-50%);
		    -ms-transform: translateX(-50%);
		     -o-transform: translateX(-50%);
		        transform: translateX(-50%);
		        margin-top: 2.618rem;
	}

	.about-info, .contact-info {
		position: static;
		margin-left: 12.5%;
		width: 75%;
		float: none;
	}

	#about p {
		margin-left: 0;
	}

	.skill-section {
		margin-left: 0;
	}

	.about-contact-head {
		margin-top: 2.618rem;
	}

	#contact-about-logo {
		position: relative;
		-webkit-transform: translateX(-50%);
		   -moz-transform: translateX(-50%);
		    -ms-transform: translateX(-50%);
		     -o-transform: translateX(-50%);
		        transform: translateX(-50%);
		left: 50%;
		top: 4.236rem;
		width: 20%;
	}

	.contact-info {
		margin-top: 6.854rem;
	}
}

@media only screen and (max-width: 650px) {
	#Layer_1, #layer-mask-top, #mask-inner-container {
		width: 115%;
	}

	#layer-mask-top {
		left: -8%;
	}

	.back-arrow {
		left: 22%;
	}

	.arrow-animate {
		left: 19% !important;
	}
}

@media only screen and (max-width: 550px) {
	html {
		font-size: 15px;
	}

	#web-projects article div.web-article-inner img.site-image {
	    width: 80%;
	    margin: 0 10%;
	}

	#cat-container ul li h2 {
		letter-spacing: 0;
	}

	#cat-container ul li .cat-logos {
		width: 55px;
		height: 55px;
	}

	#web-after {
		left: 11px;
		border-bottom-width: 30px;
		border-left-width: 17px;
		border-right-width: 16px;
	}

	#graphic-after {
		border-bottom-width: 18px;
		bottom: 17px;
		left: 35px;
	}

	#art-after {
		width: 13px;
		left: 19px;
		border-bottom-width: 70px;
	}

	.back-arrow {
		left: 19%;
	}

	.arrow-animate {
		left: 16% !important;
	}

	#about p {
		padding-right: 1rem;
	}
}

@media only screen and (max-width: 550px) {
	.back-arrow {
    	left: 15%;
   		top: 4px;
	}

	.arrow-animate {
		left: 10% !important;
	}

	#art-after {
		left: 21px;
	}
}

@media only screen and (max-width: 450px) {
	html {
		font-size: 14px;
	}

	#logoBG img {
		width: 40%;
	}

	nav.mobile img, #burger {
		top: 1.618rem;
	}

	nav.mobile img {
		left: 1.618rem;
		width: 36px;
	}

	#burger {
		right: 1.618rem;
		border-radius: 18px;
		padding: 9px;
	}

	.burger-li-orig {
		width: 18px;
	}

	#burger li:nth-of-type(n+2) {
		margin-top: 5px;
	}

	#cat-container ul li h2 {
		font-size: 1.3em;
	}

	#layer-mask-top {
		left: -12%;
	}

	.about-info h2 {
		margin-bottom: 2.618rem;
	}

	.skills {
		float: none;
		margin: 0 0 4.236rem 50%;
		-webkit-transform: translateX(-50%);
		   -moz-transform: translateX(-50%);
		    -ms-transform: translateX(-50%);
		     -o-transform: translateX(-50%);
		        transform: translateX(-50%);
	}

	.skills h3 {
		font-size: 1.618em;
		line-height: 1.3;
	}

	.skills ul {
		width: 100%;
	}

	.skills ul h3 {
		font-size: 1.2em;
	}

	.close-button h1 {
		font-size: 1.3em;
	}

	.about-info {
		padding-bottom: 4.236rem;
	}
	.back-arrow {
    	left: 13%;
   		top: 2px;
	}

	footer {
		font-size: 1rem;
	}

	footer a {
		margin-top: .618rem;
		display: block;
	}

	footer p, footer a {
		float: none;
		width: 100%;
		text-align: center;
		margin-left: 0;
		font-size: .85rem;
	}
}

@media only screen and (max-height: 375px) {

	#Layer_1, #layer-mask-top, #mask-inner-container {
		width: 125%;
	}
}

/* height fix */
@media only screen and (max-height: 500px) {
		.ab-bar {
		display: none;
	}

	.triangle-background {
		display: none;
	}
}