/* CSS for lindseybutler.com - specific screen sizes

....................................................
...........................................BL.......
..........................................LBLB......
.........................................BLBLBL.....
........................................LBL.LBL.....
.......................................BLBL..BLB....
......................................LBLB...BLB....
.....................................BLBL....BLB....
.....................................BLBL...LBLB....
.....................................BLBL..BLBL.....
.....................................BLBL.LBLB......
.....................................BLBLBLBL.......
.........................BL..........BLBLBL.........
.............BLB........LBLBLB......LBLBLB..........
.........BLBLBLBLBLBL....BLBLBLBLBLBLBLBLBL.........
........LBLBLBLBLBLBLBL.....LBLBLBLBLBLBLBLB........
.......BLBLBL...LBLBLBLBLB.........BLB...BLB........
......LBLBL.........LBLBLBLB.......BLBLBLBLB........
.....BLBLB............LBLBLBLB.....BLBLBLBL.........
....LBLBL................BLBLBL....BLBLBLBLBLB......
....LBLBL..................BLBLBL.LBLB....LBLBL.....
....LBLBL.....................LBLBLBLB...BLBLBL.....
....LBLBL.......................LBLBLBLBLBLBLB......
....LBLBL.........................LBLBLBLBLBL.......
....LBLBL........................BLBLBLB............
....LBLBL........................BLB.BLBLB..........
....LBLBL......................BLBL....BLBLB........
.....BLBL.....................LBLB.......BLB........
.....BLBLB...................BLBL...................
.....BLBLB..................LBLB....................
......LBLBL................BLBL.....................
.......BLBLB.............BLBLB......................
.......BLBLBL..........BLBLBL.......................
........LBLBLB.......BLBLBL.........................
.........BLBLBLB..LBLBLBL...........................
...........BLBLBLBLBLBL.............................
.............BLBLBLB................................  
....................................................
....................................................

*/

@viewport {
	width: device-width ;
	zoom: 1.0 ;
}

@media screen and (max-width: 316px) {
	#btn-border {
		height: 114.75%;
	}
}

@media screen and (max-width: 450px) {
	.subheader-content {
		font-size: .55em;
		padding-top: 1.55em;
	}
	#subheader {
    	height: 2.1em;
    	top: 2.25em;
	}
	#btn-container a #btn, #email-btn-container a #email-btn, #portfolio-btn-container a #portfolio-btn {
		font-size: 1.05em;
		letter-spacing: .02em;
	}	
	#email-btn-border {
		width: 11.6em;
    	height: 1.98em;
		top: .06em;
	}
	#portfolio-btn-border {
		width: 17em;
    	height: 2em;
		top: .05em;
	}
	#headerSpacer-work {
		padding-top: 4.36em;
	}
	#workSpacer {
		max-height: calc(570px + 4.36em);
		height: calc(72.16% + 6.75em);
	}
}

@media screen and (max-width: 580px) and (min-width: 451px) {
	.subheader-content {
		font-size: .85em;
		padding-top: 1.15em;
	}
	#subheader {
		height: 2.5em;
		top: 2.4em;
	}
	#headerSpacer-work {
		padding-top: 4.85em;
	}
	#workSpacer {
		max-height: calc(570px + 4.85em);
		height: calc(72.16% + 7.35em);
	}
}

@media screen and (max-width: 550px) {
	h1 {
		font-size: calc(100vw*.057);
    	padding-bottom: 5px;
	}
	h2 {
		font-size: calc(100vw*.037);
		line-height: 1.3em;
    	padding-bottom: 5px;
	}
	p {
		font-size: calc(100vw*.0292);
		line-height: 1.55em;
    	letter-spacing: .04em;
	}
	#portfolio-btn-container, #email-btn-container {
		margin-top: 12px;
	}
	.work-img-content {
		padding: 2.75em 15px .85em 15px;
    	width: 90%;
	}
	.work-text-content {
		padding: .4em 15px 3.15em 15px;
    	width: 95%;
	}
	.index-content {
    	flex-direction: column;
		text-align: center;
	}
	#email-btn, #email-btn-border, #portfolio-btn, #portfolio-btn-border {
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-o-transform: translateX(-50%);
	}
	#intro .index-content .index-text-content {
		width: 92.5%;
		padding: 3.1em 2px 1.1em 2px;
	}
	#intro .index-content .index-img-content {
		width: 73.5%;
		padding: 1.1em 15px 3.1em 15px;
	}
	#process .index-content .index-text-content {
		width: 84%;
		padding: 1.1em 15px 3.1em 15px;
	}
	#process .index-content .index-img-content {
		width: 76.5%;
		padding: 3.1em 15px 1.1em 15px;
	}
	#experience .index-content .index-text-content {
		width: 90%;
		padding-left: 15px;
		padding-bottom: .75em;
	}
	#experience .index-content .index-img-content {
		width: 95%;
   		padding: .5em 5px 3.1em 5px;
	}
	#footer .index-content .index-text-content {
		width: 87%;
		padding: 1.1em 2px 1.1em 2px;
	}
	#footer .index-content .index-img-content {
		width: 71%;
		padding: 2.1em 15px 1.1em 15px;
	}
	.exp-list {
		display: none;
	}
}

