#seasonswraper{
    background: rgb(133,19,112);
    background: linear-gradient(180deg, rgba(133,19,112,1) 0%, rgba(255,1,222,0.8393951330532212) 100%);
    padding: 30px
    padding-bottom: 60px;
    text-align: center;
}
.seasons {    
    padding: 20px;
    padding-bottom: 0px;
}

.seasons .container h2{
    text-align: left;
    margin-bottom: 8px;
}

.seasons h2 a{
    color:#f1efe8;
    font-size: 35px;
    font-weight: 500;
    text-decoration: none;
}

.season{
    display: inline-block;
    width:90%;
    background-color: #aa249c;  
    position: relative;  
    border-radius:10px;
    padding: 15px 3%;
    color:#f1efe8;   
    transition: width 2s, height 2s, background-color 1s, transform 2s;    
    -webkit-box-shadow: 0px 5px 18px 1px rgba(0,0,0,0.5); 
    box-shadow: 0px 5px 18px 1px rgba(0,0,0,0.5); 
    transition: width 2s, height 2s, border-color 1s, transform 2s; 
}

.season:hover{
    background-color: #471c79; 
    color:#f1efe8;
}

.seasonRow {
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 10px;
    display: inline-block;
    max-height: 160px;
}

@media only screen and (max-width: 768px) {
    .seasonRow {
        max-height: max-content;
    }
}

.season .imageWrapper{
    display: flex;
    margin: 0px;    
    width: 100%;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 100% 100%, rgba(255,255,255,0) 0, rgba(255,255,255,0) 8px, transparent 8px) 0% 0%/10px 10px no-repeat,
            radial-gradient(circle at 0 100%, rgba(255,255,255,0) 0, rgba(255,255,255,0) 8px, transparent 8px) 100% 0%/10px 10px no-repeat,
            radial-gradient(circle at 100% 0, rgba(255,255,255,0) 0, rgba(255,255,255,0) 8px, transparent 8px) 0% 100%/10px 10px no-repeat,
            radial-gradient(circle at 0 0, rgba(255,255,255,0) 0, rgba(255,255,255,0) 8px, transparent 8px) 100% 100%/10px 10px no-repeat,
            linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)) 50% 50%/calc(100% - 4px) calc(100% - 20px) no-repeat,
            linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)) 50% 50%/calc(100% - 20px) calc(100% - 4px) no-repeat,
            linear-gradient(5deg, transparent 0%, #ff01de 100%);
    border-radius: 10px;
    padding: 5px;
    box-sizing: border-box;                  
}

.season .imageWrapper img {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit:cover;
    border-radius: 5px;
}

.season .number{
    display: inline-block;
    width:60px;
    height: 60px;
    font-size:30px;
    font-family: 'Yanone Kaffeesatz', sans-serif;  
    color:#f1efe8;
    font-weight: bold;
    background-color: #ff01de;
    border-radius: 50%;    
    text-align: center;
    vertical-align: middle;  
    line-height: 60px; 
    -webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.5); 
    box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.5); 
    transition: width 2s, height 2s, background-color 1s, transform 2s; 
    position: absolute;
    top: -10px;
    left: -10px;
}

.season .name {
    font-size:30px;
    line-height: 30px;
    font-family: 'Yanone Kaffeesatz', sans-serif;  
    margin-bottom: 0px;    
    font-weight: 300;
}

.season .name span {
    background-color: #33012c;
    color:#f1efe8;
    padding: 0px 10px;
    border-radius: 5px;
    font-size: 20px;
    display: inline-block;    
    font-weight: 500;      
}

.season .contentWrapper{
    padding: 10px;    
}

.seeall{
    display: inline-block;
    width:90%;
    border-radius:10px;
    background-color: #33012ca1;  
    color:#f1efe8;
    text-decoration: none;    
    padding: 15px 3%;
    text-align: center;
    font-size: 16px;
}

.seeall:hover{
    color:#f1efe8;
}

.banners {    
    padding-top: 0px;    
    padding-bottom: 10px;
    background: linear-gradient(135deg, #5D0C3080 50%, transparent 0),linear-gradient(-135deg, #5D0C3080 50%, transparent 0);
    background-size: 24em 24em;
    background-color: #ef1175c0;   
     
}
.banners .container h2{
    margin-bottom: 10px;
}

.bannersCell {
    margin: 0;
    margin-bottom: 10px;
}


.banner{    
    width:92%;
    background-color: #de11b8;  
    position: relative;  
    border-radius:10px;
    padding: 15px 3%;    
    color:#f1efe8;   
    transition: width 2s, height 2s, background-color 1s, transform 2s;     
    text-align: left;
    display: table;
    vertical-align: middle;
    text-decoration: none;
    float:left;
    margin: 1%;
    -webkit-box-shadow: 4px 4px 16px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 4px 16px -7px rgba(0,0,0,0.75);
    box-shadow: 4px 4px 16px -7px rgba(0,0,0,0.75);
}

.banner-dark {
    background-color: #36002c;
}

.banner-dte {
    background-color: #de11b8;
}

.banner .textWrapper {
    display: table-cell;  
    vertical-align: middle;
    height: 100%;
}

.banner .imgWrapper {
    display: table-cell;  
    vertical-align: middle;
    height: 100%;
    width: 105px;
}

.banner img {    
    width: 90%;    
    margin-right: 3%;    
}

.banner span { 
    width: 100%;       
    color:#f1efe8;
    text-decoration: none;
    font-size: 25px;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    line-height: 30px;
    text-align: left;
}

.banner p {
    width: 100%;   
    float: left;
    color:#f1efe8;
    opacity: 0.85;
    text-decoration: none;
    font-size: 15px;    
    line-height: 20px;
    text-align: left;
    margin: 0;
}

#topDrag {
    
    background-color: #5b0d3d;
    background: rgb(239,17,118);
    background: linear-gradient(180deg, rgba(239,17,118,0.8967685758513932) 0%, rgba(54,0,44,0.8505996148459384) 100%);
}

