/* CSS VARIABLES */

:root {
    --desktop-screen-padding: 20%;
    --accent-color: #23ab69;
    --sec-color: #fff5f0;
    --tertiary-color: #2f201b;
    --tertiary-color-light: #6d4e3e;
    --tertiary-font3: #d2afa7;


  }

/* END OF CSS VARIABLES */

::selection {
    background: #3db97b; /* WebKit/Blink Browsers */
  }
  ::-moz-selection {
    background: #3db97b; /* Gecko Browsers */
  }

body {
    background-color: var(--sec-color);

    font-family: 'Roboto', sans-serif;
}




nav {
    background-color:var(--accent-color);
    padding-left: var(--desktop-screen-padding);
    padding-right: var(--desktop-screen-padding);
    text-align: right;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:var(--tertiary-color);

}

nav#secondaryNav {
    background-color: var(--tertiary-color);

    color: white;
    text-align:left;
    padding: 16px;
    padding-left: var(--desktop-screen-padding);
    padding-right: var(--desktop-screen-padding);

    border-color: #78d4a6;
    border-bottom-color:white;
    border-bottom-style:solid;
   
    border-width: 1px;
}

nav#secondaryNav ul li {
    padding-top: 4px;
    padding-bottom: 4px;
}

nav#secondaryNav ul li a {
    color: var(--tertiary-font3);
    font-size: 15pt;

}
nav#secondaryNav ul li a.selected {
    color: white;
   
    text-decoration: underline;
}


nav ul a#logo {

    background-image: url('images/bidwellLogo-03.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position:center;
    width: 640px;
    float:left;
    padding-top:76px;
    padding-bottom:76px;
    box-sizing: border-box;
    
}

nav ul li#logoHolder {

    float:left;
    padding:0;
    margin:0;
}

nav ul li {
    display:inline-block;
    padding-top: 64px;
    padding-bottom: 64px;
    font-family: 'Saira Extra Condensed', sans-serif;
    color: white;
    font-size: 18pt;
    font-weight:600;
    padding-left: 8px;
    padding-right: 8px;
}

nav ul li a:link, nav ul li a:visited, nav ul li a:focus {
    color:white;
    text-decoration:none;
}

nav ul li a:link.selected {
    color: var(--tertiary-color);
    text-decoration:underline;
}


nav ul li:hover {
    cursor:pointer;
    color: #a6f7cf;
}

nav ul li#omniSearch:hover {
    cursor:auto;
}

h1,h2,h3,h4 {
    font-family: 'Saira Extra Condensed', sans-serif;

}

h2 {
    font-size: 24pt;
    font-weight: bold;
}

h4 {
    font-size: 16pt;
    font-weight: bold;
    
}





footer {
    background-color: var(--tertiary-color);
    color: white;
    display:flex;
    padding: var(--desktop-screen-padding);
    padding-top: 64px;
    padding-bottom: 64px;
}

footer a:link {
    color:white;
    text-decoration: none;
    font-style: normal;
}

footer a:visited {
    color:white;
}

footer a:active {
    color:white;
}

footer a:hover {
    color:var(--accent-color);
}


footer h4 {
    margin-bottom: 16px;
    font-size: 18pt;
}



footer ul li {
    margin-bottom: 8px;
    color: var(--tertiary-font3);
    font-style:italic;
    font-size: 14pt;
}

footer section {
    flex-grow: 1;
    margin-left: 16px;
    margin-right: 16px;

}


b {
    font-weight:bolder;
}


.buttonRow {
    display:flex;
}

.articleContainer .buttonRow a.launchButton:link {
    width:100%;
    margin-left: 0;
    margin: 4px;
}

.historicGalleryRow {
    display:flex;
    flex-wrap:wrap;
}
.historicGalleryRow a {
  
    height:128px;
    min-width: 128px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size:cover;
    margin: 8px;
    border-radius: 8px;
    background-position:center;
}

.sendAway {
    padding: 16px;
}

