body {
    padding-top:51px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}
html {
}
main {
    margin: 15px auto;
    text-align: center;  
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}
a {
    color:grey;
    font-weight: 600;
}
main .view-insert {
    text-align: left;
    max-width: 1100px;
    display: inline-block;
}
.clear {
    clear:both;
}
.grid {
/*    background-color: lightblue;*/
/*    max-width: 1200px;*/
/*    margin-left: 70px;*/
}
.grid:after{
    content: '';
    display: block;
/*    clear: both;*/
}
.grid-item {
    width:100%;
/*    height: 200px;*/
    float: left;
    margin-top: 15px;
/*    padding-left: 5px;*/
/*    background: #D26;*/
/*    border: 2px solid #333;*/
    
}
.grid-item--width2 {
    width: 400px
}
.grid-item img {
    width:100%;
    display:block;
    border-color: hsla(0, 0%, 0%, 0.5);
    border-radius: 5px;  
}
#alignable-recommendations {
    margin: 0 auto;
/*    width: 900px;*/
}
#alignable {
    max-width: 600px;
}
.col-center {
    margin: 0 auto;
}
.panel {
    /*    background: #F8ECEA;*/
    background-image: url(../images/SophiaHatTracking1_1subdued2.jpg);
    background-size: 200%;
    background-repeat:repeat;
}

.nav, .pagination, .carousel, .panel-title a { 
    cursor: pointer; 
}
.touch-scroll {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.inline {
    float: left;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}

/*override the padding for the aside */
.col-md-4 {
    padding:0;
}

.branding {
    float: left;
    margin: 0;
    margin-top: -11px;
}

.branding a {
    width: 80%;
    font-size: 1.6em;
    text-align: left;
    color: #1B7998;
    text-decoration: none;
}

.branding a:hover {
    color: none;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.thanks {
    height: 600px;
}
.error {
    color: red;
    padding-bottom: 10px;
}

.news img {
    float: left;
    margin: 5px 15px 0 0;
}
.news p {
    padding: 3px 0 10px 0;

}
.news-item {
    margin: 10px 0;
    padding: 5px;
}

.news-item:hover {
    background: rgba(120, 120, 120, 0.1);
}

.news .iframe-container {
    text-align: center;
}
input.ng-invalid.ng-touched {
    border: 1px solid #DA3637;
}

input.ng-valid.ng-touched {
    border: 1px solid #509D12;
}

input {
    width: 100%;
    display: inline-block;
    font-weight: 100;
    padding: 15px;
    margin: 5px 0;
    font-size: 1rem;
    font-weight: 100;
    color: #475B62;
    border: 1px solid #C5C5C5;
    border-radius: 4px;
    outline: 0;
}

input[type=radio] {
    width: auto;
}

.carousel {
    background: black;
}
#carousel-main {
    margin: 0 auto 0;
    /*    min-height: 200px;*/
    max-height: 250px;
    max-width: 1100px;
    overflow: hidden;   
}

#carousel-main img {
    height: inherit;
    width: 100%;     
}

.carousel-inner .active img  {
    opacity: 0;
    -webkit-animation: fadeinout 10s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadeinout 10s; /* Firefox < 16 */
    -ms-animation: fadeinout 10s; /* Internet Explorer */
    -o-animation: fadeinout 10s; /* Opera < 12.1 */
    animation: fadeinout 10s;
}
@keyframes fadeinout {
    0% { opacity: 0; }
    50%   { opacity: 1; }
    100% { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeinout {
    0% { opacity: 0; }
    50%   { opacity: 1; }
    100% { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeinout {
    0% { opacity: 0; }
    50%   { opacity: 1; }
    100% { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeinout {
    0% { opacity: 0; }
    50%   { opacity: 1; }
    100% { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeinout {
    0% { opacity: 0; }
    50%   { opacity: 1; }
    100% { opacity: 0; }
}

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

audio::-internal-media-controls-download-button {
    display:none;
}

audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}

audio::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

p {
    text-align:justify;
}
p::first-letter {
    font-size:130%;
}
.maintext {

    padding:10px;
    padding-bottom:60px;
    /*    height: 770px;  */
}
.portfolio .maintext {
    /*    background: none;*/
}
figcaption {
    font-size: 80%;
    font-style:italic;
}
#layout {
    align-content:center;
    text-align:center;
}
.sidebar-image {
    text-align:center;
    align-content:center;
/*    margin-bottom:30px;*/
}

.reviews {
    padding: 25px;
}
section .row {
    background-color:hsl(28, 10%, 90%);
    margin-left: 1px;
}
aside {

    padding-top:10px;
/*    padding-bottom:60px;*/
    /*    background: rgb(240,240,240);*/
/*    height: 775px;*/
}

.about .image-container {
    padding-right: 15px;
    margin-top: 7px;
    max-width: 30%;
}
.about .image-container figcaption {
    margin-top: 5px;
    text-align: center;
}

.portfolio .col-md-3 {
    margin: -17px 0 0 0;
    height: 830px;
    /*    background: rgba(0, 0, 0, 0.8);*/
}

#cd-focus {
    background:hsl(210, 10%, 93%);
}
#cd-focus img {
    width:200px;
    height:200px;
}

.navbar-brand img {
    height: 4rem;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color:hsl(210, 10%, 93%);
}
.accordion h4.panel-title {
    cursor: pointer;
}

.scroll-box {
    overflow:auto;
    height:200px;
}

#audio-player {
    /*	padding-top:70px;*/

}
.cd-images img {
    width:7.5em;
    height:7.5em;
}
#trackDetails {
    padding-top:4px;
}
#videos {
    padding-top:50px;
}
#videos img {
    width:25%;
    height:25%;
}
#video-player {
    width:300px;
}
.clients .maintext {
    overflow-x: scroll;
    height: 650px;
}
.clients .maintext .client-image {
    position: relative;
    width:150px;
    height:130px;
    display: flex;
    padding: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
}
.clients .maintext .client-image img {
    margin: 5px auto inherit auto;
    max-width: 120px;
    max-height: 110px;
    border-radius: 3px;
}
.clients .maintext .client-url {
    display: flex;
    padding: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
}

