/* ******************************************************* */
/* Viewport Size Adjustments */
/* ******************************************************* */

/* ********** awkward desktop sizes for home banner ********** */

@media only screen and (max-width: 1200px) {
    #intro-headline-slide {
		font-size: 3.8rem;
	}
}

@media only screen and (max-width: 1100px) {
	#intro-headline-slide {
		font-size: 3.5rem;
	}
}



/* ******************************************************* */
/* half screen desktop breakpoint */
/* ******************************************************* */

@media only screen and (max-width: 1000px) {
	#intro-headline-slide {
        line-height: 5.2rem;
	}

	/*  contact page only */

	#page-content-contact {
		display: block;
	}

	#form-section {
		border-right: none;
		margin-bottom: 3rem;
	}

	#main-contacts {
		margin-bottom: 3rem;
		padding-top: 3rem;
		border-top: 2px solid #34210C;

		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 2rem;
	}

	.main-content-section div {
		margin-left: 0;
	}

	#google-map {
		grid-column: 1 / 5;
	}
}

@media only screen and (max-width: 930px) {
	#intro-headline-slide {
		font-size: 3.3rem;
        line-height: 5rem;
	}
}



/* ******************************************************* */
/* tablet breakpoint */
/* ******************************************************* */

@media only screen and (max-width: 880px) {
	#header-logo {
		max-width: 12rem;
	}

	#header-brand-name {
		max-width: 50rem;
	}
	
	#intro-headline-slide {
		font-size: 3rem;
		line-height: 4.5rem;
	}
	#page-content {
		grid-gap: 3rem;
	}

	#home-prod-section {
        grid-column: 1 / 4;
    }
    
    #home-about-section {
        grid-column: 1 / 4;
    }
    
	#home-facebook-section {
        grid-row: 3 / 4;
		grid-column: 1 / 4;
    }

	input {
		width: 80%;
	}
}

@media only screen and (max-width: 850px) {
	#intro-headline-slide, .small-headline {
		font-size: 2.8rem;
		line-height: 4.5rem;
	}

	#slideshow-container {
		min-width: 45rem;
	}
}

@media only screen and (max-width: 785px) {
	#intro-headline-slide, .small-headline {
		font-size: 2.5rem;
		line-height: 4rem;
	}

	/* turns off sticky footer - at this size content should always push the footer down */
	body {
		display: block;
	}
}

/* ********** awkward tablet sizes for header, footer and home banner ********** */

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

	#header-logo {
		max-width: 11rem;
	}

	#header-brand-name {
		max-width: 40rem;
	}

	#footer-logo {
		height: 8rem;
	}

	.social img {
		width: 3.5rem;
		height: 3.5rem;
	}
}

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

@media only screen and (max-width: 640px) {
	#header-logo {
		max-width: 10rem;
	}

	#header-brand-name {
		max-width: 30rem;
	}

	#intro-banner-slide {
		padding: 0;
	}

	#intro-headline-slide {
		grid-row: 2 / 3;
        grid-column: 1 / 3;
	}

	#slideshow-container {
		grid-row: 1 / 2;
        grid-column: 1 / 3;
	}
}



/* ******************************************************* */
/* mobile breakpoint */
/* ******************************************************* */

@media only screen and (max-width: 580px) {
	#page-content {	
		display: block; 
	}

	.main-content-section {
        margin-bottom: 3rem;
	}
	
	#footer-nav {
		padding: 0 9rem;
	}

	#footer-nav a {
		margin-right: 5rem;
	}

	#main-contacts {
		grid-template-columns: repeat(3, 1fr);
	}

	#contact-header {
		grid-column: 1 / 4;
	}

	input {
		width: 90%;
	}
}

@media only screen and (max-width: 525px) {
	#footer-nav {
		padding: 0 5rem;
	}
}

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

	#footer-nav {
		padding: 0 4rem;
	}
}

@media only screen and (max-width: 420px) {
	#footer-nav {
		padding: 0 3rem;
	}
}

@media only screen and (max-width: 400px) {
	#header-logo {
		max-width: 9rem;
	}

	#header-brand-name {
		max-width: 25rem;
	}

	#footer-logo {
		height: 6.5rem;
	}

	.social img {
		width: 2.5rem;
		height: 2.5rem;
	}

	#footer-nav {
		padding: 0 2rem;
	}
}

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