html,
body { height: 100%;
padding: 0px;
margin: 0px; },
iframe { height: 100%; }

body {
	font-family: sans-serif;
  display: table;
  width: 100%;  
}

/** Clearing Bootstrap columns ......http://www.bluthemes.com/blog/3/clearing-bootstrap-3-columns **/
/** This is for proper aligning of 4 columns in one row in videos=>index.blade.php **/
.col-md-3:nth-child(4n+1),
.col-lg-3:nth-child(4n+1){
    clear: left;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%;
/**background-image: url("../images/home_bkg.jpg");/**/
background-size: cover;
background-position: center;
margin: 0px;
padding: 0px;
}

.page-row-list { min-height: 100%;
max-width: 1440px;
background-color: #ffffff;
margin: auto;
padding: 20px 50px;
}

.ftr {
	background-color: #808183;
	text-align: left;
	font: normal 12px sans-serif;
	color: #dedede;
	padding: 10px 50px;
}

.ftr .footer-right {
	float: right;
	max-width: 300px;
}
	
.ftr p.footer-links {
	line-height: 20px;
	margin: auto;
}

.ftr p.footer-links a{
	display:inline-block;
	text-decoration: none;
	color:  inherit;
}

.ftr p.footer-links a:hover{
	color:  #fff;
}

.filter {
	width: 100%;
	height: 100%;
	background:rgba(255,255,255,0.40);	
}

.login-logo {
	width: 85%;
	height: auto;
	padding-bottom: 15px;
}

.page-logo {
	width: 20%;
	height: auto;
	padding-bottom: 15px;
	padding-left: 15px;
}

.page-toolbar-item {
	display: table-cell;
	padding-left: 20px;
	color: #8a8a8c;
}

.page-toolbar-item a {
	color: #8a8a8c;
}

.page-toolbar-item li a {
	color: #8a8a8c;
}

.login-footer {
	width: 100%;
	height: auto;
	padding-top: 15px;
	padding-bottom: 5px;
}

.page-toolbar {	
	display: table;
	table-layout: fixed;
	float: right;
	padding-right: 15px;
	margin-bottom: 15px;
}

.form-btns {
		width: 100%;
		display: table;
		table-layout: fixed;
}

.form-btn {
	display: table-cell;
	color: #c1c1c1;
}

.form-btn a{
	color: #8a8a8c;
	text-decoration: bold;
}

.login-btn {
	width: 100%;
	color: #fff;
    background-color: #9bd5cf;
    border-color: #9bd5cf;
}

.submit-btn {
	color: #fff;
    background-color: #9bd5cf;
    border-color: #9bd5cf;
	margin-top: 5px;
}

.loginbox {
        width: 20%;
        background-color: white;
		border: 1px solid #d2d3d3;
		box-shadow: 0px 0px 8px #aaaaaa;
		color: #8a8a8c;

        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom: auto;
        margin: 75px auto 20px auto;
		padding: 10px;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:100%;
		min-width: 250px;
        /* max-height:100%; 
        overflow:auto; */
    }

.form-group label {
		color: #8a8a8c;
		font-weight: normal;
}

.form-group a {
	color: #77AFA7;
}

.grid-item-box {
	font-size: 10px;
	color: #868687;
}

.grid-item-box .free-tag {
	position: absolute;
	top: 0px;
	right: 15px;
	background-color: #77AFA7;
	font-size: 12px;
	color: #fff;
	padding: 5px 10px 5px 10px;
	font-weight: bold;
	letter-spacing: 1px;
}

.grid-item-name {
	font-size: 12px;
	font-weight: bold;
	color: #77AFA7;
}

.grid-item-img {
	padding-bottom: 5px;
}

.grid-item-title {
	font-size: 12px;
	font-weight: bold;
	color: #868687;
}

.video-container {
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 25px;	
}

.video-details {
	background-color: #ddd;
	/*margin-left: 15px;  removed after removing <div class="row">*/
	color: #868687;
}

.video-desc {
	padding: 15px 15px 30px 15px;
}

