/*mobile and global*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

body {
  margin: 0 auto;
  background-color: rgba(255, 255, 224, 1);
}

.title {
    margin: 25px 0;
}

.subtitle {
    font-size: .8em;
    font-weight: 900;
    margin-bottom: 50px;
    color: #603913
}

h1, h2, h3, h4, p {
    font-family: 'Source Sans Pro', sans-serif;
    color: #603913;
}

h1 {
    font-size: 2em;
    font-weight: 900;
}

h2 {
    font-size: 1.5em;
    font-weight: 700;
}

h3, h4 {
    font-size: 1.2em;
    font-weight: 600;
}

p {
    font-weight: 400;
    color: #603913;
}

/*Navigation Settings*/

header  {
    /*border: 2px solid black; there to help me gauge spacing on screen*/ 
    width: 100%;
    background-color: #603913;
}

header a {
    color: white;
}

header a:hover {
    color: #83A64E
}

header a:current {
    color: #f2c641;
}

header a::after {
    color: white
}

/*Nav Logo*/
header .logo a {
    cursor: pointer;
}

header .logo a img{
    width: 150px;
}

header .logo a img:hover {
    filter: drop-shadow(0 0 3px white);
}
/*end*/

#nonmobilemenuwrapper {
    display: none;
}

/*css for Hamburger Menu*/
#hamburgericonmenuwrapper{
	z-index: 10000;
	position: absolute;
    font-size: 16px; /* base font size for em values below */
}

/* ###### CSS for Hamburger UI DIV and links ###### */

#hamburgerui{
	overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2; /* make #hamburgerui higher in z-index than #fullscreenmenu */
}

#hamburgerui ul{
	margin: 0;
	padding: 0;
	font: bold 16px 'Bitter', sans-serif; /* #hamburgerui font size (Bitter is Google font) */
	list-style-type: none;
}

#hamburgerui li{
	display: inline;
	margin: 0;
}

#hamburgerui li a{
	float: left;
	display: block;
    position: relative;
	text-decoration: none;
	margin: 0;
	padding: 25px 30px; /*padding inside each link */
	color: white;
    outline: none;
	background: #f2c641; /*background of tabs (default state)*/
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

#hamburgerui li:last-of-type a{
    width: 35px; /* width of last LI A containing hamburger style icon */
  
}

#hamburgerui li:last-of-type a:after{
    content: 'Menu';
    visibility: hidden;
}

#hamburgerui li a:visited{
	color: white;
}

#hamburgerui li a:hover{
	background: #f2c641; /*background of UI links for hover state  */
}


#navtoggler{  /* Main hamburger icon to toggle menu state */
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 10px; /* change font size to change hamburger icon dimensions. Leave width/height below alone */
    width: 4em;
    height: 2.5em;
    padding: 0;
    text-indent: -1000px;
    border: 0.6em solid white;
    /* border color */
    border-width: 0.6em 0;
    cursor: pointer;
    -webkit-transform: translate3D(-50%, -50%, 0);
    transform: translate3D(-50%, -50%, 0); /* center hamburger icon inside link */
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}


#navtoggler::before, #navtoggler::after{
    /* inner strip inside hamburger icon */
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 0.6em;
    top: 50%;
    margin-top: -0.3em;
    left: 0;
    background: white; /* stripes background color. Change to match border color of parent label above */
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}


/* ###### CSS for Full Screen Menu NAV ###### */

#fullscreenmenu {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #f2c641; /* background color of full screen menu */
    padding-top: 80px; /* shift UL downwards by 100px so it's not obscured by hamburger icon */
    z-index: 1;
    visibility: hidden;
    overflow: auto;
    font-family: 'Bitter', sans-serif; /* 'Bitter' is Google font */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate3D(0, -100%, 0); /* hide menu initially on screen by offsetting it vertically */
    transform: translate3D(0, -100%, 0); 
    -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
    transition: transform 0.5s, visibility 0s 0.5s;
}

#fullscreenmenu ul{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
    position: relative;
    text-transform: uppercase;
    -webkit-transform: translate3D(0, -40px, 0);
    transform: translate3D(0, -40px, 0);
    opacity: 0;
    transition: all 0.5s 0.4s;
}

#fullscreenmenu ul li{
	width: 100%; /* set to 50% to show 2 columns of links */
	float: left;
	display: inline;
    text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 8px; /* bottom spacing between LI */
}

