
/*-----------------------------------------------------------------------------------*/
/*	Echo theme my personal custom changes                                            
    On /echo/css folder find echo.css and jasny.bootstrap.min.css and on /theme find _variables.scss and 
    find in all of them 1170px and replace it by 1470px    
	- on Index.tpl there are several my-enclose div class to isolate some css properties
	- At the end of index.tpl file added <style> css tags </style>
    - on /css style.scss and style.css and echo.css file // float: right !important; was commented out to allow related videos sidebar to be responsive to move line 790,730,762
	- on watch-video some block of codes were moved to other spots
	- change language block code was moved from footer.tpl to header.tpl and on include/settings.php commented out all languajes except english & spanish
	- added articles section code on watch.php and video-watch.tpl
	- added several lines on player.tpl aprox line 560
	- lang file new words added to the bottom of the file
	- profile-edit-form.tpl search for <!--- added by me ---->
	- channel.tpl search for <!--- added by me ---->
	*/
/*-----------------------------------------------------------------------------------*/

.my-ad {display: inline-block;}

@media (min-width: 1200px) {
.container {width: 1470px;}
}
#player.wide-player {width: 66%;} 


@media (max-width: 1000px) {
#player.wide-player {width: 100%;}
.col-sm-12 {width: 100%;}
.my-ad  {display: none;}
}

@media (min-width: 1000px) {
#content-main .row, #content-main .col-md-12, #content-main.container-fluid {padding-left: 15px; padding-right: 15px;}
}

@media (max-width: 448px) {
.pm-section-highlighted #Playerholder_wrapper .embedded-video, .pm-section-highlighted #video-wrapper .embedded-video {padding-bottom: 76%;}
.pm-video-control .col-xs-5 {width: 100%;}
}


#player {padding-bottom: 0px;} 

.pm-section-highlighted {background-color: transparent; color: #444;}

#pm-related ul.pm-ul-sidelist-videos {height: 550px; overflow-y: scroll; overflow-x: hidden;}

.h1, h1 {font-size: 24px; color: #111;}
.h4, h4 {color: #444;}

.pm-video-heading {padding-bottom: 5px;}

.pm-video-watch-sidebar {background-color: white;}
#pm-related ul.pm-ul-sidelist-videos li h3 a {font-size: 17px;}
.pm-video-meta span {color: #767676 !important;}

/* This is for share and report icons new left location     */
.pull-right {float: left!important;}

.row.pm-video-control .btn.btn-video {font-size: 18px;}
.my-icon {font-size: 18px; padding-left: 4px;}
#freemake {display:inline-block; font-size: 18px; margin-top: 7px; font-weight: 500;}
.row.pm-video-control a {color: #777;}
.btn-default {background-color: blue; border-color: blue;}

.tooltip > .tooltip-inner {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); }
.tooltip-inner {background-color: blue; font-weight: 500;}

.alert {float: left;}
.row .pm-section-highlighted {background-color: #070d19; color: white;}

/*------------ For Index and the rest of video pages -----------------*/

.li.col-xs-6 col-sm-6 col-md-4{padding-right: 1px;}

@media (min-width: 992px) {
.my-enclose .col-md-4 {width: 31.33333333%;}	
/* .col-md-4 {width: 24.33333333%;}  /* it used to be 33% but was restored to 33% on video-watch.tpl file */
.col-md-3 {width: 19.33333333%;}
.pm-section-highlighted #Playerholder_wrapper, .pm-section-highlighted #video-wrapper {margin: 0 0px;}
.my-enclose .h1, h1 {padding-left: 20px !important;}
}

@media (max-width: 992px) {
.li.col-xs-6 col-sm-6 col-md-4 {padding-right: 15px;}
li.col-xs-6, .col-sm-6, .col-md-4 {padding-left: 5px; padding-right: 5px;}
.my-enclose, .col-md-4, .widget, .pm-section-head, ul.pm-ul-browse-videos {padding-left: 5px; padding-right: 5px;}
.my-enclose, .container-fluid, .row, .pm-section-highlighted {padding-bottom: 1px; margin-bottom: -8px;}
}
/*--------------------------------------------------------------------*/
.pm-autoplay-select {width: 180px;}
.pm-autoplay-select .pm-autoplay-switch {margin-left: 130px;}

/*------------ For video sidebar on video-watch.tpl -----------------*/
ul.pm-ul-sidelist-videos .pm-video-thumb {float: right; width: 35%;}
ul.pm-ul-sidelist-videos .pm-video-thumb img {max-height: 90px;}
ul.pm-ul-sidelist-videos li {height: 90.8px;}
ul.pm-ul-sidelist-videos h3 {width: 64%;}

.pm-video-watch-sidebar {float:d;}
/*------------ For video player and responsiveness on video-watch.tpl -----------------*/
@media (max-width: 1481px) {
#player.wide-player {width: 64%;}
}
@media (max-width: 1450px) {
#player.wide-player {width: 62%;}
}
@media (max-width: 1420px) {
#player.wide-player {width: 60%;}
}
@media (max-width: 1390px) {
#player.wide-player {width: 58%;}
}
@media (max-width: 1360px) {
#player.wide-player {width: 56%;}
}
@media (max-width: 1330px) {
#player.wide-player {width: 54%;}    
#player.wide-player {height: 54%;}    
}
@media (max-width: 1300px) {
#player.wide-player {width: 52%;}       
}
@media (max-width: 1000px) {
#player.wide-player {width: 100%;}       
}
.my-enclose .pm-video-heading {padding: 0px 0;}

/*------------ For Index.tpl only -----------------*/
@media (min-width: 992px) {
#content .container .my-enclose .row {margin-left: 2%;}
#content .container .my-enclose .row .pm-section-head {margin-left: 35px;}
}
/*-------------------------------------------------*/

/*--------------- change lanjuage button ----------------*/
.navbar-pmuser .dropdown-menu {width: auto; left: -48px; padding-top: 4px; margin-bottom: -69px; }
.pm-language-list, ul.dropdown-menu {padding-left: 30%;}
/*-------------------------------------------------------*/

.animated {animation-duration: 5s;}
.my-box-logos {width: 100%; max-height: 100%px; margin-top: 20px; margin-bottom: 20px;}
.centerimage {text-align:center; display:block;}
@media (max-width: 770px) {
.my-box-logos img {width: 90%;}
}	

#my-enclose-player {width: auto; height: auto;}

  #my-overlay {
  position: absolute; 
  top: 100px; 
  color: #FFF; 
  text-align: center;
  font-size: 20px;
  background-color: rgba(221, 221, 221, 0.3);
  width: 100%;
  height: 100%;
  /* padding: 10px 0; */
  z-index: 2147483647;
  display: none;
}