@media only screen and (max-width:1700px) { 
 .payment-table .hidden {display: none;}
}


/*Big Tablets Landscape 1368px*/
@media only screen and (max-width:1368px) { 
  /*Registration Options*/
  .reg-options-header {padding-top: 10%;}
  /*--- Registration Form ---*/
  .reg-container {
    margin-top: 17%;
  }
}

/*Big Tablets 1024px*/
@media only screen and (max-width:1024px) {
  .next-races .main-header h2 {font-size: 1.5rem;}
  .main-header h1 {font-size: 3.5rem;}
  .main-header {padding: 10% 0;}
  /*---Counter---*/
  .counter {padding: 5% 0;}
  /* Past Races Section */
  /*--- Past Races Galery ---*/
  #galery h1 {padding-top: 10%;}
  #galery .container {display: block;}
  #galery .banner, #galery .video-container {width: 100%;}
  /*--- Registration Form ---*/
  .reg-container { 
    height: auto;
    margin-bottom: 20%;}
  .data-form {padding: 0 0 0 3%;}
  /*--- Successful Reg View ---*/
  .container-reg-success {
    margin-top: 10%;
    padding-top: 50px;}
  /*--- Temp View ---*/
  #temp-view .info-view h1 {
    line-height: 1.2;
    font-size: 1.2rem;}
  #temp-view .flex-items {
    display: block;
    margin: 2%;}
  .art-view, .info-view {width: 100%;}
  /*--- Registered Users ---*/
  .reg-count-header h2 {padding-top: 15%;}
}      

/*Weird Phones 915px*/
@media only screen and (max-width:915px) {
  /*---Navigation Bar---*/
   .navbar .logo img {width: 200%;}
  /* Next Races Section */
  /*---Race Info---*/
  .main-header h1 {font-size: 3rem;}
  /*---Counter---*/
  .counter ul li span {font-size: 2.5rem;}
  /*---Registration Form---*/
  .reg-container {height: 82vh;}
  .reg {margin: 10% 20%;}
  .form-container {margin: 18% 5%;}
  /*--- Payment View ---*/
  .payment-view h1 {padding-top: 15%;}
  table {font-size: 0.5rem;}
  /*--- Payment Edit ---*/
  .edit-container {margin: 13.5% 0%;}
  /*--- Past Events Videos ---*/
  #galery .video-container iframe { height: 370px;}
}

/*Weird Tablets 912px*/
@media only screen and (max-width:912px) {
  .hero {
    background: url(/static/app/img/background/triatlon-vertical.jpg);
    background-repeat: none;
    background-position: center;
    background-size: cover;} 
  /*---Registration Form---*/
  .reg-container {height: 68vh;}
}

/*Weird Tablets 896px*/
@media only screen and (max-width:896px) {
  .hero {
    background: url(/static/app/img/background/triatlon.jpg);
    background-repeat: none;
    background-position: center;
    background-size: cover;}
}

/*Tablets 851px*/
@media only screen and (max-width:851px) {
  /* Next Races Section */
  /*---Race Info---*/
  .main-header h1 {font-size: 2.7rem;}
  /*---Counter---*/
  .counter ul li span {font-size: 2.5rem;}
}

/*Phones 820px*/
@media only screen and (max-width:820px){
  .hero {
    background: url(/static/app/img/background/triatlon-vertical.jpg);
    background-repeat: none;
    background-position: center;
    background-size: cover;}
  /*--- Registration Form ---*/
  .reg-container { 
    height: 79vh;
    margin-bottom: 1%;}
}

