/* Alerts */
.alert{border-radius:0; padding:15px 20px; text-align: center; border:none; background-color:$black; color:$white; margin:20px 0; line-height:1.4; border-radius: 5px; font-weight: 700;
    &-info{background-color:$black;}
    &-warning{background-color:$red;}
    &-danger{background-color:$red;}
    &-success{background-color:$lightblue;}
}


/* Background Colours */
.bg-lightgrey{background: $lightgrey;  color: $black;}
.bg-dark, .bg-teal{background: $black !important; color: $white;
    *{color: inherit;}
}
.bg-teal{background: $teal !important;
    .lead{color: $white;}
}


/* Badges */
.badge{background:$turquoise; color: $black; padding:0; width: 50px; height: 50px; line-height: 50px; font-size: 13px; font-family: $title; text-transform: uppercase; border-radius: 50%;}


/* Accordion */
.panel-group{ margin:40px 0 50px;
    .panel{margin:0 0 20px !important; font-size: 15px; background:$white; border:none; box-shadow: 0 0 20px rgba($black,0.2); border-radius: 10px; overflow:hidden;}
    .panel > .panel-heading{padding:0; background:none;
        a{padding:20px 50px 20px 30px; color:$black; background:$white; display:block; position:relative; border-radius:0;
            &:hover{text-decoration:none;}
        }
        a:after{content:"\f107"; font-family:'Font Awesome 5 Pro'; font-weight:400; font-size: 18px; position:absolute; top:20px; right:20px;}
        a[aria-expanded="true"]{ background: $lightgrey;
            &:after{content:"\f106";}
        }
        & > .panel-title{ text-transform:none; line-height: 1.2; font-size:20px;
            &:after{display:none;}
        }
        & + .panel-collapse > .panel-body{border:none; background:none; padding:25px 30px 30px; border-radius:0; line-height: 1.6; font-size: 15px;
            p{margin-bottom: 15px;}
            :last-child{margin-bottom:0;}
        }
    }
    .section-faqs &{margin-bottom: 0;}
}


/* Testimonaial */
.testimonial, blockquote{ position: relative; text-align: left; max-width: 840px; margin: 0 auto 30px; color: $black; border-left: 10px solid $lightblue; padding: 50px 0 20px 40px; font-size: 15px;
    &:before{content:"\201c\201d"; font-size: 40px; font-family: $title; color: $black; font-weight: 700; line-height: 1; position: absolute; top: 20px; left: 40px;}
    p{margin: 0;}
    .author{padding-top: 20px;
        img{width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 10px; border: 5px solid $turquoise;}
        .author-content{
            p{font-weight: 300; font-size: 18px;
                &.author-role{font-weight: 700; text-transform: uppercase; font-size: 12px;}
            }
        }
    }
    & > :last-child{margin: 0;}
}

.stars{font-size: 0; color: $red;
    i{font-size: 13px; margin-right: 1px;}
}



/* Video */
.content-video{ overflow: hidden;
    video {  background-size: cover; left: 50%; min-height: 100%; min-width: 100%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: auto; }
}
.fancybox-slide--video{
    .fancybox-content{max-width: 800px; max-height: 500px;}
}


/* Icon Block */
.icon-block{ text-align: center; margin: 0 auto 10px; max-width: 260px; color: $black; position: relative;
    &-image{ margin-bottom: 25px;
        img{height: 75px; width: auto;}
    }
    &-content{
        h4{margin-bottom: 10px;}
        :last-child{margin-bottom: 0;}
    }

    &-default{ font-family: $title; font-weight: 700; font-size: 14px;
        p{line-height: 1.3;}
    }

    &-inline{ display: flex; align-items: flex-start; max-width: none; text-align: left;
        .icon-block-image{margin: 0 25px 0 0; width: 50px; flex-shrink: 0;
            img{height: auto; width: 100%;}
        }
        .icon-block-content{flex-grow: 1;
            h4{font-size: 18px;}
        }
    }
}
.icon-blocks{
    .row-centre{
        .icon-block{margin-left: auto; margin-right: auto;}
    }

    @media only screen and (min-width: 768px) {
        &-default{
            .icon-blocks-4{
                .col-sm-4{width: 25%;
                    h4{font-size: 22px;}
                }
            }
        }
    }
}

/* Stat Blcok */
.stat-block{ text-align: center; margin-bottom: 30px;
    &-image{ margin-bottom: 20px;
        img{height: 60px; width: auto;}
    }
    &-content{
        h6{margin-bottom: 5px;}
        p{font-weight: 700; color: $black; font-size: 14px;}
        :last-child{margin-bottom: 0;}
    }
}


