@import url('https://fonts.googleapis.com/css?family=Felipa|Tangerine|UnifrakturCook:700');
@import url('https://fonts.googleapis.com/css?family=Italianno');
@import url('https://fonts.googleapis.com/css?family=Great+Vibes');

@font-face{
    font-family:AngelicWar;
    src: url("/fonts/ANGELICWAR.TTF.eot"); /*IE9 Compat Modes*/
    src: url("/fonts/ANGELICWAR.TTF.eot?#iefix") format('embedded-opentype'), /* IE6 - IE8 */
         url("/fonts/AngelicWar.woff") format("woff"), /*Modern Browsers*/
         url("/fonts/ANGELICWAR.TTF") format('truetype'); /*Safari, Android, iOS*/
}

@font-face{
    font-family: KingThings;
    src: url("/fonts/KINGTHINGS_SPIKE.TTF.eot"); /*IE9 Compat Modes*/
    src: url("/fonts/KINGTHINGS_SPIKE.TTF.eot") format('embedded-opentype'), /* IE6 - IE8 */
        url("/fonts/KingthingsSpikeMT.woff") format("woff"), /*Modern Browsers*/
        url("/fonts/KINGTHINGS_SPIKE.TTF") format('truetype'); /*Safari, Android, iOS*/
}

/*
    Use the following CSS rules to specify these families:

    font-family: 'Tangerine', cursive;
    font-family: 'Felipa', cursive;
    font-family: 'UnifrakturCook', cursive;
    font-family: 'Italianno', cursive;
    font-family: 'Great Vibes', cursive;
*/

.welcome{
    font-family: 'Tangerine', cursive;
    margin: 50px auto;
    font-size: 3em;
    width: 70%;
    font-weight: 200;
    text-indent: 1em;
    line-height: 1.5em;
}

.key_positions{
    font-family: 'Felipa', cursive;
    margin: 80px auto;
    text-align: center;
    font-size: 1.25em;

}

.key_positions h2, .key_positions h3{
    padding: 10px;
    
}

.logo{
    font-family: 'AngelicWar', 'Great Vibes', cursive;
    font-size:  5em;
    text-shadow: 4px 4px 4px #aaa;
    color: #663399;
    font-weight: 100;
    margin: 50px 0;
    font-weight: 500;
}

@media screen and (max-width: 600px) {
    .logo{
        font-size: 4.5em;
    }
}

.center{
    text-align: center;
}

.button {
    background-color: #663399; 
    border: none;
    color: white;
    padding: 15px 32px;
    margin: 0 3%;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 1.25em;
    font-family: 'Felipa', cursive;
    transition-duration: 0.4s;
}

.button:hover{
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    
}




#nav_menu{
    width: 90%;
    margin: 50px auto;
    text-align: center;

}

#subject{
    font-family: 'Felipa', cursive;
    margin: 80px auto 20px auto;
    font-size: 2em;
    text-shadow: 4px 4px 4px #aaa;
}


#passage{
    margin: 50px auto;
    width: 95%;
}

#passage p{
    font-size: 1.25em;
    line-height: 2em;
    text-indent: 1em;
}

#date{
    font-style:italic;
}

#audio_block{
    margin: 3%;
    line-height: 1.5em;
    width: 60%;
    font-size: 1.15em;
}

#audio_block iframe{
    height: 500px !important;
}



#scripture{
    margin: 3%;
    line-height: 1.5em;
    font-size: 1.5em;
    font-weight: 600;
    font-style: italic;
    text-align: right;
    text-shadow: 2px 2px 2px #aaa;
}



table{
    width: 100%;
    margin: 0 auto;
    border-spacing: 0;
    display: inline-block;
}

td, th{
    padding: 1%;
    width: 15%;
    
}

thead{
    background-color: #000;
    padding: 1%;
    text-align: center;
    color: white;

}


