/* CSS for responsive iframe */
/* ========================= */

/* outer wrapper: set max-width & max-height; max-height greater than padding-bottom % will be ineffective and height will = padding-bottom % of max-width */
#Iframe-Master-CC-and-Rs {
    max-width: 1028px;
    max-height: 100%;
    overflow: hidden;
}

/* inner wrapper: make responsive */
.responsive-wrapper {
    position: relative;
    height: 0;    /* gets height from padding-bottom */

    /* put following styles (necessary for overflow and scrolling handling on mobile devices) inline in .responsive-wrapper around iframe because not stable in CSS:
      -webkit-overflow-scrolling: touch; overflow: auto; */

}

.responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
    border: none;
}

/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-572x612 {
    padding-bottom: 130%;
}

/* general styles */
/* ============== */
.set-border {
    border: 5px inset #4f4f4f;
}
.set-box-shadow {
    -webkit-box-shadow: 4px 4px 14px #4f4f4f;
    -moz-box-shadow: 4px 4px 14px #4f4f4f;
    box-shadow: 4px 4px 14px #4f4f4f;
}
.set-padding {
    padding: 20px;
}
.set-margin {
    margin: 10px;
}
.center-block-horiz {
    margin-left: auto !important;
    margin-right: auto !important;
}