#fullscreenmenu ul li a {
    text-decoration: none;
    font-size: 1.5em;
    font-weight: 700;
    position: relative;
    color: #603a16; /* link color */
    padding: 10px; /* general spacing between links */
    display: block;
    transition-property: background-color;
    transition-duration: 500ms;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}


#fullscreenmenu ul li a:hover{
    background-color: #83A64E;
}

#fullscreenmenu ul li a:hover:after{
    width: 100%;
}

/* #### Menu Hamburger Icon UI when shrinked CSS ######## */

#hamburgerui.shrink li:nth-last-of-type(n+2) a{
    opacity: 0;
    pointer-events: none;
}

/* #### Menu Opened State CSS ######## */

#hamburgericonmenuwrapper.open #fullscreenmenu{
    visibility: visible;
    -webkit-transform: translate3D(0, 0, 0); /* show menu by shifting it vertically to visible position within container */
    transform: translate3D(0, 0, 0);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;}

#hamburgericonmenuwrapper.open #navtoggler{
    border-width: 0;
}

#hamburgericonmenuwrapper.open #navtoggler::before{
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); /* rotate line to create "x" */
}

#hamburgericonmenuwrapper.open #navtoggler::after{
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); /* rotate line to create "x" */
}

#hamburgericonmenuwrapper.open #hamburgerui li:nth-last-of-type(n+2) a{
    opacity: 0;
    pointer-events: none;
}

#hamburgericonmenuwrapper.open #fullscreenmenu ul{
    opacity: 1;
    -webkit-transform: translate3D(0, 0, 0);
    transform: translate3D(0, 0, 0); /* restore UL to original positon */
}
/*end*/

/*body - patch grid*/
.gird {
    /*border: 2px solid red; there to help me gauge spacing on screen*/ 
    margin-top: 10px;
}

.badge {
    width: 100px;
    height: 100px;
    margin: 5px;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#rates-patch:hover {
    content: url(assets/images/patch-flower.png);
}

#program-patch:hover {
    content: url(assets/images/patch-butterfly.png);
}

#enroll-patch:hover {
    content: url(assets/images/patch-star.png);
}

#about-patch:hover {
    content: url(assets/images/patch-leaf.png);
}

#blog-patch:hover {
    content: url(assets/images/patch-sun.png);
}

#calendar-patch:hover {
    content: url(assets/images/patch-reading.png);
}

#contact-patch:hover {
    content: url(assets/images/patch-compass.png);
}

#inquire-patch:hover {
    content: url(assets/images/patch-sign.png);
}

#activity-patch:hover {
    content: url(assets/images/patch-hills.png);
}

#faq-patch:hover {
    content: url(assets/images/patch-water.png);
}

#submit-patch:hover {
    content: url(assets/images/patch-binocular.png);
}

/*Body Content: Welcome*/

.content {
    display: flex;
    flex-direction: column;
    /*border: 2px solid blue; there to help me gauge spacing on screen*/ 
}

#welcome {
    text-align: center;
    margin: 25px 0;
}

.greetings {
    margin: 10px 0;
    padding: 10px;
    width: 100%;
}

#wordmark {
    max-width: 300px;
    max-height: 50px;
    margin: 20px;
}

#info-patch {
    /*border: 2px dotted purple; there to help me gauge spacing on screen;*/
    margin: 25px auto;
}

/*Countdown Clock*/
#timer {
    margin: 25px auto;
}

#headline {
    text-align: center;
    color: #603913;
}

#countdown {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85px;
    height: 75px;
    padding: 5px;
    border: 5px solid #603913;
    margin: 1px;
    background-color: #588EAA;
    color:white;
}

.date-text {
    font-size: 1.25em;
}

.date-name {
    font-size: .75em;
}
/*End*/

/*Program dropdown content*/

#activities {
    margin: 25px 0;
}

#program-intro {
    text-align: center;
    font-size: 1.15em;
    padding: 20px;
}

#groups {
    grid-area: group-info;
}

#group-img {
    grid-area: group-img;
}

#group-container {
    display: grid;
    grid-template-areas: 
        "group-info"
        "group-img";
}

.dropdown {
    position: relative;
    /*display: inline-block;*/
    /*border: 2px solid brown; there to help me gauge spacing on screen*/ 
    margin: 5px 50px;
    padding: 15px;
}

.dropdown h2 {
    color: #588EAA;
}

.dropdown-content {
    width: 400px;
    display: none;
    /*box-shadow: 0px 8px 16px 0px gray;*/
    padding: 10px;
    z-index: 1;
    transition: display 5s ease-in 3s; 
}