.container h2{
    padding-top: 15px;   
    margin: 0px;
    color: #f1efe8;
    text-align: center;
}

.queen.xsmall {
    width: 100px;
    height: 114px;
}

.queen.xsmall .imageWrapper {
    width: 100px;
    height: 100px;
    border: 5px solid #FFF
}

.queensrow{
    overflow: auto;
    white-space: nowrap;
    padding-top: 20px;
    padding-bottom: 20px;
}

.queenscontainer{
    margin: 0;
    width: 100%;
    max-width: 100%; 
    padding-top: 10px;   
}

.queensrow .queen:first-child
{
  margin-left: 10px;
}

#recentseasons{
    background: rgb(50,1,43);
    background: linear-gradient(180deg, rgba(50,1,43,1) 0%, rgba(133,19,112,1) 100%);
}

.recentseason{
    display: inline-block;
    width: 300px;
    height: 300px;
    margin-right: 10px;
    /*animate transitions*/
    transition: all 0.3s;
    
}

.recentseason:hover{
    background: rgb(50,1,43);
    background: linear-gradient(180deg, rgba(50,1,43,1) 0%, rgba(133,19,112,1) 100%);
    /*make bigger*/
    transform: scale(1.05);

}

.recentseason .imageWrapper {
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 16px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 4px 16px -7px rgba(0,0,0,0.75);
    box-shadow: 4px 4px 16px -7px rgba(0,0,0,0.75);
    display: inline-block;
    overflow: hidden;
    height: 300px;
    width: 300px;
    background: radial-gradient(circle at 100% 100%, rgba(255,255,255,0) 0, rgba(255,255,255,0) 8px, transparent 8px) 0% 0%/10px 10px no-repeat,
            radial-gradient(circle at 0 100%, rgba(255,255,255,0) 0, rgba(255,255,255,0) 8px, transparent 8px) 100% 0%/10px 10px no-repeat,
            radial-gradient(circle at 100% 0, rgba(255,255,255,0) 0, rgba(255,255,255,0) 8px, transparent 8px) 0% 100%/10px 10px no-repeat,
            radial-gradient(circle at 0 0, rgba(255,255,255,0) 0, rgba(255,255,255,0) 8px, transparent 8px) 100% 100%/10px 10px no-repeat,
            linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)) 50% 50%/calc(100% - 4px) calc(100% - 20px) no-repeat,
            linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)) 50% 50%/calc(100% - 20px) calc(100% - 4px) no-repeat,
            linear-gradient(5deg, transparent 0%, #d7156c 100%);
    border-radius: 10px;
    padding: 7px;
    box-sizing: border-box;
}

.recentseason .imageWrapper img {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    display: flex;
}

.recentseasonsrow{    
    padding: 30px; 
    text-align: center;   
}

.recentseasonscontainer{
    margin: 0;
    width: 100%;
    max-width: 100%; 
    padding-top: 10px;   
}

.showContainerHome{
    background: rgb(133,19,112);
    background: linear-gradient(180deg, rgba(133,19,112,1) 0%, rgba(255,1,222,0.8393951330532212) 100%);
    padding: 20px;    
    display: inline-block;
    width: 320px;
    border-radius: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    transition: all 0.3s;
}

.showContainerHome:hover{
    background: rgb(115,0,255);
    background: linear-gradient(180deg, rgba(115,0,255,1) 0%, rgba(248,97,240,1) 100%);
    text-decoration: none;
    transform: scale(1.05);
}

.showContainerHome h2 {
    display: block;
    color:#f1efe8;
    font-size: 40px;
    font-weight: 500;
    text-decoration: none;
    text-align: left;
    margin-bottom: 0;
}



.showContainerHome h2 a{
    color:#f1efe8;
    font-size: 35px;
    font-weight: 500;
    text-decoration: none;
}

.showContainerHome h2 a .title{
    line-height: 30px;
    color:#f1efe8;
    font-size: 30px;
    font-weight: 500;
    text-decoration: none;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

.showContainerHome .moreSeasons{
    display: inline-block;
    color:#FFF;
    font-size: 30px;
    font-weight: 500;
    text-decoration: none;
    font-family: 'Yanone Kaffeesatz', sans-serif;    
    padding-top: 25px;
}

.showContainerHome .latestSeasonsImages {    
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;   
    margin-bottom: 20px; 
}

.showContainerHome .latestSeasonsImages img{
    display: inline-block;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    margin-right: 5px;
    object-fit: cover;
    -webkit-box-shadow: 4px 4px 16px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 4px 16px -7px rgba(0,0,0,0.75);
    box-shadow: 4px 4px 16px -7px rgba(0,0,0,0.75);
}

.bracketsbanner{
    border: 3px solid #FDE795;
    /*add a glow*/
    box-shadow: 0 0 5px #FDE795, 0 0 10px #FDE795, 0 0 20px #FDE795, 0 0 30px #FDE795;
}

@media (min-width: 550px) {
    .one-half.column, .six.columns {
        width: 49.5%;
    }
}

@media (min-width: 550px) {
    .banner .imgWrapper.brackets_logo{
        width: 150px;
    }
}

@media (min-width: 768px) {
    #seasonswraper {
        padding: 30px 250px;
    }
    .recentseasonsrow{
        padding: 30px 250px;
    }
    
}