/* ********** Languages ********** */

/* Language English - hide Spanish */
html[lang='en'] body [lang='es'] {
   display: none;
}

/* Language Spanish - hide English */
html[lang='es'] body [lang='en'] {
   display: none;
}



/* ********** Resets / defaults / general styles ********** */

* {
   margin: 0;
   padding: 0;
}

html.
body {
   height: 100%;
}

body {
   min-width: 320px;
   font-family: arial,verdana,helvetica,sans-serif;
   font-size: 1em;
}

img {
   max-width: 100%; /* Resizes images according to screen size */
   width: auto;
   height: auto !important;
   border: 0;
   background: none;
}

.bold {
   font-weight: bold;
}

.uline {
   text-decoration: underline;
}

/* Body - container for all content */
.container {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}



/* ********** Header ********** */

/* Header container */
#header {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 0;
   grid-gap: 0;
   min-height: 7em;
   background-color: #00294b;
}

/* Logo container */
#header div:first-of-type {
   align-self: center;
   text-align: right;
}

/* Logo */
#logo {
   width: 50%;
   height: auto;
   margin: 0.5em 0;
}

/* Language container */
#header div:nth-of-type(2) {
   align-self: center;
   justify-self: center;
}

/* Switch language button */
#change_lang {
   display: inline-block;
}

#lang {
   display: inline-block;
   min-width: 5em;
   background: none;
   border: 0;
   color: #c3a13c;
   text-decoration: underline;
}

   @media all and (max-width: 390px) {
      #lang {
         font-size: 0.75em;
      }
   }

#lang:hover {
   color: #ffffff;
   outline: none;
   border: none;
}
/* ********** // End header ********** */



/* ********** Main navigation ********** */
#nav {
   background-color: rgba(0,41,75,1);
}

/* Nav icon (small screens only) - id attribute in svg file */
label[for="nav_checkbox"] {
   position: absolute;
   top: 2em;
   left: 2em;
}

#nav_icon {
   width: 3em;
   height: 3em;
}

/* List of links */
nav ul {
   max-height: 0;
   overflow: hidden;
   list-style-type: none;
}

/* Hidden checkbox to make nav dropdown work */
#nav_checkbox {
   display: none;
}

/* Show dropdown nav when 'checked' */
#nav_checkbox:checked ~ nav ul {
   max-height: 600px;
   transition: all 0.5s;
}

/* Individual list items */
nav ul li {
   border-bottom: 1px solid #ffffff;
}

nav ul li:first-of-type {
   border-top: 1px solid #ffffff;
}

/* Links */
nav ul li a:link,
nav ul li a:visited {
   display: inline-block;
   width: 100%;
   padding: 12px 12px 12px 25px;
   color: #ffffff;
   font-size: 1em;
   text-decoration: none;
   letter-spacing: 0.05em;
}

nav ul li a:hover,
nav ul li a:active,
nav ul li a:focus {
   background-color: #ffffff;
   color: #00294b;
}
/* ********** // End main navigation ********** */



/* ********** Main content ********** */
#content {
   /* How content container flexes */
   -webkit-box-flex: 1 0 auto;
   -moz-box-flex: 1 0 auto;
   -webkit-flex: 1 0 auto;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;

   /* Flex content within this container */
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: column;

   background-color: #99a9b7;
}
/* ********** // End main content ********** */



/* ********** Footer ********** */

/* Footer container */
#footer {
   /* How footer container flexes */
   -webkit-box-flex: 0 0 auto;
   -moz-box-flex: 0 0 auto;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;

   /* Flex content within this container */
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: column;

   background-color: #e6eaed;
}

#footer div {
   margin-bottom: 1em;
   align-self: center;
   text-align: center;
}

#footer p {
   font-size: 0.85em;
   line-height: 1.5;
}

/* Logo */
#footer div:first-of-type img {
   margin-top: 0.5em;
   width: 50%;
   height: auto;
}

/* Paypal */
#footer .paypal > p {
   display: inline;
   margin: 0;
   font-size: 0.75em;
   text-align: center;
}

#footer .paypal > #smart-button-container {
   display: inline;
}

/* Links */
#footer a:link,
#footer a:visited {
   color: #00294b}

#footer a:hover,
#footer a:active {
   color: #c3a13c;
}
/* ********** // End footer ********** */



/* ********** Modal window ********** */

