@charset "utf-8";

#ucp-page {width:100%; height:100%;}
#ucp-page .frames {position:relative; width:100%; height:100%; overflow:hidden;}
#ucp-page .page-loader {display:none; width:100%; height:100%;}
#ucp-page .page-loader .spot-spinner {margin:auto;}
#ucp-page.loading .frames {display:none;}
#ucp-page.loading .page-loader {display:flex;}
#ucp-page .frames .frame {position:absolute; top:0; left:0;
									width:100%; height:100%;
									transition:all 1s cubic-bezier(0.18, 0.89, 0.32, 1.28);
									transform:translateY(100%);
									opacity:0;
									z-index:0;
									}
#ucp-page .frames .frame.active {transform:translateY(0); opacity:1; z-index:5;}
#ucp-page .frames .frame.hiding {transform:translateY(-100%);}
#ucp-page .frames .frame .media-player {width:100%; height:100%;}
#ucp-page .frames .frame .media-player .brand {position:absolute; left:0; bottom:0; width:100%; text-align:center; z-index:5;}
#ucp-page .frames .frame .media-player .brand a {display:block; padding:0.25rem; background-color:rgba(255,255,255,0.3); color:#ffffff; font-size:1.125rem; font-weight:600; transition:all 0.2s;}
#ucp-page .frames .frame .media-player .brand a .cap {display:inline; margin-right:0.5rem; font-weight:500; color:#373737;}
#ucp-page .frames .frame .media-player .brand a .name {display:inline;}
#ucp-page .frames .frame .media-player .brand a .name:before {margin-right:0.5rem; color:#E91E63; font-family:"Font Awesome 5 Pro"; content:"\f03d";}


#ucp-page .frames .frame.final {background-color:#F8F6F1; overflow:auto; -webkit-overflow-scrolling:touch;}
#ucp-page .frames .frame.final .centerizer {display:flex; flex-direction:column; justify-content:space-between; align-items:center; width:100%; height:100%}
#ucp-page .frames .frame.final .centerizer .top {width:100%;}
#ucp-page .frames .frame.final .centerizer .top .success {width:100%; padding:1.25rem; margin:0 auto; background-color:#262627; color:#ffffff; font-size:1.125rem; font-weight:500; text-align:center;}
#ucp-page .frames .frame.final .centerizer .centered {padding:2rem 0; margin:auto; text-align:center;}
#ucp-page .frames .frame.final .centerizer .centered .main {width:24rem;}
#ucp-page .frames .frame.final .centerizer .centered .main .logo {margin-bottom:2rem; font-size:2rem; font-weight:600;}
#ucp-page .frames .frame.final .centerizer .centered .main .logo:before {margin-right:1rem; font-family:"Font Awesome 5 Pro"; content:"\f03d"; color:#FF3C4C;}
#ucp-page .frames .frame.final .centerizer .centered .main .lead {margin-bottom:2rem; font-size:1.75rem; line-height:1.2;}
#ucp-page .frames .frame.final .centerizer .centered .main .lead b {font-weight:inherit; color:#673AB7;}
#ucp-page .frames .frame.final .centerizer .centered .main .sub {font-size:1.25rem;}
/*
#ucp-page .frames .frame.final .centerizer .centered .logo {display:flex; width:11rem; height:11rem; margin:0 auto 2rem; border-radius:20rem; background-color:#E91E63; box-shadow:#bebebe 0 0.5rem 2rem;}
#ucp-page .frames .frame.final .centerizer .centered .logo .in {margin:auto; padding:1.5rem; color:#ffffff;}
#ucp-page .frames .frame.final .centerizer .centered .logo .name {font-size:2rem; font-weight:600;}
#ucp-page .frames .frame.final .centerizer .centered .logo .adv {font-size:0.75rem;}
#ucp-page .frames .frame.final .centerizer .centered .advantages {font-size:1.5rem;}
#ucp-page .frames .frame.final .centerizer .centered .advantages .tasks {}
#ucp-page .frames .frame.final .centerizer .centered .advantages .tasks b {color:#f44336;}
#ucp-page .frames .frame.final .centerizer .centered .advantages .personal {font-weight:500;}
*/
#ucp-page .frames .frame.final .centerizer .centered .main .buttons {padding:3rem 0;}
#ucp-page .frames .frame.final .centerizer .centered .main .btn {display:block; width:100%; padding:1rem; margin-bottom:1rem; font-size:1.125rem; font-weight:600; border-radius:0.5rem; transition:all 0.2s;}
#ucp-page .frames .frame.final .centerizer .centered .main .btn.try-it {background-color:#FF3C4C; color:#ffffff;}
#ucp-page .frames .frame.final .centerizer .centered .main .btn.promo {background-color:transparent; border:#673AB7 solid 0.125rem; color:#673AB7;}
#ucp-page .frames .frame.final .centerizer .centered .main .btn:hover {transform:scale(1.05);}


