/* New Stuff */

#backToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  padding: 10px 15px;
  font-size: 20px;
  border-radius: 5px;
  background-color: #0c5b8c;
  color: white;
  border: none;
  cursor: pointer;
}
#backToTop.show {
  display: block;
}

h2 {
    font-size: 30px !important;
}

.holder {
        height: 385px !important;
      }

      @media (max-width: 600px) {
        .holder {
          height: 500px !important;
        }
      }

@media (max-width: 600px) {
    #hero-pic {
        margin-top: 0px;
    }

    #tap-menu {
        display: block !important;
        font-size: 14px;
        color: #0e76b8;
        margin-bottom: 20px;
    }
}

.fb-page iframe {
    height: 600px !important;
    max-width: 100% !important; 
}

@media (min-width: 708px) {

    #homepage-intro-pic {
        height: 300px !important;
    }

}


@media (min-width: 948px) {

    #homepage-intro-pic {
        height: 380px !important;
    }

}

@media (min-width: 1140px) {

    #homepage-intro-pic {
        height: 500px !important;
    }

}

/*-------*/

html,

body{

    font-family: 'Arial';

    font-size: 15px;

    margin: 0;

    background: rgb(255, 255, 255);
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(210, 227, 255, 1) 100%);
    background-attachment: fixed; /* This makes the background sticky */
    height: 100%; /* Ensure body takes full height */
    overflow: auto; /* Allow scrolling */

}



a{

    -webkit-transition: all ease-out 0.1s;

       -moz-transition: all ease-out 0.1s;

         -o-transition: all ease-out 0.1s;

            transition: all ease-out 0.1s;

            color: rgb(9, 9, 87);

}


#bluebutton:visited {
    color: white !important;
}

a:visited {
    color: rgb(2, 2, 68);
}





.clear{

    clear: both;

}

img{
    max-width: 100%;
}



.side-bar{

    position: relative;

    min-height: 100%;

    float: left;

    width: 320px;

    border-right: 1px solid #0e76b8;

    box-sizing: border-box;

}



.logo-container{

    margin-top: 8px;

}



.logo{

    position: absolute;

    width: 100%;

    left: 0;

    top: 0;

}

.logo img{

    width: 100%;

}

img.holder{

    width: 100%;

    opacity: 0;

}



.burger{

    display: none;

    margin: 10px auto 0;

    cursor: pointer;

}




.menu{

    list-style: none;

    margin-top: 0px !important;

    padding: 0 40px;

    text-align: center;

    font-size: 16px;

}

.menu:not(.home .menu) {

    margin-top: 0px !important;

}


.menu a{

    display: block;

    color: #044f7e;

    text-decoration: none;

    font-size: 16px;

}

.menu a:visited {
    color: #044f7e !important;
}

.menu a:visited:hover {
    color: rgb(98, 187, 243) !important; 
}

.menu a:hover{

    color: rgb(98, 187, 243);

}

.menu li{

    margin: 0;

    padding: 0;

    border-bottom: solid 1px #0e76b8;

    line-height: 26px;

}

.menu li.break {

    margin: 0;

    padding: 0;

    border-bottom: solid 3px #083d5e;

    line-height: 26px;

}



.main{

    float: left;

    width: calc(100% - 320px);

    padding: 20px 30px;

    box-sizing: border-box;

}

h1{

    font-size: 2rem;

    color: #0f517b;

    font-weight: 700;

    margin: 10px 0;

    font-family: "Caveat Brush", cursive;

}

h2{

    font-size: 23px;

    color: #0f517b;

    font-style: italic;

    font-weight: normal;

    font-family: "Caveat Brush", cursive;

}

h4{
    color: #000a97;
    font-family: "Caveat Brush", cursive;
}





.main p{

    color: #4391c3;

    text-align: left;

}



.main p i{

    color: #62bbf3;

}



.photo{

    float: left;

    width: 150px;

    margin: 10px 20px 10px 0;

}

@media (max-width: 440px) {
    #contact-greg {
        width: 100% !important;
    }
}





/*intro------------------------------*/





.intro #logo{

    position: fixed;

    width: 80%;

    max-width: 483px;

    left: 50%;

    top: 50%;

    opacity: 0;

    -webkit-filter: brightness(2);

       -moz-filter: brightness(2);

        -ms-filter: brightness(2);

         -o-filter: brightness(2);

            filter: brightness(2);

    -webkit-transform: translate(-50%, -50%);

       -moz-transform: translate(-50%, -50%);

         -o-transform: translate(-50%, -50%);

            transform: translate(-50%, -50%);

}

.intro #logo.show{

    opacity: 1;

    -webkit-filter: brightness(1);

       -moz-filter: brightness(1);

        -ms-filter: brightness(1);

         -o-filter: brightness(1);

            filter: brightness(1);

    -webkit-transition: all 2.25s ease-out;

       -moz-transition: all 2.25s ease-out;

         -o-transition: all 2.25s ease-out;

            transition: all 2.25s ease-in;

}

.intro #logo.moove{

    -webkit-transform: none;

       -moz-transform: none;

         -o-transform: none;

            transform: none;

    -webkit-transition: all 1.5s ease-out;

       -moz-transition: all 1.5s ease-out;

         -o-transition: all 1.5s ease-out;

            transition: all 1.5s ease-in-out;

}



