/*
Theme Name: Drumheller & District Seniors Foundation
Version: 1.0
Description: Drumheller & District Seniors Foundation
Author: selaris.ca
*/
body {
    color: #333;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 16px;
}

.full {
    width: 100%;
}

.clear {
    clear: both
}

.container {
    width: 75%;
    margin: 0 auto;
    /*border:1px solid red*/
}

.mainMenu {
    padding: 0px;
    background-color: #F4D560
}

.top {
    vertical-align: top !important
}

.left {
    float: left
}

.right {
    float: right
}

.half {
    width: 45%;
}
.half.margin-sm{
	margin:1.5%;
}
.twoThirds {
    width: 65%;
}
.oneThird {
	width:28.5%;
	margin:1.5%;
}
.text-center {
    text-align: center !important
}

.inline {
    display: inline-block !important
}


h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    line-height: 120%;
    letter-spacing: 0em;
}

h2 {
    font-size: 2.2em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 10px 0px;
}

    h2.h2Bold {
        font-weight: 700
    }

h3 {
    font-size: 1.6em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 10px 0px;
}

p, td {
    font-size: 1em;
    letter-spacing: 0;
    line-height: 150%;
    font-weight: 300;
}

div.lrgP p {
    font-size: 1.4em
}

hr {
    border: 0;
    background-color: #CCC;
    margin: 40px 0px;
    display: block;
    height: 1px
}

a:active, a:link, a:visited {
    text-decoration: none;
    color: #FCD53A;
    font-weight: 400
}

a:hover {
    text-decoration: none;
    color: #333;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.section {
    padding: 80px 0px;
}

    .section.sectionGrey {
        background-color: #F9F9F9;
    }

a.btnYellow:link, a.btnYellow:active, a.btnYellow:visited {
    background-color: #FCD53A;
    color: #333;
    margin-top: 7px;
    display: inline-block;
    padding: 8px 30px;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 600
}