/* Modal window container */
#modal,
#modal_2,
#modal_3 {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background-color: rgba(0,41,75,0.85);
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Modal window content */
#modal_content,
#modal_content_2,
#modal_content_3 {
   position: relative;
   width: auto;
   max-height: 70%;
   margin: 5em 2em 2em 2em;
   padding: 2em;
   overflow-y: auto;
   -webkit-overflow-scroll: touch;
   background-color: #ffffff;
   border-radius: 12px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
}

/* Close modal link */
#modal_close,
#modal_close_2,
#modal_close_3 {
   position: absolute;
   top: 5%;
   left: 50%;
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -o-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   padding: 0.25em;
   background-color: #c3a13c;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border: 1px solid #ffffff;
   color: #ffffff;
   font-size: 1.5em;
   letter-spacing: 0.05em;
   text-decoration: none;
}

/* Hide modal */
#modal:not(:target),
#modal_2:not(:target),
#modal_3:not(:target) {
   visibility: hidden;
   opacity: 0;
}

#modal h1,
#modal_2 h1,
#modal_3 h1 {
   font-size: 1.5em;
   color: #00294b;
}
/* ********** // End modal window ********** */



/* ********** Forms ********** */
/* Mark required fields */
.required:after {
   content: " *";
   font-size: 1.5em;
   color: #D22B2B;
   text-shadow: 0 0 10px #fff;
}

/* Hidden fields used for antispam verification */
.verify {
   display: none;
}

fieldset {
   box-sizing: border-box;
   margin: 1.5em 0;
   padding: 1em;
   background-color: rgba(0,41,75,0.25);
   border: none;
   border-radius: 12px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
}

legend {
   padding: 4px 8px;
   background-color: #00294b;
   border-radius: 6px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   color: #ffffff;
   letter-spacing: 0.05em;
}

label,
input:not([type="checkbox"]):not([type="radio"]):not(.inline) {
   display: block;
}

label {
   margin: 1em 0 0.25em 0;
   font-size: 1em;
   color: #00294b;
   letter-spacing: 0.05em;
   overflow-wrap: break-word;
   word-wrap: break-word;
   -ms-word-break: break-all;
   word-break: break-word;
   -ms-hyphens: auto;
   -moz-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
}

/* First label in fieldset - remove top margin */
legend + label {
   margin-top: 0;
}

/* Text following a field */
.fld_desc {
   margin-left: 0.5em;
   font-size: 1em;
   color: #00294b;
   letter-spacing: 0.05em;
}

input,
select,
textarea {
   margin: 0.25em 0 1em 0;
   padding: 3px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border: 0;
   font-size: 0.9em;
   letter-spacing: 0.05em;
   color: rgba(0,41,75,0.85);
}

   @media all and (max-width: 390px) {
      input {
         max-width: 70%;
      }
   }

textarea {
   width: 90%;
   height: 4em;
}

select {
   max-width: 200px !important;
}

input:focus,
select:focus,
textarea:focus {
   background-color: rgba(195,161,60,0.35);
}

/* 'Labels'/descriptions on radio buttons and checkboxes */
input[type="checkbox"] + label,
input[type='radio'] + label {
   display: inline;
   font-size: 0.95em;
   color: #00294b;
   letter-spacing: 0.05em;
}

/* Add space between radio button descriptions and next radio button */
input[type="radio"] + label {
   margin-right: 1em;
}

/* Add line break after checkbox description */
input[type="checkbox"] + label::after {
   content: "\a";
   white-space: pre;
}

/* Submit buttons */
input[type="submit"] {
   width: 100%;
   background-color: #c3a13c;
   color: #ffffff;
   font-size: 1.25em;
   letter-spacing: 0.05em;
   box-shadow: 3px 3px 5px #282828;
   -webkit-box-shadow: 3px 3px 5px #282828;
   -moz-box-shadow: 3px 3px 5px #282828;
}

input[type="submit"]:hover {
   position: relative;
   top: 1px;
   box-shadow: none;
  -webkit-box-shadow: none;
   -moz-box-shadow: none;
   cursor: pointer;
}

/* Error messages */
.error_msg {
   display: table; /* Forces message to be on its own line but still control size */
   padding: 2px 4px;
   background-color: rgba(210,43,43,0.5);
   color: #ffffff;
   font-style: italic;
}

/* Error fields */
.error {
   border: 1px solid #D22B2B;
   background-color: rgba(210,43,43,0.25);
   box-shadow: 0 0 4px 4px rgba(210,43,43,0.25);
   -webkit-box-shadow: 0 0 4px 4px rgba(210,43,43,0.25);
   -moz-box-shadow: 0 0 4px 4px rgba(210,43,43,0.25);
   color: #ffffff;
}