#ucp-page .text-response-form {display:none; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#ffffff; z-index:100;}
#ucp-page .text-response-form.active {display:block; animation:fadeInAndScale 0.5s;}
#ucp-page .text-response-form .in {display:flex; flex-direction:column; width:100%; height:100%;}
#ucp-page .text-response-form textarea {width:100%; padding:2rem; border:none; flex-grow:1; font-size:1.25rem;}
#ucp-page .text-response-form textarea:focus {outline:none; box-shadow:none;}
#ucp-page .text-response-form .buttons {padding:2rem 0 4rem; text-align:center;}
#ucp-page .text-response-form .buttons .empty {display:inline-block; width:4rem; height:4rem; margin:0 1rem;}
#ucp-page .text-response-form .buttons .btn {margin:0 1rem; padding:0; border-radius:10rem; text-align:center; transition:all 0.2s;}
#ucp-page .text-response-form .buttons .btn:hover {transform:scale(1.1);}
#ucp-page .text-response-form .buttons .btn:before {font-family:"Font Awesome 5 Pro";}
#ucp-page .text-response-form .buttons .btn.send {width:6rem; height:6rem; line-height:6rem; font-size:4rem; letter-spacing:0.25rem; background-color:#ffffff; color:#797979; box-shadow:#bcbcbc 0 0.5rem 1.5rem; cursor:not-allowed;}
#ucp-page .text-response-form .buttons .btn.send.active {background-color:#4caf50; color:#ffffff; cursor:pointer;}
#ucp-page .text-response-form .buttons .btn.return {width:4rem; height:4rem; line-height:4rem; background-color:rgba(0,0,0,0.6); color:#ffffff; font-size:1.25rem;}
#ucp-page .text-response-form .buttons .btn.send:before {font-family:"Font Awesome 5 Brands"; content:"\f3fe";}
#ucp-page .text-response-form .buttons .btn.return:before {content:"\f00d";}

#ucp-page .media-recorder .recorder .invisible-area {display:none;}
#ucp-page .media-recorder .recorder .msg-bottom {display:block;}
#ucp-page .media-recorder .recorder .controls .notes-toggle {display:none;}
#ucp-page .media-recorder .recorder .controls .empty {display:block;}
#ucp-page .media-recorder .recorder.starting .controls .empty {display:none;}


form{
 text-align: center;
}
form .field{
 margin-bottom: 10px;
}

/*form .field input[type=text]{
 padding: 5px;
}*/

/*form button.btn{
  border-radius: 10px;
}*/

form .field textarea {
	/*border: 1px solid #999;*/
	/*border-radius: 10px;*/
	width: 100%;
	/*padding: 15px;*/
	height: 70px;

}


.form_wrapper{
  width: 80%;
  margin: 0 auto;
  margin-bottom: 15px;
  background: rgba(255,255,255,0.75);
  padding: 15px;
  border-radius: 15px;
}






