/******************************************************************
Theme Name: Actor Agent Feed
Theme URI: http://www.themble.com/bones
Description: This site was built using the Bones Development Theme. For more information about Bones or to view documentation, you can visit the <a href="https://github.com/eddiemachado/bones/issues" title="Bones Issues">Bones Issues</a> page on Github. You'll want to customize this for your clients with your own information.
Author: Showcast
Author URI: http://www.showcast.com.au
Version: 1.3
Tags: flexble-width, translation-ready, microformats, rtl-language-support

License: WTFPL
License URI: http://sam.zoy.org/wtfpl/
Are You Serious? Yes.
*/

body{
    font-size: 15px;
    background-color: #FFF;
    color: #000;
    font-family: 'Open Sans', sans-serif;
}
a{
    color: #f84b21;
    text-decoration: none;
}
img{
    width: 100%;
}
.header-wrap{
    background-color: #DDD;
    height: 146px;
    border-bottom: 2px solid #eee;
    margin-bottom: 106px;
}
.main-menu{
    list-style-type: none;
    margin: 0;
    padding: 60px 0;
    font-size: 20px;
}
.main-menu li{
    display: inline-block;
    padding-right: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
.main-menu a{
    color: inherit;
    text-decoration: none;
}
.main-menu li.active a, .main-menu a:hover{
    color: #f84b21;
}
.main-title{
    margin: 0;
    margin-bottom: 10px;
    font-size: 26px;
    color: #f84b21;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
}
.main-title:after{
    content: "";
    width: 37px;
    height: 4px;
    background-color: #f84b21;
    display: block;
}
.footer{
    background-color: #DDD;
    height: 90px;
    margin-top: 90px;
}
.footer .container{
    padding: 25px 0;
}
.footer a{
    color: inherit;
}
.footer span{
    padding-right: 20px;
}


.workshops:last-child{
    display: inline-block;
    background-color: #DDD;
    color: #FFF;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px 10px 5px 42px;
    position: relative;
}
.workshops:hover{
    color: #FFF;
    text-decoration: none;
}
.workshops span:first-child{
    content: "^";
    width: 32px;
    height: 100%;
    background-color: #1ebbb2;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

.our-work, .contact{
    padding: 40px 0 50px 0;
    margin: 40px 0;
    background-color: #DDD;
}
.our-work{
    padding: 40px 0;
    margin-bottom: 0px;
}
#our-team{
    padding-top: 40px;
}
.our-work .row{
    height: 196px;
    overflow: hidden;
}
.contact{
    margin-bottom: 0;
padding-bottom: 500px;
}
.socials{
    list-style-type: none;
    padding: 0;
    margin: 0;
    padding-top: 10px;
}
.socials li{
    display: inline-block;
    height: 40px;
    margin-right: 10px;
}
.socials li img{
    width: auto;
    height: 100%;
}
.footer .socials{
    padding: 0;
    float: right;
    display: inline-block;
}   
.footer .socials li{
    height: 20px;
}

.team-member{
    margin-top: 5px;
    margin-bottom: 20px;
    height: 180px;
    overflow: hidden;
}
.team-member .photo{
    height: 100%;
    overflow: hidden;
}
.image-slider{
    overflow: hidden;
    position: relative;
}
.image-slider ul{
    list-style-type: none;
    white-space: nowrap;
    position: relative;
    transition: left 2s linear;
    display: inline-block;
}
.image-slider li{
    width: 325px;
    height: 189px;
    margin: 0 15px;
    display: inline-block;
}
.image-slider li img{
    width: 100%;
    height: 100%;
}

/*********************MOBILE NAV*******************/
.dropdown-nav{
    padding: 0;
    position: absolute;
    background-color: #0A1127;
    color: #FFF;
    text-align: left;
    font-size: 20px;
    z-index: 999;
}
.dropdown-nav li{
    display: block;
    padding: 0;
}
.dropdown-nav li a{
    display: block;
    padding: 5px 20px 5px 10px;
    border: none;
}
.dropdown-nav li a:hover{
    border: none;
    background-color: #00041A;
}

.dropdown .dropdown-nav{
    display: none;
}

.dropdown.expand .dropdown-nav{
    display: block;
}
        

/*********************ACTOR PROFILE*******************/
#actorprofile{
	width: 100%;
}
#pics{
	width: 33%;
	float:left;
	padding-top:5px;
	text-align:left;
}
#detailpic{
	width: 100%;
	margin-top: 5px;
}
#detailpicwrapper{
	height: 100%;
}

