html { font-size: 24px; } @media (max-width: 1400px) and (min-height: 620px) { html { font-size: 22px; } } @media (max-width: 1400px) and (max-height: 620px) { html { font-size: 20px; } } @media (max-width: 1400px) and (max-height: 550px) { html { font-size: 19px; } } @media (max-width: 1000px) and (min-height: 600px) { html { font-size: 20px; } } @media (max-width: 1000px) and (max-height: 600px) { html { font-size: 18px; } } @media (max-width: 850px) and (max-height: 500px) { html { font-size: 16px; } } @media (max-width: 700px) and (min-height: 650px) { html { font-size: 18px; } } @media (max-width: 700px) and (max-height: 650px) { html { font-size: 16px; } } @media (max-width: 700px) and (max-height: 500px) { html { font-size: 14px; } } @media (max-width: 700px) and (max-height: 420px) { html { font-size: 13px; } } @media (max-width: 500px) and (max-height: 700px) { html { font-size: 15px; } } @media (max-width: 380px) and (max-height: 700px) { html { font-size: 14px; } } body, html { margin: 0; padding: 0; } .page_container { width: 100%; z-index: 1; position: relative; } .mat_shadow { -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.7); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.7); } footer { display: table; z-index: 0; bottom: 0; margin: 0; padding: 0; background-color: #616161; width: 100%; height: 8vh; min-height: 50px; } footer p { display: table-cell; vertical-align: middle; margin: 0; font-family: sans-serif; color: #FFFFFF; text-align: center; font-size: 130%; letter-spacing: 1px; font-weight: 500; } .blog_post { width: 100%; height: 34vh; max-height: 300px; min-height: 115px; margin: 30px 0; } .post_thumbnail { height: 100%; width: 35%; float: left; } .post_thumbnail img { width: 100%; height: 100%; object-fit: cover; } .post_info { position: relative; height: 100%; width: 65%; background-color: #FFFFFF; float: right; } .post_title { margin: 0.5em 0; padding: 0 0.5em; color: rgba(0, 0, 0, 0.7); text-transform: uppercase; font-size: 1.24em; font-family: sans-serif; letter-spacing: 0.3px; font-weight: 600; } .post_summary { margin: 0 0 0.5em 0; padding: 0 0.5em; color: rgba(0, 0, 0, 0.5); font-size: 1.1em; font-family: sans-serif; letter-spacing: 0.3px; font-weight: 500; } .post_date { margin: 0; padding: 0 0.5em 0.5em 0; color: #9BC1BC; font-size: 1.1em; font-family: sans-serif; letter-spacing: 0.5px; font-weight: 600; } .date_div { position: absolute; right: 0; bottom: 0; } a { text-decoration: none !important; } a:hover { text-decoration: none !important; cursor: pointer; } a:active, a:after { text-decoration: none !important; } @media (max-width: 750px) { .blog_post { height: 33vh; } } @media (max-width: 500px) and (max-height: 750px) { .blog_post { height: 39vh; } } #mc_embed_signup { text-align: center; } #mc_embed_signup label { margin-top: 10px; font-family: sans-serif; font-size: 1.3em; letter-spacing: 0.5px; line-height: 130%; font-weight: 600; color: rgba(0, 0, 0, 0.7); } #mce-EMAIL { width: 90%; font-family: sans-serif; font-size: 1.3em; letter-spacing: 0.5px; line-height: 200%; font-weight: 500; color: rgba(0, 0, 0, 0.8); max-width: 450px; padding: 0 10px; margin-top: 10px; margin-bottom: 10px; border: none; border-radius: 5px; } #mc-embedded-subscribe { padding: 5px 10px; font-family: sans-serif; font-size: 140%; letter-spacing: 0.5px; line-height: 1.3em; font-weight: 500; color: #FFFFFF; border: none; border-radius: 5px; background-color: #616161; } #mc-embedded-subscribe:hover { cursor: pointer; color: #F4A261; } #full_nav_links { position: absolute; } #nav_div { height: 70px; line-height: 70px; width: 100%; font-family: sans-serif; color: #FFFFFF; font-size: 180%; font-weight: 700; } #nav_div ul { top: 0; right: 0; float: right; margin: 0; padding: 0 1vw 0 0; } #nav_div ul li { display: inline; padding: 1vw; } #nav_div a { color: #FFFFFF; text-decoration: none !important; letter-spacing: 1px; } #nav_div a:hover { color: #F4A261; cursor: pointer; } #nav_logo { max-height: 100%; width: auto; float: left; } #nav_logo:hover { cursor: pointer; } #responsive_menu_button { max-height: 70px; width: auto; float: right; position: absolute; right: 0; top: 0; visibility: collapse; } #responsive_menu_button:hover { cursor: pointer; } #responsive_close_button { max-height: 70px; width: auto; position: absolute; right: 0; top: 0; } #responsive_close_button:hover { cursor: pointer; } #overlay_menu { visibility: collapse; z-index: 2; width: 100%; height: 100%; position: absolute; display: table; top: 0; background-color: rgba(100, 100, 100, 0.94); } #nav_menu { display: table-cell; vertical-align: middle; padding: 0; } #overlay_menu ul { padding: 0; text-align: center; list-style: none; } #overlay_menu ul li { width: 100%; font-family: sans-serif; color: #FFFFFF; font-size: 3em; font-weight: 700; padding-top: 4vh; padding-bottom: 4vh; } #overlay_menu a { color: #FFFFFF; text-decoration: none !important; letter-spacing: 1px; } #overlay_menu a:hover { color: #F4A261; cursor: pointer; } @media (max-width: 950px) { #full_nav_links { visibility: collapse; } #responsive_menu_button { visibility: visible; } } @media (max-width: 1260px) and (min-height: 800px) { #full_nav_links { visibility: collapse; } #responsive_menu_button { visibility: visible; } } @media (max-width: 710px) and (min-height: 800px) { .resp_logo { content: url("../assets/img/logoWHT.svg"); } } @media (max-width: 580px) { .resp_logo { content: url("../assets/img/logoWHT.svg"); } } @media (min-height: 800px) { #nav_div { height: 100px; line-height: 100px; font-size: 225%; } #responsive_close_button { max-height: 100px; } #responsive_menu_button { max-height: 100px; } } @media (max-height: 800px) { #nav_div { height: 70px; line-height: 70px; font-size: 180%; } #responsive_close_button { max-height: 70px; } #responsive_menu_button { max-height: 70px; } } @media (max-width: 650px) and (max-height: 700px) { #nav_div { height: 70px; line-height: 70px; font-size: 180%; } #responsive_close_button { max-height: 70px; } #responsive_menu_button { max-height: 70px; } } html { width: 100%; } body { width: 100%; background-color: #9BC1BC; padding: 0; margin: 0; } #main_content { margin: 0 auto; width: 94%; height: auto !important; min-height: 90%; overflow: auto; max-width: 920px; padding: 3% 3% 40px; } #post_info { width: 95%; max-width: 920px; position: absolute; bottom: 7vh; left: 0; right: 0; margin: auto; } #post_info a { display: block; width: 100%; max-width: 600px; font-family: 'Lucida Grande', sans-serif; text-transform: uppercase; font-size: 1.8em; font-weight: 700; margin: 0; line-height: 110%; letter-spacing: 3px; color: #FFFFFF; text-shadow: 0 6px 8px rgba(0, 0, 0, 0.7); text-decoration: none; } #post_info a:hover { cursor: pointer; color: #F4A261; } #post_info a:active, a:after { text-decoration: none; } #summary { width: 100%; max-width: 600px; font-family: 'Lato', sans-serif; font-size: 1.3em; margin: 3vh 0; line-height: 130%; letter-spacing: 1px; color: #FFFFFF; text-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); } .details { font-family: sans-serif; color: #BDBDBD; font-size: 1.1em; font-weight: 100; letter-spacing: 0.8px; padding-right: 5px; text-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); } #social_media_icons { padding-top: 20px; padding-bottom: 60px; } #social_media_icons img { width: 15vw; max-width: 80px; padding-left: 1.5vw; padding-right: 1.5vw; } #social_media_icons ul { text-align: center; margin: 0; padding: 0; } #social_media_icons ul li { display: inline; padding: 1vw; } #blog_list_statement { padding-top: 20px; font-family: sans-serif; text-transform: uppercase; font-size: 1.7em; letter-spacing: 0.5px; line-height: 120%; font-weight: 600; color: rgba(0, 0, 0, 0.7); } #more_button { float: right; font-family: sans-serif; text-transform: uppercase; font-size: 220%; letter-spacing: 0.5px; line-height: 150%; font-weight: 600; color: #FFFFFF; } #more_button:hover { cursor: pointer; color: #F4A261; }