@media screen and (max-height: 580px){
	#scrollIndicContainer {
		display: none;
	}
}

@media screen and (max-width: 580px) {
	#header {
		height: 2.5em;
	}
	.header-content {
		padding: .9em 0;
		font-size: .85em;
	}
	#logo {
		width: 1.25em;
	}
	.nav-menu li a {
		line-height: .8em;
	}
	#site-nav-container {
    	height: .9em;
	}
	#site-nav {
    	padding-top: .2em;
	}
	#homeSpacer {
		height: calc(65.46% + 3em + 45px);
	}
	#nameCon {
		height: 65.46%;
	}
	#headerSpacer {
		padding-top: 2.5em;
	}
}

@media screen and (max-width: 600px) {
	.cr-right {
		font-size: calc(73vw*.027);
	}
	#copyright {
		padding: 0 .5em;
	}
	#header .header-content .container {
		padding: 0 .65em;
	}
	#logoNP-work {
		display: none;
	}
	#topTxtContainer-work {
		width: 100%;
	}
	#topTxtContainer-work #nameContainer {
		text-align: center;
		margin-left: 0;
		width: 100%;
	}
	#topTxtContainer-work #nameSpacer {
    	padding-top: 20.5%;
	}
	#topTxtContainer-work #nameContainer h1.color-grey.intro {
		font-size: calc(100vw*.0677);
	}
	#topTxtContainer-work #nameContainer h2.nameTitle {
		font-size: calc(100vw*.023);
	}
}

@media screen and (max-width: 479px) and (min-width: 451px) {
	#btn-border {
	    height: 95%;
	}
}

@media screen and (max-width: 564px) and (min-width: 480px) {
	#btn-border {
	    height: 64%;
    	width: 101.8%;
	}
	#btn {
		width: 102.5%;
	}
}

@media screen and (max-width: 573px) and (min-width: 565px) {
	#btn {
		width: 90.5%;
	}
	#btn-border {
		width: 89.73%;
    	height: 62.8%;
	}
}

@media screen and (max-width: 700px) and (min-width: 573px) {
	#btn-border {
		width: 79.3%;
    	height: 62.8%;
	}
}

@media screen and (max-width: 700px) and (min-width: 451px) {
	#btn-container a #btn, #email-btn-container a #email-btn, #portfolio-btn-container a #portfolio-btn {
		font-size: 1.2em;
		letter-spacing: .02em;
	}	
	#email-btn-border {
		width: 13.3em;
	    height: 62.5%;
	}
	#portfolio-btn-border {
		width: 19.3em;
	    height: 62.7%;
	}
}

@media screen and (max-width: 800px) and (min-width: 551px) {
	h1 {
		font-size: 1.45em;
    	letter-spacing: .015em;
    	padding-bottom: 5px;
	}
	h2 {
		font-size: .95em;
    	line-height: 1.25em;
    	padding-bottom: 7px;
	}
	p {
		font-size: .75em;
    	line-height: 1.68em;
    	letter-spacing: .03em;
	}
	.work-img-content {
		padding: 4em 15px .85em 15px;
    	width: 90%;
	}
	.work-text-content {
		padding: .4em 15px 2.5em 15px;
    	width: 95%;
	}
	#portfolio-btn-container, #email-btn-container {
		margin-top: 15px;
	}
	#portfolio-btn, #portfolio-btn-border {
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-o-transform: translateX(-50%);
	}
	#intro .index-content .index-text-content {
		width: 53.5%;
		padding: 3.1em 7px 3.1em 7px;
	}
	#intro .index-content .index-img-content {
		width: 44.5%;
		padding: 3.1em 7px 3.1em 7px;
	}
	#process .index-content .index-text-content {
		width: 56%;
		padding: 3.1em 7px 3.1em 7px;
	}
	#process .index-content .index-img-content {
		width: 42.5%;
		padding: 3.1em 7px 3.1em 7px;
	}
	#experience .index-content .index-text-content {
		width: 90%;
		padding-left: 15px;
		padding-bottom: 5px;
		text-align: center;
	}
	#experience .index-content .index-img-content {
		width: 75%;
    	padding: 1.5em 7px 3.1em 7px;
	}
	#footer .index-content .index-text-content {
		width: 59%;
		padding: 3.1em 7px 3.1em 7px;
	}
	#footer .index-content .index-img-content {
		width: 40%;
		padding: 3.1em 7px 3.1em 7px;
	}
	.exp-list {
		display: none;
	}
}

