@Theme Name: TYRO Construction
@Description: This site was built by Central States Media. For more information about the site or this custom WordPress theme, you can contact Central States Media at: info@centralstatesmedia.com or call us at: 309-693-2345.
@Author: Central States Media
@Author URI: http://www.centralstatesmedia.com/
@Version: 1.0
@Date: June, 2022
@charset "utf-8";

/* CSS Document */

/* ==========================================================================
   FONTS
   ========================================================================== */
	@import url('https://use.typekit.net/did5mgb.css');

/* ==========================================================================
   COLOR VARIABLES
   ========================================================================== */
	:root {
		--blue: #2d3a48;
		--blue-overlay: rgba(45,58,72,.65);
		--yellow: #febc06;
		--ltgrey: #f6f6f6;
		--grey: #dddddd;
		--drkgrey: #444444;
		--shadow: rgba(35,35,35,.6);
		--headshadow:  rgba(35,35,35,.9);
	}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
	@keyframes bounce {
		0% {transform: translateY(0%);}
		50% {transform: translateY(7.5%);}
		100% {transform: translateY(0%);}
	}

/* ==========================================================================
   BASE ELEMENTS (Headings, Buttons, Links, Font)
   ========================================================================== */
	/*//Body Sizing + Font//*/
		* {box-sizing: border-box;}

		body {
			width: 100%;
			margin: 0;
			padding: 0;
			font-size: 16px;
			font-family: 'Open Sans', sans-serif;
			line-height: 1.3;
			color: var(--drkgrey);
		}

	/*//Headings//*/
		h1, h2, h3 {text-transform: uppercase; font-family: 'kallisto';}
		h4, h5, h6 {text-transform: capitalize; font-family: 'kallisto';}
		h1 {font-size: 2.25em; color: var(--blue); margin-bottom: 0px; padding-bottom: 15px;}
		h2 {font-size: 2.15em; line-height: 1; margin-bottom: 0px; padding-bottom: 15px; color: var(--yellow);}
		h3 {font-size: 1.8em; color: var(--grey); margin-bottom: 0px; padding-bottom: 15px;}
		h4 {font-size: 1.6em; color: var(--drkgrey); margin-bottom: 0px; padding-bottom: 5px;}
		h5 {font-size: 1.3em; color: var(--yellow); margin-bottom: 0px; padding-bottom: 5px;}
		h6 {font-size: 1.15em; color: var(--blue); margin-bottom: 0px; padding-bottom: 5px;}

	/*//General Link//*/
		a, a:link, a:visited, a:active {text-decoration: none; color: var(--blue); font-weight: 600;}
		a:hover {color: var(--yellow); transition: .5s;}

	/*//General buttons//*/
		.button, .w-button {
			display: inline-block;
			position: relative;
			font-family: 'Kallisto', sans-serif;
			padding: 5px 0px 5px 10px;
			border-radius: 3px;
			font-weight: 600;
		}

		.button {border: solid var(--blue) 3px; color: var(--blue) !important;}
		.w-button {border: solid white 3px; color: white !important;}

		.button::after, .w-button::after, .wp-block-button__link::after {
			content: "";
			display: inline-block;
			width: 15px;
			height: 15px;
			position: relative;
			left: -2.5px;
			bottom: 1px;
			opacity: 0%;
			background-size: contain;
			vertical-align: middle;
		}

		.button::after {background: url("images/icon-arrow.svg") no-repeat center;}
		.w-button::after {background: url("images/icon-arrow-white.svg") no-repeat center;}
		.button:hover::after, .w-button:hover::after {left: 7.5px; opacity: 100%; transition: .5s;}
		.button:hover, .w-button:hover {padding-right: 20px; transition: .5s;}

	/*//Horizontal Rule//*/
		hr {border: none; width: 100%; height: 3px;}

	/*//Unordered List//*/
		.content ul, #home-content ul {list-style: none; padding: 0px 0px 0px 40px;}
		.content ul li, #home-content ul li {position: relative; text-transform: uppercase; color: var(--blue); line-height: 1.15; padding-top: 4px;}

		.content ul li::before, #home-content ul li::before {
			display: inline;
			content: "\2022";
			padding-right: 5px;
			position: absolute;
			left: -20px;
			font-weight: 600;
		}

	/*//Ordered List//*/
		.content ol, #home-content ol {list-style: none; padding: 0px 0px 0px 40px; counter-reset: li;}
		.content ol li, #home-content ol li {position: relative; text-transform: uppercase; color: var(--blue); line-height: 1.15; padding-top: 4px; counter-increment: li;}

		.content ol li::before, #home-content ol li::before {
			display: inline;
			content: counter(li)".";
			padding-right: 5px;
			position: absolute;
			left: -20px;
			font-weight: 600;
		}

		.content ul li::before, #home-content ul li::before, .content ol li::before, #home-content ol li::before  {color: var(--yellow);}
		.content ul li li::before, #home-content ul li li::before, .content ol li li::before, #home-content ol li li::before {color: var(--drkgrey);}

	/*//Forms//*/
	.content input[type=text] {font-family: "Kallisto", "Open Sans", sans-serif;}
	.content input[type=text]:hover {border: solid 2px var(--blue); transition: .5s;}
	.content input[type=text] > p {color: var(--blue);}

	.content input[type=button], input[type=submit], input[type=reset], .wp-block-button__link, .wp-block-button__link:active, .wp-block-button__link:visited {
		display: inline-block;
		position: relative;
		font-family: 'Kallisto', sans-serif;
		padding: 5px 10px 5px 10px !important;
		border-radius: 3px !important;
		font-weight: 600;
		border: solid var(--blue) 3px !important;
		color: var(--blue) !important;
		background-color: var(--ltgrey) !important;
	}
	.content input[type=button]:hover, .content input[type=submit]:hover, .content input[type=reset]:hover, .wp-block-button__link:hover {color: white !important; background-color: var(--blue) !important; transition: .5s;
		padding: 5px 10px 5px 10px !important;}

