@charset "UTF-8";

/* --------------------- */
/* FRAZIERCIVIL.COM */
/* --------------------- */

/* ROOT VARS */
:root
{
	--max_width_content:1500px;
	--site_border:14px solid #FFFFFF;
	--font_body:'poppins',sans-serif;
	--font_bold:'poppins_bold',sans-serif;
	--font_title:'apotek',sans-serif;
}

/* HTML */
html { height:100%; font-size:17px; }

/* BODY */
body
{
	width:100%;
	height:100%;
	background:#2F3033;
	font-family:var(--font_body);
	font-size:1rem;
	color:#2F3033;
	line-height:1.5em;
	letter-spacing:-0.01em;
	-moz-text-size-adjust:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -o-text-size-adjust:100%; text-size-adjust:100%;
}
.body_overflow { overflow:hidden; }

/* FONTS */
@font-face { font-family:'poppins'; src:url('/fonts/poppins_regular.woff2') format('woff2'), url('/fonts/poppins_regular.woff') format('woff'); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'poppins_bold'; src:url('/fonts/poppins_bold.woff2') format('woff2'), url('/fonts/poppins_bold.woff') format('woff'); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'apotek'; src:url('/fonts/apotek_extra_wide.woff2') format('woff2'), url('/fonts/apotek_extra_wide.woff') format('woff'); font-weight:normal; font-style:normal; font-display:swap; }

/* COMING SOON */
.coming_soon_body { height:100% !important; }
#coming_soon_wrapper
{
	width:100%; height:100%; background:#FFFFFF url('/graphics/coming_soon_bg.jpg') center center / cover no-repeat; text-align:center;
	display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center;
}
#coming_soon_content { flex:1; color:#FFFFFF; padding:35px; }
#coming_soon_logo { display:inline-block; width:85%; max-width:500px; height:auto; margin-bottom:calc(2% + 20px); }

/* TITLES */
.title { display:block; font-family:var(--font_title); margin-bottom:10px; }
.title_no_margin { margin:0 !important; }

/* FONT SIZES */
.sml { font-size:1.6rem; line-height:1em; }
.med { font-size:1.9rem; line-height:1em; }
.big { font-size:2.2rem; line-height:1em; }

