/*
Theme Name: Tamperproof Set Screws
Description: Twenty Nineteen child theme.
Author:   the WordPress team
Template: twentynineteen
*/

@font-face {
	font-family: 'Umbrage';
	src: url('css/umbrage2.eot');
	src: local('☺'), url('css/umbrage2.woff') format('woff'), url('css/umbrage2.ttf') format('truetype'), url('css/umbrage2.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* ---------- Common ---------- */
p, a, h1, h2, h3, h4, h5, h6, span, li {
	font-family: Helvetica, Arial, sans-serif;
}


/* ---------- Header ---------- */
header.site-header {
	padding: 0;
	height: 36px;
	min-height: 36px;
	background-color: rgb(248, 207, 19);
}

.site-branding-container .site-title {
	display: none;
}

nav.main-navigation {
	text-align: center;
	margin-top: 0.05rem;
}

.main-navigation li.menu-item a {
	font-size: 20px;
}

/* ---------- Footer ---------- */
footer {
	display: none;
}


/* ---------- Homepage ---------- */
.home .site-content {
	height: calc( 100vh - 36px );
	min-height: calc( 100vh - 36px );
}

.home .site-content #primary {
	height: 100%;
	position: relative;
	background-image: url('/wp-content/uploads/2019/06/redHeader.png');
	background-repeat: no-repeat;
	background-position: center 80%;
	background-size: 80%;
}

.home header.entry-header{
	display: none;
}

.home #site-name-wrapper {
	position: absolute;
	top: 20%;
	left: calc( 50% - 370px );

	width: 740px;
	max-width: 740px;

	background-color: rgba(199, 27, 27, 1);
	z-index: 10;
	border-radius: 10px;
	text-align: center;
	padding: 18px 30px 5px;
}

.home h1.site-title {
	font-family: Umbrage;
	font-size: 58px;
	letter-spacing: 1px;
	color: rgb(1, 0, 102);
	line-height: 58px;
	z-index: 20;
}

.home #site-name-wrapper p {
	margin-top: -10px;
}

.home #site-name-wrapper span.site-slogan {
	color: #fff;
	font-weight: bold;
	font-size: 21px;
}

.home .screw-image-wrapper {
	width: 100%;
	max-width: 100%;
}

.home .screw-image-wrapper img {
	display: block;
	margin: 0 auto;
}


.home #site-name-wrapper,
.home .popup-window {
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}


/* Home - Request Quote Form */
.home .popup-window {
	position: absolute;
	top: calc( 100vh + 100px );
    left: calc( 50% - 370px );

    width: 740px;
    max-width: 740px;

    background-color: rgb(1, 0, 102);
    padding: 30px;
    border-radius: 10px;

	color: #fff;
	font-size: 15px;
	max-height: calc( 100vh - 250px );
	overflow-y: auto;
}

.home .popup-window a {
	color: rgb(188, 4, 4);
}

.home .popup-window p{
	line-height: 1.5;
	margin-top: 5px;
	margin-bottom: 5px;
}

.home .title-wrapper {
	position: relative;
}

.home .popup-window h2:before {
	display: none;
}

.home .popup-window h2 {
	color: rgb(248, 207, 19);
	font-size: 18px;
	line-height: 30px;
	border-bottom: 1px solid rgb(188, 4, 4);
	margin-top: 0;
}

.home .popup-close {
	position: absolute;
	top: 0;
	right: 0;
	font-weight: bold;
    padding: 1px 5px;
    border: 1px solid #666;
    border-radius: 5px;
    cursor: pointer;
}

.home .popup-window ul {
	margin-left: 10px;
}

.home .popup-window ul li {
	line-height: 1.5;
}

.home .popup-window input:not(.wpcf7-submit) {
	width: 80%;
}

.home .popup-window input,
.home .popup-window textarea {
	padding: 5px 10px;
	line-height: 1.5;
}

.home .popup-window input.wpcf7-submit {
	font-size: 15px;
	margin-top: 10px;
	padding: 8px 15px;
}


@media only screen and (max-width: 1024px) {
	.home h1.site-title {
		font-size: 36px;
		line-height: 48px;
	}

	.home #site-name-wrapper span.site-slogan {
		font-size: 18px;
	}

	.home #site-name-wrapper {
	    left: calc( 50% - 250px );

	    width: 500px;
	    max-width: 500px;
	}

	.home .popup-window {
		top: calc( 100vh + 100px );
	    left: 10%;

	    width: 80%;
	    max-width: 80%;

	}

}

@media only screen and (max-width: 640px) {
	.main-navigation li.menu-item a {
		font-size: 18px;
	}

	.home h1.site-title {
		font-size: 24px;
		line-height: 32px;
	}

	.home #site-name-wrapper span.site-slogan {
		font-size: 14px;
	}

	.home #site-name-wrapper {
	    left: calc( 50% - 200px );

	    width: 400px;
	    max-width: 400px;
	}

	.home .popup-window {
		top: calc( 100vh + 100px );
	    left: 6%;

	    width: 88%;
	    max-width: 88%;

	}

}

@media only screen and (max-width: 480px) {
	.main-navigation li.menu-item a {
		font-size: 16px;
	}

	.home h1.site-title {
		font-size: 19px;
		line-height: 24px;
	}

	.home #site-name-wrapper span.site-slogan {
		font-size: 12px;
	}

	.home #site-name-wrapper {
	    left: calc( 50% - 150px );

	    width: 300px;
	    max-width: 300px;
	}

	.home .popup-window {
		top: calc( 100vh + 100px );
	    left: 5%;

	    width: 90%;
	    max-width: 90%;

	}

}