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;
	font-family: Calibri, serif;
}
ol, ul {
	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;
}

input[type=range] {
  -webkit-appearance: none;
  width: 300px;
  margin-top: 50px;
  position: relative;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: orange;
  margin-top: -5px;
  z-index: 2;
  position: relative;
}

input[type=range]::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: black;
  position: absolute;
  z-index: 1;
}

input[type=range]:before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: black;
  position: absolute;
  right: 0;
  z-index: 1;
}

input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  width: 100%;
  background: grey;
  height: 10px;
  border-radius: 10px;
}





.wrapper {
	width: 100%;
	height: auto;
	background: #eceef4;
	
	
}
.header-wrapper {
	width: 95%;
	margin: 0 auto;
}
.header {
	display: flex;
	justify-content: space-between;	
	
}
.header-btn {
height: 5%;
padding: 1% 3%;
	border-radius: 4px;
	border: 1px solid #a5abc5;
	text-align: center;
	vertical-align: middle;
	text-transform: uppercase;
	font: 1vw Calibri, sans-serif;
	position: relative;
	margin-top: 3%;
}
.go-back {	
	order: 1;
}
.header-img {
	order: 2;
	width: 10%;
	height: 10%;
}
.sign-in {
	order: 3;
}

.content-wrapper {
	width: 95%;
	margin: 5% auto 0;
	height: auto;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #a5abc5;
}

.content-inner-wrapper {
	width: 95%;
	margin: 0 auto;
}

h1 {
	text-transform: uppercase;
	font: 2vw Calibri, sans-serif;
	text-align: center;
	font-weight: 600;
	margin-top: 2%;
	color: #6e768f;
}

hr {
	width: 40%;
}

.three-blocks {
	position: relative;
	display: flex;
	justify-content: space-around;
}

.block-translate {
	width: 25%;
	height: auto;
	background: #f7f7fa;
	border-radius: 4px;
	border: 1px solid #a5abc5;
}
.block-translate:hover {
	border: 1px solid blue;
}
.translate-one {
	order: 1;
}
.translate-two {
	order: 2;
}
.translate-three {
	order: 3;
}

.block-translate>img {
	width: 40%;
	padding: 10% 0 0;
	display: block;
	margin: 0 auto;
}
.caption {
display: block;
}

.wrapper-section {
	margin-top: 5%;
	width: 100%;
	height: auto;
	position: relative;
}

.round-number {
	padding: 5px 12px;
	border: 1.5px solid #6e768f;
	border-radius: 50px;
	color: #6e768f;
	margin-right: 3%;
}
.round-number-text {
	font-size: 24px;
	color: #6e768f;
}
 
.file {
	margin-top: 2%;
}

input[type="file"] {
	    opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    position: relative;
    height: 60px;
    width: 350px;
    z-index: 10;
}
.main-btn {	
	padding-top: 20px;
	color: #9098b8;
	background: #f7f7fa;
	border-left: 1px solid #9098b8;
	border-right: 1px solid #9098b8;
	border-bottom: 1px solid #9098b8; 
	font: 16px PlayfairDisplay, sans-serif;
	text-align: center;
	cursor: pointer;
	z-index: 0;
}

.load-btn {
	margin-top: -50px;
	width: 300px;
	height: 30px;
}
.attached {
	display: block;
	opacity: 0.5;
	margin-top: 30px;
	color: #777373;
}
.cloud {
	vertical-align: top;
	margin-right: 20px;
}

.buttons-wrapper {
	width: 90%;
	margin: 3% auto;
}
.pre-select {
	text-transform: uppercase;
	color: #9098b8;
	margin-right: 20px;
}
.to {
	margin-left: 20px;
}

.language {
	margin-bottom: 50px;
	width: 250px;
	height: 55px;
	padding-top: 5px;
	border-top: none;
	padding-left: 80px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("pic/caret.png") no-repeat right #f7f7fa;	
}

input, select {
	outline: none;
}

.half-wrapper-section {
	width: 49%;
	display: inline-block;
}
.tone {
	vertical-align: top;
}
.job {
	
}

