/**
  Theme Name: p3design
  Version: 1
  Author: Paul Rutan III
*/



header, a, img, li, nav div{
    transition: all .5s;
    -moz-transition: all .5s; /* Firefox 4 */
    -webkit-transition: all .5s; /* Safari and Chrome */
    -o-transition: all .5s; /* Opera */
  }

/* Basic layout */

body{
background-color:black;
  background-image:url(images/acoustic-railways-bg-sm.png);
  background-size:50%;
  background-position:center;
  background-attachment: fixed;
}

ul{
  list-style-type: none;
}

li{
  display: inline;
  float: left;
}

p {
  font-family:'Lato', sans-serif;
  font-size:14px;
  font-weight:300;
  color:#979797;
  line-height:1.6;
}

h1, h2, h3 {
  font-family:'Montserrat', sans-serif;
}

:focus {
  outline-style:none;
  }
/*=====================================================================================================================================================
                                                              SITE HEADER                                                                       
=====================================================================================================================================================*/

header#site-nav {
  float: left;
  width: 100%;
  padding-top:0px;
  background-color:white;
  -webkit-box-shadow: 0px 10px 25px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 25px -7px rgba(0,0,0,0.75);
box-shadow: 0px 10px 25px -7px rgba(0,0,0,0.75);
z-index:1050;
}

header a {
  font-family: 'Montserrat', "Helvetica Neue", sans-serif;
  color:white;
}

header a.active, header a:hover{
  color: red;
}

.navbar {
  margin-bottom:0px;
}

.navbar-brand {
  font-size:20px;
  font-weight:700;
  letter-spacing:1px;
  padding:12px 0px 0px 0px;
  height:auto;
  margin-bottom:0px;
}

.nav-logo {
  width:100%;
}

.logo {
  float:left;
  width:40px;
}

.blog-title {
  float:left;
  text-align:center;
}

.blog-title h3 {
  color:red;
  font-weight:700;
  margin-top:14px;
  font-size:19px;
  padding-left:8px;
}

.nav-links {
  color:gray;
}

.nav-links:hover {
  background-color:red;
  color:white;
}

.navbar-toggle {
  padding: 3px 0px 0px 0px;
  margin-right:0px;
  font-size:18px;
}

.navbar-toggle:active {

}

ul.nav {
  display:block;
  height:100%;
  margin-bottom:0px;
}

.navbar-collapse.in, .navbar-collapse {
  position: relative; 
  overflow: hidden; 
  clear:both;
}

.navbar-collapse.in li, .navbar-collapse li {
  width:100%;
}

.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {
  background-color:rgba(255,0,0,0.7);
  color:white;
  border-left:30px solid black;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
    height: auto !important;
    transition: transform 0.5s;
    transform: translate(0px,-500px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
    transform: translate(0px,0px);
}

.nav-bar > li > a {
  color:gray;
  -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.nav-search-bar {
  padding:15px 0px;
/*  border-top: 1px solid #CCC;*/
}

input.form-control.nav-search-input {
  border-right: 1px solid rgba(255,255,255,0.7)
}

button.search {
  border-color:rgba(255,0,0,0.7);
  color:red;
  background-color:white;
}

button.search:hover{
  background-color:rgba(255,0,0,0.7);
  color:white;
  border-color:rgba(255,0,0,0.5);
}

.nav-search-btn {
  border-left:1px solid rgba(255,0,0,0.7);
}

/**------------------------------------------------- HEADER MEDIA KWUERIES -------------------------------------------------*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    .navbar-collapse li {
      width:100%;
      padding-left:0px;
    }
    .blog-title h3 {
      font-size:22px;
      margin-top:13px;
      padding-left:10px;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {}


@media screen and (max-width: 767px) {
    .navbar .nav-collapse .navbar-form { margin: 0; }
    
    .navbar.navbar-default .nav-collapse,
    .navbar.navbar-inverse .nav-collapse {
        transform: translate(-100%,0px);
    }
    .navbar.navbar-default .nav-collapse.in,
    .navbar.navbar-inverse .nav-collapse.in {
        transform: translate(0px,0px);
    }
    
    .navbar.navbar-default .nav-collapse.slide-down,
    .navbar.navbar-inverse .nav-collapse.slide-down {
        transform: translate(0px,-100%);
    }
    .navbar.navbar-default .nav-collapse.in.slide-down,
    .navbar.navbar-inverse .nav-collapse.in.slide-down {
        transform: translate(0px,0px);
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  .navbar-collapse li {
      width:inherit;
  }
  .navbar {
    height:60px;
  }
  .blog-title h3 {
    font-size:24px;
  }
    .navbar-collapse.in, .navbar-collapse {
    clear:none;
  }
  .mobile-border {
  border:0px!important;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  .blog-title h3 {
    font-size:32px;
  }
  .navbar {
    height:70px;
  }
  .navbar-nav li {
    height:70px;
  }
  .navbar-nav > li > a {
  padding-top:25px;
  height:100%;
  }
  .navbar-nav > li > a:hover, .navbar-nav > li > a:focus {
    border-left:0px;
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {}



/*===============================================================================================================================================
                                                      SPLASH PAGE
===============================================================================================================================================*/


.page {
  clear:both;
  background-color:rgba(10,10,10,.95);
}

.vid-player-container {
  height:100%;
  background-color:rgba(0,0,0,.9);
}

.main-content {
  position:relative;
  width:100%;
}

#main-article {
  background-image:url(images/acoustic-railways-bg.jpg);
  background-size:cover;
  background-position: center;
  padding-bottom:60px;
  position:relative;
}

.vid-artist {
  color:#979797;
  margin-bottom:0px;
  font-weight:400;
  margin-top:15px;
}
.vid-title {
  font-weight:900;
  font-size:32px;
  margin-top:0px;
  margin-bottom:0px;
}

#main-article h6 {
  margin-top:5px;
}