/*XL+ PHONES 768*/
@media only screen and (max-width:768px) {
  .hero {
    background: url(/static/app/img/background/triatlon-vertical.jpg);
    background-repeat: none;
    background-position: center;
    background-size: cover;} 
  /* Next Races Section */
  /*---Race Info---*/
  .main-header h1 {font-size: 2.3rem;}
  /*---Counter---*/
  .counter ul li span {font-size: 1.5rem;}
  /*---Event Img---*/
  .info-container img {padding-top: 12%;}
  /*Registration Options*/
  .reg-options-header {
    padding-top: 15%;
    padding-bottom: 20px;
  }
  /*---Registration Form---*/
  .form-container {font-size: 1rem;}
  .reg-container {height: 79vh;}
  .reg {margin: 10% 20%;}
  .data-form {padding: 0 0 0 3%;}
  /*--- Success Registration View ---*/
  .container-reg-success {margin: 10% 10%;} 
  /*---Registered Athletes---*/
  .reg-count {margin: 0 15%;}
}

/*XL PHONES 740*/
@media only screen and (max-width:740px) {
  .hero {
    background: url(/static/app/img/background/triatlon.jpg);
    background-repeat: none;
    background-position: center;
    background-size: cover;} 
  /*---Registration Page ---*/
  .reg-container {height: auto;}
}

/*XL PHONES 720*/
@media only screen and (max-width:720px) {
  /*--- Registration Page ---*/
  .reg-container {height: 80vh;}
  /*--- Successful Reg View ---*/
  .container-reg-success {margin-top: 15%;}
}

/*XL PHONES 667px*/
@media only screen and (max-width:667px) {
  /*---Navigation Bar---*/
   .navbar {padding: 0;}
   .navbar .logo img {width: 220%;}
  /* Next Races Section */
  /*---Race Info---*/
  .main-header h1 {font-size: 2rem;}
  .buttons a {font-size: 1rem;}
  .counter ul li span {font-size: 1.5rem;}
  /*---PAST RACES ---*/
  #galery h1 {padding-top: 15%;}
  /*--- Registration Page ---*/
  .reg-container {height: auto;}
  /*--- Sin Cupos View ---*/
  .sin-cupos {padding-top: 15%;}
}

/*IPHONES 568px*/
@media only screen and (max-width:568px) {
  .hero {
    background: url(/static/app/img/background/triatlon-vertical.jpg);
    background-repeat: none;
    background-position: center;
    background-size: cover;}
  /*---Navigation Bar---*/
  .navbar {
    display: block;
    height: 102px;}
  .navbar .logo, .navbar .nav {width: 100%}
  .navbar .logo {
      padding-top: 5px;
      text-align: center;}
  .navbar .logo img {width: 9%;}
  .navbar a {
    font-size: 0.8rem;
    padding: 10px 10px;
    margin: 0 8px;}
  /* Next Races Section */
  /*---Race Info---*/
  .next-races .main-header h2 {font-size: 1.2rem;}
  .main-header h1 {font-size: 1.8rem;}
  .main-header p {font-size: 0.8rem;}
  /*--- Buttons ---*/
  .btn-small {
    padding: 10px;
    margin: 0 5px;}
  /*---Counter---*/
  .counter ul li span {
    font-size: 1.2rem;
    padding: 5px 10px;}
  /*---Registration Options---*/
    .reg-options-header {
      font-size: 1.8rem;
      padding-top: 25%;}
  /*--- Registration Page---*/
  .reg-container {
    height: 62vh;
    margin: 40% 0 20% 0;}
  .reg {margin-bottom: 10%;}
  /*--- Successful Reg View ---*/
  .container-reg-success {margin-top: 25%;}
  /*--- Sin Cupos View ---*/
  .sin-cupos {padding: 25% 5% 0 5%}
  /*---PAST RACES ---*/
  #galery h1 {padding-top: 30%;}
  #galery ul {justify-content: center;}
  #galery .container {margin: 0;}
  #galery .video-1 iframe,
  #galery .video-2 iframe {
    width: 90%;
    height: auto;}
  /*--- Registered Users ---*/
  .reg-count-header h2 {padding-top: 35%;}
  /*---Past events info---*/
  #galery .past-event-info {
    grid-template-columns: 5% 45% 45% 5%;
    padding: 50px;}
}

