@import url("../webfonts/OpenSans_Regular/stylesheet.css");




html, body {
	box-sizing: border-box;
	height: 100%;
    min-height: 100%;
	width: 100%;
    margin: 0;
}

*, *::before, *::after {
    box-sizing: inherit;
}
body {
    color: rgba(35,31,35,1);
    font-size: 1em;
    line-height: 1.5em;
    font-style: normal;
    font-family: "OpenSans Regular";
}
.grid [class*="grid-"] {
    margin: 0;
}
.grid::after {
    clear: both;
    content: "";
    display: table;
}
[class*="col-"] {
    float: left;
}

.row {display:flex;
height: 100%;}
.equal {flex:1; }



.wrapper {
	display: grid;
	height:100vh;
    min-height: 100%;
	margin: 0;
	 
	 
	 display: -webkit-box;  
  display: -webkit-flex;
  display: -ms-flexbox;
  
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;

}

.padding5px {
	padding: 5px;
	
}
.padding1 {
	padding: 1em;
	
}
.padding2 {
    padding: 2em;
}

.padding3 { padding: 3em; }
.padding3b {
    padding-top: 1em;
    padding-right: 3em;
    padding-left: 3em;
    padding-bottom: 1em;
}

.padding4 { padding: 4em; }

.padding5 { padding: 5em; }

.padding2left {
	padding-top: 0em;
	padding-right: 0em;
	padding-bottom: 0em;
	padding-left: 2em;
}

.padding10top {
	padding-top: 10em;
	padding-right: 1em;
	padding-bottom: 10em;
	padding-left: 1em;
}

.padding20pxtop { padding-top: 20px; 	
}

