/* Homepage General Styles
-------------------------------------------------- */

    .content-section{
        padding: 30px 0px;
    }

    .light-bg-section{
        background-color: #dce5ee;
    }

    .homepage-section-title{
        font-size: 35px;
        color: #00529B;
        line-height: 1.2;
        letter-spacing: normal;
        text-align: center;
        padding: 0;
        display:block;
        padding-bottom:25px;
        margin-top: 10px;
    }

    .homepage-section-title:after { /* this is the border */
        content:"";
        display:block;
        width: 6em;
        max-width:70%;
        border-bottom: 3px solid #F3C577;
        margin: 10px auto 0;
    }

    .homepage-fs-btn-container{
        text-align:center; 
        margin: 15px;
    }

    /*Equal Columns*/
    .equal {
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
    }

        /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .content-section{
            padding: 60px 0px;
        }
    }

/* Homepage Announcement
-------------------------------------------------- */

.announcement-container{
	padding: 5px 0px;
}

.announcement-bar{
    background-color:#FFEB3B;
}

.announcement-container .close{
    padding-top: 5px;
    padding-right: 14px;
    font-size: 30px;
    opacity: 1;
}

.announcement-container .close:hover{
    color: #00529B;
}

.announcement-container .announcement-list{
    list-style: none;
    padding: 0;
    margin:5px 0px;
}

.announcement-container .announcement-list li{
    padding:5px;
}

.announcement-container .announcement-link{
	margin-left:14px;
    font-size: 16px;
    color: #000000;
}

.announcement-container .announcement-link:hover{
    color: #00529B;
    text-decoration: underline;
	text-underline-offset: 0.2em;
}


.announcement-container .announcement-link::before {
    font-weight: 900;
    display: inline-block;
    content: '\f06a';
    font-family: 'FontAwesome';
    font-size: 25px;
    padding-right: 8px;
}

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .announcement-container .announcement-link{
            font-size:22px;
        }

        .announcement-container .announcement-link::before{
            font-size: 21px;
        }
    }

