body
{
    font: 400 15px/1.8 Lato, Montserrat,sans-serif,Arial;
    color: #777;
    margin-left: 0px;
    margin-top: 0px;
    background-color: #ffffff;
}


/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../images/loading.gif) center no-repeat #fff;
}



.preloader{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: table;
	background: #000;
	z-index: 9999;
}

.preloder-wrap{
	display: table-cell;
	vertical-align: middle;
}

.preloder-inner {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	background-image:url('../images/loading.gif'); 
    margin: 0 auto; 
    width: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


/* Small devices (landscape phones, 576px and up) 
   Medium devices (tablets, 768px and up) 
   Large devices (desktops, 992px and up) 
   Extra large devices (large desktops, 1200px and up) 
*/

@media screen and (min-width: 577px) { 
    .logo
    {
        background-image: url(../images/STUDIONINE_WEB_LOGO_01A.png);
        background-repeat: no-repeat;
        background-color: transparent;
        margin-left: -15px;
        margin-top: 3px;
        width: 321px;
        height: 45px;
        float: left;
    }

    .container
    {
        padding: 80px;
        width: 81%;
    }
    

    .carousel-caption h3
    {
        color: #fff !important;
    }     
    
    h3, h4
    {
        margin: 10px 0 30px 0; 
        letter-spacing: 10px;
        font-size: 20px;
        color: #111;
    } 
    
    .bg-1
    {
        background: #2d2d30;
        color: #bdbdbd;
    }
    .bg-1 h3
    {
        color: #fff; 
    }
    .bg-1 p
    {
        font-style: italic; 
    }
    
    .subtitle 
    {      
    }    

    .footer-text
    { 
    }          
    
} 

@media screen and (max-width: 576px) { 
    .logo
    {
        background-image: url(../images/S9_FAVICON_LOGO_45X45.png);
        background-repeat: no-repeat;
        background-color: transparent;
        margin-left: 1px;
        margin-top: 3px;
        width: 45px;
        height: 45px; 
        float: left;
    }
    
    .container
    {
        padding: 20px;
        width: 81%;
    }      

    .container p
    {        
        font-size: 12px; 
    }      
    
   .carousel-caption
    {        
        font-size: 12px;  
    }      


    .carousel-caption h3
    {
        font-size: 14px; 
        color: #fff !important;
        display: none;
    }
    
    .carousel-caption p
    {
        font-size: 14px; 
        color: #fff !important;
    }    
 
    h3, h4
    {
        margin: 10px 0 10px 0; 
        letter-spacing: 5px;
        font-size: 14px;
        color: #111;
    }

    .bg-1
    {
        background: #2d2d30;
        color: #bdbdbd;
    }
    .bg-1 h3
    {
        font-size: 14px; 
        color: #fff; 
    }
    .bg-1 p
    {
        font-size: 12px; 
        font-style: italic; 
    }

    .modal-header
    {
    
    }

    .subtitle 
    {
        font-size: 12px; 
        font-weight:bold;        
    }

    .footer-text
    {
      font-size: 14px;
    }   

}

.person
{
    border: 10px solid transparent;
    margin-bottom: 25px;
    width: 80%;
    height: 80%;
    opacity: 0.7;
}
.person:hover
{
    border-color: #f1f1f1;
}
.carousel-inner img
{
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%); /* make all photos black and white */
    max-height: 100vh; /*Set height to 100% prr */
    width: 100%; /*Set width to 100% */
    margin: auto;
}

/*prr*/
.carousel-inner img:hover
{
    -webkit-filter: grayscale(0%);
    filter: none; /* make photo colorful on hover */
}

/*slideshow popup*/
#myCarouselSlideShow img
{
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%); /* make all photos black and white */
    max-height: 100vh; /*Set height to 100% prr */
    width: 100%; /*Set width to 100% */
    margin: auto;
}


#myCarouselSlideShow img:hover
{
    -webkit-filter: grayscale(0%);
    filter: none; /* make photo colorful on hover */
}




.list-group-item:first-child
{
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
.list-group-item:last-child
{
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}


@media screen and (min-width: 577px)  
{
    
    .list-group-item-heading
    {
        margin: 10px 0 30px 0;
        font-size: 20px;
        color: #111;
        font-weight: bold;
        width:100%;
    }

    .list-group-item-text
    {
        margin: 10px 0 10px 0;
        font-size: 14px;
        color: #111;
    }

}

@media screen and (max-width: 576px)  
{
    
    .list-group-item-heading
    {
        margin: 10px 0 30px 0;
        font-size: 14px;
        color: #111;
        font-weight: bold;
        width:100%;
    }

    .list-group-item-text
    {
        margin: 5px 0 10px 0;
        font-size: 12px;
        color: #111;
    }

}

.thumbnail
{
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
}
.thumbnail p
{
    margin-top: 15px;
    color: #555;
}
.btn
{
    padding: 10px 20px;
    background-color: #333;
    color: #f1f1f1;
    border-radius: 0;
    transition: .2s;
}
.btn:hover, .btn:focus
{
    border: 1px solid #333;
    background-color: #fff;
    color: #000;
}


@media screen and (min-width: 577px)  
{ 
    .modal-header, h4, .close
    {
        background-color: #333;
        color: #fff !important;
        text-align: center;
        font-size: 18px;
    }    

}

@media screen and (max-width: 576px)  
{ 
    .modal-header, h4, .close
    {
        background-color: #333;
        color: #fff !important;
        text-align: center;
        font-size: 14px;
    }    

}

.modal-header, .modal-body
{
    padding: 5px;
}
.nav-tabs li a
{
    color: #777;
}
#googleMap
{
    width: 100%;
    height: 400px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.navbar
{
    font-family: Montserrat, sans-serif;
    margin-bottom: 0;
    background-color: #2d2d30;
    border: 0;
    font-size: 11px !important;
    letter-spacing: 4px;
    opacity: 0.9;
}
.navbar li a, .navbar .navbar-brand
{
    color: #d5d5d5 !important;
}
.navbar-nav li a:hover
{
    color: #fff !important;
}
.navbar-nav li.active a
{
    color: #fff !important;
    background-color: #29292c !important;
}
.navbar-default .navbar-toggle
{
    border-color: transparent;
}
.open .dropdown-toggle
{
    color: #fff;
    background-color: #555 !important;
}
.dropdown-menu li a
{
    color: #000 !important;
}
.dropdown-menu li a:hover
{
    background-color: #c90707 !important;
}
footer
{
    background-color: #2d2d30;
    color: #f5f5f5;
    padding: 32px;
}
footer a
{
    color: #f5f5f5;
}
footer a:hover
{
    color: #777;
    text-decoration: none;
}
.form-control
{
    border-radius: 0;
}
textarea
{
    resize: none;
}

/*prr*/

table, td, th
{
    border: 1px solid #ddd;
    text-align: left;
}

table
{
    border-collapse: collapse;
    width: 100%;
}

th, td
{
    padding: 15px;
}