input[type="radio"] {
	display: none;
}
input[type="radio"]:checked + .box {
	border: 4px solid #76a7e1;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	width: 196px;
}

  .box {
  	margin-top: 20px;
    width: 200px;
    height: 40px;
    background-color: white;
    transition: all 250ms ease;
    will-change: transition;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-weight: 600;
    border: 1px solid #9098b8;
    	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
   }
  
   .box > span {
   	  position: absolute;
      transform: translate(0, 10px);
      left: 0;
      right: 0;
      transition: all 300ms ease;
      font-size: 16px;
      user-select: none;
      color: #9098b8;
   }

 .border-radius {
 		border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
 }  

.timeline {
	margin-top: 20px;
	width: 90%;
	border: 1px solid #9098b8;
	padding: 4%;
	font-size: 14px;
} 

.i {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	background: #727895;
	font-style: italic;
	font-weight: 900;
	color: #fff;
	font: 20px Blackadder ITC, sans-serif;
padding: 0px 10px;
text-transform: lowercase;
margin-right: 20px;
}
.i-heading {
	color: #727895;
	text-transform: uppercase;
}
.payment-text {
	color: #9098b8;
	margin-bottom: 20px;
}

.input-name {
	width: 280px;
	height: 0px;
	padding: 20px;
	border: 2px solid #ccc;
	font-weight: 900;
	margin-bottom: 20px;
}
.input-label {
	color: #9098b8;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
}
.wrapper-fields {
	display: inline-block;
	margin-right: 20px;
}
.buttons-img {
	display: inline-block;
	width: 90%;
}

input[type="radio"]:checked + .box-img {
	border: 1px solid #76a7e1;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	outline: 4px solid #76a7e1;
	border-radius: 0;
	
}
  .box-img {
  	margin-top: 20px;    
    height: auto;
    background-color: white;
    transition: all 250ms ease;
    will-change: transition;
    text-align: center;
    cursor: pointer;
    position: relative;
    border: 1px solid #9098b8;
    	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	   }
   .card {
   	width: 80%;
   }   
   .card>img {
   	width: 100%;
   }
	.doc-wrapper {
		width: 90%;
		position: relative;
		margin-bottom: 10%;
		
	}
	.doc {
	width: 140%;
	height: 100%;
}
   .doc>img {
   	width: 50%;   	
   	margin: 5% auto;
   }

   .inline-block {
   	display: block;
   	position: relative;
 }
.input-expiry {
		width: 100px;
}
 .input-field { 
 	height: 0px;
	padding: 20px;
	border: 2px solid #ccc;
	font-weight: 900;
	margin-bottom: 20px;
	margin-left: 10%;
 }
 .input-code {
	width: 60px;
 }
 .label-margin {
 	margin-left: 10%;
 }

 .margin-top {
 	margin-top: 5%;
 }

 .section-agree {
 	display: flex;
 	justify-content: flex-end;
 	padding-bottom: 5%;
 }

 .input-button {
 	width: 150px;
 	height: 50px;
 	vertical-align: middle;
 	text-align: center; 
 	margin-left: 5%;
 	text-transform: uppercase;
 	border: none;	
 	cursor: pointer;

 }

 .print {
	background: #f7f7fa;
	color: #a5abc5;
 }
 .submit {
 	background: #5fcac6;
 	color: #fff;
 }

 .link {
 	text-decoration: none;
 	border-bottom: 1px dotted #ccc;
 	color: #ccc;
 }

 .checkbox {
 	margin-top: 10px;
 }

 .footer {
 	margin-top: 5%;
 	padding: 5% 0;
 	background: #444a62;
 	width: 100%;
 	height: 100px;
 	 display: flex;
 	justify-content: space-around;
 }


 .footer-block {
 	color: #fff;
 }
 .footer-text {
 	width: 25%;
 }

 .footer-block>h2 {
 	font-weight: 900;
 	text-transform: uppercase;
 }

 .footer-img {
 	width: 60%;
 	float: right;
 }

.footer-link {
	text-decoration: none;
	color: #fff;
}





@media screen and (max-width: 768px) {}