/* ==========================================================================
   HEADER (Containter, Header Logo, Nav, Menu Icon, Search Icon, Search Field)
   ========================================================================== */
	/*//Header Container//*/
		header {
			height: 100px;
			position: sticky;
			top: 0;
			z-index: 1000;
			padding: 0px 10%;
			background-color: white;
			display: grid;
			grid: 1fr / 200px 1fr;
			filter: drop-shadow(0px 5px 8px var(--shadow));
		}

		header.small {height: 50px !important; padding: 0px 10%;}	

	/*//Header Logo//*/
		#header-logo {
			width: 100%;
			height: 90px;
			margin: 5px auto;
			display: block;
			background: url("images/TYROConstruction-Logo.svg") no-repeat center left;
			background-size: contain;
			grid: 1 / 1 / span 1 / span 1;
		}

		#header-logo:hover {opacity: .5; transition: .75s;}
		header.small #header-logo {height: 45px; margin: 2.5px 0px;}

	/*//Navigation//*/
		nav {
			grid: 1 / 2 / span 1 / span 1;
			width: 100%;
			padding-right: 0px;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			height: 100%;
		}

	/*//Navigation ==> First Level//*/
		nav ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: row;
		}

		nav ul li{position: relative; height: auto;}

		nav ul li a {
			display: block;
			padding: 10px 20px;
			text-decoration: none;
			text-align: center;
			width: auto;
			text-transform: uppercase;
			font-weight: 600;
			font-size: .8;
			font-family: 'Kallisto', sans-serif;
		}

		nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:hover, nav ul li a:active {color: var(--blue);}
		nav ul li a:hover {color: var(--yellow); transition: .5s;}

	/*//Navigation ==> Second Level (Appear on Hover)//*/
		nav ul ul{
			display:none;
			position: absolute;
			background-color: var(--ltgrey);
			left: 50%;
			transform: translateX(-50%);
			top: 100%;
			box-shadow: 0 0 5px 0 rgba(0,0,0,0.6);
			min-width: 175px;
			width: 100%;
			padding: 5px 0px;
			z-index: 1000;
			border-top: solid 4px var(--yellow);
		}

		nav ul ul li a{
			display: block;
			padding: 10px;
			width: auto;
			font-size: .9em;
			font-weight: 400;
			text-align: center;
			text-transform: capitalize;
			border-bottom: 2px solid var(--grey); margin: 0px 20px;
		}

		nav ul ul li a, nav ul ul li a:link, nav ul ul li a:visited, nav ul ul li a:hover, nav ul ul li a:active {color: var(--drkgrey) !important;}
		nav ul ul li a:hover{color: var(--yellow) !important; transition: .5s;}
		nav ul ul li a:hover {border-bottom: 2px solid var(--blue); transition: 1s;}
		nav ul ul li:last-of-type a {border: none !important;}

	/*//Navigation ==> Show Second Level on Hover//*/
		nav ul li:hover > ul {display: block;}

	/*//Navigation ==> Third Level//*/
		nav ul ul ul{position: absolute; left:100%; top:-5px;}
		nav ul ul ul::before {display: none;}

	/*//Navigation ==> Hover Elements//*/
		nav li:hover > a,d
		nav a:focus {color: var(--grey);}

	/*//Navigation ==> Styling Current Rendered Page//*/
		nav .current-menu-item > a,
		nav .current-menu-ancestor > a,
		nav .current_page_item > a,
		nav .current_page_ancestor > a {
		}

	/*//Menu Icons ==> Hamburger//*/
		.m-menu {
			display: none;
			height: 20px;
			width: 20px;
			background: url("images/icon-menu.svg") no-repeat center;
			background-size: contain;
		}

		.small .m-menu {height: 20px;width: 20px;}

	/*//Menu Icons ==> Search//*/
		.m-search {
			width: 20px;
			height: 20px;
			background: url("images/icon-search.svg") no-repeat center;
			margin-left: 10px;
		}

		.m-search:hover, .m-menu:hover {cursor: pointer;}

	/*//Menu Icons ==> Search Bar//*/
		.search-wrap {
			top: 100%;
			width: 100%;
			height: auto;
			position: absolute;
			display: none;
			z-index: 1;
			background-color: var(--drkgrey);
			padding: 10px 10%;
		}

		.search {
			display: flex;
			flex-direction: row;
			flex-wrap: none;
			justify-content: flex-end;
			align-items: center;
			color: white;
			padding-left: 15px;
			top: 100%;
			height: 100%;
		}

		.search form {Width: 100%; display: flex; justify-content: flex-end;}
		.search label {padding-right: 10px;}
		.search input {border: none; font-family: 'kallisto', 'open sans', sans-serif; text-transform: uppercase;}
		.search #s {border: none; background-color: var(--ltgrey); color: var(--blue); padding: 5px; width: 35%;   margin-right: 20px;}
		#searchbtn {border: none; padding: 5px; background-color: var(--ltgrey); color: var(--blue);}
		#searchbtn:hover {background-color: var(--ltgrey); opacity: .5; transition: .5s; color: var(--drkgrey) !important; cursor: pointer;}
		#searchform {width: 100%; height: auto;}
		.search-close {color: white !important;}
		.search-close:hover {opacity: .5; transition: .5s; cursor: pointer;}

	/*//Menu Icons ==> Search Page//*/
		.search-page {padding: 75px 10% 50px 10%; background-color: white;}

	/*//Extra Menu//*/
		#menu-wrap {
			display: none;
			position: absolute;
			z-index: 1500;
			background-color: rgba(0, 0, 0, .35);
			width: 100%;
			height: 100vh;
			top: 0px;
			right: 0px;
			margin: 0px;
			padding: 0px;
		}

		#menu-content {
			position: absolute;
			right: 0px;
			top: 0px;
			height: 100%;
			background-color: var(--ltgrey);;
			width: 75%;
			padding: 25px 10vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-family: 'Kallisto', 'Open Sans', sans-serif;
		}

		#menu-content .close {color: var(--blue); margin: 25px 0px; text-transform: uppercase;}

		#menu-content .close::before {
			content: "x";
			display: inline-block;
			font-size: 1.25em;
			padding-right: 10px;
		}

		.close:hover {color: var(--yellow) !important; cursor: pointer; transition: .5s;}

	/*//Extra Menu ==> First Level//*/

		#menu-content ul {width: 100%; margin: 0px; padding: 0px;}
		#menu-content ul li {
			width: 100%;
			position: relative;
			font-size: 1.5em;
			font-weight: 600;
			text-transform: uppercase;
			list-style: none;
			padding: 5px 0px;
			margin-bottom: 0px;
		}

	/*//Extra Menu ==> Second Level//*/
		#menu-content ul ul {display:none; position: relative; margin: 10px 0px 10px 2.5vw; padding: 0px}

		#menu-content ul ul li {
			font-size: .85em;
			font-weight: 400;
			padding: 5px 0px;
			margin: 0px;
			border: none;
		}

		#menu-content ul ul li a:hover {padding-left: 10px; transition: .5s;}
		#menu-content ul ul li a {text-transform: capitalize; letter-spacing: .75px; position: relative;}
		#menu-content ul ul li a::before {
			content: "";
			display: inline-block;
			width: 15px;
			height: 15px;
			position: relative;
			bottom: 0px;
			left: -5px;
			opacity: 100%;
			background: url("images/icon-arrow.svg") no-repeat center;
			background-size: contain;
			vertical-align: middle;
		}

	/*//Extra Menu ==> Show Second Level on Hover//*/
		#menu-content ul li:hover > ul {display: block;}

	/*//Extra Menu ==> Hover Elements//*/
		nav li:hover > a,d
		nav a:focus {color: var(--grey);}

	/*//Extra Menu ==> Styling Current Rendered Page//*/
		nav .current-menu-item > a,
		nav .current-menu-ancestor > a,
		nav .current_page_item > a,
		nav .current_page_ancestor > a {
			color: var(--yellow);
		}

	/*//Extra Menu ==> Logo + Social//*/
		.menu-socials {display: grid; grid: 1fr / auto auto; border-top: 3px solid var(--drkgrey); margin: 50px 0px 25px 0px;}
		.menu-socials a:hover {opacity: .5; transition: .5s;}

		.menu-socials .logo {
			grid-area: 1 / 1 / span 1 / span 1;
			width: 100%;
			height: 65px;
			margin: 15px 10vw 15px 0px;
			display: block;
			background: url("images/TYROConstruction-Logo.svg") no-repeat center left;
			background-size: contain;
			/*border-right: 3px solid var(--drkgrey);*/
		}

		.menu-socials .social-wrap {justify-content: flex-start; align-items: center; margin-top: 10px 10vw 0px 0px; grid-area: 1 / 2 / span 1 / span 1;}
		.menu-socials .social-wrap a {justify-content: flex-start !important; margin-right: 25px;}
		.menu-socials .social-wrap a:last-of-type {margin-right: 0px;}
		.menu-socials .facebook {background: url("images/icon-facebook.svg") no-repeat center;}
		.menu-socials .instagram {background: url("images/icon-instagram.svg") no-repeat center;}
		.menu-socials .twitter {background: url("images/icon-twitter.svg") no-repeat center;}

