@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700&display=swap);body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}table{margin-top:30px;margin-bottom:30px}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;min-height:100vh;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.body{width:100%}.top{height:350px}.bottom,.top{width:100%;text-align:center;display:inline-block}.bottom{height:100%}.search_bottom{width:100%;text-align:center;display:inline-block;height:100%;min-height:340px}*{font-family:"Raleway","Source Sans Pro","Trebuchet MS","Arial"}h1{font-size:80px;color:#fff}h4{color:#777}p{font-size:20px;margin:0 auto}.top p{color:#fff;width:40%}.bottom p{color:#777;width:20%}#root{padding:0}.navbar{position:fixed;display:block;width:100%;height:70px;text-align:center}.navbar h4{text-decoration:none;margin:5px;padding-left:25px;padding-right:25px;font-family:"Raleway";padding-top:20px;top:0}.navbar h4,.navbar h4:hover{display:inline-block;transition:all .2s ease-in-out}.navbar h4:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.vertical-line{display:inline;border-left:1px solid #fff;height:70px;position:static;left:50%;margin-left:-3px;top:0}#page-container{position:relative;background-image:linear-gradient(135deg,#4ca1af,#0d98ba 70%);padding:0 0 100px}#content-wrap{padding-bottom:-12px}.footer{background-color:hsla(0,0%,94.9%,.3);color:#f2f2f2;text-align:center;position:absolute;bottom:0;left:0;right:0;height:123px}.footer h4{text-decoration:none;margin:45px;padding-left:25px;padding-right:25px;padding-top:5px;font-family:"Raleway";font-size:20px;color:#fff}.footer h4,.footer h4:hover{transition:all .2s ease-in-out;display:inline-block}.footer h4:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.footer a:link,.footer a:visited{text-decoration:none;color:#fff}.footer a:hover{text-decoration:none;color:#4ca1af}.footer a:active{text-decoration:none;color:#1e626d}a:link,a:visited{color:#fff}a:active,a:hover,a:link,a:visited{text-decoration:none}a:active{font-weight:700}.centreDiv{text-align:center}.slider{color:#4ca1af}.contact{-webkit-align-items:center;align-items:center;text-align:center;display:inline-table;height:100%;width:600px;background-color:#f2f2f2;border-radius:25px;box-shadow:2.4px 2.4px 3.2px rgba(0,0,0,.15)}.contact a,.contact h4{color:#4ca1af}.contact h4{font-size:25px;text-align:center}.contact p{font-size:20px;color:333333;text-align:center;line-height:50px}.about-bottom{-webkit-align-items:center;align-items:center;border-radius:25px;background-color:#f2f2f2;text-align:center;display:inline-block;height:100%;width:800px;box-shadow:2.4px 2.4px 3.2px rgba(0,0,0,.15)}.about_text{margin-top:5%;margin-left:10%;margin-right:10%;line-height:40px}.about p{width:6%;font-size:25px;color:333333}.about p,.help{text-align:center}.help{position:relative;width:100%;display:inline-block;height:100%;line-height:55px}.help h4{color:#333}.help h4,.help p{font-size:25px;text-align:center}.help p{color:333333}.dropinput{padding:16px;font-size:16px;border:none;width:60%;cursor:pointer}.dropdown-content{background-color:#f9f9f9;width:60%;margin:0 auto;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;border-radius:8px}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left}.songResults{display:block;margin-top:60px;text-align:left;background-color:#f2f2f2;box-shadow:2.4px 2.4px 3.2px rgba(0,0,0,.15);border-radius:25px;width:61%;margin-left:20%;padding-top:20px;padding-left:20px;margin-right:20%}.songResults h4{color:#333;font-size:17px;margin:5px;line-height:1.6}.songResults h3{color:#000;font-size:20px;margin:5px;line-height:1.6;text-align:center}.songResults a,.tabBox a{color:#4ca1af}.songResults textarea{width:80%;padding:5px;border:0;border-radius:5px;font-size:14px;margin-left:10px}.profile{display:inline-block;width:50%;margin:0 auto 20px;background-color:#f2f2f2;border-radius:25px;box-shadow:2.4px 2.4px 3.2px rgba(0,0,0,.15)}.profile h3{color:#4ca1af}.profile p{color:#333;display:inline;margin:0 auto;font-size:15px;line-height:40px}.profile input{color:#333;font-size:18px;width:400px}.profilecolLeft{width:30%;float:left;text-align:right;font-size:18px;margin-right:10px}.profilecolRight{width:60%;float:left;text-align:left}.profileInput{width:300px;padding:5px;border-radius:7px;margin:5px}.ArrowIcon{color:#4ca1af;margin-left:1%}.ArrowIcon:hover{-webkit-transform:scale(1.5);transform:scale(1.5);color:#39618f;transition:all .2s ease-in-out}.friends,.new,.saved,.stats{display:block;width:50%;background-color:#f2f2f2;border-radius:25px;box-shadow:2.4px 2.4px 3.2px rgba(0,0,0,.15);margin:0 auto 20px;padding-top:20px;padding-bottom:20px}.saved{height:140px}.saved h3{color:#4ca1af}.saved p{font-size:17px;width:100%}.saved p,.searchSaved{text-align:left;margin-left:4%}.searchSaved{font-size:14px;margin-top:3%;width:70%;color:#333}.saved_column_small{float:left;margin-left:3%;text-align:center;width:25%}.saved_column_big{float:left;text-align:left;width:70%}.saved_row:after{content:"";display:table;clear:both}.radiodiv{display:grid;margin-left:4%;line-height:30px}.new,.radiodiv{text-align:left}.new{height:100%}.new h3{color:#4ca1af;font-size:20px;text-align:center}.new p{line-height:10px;margin-top:3%;width:100%;text-align:left;color:#333}.new p,.new select{font-size:14px;margin-left:4%}.new_column{width:10%}.new_column,.new_column_big{float:left;text-align:center}.new_column_big{width:70%}.new_column_big select{font-size:17px;width:80%;margin-top:45px;color:#333;margin-left:20%}.new select{font-size:17px;width:70%;margin-bottom:20px;color:#333}.new_row:after{content:"";display:table;clear:both}.stats{text-align:left;height:260px}.stats h3{color:#4ca1af;text-align:center;font-size:20px}.stats p{font-size:14px;margin-top:3%;width:100%;text-align:center;color:#333;margin-left:4%}.stats_column{float:left;text-align:center;width:33%}.stats_column_big,.stats_column_big p{float:left;text-align:left;width:100%}.stats_row:after{content:"";display:table;clear:both}.radiodivhorz{text-align:left;margin-left:4%;line-height:30px}.friends{height:500px;text-align:left}.friends h3{color:#4ca1af;font-size:20px;text-align:center}.friends p{width:100%}.friends input,.friends p{font-size:14px;margin-top:3%;text-align:left;color:#333;margin-left:4%}.friends input{width:58.8%}.friends select{font-size:14px;margin-top:3%;width:60%;text-align:left;color:#333;margin-left:4%}.centreBox{text-align:center}.topTabs{background-color:#f2f2f2;width:70%;height:100%;border-radius:25px;box-shadow:2.4px 2.4px 3.2px rgba(0,0,0,.15)}.tabBox,.topTabs{display:inline-block;text-align:center}.topTabs h4{font-size:25px;color:#333;text-align:left}.topTabs p{display:inline-block;white-space:pre}.plus{margin-left:4%}.minus,.plus{vertical-align:middle;color:#8d8d8d;font-size:100px;display:inline-block}.minus{margin-left:2%;margin-bottom:2%}.plus:hover{color:#333}.plus:active{-webkit-transform:scale(1.2);transform:scale(1.2);transition:all .2s ease-in-out}.minus:hover{color:#333}.minus:active{-webkit-transform:scale(1.2);transform:scale(1.2);transition:all .2s ease-in-out}.plusTopTabs{vertical-align:middle;margin-left:8%;color:#8d8d8d;font-size:100px;display:inline-block}.plusTopTabs:hover{color:#333}.plusTopTabs:active{-webkit-transform:scale(1.2);transform:scale(1.2);transition:all .2s ease-in-out}.arrow{vertical-align:middle;margin-left:8%;color:#8d8d8d;font-size:30px;display:inline-block}.arrow:hover{color:#333}.arrow:active{-webkit-transform:scale(1.2);transform:scale(1.2);transition:all .2s ease-in-out}.listBox{font-size:20px;width:100%;margin-left:auto;margin-right:auto}.listBoxRows{font-size:20px;width:150px}.listBox option,.listBoxRows option{font-size:18px;color:#333;width:450px;height:25px}.topTabs:after{content:"";display:table;clear:both}.btn:hover{font-weight:700}.icon{margin-left:18%}.search_icon{-webkit-transform:rotate(190deg);transform:rotate(190deg);vertical-align:middle;margin-left:4%;color:#8d8d8d;font-size:40px;display:inline-block}.search_icon:hover{color:#333}.search_icon:active{transition:all .2s ease-in-out}.sample_friends,.sample_tab{-webkit-align-items:center;align-items:center}.centered_text{color:red;font-weight:700;position:absolute;font-size:40px;top:50%;left:35%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.popup{position:fixed;padding:10px;width:600px;border-radius:10px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:hsla(0,0%,100%,.9);visibility:hidden;opacity:0;transition:opacity .5s,visibility 0s linear .5s;z-index:1}.popup:target{visibility:visible;opacity:1;transition-delay:0s}.popup-close{position:absolute;padding:10px;max-width:500px;border-radius:10px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:hsla(0,0%,100%,.9)}.popup .close{position:absolute;right:5px;top:5px;padding:5px;color:#000;transition:color .3s;font-size:2em;line-height:.6em;font-weight:700}.popup .close:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.close-popup{background:rgba(0,0,0,.7);cursor:default;position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s linear .5s}.popup:target+.close-popup{opacity:1;visibility:visible;transition-delay:0s}.popupLogin{position:fixed;padding:10px;width:600px;border-radius:10px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#f2f2f2;visibility:hidden;opacity:0;transition:opacity .5s,visibility 0s linear .5s;z-index:1}.popupLogin:target{visibility:visible;opacity:1;transition-delay:0s}.popupLogin-close{position:absolute;padding:10px;max-width:500px;border-radius:10px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:hsla(0,0%,100%,.9)}.popupLogin .close{position:absolute;right:5px;top:5px;padding:5px;color:#000;transition:color .3s;font-size:2em;line-height:.6em;font-weight:700}.popupLogin .close:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.close-popupLogin{background:rgba(0,0,0,.7);cursor:default;position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s linear .5s}.popupLogin:target+.close-popupLogin{opacity:1;visibility:visible;transition-delay:0s}.viewTabBottom{width:80%;height:780px;text-align:left;background-color:#f2f2f2;border-radius:25px;box-shadow:2.4px 2.4px 3.2px rgba(0,0,0,.15);padding:50px;margin:60px}.viewTabBottom h3,.viewTabBottom h4{color:#333;font-weight:400}.viewTabBottom a{color:#4ca1af}.loginForm{width:60%;background-color:#fff;margin:0 auto 50px;padding:10px}.loginForm input{font-size:16px;width:90%}.loginForm input[type=submit]{background-color:#8ed49d;color:#fff;padding:5px;font-weight:700;border-radius:20px;margin:15px auto 0;border:0;height:40px;width:50%}.signUpButton{border:1px solid #a9a9a9;border-radius:20px;color:grey;width:60%;padding:5px;margin:0 auto 10px}.notesBox{font-size:14px;text-align:left;background-color:#fff;width:400px;height:200px;word-wrap:break-word}.notesBox input[type=text]{word-wrap:break-word;word-break:break-all;height:80px}table{table-layout:fixed;width:600px;border-collapse:collapse;overflow:hidden;margin-left:auto;margin-right:auto;box-shadow:0 0 20px rgba(0,0,0,.1)}table:hover{box-shadow:0 0 25px rgba(0,0,0,.2)}td,th{padding:15px;border:1px solid #a3a8a8;background-color:hsla(0,0%,100%,.2)}td,th{text-align:center}th{color:#333}tr:hover{background-color:hsla(0,0%,100%,.6)}.profileTable{width:600px}table tr th:first-child{width:60%}/ .availableTabs{width:90%;margin:0 22px 0 12px;border-radius:8px}td:hover{text-decoration:none;color:#0d491a}.new select,.saved select{display:block;font-size:16px;font-family:"Raleway";line-height:1.3;padding:.6em 1.4em .5em .8em;max-width:100%;box-sizing:border-box;border:1px solid #aaa;box-shadow:0 1px 0 1px rgba(0,0,0,.04);border-radius:.5em;-webkit-appearance:none;appearance:none;background-color:#fff;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(180deg,#fff 0,#e5e5e5);background-repeat:no-repeat,repeat;background-position:right .7em top 50%,0 0;background-size:.65em auto,100%;margin:0 auto 15px}select:hover{border-color:#888}.new select:focus,.saved select:focus{border-color:#aaa;box-shadow:0 0 1px 3px rgba(59,153,252,.7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;outline:none}.tabBox table{margin:0 auto}.savedTabsSelect{width:400px}.vtColumn{float:left;width:60%}.vtColumnR{float:left;width:40%}.vtRow:after{content:"";display:table;clear:both}.star-rating{font-size:0;white-space:nowrap;display:inline-block;width:250px;height:50px;overflow:hidden;position:relative;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PHBhdGggZmlsbD0iI0RERCIgZD0iTTEwIDBsMy4wOSA2LjU4M0wyMCA3LjYzOWwtNSA1LjEyNUwxNi4xOCAyMCAxMCAxNi41ODMgMy44MiAyMCA1IDEyLjc2NCAwIDcuNjM5bDYuOTEtMS4wNTZ6Ii8+PC9zdmc+");background-size:contain}.star-rating i{opacity:0;position:absolute;left:0;top:0;height:100%;width:20%;z-index:1;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PHBhdGggZmlsbD0iI0ZGREY4OCIgZD0iTTEwIDBsMy4wOSA2LjU4M0wyMCA3LjYzOWwtNSA1LjEyNUwxNi4xOCAyMCAxMCAxNi41ODMgMy44MiAyMCA1IDEyLjc2NCAwIDcuNjM5bDYuOTEtMS4wNTZ6Ii8+PC9zdmc+");background-size:contain}.star-rating input{-moz-appearance:none;-webkit-appearance:none;opacity:0;display:inline-block;width:20%;height:100%;margin:0;padding:0;z-index:2;position:relative}.star-rating input:checked+i,.star-rating input:hover+i{opacity:1}.star-rating i~i{width:20%}.star-rating i~i~i{width:60%}.star-rating i~i~i~i{width:80%}.star-rating i~i~i~i~i{width:100%}:after,:before{height:100%;padding:0;margin:0;box-sizing:border-box;text-align:center;vertical-align:middle}.selectTop{font-weight:600;font-size:20px}.TrendingList{font-size:20px;padding:5px}#loadingPopular,.TrendingList{height:380px;width:650px}.logIn{color:#7e3f90}.logIn:hover{color:#392258}.logIn:active{color:#392258;-webkit-transform:scale(1.2);transform:scale(1.2);transition:all .2s ease-in-out}.columnHome{float:left;width:45%;text-align:left;margin-left:60px;-webkit-align-items:left;align-items:left}.columnHomeNoMargin{float:left;width:80%;text-align:left;-webkit-align-items:center;align-items:center}.row:after{content:"";display:table;clear:both}.center{display:block;margin-left:auto;margin-right:auto;width:50%}.centerProgrammers{display:inline-block;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.LogInText{font-size:30px;font-weight:700;line-height:1.6}.columnHome h1{font-size:80px;font-weight:900;line-height:normal;margin-bottom:0}.columnHome h1,.columnHome h2{color:#f2f2f2;font-family:"Raleway"}.columnHome h2{font-size:20px;font-weight:500}.button{transition:all .5s ease;color:#39618f;width:180px;border-radius:25px;margin-top:40px;border:3px solid #fff;text-transform:uppercase;text-align:center;line-height:1;font-size:12px;background-color:transparent;padding:10px;outline:none;color:#fff}.button:hover{background-color:#fff;color:#4ca1af}.button:active{background-color:#fff;-webkit-transform:scale(1.1);transform:scale(1.1);transition:all .2s ease-in-out}.about-text{text-align:center;margin-left:15%;margin-right:15%}.about-text p{line-height:1.6}.about-text p,.faq p{font-size:20px}.faq-heading{font-weight:500;-webkit-transition:text-indent .2s;text-indent:20px;color:#333}.faq-text{font-weight:400;color:#919191;width:95%;padding-left:18px;font-size:10px;margin-bottom:30px}.faq{width:1000px;margin:0 auto;background:#fff;border-radius:4px;border:1px solid #e1e1e1}.faq,.faq label{position:relative}.faq label{display:block;overflow:hidden;cursor:pointer;height:56px;padding-top:1px;background-color:#fafafa;border-bottom:1px solid #e1e1e1}.faq input[type=checkbox]{display:none}.faq .faq-arrow{width:5px;height:5px;border-top:2px solid rgba(0,0,0,.33);border-right:2px solid rgba(0,0,0,.33);float:right;position:relative;top:-30px;right:27px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.faq .faq-arrow,.faq input[type=checkbox]:checked+label>.faq-arrow{transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}.faq input[type=checkbox]:checked+label>.faq-arrow{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.faq input[type=checkbox]:checked+label{display:block;background:#fff!important;color:#4f7351;height:100%;transition:height .8s;-webkit-transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}.faq input[type=checkbox]:not(:checked)+label{display:block;transition:height .2s;height:60px;-webkit-transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}::-webkit-scrollbar{display:none}