a.btnYellow:hover {
    background-color: #333;
    color: #FFF;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


/* headlines with lines */
.decorated {
    overflow: hidden;
    text-align: center;
}

    .decorated > span {
        position: relative;
        display: inline-block;
    }

        .decorated > span:before, .decorated > span:after {
            content: '';
            position: absolute;
            top: 50%;
            border-bottom: 2px solid;
            width: 70px; /* half of limiter*/
            margin: 0 20px;
        }

        .decorated > span:before {
            right: 100%;
        }

        .decorated > span:after {
            left: 100%;
        }



.border {
    border-right: 2px solid #FCD53A;
    padding-right: 20px;
}

.topSection {
}

    .topSection .logo {
        background-color: #000;
        padding-left: 25%;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-right: 20px;
    }

        .topSection .logo a {
            text-transform: uppercase;
            font-size: 1.6em;
            color: #FCD53A
        }

    .topSection .logoImg {
        position: relative;
        margin-top: -13px;
    }

        .topSection .logoImg img {
            padding-left: 15px;
            display: block;
            position: relative;
            top: 30px;
        }

    .topSection .contactInfo {
        text-align: right;
        padding-right: 25%;
        padding-top: 40px;
        font-size: 11pt
    }

        .topSection .contactInfo b {
            text-transform: uppercase
        }

        .topSection .contactInfo div {
            vertical-align: top;
            text-align: left;
        }

    .topSection .icon a {
        color: #FCD53A;
        font-size: 2.0em;
    }

    .topSection .contactInfo div.location, .topSection .contactInfo div.contactDetails {
        margin: 0px 20px;
    }

.bannerOuter {
    position: relative;
}

    .bannerOuter .banner {
        background-size: cover;
        display: block;
        position: relative;
        height: 825px;
    }

.bannerContent {
    position: absolute;
    z-index: 1000;
    bottom: 10%;
    right: 10%;
    width: 350px;
    background: rgba(0,0,0,0.7);
    padding: 2.5%;
    color: #FFF
}

.banner .bannerContent h2 {
    font-size: 1.8em;
}
.grid {
    text-align: center
}

    .grid div {
        width: 28%;
        margin: 1.5%;
        display: inline-block;
        vertical-align: top;
    }

        .grid div img {
            width: 100%;
            height: auto;
            border: 5px solid white
        }

.propertyGrid{
	text-align:center
}
.propertyGrid .property{
	width:28.5%;
	margin:1.5%;
	display:inline-block;
	vertical-align:top;
	text-align:text-center
}
.propertyGrid .property p, .propertyGrid .property h3{
	text-align:center
}
.propertyGrid .property .image img{
	width:100%;
	height:auto;	
	border: 5px solid white
}
.grid25{
	width:20%;
	margin:1.5%;
	display:inline-block;
	vertical-align:top;
	text-align:center;
}
.values {
    background-image: url(/wp-content/themes/drumheller/images/bg.ddsf-values.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.value {
    background: rgba(255,255,255,0.6);
    margin: 25px 0px;
    padding: 25px;
}

    .value p {
        font-size: 1.2em;
    }

#googleMap {
    width: 100%;
    height: 450px;
    margin: 30px 0px;
}

.footer {
    background-color: #363636;
    background-position: center right;
    background-image: url(/wp-content/themes/drumheller/images/bg.footer.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    padding-bottom: 50px;
}

    .footer .footerMenu {
        text-align: center;
        padding: 30px 0px;
    }

        .footer .footerMenu ul {
            list-style: none;
            margin: 0 auto;
        }

            .footer .footerMenu ul li {
                display: inline-block;
                margin: 10px 15px;
            }

                .footer .footerMenu ul li a:link, .footer .footerMenu ul li a:active, .footer .footerMenu ul li a:visited {
                    text-transform: uppercase;
                    font-size: 1em;
                    color: #FCD53A;
                    font-weight: 600
                }

                .footer .footerMenu ul li a:hover {
                    color: #FFF;
                }

    .footer ul li a:link, .footer ul li a:active, .footer ul li a:visited {
        font-size: 1em;
        font-weight: 400;
        color: #FCD53A;
        text-transform: none
    }

    .footer ul li a:hover {
        color: #FFF
    }

    .footer p, .footer h3 {
        color: #FFF;
    }

    .footer h3 {
        font-size: 1.2em;
        font-weight: 600;
        letter-spacing: 0em
    }

    .footer .fLogo .whiteText {
        color: #FFF;
        font-size: 2em;
    }
.fLogo{
	border-radius:50%;
	text-align:center;
	width:50px;
	height:50px;
	background-color:#FCD53A !important;
	display:inline-block;	
}

ul.sun, #content .contentBlock ul, .propList ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

    ul.sun li, #content .contentBlock ul li, .propList ul li {
        background-image: url(/wp-content/themes/drumheller/images/ico.ddsf.png);
        background-position: top 13px left 10px;
        background-repeat: no-repeat;
        background-size: 16px !important;
        padding: 10px 20px 10px 40px;
    }
	.contentBlock ul li a:link, .contentBlock ul li a:active, .contentBlock ul li a:visited{
		text-decoration:underline
	}
	.contentBlock ul li a:hover{
		text-decoration:none;
		color:#FCD53A
	}
.copyright {
    background-color: #999;
    text-align: center;
    padding: 20px 0px;
}

    .copyright p {
        color: #FFF;
        font-size: 12px;
    }


/* CONTENT STYLES */
#content h1 {
    font-size: 2.8em;
    margin: 10px 0px 50px 0px;
    letter-spacing: -0.02em
}
#content h2 {
    font-size:2em
}
#content p, #content li {
    line-height:1.5em;
}
#content .contentBlock p {
    margin-bottom:20px;
}
#content .banner {
    background-image: url('/wp-content/uploads/2019/06/slider-image-2.png');
    background-position: center center;
    height: 300px;
}

#content .contentBlock {
    padding: 50px 0px;
}
#content .featuredImage {
    float:right;
    width:45%;
    margin:10px 0px 25px 25px;
}
    #content .featuredImage img {
        width:100%;
        height:auto
    }
#content .featuredImage_Property {
    width:100%;
    margin:20px 0px;
}
    #content .featuredImage_Property img {
        width:100%;
        height:auto
    }
#content .breadcrumb {
    margin: 0px;
    padding: 0px !important;
}
    #content .breadcrumb li a {
        font-weight:400;
    }
#content .contentBlock ul li a {
    font-weight:400;
    color:#000
}
    #content .contentBlock ul li a:hover {
        color:#CCC
    }
