/*
 Theme Name:   Ramova Music
 Theme URI:    velnikolic.com
 Description:  Ramova Music Custom Theme by Vel Nikolic.
 Author:       Velibor Nikolic
 Author URI:   velnikolic.com
 Template:     bootstrap-basic
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/



/*Video */       
video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

.card .name {
 font-size:16px;
 color:white;
    
}
        
        
.back .header{
    background: url("http://ramovamusic.com/wp-content/uploads/2017/02/Banner-Photo-1920-X-1080.jpg") 
  no-repeat bottom center;
 display:none;   
}
        
.card-container, .front, .back {
 
    height:215px;
    max-height:300px;
    
}
        
.back{ 
    
 color:white;
 background:black;
}
   
        
td {
 padding:30px   
}
        
/**/ 
.logo{
 width:60px;   
}
  
.navbar-nav{
 background:white;   
    
}

/* Navigation */         
#logo{width: 250px;
      padding-bottom:20px;
      padding-top:20px;
      background:white;
      margin: 0 auto;
}
        
.navbar-nav>li>a { 

 
  margin-bottom:10px;
  padding-top:8px;
  padding-bottom:8px;
  text-transform:uppercase;
  font-size:16px;
  width:120%;
    
  transform: scale(1); /* you need a scale here to allow it to transition in both directions */
  transition: 0.15s all ease;
 
}
        
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    background: black;
    color:white;    
   
    
    
     
}
        
        
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    
   transform: scale(1.21);
}
    


        
/* Description Bars*/  
#descBars{
 margin-top: 380px;   
}
   
        
.navbar-toggle {
    
 margin-top:25px;
 margin-bottom:25px;
}
#descBars li {
 list-style:none;
 text-transform: uppercase;
  margin-bottom:10px;
  padding-top:10px;
  padding-bottom:10px;
  background: black;
  color: white;
  
}
        
        
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
        
/* Footer */  
footer.navbar {
 background:white; 
 width:100%;
 max-width:100%;
display: flex;               /* establish flex container */
align-items: center; 
}
        
 .social-links {
     margin-top:10px;
     
 }

.social-links a i{
  
	color: #909090;
      -webkit-transition: color 300ms ease;
        -moz-transition: color 300ms ease;
        -o-transition: color 300ms ease;
        -ms-transition: color 300ms ease;
        transition: color 300ms ease;
}
   
.social-links a:hover, .social-links a:active{
    
    text-decoration:none;   
}
.social-links a:hover i {
  
    color:black;   
}
        
.footer-container{
 margin-left:auto;
 margin-right:0;
}
        
/*Portfolio*/

#portfolio .mix{
	
    padding-bottom:30px;
    display:none;
}
  
#portfolio {
    margin-top: 100px;
  ;
   
}
   
#portfolio:after {
  clear: both;
    content: "";
    display: block;   
}

.pdf-thumb-box
{
display:inline-block !important;
position:relative !important; 
overflow: hidden;

}
.pdf-thumb-box-overlay {
   
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;

}
.pdf-thumb-box a{

    color:transparent;
}
.pdf-thumb-box a:hover .pdf-thumb-box-overlay {
    visibility:visible;
    opacity:1;
    transition-delay:0s;
    text-align:center;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.58);
    color: #fff;
    top:10px;
    width:100%;
    height:20%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    
}
    
.bottom a:hover .pdf-thumb-box-overlay {
    top:auto;
    bottom:10px;
}
        
        
        
.pdf-thumb-box-overlay span {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
font-size:12px;
line-height:35px;
}
        
        
/*About*/  
#aboutSection{
    overflow: hidden;

    padding-left: 15px;
    padding-right: 15px;
    color:white;
  
    display:none;
}
        
.aboutWrapper{
 background:black;
 margin-top:100px;
 padding:30px;

    
}
        
#profile{
 width:100%; 
 max-width:250px;


}