.intro .side-bar{

    border-color: transparent;

    -webkit-transition: border ease-out 0.5s;

       -moz-transition: border ease-out 0.5s;

         -o-transition: border ease-out 0.5s;

            transition: border ease-out 0.5s;

}

.intro .side-bar.show{

    border-color: #0e76b8;

}





.intro .menu li{

    opacity: 0;

}

.intro .menu li.show{

    opacity: 1;

    -webkit-transition: all 0.75s ease-out;

       -moz-transition: all 0.75s ease-out;

         -o-transition: all 0.75s ease-out;

            transition: all 0.75s ease-out;

}



.intro .main{

    opacity: 0;

}

.intro .main.show{

    opacity: 1;

    -webkit-transition: all 1.75s ease-out;

       -moz-transition: all 1.75s ease-out;

         -o-transition: all 1.75s ease-out;

            transition: all 1.75s ease-out;

}











.intro #logo.finish{

    position: static;

    width: 100%;

}

#art-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 20px;
}

.art {
    border: 5px solid rgb(13, 13, 100);
    width: 300px;
    max-width: 50%;
    height: auto;
    text-align: center;
    padding: 8px;
    margin: 15px;
    border-radius: 15px;
    background-color: rgb(199, 212, 224);
}

.art h4 {
    font-family: sans-serif !important;
}

.yhwh {
    width: 20% !important;
}


/* New site elements from 12/27/2022 on ------- */

.home-buttons {
    transition: 0.3s;
    width: 44%;
    padding: 20px; 
    background: rgb(5, 5, 119); 
    color: white; 
    font-weight: bold; 
    text-align: center; 
    text-decoration: none; 
    font-size: 20px; 
    display: block; 
    border-radius: 25px; 
    border: 5px solid rgb(189, 247, 255);
}

.home-buttons:hover {
    transition: 0.3s;
    border: 5px solid rgb(18, 165, 250);
    background:rgb(42, 42, 233);
    color: rgb(255, 191, 191);
}

.home-buttons:visited {
    color: white !important;
}

.home-buttons:visited:hover {
    color: rgb(255, 191, 191) !important;
}

.location {
    color: rgb(255, 80, 80);
    font-size: 26px;
}

.video-box { 
    width: 45%; 
    display: flex; 
    flex-direction: column;
} 





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


@media (max-width: 700px) {
    .casa-image {
      width: 100% !important;
    }
}



/*tablet and mobile styles-----------*/

@media (max-width: 600px) {

    .video-box { 
        width: 100%; 
    }
    
    .mobile-center {
       text-align: center;
    }

    .home-buttons {
        width: 100%;
    }

    .main-welcome {
     font-size: 28px !important;
     font-weight: bold;
    }

.menu {
    margin-top: 0px !important;
}
}


/*responsive------------------------------*/





@media(min-width: 601px){

    .menu{

        height: auto !important;

    }

}



@media(max-width: 1024px){

    .side-bar{

        width: 32%;

    }

    .main{

        width: 68%;

    }

    .menu{

        padding: 0 8%;

        font-size: 17px; 

    }

}



@media(max-width: 768px){

    .menu li a {

        font-size: 18px !important;
        padding: 5px 0px;

    }

    .art {
        width: 95% !important;
        max-width: 95% !important;
    }

    .yhwh {
        width: 95% !important;
        max-width: 95% !important;
    } 

}





@media(max-width: 600px){

    .side-bar{

        width: 100%;

        height: auto !important;

        min-height: unset;

        border-right: none;

    }

    .main{

        width: 100%;

    }

    .burger{

        display: block;
        margin-top: 0px !important;
        border-radius: 8px;
        border: 1px solid #04133d;
        width: 100px;
    }

    .home .burger {
        margin-top: 0px !important;
    }

    .intro .burger{

        opacity: 0;

        -webkit-transition: all 0.5s ease-out;

           -moz-transition: all 0.5s ease-out;

             -o-transition: all 0.5s ease-out;

                transition: all 0.5s ease-out;

    }

    .intro .burger.show{

        opacity: 1;

    }

    .menu{

        height: 0;

        opacity: 0;

        overflow: hidden;

        padding: 0 6%;

        box-sizing: border-box;

        width: 100%;

        max-width: 400px;

        margin: 0px auto 0px auto !important;

        -webkit-transition: all 0.5s ease-out;

           -moz-transition: all 0.5s ease-out;

             -o-transition: all 0.5s ease-out;

                transition: all 0.5s ease-out;

    }

    .menu.expand{

        opacity: 1;

    }

    .menu li:first-child{

        padding-top: 10px;

    }

    .logo-container{

        position: relative;

        margin: 0 auto;

        max-width: 400px;

    }



    .intro #logo.moove{

        -webkit-transition: all 0.75s ease-out;

           -moz-transition: all 0.75s ease-out;

             -o-transition: all 0.75s ease-out;

                transition: all 0.75s ease-out;

    }

}



@media(max-width: 530px){

    .intro #logo{

        width: 100%;

    }

}