body  {
 background-color: #0d0064; /*dk blue*/
 color: #043574;
}


#wrapper {
 background-color: #FFF;
 border-left:3px double #000;
 border-right:3px double #000;
 border-top:3px double #000;
 border-bottom:3px double #000;
 /* height:250vh;*/
 height: 100%;
 width: 95%;
 margin: 0px auto;
 overflow: hidden;
 font-family: 'Helvetica Neue', sans-serif;
 font-size: 16px;
 }

/*
#headtxt {
 background-image: url("pics/banner2.png");
 background-size: 1600px 200px;
 background-repeat: no-repeat;
 background-color: #FFF;
 color: #000;
 padding: 40px;
 text-shadow:
    -1px -1px 0 #e6f505,
     1px -1px 0 #e6f505,
    -1px  1px 0 #e6f505,
     1px  1px 0 #e6f505;
}
*/

.coming_soon {
   color: #F43574;
   font-style: italic ;
}

h1, h2, h3 {
 color: #0d0064;
 text-shadow: 0.1em 0.1em 0.3em #0D47A1;
 font-family: Lucinda, cursive ;  
}

h2 {
  font-size: 2.5vh;
 text-shadow: 0.1em 0.1em 0.2em #0097FD;
}

h3 {
  font-size: 3vh;
}

h4 {
 font-size: 2vh;
  color: #043574;
 /* color: #b70303;*/
 text-shadow: 0.1em 0.1em 0.3em #0097FD;
 font-family: Lucinda, cursive ;  
 padding-left: 1px;
}    

/* p { color: #685206; font-family: 'Helvetica Neue', sans-serif; font-size: 14px; line-height: 24px; margin: 0 0 24px; text-align: justify; text-justify: inter-word; } */
p {color: #043574;font-family: 'Helvetica Neue', sans-serif;text-align: justify; font-size: 16px; }

#area_info {
 /*padding-left: 40px;
  padding-right: 10px;*/
  margin-left: 6vw;
  margin-right: 6vw;
  width: 70vw;
}

#area_info h4 {
 font-size: 2vh;
 color: #043574;
 text-shadow: 0.1em 0.1em 0.3em #0097FD;
 font-family: Lucinda, cursive ;  
 padding-left: 1px;
}

#area_info li {
 padding-left: 40px;
list-style-type: none;
}

#photo_area {
 background-color: #FFF;
 border:5px double #0d0064;
 padding: 10px;
}

#about {
 background-color: #FFF;
 padding-left: 10px;
 padding-right: 10px;
 padding: 10px;
 margin-left: 3em;
 margin-right: 3em;
}

.distance {
  font-weight:bold;
  color: #881D1D;
}

.twocols {
  background-color: #FFF;
  margin-left: 5em;
  height:480px;
 border: 5px solid #F00;
}

.rcol {
  padding-right: 1em;
  float: left ;
  width: 35% ;
   color: #0C62B3;
//   border: 2px solid red;
}

.lcol {
  text-align: justify;
  padding-left: 4vh;
  padding-right: 0em;
  float: left ;
//background-color: cornflowerblue;
  width: 55% ;
//   border: 2px solid blue;
}

