@import url('https://fonts.googleapis.com/css?family=Montserrat:300');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
/*SAINT MARKS STYLE 2018*/
/*
Orange      #AE2C0A

Dark red    #AE0A0A
Light Red   #D69584

Light Grey  #FAFAFA
Mid Grey
Dark Grey   #495057

Black       #272727

Gold        #FFA200
*/

:root{
    --st-orange: #AE2C0A;
    --st-red-lt: #D69584;
    --st-red-dk: #AE0A0A;
    --st-grey-lt:#F6F6F6;
    --st-grey-md:#999999;
    --st-grey-dl:#495057;
    --st-black:	 #272727;
    --st-gold:   #FFA200;
}

body {
	font-family: 'PT Serif', Bookman Old Style, Georgia, serif;
	font-size: 1em;
}

/*-------------------------------------------- HEADINGS*/
h1, .h1{
    font-family: 'Montserrat', sans-serif !important;
    font-weight: bold !important;
    color: #AE0A0A !important;
    letter-spacing: 3px;
    text-transform: uppercase;
 }

h2, .h2{
    font-family: 'Montserrat', sans-serif  !important;
    color: #AE0A0A !important;
	letter-spacing: 1px;
    text-transform: uppercase;
}

h3, .h3{
    font-family: 'Montserrat', sans-serif !important;
    color: #AE0A0A !important;
    /*text-transform: uppercase;*/
}

h4, .h4{
    font-family: 'Montserrat', sans-serif !important;
    color: #AE0A0A !important;
    font-size: 0.9em !important;
    text-transform: uppercase;
}



/*----------------------------------- PARAGRAPHS & TEXT*/

p{
    font-family: 'PT Serif', serif;
    /*font-weight: bold;*/
    font-size: 1em;
    color: black !important;
}

#p-lead, .p-lead{
    font-family: 'PT Serif', serif;
    font-weight: bold;
	font-size: 1.1em;
}

.field--name-field-lead-paragraph {
    font-size: 1.15em;
}

.cards a{
    color: black;
}


#sidebar p, #events-wrapper p{
    font-family: 'PT Serif', serif;
}

.grey-text{
    color: #495057 !important;
}

.dark-grey-text{
    color: #495057 !important;
}

blockquote {
    text-align: center;
    font-style: italic !important;
    width: 50%;
    font-family: 'PT Serif', serif;
    color: #AE0A0A;
    margin: 20px auto;
    font-size: 15pt;
}

.italic{
    font-style: italic !important;
    }

.media-bg{
    background-color: #FAFAFA;
    border: solid #DBDBDB;
    border-width: 1px;
    padding: 10px;
    padding-bottom: 0;
}

.text-menu{
    color: white;
    font-family: 'Montserrat', sans-serif;
}


.centered{
    /*text-align: center;*/
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.text-center{
    text-align: center;
}

.bot-mar-100{
    margin-bottom: 100px;

}

.text-white{
    color: white !important;
}

/*------------------------------------- BUTTONS & LINKS*/
button {
    text-transform: uppercase;
}

.btn-drk-red{
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: white !important;
    font-size: small;
    text-transform: uppercase;
    background-color: #AE0A0A;
    border: 1px solid;
    border-color: #AE0A0A;
    padding: 10px 30px;
	cursor: pointer;
    transition: 0.5s;
}

.btn-drk-red:hover {
    background: #fff;
    color: #AE0A0A !important;

}


.btn-lt-red{
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: white;
    font-size: small;
	cursor: pointer;
    text-transform: uppercase;
    background-color: #D69584;
    border: 1px solid;
    border-color: #D69584;
    padding: 10px 30px;
    transition: 0.5s;
}

.btn-lt-red:hover {
    background: #fff;
    color: #D69584;
}

.btn-white{
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #AE0A0A;
    font-size: small;
    text-transform: uppercase;
    background-color: white;
    border: 1px solid;
    border-color: #AE0A0A;
    padding: 10px 30px;
	cursor: pointer;
	transition: 0.5s;
}

	.btn-white:hover {
		background: #AE0A0A;
		color: #fff;
	}

#sidebar{
    padding: 25px;
    padding-top: 0;
}

