/* Red theme ****************************************************/
/*
:root {--mid-fg-colour: #9d0a0a; --dark-fg-colour: rgb(85, 23, 23); --light-fg-colour: #f44444;
    --light-bg-colour: #eee ;--dark-bg-colour:#bbb;--mid-bg-colour:#c7c7c7;}
*/
/* Green theme *************************************************/

:root {--mid-fg-colour: #29c029; --dark-fg-colour: rgb(41, 150, 41); --light-fg-colour: #44f444;
    --light-bg-colour: #eee ;--dark-bg-colour:#bbb;--mid-bg-colour:#c7c7c7;}

/****************************************************************/

/*.bg {background-color: var(--mid-fg-colour) !important;}*/
.bg {background: linear-gradient(var(--light-fg-colour),var(--mid-fg-colour)) !important;}
footer { background-color: var(--dark-bg-colour); padding: 25px;}
#slideshow { width: 100%; margin: auto }
#slideshow img { display: none }
#slideshow img.first { display: block }
#title {z-index: 100; position: absolute; left: 0px; top: 100px;}
h1 {padding:20px}
#myPopup {position:absolute; left:50%; display:none; z-index: 1000; top: 50px; width: 400px; max-width:100%; }
.wrapper {position:relative; left:-50%; box-shadow: 10px 10px 5px rgba(31, 31, 31, 0.5); border: 2px solid var(--light-fg-colour);
    border-radius: 10px; background-color: white; }
.centrebutton {margin:0 auto; display:block;  }
.wrapper p {text-align: center}
button, .btn {
    background:var(--mid-fg-colour);
    background: -moz-linear-gradient(var(--light-fg-colour),var(--mid-fg-colour)); 
    background: -webkit-linear-gradient(var(--light-fg-colour),var(--mid-fg-colour)); 
    background: -o-linear-gradient(var(--light-fg-colour),var(--mid-fg-colour)); 
    background: -ms-linear-gradient(var(--light-fg-colour),var(--mid-fg-colour)); /*For IE10*/
    background: linear-gradient(var(--light-fg-colour),var(--mid-fg-colour)); 
    padding: 5px 15px; margin: 10px; border-radius: 10px; text-align:center; color:white; 
    box-shadow:2px 2px 1px var(--dark-bg-colour);
    }
.thumbnail {max-height:100%; max-width:100%; height:auto; margin-bottom:0px}
.active {background-color:var(--dark-fg-colour);border-radius: 10px; }

blockquote {border: 1px solid var(--dark-bg-colour); border-left: 10px solid var(--dark-bg-colour); border-radius: 0px; background: var(--light-bg-colour);
font-size: 18px;margin: 10px;padding: 10px 20px;}
blockquote p {margin: 0;line-height: 30px;padding-bottom: 20px;}
blockquote .small {display: block; font-size: 80%; color: var(--mid-fg-colour); text-align: right;}
fieldset {margin:20px 0px; padding:3px; border: 2px solid var(--mid-fg-colour); border-radius: 10px; background-color: var(--light-bg-colour)}
legend {padding: 2px 10px; border: 2px solid var(--mid-fg-colour); border-radius: 10px; background-color:var(--mid-fg-colour); 
    font-size:15px; color:white; text-align:left}
.smalltn {height:100px; width:auto;float:left; margin-bottom:10px;}

.google-maps, .youtube {position: relative; padding-bottom: 75%; /* This is the aspect ratio*/ height: 0; overflow: hidden; border-radius:10px; margin-bottom:10px}
.google-maps iframe, .youtube iframe {position: absolute; top: 0;left: 0; width: 100% !important; height: 100% !important;}

h1, h2, h3, h4 {color:var(--mid-fg-colour)}
hr {border-color: var(--mid-fg-colour)}

.width200{width:100%; max-width:200px}
.width250{width:100%; max-width:250px}
.width300{width:100%; max-width:300px}
.width350{width:100%; max-width:350px}
.width400{width:100%; max-width:400px}
.width450{width:100%; max-width:450px}
.width500{width:100%; max-width:500px}
.width550{width:100%; max-width:550px}
.width600{width:100%; max-width:600px}
.clearfix2 {clear:both}

.tnpanel {padding: 5px; background-color: white; margin-bottom:20px; border-radius:10px}
.dropdown-divider {border-top: 1px solid var(--mid-fg-colour)} /* works */
/*.btn:hover {font-weight:bold; color:white}*/
/*.btn:hover {color:var(--mid-bg-colour)}*/
/*.btn:hover, .dropdown:hover > .dropdown-menu  {font-weight:bold; color:white;}*/
.nav-link {color:var(--light-bg-colour)}
.nav-link:hover, .dropdown-item:hover {color:blue !important}