/* Help older browsers with HTML5 layout elements */
header, nav, footer, section, figure, figcaption {
  display: block;
  }
  /* Get rid of white border around browser window */
  body {
  margin: 0;
  padding: 0;
  }
  /* Get rid of large margins on headings */
  h1, h2, h3, h4, h5, h6 {
      margin: 0;
}

#wrapper {
/* Set your own widths, % for fluid, px for fixed */
width: 100%;
margin: 0 auto;
}

.img-desktop {
  display: block;

    /* The required Styles */

    width: 100%;
    border: 0px;
}

.img-mobile {
display: none;
 
}

.img-raffle-desk {
  display: block;

    /* The required Styles */

    width: 100%;
    border: 0px;
}

.img-raffle-mob {
display: none;
 
}

#wrapperheader {
  /* Set your own widths, % for fluid, px for fixed */
  width: 100%;
  padding:30px 0px 30px 0px;
  background-color:#eee;
  margin: 0 auto;
  }
/*
  #columnsheader {
    display: table;
    border-collapse: collapse;
    width: 80%; 
    margin: 0 auto;
    }
    */

    #columnsheader {
      width: 80%; 
      margin: 0 auto;
      }

      header{
        background-color: #262626;
      }

      li{
        list-style:none;
      }

      .nav-item a:link, .nav-item a:visited {
        color: #000000;
        text-decoration: none;
        }
        .nav-item a:hover, .nav-item a:active {
        color: #000000;
        text-decoration-thickness: 4px;
        text-shadow: 2px 2px 5px #CD6088;
        }

      .navbar{
        min-height: 70px;
        display:flex;
        justify-content:space-between;
        align-items: center;
        padding: 0 24px;
      }

      .nav-menu{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 60px;
      }

      .nav-branding{
        background-color: #CD6088;
      }

      .nav-link{
        transition: 0.7s ease;
      }

      .nav-link:hover{
        color: aqua;
      }

      .hamburger{
        display: none;
       cursor: pointer; 
      }

      .bar{
        display: block;
        width: 25px;
        height:3px;
        margin:5px auto;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #CD6088;
      }






  /* Aside columns in columns div */
