/*
Theme Name: Ring of Fire
Theme URI: http://www.rof.co.nz
Description: A bespoke WordPress theme based on the Twitter Bootstrap framework for rof.co.nz, designed and built in May 2017.
Version: 1.0
Author: Hodgeman Web & Design
Author URI: http://www.hodgeman.co.nz
*/

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

/*============================================================================================*/
/* 1.  COMMON */
/*============================================================================================*/
/*Preloader*/
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	bottom:0;
	background-color:#fff; 
	z-index:999999; 
}
[data-loader="circle-side"]
{
    position: absolute;
    width: 50px;
    height: 50px;
    top:50%;
    left:50%;
    margin-left:-25px;
    margin-top:-25px;
    -webkit-animation: circle infinite .95s linear;
    -moz-animation: circle infinite .95s linear;
    -o-animation: circle infinite .95s linear;
    animation: circle infinite .95s linear;
    border: 3px solid #B12216;
    border-top-color: rgba(0, 0, 0, .2);
    border-right-color: rgba(0, 0, 0, .2);
    border-bottom-color: rgba(0, 0, 0, .2);
    border-radius: 100%;
}
@-webkit-keyframes circle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-moz-keyframes circle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-o-keyframes circle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@keyframes circle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}







body {
	background:#FFF;
	color:#555;
	font-family:Tahoma, Geneva, sans-serif;
}

.btn,
.nav{font-family: 'Poppins', sans-serif;}

