.topnav {
	background:url("/images/navmenu-bg.jpg") repeat;
    overflow: hidden;
}

.topnav .fixedright {
    float:right;
	font-family:"Book Antiqua";
	font-size:18px;
    display: block;
    text-align: center;
    padding: 4px 15px;
    text-decoration: none;
	color:#FFFFFF;
	font-weight:bold;
	font-style:italic;
	text-transform:uppercase;
}

.topnav a {
	font-family:"Book Antiqua";
	font-size:18px;
    float: left;
    display: block;
    text-align: center;
    padding: 4px 15px;
    text-decoration: none;
	color:#FFFFFF;
	font-weight:bold;
	font-style:italic;
	text-transform:uppercase;
}

.topnav highlighted {
	font-family:"Book Antiqua";
	font-size:18px;
    float: left;
    display: block;
    text-align: center;
    padding: 4px 15px;
    text-decoration: none;
	color:#FFFFFF;
	font-weight:bold;
	font-style:italic;
	text-transform:uppercase;
    background-color: #00AA00;
}

.topnav a:link {
	color:#FFFFFF;
}

.topnav a:visited {
	color:#FFFFFF;
}

.topnav a:hover {
	background:url("/images/link-background.jpg") repeat;
	color:#FFFF00;
	cursor:pointer;
	text-decoration:none;
}

.topnav .icon {
    display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
	font-family:"Book Antiqua";
	font-size:18px;
    border: none;
    outline: none;
	/*background:url("/images/navmenu-bg.jpg") repeat;*/
    background-color: inherit;
    margin: 0;
	text-transform:uppercase;
    display: block;
    text-align: center;
    padding: 4px 15px;
    text-decoration: none;
	color:#FFFFFF;
	font-weight:bold;
	font-style:italic;
}

.dropdown-content {
	font-family:"Book Antiqua";
	font-size:18px;
    float: left;
    display: none;
    position: absolute;
    text-align: center;
    padding: 4px 15px;
    text-decoration: none;
	color:#FFFFFF;
	font-weight:bold;
	font-style:italic;
	text-transform:uppercase;
	background:url("/images/navmenu-dd-bg.jpg") repeat;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
	font-family:"Book Antiqua";
	font-size:18px;
    float: none;
    display: block;
    text-align: left;
    padding: 4px 15px;
    text-decoration: none;
	color:#FFFFFF;
	font-weight:bold;
	font-style:italic;
	text-transform:uppercase;
}