#details{
	width: 31%;
	text-align: left;
	color:white;
	float:left;
	margin-left: 2%;
}
.strong{
	font-weight: bold;
	color: white;
}
.detailsp{
	color: light-grey;
	margin: 10px 0px;
	font-size: 14px;
}
#moreinfo{
	width: 31%;
	margin-left: 2%;
	float: left;
}
#more-info{
	text-align: left;
	color: white;
	border-bottom: 1px solid white;
	padding-bottom: 5px;
	font-weight: bold;
	padding-top: 20px;
}
.thumbs{
	list-style-type: none;
	padding: 0;
    margin: 0px;
}
.thumbs li{
	display: inline-block;
	width: 30%;
	margin-right: 5%;
	margin-top: 10px;
}
.thumbs li:nth-child(3n+3){
	margin-right: 0;
}
.thumbs img{
	width: 100%;
}
.dark{
	text-align: left;
	margin-top: 10px;
}
#reels{
	color: white;
	text-align: left;
}
.overline{
	margin: 10px 0px;
}
.credits{
	width: 64%;
	margin-left: 2%;
	float: left;
	margin-bottom: 40px;
}
.credits ul{
    list-style-type: none;
    padding: 0;
}
.credits li{
    margin-bottom:5px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.credit-production{
    color: #536491;
}
.credit-type, .credit-director{
    color: #F2E9D3;
}

#media-player{
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	top: 0px;
}
#player-container{
	width: 920px;
	height: 390px;	
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	text-align: left;
}
#player-title{
	font-size: 25px;
	margin-bottom: 10px;
	color: #FFF;
	width: 100%;
}
#videospace{
	width: 640px;
	float: left;
}
.playlist{
	width: 280px;
	float: left;
	height: 360px;
	background-color: #1A1A1A;
}
.playlist ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.playlist li{
	color: #FFF;
	height: 50px;
	line-height: 50px;    
	text-overflow: ellipsis;
    	white-space: nowrap;
    	overflow: hidden;
	padding-left: 10px;
	cursor: pointer;
}
.playlist li:hover{
	background-color: #3A3A3A;
	color: #8560A8;
}
.playing{
	background-color: #3A3A3A;
	color: #8560A8;
}
.close-icon{
	width: 32px;
	height: 32px;
	background-image: url('http://nataliehall2560.showcast.com.au/wp-content/uploads/2015/07/Close-32.png');
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}
#media-gallery{
	background-color: black;
	cursor:pointer;
	margin-top: 10px;
	width:100%;
}
#media-gallery img{
	width: 100%;
}
#actorname{
	width: 33%;
	float: left;
}
#actorname h2, #details-title h2, #featuremedia h2{
	margin:0;
	color:white;
	text-align:left;
	font-size: 20px;
}
#actorname, #details-title, #featuremedia{
	border-bottom:1px solid white;
}
#details-title{
	width: 31%;
	float: left;
	margin-left: 2%;
}
#featuremedia{
	width: 31%;
	float: left;
	margin-left: 2%;
}
#title-bar{
	width: 100%;
}
.clear{
	clear:both;
}
.detailsp a{
	font: 14px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #F2E9D3;
}
.detailsp a:hover{
	color: #536491;
}
.back-mobile{
	background-color: #23282D;
	width: 100%;
	padding: 5px;
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	font-weight: bold;
	display:none;
}

.profile{
    margin-top: 30px;
}
.profile h3{
    border-bottom: 1px solid;
}
.thumb{
    padding: 15px 15px 0 15px;
    opacity: 0.8;
    cursor: pointer;
    height: 135px;
}
.thumb:hover{
    opacity: 1;
}
.profile ul{
    padding: 0;
    margin: 0;
}
.profile ul li{
    list-style-type: none;
}
.credits{
    width: 100%;
}
.year{
    color: #0DBBB4;
}
.production{

}
.director{
    color:#f84b21;
}
.type{
}
.role{
    color: #f84b21
}

