/* FOR SEPERATING DESKTOP AND MOBILE ELEMENTS */
/* HIDE MOBILE */
.mobile_only	{
    display: none;	
}

/* SHOW DESKTOP */
.desktop_only	{
    display: inherit;	
}  









/* HIDE FROM BOTS */
.hidden {
    display: none;
}



/* ======================= GENERAL DECLARATIONS ============================ */
/* BODY DECLARATIONS */

body    {
background: #e2e2e2;; 
font-family: 'Nunito', sans-serif;
margin: 0px;
padding: 0px;
width: 100%;
min-width: 1024px;
}


h1, h2, h3	{
font-family: 'Exo', sans-serif;
letter-spacing: 0.5em;
}

p   {
    color: #232323;
}


img, div, hr	{
border: 0px;
padding: 0px;
margin: 0px;
}



a:link	{
color: #448acf;
transition: color 0.5s;
text-decoration: none;
font-weight: bold;
}

a:hover	{
color: #e68820;
font-weight: bold;
}


a:visited	{
color: #448acf;
font-weight: bold;
}








/* FORMS */
input[type=text], select {
    width: 100%;
    padding: 1em;
    margin: 0px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    box-sizing: border-box;
    font-size: 1em;
  }
  
  input[type=text]:focus  {
      background-color: #64dcff;
      transition-property: background-color;
      transition-duration: 2s;
  }
  
  input[type=email]  {
    width: 100%;
    padding: 1em;
    margin: 0px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    box-sizing: border-box;
    font-size: 1em;
  }
  
  input[type=email]:focus  {
      background-color: #64dcff;
      transition-property: background-color;
      transition-duration: 2s;
  }
  
  input[type=submit] {
    width: 100%;
    background-color: #3081f3;
    color: white;
    font-size: 1em;
    padding: 1em;
    margin: 0px;
    border: none;
    border-radius: 0.5em;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 1s;
  }
  
  input[type=submit]:hover {
    background-color: #64dcff;
  }
  
  textarea {
    width: 100%;
    height: 20em;
    padding: 1em;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    background-color: white;
    resize: none;
  }
  
  textarea:focus  {
      background-color: #64dcff;
      transition-property: background-color;
      transition-duration: 2s;
  }
  
  /* FORM CONTAINER */
  .form_container {
      width: 35em; 
      margin: 0 auto; 
      background: white; 
      border-radius: 1em; 
      color: black; 
      padding: 1em;
  }





  







/* -------- DESKTOP -------- */
/* MENU */

/* MENU BAR */
.menu_bar   {
    width: 3%;
    min-width: 2em;
    height: 100vh;
    position: fixed; 
    top: 0px; 
    left: 0px;
    z-index: 6;
    background: #434343;
}

.menu_btn   {
    width: 100%; 
    min-width: 2em; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 6;
    cursor: pointer;
}

.close_btn   {
    width: 3%; 
    min-width: 2em; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 8;
    cursor: pointer;
}

/* MENU SPACER - MOVES MENU ITEMS DOWN EQUALLY ACROSS ALL RESOLUTIONS */
.menu_spacer {
    width: 100%;
    min-width: 1024px;
    height: auto;
    padding: 0px;
    margin: 0px;

    z-index: 9;
}

/* CONTAINER FOR MENU ITEMS */
.menu_strip {
    display: flex;
    width: 100%;
    height: auto;
    position: relative;
    top: -3em;
    z-index: 3;

}

.menu_strip p   {
    padding: 0px 0px 0px 5px;
}

/* IMAGES FOR MENU ITEMS */
.menu_strip img {
    width: 100%;
    height: auto;
}

/* CONTAINER FOR IMAGES IN MENU ITEMS */
.menu_strip div {
    width: 100%;
    transition: width 0.3s;
}

/* ENLARGE MENU ITEM PIC WHEN HOVERED OVER */
.menu_strip div:hover   {
    width: 110%;
    height: auto; 
}



/* CONTAINER FOR MENU ITEMS */
.desktop_menu_strip {
    display: flex;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 9;

}

.desktop_menu_strip p   {
    color: #e2e2e2;
    padding: 0px 0px 0px 5px;
}

.desktop_menu h1, h2, h3   {
    text-align: center;
    color: #e2e2e2;
    padding: 0px 0px 0px 5px;
}

/* IMAGES FOR MENU ITEMS */
.desktop_menu_strip img {
    width: 100%;
    height: auto;
}