.moor {
  margin-top:3px;
  background-color: #26b6fa;
  color:#FFF;
  font-size: 1.5vh;
/*  font-style: italic, underline;*/
  font-weight: 350;
  display: inline-block;
  cursor: pointer;
  border: solid #0D0064 1px;
  padding: 1px;
  text-decoration: none;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
   box-shadow:        4px 3px 7px 0px #5985F4; 
  -webkit-box-shadow:  4px 3px 7px 0px #5985F4;
  -moz-box-shadow:   4px 3px 7px 0px #5985F4;
  background-image: -webkit-linear-gradient(top, #0097FD, #03099D);
  background-image: -moz-linear-gradient(top, #0097FD,#03099D);
  background-image: -ms-linear-gradient(top, #0097FD, #03099D);
  background-image: -o-linear-gradient(top, #0097FD,#03099D);
/*  text-shadow: 1px 1px 20px #000000; 
*/}

.moor:hover {
  margin-top:3px;
  color:#FFF;
  text-decoration: none;
  border: solid #5985F4 1px;
  background: #03099D;
  background-image: -webkit-linear-gradient(top, #1128F7, #43B0B0);
  background-image: -moz-linear-gradient(top,  #1128F7, #43B0B0 );
  background-image: -ms-linear-gradient(top, #1128F7,  #43B0B0);
  background-image: -o-linear-gradient(top, #1128F7, #43B0B0 );
  background-image: linear-gradient(to bottom, #03099D, #43B0B0);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}




.maps {
  display: block;
  margin: 0 auto;
  padding: 9px;
  background-color: #FFF;
  width: 800px;
  height:600px; 
}

.pics {
  width: 800px;
  display: block;
  margin: 0 auto;  
}

#calendar {
  background-color: #FFF;
}

.weatherbox {
	width: 97%;
   margin: 0 auto; 	
}


.temps {
 /* float: right;*/

  background-color: #0078C1;
  color: #0D0064;
  width: 50%;
  /*background-color: #E3C5B0;
   color:  8E1C04;
  */
  padding: 0.5em;
  margin: 0.1em;  
  margin-top:0em;
   text-align: center;
   margin: 0 auto; 
}
.temps p {
  color: #CDE2EE;
}

.center {
  margin: auto;
  /*position: absolute;*/
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  }



.sand1 {
	background-color: #F2AB8B;
}
.sand2 {
	background-color: #EA9E7C;
}
.brick {
	background-color: #D5B890;
}
.door {
	background-color: #FF3105;
}
.hedge1 {
	background-color: #63823F;
}
.hedge2 {
	background-color: #CBDA74;
}
.sky {
	background-color: #DBE5FF;
}
.cloud {
	background-color: #EFF1FF;
}
.spare {
	background-color: #FFF;
}

/* widget stuff   */
.currency {
    float: right;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 10px;
    line-height: 1.42857143;
    color: #043574;
    display: block;
    font-size: 12px;    
    height: 20px;
    width: 75%;
}
.form-control {
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgb(0 255 0 / 8%);
    color: #043574;    
    display: block;
    font-size: 12px;    
    height: 20px;
    width: 75%;
}
.currency body {
   font-family: "Helvetica Neue", sans-serif;
    font-size: 10px;
    line-height: 1.42857143;
    background-color: #fbf9ef;
   color: #685206;

}

.currency:input[type="text" i] {
    background-color: #f5efc2;
    padding: 2px 2px;
    color: #63823f;    
    font-weight: bold;
}

.currency input {
    font-weight: bold;
    background-color: #eaeef9;
    cursor: text;
}
.currency .h1, .h2, .h3, h1, h2, h3 {
     text-align: center;
    margin-top: 6px;
   margin-left: 5px;
}

/*.currency .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
     text-align: center;
    font-family: Lucinda, cursive ;  
    line-height: 1;
    color: #b70303;
     padding-top: 25px;
}*/
.currency  .h5, .h6,  h5, h6 {
     text-align: center;
    font-family: Lucinda, cursive ;  
    line-height: 1;
    color: #b70303;
}

.currency .h1 {
margin:auto;
    float: right;
    margin-left: 5px;
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-block-end: 0.67em;
    margin-block-start: 0.67em;
    margin-inline-end: 0px;
    margin-inline-start: 0px;
}


/* This rule is read by Galleria slideshow to define the gallery height: */

#galleria{
  height:460px!important;
  width:800px!important;
 }
.galleria{ 
  height: 460px!important; 
  width: 800px;!important 
  background: #CDE2EE;  /* lt blue */
  }

.galleria-theme-classic {
    background: #0078c1; /*Med Bluek*/
 }
.galleria-counter { 
  color: #00FF00;
  padding-right: 10px;
  padding-left: 10px!important;
}
.galleria-bar {
 background: #0078C1 !important; 
}
/* navbar */
nav{
  width: 100vw;
  background-color: #cde2ee; /*light blue*/
  overflow: hidden;
  position: fixed;  /*Set the navbar to fixed position */
  top: 0; /*Position the navbar at the top of the page */
}

  nav li{
  list-style-type: none;
/*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
  margin: 1vh 2vw;
/* our font-size will be 3% of the height of the viewport */
  font-size: 2vh;
}


nav a{
  text-decoration: none;
  color: #0078c1;
  padding: 2vw;
  font-family: 'Lucinda', cursive;
                                                
  font-weight: 800;
  border-radius: 60%;
/*  border-top-left-radius: 40%;
  border-top-right-radius: 40%;*/
  
}
.nav li.active {
  background-color: #0078c1;
  color: 	#cde2ee;	
/*    border-top-left-radius: 40%;
  border-top-right-radius: 40%;*/
}

.nav li.active a {
  background-color:  #0078c1;
  color: #cde2ee;
}    
/* Add an active class to highlight the current page */
/* nav a:active {
 background-color: #FFF7D7;
  color: #7d1111;
  
   background-color: green;
}*/

/* Add an active class to highlight the current page */
/* nav li.active {
 background-color: #FFF7D7;
  color: #7d1111;
  background-color: blue;
}*/

nav a:hover{
  background-color:  #0078c1;
  color: #cde2ee;
}


nav ul{
  margin: 0;
  padding: 0;
/* display: inline; this option by default dispose the elements in a row (flex-direction: row)*/
  display: flex;  
}

nav body{
  margin: 0;
}

/*change the layout of the navigation bar for all the screens 
that have a width less or equal than 500px*/

@media only screen and (max-width: 500px) {
  /*shows elements in a column*/
  ul{
    flex-direction: column;
  }
  
  /* deletes margin on top or bottom of the a tag*/
li{
    margin: 0;
  }
 /* makes sure that the a tag will take the entire screen*/
a{
    display: block;
}

 }
/*end change the layout 500px*/