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

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

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

    .homepage-section-title{
        font-size: 35px;
        color: #00529B;
        //font-weight: inherit;
        //font-style: normal;
        //font-stretch: normal;
        line-height: 1.2;
        letter-spacing: normal;
        text-align: center;
        padding: 0;
        //text-transform: none;
        display:block;
        padding-bottom:15px;
    }

    .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;
    }



/* Homepage Featured Links
-------------------------------------------------- */

    .homepage-feature-banner{
        background-image: url('https://www.east-ayrshire.gov.uk/Resources/Image/D/dean-castle-in-spring.jpg');
        background-size: cover;
        background-position: right;
       // background-attachment: fixed;
        //background-position-x: right;    
    }

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

        .homepage-feature-banner{
            background-image: url('https://www.east-ayrshire.gov.uk/Resources/Image/D/dean-castle-in-spring.jpg');
            //background-position-x: top; 
            background-position: bottom;
        }

    }

    .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 Spotlight Cards
-------------------------------------------------- */

    .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 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;
    }

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

/* Homepage Services
-------------------------------------------------- */

    .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;
        //display: flex;
    }
    
    .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;
    }

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
  margin: /*20px*/ 0;
}

.carousel .container {
  position: relative;
  z-index: 9;
}

.carousel-control {
  font-size: 120px;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  z-index: 10;
}
.carousel-control > i {
    display: inline-block;
    left: 40%;
    position: absolute;
    top: 40%;
    z-index: 5;
}

.carousel .item {
  height: 500px;
}

.carousel-caption {
  background-color: #333;
  background-color: rgba(0,0,0,0.75);
  position: static;
  max-width: 550px;
  padding: 20px;
  margin-top: 275px;
}
.carousel-caption h1,
.carousel-caption .lead {
  margin: 0;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
  margin-top: 10px;
}

/* Carousel images */
.carousel .item .img {
  background-position: center;
  background-size: cover;
  height: 500px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* TASKS CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.tasks .span4 {
  text-align: left;
}
.tasks h2, h3, h4 {
  font-weight: normal;
}
.tasks .span4 p {
  margin-left: 10px;
  margin-right: 10px;
}

/*Homepage Cards
------------------------*/

.features{
  margin-top:20px;
}


/* Featurettes
------------------------- */

.featurette {
  margin-top: 20px;
  overflow: hidden;
}
.featurette a {
  display: block;
}
.featurette-divider {
  margin: 40px 0; /* Space out the Bootstrap <hr> more */
}
.featurette-image {
  margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}

/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
  margin-right: 40px;
}
.featurette-image.pull-right {
  margin-left: 40px;
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

.today { background-color: #DBE5EE; margin-top: 20px; padding: 0px 10px 10px 10px; }
.today h4 { margin-bottom: 0; }
.today ul li { margin-bottom: 10px; }
.today ul li a { margin-left: 30px; text-decoration: none; }
.today ul li a.tweet { color: #333; }
.today ul li a:hover { text-decoration: none; }
.today ul li a span { display: block;}
.today ul li a.tweet em { display: inline; color: #aaa; }
.today .featured { font-size: 16px; line-height: 22px; }

.news h4 { margin-bottom: 0; }
.news ul li { margin-bottom: 10px; }
.news ul li a:hover { text-decoration: none; }
.news ul li a span { display: block;}
.news .featured { font-size: 16px; line-height: 22px; }

.events h4 { margin-bottom: 0; }
.events ul li { margin-bottom: 10px; }
.events ul li a:hover { text-decoration: none; }
.events ul li a span { display: block;}
.events .featured { font-size: 16px; line-height: 22px; }

.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) {

}


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

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

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    .carousel .item{height:500px}
    .carousel img{width:auto;height:500px}
    .featurette{height:auto;padding:0}
    .featurette-image.pull-left,.featurette-image.pull-right{display:block;float:none;max-width:40%;margin:0 auto 20px}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    /*.carousel,.full-width{margin-left:-20px;margin-right:-20px}*/
    .carousel .item{height:300px}
    .carousel .item .img{height:300px}
    .carousel-caption{margin:0;max-width:100%;padding:10px;width:auto}
    .carousel-caption h1{font-size:30px}
    .carousel-caption .lead,.carousel-caption .btn{font-size:18px}
    .carousel-caption .btn-large{border-radius:3px 3px 3px 3px;font-size:11.9px;padding:2px 10px}
    .carousel-caption .btn-large [class^="icon-"],.btn-large [class*=" icon-"]{margin-top:0}
    .featurette-heading{font-size:30px}
    .featurette .lead{font-size:18px;line-height:1.5}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
    .carousel .item .container{padding: 0;}
}

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