/* ==========================================================================
   Slider
   ========================================================================== */
		.slider {
			width: 100%;
			height: 600px;
			min-height: 600px;
			position: relative;
			top: 0px;
			margin-top: 0px !important;
		}

		.slider img {
			width: 100%;
			height: 600px;
			object-fit: cover;
			object-position: center;
			z-index: -1;
			min-height: 600px;
		}

	/*//Slider ==> Caption + Scroll Link//*/
   ========================================================================== */
		.slider {
			width: 100%;
			height: 600px;
			position: relative;
			top: 0px;
			margin-top: 0px !important;
		}

		.slider img {
			width: 100%;
			height: 600px;
			object-fit: cover;
			object-position: center;
			z-index: -1;
		}

	/*//Slider ==> Caption + Scroll Link//*/

		.slider .caption-wrap {
			z-index: 1;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: white;
			display: flex !important;
			flex-direction: column !important;
			justify-content: center !important;
			align-items: flex-start !important;
			padding: 0px 12% !important;
			background: rgb(45,58,72) !important;
			background: -webkit-linear-gradient(left, rgba(45,58,72,1) 10%, rgba(45,58,72,0) 100%) !important;
			background: -o-linear-gradient(left, rgba(45,58,72,1) 10%, rgba(45,58,72,0) 100% !important);
			background: linear-gradient(to right, rgba(45,58,72,1) 10%, rgba(45,58,72,0) 100% !important);
			border-bottom: solid 20px var(--yellow);
			font-size: 1.15em;
		}

		.slider .caption-wrap h2 {margin: 5px 0px !important; padding: 0px; color: white !important; line-height: 1.2em;}
		.slider .caption-wrap h5 {margin: 5px 0px 50px 0px !important; padding: 0px; color: white !important; line-height: 1.2em;}

