:root { --lt_grey:#EEEEEE; --hh_red:#6C2321; --hh_red_lt:#C54C48; --shadow1:5px 5px 5px 0 rgba(0, 0, 0, 0.50); --section_pad:2rem; --text_normal:1rem; --text_header:2.25rem; --text_menu:1.5rem; --text_copyright:0.7em; }

* { box-sizing: border-box; }

body, html { margin: 0; padding: 0; font-size:clamp(18px, 6.857px + 0.893vw, 24px); font-family: "Times New Roman", Times, serif; font-weight: 400; font-style: normal; background-color: #333; }

body { margin: 0 auto; max-width: 1920px; background-color: #FFF; }

p { margin: 1em 0 1em 0; padding: 0; }

header { background-color:var(--lt_grey); padding: 0.25em 1em; }

header a { color: #000; text-decoration: none; padding: 0.5rem 1rem; display: block; }

header a.img_link { padding: 0.5rem; display: inline-block; }

header a:hover { text-decoration: underline; background-color: #FFF; }

header a.page_active { color: #FFFFFF; background-color:var(--hh_red); }

header img { display: block; }

header ul { display: grid; grid-template-columns: auto 1fr repeat(5, auto) 1fr auto; list-style-type: none; margin: 0; padding: 0; align-items: center; justify-content: space-around; }

header li { place-self: center; font-size:var(--text_menu); }

.landing { display: grid; grid-template-columns: 3% auto 3% 3% auto 2% auto 10% 2% 3%; grid-template-rows: 2em auto 3em auto 1em 1fr 1em auto auto 2em; background-image: url('/storage/landing_bg.webp'); background-repeat: no-repeat; background-size: cover; background-position: center; }

.landingSpecialize { grid-area: 8 / 2 / 10 / 6; background-color:var(--lt_grey); font-size:var(--text_normal); padding: 0 1em; }

.landing_img2 { grid-area: 5 / 7 / 9 / 9; z-index: 3; }

.landing_img2 img, .landing_img1 img { max-width: 100%; border: 10px solid white; }

.landing_img1 { grid-area: 2 / 2 / 7 / 4; min-width: 200px; }

.landingHeader { grid-area: 2 / 5 / 3 / 8; background-color:var(--lt_grey); color:var(--hh_red); padding: 0.5rem !important; }

.landingWelcome { grid-area: 4 / 3 / 6 / 10; background-color:var(--lt_grey); font-size:var(--text_menu); padding: 0 1em; z-index: 2; }

.choose { background-color:var(--lt_grey); padding:var(--section_pad); font-size:var(--text_normal); }

.choose p:first-of-type, .masonry_page p:first-of-type, .about_page p:first-of-type { margin-top: 0; }

.choose img { float: right; border: 1px solid black; margin: 0 0 1em 1em; box-shadow:var(--shadow1); max-width: 50%; width: 800px; min-width: 250px; }

.services { padding:var(--section_pad); font-size:var(--text_normal); }

.services > p:first-of-type { margin: 0 0 2em 0; }

.services p { margin: 0.5em 0; }

.services_listing { display: grid; grid-template-columns: auto auto; gap: 2em; }

.services_listing .subsection_header ~ .subsection_header { padding: 0 0 0.25em; }

.service_listing_image { justify-self: end; }

.service_listing_image img { display: block; max-width: 100%; border: 1px solid black; box-shadow:var(--shadow1); }

.service_listing_portfolio a { color: #000; }

.service_listing_portfolio a:hover { color: #000; background-color: #EEE; }

.satisfaction { background-color:var(--lt_grey); padding:var(--section_pad); font-size:var(--text_normal); }

.satisfaction img { float: right; border: 1px solid black; margin: 0 0 1em 1em; box-shadow:var(--shadow1); max-width: 50%; width: 800px; min-width: 250px; }

.contact { padding:var(--section_pad); font-size:var(--text_normal); }

.section_header { color:var(--hh_red); font-size:var(--text_header); text-align: center; display: block; padding: 0 0 1rem 0; }

.subsection_header { font-weight: bold; display: block; padding: 0 0 0.25em; }

.subsection_header ~ .subsection_header { padding: 1em 0 0.25em; }

.full_span { grid-column: 1 / -1; }

footer { background-color:var(--lt_grey); padding: 1em; font-size:var(--text_normal); text-align: center; display: grid; place-items: center; grid-template-columns: repeat(4, 1fr); }

footer img { display: block; }

footer a { color: #000; }

.footer_social a { display: inline-block; padding: 0.5rem; }

.footer_social a:hover { text-decoration: underline; background-color: #FFF; }

.copyright { grid-column: 1 / -1; text-align: right; width: 100%; font-size:var(--text_copyright); padding: 1em 0; }

.copyright a { color: #000; }

.about_page, .masonry_page, .portfolio_page, .project, .admin_content { padding:var(--section_pad); font-size:var(--text_normal); }

.about_image { float: right; margin: 0 0 1em 1.5em; max-width: 50%; min-width: 250px; width: 600px; }

.masonry_image { float: left; margin: 0 2.5em 1.5em 0; max-width: 50%; min-width: 250px; width: 600px; }

.jobs_image { float: right; margin: 0 0 1em 1.5em; max-width: 33%; min-width: 250px; width: 600px; }

.about_image img, .masonry_image img, .jobs_image img { width: 100%; border: 1px solid black; box-shadow:var(--shadow1); }

.category_items_page { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; }

.portfolio_page { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1em; }

.portfolio_page_link a { color: #000; padding: 0.25em 0.75em; }

.portfolio_page_link a:hover { text-decoration: none; background-color: #EEE; border: 1px solid black; }

.portfolio_page a img { box-shadow:var(--shadow1); max-width: 100%; }

.portfolio_page a:hover img { color: #000; box-shadow: none; }

.portfolio_page_category { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; gap: 0.75em; text-align: center; padding: 0.5em; border: 1px solid black; }

.filled { background-color: #EEEEEE; }

.filled:hover { background-color: #CCCCCC; cursor: all-scroll; }

.portfolio_page_image { justify-self: center; place-self: center; display: block; }

.portfolio_page_image img { border: 1px solid black; display: block; max-width: 100%; max-height: 100px; }

.fotorama-caption { text-align: center; padding: 1em; }

.fotorama-caption a { color: #000000; }

.fotorama .fotorama__caption { display: none; }

.fotorama--fullscreen .fotorama__caption { display: block; text-align: center; }

.standardForm input[type=text], .standardForm input[type=url], .standardForm input[type=search], .standardForm input[type=number], .standardForm input[type=password], .standardForm input[type=email], .standardForm textarea, .standardForm input[type=date] { width: 100%; padding: 0.5rem; margin: 0; display: inline-block; border: 1px solid #CCC; font-size: 1em; }

.standardForm select { padding: 1em 0 1em 1em; margin: 0.25em 0 1em 0; font-size: inherit; border: 1px solid #CCC; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; background: url(/storage/arrows-up-down.svg) 96% / 0.7em no-repeat #FFF; }

.standardForm input[type=file] { width: 100%; padding: 0 0 0 1.5em; border: 1px solid black; }

.standardForm input[type=file]::file-selector-button { border: 1px solid black; background:var(--hh_red); border-radius: 0.5em; display: inline-block; color: #FFF; cursor: pointer; padding: 0.5em 1em; margin: 0.5em 1em 0.5em -0.5em; text-align: center; text-decoration: none; font-size: 1.25em; }

.standardForm input:read-only { background-color: #DDD; }

.standardForm label { font-weight: bold; display: inline-block; margin-bottom: 0.25em; font-size:var(--text_normal); }

#loginForm { min-width: 260px; width: 50%; margin: 0 auto; padding: 1em 1em 0.35em 1em; border: 1px solid #999; border-radius: 0.5em; background: #E0E0E0; color: #000; }

.admin_button { background-color:var(--hh_red); border: 1px solid #000; color: white; padding: 0.5em 0.75em; border-radius: 0.5em; margin: 0 0 1em; display: inline-block; font-size: 1em; cursor: pointer; box-shadow:var(--shadow1); }

.admin_button:hover, .add_record_button:hover { background-color:var(--hh_red_lt); box-shadow: none; }

.admin_button_delete { background-color: #FF0000; }

.admin_button_delete:hover { background-color: #961F1F; }

.admin_delete { float: right; }

a.admin_button { color: white; text-decoration: none; }

.add_record_button { background-color: #2E3192; color: white; padding: 0.4em 0.75em; border-radius: 0.5em; margin: 0 0 0 3em; font-size: 1em; cursor: pointer; }

a.add_record_button { color: #FFF; }

.ul_error { background-color: #FEE2E2; list-style: none; padding: 0; margin: 0 0 1em 0; border: 1px solid red; }

.li_error_item { padding: 0.5em; font-weight: bold; color: #EF4444; }

.admin_table { border: 1px solid black; border-collapse: collapse; margin: 0 auto; }

.admin_table tr { border: 1px solid black; }

.admin_table th { background-color: #CCC; }

.admin_table tr:nth-child(even) { background-color: #DDD; }

.admin_table th, .admin_table td { padding: 0.75em 1em; }

.disabled, .admin_table tr.disabled { background-color: #FDCDCD !important; }

.main_image { background-color: #CDFDCD; }

.content-center { text-align: center; display: block; }

.site_section_image { border: 1px solid black; padding: 1em; text-align: center; display: inline-block; }

.site_section_image img { max-width: 440px; width: 100%; border: 1px solid black; }

.connectedSortable { min-height: 20px; list-style-type: none; margin: 0; padding: 0; }

.active_draggable_div { border: 1px solid black; background-color: #AAA; padding: 1em; }

.droppable { width: 15em; background-color: #CCC; padding: 1em; border: 1px solid black; border-radius: 1em; text-align: center; }

.droppable.active { background: #CFC; }

.droppable.hovered { background: #CCF; }

.dropped { background: #F52; }

.menu_drag { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1em; }

@media screen and (max-width: 1200px)
{
header ul { grid-template-columns: repeat(8, auto); gap: 0.5rem 0; justify-content: space-around; }

.header_logo { grid-column: 1 / -1; }
}

@media screen and (max-width: 880px)
{
header ul { grid-template-columns: repeat(7, auto); justify-content: space-around; }

.social_links { grid-column: 1 / -1; }

.landing { display: grid; grid-template-columns: 3% 300px 3% 3% auto 2% 200px 1% 2% 3%; grid-template-rows: 2em auto 3em auto 1em 1fr 1em auto auto 2em; background-image: url('/storage/landing_bg.webp'); }

.landing_img2 { grid-area: 5 / 7 / 9 / 9; z-index: 3; }

footer { grid-template-columns: repeat(3, 1fr); }

.footer_logo { grid-column: 1 / -1; }
}

@media screen and (max-width: 720px)
{
:root { --section_pad:2rem; }

header ul { grid-template-columns: 1fr; padding-right: 0; }

.landing { grid-template-columns: 50% auto; grid-template-rows: auto auto auto auto; gap: 1rem; padding: 1rem; }

.landingHeader { grid-area: 1 / 1 / 2 / 3; }

.landing_img1 { grid-area: 2 / 1 / 4 / 2; }

.landing_img2 { grid-area: 3 / 2 / 4 / 3; }

.landingWelcome { grid-area: 2 / 2 / 3 / 3; }

.landingSpecialize { grid-area: 4 / 1 / 5 / 3; }

.satisfaction img { float: none; margin: 0 auto 1em auto; max-width: 100%; width: 800px; min-width: 250px; }

footer { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

.footer_social { grid-column: 1 / -1; }
}

@media screen and (max-width: 480px)
{
.landing { grid-template-columns: 1fr; gap: 1rem; }

.landingHeader { grid-area: 1 / 1 / 2 / 2; }

.landing_img1 { grid-area: 2 / 1 / 3 / 2; }

.landingWelcome { grid-area: 3 / 1 / 4 / 2; }

.landing_img2 { grid-area: 4 / 1 / 5 / 2; }

.landingSpecialize { grid-area: 5 / 1 / 6 / 2; }

.services_listing { display: grid; grid-template-columns: 1fr; gap: 1em; }

.service_listing_image { justify-self: center; }

.service_listing_portfolio { color: #000; display: block; margin-bottom: 1.5em; text-align: center; }

.choose img, .about_image, .masonry_image, .jobs_image { float: none; margin: 0 auto 1em auto; max-width: 100%; width: 800px; min-width: 250px; display: block; }

footer { grid-template-columns: 1fr; gap: 1rem; }

.footer_social { grid-column: 1 / -1; }
}