#content .rentals {
    text-align:center
}
    #content .rentals .rental {
        width: 20.5%;
        display: inline-block;
        margin: 1.5%;
        vertical-align: top;
    }
    #content .rentals .rental img {
        width:100%;
        height:auto;
        max-width:106px;
    }

#content .photos {
    text-align:center
}
    #content .photos .photo {
        width:21.5%;
        display:inline-block;
        margin:1.5%;
        vertical-align:top;
    }
        #content .photos .photo img {
            width:100%;
            height:auto;
            border:4px solid #EEE;
            border-radius:4px
        }

        #content .applyToday {
            background-image: url(/wp-content/themes/drumheller/images/bg.elderly-couple-apply-today-drumheller-ab-seniors-foundation.jpg);
            background-position: center left;
            background-size: auto 100%;
            background-repeat: no-repeat;
            background-color: #ececec
        }



/* END OF CONTENT STYLES*/
@media screen and (min-width:1100px) and (max-width: 1550px) {
    .container {
        width: 90%;
    }

    .topSection .logo {
        padding-left: 5%;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-right: 20px;
    }

        .topSection .logo a {
            text-transform: uppercase;
            font-size: 1.2em;
            color: #FCD53A
        }

    .topSection .logoImg {
        margin-top: -13px;
    }

        .topSection .logoImg img {
            padding-left: 15px;
            display: block;
            position: relative;
            top: 0px;
            max-width: 200px;
        }

    .topSection .contactInfo {
        text-align: right;
        padding-right: 5%;
        padding-top: 40px;
        font-size: 10pt
    }

    .banner {
        height: 500px;
    }
}

@media screen and (min-width:1100px) and (max-width: 1550px) {
    #content .oneThird.right {
        margin-top:50px;
    }
    #content .rentals .rental {
        width: 20.5%;
        display: inline-block;
        margin: 1.5%;
    }
    #content .photos .photo {
        width: 21.5%;
        display: inline-block;
        margin: 1.5%;
        vertical-align: top;
    }

}
@media screen and (min-width:990px) and (max-width: 1099px) {
    .container {
        width:95%;
    }
    .topSection .logo {
        padding-left: 5%;
        padding-top: 30px;
        padding-bottom: 30px;
        padding-right: 20px;
    }

        .topSection .logo a {
            text-transform: uppercase;
            font-size: 1em;
            color: #FCD53A
        }
    .topSection .contactInfo {
        text-align: right;
        padding-right: 5%;
        padding-top: 40px;
        font-size: 9pt !important
    }
    .topSection .logoImg {
        margin-top: -13px;
    }

        .topSection .logoImg img {
            padding-left: 15px;
            display: block;
            position: relative;
            top: 10px;
            width: 70%;
            height: auto
        }
    .banner {
        height:450px !important;
    }

    #content .rentals {
        text-align: center
    }

        #content .rentals .rental {
            width: 28.5%;
            display: inline-block;
            margin: 1.5%;
            vertical-align:top
        }
    #content .photos .photo {
        width: 28.5%;
        display: inline-block;
        margin: 1.5%;
        vertical-align: top;
    }
}
@media screen and (min-width:800px) and (max-width: 989px) {
    .container {
        width: 90%;
    }

    .mainMenu .container {
        width: 100%;
    }

    #content .twoThirds.left, #content .oneThird.right {
        width: 100%;
        float: none;
        display: block;
        clear: both
    }

    .topSection .half.left, .topSection .half.right {
        white-space: nowrap
    }
    .topSection .logo {
        padding-left: 5%;
        padding-top: 30px;
        padding-bottom: 30px;
        padding-right: 20px;
    }

        .topSection .logo a {
            text-transform: uppercase;
            font-size: 1em;
            color: #FCD53A
        }
    .topSection .logoImg {
        margin-top: -13px;
    }

        .topSection .logoImg img {
            padding-left: 5%;
            display: block;
            position: relative;
            top: 10px;
            width: 70%;
            height: auto
        }

    .topSection .contactInfo {
        text-align: right;
        padding-right: 5%;
        padding-top: 40px;
        font-size: 10pt
    }

    .location {
        padding-right: 10px;
        height: 30px;
    }

        .location.border {
            display: none !important
        }

        .location span {
            display: none !important;
        }

    .topSection .icon a {
        font-size: 2.3em;
        padding: 10px;
    }

    .contactDetails {
        display: none !important
    }


    .banner {
        height: 450px !important;
    }
    #content .rentals {
        text-align: center
    }

        #content .rentals .rental {
            width: 45%;
            display: inline-block;
            margin: 3% 1.5%;
            vertical-align:top
        }
    #content .photos .photo {
        width: 45%;
        display: inline-block;
        margin: 1.5%;
        vertical-align: top;
    }

}
@media screen and (max-width: 799px) {
    h2 {
        font-size: 1.8em;
    }

    h3 {
        font-size: 1.4em;
    }
	.video{
		clear:both !important;
		display:block !important;
		width:100% !important;
		margin:25px 0px !important;
	}
    #content .contentBlock .half {
        width:100%;
        clear:both
    }
    .container {
        width: 90%;
    }

    #content .twoThirds.left, #content .oneThird.right, #content .applyToday .container .right, #content .applyToday .container .left {
        width: 100%;
        float: none;
        display: block;
        clear: both
    }
    #content .applyToday {
        background-image: url(/wp-content/themes/drumheller/images/bg.elderly-couple-apply-today-drumheller-ab-seniors-foundation-faded.jpg);
    }

    .mainMenu .container {
        width: 100%;
    }

    .topSection .half.left, .topSection .half.right {
        white-space: nowrap
    }
    .topSection .logo {
        padding-left: 10%;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 20px;
    }

        .topSection .logo a {
            text-transform: uppercase;
            font-size: 2.5vw;
            color: #FCD53A;
            line-height:120%;
        }

    .topSection .logoImg {
        margin-top: -13px;
    }

        .topSection .logoImg img {
            padding-left: 15px;
            display: block;
            position: relative;
            top: 10px;
            width: 70%;
            height: auto
        }

    .topSection .contactInfo {
        text-align: right;
        padding-right: 5%;
        padding-top: 40px;
        font-size: 10pt
    }

    .location {
        padding-right: 10px;
        height: 30px;
    }

        .location.border {
            display: none !important
        }

        .location span {
            display: none !important;
        }

    .topSection .icon a {
        font-size: 1.6em;
        padding: 10px;
    }