#columnsheader aside {
  display: table-cell; /* Use any width and padding you like */
  width: 50%;
  text-align:left;
  height:85px;
  vertical-align: middle;
  }
  
  /*  article in the columns */
  #columnsheader article {
  text-align: right;
  background-color:#000000;
  }

  #columnsheader article a {
    text-decoration: none; 
    outline: none; 
    padding:0px 0; 
    display: block; 
      float:left;
      width: 25%;
      height:85px;
    text-align: center;
    line-height:85px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    }

    #columnsheader article a:link, #columnsheader article a:visited {
      color: #000000;
      text-decoration: none;
      }
      #columnsheader article a:hover, #columnsheader article a:active {
      color: #000000;
      text-decoration-thickness: 4px;
      text-shadow: 2px 2px 5px #CD6088;
      }


      #wrapperdesc {
        /* Set your own widths, % for fluid, px for fixed */
        width: 100%;
        background-color:#000000;
        margin: 0 auto;
        padding:30px 0px 30px 0px;
        }
      
        #columnsdesc {
          display: table;
          border-collapse: collapse;
          width: 80%; /* border is optional, style to taste */
          margin: 0 auto;
          color:white;
          }
      
       
        /* Main article in the columns */
        #columnsdesc article {

        }

        #wrapperinfo {
          /* Set your own widths, % for fluid, px for fixed */
          width: 100%;
          background-color:#eee;
          margin: 0 auto;
          padding:30px 0px 30px 0px;
          }

          #wrappersponsors {
          /* Set your own widths, % for fluid, px for fixed */
          width: 100%;
          background-color:#000000;
          margin: 0 auto;
          padding:30px 0px 30px 0px;
          }

          .sponsorbox {
              width:25%;
              text-align:center;
              color:#ffffff;
              display: block; 
              float:left;
              padding-bottom: 10px;
            }

            .boxsponsor {
            border: 3px solid #CD6088;
            margin: 0 auto;
            width:80%;
            height:250px;
            }
        
          #columnsinfo {
            display: table;
            border-collapse: collapse;
            width: 80%; /* border is optional, style to taste */
            margin: 0 auto;
            }

            .infobox {
              width:25%;
                      text-align:center;
                      color:#000000;
                      display: block; 
                      float:left;
            }

            .box {
            border: 3px solid #CD6088;
            margin: 0 auto;
            width:80%;
            height:814px;
            }
  
            .step1 {
            padding-top: 20px;
  
            }
          
            .step2 {
            padding: 20px 0px 20px 0px;
              
            }
            
            .step3 {
            padding: 0px 10px 30px 10px;
            line-height: 34px;
            font-size: 1em;
            }

            .step3 a:link, .step3 a:visited {
              color: #000000;
              text-decoration: underline;
              }
              .step3 a:hover, .step3 a:active {
              color: #000000;
              text-shadow: 2px 2px 5px #CD6088;
              text-decoration: underline;
              }

              #video{
                      position:absolute;
                      top:0;
                      left:0;
                      width:100%;
                      height:100%;
                    }

             #video1{
                padding:177.78% 0 0 0;position:relative;display:flex;height:30%;
             }

          /* Main article in the columns */
          #columnsinfo article {
          text-align: right;
          }

          #wrapperreg {
            /* Set your own widths, % for fluid, px for fixed */
            width: 100%;
            background-color:#000000;
            margin: 0 auto;
            padding:30px 0px 30px 0px;
            }
          
            #columnsreg {
              width: 80%; /* border is optional, style to taste */
              margin: 0 auto;
              color:#eee;
              align-items: center;
              display: flex;
              }

                #leftreg a:link, #leftreg a:visited {
                  color: #eee;
                  text-decoration: underline;
                  }
                  #leftreg a:hover, #leftreg a:active {
                  color: white;
                  text-shadow: 2px 2px 5px #CD6088;
                  text-decoration: underline;
                  }
                  .cont {
                    width:100%;
                    align-items: center;
                  display: flex;
                  }
  
                  .cont2 {
                    width:100%;

                  }
            /* Aside columns in columns div */
          #rightreg {
            width: 40%;
            text-align:right;
            float:right;
            }
            
            /* Main article in the columns */
            #leftreg {
              text-align: right;
              vertical-align: middle;
              line-height: 34px;
              font-size: 15px;
              float:right;
              height:550px;
              width: 60%;

              display: flex;
              justify-content: center;
              align-items: center;
            }

            #reg1 {
              font-size: 30px;
            }
            #reg2 {
              font-size: 30px;
            }

            #wrapperg {
              /* Set your own widths, % for fluid, px for fixed */
              width: 100%;
              background-color:#eee;
              margin: 0 auto;
              padding:30px 0px 30px 0px;
              }



            
              #columnsg {
                width: 80%; /* border is optional, style to taste */
                margin: 0 auto;
                color:#000000;
                
                }

                
            
              /* Aside columns in columns div */
            #leftg {
              /* Use any width and padding you like */
              width: 40%;
              text-align:left;
              float:left;
              }


              
              /* Main article in the columns */
              #rightg {
              text-align: left;
              vertical-align: middle;
              line-height: 34px;
              font-size: 15px;
              float:left;
              height:550px;
              width: 60%;
              display: flex;
              justify-content: center;
              align-items: center;
              }

              #wrapperfoot {
                /* Set your own widths, % for fluid, px for fixed */
                width: 100%;
                background-color:#000000;
                margin: 0 auto;
                padding:30px 0px 30px 0px;
                margin-bottom: 50px;
                }
              
                #columnsfoot {
                  display: table;
                  border-collapse: collapse;
                  width: 80%; /* border is optional, style to taste */
                  margin: 0 auto;
                  }
              
                       
                /* Main article in the columns */
                #columnsfoot article {
                text-align: center;
                color:white;
                }

                #columnsfoot article a:link, #columnsfoot article a:visited {
                  color: #eee;
                  text-decoration: underline;
                  }
                  #columnsfoot article a:hover, #columnsfoot article a:active {
                  color: white;
                  text-shadow: 2px 2px 5px #CD6088;
                  text-decoration: underline;
                  }

                  @media (max-width: 1645px){
                    .infobox {
                      width:50%;
                      text-align:center;
                      color:#000000;
                      display: block; 
                      float:left;
                    }

                    #video{
                      
                      width:100%;
                      height:55%;
                    }
                  }

                  @media (max-width: 1280px){
                    .hamburger{
                      display: block;
                    }


                    .nav-menu{
                      position: fixed;
                      left:-300%;
                      top:70px;
                      gap:0;
                      flex-direction: column;
                      background-color: #262626;
                      width: 100%;
                      text-align: center;
                      transition: 0.3s;
                    }

                    .nav-item{
                      margin: 16px 0;
                    }

                    .nav-item a:link, .nav-item a:visited {
                      color: #eee;
                      text-decoration: none;
                      }
                      .nav-item a:hover, .nav-item a:active {
                      color: #eee;
                      text-decoration-thickness: 4px;
                      text-shadow: 2px 2px 5px #CD6088;
                      }

                    .nav-menu.active{
                      left: 0;
                    }

                    /* https://www.google.com/search?q=how+to+make+an+easy+hamburger+navbar&oq=how+to+make+an+easy+hamburger+nav&aqs=chrome.1.69i57j33i22i29i30.19039j0j7&sourceid=chrome&ie=UTF-8#kpvalbx=_FJMLY4SGN9HH0PEPu8qZoAM_22 */

                    .infobox {
                     width:50%;
                      text-align:center;
                      color:#000000;
                      display: block; 
                      float:left;
                    }

                    #video{
                      
                      width:100%;
                      height:65%;
                    }
                  }

                  @media (max-width: 1100px) {
                  .img-raffle-mob {
                    display: block;
                    width: 85%;
                    margin: auto;
                 border: 0px;
              
              }
               .img-raffle-desk {
                   display: none;
              
              }

              .img-mobile {
                display: block;
                width: 85%;
                margin: auto;
             border: 0px;
          
          }
           .img-desktop {
               display: none;
          
          }
            }
                  @media (max-width: 1029px) {
                    
                    #wrapper {
                      /* Set your own widths, % for fluid, px for fixed */
                      width: 100%;
                      min-width: 320px;
                      max-width: 1029px;
                      margin: 0 auto;
                      }
                      
                      #wrapperheader {
                        /* Set your own widths, % for fluid, px for fixed */
                        width: 100%;
                        background-color:#eee;
                        margin: 0 auto;
                        display: block;
                        }
                      
                        #columnsheader {
                          width: 80%; /* border is optional, style to taste */
                          margin: 0 auto;
                          
                          }

                          .hamburger{
                            display: block;
                          }

                          .nav-menu{
                            position: fixed;
                            left:-300%;
                            top:70px;
                            gap:0;
                            flex-direction: column;
                            background-color: #262626;
                            width: 100%;
                            text-align: center;
                            transition: 0.3s;
                          }

                          .nav-item{
                            margin: 16px 0;
                          }

                          .nav-item a:link, .nav-item a:visited {
                            color: #eee;
                            text-decoration: none;
                            }
                            .nav-item a:hover, .nav-item a:active {
                            color: #eee;
                            text-decoration-thickness: 4px;
                            text-shadow: 2px 2px 5px #CD6088;
                            }

                          .nav-menu.active{
                            left: 0;
                          }

                          /* https://www.google.com/search?q=how+to+make+an+easy+hamburger+navbar&oq=how+to+make+an+easy+hamburger+nav&aqs=chrome.1.69i57j33i22i29i30.19039j0j7&sourceid=chrome&ie=UTF-8#kpvalbx=_FJMLY4SGN9HH0PEPu8qZoAM_22 */


                      
                        /* Aside columns in columns div */
                        #columnsheader aside {
                          display: block;
                          width: 100%;
                          text-align:center;
                          
                          margin: 0px 0px 0px 0px;
                          }




                        
                        /* Main article in the columns */
                        #columnsheader article {
                          text-align: right;
                          margin: 0px 0px 0px 0px;
                          padding: 0px 0px 0px 0px;
                          background-color: aqua;
                          width: 100%;
                          }
                        
                        #columnsheader article a {
                          text-decoration: none; 
                          outline: none; 
                          margin: 0px 0px 0px 0px;
                          padding: 0px 0px 0px 0px; 
                          

                          }
                      
                          #columnsheader article a:link, #columnsheader article a:visited {
                            color: #000000;
                            text-decoration: none;
                            }
                            #columnsheader article a:hover, #columnsheader article a:active {
                            color: #000000;
                            text-decoration-thickness: 4px;
                            text-shadow: 2px 2px 5px #a3f;
                            }
                      
                      
                            #wrapperdesc {
                              /* Set your own widths, % for fluid, px for fixed */
                              width: 100%;
                              background-color:#000000;
                              margin: 0 auto;
                              padding:30px 0px 30px 0px;
                              
                              }
                            
                              #columnsdesc {
                                display: block;
                                width: 80%; /* border is optional, style to taste */
                                margin: 0 auto;
                                color:white;
                                }
                              
                              /* Main article in the columns */
                              #columnsdesc article {
                              text-align: center;
                              display: block;
                              }
                      
                              #wrapperinfo {
                                /* Set your own widths, % for fluid, px for fixed */
                                width: 100%;
                                background-color:#eee;
                                margin: 0 auto;
                                padding:30px 0px 30px 0px;
                                display: block;
                                }
                              
                                #columnsinfo {
                                  
                                  width: 80%; /* border is optional, style to taste */
                                  margin: 0 auto;
                                  }
                      
                                  .infobox {
                                    width:100%;
                                    text-align:center;
                                    color:#2D2B2B;
                                    display: block; 
                                    float:left;
                    }
                      
                                  .box {
                                  border: 3px solid #CD6088;
                                  margin: 0 auto;
                                  width:80%;
                                  height:814px;
                                 
                                  }

                                  .sponsorbox {
                                    width:100%;
                                    text-align:center;
                                    color:#ffffff;
                                     
                                    
                                  }
                      
                                  .boxsponsor {
                                  border: 3px solid #CD6088;
                                  margin: 0 auto;
                                  margin-bottom: 30px;
                                  width:100%;
                                 
                                  }
                        
                                  .step1 {
                                  padding-top: 30px;
                        
                                  }
                                
                                  .step2 {
                                  padding: 30px 0px 30px 0px;
                                    
                                  }
                                  
                                  .step3 {
                                  padding: 0px 10px 30px 10px;
                                  line-height: 24px;
                                  font-size: 1em;
                                  }
                      
                                  .step3 a:link, .step3 a:visited {
                                    color: #000000;
                                    text-decoration: underline;
                                    }
                                    .step3 a:hover, .step3 a:active {
                                    color: 2D2B2B;
                                    text-shadow: 2px 2px 5px #CD6088;
                                    text-decoration: underline;
                                    }

                                    #video{
                                       
                                       width:100%;
                                       height:33%;
                                    }

                                    #video1{
                position:relative;display:flex;height:30%;
             }
                      
                                /* Main article in the columns */
                                #columnsinfo article {
                                text-align: right;
                                }
                      
                                #wrapperreg {
                                  /* Set your own widths, % for fluid, px for fixed */
                                  width: 100%;
                                  background-color:#000000;
                                  margin: 0 auto;
                                  padding:30px 0px 30px 0px;
                                  display: block;
                                  }
                                
                                  #columnsreg {
                                    width: 80%; /* border is optional, style to taste */
                                    margin: 0 auto;
                                    color:#eee;
                                                                        
                                    }
                      
                                      #leftreg a:link, #leftreg a:visited {
                                        color: #eee;
                                        text-decoration: underline;
                                        }
                                        #leftreg a:hover, #leftreg a:active {
                                        color: white;
                                        text-shadow: 2px 2px 5px #CD6088;
                                        text-decoration: underline;
                                        }
                                
                                        .cont {
                                          width:100%;
                                          
                                        }
  
                                        .cont2 {
                                          width:100%;
                                          
                                        }

                                 /* Aside columns in columns div */
                                    #rightreg {
                                      /* Use any width and padding you like */
                                      width:100%;
                                      text-align:center;
                                      padding-bottom: 20px;
                                      }
                                    
                                      
                                    /* Main article in the columns */
                                    #leftreg {
                                      text-align: left;
                                      line-height: 34px;
                                      font-size: 20px;
                                      width:100%;
                                      
                                     
                                      }
                      
                                  #wrapperg {
                                    /* Set your own widths, % for fluid, px for fixed */
                                    width: 100%;
                                    background-color:#eee;
                                    margin: 0 auto;
                                    padding:30px 0px 30px 0px;
                                    display: block;
                                    }
                      
                      
                      
                                  
                                    #columnsg {
                                      width: 80%; /* border is optional, style to taste */
                                      margin: 0 auto;
                                      color:#000000;
                                                                          
                                      }

                                      

                                  
                                    /* Aside columns in columns div */
                                    #leftg {
                                      /* Use any width and padding you like */
                                      width:100%;
                                      text-align:center;

                                      }
                                    
                                      
                                    /* Main article in the columns */
                                    #rightg {
                                      text-align: left;
                                      line-height: 34px;
                                      font-size: 20px;
                                      width:100%;
                                     
                                      }
                      
                                    #wrapperfoot {
                                      /* Set your own widths, % for fluid, px for fixed */
                                      width: 100%;
                                      background-color:#000000;
                                      margin: 0 auto;
                                      padding:30px 0px 30px 0px;
                                      margin-bottom: 50px;
                                      display: block;
                                      }
                                    
                                      #columnsfoot {
                                        
                                        width: 80%; /* border is optional, style to taste */
                                        margin: 0 auto;
                                        }
                                    
                                             
                                      /* Main article in the columns */
                                      #columnsfoot article {
                                      text-align: center;
                                      
                                      width: 100%;
                                      color:white;
                                      }
                      
                                      #columnsfoot article a:link, #columnsfoot article a:visited {
                                        color: #eee;
                                        text-decoration: underline;
                                        }
                                        #columnsfoot article a:hover, #columnsfoot article a:active {
                                        color: white;
                                        text-shadow: 2px 2px 5px #CD6088;
                                        text-decoration: underline;
                                        }

                  }

                  @media (max-width: 900px) {

                
                    /* Main article in the columns */
            #leftreg {
              font-size: 14px;
              height: auto;

            }

            .infobox {
                      width:100%;
                      text-align:center;
                      color:#000000;
                      display: block; 
                      float:left;
                    }

            .box {
                                  border: 3px solid #CD6088;
                                  margin: 0 auto;
                                  width:80%;
                                  height:814px;
                                 
                                  }

            #reg1 {
              font-size: 27px;
            }
            #reg2 {
              font-size: 27px;
            }

            #video{
                                       
                                       width:100%;
                                       height:60%;
                                    }
              
              #video1{
                position:relative;
             }

              
              /* Main article in the columns */
              #rightg {

              font-size: 14px;
              height: auto;
              }
                  }