@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap');
/* use for fonts -
font-family: 'Rubik', sans-serif;
*/
html {height: 100%;width: 100%;font-size: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
body{margin:0;padding:0;color:#444;font-family: 'Rubik', sans-serif;}
/* FONTS ETC */
h1 {font-size:60px;line-height:100px;font-weight:400;text-transform:uppercase;color:#265b8e;border-bottom:8px solid #265b8e;}
h2 {font-size:42px;line-height:65px;font-weight:400;}
h3 {font-size:32px;line-height:42px;font-weight:400;}
h4 {font-size:28px;line-height:40px;font-weight:400;text-transform:uppercase;}
p {color:#444;font-size:22px;line-height:34px;font-weight:400;}
.sm {font-size:16px;line-height:26px;}
a {color:#265b8e;text-decoration:underline;}
a:hover {color:#444;text-decoration:none;}
.clear {clear:both;}
.center {text-align:center;}
.fright {float:right;padding-left:30px;}
.fleft {float:left;padding-right:30px;}


/*BUTTON*/
.btn {margin: 45px 0 35px 0;overflow: hidden;text-align: center;}
.btn a {width: 350px;height: 22px;border: 2px solid #fff !important;color:#fff;display: inline-block;padding: 15px 30px;font-size: 16px;text-transform: uppercase;text-decoration: none !important;line-height: 22px;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
.btn a:hover {background: rgba(232,200,255,0.4) !important;color:#fff;border:2px solid #fff !important; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
  
/* HEADER */
#header {width:90%;padding:1% 5%;background:#fff;}
.topbar {width:100%;}
.art {width:100%;padding-top:2%;margin:0 auto;text-align:center;}
.art img {width:100%;height:auto;}
#container {width:90%;padding:2% 5%;margin:0 auto;}
.main {width:90%;padding:2% 5%;}
.box {width:50%;float:left;}
.box2 {width:48%;padding: 0 0 0 2%;float:left;}
.box2 img {max-width:730px;height:auto;}
/* SLIDER */
.slider {
 position:relative;
  height:500px;
  overflow:hidden;
}

.slider li {
  display:none;
  position:absolute;
  top:0;
  left:0;  
}
.slider img {width:100%;height:auto;/*border:15px solid #000;*/}

/* FOOTER */
#footer {width:90%;padding:3% 5% 1% 5%;text-align:center;background-color:#444;}
#footer a {color:#fff;text-decoration:none;}
#footer a:hover {color:#e8c8ff;}
.copyright {font-size:15px;color:#fff;}
/* EXTRAS */
.google-maps {position: relative;padding-bottom:25%; height: 0;overflow: hidden;}
.google-maps iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}
.videoWrapper {text-align:center;margin:0 auto;padding-bottom:30px;}
/*.videoWrapper {position: relative;padding-bottom: 56.25%; padding-top: 25px;height: 0;}*/
.videoWrapper object, .videoWrapper embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* REGULR RESPONSIVE STUFF */
@media only screen and (max-width: 1080px) {
.btn {margin: 45px 0 35px 0;overflow: hidden;text-align: center;}
.btn a {width: 280px;font-size: 16px;line-height: 22px;}	
}
@media only screen and (max-width: 898px) {
h1 {font-size: 36px;line-height:40px;}
h2 {font-size:26px;line-height:36x;}
h3 {font-size:24px;line-height:34px;}
h4 {font-size:23px;line-height:29px;}
p {font-size:18px;line-height:28px;}
.box {width:100%;float:none}
.box2 {width:100%;float:none}
.box2 img {max-width:90%;height:auto;}
}
@media only screen and (max-width: 460px) {
.btn a {width: 250px !important;height: 42px!important;}
.videoWrapper img {width:100%; height:auto;}
}
/* NAV
nav {width: 94%;padding:1% 3%;height: 70px;z-index: 1;}
nav #brand {float: left;display: block;padding-left:3%;}
nav #menu {float: right;padding-right:3%;}
nav #menu li {display: inline-block;font-family: 'Raleway', sans-serif;font-size:1rem;padding: 0px 20px;line-height: 40px;position: relative;transition: all 0.3s ease-out;}
nav #menu li a {color: #fff;text-decoration:none;}
nav #menu li:hover a {border-bottom:3px solid #FFF;}
#toggle {position: absolute;right: 20px;top: 14px;z-index: 999;width: 40px;height: 40px;float: right;transition: all 0.3s ease-out;visibility: hidden;opacity: 0;}
#toggle .span {height: 7px;background: #fff;margin: 5px auto;backface-visibility: hidden;}
#toggle.on #one {transform: rotate(45deg) translateX(6px) translateY(6px);}
#toggle.on #two {opacity: 0;}
#toggle.on #three {transform: rotate(-45deg) translateX(10px) translateY(-12px);}
#resize {z-index: 1;position: absolute;top: 0px;background: #000;width: 100%;height: 100%;visibility: hidden;opacity: 0;transition: all 0.3s ease-out;display: table;}
#resize #menu {height: 50px;display: table-cell;vertical-align: middle;}
#resize #menu li {display: block;text-align: center;padding: 0;text-align: center;font-size: 30px;min-height: 50px;font-weight: bold;;transition: all 0.3s ease-out;
}
#resize #menu li:hover {color: #588198;}
#resize #menu li:hover a {color: #588198;transition: all 0.3s ease-out;}
#resize #menu li a {color: #fff;text-decoration:none;}
#resize.active {visibility: visible;opacity: 0.99;}

@media (max-width: 1200px) {
nav #menu li {font-size:.875rem;  padding: 0px 12px;}
nav #brand {padding-left:1%;}
nav #menu {padding-right:1%;}
  }

@media (max-width: 1024px) {
#toggle {visibility: visible;opacity: 1;}  
nav #menu {display: none;}
nav #brand img {max-width:180px;height:auto;}
}
@media (min-width: 1024px) {
#resize {visibility: hidden !important;}
} */