@charset "utf-8";
/* CSS Document */
html{font-size:60%}
body{color:#fff;font-size:1.312rem;line-height:1.6rem;font-family:azo-sans-web, sans-serif;font-weight:400}
.cg-bg{background:url("../img/0223/home-bg-02.png") top center no-repeat #007d61;background-size:125rem 467.312rem}
section{position:relative;overflow:hidden;outline:none}
.next{position:absolute;bottom:1rem;width:100%;display:none}
.next a{display:inline-block}
.next a img{width:4.3rem}
.icon{max-height:22rem;margin-bottom:10px}
ul{margin:1rem;padding:0}
/* Loader */
/* Center the loader */
#loader{position:absolute;left:50%;top:50%;z-index:1;width:150px;height:150px;margin:-75px 0 0 -75px;border:16px solid #f3f3f3;border-radius:50%;border-top: 16px solid #3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
@-webkit-keyframes spin {
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@keyframes spin {
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
/* Add animation to "page content" */
.animate-bottom{position:relative;-webkit-animation-name:animatebottom;-webkit-animation-duration:1s;animation-name:animatebottom;animation-duration:1s}
@-webkit-keyframes animatebottom{
    from{bottom:-100px;opacity:0}
    to {bottom:0px;opacity:1}
}
@keyframes animatebottom {
    from{bottom:-100px;opacity:0}
    to{bottom:0;opacity:1}
}
/* Text */
h1{font-size:3rem;color:#fc0;font-family:azo-sans-web, sans-serif;font-weight:700}
h2{font-size:2.25rem;color:#fc0;font-family:azo-sans-web,sans-serif;font-weight:700}
h3{font-family:azo-sans-web, sans-serif;font-weight:700;font-size:1.75rem;color:#007cba}
.notice{text-align:left;font-style:italic;background:url("../img/notice.svg") no-repeat left top;background-size:3.375rem;padding-left:4rem;min-height:56px}
small{font-size:65%}
.slick-prev:before, .slick-next:before{font-size:48px}
/* Colours */
.blue{color:#007cba}
.yellow{color:#fc0}
/* Header */
.logo,.logo-no-strap{width:9.125rem;transition:.5s}
.logo,.logo-no-strap,.mobile-nav-link,.nav-down{transition:.5s}
header{position:fixed;width:100%;top:0;left:0;right:0;z-index:10000}
.logo-no-strap{display:none}
.mobile-nav-close,.mobile-nav-link{width:4.125rem;height:4.125rem;line-height:4.125rem;font-size:2rem}
.nav-down{opacity:1}
.nav-up{background-color:#fff;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.75);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,.75);box-shadow:0 0 5px 0 rgba(0,0,0,.75);color:#007cba}
.mobile-nav-close,.mobile-nav-link,.nav-up .mobile-nav-link{color:#007cba;background-color:#fc0;border-radius:50%;text-align:center}
.nav-up .logo{width:7.125rem;display:none}
.nav-up .logo-no-strap{width:9.125rem;display:block}
.nav-up .mobile-nav-link{width:3.125rem;height:3.125rem;line-height:3.125rem;font-size:1.5rem}
.mobile-nav-close:hover,.mobile-nav-link:hover{color:#fff}
.nav-outer,nav{position:fixed;top:0;width:100%}
.nav-outer{left:0;right:0;z-index:1000;transition:.6s}
.open-menu{height:50px;display:table;font-size:2rem;float:right;margin-left:45px}
.open-menu span{vertical-align:middle;display:table-cell}
.open-menu .fa-bars{font-size:40px;color:#c92a78}
.header-icons a{height:22px;display:inline-block}
body.menu-open{left:-320px;overflow-x:hidden;transition:.3s}
nav{display:block;bottom:0;right:-100%;z-index:2000;transition:.3s;overflow-y:scroll;background:#fff}
nav.active{right:0;-webkit-box-shadow:-5px 0 17px -4px rgba(0,0,0,.75);-moz-box-shadow:-5px 0 17px -4px rgba(0,0,0,.75);box-shadow:-5px 0 17px -4px rgba(0,0,0,.75)}
body.menu-open{left:-240px;overflow-x:hidden;transition:all .3s ease}
.nav-title{background-color:#fff;color:#232856;width:100%;display:flex;justify-content:center; /* align horizontal */align-items:center; /* align vertical */}
.nav-title p{font-size:24px;margin:0}
nav#primary-nav ul{display:block;width:100%;list-style:none;margin:0;padding:0;font-size:2rem}
nav#primary-nav ul li{border-bottom:0;margin:0;width:100%;display:block;text-align:center}
nav#primary-nav ul li a{display:block;padding:8px 15px;text-align:center;text-decoration:none;font-size:2rem;background:#fff;color:#007cba}
nav#primary-nav ul li a:hover{text-decoration:underline}
nav#primary-nav>div>ul>li>a{color:#fff}
nav#primary-nav .menu li.current-menu-item a{color:#c71767;display:inline-block;position:relative}
nav#primary-nav .menu li.current-menu-item a:after{content:'';position:absolute;bottom:0;left:0;height:4px;width:100%;border-radius:6px;background-color:#fab936}
nav#primary-nav ul li.menu-item-has-children{border-bottom:0;position:relative}
.current_page_item a{font-weight:600}
.sub-menu{border-bottom:2px solid #fff;display:block}
nav#primary-nav ul.sub-menu li:last-child{border-bottom:0}
nav#primary-nav ul.sub-menu li a{background-color:#ebebeb;color:#000;font-weight:300}
nav#primary-nav ul li span{display:none}
nav#primary-nav ul li.menu-item-has-children>span{font-family:FontAwesome;display:block;position:absolute;right:0;top:0;height:46px;width:46px;line-height:46px;font-size:26px;text-align:center;background-color:#e83644;color:#000;z-index:100}
/* Section 1 */
#section-1{height:51.25rem;padding-top:10rem}
.mhome{position:absolute;left:43%;top:18rem;width:30.68rem}
.mhome object{height:auto;width:30.68rem}
.hills{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
.info,.thief,.thiefhand{position:absolute}
.info,.info:focus{outline:0;border:0}
.hills img{width:126rem;height:auto}
.thief{left:48%;top:2rem}
.thief object{width:39.43rem;height:auto}
.thiefhand{top:19rem;left:45%}
.thiefhand img{width:15.8rem}
.info{top:1rem;left:0;z-index:10;background:0 0}
.info img{width:2.8rem}
.info.right{left:auto;right:0}
.info.bottom{top:auto;bottom:3rem}
.info.bottom-2{top:auto;bottom:11rem}
/* Section 2 */
#section-2{height:43.75rem}
/* Section 3 */
#section-3{height:43.75rem}
/* Section 4 */
#section-4{height:43.75rem}
.stumped{position:absolute;top:15.31rem;left:-116px;width:37.5rem}
/* Section 5 */
#section-5{height:43.75rem}
.head-scratch-2{position:absolute;bottom:4rem;left:38%;width:8.3rem}
.post{width:5.271rem;position:absolute;bottom:2rem;left:57.5%}
/* Section 6 */
#section-6{height:43.75rem}
.hug{position:absolute;left:73%;top:21.25rem;width:8.125rem}
#section-6 .mhome{position:absolute;left:0;top:20.687rem;width:37.5rem}
/* Section 7 */
#section-7{height:43.75rem}
/* Section 8 */
#section-8{height:43.75rem}
/* Section 9 */
#section-9{height:43.75rem}
/* Section 10 */
#section-10{height:60rem}
.mhome-section10{width:18rem}
/* Slides */
.slides{position:relative;outline:0}
.slide{text-align:center;outline:0}
.slide img{display:inline-block}
.row.slick-slider{margin-right:-9px;margin-left:-9px}
/* Modal */
.modal{color:#666}
.modal .close{color:#007cba;font-size:1.8rem;opacity:1;position:absolute;float:none;left:.5rem;top:0}
.modal-content{border:4px solid #fc0;border-radius:1rem}
.modal-body{padding:.5rem .75rem .5rem 2rem;font-size:1.4rem}
.modal-backdrop.show{opacity:0}
/* Popover */
.popover{border:4px solid #fc0;border-radius:1rem;margin-top:3rem;font-size:1.4rem}
.popover .arrow{display:none}
.close-pop{position:absolute;top:.5rem;left:.7rem;cursor:pointer;color:#007cba}
.popover-body{padding:.5rem .75rem .5rem 2rem}
/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
/* Small devices (landscape phones, 576px and up) */
@media(min-width:576px){}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media(min-width:768px){
    html{font-size:100%}
    .mhome-section10{width:21rem}
    .stumped{left:0}
    #section-6 .mhome{left:20%}
    .hug{left:84%}
    .next{display:block}
    .next a img{width:5.3rem}
    /* Modal */
    .modal-body{font-size:1rem}
  /* Popover */
    .popover{border:4px solid #fc0;border-radius:1rem;margin-top:6rem;font-size:1rem;max-width:400px}
}
/* Large devices (desktops, 992px and up) */
@media (min-width:992px){
    small{font-size:80%}
    .mhome-section10{width:30.625rem}
    .hug{left:69%}
    .icon{max-height:10.25rem}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width:1200px){
    .stumped{left:12%}
    .hug{left:63%}
    .post{width:5.271rem;position:absolute;bottom:2rem;left:52.5%}
    .icon{max-height:13.25rem}
}
@media (min-width:1580px){
    .stumped{left:24%}
}
/* Reponsive for smaller devices*/
@media only screen and (max-width:767px) {

p{font-size:1.25em;line-height:1.25em}
small{font-size:75%;line-height:0.8rem}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {z-index:2}
.slick-prev:before, .slick-next:before{font-size:30px}
.slick-prev{left:0}
.slick-next{right:2%}
.info{left:1%;top:0}
.info.right{right:5%}

#section-2 .img-fluid{max-width:75%}
#section-3 .img-fluid{max-width:90%}
#section-8 .img-fluid{max-width:90%;height:23rem}
#section-9{height:40rem}
#section-9 .slick-prev{left:2%}
#section-9 .slick-next{right:4%}

#section-1{padding-top:8rem}
#section-1 .col-6{margin-top:3rem}
.mhome{left:48%;top:21rem;width:21rem}
.thief{left:55%;top:10rem}
.thief object{width:28rem}
#section-3{height:40rem}
#section-4{height:45.75rem}
.post{left:56%}
#section-6 .row{margin-right:0;margin-left:8%}
#section-6 .mhome{position:absolute;width:36rem;left:9rem;top:24rem}
.stumped{top:22rem;left:-3rem;width:33rem}
.hug{left:75%;top:24rem}
.head-scratch-2{bottom:3rem;left:16%;width:8rem}
.pt-5, .py-5{width:92%;margin-left:4}
#section-10{height:auto}
.mhome-section10{width:60%}
.pb-5{padding-bottom:1rem!important}

.offset-1{margin-left:2%}
.col-10{-ms-flex:0 0 95%;flex:0 0 95%;max-width:95%}
.col-10 .offset-1{margin-left:2%}
.section-pad text-center #section-2{height:48.75rem}
.section-pad text-center #section-3{height:38rem}
.section-pad text-center #section-4{height:44.5rem}
.section-pad text-center #section-9{height:auto}

}