/* Reset CSS */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* GLOBAL */
:root {
    font-size: 18px;
    font-family: "Montserrat", "Molle", sans-serif, cursive;
    --fancyfont: "Molle", cursive;
    --regfont: "Montserrat", sans-serif;
    --yellow: #f6d64a;
    --teal: #55bcd5;
    --purple: #9b26b0;
    --blue: #499bd2;
    --dark-gray: #222;
    --light-gray: #eaeaea;
    --white: #fff;
    --black: #000;
}


/* Mobile First Styles */


#skip {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#skip:focus {
    position: static;
    width: auto;
    height: auto;

}

.sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }


body {
    background: var(--white);
    background: linear-gradient(0deg, var(--white) 95%, var(--teal) 100%); 
}

header {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr;
 grid-template-rows: 3fr 1fr 2fr;
 grid-template-areas: 
    "logo nav nav"
    "head head head"
    "text text text";
}

#logo {
    grid-area: logo;
    place-self: center;
}

#logo img {
    max-width: 100%;
}

nav {
    grid-area: nav;
    place-self: stretch;
}

#menu-toggle { 
    width: 50%;
    list-style: none; 
    padding: 1rem; 
    margin-top: 6vh;
    color: var(--black); 
    background: var(--yellow);
    font-family: var(--regfont);
    font-weight: 900;
    -webkit-user-select: none;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;
}

#menu-toggle a {
  text-decoration: none;
  cursor: pointer;  
  font-family: var(--regfont);
}

#menu-toggle:last-child {
    border: 0;
  }

/* SUB-SECTIONS */
#menu-toggle ul { 
    display: none; 
}
#menu-toggle input:checked ~ ul { 
    display: block; 
}

/* HIDE CHECKBOX */
#menu-toggle input[type=checkbox] { 
    display: none; 
}

/* ADD EXPAND/COLLAPSE ICON  */
#menu-toggle { 
  position: absolute; 
  z-index: 1;
}
#menu-toggle label:after {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  padding: 20px;
  text-align: center;
  font-size: 30px;
  color: var(--black);
  opacity: 0;
}

#menu-toggle ~ input[type=checkbox]:after {
    background-color: var(--dark-gray);
    color: var(--white);

  }

/* SUB-SECTION ITEMS */
#menu-toggle ul { 
    margin-top: 20px; 
    position: absolute;
    background-color: var(--teal);
    width: 60%;
}

#menu-toggle ul a {
    color: var(--black);
    font-variant-caps: all-small-caps;
    font-size: 1.5rem;
}

#menu-toggle li {
    padding: 3vh 0;
    border: 1px var(--black) solid;
    text-align: center;
}


/* Main Body */

h1 {
    grid-area: head;
    font-family: var(--fancyfont);
    font-size: 3rem;
    padding-left: 6vw;
    place-self: center start;
}

header p {
    grid-area: text;
    font-family: var(--regfont);
    font-size: 1.2rem;
    margin: 0 4vw;
}

#intro h2 {
    font-family: var(--fancyfont);
    font-size: 3rem;
    padding-left: 6vw;
}

#intro p {
    font-family: var(--regfont);
    font-size: 1rem;
    line-height: 200%;
    margin: 0 4vw;
    padding-bottom: 2vh;
}


/* Image Grid */

#img-grid {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(4, auto);
    width: 100%;
    gap: 2vh;
    padding-bottom: 2vh;
}

#img-grid img {
    width: 100%;
}


/* Plan Your Trip */

#plan {
    width: 100%;
    background-color: var(--yellow);
    color: var(--black);
    padding-bottom: 4vh;
}

#plan h3 {
    font-family: var(--fancyfont);
    font-size: 2.5rem;
    text-align: center;
    padding: 6vw 4vh;
}

#plan div {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(4, auto);
    gap: 2vh;
}

#plan div section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    place-self: center;
    background-color: var(--teal);
    border: 4px var(--white) solid;
    border-radius: 10%;
    padding: 4vb;
    width: 50vw;
}

#plan div section a {
    place-self: center;
}

