section {
    margin:25px 0;
}



/*--------------------------
    Carousel Styling
--------------------------*/
.carousel {
    
    .inner-content {
        min-height: 100px;
    }
    
    .carousel-indicators {
        bottom:0; //Align to bottom of parent div

        li {
            margin:0 2px;
            width: 18px;
            height: 18px;
            background: transparent;
            border-color: lighten(#000, 15%);
            border-width: 3px;

            &.active {
                background: lighten(#000, 15%);
            }
        }
    }
    
    .carousel-control {
        font-size: 52px;
        background:transparent;
        text-shadow:none;
        color: #000;
        opacity:1;
        
        //Hover, Focus and Active styles
        &:hover, &:focus, &:active {
            color:lighten(#000, 20%);
        }
    }


    //Video Carousel
        &#video-carousel {
            padding-bottom:90px; //Extra padding for '.carousel-indicators'


            .carousel-inner {
                border:2px solid #f3f3f3;
                background-color:#f3f3f3;//Prevents background image being shown when switching slides
                
                //Inner content - Wrapper for the '.youtube-video' div
                .inner-content {
                    min-height: 420px; //Change this for different viewports
                    
                    //The YouTube video - This styling may cause issues
                    .youtube-video {
                        position: absolute;
                        left:0;
                        top:0;
                    }
                }
                
                //Play button and button wrapper
                .play-button-wrapper {
                    cursor:pointer;
                    
                    //Wrapper overlays the entire video
                    z-index: 9999;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    
                    //This centers the play buton
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            //Control buttons - Left/Right
            .carousel-control {
                color:rgba(#000, 0.6);
                width: auto;
                line-height: 400px;//Height of the items

                &.left {
                    margin-left:-200px;
                }

                &.right {
                    margin-right:-200px;
                }
                
                //Hover, Focus and Active styles
                &:hover, &:focus, &:active {
                    color:rgba(#000, 0.90);
                }
            }
        }
}



/*--------------------------
    Button Styling
--------------------------*/
.btn {
    text-shadow:none;
    
    //Hover, Focus and Active styles
    &:hover, &:focus, &:active {
        border-color: transparent;
    }
    
    //Play button
    &.btn-video {
        padding: 20px;
        font-size: 40px;
        line-height: 0;
        border-radius: 0;
    }
}