.talk-sharing {
  margin-bottom:0px;
/*  border-bottom: 1px solid #CCC;*/
  height:60px;
  margin-top:5px;
}

.ts-options {
  border:2px solid red;
  border-radius:50%;
  text-align:center;
  width:40px;
  height:40px;
  font-size:12px;
  color:gray;
  margin-right:10px;
}


.ts-options p {
  font-size:12px;
  margin-top:-7px;
}
.ts-icons {
  width:100%;
  color:red;
  padding:0px;
}

.ts-icons h4 {
  font-size:23px;
  margin-top:6px;
  margin-bottom:15px;
  padding-left:1px;
}

.share-icon {
  padding-left:3px;
  padding-top:1px;  
}

.sharing-separator {
  height:45px;
  width:1px;
  background-color:#DDD;
  margin-right:10px;
}


.article-btn {
  float:right;
  border:0px;
  background-color:rgba(255,255,255,0);
  color:rgb(0,150,0);
  position:absolute;
  top:10px;
  right:20px;
}

.article-btn.active {
 color:red;
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.article-btn i {
  font-size:32px;
  font-weight:700;
  padding-top:0px;
}
.video-text {
  margin-top:17px;
  border-top:1px solid #CCC;
  padding-top:15px;
}

#video-text-mobile {
  border-top: 1px solid #CCC;
  padding-top:10px;
  margin-top:10px;
}

.vid-preview-text h4, .vid-preview-text p {
  padding:0px;
  margin:0px;
}

.vid-preview-text {
  padding-top:5px;
}
/*  PREVIEW SECTION =============================================================*/


.tab-content {
/*  background-color:rgba(255,255,255,0.1);*/
/*  background-color:white;*/
/*padding-top:10px;*/
  border-top:red;
}
.previews {
  margin-top:-40px;
  border-color:red;
}


.container.mobile-preview-no-pad-l {
  background-color:white;
/*  border-top:1px solid red;*/
}
.vid-preview-item {
  padding:10px 0px;
}

ul.prev-nav {
  padding-left:5px;
  background-color:#E7E7E7;

}

.nav-tabs li {
  margin-right:5px;

}

.prev-nav li {
  background-color:rgba(255,255,255,.5);
  border-radius:10px 10px 0px 0px!important;
  text-align:center;
  width:31.5%;
  height:40px;
}

.prev-nav li > a:hover {
/*  border-bottom: rgba(255,0,0,0.7) 1px solid;*/
  background-color:rgba(255,0,0,0.7);
  color:white;
}

.nav-tabs > li.active > a {
/*  border-bottom:white 2px solid;*/
  color:red;
  font-weight:500;
}

.prev-nav li > a {
  margin-right:0px;
  border-radius:10px 10px 0px 0px!important;
  color:black;
  padding:10px 0px;
  width:100%;
}


.mobile-preview-no-pad-l {
  padding-left:0px;
}

.vid-preview-pad-r-adjust {
  padding-right:0px;
}
.vid-thumb-container {
/*  margin-top:12px;*/
}

.vid-preview-text h4 {
  margin:0px;

}

.vid-preview-text p {
  padding:0px;
  margin:0px
}