.dropdown-content a:hover {
	background:url("/images/link-background.jpg") repeat;
	color:#FFFF00;
	cursor:pointer;
	text-decoration:none;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 768px) {
    .topnav a:first-child {border: none;}
    .topnav a:not(:first-child), .dropdown .dropbtn {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
}

@media screen and (max-width: 768px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive icon {
        position: absolute;
        right: 0;
        float:left;
        top: 0;
    }
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        float:left;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
} 

.sidemenu table {
	text-align:center;
	font-size:16px;
	border: 1px solid #00BB88;
	border-radius:5px;
	font-weight:bold;
	background-color:#40C740;
	margin-bottom:0;
	color:#dddddd;
	background:url("/images/sidemenu.jpg") repeat;
}

.sidemenu td {
	height:30px;
	vertical-align:central;
}

.sidemenu span {
	color:#ffffff;
	width:100%;
}

.sidemenu a {
	text-align:center;
	font-size:16px;
	border-spacing: 0;
	border: 1px solid #00BB88;
	border-radius:5px;
	font-weight:bold;
	background-color:#FFFFFF;
	margin-bottom:0;
	color:#aa4444;
	background:url("/images/shade.jpg") repeat;
	width:100%;
    display: block;
	height:25px;
	font-family:"sans-serif";
}

.sidemenu a:link {
	color:#0000aa;
	/*color:#FFFFFF;*/
}

.sidemenu a:visited {
	color:#0000aa;
	/*color:#FFFFFF;*/
}

.sidemenu a:hover {
	background:url("/images/link-background.jpg") repeat;
	color:#FFFF00;
	cursor:pointer;
	text-decoration:none;
}

.sidemenu a.icon {
    display: none;
}

@media screen and (max-width: 768px) {
    .sidemenu a {display: none;}
    .sidemenu a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .sidemenu.responsive {position: relative;}
    .sidemenu.responsive a.icon {
        position: absolute;
        left: 0;
        top: 0;
	    width:20%;
    }
    .sidemenu.responsive a {
        float: none;
        display: block;
        text-align: center;
    }
} 

.slideDivClass{
    height:450px;
    width:493px;
}

body{
	margin-top:0px;
	margin-bottom:0px;
	background-color:#ffffff;
	background-repeat:repeat;
	background-attachment:fixed;
	background-image:url("/images/background.jpg");
}

p{
	color:#000044;
	font-size:18px;
	text-align:justify;
	line-height:27px;
	font-family:"sans-sheriff";
}

table{
	background-color:#FFFFFF;
	color:#000088;
}

.quiz table{
	background-color:#FFFFFF;
	color:#000044;
	font-size:16px;
	text-align:justify;
	line-height:20px;
	font-family:"sans-sheriff";
}

img{
	border:0px;
}

h1{
	color:#FF0000;
	font-size:24px;
	font-style:bold;
	text-align:left;
	font-family:"Arial";
}

h2{
	color:#0000FF;
	font-size:18px;
	display:inline;
	font-family:"Arial";
}

h3{
	color:#0066aa;
	font-size:16px;
	display:inline;
	font-family:"Arial";
}

h4{
	color:#dd0000;
	font-size:20px;
	font-style:italic;
	text-align:center;
	display:inline;
	font-family:"Arial";
}

h4green{
	color:#00aa00;
	font-size:20px;
	font-style:italic;
	text-align:center;
	display:inline;
	font-family:"Arial";
}

h5{
	color:#000000;
	font-size:28px;
	font-style:bold;
	text-align:center;
	display:inline;
	font-family:"Arial";
}

h6{
	color:#000000;
	font-size:20px;
	font-style:bold;
	text-align:center;
	display:inline;
	font-family:"Arial";
}

h7{
	color:#000000;
	font-size:24px;
	font-style:bold;
	text-align:center;
	display:inline;
	font-family:"Arial";
}

h8{
	color:#000000;
	font-size:16px;
	font-style:bold;
	text-align:center;
	display:inline;
	font-family:"Arial";
}

h8 a{
	color:#000000;
	font-size:16px;
	font-style:inherit;
	text-align:center;
	display:inline;
	font-family:"Arial";
}

.arrowgreen b{
	color:#000088;
	font-size:16px;
	background: url("/images/arrowgreen.jpg") left center no-repeat;
	padding-left: 30px;
}	

.plusgreen b{
	color:#000088;
	font-size:16px;
	background: url("/images/plusgreen.jpg") left center no-repeat;
	padding-left: 30px;
	padding-left: 30px;
}	

.checkmark li{
	color:#000088;
	font-size:16px;
	list-style-type: none;
	background: url("/images/check1green.jpg") left center no-repeat;
	padding-left: 50px;
	margin-bottom: 30px;
}

a:link{
	color:#0000aa;
	text-decoration:none;
}

a:visited{
	color:#0000aa;
	text-decoration:none;
}

a:hover{
	color:#00aa00;
	text-decoration:underline;
}

#caption {
	background: #414940;
	height: 80px;
	width: 100%;
	border-top: 9px solid #000000;
	border-bottom: 9px solid #bb0000;
	margin: auto;
	padding: 0;
}

#caption h1 {
	font-family: garamond;
	font-variant: small-caps;
	font-style: italic;
	font-weight: bold;
	letter-spacing: 6px;
	color: #ffffff;
	text-align: center;
	line-height: 1.2em;
	font-size: 54px;
	padding: 5px 0 10px 0;
	margin: 0 0 5px 0;
}

#headnote h2 {
	font-family: sans-serif;
	font-weight: bold;
	color: #7096f9;
	text-decoration: none;
	text-align: left;
	line-height: 1.2em;
	font-size: 30px;
	padding: 0 0 0 30px;
	margin: 0;
}

#headnote h3 {
	margin: 0;
	font-family: sans-serif;
	font-weight: normal;
	font-size: 22px;
	letter-spacing: -1px;
	color: #0066aa;
	padding: 0 0 0 30px;
}

.testimonials table {
	background-color:#B0DDB0;
	border: 2px solid #00FF00;
}

.references {
	margin: 10px 0 10px 0;
	font-family: sans-sherif;
	color: #bb0000;
	border: solid 1px #382bb5;
}

.references h3 {
	margin: 0;
	padding: 2px 10px; 
	border-bottom: solid 1px #414940;
	background-color: #4030b0;
	color: #ffffff;
	font-weight: normal;
	font-size: 90%;
}

.footer a:link{
	color:#aa0000;
	text-decoration:none;
	font-size:10px;
}

.footer a:visited{
	color:#aa0000;
	text-decoration:none;
	font-size:10px;
}

#fixed-footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 90px;
	background-color: #2D2D2D;
	color: white;
	text-align: center;
	display: inline-block;
}

#fixed-footer a:link, a:visited {
    background-color: #D2D2D2;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-bottom:20px;
}

#fixed-footer a:hover, a:active {
    background-color: red;
}

.buttontable button {
    margin: 5px;
	border: 1px solid #AA69A4;
	border-radius:30px;
	width:250px;
	height:50px;
	font-weight:bold;
	font-family:"sans-serif";
	font-size:16px;
	color:#FFFFFF;
	background-color:#22b022;
}

.buttontable button:hover{
	color:#0000AA;
	background:url("/images/link-background.jpg") repeat;
	cursor:pointer;
}

