.mainContainer{
    display: inline-block;
    width: 100%;
    padding-top: 50px;
    background: #fff;
    text-align: center;
}
.buttonContainer{
    float: left;
    padding-right: 10px;
}
.infoContainer{
    width: 50%;
    min-width: 900px;
    margin: 0 auto;
    text-align: left;
    color: #555;
    padding: 0px 5px;
    display: inline-block;
}
#sourceInput{
    width: 100%;
    max-width:100%;
    float: left;
    min-height: 34px;
    height: 39px;
    font-size: large;
}
.renderElement{
    width: calc(50% - 30px);
    margin: 15px;
    vertical-align: top;
    margin: 10px 15px;
    padding: 5px;
    border-radius: 5px;
    background: #fff;
    -webkit-box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);
    box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);
}
.iconsWrapper{
    width: 100%;
    padding: 112px 15px;
    background: #F8F9FA;
}
.inputHolder button{
    font-size: large;
}
.inputWrapper{
    width:100%;
    display: inline-block;
    margin:0px;
    min-height: auto;
    transition: all 0.3s ease-in-out;
}
.mainInputWrapper{
    width: 100%;
    display: inline-block;
    min-height: 0px;
}
.mainContainer.fullScreen>.mainInputWrapper{
    min-height: calc(100vh - 50px);
}
.inputWrapper.fullScreen{
    width: 50%;
    min-width: 700px;
    padding-top: 100px;
}
.imgHolder{
    float: left;
    text-align: center;
}
.imgHolder img{
    width: 100px;
    height: auto; 
}
.baseInputContainer{
    display: inline-block;
    padding: 11px 5px;
    float: left;
}
.inputWrapper.fullScreen>.baseInputContainer #inputHolder{
    width: calc(100% - 97px);
}
.imgText{
    color: #212529;
    text-align: center;
    display: none;
    font-size: 4.8rem;
    font-weight: bold;
}
.inputWrapper.fullScreen>.baseInputContainer{
    padding: 0px 5px;
    float: none;
    width:100%;
}
.inputWrapper.fullScreen>.imgHolder .imgText{
    display: block;
}
.inputWrapper.fullScreen>.baseInputContainer .inputHolder{
    width:100%;
}
.inputWrapper.fullScreen>.imgHolder img{
    width:240px;
    height: auto;
}
.inputWrapper.fullScreen> .imgHolder{
    text-align: center;
    width:100%;
}
.inputWrapper.fullScreen>.baseInputContainer .buttonContainer{
    width: 100%;
    display: inline-block;
    float: none;
    margin-bottom: 10px;
    padding: 0px;
}
.videoWrapper{
    position: relative;
    display: inline-block;
}
.inputHolder{
    display: inline-block;
}
#skipVideo{
    position: absolute;
    background: rgba(0,0,0,0.5);
    border: 1px solid #fff;
    border-right: none;
    font-size: medium;
    color: #fff;
    cursor: pointer;
    bottom:25%;
    padding: 5px 10px;
    right: 0;
}
#inputHolder{
    float: left;
    text-align: left;
    width:300px;
    margin-right: 10px;
}
.renderElement.video{
    text-align: center;   
}
.sourceBtn{
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
    cursor: pointer;
    color: #686666;
    font-size: large;
    text-align: center;
    float: left;
    padding: 6.5px 12px;
    border-radius: 4px;
    margin-right: 10px;
}
.sourceBtn.active{
    background-color: #A4A4A4;
    color: #fff;
}
.sourceBtn.last{
    margin-right: 0;
}
.renderContainer{
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 30px);
    margin: 0 -15px;
}
.renderElement.events{
    padding: 15px;
}
.renderElement.events p{
    font-size: large;
    color: #333;
}
.presentation.active{
    color: #fff;
}
#videoTag{
    display: none;
    max-width: 100%;
    height: auto !important;
}
#spinner{
    margin:25px;
    text-align: center;
    display: none;
}
#errorMessage, #testVideo{
    display: none;
}
#testVideo{
   text-align: left;
   padding: 0 25px;
}
#companionAds img{
    border:1px dashed #333;
}
.width_1{
    width: 100%;
}
.textLeft{
    text-align: left;
}
.textRight{
    text-align: right;
}
.cursorPointer{
    cursor: pointer;
}
#stepContainer{
    width:100%;
    display: inline-block;
    text-align:center;
}
.actionsContainer{
    width:100%;
    display: inline-block;
    margin: 0 -15px;
}
.playerAction{
    font-size: large;
    opacity: 0.3;
    color: #333;
    width:25%;
    padding: 0 15px;
    float: left;
}
.playerAction.playing.active{
    color:#4cae4c;
}
.playerAction.paused.active{
    color:#f44336;
}
.playerAction.volume.active{
    animation: blinker 0.7s linear infinite;
}
.playerAction.muted.active{
    color: #337ab7;
}
.playerAction.active{
    opacity: 1;
}
.textBlock{
    display: inline-block;
    text-align: left;
    padding: 0 15px;
}
.iconSection{
    width:calc(100% / 3);
    float: left;
    text-align: center;
    padding: 10px;
}
.iconSection span{
    font-size: 65px;
    color: #1D8AFE;
    margin-bottom: 10px;
    display: block;
}
.sectionTitle{
    color: #212529;
    font-size: large;
    margin-bottom: 10px;
}
.sectionBody{
    color: #686666;
    font-size: medium;
}
.playerAction i{
    margin-right: 5px;
}
.landingTable{
    width: 100%
}
.landingTable td{
    width: 50%;
    vertical-align: middle;
    text-align: center;
}
.landingTable img{
    width: 100%;
    height: auto;
}
.landingList{
    display: none;
    width: 100%;
}
.listBlock{
    width: 100%;
    text-align: center;
}
.listBlock.text{
    padding: 15px;
}
.listBlock img{
    width: 100%;
    height: auto;
}
.footer{
    padding: 10px;
}
@media(max-width:940px){
    .infoContainer{
        width: 100%;
        min-width: 0;
    }
    .landingTable{
        display: none;
    }
    .landingList{
        display: block
    }
}
@media(max-width:900px){
    .renderElement{
        width: calc(100% - 30px);
    }
}