#sidebar hr{
    color: #495057;
    border-color: #495057;
    background-color: #495057;
}

hr{
    color: lightgrey;
    border-color: lightgrey;
    background-color: lightgrey;
}

#sidebar a{
    color: #495057;
    transition: 0.1s;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    border-color: #495057;
}

#sidebar ul{
    padding: 0;
    padding-bottom: 50px;
    list-style-type: none;
}

#sidebar li{
    color: #495057;
    transition: 0.3s;
    text-align: left;
    font-size: 0.9em;
    font-family: 'Montserrat', sans-serif;
    border-color: #495057;
    list-style-type: none;
    border-bottom: #495057 solid;
    border-width: 1px;
    padding-bottom: 4px;
    display: block;
}

    #sidebar a:hover{
        text-decoration: none;
        color: #AE0A0A;
        border-color:  #AE0A0A;
        /*font-weight: bold;*/
    }


#sidebar img{
    width: 40%;
    height: 40%;
    box-shadow: 0px 0px 20px darkgrey;
    border-radius: 50%;
}


.btn-long{
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: var(--st-red-dk);
    font-size: small;

    background-color: white;
    border: 1px solid;
    border-color: var(--st-red-dk);
    padding: 10px 30px;
    cursor: pointer;
    transition: 0.5s;
    width: 100%;
}
.btn-long:hover {
    background: var(--st-red-dk);
    color: #fff !important;
}
.nav-tabs{
    border: none;
    border-bottom: 5px solid #AE0A0A !important;
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 0;
    padding: .5rem 1rem;
}

.navbar {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#home-tab, #profile-tab{
    width: 100%;
    color: white;
}

.tab-content .tab-pane{
    background-color: white !important;
    border-radius: 0;
}

.tab-pane{
    text-align: left;
    align-content: center;
    padding-top: 1em;
}

.grey-bg{
    background-color: var(--st-grey-lt) ;
}

.md-grey-bg{
    background-color: var(--st-grey-md) ;
}

.schedule .nav-item{
    width: 50%;
    margin-right: 0px;
    margin-left: 0px;
}

.schedule .nav-item a{
    color: white;
}

.schedule .nav-item a:active{
    background-color: var(--st-red-dk) !important;
    color: white;
}

.schedule .nav-link{
    display: inline-block;
}

.schedule nav{
    flex-wrap: nowrap ;
}

.active {
    background-color: var(--st-red-dk) !important;
}

.tab-pane p{
    line-height: 20px;
}

.tab-content ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding: 5px;
    padding-left: 10px;
    font-family: 'PT Serif', Bookman Old Style, Georgia, serif;
}

.a {
    padding: 6px;
    background-color: var(--st-grey-lt);
}

.b {
    padding: 6px;
    background-color: white;
}


/*----------------------------------------- HEADER and FOOTER*/

button.navbar-toggler { /*For Mobile*/
    color: #fff;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    display: block;
    width: 100%;
    border-radius: 0;
    padding: 15px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Montserrat', helvetica, arial, sans-serif;
}

.header .navbar-nav {
    margin: 0 auto;
}

.header .navbar a {
    text-transform: uppercase;
    color: white;
    font-family: 'Montserrat', sans-serif;
    transition: 0.4s;
    border-bottom: none;
    font-size: 0.76em;
}

.header .navbar a:hover {
    opacity: 0.8;
    border-bottom: solid gold 1px;
    color: white;
}

.header .container a {
    display: inline-block;
    cursor: pointer;

    /* Prevents header from changing size when lives are in hover state */
    border-bottom: solid 1px rgba(0,0,0,0);
}