#broadbordertable table {
	table-layout: fixed;
	text-align:center;
	font-size:16px;
	border:#22b022 solid 8px;
	font-weight:bold;
	background-color:#22b022;
	margin-bottom:0;
	color:#FFFFFF;
	width:auto;
}

#broadborderinnertable table {
	table-layout: fixed;
	text-align:left;
	font-size:14px;
	border:#22b022 solid 1px;
	border-radius:8px;
	background-color:#FFFFFF;
	margin-bottom:0;
	color:#000088;
	/*text-align:justify;*/
	font-family:"sans-serif";
	width:auto;
	padding:2px;
}

.arrowblueForLI li{
	color:#000088;
	font-size:16px;
	list-style-type: none;
	background: url("/images/arrowblue.jpg") left center no-repeat;
	padding-left: 50px;
	margin-bottom: 10px;
}

.arrowredForLI ol{
	padding-left: 0;
}

.arrowredForLI li{
	color:#000088;
	font-size:16px;
	list-style-type: none;
	background: url("/images/arrowred.jpg") left center no-repeat;
	padding-left: 50px;
	margin-bottom: 10px;
}

.arrowgreenForLI ol{
	padding-left: 0;
}

.arrowgreenForLI li{
	color:#000088;
	font-size:16px;
	list-style-type: none;
	background: url("/images/arrowgreen.jpg") left center no-repeat;
	padding-left: 50px;
	margin-bottom: 10px;
}

.arrowgreenOnlyForLI li{
	color:#000088;
	font-size:16px;
	list-style-type: none;
	background: url("/images/arrow2_right_green.png") left center no-repeat;
	padding-left: 50px;
	margin-bottom: 30px;
}

.plusgreenOnlyForLI li{
	color:#000088;
	font-size:16px;
	list-style-type: none;
	background: url("/images/plusgreen.jpg") left center no-repeat;
	padding-left: 50px;
	margin-bottom: 30px;
}

.stargreenForLI ol{
	padding-left: 0;
}

.stargreenForLI li{
	color:#000088;
	font-size:16px;
	list-style-type: none;
	background: url("/images/star_green.png") left center no-repeat;
	padding-left: 50px;
	margin-bottom: 10px;
}

#container{
	background-color:#FFFFFF;
	min-width: 320px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: -18px;
}

#container-header table{
	background: url("/images/headerbg.jpg") repeat;
	border: 0;
	cellspacing: 0;
	cellpadding: 0;
}

#cockpit{
	background-color:#FFFFFF;
	min-width: 320px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -18px;
}

#end{
	clear: both;
	background: url("/images/footer.jpg") repeat;
	/* background-color:#FFFFFF; */
	min-width: 320px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

#content{
	/*background-color:#FFFFFF;*/
	margin-left: 5mm;
	margin-right: 5mm;
}

#tophalf {
	position:relative;
    content: ' ';
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
}

#tophalf .pic1 {
    background-image: url("/pics/landscape-roof.jpg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic2 {
    background-image: url("/pics/landscape-roof2.jpeg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic3 {
    background-image: url("/pics/roof3.jpeg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic6 {
    background-image: url("/pics/roof6.jpeg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic7 {
    background-image: url("/pics/roof7.jpeg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic8 {
    background-image: url("/pics/roof8.jpeg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic9 {
    background-image: url("/pics/roof9.jpeg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic11 {
    background-image: url("/pics/roof11.jpg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic12 {
    background-image: url("/pics/roof12.jpg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic13 {
    background-image: url("/pics/roof13.jpg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic14 {
    background-image: url("/pics/roof14.jpg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic15 {
    background-image: url("/pics/roof15.jpg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic16 {
    background-image: url("/pics/roof16.jpg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic17 {
    background-image: url("/pics/roof17.jpg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic18 {
    background-image: url("/pics/roof18.jpg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic19 {
    background-image: url("/pics/roof19.jpg");
    background-position: 50% 0;
    background-size: cover;
}

#tophalf .pic20 {
    background-image: url("/pics/roof20.jpg");
    background-position: 50% 0;
    background-size: cover;
}

#sidenav{
background-color:#FFFFFF;
	float: left;
	width: 20%;
	margin-left: 5mm;
	margin-right: 5mm;
}

#widecontent{
	background-color:#FFFFFF;
	margin-left: 5mm;
	margin-right: 5mm;
}

#content li{
	color:#000044;
	font-size:18px;
	text-align:justify;
	line-height:27px;
	font-family:"sans-sheriff";
}

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

.row {
}

.row-white {
    background-color: #FFFFFF;
}

.row-gray {
    background-color: #EEEEEE;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

.row-white::after {
  content: "";
  clear: both;
  display: block;
}

.row-gray::after {
  content: "";
  clear: both;
  display: block;
}

* {
  box-sizing: border-box;
}

[class*="col-"] {
    float: left;
    padding: 12px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    
    .youtube-embed {
        width: 100%;
        min-width:200;
        max-width:800;
        height: auto;
        min-height:400;
    }
}