/* Homepage Hero Banner
-------------------------------------------------- */

    .homepage-hero-banner{
        background-image: url('https://www.east-ayrshire.gov.uk/Resources/Image/D/dean-castle-hero-image.jpg');
        /* background-image: url('https://www.east-ayrshire.gov.uk/Resources/Image/B/burns-monument-centre-snow-hero-image.jpg');*/
        background-size: cover;
        background-position: center;
        height: 180px;
        //height: auto;
    }

    .homepage-hero-banner .container{
        position: relative;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* height: 180px; */

    }

    .homepage-hero-banner .image-caption {
        width: auto;
        max-width: 300px;
        line-height: 1.3;
        right: 0;
        bottom: 15px;
        color: #ffffff;
        font-size: 12px;
        float: right;
        display: block;
        position: absolute;
        background-color: #00529B;
        padding: 10px 10px 10px 10px;
        opacity: 0.9;
    }

    .homepage-hero-banner .image-caption .image-caption__icon{
        padding-right: 5px;
        font-size: 20px;
    }

    .homepage-hero-banner .image-caption a{
        color: #ffffff;
    }
    
    .homepage-hero-banner .image-caption a:hover{
        text-decoration: underline;
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 768px) {

        .homepage-hero-banner{
            background-image: url('https://www.east-ayrshire.gov.uk/Resources/Image/D/dean-castle-hero-image.jpg');
            /* background-image: url('https://www.east-ayrshire.gov.uk/Resources/Image/B/burns-monument-centre-snow-hero-image.jpg'); */
            background-position: bottom;
            height: 330px;
            //background-position-y: -220px;
        }

        .homepage-hero-banner .image-caption {
            font-size: 12px;
            padding: 10px 13px 13px 13px;
            opacity: 1;
        }

    }

    .homepage-hero-banner .image-static-info {
        width: auto;
        max-width: 600px;
        line-height: 1.3;
        right: 0;
        bottom: 15px;
        color: #ffffff;
        font-size: 12px;
        //float: right;
        display: block;
        //position: absolute;
       // background-color: #282828;
       background: rgb(40, 40, 40);
        background: rgba(40, 40, 40,.9);
        padding: 10px 20px 20px 20px;
    }

    .homepage-hero-banner .image-static-info h2{
        font-size: 20px;
    }

    .homepage-hero-banner .image-static-info p{
        font-size: 14px;
    }

    .homepage-hero-banner .image-static-info .btn{
        margin-top: 10px;
    }

        /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

        .homepage-hero-banner{
            background-image: url('https://www.east-ayrshire.gov.uk/Resources/Image/D/dean-castle-hero-image.jpg');
            /* background-image: url('https://www.east-ayrshire.gov.uk/Resources/Image/B/burns-monument-centre-snow-hero-image.jpg'); */
            background-position: bottom;
            height: 330px;
            //background-position-y: -220px;
        }

        .homepage-hero-banner .image-caption {
            font-size: 14px;
            padding: 10px 13px 13px 13px;
            opacity: 1;
        }

        .homepage-hero-banner .image-static-info h2{
            font-size: 24px;
        }

        .homepage-hero-banner .image-static-info p{
            font-size: 16px;
        }
    }

    @media only screen and (min-width : 1200px) {

        .homepage-hero-banner{
            /* background-image: url('https://www.east-ayrshire.gov.uk/Resources/Image/B/burns-monument-centre-snow-hero-image.jpg'); */
            background-image: url('https://www.east-ayrshire.gov.uk/Resources/Image/D/dean-castle-hero-image.jpg');
            background-position: bottom;
            height: 330px;
            //background-position-y: -200px;
        }

        .homepage-hero-banner .image-caption {
            font-size: 14px;
            padding: 10px 13px 13px 13px;
            opacity: 1;
        }

    }

    
    @media only screen and (min-width : 1400px) {

        .homepage-hero-banner{
            /* background-image: url('https://www.east-ayrshire.gov.uk/Resources/Image/B/burns-monument-centre-snow-hero-image.jpg'); */
            background-image: url('https://www.east-ayrshire.gov.uk/Resources/Image/D/dean-castle-hero-image.jpg');
            background-position: bottom;
            height: 330px;
            //background-position-y: -200px;
        }

        .homepage-hero-banner .image-caption {
            font-size: 14px;
            padding: 10px 13px 13px 13px;
            opacity: 1;
        }

    }


/*Feature box inside hero - phasing out.*/

    .feature-box{
        width:100%;
        margin-bottom: 1em;
    }

    .feature-card-box {
        padding: 1em;
        margin: 0em 1em;
        background-color:white;
        opacity: 95%;
        height: 100%;
        border: solid 1px lightgrey;
        box-shadow: 2px 2px 10px 0px rgb(195 195 195);
        border-radius: 7px;
    }

    .feature-card-title{
         margin-bottom: .75rem;
    }

    .feature-card-box h2{
        font-size:25px;
        color: #0C3D6C;
    }

    .feature-card-box span{
        padding-bottom: 1.4rem; 
        display: block; 
        font-size: 16px;
    }

    .feature-card-box ul{
        padding-left: 0px;
    }

    .feature-card-box ul li {
        padding: .55rem 0rem;
        font-size: 16px;
        padding-left: 0;
        list-style: none;
    }

    .feature-card-box ul li a:after {
      content: "\f054";
      font-family: 'FontAwesome';
      padding-left: 10px;
    }

    .feature-card-box ul li a:hover {
        color: #777;
    }

    .btn-oea-login{
        margin-right: 10px;
    }

