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

	/* Smartphone View = 1 Tile
	================================================== */
	@media only screen and (max-width: 580px) {
		
#logo, .name img, .mainImage, .bigNav, .info, .tabletMainImage, .lgImage, .socialMedia, .container {
	display: none;
}

.pizzaMenu { 
	display: inline; 
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}

.pizzaMenu li {
    background-color: #666;
    float: left;
    width: 33.333%;
    padding: 10px 0;
    margin: 0;
}

#pageTop > ul > li > a {
	color: #FFF;
}

.pizzaMenu a i {
	color: #FFF;
    font-size: 22px;
}

ul > li.mobHighlight {
	background-color: #474545;
}

#pageTop > ul > li.mobHighlight > a, li.mobHighlight > a > i {
	color: #AAA;
}

#csLogo {
 	float: left;
 	margin: 50px 0 50px 50px;
 	width: 25%;
}

#csLogo img {
    height: 50%;
    width: auto;
}

.mobileSocialMedia {
	background-color: #777;
	display: block;
	margin: 0;
	padding: 10px;
	position: relative;
	z-index: 3;
}

.mobileSocialMedia a {
	padding: 10px;
}

.mobileSocialMedia a i {
	color: #DDD;
	font-size: 24px;
	padding: 2px;
}

.mobileSocialMedia a i:hover {
	color: #3393c1;
}

.mobile {
	display: inline-block;
}

.dropShadow {
    position: relative;
    z-index: 1;
	-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

#wrap {
    border: medium hidden;
    clear: both;
    margin: 0px auto;
    padding: 0px;
}

.box, .workBox {
	padding-bottom: 100%;
	width: 100%;
}
	
header {
	height: 130px;
    margin: 0;
	width: 100%;
}

.name {
    webkit-box-shadow: 1px 3px 5px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 3px 5px 1px rgba(0, 0, 0, 0.15);
	width: 100%;
}

.name h5, .name h4 {
	text-align: center;
    line-height: 1.4em;
}


h4.mobileIntro {
	margin: 0 0 40px 0;
	padding: 15px 0 15px;
}

footer {
	margin: -2px 0 10px 0;
}

footer h4, .contactFooter h4 {
	background-color: #EEE;
	color: #777;
	line-height : 18px;
    margin: 0 0 10px 0;
	padding: 15px 0;
	text-align: center;
	width: 100%;
}

/************ About Page- 1 Tile ************/

.nonMobile {
	display: none;
}

.hello {
	margin: 30px 0 0 0;
	text-align: center;
}

img.mobileMainImage {
	margin: -10px 0 -4px 0;
	padding: 0;
}

.skillsBox {
	float: none;
	margin: 0px auto;
	padding: 35px 0;
	position: relative;
	width: 100%;
}

.skillsInnerBox {
	background-color: #c2d275;
	padding: 15px;
	position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
}

.skillsInnerBox h5 {
	font-size: 0.831rem; /*13/16=0.831*/
	margin: 0;
	padding: 0;
}

.mobileSkillsHeader, .mobileSkillsList {
	color: #FFF;
}

.mobileSkillsHeader {
	display: inline-block;
}

.mobileSkillsList {
	display: block;
	margin: 0 auto 4% auto;
	padding: 0;
}

.bio {
	background: #3393c1;
	border: none;
	clear: both;
	margin: 0px auto;
	padding: 10px;
}

.bio h4 {
	color: #FFF;
	letter-spacing: 1px;
    margin: 0px auto 0;
    padding: 8px 35px;
	text-align: center;
}

.squarePic {
    background-repeat: no-repeat;
	border: none;
	float: none;
    width: 120px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
}

.aboutSite {
	padding: 10px 30px;
}

/************ Process Page - 1 Tile ************/

.color1 {
	background-color: #fa9d69;
}

.color2 {
	background-color: #fac058;
}

.color3 {
	background-color: #efd748;
}

.color4 {
	background-color: #c2d275;
}

.color5 {
	background-color: #a3c592;
}

.color6 {
	background-color: #84b8af;
}