/*Big Phones 414px*/ 
@media only screen and (max-width:414px) {
  /* Next Races Section */
  /*---Race Info---*/
  .info-container {flex-direction: column-reverse;}
  .info-container .img,  .info-container .left-info {
    width:100%;
    height: auto;}
  .info-container .img img {
    width: 90%;
    padding-top: 0;}
  .grid-container {
    display: block;
    grid-template-columns: max-content;
    padding: 0% 2%;}
  /*Registration Options*/
  .reg-options-header {
    font-size: 1.5rem;
    padding-top: 30%;
  }
  /*--- Form Page ---*/
  .form-container {font-size: 1rem;}
  .reg-buttons a, .reg-buttons button {font-size: 1rem;}
   .data-form {padding: 0 5%;}
   .reg-buttons{padding:40px 2px;} 
   .reg-buttons .reg-btn-2 .btn {padding: 10px 20px;}
   /*--- Successful Registration View ---*/
   .container-reg-success {margin-top: 30%;}
   .reg-info-ver {padding-left: 5px;}
   .reg-info-data  {padding: 0;}
   .reg-info-data p {padding-bottom: 5px;}
   /*--- Sin Cupos View ---*/
  .sin-cupos {padding: 30% 5% 0 5%}
   /*--- Payment View ---*/
  .payment-view h1 {
    font-size: 1.5rem;
    padding-top: 40%;}
  .payment-table .hidden-2 {display: none;}
  /*--- Payment Edit ---*/
  .payment-confirmation {padding: 40px 10px;}
  /*--- Registered Users ---*/
  .reg-count-header h2 {padding-top: 40%;}
}

/*Other Phones 393px*/
@media only screen and (max-width:393px){
  /*---Navigation Bar---*/
  .navbar a {margin: 0 4px;}
  /*--- Payment Edit ---*/
  .edit-container {padding: 20px;}
}

/*Medium Phones 375px*/
@media only screen and (max-width:375px) { 
  /*---Navigation Bar---*/
  .navbar a {margin: 0;}
  /*---Registered Users---*/
  .reg-count-header h2 {padding-top: 45%;}
  .small-dev {display: none;}
  /*--- Successful Reg View ---*/
  .container-reg-success {margin-top: 30%;}
}

/*Small Phones 280px*/
@media only screen and (max-width:280px){
  /*---Hero Section---*/
.hero {
  background: url(/static/app/img/background/triatlon-vertical.jpg);
  background-repeat: none;
  background-position: center;
  background-size: cover;}
  /*---Navigation Bar---*/
  .navbar {height: 75px;}
  .navbar a {
    font-size: 0.6rem;
    padding: 10px 5px;
    margin: 0;}
  /*---Next Race Header---*/
  .next-races h2 {font-size: 1rem;}
  /*---Race Info---*/
    .main-header h1 {font-size: 1.5rem;}
    .main-header h2 {font-size: 1rem;}
    .main-header p {font-size: 0.7rem;}
  /*---Buttons---*/
    .buttons a {font-size: 0.8rem;}
  /*---Counter---*/
    .counter ul li span {
      font-size: 1.2rem;
      padding: 5px 10px;}
   /*--- Form Page ---*/
   .reg-buttons{padding:40px 2px;} 
   .reg-buttons .reg-btn-2 .btn {padding: 10px;}
   .reg-options-header {font-size: 1.2rem;}
   /*--- Successful Registration View --*/
   .reg-info-ver {padding-left: 2px;}
   .container-reg-success {margin: 15% 5%;}
   .container-reg-success h3 {font-size: 0.8rem;}
  /* Past Races Section */
  /*--- Past Races Galery ---*/
    .past-races h2 {font-size: 1rem;}
    #galery ul {padding: 3% 10%;}
    #galery h1 {
      font-size: 1.7rem;
      margin: 0 2%;}
  /*---Registered Users---*/
  .reg-count-header h2 {padding-top: 50%;}
  .reg-count {margin: 0 5%;} 
}