.articleContainer article .sendAway h3 {
    margin-bottom: 8px;
}

.sendAway input {
    min-width: 256px;
    padding: 12px;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
}

.sendAway textarea {
    width: 100%;
    min-height: 128px;
    box-sizing: border-box;
}

.gallery {
    position: relative;
    background: linear-gradient(180deg,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.9503256302521008) 100%) , url('images/bidwell.jpg') center/cover;
}

.gallery.weddingBG {
    position: relative;
    background: linear-gradient(180deg,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.9503256302521008) 100%) , url('images/galleries/w4.jpg') center/cover;
}

.gallery.contactBG {
    position: relative;
    background: url('images/galleries/contact-featured.jpg') center/cover;
    height:512px;
}

.gallery.volunteerBG {
    position: relative;
    background: url('images/galleries/volunteer.jpg') top/cover;
    height:512px;
}

.gallery h1 {
    text-shadow: #0e653a 1pt 1pt 1pt;
    display:block;
    display: block;
    padding-top: 640px;
    padding-bottom: 32px;
    font-size: 36pt;
    color: white;
    padding-left: var(--desktop-screen-padding) ;
}

.positionsList {
    margin-left: 8px;
}

.positionsList li {
    margin-bottom: 32px;
}

#omniSearch {
    text-align:right;
    padding: 55px;
    padding-left: 16px;
    padding-right: 16px;
    width: 128px;
} 

#omniSearch input {
    border:none;
    padding: 9px;
    margin: 0;
    border-radius:32px;
}

#omniSearch input::placeholder {
    text-align:right;
    font-style:italic;
}

#omniSearch input:active {
    outline: none;
}
#omniSearch input:focus {
    outline: none;

}

#importantInformation {
    background-color: var(--tertiary-color);
    color: white;
    text-align:center;
    padding: 16px;
    border-color: #78d4a6;
    border-bottom-color:white;
    border-bottom-style:solid;

    border-width: 1px;
}

#importantInformation p::before {
    content: '  ( ! ) - ';
    color: var(--accent-color);
    font-weight: bold;
}

.italicQuote {
    font-style: italic;
    font-size: 12pt;
    font-weight: 300;
    padding: 32px;
}

.articleContainer h3 {
    font-size: 18pt;
    margin-top: 16px;
}

.directionButton {
    border-radius: 100%;
    border-style: solid;
    color: white;
    border-color: white;
    border-width: 3px;
    font-weight:bolder;
    box-sizing: border-box;
    width: 64px;
    height:64px;
    display:block;
    background-color: rgba(0,0,0,0.75);
    position: absolute;
    cursor:pointer;
}

.directionButton:focus {
    outline:none;
}

.directionButton:active {
    outline:none;
    background-color: white;
    color: black;

}

.directionButton.left {
    top: 50%;
    left: calc(var(--desktop-screen-padding) / 3);

}
.directionButton.right {
    top: 50%;
    right: calc(var(--desktop-screen-padding) / 3);
}

.articleContainer {
    flex-grow:2;
    
    padding-right: 64px;
    
    width: 100%;
}


.articleContainer article {
    background-color: white;
    box-shadow: 2px 2px 2px #b5978d;
    margin-bottom: 16px;
    box-sizing: border-box;
    padding: 32px;
    

}

.articleContainer article div.imgRow {
    display:flex;
    width: 100%;
    align-items: center; 
    justify-content: center;

}


.articleContainer article div.imgRow div {
    margin: 16px;

}

.articleContainer article div.imgRow img {
 
    width: 100%;
    border-radius: 4px;

    display: block;
}

.articleContainer article p {
    display:block;
}

.articleContainer article img{
    width: 100%;
}



.articleContainer article h2 {
    margin-bottom: 4px;
 
}

.articleContainer a:link {

    text-align: center;
    display: block;
    font-size: 18pt;
    font-family: 'Saira Extra Condensed', sans-serif;
    font-weight: bold;
    color: #17905e;
    margin-top: 24px;
}