/* Homepage Top Tasks
-------------------------------------------------- */

    .top-tasks-row,
    .services-links-row{
        //margin-top: 20px;
    }

    .top-tasks-container,
    .services-links-container{
        display: flex;
        flex-wrap: wrap;
    }

    .top-tasks-row .top-task-column:nth-child(n+7),
    .services-links-row .service-link-column:nth-child(n+7){
	    max-height: 0;
        overflow: hidden;
        display: none;

    }

    .top-tasks-row.open .top-task-column:nth-child(n+7),
    .services-links-row.open .service-link-column:nth-child(n+7){
        display: block;
        max-height: 600px;
        -webkit-transition: max-height 0.5s linear;
	    -moz-transition: max-height 0.5s linear;
        -ms-transition: max-height 0.5s linear;
        -o-transition: max-height 0.5s linear;
        transition: max-height 0.5s linear;
    }

    .top-task-item,
    .service-link-item{
        font-size: 17px;
        line-height: 1.3;
        width:100%;
        letter-spacing: -.025rem;
        float: left;
        margin: 1rem 0rem;
    }
    
    .top-task-item a,
    .service-link-item a{
        display: flex;
        align-items: center;
        background-color: #F7F7F7;
        border-left: 6px solid #00529B;    
        padding: 2.2rem 1rem;
        width: 100%;
        height: 100%;
        box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    }

    .top-task-item a:hover,
    .service-link-item a:hover{
        background-color: #dce5ee;
    }

    .top-task-item a:focus,
    .service-link-item a:focus {
        outline: 2px transparent solid;
        box-shadow: #000000 0px 0px 0px 2px, #fd0 0px 0px 0px 4px !important;
    }

    .top-task-item a::after,
    .service-link-item a:after {
        outline: 0;
        outline-offset: 0;
    }

    .top-task-item .top-task-item__icon,
    .service-link-item .service-link-item__icon{
        left:2px;
        font-size: 23px;
        color: #00529B;
        margin: 0px 10px 0px 10px;
    }

   .top-task-item .top-task-item__icon i,
   .service-link-item .service-link-item__icon i{
        width: 25px;
        text-align: center;
    }

    .top-task-item .top-task-item__name,
    .service-link-item .service-link-item__name{
        font-size:18px;
        margin: 0;
        //color: #00529B;
        color: #263135;
        width:100%;
        display: table-cell;
        vertical-align: middle;
    }

    .top-task-item .top-task-item__name span,
    .service-link-item .service-link-item__name span{
        width: 40px;
        min-height: 40px;
        font-size:25px;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        background-repeat: no-repeat;
        background-position: top;
    }

    .btn-more-top-tasks span,
    .btn-more-service-links span{
        padding-left:10px;
    }


/* Homepage Spotlight Cards - PHASING OUT!
-------------------------------------------------- */

    .spotlight-card{
        border: solid 1px lightgrey; 
        box-shadow: 2px 2px 10px 0px rgb(195 195 195); 
        border-radius: 7px; 
        margin-bottom: 20px; 
        background-color:#ffffff;
        width:100%
    }

    .spotlight-card-title{
        cursor: pointer; 
        background-color: #0d5ba0; 
        width: 100%; 
        color: white; 
        font-size: 18px; 
        font-weight: 500; 
        padding: 10px; 
        margin-bottom: 0;
    }

    .spotlight-card-ft-image-holder{
         border-top-left-radius: 7px; 
         border-top-right-radius: 7px;
    }

    .spotlight-card-ft-image{
        object-fit:cover;
        object-position: center;
        height:170px;
        width: 100%;
    }

    .spotlight-card-body{
        cursor: pointer; 
        padding: 15px 10px; 
        min-height: 80px;
        color: #00529B;
        font-size:16px;
    }
    

    .spotlight-card-body:hover{
        //background-color: #dce5ee;
        color: #777;
    }

/* Homepage Featured Panels
-------------------------------------------------- */

.grid-featured-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    grid-auto-rows: minmax(400px, auto);
    margin-top:40px;
}

.featured-card{
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 2px;
    border-top: #00529B solid 6px;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.featured-card__image-container img{
	height: 100%;
	width: 100%;
	object-fit: cover;
    object-position: center;
    max-height: 200px;
}

