body {
	font-family: 'Roboto', sans-serif;
  background-color: #eee;
  font-size: 20px;
}

footer {
	font-size:9pt;
  color:#999;
  margin-top:30px;
}

video {
  width: 100%    !important;
  height: auto   !important;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto Slab', serif;
}

p {
  margin-bottom: 30px;
}

.nav-pills .nav-link {
  color:#333;
  background-color: #eee;
  margin: 5px;
}

.nav-pills .nav-link:hover {
  color:#fff;
  background-color: #445878;
}

.nav-pills .nav-item .active {
  color:#fff;
  background-color: #0066cc;
}

.showtimer {
  display:none
}

.h-banner h1, .h-banner h2, .h-banner h3, .h-banner h4, .phasebar h1, .phasebar h2, .phasebar h3, .phasebar h4  {
  margin-bottom:0;
}

.separated li {
  margin-bottom: 20px;
}

.popup {
  z-index: 1050;
  background-color: rgba(0,0,0,0.8);
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow:hidden;
  max-width: none;
}

.popup-inner {
  display:flex;
  height:100%;
  max-width: 650px;
  margin: auto;
}

#popup-trigger {
  display: none;
}

#contenido {
  width: 100%;
  max-width: 890px;
  background: white;
  box-shadow: 0px 0px 50px 1px rgba(0,0,0,0.35);
}

#atc-button {
  display:none;
}

.yellow-check li {
    padding-right: 20px;
    background-image: url(../img/mbm/check-yellow.png);
    background-repeat: no-repeat;
    background-position: 0px 7px;
    list-style-type: none;
    padding-left: 45px;
}

ul.checkmark li {
  list-style-type: none;
  margin-bottom: 1em;
  padding: 0.25em 0 0 2.5em;
  position: relative;
}

ul.checkmark li:before {
  content: " ";
  display: block;
  border: solid 0.8em #52A125;
  border-radius: .8em;
  height: 0;
  width: 0;
  position: absolute;
  left: 0.5em;
  top: 40%; 
  margin-top: -0.5em;
}

ul.checkmark li:after {
  content: " ";
  display: block;
  width: 0.5em;
  height: 0.8em;
  border: solid white;
  border-width: 0 0.2em 0.2em 0;
  position: absolute;
  left: 1em;
  top: 40%;
  margin-top: -0.2em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

ul.exes li {
  list-style-type: none;
  margin-bottom: 1em;
  padding: 0.25em 0 0 2.5em;
  position: relative;
}

ul.exes li:before {
  content: " ";
  display: block;
  border: solid 0.8em #C30000;
  border-radius: .8em;
  height: 0;
  width: 0;
  position: absolute;
  left: 0.5em;
  top: 40%; 
  margin-top: -0.5em;
}

ul.exes li:after {
  content: "X";
  display: block;
  position: absolute;
  left: 1em;
  top: 40%;
  margin-top: -0.4em;
  color:white;
  font-weight: 700;
}

.text-shadow {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

.text-red {
  color: #d00000;
}

.text-yellow {
  color: #ffd943;
}

.light-bg {
  background-color: #EEEFF7;
}

.h-banner {
  position: relative;
  margin: 20px 0;
  padding: 20px;
  box-shadow: 0 0 4px 0 rgba(0,0,0,0.69);
}

.banner left, .banner right {
  display: none;
}

.phasebar {
    width: 400px;
    margin: 20px 50px 20px -58px;
}

.alignleft {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

.phasebar .inside {
    position: relative;
    z-index: 3;
    padding: 20px 20px 15px 28px;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.69);
}

.phasebar .inside:before {
    left: 0;
    border-width: 0 10px 10px 0;
    border-color: transparent #000 transparent transparent;
}
.phasebar .inside:before {
    display: block;
    content: '';
    position: absolute;
    bottom: -10px;
    width: 0;
    height: 0;
    border-style: solid;
}

.bg-dark-blue {
  background-color:#0066cc;
}

@media only screen and (max-device-width: 400px) {  
  .phasebar {
    width:100%;
    display: block;
    float:none;
    margin: 40px auto;
    padding: 0;
  }
  
  .phasebar .inside:before {
    display: none;
  }
  
  ul.checkmark {
  padding-left:0;
}
}

@media only screen and (max-device-width: 600px) {
  .m-5 {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding: 0px !important;
  }
}

@media only screen and (min-device-width: 970px) {
  .pull-left {
    float:left;
    margin-left: -150px;
    margin-right: 20px;
    margin-bottom: 20px;
    max-width: 400px;
  }

  .pull-right {
    float:right;
    margin-left: 20px;
    margin-right: -150px;
    margin-bottom: 20px;
    max-width: 400px;
  }
  
  .h-banner {
    margin:0px -15px 25px -15px;
  }
    .banner .left:before, .h-banner .left:before {
    top: -10px;
    border-width: 10px 10px 0 0;
    border-color: transparent;
    }

    .banner .left:after, .h-banner .left:after {
        bottom: -10px;
        border-width: 0 15px 10px 0;
        border-color: transparent #333 transparent transparent;
    }

    .banner .left:before, .banner .left:after, .h-banner .left:before, .h-banner .left:after {
        left: 0;
    }

    .banner .left:before, .banner .left:after, .banner .right:before, .banner .right:after, .h-banner .left:before, .h-banner .left:after, .h-banner .right:before, .h-banner .right:after {
        display: block;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
    }

    .banner .right:before, .h-banner .right:before {
        top: -10px;
        border-width: 10px 0 0 10px;
        border-color: transparent;
    }
    .banner .right:before, .banner .right:after, .h-banner .right:before, .h-banner .right:after {
        right: 0;
    }
    .banner .left:before, .banner .left:after, .h-banner .right:before, .banner .right:after, .h-banner .left:before, .h-banner .left:after, .h-banner .right:before, .h-banner .right:after {
        display: block;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
    }
    .banner .right:after, .h-banner .right:after {
        bottom: -10px;
        border-width: 10px 15px 0 0;
        border-color: #333 transparent transparent;
    }
  
}
@media (max-width:768px){
	img {
    max-width: 100% !important;
}
}