.dropdown:hover .dropdown-content {
    display: block;
}

.groups {
    font-size: .8em;
    color: #a62626;
}

#drop-img {
    width: 100%;
    padding: 25px 0;
}

/*Blog and News section*/

#bn-box h1{
    text-align: center;
}

#post-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 25px 0;
}

.posts {
    width: 400px;
    min-height: 450px;
    background: #603913;
    border: 5px solid #603913;
    padding: 10px;
    margin: 0 25px;
}

.blog-text {
    color: white;
}

.blog-details {
    padding: 10px 5px;
    font-size: .7em;
}

.post-img {
    height: 250px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-bottom: 10px;
}

/* general pages css*/
.page-header-img {
    width: 100%;
    margin-bottom: 0px;
}

.page-header-title {
    width: 100%;
    text-align: center;
    padding: 20px 10px;
    background-color: #f2c641;
    border: 5px solid #603913;
    margin-top: -5px;
    font-size: 1em;
}

.main-box-img {
    width: 100%;
}

.subheader-title {
    width: 100%;
    text-align: center;
    padding: 20px 5px;
    background-color: #f2c641;
    border: 5px solid #603913;
    margin-top: 0px;
    font-size: 1em;
}

.subheader-info {
    font-size: 1em;
    padding: 20px 10px;
}

/*About main body css*/


#about-main-one {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

}

#about-text-one {
    padding: 10px 0;
}

#about-text-one ul li {
    color: #588EAA;
    font-size: 1.5em;
    font-weight: 700;
}

#about-text-two {
    width: 100%;
    padding: 2px;
}


#about-main-two {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.mission {
    padding: 10px 0;
    width: 100%;
}

#mission-one {
    grid-area: experience;
}

#mission-two {
    grid-area: growth;
}

#mission-three {
    grid-area: staff;
}

#mission-four {
    grid-area: atmosphere;
}

.mission-value-title {
    color: #588EAA;
    font-size: 1.25em;
    text-transform: uppercase;
}

.mission-value-detail {
    color: #a62626;
    font-size: 1em;
}

#mission-value {
    padding: 10px;
    display: grid;
    grid-template-areas: 
    "experience"
    "growth"
    "staff"
    "atmosphere";
}

#contact-fname {
    grid-area: contact-one;
}

#contact-lname {
    grid-area: contact-two;
}

#contact-email {
    grid-area: contact-three;
}

#contact-message {
    grid-area: contact-four;
}

.four {
    padding: 10px 75px 75px 25px;
}

.five {
    padding: 10px 75px 10px 25px;
}

#contact-us {
    display: grid;
    grid-template-areas: 
    "contact-one"
    "contact-two"
    "contact-three"
    "contact-four";
}

#contact-us-patch {
    margin: 20px;
    display: flex;
    justify-content: center;
}

/*Calendar Page*/
.wrapper {
    font-size: 1em;
    margin: 15px auto;
    max-width: 450px;
    filter: drop-shadow(1px 5px 5px rgba(0, 0, 0, .3));
  }
  
.container-calendar {
    background: white;
    padding: 15px 0;
    max-width: 450px;
    margin: 0 auto;
    overflow: auto;
    border-radius: 10px;
  }
  
.button-container-calendar button {
    cursor: pointer;
    display: inline-block;
    zoom: 1;
    background: #588EAA;
    color: white;
    border: 1px solid #603913;
    border-radius: 4px;
    padding: 5px 10px;
}

#calendar {
    border: none;
      
}
  
.table-calendar {
    border-collapse: collapse;
    width: 100%;
}
  
.table-calendar td, .table-calendar th {
    padding: 5px;
    border: 1px solid #603913;
    text-align: center;
    vertical-align: top;
}
  
.date-picker.selected {
    font-weight: bold;
    outline: 3px dashed #588EAA;
}
  
.date-picker.selected span {
    border-bottom: 1px solid currentColor;
}
  
/* sunday */
.date-picker:nth-child(1) {
    color: #a62626;
}
  
/* friday */
.date-picker:nth-child(6) {
    color: #83A64E;
}
  
#monthAndYear {
    text-align: center;
    margin-top: 0;
}
  
.button-container-calendar {
    position: relative;
    margin: 20px 5px;
    overflow: hidden;
    clear: both;
}
  
#previous {
    float: left;
}
  
#next {
    float: right;
}
  
.footer-container-calendar {
    margin-top: 1em;
    border-top: 1px solid #dadada;
    padding: 10px;
}
  