.featured-card__content-container{
    flex: 1;
    background-color: #dce5ee;
	color: #333; 
    padding: 10px 10px 25px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.featured-card__content-container h2{
    margin-top: 0.9rem;
    font-size: 20px;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.featured-card__content-container .btn{
    padding: 0.8rem 2rem;
    margin-top: auto;
    font-size:14px;
}

.featured-card img{
	max-height: 200px;
}

.featured-card .btn{
	padding: 0.8rem 2rem;
    white-space: normal;

}


@media (min-width: 768px) {

    .grid-featured-container{
          grid-template-columns: repeat(3, 1fr);

    }

    .featured-card{
      flex: 1;
    }

	.featured-card__image-container{
        height: auto;
	}

    .featured-card__content-container{
        padding: 20px 40px;
    }

    .featured-card__content-container h2{
        font-size: 20px;
        margin-bottom:2rem;
    }

    .featured-card__inner p{
        font-size:16px;
        padding-bottom:10px;
    }

    .featured-card__content-container .btn{
        padding: 1.2rem 2rem;
        white-space: normal;

    }

    .featured-card img{
        height: 200px;
	    max-height: 200px;
    }


}


/* Homepage News
-------------------------------------------------- */

    .latest-news-card{
        margin-top:25px;
        border: solid 1px lightgrey; 
        box-shadow: 2px 2px 10px 0px rgb(195 195 195); 
        border-radius: 7px; 
        margin-bottom: 20px; 
        background-color:#ffffff;
    }

    .latest-news-card .ft-image-holder{
        position: relative; 
        width: 100%
    }

    .latest-news-card .ft-image{
        object-fit:cover;
        height:170px;
        width: 100%;
    }
    
    .latest-news-card .article-date{
        position: absolute; 
        bottom: 0px; 
        right: 0; 
        color: white; 
        font: bold 16px/45px Helvetica, Sans-Serif; 
        letter-spacing: -1px;  
        background: #00529B;
        padding: 7px 10px; 
    }

    .latest-news-card .title{
        position: relative;
        padding-left: 17px;
        margin-bottom: 16px;
    }

    .latest-news-card .title::before{
        content: "";
        border-left: 8px solid #00529B;
        width: 8px;
        height: 100%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 0;
    }

    .news-link{
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: normal;
        text-decoration: none;
        color: #00529B;
    }

    .news-link:hover{
        color: #777;
    }

    .new-link:focus{
        outline: 3px solid #fd0;
        outline-offset: 0;
    }

    .latest-news-card .article-content{
        padding: 20px;
        //min-height: 200px;
        font-size: 14px;
    }

/* Homepage Services -- PHASING OUT!
-------------------------------------------------- */

    .services-row .service:nth-child(n+5){
        display:none;
    }

    .services-row.open .service:nth-child(n+5){
        display:block;
    }

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

    .services-container{
        display: flex;
        flex-wrap: wrap;
    }

    .services-container .service{
        font-size: 17px;
        line-height: 1.3;
        letter-spacing: -.025rem;
        float: left;
        margin: 1rem 0rem;
    }
    
    .services-container .service a{
        display: block;
        background-color: #ffffff;
        border-left: 6px solid #00529B;    
        padding: 2.2rem 1rem;
        width: 100%;
        height: 100%;
        box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    }

    .services-container .service a:hover{
        background-color: #dce5ee;
    }

    .service-name{
        font-size:21px;
        padding-left: 45px;
        padding-right: 22px;
        margin: 0;
        color: #00529B;
        position: relative;
    }

    .service-name:after {
        content: "\f054";
        position: absolute;
        top: 2px;
        right: 0;
        font-family: 'FontAwesome';
    }

    .service-name span{
        width: 40px;
        min-height: 40px;
        font-size:25px;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        background-repeat: no-repeat;
        background-position: top;
    }

    .btn-more span{
        padding-left:10px;
    }


.navigation ul li:last-child { margin-top: 8px; }
.tasks ul li:last-child { margin-top: 8px; }

/* RESPONSIVE CSS: Mobile First
-------------------------------------------------- */

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}