body{background-color: #fafafa;-webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;font-size: .9rem;
    font-family: Roboto, Arial, sans-serif;}

/****    Common Styles   */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    width: 100%;
    padding-right: 25px;
    padding-left: 30px;
    padding-top: 25px;
    margin-right: auto; 
     margin-left: auto;
}




.row {
     display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
    margin-right: 0px;
    margin-left: 0px;
}

@media (min-width: 768px){
.col-md-8 {
    -ms-flex: 0 0 66.666667%;
     flex: 0 0 66.666667%;
     max-width: 66.666667%; 
}
.col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
}
.navbar {background-color: #2B3A42;    
    width: 100%;
    -webkit-box-shadow: 0 1px 15px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.04);
    -moz-box-shadow: 0 1px 15px rgba(0,0,0,0.04),0 1px 6px rgba(0,0,0,0.04);
    box-shadow: 0 1px 15px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.04);
     -webkit-transition: padding-left .3s ease, width .3s ease;
  transition: padding-left .3s ease;
}

.navbar .navbar-brand a {padding: 0px;margin-right: -4px;}
.navbar .navbar-brand .country-code {font-size: 11px;color:#a9a9a9;text-transform: uppercase;vertical-align: super;}

@media only screen and (max-width: 650px) {
.navbar .navbar-brand .country-code {
  font-size: 10px; color:#fcfefa;
  }
.navbar .navbar-brand{margin-right: 3px;}
}
@media only screen and (max-width: 400px) {
.navbar .dropdown-toggle::after {display:none;}
}


.navbar a {color:#fff; font-weight: 900; font-size: 16px;padding:10px;text-decoration: none}
.navbar a .dropdown-toggle{color:#fff;font-weight: 900; margin:auto auto;text-decoration: none;}


 .navbar .MenuRegions .name{display: inline-block;margin-right:8px}
 .navbar .MenuRegions img{display: inline-block;}

@media only screen and (max-width: 780px) {
 #MenuFavourites .name{display: none}
}
@media only screen and (max-width: 650px) {
 .navbar .MenuRegions .name{display: none}
}
@media only screen and (max-width: 600px) {
  #mainlogo{content: url("https://livetvcentral.com/imgs/tv-online-home-badge.png");
  max-height:35px;
 }
.navbar .navbar-brand a { margin-right: -1px;}


}


#searchform input{     
  height: 42px;
  border-color:#3a5e82!important;
  color: #8ca1b4;
  background-color: #323f5c; 
    padding: 4px 12px;   

   
    }
    #searchform input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color:#3a5e82;}

#searchform button{     
  border-color:#3a5e82!important;
  background: #323f5c; 
  height: 42px;
   color:#8ca1b4; border:0px;
  border-top-left-radius:0px;border-bottom-left-radius:0px;
-webkit-transition: background .3s ease-out;
  -moz-transition: background .3s ease-out;
  -o-transition: background .3s ease-out;
  transition: background .3s ease-out;}




/* Rules for sizing the icon. */
.material-icons {display: inline-flex; vertical-align: middle;}
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }



.btn {
    
     font-weight: 600;
        
}


.btn-light {
    color: #606060;
    background-color: Transparent!important; 
    border-color: Transparent!important;  
    font-size: 15px!important;

}

.badge-light{overflow: hidden; white-space: nowrap;  font-size: 15px;display: flex; text-overflow: ellipsis;padding:8px 15px;margin-bottom:5px;margin-right: 5px;border-radius: 8px;}
.badge-success{ font-size: 15px;padding:8px 15px;border-radius: 8px;}


.btn-light i {
 font-size: 16px;
 margin-right: 12px;
}

.btn-light:hover {
    color: #909090;
    background-color: #fff; 
     border-color: #fff; 
      

}

