@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400');

html,body {
    width:100%;
    height:100%;
    background-color:#000;
}

body {
    font-family:'Montserrat',sans-serif;
    opacity:0;
	transition: opacity 2s;
	-webkit-transition: opacity 2s; /* Safari */
}

body.homepage {opacity: 1;}

h1,h2,h3,h4,h5 {
    text-transform:uppercase
}

h1 {
    color:#fff;
    padding:12px 0!important;
    display:inline-block;
    font-family:'Montserrat',sans-serif;
    font-weight:100;
    font-size:24px;
}

h1.header-title {
    color:#fff;
    padding:12px 0!important;
    display:inline-block;
    font-family:'Montserrat',sans-serif;
    font-weight:100;
    font-size:52px;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff
}

h3 {
    color:#fff;
    font-family:'Montserrat',sans-serif;
    font-weight:100;
    font-size:18px;
    letter-spacing:3px;
    line-height: 24px;
}

a, #menuscenes {
    color:#a94400;
	transition: all 0.3s linear;   
	text-decoration: none !important; 
}

.ui-page-theme-a a:visited, html .ui-bar-a a:visited, html .ui-body-a a:visited, html body .ui-group-theme-a a:visited {font-weight: normal !important;}
.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a {font-weight: normal !important;}


a:hover {color: #ff6100 !important; text-decoration: none;}
a:active, #menuscenes {border: none; background-color: transparent;
	outline: none;
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;: none;
	text-decoration: none !important; }

.text-vertical-center {
    display:table-cell;
    text-align:center;
    vertical-align:middle
}

.text-vertical-center h1 {
    margin:0;
    padding:0;
    font-weight:700
}

h2 {
    padding:20px 0;
    margin:40px 0 0
}

p {
    line-height:24px;
    padding-bottom:25px
}

.top-modal {margin-top: 20%;}

#logoModal .modal-backdrop {
   background-color: red;
}

#main  {position: absolute; border: 1px solid #4f4f4f; padding: 0px; margin-top: 60px; min-height: 700px; margin-right: 40px;}
.content, .content2 {color: #a7a7a7; margin-top: 40px; margin-left: -40px; margin-right: -40px; padding: 50px 80px; border: 1px solid #4f4f4f; font-weight: normal;}

.tab-pane {padding-top: 30px;}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color: #fff;
cursor: default;
background-color: transparent;
border: 1px solid #ddd;
border-bottom-color: #162130; }

span#explore-txt.layers::before { 
    content: "Explore";
}

span#explore-txt::before { 
    content: "Hide";
}

.hide {display: none;}

.hide-menu {     
	opacity:0 !important;
	transition: opacity 2s !important;
	-webkit-transition: opacity 2s !important;}

#playerbox {     
	opacity:1;
	transition: opacity 2s;
	-webkit-transition: opacity 2s;}