.articleContainer article h3 {
    margin-bottom: 16px;
    font-weight: bold;
 
}
.articleContainer article p {
    margin: 16px;
    margin-bottom: 8px;
    font-size: 13pt;
    font-family: 'Roboto', sans-serif;
}
.contentRows {
    padding-left: var(--desktop-screen-padding);
    padding-right: var(--desktop-screen-padding);
    display:flex;
    padding-top: 32px;
    padding-bottom: 32px;
}

.contentRows aside {
    flex-grow:1;
    width: 40%;
    

}

.contentRows aside h2 {
    text-align:left;
    color: white;
   
    font-size: 15pt;
    font-weight: bolder;
}

.contentRows aside section p{ 
    color: white;
    padding: 24px;
}


.contentRows aside section {
    background-color: var(--tertiary-color-light);
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 8px;
    box-sizing:border-box;

}



.contentRows aside a.sideGallery {
    background-color: white;
    width: 100%;
    height: 256px;
    display:block;
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 2px 2px 2px #b5978d;
    background-size:cover;
    background-position:center;
    transition: all .2s ease-in-out;
}

.sideGallery:hover {
    transform: scale(1.05);
    cursor:pointer;
}

.sideGallery#photo1 {
    background-image: url('images/history1.jpg');
}
.sideGallery#photo2 {
    background-image: url('images/history2.jpg');
}
.sideGallery#photo3 {
    background-image: url('images/history3.jpg');
}
.sideGallery#photo4 {
    background-image: url('images/history4.jpg');
}


.eventsSidebar h2{
    background-color: var(--tertiary-color);
    padding: 16px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.eventsSidebar div.eventContainer {
    background-color: var(--tertiary-color-light);
    padding: 16px;

    color: white;
}

.eventsSidebar div.eventContainer:nth-child(2n) {
    background-color: #5f4435;
}

.eventsSidebar div.eventContainer h3{
    font-size: 13pt;
}

.eventsSidebar div.eventContainer p {
    font-size: 10pt;
    color: #f5e1d7;
    padding-left: 16px;
    margin-top: 16px;
    line-height: 16px;
    
}

.eventsSidebar div.eventContainer h3 span {
    
    font-weight: bolder;
    display: inline-block;
    text-align: right;

}

.eventsSidebar div.eventContainer h3 span::after {
    content: ' - ';
}

.articleContainer a.launchButton:link {
    background-color: var(--accent-color);
    color: white;
    margin-left:75%;
    padding: 16px;
    text-decoration: none;
    border-radius: 4px;
}

.featuredServices {
    background-color: var(--tertiary-color);
    color: white;
    text-align: center;

    border-color: white;
    padding-left: var(--desktop-screen-padding);
    padding-right: var(--desktop-screen-padding);
    border-top-style: solid;
    border-width: 1px;
    display:flex;
    
    
}

.serviceCell {

    padding: 48px;
    width:100%;
    background-position:center;
    background-size:cover;
    font-family: 'Saira Extra Condensed', sans-serif;
    font-size: 18pt;
    font-weight: bolder;
}

.introduction {
    background-color: var(--tertiary-color);
    color: white;
    padding: 32px;
    padding-left: var(--desktop-screen-padding);
    padding-right: var(--desktop-screen-padding);
    border-top-style:solid;
    border-color:#6d4e3e;
    border-width: 1px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 32px;
    margin-bottom:32px;
    display:flex;
}

.introduction div.welcomeText {
    width:100%;
}

.introduction div.instructionText {
    width: 25%;
}

.introduction p {
    margin-bottom: 16px;
    font-size: 14pt;
}

.instructionCell {
    margin-left: 32px;
    border-color: #523830;
 
    border-radius: 4px;
    border-width: 1px;
   
    
    margin-bottom: 16px;
}

.instructionCell a:link,instructionCell a:visited,instructionCell a:focus  {
    font-size: 10pt;
    color: #e8c9b7;
    line-height: 18px;  
    text-align: right;
    display:block;
    text-decoration:underline;

    margin-top: 8px;
}

.instructionCell h2 {
    font-size: 14pt;
    
    color: #9e7b68;
}

.instructionCell p {
    font-size: 10pt;
    color: #e8c9b7;
    line-height: 18px;
    margin-bottom: 0;
}

.serviceCell#Weddings {
}