.padding10pxtop { padding-top: 10px; 	
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
.centerv 
{
    padding: 50% 0;
    text-align: center;
}
.centered {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.textcentered { text-align: center; }

.roundedborder {
	border: 1px solid #000;
	border-radius: 10px;
}

p, li {
    font-family: "OpenSans Regular";
    color: rgba(35,31,35,1);
    font-size: 1em;
    line-height: 1.5em;
    font-style: normal;
}
/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

audio {
  width: 80%
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}
	
	
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}


/*
 * gray color for rows #e4e4e4
 */

tr:nth-child(even) {background-color: #e4e4e4;}


/* ==========================================================================
   Author's custom styles

 /* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 300px;
  border: 1px solid #008080;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side */
.flip-box-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color: rgba(255,255, 255,1);
  color: white;
  transform: rotateY(180deg);
} 


/* hr Gradient transparent - color - transparent */
		
.hrstyle-two {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

/* multiple columns for text use newspaper instead */
.newscontainer {
	-webkit-column-width: 30em;
	column-width: 30em;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	color: #000;
	font-size: 1em;
	line-height: 1.5em;
	margin-top: 0px;
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}



h1, h2, h3, h4, h5 {
    font-weight: bolder;
    text-transform: none;
    line-height: normal;
	font-family: "OpenSans Regular";
    
}


h1 {
    font-size: 2.0 em;
    line-height: normal;
    margin-bottom: 1px;
    color: rgba(107,127,128,1);
    font-variant: normal;
    font-weight: bolder;
    text-transform: uppercase;
}

h2 {
    font-size: 1.5em;
    margin-top: 0px;
    color: rgba(144,147,115,1.00);
    font-style: italic;
}

h3 {
    font-size: 1.25em;
    color: rgba(101,93,90,1);
}

h3 a {
    color: rgba(101,93,90,1)
}
h3 a:hover {
    color: rgba(0,0,0,1.00)
}



h4 {
	font-size: 1.15em;
	color: rgba(101,93,90,1);
 }

h4 a {
    color: rgba(0,0,0,1)
}
h4 a:hover {
    color: rgba(0,0,0,1.00)
}



h5 {
	font-size: 1.15em;
	;
	color: rgba(101,93,90,1);
}

h5 a {
    color: rgba(0,0,0,1)
}
h5 a:hover {
    color: rgba(0,0,0,1)
}

/*cover images*/
.coverblue {
    width: 100%;
    background-image: 
    clear: none;
    width: 100%;
    overflow: hidden;
    image: cover;
    background-repeat: repeat;
    background-color: rgba(236,246,246,1.00);
}

/*Font Size*/

.text-120 {
	font-size: 120%;

	color: #000;
}
.text-110 {font-size: 110%;}

.text-100 {font-size: 100%;}
.text-90 {font-size: 90%;}
.text-80 {font-size: 80%;
	
}

.text-80 a {
	color: rgba(144,147,115,1);
	text-decoration: none;
}

.text-80bold {
    font-size: 50%;
    color: rgba(147,60,6,1.00);
    text-align: center;
    text-transform: uppercase;
}
.text-80bold a {
	color: rgba(179,87,66,1);
	text-decoration: none;
}

 .text-80bold a:hover {
	color: rgba(0,0,0,1);
	text-decoration: none;	
}


a {text-decoration: none}


.margin-top: {0px;}

p a {
    color: rgba(144,147,115,1);
    text-decoration: none;
    font-family: "OpenSans Regular";
}

 

p a:visited {
  color: rgba(144,147,115,1);  
    
}

p a:hover {
	color: rgba(0,0,0,1);
	text-decoration: none;	
}

p a:active {
    color: rgba(0,0,0,1);
    
}

li a {
	color: rgba(101,93,90,1);
	text-decoration: none;
}

li a:visited {
  color: rgba(144,147,115,1);  
    
}

 li a:hover {
	color: rgba(0,0,0,1);
	text-decoration: none;	
}


li a:active {
    
}

.testimonials {
    color:#888888);
    font-style: italic;
        
}

.pdfdescriptions {
    color: #000000);
    font-style: italic;
    font-size: 80%;
    
}

.red {
    color: rgba(250,2,6,1.00);
    
}
	
header {
    color: rgba(101,93,90,1.00);
    background-color: rgba(255,255,255,1);
    text-decoration: none;
    font-size: 1.25em;         
}

header a:link {
    color: rgba(101,93,90,1.00);
    font-size: 1.25em;
    text-decoration: none;
}

header a:visited {
    color: rgba(101,93,90,1.00);
    
}

header a:hover {
	color: rgba(0,0,0,1);
    }
	



nav {
	
}

section {
	clear: none;
	float: left;
	width: 100%;
	
 }

/*responsive not flex alt is display flex flex1*/

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}


.bordertopbottom {
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-right-style: none
	border-bottom-style: solid;
	border-top-color: rgba(134,134,134,.25);
	border-bottom-color: rgba(134,134,134,.25);
	border-bottom-style: solid;
}

.borderright
{
	border-right-style: none
	border-bottom-style: solid;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: rgba(134,134,134,.25);
}

.borderbottom {
	
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(134,134,134,.25);
	
}



.vertical{
 display:flex;
 justify-content: center;
 align-items: center;
 width:100%;
} 

.button1 {
	background-color: rgba(173,187,208,1);
	color: rgba(0,0,0,1) !important;
	text-decoration: none;
	vertical-align: middle;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	width: 150px;
	font-size: 1em;
	border-radius: 0px;
	padding-top: 10px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	margin: 10px;
	text-decoration: none;
   }
  

.button1 a {
    color: #000000 !important;
}
 

.button1:hover a {
    color: #000000 !important;
}

.button1: hover {
	background-color: rgba(144,147,115,1);		
	color: rgba(0,0,0,1) !important;
   } 

.button1: active {
    positive:relative;
    top:1px;
}
/*button2*/


.button2 {
	background-color: rgba(173,187,208,1);
	color: rgba(0,0,0,1) !important;
	text-decoration: none;
	vertical-align: middle;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	width: 300px;
	font-size: 1em;
	border-radius: 0px;
	padding-top: 10px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	margin: 10px;
	text-decoration: none;
   }
  

.button2 a {
    color: #000000 !important;
}
 

.button2:hover a {
    color: #000000 !important;
}

.button2: hover {
	background-color: rgba(144,147,115,1);		
	color: rgba(0,0,0,1) !important;
   } 

.button2: active {
    positive:relative;
    top:1px;
}




/*white*/
.bgcolor1-5 { background-color: rgba(255, 255, 255, .50); }
.bgcolor1 { background-color: rgba(255, 255, 255, 1); }
.bgcolor1-9 { background-color: rgba(255, 255, 255, .9); }
.bgcolor1-8 { background-color: rgba(255, 255, 255, .8); }


/*tea*/
.bgcolor2 { background-color: rgba(101,93,90,1); }
.bgcolor2-75 { background-color: rgba(101,93,90,.75); }
.bgcolor2-50 { background-color: rgba(101,93,90,.5); }
.bgcolor2-25 { background-color: rgba(101,93,90,.25); }
.bgcolor2-10 { background-color: rgba(101,93,90,.1); }

/* ltblue*/
.bgcolor3 { background-color: rgba(173,187,208,1.00); }
.bgcolor3-75 { background-color: rgba(173,187,208,.75); }
.bgcolor3-50 { background-color: rgba(173,187,208,.50); }
.bgcolor3-25 { background-color: rgba(173,187,208,.25); }
.bgcolor3-10 { background-color: rgba(2173,187,208,.10); }

/*gray*/
.bgcolor4 { background-color: rgba(35,31,35,1); }
.bgcolor4-75 { background-color: rgba(35,31,35,.75); }
.bgcolor4-50 { background-color: rgba(35,31,35,.50); }
.bgcolor4-25 { background-color: rgba(35,31,35,.25); }
.bgcolor4-10 { background-color: rgba(35,31,35,.10); }


/*blueteal*/
.bgcolor5 { background-color: rgba(107,127,128,1); }
.bgcolor5-75 { background-color: rgba(107,127,128,.75); }
.bgcolor5-50 { background-color: rgba(107,127,128,.50); }
.bgcolor5-25 { background-color: rgba(107,127,128,.25); }
.bgcolor5-10 { background-color: rgba(107,127,128,.10); }

/*almond*/
.bgcolor6 { background-color: rgba(225,207,178,1); }
.bgcolor6-75 { background-color: rgba(225,207,178,.75); }
.bgcolor6-50 { background-color: rgba(225,207,178,.50); }
.bgcolor6-25 { background-color: rgba(225,207,178,.25); }
.bgcolor6-10 { background-color: rgba(225,207,178,.10); }


/*agreen*/
.bgcolor7 { background-color: rgba(144,147,115,1); }
.bgcolor7-75 { background-color: rgba(144,147,115,.75); }
.bgcolor7-50 { background-color: rgba(144,147,115,.50); }
.bgcolor7-25 { background-color: rgba(144,147,115,.25); }
.bgcolor7-10 { background-color: rgba(144,147,115,.10); }




/*parallax*/
.parallax {
    /* The image used */
    background-image: url(../2023testphotos/skylinesweeps.jpg);
    /* Set a specific height */
    min-height: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}





.video-wrapper {
	position: relative;
	padding-bottom: 56.25%;  /* 16:9 */
	padding-top: 30px;
	height: 0px;
	overflow: hidden;
}

.video-wrapper iframe, .video-wrapper object, .video-wrapper embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}