/* ==========================================================================
   FEATURED IMAGE
   ========================================================================== */
		.featured {width: 100%; height: 400px; position: relative;}

		.featured img {
			width: 100%;
			height: 400px;
			object-fit: cover;
			object-position: center;
			position: fixed;
			z-index: -1000;
		}

		.featured::before {
			content: '';
			display: block;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 400px;
			background-color: var(--blue-overlay);
			z-index: 100;
			border-bottom: solid 20px var(--yellow);
		}

/* ==========================================================================
   HOMEPAGE CONTENT
   ========================================================================== */
		.home {width: 100%;}

		.content {padding: 75px 0px 50px 0px; background-color: white !important; z-index: 1000;}
		.padded {padding: 0px 10%;}

		#intro {
			display: grid;
			grid: 1fr / 1fr 1fr;
			grid-column-gap: 5vw;
			height: auto;
			padding: 0px 10% 75px 10%;
		}

		.intro-img {width: 100%; height: 100%; grid-area: 1 / 1 / span 1 / span 1; box-shadow: 5px 5px 15px var(--drkgrey);}	
		.intro-img img {object-fit: cover; object-position: center; width: 100%; height: 100%;}

		.intro-text {margin: auto 0px;}

/* ==========================================================================
   INTERNAL CONTENT
   ========================================================================== */

		#solutions {
			padding: 0px 10% 0px;
			text-align: center;
		}

		.solutions-wrap {
			display: flex; flex-direction: row; flex-wrap: wrap;
			justify-content: center;
			align-content: center;
			margin-top: 50px;
		}

		.solution-button {
			width: 30%;
			height: 100px;
			display: grid;
			grid: 1fr / 1fr 2fr;
			background-color: var(--blue);
			margin: 20px 10px;
			box-shadow: 5px 5px 15px var(--drkgrey);
			position: relative;
		}

		.solution-button:hover {background-color: var(--drkgrey); transition: .5s;}

		.solution-button img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: left;
			grid-area: 1 / 1 / span 1 / span 1;
			clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
			position: relative;
			z-index: 1;
		}

		.solution-button:hover img {opacity: .5; transition: .5s;}

		.solution-button::after {
				content: "";
				display: block;
				width: 50px;
				height: 50px;
				position: absolute;
				left: 10px;
				bottom: 50%;
				transform: translateY(50%);
				background: url("images/icon-arrow-white.svg") no-repeat center;
				background-size: contain;
				vertical-align: middle;
				opacity: 0%;
				z-index: 1000;
		}

		.solution-button:hover::after {left: 20px; opacity: 100%; transition: .75s;}

		.solution-title {
			grid-area: 1 / 2 / span 1 / span 1;
			position: relative;
			width: 100%;
			height: 100%;
			color: white !important;
			font-family: 'kallisto', sans-serif;
			text-align: center;
			font-size: 1.05em;
			text-transform: uppercase;
			outline: solid 3px white;
			outline-offset: -17.5px;
			padding-top: 10px;
		}

		.solution-title p {vertical-align: middle; justify-content: center;}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
		#testimonials {
			width: 100%;
			height: 400px;
			display: grid;
			grid: 1fr / 1fr 1fr;
			grid-column-gap: 5vw;
			padding: 0px 10%;
			background-color: rgba(51, 51, 51, .65);
			-moz-box-shadow: inset 0 0 25px #000000;
			-webkit-box-shadow: inset 0 0 25px #000000;
			box-shadow: inset 0 0 25px #000000;
			position: relative;
			margin-top: 60px;
		}

		#testimonials::before {
			content: '';
			display: block;
			position: absolute;
			top: 0px;
			left: 0px;
			background: url("images/bkgd-testimonials.jpg") no-repeat center;
			width: 100%;
			height: 100%;
			z-index: -100;
			background-attachment: fixed;
		}

		#testimonials .text-wrap {
			grid-area: 1 / 1 / span 1 / span 1;
			justify-content: center;
			z-index: 100;
			margin: auto 0px;
			color: white !important;
		}

		.home-callouts {
			grid-area: 1 / 2 / span 1 / span 1;
			display: grid;
			grid: auto / 1fr 1fr;
			grid-column-gap: 5vw;
			width: 100%;
			height: 100%;
		}

		.callout-wrap {
			width: 100%;
			height: 100%;
			background-color: var(--yellow);
			box-shadow: 5px 5px 15px var(--drkgrey);
			position: relative; top: -65px; text-align: center;
			padding: 15px;
		}

		.callout-wrap:hover {cursor: pointer; background-color: var(--drkgrey); transition: .5s; border-radius: 10px;}
		.callout-wrap:hover .button, #testimonials .callout-wrap:hover .w-button {padding-right: 15px; transition: .35s;}
		.callout-wrap:hover .button::after, #testimonials .callout-wrap:hover .w-button::after {left: 10px; transition: .5s; opacity: 100%;}
		.callout-wrap:hover .icon {animation: bounce; animation-duration: 1.5s; animation-iteration-count: infinite; animation-delay: .5s; animation-timing-function: ease-in-out;}

		#testimonials h2, #testimonials h6 {color: white;}
		#testimonials hr {
			width: 33%;
			height: 5px;
			background-color:  white;
			border: none;
			margin-bottom: 25px;
		}

		.callout-wrap .icon {width: 100%; height: 150px;}
		#callout-about {grid: 1 / 1 / span 1 / span 1;}
		#callout-about .icon {background: url("images/icon-about.svg") no-repeat center; background-size: contain;}
		#callout-expertise {grid: 1 / 2 / span 1 / span 1;}
		#callout-expertise .icon {background: url("images/icon-expertise.svg") no-repeat center; background-size: contain;}

