body {
 background-color: #FFFFFF;
 font-family: 'Montserrat', sans-serif;
}

.catch-block {
 background-color: #FFF;
 margin-bottom: 1rem;
}
.catch-logo-block {
 display: flex;
 justify-content: center;
 flex-direction: row;
}

.catch-link-block {
 display: flex;
 justify-content: center;
 flex-direction: row;
 margin-top: 30px;
}

@media (min-width: 768px) {
 .catch-logo-block {
  justify-content: flex-start;
 }

 .catch-link-block {
  justify-content: flex-end;
  margin-top: 0px;
 }
}

.catch-WebcamRecorder {
 margin-bottom: -0.25rem;
 display: block;
}

.catch-WebcamRecorder video{
 width: 100%;
 display: block;
}
.catch-NewComposition__header {
 display: flex;
 flex-direction: row;
}

.catch-NewComposition__label {
 font-size: 1.3rem;
 color:#333;
 border:0;
 padding: 0.25rem 0;
 margin: 1rem 1rem 0.5rem 0rem;
 float:left;
}

.catch-NewComposition__title {
 font-size: 1.3rem;
 color:#333;
 border:0;
 padding: 0.25rem 0;
 margin: 0.5rem 1rem 0.5rem 1rem;
 background-color:transparent;
 width:100%;
}
.catch-NewComposition__title::-webkit-input-placeholder, /* WebKit, Blink, Edge */
.catch-NewComposition__title:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
.catch-NewComposition__title::-moz-placeholder, /* Mozilla Firefox 19+ */
.catch-NewComposition__title:-ms-input-placeholder { /* Internet Explorer 10-11 */
 font-weight:normal !important;
}

.catch-NewComposition__controls .nav-inline .nav-item+.nav-item,
.catch-NewComposition__controls .nav-inline .nav-link+.nav-link
.catch-CompositionResponse__controls .nav-inline .nav-item+.nav-item,
.catch-CompositionResponse__controls .nav-inline .nav-link+.nav-link {
 margin-left: 0.5rem;
}
.catch-NewComposition__controls, .catch-CompositionResponse__controls {
 line-height:2.2rem;
 margin: 1rem;
}

.catch-NewComposition__controls .rc-progress-line {
 margin-bottom: 3px;
}

.catch-NewComposition__number {
 border-radius: 50%;

 width: 36px;
 height: 36px;
 padding: 8px;

 background: #fff;
 border: 2px solid #666;
 color: #666;
 text-align: center;

 font: 15px Arial, sans-serif;
 margin: 1rem;
 float:left;
}

.catch-NewComposition__thumb, .catch-CompositionResponse__thumb {
}

.catch-NewComposition__controls-reset, .catch-NewComposition__controls-cancel {
 font-weight: normal;
 color: rgba(0,0,0,0.8)
}

.catch-NewComposition__controls-cancel {
 font-weight: normal;
 color: rgba(255,255,255,0.8);
 text-shadow: 0px 1px 2px #000000;
}
.catch-RecordTopic__NewComposition__controls-reset {
 margin-right: 14px;
 vertical-align: 0.8rem;
}

.catch-NewComposition__controls-time, .catch-CompositionResponse__controls-time{
 font-weight: normal;
 font-size: 13px;
 color: rgba(255,255,255,0.8);
 text-shadow: 0px 1px 2px #000000;
}

.catch-RecordButton {
 transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 transition-delay: 0.2s;
 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);

}

.catch-RecordButton:active {
 box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.4);
 transition-delay: 0s;
}

.catch-RecordButton {
 border: 0;
 border-radius: 43px;
 padding: 5px;
 width: 50px;
 cursor: pointer;
 height: 50px;
 margin-top: 1rem;
 margin-bottom: 1rem;
 border: 3px solid white;
}

.catch-RecordButton > div {
 width: 34px;
 height: 34px;
 padding: 12px;
 border-radius: 34px;
 display: inline-block;
 background-color: rgba(255, 10, 0, 0.5);
}

.catch-RecordButton.catch-RecordButton__stop > div {
 padding: 11px;
 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 transition-delay: 0.2s;
}

.catch-RecordButton.catch-RecordButton__stop div div {
 background-color: rgba(255,255,255,0.8);
 width:12px;
 height:12px;
 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 transition-delay: 0.2s;

}

.catch-RecordButton.catch-RecordButton__blank > div {
 background-color: rgba(255, 10, 0, 0.3)
}

.catch-RecordButton.catch-RecordButton__record div div {
 background-color: rgba(255,255,255,0.8);
 border-radius: 5px;
 width:10px;
 height:10px;
}

.catch-RecordButton.catch-RecordButton__play div div {
 display: block;
 width: 0;
 height: 0;
 border-top: 6px solid transparent;
 border-bottom: 6px solid transparent;
 border-left: 8px solid white;
 margin: auto;
 position: relative;
 top: -2px;
}

.catch-videoplayer {
 width: 100%;
 padding: 37.5%;
 box-sizing: border-box;
 position: relative;
 display: block;
 background-color: #111;
}

.catch-sharevideoplayer {
 width: 100%;
 padding: 37.5%;
 box-sizing: border-box;
 position: relative;
 display: block;
}