.modal {z-index: 999999999;}
.modal-backdrop.in {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.modal-close {color: #fff; cursor: pointer;}

 .modal.fade .modal-dialog {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0); // IE9 only
          transform: translate(0, 0);

 }
 
 a,.modal-open .modal,.btn:focus{
    outline:none!important;
    background: transparent;
}
 
.inner-photo {float: left; border: 1px solid #ff6100; margin: 5px 20px 20px 0px;}
 
.coming h4 {color: #fff !important; line-height: 28px; padding-top: 20px;}

.social-bar {width: 360px; float: left;}
.social-menu { padding: 0px; margin: 0px; height: 25px; text-align: left; font-size: 14px; font-weight: 300; font-family:'Montserrat',sans-serif;}
.social-icons { padding: 0px 5px 0px 0px; margin: 0px 0px 10px 0px; text-align: left;}
.social-box {width: 250px; float: left; padding: 20px 0px 0px 0px;}

.social-menu a, .social-icons a, .social-icons a:visited {color: #a94400; font-weight: 400 !important;}

.social-menu a:hover {color:  #ff6100 !important;}

.logo-box {float: left; width: 59px; padding: 22px 10px 0px 0px;}
.logo-box img {width: 100%;}

.link {padding: 5px 5px;}
.menu-icon {font-size: 15px; padding: 0px 3px 0px 3px !important; color: #a94400; border: 1px solid #a94400; border-radius: 3px; margin-left: 2px; width: 25px; display: inline-block; text-align: center;}

.menu-icon:hover {border: 1px solid #ff6100; color: #ff6100  !important;}

.album-title {color: #a8a8a8; text-align: center; font-size: 14px; letter-spacing: 3px; width: 100%; display: block; margin: 0px; padding: 0px; border-bottom: 1px solid #ff6100; font-family: 'Montserrat',sans-serif; font-weight: 100;}
.album-title a {color: #fff !important; font-weight: 400 !important;}
.album-title a:hover {color: #ff6000 !important;}


.track-menu { float: left; padding: 12px 20px; opacity:1; transition: opacity 2s; -webkit-transition: opacity 2s;}
.menu-track {font-size: 13px; padding: 4px 6px !important; color: #005d6e; text-align: center; display: inline-block;}
.menu-row-2 {padding-left: 20px;}

.behind-scenes-block {clear: both; display: block; margin-bottom: 40px;}
.behind-scenes-block h4 {border-bottom: 1px solid #fff; text-transform: lowercase; padding-bottom: 5px; color: #ff6100; font-size: 14px;}
.behind-scenes-block img {border: 1px solid #ff6100; width: 100%;}
.behind-scenes-block .behind-image {margin: 0px; padding: 0px; padding-right: 10px; padding-bottom:5px; padding-top: 5px;}
.behind-scenes-block .behind-image-right {margin: 0px; padding: 0px; padding-left: 10px; padding-bottom:5px; padding-top: 5px;}
.behind-scenes-block p {color: #fff; line-height: 19px; padding: 5px 0px;}
.behind-scenes-block .col-md-6 {margin: 0px; padding: 0px;}

/* Side Menu */
#sidebar-wrapper {
    z-index:99999999;
    position:fixed;
    right:0;
    width:350px;
    height:100%;
    margin-right:-350px;
    overflow-y:auto;
    background:#000;
    -webkit-transition:all .4s ease 0;
    -moz-transition:all .4s ease 0;
    -ms-transition:all .4s ease 0;
    -o-transition:all .4s ease 0;
    transition:all .4s ease 0
}

.sidebar-nav {
    position:absolute;
    top:0;
    width:350px;
    margin:0;
    padding:0;
    list-style:none;
    text-transform:uppercase;
    letter-spacing:3px
}

.sidebar-nav li:first-child a {
    padding-right:40px;
    line-height:71px
}

.sidebar-nav li {
    text-indent:20px;
    line-height:50px;
    border-bottom:1px dotted #595959
}

.sidebar-nav li a {
    display:block;
    text-decoration:none;
}

.sidebar-nav li a:hover {
    text-decoration:none;
    color:#ff6100;
    background:rgba(255,255,255,0.2)
}

.sidebar-nav li a:active,.sidebar-nav li a:focus {
    text-decoration:none
}


#sidebar-wrapper.active {
    right:350px;
    width:350px;
    -webkit-transition:all .4s ease 0;
    -moz-transition:all .4s ease 0;
    -ms-transition:all .4s ease 0;
    -o-transition:all .4s ease 0;
    transition:all .4s ease 0
}

.toggle {
    margin:45px 45px 0 0;
    background:none;
    font-size:42px;
    line-height:42px;
    background-color:#fff;
    padding:5px 10px;
    border-radius:5px;
    opacity:.6
}

.toggle a:hover {
    color:#000;
}



/* Header */
.header {z-index: 999; width: 100%; padding: 10px 0px 0px 0px;}
.navbar {color: #a8a8a8; text-align: right; background-color: transparent; text-transform: uppercase; border-radius: 0; padding-bottom: 0px; margin-bottom: 0px; border: 0px;}
.navbar-nav {padding-top: 10px; font-family: 'Arial Narrow', Arial, sans-serif; letter-spacing: 1px; max-width: 1000px; text-align: right;}
.navbar-nav>li {text-align: right; padding: 1px 10px; margin: 0px;  display: inline-block;}
.navbar-nav>li>a {color: #a8a8a8; padding: 0px; margin: 0px; font-weight: 500; letter-spacing: 2px; text-align: right; font-size: 12px;}
.navbar-nav>li>a:hover {background-color: transparent; color: #fff;}

.navbar-nav>li {float: none;}


a.current-track {color: #ff6000;}

.navbar-nav>li>a:active, .navbar-nav>li>a:hover, .navbar-nav>li>a:focus {color: #ff6000 !important; background-color: transparent !important;}
li.selected a {color: #ff6000 !important;}


.sub-title {margin: 0px 0px 0px 1px; color: #0c76b4; display: block; clear: both; text-transform: lowercase;}
.fflogo:hover {transition: opacity 2s; -webkit-transition: opacity 2s; opacity: 0.5;}

span.explore {margin-right: 10px; color: #00e8e5;}
p.layer-title {margin: 15px 0px; padding: 0px; color: #ff6100;}
.sliders {max-width: 360px; width: 100%; padding: 0px 35px; margin-top: -10px;}
.slider {margin: 0px 0px 20px 0px;}

.ui-slider .ui-slider-handle{
    width:8px; 
    height:20px;
    background-color: #ff6100; 
    background-image: none; 
    position:absolute;
    top: -10px;
    border-style:none; 
    cursor: pointer;
    border-radius: 3px;
	transition: none;    
}

.ui-slider .ui-slider-handle:hover {background-color: #ff6100;}
.ui-widget-content:hover {border-color: #ff6100;}



/* Modal */
.modal-content {
background: #0c121e;
opacity: 0.8;
background: -moz-linear-gradient(top,  #0c121e 0%, #354b63 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0c121e), color-stop(100%,#354b63));
background: -webkit-linear-gradient(top,  #0c121e 0%,#354b63 100%);
background: -o-linear-gradient(top,  #0c121e 0%,#354b63 100%);
background: -ms-linear-gradient(top,  #0c121e 0%,#354b63 100%);
background: linear-gradient(to bottom,  #0c121e 0%,#354b63 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c5676', endColorstr='#354b63',GradientType=0 );
border-top: 1px solid #171c24;
border-bottom: 1px solid #171c24;
-webkit-box-shadow: 0 0 18px 0px #a0a3ea;
box-shadow: 0 0 18px 0px #a0a3ea;
color: #fff;
margin-top: 150px;
padding: 20px;
}

h4.modal-title {color: #ff6100;}
.modal .nav li a {color: #ff6100; font-weight: bold;}

.modal-body {font-size: 13px; line-height: 15px;}
.modal-header {border-bottom:1px solid #2a3243; }
.modal-footer {border-top:1px solid #2a3243; }

.modal .nav li a:hover {border-color: #ff6100; background-color: transparent; border-bottom-color: #fff;}

.navbar-default .navbar-toggle .icon-bar {background-color: #c7c7c7;}
button.navbar-toggle {background-color: #4a4a4a !important; border-color: #787878 !important;}

/* Footer */
footer {
    border-top:1px dotted #ccc;
    padding:50px 0;
    text-transform:uppercase;
    font-size:12px!important
}

footer .icons {
    font-size:20px!important;
    text-align:right
}


/* Contact Page */
.contact {
    padding:60px 0
}

input,textarea {
    padding:8px;
    width:100%!important;
    margin:10px 0;
    border:none;
    border-bottom:1px solid #ccc;
    border-color: #8d4013;
    display:block;
    outline:none
}

textarea {
    height:110px
}

textarea:focus,#contact-area input:focus {
    border-bottom:1px solid #900
}

input.submit-button {
    background-color:#e6e6e6;
    border:none;
    text-transform:uppercase;
    letter-spacing:2px
}

input.submit-button:hover {
    background-color:#dbdbdb;
    border:none
}

label {
    margin-right:15px;
    padding-top:5px;
    float:left
}

div.phone-note {display: none; width: 100%; height: 110px; clear: both; text-align: center;}
.main-body {height: 400px;}

@media screen and (max-width:790px) {
.about-header h1 {
    font-size:28px!important
}

h3 {
    font-size:15px!important
}

h1.header-title {
    font-size:28px!important
}
p {padding: 10px 0px;}

.about-title {z-index: 1;}
.navbar {width: 100%; clear: both; float: left; height: auto; margin: 0px; padding: 0px;}
#main  {position: relative; border: none !important; padding: 0px; margin-top: 158px; height: auto; margin-right: 0px; display: block; clear: both;}
.content, .content2 {position: relative; color: #a7a7a7; margin-top: -210px; margin-left: 0px; margin-right: 0px; padding: 20px 20px; border: none; display: block; clear: both;}


.navbar-nav>li {text-align: left; display: block; width: 100%; clear: both; float: left;}
.navbar-nav>li>a {text-align: left; display: block; width: 100%; clear: both; padding-left: 0px; margin: 1px; z-index: 99999999;}

.navbar{z-index: 99999999; padding: 0px; margin: 0px;}
.navbar-header {margin-top: -50px; z-index: 1; float: right; width: 90px;}
.social-bar {z-index: 9999999;}

.content, .content2 {margin-top: -80px;}

}

@media screen and (max-width:620px) {
.item {
    width:92%;
    height:260px
}

.item.w2 {
    width:92%;
    height:260px
}

.grid {
    margin:0 auto;
    width:100%!important
}
.isotope {width: 100% !important; margin: 0 auto;}

  .main-body {display: none;}
  .navbar-nav>li {font-size: 12px;}
}

@media screen and (max-width:580px) {
  div.phone-note {display: block; padding: 0px 20px;}
}


@media screen and (max-width:1024px) {
.icons,.copy {
    text-align:center!important
}

.blogimage img {
    width:100%;
    padding:0px;
    margin-top:25px
}

.grid {
    margin:0 auto;
    width:800px
}
.isotope {width: 600px; margin: 0 auto;}

#main  {position: relative; border: none !important; padding: 0px; margin-top: 0px; height: auto; margin-right: 0px; display: block; clear: both;}
.content, .content2 {position: relative; color: #a7a7a7; margin-top: 140px; margin-left: 0px; margin-right: 0px; padding: 20px 20px; border: none; display: block; clear: both;}

.navbar{z-index: 99999999; padding: 0px; margin: 0px;}
.navbar-header {margin-top: -50px; z-index: 1; float: right; width: 90px;}
.social-bar {z-index: 9999999; float: left !important; width: 400px;}

  .ipad-portrait .content p,   .ipad-portrait .content2 p {font-size: 18px !important; line-height: 24px !important; font-weight: normal !important;}
.navbar-nav>li>a {font-size: 14px; line-height: 18px; padding-bottom: 10px;}
.main-body {height: 250px; clear: both; padding-top: 30px;}
  .main-text-block {margin-top: -110px;}
}


@media screen and (max-width:1000px) {
.grid {
    margin:0 auto;
    width:520px
}
}

#mobmodal {margin-top: -60px; padding-top: 0px;}


.join-mailing-list {background: transparent; border: none; color: #fff; font-size: 12px !important; font-weight: bold !important;}
.ui-icon {display: inline-block;}
.join-mailing-list {margin-left: 120px !important;}




@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait {display: block; width: 100%;} 
  .navbar-nav>li {text-align: left;}
}


@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
  .ipad-landscape { } /* your css rules for ipad landscape */
  .navbar-nav {width: 650px; margin-top: 0px;}
  .navbar-nav>li>a {font-size: 10px; line-height: 12px; float: left;}
  .main-text-block {margin-top: 0px;}
}

@media (max-width: 1000px) {
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        top: 175px;
    }
    .navbar-nav>li {
        float: none;
        text-align: left;
    }
    .collapse.in{
        display:block !important;
    }
}