#plan div section a img {
    width: 100%;
    place-self: center;
}

#plan h4 {
    text-align: center;
    font-variant-caps: all-small-caps;
    font-size: 2rem;
    font-weight: 900;
    padding-bottom: 3vh;
}

/* Testimonials */

#testimonials h3 {
    font-family: var(--fancyfont);
    font-size: 2.5rem;
    text-align: center;
    padding: 6vw 4vh;
}

#testimonials section {
    display: flex;
    flex-flow: column;
}

#testimonials img {
    width: 50vw;
    margin-left: auto;
    margin-right: auto;
}

#testimonials h4 {
    font-family: var(--regfont);
    text-align: center;
    font-variant-caps: all-small-caps;
    font-size: 3rem;
    font-weight: 900;
}

#testimonials p {
    font-family: var(--regfont);
    text-align: center;
    font-size: 1.5rem;
    padding-bottom: 1vh;
}

#testimonials q {
    font-family: var(--regfont);
    font-style: italic;
    text-align: center;
    font-size: 1.2rem;
    margin: 0 5vh;
    padding-bottom: 6vh;
}

#testimonials q:before {
    content: "“";
  }
  
#testimonials q:after {
    content: "“";
  }

/* About Your Destination */

#about {
    background-color: var(--blue);
    color: var(--black);
    padding-left: 4vb;
    padding-right: 4vb;
    padding-bottom: 4vh;
}

#about h3 {
    font-family: var(--fancyfont);
    font-size: 2.5rem;
    text-align: center;
    padding: 6vw 4vh;
}

#about div {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1vb;
    grid-template-rows: auto auto;
}

#about section {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
}

#about img {
    place-self: center;
    width: 45%;
    padding-bottom: 1vw;
}

#about img[src="images/population.svg"] {
    place-self: center;
    width: 80%;
    padding-bottom: 2vw;
}

#about h4 {
    font-family: var(--regfont);
    text-align: center;
    font-variant-caps: all-small-caps;
    font-size: 1.5rem;
    font-weight: 900;
    padding-bottom: 1vw;
}

#about p {
    font-family: var(--regfont);
    text-align: center;
    padding-bottom: 3vw;
}

/* Contact Us Form */

#contact {
    padding-bottom: 4vh;
    padding-left: 10%;
    padding-right: 10%;
}

#contact h3 {
    font-family: var(--fancyfont);
    font-size: 2.5rem;
    text-align: center;
    padding: 4vw 0vh;
}

#contact .form-required {
    font-family: var(--regfont);
    font-size: 1rem;
}


#contact label {
    font-family: var(--regfont);
    font-size: 1.3rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    line-height: 1.3;
}

#contact input {
    display: block;
    width: 95%;
    padding: 1em 1em;
    background-color: var(--white);
    border: 2px var(--purple) solid;
    margin-bottom: 2vb;
    margin-top: 0.5vb;
    font-family: var(--regfont);
}

#contact input:focus {
    border: 2px var(--purple) solid;
}

#contact div#names {
    padding-bottom: 2vb;
}

#contact div#nums {
    margin-bottom: 0vb;
}


#contact span[class="required"] {
    color: var(--purple);
    padding: 0.25em;
    font-size: 1.3rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
}

#contact fieldset {
    margin-bottom: 2vb;
}

#contact fieldset legend {
    font-family: var(--regfont);
    font-size: 1.3rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    margin-bottom: 1vb;
}

#contact input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--white);
    margin: 0;
    width: 4em;
    height: 4em;
    border: 0.15em solid var(--purple);
    border-radius: 50%;
    display: grid;
    place-content: center;
}
  
#contact input[type="radio"]::before {
    content: "";
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 2em 2em var(--purple);
  }
  
#contact input[type="radio"]:checked::before {
    transform: scale(1);
  }

#contact input[type="radio"]:focus {
    outline: max(2px, 0.25em) solid var(--light-gray);
    outline-offset: max(2px, 0.25em);
  }
  
#contact fieldset label {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto auto auto;
    gap: 1vb;
}