.vid-th-title {
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vid-desc-name {
	font-size: 25px;
	font-weight: bold;
	color: #77AFA7;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0;
}

.vid-desc-title{	
	font-size: 25px;
	font-weight: bold;
	color: #868687;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0;
}

.vid-desc-attr{
	font-size: 12px;
	color: #868687;
	height: 100%;
	margin: 10px 0px;
}

.rel-vid-bar {
	font-size: 14px;
	font-weight: bold;
	color: #868687;	
}

.rel-vid-bar hr{
    display: block;
    width: 8%;
	color: #77AFA7;
	margin: 5px 0px;
	background-color: #77AFA7;
	height: 3px;
}

.rel-vid-box {
    display: inline-block;/*added 'inline' to expand the box as per the image height*/
    width: 100%;
	border-top: thin solid #77AFA7;
	padding: 15px 0px;	
	white-space: nowrap;	
}

.rel-vid-th {
	width: 45%;
	margin-right: 10px;
	height: auto;
	float: left;		
}

.rel-vid-name {
	font-size: 12px;
	font-weight: bold;
	color: #77AFA7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0;		
}

.rel-vid-title{
	font-size: 12px;
	font-weight: bold;
	color: #868687;			
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0;	
	display: inline-block;
}

.rel-vid-attr {
	font-size: 12px;
	color: #868687;	
	height: 100%;	
	font-weight: normal;
}

.rel-vid-block{
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 50%;
	max-width:150px;
}

.registrationbox {	
	border: 1px solid #d2d3d3;
	box-shadow: 0px 0px 8px #aaaaaa;
	color: #8a8a8c;
	display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */    
    margin-right:-4px;
	vertical-align: top;
	padding-bottom: 10px;
	/**newly added**/
	background-color: white;
	margin-top: 80px;
	padding-top: 10px;
	margin-bottom: 10px;
}


.vid-comments {
	padding: 15px 0px 0px 0px;/*changed from 15px 0px 0px 15px after removing <div class="row">*/
}

.comment-name {
	font-size: 14px;
	font-weight: bold;
	color: #868687;
}

.comment-time{
	font-size: 10px;
	color: #868687;
}

.comment-box {
	background-image: url("../images/comment-circle.png");
	background-repeat: no-repeat;
	background-size: 50px 50px;
	padding: 5px 10px 10px 60px;
	border-bottom: 1px solid #77AFA7;
	min-height: 60px;
	font-size: 12px;
	color: #868687;
	margin-top: 10px;
}

.vid-cmt-title {
	font-size: 18px;
	font-weight: bold;
	color: #77AFA7;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0;	
}

.video-grid {
          padding:0 0 0 0;
          margin:0 0 0 0;
}
.video-grid li {     
          list-style:none;
          margin-bottom:25px;      
}

.video-grid li img {
          cursor: pointer;
}

.btn-teal {
	background-color: #7CBFB7;
}

.btn-grey {
	background-color: #E2E2E2;
}

.star-holder {
	display: inline-block;
}

.glyphicon-half-star:before {
		content: '\e006';
		position: relative;
		z-index: 9;
		width: 50%;
		display: block;
		overflow: hidden;
}

.glyphicon-half-star:after {
		content: '\e007';
		position: absolute;
		z-index: 8;
		display: block;
		overflow: hidden;
		top: 0;
		left: 0;	
}

#star-rating {
	float: right;
	display: block;
	color: #868687;
}

.centerbox {
        width: auto;
        background-color: white;

        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom: auto;
        margin: 75px auto auto auto;
		padding: 0px;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:90%;
        /* max-height:100%; 
        overflow:auto; */
    }


.profile-container {
	text-align: left;
}

.static-container {
	color: #8a8c8c;
	font-size: 15px;
	margin: 30px 50px;
	text-align: justify;
}

.static-container h2 {
	font-size: 17px;
	font-weight: normal;
}

.pdivleft, .pdivright {
	border: 1px solid #d2d3d3;
	box-shadow: 0px 0px 8px #aaaaaa;
	color: #8a8a8c;
	display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
	vertical-align: top;
	padding-bottom: 10px;	
}

.pdivgap {
	display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;	
}

.profile-header {
	font-size: 20px;
	font-weight: bold;
	color: #9bd5cf;
}

#nameclear,  #emailclear, #searchremove{
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;    
}

.substable {
	margin: 10px 5px 10px 0px;
}

.substable td {
	width: 50%;
	padding: 5px 10px 5px 0px;
}

#slidemenu {	
	padding-bottom: 15px;
}

.aboutus-img {
	width: 45%;
	height: auto;
	margin-right: 25px;
	float: left;
}

