body {
  
  -webkit-font-smoothing: antialiased;   
    letter-spacing: 0;
}

nav, header {
    height: 54px; 
    background-image: none; 
    width: 100%;
    display: flex;        
    z-index: 100;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,.15);
}

.navlogo h1 {
    background: linear-gradient(to right, #ad1447 0%, #f80759 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    letter-spacing: -.7;
}

.navlinks button, .navlinks2 button {
     color: black;
}

.navlinks button:hover {
    color: #f80759;
    border: none;
}


.iama {
    padding: 15px 0 5px 0;
    text-align: center;
    font-weight: 900;
    font-family: 'Poppins', sans-serif; 
    color: white;
}


.singerProducerOptions {
    margin: 10px auto;
    display: flex; 
}


.button1 button, .button2 button {
    font-size: 20px;
    border: none;
    background:none;
    text-align: left;
    margin-right:30px;
}


.button1 button:hover, .button2 button:hover {
    cursor: pointer;
    opacity:.9;
}

.button1 button:focus, .button2 button:focus {
    outline: none;
}


.optioncontainer {
    margin: 0 auto;
    display: flex; 
   
}

.vocalistOption1 {
    width: 50%;
    box-sizing: border-box;
    padding: 1%;
    
}

.vocalistOption2 {
    width: 50%;
    box-sizing: border-box;
    padding: 1%;
    position: relative;
}

.vocalistOptionFree, .vocalistOption1499 {
    height: 365px;
    width: 94%;
    padding: 10px;
    text-align: center;
    font-size: 15;
    border-radius: 10px;
background: #E9E9E9;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.salebanner {
    position: absolute;
    width: 90%;
    background: linear-gradient(to top left, #e23d74, #f80759);
    color: white;
    border-radius: 5px;
}

.producerOption1 {
    box-sizing: border-box;
    padding: 1%;
    margin: 0 auto;
    width: 50%;
}

.vocalistOption1 ul, .vocalistOption2 ul, .producerOption1 ul {
    list-style-position: inside;
    list-style-type:none;
    text-align: center;
    line-height: 2;
    color: dimgrey;
    padding-bottom: 10px;
    font-weight: 300;
    height: 180px;
}


h3 {
    color: #000;
    font-size:  30px;
    text-align: center;
    padding-bottom: 10px;
    padding-top: 30px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: .6;
}

.vocalistOption1 button, .vocalistOption2 button, .producerOption1 button {
    box-shadow: 0px 1px 2px rgba(0,0,0, 0.4);
    background: linear-gradient(to top left, #393939, #393939);
    height: 50px;
    width:100px;     
    font-size: 15px;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease 0s;
    color: white;
}


.vocalistOption1 button:focus, .vocalistOption2 button:focus, .producerOption1 button:focus {
    outline: none;
}

.vocalistOption1 button:hover, .vocalistOption2 button:hover, .producerOption1 button:hover {
    box-shadow: 0px 5px 10px rgba(226, 61, 116, .3);
    background: linear-gradient(to top left, #e23d74, #f80759);
    cursor: pointer;
    transform: translateY(-2px); 
    color: white;
}




@media screen and (max-width: 1140px) {
   
    .vocalistOptionFree li, .vocalistOption1499 li {
      font-size: 14px;  
    }
}


@media screen and (max-width: 993px) {
    .optioncontainer {
     width: 85%;   
    } 

}

@media screen and (max-width: 757px) {
    .optioncontainer {
     width: 95%;   
    }  
    .vocalistOption1, .producerOption1 {
        margin-bottom: 15px;
        margin-top: 20px;
    }
    .vocalistOption1, .vocalistOption2 {
        width:100%;
    }
}


@media screen and (max-width: 750px) {
    .optioncontainer {
     display: block;
    width: 100%;
    margin: 0 auto;
     padding-bottom: 20px;   
    }  
    .vocalistOptionFree, .vocalistOption1499{
      width: 100%;  
    }
    .producerOption1 {
     width: 100%;   
    }
    .salebanner{
        position:relative;
    }
}