@media(max-width:830px){
    .playerAction{
        padding: 0 5px;
    }
    .actionsContainer{
        margin: 0 -5px;
        min-width:0;
    }
}
@media(max-width:830px){
    .inputWrapper.fullScreen{
       width:100%;
       min-width: 0;
    }
    .imgHolder{
        width:100%;
    }
    .imgHolder img{
        width: 170px;
    }
    .buttonContainer{
        width: 100%;
        margin-bottom: 10px;
    }
    .inputHolder, .baseInputContainer{
        width: 100%;
    }
    #inputHolder{
        width: calc(100% - 97px);
    }
    .playerAction{
        width:50%;
        text-align:left;
    }
}
@media(max-width:685px){
    .mainContainer{
        min-width: 668px;
    }
    .mainContainer.fullScreen{
        min-width: 0;
    }
    .iconSection {
        width: 100%;
    }
	.imgText{
    font-size: 4rem;
}
}
@media(max-width:550px){
    .inputWrapper.fullScreen>.baseInputContainer>.buttonContainer .sourceBtn{   
        width: calc(50% - 5px);
    }
    .inputWrapper.fullScreen>.baseInputContainer #inputHolder{
        margin-bottom: 10px;
        margin-right: 0px;
        width: 100%;
    }
    .inputWrapper.fullScreen>.baseInputContainer button{
        width: 100%;
    }
	.imgText{
    font-size: 3.5rem;
}
}
@media(max-width:400px){
    body{
        min-width: 400px;
    }
	.inputWrapper.fullScreen>.imgHolder img{
    width:170px;
}
}


@keyframes blinker {
    50% {
      opacity: 0;
    }
  }