div.caseStudyDescription > h5#color7 {
	color: #fac058;
}


/************ Work Page - 1 Tile ************/
	
.portfolio {
	font-size: 42px;
}

.smallNav ul {
    margin: 80px 0 0;
}

.pCardHolder {
 	padding-bottom: 100%;
	width: 100%;
}

.pCardTitle {
    margin: 3% auto 0;
}

.gridCardPortfolio {
	margin: 0rem;
}


/************ Case Study Pages- 1 Tile ************/

header.csHeader {
	height: 65px;
}

.csImage {
	grid-column: 1 / 4;
}

.csDescription, .csGroupText {
	grid-column: 1 / 4;
}

.csGroupTitle  {
	display: none;
}

.csGroupText {
	padding-top: 0;
}

.csGroupTitle , .csGroupText {
	border: none;
}

.csNav, #csLogo {
	display: none;
}

.floatingNav {
	display: block;
    position: fixed;
	min-width: 40%;
    bottom: 10%;
    right: 0%;
    margin: 0 auto;
    padding: 0;
}

.fa_with_bg {
    position: relative;
	z-index: 2;
}

.fa_with_bg::after{
    position: absolute;
    content: '';
    background: #FFF;
    z-index: -1;
    bottom: 28%;
    right: 22%;
    width: 25px;
    height: 24px;
}

.mobCsSocialMedia {
	display: block;
    position: fixed;
	width: 40%;
    bottom: 2%;
    right: 5%;
    background-color: #777;
    margin: 0 auto;
    padding: 6px 0;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 3px;
    -khtml-border-radius: 20px;
}

.mobCsSocialMedia a {
	padding: 8px 5px;
}

.mobCsSocialMedia a i {
	color: #DDD;
	font-size: 24px;
	padding: 2px 0;
}

.mobCsSocialMedia a i:hover {
	color: #3393c1;
}

.icon-arrow-circle-up {
	position: relative;
}

.csNav {
	position: relative;
    left: -50%;
    text-align: left;
	height: 50px;
}

#csName {
	-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	height: 0;
}

.arrowButtonBox {
    position: relative;
    left: 50%;}

.caseStudyImage {
	border-right: none;
	border-bottom: 1px solid #CCC;
	border-top: 1px solid #CCC;
	padding: 0 0 10px 0;
	width: 100%;
}

.caseStudyDescription {
	padding: 20px;
	width: 90%;
}

.caseStudyHeader {
	height: 90px;
}

.mobileIntro.stdPaddingTop {
	padding-top: 10px;
}

.half img, .third img {
	width: 100%;
}

#hide a {
	display: none;
}

}

	/* Tablet View = 2 Tiles
	================================================== */
	@media only screen and (max-width: 850px) and (min-width: 581px) {

.hello, .mobileIntro, .mainImage, nav, .mobileMainImage, .lgImage, .largePhone {
	display: none;
}

.socialMedia a i {
	font-size: 21px;
}

.box, .workBox {
	padding-bottom: 50%;
	width: 50%;
}
	
.bigNav ul {
    margin: 13px auto;
}
	
.bigNav li {
	display: block;
	margin: 5px 0 5px 0;
	padding: 3px 10px;
}
	
#logo, #csLogo {
	width: 15%;
}

.name {
	width: 40%;
}

.aboutSite {
	margin: 0;
	padding: 10px;
}

footer h4 {
	text-align: center;
}

/************About Page- 2 Tiles ************/

.cardHolderCrate {
	width: 100%;
}

h4.cardInfo {
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1rem;
}

.bio {
	padding: 10px;
}

.aboutSite {
	padding: 10px 20px;
}

.picBox {
    padding: 7% 4%;
}

/************ Portfolio Page- 2 Tiles ************/

.pCardHolder {
 	padding-bottom: 50%;
	width: 50%;
}

/************Contact Page- 2 Tiles ************/
	
.description {
	padding: 30px;
}

/************ Case Study Pages- 2 Tiles ************/

.csImage {
	grid-column: 1 / 4;
}