/* CONTAINER FOR IMAGES IN MENU ITEMS */
.desktop_menu_strip div {
    width: 100%;
    transition: width 0.3s;
}

/* ENLARGE MENU ITEM PIC WHEN HOVERED OVER */
.desktop_menu_strip div:hover   {
    width: 110%;
    height: auto; 
}

/* THE MAIN HIDDEN MENU */
/* FULL PAGE BLACK TRANSPARENT DROP DOWN FOR THE MENU */
.desktop_menu   {
    background: rgba(0,0,0,0.8); 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0px; 
    bottom: 0px;
    display: none;
    z-index: 7;
}





/* =========== SOCIAL MEDIA BUTTONS ============= */
.social_container   {
    position: relative;
    top: 1em;
    right: 1em;
    z-index: 5;
    width: 100%;
    min-width: 1024px;
}

.social_box {
    display: flex;
    justify-content: flex-end;
}

.social_box img {
    width: 2em;
    height: auto;
    padding: 0px 0px 0px 1em;
    margin: 0px;
}





/* =============== BANNER =============== */
/* BANNER BORDER */
.banner_border  {
    width: 100%;
    min-width: 1024px;
    height: auto;
    z-index: 2;
    position: absolute;
    top: 0px;
    left: 0px;

}

.banner_seperator   {
    width: 100%;
    height: auto;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
    min-width: 1024px;
}



.body_container  {
    max-width: 100%;
    min-width: 1024px;
    padding: 0px 0px 0px 3%;
}

/* MAIN BANNER IMAGE */
.desktop_banner {
    width: 100%; 
    min-width: 1024px;
    height: auto;
    z-index: 0;
    position: absolute;
    top: -3em;
    left: 0px;
    animation-name: fall;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    
}

/* ANIMATE BANNER TO MOVE DOWN ON LOAD */
    @keyframes fall {
        0% {top: -3em;}
        100% {top: 0em;}
    }



    /* ======== FOOTER ======== */
.footer {
    width: 100%;
    min-width: 1024px;
    background: #232323;
    z-index: 5;
    padding: 0px;
    margin: 0px;
    position: fixed;
    bottom: 0px;
}

.footer p   {
    color: #e2e2e2;
    text-align: center;
    padding: 1em;
    margin: 0px;

}









/* ============ BODY CONTENT ============= */
/* CONTENT CONTAINER WILL FIT 12-15 WORDS OF TEXT */
.content_container    {
    background: #e2e2e2;
    max-width: 100%;
    min-width: 1024px;
   
    position: relative;
    top: -4em;
    z-index: 3;
}

.content    {
    max-width: 47em;
    margin: 0 auto;
    text-align: justify;
    
}

.content p  {
    padding: 0px 0px 1em 0px;
    font-size: 1em;
    color: #232323; 
}

.content_pics   {
    width: 47em;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

/* PICTURE CAPTIONS */
.content_pics p {
    text-align: left !important;
    font-style: italic;
    color: #737373 !important;
    font-size: 0.9em;
}

.content_pics div   {
    width: 25%;
    margin: 0px 10px 10px 0px;
    box-sizing: border-box;
}

.content_pics img   {
    width: 100%;
    height: auto;
}




/* DATABASE LIST ITEMS */
.item   {
    background: #434343;
    width: 100%;
    border-radius: 20px;
    padding: 0px;
    margin: 0px 0px 1em 0px;
}

/* TEXT STYLES FOR DATABASE ITEMS */
.item p {
    color: #e2e2e2;
    padding: 1em;
}

/* TIER 3 OF TITLES */
.content h1, h2, h3	{
	max-width: 47em;
    min-width: 10em;
    text-align: left;
    letter-spacing: 0px;
	padding: 1em 0px 10px 0px;
    color: #232323;
}

/* GOOGLE MAPS, YOUTUBE, AND OTHER EMBEDS */
/* YOUTUBE VIDEOS AND OTHER EMBEDS */
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}


/* ==================== Styles for various types of embeds. Remember to remove length and width for actual embed code on pages ====== */
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* WRAP THIS AROUND EMBED-CONTAINER - EMBED WILL BE THE SIZE OF THIS BOX */
.embed_outer_container  {
    max-width: 47em; 
    margin: 0 auto;
}




/* IMAGE BLOCKS */
.blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

.blocks div {
    width: 20%;
    padding: 0px 10px 10px 0px;
    margin: 0px;
}

.blocks img {
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
}



/* ============ MEDIA QUERIES */
@media only screen and (max-width: 1920px)    {


} /* END MEDIA QUERY */