*, *::before, *::after { 
    box-sizing: border-box; 
}

html {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.8;
    min-height: 100dvh; 
    font-size: 1.1rem;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin-block: 0;
    color: rgb(5, 75, 114);
    font-weight: 600;
}
h1 {
    font-size: 2rem;
    display: flex;
    flex-direction: column;
}

h2 {font-size: 1.6rem;}
h3 {font-size: 1.4rem;}
h4 {font-size: 1.3rem;font-weight: 500;}
h5 {font-size: 1.2rem;font-weight: 500;}
h6 {font-size: 1.1rem;font-weight: 500;}

a {
    text-decoration: underline;
    word-wrap: break-word;
}
img {display: block;max-width: 100%;height: auto;}
a img {
    border: 0;
    padding: 0;
}

p {
    line-height: 1.6;
    word-wrap: break-word;
}

p a {
    font-size: 1.1rem;
    font-weight: 600;
    word-wrap: break-word;
}
main p, li, figcaption { max-width: 75ch; text-wrap: pretty;}

ul {
    margin: 0;
}

li {
    list-style: none;
}

li a {
    word-break: break-all;
}

a:link {
    color: rgb(38, 55, 70);
}
a:visited {
    color: rgb(38, 55, 70);
}
a:hover {
    color: rgb(0, 130, 150);
}
a:focus-visible {outline: medium dashed hsl(201.82deg 21.78% 60.39%);}
a:active {
    color: rgb(0, 130, 150);
}

.center {
	text-align: center;
}
.jd_logo {
    display: flex;
    justify-content: center;
    margin: 0 auto 1rem;
    width: 100%;
    min-height: 3rem;
    padding: .5rem 2rem;
    background-color: rgb(119, 163, 166);
}
.jd_logo img {
    float: left;
    max-height: 2rem;
    padding-right: .5rem;
}
.jd_logo span {
    color: rgb(2, 126, 164);
    font-size: 1.5rem;
    font-weight: bold;
}