/* ==========================================================================
   PARTNERS
   ========================================================================== */
		#partners {padding: 50px 20%; text-align: center;}

		.partner-logos {
			width: 100%;
			height: 100px;
			margin: 50px 0px;
			position: relative;
		}

		.partner-logos div {width: auto; width: 80%; height: 100px; margin: 0px auto;}
		.partner-logos img {width: 100%; height: 100%;object-fit: contain; object-position: center; filter: grayscale(100%) contrast(100%);}
		.partner-logos a:hover img {filter: grayscale(0%) contrast(100%) !important; transition: .5s;}

		.previous-arrow, .next-arrow {
			position: absolute;
			bottom: 0%;
			background: url("images/icon-arrow.svg") no-repeat center;
			height: 30px;
			width: 30px;
		}

		.previous-arrow {right: 95%; transform: translateY(-50%) rotate(180deg);}
		.next-arrow {left: 95%; transform: translateY(-50%);}
		.previous-arrow:hover , .next-arrow:hover {opacity: 50%; transition: .5s; cursor: pointer; height: 30px; width: 27.5px;}

/* ==========================================================================
   CONTACT
   ========================================================================== */
		.contact-wrap {
			width: 100%;
			height: 400px;
			padding: 0px 65% 0px 10%;
			background-color: rgba(51, 51, 51, .65);
			-moz-box-shadow: inset 0 0 25px #000000;
			-webkit-box-shadow: inset 0 0 25px #000000;
			box-shadow: inset 0 0 25px #000000;
			position: relative;
			color: white !important;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.contact-wrap::before {
			content: '';
			display: block;
			position: absolute;
			top: 0px;
			left: 0px;
			background: url("images/bkgd-contact.jpg") no-repeat center;
			width: 100%;
			height: 100%;
			z-index: -100;
			background-attachment: fixed;
		}

		.contact-wrap h2 {color: white !important;}
		.contact-wrap .w-button {margin-top: 20px;}

/* ==========================================================================
   FOOTER WRAP
   ========================================================================== */
		.footer-wrap {
			background-color: var(--blue);
			color: white !important;
			display: grid;
			grid: 1fr / 1fr 1fr 1fr;
			grid-column-gap:  3vw;
			padding: 50px 10% 75px 10%;
			z-index: 100;
		}

		.footer-wrap a, .footer-wrap a:link, .footer-wrap a:visited, .footer-wrap a:active {text-decoration: none; color: white !important;}
		.footer-wrap a:hover {opacity: .5 !important; transition: .5s;}
		.footer-wrap h6 {color: white !important; margin-bottom: 5px;}

		.quick-links {grid-area: 1 / 1 / span 1 / span 1;}
		.quick-links ul {list-style: none; padding: 0px 0px 0px 0px;}
		.logo-socials {grid-area: 1 / 2 / span 1 / span 1; margin-top: 10px; text-align: center;}

		#footer-logo {
			width: 100%;
			height: 75px;
			margin-top: 10px;
			margin-bottom: 10px;
			display: block;
			background: url("images/TYROConstruction-LogoW.svg") no-repeat center;
			background-size: contain;
			grid: 1 / 1 / span 1 / span 1;
		}

		.social-wrap {display: flex; flex-direction: row; justify-content: space-around; align-content: center; padding: 0px 5vw;}
		.social-wrap a {width: 25px; height: 25px; margin: 15px 0px 25px 0px; background-size: contain;}
		.footer-wrap .social-wrap .facebook {background: url("images/icon-facebook-w.svg") no-repeat center;}
		.footer-wrap .social-wrap .instagram {background: url("images/icon-instagram-w.svg") no-repeat center;}
		.footer-wrap .social-wrap .twitter {background: url("images/icon-twitter-w.svg") no-repeat center;}
		.foot-contact {grid-area: 1 / 3 / span 1 / span 1; text-align: right;}
		.copyright {font-size: .85em;}