/*Make images scalable*/



img {
	max-width: 100%;
    height: auto;
    width: auto;
}

.rotateleft {-ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}

.rotatert {-ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
}

.scalable-rounded {
	width: auto;
	height: auto;
	max-width: 100%;
	border-radius: 8px;
}

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }



footer {
    width: 100%;
  /*  background-image: url(https://shorehavenbhi.com/2023images/shore-waves2.jpg);*/
    clear: none;
    width: 100%;
    overflow: hidden;
    image: cover;
    background-repeat: no-repeat;
    background-color: rgba(144,147,115,.5);
}

footer p {
    color: rgba(0,0,0,1);
    text-decoration: none;
}

footer a {
	color: rgba(0,0.0.0,1);
	text-decoration: none;
}

footer a:link {
	color: rgba(0,0.0.0,1);
	text-decoration: none;
}
footer a:visited {
	color: rgba(0,0.0.0,1);
	text-decoration: none;
}


footer a:hover {
	color: rgba(101,93,90,1);
	text-decoration: none;
}

.footertitle { color: #FFF; }

.centered { text-align: center; }


.min-max-height { min-height: 600px;
max-height:600px }

.minheight600 { min-height:600px; 	
}





/* ==========================================================================
   Media Queries
   ========================================================================== */

/* ===== == = === 10em (160px) === = == ===== */

@media only screen and (min-width : 10em) {
/*Column Widths*/
.col-1-1 {
	width: 100%;
	
}

.col-1-2 {
	width: 100%;
	
}
.col-1-3 {
    width: 100%;
}
.col-1-4 {
    width: 100%;
}
.col-3-4 {
    width: 100%;
}

.col-1-5 {
    width: 100%;
}
.col-1-5more {
    width: 100%;
	margin: 10px;
	padding: 10px;
	clear: none;
	float: left;
	
}
	
.col-1-6 {
    width: 100%;

}
.col-1-8 {
    width: 100%;
}
.col-2-3 {
    width: 100%;
}


.slidermessage {
	display:none;
}
    
   


#row-1 { background-color: #FFF; }

#row-2 {  }

#row-3 {  }

#row-4 {
	
}

#row-5 { 	}

#row-6 {   }

#row-7 {  }

.alignright { text-align: center; }
.alignleft { text-align: center; }


.margintop10 { margin-top: 1em; 	
}

.marginbottom10 {
	
	margin-bottom: 1em;
}

.marginbottom5 {
	margin-bottom: 1em;
}

.text-300 {
	font-size: 150%;
	color: rgba(38,43,102,1);
	text-align: center;
}

.newspaper2col {
	column-count: 1;
	1
}

.newspaper3col {
  column-count: 1;
    
  
}

}