.catch-storyvideoplayer {
 box-sizing: border-box;
 position: relative;
 display: block;
}

.catch-videoplayer video {
}

.catch-videoplayer__webcam-min, .catch-videoplayer__webcam-min-portrait {
 position: absolute;
 top: 0.5rem;
 right: 0.5rem;
 width: 25%;
 z-index: 2;
}

.catch-videoplayer__webcam-min-portrait {
 padding: 0 7%;
 background-color: #111;
}


.catch-videoplayer__screencast-min{
 display:none;
}

.catch-videoplayer__webcam-response-min, .catch-videoplayer__webcam-response-min-portrait{
 position: absolute;
 bottom: 0.5rem;
 right: 0.5rem;
 width: 25%;
 z-index: 2;
}

.catch-videoplayer__webcam-response-min-portrait {
 padding: 0 7%;
 background-color: #111;
}

.catch-videoplayer__webcam-response-min.response2 {
 right: 25%;
 margin-right: 1rem;
}

.catch-videoplayer__webcam-response-min.response3 {
 right: 50%;
 margin-right: 1.5rem;
}

.catch-videoplayer__webcam-response-min.response4 {
 right: 75%;
 margin-right: 2rem;
}

.catch-videoplayer__webcam-response-min.response5 {
 display:none;
}

.catch-videoplayer__webcam-max, .catch-videoplayer__webcam-response-max, .catch-videoplayer__screencast-max {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1;
 bottom: 0;
 margin: auto 0;
}
.catch-videoplayer__webcam-max-portrait,
.catch-videoplayer__webcam-response-max-portrait,
.catch-videoplayer__screencast-max-portrait {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 height: 100%;
 margin: 0 auto;
 display: block;
 right: 0;
}
.catch-videoplayer__playoverlay2 {
 z-index: 3;
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 bottom: 10px;
 background-color: rgba(0,0,0,0.6)
}

.catch-videoplayer__playoverlay {
 z-index: 3;
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 bottom: 10px;
}
.catch-videoplayer__playoverlay > div {
 display: flex;
 justify-content: center;
 align-content: center;
 flex-direction: column;
 height: 100%;
}

.catch-videoplayer__playoverlay > div > div {
 display: block;
 width: 0;
 height: 0;
 border-top: 25px solid transparent;
 border-bottom: 25px solid transparent;
 border-left: 30px solid rgba(0,0,0,0.7);
 margin: auto;
 position: relative;
 z-index: 1;
 transition: all 0.3s;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 left: 0px;
}

.catch-videoplayer__playoverlay > div > div:before {
 content:'';
 position:absolute;
 top:-37.5px;
 left:-57.5px;
 bottom:-37.5px;
 right:-17.5px;
 border-radius:50%;
 border: 5px solid rgba(0,0,0,0.7);
 z-index:2;
 transition: all 0.3s;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
}


.catch-videoplayer__playoverlay > div > div:after {
 content:'';
 opacity:0;
 transition: opacity 0.6s;
 -webkit-transition: opacity 0.6s;
 -moz-transition: opacity 0.6s;
}

.catch-videoplayer__playoverlay > div > div:hover:before, .catch-videoplayer__playoverlay > div > div:focus:before {
 transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
}

.catch-videoplayer__playoverlay > div > div:active {
 border-color: transparent;
}

.catch-videoplayer__watermark {
 font-family: 'Raleway', sans-serif;
 z-index:2;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 font-size:0.75rem;
 font-weight:bold;
 padding: 1rem;
 color: #FFF;
 opacity: 0.9;

}
.catch-videoplayer__webcamPreview {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 z-index: 4;
 margin-bottom: 0;
}

.catch-videoplayer__webcamPreview video {
 position: absolute;
 right: 0.5rem;
 bottom: 0.5rem;
 width: 25%;
}

.catch-videoplayer__responses, .catch-HomePage__responses, .catch-HomePage__response-portrait{
 position: absolute;
 bottom: 0.5rem;
 left: 0.5rem;
 right: 1.5rem;
 min-height: 25%;
}


video.catch-videoplayer__response, .catch-HomePage__response, .catch-HomePage__response-portrait{
 z-index: 2;
 width: 25%;
 float: right;
 position: relative;
 margin-left: 0.5rem;
}

.catch-HomePage__response-portrait {
 padding: 0 7%;
 background-color: #111;
}

video.dim {
 /*-webkit-filter: grayscale(100%); !* Chrome, Safari, Opera *!*/
 /*filter: grayscale(100%);*/
}

video.catch-videoplayer__response.expand {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 float: none;
 width: auto;
 z-index: 3;
}

.catch-HomePage__snapshot {
 position:relative;
 background-color: #111;
}

.catch-HomePage__request{
 width: 100%;
}

.catch-HomePage__request-portrait{
 height: 447px;
 margin: 0 auto;
 display: block;
}

.catch-HomePage__request-min {
 position: absolute;
 top: 0.5rem;
 right: 0.5rem;
 width: 25%;
}

#webtheatre a:hover {
 text-decoration: none;
}

#webtheatre a:hover > div {
 background-color: #eee;
}
#webtheatre a:focus {
 text-decoration: none;
}