.serviceCell#School {
}

.serviceCell#Events {
}

.serviceCell#Tours {
}



/* CSS Calendar Stuff */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr auto auto auto auto auto;
    gap: 0px 0px;

 
    text-align:center;
    grid-template-areas:
      "Month-Name-Here Month-Name-Here Month-Name-Here Month-Name-Here Month-Name-Here Month-Name-Here Month-Name-Here"
      "SUN MON TUE WED THUR FRI SAT"
      "cell1 cell2 cell3 cell4 cell5 cell6 cell7"
      "cell8 cell9 cell10 cell11 cell12 cell13 cell14"
      "cell15 cell16 cell17 cell18 cell19 cell20 cell21"
      "cell22 cell23 cell24 cell25 cell26 cell27 cell28"
      "cell29 cell30 cell31 cell32 cell33 cell34 cell35";
  }
  .Month-Name-Here { grid-area: Month-Name-Here; }
  .Month-Name-Here select {
   
      text-align:center;
      font-size: 20pt;
      margin-bottom:32px;
      margin-top:16px;
      padding: 8px;
  
     
  }
  .SUN { grid-area: SUN; font-weight:bolder;}
  .MON { grid-area: MON; font-weight:bolder;}
  .TUE { grid-area: TUE; font-weight:bolder;}
  .WED { grid-area: WED; font-weight:bolder;}
  .THUR { grid-area: THUR; font-weight:bolder;}
  .FRI { grid-area: FRI; font-weight:bolder;}
  .SAT { grid-area: SAT; font-weight:bolder;}
  .cell1 { grid-area: cell1; }
  .cell2 { grid-area: cell2; }
  .cell3 { grid-area: cell3; }
  .cell4 { grid-area: cell4; }
  .cell5 { grid-area: cell5; }
  .cell6 { grid-area: cell6; }
  .cell7 { grid-area: cell7; }
  .cell8 { grid-area: cell8; }
  .cell9 { grid-area: cell9; }
  .cell10 { grid-area: cell10; }
  .cell11 { grid-area: cell11; }
  .cell12 { grid-area: cell12; }
  .cell13 { grid-area: cell13; }
  .cell14 { grid-area: cell14; }
  .cell15 { grid-area: cell15; }
  .cell16 { grid-area: cell16; }
  .cell17 { grid-area: cell17; }
  .cell18 { grid-area: cell18; }
  .cell19 { grid-area: cell19; }
  .cell20 { grid-area: cell20; }
  .cell21 { grid-area: cell21; }
  .cell22 { grid-area: cell22; }
  .cell23 { grid-area: cell23; }
  .cell24 { grid-area: cell24; }
  .cell25 { grid-area: cell25; }
  .cell26 { grid-area: cell26; }
  .cell27 { grid-area: cell27; }
  .cell28 { grid-area: cell28; }
  .cell29 { grid-area: cell29; }
  .cell30 { grid-area: cell30; }
  .cell31 { grid-area: cell31; }
  .cell32 { grid-area: cell32; }
  .cell33 { grid-area: cell33; }
  .cell34 { grid-area: cell34; }
  .cell35 { grid-area: cell35; }

  .calCell { 
    padding-top: 24px;
    padding-bottom:24px;
    border-radius: 8px;
    margin: 1px;
}
  .schoolReservation {
    background-color: #ffdee0;
  }

  .weddingReservation{ 
    background-color: #e1deff;
  }

  .bothReservations {
    background: linear-gradient(180deg, rgba(255,222,224,1) 0%, rgba(254,222,225,1) 48%, rgba(255,255,255,1) 50%, rgba(227,222,253,1) 52%, rgba(225,222,255,1) 100%);  }