/* Logos */
.partner-logos{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.partner-logo{ text-align: center; padding: 10px 25px 30px;
	img{max-height: 90px; width: auto; opacity: 0.4; filter: grayscale(100); @include transition();}
    a{
        &:hover{
            img{opacity: 1; filter: none;}
        }
    }
}

.search-result{ padding: 30px 0; border-bottom: 1px solid $border; font-size: 13px;
    h5{margin-bottom: 5px;}
    .search-url{margin-bottom: 5px;}
}


.cols{columns: 2; column-gap: 30px; max-width: 840px; margin-bottom: 25px;}

.indent{padding-left: 20%;}


.contact-details{
    .lead{
        span{color: $black;}
    }
}


/* Play Icon */
.play-icon{
    &:after{content:"\f04b"; font-family:'Font Awesome 5 Pro'; width: 100px; height: 100px; line-height: 100px; padding-left: 5px; border-radius: 50%; text-align: center; background: rgba($white,0.8); color: $black; font-weight: 700; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; font-size: 40px; pointer-events: none; @include transition();}
    &:hover:after{transform: scale(1.2);}
}



.table{margin-bottom: 40px;}


.show-dark{display: none;}
.section-dark{
    .show-dark{display: block;}
    .show-light{display: none;}
}


/* CTA */
.cta{ border-radius: 50px; border: 1px dashed $border; padding: 20px; display: flex; align-items: center; justify-content: space-between; margin: 0 0 30px;
    &-text{ padding-right: 20px; padding-left: 20px;
        h5{color: $teal; margin: 0;}
    }
    &-link{flex-shrink: 0;}

    &-sm{ padding: 15px;
        .cta-text{ padding-left: 10px;
            h5{font-size: 16px;}
        }
        .cta-link{
            .btn{padding: 6px 14px;}
        }
    }
}


/* Resource */
.row-resources{margin-bottom: 50px;}
.resource{
    label{padding: 20px 20px 20px 65px; margin: 0 0 20px; border: 1px solid $border; border-radius: 10px; text-transform: none; position: relative; cursor: pointer;
        &:before{content:"\f00c"; font-family:'Font Awesome 5 Pro'; font-weight:400; font-size: 16px; position:absolute; left:20px; top:20px; height:26px; width:26px; line-height:80px; text-align:center; background:$white; border: 1px solid $border; color:$black; @include transition(); overflow:hidden; border-radius: 5px;}
        h6{margin-bottom: 10px;}
        p{color: $grey; font-weight: 400; font-size: 14px; font-family: $sans; margin: 0;}
    }
    input{ display: none;
        &:checked + label{background-color: $paleblue;
            &:before{line-height:24px;}
        }
    }
}


/* DATEPICKER */

.ui-widget{background:$black;text-align:center;border:none;border-radius:5px; overflow: hidden; box-shadow:0 0 10px rgba($black,0.2);}
.ui-datepicker{padding:0}
.ui-datepicker-header{border:none;background:transparent;font-weight:400;font-size:15px}
.ui-datepicker-header .ui-state-hover{background:transparent;border-color:transparent;cursor:pointer;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0}
.ui-datepicker .ui-datepicker-title{margin-top:.4em;margin-bottom:.3em;}
.ui-datepicker .ui-datepicker-title select{border:none; color:$white; background:none; appearance:none; -moz-appearance:none; -webkit-appearance:none;}
.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover,.ui-datepicker .ui-datepicker-next,.ui-datepicker .ui-datepicker-prev{top:10px;border:none; position:absolute;}
.ui-datepicker .ui-datepicker-prev{left:5px;}
.ui-datepicker .ui-datepicker-next{right:5px;}
.ui-datepicker .ui-datepicker-prev-hover{left:2px}
.ui-datepicker .ui-datepicker-next-hover{right:2px}
.ui-datepicker .ui-icon:before{content:"\f105"; font-family:'Font Awesome 5 Pro'; position: absolute; top: 0; left: 50%; transform: translate3d(-50%,0,0); text-indent: 0; line-height: 1; color: $white; font-size: 20px;}
.ui-datepicker .ui-datepicker-prev span:before{content:"\f104";}

.ui-icon{overflow:hidden; text-indent:-9999px; width:16px; height:16px; display:block;}
.ui-datepicker table{margin:0}
.ui-datepicker th{padding:5px 0;color:$white;font-size:13px;font-weight:700; text-align:center;border:none;border-top:1px solid rgba(255,255,255,0.2);}
.ui-datepicker td{background:$white;border:none;padding:2px;}
td .ui-state-default{background:transparent;border:none;text-align:center;margin:0;font-weight:400; display:block;color:#85868a;font-size:16px; width:36px; line-height:36px; border-radius:50%;}
.ui-state-disabled{opacity:1}
.ui-state-disabled .ui-state-default{opacity: 0.2;}
td .ui-state-hover{background:$lightgrey; color:$black;}
td .ui-state-active{background:$turquoise; color:$white;}
.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev{position:absolute;}