.clients .maintext ul li {
    margin: 3px;
    background: black;
    display: inline-block;
    width: 155px;
    height: 195px;
    border: solid 1px black;
    border-radius: 4px;
    text-align: center;
}
#booking-form iframe{
    width:600px;
    height:555px;
}
#booking-form {
    text-align:center;
    align-content:center;
}
footer {
    margin-top:35px;
}

.footer-nav {
    margin-right: 5px;
}

/*
Facebook config
.fb_dialog {
bottom: 45pt!important;
}
*/
#track a {
    padding-right:1em;
}
#audio-message {
    font-size: .75em;

}
.services figcaption {
    font-size: 7px;
    text-align: center;
}

.services dt {
    margin-top: 7px;
    font-weight: 800;
}
.services .panel-collapse {
    background-color: hsl(28, 10%, 90%);
}
.services .media img {
    width: 150px;
    height: 150px
}
.portfolio .display-audio {
    float: left;
    width: 100%;
    border-radius: 4px;
    /*    border: 1px solid black;*/
    margin: 10px 0;
    background: inherit;
}
.portfolio #audio .portfolio-tabs {
    display: flex;
    justify-content: space-evenly;
}
.portfolio #audio {
    clear:both;
    width: 100%;
    /*    border: 1px solid black;*/
    border-radius: 4px;
    margin: 10px 0;
}

.portfolio #albums {

    /*    display: inline-block;*/
    float: left;
    width: 100%;
}

.portfolio #albums .audio {
    /*    width: 100%;*/
    /*    display: inline;*/
}

.portfolio #album-focus  {
    margin-top: -30px;
    /*    padding-top: 5px;*/
    width: 100%;
    /*    color: white;*/
    text-align: center;
}
.portfolio #album-focus h3 {
    padding-top: 15px;
}
.portfolio #album-list-container {
    display: flex;
    flex-direction: column;
}
.portfolio img {
    width: 150px;
    height: 150px;
    padding: 4px;
}
.admin .admin-scrolling-list img,
.portfolio .video img {
    /*    max-height: 40px;*/
    /*    float: left;*/

}
.admin li,
.portfolio li {
    list-style: none;
}

.portfolio iframe {
    width: 100%;
    height: auto;
    /*    float: left;*/
}

.portfolio .bp-media-settings-show-speed {
    z-index: 2;
}
.portfolio .preview-header-wrapper {
    z-index: 1;
}

.portfolio .portfolio-scrolling-list {
    /*    margin-top: 15px;*/
    overflow: scroll;
    height: 345px; 
    -webkit-overflow-scrolling: touch;

}
.preview-header-wrapper {
    display: none;
}

.portfolio .video {
    text-align: center;
    width: 200px;
    float: left;
    height: auto;
    padding: 5px;
    margin-left: 1.5%;
    margin-top: 0px;
    /*    border: 1px solid #ddd;*/
    border-radius: 5px;

}

.portfolio .video img {
    width: 200px;
    height: 150px;
}
.portfolio .videos {
    height: 750px;
    overflow: scroll;
}
.portfolio .image-container {
    display: inline-block;
    background: white;
    border-radius: 3px;
}
.portfolio .audioImg {
    /*    float: left;*/
}
.portfolio .track-search input {
    width: 95%;
    display: inline;
}