.footer-container-calendar select {
    cursor: pointer;
    display: inline-block;
    zoom: 1;
    background: #ffffff;
    color: #585858;
    border: 1px solid #bfc5c5;
    border-radius: 3px;
    padding: 5px 1em;
}

.calendar-box {
    padding: 10px;
}

.calendar-dates li {
    color: #a62626;

}

.date-title {
    color: #588EAA;
}

#weekly-schedule {
    padding: 10px;
}

#image-schedule {
    width: 100%;
    margin: 15px 0;
}

/*Rates page*/
table {
    border: 5px solid #603913;
    border-radius: 15px;
    margin: 25px auto;
}

th {
    border: 3px solid #603913;
    padding: 15px;
    background: #f2c641;
    color: #603913;
    font-size: 1.5em;
    font-weight: 900;
}

#header-one {
    border-radius: 10px 0 0 0;
}

#header-three {
    border-radius: 0 10px 0 0;
}

.column-one {
    padding: 10px 50px;
    background: #588EAA;
    color: white;
    font-size: 1.2em;
    font-weight: 700;
}

.column-two {
    padding: 10px 20px;
    color: white;
    text-align: center;
    background: #D98825;
    font-size: 1.2em;
    font-weight: 500;
}

.column-three {
    padding: 10px 20px;
    color: white;
    text-align: center;
    background: #83A64E;
    font-size: 1.2em;
    font-weight: 500;
}

.sidenote {
    font-size: .8em;
    border-radius: 0 0 0 10px;
}

.blanknote {
    border-radius: 0 0 10px 0;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

#rate-page-patch {
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/*Enroll Page*/
#enroll {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.instructions {
    margin: 0 10px;
    padding: 0 25px;
}

.enroll-title {
    font-size: 1.5em;
    text-align: center;
    margin: 10px 0 5px 0;
    display: block;
    width: 100%;
    padding: 20px 0;
    text-transform: uppercase;
    color: #a62626
}

.enroll-subtitle {
    margin: 10px 0;
    padding: 5px 10px;
    font-size: 1em;
    color: #a62626;
}

.form-box {
    padding: 0 10px;
}

.frame {
    margin: 5px 0;
}

.field {

    border-radius: 5px;
    border: none;
    margin-left: 10px;
    filter: drop-shadow(1px 5px 5px rgba(0, 0, 0, .3));
}

input::placeholder {
    color: #588EAA;
    font-size: 18px;
}

.one {
    padding: 10px 25px;
}

.two {
    padding: 10px 25px;
}

.three {
    padding: 10px 75px;
}

.dropdown-enroll {
    position: relative;
    /*display: inline-block;*/
    /*border: 2px solid brown; there to help me gauge spacing on screen*/ 
    margin: 10px;

}

.dropdown-content-enroll {
    width: 250px;
    display: none;
    /*box-shadow: 0px 8px 16px 0px gray;*/
    padding: 10px;
    z-index: 1;
    transition: display 10s ease-in 1s; 
}

.dropdown-enroll:hover .dropdown-content-enroll {
    display: block;
}

.dropbtn {
    font-size: 20px;
    color: #588EAA;
    background-color: white;
    border-radius: 5px;
    border: none;
    padding: 5px 30px;
    filter: drop-shadow(1px 5px 5px rgba(0, 0, 0, .3));
}

#parent-fname {
    grid-area: pfirst;
}


#parent-lname {
    grid-area: plast;
}

#parent-rel {
    grid-area: relationship;
}

#parent-email {
    grid-area: pemail;
}

#parent-mobile {
    grid-area: pmobile;
}

#parent-home {
    grid-area: landline;
}

#home-address {
    grid-area: home-one;
}

#home-city {
    grid-area: home-two;
}

#home-state {
    grid-area: home-three;
}

#home-zip {
    grid-area: home-four;
}

#camper-fname {
    grid-area: camper-one;
}

#camper-lname {
    grid-area: camper-two;
}

#camper-gender {
    grid-area: camper-three;
}

#camper-birth {
    grid-area: camper-four;
}

#camper-grade {
    grid-area: camper-five;
}

#add-attend {
    grid-area: additional-one;
}

#add-allergy {
    grid-area: additional-two;
}

#add-medical {
    grid-area: additional-three;
}

#parent-info {
    display: grid;
    grid-template-areas: 
    "pfirst"
    "plast"
    "relationship"
    "pemail"
    "pmobile"
    "landline";
}

