/*!
Theme Name: Topside Roofing
Theme URI: http://underscores.me/
Author: Topside Roofing
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: topside-roofing
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   Font Declarations
   ========================================================================== */

@font-face {
	font-family: 'Poppins-Thin';
	src: url('./assets/fonts/poppins-thin-webfont.eot');
	src: url('./assets/fonts/poppins-thin-webfont.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/poppins-thin-webfont.woff2') format('woff2'),
		url('./assets/fonts/poppins-thin-webfont.woff') format('woff'),
		url('./assets/fonts/poppins-thin-webfont.ttf') format('truetype'),
		url('./assets/fonts/poppins-thin-webfont.svg#poppins-bold') format('svg');
	font-style: normal;
	font-weight: 100;
	font-display: swap;
}

@font-face {
	font-family: 'poppins-light';
	src: url('./assets/fonts/poppins-light-webfont.eot');
	src: url('./assets/fonts/poppins-light-webfont.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/poppins-light-webfont.woff2') format('woff2'),
		url('./assets/fonts/poppins-light-webfont.woff') format('woff'),
		url('./assets/fonts/poppins-light-webfont.ttf') format('truetype'),
		url('./assets/fonts/poppins-light-webfont.svg#poppins-bold') format('svg');
	font-style: normal;
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'poppins-regular';
	src: url('./assets/fonts/poppins-regular-webfont.eot');
	src: url('./assets/fonts/poppins-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/poppins-regular-webfont.woff2') format('woff2'),
		url('./assets/fonts/poppins-regular-webfont.woff') format('woff'),
		url('./assets/fonts/poppins-regular-webfont.ttf') format('truetype'),
		url('./assets/fonts/poppins-regular-webfont.svg#poppins-bold') format('svg');
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'poppins-medium';
	src: url('./assets/fonts/poppins-medium-webfont.eot');
	src: url('./assets/fonts/poppins-medium-webfont.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/poppins-medium-webfont.woff2') format('woff2'),
		url('./assets/fonts/poppins-medium-webfont.woff') format('woff'),
		url('./assets/fonts/poppins-medium-webfont.ttf') format('truetype'),
		url('./assets/fonts/poppins-medium-webfont.svg#poppins-bold') format('svg');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'poppins-semiBold';
	src: url('./assets/fonts/poppins-semibold-webfont.eot');
	src: url('./assets/fonts/poppins-semibold-webfont.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/poppins-semibold-webfont.woff2') format('woff2'),
		url('./assets/fonts/poppins-semibold-webfont.woff') format('woff'),
		url('./assets/fonts/poppins-semibold-webfont.ttf') format('truetype'),
		url('./assets/fonts/poppins-semibold-webfont.svg#poppins-bold') format('svg');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'poppins-bold';
	src: url('./assets/fonts/poppins-bold-webfont.eot');
	src: url('./assets/fonts/poppins-bold-webfont.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/poppins-bold-webfont.woff2') format('woff2'),
		url('./assets/fonts/poppins-bold-webfont.woff') format('woff'),
		url('./assets/fonts/poppins-bold-webfont.ttf') format('truetype'),
		url('./assets/fonts/poppins-bold-webfont.svg#poppins-bold') format('svg');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'poppins-extrabold';
	src: url('./assets/fonts/poppins-extrabold-webfont.eot');
	src: url('./assets/fonts/poppins-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/poppins-extrabold-webfont.woff2') format('woff2'),
		url('./assets/fonts/poppins-extrabold-webfont.woff') format('woff'),
		url('./assets/fonts/poppins-extrabold-webfont.ttf') format('truetype'),
		url('./assets/fonts/poppins-extrabold-webfont.svg#poppins-extrabold') format('svg');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'damion-regular';
	src: url('./assets/fonts/damion-regular-webfont.eot');
	src: url('./assets/fonts/damion-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/damion-regular-webfont.woff2') format('woff2'),
		url('./assets/fonts/damion-regular-webfont.woff') format('woff'),
		url('./assets/fonts/damion-regular-webfont.ttf') format('truetype'),
		url('./assets/fonts/damion-regular-webfont.svg#damion-regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Rubik';
	src: url('./assets/fonts/Rubik-Medium.eot');
	src: url('./assets/fonts/Rubik-Medium.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/Rubik-Medium.woff2') format('woff2'),
		url('./assets/fonts/Rubik-Medium.woff') format('woff'),
		url('./assets/fonts/Rubik-Medium.ttf') format('truetype'),
		url('./assets/fonts/Rubik-Medium.svg#Rubik-Medium') format('svg');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url('./assets/fonts/Lato-Black.eot');
	src: url('./assets/fonts/Lato-Black.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/Lato-Black.woff2') format('woff2'),
		url('./assets/fonts/Lato-Black.woff') format('woff'),
		url('./assets/fonts/Lato-Black.ttf') format('truetype'),
		url('./assets/fonts/Lato-Black.svg#Lato-Black') format('svg');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Jost';
	src: url('./assets/fonts/Jost-Regular.eot');
	src: url('./assets/fonts/Jost-Regular.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/Jost-Regular.woff2') format('woff2'),
		url('./assets/fonts/Jost-Regular.woff') format('woff'),
		url('./assets/fonts/Jost-Regular.ttf') format('truetype'),
		url('./assets/fonts/Jost-Regular.svg#Jost-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
	/* Fonts */
	--tr-poppins-font: 'poppins-regular';
	--tr-damion-font: 'damion-regular', cursive;
	--tr-lato-font: 'Lato';
	--tr-rubik-font: 'Rubik';
	--tr-jost-font: 'Jost';

	/* Text */
	--tr-text-font-size: 18px;
	--tr-text-font-weight: 400;
	--tr-text-line-height: clamp(22px, 1.8vw, 32px);

	--tr-md-text-font-size: clamp(16px, 1.4vw, 20px);
	--tr-md-text-line-height: clamp(22px, 1.8vw, 28px);

	--tr-sm-text-font-size: clamp(16px, 1.2vw, 18px);
	--tr-sm-text-line-height: clamp(22px, 1.6vw, 28px);

	/* Headings */
	--tr-h5-font-size: clamp(20px, 2vw, 27px);
	--tr-h5-font-weight: 900;
	--tr-h5-line-height: clamp(26px, 2.4vw, 32px);

	--tr-h3-font-size: clamp(32px, 3vw, 40px);
	--tr-h3-font-weight: 700;
	--tr-h3-line-height: clamp(40px, 3.6vw, 47px);

	--tr-h2-font-size: clamp(40px, 4vw, 55px);
	--tr-h2-font-weight: 400;
	--tr-h2-line-height: clamp(50px, 4.8vw, 56px);

	--tr-font-size-56: clamp(40px, 4vw, 56px);
	--tr-line-height-62: clamp(50px, 4.8vw, 62px);

	--tr-h-custom-font-size: clamp(50px, 5vw, 70px);
	--tr-h-custom-font-weight: 400;
	--tr-h-custom-line-height: 1; /* keeps 100% line height */
	--tr-h-custom-letter-spacing: 0;

	--tr-heading-font-size: clamp(80px, 6vw, 110px);
	--tr-heading-font-weight: 100;
	--tr-heading-line-height: clamp(96px, 7vw, 115px);

	/* Buttons */
	--tr-btn-font-size: clamp(16px, 1.5vw, 20px);
	--tr-btn-font-weight: 500;
	--tr-btn-line-height: clamp(22px, 1.8vw, 34.75px);
	--tr-btn-letter-spacing: 0;
	--tr-btn-md-line-height: clamp(22px, 1.8vw, 28px);

	/* Menu */
	--tr-menu-text-font-size: 16px;
	--tr-menu-text-font-weight: 500;
	--tr-menu-text-line-height: 24px;
	--tr-menu-text-letter-spacing: .8px;

	/* Container */
	--tr-container-width: 100%;
	--tr-container-padding: 20px;

	/* Colors */
	--tr-primary-color: #000;
	--tr-secondary-color: #cc001c;
	--tr-white-color: #fff;
	--tr-grey-background-color: #e8e8e8;
}

/* ==========================================================================
   Global Styles
   ========================================================================== */
html{
	scroll-behavior: smooth;
}
body {
	font-family: var(--tr-poppins-font);
	color: var(--tr-primary-color);
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

p, ul li {
	font-family: var(--tr-poppins-font);
	font-size: var(--tr-text-font-size);
	line-height: var(--tr-text-line-height);
	font-weight: var(--tr-text-font-weight);
	margin: 0;
}

a {
	text-decoration: none;
	display: inline-block;
	color: var(--tr-primary-color);
	transition: 0.5s all ease-in-out;
}

*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

::selection{
	background-color: var(--tr-secondary-color);
	color: var(--tr-white-color);
}

strong {
	font-family: 'poppins-bold';
	font-weight: 700;
}
.text-white{color: var(--tr-white-color);}
.text-primary{color: var(--tr-primary-color);}
.text-secondary{color: var(--tr-secondary-color);}

/* ==========================================================================
   Layout
   ========================================================================== */

.tr-container {
	width: 100%;
	max-width: calc(var(--tr-container-width) + (var(--tr-container-padding) * 2));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--tr-container-padding);
	padding-right: var(--tr-container-padding);
}

/* Container Responsive Breakpoints */
@media (min-width: 1025px) {
	:root {
		--tr-container-width: 95%;
	}
}

@media (min-width: 1200px) {
	:root {
		--tr-container-width: 90%;
	}
}
@media (min-width: 1600px) {
	:root {
		--tr-container-width: 1400px;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.tr-btn,
body .site-main .gform-theme.gform-theme--framework.gform_wrapper .tr_form input:is([type="submit"]), .comment-form input[type="submit"], .wp-block-button a {
	font-family: var(--tr-rubik-font);
	font-size: var(--tr-btn-font-size);
	line-height: var(--tr-btn-md-line-height);
	font-weight: var(--tr-btn-font-weight);
	letter-spacing: var(--tr-btn-letter-spacing);
	padding: 21.5px 36px;
	color: var(--tr-white-color);
	background-color: var(--tr-secondary-color);
	border: 1px solid transparent;
	border-radius: 0px;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	cursor: pointer;
}

.tr-btn:hover,
.tr-btn:focus,
.header-btn:hover,
.header-btn:focus,
body .site-main .gform-theme.gform-theme--framework.gform_wrapper .tr_form input:is([type="submit"]):hover,
body .site-main .gform-theme.gform-theme--framework.gform_wrapper .tr_form input:is([type="submit"]):focus,
body .site-main .gform-theme.gform-theme--framework.gform_wrapper .tr_form input:is([type="submit"]):focus-within, 
.comment-form input[type="submit"]:hover, .comment-form input[type="submit"]:focus, .wp-block-button a:hover, .wp-block-button a:focus {
	background-color: transparent;
	color: var(--tr-secondary-color);
	border-color: var(--tr-secondary-color);
	outline: unset;
}

.tr-btn.tr-fill-btn {
	background-color: var(--tr-secondary-color);
	color: var(--tr-white-color);
}

.tr-btn.tr-fill-btn:hover,
.tr-btn.tr-fill-btn:focus {
	background-color: transparent;
	color: var(--tr-secondary-color);
	border-color: var(--tr-secondary-color);
}
.red-text{
	color: var(--tr-secondary-color);
}
/* ==========================================================================
   Typography
   ========================================================================== */

.tr-headline {
	font-family: var(--tr-poppins-font);
	font-size: var(--tr-h2-font-size);
	line-height: var(--tr-h2-line-height);
	font-weight: var(--tr-h2-font-weight);
	letter-spacing: 0;
	text-align: center;
	margin: 0;
}

.tr-headline strong {
	font-family: 'poppins-bold';
}

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

/* Small Tablet and Below (768px) */
@media (max-width: 768px) {
	:root {
		--tr-text-font-size: 16px;
	}
}