/* Classes to help visualize the boxes */

body {
	background: #fff;
}

* {
	font-family: Arial, Helvetica, sans-serif;
}

* {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-o-user-select: none;
	user-select: none;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.p-1{
  padding: 10px;
}

.p-2{
  padding: 20px;
}
.p-3{
  padding: 30px;
}
.p-4{
  padding: 40px;
}
.p-5{
  padding: 50px;
}

.pt-1{
  padding-top: 10px;
}

.pt-2{
  padding-top: 20px;
}
.pt-3{
  padding-top: 30px;
}
.pt-4{
  padding-top: 40px;
}
.pt-5{
  padding-top: 50px;
}
.pl-1{
  padding-left: 10px;
}
.pl-2{
  padding-left: 20px;
}
.pl-3{
  padding-left: 30px;
}
.pl-4{
  padding-left: 40px;
}
.pl-5{
  padding-left: 50px;
}

.pr-1{
  padding-right: 10px;
}
.pr-2{
  padding-right: 20px;
}
.pr-3{
  padding-right: 30px;
}
.pr-4{
  padding-right: 40px;
}
.pr-5{
  padding-right: 50px;
}

.pb-1{
  padding-bottom: 10px;
}

.pb-2{
  padding-bottom: 20px;
}
.pb-3{
  padding-bottom: 30px;
}
.pb-4{
  padding-bottom: 40px;
}
.pb-5{
  padding-bottom: 50px;
}

.m-1{
  margin: 10px;
}

.m-2{
  margin: 20px;
}
.m-3{
  margin: 30px;
}
.m-4{
  margin: 40px;
}
.m-5{
  margin: 50px;
}

.mt-1{
  margin-top: 10px;
}

.mt-2{
  margin-top: 20px;
}
.mt-3{
  margin-top: 30px;
}
.mt-4{
  margin-top: 40px;
}
.mt-5{
  margin-top: 50px;
}

.mb-1{
  margin-bottom: 10px;
}

.mb-2{
  margin-bottom: 20px;
}
.mb-3{
  margin-bottom: 30px;
}
.mb-4{
  margin-bottom: 40px;
}
.mb-5{
  margin-bottom: 50px;
}

.no-height{
  line-height: 0px
}

.mp-0{
  margin: 0px;
  padding: 0px
}

.text-white{
  color: #fff
}

.text-red{
  color: #8B0000
}


@media (min-width: 768px) {
  .kontent{
    background: #fff;
    padding-top: 20px
  }
  .navbar-brand img{
    width: 100%
  }
  .nav-link:not(:last-child) {
    -webkit-box-shadow: 10px 0px 0px -9px #fff;
       -moz-box-shadow: 10px 0px 0px -9px #fff;
            box-shadow: 10px 0px 0px -9px #fff;
}
  .bola_a{
    background: linear-gradient(180deg,#0000AA,#ececec);border-radius: 8px;padding: 10px;font-size: 1.9em;font-weight: bold;
    margin-left: 5px;margin-right: 5px
  }
  .bola_b{
    background: linear-gradient(180deg,#FE4E00,#FFB038);border-radius: 100%;padding: 5px;font-size: 1.9em;font-weight: bold;
    margin-left: 5px;margin-right: 5px
  }
  .bola_c{
    background: linear-gradient(180deg,#FDC300,#FEFD00);border-radius: 100%;padding: 5px;font-size: 1.9em;font-weight: bold;
    margin-left: 5px;margin-right: 5px
  }

  .lh-6{
    line-height: 0.6em
  }
  .lh-8{
    line-height: 0.8em
  }
  .about{
    background: linear-gradient(180deg,#FF0000,#ffffff);border: solid #FF0000 2px;border-radius: 10px;padding:0px 20px;text-align: left
  }
	
}

@media (max-width: 767px) {
  .kontent{
    background: #fff;
  }
   .navbar-brand img{
    width: 70%
  }
  .nav-link{
    float: left;
    width: 100%;
    text-align: left
  }
  .lh-6{
    line-height: 0.3em;
    margin-top: 1em
  }
  .lh-8{
    line-height: 1em
  }
	.countdown{
    margin-top: 0px
  }
  .bola_a{
    background: linear-gradient(180deg,#0000AA,#ffffff);border-radius: 100%;padding: 3px;font-size: 1.4em;font-weight: bold;
    margin-left: 2px;margin-right: 2px
  }
  .bola_b{
    background: linear-gradient(180deg,#FE4E00,#FFB038);border-radius: 100%;padding: 3px;font-size: 1.4em;font-weight: bold;
    margin-left: 2px;margin-right: 2px
  }
  .bola_c{
    background: linear-gradient(180deg,#FDC300,#FEFD00);border-radius: 100%;padding: 3px;font-size: 1.4em;font-weight: bold;
    margin-left: 2px;margin-right: 2px
  }
  .container{
    margin: 0px;
    padding: 0px
  }
  .about{
    background: linear-gradient(180deg,#FF0000,#ffffff);border: solid #FF0000 2px;border-radius: 10px;padding:0px 5px;text-align: left
  }
}

@media only screen and (min-width:768px) and (max-width:1024px) {
  .mt-5{
    margin-top: 2.2em;
  }
  .lh-6{
    font-size: 1.5em;
    margin-top: 0.7em
  }
  .lh-8{
    line-height: 0.8em;
    margin-bottom: 0px;
    padding-bottom: 0px;
    font-size: 0.8em
  }
}

.text-dropdown {
    background: 0 0;
    color: #fff;
    border: none;
    text-align: center;
    font-weight: bold;
    width: 100%;
  }
.text-dropdown option{
  color: #000
}


.navbar .navbar-nav {
   display: inline-block;
   float: none;
   vertical-align: middle;
   padding-top: 10px
}
 .navbar .navbar-collapse {
   text-align: center;
}

.navbar-brand{
  line-height: 0px;padding: 0px;max-width: 10em
}
 

.navbar{
  background: linear-gradient(180deg,#FF0000,rgb(85, 0, 0));
  border: none;
  border-radius: 0px;
  color: #fff;
  padding-bottom: 10px
}

.navbar-nav li a{
  color: #fff !important;
  font-weight: bold;
}

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background: #740000;
    color:#ffffff;
  }
.card{
  background: linear-gradient(130deg,#fff,#D2D2D2);border-radius: 10px;text-align: left;box-shadow: 0px 0px 6px 2px gray
}
ul {
    list-style-type: none;
    padding-left: 0px
}
.star{
  background: #F16420;padding-left: 4px;padding-right: 4px;border-radius: 5px;font-size: 1.4em
}
.text-star{
  color: #000;
  font-size: 1.3em;
  padding: 5px
}
.card ul li{
  border-bottom: solid 1px;
}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

.image div{
    color: #fff;
    position: absolute;
    top: 22px;
    left: 50%;
  transform: translate(-50%, -50%);
  width: 100%
}

.text-dark{
  color: #000
}

.top-live{
  background: #DC8C23;border-top-right-radius: 10px;border-top-left-radius: 10px
}

.bg-green{
  background: #0000AA;
  color: #fff;
  text-align: center;
}

.bg_a{
  background: #DC8C23;
  border-left: solid #DC8C23;
  border-right: solid #DC8C23;
}

.bg_ax{
  background: #F7BE7B
}

.bg_az{
  background: #FFC17C
}

.bg_b{
  background: #FFCB92;
  border-left: solid #FFCB92;
  border-right: solid #FFCB92;
}

.line_a{
  border-bottom: solid #F59E2D 2px;
}

.bg_c{
  background: #D7D7D7;
  border-left: solid #D7D7D7;
  border-right: solid #D7D7D7;
}
.bg_cz{
  background: #F6F6F6
}

.mt--1{
  margin-top: -0px
}
.line_c{
  border-bottom: solid #9D9D9D 2px;
}
.bg-bottom{
  background: #D7D7D7;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;height: 10px
}

.footer{
  background: linear-gradient(180deg,#FF0000,rgb(88, 0, 0));
  padding: 10px;
  color: #fff
}

.my-header:before,
.my-header:after {
  content: "";
  
  display: block;
  position: absolute;
  border: 5px solid #111161;
}
.my-header:before {
  border-left-color: transparent;
  border-top-color: transparent;
  left: 5px;
  top: 45px;
}
.my-header:after {
  border-right-color: transparent;
  border-top-color: transparent;
  right: 5px;
  top: 45px;
}