.mpc-logo-img {
	width:35%;
	float: left;
	margin: 5px 20px 20px 0;
}

.aboutus-div {
	margin-left: 48%;
}

.artists-div {
	float:left; 
	color: #8a8a8c; 
	padding: 12px 0 0 15px;
}

.top-paginate-div {
	float: right; 
	padding-right: 15px;
	margin-top: -15px; 
	margin-bottom: -5px;
}

.popover{
	color: #868687;	
}

.userinfo{
	padding-left:10px;
	background-color: #fff;
	border-radius:5px;
	text-align: left;
}

/* If you don't want the footer to be responsive, remove these media queries */
/* styles for DEVICES with physical max-screen width smaller than 480px; */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
	
	.mpc-logo-img {
	width:45%;
	float: left;
	margin: 5px 20px 20px 0;
	}

	.artists-div {
		float:none; 
		color: #8a8a8c; 		
	}

	.top-paginate-div {
		float: none; 
		padding-left: 15px; 
		margin-top: -10px;		
	}

	.profile-container {
	text-align: center;
	}
	
	.aboutus-img {
		display: none;
	}
	
	.aboutus-div {
		margin: auto;
	}
	
	.static-container {
		margin: 10px;
	}

	.registrationbox{
		width: 87%;
	}
	
	.ftr {
		text-align: center;
	}

	.ftr .footer-right{
		float: none;
	}
	
	.page-row-list { min-height: 100%;
		background-color: #ffffff;
		margin: 0px;
		padding: 5px;
	}
	
	.page-logo {
	width: 60%;
	height: auto;
	padding-bottom: 5px;
	margin: 0 auto;
	float: none
	}

	.rel-vid-box{		
		width: 95%;
		margin-right: 0px;
	}

	.rel-vid-bar {
		padding-top: 20px;	
		/*margin-left: 15px;
		width: 95%;	removed after removing <div class="row">*/		
		padding-right: 0px;		
		margin-right: 0px;
	}

	.rel-vid-heading{
		padding-left: 15px;
	}

	.page-toolbar-item { float: right;}
	
	.navbar-nav{text-align: right;}

	.dropdown{
        border-radius:5px;         
	  	background-color: #ffffff;
	}	
}

/* STYLES HERE for BROWSER WINDOWS with a max-width smaller than 991px. 
 	This will work on desktops when the window is narrowed. */
/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width:991px) {

	.page-row-list { min-height: 100%;
		background-color: #ffffff;
		margin: 0px;
		padding: 5px;
	}
	
	#slide-nav .container-fluid {
	    margin: 0!important;
	    padding: 0!important;
      	height:100%;
	}
	#slide-nav .navbar-header {
	    margin: 0 auto;
	    padding: 0;
	}
	#slide-nav .navbar.slide-active {
	    position: absolute;
	    width: 80%;
	    top: -1px;
	    z-index: 1000;
	}
	#slide-nav #slidemenu {
	    background: #f7f7f7;
	    right: -100%;
	    width: 80%;
	    min-width: 0;
	    position: absolute;
	    padding-right: 0;
	    z-index: 2;
	    top: -8px;
	    margin: 0;
   	    margin-top: 70px;  
	}
	#slide-nav #slidemenu .navbar-nav {
	    min-width: 0;
	    width: 100%;
	    margin: 0;
	}
	#slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
	    min-width: 0;
	    width: 80%;
	    white-space: normal;
	}
	#slide-nav {
	    border-top: 0
	}
	#slide-nav.navbar-default #slidemenu {
	    background: #eee;/*changed the color from #f7f7f7*/
	    border-radius: 5px;/*added this border*/
	    max-height: 400px;	/*increased the height to fit in additional contents*/
	}
	/* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
	#navbar-height-col {
	    position: fixed;
	    top: 0;
	    height: 100%;
      	bottom:0;
	    width: 80%;
	    right: -80%;
	    background: #f7f7f7;
	    z-index: 50;/*added this to make the slider menu non-transparent, made to place above the page content*/
	}
	#navbar-height-col.default {
	    background: #333;
	    z-index: 1;
	    border: 0;
	}
	#slide-nav .navbar-form {
	    width: 100%;
	    margin: 8px 0;
	    text-align: center;
	    overflow: hidden;
	    /*fast clearfixer*/
	}
	#slide-nav .navbar-form .form-control {
	    text-align: center
	}
	#slide-nav .navbar-form .btn {
	    width: 100%
	}

	/**added this to place/show the auto list (of the search box) above the slide menu ************/
	.ui-autocomplete {
        z-index:2000;
    }

    /**added this to set navbar at fixed placed above the slide menu ************/
	.navbar-fixed-top
    {
	    position: relative;
	    top: auto;	    
    }

    .page-toolbar-item { float: right;}/**added to shift items on right side***/
	
	/***added the navbar toogle and all collapse code to force slide menu in ipad (portrait-768px)*************/
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        float: right;/**added to shift on right side***/        
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: right!important;/**made 'right' from 'none' to shift on right side***/
        margin: 7.5px -15px;
        text-align: right;
    }
    .navbar-nav>li {
        float: none;        
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;        
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }

    #slide-nav #slidemenu .navbar-nav .dropdown-menu li.selected a { color: #77AFA7; }

    /** Clearing Bootstrap columns ......http://www.bluthemes.com/blog/3/clearing-bootstrap-3-columns **/
    /** col-sm-6 added for ipad aligning issue **/
	.col-sm-6:nth-child(2n+1){
	    clear: left;
	}/**/
}