.jd_logo p {
    font-size: 1.4rem;
    line-height: 1.375rem;
    margin: 0;
    padding: .5rem 1.5rem;
    background: rgb(255, 255, 255);
    border-radius: 15px;
}
/* ------ HEADER ------ */
header {
    float: left;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100px;
    padding: .5em 0;
    align-content: center;
}
.logo {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
}
.logo a {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.logo_img {
    width: auto;
    height: 60px;
}
.head_info {
    display: flex;
    flex-direction: column;
    width: 90%;
    align-self: center;
}
.head_contact {
    display: flex;
    width: 100%;
    justify-content: space-around;
    color: rgb(25, 25, 112); 
}
.head_contact div {
    width: 30%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.book_link a {font-size: 1.3rem;font-weight: 500;color: rgb(103, 12, 139);}
nav {
    float: left;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
nav ul {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
    width: 100%;
    margin: 0;
    padding: .3em 0 0;
}
nav li { 
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    font-size: 1.25rem;
}
nav li a {
    word-break: unset;
    transition: ease-in .4s;
    text-decoration: none;
}
nav a {
    font-size: 1.3rem;
    font-weight: 500;
    width: 100%;
    padding: .5em .5em .3em;
}
nav a:link {
    color: rgb(25, 25, 112);
    border-bottom: solid 5px rgb(255, 255, 255);
}
nav a:visited {
    color: rgb(25, 25, 112);
    border-bottom: solid 5px rgb(255, 255, 255);
}
nav a:hover {
    color: rgb(25, 25, 112);
    border-color: rgb(173, 216, 230);
}
nav a:focus {
    color: rgb(25, 25, 112);
    border-color: rgb(173, 216, 230);
}
nav a:active {
    color: rgb(25, 25, 112);
    border-color: rgb(173, 216, 230);
}
nav li .active {
    color:rgb(25, 25, 112);
    border-color: rgb(70, 130, 180);
}

/* ------ MAIN ------ */
main {
    min-height: calc( 100vh - 182px);
    display: flex;
    flex-direction: column;
    width: 100%;
    float: left;
}
.row {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}
.row_inner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .8rem 1rem;
    margin: 0;
}
.row_pad {
    padding: 0 1rem;
}
.row_margin_top {
    margin-top: 1rem;
}
.section_title {
    display: flex;
    width: 100%;
}
.full_screen_photo {
    width: 100%;
    height: auto;
    max-width: 1300px;
}

.swim {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: inherit;
    justify-content: space-between;
    color: rgb(255,255,255); 
    font-size: 1.3em;
    background-color: rgb(38, 55, 70);
    padding: .5rem;
}
.swim_img {
    display: flex;
    justify-content: end;
    width: 40%;
}
.swim a {
    text-decoration: none;
}
.op_logo {
    align-self: flex-end;
    opacity: .2;
}
.cta_offer,
.cta {
    width: 80%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.cta_offer {
    justify-content: space-around;
    align-items: center;
    border: 1px solid rgb(255, 248, 220);
    box-shadow: 0px 1px 7px rgba(255,255,255,0.6) inset;
}

.cta_offer:hover {
    border: 2px solid rgb(255, 248, 220);
    box-shadow: 0px 1px 17px rgba(255,255,255,0.9) inset;
}
.cta_offer h2,
.cta_offer p {
    color: rgb(255,255,255);
    margin: .2em;
}
.page_top {
    display: flex;
    width: 100%;
    justify-content: center;
}
.york_skyline {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: linear-gradient(#484d88, #3f87a6, #ebf8e1, #f69d3c, #e66465);
}
.bg_col_white {
    background-color: rgb(255, 255, 255);
}
.bg_col_lightgrey {
    background-color: rgb(243, 243, 243);
}
.bg_col_turquoise {
    background-color: rgb(0, 150, 140);
}
.bg_col_blue {
    background-color: rgb(0, 130, 150);
}
.bg_col_lightblue {
    background-color: rgb(175, 232, 241);
}
.bg_col_darkgray {
    background-color: rgb(90, 99, 116);
}
.bg_col_cream {
    background-color: rgb(255, 248, 220);
}
.text_col_white {
    color: rgb(255,255,255);
}
.text_panel {
display: flex;
flex-direction: column;
align-self: center;
width: clamp(23ch, 100%, 65ch);
/* temp fix needs main defining*/
margin-inline: auto;
}
.together {
    border: solid 1px hsl(0deg 0% 50.2%);
    padding: .5rem 1rem;
    border-radius: 12px;
}
/* ------ Rooms Gallery ------ */
 .rooms_gallery {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     flex-wrap: wrap;
     width: 100%;
 }
.gallery_card {
text-align: center;
border: 1px solid rgb(173, 216, 230);
background-color: rgb(255, 255, 255);
}

/* ------ Room Grid ------ */

.room_grid {
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(173, 216, 230);
    border-radius: 5px;
    width: 90%;
    background-color: rgb(255, 255, 255);
    margin: .5rem 0;
    align-self: center;
}

.room_grid_panel {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-bottom: 1px solid rgb(173, 216, 230);
    margin: .5rem 0;
}

.room_grid_panel:last-child {
    border-bottom: none;
}

/* ---- other panels ----*/
.panel,
.panel_sm,
.panel_med,
.panel,
.panel_lrg,
.panel_xlrg,
.panel_full {
    float: left;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    width: 100%;
    height: auto;
    margin: 0;
    padding: .5rem 1rem;
}

.panel p,
.panel_sm p,
.panel_med p,
.panel p,
.panel_lrg p,
.panel_xlrg p,
.panel_full p {
    margin: .375em 0;
}
.panel_text {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.panel_img {
    height: auto;
    width: 180px;
}

/* ----- Positioning ----- */
.f-direct_row {
    flex-direction: row;
    flex-wrap: wrap;
}
.justify-center {
    justify-content: center;
}
.justify-around {
    justify-content: space-around;
}
.align-center {
    align-items: center;
}
.pad_bottom {
    padding: 0 0 1rem;
}
.panel li {
    list-style: square;
}
.hi_light {
    font-size: 1.2rem;
    color: rgb(0, 150, 140);
    padding: 1rem;
    border: solid 1px;
    text-align: center;
    margin: 2rem 0 0 0;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.2) inset;
}
.hi_light a {
    font-size: 1.2rem;
}
.mail-pic {
    display: inline-block;
    margin-right: .5rem;
}
/* ----- Form Fields ----- */

form {
float: left;
max-width: 600px; 
min-width: 100%;
margin: 0;
padding: 10px 20px;
background: rgb(173, 216, 230);
box-shadow: 5px 10px 12px rgba(0,0,0,0.06);
}

input,
textarea,
select {
cursor: pointer;
  background: rgb(255,255,255);
font-family: inherit;
  font-size: 1.1rem;
  height: auto;
  outline: 0;
  padding: 15px;
  color: rgb(80, 84, 91);
  border: 1px solid rgb(0, 128, 128);
  box-shadow: 2px 2px 3px rgba(0,0,0,0.06) inset;
  margin: 0 0 8px;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
}

input[type="checkbox"] {
  margin: 0 4px 8px 0;
}

select {
    font-size: 1.1rem;
    padding: 6px;
    border-radius: 2px;
}

button {
float: right;
  cursor: pointer;
  padding: 1em;
  color: rgb(0, 128, 128);
  background-color: rgb(255, 255, 255)white;
  font-size: 1.1em;
  font-weight: 600;
  text-align: center;
  font-style: normal;
  border-radius: 5px;
  border: 1px solid rgb(0, 128, 128);
  box-shadow: 0 -2px 0 rgb(0, 128, 128) inset;
  margin-bottom: 10px;
}

label {
    font-size: 1.1em;
    font-weight: 600;
    color: rgb(55, 70, 84);
    display: block;
}

.error {
    color: rgb(124, 2, 27);
    font-size: 1.2em;
}

button:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 128, 128);
}
.booking_form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: none;
    box-shadow: none;
    justify-content: center;
}
.booking_form h2 {
    width: 100%;
}
fieldset {
    width: 100%;
    border: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}
.booking_option {
    width: 30%;
    display: flex;
    flex-direction: column;
}
.booking_grid {
    width: auto;
} 
/* ------ Footer ------ */
footer {
    float: left;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    color: rgb(255, 255, 255);
    margin: 0 auto;
    background-color:rgb(38, 55, 70);
    padding: .5rem 0 0 0;
}

footer p,
footer h4,
footer h5 {
    color: rgb(255, 255, 255);
    text-align: left;
    margin: 0;
    padding: 0;
}
.foot a,
.jas_bar p a {
    color: rgb(255, 255, 255);
    text-decoration: underline;
    position: relative;
    font-weight: 600;
}
.foot a:before,
.jas_bar p a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: rgb(255, 255, 255);
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.foot a:hover:before,
.jas_bar p a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  background-color: rgb(255, 255, 255);
}
.no_hover a:hover {
    text-decoration: none;
}
.foot {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 0 .5rem .5rem;
}
.address,
.contact,
.foot_nav,
.follow {
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    order: unset;
}