.clear{
    clear:both;   
}
        
        /*Portfolio*/   
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Figures
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
figure {
    margin: 0;
    position: relative;
}
figure img {
    display: block;
    position: relative;
    z-index: 10;
    max-width: 100%;
    height: auto;
}
figure figcaption {
    display: block;
    position: absolute;
    z-index: 5;
}
figure h3 {
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 10px;
}
figure span {
    color: #b2cce1;
    display: block;
    line-height: 1.2;
    margin-top:85px;
}
figure a.close-caption {
    display: block;
    position: absolute;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    font-size: 24px;
    font-weight: 700;
    color: #315a7d;
}
figure a.close-caption.hidden {
    display: none
}
  
 a.close-caption {
    top: 10px;
    right: 10px;
}
 figure figcaption {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: steelblue;
    text-align: center;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
figure figcaption h3 {
   
}
figure img {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
figure:hover img,
figure.hover img {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
figure:hover figcaption,
 figure.hover figcaption {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
}
        
#services{
 margin-top:100px;
 display:none;
}
     
        
.serviceImg{
    height:100px;   
}

.service {
    margin-bottom:15px;   
}
        
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
        
.contact {
 display:inline-block;
 line-height:36px;
 margin-right:7px;
}
        
.navbar-fixed-bottom {
    background:white;   
}

.sideMenu{
    
    background:none;   
}


        
@media (min-width: 1200px) { .profile{width:40%} .about{width:60%; } }

@media (max-width: 1200px) {  td {display:block; width:100%; margin: 0 auto; padding:10px;} }
        
@media screen and (max-width: 1200px) and (min-width: 961px) {  
    
    .card-container, .front, .back {
 
    height:180px; }
    
}
        

@media screen and (max-width: 992px) and (min-width: 767px) {      
.navbar-nav>li>a { 
  margin-bottom:10px;
  padding-top:5px;
  padding-bottom:5px;
  text-transform:uppercase;
  font-size:14px;
  width:250px;
    
  transform: scale(1); /* you need a scale here to allow it to transition in both directions */
  transition: 0.15s all ease;
    }
    
        #descBars {
 margin-top: 315px;   
}
    
    #descBars li {
 
  margin-bottom:10px;
  padding-top:5px;
  padding-bottom:5px;
  background: black;
  color: white;
  
}
    
    
    #logo {
     width:60%;   
    }

    
    
    .pdf-thumb-box a:hover .pdf-thumb-box-overlay {
        
        top:100px;
        
    }
    
    
    .bottom a:hover .pdf-thumb-box-overlay {
    top:100px;
    
}
    
    
     .card-container, .front, .back {
 
    height:245px; }
    
    
 
}     
        
        
        
        
        
@media (max-width: 767px) {
    
        .pdf-thumb-box a:hover .pdf-thumb-box-overlay {
        
        top:120px;
        
    }
    
    .card-container, .front, .back {
 
    height:315px;
    max-height:315px;
    max-width:315px;
    margin: 0 auto;
    margin-top: 20px;
    
}
    
    
 .bottom a:hover .pdf-thumb-box-overlay {
    top:100px;
    
    }
    
    
    .pdf-thumb-box-overlay span {
        line-height: 60px;   
    }
    
    
    

    
    
    
 #navMenu{
  position:fixed;
  left:0;
  z-index:2000;
  width:160px;
  padding:0;
  text-align:center;
  top:90px;

 }
  .navbar-brand {
   padding:0;
   height:auto;
  }
  #logo{
   padding:0;
   padding:15px;
   width:200px;
   margin:0 auto;
}
    

    
.navbar-default{
 background:white;   
}
    
.navbar-nav>li>a {
 width:100%;
 padding-top:5px;
 padding-bottom:5px;
}
    
.contentWrap{ padding-top:50px;
}
    
.social-links{
    text-align:center;   
}
    
        #descBars {
 margin-top: 200px;   
}
    
}
        
        

        
@media screen and (min-width: 1900px) {
     .card-container, .front, .back {

        height:275px;
        max-height:300px;

    }
}

        
@media (min-width: 992px) {
    #portfolio{

    
        
}
    
    
.pContainer{
    overflow: hidden;
    
}


        
@media (min-width: 900px) {

    

    
    
     
   
    
    
    
  .navbar-collapse {
    height: auto;
    border-top: 0;
    box-shadow: none;
    max-height: none;
    padding-left:0;
    padding-right:0;
    
  }
    


    
    
  .navbar-collapse.collapse {
    display: block !important;
    width: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
    background:white;
  }
  .navbar-collapse.in {
    overflow-x: visible;
  }

.navbar
{
	max-width:80%;
	margin:0 auto;
    border-radius:0;
    border:0;
}	

.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;}

.navbar-right .dropdown-menu {left:0;right:auto;}
.navbar-collapse .navbar-nav.navbar-right:last-child {
    margin-right: 0;
}

        
.sidebar-nav{background: white}
    
    
.back .header{
    
 display:block;   
}
    

    
}