select.error {
	color: #00294b;
}

/* Alert/required messages */
.alert {
   color: #D22B2B;
   text-shadow: 0 0 10px #fff;
}

/* Confirmation message */
.msg {
   padding: 4px;
   background-color: rgba(195,161,60,0.25);
   border-top: 1px solid #c3a13c;
   border-bottom: 1px solid #c3a13c;
   color: #00294b;
}

.msg_main_pg {
   color: #ffffff;
}
/* ********** // End forms ********** */



/* ********** Home page content ********** */
/* Promo banner / RAM presentation */
#promo_banner {
   padding: 0.25em 0.5em;
   background-color: rgba(210,43,43,0.85);
   border-bottom: 2px solid #ffffff;
   color: #ffffff;
   font-weight: bold;
   letter-spacing: 0.1em;
   text-align: center;
}

#promo_banner a:link,
#promo_banner a:visited,
#promo_banner a:hover,
#promo_banner a:active {
   color: #ffffff;
   text-decoration: none;
}

#promo_banner a > img {
   width: 1.5em;
   height: auto;
   margin: 0 1em;
   vertical-align: middle;
}


/* Welcome message container */
#welcome {
   /*background: linear-gradient(rgba(,0.4),rgba(,0.4)), url('../img/boatyard_aerial.jpg') 0 0/cover no-repeat;*/
   background: url('../img/boatyard_aerial.jpg') 0 0/cover no-repeat;
}

/* Welcome message text container */
#welcome div {
   margin: 1em 0 1em 0;
   padding: 1em 2em;
   background-color: rgba(0,41,75,0.65);
   color: #ffffff;
   line-height: 1.5;
   letter-spacing: 0.05em;
}

   /* Add margin on the right for larger screens */
   @media all and (min-width: 900px) {
      #welcome div {
         margin: 2em 6em 2em 0;
      }
   }

#welcome div h1 {
   font-size: 1.5em;
   font-weight: normal;
}

#welcome div p {
   font-size: 1em;
}

   /* Increase size of welcome message area on bigger screens */
   @media all and (min-width: 480px) {

      #welcome div h1 {
         font-size: 2em;
      }

      #welcome div p {
         font-size: 1.25em;
      }
   }

#welcome a:link,
#welcome a:visited {
   color: #ffffff;
}

#welcome a:hover,
#welcome a:active {
   color: #c3a13c;
}

/* Containers for each icon nav 'button' */
#icon_container > div {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   background-color: #99a9b7;
}

/* Add space above icon nav */
#icon_container > div:first-of-type {
   padding-top: 0.5em;
}

/* Add space below icon_nav */
#icon_container > div:last-of-type {
   padding-bottom: 0.5em;
}

/* Containers for icon portions of buttons */
.icon {
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   align-self: center;
   text-align: right;
}

.icon img {
   position: relative;
   left: 2em;
   min-width: 5em;
   width: 55%;
   height: auto;
}

/* Containers for text portions of buttons */
.txt {
   -webkit-box-flex: 6;
   -moz-box-flex: 6;
   -webkit-flex: 6;
   -ms-flex: 6;
   flex: 6;
   align-self: center;
   padding: 1.2em 0 1.2em 2em;
   background-color: rgba(0,41,75,0.75);
   font-size: 1.25em;
}

.txt a:link,
.txt a:visited {
   color: #ffffff;
   text-decoration: none;
}

.txt a:hover,
.txt a:active {
   color: #c3a13c;
}

   /* Increase size of icon nav on taller screens to eliminiate blank space below */
   @media all and (min-height: 1000px) {

      /* Increase size of icons */
      .icon img {
         width: 75%;
         min-width: 7em;
      }

      /* Increase size of text elements */
      .txt {
         padding: 1.75em 0 1.75em 2em;
      }
   }


   @media all and (min-height: 1200px) {

      /* Increase size of icons */
      .icon img {
         width: 100%;
         min-width: 9em;
      }

      /* Increase size of text elements */
      .txt {
         padding: 1.5em 0 1.5em 2em;
         font-size: 1.75em;
      }
   }


/* Presentation about Ram */
#ram_slideshow img {
   display: block;
   margin: auto auto;
   max-width: 75%;
}

.pres_contact {
   font-size: 1.25;
   line-height: 1.5em;
   color: #00294b;
   text-align: center;
}

.pres_contact a:link,
.pres_contact a:visited {
   color: #c3a13c;
}