@media all and (min-width: 800px) {
	#ucp-page .frames .frame .media-player {width:50%;}
	#ucp-page .frames .frame .media-player.loading:before {width:200%;}
	#ucp-page .frames .frame .media-player.loading .spot-spinner {width:200%;}

	#ucp-page .frames .frame .media-player .response {padding:2rem 1rem;}
	#ucp-page .frames .frame .media-player .response.active {display:flex; flex-direction:column; left:100%; height:100%; background:none; animation:fadeInToRight 0.3s;}
	#ucp-page .frames .frame .media-player .response.open:before {display:block; width:12rem; margin:0 auto; flex-grow:1; background:transparent url("happy_face.svg") 50% 70% no-repeat; background-size:contain;}
	#ucp-page .frames .frame .media-player .response .caption {margin-bottom:2rem; font-size:1.25rem; color:#3E455B;}
	#ucp-page .frames .frame .media-player .response .formats {width:100%; padding:0; margin:auto;}
	#ucp-page .frames .frame .media-player .response .formats .btn {width:6rem; height:6rem; font-size:0.875rem; opacity:1;}
	#ucp-page .frames .frame .media-player .response .formats .btn:nth-child(2):nth-last-child(1) {width:100%;}
	#ucp-page .frames .frame .media-player .response .formats .btn:before {font-size:1.25rem;}

	#ucp-page .frames .frame .media-player .response.choice {max-height:none;}
	#ucp-page .frames .frame .media-player .response.choice:before {content:none;}
	#ucp-page .frames .frame .media-player .response .poll {
			padding:1rem;
			max-height:100%;
			margin:0;
			overflow-x:hidden;
			overflow-y:auto;
			-webkit-overflow-scrolling:touch;}
	#ucp-page .frames .frame .media-player .response .poll .btn {margin-bottom:1rem;
		}
	#ucp-page .frames .frame .media-player .response .poll .btn:hover {transform:none; }
	#ucp-page .frames .frame .media-player .response .poll .btn.selected {}
	#ucp-page .frames .frame .media-player .response .poll .btn:before {width:2rem; height:2rem; margin-top:-1rem; left:1rem; line-height:2rem; font-size:1rem; font-weight:500; color:#ffffff;}
	#ucp-page .frames .frame .media-player .response .poll .btn:last-child {margin:0;}
	#ucp-page .frames .frame .media-player .response .poll .btn:first-child:nth-last-child(1) {margin:0; }


	#ucp-page .frames .frame .media-player .response .form {height:auto; margin:auto;}
	#ucp-page .frames .frame .media-player .response .form form {display:block;}
	#ucp-page .frames .frame .media-player .response .form .hdr {padding:0 0 1rem; color: #000;}
	#ucp-page .frames .frame .media-player .response .form .fields input {}
	#ucp-page .frames .frame .media-player .response .form .btn {margin:2rem 0 0;}

	#ucp-page .frames .frame .media-player .brand {left:2rem; bottom:2rem; width:auto; text-align:left; text-shadow:#373737 0 0 0.25rem;}
	#ucp-page .frames .frame .media-player .brand a {padding:0; background-color:transparent; border-radius:0.5rem;}
	#ucp-page .frames .frame .media-player .brand a .cap {display:block; margin:0; color:#ababab; font-weight:300;}
	#ucp-page .frames .frame .media-player .brand a .name {display:block; font-size:1.5rem;}
	#ucp-page .frames .frame .media-player .brand a:hover {padding:0.5rem 1rem; background-color:#673AB7;}



	#ucp-page .media-recorder {left:50%; width:50%;}
	#ucp-page .text-response-form {left:50%; width:50%;}
	#ucp-page .text-response-form textarea {padding:4rem;}
}

.error{
 color: red;
}

/*.btn::before{*/
/* color: #fff !important;*/
/*}*/

/*.btn{*/
/* color: #fff !important;*/
/*}*/

body{
 overflow: hidden;
}

@media all and (max-width: 319px) {
	#ucp-page .text-response-form .buttons .empty {display:none;}
}

@media all and (max-width: 319px) {
	#ucp-page .frames .frame .media-player .response .formats .caption {font-size:0.875rem;}
	#ucp-page .frames .frame .media-player .response .formats .btn {width:4rem; height:4rem; font-size:0.6125rem;}
	#ucp-page .frames .frame .media-player .response .formats .btn:before {font-size:0.875rem;}
	#ucp-page .frames .frame .media-player .response .formats .btn:nth-child(2):nth-last-child(1) {width:100%;}
}



.media-player .response .form.type-text, .media-player .response .form.type-video, .media-player .response .form.type-audio{
	display: none;
}

button[class*="type"] {
	background: #065fd4;
    border: 0px;
    color: white;
    padding: 10px 20px; 
	 border-radius: 6px;
	 outline: none;
	 user-select: none;
	 transition: all .2s ease-in;
	 padding-top: 40px;
}

button[class*="type"]:hover {
	transform: scale(1.1);
	cursor: pointer;
}

.type-buttons {
	display: flex;
    justify-content: space-evenly;
    padding: 20px 0px;
}

.type-label {
	font-weight: bold;
	text-align: center;
}

