/*
* Underdog Design
* Responsive Styling
*
*/

    /* iPad */
    @media only screen and (min-width: 768px) and (max-width: 959px) {
		.desktop {display:none; }
		.tablet {display:inline-block; }
		.mobile {display:none; }
		.desktop-tablet {display:inline-block; }
		.tablet-mobile {display:inline-block; }
		.mobile-small {display:none; }
		.mobile-large {display:none; }
		/* General */
		.add-padding {
			padding-left: 0;
			padding-right: 0;
		}
		.v-align-container {
			position:relative;
		}
		.v-align-content {
			position:absolute;
			top:50%;
			left:0%;
			transform:translateY(-50%);
			width:100%;
		}
		/* Homepage */
		.large-panel {
			min-height: 80vh;
		}
		.line-columns .columns {
			border-right: solid 1px #4d4d4d;
		}
		.line-columns .columns:last-child {
			border-right: none;
		}
		.feature-work a:nth-child(2) {
			background-position: left;
			padding-right: 40px;
		}
		.feature-work a:nth-child(3) {
			background-position: right;
			padding-left: 40px;
		}
		.feature-work a:nth-child(4) {
			background-position: left;
			padding-right: 40px;
		}
		.carousel-container {
			padding-top: 2em;
			padding-bottom: 2em;
		}
		/* Navigation */
		.navigation .three.columns {
			text-align: left;
		}
		.navigation .nine.columns {
			text-align: right;
		}
		/* Showcase */
		.heading-block {
			padding-top: 6em;
		}
		.heading-block::before {
			top: 9.5em;
		}
		
    }


    /* Small Mobile */
    @media only screen and (max-width: 767px) {
     	.desktop {display:none; }
		.tablet {display:none; }
		.mobile {display:inline-block; }
		.desktop-tablet {display:none; }
		.tablet-mobile {display:inline-block; }
		.mobile-small {display:inline-block; }
		.mobile-large {display:none; }
		/* General */
		.add-padding {
			padding-left: 0;
			padding-right: 0;
		}
		.add-padding {padding: 1.5rem;}
		.add-padding-top {padding-top: 1.5rem;}
		.add-padding-bottom {padding-bottom: 1.5rem;}
		.v-align-container {
			padding-top:40px;
			padding-bottom:40px;
		}
		.pad-box {
			padding-left: 0;
			padding-right: 0;
		}
		.feature-work .pad-box {
			padding-left: 30px;
			padding-right: 30px;
		}
		/* Homepage */
		.line-columns .columns {
			border-bottom: solid 1px #4d4d4d;
			padding-top: 30px;
			padding-bottom: 30px;
		}
		.line-columns .columns:last-child {
			border-bottom: none;
		}
		.clients .columns {
			width: 48%;
			margin-left: 4%;
		}
		.clients .columns:nth-child(even) {
			margin-left: 0; 
		}
		.carousel-container {
			padding-top: 1.5em;
			padding-bottom: 1.5em;
		}
		.carousel-cell {
			padding: 1em 0.5em 1em;
		}
		.carousel-logo {
			margin: 8px 0 15px;
		}
		/* Navigation */
		.navigation .three.columns {
			text-align: center;
		}
		.navigation .nine.columns {
			text-align: center;
		}
		/* Showcase */
		.heading-block {
			padding-top: 3em;
		}
		.heading-block::before {
			top: 6.5em;
		}
		.showcase-content {
			display: flex;
			flex-direction: column-reverse;
		}
	}


    /* Large Mobile */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .desktop {display:none; }
		.tablet {display:none; }
		.mobile {display:inline-block; }
		.desktop-tablet {display:none; }
		.tablet-mobile {display:inline-block; }
		.mobile-small {display:none; }
		.mobile-large {display:inline-block; }
		/* General */
		.add-padding {
			padding-left: 0;
			padding-right: 0;
		}
		.add-padding {padding: 1.5rem;}
		.add-padding-top {padding-top: 1.5rem;}
		.add-padding-bottom {padding-bottom: 1.5rem;}
		.v-align-container {
			padding-top:40px;
			padding-bottom:40px;
		}
		.pad-box {
			padding-left: 0;
			padding-right: 0;
		}
		.feature-work .pad-box {
			padding-left: 30px;
			padding-right: 30px;
		}
		/* Homepage */
		.line-columns .columns {
			border-bottom: solid 1px #4d4d4d;
			padding-top: 30px;
			padding-bottom: 30px;
		}
		.line-columns .columns:last-child {
			border-bottom: none;
		}
		/* Navigation */
		.navigation .three.columns {
			text-align: center;
		}
		.navigation .nine.columns {
			text-align: center;
		}
		.carousel-container {
			padding-top: 1.5em;
			padding-bottom: 1.5em;
		}
		.carousel-cell {
			padding: 1em 0.5em 1em;
		}
		.carousel-logo {
			margin: 8px 0 15px;
		}
		/* Showcase */
		.heading-block {
			padding-top: 3em;
		}
		.heading-block::before {
			top: 6.5em;
		}
		.showcase-content {
			display: flex;
			flex-direction: column-reverse;
		}
		
    }
	
	
    /* Desktop */
    @media only screen and (min-width: 960px) {
		.desktop {display:inline-block; }
		.tablet {display:none; }
		.mobile {display:none; }
		.desktop-tablet {display:inline-block; }
		.tablet-mobile {display:none; }
		.mobile-small {display:none; }
		.mobile-large {display:none; }
		/* General */
		.v-align-container {
			position:relative;
		}
		.v-align-content {
			position:absolute;
			top:50%;
			left:0%;
			transform:translateY(-50%);
			width:100%;
		}
		.reveal-text, .reveal-text2 {
			transition: opacity 0.5s linear, width step-start;
			display: inline-block;
		}
		.reveal-text.hidden, .reveal-text2.hidden {
			opacity: 0;
			height: 0;
			width: 0;
			overflow: hidden;
		}
		/* Homepage */
		.large-panel {
			min-height: 80vh;
		}
		.line-columns .columns {
			border-right: solid 1px #4d4d4d;
		}
		.line-columns .columns:last-child {
			border-right: none;
		}
		.feature-work {
			background-color: inherit;
		}
		.feature-work .showcase-link:nth-child(2) {
			background-position: left;
			background-image: url("../images/featured-work-anzac.png");
			padding-right: 40px;
		}
		.feature-work .showcase-link:nth-child(3) {
			background-position: right;
			background-image: url("../images/featured-work-drive.png");
			padding-left: 40px;
		}
		.feature-work .showcase-link:nth-child(4) {
			background-position: left;
			background-image: url("../images/featured-work-kewpie.png");
			padding-right: 40px;
		}
		.carousel-container {
			padding-top: 2em;
			padding-bottom: 2em;
		}
		/* Navigation */
		.navigation .three.columns {
			text-align: left;
		}
		.navigation .nine.columns {
			text-align: right;
		}
		/* Showcase */
		.heading-block {
			padding-top: 6em;
		}
		.heading-block::before {
			top: 9.5em;
		}
		
	}