/* @import url('fonts.css');*/

@font-face {
  font-family: 'BTabassom';
  src: url('../fonts/BTabassom.eot?#') format('eot'),  /* IE6–8 */
       url('../fonts/BTabassom.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('../fonts/BTabassom.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel-Regular-webfont.eot?#') format('eot'),  /* IE6–8 */
       url('../fonts/Cinzel-Regular-webfont.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('../fonts/Cinzel-Regular-webfont.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
html * {
    box-sizing:border-box;
    direction:ltr;
}
html[lang=fa] * {
    direction:rtl;
}
body {
    padding:0;
    margin:0;
    font-family:Calibri,Helvetica,sans-serif;
    font-size:16px;
    line-height:1;
    background-color:#F1F1F1;
}
h1 {
    font-weight:normal;
    text-align:center;
    font-family:"Cinzel", sans-serif;
    font-size:4rem;
}
html[lang=fa] h1 {
    font-family:"BTabassom", sans-serif;
    font-size:6.7rem;
}
body {
    font-family:serif;
    font-size:22px;
    line-height:40px;
}
.supraHeader {
    width:100%;
    height:45px;
    padding: 5px 10px;
    background-color:#483d8b;
    color:#FFFFFF;
}
.supraHeader address {
    display:flex;
    font-size: 1.125rem;
    font-style:normal;
    line-height:35px;
}
.supraHeader span, .supraHeader a {
    width:50%;
}
.supraHeader address a {
    color:#FFFFFF;
    text-align:right;
}
.supraHeader span {
    text-align:left;
}
html[lang=fa] .supraHeader address a {
    text-align:left;
}
html[lang=fa] .supraHeader span {
    text-align:unset;
}
header.mainHeader {
    position:relative;
    display:flex;
    flex-direction: column;
    justify-content: center;
    height:300px;
    z-index:2;
}
.headerBackground {
    position:absolute;
    z-index:1;
    top:45px;
    left:0;
    width:100%;
    height:400px;
    background-image: url(../img/church-interior.jpg);
    background-size:cover;
}
.headerBackground:before {
    content:'';
    background-color:#FFFFFF;
    opacity:.75;
    position: absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:2;
}
header.mainHeader h1 {
    position:relative;
    text-align:center;
    color: #333333;
    line-height:1.25;
    z-index:5;
}
header.mainHeader h1 small {
    display:block;
    text-align:center;
    font-family:Cinzel;
    font-size:2rem;
}
article.primary {
    background-color:#FFFFFF;
    position:relative;
    z-index:2;
    min-height:350px;
    width:850px;
    max-width:100%;
    margin:0 auto 40px;
    border-radius: 10px;
    box-shadow:0px 0px 10px 10px rgba(0,0,0,.05);
}
article.primary:before {
    position:absolute;
    content:'';
    width:175px;
    left:0;
    top:0;
    bottom:0;
}
article.primary:after {
    content:'';
    display:block;
    clear:both;
}
.subheading {
    background-color: #EDEDED;
    padding: 7px 15px;
    font-size:1.25rem;
    font-weight:normal;
    font-style:italic;
    border-radius:10px 10px 0 0 ;
}
.exterior {
    max-width:100%;
    float:right;
    margin:10px;
    border-radius:10px;
}
html[lang=fa] .exterior {
    float:left;
}
.contactForm {
    clear:both;
    margin: 30px 0;
    padding: 10px 20% 15px;
    background-color: #EDEDED;
}
.contactForm:before {
    content:'';
    display:block;
    clear:both;
}
.contactForm h3 {
    direction:rtl;
    font-family:Calibri, Helvetica, sans-serif;
    font-size:1.5rem;
    text-align:center;
    text-transform: uppercase;
    font-weight:normal;
    margin: 5px 0;
}
.contactForm .message {
    background-color:#FFAAAA;
    text-align:center;
    padding:10px 15px;
    border-radius:10px;
}
.contactForm label {
    display:block;
    width:100%;
    margin:0px 0 0px;
    padding: 0;
    font-size:1rem;
}
.contactForm input, .contactForm textarea {
    font-family:sans-serif;
    font-size:1.25rem;
    line-height:1.25;
    width:100%;
    margin: 4px 0;
    padding:4px 8px;
}
.contactForm button {
    padding: 12px 15px;
    color:#FFFFFF;
    background-color:#483d8b;
    border-radius:6px;
    border:none;
}
#map {
    width: 100%; 
    height: 450px;
}
.infoWindow address {
    font-style:normal;
}
footer {
    background-color:#483d8b;
    height:100px;
    padding:0 15px;
}
footer p {
    line-height: 100px;
}
footer a {
    color:#FFFFFF;
}
p {
    margin: 10px;
}
.clearEle { clear: both; }
.sr-only { display: none !important; }

@media only screen and (max-width: 480px) {
    .supraHeader address span {
        display:none;
    }
    .supraHeader address a {
        width:100%;
        text-align:right;
    }
    .exterior {
        float:none;
        display:block;
        margin: 0 auto;
    }
    .headerBackground {
        height:75vh;
    }
    header.mainHeader {
        height:75vh;
    }
    header.mainHeader h1 {
        position:relative;
        text-align:center;
        color: #333333;
        font-size:3.25rem;
        line-height:1.15;
        z-index:5;
    }
    html[lang=fa] header.mainHeader h1 {
        font-size:5rem;
        line-height:1.25;
    }
    header.mainHeader h1 small {
        display:block;
        text-align:center;
        font-family:Cinzel;
        font-size:1.75rem;
    }
    html[lang=fa] header.mainHeader h1 small {
        font-size:2rem;
    }
    .contactForm {
        margin: 30px 0;
        padding: 20px 5% 15px;
    }
    footer {
        text-align:center;
        padding: 0px 0;    
    }
}