/******* CARDS.  **********/
.card {
    border-color: #ffff; background-color: #fff;
    padding: 20px 20px;
/*
     -webkit-box-shadow: 0 6px 0 0 rgba(0,0,0,0.01), 0 15px 32px 0 rgba(0,0,0,0.06);
    -moz-box-shadow: 0 6px 0 0 rgba(0,0,0,0.01),0 15px 32px 0 rgba(0,0,0,0.06);
    box-shadow: 0 6px 0 0 rgba(0,0,0,0.01), 0 15px 32px 0 rgba(0,0,0,0.06);


    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
   
*/  
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
   
    position: relative;
    width: 100%;
    border: 0px;
     border-bottom: 1px solid #f1f1f1;
    margin-bottom: 20px;
   
}

.card .card-body {
    padding: 0px;
    padding-top: 20px;
    flex: 1 1 auto;
    position: relative;
}
.card .card-body .col-sm:first-child{
  padding-left: 0px;
}
.card .card-body .col-sm:last-child{
  padding-right: 0px;
}


.card .card-header {
    padding: 0px;
    border: 0;
    border-bottom: solid 1px #eaecf2;
    padding-bottom: 20px;
    text-align: left;
    
    background: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
   
}
.card .card-header h5 {
  text-align: left;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    color: #212121;
}

.card2 {
    border-color: #ffff; background-color: #fff;

/*
     -webkit-box-shadow: 0 6px 0 0 rgba(0,0,0,0.01), 0 15px 32px 0 rgba(0,0,0,0.06);
    -moz-box-shadow: 0 6px 0 0 rgba(0,0,0,0.01),0 15px 32px 0 rgba(0,0,0,0.06);
    box-shadow: 0 6px 0 0 rgba(0,0,0,0.01), 0 15px 32px 0 rgba(0,0,0,0.06);


    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
   
*/
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
   
    position: relative;
    width: 100%;
    border: 0px;
    
    margin-bottom: 50px;
   
}

.modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}
@media(max-width: 768px) {
  .modal-dialog {
    margin-top:100px;
    min-height: calc(100vh - 20px);
  }
}

/* Margins on mobile */
@media only screen and (max-width: 600px) {
  .container-fluid, .container,.col-md-8,.col-sm-7,.col-sm-5,.col-md-4 {
    padding-right: 0px;
    padding-left: 0px;
  }
}

/* remove max-width of bootstrap */
@media (min-width: 576px){
.container, .container-sm {
    max-width: 1200px!important;
}
}

/* ***   Ajax Loading ***/

#loading{width:100%;max-width:100%; text-align:center;}
#loading img{margin:auto;width:100%;max-width:200px;} 


.skyscraper{
  margin:0px 0px;padding:20px;text-align: center;background-color: rgba(241,241,241,.5);
}


   /*****************************************************/
  /****                 HOME                       *****/
 /*****************************************************/


#home .navbar{
  background-color: transparent!important;z-index: 1001;position: absolute;
}


#home .navbar #searchform{
  /*display:none;*/
}


 #home .main,  #home .sidebar{
  padding-top:20px}


#Welcome{
  width: 100%;
  height: 400px;
  text-align: center;
  position: relative;
  background-color: #303950;
  background-image: url('https://livetvcentral.com/imgs/map2.png');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.welcome {
    left:50%;
   top:50%;
   -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   position:absolute;
   height: auto;margin: 0 auto; max-width:700px; width:100%
   
    }

.welcome h1{color:#fff;font-size: 24px    margin-bottom: 60px; }


#countries, #top {  min-height:320px;  }


#countries a {}
#countries img {vertical-align: middle;display: inline;border-radius: 100%;margin-right: 10px;width:15px;height:15px;border:1px solid #ccc;} 
#countries .col-sm {padding-left:0px;}

#top .row {padding:3px; border:0px solid #f1f2f3;margin-bottom: 3px;border-radius: 3px}

/*
#top .col-md-3,#top .col-sm-4,#top .col-5{padding-right: 0px;  padding-left: 0px;} 
#top .col-md-9, #top .col-sm-8, #top .col-7{padding-right: 5px;position:relative;}

*/


   /*****************************************************/
  /****              TV - LIST                     *****/
 /*****************************************************/

#TVlist {padding:3px; border:0px solid #f1f2f3;margin-bottom: 3px;border-radius: 3px}
/*#TVlist .col-md-3, #TVlist .col-4{padding-right: 0px;  padding-left: 0px;}
#TVlist .col-md-9, #TVlist .col-8"{padding-right: 5px;position:relative;}
*/
#TVlist a img{width:100%;height:auto;border:1px solid #f1f1f1;}
#TVlist a{text-decoration: none;width: 100%;}
#TVlist a h3{text-decoration: none;color:#030303;font-size: 18px;font-weight: 500;margin: 10px 0 4px 0;
          max-height: calc(2 * 18px);display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden; text-overflow: ellipsis;white-space: normal;}
