@import url('https://fonts.googleapis.com/css?family=Montserrat|Arimo');
body {font:normal 14pt 'Arimo',arial; margin:0px; color:#333333; background:white;}
ul {list-style-type:square; color:#036CB6;}
li span {color:#333333;}
a {color:#036CB6; text-decoration:none;}
.dotline {color:#036CB6; text-decoration:none; border-bottom:1px dotted black}
.dotline:hover {border-bottom:1px solid black;}
.slideshow {position:relative; top:0px; left:0px; width:100%; height:auto; max-height:100vh; text-align:center; overflow:hidden;}
.slideshow img, .slide img {width:100%; height:auto; display:block;}
.slide {position:absolute; top:0px; left:0px; width:100%; height:auto;}
.topdiv {position:fixed; background:rgba(3,108,182, 0.9); width:100%; top:0px; left:0px; font-weight:bold; z-index:1; text-align:center; padding:10px 0px 10px 2px;}
#topmenu {position:fixed; background:rgba(3,108,182, 0.9); width:32px; height:32px; top:15px; right:15px; z-index:1; padding:2px; cursor:pointer; display:none;}
.toplogo {position:absolute; bottom:25px; left:25px; width:318px;}
.rightimg {position:absolute; top:0px; left:620px; border-radius:25px; width:260px; height:180px; border:5px solid #036CB6; -ms-transform:rotate(5deg); -webkit-transform:rotate(5deg); transform:rotate(5deg);}
.rightimg:hover {border-color:#004e87;}
.opprotate {top:180px; -ms-transform:rotate(-4deg); -webkit-transform:rotate(-4deg); transform:rotate(-4deg);}
.header {background:#036CB6; width:230px; color:white; font:bold 18pt 'Montserrat',arial; padding:2px 2px 2px 8px; margin-left:-35px; -ms-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); transform:rotate(-5deg);}
a.button {color:white; border:2px solid #036CB6; background:#036CB6; border-radius:25px; padding:3px 9px;}
a.button:hover {background:#004e87; border-color:#004e87; text-decoration:none;}
a.toplink {color:white; padding:3px 16px; margin-right:11px;}
a.toplink:hover {border-radius:25px; background:white; color:#036CB6; text-decoration:none;}
.bar1, .bar2, .bar3 {width:26px; height:2px; background:white; margin:6px 3px 7px 3px; transition:0.4s; border-radius:5px;}
.change .bar1 {transform:rotate(-45deg) translate(-6px, 7px);}
.change .bar2 {opacity:0;}
.change .bar3 {transform:rotate(45deg) translate(-5px, -8px);}
#menu2 {position:fixed; visibility:hidden; display:none; width:100%; background:rgba(3,108,182, 0.9); font:bold 16pt 'Arimo',arial; top:65px; padding:10px 0px; z-index:8;}
#menu2 ul {list-style:none; padding:0px; text-align:center;}
#menu2 li a {padding:8px; display:block; color:white; text-decoration:none;}
#menu2 li a:hover {background:#efeded; color:#333333;}
.sectionbg {position:relative; background:#efeded; width:550px; min-height:360px; margin:0px auto; padding:0px 300px 10px 30px; page-break-inside:avoid;}
.gap {width:100%; height:42px;}
.phone {font-size:26pt;}
.email {font-size:20pt;}
.nowrap {white-space:nowrap;}
.left {float:left; width:47%;}
.right {float:right; width:47%;}
.clear {clear:both;}
.licensees1 {margin-bottom:8px;}
.licensees2 {margin:0px 0px 19px 0px;}
.licensees2 img {width:100px; height:100px; margin:10px 8px 0px 0px;}
#licenseesdiv {display:none; width:100%;}
#lbox {display:none; position:fixed; background:rgba(0,0,0,0.7); top:0px; left:0px; width:100%; height:100%; padding:30px; z-index:2;}
#lbox2 img {position:relative; width:auto; max-width:calc(100% - 74px); height:auto; max-height:calc(100vh - 74px); border:7px solid #036CB6; border-radius:25px;}
#lbox1 {position:absolute; top:18px; left:16px; z-index:3;}
#lbox1 a {color:white; background:#036CB6; border-radius:25px; padding:3px 9px; font:bold 20pt 'Arimo',arial; text-decoration:none;}
#lbox1 a:hover {background:#004e87;}

@media only screen and (max-width:940px) {
body {font-size:13pt;}
.toplogo {width:260px;}
.sectionbg {width:390px; padding-right:250px;}
.rightimg {left:460px; width:208px; height:144px;}
.opprotate {top:150px;}
.gap {height:33px;}
}

@media only screen and (max-width:740px) {
body {font-size:12pt;}
.sectionbg {width:calc(100% - 40px); box-sizing:border-box; margin:0px 20px; padding:0px 20px 10px 20px;}
.rightimg {position:static; -ms-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); transform:rotate(-5deg); border-width:4px; margin-bottom:5px;}
.opprotate {margin-left:-9px; -ms-transform:rotate(5deg); -webkit-transform:rotate(5deg); transform:rotate(5deg);}
.toplogo {width:220px;}
a.toplink {padding:3px 8px;}
.gap {height:25px;}
.header {margin-left:-30px; width:215px; font-size:16pt;}
a.phone:hover {text-decoration:underline; cursor:pointer;}
#lbox {padding:15px;}
#lbox2 img {max-width:calc(100% - 40px); max-height:calc(100vh - 40px); border:5px solid #036CB6;}
#lbox1 {top:13px; left:10px;}
}

@media only screen and (max-width:630px) {
.topdiv {font-size:10pt;}
.toplogo {width:170px; bottom:15px; left:15px;}
}

@media only screen and (max-width:560px) {
.topdiv {display:none;}
#topmenu {display:inline-block;}
.toplogo {width:140px;}
#menu2 {visibility:visible;}
.sectionbg {padding:0px 10px 1px 10px;}
.rightimg {width:130px; height:90px; border-width:3px;}
.header {margin-left:-15px; width:185px; font-size:14pt;}
.email {font-size:15pt;}
.licensees2 img {width:80px; height:80px;}
}

@media only screen and (max-width:350px) {
.toplogo {width:120px;}
.opprotate {margin:-9px 0px 0px 0px;}
.phone {font-size:22pt;}
.email {font-size:14pt; word-wrap:break-word;}
.left, .right {float:none; width:auto;}
.nowrap {white-space:normal;}
}

@media print{
.topdiv {display:none;}
#slides {display:none;}
.slideshow {height:200px;}
.toplogo img {width:250px; bottom:0px; left:0px;}
.header {color:black;}
.rightimg {top:10px; left:auto; right:10px;}
.opprotate {top:190px;}
}