/*==================================================== SPLASH PAGE MEDIA KWUERIES =======================================================*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
  div.tab-content {
  background-color:rgba(255,255,255,1);
/*  padding-top:20px;*/
/*  background-color:rgba(10,10,10,0.9);*/
  }
  .vid-preview-pad-r-adjust {
  padding-right:0px;
  }
  .vid-preview-text h4 {
    font-weight:700;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
  }
  .vid-preview-text p {
    margin:0px 0px;
    font-size:16px;
    padding:0px;
  }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

  .mobile-container {
  min-width:100%;
  }
  ul.prev-nav {
    width:90%;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  .page {
  background-image:url(images/acoustic-railways-bg-sm.png);
  background-size:50%;
  background-position:center;
  background-attachment: fixed;
  }
  div.tab-content {
/*  background-color:rgba(255,255,255,1);*/
/*  padding-top:40px;*/
  background-color:rgba(0,0,0,0);
  }
  .mobile-container {
  min-width:90%;
  }
  .vid-preview-item {
  padding:inherit;
  }
}


/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  #main-article {
  background-image:none;
  padding-bottom:10px;
  }
  .mobile-container {
  min-width:90%;
  }
  ul.prev-nav {
  padding-left:5px;
  background-color:rgba(255,255,255,0);
  width:30%;
  float:right;
  margin-right:15px;
  }

  .vid-player-container {
  }
  .mobile-preview-no-pad-l {
  padding-left:15px;
  }
  .vid-preview-pad-r-adjust {
  padding-right:15px;
  }
  .previews {
  margin-top:-40px;
  border-color:red;
  }
  .video-container {
    background-color:black;
    padding-bottom:40px;
  }
  .vid-player-container {
    padding-bottom:40px;
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  .mobile-container {
    min-width:1170px;
  }
  .main-content {
    padding:80px 0px 0px 0px;
  }
  .previews {
    margin-top:-40px;
    border-color:none;
  }
  .video-container {
    background-color:black;
    padding-bottom:0px;
  }
  .vid-player-container {
    padding-bottom:100px;
  }

  .vid-preview-item {
  padding-top:30px;
  }
}

/*=================================================== HELPERS ================================================================*/

.padl-lr-15 {
  padding:15px 0px 15px 0px;
}

.vid-preview-no-pad-r {
  padding-right:0px;
}

.mt-40 {
  margin-top:-60px;
}

.mb35 {
  margin-bottom:40px;
}

.bold {
  font-weight:700;
}

.light-gray {
  background-color:#F7F7F7;
}

.line-break {
  margin-top:-22px!important;
}

.center {
  margin-left:auto;
  margin-right:auto;
}


.font-300 {
  font-weight: 300;
}


.mobile-border {
  border-top:solid 1px #CCC;
}

.animate {
  -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.bold {
  font-weight:700;
}
/*====================================================    BOOTSTRAP MODAL  =====================================================  */

.portfolio-modal {
  background-color:rgba(255,255,255,.95);
}

.modal {
  width:100%;
  padding-left:0px;
  height:auto;
}

.modal-header {
  width:100%;
  height:50px;
  margin-top:0px;
  position:fixed;
  border-bottom:0px;
 /*   background-color: rgba(231,76,60,.9);*/
  background-color:rgba(255,255,255,.95);
  padding:0px;
  z-index:2000;
  padding:0px;
  color:white;
}

.modal-header .close {
  margin-top:0px;
}

.modal-header .navbar-brand {
  color:rgb(100,100,100);
}
.modal-header > button {
  width:50px;
  height:50px;
  position:absolute;
  top:0;
  right:0;
  color:red;
  font-weight:300;
}

.modal-header > button:hover {
  background-color:red;
  text-shadow:none;
}
.modal-header > button {

}

.modal-body {
  padding:50px 0px 0px 0px;
}


.modal-body h2 {
    color:#979797;
    font-weight:700;
    text-align:center;
    padding-top:20px;
    text-transform:uppercase;
}
body.modal-open {  
  left:0;
  top:0;
  right:0;
  bottom:0;
  width:100%;
  margin-left:0px;
  margin-right:0px;
  }

  body.modal-open > header#site-nav > nav.navbar.nav-bar-custom.navbar-fixed-top.large-nav {
    display:none;
  }

 body.modal-open > header#site-nav > nav.navbar.nav-bar-custom.navbar-fixed-top.small-nav {
    display:none;  
 }






 /********** MEDIA KWUERIES ******************/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {}