@import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:400,500,600,700");
body {
  font-family: "Barlow Condensed", sans-serif;
  margin: 0;
  font-size: 18px;
  line-height: 1.4em;
}

.backgroundImage {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: -1;

}

body p, h2 {
    color: #fff;
}

h2,h1 {
    font-size:30px;
    margin: 20px;
}

@media (max-width: 800px) {
  body {
    font-size: 16px;
  }
}
@media (max-width: 500px) {
  body {
    font-size: 14px;
  }
}

  .bodog-btn {  
    background-color: #ff0000;  
    border-radius: 0.5em;  
    padding: 0.8em 2.5em;  
    color: #fff;  
    text-transform: uppercase;  
    text-decoration: none;  
    cursor: pointer;  
  }
  

.logoCopa {
    width: 100px;
    padding: 10px;
}


.ptable table{
	margin: 30px auto;
	border-collapse: collapse;
}


div.cta {
  padding-top: 40px;
  width: 100%;
}

.ptable{
  margin: 0px 0% 30px 0%;
  color: #000000;
  font-size: 14px;
}

tbody {
  font-size: 14px !important;
}

tbody tr td {
  text-align: center !important;
}

span.badge {
  margin-left: 0 !important;
}

th, td {
    padding: 5px;
    border-radius: 0;
}

thead tr th:first-child {
  border-top-left-radius: 8px !important;
}

thead tr th {
  font-size: 12px;
}

thead tr th:last-child {
  border-top-right-radius: 8px;
}

th {
	background-color:#044a02;
  color: #ffe221;
  border-radius: none;
  text-align: center;
}

.wpos, .linea {
	text-align: center;
}

.wpos td, .linea:nth-child(1) td,.linea:nth-child(2) td,.linea:nth-child(1) span.badge,.linea:nth-child(2) span.badge{
	color: #00b800;
}

.pos{
	text-align: center;
}

.pos td, .linea:nth-child(3) td, .linea:nth-child(4) td,.linea:nth-child(3) span.badge, .linea:nth-child(4) span.badge{
	color: #ff7b21;
}

table .col{
	border-bottom: 1px solid #FFFFFF;
}

.wpos:hover , .linea:nth-child(1):hover,.linea:nth-child(2):hover{
	background-color: #015f01;
}

.wpos:hover td, .linea:nth-child(1):hover,.linea:nth-child(2):hover,.linea:nth-child(1) span.badge:hover,.linea:nth-child(2) span.badge:hover{
	color: #fff;
}

.pos:hover, .linea:nth-child(3):hover, .linea:nth-child(4):hover{
  background-color: #ff7b21;
  color: #fff;
}

.pos:hover td, .linea:nth-child(3):hover td, .linea:nth-child(4):hover td,.linea:nth-child(3):hover  span.badge, .linea:nth-child(4):hover  span.badge{
	color: #000000;
}


.container-fluid {
    width: 100%;
    display: flex;
    justify-content: center;
    color: white;
    font-family: Barlow, Arial, sans-serif;
    flex-direction: row;
  }
  
  .container {
      display: flex;
      width: 100%;
      background-color:rgba(0,0,0,.5);
      margin: 0 0 0 5%;
      justify-content: center;
      color: white;
      font-family: Barlow, Arial, sans-serif;
      flex-direction: column;
      align-items: center;
  }

  .sectionContent {
      display: flex;
      justify-content: center;
      flex-direction: row;
      align-items:center;
      width: 100%;,
  }

  .cardTitle {
      font-weight: bold;
      text-align: center;
  }

  .cardTitle p {
    color: #fff;
  }


  .containerBanner {
    position: relative;
    text-align: center;
    color: white;
    background-color: #000000a8;
  }
  
  .bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
  }
  
  .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
  }

  .flexFooter {
    display: flex;
    width: 100%;
    background-color: #ccc7c5;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 15%;
  }
  
  .flexFooter p {
    color: #505050;
  }

  .top-right {
    position: absolute;
    top: 8px;
    right: 16px;
  }
  
  .bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
  }
  
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .section1 {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items:center;
    width: 100%;
  }
  
  #bannerHeaderEs {
    background: url("/contents/copa-america/assets/img/copa-america.jpg");
    height: 190px;
    width: 100%;
    background-repeat: no-repeat;
  }

  #bannerHeaderPt {
    position: absolute;
  }

  #bannerApuesta {
    background: url("/contents/copa-america/assets/img/copa-america-apuesta.jpg");
    height: 200px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
  }

  ul.collapsible {
    margin-bottom: 0 !important;
  }

  div.sectionFooter  .sectionContent {
    height: 200px;
  }

  .ctaBanner {
    padding-bottom:30px;
    padding-right:30px;
    position: relative;
  }

  #bannerAposte {
    background: url("/contents/copa-america/assets/img/copa-america-aposte.jpg");
    height: 200px;
    width: 100%;
    background-size: auto;
    background-repeat: no-repeat;
  }

  .sectionBanner {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items:flex-end;
    width: 100%;
  }


  .sectionBanner .sectionContent {
    text-align: left;
    border-bottom: 2px solid white;
    vertical-align: middle;
    background-color: #015f0100;
    width: 100%;
    padding-top:70px;
  }

  .section1 .sectionContent {
    text-align: left;
    border-bottom: 2px solid white;
    vertical-align: middle;
    background-color: #015f0100;
    width: 100%;
    padding-top:70px;
  }

  .flexRow {
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  .flexRowEvenly {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  .flexRowCenter {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .faseFinal {
    width: 100%;
    padding: 0 10%;
  }

  .flexCopa {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .flexTitles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .flexTitles p {
    font-size: 25px;
  }

  .flexCopa img {
    width: 90px;
  }

  .flexColumn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    background-color:#0404024f;
  }

  .flexColumn p{
    font-size: 12px;
  }

  .flexColumn img{
    width: 20px;
  }

  .section1 .sectionContent h2{
      color: white;
  }

  .section2, .section4 {
    width: 100%;
  }

  .section4 {
    display: flex;
    justify-content: center;
    align-items: center;
  }

   .section2 .sectionContent {
    text-align: center;
    border-top:2px solid white;
    border-bottom: 2px solid white;
    vertical-align: middle;
    background-color: #044a02bf;
    width: 100%;
    flex-direction: column;
    padding: 20px;
  }

  .section4 .sectionContent {
    text-align: center;
    border-top:2px solid white;
    vertical-align: middle;
    background-color: #044a02bf;
    width: 100%;
    flex-direction: column;
    padding: 20px;
    max-width: 800px;
  }

  .section2 .sectionContent h2,.section4 .sectionContent h2 {
    margin-top: 0;
  }

  .collapsible-body {
    display:block !important;
  }


  .sectionInfo .sectionContent {
    text-align: center;
    border-bottom: 2px solid white;
    vertical-align: middle;
    background-color: #000000a8;
    width: 100%;
    flex-direction: column;
    padding: 20px;
  }

  .container .sectionFooter {
    width: 100%;
  }

  .container .sectionArticle {
    width: 100%;
  }

  div.sectionArticle .collapsible .collapsible-body .sectionContent {
    color: #fff !important;
    text-align: left !important;
    vertical-align: middle;
    background-color: transparent;
    width: 100%;
    flex-direction: column;
    padding: 20px;
  }

  .collapsible-body .sectionContent {
    align-items: flex-start !important;
  }

  .sectionArticle .collapsible li div {
    background-color: #000;
    text-align: center;
  }

  .sectionArticle .collapsible li div i, .sectionArticle .collapsible li div span {
    text-align: center;
    color:#fff;
  }

  .section2 .sectionContent p, .sectionInfo .sectionContent p, .sectionArticle .sectionContent p {
      color: white;
      margin: 0;
  }

  .section3 .sectionContent {
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: flex-start;
    }

  .section3 .groupCard {
      width: 33%;
      text-align: center;
      padding: 20px;
  }

  .section3 .tableDate {
    padding: 10px 20%;
    border: 1px solid #4d4e49;
    background-color:#000;
  }

  .section3 .tableDate td {
    text-align:center;
    background-color: #044a0252;
    border: 1px solid #4e4e49;
  }

  .section3 .tableDate th {
    background-color:transparent;
    text-align: center;

  }

  .collapsible-header {
    background-color: #000000a8 !important;
    padding: 2rem !important;
  }

  .collapsible-header h2 {
    margin: 0;
    font-size: 20px;
  }

  .subTitle {
    font-size: 20px;
    font-weight: bold;
  }

  .titleDate p{
    color:#fff; 
    background-color:#f7f7f747;
    margin-bottom:10px;
  }

  .icon {
    font-size:40px;
    cursor: pointer;
  }

  .nav .items {
    padding: 30px 0px;
  }

  .nav .items ul li {
    color: #fff;
    padding: 15px;
    font-size: 20px;
  }

  .logoBodog {
    width: 160px;
    right: 20px;
    margin: 20px;
  }

  .nav .items ul li:hover {
    background-color: #c50d00;
  }
  .nav {
    position: fixed;
    width: 15%;
    background-color: #141414;
    height: 100%;
    color: #fff;
    display: none;
    z-index: 9999;
  }

  .iconMenu {
    font-size: 35px !important;
  }

  .openbtn {
    font-size: 40px;
    cursor: pointer;
    background-color: #333;
    color: white;
    padding: 10px 15px;
    border: none;
    text-align: left;
    height: 74px;
  
  }

  .openbtn:hover {
    background-color: #414141;
  }

  .navbar {
    top: 0;
    width: 100%;
    background-color:#1f1f1f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    z-index: 9999;
    padding: 0 5%;
  }

  .openbtn:active{
    background-color:#414141;
  }
  .openbtn:hover {
    background-color: #414141;
  }

  .openbtn:focus {
    background-color: #414141;
  }

  .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 40px;
    margin-left: 50px;
    color: #fff;
    padding: 20px 5px;
    cursor: pointer;
  }

  .imgArticle {
    width: 100%;
    text-align: left !important;
    padding: 20px 0px;
  }

  .showOnMobile {
    display: none;
  }

  @media (max-width: 359px) {
    .bodog-btn {  
      font-size: 9px !important;
    }
  }

  @media (max-width: 380px) {

    .navbar {
      padding: 0;
    }
    .showOnDesktop {
      display: none;
    }

    .showOnMobile {
      display: block;
    }

    .sectionBanner {
      display: flex;
      justify-content: center;
      flex-direction: row;
      align-items:flex-end;
      width: 100%;
    }

    .imgArticle img {
      width: 100%;
    }

    h2, h1 {
      font-size: 25px;
    }
    .ptable {
      font-size: 9px !important;
    }

    .nav .items ul {
      padding-top: 60px;
    }

    .items ul li {
      font-size: 11px;
    }

    #bannerHeaderEs {
      background: url("/contents/copa-america/assets/img/copa-america-mobile.jpg");
      height: 230px;
      width: 100%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      cursor: pointer;
    }

    #bannerHeaderPt {
      background: url("/contents/copa-america/assets/img/copa-america-mobile.jpg");
      height: 230px;
      width: 100%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      cursor: pointer;
      
    }

    #bannerApuesta {
      background: url("/contents/copa-america/assets/img/copa-america-apuesta-mobile.jpg");
      height: 200px;
      width: 100%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      cursor:pointer;
      
    }

    #bannerAposte {
      background: url("/contents/copa-america/assets/img/copa-america-aposte-mobile.jpg");
      height: 200px;
      width: 100%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      cursor:pointer;
      
    }

  }

  @media (max-width: 830px) {
    .section4 .sectionContent {
      display: none;
    }

    .bodog-btn {  
      font-size: 10px;
    }
  }

  #content7 .sectionContent {
    text-align: center !important;
  }

  #Btn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 5%;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color:#333;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
  }

  #Btn .icon {
    font-size: 30px;
  }
  

  @media (max-width: 1200px) {

    #Btn .icon {
      font-size: 20px;
    }

    .collapsible-header h2 {
      font-size: 13px;
    }
    .nav {
      display: none;
    }
    .openbtn {
      font-size: 30px;
    }



    .nav .items ul li {
      font-size: 15px;
    }
    
    .section1 .sectionContent {
      flex-direction: column;
    }

    .container {
      margin-left:0;
      width: 100%;
    }

    .logoBodog {
      margin: 20px;
      width: 100px;
    }

    .nav {
      width: 40%;
      background-color:#000;
      overflow-y: scroll;
      overflow: auto;
    }

    h2 {
      font-size:20px;
    }

    .section3 {
      width: 100%;
    }
    .section3 .sectionContent {
      flex-direction: column;
    }

    .section3 .groupCard {
      width: 100%;
    }

    .section3 .groupCard:first-child {
      padding-top:30px;
    }

    .ptable {
      font-size: 12px;
      margin: 0;
    }

    .ptable table {
      margin-bottom: 0;
    }

    .cardTitle p {
      margin:0;
    }
  }