@media only screen and (max-width: 2200px) {

    :root {
        --desktop-screen-padding: 15%;
    }

}

@media only screen and (max-width: 1800px) {

    :root {
        --desktop-screen-padding: 10%;
    }

}


@media only screen and (max-width: 1600px) {
    nav ul a#logo {
        background-image: url('images/bidwellLogo-05.svg');
        background-size:contain;
        width: 256px;
    }

    
    .articleContainer {
    
        padding-left: 16px;
        padding-right: 16px;

    }
    
  }

  @media only screen and (max-width: 1100px) {
   
    .contentRows aside.eventsSidebar {
        width: 100%;
        margin-bottom: 16px;
    }  

    .historicGalleryRow a {
        
        min-width: 25%;
    }

    .articleContainer {
    
        padding-left: 0px;
        padding-right: 0px;

    } 

    
.articleContainer article div.imgRow {
    display:block;
}

.articleContainer article div.imgRow img {
    margin: 0px;
    margin-top: 16px;
    margin-bottom: 16px;
}
   
    nav ul a#logo {
        background-image: url('images/bidwellLogo-04.svg');
        background-size:contain;
        width: 128px;
    }

    .contentRows {
        flex-direction: column;
    }

    .contentRows aside.infoSidebar {
        order:1;
        width: 100%;
    }
    .contentRows aside.gallerySidebar {
        order:2;
        display:flex;
        width: 100%;
    }
    .contentRows aside.gallerySidebar .rowContainer {
        width: 100%;
        margin: 8px;
        flex-wrap:wrap;
        
        box-sizing: border-box;
    }
    .contentRows section.articleContainer {
        order: 3;
    }

    footer {
        display: block;
    }

    footer section {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 16px;
    }

  }

  
  @media only screen and (max-width: 940px) {
  
    #omniSearch {
        width: auto;
    }
  
    nav ul li{
        display: block;
        padding-top: 8px;
        padding-bottom: 8px;
        text-align: center;
    }

    nav ul li#logoHolder {

        float:none;
    }

    nav ul a#logo {
        float:none;
        text-align:center;
        display:block;
        background-position:center;
        width:auto;
        padding-top: 64px;
        padding-bottom: 64px;
        background-image: url('images/bidwellLogo-05.svg')
    }

    .introduction {
        flex-direction: column;
    }

    .introduction div.instructionText {
        display:flex;
        width:100%;
        margin-top:32px;
    }

    .instructionCell {
        display:block;
        width:100%;
        margin-left: 0;
  
    }

    .instructionCell p {
        margin: 4px;
        font-size: 9pt;
    }

    #omniSearch {
        padding-left: unset;
        padding-right: unset;
        padding: 16px;
        text-align:center;
    }


    .gallery h1 {

        font-size: 32pt;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        
    }

    .articleContainer a.launchButton:link {

        margin-left: 0;
    }
    .historicGalleryRow {
        display:block;
    }
  }

    
  @media only screen and (max-width: 480px) {
 

    .sendAway input {
        min-width: auto;
        width: 100%;
        
    }



    .buttonRow {
        display:block;
    }

    .sendAway {
        padding: 0;
    }

    .articleContainer .buttonRow a.launchButton:link {

        width: auto;
        margin: 0;
        margin-bottom: 8px;
    }

    .introduction div.instructionText {
        DISPLAY:BLOCK;
    }

    .contentRows aside.gallerySidebar{
        display: block;
    }

    nav ul a#logo {
        background-image: url('images/bidwellLogo-04.svg')
    }

    /* CSS Calendar Stuff */
    .Month-Name-Here select {
    font-size: 12pt;
    }

    .calCell {
        font-size: 8pt;
    }

    .calDay {
        font-size: 8pt;
    }

    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto;

  }