.content ul.slick-dots li::before {display: none;}
	
/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
	/*//LARGE DEVICES (1200PX - 992PX)//*/
	@media only screen and (max-width: 1200px) {
		
			body {font-size: 14px;}
			header {padding: 0px 5%;}
			header.small {padding: 0px 5%;}	
		
		/*//Navigation ==> First Level//*/
			nav ul li{position: relative; height: auto;}
			nav ul li a{padding: 5px 10px;}
		
		/*//Menu Icons ==> Search Bar//*/
			.search-wrap {padding: 10px 5%;}
		
		/*//Menu Icons ==> Search Page//*/
			.search-page {padding: 75px 5% 50px 5%;}

		/*//Slider ==> Caption + Scroll Link//*/
			.slider .caption-wrap {padding: 0px 7%;}

		/*//HOME//*/
			#intro {padding: 0px 5% 50px 5%;}
			.padded {padding: 0px 5%;}

		/*//INSIDE//*/
			#solutions {padding: 0px 5%;}
			.solutions-wrap {margin-top: 25px;}
			.solution-button {width: 30%; height: 100px; margin: 10px;}
			.solution-title {padding-top: 15px;}

		/*//TESTIMONIALS//*/
			#testimonials {height: 300px; padding: 0px 5%;}
			#testimonials .callout-wrap {top: -50px; padding: 10px;}
			#testimonials hr {margin-bottom: 15px;}
			#testimonials .callout-wrap .icon {height: 100px;}

		/*//CONTACT//*/
			.contact-wrap {height: 300px; padding: 0px 65% 0px 5%;}

		/*//FOOTER//*/
			.footer-wrap {padding: 25px 5%;}
			#footer-logo {height: 50px;}
	}

	/*//LAPTOPS (992PX - 768PX)//*/
	@media only screen and (max-width: 1000px) {
		/*//HEADER//*/
			header {height: 125px; padding: 0px 10%;}
			header.small {height: 60px; padding: 0px 10%;}	
			#header-logo {height: 105px;margin: 10px auto;}
			header.small #header-logo {height: 50px; margin: 0px 0px;}

		/*//NAV//*/
			nav ul {display: none;}
			.m-menu {display: block; margin-right: 15px;}
			.m-search, .m-menu {width: 45px; height: 45px;}

		/*//Menu Icons ==> Search Bar//*/
			.search-wrap {padding: 10px 10%;}
			.search #s {width: 100%;}
		
		/*//Menu Icons ==> Search Page//*/
			.search-page {padding: 75px 10% 50px 10%;}

		/*//SLIDER//*/
			.slider, .slider img {height: 400px; min-height:400px;}
			.slider .caption-wrap {padding: 0px 12%;}

		/*//FEAT IMG//*/
			.featured, .featured::before, .featured img {height: 300px;}

		/*//HOME//*/
			#intro {grid: 375px 1fr / 1fr; grid-column-gap: 0vw; grid-row-gap: 25px; padding: 0px 10% 50px 10%;}
			.intro-text {grid-area: 2 / 1 / span 1 / span 1;}
			.padded {padding: 0px 10%;}

		/*//INSIDE//*/
			#expertise {padding: 0px 10% 50px 10%;}
			#solutions {padding: 0px 10%;}
			.solutions-wrap {margin-top: 25px;}
			.solution-button {width: 25%; height: 100px; margin: 10px;}
			.solution-title {padding-top: 15px;}

			#expertise {grid: 375px 1fr / 1fr; grid-column-gap: 0vw; grid-row-gap: 25px; padding: 25px 10% 50px 10%;}
			.expertise-img {grid-area: 1 / 1 / span 1 / span 1;}
			.intro-text {grid-area: 2 / 1 / span 1 / span 1;}

		/*//INTERNAL CONTENT//*/
			#expertise {grid: 375px 1fr / 1fr; grid-column-gap: 0vw; grid-row-gap: 25px; padding: 0px 10% 0px 10%;}
			.expertise-img {grid-area: 1 / 1 / span 1 / span 1;}
			.expertise-text {grid-area: 2 / 1 / span 1 / span 1;}

			#solutions {padding: 25px 10% 0px 10%;}
			.solution-button {width: 45%;}
			.solution-title {padding-top: 15px;}

		/*//TESTIMONIALS//*/
			#testimonials {height: 300px; text-align: center;}
			#testimonials .text-wrap {padding-top: 25px;}
			#testimonials .callout-wrap {position: relative; top: -50px;}
			#testimonials hr {margin-bottom: 15px;}
			#testimonials .callout-wrap .icon {height: 75px;}

		/*//CONTACT//*/
			.contact-wrap {height: 300px; padding: 0px 55% 0px 10%;}

		/*//FOOTER//*/
			.footer-wrap {padding: 25px 10%;}
			.footer-wrap .social-wrap {padding: 0px 3vw;}
	}

	/*//TABLETS (768PX - 576PX)//*/
	@media only screen and (max-width: 800px) {
		/*//NAV//*/	
			.m-search, .m-menu {width: 35px; height: 35px;}
			#menu-content {width: 100%;}

		/*//SLIDER//*/
		
			.slider .caption-wrap {
				align-items: center !important;
				text-align: center !important;
				padding: 0px 12% 50px 12% !important;
				justify-content: flex-end !important;
				background: rgb(45,58,72) !important;
				background: -webkit-linear-gradient(bottom, rgba(45,58,72,1) 25%, rgba(45,58,72,0) 100%) !important;
				background: -o-linear-gradient(bottom, rgba(45,58,72,1) 25%, rgba(45,58,72,0) 100%) !important;
				background: linear-gradient(to top, rgba(45,58,72,1) 25%, rgba(45,58,72,0) 100%) !important;
			}

		/*//INSIDE//*/
			#intro, #expertise {grid: 250px 1fr / 1fr;}

			.solution-button {width: 95%;}
			.solution-title {padding-top: 15px;}

		/*//TESTIMONIALS//*/
			#testimonials {
				height: auto;
				grid: auto auto / 1fr;
				grid-column-gap: 0vw;
				grid-row-gap: 20px;
				padding: 0px 10%;
				margin-bottom: 50px;
			}

			#testimonials .text-wrap {grid-area: 1 / 1 / span 1 / span 1;}

			.home-callouts {
				grid-area: 2 / 1 / span 1 / span 1;
				display: grid;
				grid: auto / 1fr 1fr;
				grid-column-gap: 5vw;
				width: 100%;
				height: 100%;
				margin-top: -50px;
			}

			#testimonials .callout-wrap {top: 50px;}
			#testimonials hr {width: 45%;}
			#testimonials .callout-wrap .icon {width: 100%; height: 75px;}

		/*//FOOTER//*/			
			#partners {padding: 25px 10%;}

		/*//CONTACT//*/
			.contact-wrap {padding: 0px 20%; text-align: center;}
			.contact-wrap h2 {color: white !important;}

		/*//FOOTER//*/	
			.footer-wrap {
				grid: auto auto auto / auto;
				grid-column-gap: 0vw;
				grid-row-gap: 20px;
				padding: 25px 10% 75px 10%;
				min-height: 300px;
				text-align: center;
			}

			.quick-links {grid-area: 1 / 1 / span 1 / span 1;}
			.logo-socials {grid-area: 3 / 1 / span 1 / span 1;}
			.footer-wrap .social-wrap {padding: 0px 20vw;}
			#footer-logo {height: 50px;}
			.foot-contact {grid-area: 2 / 1 / span 1 / span 1; text-align: center;}
	}

	/*//PHONES (576PX - 0PX)//*/
	@media only screen and (max-width: 600px) {
		body {font-size: 12px;}
		
		/*//HEADER//*/
			header, header.small {padding: 0px 5%;}
		
		/*//Extra Menu ==> Logo + Social//*/
			.menu-socials {grid: auto auto / 1fr;}

			.menu-socials .logo {
				height: 75px;
				margin: 15px auto;
				background: url("images/TYROConstruction-Logo.svg") no-repeat center;
				border-right: none;
			}

			.menu-socials .social-wrap {justify-content: center; margin-top: 10px auto; grid-area: 2 / 1 / span 1 / span 1;}
			.menu-socials .social-wrap a {justify-content: center !important; margin-right: 25px;}

		/*//Menu Icons ==> Search Bar//*/
			.search-wrap {padding: 10px 5%;}
		
		/*//Menu Icons ==> Search Page//*/
			.search-page {padding: 50px 5%;}

		/*//SLIDER//*/
			.caption-wrap {padding: 0px 7%; !important}
		
		/*//HOME//*/
			#intro {padding: 0px 5% 50px 5%;}
			.padded {padding: 0px 5%;}
			.solution-button {height: 75px;}
			.solution-title {padding-top: 7.5px; outline-offset: -12.5px;}
		
		/*//TESTIMONIALS//*/
			#testimonials {padding: 0px 5%;}
			#testimonials .callout-wrap .icon {height: 60px;}
	}