/*  Header */


header {


    background-color: rgb(33, 43, 92);

}

#imgicon {

    display: flex;
    justify-content: flex-end;
   
   

}





#mobilemenu {
		
	visibility: hidden;
	position: absolute;
	background-color: transparent;
		
	}


    .livediv {

        margin-bottom: 30px;
    }


.iconimg {

    border: solid 2px white;
    border-radius: 30px;

}

.no-underline {
    text-decoration: none;
    color: inherit;
}


a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit color from parent */
}

a:active {

    text-decoration: none;
}

a:visited {

    text-decoration: none;
}

.homelink {

    color:white;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding-top: 10px;
    margin-left: 40px ;
}



.pricetotal {


    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 10px;
}




.importanttext {

    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: rgb(22, 180, 143);


}


/*  cards */




#card-table {

    background-color: rgb(33, 43, 92);
    cursor: pointer;
    background-image: url('images/champions2021.jpg');
    background-position-x: right;
    background-position: center;
    
}

#card-list {

    background-color: rgb(29, 160, 125);
    cursor: pointer;
    background-image: url('images/pumas-img3.png');
    background-position-x: left;
    background-size: cover;
    
}


#card-schedule {

    background-image: url('images/soccerart.png');
    background-position:left;
    background-size: cover;
    background-color:rgb(33, 43, 92);
    cursor: pointer;
}


#bannerwrapper {

    display: flex;
    justify-content: space-between;
}



.team_icon {


    height: 10px;
    width: 10px;
    
}

/*  table */




tr {
    text-align: center;
  
}

td {

   
    text-align: center;
  
}







#tablecontent {

        

    min-height: 83vh;
    

}


.totalfont {

    font-weight: bold;
}


/* slides  */


#divforbtn {

    justify-content: center;
    position: relative;
    width: 60%;
    margin: 0 auto;
    height: 130px;
    margin-top: 0px;
   

  
}


#sliderwrapper {

 
    justify-content: center;
    position: relative;
    width: 95%;
    margin: 0 auto;
    overflow: hidden;
    height: 130px;
    margin-top: 0px;
    overflow-x: auto;


}



.slides {
    width: 100%;
    display: flex;
    transition: transform 0.9s ease-in-out;
  
   
  }

.finalfont {

    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

  .slide {
    flex: 0 0 15%; /* 5 visible slides */
    background-color: rgb(250, 249, 249);   
    height: 130px;
    justify-content: center;
    text-align: center;
    width: 100px; /* Set a minimum width */
                 /* Allow the width to adjust based on content */
                /* Prevent the div from expanding beyond the screen width */
                    /* Optionally, you can add padding or margins to create space around the div */
 
    box-sizing: border-box; /* Ensure padding is included in the width */
    border: solid 1px rgb(210, 210, 210);
  
    display:inline-block;
    flex-wrap: wrap;
    padding-top: 15px;
  
  }
  
    #finalscoresdiv {

    height: 30px;
    width: 100%;
    justify-content: center;
    text-align: center;
    background-color: rgb(17, 102, 213);
    color: aliceblue;
    font-family: Arial, Helvetica, sans-serif;
  }


  .slidediv {

    display: flex;
    width: 100%;
    justify-content: center;
    vertical-align: middle;
    margin-bottom: 5px;
  }

.slidediv p {
    margin: 0;
   
    font-weight: bold;
}

.slidediv img {
 
 
    display: block;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 20px;
    background-color: rgb(28, 127, 212);
    border: none;
    width: 20px;
    color: white;
}

.prev {
    left: 0;
   

}

.next {
    right: 0;
}


/*  listform */


#submitid {

    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;



}


.datetimetext {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: rgb(78, 78, 78);
}

.teamname { 

    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 11px;
    margin-top: 5px;

}




.scoreinput {

    width: 100px;

}


#submitwrapper {

    margin-top: 30px;
    width: 300px;
    text-align: justify;
}


#submitid input {

    
    width: 300px;
    height: 50px;
    margin-bottom: 25px;
  


    
}

input:focus {

    border: none;
}

#submitbtn {
    border: none;
    border-radius: 50px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color:white;
    background-color: rgb(45, 181, 145);
}

#submitbtn:hover {

    background-color: rgb(22, 145, 112);

}

#username {

    border: solid 1px gray;
    padding: 10px;
    margin-top: 5px;

}