.pres_contact a:hover,
.pres_contact a:active {
 color: #99a9b7;
}

/* ********** // End home page content ********** */



/* ********** Lower page content ********** */

/* Container for headlines and image gallery */
#headline_container {
   /*background: linear-gradient(rgba(,0.4),rgba(,0.4)), url('../img/boatyard_aerial.jpg') 0 0/cover no-repeat;*/
   background: url('../img/boatyard_aerial.jpg') 0 0/cover no-repeat;
}

/* Container for headlines */
#inside {
   max-width: 100%;
   margin-top: 1.5em;
   padding: 1em 2em;
   background-color: rgba(0,41,75,0.75);
}

#inside h1 {
   margin-bottom: 0.5em;
   font-size: 1.25em;
   font-weight: normal;
   letter-spacing: 0.05em;
   color: #c3a13c;
}

#inside h2 {
   font-size: 1.5em;
   font-weight: normal;
   letter-spacing: 0.05em;
   color: #ffffff;
}

#inside a:link h1,
#inside a:visited h1 {
   color: #c3a13c;
   text-decoration: underline;
}

#inside a:hover h1,
#inside a:active h1 {
   color: #ffffff;
}



/* --- Image slider --- */
#img_slider {
   max-width: 80%;
   margin: 1em auto;
}

#slider_container {
   box-shadow: 0.5em 0.5em 0 0 #c3a13c;
}

/* Hide checkboxes */
#slider_container input {
   display: none;
}

/* Viewbox */
#slides {
   width: 100%;
   overflow: hidden;
}

/* Container holding all images */
#slides_overflow {
   width: 300%;
   transition: all 1.0s linear;
   -webkit-transition: all 1.0s linear;
   -moz-transition: all 1.0s linear;
}

#slider_container article {
   float: left;
   width: 33.333%;
}

#slider_container img {
   display: block;
   width: 100%;
   height: auto;
   border: 2px solid #c3a13c;
}

/* Controls */
#slider_container + aside {
   margin-top: -1em;
   margin-bottom: 1.5em;
   text-align: center;
}

#slider_container + aside label {
   display: inline-block;
   width: 0.75em;
   height: 0.75em;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   background-color: #ffffff;
   border: 2px solid #00294b;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
}

#slider_container + aside label + label {
   margin-left: 1em;
}

#slider_container + aside label:hover{
   background-color: #c3a13c;
}

/* Slide action when checked */
#slide_1:checked ~ #slides #slides_overflow {
   margin-left: 0;
}

#slide_2:checked ~ #slides #slides_overflow {
   margin-left: -100%;
}

#slide_3:checked ~ #slides #slides_overflow {
   margin-left: -200%;
}

/* --- // End image slider --- */



/* Container for text content */
#content_container {
   padding: 1em 2em 2em 2em;
   background-color: #00294b;
   color: #ffffff;
   line-height: 1.5em;
   letter-spacing: 0.05em;
}

#content_container h3 {
   margin: 1.5em 0 1em 0;
   padding: 0.25em;
   font-size: 1em;
   background-color: rgba(195,161,60,0.15);
   border-top: 1px solid #c3a13c;
   border-bottom: 1px solid #c3a13c;
   color: #ffffff;
}

#content_container p {
   margin: 1em 0;
}

#content_container ul {
   margin-left: 1em;
   list-style-position: outside;
}

#content_container li {
   margin-bottom: 1em;
}

#content_container ul li > ul {
   margin: 0 0 0 2em;
}

#content_container > ul {
   margin-bottom: 1em;
}

#content_container dt {
   display: list-item;
   margin-left: 1em;
   font-weight: bold;
   font-size: 1.25em;
}

#content_container dd {
   margin-bottom: 2em;
   font-style: italic;
}

#content_container a:link,
#content_container a:visited {
   color: #c3a13c;
   font-size: 1.25em;
}

#content_container a:hover,
#content_container a:active {
   background-color: #c3a13c;
   color: #ffffff;
   text-decoration: none;
}

/* Quotes/testimonials */
blockquote {
   position: relative;
   display: inline-block;
   max-width: 90%;
   margin: 1em;
   padding: 1em;
   background-color: rgba(195,161,60,0.35);
   border-left: 10px solid #c3a13c;
   border-right: 10px solid #c3a13c;
   color: #ffffff;
   font-style: italic;
}

blockquote:before {
   position: absolute;
   left: 0;
   content: "\201C";
   font-size: 8em;
   font-weight: bold;
}