.filter{
    margin-bottom: 30px;
}
label{
    display: block;
}
b, label{
    font-family: arial;
    font-weight: normal;
}
.form-field{
    margin-top: 20px;
}
.form-submit{
    background-color: #1ebbb2;
    color: #FFF;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px 10px;
    width: 100%;
    border: none;
}
.form-control{
    border-radius: 0;
}
.form-control:focus{
    border-color: #1ebbb2;
}
.form-group{
    margin-bottom: 20px;
}
textarea{
    border-radius: 6px;
    color: #50575A;
    padding: 10px;
    width: 100%; 
    background-color: #FFF;
    font-weight: normal;
    border: none;
    height: 100px !important;
    resize: none
}
.input-field{
    border-radius: 6px;
    color: #50575A;
    padding: 10px;
    width: 100%; 
    background-color: #FFF;
    font-weight: normal;
    border: none;
}
.select-list{
    position: relative;
}
.select-list > label{
    cursor: pointer;
}
.select-list .glyphicon{
    position: absolute;
    color: #50575A;
    top: 13px;
    right: 10px;
    pointer-events: none;
}
.select-list ul{
    position: absolute;
    top: 35px;
    padding: 0;
    margin: 0;
    z-index: 100;
    background-color: #FFF;
    padding-top: 5px;
    width: 100%;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    display: none;
}
.select-list.open ul{
    display: block;
}
.select-list ul li{
    color: #50575A;
    list-style-type: none;
    display: block;
    cursor: pointer;
    padding: 10px;
    border-top: 1px solid;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
.select-list ul li:last-child{
    border-bottom: 1px solid;
    border-radius: 0 0 6px 6px;
}
.select-list ul li:hover{
    color: #FFF;
    background-color: #50575A;
}
.article{
    margin-bottom: 15px;
}
.article h3{
    margin-top:0;
    margin-bottom: 10px;
}

#player{
    max-width: 640px;
    height: 360px;
    background-color: #000;
    float: left;
}
#playlist{
    width: 225px;
    height: 360px;
    background-color: #000;
    float: left;
    padding: 0;
    color: #c3c3c3;
    border-left: 1px solid #333;
    font-size: 18px;
	overflow-x: hidden;
	overflow-y: scroll;
	width: 258px;
}
#playlist li{
    padding: 10px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
#playlist .active{
    color: #E8B201;
}
#placeholder{
    width: 100%;
    height: 165px;
    background-color: #000;
    color: #FFF;
    cursor: pointer;
    position: relative;
	text-align: center;
}
#placeholder span{
	font-size: 32px;
    padding: 66px 0px;
}
.modal-content{
	background-color: black;
}
.modal-body{
	padding: 0;
}

.actor a{
    margin-bottom: 25px;
    height: 329px;
    text-align: center;
    display: block;
}
.actor:hover a{
    text-decoration: none;
}

.actor h4{
    margin-top: -29px;
    padding: 5px 0;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 1;
    position: relative;
    color: #FFF;
    font-weight: 700;
}
.actor:hover h4{
    text-decoration: none;
    background-color: #DDD;
}



/* Medium devices (desktops, 992px and up) */
@media (max-width: 1200px ) {
    .actor a{
        height: 370px;
    }
    .main-menu li{
        padding-right: 15px;
    }
}

/* Small devices (tablets, 768px and up) */
@media (max-width: 992px ) {
    .actor a{
        height: 432px;
    }
}

/* Extra small devices (phones, less than 768px) */
@media (max-width: 768px ) {
    .actor a{
        height: auto;
    }
    .mobile-menu{
        text-align: center;
        color: #FFF;
    }
    .glyphicon{
        cursor: pointer;
        font-size: 33px;
        padding: 13px 0;
    }
    .mobile-menu .menu{
        position: fixed;
        top: 60px;
        left: 0;
        height: 100%;
        background-color: #0A1127;
        width: 100%;
        z-index: 999;
        display: none;
    }
    .mobile-menu.expand .menu{
        display: block;
    }
    .mobile-menu .menu a{
        display: block;
        padding: 10px 0;
        color: #EAEAEA;
        text-decoration: none;
        border-top: 1px solid;
        width: 75%;
        margin: auto;
        font-size: 16px;
    }
    .mobile-menu .menu a:first-child{
        border-top: none;
    }
}