/* > Process Styles */
.process-wrap {
    width: 60%;
    margin: 20px auto;
    min-width: 650px;
  }
  .process-main {
      width: 100%;
      min-width: 320px;
      display: flex;
  }
  .col-3 {
    width: 25%;
    position: relative;
  }
  .col-3:first-child .process-step:before {
      content: '1';
  }
  .col-3:nth-child(2) .process-step:before{
      content: '2';
  }
  .col-3:nth-child(3) .process-step:before {
      content: '3';
  }
  .col-3:nth-child(4) .process-step:before {
    content: '4';
}
  .col-3:last-child .process-step:before{
      content: '5';
  }
  .process-main .col-3:not(:first-child):before{
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 4px;
      top: 17.5px;
      left: calc(-50% + 16px);
      right: 0;
      background: #ebebeb;
      border: 2px #ebebeb solid;
     -o-transition: .4s;
      -ms-transition: .4s;
      -moz-transition: .4s;
      -webkit-transition: .4s;
       transition: .4s;
  }
  .process-step-cont {
      font-family: sans-serif;
      font-size: 16px;
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      align-content: space-between;
  }
  .process-step {
      border: 5px #ebebeb solid;
      border-radius: 100%;
      line-height: 0;
      background: #959595;
      text-align: center;
      align-items: center;
      justify-content: center;
      align-self: center;
      display: flex;
      color: #fff;
      width: 35px;
      height: 35px;
      font-weight: 700;
      margin-bottom: 7px;
      z-index: 4;
  }
  .process-label {
      color: #959595;
      font-weight: 600;
       width: 100%;
       text-align: center;
  }
  .process-dots {
      width: 10px; 
      height: 10px;
      border-radius: 50%;
      background-color: #ebebeb;
      cursor: pointer;
  }
  .process-dot-cont {
      display: flex;
      justify-content: space-around;
      align-items: stretch;
      width: 60%; 
      padding-top: 5px;
  }
  .active-step1 .col-3:first-child .process-step,
  .active-step1 .col-3:first-child .process-dots:first-child,
  .active-step1-mini2 .col-3:first-child .process-step,
  .active-step1-mini2 .col-3:first-child .process-dots:nth-child(-n+2),
  .active-step1-mini3 .col-3:first-child .process-step,
  .active-step1-mini3 .col-3:first-child .process-dots:nth-child(-n+3),
  .active-step1-mini4 .col-3:first-child .process-step,
  .active-step1-mini4 .col-3:first-child .process-dots:nth-child(-n+4)
  {
      background-color: #f89828;
  }
  .active-step1-mini2 .col-3:first-child .process-dots:first-child,
  .active-step1-mini3 .col-3:first-child .process-dots:nth-child(-n+2),
  .active-step1-mini4 .col-3:first-child .process-dots:nth-child(-n+3)
   {
      background-color: #fbcb93;
  }
  .active-step1 .col-3:first-child .process-label,
  .active-step1-mini3 .col-3:first-child .process-label,
  .active-step1-mini2 .col-3:first-child .process-label,
  .active-step1-mini4 .col-3:first-child .process-label{
      color: #f89828;
  }
  .active-step2 .col-3:first-child,
  .active-step3 .col-3:nth-child(-n+2),
  .active-step4 .col-3:nth-child(-n+3),
  .active-step5 .col-3:nth-child(-n+4){
      opacity: 0.5;
     /*pointer-events: none;*/
  }
  .active-step2 .col-3:first-child .process-step:before,
  .active-step3 .col-3:nth-child(-n+2) .process-step:before,
  .active-step4 .col-3:nth-child(-n+3) .process-step:before,
  .active-step5 .col-3:nth-child(-n+4) .process-step:before{
      content: '\2713';
      padding: 7px;
  }
  .active-step2 .col-3:nth-child(-n+2) .process-step,
  .active-step2 .col-3:nth-child(-n+2) .process-dots,
  .active-step3 .col-3:nth-child(-n+3) .process-step,
  .active-step3 .col-3:nth-child(-n+3) .process-dots,
  .active-step4 .col-3:nth-child(-n+4) .process-step,
  .active-step4 .col-3:nth-child(-n+4) .process-dots,
  .active-step5 .col-3:nth-child(-n+5) .process-step,
  .active-step5 .col-3:nth-child(-n+5) .process-dots {
      background-color: #f89828;
  }
  .active-step2 .col-3:nth-child(-n+2) .process-label,
  .active-step3 .col-3:nth-child(-n+3) .process-label,
  .active-step4 .col-3:nth-child(-n+4) .process-label,
  .active-step5 .col-3:nth-child(-n+5) .process-label{
      color: #f89828;
  }
  .active-step2 .col-3:nth-child(-n+2):before,
  .active-step3 .col-3:nth-child(-n+3):before,
  .active-step4 .col-3:nth-child(-n+4):before,
  .active-step5 .col-3:nth-child(-n+5):before{
      background: #f89828 !important;
  }

.lds-roller {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
  }
  .lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 32px 32px;
  }
  .lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #333;
    margin: -3px 0 0 -3px;
  }
  .lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
  }
  .lds-roller div:nth-child(1):after {
    top: 50px;
    left: 50px;
  }
  .lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
  }
  .lds-roller div:nth-child(2):after {
    top: 54px;
    left: 45px;
  }
  .lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
  }
  .lds-roller div:nth-child(3):after {
    top: 57px;
    left: 39px;
  }
  .lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
  }
  .lds-roller div:nth-child(4):after {
    top: 58px;
    left: 32px;
  }
  .lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
  }
  .lds-roller div:nth-child(5):after {
    top: 57px;
    left: 25px;
  }
  .lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
  }
  .lds-roller div:nth-child(6):after {
    top: 54px;
    left: 19px;
  }
  .lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
  }
  .lds-roller div:nth-child(7):after {
    top: 50px;
    left: 14px;
  }
  .lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
  }
  .lds-roller div:nth-child(8):after {
    top: 45px;
    left: 10px;
  }
  @keyframes lds-roller {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  

.validationFiled.transparent{
	border: 1px solid transparent;
}
.validationFiled.danger, .validationFiled.danger:focus{
	border-color:#ce2828
}
.validationFiled label,
.validationFiled div,
.validationFiled input::placeholder, 
.validationFiled md-select md-select-value{
    color: #ce2828 !important;
}
.validationFiled .form-control,.validationFiled input, .validationFiled md-select md-select-value, .validationFiled textarea{
    border-color:#ce2828 !important;
}

.logFailed{
    border-color:#ce2828;
    box-shadow: -2px 1px 5px #ce2828;
}
.logFailed i, .logFailed input, .logFailed input::placeholder{
    color: #ce2828
}
.validationFiled .form-control:focus{
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(206,40,40,.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(206,40,40,.6) !important;
}
.validationFiled.danger::placeholder{
		color: #ce2828;
}
.dangerText{
	color: #ce2828 !important;
	font-weight: bold;
}