#home-info {
    display: grid;
    grid-template-areas: 
    "home-one"
    "home-two"
    "home-three"
    "home-four";    
}

#camper-info {
    display: grid;
    grid-template-areas: 
    "camper-one"
    "camper-two"
    "camper-three"
    "camper-four"
    "camper-five";
}

#add-info {
    display: grid;
    grid-template-areas: 
    "additional-one"
    "additional-two"
    "additional-three";
}

#note-dates {
    display: flex;
    flex-direction: column;
}

/*Resources Page*/

.resource-text {
    padding: 10px;
}

.safety-covid-title {
    padding: 10px;
    color: #588EAA;
    font-size: 1.5em;
}

.safety-covid{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#cdc-btn {
    background-color: #83A64E;
    color: white;
    font-size: 1em;
    margin: 10px 0;
    padding: 10px 20px;
    border-radius: 5px;
    border: 3px solid #603913;
}

#safety-camp {
    padding: 10px;
}

.safety-camp-title {
    color: #588EAA;
    font-size: 1.5em;
}

#safety-camp-greeting {
    font-size: 1em;
    padding: 10px;
}

.safety-camp-subheader {
    font-size: 1.1em;
    text-transform: uppercase;
    margin: 10px 0 0 0;
}

#staff-training {
    grid-area: safety-one;
}


#hiring {
    grid-area: safety-two;
}

#ratio {
    grid-area: safety-three;
}

#supervision {
    grid-area: safety-four;
}

#nurse {
    grid-area: safety-five;
}

#standards {
    grid-area: safety-six;
}

#safety-grid {
    display: grid;
    grid-template-areas: 
    "safety-one"
    "safety-two"
    "safety-three"
    "safety-four"
    "safety-five"
    "safety-six"
    ;
}

.safety-camp-detail {
    color:#a62626;
    font-size: .8em;
    padding: 10px;
}

.dropdown-content-faq {
    font-size: 1em;
    display: none;
    padding: 10px;
    z-index: 1;
    transition: display 1s ease-in 5s; 
}

.dropdown:hover .dropdown-content-faq {
    display: block;
}

.faq-text {
    color: #a62626;
}

.subheader-faq {
    padding: 10px;
    text-transform: uppercase;
    color: #588EAA;
}

/*footer*/

#connect {
    grid-area: connect-box;
}

#explore {
    grid-area: explore-box;
}

#resources {
    grid-area: resource-box;
}

footer {
    background-color: #83A64E;
    width: 100%;
    padding: 20px;
    display: grid;
    grid-template-areas: 
        "connect-box"
        "explore-box"
        "resource-box";

}

footer h2, ul li {
    list-style-type: none;
    padding: 5px;
    color: white; 
}