.portfolio .display-audio .audioTitle {
    display: inline-block;
    /*    float: left;*/
    margin-left: 20px;
}
.portfolio .audio-item {
    display: inline;
}



.portfolio .video a {
    text-decoration: none;
}
.portfolio .portfolio-tabs li {
    margin: 5px 3px 5px 0;
}

.portfolio .video:hover {
    background: rgba(120, 120, 120, 0.1);
    border-radius: 5px;
}
.portfolio .video h5 {
    color: white;
    height: 45px;
    /*    padding: 2px 5px 0 5px;*/
    text-align: center;
}
.displayAudio {
    /*    border: solid 1px rgba(150, 150, 150, 0.9);*/
    background: rgba(245, 245, 245, 0.4);
    border-radius: 4px;
}

.displayAudio img {
    margin: 10px 0 0 5px;
    height: 60px;
    float: left;
}

.audioImg img {
    /*    margin: 5px 0 5px 5px;*/
    /*    height: auto;*/
    /*    float: left;*/
}
.audioTitle {
    text-align: center;
}
.audio-text     {
    vertical-align: middle;
}
.audio-text:hover {
    background: rgba(245, 245, 245, 0.4);
}
.audioTitle span {

}
.audiodescription {
    margin: 5px 5px 5px 0;
    width: 45%;
    float: right;
    overflow-y: scroll;
    /*    height: 125px;*/
    background: rgba(245, 245, 245, 0.4);
    padding: 10px;
    border-radius: 3px;
}
.audiodescription span {
    vertical-align: middle;
}
.audio-list a,
.album-list a {
    text-decoration: none;
}
.audio-list {
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    border-radius: 4px;
    height: 320px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

}
.album-list {
    height: 650px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    clear: both;
    margin: 10px 0;
    /*    background:hsl(210, 10%, 93%);*/
    padding: 3px;
    border-radius: 4px;
}
.album-list audio{
    width: 100%;
}
.album-list .album-item {
    padding-bottom: 3px;
}
.album-item:hover {
    background: rgba(245, 245, 245, 0.4); 
}
.album-item {
    text-align: center;
    display: block;
    margin: 2px 0;

}
.album-title {
    /*    color: white;*/
}
.album-item .albumImg,
.album-item .album-title {
    /*    display: inline-block;*/
}
.album-item img {
    width: 125px;
    height: 125px;
}
.albums .list-group .track-filter-button {
    margin-top 10px;
}
.audio-list .audio {
    margin: 5px 0 5px 3px;
    overflow: auto;
    width: 150px;
    height: 200px;
    display: inline-flex;
}
.audio-item {
    overflow:auto
}

.audio-list .audio:hover {
    background: rgba(245, 245, 245, 0.4);
}
#audio-player {
    margin: 15px 0 0 0;
    width: 100%;
    clear:both;   
}
.display-audio .image-container {
    margin-top: 3px;
    margin-left: 3px;
}
.display-audio img{
    width: 125px;
    height: auto;

}
#album-focus img {
    width: 100%;
    height: auto;
    display: inline;  
}
#album-focus .image-container {
    margin: 10px 0;
    width: 60%;
    padding: 4px;
}
/*
.audio-item div:nth-child(even) {
background: grey; 
}
*/

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin-bottom: 20px;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
}

@media (max-width: 992px) {
    .portfolio .col-md-3 {
        height: 310px;
        width: 100%;
        background: rgba(0, 0, 0, 0.8);
        color: white;
    }
    .portfolio #album-list-container {
        height: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap:wrap;
        overflow-y:scroll;
        justify-content: center;
    }
    .portfolio .album-list {
        height: auto;
    }
    .portfolio .album-title {
        display: none;
    }

    .portfolio .album-item img {
        width: 100px;
        height: 100px;
    }
    .maintext,
    aside {
        height: auto;
        width: 100%;
        margin: 0;
        padding: 0 25px;
    }
    .embed-responsive-4by3 {
        position: relative;
        overflow: hidden;
        padding-top: 56.25%;
    }
    .embed-responsive-4by3 iframe {
        position: absolute;
        width: 100%;
        height: 65%;
        left: 0;
        top: 0;
        border: 0;
    }
    #carousel-main {
        max-height: 225px;  
    }
}
@media (max-width: 860px) {
    #carousel-main {
        max-height: 200px;  
    }
}
@media (max-width: 750px) {
    #carousel-main {
        max-height: 175px;  
    }
}
@media (max-width: 650px) {
    #carousel-main {
        max-height: 150px;  
    }
}
@media (max-width: 582px) {
    .fb_dialog {
        bottom: 70pt!important;
    }  
}
@media (max-width: 560px) {
    #carousel-main {
        max-height: 125px;  
    }
}
@media (max-width: 475px) {
    #carousel-main {
        max-height: 100px;  
    }
}