#contact .radio-label {
    place-self: center start;
    line-height: 1.5;
    font-size: 1rem;
    font-family: var(--regfont);
    font-variant-caps: normal;
    font-weight: 300;
}

#contact div#selects {
    position: relative;
    display: flex;
    flex-direction: column;
}

#contact div#selects label {
    margin-bottom: 1vb;
    margin-top: 2vb;
}

#contact select {
    appearance: none;
    width: 100%;
    padding: 1em 1em;
    background-color: var(--white);
    border: 2px var(--purple) solid;
    font-family: var(--regfont);
}

#contact input[type="submit"] {
    background-color: var(--purple);
    color: var(--white);
    font-family: var(--regfont);
    font-size: 1.3rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    max-width: 100%;
    margin: 2vb auto;
}


/* Footer */

footer {
    background-color: var(--light-gray);
    color: var(--black);
    padding: 4vb 6vb;
    text-align: center;
    font-size: 0.9rem;
}

footer p {
    padding-bottom: 2vb;
}

footer a {
    color: var(--black);
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 2vb 0;
}


/* Tablet Styles */

@media only screen and (min-width: 800px) {
 
    header {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 3fr 1fr 2fr;
        grid-template-areas: 
           "logo head"
           "logo text"
           "nav nav";
       }

       #logo {
        grid-area: logo;
        place-self: center;
    }
    
    #logo img {
        max-width: 100%;
        min-width: 15em;
    }
    
/* Main Body */


h1 {
    grid-area: head;
    font-family: var(--fancyfont);
    font-size: 3rem;
    padding-left: 6vw;
    place-self: center start;
}

header p {
    grid-area: text;
    font-family: var(--regfont);
    font-size: 1.2rem;
    margin: 0 4vw;
}

#intro h2 {
    font-family: var(--fancyfont);
    font-size: 3rem;
    padding-left: 6vw;
}

#intro p {
    font-family: var(--regfont);
    font-size: 1rem;
    line-height: 200%;
    margin: 0 4vw;
    padding-bottom: 2vh;
}

nav {
    grid-area: nav;
    position: relative;
    top: -3em;
    place-self: start;
}

#menu-toggle {
    background-color: unset;
}

#menu-toggle input, #menu-toggle label {
    padding: 0;
    width: 0;
}

#menu-toggle label {
    display: none;
}

#menu-toggle ul { 
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: auto;
    gap: 1vb;
    width: 80%;
    background-color: unset;
    padding: 0;
}


#menu-toggle li { 
    border: 1px var(--white) solid;
    background-color: var(--white);
    min-width: 32vb;
    max-width: 40vb;
    height: auto;
    margin: 0;
    padding: 2vb 0vb;
    place-self: center;
    color: var(--black);
}

#menu-toggle li:hover, #menu-toggle li:focus, 
#menu-toggle li a:hover, #menu-toggle li a:focus { 
    background-color: var(--yellow);
    color: var(--white);
    border: 1px var(--yellow) solid;
}


h2 {
    padding-top: 3rem;
}

/* Image Grid */

#img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, auto);
    grid-template-areas: 
    "img img"
    "pict pict";
    gap: 2vh;
    padding-bottom: 2vh;
}

#img-grid img {
    width: 100%;
}

#img-grid picture {
    grid-area: pict;
}


/* Plan Your Trip */

#plan {
    max-width: 100%;
}

#plan h3 {
    font-family: var(--fancyfont);
    font-size: 3.5rem;
    text-align: start;
    padding: 6vw 4vh;
}

#plan div {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    gap: 2vh;
    max-width: 100%;
}

#plan div section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    place-self: center;
    background-color: var(--teal);
    border: 4px var(--white) solid;
    border-radius: 7%;
    padding: 4vb;
    width: 30vw;
}

#plan div section a {
    place-self: center;
}

#plan div section a img {
    width: 100%;
    place-self: center;
}

#plan h4 {
    text-align: center;
    font-variant-caps: all-small-caps;
    font-size: 2rem;
    font-weight: 900;
    padding-bottom: 3vh;
}