#TVlist .cont  .tvdescription{  color:#606060;font-size: 14px;margin: 10px 0 10px 0;padding:0px   ;
            display: -webkit-box; max-height: calc(2 * 19px);-webkit-box-orient: vertical;
            overflow: hidden;text-overflow: ellipsis;white-space: normal;}
                  
#TVlist .bottom{   width: 100%;padding:0px 0px;}
#TVlist .bottom span{  color:#606060;font-size: 12px;float:right}
#TVlist .bottom img {vertical-align: middle;display: inline;border-radius: 100%;margin:0px  4px;width:15px;height:15px;border:1px solid #ccc}



#TVgrid { border:0px solid #f1f2f3;margin-bottom: 10px;border-radius: 3px}

#TVgrid a img{width:100%;height:auto;border:1px solid #f1f1f1;}
#TVgrid a{text-decoration: none;width: 100%; text-align: center;}
#TVgrid a h3{text-decoration: none;color:#030303;font-size: 16px;font-weight: 500;margin: 10px 0 4px 0; text-align: center;
          max-height:  18px;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden; text-overflow: ellipsis;white-space: normal;}

                  
#TVgrid .bottom{  padding:0px 10px;text-align: center}
#TVgrid .bottom span{  color:#606060;font-size: 12px;}
#TVgrid .bottom img {vertical-align: middle;display: inline;border-radius: 100%;margin:0px  4px;width:15px;height:15px;border:1px solid #ccc}

@media only screen and (min-width: 500px) AND (max-width: 767) {
  #TVlist .cont .tvdescription{max-height: calc(2 * 19px);}
}
@media only screen and (min-width: 768px) AND (max-width: 1100px) {
  #TVlist .cont .tvdescription{max-height:19px;}
}
@media only screen and  (max-width: 570px) {
  #TVlist .cont .tvdescription{display: none}
  #TVlist .bottom span{ float:left}
}


   /*****************************************************/
  /****             Country                        *****/
 /*****************************************************/

 #country .main,  #country .sidebar{
  padding-top:20px}


#country h1 { font-size: 20px  }
#country h1 img{ vertical-align: middle;display: inline;border-radius: 100%;margin-right: 10px;width:30px;height:30px;border:1px solid #ccc  }

#Filter {border-bottom: 1px solid #f2f3f4}
#TVS {min-height: 500px}

#pagining{margin-top: 40px}
   /*****************************************************/
  /****              Single                        *****/
 /*****************************************************/


 #single .main,  #single .sidebar{
  padding-top:20px}

#single .breadcrumb { margin-bottom: 0px;background-color: #fff}
#single .breadcrumb li a{text-decoration: none;}
#single .breadcrumb li img{vertical-align: middle;display: inline;border-radius: 100%;margin-right: 5px;width:15px;height:15px;border:1px solid #ccc}

#single .tv{padding:0px}
#single .tv .card-body{padding-top: 0px}

#LIVE {background-color: #000;height: auto;max-height: 500px}