.header-bg{
    /*max-height: 25%;*/
    background-size: cover;
    max-width: 1200px;
    align-content: right;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 60px;
}

.header{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ae2c0a+0,ae0a0a+100 */
    background: #ae2c0a; /* Old browsers */
    background-image: url('/themes/custom/stmarktheme/img/header-bg-long.png'), -moz-linear-gradient(left, #ae2c0a 0%, #ae0a0a 100%); /* FF3.6-15 */
    background-image: url('/themes/custom/stmarktheme/img/header-bg-long.png'), -webkit-linear-gradient(left, #ae2c0a 0%,#ae0a0a 100%); /* Chrome10-25,Safari5.1-6 */
    background-image: url('/themes/custom/stmarktheme/img/header-bg-long.png'), linear-gradient(to right, #ae2c0a 0%,#ae0a0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ae2c0a', endColorstr='#ae0a0a',GradientType=1 ); /* IE6-9 */
    max-height: 100%;
    width: 100%;
    position: relative;
    margin-bottom: 2em;
    /*top: -40px;*/

}

ul.sub-menu {
    display: none;
    position: absolute;
    background: #495057;
    z-index: 999;
}

ul.sub-menu li {
    position: relative;
}

.menu-item--collapsed {
    list-style-image: none;
    list-style-type: none;
}

ul.menu a.is-active {
    color: #FFA200;
}

.menu .nav-item {
    margin-right: 15px;
    margin-left: 15px;
}

/* mobile header and footer */
@media screen and (max-width: 768px) {
    .header {
        background-position: center top;
    }
    .nav-item {
        text-align: center;
    }
    .footer {
        background-position: center center;
    }
    .mbl-marg {
        margin-top: 3rem !important;
    }
    .volunteer {
        background: #f1dad6 url(/themes/custom/stmarktheme/img/header-bg-long.png) top left no-repeat !important;
        background-size: cover !important;
    }
    .all-volunteers {
        margin-top: 2rem;
    }

    ul.sub-menu {
        position: inherit;
        background: none;
    }

    ul.sub-menu {
        position: inherit;
    }
    
}


.logo{
    position: relative;

    max-height: 33%;
    max-width: 33%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
    padding-top: 40px;
    }

#topnav {
    position: relative;
    z-index: 999 !important;

}

.footer{
    color: white;
    max-height: 250px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ae2c0a+0,ae0a0a+100 */
    background: #ae2c0a; /* Old browsers */
    background: url('/themes/custom/stmarktheme/img/footer-bg.png'), -moz-linear-gradient(left, #ae2c0a 0%, #ae0a0a 100%); /* FF3.6-15 */
    background: url('/themes/custom/stmarktheme/img/footer-bg.png'), -webkit-linear-gradient(left, #ae2c0a 0%,#ae0a0a 100%); /* Chrome10-25,Safari5.1-6 */
    background: url('/themes/custom/stmarktheme/img/footer-bg.png'), linear-gradient(to right, #ae2c0a 0%,#ae0a0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ae2c0a', endColorstr='#ae0a0a',GradientType=1 ); /* IE6-9 */
    /*padding: 50px;*/

}

.footer a {
    display: inline-block;
    padding: 0 10px;
    font-size: 0.8em;
    transition: 0.1s;
    text-align: justify-all;
    font-size: 1.0em;
    /*padding-top: 10px;*/
}

.footer li {
    color: white !important;
    display: inline-block;
}


.subfooter li {
     color: white !important;
     display: inline-block;
 }

.footer-bg {
    /*max-height: 25%;*/
    /*background-image: url('/themes/custom/stmarktheme/img/footer-bg.png');*/
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
    max-width: 1200px;
    align-content: right;
    display: block;
    position: relative;
    width: 70%;
    height: 70%;
    top: 0;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 60px;
}


.subfooter{
    text-align: center;
    color: #9e9e9e;
    background-color: black;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    padding: 25px;
}

.subfooter .container {
    text-align: center;
    width: 90%;
    cursor: pointer;
}

.subfooter .container a {
    color:white;
     display: inline-block;
     padding: 0 10px;
     font-size: 0.7em;
    transition: 0.1s;
    text-align: justify-all;
 }

#phone-number{
    color: white;
}


/*----------------------------------------- POSITIONING*/

.center{
    margin-right: auto;
    margin-left: auto;
    text-align: center}

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

.margin-bottom-20 { margin-bottom: 20px; }

.margin-bottom-30 { margin-bottom: 30px; }

.margin-bottom-40 { margin-bottom: 40px; }

.margin-bottom-80 { margin-bottom: 80px; }

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



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

.margin-top-20 { margin-top: 20px; }

.margin-top-40 { margin-top: 40px; }


.padding-top-80 { padding-top: 80px; }



.margin-right-10 { margin-right: 10px; }

.margin-right-20 { margin-right: 20px; }


.width-50{ width: 50%}

.width-80{ width: 80%}

.menu-pos{
    margin-top: -10vh ;
}

img {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

	.image-style-large-responsive {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
		height: auto!important;
	}

#events-wrapper{
    margin-top: 20px;
    margin-bottom: 70px;
}



/*----------------------------------------- CARDS AND MEDIA*/

.home-banner{
    width: 100%;
    position: relative;
    top: -4em;
    margin-bottom: -3em;
    box-shadow:0 0 18px #272727;
}

.event-icon{
    width: 90px;
    height: 90px;
    background-color:#495057;
}

.card {
    padding: 10px;
    border: 0;
    transition: 0.3s;
    text-decoration: none;
}

.card-img {
    margin-top: 15px;
    width: 40%;
    box-shadow: 0 0 15px #272727;
    border-radius: 51%;
}

.card:hover {
    background: #FAFAFA;
    border: solid 1px #DBDBDB;
    box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.1);
    color: #000;
    border-radius: 0;
    text-underline: none !important;
}

.card:hover button {
    background: #fff;
    color: #AE0A0A;
}

.card-img-top {
    background-color: #495057;
}

.home-cards a , .news-cards a , .small-card a {
    text-decoration: none;
}

.sm-card:hover {
    box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.1);
}

.volunteer {
    padding: 2rem;
    background: #f1dad6 url(/themes/custom/stmarktheme/img/header-bg-long.png) top right no-repeat;
    background-size: contain;
}

.tax-icon > div .field__item img{
    border-radius: 50%;
    background:#AE0A0A;
    box-shadow: 0 0 3rem .5rem rgba(0, 0, 0, .275) !important;
    height: 250px;
    width: 250px;
    object-fit:cover;
}


/* UPCOMING EVENT VIEW */
.view-upcoming-events a {
    color: #AE0A0A !important;
}

.view-upcoming-events .btn-drk-red {
	color: #fff !important;
	border-color: #AE0A0A !important;
}

.view-upcoming-events .btn-drk-red:hover {
	color: #AE0A0A !important;
}

.form--inline {
    margin-top: 30px;
    display: flex;
}

#edit-tid {
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%;
    margin-top: 0;
}

/* RECENT NEWS VIEW */
.view-recent-news a {
    color: #AE0A0A !important;
}

/* REGISTRATION FORM */
.form-text, .form-email {
    max-width: 100%;
}

#edit-children-add-more-items {
    display: none;
}

/* GALLERY - SLICK SLIDER MODIFICATIONS */
.slick-prev {
    left: -35px;
}
.slick-prev:after {
    color: #000000;
    font-size: 30px;
}
.slick-prev::before{
    color: #000000;
    font-size: 30px;
}
.slick-next:before {
    color: #000000;
    font-size: 30px;
}

.dropdown-open {
    display: block !important;
}

.messages--error{
    display: none;
}