li.selected a { color: #77AFA7; }

.dropdown.open, .dropdown.open:active {
	background-color: #fff!important;
	background-image: none!important;
	background-repeat: no-repeat!important;
}

.dropdown.open > a.dropdown-toggle, .dropdown.open > a.dropdown-toggle:hover {
	background-color: #fff!important;
	background-image: none!important;
	background-repeat: no-repeat!important;
}

.dropdown.open > a.dropdown-toggle > b.caret {
	color: #77AFA7;
}

/* styles for browsers width larger than 768px; */
@media (min-width:768px) {
	#video-container {
	    left: 0!important
	}
	.navbar.navbar-fixed-top.slide-active {
	    position: fixed
	}
	.navbar-header {
	    left: 0!important
	}
}

/* styles for browsers width = 768px; (default iPad screens - portrait)*/
@media only screen and (device-width:768px){
    .registrationbox{
		margin-left: 30px;
		width: 39%;
	}	
}

/* styles for browsers width = 1024px; (default iPad screens- landscape)*/
@media only screen and (device-width:1024px){
	.registrationbox{
		width: 30%;
	}	
}

/* styles for browsers no lesser than 1600px (Amazon Kindle Fire HDX both Portrait & Landscape)*/
@media (min-width: 1600px){

	.container{
		height: 100%;
	}

	.profile-container{
		height: 100%;
		/*margin-top: 150px;*/
	}
	
	.registrationbox{
		width: 27%;
	}   
  	
  	.page-row-list{
  		/**max-width: 1440px;/**/
  		/* padding-left: 200px;
  		padding-right: 200px;*/
  	}
}

/* No greater than 480px in landscape*/
@media screen and (max-device-width: 480px) and (orientation: landscape) {
	
	.profile-container {
	text-align: center;
	}
	
	.aboutus-img {
		display: none;
	}
	
	.aboutus-div {
		margin: auto;
	}
	
	.static-container {
		margin: 10px;
	}

	.registrationbox{
		width: 50%;
	}

	.rel-vid-bar {
		padding-top: 20px;
	}	
}

/* width= 736px in Iphone 6 Plus landscape*/
@media (width:736px) and (orientation: landscape){
	.registrationbox{
		width: 35%;		
	}

	.rel-vid-bar {
		padding-top: 20px;
	}		
}

/* No greater than 639px, no less than 481px (Apple iphone 5 landscape 568x320, Google Nexus 4 & 5(landscape))*/
@media (max-width:639px) and (min-width:481px)  and (orientation: landscape) {
	
	
	.profile-container {
	text-align: center;
	}
    
    .registrationbox{
		margin-top: 20px;
		width: 40%;		
	}

	.rel-vid-bar {
		padding-top: 20px;
	}    
}

/* No greater than 735px, no less than 600px Apple iphone 6 landscape, Blackberry(playbook & Z30), Nexus 7 (portrait)*/
@media (max-width:735px) and (min-width:600px) {
	
	
	.profile-container {
	text-align: center;
	}
    
    .registrationbox{
		margin-top: 40px;
		width: 47%;
	}

    .rel-vid-bar {
		padding-top: 20px;
	}    
}