.csDescription, .csGroupText {
	grid-column: 1 / 4;
}

.csGroupTitle  {
	display: none;
}

.csGroupText {
	padding-top: 0;
}

.csGroupTitle , .csGroupText {
	border: none;
}

.caseStudyImage {
	border-right: none;
	border-bottom: 1px solid #CCC;
	width: 100%;
}

.caseStudyDescription {
	float: left;
	padding: 20px;
	width: 100%;
}

#csDesButton {
	width: 10%;
}

#wrap > div.caseStudyDescription > p {
	padding-right: 12px;
}

.half img, .third img {
	width: 100%;
}

}
	
	/* Small Desktop View = 3 Tiles
	================================================== */
	@media only screen and (max-width: 1050px) and (min-width: 851px) {
		
.hello, .mobileIntro, nav, .tabletMainImage, .mobileMainImage, .lgImage, .largePhone  {
	display: none;
}

.socialMedia a i {
	font-size: 21px;
}

.box, .workBox {
	padding-bottom: 33.3%;
	width: 33.3%;
}

.bigNav ul {
	margin: 24px auto;
}
	
.bigNav li {
	display: block;
	margin: 5px 0 5px 0;
	padding: 3px 10px;
}

/************ About Page- 3 Tiles ************/

.cardHolderCrate {
	width: 100%;
}

h4.cardInfo {
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3rem;
}

.bio, .aboutSite {
	padding: 10px 30px;
}

.picBox {
    padding: 2% 3%;
}

/************ Work Page- 3 Tiles ************/

.pCardHolder {
 	padding-bottom: 50%;
	width: 50%;
}

footer h4 {
	text-align: center;
}

/************ Case Study Pages- 3 Tiles ************/

.csImage {
	grid-column: 1 / 4;
}

.csDescription, .csGroupText {
	grid-column: 1 / 4;
}

.csGroupTitle  {
	display: none;
}

.csGroupText {
	padding-top: 0;
}

.csGroupTitle , .csGroupText {
	border: none;
}

.caseStudyImage {
	padding: 30px 0;
	width: 45%;
}

.caseStudyDescription {
	padding: 20px 5px 0 20px;
	width: 50%;
}

#wrap > div.caseStudyDescription > p {
	padding-right: 12px;
}
	
}
	/* Medium Desktop View = 4 Tiles
	================================================== */
	@media only screen and (max-width: 1290px) and (min-width: 1051px) {

.hello, .mobileIntro, nav, .tabletMainImage, .mobileMainImage, .smImage, a.icon-arrow-circle-up.nix, .mediumPhone {
	display: none;
}

.box, .workBox {
	padding-bottom: 25%;
	width: 25%;
}

/************ About Page- 4 Tiles ************/

.name {
	width: 40%;
}

.bigNav {
	width: 50%;
}

.bigNav li {
	margin: 0 3px;
	padding: 5px;
}

.cardHolderCrate {
	width: 84%;
}

.bio, .aboutSite {
	padding: 10px 80px;
}

.picBox {
    padding: 2% 2% 1%;
}

/************ Case Study Pages- 4 Tiles ************/

.csImage, .csGroupTitle {
	grid-column: 1 / 3;
}

.csDescription, .csGroupText {
	grid-column: 3 / 4;
}


}

	/* Large Desktop View = 5 Tiles
	================================================== */
	@media only screen and (max-width: 5590px) and (min-width: 1291px) {

.hello, .mobileIntro, nav, .tabletMainImage, .mobileMainImage, .smImage, a.icon-arrow-circle-up.nix, .mediumPhone {
	display: none;
}

.box, .workBox {
	padding-bottom: 20%;
	width: 20%;
}

/************ About Page- 5 Tiles ************/

.skillsInnerBox h5 {
	background-color: green;
	color:red;
 	padding: 5% 1% 3%;
 	font-size: 1.4rem;
}

.skillsInnerBox h4 {
	background-color: blue;
	color: aqua;
 	font-size: 1.1em;
 	padding: 0 3% 3% 3%;
 	line-height: 1.6rem;
}

}