.select-type {
	height: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.form.type-audio, .form.type-video {
	height: calc(100% - 20px)!important; 
	background: url(../img/micro.png) no-repeat center center;
	position: relative;
}

.form.type-video {
	background: none;
}

.type-bottom {
	position: absolute;
	width: 100%;
	bottom: 20px;
}

.type-bottom__label {
text-align: center;
font-size: 18px;
}

.type-bottom__label span {
	color: #F44336
}


.btn-record {
	background: #F44336 url("../img/micro-icon.png") no-repeat center center;
	width: 5rem;
	height: 5rem;
	border-radius: 2.5rem;
	border: 0px;
	transition: all .2s ease-in;
}


.record-video {
	background: #F44336 url("../img/video-icon.png") no-repeat center center;
}

.btn-close {
	width: 3rem;
	height: 3rem;
	border-radius: 1.5rem;
	border: 0px;
	transition: all .2s ease-in;
	background: #333333 url("../img/close-icon.png") no-repeat center center / 20px;
}


.btn-start {
	width: 3rem;
	height: 3rem;
	border-radius: 1.5rem;
	border: 0px;
	transition: all .2s ease-in;
	background: #333333 url("../img/start-icon.png") no-repeat center center / 20px;
}

.record-stop {
	background: #F44336 url("../img/stop-icon.png") no-repeat center center / 30px;
}


.btn-record:hover, .btn-close:hover, .btn-start:hover {
transform: scale(1.1);
cursor: pointer;
}

.type-controls {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	padding: 20px;
}

.type-controls > div {
	flex-basis: 33.33%;
	text-align: center;
}

button.type-video {
	background: #065fd4 url("../img/video-icon.png") no-repeat center 10px;
}

button.type-audio {
	background: #065fd4 url("../img/micro-icon.png") no-repeat center 10px;
}

button.type-text {
	background: #065fd4 url("../img/text-icon.png") no-repeat center 10px;
}


.recording-step-2, .recording-step-3 {
	display:none;
}

.recording-timer {
	padding-left: 20px;
	color: #f44336;
	font-weight: 500;
	max-width: 50px;
	margin: 0 auto;
}

.recording-q {
	text-align: center;
}


.button-yes, .button-no {
	border: 0;
	padding: 10px 25px;
	border-radius: 3px;
	color: white;
	cursor: pointer;
}

.recording-form {
	display: none;
}

.button-yes {
	background: #3fca50;
}

.button-no {
	background: #545b65;
}

.recording-timer:before {
	content: '';
	position: absolute;
	background: #F44336;
	width: 12px;
	border-radius: 6px;
	height: 12px;
	margin-left: -20px;
	top: 6px;
	animation: recording 1s ease-in-out alternate infinite;
}

@keyframes recording {
	from { transform: scale(0.3); }
	to { transform: scale(1); }
  }



@media (max-width: 800px) {
	.form.type-audio {
		background: none;
	}
	.allScreen {
		height: 100%!important;
		max-height: 100%!important;
		top: 0px!important;
		background: white!important
	}
	.allScreen .type-bottom__label, .allScreen .recording-q {
		color: black
	}
	
}

.type-bottom__label{
    padding: 5px;    
    background-color: rgba(0,0,0,0.35);
    color: #fff;
}

.recording-q{
    padding: 5px;    
    background-color: rgba(0,0,0,0.35);
    color: #fff;
}

.record-timer {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100% - 177px);
	align-items: center;
	justify-content: center;
	font-size: 54px;
	text-align: center;
	display: none;
	z-index: 99;
	
	text-shadow: 3px 3px 3px #000;
	color: #fff;
}


.bomb {
	display: none;
	position: fixed;
	left: 40px;
	bottom: 40px;
	cursor: pointer;
	z-index: 999;
	opacity: 0.7;
 }
 .bomb img {
	width: 80px;
 }
 .fancybox-slide--iframe .fancybox-content {
	 width: 960px;
	 height: 520px;
 }

 .bomb:hover {
	 opacity: 1;
 }

 .bomb:hover .label {
display: block;
 }
 

 .label  {
	padding: 5px;
    background: #fdd957;
    position: absolute;
    width: 365px;
    top: 39px;
    left: 47px;
    box-shadow: 0px 0px 8px -5px;
    border-radius: 4px;
    font-family: Ubuntu, sans-serif;
    font-weight: 700;
    text-align: center;
    font-size: 14px;
    transition: all .2s ease-out;
    display: none;
    z-index: -1;

 }

@media (max-width: 1000px) {
.fancybox-slide--iframe .fancybox-content {
 width: 100%;
 height: 540px;
}
}