/* ===== == = === 30em (480px) === = == ===== */

@media only screen and (min-width : 30em) {

.text-300 {
	font-size: 300%;
	line-height: 90%;
	text-align: center;
	padding-top: 20px;
}

}



/* ===== == = === 37.5em (600px) === = == ===== */

@media only screen and (min-width: 37.5em) {







}



/* ===== == = === 48em (768px) smallest desk=== = == ===== */

@media only screen and (min-width : 48em) {



.col-1-2 {
	width: 50%;
	
}
.col-1-3 {
    width: 33.333%;
}
.col-1-4 {
    width: 25%;
}
.col-3-4 {
    width: 75%;
}

.col-1-5 {
    width: 20%;
}
.col-1-5more {
	width: 18%;
	margin: 10px;
	padding: 10px;
	clear: none;
	float: left;
}

.col-1-6 {
    width: 16.66%;
}
.col-1-8 {
    width: 12.5%;
}
.col-2-3 {
    width: 66.667%;
}




.margintop10 { margin-top: 10em; 	
}

.marginbottom10 {
	margin-bottom: 10em;
}
.marginbottom5 {
	margin-bottom: 5em;
}

.alignright { text-align: right; }
.alignleft { text-align: left; }



}




/* ===== == = === 56.25em (900px) === = == ===== */

@media only screen and (min-width : 56.25em) {

/* multiple columns for text  new*/
.newspaper2col {
	column-count: 2;
	column-gap: 40px;
	margin-top: 0px;

}

.newspaper3col {
  column-count: 3;
  column-gap: 40px;
  margin-top: 0px;
  
  
}

.masonry {
    display: flex;
    flex-flow: row wrap;
    width: 33%;
}

.masonry-item {
    overflow: hidden;

    margin: 10px;
    background-color: #fff;
    flex: auto;
}

}


/* ===== == = === 60em (960px) === = == ===== */

@media only screen and (min-width : 60em) {




}


/* ===== == = === 68.75em (1100px) === = == ===== */

@media only screen and (min-width : 68.75em) {





}



/* ===== == = === 81.25em (1300px) === = == ===== */

@media only screen and (min-width : 81.25em) {





}
















/* ==========================================================================
   Helper classes
   ========================================================================== */



.hidden {
    display: none !important;
}



.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */



@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}