h1,a,.red{color:#B12216}
a:hover,
a:focus{color:#58595B;outline:none}
h1,h2,h3,.btn.btn-lg{font-family: 'Montserrat', sans-serif;text-transform: uppercase}

h2 span{font-size:0.65em;color:#555}

.btn.btn-lg{font-size:1.4em}

#header{background:#FFF;position:fixed;width:100%;z-index:100;top:0;left:0}
#header h2{font-size:1.8em}
#header h3{font-size:1.4em}
.admin-bar #header{top:32px}
#logo>img{margin:15px 0}

#mainnav{margin-top:15px}
#content{margin-top:90px;font-size:1.4em}

h1{margin-bottom:30px}
h1,h2,h3{font-weight:normal;text-rendering:auto}
h2{color:dark#B12216}

a.btn-primary,.btn-primary>a{color:#FFF}
.btn-primary{background-color:#B12216;border-color:#B12216;color:#FFF}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active, 
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
color: #FFF;
background-color:#D8291A;
border-color: #D8291A;
}
.btn-book{background-color:dark#B12216;border-color:dark#B12216;border-radius:0}
.btn-book a{color:#000}

.nav>li>a {padding:8px 10px}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {background-color:#B12216;color:#FFF}
.nav-pills>li>a:hover,
.navbar-nav>li.current-menu-item>a,
.navbar-nav>li.current-page-ancestor>a,
.navbar-nav>li>a:hover, 
.navbar-nav>li.current-menu-item>a:hover, 
.navbar-nav>li.current-page-ancestor>a:hover {background-color: transparent}

img.pull-left{margin:0 20px 20px 0}
img.pull-right{margin:0 0 20px 20px}

.icons img.pull-left{margin:0 3px 3px 0}
.icons img.pull-right{margin:0 0 3px 3px}

.alert-info {
	color: #904f33;
	background-color: #dacebf;
	border-color: #BEA98E;
}

#toTop{position:fixed;bottom:20px;right:20px;display: none;}

#footer{background-color:#B12216;color:#FFF;font-size:11px;padding:30px 0}
#footer a{color:#FFF}
#footer h3.widgettitle{margin-top:0}
#footer .textwidget{margin-bottom: 30px}

#footer .btn-primary{background-color:#58595B;border-color:#58595B;color:#FFF}
#footer .btn-primary:hover,
#footer .btn-primary:focus,
#footer .btn-primary:active, 
#footer .btn-primary.active{
color: #000;
background-color:#D8291A;
border-color: #D8291A;
}


#roomgallery{margin-bottom:15px}
#roomgallery #feature{margin-bottom:15px}
img.featimg:hover{opacity:0.5}

.marginT20{margin-top:20px}

.modal-content,
.thumbnail{
	background-color:#f2f2f2;
	border:none;
	border-radius:0;
	padding:10px}
.thumbnail .caption{color:#333}

.modal-header,
.modal-footer{border-color:#666}



/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}


#breadcrumbs{margin-top:10px}
#sidebar, .tab-content{padding-top:15px}	
	
#carousel-thumbnails .carousel-thumbnail {padding:0 5px;margin-bottom:10px;}
#carousel-thumbnails .carousel-thumbnail img {opacity:0.5;}
#carousel-thumbnails .carousel-thumbnail.active img,
#carousel-thumbnails .carousel-thumbnail img:hover {opacity:1;}
#carousel-thumbnails {margin:10px -5px 30px}

.make-responsive {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}

.make-responsive.widescreen { padding-bottom: 57.25%; }
.make-responsive.vimeo { padding-top: 0; }

.make-responsive iframe,
.make-responsive object,
.make-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .make-responsive { padding-top: 0; }
}

.vc_row-has-fill h2{color:#FFF}



.navbar-toggle {
  display: inline-block;
  padding: 12px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border: none;
  cursor: pointer;
  user-select: none;
  background-color:#B12216;
}
.navbar-toggle .lines {
  display: inline-block;
  width: 21px;
  height: 3px;
  background: #FFF;
  transition: 0.5s;
  position: relative;
  vertical-align: middle;
}
.navbar-toggle .lines:before,
.navbar-toggle .lines:after {
  display: inline-block;
  width: 21px;
  height: 3px;
  background: #FFF;
  transition: 0.5s;
  position: absolute;
  left: 0;
  content: '';
}
.navbar-toggle .lines:before{
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  -moz-transform: rotate3d(0, 0, 1, 45deg);
  -ms-transform: rotate3d(0, 0, 1, 45deg);
  -o-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
}
.navbar-toggle .lines:after{
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  -moz-transform: rotate3d(0, 0, 1, -45deg);
  -ms-transform: rotate3d(0, 0, 1, -45deg);
  -o-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);	
}
.navbar-toggle.collapsed .lines:before {
  top: 6px;
}
.navbar-toggle.collapsed .lines:after {
  top: -6px;
}
.navbar-toggle.collapsed:hover {
  opacity: 1;
}
.navbar-toggle.collapsed:hover .lines:before {
  top: 7px;
}
.navbar-toggle.collapsed:hover .lines:after {
  top: -7px;
}
.navbar-toggle:active {
  -webkit-transition-duration: 0;
  -moz-transition-duration: 0;
  transition-duration: 0;
  background: rgba(0, 0, 0, 0.1);
}
.navbar-toggle .lines {
  background: transparent;
}
.navbar-toggle .lines:before, .navbar-toggle .lines:after {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  top: 0;
  width: 21px;
}
.navbar-toggle.collapsed .lines {
  background: #FFF;
}
.navbar-toggle.collapsed .lines:before{
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  -moz-transform: rotate3d(0, 0, 1, 0deg);
  -ms-transform: rotate3d(0, 0, 1, 0deg);
  -o-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
}
.navbar-toggle.collapsed .lines:after{
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  -moz-transform: rotate3d(0, 0, 1, 0deg);
  -ms-transform: rotate3d(0, 0, 1, 0deg);
  -o-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);	
}


.mT20{margin-top:20px}

#btn-play{font-size:100px;position:absolute;text-shadow:3px 3px 0 RGBA(0,0,0,0.3);top:50%;left:50%;margin-left:-50px;margin-top:-20px;}
.hwd_imagewidget-image-link:hover>#btn-play{color:#FFF}


.list-group-item{background-color:transparent;border-color:#555}
a.list-group-item{color:#FFF}
a.list-group-item:focus,
a.list-group-item:hover{background-color:#B12216;color:#000}


.testimonial{margin-bottom:30px}
.testimonial .box{background-color:#f2f2f2;padding:15px;font-size:0.9em;font-style:oblique}
.testimonial .arrow{margin:0 0 0 20px;
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;	
	border-top: 10px solid #f2f2f2;}
.testimonial .author{margin:0 0 0 15px;font-weight:bold;margin-bottom:0}
.testimonial .role{margin:0 0 0 15px;font-size:0.8em;color:#DDD}


.parallax-window {
    min-height: 300px;
    background: transparent;
}
#content .container {min-height:300px;padding-bottom:30px}

#mc_embed_signup .button{background-color:#B12216 !important;font-family: 'Poppins', sans-serif;}



.offset:before { 
	display: block; 
 	content: " "; 
  	height: 230px;      /* Give height of your fixed element */
	margin-top: -230px; /* Give negative margin of your fixed element */  	
	visibility: hidden; 
}


/* WIDGETS
-------------------------------------------------- */
.widget{margin-bottom:20px}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 782px){
	.admin-bar #header{top:46px}
}

@media (min-width: 768px) {
    .parallax-window {min-height:400px}
    #content .container {min-height:400px}
	
	#toc.affix{top:180px}
}

@media (min-width: 992px) {
    .parallax-window {min-height:500px}
    #content .container {min-height:500px}
	
	#toc.affix{top:250px;width:213px;}
	.offset:before { 
		height: 200px; 
		margin-top: -200px; 
	}
}

@media (min-width: 1200px){
    .parallax-window {min-height:600px}
    #content .container {min-height:600px}
	
	#toc.affix{top:220px;width:263px}
	.offset:before { 
		height: 230px; 
		margin-top: -230px; 
	}
}