* {margin:0%;padding:0%;border:0;outline:none;-moz-outline-style:none;font-family:calibri,arial;}
body, html {
width:100%;
height:100%;
min-height:100%;
max-height:100%;
font-size:1rem;
background:#000000;
}
.body-container{
max-width:1024px;
width:100%;
margin:0 auto;
background-color:#ffffff;
}
strong{font-weight:bold;}
form{display:inline;}
*:focus{outline:none;-moz-outline-style:none;}

/*content*/
.content-ctr{float:left;width:96%;padding:1% 2% 4% 2%;}
h1{font-family:calibri,arial;font-weight:bold;font-size:160%;color:#000000;text-align:left;padding-top:3%;padding-bottom:1.5%;}
h2{font-family:calibri,arial;font-weight:bold;font-size:120%;color:#000000;text-align:left;padding-top:3%;padding-bottom:1%;}
h3{font-family:calibri,arial;font-weight:bold;font-size:110%;color:#000000;text-align:left;padding-top:3%;padding-bottom:1%;}
p{font-family:calibri,arial; font-size:92%;color:#3a3a3a;text-align:left;padding-top:2%;}
ul{margin-left:4%;margin-top:2%;margin-bottom:0.5%;}
li{text-align:left;color:#3a3a3a;font-size:105%;line-height:180%;}
.optiseal-hdr-ctr{position:relative;top:0%;left:0%;width:100%;overflow:hidden;}
.optiseal-hdr-ctr img{width:100%;}
.optiseal-content{position:relative;background-color:#ffffff;padding-bottom:4%;}
.optiseal-text{clear:both;padding:0% 6% 1% 6%;}
.optiseal-text p{color:#3a3a3a;font-size:110%;}
.optiseal-text p a{color:#02b4f2;text-decoration:none;font-size:115%;font-weight:bold;}
.optiseal-text p a:hover{color:#000000;}
.optiseal-ctr{margin:0 auto;width:100%;text-align:center;padding-top:3%;padding-bottom:1%;}
.optiseal-product{display:inline-block;padding-left:1%;padding-right:1%;}
.optiseal-product a{opacity: 1.0;filter: alpha(opacity=100);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
.optiseal-product a:hover{opacity:0.80;filter: alpha(opacity=80);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
.optiseal-product h1{font-size:130%;}
.optiseal-product h1, .optiseal-product h2, .optiseal-product h3{margin:0 auto;width:100%;text-align:center;line-height:95%;}
.contact-general{float:left;width:100%;padding-top:1%;padding-bottom:3%;}
.contact-general-lbl{padding-top:2%;font-size:100%;}
.contact-general-lbl label{clear:both;float:left;width:15%;font-weight:bold;font-size:105%;}
.contact-general-lbl div a{color:#02b4f2;text-decoration:none;font-size:115%;font-weight:bold;}
.contact-general-lbl div a:hover{color:#000000;}
@media only screen and (max-width: 480px) {
.contact-general-lbl label{font-size:90%;}
.contact-general-lbl div a{font-size:105%;}
}
@media only screen and (max-width: 320px) {
.contact-general-lbl label{font-size:80%;padding-top:0.9%;}
.contact-general-lbl div a{font-size:95%;}
}
.contact-lhs{float:left;width:50%;padding-left:6%;padding-top:2%;}
.contact-rhs{float:left;width:40%;height:100%;}
.contact-lbl label{clear:both;float:left;width:30%;font-weight:bold;font-size:105%;}
.contact-lbl div{float:left;width:60%;padding-bottom:3%;font-size:100%;}
.contact-lbl div a{color:#02b4f2;text-decoration:none;font-size:110%;font-weight:bold;}
.contact-lbl div a:hover{color:#000000;}
#map{width:90%;height:40vh;margin:1% 5% 5% 5%;}
.optiseal-contact{clear:both;padding:0% 6% 1% 6%;}
.optiseal-contact p{color:#3a3a3a;font-size:110%;}
.contact-number{color:#02b4f2;text-decoration:none;font-size:115%;font-weight:bold;}
.contact-number:hover{color:#000000;}
.contact-btn{display:inline-block;border:2px solid #e3e3e3;margin:1% 0% 0% 1.5%;padding:1vh 1vw;font-size:70%;font-weight:normal;cursor:pointer;
-webkit-border-radius:8px;-khtml-border-radius:8px;border-radius:8px;text-decoration:none;}
.contact-btn:active{border:2px solid #d5d5d5;}
.save{background-color:#5b5a5a;color:gainsboro;}
.save:hover{background-color:#000000;color:white;}

@media only screen and (max-width: 906px) {
.contact-lbl label{font-size: 97%;}
}
@media only screen and (max-width: 800px) {
.contact-lbl label{font-size: 95%;}
}
@media only screen and (max-width: 640px) {
.contact-lbl label{font-size: 90%;}
.contact-btn{padding:0.8% 5%;}
}
@media only screen and (max-width: 568px) {
.contact-lbl label{font-size: 85%;}
.contact-lhs{clear:both;width:70%;}
.contact-rhs{clear:both;width:100%;}
.contact-btn{padding:0.8% 6%;}
}
@media only screen and (max-width: 480px) {
.contact-lbl label{font-size: 82%;}
.contact-btn{padding:0.8% 7%;}
}
@media only screen and (max-width: 375px) {
.contact-lbl label{font-size: 82%;}
.contact-lbl div{font-size:90%;}
.contact-btn{padding:0.8% 8%;}
}
@media only screen and (max-width: 320px) {
.contact-lbl label{font-size: 78%;}
.contact-lbl div{font-size:85%;}
.contact-btn{padding:0.8% 9%;}
}


.video-ctr{margin-top:1.2%;margin-bottom:3.8%;}
.videochoicelist{float:left;width:24%;}
.videochoicelist div{clear:both;padding-bottom:5.5%;font-size:95%;line-height:120%;color:#3a3a3a;font-weight:normal;cursor:pointer;}
.videochoicelist div:hover{font-weight:bold;}
.videocenter-ctr{margin-top:1.2%;margin-bottom:0%;margin-left:0%;}
.videocenter{margin:0 auto;width:80%;height:42%;padding-top:1%;padding-right:1.3%;padding-bottom:2%;padding-left:1%;background:url(inc/video-frame.jpg);background-size:cover; }
.videocenter2{margin:0 auto;width:80%;height:58%;padding-top:1%;padding-right:1.3%;padding-bottom:4%;padding-left:1%;background:url(inc/video-frame2.jpg);background-size:cover; }
.videocenter video, .videocenter2 video{width:100%;height:auto;}
.videocontents{float:right;width:74%;height:39.9%;padding-top:1%;padding-right:0%;padding-bottom:4%;padding-left:0%;}
.videocontents video{width:100%;height:auto;}
@media only screen and (max-width: 800px) {
	.videochoicelist{clear:both;width:100%;}
	.videocontents{clear:both;width:100%;margin-top:3%;}
	.videochoicelist div{padding-bottom:1%;font-size:90%;}
}

.installerstate{clear:both;margin-top:1%;font-size:120%;font-weight:bold;}
.installer{clear:both;margin-top:1.2%;}
.installer div{float:left;width:25%;font-size:100%;font-weight:bold;}
.installer a{color:#02b4f2;text-decoration:none;font-size:105%;font-weight:bold;}
.installer a:hover{color:#000000;}
@media only screen and (max-width: 906px) { .installer div{width:30%;} }
@media only screen and (max-width: 800px) { .installer div{width:35%;} }
@media only screen and (max-width: 640px) { .installer div{width:45%;} }
@media only screen and (max-width: 568px) { .installer div{width:50%;} }
@media only screen and (max-width: 480px) { .installer div{width:55%;} }
@media only screen and (max-width: 375px) { .installer div{width:60%;} }
@media only screen and (max-width: 320px) {
.installer div{width:60%;font-size:93%;}
.installer a{font-size:100%;}
}

.hannoband-duo-easy-pics{margin:0 auto;width:100%;text-align:center;padding-top:2.5%;}
.hannoband-duo-easy-pics img{width:40%;}
.hannoband-bg-pics{width:98%;padding-left:2%;padding-top:2.5%;}
.hannoband-bg-pics img{width:23%;padding-right:1%;}

.footer-ctr{clear:both;display:block;width:100%;padding:0% 0% 2% 0%;background-color:#000000;}
.footer-box{margin:0 auto;width:100%;text-align:center;background-color:#000000;}
.footer-nav-ctr{float:left;width:32%;padding-left:6%;padding-top:1.8%;padding-bottom:6%;text-align:left;}
.footer-hdg{display:block;margin:2.5% 0% 4.6% 0%;font-family:calibri,arial;font-weight:bold;font-size:90%;color:#d3d3d3;cursor:default;}
.footer-menu a{display:block;font-family:calibri,arial;font-size:85%;color:#d3d3d3;text-decoration:none;}
.footer-menu a:hover{color:white;}
.footer-products-ctr{float:left;width:34%;padding-left:2%;padding-top:1.8%;text-align:left;}
.footer-logo-ctr{float:left;width:20%;padding-left:2%;padding-top:2.1%;text-align:left;}
.footer-logo-box{display:block;width:100%;margin:2.5% 0% 1.5% 0%;}
.footer-logo-box a{clear:both;float:left;text-decoration:none;}
.footer-logo-box a:hover{color:white;}
.footer-logo-box a img{width:100%;}
.footer-link{font-size:85%;margin-left:2%;color:#d3d3d3;}
.footer-kfox{font-size:70%;margin-left:2%;margin-top:1%;color:#d3d3d3;}
.w100{width:10%;}.w180{width:18%;}
.clear{clear:both;}
.hide{display:none;}

/*Suckerfish Menus*/
.menu-ctr{clear:both;margin:0 auto;max-width:100%;width:100%;text-align:center;background-color:#000000;}
ul.nav, .nav ul{margin:0 auto;list-style:none;z-index:99;}
ul.nav {width:100%;max-width:100%;padding-top:1.3%;}
ul.nav li {float:left;position:relative;background-color:#000000;display:inline-block;
padding-left:1.4%;padding-right:1.4%;padding-bottom:1.3%;}
ul.nav a {float:left;box-sizing:border-box;display:inline-block;
text-decoration:none;color:#e9e9e9;font-size:85%;font-weight:bold;outline:none;}
.nav li:hover a {color:#ffffff;}
ul.nav li ul {width:24vw;position:absolute;top:100%;left:0;margin-left:-999em;border-right:1px solid #999a9a;border-left:1px solid #999a9a;border-bottom:1px solid #999a9a;}
ul.nav li ul a{text-align:left;}
.nav li:hover ul{margin-left:0;visibility:visible;}
.nav li li{width:24vw;height:auto;display:inline-block;}
.nav li li a {box-sizing:border-box;font-size:85%;padding-top:1vw;padding-bottom:1vw;padding-left:7%;padding-right:7%;line-height:105%;}
.nav li:hover li a {color:#e9e9e9;}
.nav li li a:hover {width:24vw;background-color:#408cc5;color:white;}
.menu-options-ctr{float:left;text-align:left;width:100%;}
@media only screen and (max-width: 700px) {
.menu-bars{display:block;padding:0% 0% 0% 1.3%;cursor:pointer;}
.menu-bars img{width:10%;vertical-align:text-bottom;padding-bottom:0%;}
ul.nav li {clear:both;width:100%;padding-top:0.5%;padding-bottom:0.5%;}
.menu-options-ctr{width:100%;}
}
@media only screen and (min-width: 700px) { .menu-bars{display:none;} }


/*Slideshow*/
.slideshow-ctr{position:relative;top:0%;left:0%;width:100%;min-width:100%;max-width:100%;height:auto;overflow:hidden;margin:0%;padding:0%;}
.slideshow-current-slide img{width:100%;height:auto;vertical-align:middle;}
.slideshow-next-slide{display:none;}
.slideshow-bullets{position:absolute;bottom:0.5%;right:0.5%;width:100%;text-align:right;}
.slideshow-bullets div{position:relative;display:inline-block;width:1.6vw;height:1.6vw;overflow:hidden;padding-left:0%;padding-right:0%;cursor: pointer;}
.slideshow-current-bullet{background: url(/inc/slideshow/button-white.png) no-repeat; background-size:60%;}
.slideshow-current-bullet:hover{background: url(/inc/slideshow/button-white-highlight.png) no-repeat; background-size:60%;}
.slideshow-next-bullet{background: url(/inc/slideshow/button-blue.png) no-repeat; background-size:60%;}
.slideshow-next-bullet:hover{background: url(/inc/slideshow/button-blue-highlight.png) no-repeat; background-size:60%;}
/*Slideshow navigation*/
.slideshow-nav-left{background:url(/inc/slideshow/left-arrow.png) no-repeat;background-size:100%;position:absolute;top:40%;left:0.8%;}
.slideshow-nav-right{background:url(/inc/slideshow/right-arrow.png) no-repeat;background-size:100%;position:absolute;top:40%;right:0.8%;}
.slideshow-nav-left, .slideshow-nav-right{display:block;width:5.5%;height:26%;cursor:pointer;overflow:hidden;
opacity: 0.65;filter: alpha(opacity=65);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";	}
.slideshow-nav-left:hover, .slideshow-nav-right:hover { opacity: 1;	filter: alpha(opacity=100);	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";	 }
.slideshow-caption{font-size: 90%;position:absolute;right:1%; top:63%;padding-top:0.6%; padding-bottom:0.6%; color: #ffffff;font-weight: bold;text-align: center;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;	
background-color: #58595b;	padding-left:3%;padding-right:3%;	opacity: .80;	filter: alpha(opacity=80);	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";	}
@media only screen and (max-width: 906px) {
.slideshow-caption{font-size: 87%;}
}
@media only screen and (max-width: 800px) {
.slideshow-caption{font-size: 85%;}
}
@media only screen and (max-width: 640px) {
.slideshow-caption{font-size: 78%;}
}
@media only screen and (max-width: 568px) {
.slideshow-caption{font-size: 74%;}
}
@media only screen and (max-width: 480px) {
.slideshow-caption{font-size: 70%;}
}
@media only screen and (max-width: 375px) {
.slideshow-caption{font-size: 57%;}
}
@media only screen and (max-width: 320px) {
.slideshow-caption{font-size: 50%;}
}