blockquote:after {
   position: absolute;
   right: 0.1em;
   bottom: -0.3em;
   content: "\201D";
   font-size: 8em;
   font-weight: bold;
}

/* Person who said quote */
blockquote .name {
   font-style: normal;
   text-align: right;
}


/* --- Text content show/hide action --- */

/* Hidden checkboxes */
.content_checkbox {
   display: none;
}

/* Hide content */
.content_slide {
   margin-bottom: 1em;
   max-height: 0;
   overflow: hidden;
}

/* Labels/links to show content */
.slide_label {
   margin-top: 2em;
   font-size: 1em;
   color: #c3a13c;
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
}

/* Down arrow after labels */
.slide_label:after {
   position: relative;
   top: -3px;
   margin-left: 0.5em;
   content: url(../img/icons/down_arrow.svg);
}

#by_svcs:checked + .content_slide,
#by_svcs_es:checked + .content_slide,
#by_equip:checked + .content_slide,
#by_equip_es:checked + .content_slide,
#by_rates:checked + .content_slide,
#by_rates_es:checked + .content_slide,
#suppliers:checked + .content_slide,
#suppliers_es:checked + .content_slide,
#store_trailer:checked + .content_slide,
#store_trailer_es:checked + .content_slide,
#store_yacht:checked + .content_slide,
#store_yacht_es:checked + .content_slide,
#mar_rates:checked + .content_slide,
#mar_rates_es:checked + .content_slide,
#rules:checked + .content_slide,
#rules_es:checked + .content_slide,
#amenities:checked + .content_slide,
#amenities_es:checked + .content_slide,
#news:checked + .content_slide,
#news_es:checked + .content_slide,
#photo_vid:checked + .content_slide,
#photo_vid_es:checked + .content_slide,
#sec_cams:checked + .content_slide,
#sec_cams_es:checked + .content_slide,
#weather:checked + .content_slide,
#weather_es:checked + .content_slide,
#customs:checked + .content_slide,
#customs_es:checked + .content_slide,
#guat:checked + .content_slide,
#guat_es:checked + .content_slide,
#local:checked + .content_slide
#local_es:checked + .content_slide {
   max-height: 3000px;
   transition: all 0.7s;
}

/* --- // End text content show/hide action --- */



/* 'Button' links */
#content_container .btn:link,
#content_container .btn:visited {
   display: inline-block;
   margin: 0.5em 1em 0.5em 0;
   padding: 4px 8px;
   background-color: #c3a13c;
   color: #ffffff;
   font-size: 1.25em;
   text-decoration: none;
   border: 1px solid #ffffff;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   box-shadow: 3px 3px 5px #282828;
   -webkit-box-shadow: 3px 3px 5px #282828;
   -moz-box-shadow: 3px 3px 5px #282828;
}

#content_container .btn:hover,
#content_container .btn:active {
   position: relative;
   top: 1px;
   background-color: #00294b;
   border: 1px solid #ffffff;
   box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
}

/* Container for Google Map */
.map {
   position: relative;
   height: 0;
   margin-top: 3em;
   padding-bottom: 56.25%;
   overflow: hidden;
}

.map iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 50%;
   height: 50%;
}

/* Supplier logos */
.supplier_logos {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

.supplier_logos > div {
   width: 175px;
   margin: 0.5em;
   padding: 0.25em 0 0 0;
   background-color: #fff;
   border-radius: 4px;
}

.supplier_logos > div p {
   width: 100%;
   box-sizing: border-box;
   padding: 0.25em;
   background-color: #c3a13c;
   text-align: center;
   box-shadow: 0 3px 3px 0 #00294b;
   -webkit-box-shadow: 0 3px 3px 0 #00294b;
   -moz-box-shadow: 0 3px 3px 0 #00294b;
   transform: skewY(-5deg);
   -webkit-transform: skewY(-5deg);
   -moz-transform: skewY(-5deg);
   -ms-transform: skewY(-5deg);
   -o-transform: skewY(-5deg);
}

#content_container .supplier_logos div a:hover,
#content_container .supplier_logos div a:active {
   background-color: transparent;
}
/* ********** // End lower page content ********** */



/* ********** Contact form, customs form ********** */
#contact,
#customs_checkin {
   max-width: 100%;
}

#contact fieldset,
#customs_checkin fieldset {
   padding: 2em;
   background-color: rgba(255,255,255,0.65);
}

#contact legend,
#customs_checkin legend {
   border: 1px solid #ffffff;
}