/* Testimonials */

#testimonials {
    padding-left: 8vh;
    padding-right: 8vh;
    display: grid;
    grid-template: 
    "title" auto
    "sect" auto / 1fr;
}

#testimonials h3 {
    font-family: var(--fancyfont);
    font-size: 3.5rem;
    text-align: start;
    padding: 6vw 0;
    grid-area: title;
}

#testimonials div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}

#testimonials section {
    display: grid;
    grid-template-rows: auto repeat(3, auto);
    grid-template-columns: auto;
}


#testimonials img {
    width: 30vw;
    margin-left: auto;
    margin-right: auto;
}

#testimonials h4 {
    font-family: var(--regfont);
    text-align: center;
    font-variant-caps: all-small-caps;
    font-size: 3rem;
    font-weight: 900;
}

#testimonials p {
    font-family: var(--regfont);
    text-align: center;
    font-size: 1.5rem;
    padding-bottom: 1vh;
}

#testimonials q {
    font-family: var(--regfont);
    font-style: italic;
    text-align: center;
    font-size: 1.2rem;
    margin: 0 5vh;
    padding-bottom: 6vh;
}

#testimonials q:before {
    content: "“";
  }
  
#testimonials q:after {
    content: "“";
  }


/* About Your Destination */

#about h3 {
    font-family: var(--fancyfont);
    font-size: 3rem;
    text-align: start;
    padding: 6vw 4vh;
}

#about div {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 1vb;
    grid-template-rows: auto auto;
}

#about section {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 2fr 0.5fr 0.5fr;
}

#about img {
    place-self: center;
    width: 45%;
    padding-bottom: 1vw;
}

#about img[src="images/population.svg"] {
    place-self: center;
    width: 60%;
    padding-bottom: 2vw;
}

/* Contact Us */

#contact h3 {
    text-align: start;
}

#contact fieldset legend {
    padding-bottom: 2vb;
}

#contact fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 0vb;
    grid-auto-flow: row;
}

/* Footer */

footer {
    background-color: var(--light-gray);
    color: var(--black);
    display: grid;
    grid-template-columns: 2fr repeat(2, 1fr);
    grid-template-rows: 1fr;
    text-align: center;
    font-size: 0.9rem;
}

footer p {
    place-self: end center;
}

footer a {
    color: var(--black);
    display: block;
    text-align: center;
    text-decoration: none;
}
}



/* Mid-point */

@media only screen and (min-width: 1100px) {
 
    h2 {
        padding-top: 6rem;
    }
}





/* Desktop */

@media only screen and (min-width: 1920px) {
 
    header {
        display: grid;
        grid-template-columns: 0.25fr 0.5fr 1fr;
        grid-template-rows: 2fr 1fr;
        grid-template-areas: 
           "logo head nav"
           "logo text .";
           gap: 0;
       }

       #logo {
        grid-area: logo;
        place-self: center;
    }
    
    #logo img {
        max-width: 100%;
        min-width: 15em;
    }
    
/* Main Body */


h1 {
    grid-area: head;
    font-family: var(--fancyfont);
    font-size: 3rem;
    margin: 0;
    padding: 0 1vw;
    place-self: end start;
}

header p {
    grid-area: text;
    font-family: var(--regfont);
    font-size: 1.2rem;
    margin: 0 1vw;
}

nav {
    grid-area: nav;
    position: relative;
    top: -4em;
    left: 0;
    margin: 0;
    padding: 0;
    place-self: start;
}

#menu-toggle {
    background-color: unset;
}

#menu-toggle input, #menu-toggle label {
    padding: 0;
    width: 0;
    margin: 0;
}

#menu-toggle label {
    display: none;
}

#menu-toggle ul { 
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: auto;
    gap: 1vb;
    background-color: unset;
    padding: 0;
    width: 90%;
}


#menu-toggle li { 
    border: 1px var(--white) solid;
    background-color: var(--white);
    min-width: 28vb;
    max-width: 40vb;
    height: auto;
    margin: 0;
    padding: 2vb 0vb;
    place-self: center;
    color: var(--black);
}