tbody{
    background-color: rgba(255,255,255,0.75);

}
tbody tr:nth-child(2n+1){
    background-color: rgba(66,33,99,0.25);
}

#errors{
    list-style: none;
    background-color: #ffcccc;
    color: #800000;
    padding: 1%;
}

#errors li{
    
    margin-bottom: 1%;
    margin-top: 0;

}

    #errors li:before {
        content: '⚠';
        margin-right: 1.5%;
    }

#success {
    list-style: none;
    background-color: #cfc;
    color: #2b5e2d;
    padding: 1%;
}

#success li{
    
    margin-bottom: 1%;
    margin-top: 0;
}

#success li:before{
    content: '✓';
    margin-right: 1%;
}

.left-10 {
    margin-left: 10%;
}

.bottom-10{
    margin-bottom: 10%;
}

.top-10{
    margin-top: 10%;
}

.isolate{
    margin: 10%;
}

form{
    margin: 10% auto;
    width: 80%;
}

form li{
    list-style:none;
    margin-top: 3%;
}

form p{
    line-height: 1.5em;
    font-size: 1.25em;
    margin: 5% 0;
}

form label{
    font-size: 1.25em;
    font-weight: bold;
}

form input{
    padding: 1%;
    width: 60%;
    margin: 5% 1%;
    font-size: 1em;
}

form textarea{
    height: 400px;
    width: 100%;
    padding: 1.5%;
    font-size: 1em;
}

address{
    font-style: normal;
    margin: 1%;
    font-size: 1.25em;
    line-height: 2em;
}

form .button{
    display: inline;
    width: 15%;
}

#transcription{
    word-wrap: break-word;
    display: inline-block;
    background-color: royalblue;
    color: white;
    padding: 1%;
    text-decoration: none;
    border-radius: 5px;
    margin-bottom: 2%;
}

#transcription:hover{
    text-decoration: underline;
    background-color: darkblue;
}


/*
    MEDIA QUERIES
*/

@media screen and (min-width: 736px){
    .fb-comments{
        width:75% !important;
        margin: 0 auto;
    }
}

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

        #audio_block {
            width: 92%;
        }

        #audio_block iframe {
            height: 315px !important;
        }
}

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


    form .button{
        width: 30%;
    }

    #transcription{
        word-wrap: break-word;
        display: inline-block;
        background-color: royalblue;
        color: white;
        padding: 2%;
        text-decoration: none;
        border-radius: 5px;
        margin-bottom: 2%;
    
    }
}

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

    .button{
        margin: 0 1%;
    }
    form input{
        padding: 1%;
    }

    form .button{
        width: 40%;
    }
}

@media screen and (max-width: 450px) {
    .button{
        display: block;
        margin: 1% auto;
        width: 25%;
    }

}




select{
    padding: 1%;
    margin: 1%;
    font-size: 1em;
}

option{
    font-size: 1em;
}


.disabled{
    cursor: not-allowed;
}

.large{
    font-size: 1.5em;
}

.xlarge{
    font-size: 2em;
}

.xxlarge{
    font-size: 2.5em;
}

.xxxlarge{
    font-size: 3em;
}

.black-white{
    background-color: #000;
    color: #fff;
    text-align: center;
}

.a_little_space{
    margin: 10% 0;
}

a{
    word-wrap: break-word;
}


#paragraph{
    margin: 50px auto;
    width: 95%;
}

#paragraph p{
    line-height: 2em;
    text-indent: 1em;
    margin: 2%;
    font-size: 1.25em;
}

/* SHARETHIS CUSTOMIZATIONS*/
button.button_button, input[type=button].button_button{
    background: #639 !important;
    border: 2px solid #639 !important;
}

button.button_button.button_invert, input[type=button].button_button.button_invert {
    border: 2px solid #639 !important;
    color: #639 !important;
}

.app_gdpr a {
    color: #639 !important;
}
/* SHARETHIS CUSTOMIZATIONS*/