#contact label,
#customs_checkin label {
   color: #00294b;
}

#contact input,
#contact textarea,
#customs_checkin input,
#customs_checkin textarea {
   width: 95%;
}

#contact #submit,
#customs_checkin #submit {
   width: 100%;
}
/* ********** // End contact form, customs form ********** */



/* ********** Security cameras ********** */

/* Container for video */
.vid_container {
   display: inline-block;
   margin: 1em 0;
}
/* ********** // End security cameras ********** */



/* ********** Photo gallery ********** */
/* Grid of category images on main gallery page */
#gallery_grid {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   column-gap: 10px;
   text-align: center;
}

#gallery_grid div {
   margin: 0.75em 0;
}

#gallery_grid img {
   display: block;
}

/* Category names */
#gallery_grid a:link,
#gallery_grid a:visited {
   display: inline-block;
   max-width: 10em;
   color: #c3a13c;
   text-decoration: none;
   font-weight: bold;
   font-size: 1.25em;
}

#gallery_grid a:hover,
#gallery_grid a:active {
   color: #ffffff;
   text-decoration: underline;
}


/* Thumbnails */
#content_container .thumb:hover,
#content_container .thumb:active {
   background-color: transparent;
}

.thumb img {
   max-height: 8em;
   margin: 0.25em;
   border: 2px solid #ffffff;
}

.thumb:hover img {
   border: 2px solid #c3a13c;
}

/* Modal window */
.modal {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: 999;
   display: none;
   point-events: none;
   background-color: rgba(0,41,75,0.85);
}

.modal:target {
   display: block;
   point-events: auto;
}

/* Close button */
#content_container > .modal > .modal_close {
   position: absolute;
   top: 5%;
   left: 50%;
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -o-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   padding: 0.25em;
   background-color: #c3a13c;
   border: 1px solid #ffffff;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   font-size: 1.25em;
   color: #ffffff;
   text-decoration: none;
}

/* Modal window content */
.modal_content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   -webkit-transform: translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   -o-transform: translate(-50%,-50%);
   overflow: auto;
}

.modal_content img {
   border: 2px solid #ffffff;
}

/* Modal control buttons */
#content_container > .modal > .modal_control:link,
#content_container > .modal > .modal_control:visited {
   position: absolute;
   font-size: 2em;
   color: #ffffff;
   text-decoration: none;
}

.prev,
.next {
   top: 50%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   padding: 0.25em;
   background-color: #c3a13c;
   border: 1px solid #ffffff;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

.prev {
   left: 5%;
}

.next {
   right: 5%;
}
/* ********** // End photo gallery ********** */



/* ********** Videos (video gallery) ********** */

/* Container for video gallery */
#vid_gallery {
   max-width: 400px;
   margin: 2em 0;
}

/* Wrapper to make video responsive and maintain aspect ratio */
.vid_wrapper {
   position: relative;
   padding-bottom: 56.25%; /* Maintains 16:9 ratio */
   height: 0;
}

.vid_wrapper iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
/* ********** // End videos (video gallery) ********** */



/* ********** News ********** */
pre {
   margin: 1em 0;
   font-family: arial,verdana,helvetica,sans-serif;
   font-size: 1em;
   letter-spacing: 0.05em;
   line-height: 1.5em;
   white-space: pre-wrap;
   white-space: -moz-pre-wrap;
   white-space: -pre-wrap;
   white-space: -o-pre-wrap;
   word-wrap: break-work;
}
/* ********** // End news ********** */



/* ********** Resources page ********** */

/* 'More about RAM' list */
#ram_resources li {
   margin-bottom: 1.5em;
}

/* ********** // End resources page ********** */



/* ********** Store specials ********** */

/* Container for specials */
.specials {
   display: grid;
   grid-template-columns: 1fr;
}

.specials div {
   padding: 0.5em;
   text-align: center;
}

/* Item images */
.specials img {
   max-width: 10em;
   max-height: 10em;
   height: auto;
   margin-top: 1em;
   border: 3px solid #c3a13c;
}

/* Item names and descriptions */
.item {
   font-style: italic;
   letter-spacing: 0.05em;
}

.item_name {
   font-style: normal;
   font-size: 1.5em;
   font-weight: bold;
   color: #c3a13c;
}

/* Item prices */
.specials .price {
   border-bottom: 1px solid #ffffff;
   font-size: 2em;
   font-weight: bold;
   color: #c3a13c;
}
/* ********** // End store specials ********** */