/* support panel */
.spanel-label { cursor: pointer; margin-top: 3px; color: #fff; opacity: 0.8; -webkit-transition: opacity .15s ease-in-out;
	-moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;}
.spanel-label:hover { opacity:1;}
.panel-checkbox { display: none;}
.support_panel { background: #eee; height: auto; max-height: 0; -webkit-transition: max-height .2s ease-out; transition: max-height .2s ease-out;
	position: relative; overflow: hidden; z-index: 1; box-shadow: 0 0 15px rgba(0,0,0,.4) inset; }
#support_p:checked + .support_panel  {margin-top: 0; max-height: 1000px; -webkit-transition: max-height .4s ease-out; transition: max-height .4s ease-out;}
#sliding_panel.opened { margin-top:0; }
.support_panel .container { padding:15px; }
#close_sliding_panel { display: block; width: 14px; height: 14px; position: absolute; right: 14px; top: 0; background: #CCC; padding: 40px 10px 10px 10px;}
#close_sliding_panel:hover { background:#ddd;}
.support-info { margin-top: 5px;}

.support-panel-close { position: absolute; top: 30px; right: 30px; font-size: 28px; color: #000; font-weight: 400; background: rgba(0,0,0,.08);
	display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; cursor: pointer; z-index: 2;
	-webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; -webkit-transform: scale(0.1); -ms-transform: scale(0.1); 
	transform: scale(0.1)}
#support_p:checked + .support_panel .support-panel-close { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
.support-panel-close:hover { background: rgba(0,0,0,.15); box-shadow: 0 0 0 3px rgba(0,0,0,.15)}

.cf_response { display: none; padding-left: 15px; padding-right: 15px;}

/* contact form errors */
.ui-state-error{border:1px solid #EB3034 !important; position:relative;}
.ui-state-valid{border:1px solid #0EAB55 !important; position:relative;}
.ui-state-error + span::after,
.ui-state-valid + span::after {font-family: 'icomoon'; font-size: 15px; position: absolute; right: 12px; top: 10px; display: block; z-index: 1;}
.ui-state-error + span::after { content: "\e01b"; color: #EB3034;}
.ui-state-valid + span::after { content: "\e013"; color: #0EAB55;}

#notification_container .alert { display: inline-block; position: relative; padding: 10px 20px; }
#notification_container .close::before { content: "\00d7"; color: #000; outline: none;}
#notification_container .close { position: absolute; top: 2px; right: 2px; font-size: 15px; opacity: 1;}