@charset "UTF-8";

/* ARTEFIRM.COM */

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

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

/* BODY */
body
{
	width:100%;
	height:100%;
	background:#1F3847;
	font-family:var(--font_body);
	font-size:1rem;
	color:#1F3847;
	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; }

/* TITLES */
.title { display:block; font-family:var(--font_bold); margin-bottom:10px; }
.title_no_margin { margin:0 !important; }
.title_line { display:flex; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.title_line_txt { flex:0 1 auto; font-family:var(--font_bold); padding-right:10px; }
.title_line_ln { flex:1; max-width:100px; height:5px; background:#B62730; margin:10px 0; }

/* FORM */
#form_wrapper { display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; margin-top:-10px; }
.form { flex:1 1 calc(50% - 10px); }
.form_req { background:#FFFFFF url('/graphics/form_req.png') top 10px right 10px/8px auto no-repeat !important; }

/* FONT SIZES */
.sml { font-size:1.2rem; line-height:1.3em; }
.med { font-size:1.5rem; line-height:1.3em; }
.big { font-size:1.8rem; line-height:1.3em; }

/* COLORS */
.black { color:#000000; }
.dk_grey { color:#292929; }
.red { color:#B62730; }
.blue { color:#1F3847; }
.white { color:#FFFFFF; }
.med_grey { color:#868686; }
.lt_grey { color:#A5A5A5; }

/* 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:#B62730; } a:visited { color:#B62730; } a:hover { color:#444444; } a:active { color:#B62730; }
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:#1F3847; }
.list li::marker { color:#B62730; }
.list_spaced li { margin-top:calc(1% + 10px) !important; }
.list_spaced li:first-child { margin:0 !important; }

/* BUTTONS */
.button 
{
	position:relative;
	font-family:var(--font_body);
	line-height:1.2em;
	display:inline-block;
	letter-spacing:-0.02em;
	margin-left:25px;
	padding:15px 25px 15px 50px;
	text-decoration:none;
	font-size:1rem;
	text-align:left;
}
.button:hover { cursor:pointer; }
.button:nth-of-type(1) { margin-left:0; }
.button_set { margin-top:calc(2% + 5px); }

/* 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:#B62730; }
.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_red.png'); }

/* SPECIAL BUTTONS */
.button_single { margin:calc(2% + 25px) 0 0 0 !important; /* margin:25px 0 0 0 !important; */ }
.button_form { background:#1F3847 url('/graphics/button_icon_form.png') top 50% left 17px/18px auto no-repeat; text-align:left; }
.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:#B62730; }
#nav ul li a:hover::after { content:''; position:absolute; width:100%; height:0; left:0; bottom:-13px; border-bottom:1px solid #FFFFFF70; 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:#FFFFFF; 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:calc(2% + 10px) 50px;
}
#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(125px, 13vw, 250px); 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 { 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_bg_grad
{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:1;
	background:linear-gradient(to top, rgba(31,56,71,.8) 20%,rgba(31,56,71,0) 50%);
}
#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;
}
#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%;
	font-family:var(--font_bold);
	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; }

/* GRID 3SQ */
.grid_3sq_wrapper { display:flex; flex-direction:row; flex-wrap:nowrap; gap:calc(4% + 20px); }
.grid_3sq { flex:1 1 33.333%; display:flex; flex-wrap:wrap; }
.grid_3sq_content { width:100%; }
#grid_3sq_cta { text-align:center; margin:0 auto; }
#grid_3sq_cta_title { display:inline-block; border-top:1px solid #DDDDDD; padding:calc(3% + 10px) 8% 0 8%; margin:calc(3% + 10px) 0 calc(1% + 10px) 0; }

/* GRID 4SQ */
.grid_4sq_wrapper { display:flex; flex-direction:row; flex-wrap:nowrap; gap:calc(2% + 10px); }
.grid_4sq { flex:1 1 33.333%; line-height:1.25rem; text-align:center; text-decoration:none; }
.grid_4sq:hover .grid_4sq_img { border:1px solid #FFFFFF; }
.grid_4sq:active .grid_4sq_img { border:1px solid rgba(255,255,255,0.5); }
.grid_4sq_img { width:100%; height:calc(15vw + 25px); background-size:cover; background-repeat:no-repeat; background-position:center center; border:1px solid rgba(0,0,0,0.2); }
.grid_4sq_content { width:100%; padding-top:calc(3% + 15px); }
.grid_4sq_title { text-align:center; margin-bottom:calc(1% + 15px); }

/* 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:calc(6% + 25px) 50px; line-height:2rem; }
.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; }

/* ABOUT */
.about_wrapper { display:flex; flex-direction:row; flex-wrap:wrap; }
.about_cl { flex:0 0 calc(15% + 20px); }
.about_cl img { width:100%; height:auto; border:1px solid rgba(0,0,0,0.2); }
.about_cr { flex:1; padding-left:calc(5% + 15px); }

/* 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:20px 0 0 0; }
#footer a { color:#FFFFFF70; }
#footer a:hover { color:#FFFFFF; }
#footer a:active { color:#FFFFFF70; }
#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:#B62730; }
.footer_social:active img { background:rgba(255,255,255,.1); }

/* TEAM */
#team_wrapper { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:calc(3vw + 20px); }
.team_img { display:block; margin-bottom:1.75rem; width:100%; max-width:300px; height:auto; border:1px solid rgba(0,0,0,0.2); }
.team_img:hover { cursor:pointer; border:1px solid rgba(0,0,0,0.6); }
.team_bio
{
	display:none;
	position:fixed;
	width:90%;
	height:auto;
	max-height:90%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background:#FFFFFF;
	padding:calc(5% + 30px);
	z-index:20;
	overflow-y:scroll;
	border:1px solid rgba(0,0,0,0.2);
	box-shadow:0 0 10px 0 rgba(0,0,0,.3);
}
.team_bio_close { position:absolute; z-index:25; top:calc(1% + 15px); right:calc(1% + 15px); width:calc(1% + 30px); height:auto; }
.team_bio_close:hover { cursor:pointer; }

/* PROJECTS */
#project_wrapper  { display:grid; grid-template-columns:1fr 1fr; gap:calc(5vw + 15px); }
.project_img
{
	display:block;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	height:calc(20vw + 35px);
	min-height:225px;
	line-height:0;
	text-decoration:none;
	margin-bottom:1.75rem;
	border:1px solid rgba(0,0,0,0.2);
}
.project_img:hover { border:1px solid rgba(0,0,0,0.7); }
.project_img:active { border:1px solid rgba(0,0,0,0.2); }
.project_gallery { display:none; }
.project .list { margin-top:calc(1% + 5px); margin-bottom:calc(1% + 15px); }

/* SERVICES */
.services { display:flex; flex-wrap:nowrap; flex-direction:row; max-width:var(--max_width_content); }
.services_img { flex-basis:30%; background-repeat:no-repeat; background-position:center center; background-size:cover; border:1px solid rgba(0,0,0,.2); }
.services_content { flex-basis:70%; padding:calc(3% + 15px) calc(4% + 20px); }
#services_wrapper .services:nth-child(odd) .services_content { padding-right:0; }
#services_wrapper .services:nth-child(even) .services_content { padding-left:0; order:1; }
#services_wrapper .services:nth-child(even) .services_img { order:2; }
#services_wrapper .services:not(:first-child) { margin-top:calc(3% + 15px); }

/* 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:#B62730; 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; }

/* 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; }
}

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

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

	/* NAV */
	#nav_content { padding:calc(2% + 10px) 30px; }
	
	/* CONTENT */
	.content { padding:calc(6% + 25px) 30px; }
	

	/* 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)
{
	/* TEAM */
	#team_wrapper { grid-template-columns:1fr 1fr 1fr; }

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

	/* GRID 3SQ */
	.grid_3sq_wrapper { flex-wrap:wrap; }
	.grid_3sq { flex:0 0 100%; }
	.grid_3sq:not(:first-child) { margin-top:40px; }
	#grid_3sq_cta { text-align:left; }
	#grid_3sq_cta_title { width:100%; padding:calc(3% + 20px) 0 0 0; margin:calc(3% + 20px) 0 calc(2% + 15px) 0; }
}

@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:#1F3847; }
	#nav_mobile_button { display:inline-block; }
	#nav ul li { display:block; }
	#nav ul li a { font-size:1.25rem; margin:17px 0; padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,0.2); }
	#nav > ul > li > a { color:#FFFFFF; }
	#nav_mobile_button_close { display:inline; }
	#nav ul li a:hover::after { display:none; animation:none; }

	/* GRID 4SQ */
	.grid_4sq_wrapper { flex-wrap:wrap; }
	.grid_4sq  { flex:0 0 100%; margin-top:40px; }
	.grid_4sq_img { height:calc(40vw + 25px); }
	.grid_4sq_content { padding-top:calc(2% + 10px); }
	.grid_4sq:first-child { margin-top:0; }

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

	/* SERVICES */
	.services { flex-wrap:wrap; }
	.services_img { flex:0 0 100%; aspect-ratio:2/1; }
	.services_content { flex:0 0 100%; padding:calc(4% + 20px) 0 0 0; }
	#services_wrapper .services:nth-child(even) .services_content { order:2; }
	#services_wrapper .services:nth-child(even) .services_img { order:1; }
	#services_wrapper .services:not(:first-child) { margin-top:calc(5% + 25px); }
}

@media only screen and (max-width:750px)
{
	/* ABOUT */
	.about_cl { display:none; }
	.about_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; }

	/* TITLES */
	.title_line_ln { max-width:100%; }
}

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

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

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

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

	/* BUTTONS */
	.button { width:100%; margin:15px 0 0 0; }
	.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; }
	.footer_social img { width:35px; }
	#footer_phone_button { padding:10px 20px; margin-top:30px; text-align:center; }
}

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

	/* TEAM */
	#team_wrapper { grid-template-columns:1fr; }
	.team_img { width:75%; }
	.team_bio { width:calc(100vw - 30px); max-height:calc(100vh - 30px); line-height:1.65em; }
}