.jas_bar {
    float: left;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 0 .5rem;
    color: rgb(255, 255, 255);
    background-color: rgb(44, 84, 98);
    justify-content: center;
    align-items: center;
}
.jas_bar img {
    width: 8rem;
    padding: .5rem;
}

/*------------------ Media Queries -----------------------*/ 

@media only screen and (min-width: 33.75em) { /* 540px */
    
    header {
        float: left;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        min-height: 100px;
        padding: .5em 0;
    }
    .logo {
        display: flex;
        flex-direction: row;
        width: 30%;
        height: auto;
    }

    .head_info {
        display: flex;
        flex-direction: column;
        width: 70%;
    }
    .head_contact {
        display: flex;
        width: 100%;
        justify-content: space-around;
        color: rgb(25, 25, 112); 
    }
    .foot {
        flex-direction: row;
        flex-flow: wrap;
    }
    .address,
    .contact,
    .foot_nav,
    .follow {
        width: 50%;
        text-align: left;
        align-items: flex-start;
    }
    .address {
        order: 0;
    }
    .contact {
        order: 2;
    }
    .foot_nav {
        order: 1;
    }
    .follow {
        order: 3;
    }
    .copy {
        align-self: flex-end;
        width: 100%;
        text-align: center;
        order: 4;
    }
    .address p {
        text-align: center;
    }
}

@media only screen and (min-width: 48em) {

    .row,
    .row_inner {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .panel_sm {
        width: 30%;
    }
    .panel_med {
        width: 45%;
    }
    .panel {
        width: 50%;
    }
    .panel_lrg {
        width: 60%;
    }
    .panel_xlrg {
        width: 70%;
    }
    .panel_full {
        width: 85%;
    }
    .address,
    .contact,
    .foot_nav,
    .follow {
        width: auto;
        text-align: left;
        align-items: flex-start;
        order: unset;
    }
    .copy {
        align-self: flex-end;
        width: 100%;
        text-align: center;
    }
} 
@media only screen and (min-width: 65em) {
    fieldset {
        width: 40%;
    }
}