footer a {
    color: white;
    text-decoration: none;
    padding: 5px;

}
/*Desktop Version*/
@media only screen and (min-width: 769px) {

    /*desktop hamburger menu*/
    #hamburgericonmenuwrapper {
        display: none;
    }

    #mobile-logo {
        display: none;
    }

    #nonmobilemenuwrapper {
        display: block;
        padding: 0 50px;
    }

    #nonmobilemenu ul {
        display: flex;
        list-style: none;
        justify-content: center;
        align-items: center;
    }

    #nonmobilemenu ul li a {
        text-decoration: none;
        padding: 10px;
    }

    /*hamburger end*/

    /*desktop nav*/
    header .logo a img{
        width: 100px;
    }

    .badge {
        width: 150px;
        height: 150px;
        margin: 10px;
    }

    #wordmark {
        max-width: 500px;
        max-height: 50px;
    }

    /*Desktop patches grid*/
    #group-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "group-info group-img";
    }

    /*program dropdown*/
    #program-intro {
        padding: 25px 150px;
        font-size: 1.5em;
    }

    .dropdown-content {
        width: 400px 
    }

    .groups {
        font-size: 1em;
    
    }

    #drop-img {
        padding: 25px 0;
    }

    /*Desktop Blog and News boxes*/
    #post-box {
        flex-direction: row;
    }

    /*footer*/
    footer {
        grid-template-columns: 2fr .5fr .5fr;
        grid-gap: 10px;
        grid-template-areas: 
            "connect-box explore-box resource-box";
    }

    /*Desktop General Pages*/
    .page-header-title {
        font-size: 3em;
        padding: 40px;    
    }

    .subheader-title {
        font-size: 3em;
        padding: 40px;    
    }
    
    .subheader-info {
        font-size: 2em;
    }

    /*Desktop About Page*/

    #about-main-one {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    #about-text-one {
        padding: 50px;
        margin: auto;
    }

    #about-text-two {
        font-size: 1.25em;
        padding: 50px 75px;
        width: 60%;
    }

    #about-main-two {
        flex-direction: row;
    }

    .main-box-img{
        width: 50%;
    }
    
    #about-text-one ul li {
        font-size: 2em;
    }

    #mission-value {
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        grid-template-areas: 
        "experience staff"
        "growth atmosphere";
    }

    .mission {
        padding: 10px;
    }

    .mission-value-title {
        font-size: 1.75em;
        text-transform: uppercase;
    }
    


    /*Contact Box*/
    .four {
        padding: 10px 400px 150px 25px;
    }

    .five {
        padding: 10px 400px 10px 25px;
    }
    
    #contact-us {
        margin-top: 25px;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        grid-template-areas: 
        "contact-one contact-two"
        "contact-three ."
        "contact-four .";
    }
    

    /*Desktop Countdown Timer**/
    .date-box {
        width: 150px;
        height: 125px;
        padding: 25px;
        margin: 10px;
    }
    
    .date-text {
        font-size: 2em;
    }

    .date-name {
        font-size: 1em;
    }

    /*Enroll Page desktop*/

    .instructions {
        padding: 0 25%;
    }
    
    .enroll-title {
        font-size: 2em;
        text-align: left;
        padding: 20px 100px;
    }
    
    .enroll-subtitle {
        margin: 10px 0;
        padding: 10px 125px;
        font-size: 1.1em;
        color: #a62626;
    }

    form placeholder {
        color: #588EAA;
    }
    
    .form-box {
        padding: 25px 150px;
        color: #588EAA;
    }
    
    .frame {
        margin: 5px 0;
    }
    
    .field {
        margin: 0 10px;
    }
    
    .one {
        padding: 10px 150px 10px 10px;
    }
    
    .two {
        padding: 10px 250px 10px 10px;
    }
    
    .three {
        padding: 10px 400px 10px 10px;
    }

    .dropbtn {
        padding: 10px 150px 10px 10px;
    }

    .dropdown-enroll {
        margin: 8px;
    
    }
    
    .dropdown-content-enroll {
        width: 250px;
        display: none;
        /*box-shadow: 0px 8px 16px 0px gray;*/
        padding: 10px;
        z-index: 1;
        transition: display 10s ease-in 1s; 
    }
    
    .dropdown-enroll:hover .dropdown-content-enroll {
        display: block;
    }
    

    #parent-info {
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        grid-template-areas: 
        "pfirst plast"
        "relationship relationship"
        "pemail pemail"
        "pmobile pmobile"
        "landline landline";
    }

    #home-info {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
        grid-template-areas: 
        "home-one home-one home-one"
        "home-two home-three home-four";    
    }

    #camper-info {
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        grid-template-areas: 
        "camper-one camper-two"
        "camper-three ."
        "camper-four camper-four"
        "camper-five camper-five";
    }

    #add-info {
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        grid-template-areas: 
        "additional-one ."
        "additional-two ."
        "additional-three .";
    }

    /*Desktop Calendar Page*/
    .calendar-box {
        padding: 50px;
    }

    #note-dates {
        flex-direction: row;
        justify-content: center;
    }

    #weekly-schedule {
        padding: 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #image-schedule {
        width: 60%;
        margin: 50px 0;

    }

    /*Resources Page*/

    .resource-text {
        padding: 25px;
    }

    .dropdown-content-faq {
        font-size: 1em;
        padding: 10px 25px;
    }
    
    .faq-text {
        color: #a62626;
    }
    
    .subheader-faq {
        font-size: 1.75em;
        padding: 25px 10px;

    }

    .safety-covid-title {
        padding: 25px 10px;
        font-size: 1.75em;
    }

    #safety-camp {
        padding: 10px;
        margin: 50px 0;
    }

    .safety-camp-title {
        font-size: 1.75em;
    }
    
    #safety-camp-greeting {
        padding: 25px;
    }
    
    .safety-camp-subheader {
        font-size: 1.25em;
        margin: 5px 15px;
        padding: 5px 10px;
    }

    .safety-camp-detail {
        margin: 0 15px;
    }
    
    #safety-grid {
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        grid-template-areas: 
        "safety-one safety-two"
        "safety-three safety-four"
        "safety-five safety-six";
    }
    
    .safety-camp-detail {
        color:#a62626;
        font-size: .8em;
        padding: 10px;
    }

}