#LIVE  .iframecontainer .row{ border:1px solid red; color: white;font-weight: bold;position: absolute;top: 10%;z-index: 2;width: 100%; height:80%;padding: 20px;text-align: center;}
.tv .Title-Options{border-bottom:1px solid #f1f1f1;}

.tv .Title-Options .col-md-12{padding: 0px 15px;padding-top: 20px}

.tv .Title-Options .tvlogo{width:35px;display: inline-block;vertical-align: middle;
                     height:35px;border:1px solid #f1f2f3;
                     background-size: cover;background-position:center;border-radius:50%;}
.tv .Title-Options h1{font-size: 20px;padding-left: 20px;vertical-align: middle margin-bottom: 0px; margin-top: 0px;display: inline-block;}

.tv .Title-Options .externallive{float:right;display: inline-block; vertical-align: middle;}
#likegroup{margin-right: 20px}

#Description{padding:20px;}
#Description h2{font-size: 16px;}
#Description .star{color:#FFD700;}
#Description  .totalVotes{color:#ccc}


.tv .showmore{border-top:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;padding:20px}

.tv .showmore a{text-decoration: none}

/* Linea de porcentage debajo del like
#likegroup{border-bottom:2px solid #ccc;position: relative;
  z-index : 1;}

#likegroup:before {
  content : "";
  position: absolute;
  left    : 0;
  bottom  : -2px;
  height  : 1px;
  width   : <?=$percentage;?>%;  
  border-bottom:2px solid #606060;
 
}
*/

@media only screen and (max-width: 600px) {

.breadcrumb-item .name {display: none}
.breadcrumb  .r {
    max-width: 100px;
    overflow-x: hidden;
    white-space: nowrap;
}
.breadcrumb-item.active {
  white-space: nowrap;
    max-width: 120px;
    overflow-x: hidden;
 
}
}




 
   /************************************************************/
  /****              Sidebar Single                       *****/
 /************************************************************/

.sidebar{border: 0px solid #d9d9d9!important;margin-top: 20px}
.sidebar .card-header {color: #606060;font-size: 14px;font-weight: 500;letter-spacing: 0.007px;}
.sidebar .card-body {padding: 5px;/*max-height: 450px; overflow: scroll;*/}
.sidebar .card-body .row{padding:3px; border:0px solid #f1f2f3;margin-bottom: 3px;border-radius: 3px}
.sidebar .card-body .row .col-md-5, .sidebar .card-body .row .col-4{padding-right: 0px;  padding-left: 0px; }
.sidebar .card-body .row img {width:100%;height:auto;border:1px solid #f1f1f1}
.sidebar .card-body a{text-decoration: none;width: 100%;}
.sidebar .card-body h3{text-decoration: none;color:#030303;font-size: 14px;font-weight: 500; margin: 10px 0 4px 0;overflow: hidden;text-overflow: ellipsis;white-space: normal;}
.sidebar .card-body .desc{color:#606060;font-size: 13px;
    margin: 4px 0 4px 0;
    display: -webkit-box;
    max-height: calc(2 * 16px);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;}

.sidebar .card-body .city{    color:#606060;font-size: 12px;margin: 4px 0 4px 0;float:right}

   /*****************************************************/
  /****              Footer                        *****/
 /*****************************************************/
footer{ background:#303950;padding: 20px 0 0 0}

footer .container {text-align: left;color:#ccc; padding:20px} 
footer .flag{vertical-align: middle;
    width: 23px;
    height: 14px;
    margin-right: 8px;
    -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.36) inset;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.36) inset;}

footer a{color:#f1f2f3;}
footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

footer ul li{ margin-bottom: 5px;}

footer .credits{text-align: center;background-color: #222A3F;color:#ccc;padding: 20px}



#back-to-top{position: fixed;bottom: 30px; right: 30px; background-color: #fff;width:40px;height:40px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 50px;display :none;text-decoration: none; }
#back-to-top img{ width: 40px; opacity: 0.7;}

#back-to-top:hover { animation: swing .5s;transition: 0.3s;}



   /*****************************************************/
  /****             Animations                     *****/
 /*****************************************************/


/*  Animations  */
@-webkit-keyframes swing {
  0%, 30%, 50%, 70%, 100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  10% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg); }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); } }

@keyframes swing {
  0%, 30%, 50%, 70%, 100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  10% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg); }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); } }

@-webkit-keyframes sonar {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 1; }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0; } }

@keyframes sonar {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 1; }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0; } }