/* Reset Styles
***********************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q demo
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}

body {
    margin: 0px;
    padding-top: 0px;
    font-family: "Arial", sans-serif;
    position: relative;
    color: black;
    font-color: black;
    opacity: 0.98;
}

.whiteBoldTxt {
    color: white;
    font-color: white;
    font-family: "Arial", sans-serif;
    text-align: left;
    padding-left: 20%;
    text-decoration: none;
    font-weight: bold;
    white-space: pre-wrap;
}

.whiteBoldTxtArtist {
    color: white;
    font-color: 444444;
    font-family: "Arial", sans-serif;
    font-size: 1.13em;
    text-align: left;
    padding-left: 20%;
    text-decoration: none;
    //font-weight: bold;
    white-space: pre-wrap;
}

.whiteBoldTxtSong {
    color: white;
    font-color: white;
    font-family: "Arial", sans-serif;
    font-size: 1.33em;
    text-align: left;
    padding-left: 20%;
    text-decoration: none;
    font-weight: bold;
    white-space: pre-wrap;
}

#imgBack { 
    min-width: 100%;
    background-width: 100%;
    width: 100%;
    height: auto; 
    background-repeat: no-repeat;  
    background-size: contain; 
    position: center center;  
    size: cover;
    background-color: #cccccc;
}

.image-spinner {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.answer-txt {
    padding-top: 60px;
    font-size: 2.33em;
}

h1 {
    color: gray;
    font-size: 1.63em;
    padding: 5% 15%;
    animation: .8s shake infinite alternate;
    animation-iteration-count: 1
}

@keyframes shake {
    0% { transform: skewX(-2deg); }
    5% { transform: skewX(2deg); }
    10% { transform: skewX(-1deg); }
    15% { transform: skewX(1deg); }
    20% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}

.container {
    text-align: center;
    padding-top: 0px;
    padding: 0;
    height: 100%;
    position: center center; 
    /* max-width: 100%; */
}

.input_voice{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-align: left; 
    position: relative;
    top: 0px;
    width: 95%;
    height: 25px; 
    padding: 13px;
    font-size: 0.94em;
    margin: 8px 10px;
    border: 0.3px solid;
    border-radius: 10px;
    outline: none;
    opacity: 0.7;
    /* background: transparent; */
    /* display: flex;
    flex-direction: column; */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

.input1 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    display: inline;
    position: relative;
    top: 13px;
    bottom: 13px;
    padding: 13px 20px;
    margin: 8px 0;
    font-size: 0.94em;
    border: 0.5px solid;
    box-sizing: border-box;
    width: 35%;
}

.input2 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: left;
    position: relative;
    font-size: 0.94em;
    border: 0.5px solid;
    padding: 13px;
    outline: none;
    margin-top 25%;
    width: 39%;
    display: flex;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.acctive {
    color: white;
    background: #335A74;
}

.navbar {
    border-radius: 0;
    border: 0;
    //border-top:14px;
    font-weight: bold;
    letter-spacing: 0.0035em; 
    line-height: -1em;
    //text-align: right;
    height: 0px;
    background: #000000;
    letter-spacing: 0.0535em;
    color: white;
    border-radius: 0;
}

.navbar-brand,
.navbar-nav li a {
        line-height: 15px;
            //height: 65px;
                padding-top: 0;
         }

ul.nav a:hover { background-color: #fff !important; }

.menuBar {
    margin-left: 38%;
    padding-right: 20px;
}

#logo {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-left: 0;
    -webkit-justify-content: left;
    max-width: 30%;
    justify-content: left;
}

.maineTitle {
    font-size: 1.11em;
    margin-left: 1.3%;
    position: absolute; 
    text-align: right;
    padding-bottom: 10px;
    top: 22.4px;
    border-top 150px;   
    color: white;
    font-weight: normal;
    border: 2px #f87f75;
}

.subTitleTwo {
    font-size: 1.43em;
    font-weight: bold;
    width: 100%;
    top: 20%;
    padding-top: 215px;
    padding-bottom: 40px; 
    text-align: center;
    letter-spacing: 0.0415em;
    color: black;
}

.subTitle {
    font-size: 1.43em;
    font-weight: bold;
    width: 100%;
    top: 20%;
    //margin-left: -135px;
    padding-top: 195px;
    padding-bottom: 39px;
    text-align: center;
    letter-spacing: 0.0415em;
    color: black; 
    //color: #012060;
    //background-color: white;
    text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
    border: 2px #f87f75;
}

.btn-rec {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
    width: 21%;
    height: 46px;
    margin: 32px;
    //position: relative;
    //margin-left: 696px;
    //top: -52px;
    //margin-top: -44.6px;
    text-align: center;
    font-size: 0.97em;
    letter-spacing: 0.0435em;
    margin-top 25%;
    padding-bottom: -3em;
    color: #ffffff !important;
    border-radius: 0px !important;
    //background-color: #77C4DA !important;
    background-color: #cc7575 !important;
    //border: 1px solid #c5a991 !important;
}

.btn-lrc:hover {
    //cursor: pointer;
    cursor: crosshair;
    background-color: #5d51cd !important;
}

.btn-lrc {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
    width: 40%;
    height: 46px;
    margin: 32px;
    text-align: center;
    font-size: 0.97em;
    letter-spacing: 0.0435em;
    margin-top 25%;
    padding-bottom: -3em;
    color: #ffffff !important;
    border-radius: 10px !important;
    /*background-color: #77C4DA !important;*/
    background-color: #342A90 !important;
    opacity: 0.7;

}

.btn {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
    width: 17%;
    height: 46px;
    margin: 32px;
    //position: relative;
    //margin-left: 696px;
    //top: -52px;
    //margin-top: -44.6px;
    text-align: center;
    font-size: 0.97em;
    letter-spacing: 0.0435em;
    margin-top 25%;
    padding-bottom: -3em;
    color: #ffffff !important;
    border-radius: 0px !important;
    //background-color: #77C4DA !important;
    background-color: #342A90 !important;
    //border: 1px solid #342A90 !important;
}

.btn:hover {
    background: white;
    color: #012060;
}

.magImage {
    position: relative;
    width: 21px;
    height: 21px;
    top: 5px;
    margin-right: 10px;
    filter: invert(100%);
}

.curImage {
    position: relative;
     width: 41px;
     height: 41px;
     top: 10px;
}