#menu-toggle li:hover, #menu-toggle li:focus, 
#menu-toggle li a:hover, #menu-toggle li a:focus { 
    background-color: var(--yellow);
    color: var(--white);
    border: 1px var(--yellow) solid;
}

#intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.25fr 1fr;
    grid-template-areas:
    "maj img"
    "majtext img";
}

#intro h2 {
    grid-area: maj;
    font-family: var(--fancyfont);
    font-size: 3rem;
    padding-left: 4vw;
}

#intro p {
    grid-area: majtext;
    font-family: var(--regfont);
    font-size: 1rem;
    line-height: 200%;
    margin: 0 4vw;
    padding-bottom: 2vh;
}

/* Image Grid */

#img-grid {
    grid-area: img;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, auto);
    grid-template-areas: 
    "img img"
    "pict pict";
    gap: 2vh;
    padding-bottom: 2vh;
}

/* Plan Your Trip */
 
#plan {
    padding: 0;
    padding-bottom: 10vb;
}

#plan div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    gap: 2vb;
    max-width: 95%;
    margin-left: 3vb;
}

#plan div section {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    place-self: center;
    background-color: var(--teal);
    border: 4px var(--white) solid;
    border-radius: 5%;
    padding: 3vb;
    width: 80%;
    height: auto;
}

#plan div section a {
    place-self: center;
}

#plan div section a ~ img {
    width: 70%;
    height: auto;
    place-self: center;
}

#plan div section img[src="images/stay.svg"] {
    padding: 5vb 0;
}

#plan h4 {
    place-self: start center;
    font-variant-caps: all-small-caps;
    font-size: 2rem;
    font-weight: 900;
    padding-bottom: 0;
    padding: 1vb;
}


/* Testimonials */

#testimonials {
    padding: 0;
    padding-bottom: 10vb;
    display: grid;
    grid-template: 
    "title" auto
    "sect" auto / 1fr;
}

#testimonials h3 {
    font-family: var(--fancyfont);
    font-size: 3.5rem;
    text-align: start;
    padding: 6vw 3vb;
    grid-area: title;
}

#testimonials div {
    grid-area: sect;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 2vb;
    max-width: 95%;
    margin-left: 3vb;
}

#testimonials section {
    display: grid;
    grid-template-rows: 15vw repeat(3, 0.25fr);
    grid-template-columns: auto;
}


#testimonials img {
    width: 13vw;
    margin-left: auto;
    margin-right: auto;
    place-self: center;
}

/* About Your Destination */

#about h3 {
    font-family: var(--fancyfont);
    font-size: 3rem;
    text-align: start;
    padding: 4vw 6vh;
}

#about div {
    padding-left: 10%;
    padding-right: 15%;
    padding-bottom: 6vb;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vb;
    grid-template-rows: auto;
}

#about section {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 2fr 0.5fr 0.5fr;
}

#about img {
    place-self: center;
    width: 35%;
    padding-bottom: 1vw;
}

#about img[src="images/population.svg"] {
    place-self: center;
    width: 50%;
    padding-bottom: 2vw;
}


/* Contact Us Form */

#contact {
    padding-bottom: 8vh;
    padding-left: 4%;
    padding-right: 6%;
}

#contact h3 {
    grid-area: title;
    font-family: var(--fancyfont);
    font-size: 2.5rem;
    padding: 2vw 0;
}

#contact form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 0.1fr 1fr 1fr;
    gap: 2vb;
    grid-template-areas:
    "title title title"
    "form1 form2 form3"
    "form1 form2 form3";
}

#names {
    grid-area: form1;
}

#nums {
    grid-area: form2;
}

#selects {
    grid-area: form3;
}


/* Footer */

footer {
    background-color: var(--light-gray);
    color: var(--black);
    display: grid;
    grid-template-columns: 2fr repeat(2, 0.5fr);
    grid-template-rows: 1fr;
}

footer p {
    place-self: center start;
}

}