@media screen and (min-width: 826px) and (max-height: 520px) {
	#logoCon {
		width: calc(60vh * 1.95);
		padding-top: 51.95vh;
	}
	h1.color-grey.intro {
    	font-size: 7.3vh;
		letter-spacing: .1vh;
	}
	h2.nameTitle {
	    font-size: 3.35vh;
		letter-spacing: .145vh;
	}
}

@media screen and (min-width: 720px) and (max-height: 545px) {
	#logoCon-work {
		width: calc(50.8vh * 1.93);
		padding-top: 51.75vh;
	}
}

@media screen and (max-height: 380px) {
	#logoCon {
		width: calc(60vh * 1.95);
		padding-top: 51.95vh;
	}
	h1.color-grey.intro {
    	font-size: 7.3vh;
		letter-spacing: .1vh;
	}
	h2.nameTitle {
	    font-size: 3.35vh;
		letter-spacing: .145vh;
	}
}

@media screen and (max-height: 420px) {
	#logoCon-work {
		width: calc(50.8vh * 1.93);
		padding-top: 51.75vh;
	}
	#workSpacer {
		height: calc(100% - 1.375em);
	}
	#nameCon-work {
		height: calc(100% - 8.575em);
	}
}

@media screen and (max-height: 420px) and (max-width: 500px) {
	#logoCon-work {
		width: 100%;
		padding-top: 51.75%;
	}
}

@media screen and (max-height: 420px) and (max-width: 450px) {
	#workSpacer {
		height: calc(100% - 1.45em);
	}
	#nameCon-work {
		height: calc(100% - 5.85em);
	}
} 

@media screen and (max-height: 420px) and (max-width: 580px) and (min-width: 451px) {
	#workSpacer {
		height: calc(100% - 1.45em);
	}
	#nameCon-work {
		height: calc(100% - 6.35em);
	}
}

@media screen and (max-width: 650px) {
	#scrollIndicContainer {
		display: none;
	}
}

@media screen and (max-width: 908px) and (min-width: 801px) {
	#btn-border {
	    height: 120%;
	}
}

@media screen and (min-width: 1100px) and (min-height: 521px) {
	h1.color-grey.intro {
		font-size: 50px;
		letter-spacing: .013em;
	}
	h2.nameTitle {
		font-size: 23px;
		letter-spacing: .043em;
	}
}

@media screen and (min-width: 1100px) {
	#topTxtContainer-work #nameContainer h1.color-grey.intro {
		font-size: 44px;
		letter-spacing: .013em;
	}
	#topTxtContainer-work #nameContainer h2.nameTitle {
		font-size: 15px;
		letter-spacing: .033em;
	}
	#homeSpacer {
		height: calc(720px + 5em);
	}
	#nameCon {
		height: 670px;
	}
	#workSpacer {
		height: calc(569px + 8em);
	}
	#nameCon-work {
		height: 569px;
	}
	#scrollIndicContainer {
		margin-top: calc(645.5px + 5em - 35px);
	}
}


@media screen and (min-width: 1100px) and (max-height: 759px) {
	#homeSpacer {
		height: calc(100vh + 5em);
	}
	#nameCon {
		height: calc(92vh - 50px);
	}
	#scrollIndicContainer {
		margin-top: calc(100vh - 3.5em);
	}
}

@media screen and (min-width: 1100px) and (max-height: 720px) {
	#workSpacer {
		height: calc(100% - 2.25em);
	}
	#nameCon-work {
		height: calc(100% - 9.75em);
	}
}

@media screen and (min-width: 1100px) and (max-height: 545px) {
	#topTxtContainer-work #nameContainer h1.color-grey.intro {
		font-size: 7.27vh;
		letter-spacing: .1vh;
	}
}

@media screen and (max-width: 825px) and (max-height: 550px) {
	#homeSpacer {
		height: calc(100vh + 5em);
	}
	#nameCon {
		height: calc(92vh - 50px);
	}
}

@media screen and (min-height: 900px) and (max-width: 550px) {
	#homeSpacer {
		height: calc(95vw * 1.05)
	}
	#nameCon {
		height: calc(90vw * .855)
	}
}

@media screen and (min-height: 480px) and (max-width: 750px) {
	#nameCon-work {
		height: 38.16%;
	}
}

@media screen and (min-height: 480px) and (max-width: 750px) and (min-width: 581px) {
	#workSpacer {
		height: calc(38.16% + 7.175em);
	}
}

@media screen and (min-height: 480px) and (max-width: 580px) and (min-width: 451px) {
	#workSpacer {
		height: calc(35.16% + 6.45em);
	}
}

@media screen and (min-height: 480px) and (max-width: 450px) {
	#workSpacer {
		height: calc(38.16% + 4.45em);
	}
}

@media screen and (min-height: 480px) and (max-height: 640px) and (max-width: 750px) and (min-width: 500px) {
	#logoCon-work {
    	width: calc(50.8vh * 1.23);
    	padding-top: 29.75vh;
	}
}