#listform tr {

        height: 80px;
        vertical-align: middle;
        
}



.errormsg {

    height: 40px; 
    background-color: aqua;
    text-align: center;
    width: 100%;
    justify-content: center;
    display: flex;
    justify-items: center;

}


#btnhtowin {

    margin-top: 22px;
    font-weight: bold;
    background: none;
    border: none;
    color: rgb(89, 56, 197);
    font-family:Arial, Helvetica, sans-serif;
    font-size: 15px;

}


#btnhome {

    margin-top: 22px;
    font-weight: bold;
    background: none;
    border: none;
    color: rgb(89, 56, 197);
    font-family:Arial, Helvetica, sans-serif;
    font-size: 15px;

}


/*  MOdal STYLES index page */

.modalwrapper {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    transition: transform  ease-in-out  .2s;
    
  }

  .modalhiddenclass {

    visibility:hidden;

  }

  #modalcontent {
    position: relative;
    background-color: rgb(255, 255, 255);
    margin: 15% auto;
    padding: 20px;
    border-radius: 20px;
    width: 400px;  
    height: 500px;
    animation-name: modalopen;
    animation-duration: 0.4s;
    transition: transform  ease-in-out  .2s;
  }




  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }


  .spanish {

        font-size: 30px;
        color: rgb(194, 153, 40);
  }

/*  footer */
  

  #footerwrapper {

        display: flex;
        width: 100%;
        height: 150px;
        justify-content: center;
        background-color: rgb(33, 43, 92);
        

  }


  #footercontent {

    vertical-align: middle;
    margin-top: 40px;
  }


  #footertext {

    color:white;
    text-decoration: none;
  }

  #footertext a {

    color:rgb(67, 213, 167);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    
  }


  #footertext a:hover  {

    text-decoration: underline;
  }


  /*  MOBIL STYLES */

@media screen and (max-width: 1000px) {

    header {

        height: 112px;
    }
    
    .scoreinput {

        width: 50px;
    
    }

    .slide {
        flex: 0 0 20%; /* 5 visible slides */
       padding-top: 30px;

    }


    .slidediv img {
 
 
     margin-right: 10px;
    }


    #listform {

        margin-top: 100px;
    }


    #tablecontent {

        
        padding-top: 0px;
        margin-top: 2px;
        min-height: 83vh;
    
    
    }


header {

    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;

}

#divforbtn {

   
    width: 90%;
    top: 100px;
    height: 130px;

  
}



#sliderwrapper {

 

    width: 90%;
    height: 130px;


}





    #imgicon {

        visibility: hidden;
    }


    #hometopinfo {

        margin-top: 100px;
    }


    #custom-cards {

        position: relative;
        z-index: 0;
        margin-top: -20px;
    }



    #mobilemenu {
		
		visibility: visible;
        position: fixed;
		width: 100%;
		height: 100%;
        background-color: rgb(255, 255, 255);
		z-index: 3;
		top: 100px;
		
	}


    #mobilelinks li {

        border-bottom: solid 1px rgb(55, 57, 64);
        height: 50px;
        vertical-align: middle;
        margin-top: 20px;
    }


    #mobilelinks a {

        text-decoration: none;
        display: block;
        font-size: 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        color: rgb(33, 43, 92);
        list-style-type: none;
    }
	
	
	
	#burguermenu {
		
		
		cursor: pointer;
		margin-top: 30px;
		right:7%;
		width: 30px;
		height: 25px;
		background-color:transparent;
		z-index: 1;
	}


    .div1 {
		
		margin-bottom: 7px;
		transition: transform ease-in-out .2s;
	}
	
	.div2 {
		margin-bottom: 7px;
		transition: transform  ease-in-out  .2s;
	}
	
	.div3 {
	
		transition: transform  ease-in-out  .2s;
	}
	
	.div4 {
		width: 30px;
		height: 3px;
		background-color: white;
		
		
	}
	
	 .div1move  {
		
		
		margin-bottom: -3px;
		transform: rotate(45deg);
		
	}
	
	 .div2move  {
		
		margin-bottom: -3px;
		transform: rotate(-45deg);
	
		
	}
	
	 .div3move  {
		
		margin-bottom: -3px;
		width: 0px;
		height: 0px;
		
		
		
	}

  
}