.propertyGrid .property{
	width:100%;
	margin:25px 0px;
	display:inline-block;
	vertical-align:top;
	text-align:text-center
}

    .contactDetails {
        display: none !important
    }

    .bannerOuter {
        position: relative;
    }

    .banner {
        position: relative;
        height: 250px !important;
    }

    .bannerContent {
        position: relative;
        display: block;
        clear: both;
        left: 0px;
        width: 90%;
        padding: 2.5% 5%;
        text-align: center
    }

        .bannerContent h2 {
            font-size: 1.2em;
        }

    .grid div {
        width: 100%;
        margin: 25px 0px;
    }
    #content h1 {
        font-size:2.2em;
    }
    #content .contentBlock {
        padding: 30px 0px;
    }
    #content .featuredImage {
        float: none;
        width: 100%;
        margin: 30px 0px 25px 0px;
    }

        #content .featuredImage img {
            width: 100%;
            height: auto
        }
    #content .rentals {
        text-align: center
    }

        #content .rentals .rental {
            width: 45%;
            display: inline-block;
            margin: 3% 1.5%;
            vertical-align:top;
        }
    #content .photos .photo {
        width: 100%;
        display: inline-block;
        margin: 30px 0px;
        vertical-align: top;
    }
    .values {
    }
	.twoThirds, .oneThird {
		width: 100%;
		display:block;
		margin:25px 0px;
	}
}
@media screen and (max-width:500px) {
    #content .rentals .rental {
        width: 100%;
        display: inline-block;
        margin: 30px 0px;
    }
    #content .photos .photo {
        width: 100%;
        display: inline-block;
        margin: 30px 0px;
        vertical-align: top;
    }
	.propertyGrid .property{
		width:100%;
		margin:25px 0px;
		display:inline-block;
		vertical-align:top;
		text-align:text-center
	}
.twoThirds, .oneThird {
    width: 100%;
	display:block;
	margin:25px 0px;
}

}