@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    color: #616161;
    height: 100%;
    background-color: #fff;
}

a:link {color: #3296ea; text-decoration: underline;}
a:active {color: #3296ea; text-decoration: underline;}
a:visited {color: #3296ea; text-decoration: underline;}
a:hover {color: #3296ea; text-decoration: underline;}

.noline a:link {text-decoration: none;}
	
p {
	font-size: 20px;
    font-family: 'Quicksand', sans-serif;
    padding: 15px 0px;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'Poppins', sans-serif;
}

h2 {padding: 30px 0px 0px 0px;}

.lispace li,ol {padding-bottom: 30px; color: #fff;}
 
.upsize1 {font-size: 20px; line-height: normal;}
.upsize2 {font-size: 20px; line-height: normal; font-weight: bold;}

/* NAVIGATION ------------------------- */

.navbar-nav .nav-item .nav-link {
	/*padding: 1.1em 1em!important;*/
	font-size: 100%;
    font-weight: 500;
    letter-spacing: normal;
    /*font-family: 'Cinzel', serif;*/
    color: #616161; /*main nav menu link color*/
}

.navbar-nav .nav-item .nav-link:hover {
    color: #616161; /*main nav menu link hover color*/
}

.navbar-nav .nav-item .nav-link:focus {
    color: #616161;
    background-color: #fff;
    /*the color ot the text that triggers the drop down after it has been triggered and until mouse is clicked on another link or anywhere in site*/
}


.custom-toggler.navbar-toggler { 
    border-color: #bdbdbd; /*border color of the hamburger icon mobile nav*/
} 

.custom-toggler .navbar-toggler-icon { 
    background-image: url( 
"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(50, 150, 234, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); 
        /*background-color is done as inline style, the rgb here controls the color of the three lines in the hamburger menu*/
        } 

.dropdown-menu {
    background-color: #fff;
    border: 0px;
    margin-top: -10px;
}
            
.dropdown-menu a:link {color: #616161; background-color: transparent;}
.dropdown-menu a:visited {color: #616161; background-color: transparent;}
.dropdown-menu a:active {color: #616161; background-color: transparent;}
.dropdown-menu a:hover {color: #616161; background-color: transparent;}

nav {-webkit-transition: padding-top .3s,padding-bottom .3s;
    -moz-transition: padding-top .3s,padding-bottom .3s;
    transition: padding-top .3s,padding-bottom .3s;
    border: none;
}


/* NAVIGATION mobile view ----------------------------- */
@media (max-width:500px)
{
.navbar-nav{
    background-color:#fff;
    -border-top:3px solid #fed136;
    color:#fff;
    z-index:1;
    margin-top:5px;
    }
}

.navbar-nav .nav-item .nav-link{
	padding: 0.7em 1em!important;
	font-size: 100%;
    font-weight: 500;
    }
 

/* JUMBOTRON ------------------------ */
.jumbotron .jumbotron-fluid {
    background-image: url(..images/carousel/temp-slide-2.jpg);
}

/* CONTENT  ------------------------ */

/*
These media queries and class can be added to use responsive typography, but the 
standard heading sizes seemed to work upon trying so did not implement this feature yet*/

@media (min-width: 576px) { 
.restypeh {
    /*background-color: lightgray;*/
    font-size:12vw;
  }
}



@media (min-width: 992px) { 
.restypeh {
    /*background-color: darkgray;*/
    font-size:6vw;
  }
}

/*@media (min-width: 1200px) { 
.qq_main {
    background-color: #dcdbbc;
    font-size:10vw;
  }
}*/


.content1 {
    min-height: 400px;
    /*background-image: url(../images/structure-bg-gradient2.jpg);
    background-repeat: repeat-x;
    background-position: top;*/
    clear: both;
}

.content1 h1,h2,h3,h4,h5,h6 {
    color: #3296ea;
}

.content2 {
    min-height: 400px;
    background-color: #3296ea;
}

.content2 p,h1,h2,h3,h4,h5,h6 {
    color: #fff;
}

.content2 ul,li {
    color: #fff;
}

.pgal {
    color: red;
}

.content2 a:link {color: #fff; text-decoration: underline;}
.content2 a:visited {color: #fff; text-decoration: underline;}
.content2 a:active {color: #fff; text-decoration: underline;}
.content2 a:hover {color: #fff; text-decoration: underline;}

.content3 {
    min-height: 400px;
    background-color: #29b292;
}

.content3 p,h1,h2,h3,h4,h5,h6 {
    color: #fff;
}

.content3 a:link {color: #fff; text-decoration: underline;}
.content3 a:visited {color: #fff; text-decoration: underline;}
.content3 a:active {color: #fff; text-decoration: underline;}
.content3 a:hover {color: #fff; text-decoration: underline;}

.content4 {
    min-height: 400px;
    background-color: #c07541;
}

.content4 p,h1,h2,h3,h4,h5,h6 {
    color: #fff;
}

.content4 a:link {color: #fff; text-decoration: underline;}
.content4 a:visited {color: #fff; text-decoration: underline;}
.content4 a:active {color: #fff; text-decoration: underline;}
.content4 a:hover {color: #fff; text-decoration: underline;}



.modpic {
    margin-bottom: 15px;
}

.modpic:hover {
    /*next styles slightly dim on hover*/
    max-width:100%;
    max-height:100%;
    position:relative;
    background-color:#fff;
    opacity:0.9;
    border-radius:0px;
    /*next styles add glow on hover*/
    color: #ffa502;
    box-shadow: 0 0 15px #9b9b9b;
    text-shadow: 0 0 15px #9b9b9b;
}

.mod p {
    font-size: 16px;
    line-height: normal;
}


.modlink {
    text-decoration: underline;
    color: #00fe04;
}

.pagepic {
 
}

.pagepic2 {
    margin-bottom: 20px;
}

.horiz {
    border-top: solid 2px #00fe04;
    color: #00fe04;
    background-color: #00fe04;
    margin: 60px 60px 60px 40px;
}
   
.areas {
    margin-top: 30px;
    background-color: #212121;
    font-size: 16px;
    padding: 20px;
}

.testiThank {
    font-size: 14px;
    line-height: normal;
}

.modal-title { 
    color: #000;
    padding: 0px;
    margin: 0px;
    text-shadow: 0px 0px #000;
    font-style: normal;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

/* gallery buttons */
.gallery-button {
  background-color: #fff;
  border: none;
  color: #747674;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
}

.button1 {border-radius: 15px;}

.galbtn {
    background-color: fff;
    color: #747674;
}

.css-button-rounded {
    /* ontrendwebsites.com/css-basics-css-rounded-corners-button-link */
    background: #fff;
    color: red;
    display: block;
    padding: 10px 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    text-align: center;
    text-decoration: none;
    -width: 350px;
    border-radius: 12px; // the rounded corners are here
    -webkit-border-radius:12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.css-button-rounded:hover {
    background: #eeeeee;
}


/* FOOTER -------------------------- */
.footerWide2 {
    background-color: #000;
    border-top: 3px double #fff;
    margin-bottom: 0px;
    height: 100%;
    color: #fff;
    padding-top: 20px;
    /*background-color: #00fe04;
    background-image: url(images/structure-bg.jpg);*/
    }

.footerWide2 h4 {
    font-size: 18px;
    color: #3296ea;
    /*font-family: 'Quicksand', sans-serif;
    font-weight: bold;*/
}

.footerWide2 p {
    font-size: 16px;
}

.footerWide2 a:link {color: #fff; text-decoration: underline; font-weight: normal;}
.footerWide2 a:active {color: #fff; text-decoration: underline;}
.footerWide2 a:visited {color: #fff; text-decoration: underline;}
.footerWide2 a:hover {color: #fff; text-decoration: underline;}

.socialFooter img {
    max-width: 42px;
}

/* video responsive info here https://www.ostraining.com/blog/coding/responsive-videos/ */
/* on reliable this had to be done at the page level in order to work for some reason so it has been included in the head section */
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.colorSwatch {
    padding: 0px;
    margin: 20px;
}