@charset "utf-8"; /* CSS Document */ /*############################################# NOTES */ /* NB: Margins: T-R-B-L, T-RL-B, TB-RL, TRBL */ /*BREAK POINTS: 576 - 768 - 992 - 1200 */ /* ******************************** BOX SIZING - NECESSARY? */ /* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */ /* LLLLLLLLLLLLLLLLLLLLLLL B O D Y & REGIONS - LAYOUT */ /* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */ /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ /* */ /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* ############################################################ */ /* #################################################### SECTION */ /* ############################################################ */ /* */ /* #################################################### BODY */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% DEV \ DEBUG AIDS %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* ------------------------------- SWITCH BORDER ON \ OFF */ /* --------------- class=seeborder applied to */ /* --------------- uncomment the whole block to activate */ /* .seeborder div { border: 1px solid red; } .seeborder img { border: 1px dashed black; } .seeborder figure { border: 1px dashed red; } .seeborder p, .seeborder h1, .seeborder h2, .seeborder h3, .seeborder h4, .seeborder h5, .seeborder h6, .seeborder ul, .seeborder li { border: 1px solid blue; } */ /* ------------------------------- END --- SWITCH BORDER ON \ OFF */ body { font-family: Verdana, Geneva, Tahoma, sans-serif; /* background-image: url("../images/back_water-8.jpg"); */ background-color: rgb(235, 255, 246); color: black; font-size: 16px; line-height: 26px; margin: 0; } body p { margin-left: 0; margin-right: 0; margin-top: 10px; margin-bottom: 10px; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ /* ---------------- Redundant once