/* COLORS */
.black { color:#000000; }
.dk_grey { color:#2F3033; }
.med_grey { color:#54565C; }
.lt_grey { color:#D4D5D6; }
.orange { color:#FF5C36; }
.red { color:#B62730; }
.white { color:#FFFFFF; }


/* UNIVERSAL STYLES */
* { margin:0; padding:0; box-sizing:border-box; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; outline:0; border:0; }

/* MISC */
img { line-height:0; }
strong, .bold { font-family:var(--font_bold); }
a:link { color:#FF5C36; } a:visited { color:#FF5C36; } a:hover { color:#444444; } a:active { color:#FF5C36; }
h1, h2, h3 { font-weight:inherit; font-size:inherit; display:inline-block; }
hr { border-top:1px solid #474440; height:1px; }
.sep { border-top:1px solid rgba(0,0,0,0.2); margin-top:7%; padding-bottom:7%; }

/* FORM */
#form_wrapper { display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; margin-top:-10px; }
.form { flex:1 1 calc(50% - 10px); }
.form_full_span { flex:1 1 100%; }

/* SELECT */
select
{
	display:inline-block;
	width:100%;
	padding:10px 50px 10px 10px;
	background:rgba(255,255,255,.75) url("/graphics/select_arrow.png") right center no-repeat;
	border:1px solid rgba(0,0,0,.2);
	font-family:var(--font_body);
	font-size:1rem;
	color:#444444;
	border-radius:0;
	outline:none;
	border-radius:5px;
}
select { cursor:pointer; }
select option { font-family:var(--font_body); }
select::-ms-expand { display:none; } /* IE/Edge */
select:disabled::-ms-expand { background:rgba(255,255,255,.75); } /* IE/Edge */

/* DEFAULT LISTS */
.list { padding:0; margin:0 0 0 20px; }
.list li { margin:0; list-style:square; color:#5A5A5A; }
.list li::marker { color:#FF5C36; }

/* BUTTONS */
.button
{
	position:relative;
	font-family:var(--font_body);
	line-height:1.2em;
	display:inline-block;
	letter-spacing:-0.02em;
	margin-left:10px;
	padding:10px 18px 10px 45px;
	text-decoration:none;
	text-align:center;
	font-size:1rem;
	border-radius:10px;
}
.button:hover { cursor:pointer; }
.button:nth-of-type(1) { margin-left:0; }

/* BUTTON COLORS */
.button_blue { background:#1f3847; border:1px solid rgba(0,0,0,0.3); color:#FFFFFF !important; }
.button_blue:hover { background:#5A5A5A; color:#FFFFFF !important; }
.button_blue:active { color:#FFFFFF70 !important; }
.button_white { background:none; border:1px solid #FFFFFF; color:#FFFFFF !important; }
.button_white:hover { border-color:#FF5C36; }
.button_white:active { color:#FFFFFF70 !important; }

/* BUTTON ICONS */
.button_icon
{
	position:absolute; left:15px; top:50%;
	transform:translateY(-50%);
	height:23px; width:23px;
	background-color:transparent; background-position:0 0; background-size:23px; background-repeat:no-repeat;
}
.button:hover .button_icon { background-position:0 -23px; }
.button_icon_def { background-image:url('/graphics/button_icon_default_red.png'); }
.button_icon_phone { background-image:url('/graphics/button_icon_phone_orange.png'); }

/* SPECIAL BUTTONS */
.button_single { margin:25px 0 0 0 !important; }
.button_form { background:#1F3847 url('/graphics/button_icon_form.png') top 50% left 17px/18px auto no-repeat; }
.button_form:hover { background:#5A5A5A url('/graphics/button_icon_form_alt.png') top 50% left 17px/18px auto no-repeat; }

/* NAV UNIVERSAL */
#nav ul li a { position:relative; color:#5A5A5A; text-decoration:none; line-height:1em; display:block; text-align:left; }
#nav ul li a:hover { color:#FF5C36; }
#nav ul li a:hover::after { content:''; position:absolute; width:100%; height:0; left:0; bottom:-13px; border-bottom:1px solid #54565C; animation:.15s nav_line_anim forwards; }
@keyframes nav_line_anim { 0% { opacity:0; transform:scaleX(0); } 100% { opacity:1; transform:scaleX(1); } }
#nav ul li a:active { color:#999999; }
#nav ul { list-style:none; }

/* NAV */
#nav_wrapper { position:sticky; top:0; transition:top .2s ease-in-out; background:#D4D5D6; z-index:10; border-bottom:1px solid rgba(0,0,0,0.2); }
#nav_content
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:center;
	max-width:var(--max_width_content);
	margin:0 auto;
	padding:25px 50px;
	position:relative;
}
#nav_badge
{
	position:absolute;
	top:25px;
	right:50px;
	width:calc(10% + 25px);
	height:auto;
	z-index:5;
	border:10px solid #D4D5D6;
}
#nav
{
	flex:1;
	padding-left:30px;
	height:100%;
	line-height:1em;
	visibility:visible;
	transform:translateX(0);
	transition:transform .2s linear;
}
#nav > ul { position:relative; display:inline-block; }
#nav > ul > li { position:relative; display:inline-block; }
#nav > ul > li:last-child a { margin-right:0; }
#nav > ul > li:hover { cursor:pointer; }
#nav > ul > li > a { margin:0 15px; }
#nav_logo { flex:0 0 clamp(175px, 15vw, 270px); line-height:0; }
#nav_logo img { width:100%; height:auto; }

/* MOBILE NAV ICON */
#nav_icon 
{
	display:none;
	width:80px;
	height:auto;
	line-height:0;
	opacity:0;
	margin-bottom:10px;
	transform:scaleX(-1);
	animation-delay:.25s;
}
.nav_icon_out { animation:.25s nav_icon_anim forwards; display:block !important; }
@keyframes nav_icon_anim { 0% { transform:scaleX(-1); width:80px; opacity:0; } 100% { transform:scaleX(1); width:125px; opacity:1; } }

/* MOBILE BUTTONS */
.nav_mobile_out { visibility:visible !important; transform:translateY(0) !important; display:block !important; }
#nav_mobile_button, #nav_mobile_button_close { z-index:5; display:none; position:absolute; width:30px; height:auto; right:30px; cursor:pointer; }
#nav_mobile_button { top:50%; transform:translateY(-50%); }
#nav_mobile_button_close { top:30px; }

/* HEADERS */
#header_wrapper { position:relative; height:40vw; min-height:400px; overflow:hidden; }
#header_grid { position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; }
.header_grid_sq { background:#000000; scale:1 1; opacity:0; animation:grid_anim .3s ease-out forwards 0s; }
@keyframes grid_anim { 0% { opacity:1; scale:1 1; } 100% { opacity:0; scale:1 0; } }
#header_bg_grad
{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:1;
	background:linear-gradient(to top, rgba(47,48,51,.5) 20%,rgba(47,48,51,0) 80%);
}
#header_bg
{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:0;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	opacity:0;
	animation:header_bg_anim 1.5s ease-out forwards .15s;
}
@keyframes header_bg_anim { 0% { opacity:0; } 100% { opacity:1; } }
#header
{
	width:100%;
	max-width:var(--max_width_content);
	margin:0 auto;
	height:100%;
	position:relative;
	padding:60px 50px;
}
#header_title
{
	position:absolute;
	z-index:2;
	left:50px;
	bottom:60px;
	width:calc(40vw + 200px);
	max-width:80%;
	opacity:0;
	transform:scale(.5);
	transform-origin:bottom left;
	animation:header_title_anim .25s ease-out forwards .5s;
	font-family:var(--font_title);
	font-size:clamp(2rem, 3.5vw, 2.8rem);
	line-height:1.15em;
	letter-spacing:-0.02em;
	color:#FFFFFF;
	text-shadow:0 5px 5px rgba(0,0,0,0.35);
}
#header_desc { max-width:calc(80% + 25px); color:rgba(255,255,255,0.7); margin:5px auto 0 auto; font-size:1rem; line-height:1.5em; }
@keyframes header_title_anim { 0% { opacity:0; transform:scale(.5); } 100% { opacity:1; transform:scale(1); } }

/* GRID 2SQ */
.grid_2sq_wrapper { display:flex; flex-direction:row; flex-wrap:wrap; gap:30px; margin-top:50px; }
.grid_2sq
{
	position:relative;
	flex:0 0 calc(50% - 15px);
	text-decoration:none;
	background:#FFFFFF;
	border-radius:8px;
	border:1px solid rgba(0,0,0,0.2);
	overflow:hidden;
	display:flex;
	flex-wrap:wrap;
}
.grid_2sq_img { width:100%; height:calc(13vw + 50px); min-height:150px; background-size:cover; background-repeat:no-repeat; background-position:center center; align-self:flex-end; }
.grid_2sq_content { width:100%; padding:calc(4% + 10px); }

/* GRID 4SQ */
.grid_4sq_wrapper { display:flex; flex-direction:row; flex-wrap:nowrap; gap:20px; margin-top:50px; }
.grid_4sq
{
	flex:1 1 25%;
	background:#FFFFFF;
	border-radius:8px;
	border:1px solid rgba(0,0,0,0.2);
	overflow:hidden;
	line-height:1.25rem;
	text-align:center;
	font-size:.9rem;
	letter-spacing:-0.025em;
	display:flex;
	flex-wrap:wrap;
}
.grid_4sq_img { width:100%; height:10rem; background-size:cover; background-repeat:no-repeat; background-position:center center; align-self:flex-end; }
.grid_4sq_content { width:100%; padding:calc(4% + 10px); align-self:flex-end; color:#909090; }
.grid_4sq_mobile { display:none; }

/* CONTENT */
.content_bg_home_center { background:#FFFFFF url('/graphics/home_center_bg.jpg') center right / cover no-repeat; }
.content { max-width:var(--max_width_content); margin:0 auto; padding:60px 50px; line-height:1.75rem; letter-spacing:-0.02em; }
.content_bg_white { background:#FFFFFF; }
.content_bg_lt_grey { background:#E9E9E9; }
.content_bg_dk_grey { background:#5A5A5A; }
.content_bg_blue { background:#1f3847; }
.content_bg_grad { background:linear-gradient(to top, #DEDEDE 15%,#FFFFFF 85%); }
.content_center { text-align:center !important; }

/* GRID 5050 */
.grid_5050_wrapper { display:flex; flex-direction:row; flex-wrap:wrap; margin-top:50px; }
.grid_5050_cl { flex:0 0 20%; }
.grid_5050_cl img { width:100%; height:auto; }
.grid_5050_cr { flex:1; padding-left:calc(5% + 10px); }

/* CONTACT 5050 */
.contact_5050_wrapper { display:flex; flex-direction:row; flex-wrap:wrap; }
.contact_5050:first-child { width:calc(30% + 75px); border-right:1px solid rgba(0,0,0,0.1); padding-right:calc(5% + 10px); }
.contact_5050:last-child { flex:1; padding-left:calc(5% + 10px); }

/* FOOTER */
#footer_wrapper { width:100%; padding:75px 50px; }
#footer_logo { display:inline-block; width:clamp(150px, 100%, 200px); height:auto; line-height:0; margin-bottom:10px; }
#footer { display:flex; flex-direction:row; flex-wrap:wrap; margin:0 auto; width:100%; max-width:var(--max_width_content); text-align:center; }
.footer_col  { flex:1 1 33.333%; padding:0 3rem; font-size:.9rem; color:#FFFFFF70; border-right:solid 1px rgba(255,255,255,0.2); }
.footer_col:last-child { padding-right:0; border:0; }
.footer_col:first-child { padding-left:0; }
#footer_phone_button { margin-top:20px; }
#footer a { color:#FFFFFF70; }
#footer a:hover { color:#FF5C36; }
#footer a:active { color:#FFFFFF; }
#footer_social { display:block; margin:0 -7px 15px -7px; line-height:0; }
.footer_social { display:inline-block; margin:7px; line-height:0; text-decoration:none; }
.footer_social img { width:45px; height:auto; border-radius:100%; border:2px solid #FFFFFF; }
.footer_social:hover img { border-color:#FF5C36; }
.footer_social:active img { background:rgba(255,255,255,.1); }

/* TEAM */
#team_wrapper
{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:30px;
}
.team
{
	background:#FFFFFF;
	border-radius:8px;
	border:1px solid rgba(0,0,0,0.2);
	padding:clamp(20px, 7%, 35px);
}
.team img
{
	display:block;
	margin-bottom:1.75rem;
	width:75%;
	height:auto;
	max-width:250px;
}

/* PROJECTS */
#project_wrapper
{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:30px;
}
.project
{
	background:#FFFFFF;
	border-radius:8px;
	border:1px solid rgba(0,0,0,0.2);
	padding:clamp(20px, 7%, 35px);
}
.project_img
{
	display:block;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	height:20vw;
	min-height:175px;
	line-height:0;
	text-decoration:none;
	margin-bottom:1.75rem;
}

/* TEXT FIELDS */
.text_field
{
	padding:10px;
	margin:10px 0;
	font-family:var(--font_body);
	font-size:1rem;
	background:rgba(255,255,255,.75);
	color:#444444;
	border:1px solid rgba(0,0,0,.2);
	width:100%;
	border-radius:5px;
}
.text_field_no_margin { margin:0; }
.text_area { font-family:var(--font_body); height:150px; }
::placeholder { color:#777777; opacity:1; }
.formhp { display:none !important; }

/* RETURN MSG */
#return_msg { padding:50px; background:#FF5C36; color:#FFFFFF; font-size:1rem; text-align:center; }
#return_msg_title { display:inline-block; font-size:1.5rem; margin-bottom:10px; color:#FFFFFF; font-family:var(--font_bold); line-height:1em; }

/* ANIMATED ELEMENTS BASED ON JS INTERSECTION OBSERVER */
.anim_element { opacity:0; transition:opacity .3s ease-in-out, transform .25s ease-in-out; transform:translateX(-25px); }
.anim_element.show { opacity:1; transform:translateX(0); }

/* VIDEOS */
.video { width:100%; position:relative; overflow:hidden; padding-top:56.25%; line-height:0; margin-top:10px; }
.video iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* HOME SURCHARGES */
#home_surcharge_grid_wrapper { display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; margin-top:20px; color:#FFFFFF; }
.home_surcharge_grid
{
	flex:1 1 calc(25% - 20px);
	padding:clamp(20px, 2%, 40px);
	min-width:250px;
	background:#00000050;
	border:1px solid rgba(0,0,0,0.50);
	border-radius:5px;
	display:flex; flex-direction:row; flex-wrap:nowrap;
	align-items:center;
	justify-content:center;
}

/* SURCHARGE MC */
#surcharge_mc_wrapper { font-size:1rem; text-align:center; padding:30px; }
#surcharge_mc { display:inline-block; width:100%; max-width:700px; text-align:center; padding:30px; background:#333333; border-radius:10px; }
#surcharge_mc_logo { width:100%; max-width:200px; margin:0 auto 20px auto; }
#surcharge_mc_logo img { width:100%; height:auto; }
.surcharge_mc_rate, #surcharge_mc_date { text-align:center; background:#FFFFFF; margin:5px 0 20px 0 !important; }
#surcharge_mc_button { width:100%; margin:20px 0 0 0; }
.surcharge_mc_return_msg { border-radius:5px; padding:35px !important; margin-bottom:25px !important; }

/* ---------------------------------------------------- */
/* CSS MEDIA BREAKS ----------------------------------- */
/* ---------------------------------------------------- */
@media only screen and (min-width:801px)
{
	/* BODY */
	body { overflow:visible !important; }

	/* NAV */
	#nav_wrapper { top:0 !important; }
	#nav_mobile_button, #nav_mobile_button_close { display:none; }
	#nav_icon { display:none !important; }
}

@media only screen and (max-width:1200px)
{
	/* HTML */
	html { font-size:16px; }

	/* NAV */
	#nav > ul > li > a { margin:0 10px; }
}

@media only screen and (max-width:1050px)
{
	/* PADDING DROPS TO 30PX */

	/* ROOT VARS */
	:root { --site_border:10px solid #FFFFFF; }

	/* NAV */
	#nav_content { padding:20px 30px; }
	#nav_badge { top:20px; right:30px; }

	/* CONTENT */
	.content { padding:50px 30px; line-height:1.5em; }

	/* HEADERS */
	#header { padding:50px 30px; }
	#header_title { left:30px; }

	/* RETURN MSG */
	#return_msg { padding:50px 30px; }

	/* FOOTER */
	#footer_wrapper { padding:50px 30px; }
	.footer_col { flex:1 1 50%; padding:0 30px; }
	.footer_col:first-child { flex:1 1 100%; padding:0 0 20px 0; border:none; }
	#footer_social { margin:0 -7px 10px -7px; }
	.footer_social img { width:40px; }
}

@media only screen and (max-width:1000px)
{
	/* GRID 4SQ */
	.grid_4sq_wrapper { flex-wrap:wrap; margin-top:35px; }
	.grid_4sq { flex:0 0 calc(50% - 10px); }
	.grid_4sq_mobile { display:flex; }

	/* TEAM */
	#team_wrapper { grid-template-columns:1fr 1fr; }
}

@media only screen and (max-width:800px)
{
	/* BODY */
	body { height:auto; }

	/* NAV */
	#nav { z-index:10; position:fixed; width:100%; padding:30px; visibility:hidden; top:0; left:0; overflow-y:scroll; transform:translateX(-100%); text-align:left; background:#2F3033; }
	#nav_mobile_button { display:inline-block; }
	#nav ul li { display:block; }
	#nav ul li a { font-size:1rem; margin:13px 0; white-space:normal; }
	#nav > ul > li > a { color:#FFFFFF; }
	#nav_mobile_button_close { display:inline; }
	#nav ul li a:hover::after { display:none; animation:none; }
	#nav_badge { display:none; }
}

@media only screen and (max-width:750px)
{
	/* GRID 5050 */
	.grid_5050_wrapper { margin-top:35px; }
	.grid_5050_cl { flex:0 0 100%; margin-bottom:35px; }
	.grid_5050_cl img { max-width:300px; }
	.grid_5050_cr { flex:0 0 100%; padding:0; }

	/* CONTACT 5050 */
	.contact_5050:first-child { flex:1 1 100%; border:none; padding:0; }
	.contact_5050:last-child { flex:1 1 100%; padding:0; margin-top:45px; }

	/* GRID 2SQ */
	.grid_2sq_wrapper { margin-top:35px; }
	.grid_2sq { flex:0 0 100%; }
	.grid_2sq_content { padding:calc(5% + 5px); }

	/* TEAM */
	#team_wrapper { grid-template-columns:1fr; gap:20px; }

	/* PROJECTS */
	#project_wrapper { grid-template-columns:1fr; gap:20px; }
}

@media only screen and (max-width:650px)
{
	/* FONT SIZES */
	.sml { font-size:1.4rem; }
	.med { font-size:1.6rem; }
	.big { font-size:1.9rem; }

	/* HEADERS */
	#header { padding:30px; }
	#header_title { bottom:30px; width:calc(100% - 60px); max-width:100%; }

	/* CONTENT */
	.content { padding:30px; }

	/* RETURN MSG */
	#return_msg { padding:30px; }

	/* BUTTONS */
	.button { width:100%; margin:15px 0 0 0; padding:10px 20px; }
	.button:nth-of-type(1) { margin-top:0; }

	/* FOOTER */
	#footer_wrapper { padding:50px 30px; }
	.footer_col { flex:1 1 100%; border:none; padding:0; }
	.footer_col:last-child { padding-top:25px; margin-top:30px; border-top:solid 1px rgba(255,255,255,0.2); }
	.footer_social img { width:35px; }

	/* GRID 4SQ */
	.grid_4sq { flex:0 0 calc(100% - 10px); }
	.grid_4sq_content { padding:calc(5% + 5px); }
}

@media only screen and (max-width:500px)
{
	/* FORM */
	#form_wrapper { margin-top:-30px; }
	.form { flex:1 1 100%; }
}