@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/open-sans-v40-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/roboto-v51-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto-v51-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/roboto-v51-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/roboto-v51-latin-700.woff2') format('woff2');
}
body {font-family: 'Roboto', Arial, sans-serif;margin:0px;padding:0px;background:#000;color:#fff;font-size:15px;font-weight:300;margin:0 auto;letter-spacing:.1em}
.WrapWrapper {}
.Wrapper {max-width:1250px;margin:30px auto 0px auto;position:relative}
a {color:#fff;text-decoration:none}
a:visited {inherit}
h2 {font-size:16px}
.center {text-align:center}
.logo {position:absolute;top:20px;width:125px;height:60px;left:40px}
.modoc {font-family:'Open Sans', 'Roboto', Arial;position:absolute;font-size:38px;font-weight:400;z-index:5;;margin:0 auto;left:0;right:0;letter-spacing:-7px;color:#ff6500}
.records {position:absolute;font-size:10px;letter-spacing:11px;font-weight:300;z-index:2;top:44px;left:3px;padding:1px;border-top:1px solid #444;border-bottom:1px solid #444;width:111px}
#dropdown {position:absolute;top:35px;right:40px;width:35px;height:26px;z-index:11;font-size:10px;line-height:14px;text-align:center}
#line1 {background-color:#f0f0f0;height:2px;margin-top:6px;border-radius:2px}
#line2 {background-color:#f0f0f0;height:2px;margin-top:9px;border-radius:2px}
#line3 {background-color:#f0f0f0;height:2px;margin-top:9px;border-radius:2px}
.links {display:block;margin:0 auto;width:100%;text-align:center;padding-top:40px;font-size:13px}
.linksul {list-style-type:none;padding:0px;margin:0px}
.linksul li {display:inline-block}
.linksul li a {display:block;width:100px;height:50px;border-bottom:4px solid #000}
.linksul li a:hover {border-bottom:4px solid #fff;cursor:pointer}

.panel {position:fixed;top:0;left:0;bottom:0;right:0;margin:auto;max-width:100%;max-height:100%;z-index:-10;visibility:hidden;opacity:0;transform:scale(1.35);transition:transform .3s cubic-bezier(0.215,0.610,0.355,1.000) 0s,opacity .25s ease-in-out 0s,visibility .3s ease-in-out 0s}
.toggled {visibility:visible;opacity:1;z-index:10;transform:scale(1);transition:transform .3s ease-in-out 0s,opacity .3s ease-in-out 0s,visibility .3s ease-in-out 0s}
.panel > ul{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;height:500px;width:460px;z-index:10002}
.panel > ul > li{display:block;position:absolute;width:160px;border:1px solid rgba(220,220,220,0.1);border:1px solid #fff\9;transition:transform .3s ease-in-out 0s,background .3s ease-in-out 0s}
.panel > ul > li:hover{border:1px solid rgba(220,220,220,0);background:rgba(70,37,95,0.5)}
.panel > ul > li:before{content:"";display:block;padding-top:100%}
.panel > ul > li > a,.panel > ul > li > .multi_a{position:absolute;top:0;left:0;display:block;width:100%;height:100%;overflow:hidden}
.panel .front{position:absolute;top:0;width:100%;height:100%;transition:transform .55s cubic-bezier(0.190,1.000,0.220,1.000) 0s,opacity .45s ease-in-out 0s}
.panel > ul > li:hover .front{opacity:0;transform:translate3d(0,-100%,0)}
.panel .back{position:absolute;top:0;width:100%;height:100%;opacity:0;transform:translate3d(0,100%,0);transition:transform .55s cubic-bezier(0.190,1.000,0.220,1.000) 0s,opacity .45s ease-in-out 0s}
.panel > ul > li:hover .back{opacity:1;transform:translate3d(0,0,0)}
.panel .back .wrap{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width:120px;height:55px;text-align:center}
.panel .back .wrap h3{margin-bottom:14px;color:#FFF;font-size:16px;font-weight:normal;line-height:16px;letter-spacing:2px;text-transform:uppercase}
.panel .back .wrap p.panelbtn{margin:0 auto;width:80px;height:25px;line-height:25px;color:#FFF;background:#715699;letter-spacing:1px;text-transform:uppercase}
.panel .back .wrap p.social{margin:0 auto;width:80px;height:25px;line-height:25px;color:#FFF;box-sizing:border-box;border:1px solid #fff;letter-spacing:1px;text-transform:uppercase}
.panel .back .wrap .social a{display:inline-block;height:25px;line-height:25px;text-align:center;color:#fff;font-size:12px}
.panel .back .wrap .social a img{vertical-align:middle}
.panel ul li.panel-1{top:0;left:0;transform:translate3d(-25%,-25%,0)}
.panel ul li.panel-2{top:0;left:50%;margin-left:-80px;transform:translate3d(0,-25%,0)}
.panel ul li.panel-3{top:0;right:0;transform:translate3d(25%,-25%,0)}
.panel ul li.panel-4{top:50%;left:0;margin-top:-80px;transform:translate3d(-25%,0,0)}
.panel ul li.panel-5{top:50%;left:50%;margin:-80px 0 0 -80px}
.panel ul li.panel-6{top:50%;right:0;margin-top:-80px;transform:translate3d(25%,0,0)}
.panel ul li.panel-7{bottom:0;left:0;transform:translate3d(-25%,25%,0)}
.panel ul li.panel-8{bottom:0;left:50%;margin-left:-80px;transform:translate3d(0,25%,0)}
.panel ul li.panel-9{bottom:0;right:0;transform:translate3d(25%,25%,0)}
.panel > ul > li{transform:translate3d(0,0,0)}
.panel > ul > li svg{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width:34px;height:34px;fill:none;transition:all .3s ease-in-out 0s}
.panel > ul > li svg path{margin:0 auto;fill:#FFF;stroke:#FFF;stroke-width:2px;stroke-linecap:square;stroke-dashoffset:3000;stroke-dasharray:3000;transition:stroke-dashoffset .3s ease-in-out 0s}
.panel > ul > li svg path{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s ease-in-out .3s}
.mask{position:fixed;top:0;left:0;bottom:0;right:0;margin:auto;width:100%;height:100%;background:#111;z-index:1001;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out 0s,visibility .3s ease-in-out 0s}
.panel .mask{visibility:visible;opacity:0.85;filter:alpha(opacity=85)}

.mainimg {width:100%;top:clamp(0rem, 30vw, 220px)}
.mainimg img {width:100%}
.title {position:absolute;right:0;left:0;margin:0 auto;top:clamp(0rem, 30vw, 20px);text-align:center;opacity:.4}
.titleletters {font-size: clamp(2rem, 10vw, 150px);font-weight:300;height: clamp(2rem, 23vw, 260px)}
.background {background-image:url('/images/room.jpg');background-size:100%;background-repeat:no-repeat;position:absolute;z-index:-1;height:1200px;width:100%;top:1000px;opacity:.2}
.boxes {width:35%;padding:5%;text-align:left;color:#f0f0f0}
.boxleft {float:left}
.boxright {float:right}
.boxmargin {margin-top:80px}
.boxh2 {padding:10px;border-bottom:1px solid #fff;margin:20px}
.dia {background:repeating-linear-gradient(90deg,#F0F0ED,#f0f0f0 1px,transparent 0px,transparent 7px);height:40px;width:80%;margin-bottom:30px}
.more {padding:15px 0px;margin-top:40px;width:100%;border:1px solid #fff;display:block;text-align:center;font-size:14px;font-weight:400;letter-spacing:.2em}
.pic img {width:100%}

@media (max-width: 767px) {
#Wrapper {overflow:hidden}
#dropdown {display:block}
.links {display:none}
.linksul {min-width:320px;width:100%}
.linksul li {width:32%;border:1px solid #f0f0f0}
#dropdown {top:20px;right:20px;width:30px;height:26px}
#line1 {margin-top:6px}
#line2 {margin-top:7px}
#line3 {margin-top:7px}

.logo {top:15px;width:74px;left:15px}
.modoc {font-size:26px;letter-spacing:-5px;font-weight:600}
.records {font-size:8px;letter-spacing:7px;top:31px;width:78px;padding-left:1px;left:2px;line-height:1.4;color:#c0c0c0}

.panel ul{min-height:300px;max-width:260px;max-height:300px;z-index:1002}
.panel ul li{width:96px}
.panel > ul > li:hover .front{opacity:1;transform:translate3d(0,0,0)}
.panel > ul > li:hover .back{opacity:1;transform:translate3d(0,100%,0)}
.panel > ul > li:hover .back h3{color:#FFF;transition:color .3s ease-in-out 0s}
.panel ul li.panel-2{margin-left:-48px}
.panel ul li.panel-4{margin-top:-48px}
.panel ul li.panel-5{margin-top:-48px;margin-left:-48px}
.panel ul li.panel-6{margin-top:-48px}
.panel ul li.panel-8{margin-left:-48px}
.panel ul li svg{width:24px;height:24px}
.panel ul li svg path{stroke-width:3px}
.panel .front{margin-top:-10%}
.panel .back{margin-top:-65%;opacity:1}
.panel .back .wrap{width:100%;height:40px}
.panel .back .wrap h3{color:rgba(220,220,220,.5);font-size:11px;line-height:12px;margin-bottom:7px;letter-spacing:0.5px}
.panel .back .wrap p{width:60px;height:20px;font-size:11px;line-height:20px;letter-spacing:0.5px}
.panel .back .wrap p.panelbtn{display:none}
.panel .back .wrap p.social{margin-top:-5px;border:0 none}
.panel .back .wrap p.social a{width:20px}
.panel .multi_a .back .wrap h3{display:none}

.title {top:clamp(5rem, 8vw, 125px)}
.mainimg {width:140%;margin-left:-20%}
.boxes {width:80%;padding:10%;margin-top:30px}
.boxleft {float:none}
.boxright {float:none}
}