margin set to 0 */ /* @media screen and (max-width: 600px) { body p { margin-left: 5px; } } */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% BUILT IN ELEMENT DEFAULTS %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ * { box-sizing: border-box; } /* ******************************** DEFAULT IMAGE 100% CONTAINER WIDTH */ img { vertical-align: middle; margin-bottom: 5px; width: 100%; height: auto; } /* ******************************** REMOVE

MARGINS */ figure { margin: 0; padding: 0; } figcaption { font-family: Arial, Helvetica, sans-serif; font-style: italic; margin-bottom: 5px; line-height: 18px; color: darkblue; } /* ******************************** HEADINGS */ h1, h2, h3, h4, h5, h6 { font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; color: darkblue; line-height: 110%; margin-top: 15px; margin-bottom: 15px; } h1 { font-size: 300%; } h2 { font-size: 250%; } h3 { font-size: 200%; } h4 { font-size: 175%; } h5 { font-size: 150%; } h6 { font-size: 125%; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 600px) { h1 { font-size: 200%; } h2 { font-size: 180%; } h3 { font-size: 160%; } h4 { font-size: 150%; } h5 { font-size: 140%; } h6 { font-size: 110%; } h1, h2, h3, h4, h5, h6 { line-height: 110%; margin-top: 5px; margin-bottom: 5px; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% TEXT ATTRIBUTES */ /* Bold ... Italic ... Strikethrough ~~...~~ Subscript _... Superscript ^... Underline ... - Indicates a mispelling */ /* redundant but used extensively */ .t-bold { font-weight: bold; } .t-bigbold { font-weight: bold; font-size: 110%; } .t-white { color: white; } .t-red { color: red; } .t-blue { color: blue; } .t-yellow { color: yellow; } .t-grey { color: grey; } .t-black { color: black; font-weight: bold; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ALIGNMENT */ /* ------------------- Indents a bit of a mess */ /* Used only in Galeodan \ Contact modal - All pages */ .indent-20 { margin-left: 20px; } .indent-20 p { margin-left: 20px; } .indent-30 { margin-left: 30px; } .indent-30 p { margin-left: 30px; } /* ------------------- more indent for list - bit of a mess */ /* Used only in Rates-Policies - indented text and lists - Find better way */ .indent-30 ul { margin-left: 50px; } /* Used only in Suites tabs - Why not use headers? */ .t-big { font-size: 120%; line-height: 150%; } /* To left-align an element */ .leftalign { margin-left: 0; } /* To leftalign all paras in a div etc. */ .leftalign p { margin-left: 0; } .topalign { margin-top: 0; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 600px) { .topalign { margin-top: 10px; } } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 600px) { .indent-20, .indent-30, .indent-30 p, .indent-30 ul { margin-left: 0; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% RULERS */ /* */ /* ------------------------------- SECTION RULER ON \ OFF */ /* place hr between sections & switch on to see */ hr.guide { border-top: 2px dotted red; } hr.invisible { border: none; margin: 0; } hr.invisible-6 { border: none; margin: 6px; } /* --------------------------------- INNER PAGE PAGE BREAK */ hr.pagebreak { border: 5px solid rgb(235, 255, 246); background-color: rgb(235, 255, 246); margin: 0 -30px; } hr.thick { border: 2px solid green; background-color: green; } hr.thick-tm30 { border: 2px solid green; background-color: green; margin-top: 30px; } hr.band { border: 6px solid green; background-color: green; margin: 0; } hr.offset-30 { border: none; border-bottom: 4px solid green; height: 30px; } hr.offset-top { border: none; /* border-top: 4px solid green; */ height: 80px; } hr.offset-50 { border: none; border-bottom: 4px solid green; height: 50px; } hr.offset-80 { border: none; border-bottom: 4px solid green; height: 80px; } /* --------Old offset-80 with margin below */ hr.offset-80-OLD { border: 2px solid green; background-color: green; margin-bottom: 80px; } /* ---------- Offset for jumping to above page Anchors */ hr.anchorspace { border: none; /* margin-top: 0px; */ height: 70px; } /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% INNER PAGE %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ .innerpage-full, .innerpage-1100, .innerpage-1200, .innerpage-1300, .innerpage-1400, .innerpage-1500, .innerpage-1600, .innerpage-1700, .innerpage-1800, .innerpage-1900, .innerpage-2000 { background-color: rgb(215, 255, 215); color: black; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 10px; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; } .innerpage-1100 { max-width: 1100px; } .innerpage-1200 { max-width: 1200px; } .innerpage-1300 { max-width: 1300px; } .innerpage-1400 { max-width: 1400px; } .innerpage-1500 { max-width: 1500px; } .innerpage-1600 { max-width: 1600px; } .innerpage-1700 { max-width: 1700px; } .innerpage-1800 { max-width: 1800px; } .innerpage-1900 { max-width: 1900px; } .innerpage-2000 { max-width: 2000px; } .innerpage-full { width: 100%; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm - 901 to 1200px */ @media screen and (min-width: 901px) and (max-width: 1200px) { .innerpage-1100, .innerpage-1200, .innerpage-1300, .innerpage-1400, .innerpage-1500, .innerpage-1600, .innerpage-1700, .innerpage-1800, .innerpage-1900, .innerpage-2000 { margin-left: 0px; margin-right: 0px; } } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 900px */ @media screen and (max-width: 900px) { .innerpage-1100, .innerpage-1200, .innerpage-1300, .innerpage-1400, .innerpage-1500, .innerpage-1600, .innerpage-1700, .innerpage-1800, .innerpage-1900, .innerpage-2000 { margin-left: 0px; margin-right: 0px; width: 100%; max-width: 100%; padding-left: 10px; padding-right: 10px; } } /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% MAXWIDTH %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* */ /* ------------------------------ MAXWIDTH -------- */ /* */ .maxwidth-700, .maxwidth-800, .maxwidth-900, .maxwidth-1000, .maxwidth-1100, .maxwidth-1200, .maxwidth-1300, .maxwidth-1400, .maxwidth-1500, .maxwidth-1600, .maxwidth-1700, .maxwidth-1800, .maxwidth-1900, .maxwidth-2000 { margin-left: auto; margin-right: auto; } .maxwidth-700 { max-width: 700px; } .maxwidth-800 { max-width: 800px; } .maxwidth-900 { max-width: 900px; } .maxwidth-1000 { max-width: 1000px; } .maxwidth-1100 { max-width: 1100px; } .maxwidth-1200 { max-width: 1200px; } .maxwidth-1300 { max-width: 1300px; } .maxwidth-1400 { max-width: 1400px; } .maxwidth-1500 { max-width: 1500px; } .maxwidth-1600 { max-width: 1600px; } .maxwidth-1700 { max-width: 1700px; } .maxwidth-1800 { max-width: 1800px; } .maxwidth-1900 { max-width: 1900px; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 900px */ @media screen and (max-width: 900px) { .maxwidth-700, .maxwidth-800, .maxwidth-900, .maxwidth-900, .maxwidth-1000, .maxwidth-1100, .maxwidth-1200, .maxwidth-1300, .maxwidth-1400, .maxwidth-1500, .maxwidth-1600, .maxwidth-1700, .maxwidth-1800, .maxwidth-1900, .maxwidth-2000 { margin-left: 0px; margin-right: 0px; width: 100%; max-width: 100%; /* padding-left: 10px; */ /* padding-right: 10px; */ } } /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% MISCELLANEOUS %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ .fullwidth { width: 100%; height: auto; } .linkcaption { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; line-height: 90%; color: black; text-align: center; margin-top: 5px; margin-bottom: 5px; padding: 0%; } .suiteslink { background-color: yellow; max-width: 190px; max-height: 135px; /* border: 2px solid black; */ } .linkborder { border: solid 1px rgb(5, 66, 5); } /* DEFUNCT - REMOVE */ .footerborder { border-top: solid 2px rgb(7, 95, 26); } /* ----------------- REDUNDANT - DEPRECATE */ .contentheading { font-family: Georgia, "Times New Roman", Times, serif; font-size: 150%; font-weight: bold; margin-top: 0px; margin-bottom: 10px; color: black; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 800px */ /* --------------------- WRAPAT's only functional with Media Query */ /* */ @media screen and (max-width: 800px) { .wrapat-800 { float: none; width: 100%; } .wrapat-800 div { float: none; width: 100%; } .wrapat-800 img { float: none; width: 100%; } .wrapat-800 p { float: none; width: 100%; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 1000px */ @media screen and (max-width: 1000px) { .wrapat-1000 { float: none; width: 100%; } .wrapat-1000 div { float: none; width: 100%; } .wrapat-1000 img { float: none; width: 100%; } .wrapat-1000 p { float: none; width: 100%; } .wrapat-1000 table { float: none; width: 100%; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* ******************************** IMAGE ATTRIBUTES */ .g-border { border: solid 2px green; } /* ---------------------- IMAGE RELATIVE */ /* ----------- FOR TEXT IN IMAGES, BANNERTEXT ETC. */ .imagewithtext { position: relative; } /* ------------------- IN USE? */ .light { background-color: green; } .width-1000 { max-width: 1000px; } /* ------------- CLEARFIX HACK - PUT IN THE DIV THAT NEEDS IT */ /* ------------- WRAPPERS GENERALLY ACCOMPLISH SAME */ .clearfix::after { content: ""; clear: both; display: table; } /* --------- NOT SURE THIS WORKS */ .clear { clear: both; margin: 0; } .clearfloat { overflow: hidden; } /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% MISC STRUCTUES %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ .topblackheader { background-color: black; /* font-size: 2vw; */ font-size: 200%; line-height: 100%; color: yellow; font-family: Georgia, "Times New Roman", Times, serif; padding: 0; padding-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 20px; margin-top: 0; margin-bottom: 0; /* height: 40px; */ } .tabheader { background-color: black; /* font-size: 2vw; */ font-size: 200%; line-height: 100%; color: yellow; font-family: Georgia, "Times New Roman", Times, serif; padding: 0; padding-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 20px; margin-top: 0; margin-bottom: 0; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 600px) { .topblackheader { padding-top: 5px; padding-bottom: 5px; } .tabheader { font-size: 100%; padding-top: 5px; padding-bottom: 5px; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ .alertbox { font-family: Arial, Helvetica, sans-serif; background-color: black; border: 2px solid red; padding: 0 20px; margin: 15px 30px; font-size: 125%; /* font-weight: bold; */ color: yellow; } /* %%%%%%%%%%%%%%% LISTS %%%%%%%%%%%%%%%% */ /* GENERIC LIST */ /* ------------

padding-left: 40px default to show symbols */ li { line-height: 130%; margin-top: 10px; margin-bottom: 10px; } /* BOLD LIST */ .biglist li { /* font-size: 100%; */ font-weight: bold; line-height: 95%; margin-top: 10px; margin-bottom: 10px; } /* BIGGER FONT LIST */ .biggerlist li { font-size: 24px; font-weight: bold; line-height: 120%; margin-top: 10px; margin-bottom: 10px; } .sublist li { font-size: 80%; /* line-height: 150%; */ } /* sublist text 100% to avoid double-sizing */ .textlist p { line-height: 80%; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 600px) { .biggerlist li { font-size: 20px; } } @media screen and (max-width: 600px) { .leftindent-30 ul { padding-left: 20px; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* #################################################### REDUCED WIDTH */ /* */ .width-50, .width-70 { margin-left: auto; margin-right: auto; } .width-50 { width: 50%; } .width-70 { width: 70%; } .width-50 img, .width-70 img { max-width: 100%; height: auto; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 600px) { .width-50, .width-70 { width: 100%; } } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% LINKS %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* ---------------- DARKLINK - FOR LIGHT BACKGROUND*/ /* */ .darklink a:link, .darklink a:link { color: blue; font-weight: bold; } .darklink a:visited, .darklink a:visited { color: blue; } .darklink a:hover, .darklink a:hover { color: red; } .darklink a:active, .darklink a:active { color: blue; } /* ---------------- LIGHTLINK - FOR DARK BACKGROUND*/ /* */ .lightlink a:link, .lightlink a:link { font-weight: bold; color: lime; /* font-style: italic; */ /* text-decoration: none; */ } .lightlink a:visited, .lightlink a:visited { color: lime; } .lightlink a:hover, .lightlink a:hover { color: red; } .lightlink a:active, .lightlink a:active { color: lime; } /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% LINK-BUTTONS %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% WHATSAPP %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ .whatsapp-button { width: 400px; border: 2px black solid; border-radius: 10%; background-color: rgb(12, 247, 157); font-weight: bold; color: white; padding: 5px; float: right; /* overflow: hidden; */ text-decoration: none; /* box-shadow: -5px 5px 3px black; */ } /* %%%%%%%%%%%%%%%%%%%%%%%%%%% GO TOP %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ .gotop-button { width: 70px; border: 2px black solid; border-radius: 10%; background-color: mediumspringgreen; font-weight: bold; color: black; padding: 5px; float: right; /* overflow: hidden; */ text-decoration: none; /* box-shadow: -5px 5px 3px black; */ } .gotop-button:hover { background-color: yellow; } /* ---------------------- FOR LINKS */ .gotop-button a { text-decoration: none; } .gotop-button a:link, .gotop-button a:visited { /* text-decoration: none; */ color: black; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%% FLOATING GOTOP-BUTTON %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ #gotopBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 900; font-size: 18px; border: solid 1px black; outline: none; background-color: rgb(43, 97, 64); color: white; cursor: pointer; padding: 10px; border-radius: 4px; } #gotopBtn:hover { background-color: rgb(226, 255, 119); color: black; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%% MISC BUTTON %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ .button-1 { background-color: #4caf50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%% GOBACK BUTTON %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ .gobackbtn { background-color: #4caf50; /* Green */ border: none; color: white; padding: 10px; text-align: center; font-weight: bold; text-decoration: none; display: inline-block; font-size: 16px; } /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% PAGE HEADER %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* ----------------------------HEADER PANEL WRAPPER - COMMON */ .headerpanelwrapper { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; overflow: hidden; margin: 0; padding: 0; background-color: rgb(200, 255, 200); /* color: lightyellow; */ overflow: hidden; } /* ------------------------------ HELENAVISTA HEADER BLOCKS */ /* */ .headerblock-hv-left { max-width: 100px; width: 7%; margin: 4px; } .headerblock-hv-center { width: 85%; margin: 0; } .headerblock-hv-right { max-width: 50px; width: 5%; margin-right: 4px; line-height: 0; } /* ---------------------------------------- HELENAVISTA & COVID TITLE OVER SUBTITLE */ /* */ .headerblock-hv-title { font-family: "Times New Roman", Times, serif; color: black; font-size: 3vw; line-height: 105%; margin: 0; text-align: left; } .headerblock-hv-subtitle { font-family: "Times New Roman", Times, serif; color: black; font-size: 2vw; line-height: 50%; margin: 0; margin-top: 5px; margin-bottom: 5px; text-align: left; } /* ------------------------------ GALEODAN HEADER BLOCKS */ /* */ .headerblock-ga-left { max-width: 100px; width: 7%; margin: 4px; } .headerblock-ga-center-l { width: 20%; margin: 0; } .headerblock-ga-center-2 { width: 65%; margin: 0; } .headerblock-ga-right { max-width: 50px; width: 5%; margin-right: 4px; line-height: 0; } /* ---------------------------------------- GALEODAN HEADER TEXTS */ .headerblock-ga-title { font-family: "Times New Roman", Times, serif; color: black; font-size: 5vw; line-height: 110%; margin: 0; text-align: left; } .headerblock-ga-subtitle { font-family: "Times New Roman", Times, serif; color: black; font-size: 2.3vw; line-height: 95%; margin: 0; text-align: left; } /* ------------------------------ SHARED PAGES HEADER ELEMENTS */ /* ------------------------------ DOUBLE LOGO */ .headerblock-co-left { display: flex; max-width: 100px; max-width: 200px; width: 12%; margin: 0; } .headerblock-co-left img { padding: 3px; max-width: 150px; } .headerblock-co-center { width: 80%; } .headerblock-co-right { max-width: 50px; width: 5%; margin-right: 4px; line-height: 0; } /* ------------------------- FLAGS */ /* --------------- Class = English or Spanish tells script what to do */ /* CURRENT FLAG FADED */ .currentflag img { padding: 0; border: solid 1px black; margin-bottom: 3px; opacity: 0.3; } /* OTHER FLAG - SIMPLE LINK */ .otherflag { padding: 0; border: solid 1px black; margin: 0; cursor: pointer; } .otherflag img { margin: 0; } /* OTHER FLAG USING SCRIPT */ #langBtn { padding: 0; border: solid 1px black; margin: 0; cursor: pointer; } #langBtn img { margin: 0; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 600px) { /* --------------------HELENAVISTA */ .headerblock-hv-left { width: 10%; } .headerblock-hv-center { width: 75%; } .headerblock-hv-right { width: 9%; } .headerblock-hv-title { font-size: 4vw; } .headerblock-hv-subtitle { font-size: 3vw; } /* -------------------- GALEODAN */ .headerblock-ga-left { width: 10%; } .headerblock-ga-center-1 { width: 25%; } .headerblock-ga-center-2 { width: 50%; } .headerblock-ga-right { width: 9%; margin: 0; } .headerblock-ga-title { /* font-size: 5vw; */ font-size: 5vw; } .headerblock-ga-subtitle { font-size: 3vw; } } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 700px) { /* -------------------- COMMON - 2x LOGO */ .headerblock-co-left { padding: 0; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% RESPONSIVE DROPDOWN MENU %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% REQUIRES JAVASCRIPT FOR RESPONSIVE */ /* */ /* */ /* NB: Margins: T-R-B-L, T-RL-B, TB-RL, TRBL */ /* */ /* ------------------------ TOPNAV */ /* */ .topnav { background-color: rgb(63, 100, 56); position: -webkit-sticky; position: sticky; top: 0; z-index: 999; } /* burger icon - responsive nav */ .topnav .icon { display: none; } .topnav a { float: left; display: block; /* min-width: 80px; */ font-family: "Times New Roman", Times, serif; color: yellow; text-align: center; padding: 6px 15px; text-decoration: none; font-size: 17px; line-height: 20px; border-right: solid 1px grey; } /* single line button */ .topnav .oneline { padding: 16px 15px; } #contactBtn { padding: 0; padding: 16px 15px; cursor: pointer; } .dropdown { float: left; overflow: hidden; font-family: "Times New Roman", Times, serif; } .dropdown .dropbtn { font-size: 17px; line-height: 20px; border: none; outline: none; color: yellow; padding: 6px 15px; background-color: inherit; font-family: inherit; margin: 0; border-right: solid 1px grey; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); border-top: 1px solid grey; z-index: 99; } .dropdown-content a { float: none; color: yellow; background-color: rgb(37, 65, 31); padding: 10px 16px; text-decoration: none; display: block; text-align: left; border-top: 1px solid grey; } .active { background-color: black; color: red; } /* ---------- SUBNAV */ /* */ .subnav { background-color: rgb(72, 75, 247); position: -webkit-sticky; position: sticky; /* min-height: 30px; */ top: 52px; z-index: 99; overflow: hidden; } .subnav a { float: left; /* min-width: 90px; */ display: block; font-family: "Times New Roman", Times, serif; color: yellow; text-align: center; padding: 5px 10px; text-decoration: none; font-size: 17px; line-height: 20px; border-top: 1px solid grey; border-bottom: 1px solid grey; border-right: 1px solid rgb(212, 210, 210); } .slimnav { background-color: rgb(10, 81, 34); position: -webkit-sticky; position: sticky; /* min-height: 30px; */ top: 0; z-index: 99; overflow: hidden; } .slimnav a { float: left; /* min-width: 90px; */ display: block; font-family: "Times New Roman", Times, serif; color: yellow; text-align: center; padding: 5px 10px; text-decoration: none; font-size: 17px; line-height: 20px; border-top: 1px solid grey; border-bottom: 1px solid grey; border-right: 1px solid rgb(212, 210, 210); } /* ---------- PAGENAV */ /* */ .pagenav { /* background-color: rgb(63, 100, 56); */ background-color: rgb(72, 75, 247); position: -webkit-sticky; position: sticky; /* min-height: 30px; */ top: 55px; z-index: 99; overflow: hidden; } .pagenav a { float: left; /* min-width: 90px; */ display: block; font-family: "Times New Roman", Times, serif; color: yellow; text-align: center; padding: 5px 10px; text-decoration: none; font-size: 17px; line-height: 20px; border-top: 1px solid grey; border-right: 1px solid rgb(212, 210, 210); } .botnav { overflow: hidden; background-color: rgb(63, 100, 56); } .botnav a { float: left; display: block; min-width: 15%; font-family: "Times New Roman", Times, serif; color: yellow; text-align: center; padding: 10px 15px; text-decoration: none; font-size: 17px; border-right: 1px solid grey; } /* hover settings */ .topnav a:hover, .subnav a:hover, .pagenav a:hover, .dropdown:hover .dropbtn { background-color: rgb(52, 0, 194); color: yellow; } .topnav a:hover, .subnav a:hover, .pagenav a:hover { background-color: rgb(45, 58, 199); color: yellow; } .dropdown-content a:hover { background-color: rgb(37, 7, 115); color: yellow; } .dropdown:hover .dropdown-content { background-color: black; color: yellow; display: block; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 700px */ /* */ @media screen and (max-width: 700px) { .topnav a, .dropdown .dropbtn { display: none; border-bottom: 1px solid whitesmoke; } .topnav a.icon { float: right; display: block; color: white; font-weight: bold; } .topnav.responsive { position: -webkit-sticky; position: sticky; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown { float: none; } .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } .topnav.responsive .dropdown-content { position: relative; text-align: center; } /* indent the burger-nav dropdowns */ .topnav.responsive .dropdown-content a { padding-left: 50px; } .subnav { top: 30px; } .subnav a { /* padding: 5px 10px; */ padding: 3px 5px; /* font-size: 17px; */ font-size: 12px; /* line-height: 20px; */ line-height: 15px; } .pagenav { top: 30px; } .pagenav a { /* padding: 5px 10px; */ padding: 3px 5px; /* font-size: 17px; */ font-size: 12px; /* line-height: 20px; */ line-height: 15px; } /* ----------- Disabled */ .sub nav a { padding: 5px 5px; font-size: 14px; } /* ----------- Disabled */ .page nav a { padding: 5px 5px; font-size: 14px; } } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% NON-RESPONSIVE DROPDOWN MENU %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* NB: Margins: T-R-B-L, T-RL-B, TB-RL, TRBL */ /* */ .fixedtopnav { background-color: rgb(63, 100, 56); position: -webkit-sticky; position: sticky; top: 0; z-index: 999; } .fixedtopnav a { float: left; display: block; min-width: 80px; font-family: "Times New Roman", Times, serif; color: yellow; text-align: center; padding: 5px 15px; text-decoration: none; font-size: 17px; line-height: 20px; border-top: 1px solid grey; border-right: 1px solid grey; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%% < PREVIOUS PAGE BUTTON %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% HERO IMAGE - HELENAVISTA %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ .heroimage-hv-home { background-image: url("images/scenic-cristobal_2013-03-12_105157-hero-1.jpg"); height: 500px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .heroimage-1-shaded { background-image: linear-gradient(rgba(156, 73, 73, 0.7), rgba(0, 0, 0, 0)), url("images/scenic-cristobal_2013-03-12_105157-hero-1.jpg"); height: 600px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% HERO IMAGE - GALEODAN %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* ------------------ Images in css/images/ */ /* */ .heroimage-ga-home { background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), url("images/fish-marlin_2011-03-04_110045(2000).jpg"); height: 700px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .heroimage-ga-aboutgalapagos { background-image: url("images/scenic-cristobal_2009-05-05_165957_d300_(hdr)(2000).jpg"); height: 500px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 600px) { .heroimage-ga-home { background-image: url("images/fish-marlin_2011-03-04_110045(6x4).jpg"); height: 500px; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% PARALLAX %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ .parallax { /* The image used */ /* background-image: url("../images/scenic_2013-03-12_105157.jpg"); */ background-image: url("/images/scenic_2013-03-12_105157.jpg"); /* Set a specific height */ min-height: 500px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% TEXT IN IMAGES %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% IMAGE = RELATIVE, TEXT = ABSOLUTE %%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* */ /* */ /* ------------------------------ PAGE BANNER HEADER */ .bannerh1-sub, .bannerh1-topleft, .bannerh1-topcenter, .bannerh1-topright, .bannerh1-left, .bannerh1-center, .bannerh1-right, .bannerh1-btmleft, .bannerh1-btmcenter, .bannerh1-btmright { font-size: 4.5vw; font-style: italic; font-weight: normal; position: absolute; line-height: 100%; color: yellow; margin: 0; text-shadow: 1px 1px 5px black; } .bannerh1-sub { font-size: 3vw; } .bannerh1-topleft { top: 1vw; left: 2vw; } .bannerh1-topcenter { top: 1vw; left: 50%; transform: translate(-50%, 0%); } .bannerh1-topright { top: 1vw; right: 2vw; } .bannerh1-left { top: 50%; left: 2vw; transform: translate(0, -50%); } .bannerh1-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .bannerh1-right { top: 50%; right: 2vw; transform: translate(0, -50%); } .bannerh1-btmleft { bottom: 1vw; left: 2vw; } .bannerh1-btmcenter { bottom: 1vw; left: 50%; transform: translate(-50%, 0%); } .bannerh1-btmright { bottom: 1vw; right: 2vw; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 800px */ @media screen and (max-width: 800px) { .bannerh1-topleft, .bannerh1-topcenter, .bannerh1-topright, .bannerh1-left, .bannerh1-center, .bannerh1-right, .bannerh1-btmleft, .bannerh1-btmcenter, .bannerh1-btmright { font-size: 6vw; /* text-shadow: 1px 1px black; */ } .bannerh1-sub { font-size: 5vw; } /* ----------------- Top */ .bannerh1-topleft, .bannerh1-topcenter, .bannerh1-topright { top: 1.5vw; } /* ----------------- Bottom */ .bannerh1-btmleft, .bannerh1-btmcenter, .bannerh1-btmright { bottom: 1.5vw; } /* ----------------- Left */ .bannerh1-topleft, .bannerh1-left, .bannerh1-btmleft { left: 10px; } /* ----------------- Right */ .bannerh1-topright, .bannerh1-right, .bannerh1-btmright { right: 10px; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* ------------------------------ PAGE BANNER TEXT */ .bannertext-topleft, .bannertext-topcenter, .bannertext-topright, .bannertext-left, .bannertext-center, .bannertext-right, .bannertext-btmleft, .bannertext-btmcenter, .bannertext-btmright { font-size: 4vw; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; position: absolute; line-height: 100%; color: yellow; /* text-shadow: 3px 3px black; */ text-shadow: 2px 2px 3px black; } .bt-subtext { font-size: 3vw; } .bannertext-topleft { top: 1vw; left: 2vw; } .bannertext-topcenter { top: 1vw; left: 50%; transform: translate(-50%, 0%); } .bannertext-topright { top: 1vw; right: 2vw; } .bannertext-left { top: 50%; left: 2vw; transform: translate(0, -50%); } .bannertext-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .bannertext-right { top: 50%; right: 2vw; transform: translate(0, -50%); } .bannertext-btmleft { bottom: 1vw; left: 2vw; } .bannertext-btmcenter { bottom: 1vw; left: 50%; transform: translate(-50%, 0%); } .bannertext-btmright { bottom: 1vw; right: 2vw; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 800px */ @media screen and (max-width: 800px) { .bannertext-topleft, .bannertext-topcenter, .bannertext-topright, .bannertext-left, .bannertext-center, .bannertext-right, .bannertext-btmleft, .bannertext-btmcenter, .bannertext-btmright { font-size: 6vw; } .bt-subtext { font-size: 5vw; } /* ----------------- Top */ .bannertext-topleft, .bannertext-topcenter, .bannertext-topright { top: 1.5vw; } /* ----------------- Bottom */ .bannertext-btmleft, .bannertext-btmcenter, .bannertext-btmright { bottom: 1.5vw; } /* ----------------- Left */ .bannertext-topleft, .bannertext-left, .bannertext-btmleft { left: 10px; } /* ----------------- Right */ .bannertext-topright, .bannertext-right, .bannertext-btmright { right: 10px; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* ---------------------------------- REGULAR TEXT IN IMAGE */ .imagetext-btmcenter, .imagetext-btmleft, .imagetext-btmright, .imagetext-center, .imagetext-topcenter, .imagetext-topleft, .imagetext-topright { position: absolute; font-size: 16px; line-height: 110%; font-family: Arial, Helvetica, sans-serif; padding: 0; } .imagetext-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .imagetext-topcenter { top: 0.5vw; left: 50%; transform: translate(-50%, 0%); } .imagetext-btmcenter { bottom: 10px; left: 50%; transform: translate(-50%, 0%); } .imagetext-topleft { top: 0.5vw; left: 1vw; } .imagetext-topright { top: 0.5vw; right: 1vw; } .imagetext-btmleft { bottom: 10px; left: 1vw; } .imagetext-btmright { bottom: 10px; right: 1vw; } .t-link-center { position: absolute; font-size: 16px; line-height: 100%; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 600px) { .imagetext-btmcenter, .imagetext-btmleft, .imagetext-btmright, .imagetext-center, .imagetext-topcenter, .imagetext-topleft, .imagetext-topright { font-size: 12px; } .t-link-center { font-size: 14px; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% TEXT-WRAPPED IMAGES %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* -------------- WRAP-RIGHT = IMAGE FLOAT > RIGHT */ /* -------------- WRAP-LEFT = IMAGE FLOAT > LEFT */ /* -------------- CLASS = WRAPIMAGE WRAP-RIGHT(LEFT) FIGSIZE-## */ /* */ .wrapimage { padding-left: 0; padding-right: 0; overflow: hidden; } .wrapimage img { width: 100%; } .wrap-right figure { float: right; margin-left: 10px; } /* Can't specify 100% width video in HTML - Use css */ .video-100pc { width: 100%; height: auto; } .wrap-left figure { float: left; margin-right: 10px; margin-left: 0; } /* ------------------- FIGURE SIZE - % */ .figsize-10 figure { width: 10%; } .figsize-15 figure { width: 15%; } .figsize-20 figure { width: 20%; } .figsize-25 figure { width: 25%; } .figsize-30 figure { width: 30%; } .figsize-35 figure { width: 35%; } .figsize-40 figure { width: 40%; } .figsize-45 figure { width: 45%; } .figsize-50 figure { width: 50%; } .figsize-55 figure { width: 55%; } .figsize-60 figure { width: 60%; } .figsize-65 figure { width: 65%; } .figsize-70 figure { width: 70%; } .figsize-75 figure { width: 75%; } .figsize-80 figure { width: 80%; } .figsize-85 figure { width: 85%; } .figsize-49 figure { width: 49%; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 600px) { .wrapimage { padding-left: 0; padding-right: 0; } .wrapimage figure { /* ------------------- DO NOT USE FLOAT:NONE - SCREWS UP IMAGETEXT */ margin: 0; width: 100%; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% FLEXBLOCKS %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* -------------- NO FLOAT, SHRINKS AS SCREEN SHRINKS --## */ /* */ .footer-wrapper, .flexblocks-wrapper { display: flex; flex-wrap: wrap; position: relative; overflow: hidden; justify-content: space-between; } .nomargin p { margin-left: 0; } .footer-wrapper { background-color: rgb(185, 233, 183); padding: 5px; border-top: solid 2px rgb(7, 95, 26); } .copyright { background-color: rgb(185, 233, 183); padding: 10px; padding-top: 0; text-align: center; } .copyright p { margin-top: 0; } .flexblocks-wrapper.reverse { flex-wrap: wrap-reverse; } /* --------------- NOT USED? */ /* .float-right img { float: right; } .float-left img { float: left; } */ .vcenter { align-items: center; } /* ------------- Flexblocks - by % */ .flexblock-5 { width: 4.5%; } .flexblock-10 { width: 9.5%; } .flexblock-15 { width: 14.5%; } .flexblock-20 { width: 19.5%; } .flexblock-25 { width: 24.5%; } .flexblock-30 { width: 29.5%; } .flexblock-33 { width: 33%; } .flexblock-35 { width: 34.5%; } .flexblock-40 { width: 39.5%; } .flexblock-45 { width: 44.5%; } .flexblock-47 { width: 47%; } .flexblock-50 { width: 49.5%; } .flexblock-55 { width: 54.5%; } .flexblock-60 { width: 59.5%; } .flexblock-65 { width: 64.5%; } .flexblock-70 { width: 69.5%; } .flexblock-75 { width: 74.5%; } .flexblock-80 { width: 79.5%; } .flexblock-85 { width: 84.5%; } .flexblock-90 { width: 89.5%; } /* ------------- Flexblocks - by Fraction */ .flexblock-half { width: 49%; } .flexblock-eighth { width: 12.5%; } .flexblock-sixth { width: 16.3%; } .flexblock-quarter { width: 24.5%; } .flexblock-third { width: 33%; } .flexblock-2thirds { width: 66%; } .flexblock-5 img, .flexblock-10 img, .flexblock-15 img, .flexblock-20 img, .flexblock-25 img, .flexblock-30 img, .flexblock-35 img, .flexblock-40 img, .flexblock-45 img, .flexblock-47 img, .flexblock-50 img, .flexblock-55 img, .flexblock-60 img, .flexblock-62 img, .flexblock-70 img, .flexblock-75 img, .flexblock-80 img, .flexblock-85 img, .flexblock-90 img, .flexblock-half img, .flexblock-eighth img, .flexblock-sixth img, .flexblock-quarter img, .flexblock-third img, .flexblock-half img, .flexblock-2thirds img { max-width: 100%; height: auto; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 600px) { .flexblock-5, .flexblock-10, .flexblock-15, .flexblock-20, .flexblock-25, .flexblock-30, .flexblock-35, .flexblock-40, .flexblock-45, .flexblock-47, .flexblock-50, .flexblock-55, .flexblock-60, .flexblock-62, .flexblock-70, .flexblock-75, .flexblock-80, .flexblock-85, .flexblock-90, .flexblock-quarter, .flexblock-third, .flexblock-half, .flexblock-2thirds { width: 100%; } .flexblock-eighth { width: 49.5%; } .flexblock-sixth { width: 49.5%; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm - 601 to 1100px */ @media screen and (min-width: 601px) and (max-width: 1100px) { .flexblock-quarter, .flexblock-25 { width: 49.5%; /* margin: 0 0 25px 0; */ } .flexblock-sixth { width: 32%; /* margin: 0 0 25px 0; */ } .flexblock-third { width: 49.5%; /* margin: 0 0 25px 0; */ } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm - 901 to 1100px */ @media screen and (min-width: 901px) and (max-width: 1100px) { .flexblock-third { width: 49.5%; /* margin: 0 0 25px 0; */ } .flexblock-sixth { width: 32%; /* margin: 0 0 25px 0; */ } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% SPLIT-TITLE %%%%%%%%%%%%%%%%%%%%%%%%%%% */ .split-title { align-items: center; min-height: 65px; } .left-title { font-family: Georgia, "Times New Roman", Times, serif; font-size: 175%; font-weight: bold; color: darkblue; } .right-title { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 100%; font-weight: bold; text-align: right; color: black; } .redtitle { /* font-size: 3vw; */ color: red; text-shadow: 1px 1px 2px rgb(0, 0, 0); } .greentitle { /* font-size: 1.5vw; */ color: rgb(10, 175, 59); /* text-shadow: 1px 1px 2px black; */ } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 800px */ /* On smaller screens, decrease text size */ @media only screen and (max-width: 800px) { .split-title div { float: none; width: 100%; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% TABBED CONTENT %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ .tab { overflow: hidden; background-color: rgb(63, 100, 56); /* background-color: black; */ color: white; display: inline-block; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; color: yellow; font-family: Georgia, "Times New Roman", Times, serif; border: 1px solid white; outline: none; cursor: pointer; padding: 14px 16px; /* display: inline-block; */ transition: 0.3s; font-size: 17px; width: 125px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: blue; } /* Create an active/current tablink class */ .tab button.active { background-color: black; color: yellow; font-weight: bold; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; /* border-top: none; */ } /* Style the close button */ .topright { float: right; cursor: pointer; font-size: 28px; } .topright:hover { color: red; } /* */ /* */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% MORE BUTTON %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* ------------------- WIDTH NOT 100% - ONLY 1 BUTTON*/ .moreBtn { background-color: #eee; background-color: transparent; /* color: #444; */ cursor: pointer; padding: 0; border: none; text-align: left; outline: none; font-size: 20px; font-style: italic; transition: 0.4s; } .open, .moreBtn:hover { color: rgb(0, 0, 137); background-color: transparent; } /* Text Panel */ .morepanel { padding: 0 18px; display: none; background-color: transparent; background-color: rgb(155, 249, 205); overflow: hidden; } /* */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% ACCORDION %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* */ /* ------------------- WIDTH 100% - STACKED BUTTONS */ .accBtn { background-color: #eee; background-color: transparent; /* color: #444; */ cursor: pointer; padding: 0; width: 100%; border: none; text-align: left; outline: none; font-size: 20px; font-style: italic; transition: 0.4s; } .open, .accBtn:hover { color: rgb(0, 0, 137); background-color: transparent; } /* Text Panel */ .accpanel { padding: 0 18px; display: none; background-color: transparent; overflow: hidden; } /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% TABLES %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* --------------- GENERIC TABLE - Only for dark bacground */ /* */ table { border: 1px solid black; table-layout: auto; color: black; border-collapse: collapse; width: 100%; font-size: 16px; line-height: 100%; margin-bottom: 10px; } th { border: 1px solid; text-align: center; font-size: 20px; line-height: 125%; font-weight: bold; } td { border: 1px solid; text-align: left; padding: 8px; } /* --------------- NO BORDERS */ /* */ .table-noborders, .table-noborders th, .table-noborders td { border: none; } /* ----------------- INFO TABLE FOR DROPDOWN TEXT */ /* Set column % in first row */ .table-info { border: none; border: 1px; table-layout: auto; color: black; border-collapse: collapse; width: 100%; font-size: 16px; line-height: 110%; margin-bottom: 10px; } .table-info th { border: none; text-align: left; font-size: 20px; line-height: 125%; font-weight: bold; } .table-info td { border: none; text-align: left; vertical-align: top; padding: 8px; } /* --------------- CONTACT TABLE (in footers) */ /* */ .table-contact { border: 1px solid black; table-layout: auto; color: black; border-collapse: collapse; width: 100%; font-size: 12px; line-height: 100%; margin-top: 3px; margin-bottom: 10px; } .table-contact th { font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; font-size: 20px; } /* --------------- PARK FEE TABLE */ /* */ .table-parkfee { border: 1px solid black; table-layout: auto; color: black; border-collapse: collapse; width: 100%; font-size: 16px; line-height: 100%; margin-bottom: 10px; } .table-parkfee th { font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; font-size: 20px; text-align: center; } /* --------------- CANIFISH TABLE */ /* */ .table-canifish { border: none; table-layout: auto; color: black; width: 100%; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; font-size: 24px; font-weight: bold; line-height: 100%; margin-bottom: 10px; } .table-canifish td { border: none; text-align: left; vertical-align: top; padding: 8px; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 900px */ @media screen and (max-width: 900px) { .table-canifish { font-size: 20px; } } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ @media screen and (max-width: 700px) { .table-canifish { font-size: 18px; } } /* --------------- DISTANCES TABLE */ /* */ .table-distances { border: none; table-layout: auto; color: black; width: 100%; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; font-size: 16px; line-height: 100%; margin-bottom: 10px; } .table-distances th { border: 1px solid; text-align: center; font-size: 20px; line-height: 125%; font-weight: bold; } .table-distances td { border: 1px solid black; border-bottom: 1px solid black; /* border: none; */ text-align: left; vertical-align: top; padding: 8px; } /* -------------------- MISC */ .whiteback { background-color: white; } /* -------------------- NOT IN USE */ .darktable { border: 1px solid black; color: black; } /* -------------------- NOT IN USE */ .lighttable { border: 1px solid whitesmoke; color: whitesmoke; } /* --------------- DISTANCES TABLE - STRIPED */ /* */ .table-striped { border: none; table-layout: auto; color: black; width: 100%; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; font-size: 16px; text-align: center; line-height: 100%; margin-bottom: 10px; padding: 10px; } .table-striped th { background-color: rgb(0, 238, 255); padding: 5px; border: none; } .table-striped tr:nth-child(even) { background-color: rgb(97, 230, 130); } .table-striped tr:nth-child(odd) { background-color: rgb(134, 240, 240); } .table-striped td { text-align: center; border: none; } /* ------------------ Osgood */ .table-striped td:first-child { text-align: left; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 1100px */ /* @media screen and (max-width: 1100px) { table { font-size: 10px; } } /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% CAROUSELS %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% CAROUSEL 1A, 1B %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* ----------------------- NEED UNIQUE CAROUSELS TO AVOID JS CONFLICTS */ /* */ .carousel_1a, .carousel_1b, .carousel_1 { display: none; } /* Slideshow container */ .carousel_1a-container, .carousel_1b-container, .carousel_1-container { position: relative; margin: auto; width: 100%; } .carousel_1a-container img, .carousel_1b-container img, .carousel_1-container img { width: 100%; } /* Caption text */ .carousel_1a-text, .carousel_1b-text, .carousel_1-text { color: #f2f2f2; font-size: 20px; position: absolute; bottom: 1.5vw; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .carousel_1a-numbertext, .carousel_1b-numbertext, .carousel_1-numbertext { color: #f2f2f2; font-size: 16px; padding: 8px 12px; position: absolute; top: 0; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 600px */ /* On smaller screens, decrease text size */ @media only screen and (max-width: 600px) { .carousel_1a-text, .carousel_1b-text, .carousel_1-text { font-size: 12px; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* The dots/bullets/indicators */ .carousel_1a-dot, .carousel_1b-dot, .carousel_1-dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } /*----------------------- HIDE CAROUSEL DOTS*/ .dots { text-align: center; } .nodots { display: none; } .carousel_1a-active, .carousel_1b-active, .carousel_1active { background-color: #717171; } /* Fading animation */ .carousel_1a-fade, .carousel_1b-fade, .carousel_1-fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% SLIDESHOWS %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% SLIDEHOW 1 - 1A, 1B TO BE DEVELOPED %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* ----------------------- NEED UNIQUE SLIDESHOWS TO AVOID JS CONFLICTS */ /* */ /* */ /* STYLES FOR _1A AND _1B BUT NOT USED YET IN CODE - TRICKY */ /* FOR NOW ONLY HAVE 1 SLIDE SHOW PER PAGE TO AVOID JAVA CONFLICTS */ /* */ .slideshow_1a, .slideshow_1 { display: none; } /* Slideshow container */ .slideshow_1a-container, .slideshow_1-container { position: relative; margin: auto; /* max-width: 1000px; */ } .slideshow_1a-container img, .slideshow_1-container img { width: 100%; } /* Next & previous buttons */ .slideshow_1a-prev, .slideshow_1a-next, .slideshow_1-prev, .slideshow_1-next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .slideshow_1a-next, .slideshow_1-next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .slideshow_1a-prev:hover, .slideshow_1a-next:hover, .slideshow_1-prev:hover, .slideshow_1-next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Caption text */ .slideshow_1a-text, .slideshow_1-text { color: #f2f2f2; font-size: 15px; /* padding: 8px 12px; */ position: absolute; bottom: 0.3vw; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .slideshow_1a-numbertext, .slideshow_1-numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .slideshow_1a-dot, .slideshow_1-dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .slideshow_1a-active, .slideshow_1a-dot:hover, .slideshow_1-active, .slideshow_1-dot:hover { background-color: #717171; } /* Fading animation */ .slideshow_1a-fade, .slideshow_1-fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } /* */ /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 300px */ /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .slideshow_1a-prev, .slideshow_1a-next, .slideshow_1a-text, .slideshow_1-prev, .slideshow_1-next, .slideshow_1-text { font-size: 11px; } } /* mmmmmmmmmmmmmmmmmmmmmm (Media-End) */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% PHOTO\THUMBNAIL GALLERY %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* Position the image container (needed to position the left and right arrows) */ .gallery_1_container, .gallery_2_container, .gallery_3_container, .gallery_4_container, .gallery_5_container, .gallery_6_container { position: relative; height: auto; } /* Hide the images by default */ .gallery_1_Slides, .gallery_2_Slides, .gallery_3_Slides, .gallery_4_Slides, .gallery_5_Slides, .gallery_6_Slides { display: none; } /* Add a pointer when hovering over the thumbnail images */ .pointcursor { cursor: pointer; } /* Next & previous buttons */ .gallery_1_prev, .gallery_1_next, .gallery_2_prev, .gallery_2_next, .gallery_3_prev, .gallery_3_next, .gallery_4_prev, .gallery_4_next, .gallery_5_prev, .gallery_5_next, .gallery_6_prev, .gallery_6_next { cursor: pointer; position: absolute; top: 40%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */ .gallery_1_next, .gallery_2_next, .gallery_3_next, .gallery_4_next, .gallery_5_next, .gallery_6_next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .gallery_1_prev:hover, .gallery_1_next:hover, .gallery_2_prev:hover, .gallery_2_next:hover, .gallery_3_prev:hover, .gallery_3_next:hover, .gallery_4_prev:hover, .gallery_4_next:hover, .gallery_5_prev:hover, .gallery_5_next:hover, .gallery_6_prev:hover, .gallery_6_next:hover { background-color: rgba(0, 0, 0, 0.61); } /* Number text (1/3 etc) */ .gallery_1_numbertext, .gallery_2_numbertext, .gallery_3_numbertext, .gallery_4_numbertext, .gallery_5_numbertext, .gallery_6_numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* Container for image text */ .gallery_1_caption-container, .gallery_2_caption-container, .gallery_3_caption-container, .gallery_4_caption-container, .gallery_5_caption-container, .gallery_6_caption-container { text-align: center; background-color: rgb(19, 78, 46); padding: 2px 16px; color: white; } .gallery_1_caption-container p, .gallery_2_caption-container p, .gallery_3_caption-container p, .gallery_4_caption-container p, .gallery_5_caption-container p, .gallery_6_caption-container p { margin: 0; font-family: Georgia, "Times New Roman", Times, serif; } .gallery_1_row:after, .gallery_2_row:after, .gallery_3_row:after, .gallery_4_row:after, .gallery_5_row:after, .gallery_6_row:after { content: ""; display: table; clear: both; } /* thumbs side by side - Width = 100%/Thumbs */ .gallery_1_thumb, .gallery_2_thumb, .gallery_3_thumb, .gallery_4_thumb, .gallery_5_thumb, .gallery_6_thumb { float: left; /* width: 14.28%; */ /* width: 50%; */ } .gallery_1_thumb img, .gallery_2_thumb img, .gallery_3_thumb img, .gallery_4_thumb img, .gallery_5_thumb img, .gallery_6_thumb img { padding: 0; } /* Add a transparency effect for thumnbail images */ .gallery_1_demo, .gallery_2_demo, .gallery_3_demo, .gallery_4_demo, .gallery_5_demo, .gallery_6_demo { /* border: none; */ opacity: 0.6; } .gallery_1_active, .gallery_2_active, .gallery_3_active, .gallery_4_active, .gallery_5_active, .gallery_6_active { opacity: 1; /* border: solid 3px red; */ } .gallery_1_demo:hover, .gallery_2_demo:hover, .gallery_3_demo:hover, .gallery_4_demo:hover, .gallery_5_demo:hover, .gallery_6_demo:hover { opacity: 1; /* border: solid 3px red; */ } /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% BOOKING PAGE %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* */ /* */ /* .booking { background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0.4, 0.4, 0.4, 0.4)), url("images/banner_sunset-4x6-2.jpg"); } */ .booking { background-color: rgb(6, 87, 49); } .booking p { color: rgb(247, 254, 231); } /* ------------- CONTACT ADDRESS */ /* ------------------- addtitle makes text disapper in Chrome! */ .addtitle { padding-left: 0; margin: 3px 0; } .addrtitle { padding-left: 0; margin: 3px 0; } .addtext { margin-top: 5px; margin-bottom: 5px; line-height: 100%; } .addtext p { margin-top: 5px; margin-bottom: 5px; line-height: 100%; } /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% MODALS %%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% CALENDAR MODAL %%%*/ /* */ /* */ #calBtn { padding: 0; border: none; cursor: pointer; } #calBtnbook { padding: 0; border: none; cursor: pointer; border: solid 2px black; box-shadow: 7px 7px rgb(0, 0, 0); } /* The Modal (background) */ #calModal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ /* padding-top: 100px; */ padding-top: 50px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */ } .calmodal-content { background-color: cyan; box-shadow: 5px 5px 3px black; margin: auto; padding: 10px; border: 1px solid black; max-width: 800px; } .calmodal-header { padding: 5px 16px; color: yellow; font-size: 125%; font-weight: bold; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; background-color: darkgreen; } /* Calendar Modal needs fixed height or bars disappear */ .calmodal-main { position: relative; overflow: hidden; width: 100%; /* height: 750px; */ height: 900px; } /* Then style the iframe to fit in the container div with full height and width */ .calmodal-iframe { position: absolute; border: solid 1px #777; top: 0; left: 0; bottom: 0; right: 0; width: 100%; /* height: 800px; */ height: 100%; } .calmodal-footer { padding: 2px 16px; background-color: darkgreen; color: white; } /* Button Text */ .caltext { font-size: 20px; font-weight: bold; } /* */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% RULES MODAL %%%*/ /* */ #rulesBtn { padding: 0; border: none; cursor: pointer; } #rulesModal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */ } .rulesmodal-content { background-color: cyan; box-shadow: 5px 5px 3px black; margin: auto; padding: 10px; border: 1px solid black; max-width: 1200px; } .rulesmodal-header { padding: 5px 16px; color: yellow; font-size: 125%; font-weight: bold; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; background-color: darkgreen; } .rulesmodal-main { position: relative; overflow: hidden; width: 100%; height: 100%; } .rulesmodal-footer { padding: 2px 16px; background-color: darkgreen; color: white; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%% DEALS MODAL %%%*/ /* */ #dealsBtn { padding: 0; border: none; cursor: pointer; } #dealsModal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */ } .dealsmodal-content { background-color: cyan; box-shadow: 5px 5px 3px black; margin: auto; padding: 10px; border: 1px solid black; max-width: 1200px; } .dealsmodal-header { padding: 5px 16px; color: yellow; font-size: 125%; font-weight: bold; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; background-color: darkgreen; } /* Special Deals Modal NB Image is in folder on same level */ .dealsmodal-main { position: relative; overflow: hidden; width: 100%; height: 700px; background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)), url("images/wl_2017-03-09_162603(6x4)-rev.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 10px; margin: 0; } /* */ /* ------------------------ Old Images */ /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url("images/wl_2017-03-09_162603(6x4).jpg"); */ /* */ /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), */ /* url("images/wl_2017-03-09_162603(6x4).jpg"); */ /* */ /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), */ /* url("images/wl_2018-03-31_151122_sc-specialoffer.jpg"); */ /* */ .dealsmodal-footer { padding: 2px 16px; background-color: darkgreen; color: white; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%% CONTACT MODAL %%%*/ /* */ #contactModal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */ } .contactmodal-content { background-color: rgb(102, 224, 81); /* box-shadow: 2px 5px 3px black; */ box-shadow: 5px 5px 10px black; margin: auto; padding: 7px; border: 1px solid black; max-width: 1200px; } .contactmodal-header { padding: 15px 16px; color: yellow; font-size: 200%; font-weight: bold; font-family: Georgia, Times, "Times New Roman", serif; background-color: darkgreen; } /* Special contact Modal NB Image is in folder on same level */ .contactmodal-main { position: relative; overflow: hidden; width: 100%; height: 100%; /* height: 700px; */ background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), url("images/scenic-cristobal_2013-04-13_174416(6x4).jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; padding-left: 20px; } .contactmodal-main .contactheader { color: yellow; font-size: 18px; margin: 10px 0 0 0; } /* -------original */ .contactmodal-main p { color: rgb(222, 248, 180); font-size: 16px; margin: 0 15px 0 20px; /* margin-left: 20px; */ } .contactmodal-footer { padding: 2px 16px; background-color: darkgreen; color: white; } /* */ /* */ /* */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% INSURANCE MODAL %%%*/ /* */ /* BUTTON */ #insurBtn { padding: 0; border: none; cursor: pointer; } /* MODAL */ #insurModal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */ } .insurmodal-content { background-color: rgb(106, 220, 135); /* box-shadow: 2px 5px 3px black; */ box-shadow: 5px 5px 10px black; margin: auto; padding: 7px; border: 1px solid black; max-width: 1200px; } .insurmodal-header { padding: 15px 16px; color: yellow; font-size: 200%; font-weight: bold; font-family: Georgia, Times, "Times New Roman", serif; background-color: darkgreen; } /* Special insur Modal NB Image is in folder on same level */ .insurmodal-main { position: relative; overflow: hidden; background-color: white; width: 100%; height: 100%; } .insur modal-main h5 { margin: 15px; } .insurmodal-main h5, p { margin: 15px; } .insurmodal-footer { padding: 2px 16px; background-color: darkgreen; color: white; } /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% GALLERY MODAL %%%*/ /* ---------------------------ALLOW FOR 9 ON SAME PAGE */ /* */ /* */ #galleryBtn1, #galleryBtn2, #galleryBtn3, #galleryBtn4, #galleryBtn5, #galleryBtn6, #galleryBtn7, #galleryBtn8, #galleryBtn9 { padding: 0; border: none; cursor: pointer; } #galleryModal1, #galleryModal2, #galleryModal3, #galleryModal4, #galleryModal5, #galleryModal6, #galleryModal7, #galleryModal8, #galleryModal9 { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ padding-top: 1vw; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 1); /* Black w/ opacity */ } .gallerymodal-content { background-color: rgb(0, 58, 0); box-shadow: 5px 5px 3px black; margin: auto; padding: 5px; border: 1px solid black; /* max-width: 1200px; */ max-width: 900px; } .gallerymodal-panorama { background-color: rgb(0, 58, 0); box-shadow: 5px 5px 3px black; margin: auto; padding: 5px; border: 1px solid black; /* max-width: 1900px; */ } .gallerymodal-header { padding: 5px 16px; color: rgb(5, 173, 5); font-size: 125%; font-weight: bold; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; background-color: rgb(0, 58, 0); } /* Special gallery Modal NB Image is in folder on same level */ .gallerymodal-main { position: relative; overflow: hidden; width: 100%; height: auto; padding: 10px; padding: 0; margin: 0; } /* */ .gallerymodal-footer { padding: 2px 16px; background-color: darkgreen; color: white; } /* ----------------- GALLERY LINK - IMAGE & TITLE */ .gallerylinkwrapper { padding: 10px; padding-bottom: 0px; /* background-color: rgb(148, 247, 242); */ } .gallerylink p { font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; font-weight: bold; font-size: 150%; color: darkblue; line-height: 110%; margin: 0; margin-bottom: 10px; text-align: center; } .gallerylink img { margin-bottom: 0; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 900px */ /* @media screen and (max-width: 600px) { .gallerylink p { font-size: 125%; } } */ /* */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%% COMMON MODAL ELEMENTS %%%*/ /* */ /* */ /* The Close Button */ .closecal, .closedeals, .closerules, .closecontact, .closeinsur, .closegallery1, .closegallery2, .closegallery3, .closegallery4, .closegallery5, .closegallery6, .closegallery7, .closegallery8, .closegallery9, .closegeneric, .close { color: yellow; float: right; font-size: 28px; font-weight: bold; } .closecal:hover, .closecal:focus, .closedeals:hover, .closedeals:focus, .closerules:hover, .closerules:focus, .closecontact:hover, .closecontact:focus, .closeinsur:hover, .closeinsur:focus, .closegallery1:hover, .closegallery2:hover, .closegallery3:hover, .closegallery4:hover, .closegallery5:hover, .closegallery6:hover, .closegallery7:hover, .closegallery8:hover, .closegallery9:hover, .closegallery1:focus, .closegallery2:focus, .closegallery3:focus, .closegallery4:focus, .closegallery5:focus, .closegallery6:focus, .closegallery7:focus, .closegallery8:focus, .closegallery9:focus, .closegeneric:hover, .closegeneric:focus, .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */