body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.header {
  padding: 10px 16px;
padding-left: 50px;
  background: #555;
  color: #f1f1f1;
  text-align: center;
  margin-left: 0px;
 opacity: 1;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed; /* Div будет "прилипать" к экрану */
  z-index: 9998;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

body {margin:0;}

linker:visited,linker:hover,linker:active{
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  position:relative;
  transition:0.5s color ease;
  text-decoration:none;
  color:#81b3d2;
  font-size:2.5em;
}
linker:hover{
  color:#d73444;
}
linker.before:before,linker.after:after{
  content: "";
  transition:0.5s all ease;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  position:absolute;
}
linker.before:before{
  top:-0.25em;
}
linker.after:after{
  bottom:-0.25em;
}
linker.before:before,linker.after:after{
  height:5px;
  height:0.35rem;
  width:0;
  background:#d73444;
}
linker.first:after{
  left:0;
}
linker.second:after{
  right:0;
}
linker.third:after,linker.sixth:before,linker.sixth:after{
  left:50%;
  -webkit-transform:translateX(-50%);
          transform:translateX(-50%);
}
linker.fourth:before,linker.fourth:after{
  left:0;
}
linker.fifth:before,linker.fifth:after{
  right:0;
}
linker.seventh:before{
  right:0;
}
linker.seventh:after{
  left:0;
}
linker.eigth:before{
  left:0;
}
linker.eigth:after{
  right:0;
}
linker.before:hover:before,linker.after:hover:after{
  width:100%;
}
.square{
  box-sizing:border-box;
  margin-left:-0.4em;
  position:relative;
  font-size:2.5em;
  overflow:hidden;
}
.square linker{
  position:static;
  font-size:100%;
  padding:0.2em 0.4em;
}
.square:before,.square:after{
  content: "";
  box-sizing:border-box;
  transition:0.25s all ease;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  position:absolute;
  width:5px;
  width:0.35rem;
  height:0;
  background:#d73444;
}
.square:before{
  left:0;
  bottom:-0.2em;
}
.square.individual:before{
  transition-delay:0.6s;
}
.square:after{
  right:0;
  top:-0.2em;
}
.square.individual:after{
  transition-delay:0.2s;
}
.square linker:before{
  left:0;
  transition:0.25s all ease;
}
.square linker:after{
  right:0;
  transition:0.25s all ease;
}
.square.individual linker:after{
  transition:0.25s all ease 0.4s;
}
.square:hover:before,.square:hover:after{
  height:calc(100% + 0.4em);
}
.square:hover linker:before,.square:hover linker:after{
  width:100%;
}

.icon-bar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.icon-bar a {
  float: left;
  width: 50%;
  text-align: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 24px;
}

.icon-bar a:hover {
  background-color: #008080;
}

.active {
  background-color: #4CAF50;
}

.forms{
  background: #fff;
  border: 3px double #cccccc;
  display: none;
  outline: none;
  margin: 0px auto;
  margin-top:0px;
  padding: 10px;
  max-width: 420px;
}

.section_form{
  border: 0px solid red;
  margin: 15px 0px;
}
            
.label{
  border: 0px solid red;
  color: #949494;
  float:left;
  font: 14px TimesNewRoman;
  padding-right: 5px;
  text-align: right;
  width: 140px;
}

.checkbox-other {
	display: block;
	margin: 0 25px 0px 25px;
	line-height: 22px;
	cursor: pointer;
	user-select: none;
	position: relative;
}
.checkbox-other input[type=checkbox] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0;
}
.checkbox-other span {
	display: inline-block;
	position: relative; 
	padding: 0 0 0 35px; 
	line-height: 22px;    
}
.checkbox-other span:before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid #2B7335;
	box-shadow: inset 0 0 3px #8a8a8a;
}
 
/* Checked */
.checkbox-other input[type=checkbox] + span:after {
	content: "";	
	opacity: 0;
	transition: opacity 0.3s ease;
}
.checkbox-other input[type=checkbox]:checked + span:after {
	content: "✓";
	color: green;
	font-size: 30px;
	font-weight: 900;
	position: absolute;
	left: 2px;
	top: -2px;
	opacity: 1;
}
 
/* Focus */
.focused span:before {
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
 
/* Hover */
.checkbox-other span:hover:after {
	filter: brightness(110%);
}
 
/* Active */
.checkbox-other span:active:before,
.checkbox-other span:active:after {
	filter: brightness(80%);
}
 
/* Disabled */
.checkbox-other input[type=checkbox]:disabled + span {
	color: #666;
	cursor: default;
}
.checkbox-other input[type=checkbox]:disabled + span:before,
.checkbox-other input[type=checkbox]:disabled + span:after {
	filter: grayscale(100%);
	opacity: 0.6;
}

input[type="radio"]:checked, 
input[type="radio"]:not(:checked) 
{
    position: absolute;
    left: -9999px;
}

input[type="radio"]:checked + label, 
input[type="radio"]:not(:checked) + label {
    display: inline-block;
    position: relative;
    padding-left: 28px;
    line-height: 20px;
    cursor: pointer;
}

input[type="radio"]:checked + label:before, 
input[type="radio"]:not(:checked) + label:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 18px;
    height: 18px;
    border: 1px solid #dddddd;
    background-color: #ffffff;
}

input[type="radio"]:checked + label:before, 
input[type="radio"]:not(:checked) + label:before {
    border-radius: 100%;
}

input[type="radio"]:checked + label:after, 
input[type="radio"]:not(:checked) + label:after {
    content: "";
    position: absolute;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

input[type="radio"]:checked + label:after, 
input[type="radio"]:not(:checked) + label:after {
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: teal;
}

input[type="radio"]:not(:checked) + label:after {
    opacity: 0;
}

input[type="radio"]:checked + label:after {
    opacity: 1;
}

.forms input, .forms textarea{
  background: #ffffff;
  border: 2px solid #cccccc;
  font: 14px TimesNewRoman; 
  outline: none;
  resize: none;
  max-width: 170px;
}

.forms textarea{
  overflow: auto;
}

.forms input.but{
  background: #cccccc;
  border: 1px solid #a1a19f;
  display: block;
  height: 21px;
  left: 0px;
  margin: 0px auto;
  padding: 0px;
  position: relative;
  top: 0px;
  outline: none;
  width: 170px;
  cursor: pointer;
}

.but_reset{
  margin-left: 30%;
  height: 20px;
  width: 240px;
  font-size: 14px;
  cursor: pointer;
}

/* Кнопка, используемая для открытия контактной формы-фиксируется в нижней части страницы */
.open-button {
  background-color: #555;
  color: white;
  padding: 18px 20px;
  border: none;
  opacity: 0.5;
  cursor: pointer;
  position: fixed;
  z-index: 9999;
  top: 0px;
  left: -10px;
  width: 25px;
 
 align-items: center; 
 justify-content: center; 
}

.button_1 { 
    /* Position the button */
    left: -10px; 
    height: 50px; 
    width: 80px; 
        border-radius: 10%;
    /* Add the shadow effect for the button */
    box-shadow: inset 0 0 18px #fff,  
       inset -6px 0 15px #f3bad6,  
       inset 6px 0 15px #0ff,  
       inset -6px 0 20px #f3bad6,  
       inset 6px 0 20px #0ff,  
       0 0 15px #fff, 4px 0 15px 
       #f3bad6, -4px 0 15px #0ff; 
} 

 @keyframes glowing {
      0% { background-color: #555; box-shadow: inset 0 0 18px #fff,  
       inset -6px 0 15px #f3bad6,  
       inset 6px 0 15px #0ff,  
       inset -6px 0 20px #f3bad6,  
       inset 6px 0 20px #0ff,  
       0 0 15px #fff, 4px 0 15px 
       #f3bad6, -4px 0 15px #0ff; }
      50% { background-color: teal; box-shadow: inset 0 0 18px #fff,  
       inset -6px 0 15px #f3bad6,  
       inset 6px 0 15px #0ff,  
       inset -6px 0 20px #f3bad6,  
       inset 6px 0 20px #0ff,  
       0 0 15px #fff, 4px 0 15px 
       #f3bad6, -4px 0 18px #0ff; }
      100% { background-color: #555; box-shadow: inset 0 0 18px #fff,  
       inset -6px 0 15px #f3bad6,  
       inset 6px 0 15px #0ff,  
       inset -6px 0 20px #f3bad6,  
       inset 6px 0 20px #0ff,  
       0 0 15px #fff, 4px 0 15px 
       #f3bad6, -4px 0 15px #0ff; }
      }
      .open-button {
      animation: glowing 1300ms infinite;
      }

/* Всплывающая форма-скрыта по умолчанию */
.form-popup {
z-index: 9997;
  display: none;
  position: fixed;
  bottom: 0;
  left: 15px;
  border: 3px solid #f1f1f1;
}

.form-reg-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
}

/* Добавление стилей в контейнер форм */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Поля ввода полной ширины */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* Когда входы получают фокус, сделайте что-нибудь */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Установите стиль для кнопки отправить/кнопка */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Добавьте красный цвет фона к кнопке отмена */
.form-container .cancel {
  background-color: red;
}

/* Добавьте некоторые эффекты наведения на кнопки */
.form-container .btn:hover {
  opacity: 1;
}

.form-container .open-button:hover {
  opacity: 0,5;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  align: center;
}

.wrapper{
  visibility: hidden;
  color: #FFD700;
  border: none;
  padding: 10 10;
  border: 3px solid #f1f1f1;
  opacity: 0.9;
  background: teal;
  bottom: 20px;
  width: 350px;
    position: fixed;
    left: 50%;
    margin-left: -175px;
}

.wrapper .show {
  visibility: visible;
  color: #FFD700;
  border: none;
  padding: 10 10;
  border: 3px solid #f1f1f1;
  opacity: 0.9;
  background: teal;
  bottom: 20px;
  width: 350px;
  position: fixed;
    left: 50%;
    margin-left: -175px;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 20px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 20px; opacity: 1;}
}

header{
  font-size: 25px;
  font-weight: 600;
  text-align: center;
}

.phrase{
  font-size: 18px;
  text-align: left;
}

.author{
  font-size: 14px;
  font-style: italic;
  text-align: right;
}

button{
  border: none;
  color: #fff;
  padding: 11px 17px;
  background: #5372F0;
  border-radius: 20px;
  cursor: pointer;
}

.countertext{
  background: #fff;
  border: 3px double teal;
  text-align: center;
  margin: 0px auto;
  margin-top:2px;
  padding: 10px;
  width: 75%;
}

.LinePSW{
  background: #fff;
  border: 3px double #cccccc;
  text-align: center;
  margin: 0px auto;
  margin-top:2px;
  padding: 10px;
  width: 75%;
}

/* Стиль входных данных */
.containerColumn input[type=text], .containerColumn select, .containerColumn textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

.containerColumn input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

.containerColumn input[type=submit]:hover {
  background-color: #45a049;
}

/* Стиль раздела контейнер/контакт */
.containerColumn {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
}

/* Создайте два столбца, которые плавают рядом друг с другом */
.columncont {
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
}

/* Очистить поплавки после столбцов */
.rowcont:after {
  content: "";
  display: table;
  clear: both;
}

/* Стиль кнопок, которые используются для открытия и закрытия панели аккордеона */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Добавить цвет фона для кнопки, если она нажата (добавить .активный класс с JS), а при наведении на него курсора мыши (наведите курсор) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Стиль аккордеон панели. Примечание: скрыто по умолчанию */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  border-radius: 20px;
  transition: max-height 0.2s ease-out;
}

.accordion:after {
  content: '\02795'; /* Символ юникода для "плюса" знак (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Символ юникода для "минуса" знак (-) */
}

.fixed-header-placeholder{
  height: 0 !important;
 }

.wa-btnfavour {
	outline: transparent;
	background: transparent;
	width: 248px;
	height: 105px;
	position: fixed;
	bottom: 12%;
	left: 0%;
	z-index: 1000;
	border-radius: 5px;
  }
.wa-btnfavour__link {
	outline: transparent;
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	background: url("/Download/favour.png") no-repeat;
	background-size: 60% 60%;
	background-position: 50% 50%;
	transition-duration: 0.3s;
	border-radius: 5px;
cursor: pointer;
}
.wa-btnfavour__link:active,
.wa-btnfavour__link:focus {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.wa-btnfavour__link:hover {
background: rgba(0, 0, 0, 0.5) url("/Download/favour.png") no-repeat;
	background-size: 60% 60%;
	background-position: 50% 50%;
	box-shadow: 0 0 20px 3px rgba(10,10,10,10);
}

.wa-btn {
	outline: none;
	width: 80px;
	height: 80px;
	position: fixed;
	bottom: 15%;
	right: 10%;
	z-index: 1000;
	border-radius: 70px;
  }
.wa-btn__link {
	outline: none;
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	background: #2CB742 url("/Download/Phone.png") no-repeat;
	background-size: 60% 60%;
	background-position: 50% 50%;
	transition-duration: 0.3s;
	box-shadow: 0 0 20px 3px rgba(0,0,0,0.1);
	border-radius: 70px;
	animation: scale 3s ease-in-out infinite;
}
.wa-btn__link:active,
.wa-btn__link:focus {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.wa-btn__link:hover {
	background: rgb(33, 141, 49) url("/Download/Phone.png") no-repeat;
	background-size: 60% 60%;
	background-position: 50% 50%;
}
.wa-btn__ring {
	display: block;
	position: absolute;
	background: #2CB742;
	opacity: 0.5;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	z-index: -2;
	border-radius: 150px;
	animation: blink 3s ease-in-out infinite;
}
.wa-btn__note {
	position: absolute;
	background: #fff;
	height: 80px;
	width: 180px;
	line-height: 30px;
	text-align: center;
	border-radius: 15px;
	padding: 10px 10px;
	margin: 0 0 0 -90px;
	font-family: "Lato", sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	text-shadow: 0 1px 5px rgba(0,0,0,0.1);
	top: 0%;
	left: 50%;
	z-index: -1;
	box-shadow: 0 5px 20px 3px rgba(0,0,0,0.1);
	transform: scale(0);
	transition-duration: 0.5s;
	opacity: 0;
}
.wa-btn__note--animation {
	transform: scale(1);
	top: -170%;
	opacity: 1;
}

@keyframes scale {
	5% {
		transform: scale(0.9);
	}
	15% {
		transform: scale(1.05);
	}
	25% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes blink {
	0% {
		transform: scale(1);
		opacity: 0.5;
	}
	70% {
		transform: scale(2);
		opacity: 0;
	}

	100% {
		transform: scale(2);
		opacity: 0;
	}
}

@media (max-width: 900px) {
	.wa-btn__note--animation {
		transform: scale(0);
	}
}

*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

h1{
  font-size: 2.5rem;
  font-family: 'Montserrat';
  font-weight: normal;
  color: #444;
  text-align: center;
  margin: 2rem 0;
}

.wrapper{
  width: 90%;
  margin: 0 auto;
  max-width: 80rem;
}

.cols{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.col{
  width: calc(25% - 2rem);
  margin: 1rem;
  cursor: pointer;
}

.container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.front,
.back{
  background-size: cover;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
  border-radius: 10px;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  text-align: center;
  min-height: 280px;
  height: auto;
  border-radius: 10px;
  color: #fff;
  font-size: 1.5rem;
}

.back{
  background: #cedce7;
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
}

.front:after{
  position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .6;
    background-color: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}
.container:hover .front,
.container:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}

.container .back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.container:hover .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.front .inner p{
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}

@media screen and (max-width: 64rem){
  .col{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .col{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .col{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}

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

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"] {
  display: block;
  padding: 0 17px;
  width: 80%;
  margin: 0 auto;
  height: 45px;
  line-height: 45px;
  font: 600 18px 'Roboto', sans-serif;
  color: #000;
  background: transparent;
  border: 1px solid rgba(0,0,0,.11);
  border-radius: 3px;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
::-webkit-input-placeholder {
  opacity: 1;
  font-weight: 300;
  color: #393939;
}
::-moz-placeholder {
  opacity: 1;
  font-weight: 300;
  color: #393939;
}
:-moz-placeholder {
  opacity: 1;
  font-weight: 300;
  color: #393939;
}
:-ms-input-placeholder {
  opacity: 1;
  font-weight: 300;
  color: #393939;
}
.some-form {
  width: 40%;
  margin: 18px auto;
}
.formnew {
  padding: 10px;
  background: #f7fafb;
  color: #000;
  border-radius: 3px;
  -webkit-box-shadow: 0 39px 57px rgba(0,0,0,.19);
  -moz-box-shadow: 0 39px 57px rgba(0,0,0,.19);
  box-shadow: 0 39px 57px rgba(0,0,0,.19);
}
.some-form__header {
  margin-bottom: 41px;
  padding-top: 12px;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.2px;
  text-align: center;
}
.some-form__line {
  display: block;
  position: relative;
  margin-bottom: 15px;
}
.some-form__line-required input[type="text"],
.some-form__line-required input[type="tel"],
.some-form__line-required input[type="email"],
.some-form__line-required input[type="password"] {
  border-color: #f45a57;
}
.some-form__line-required .some-form__hint {
  opacity: 1;
  z-index: auto;
}
.some-form__hint {
  z-index: -1;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: -6px;
  padding: 0 12px;
  width: 100%;
  background: #f45a57;
  color: #fff;
  font-size: 12px;
  line-height: 1.333333;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.buttonnew {
  display: inline-block;
  padding: 14px 15px 16px;
  text-align: center;
  font-weight: 600;
  line-height: 1;
  background: #19b5ca;
  color: #fff;
  border: 2px solid #19b5ca;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 20px 43px rgba(18,159,178,.35);
  -moz-box-shadow: 0 20px 43px rgba(18,159,178,.35);
  box-shadow: 0 20px 43px rgba(18,159,178,.35);
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
 cursor: pointer;
}
.buttonnew:hover {
  background: #0e9aad;
  border-color: #0e9aad;
cursor: pointer;
}
.buttonnew:wide {
  width: 100%;
cursor: pointer;
}
.buttonnew:submit {
  font-size: 19px;
cursor: pointer;
}

@media (max-width: 1300px) {
  .some-form {
    width: 40%;
  }
}
@media (max-width: 1000px) {
  .some-form {
    width: 50%;
  }
}
@media (max-width: 700px) {
  .some-form {
    width: 60%;
  }
}
@media (max-width: 400px) {
  .some-form {
    width: 90%;
  }
}

.containerbar {
  position: relative;
  margin-left: 10%;
}
.steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 90%;
}
.step {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #ACACA6;
  border-radius: 50%;
  cursor: pointer;
  transition: background 1s;
}
.step.selected {
  border: 2px solid #4B81BD;   
}
.step.completed {
  border: 2px solid #4B81BD;
  background: teal; 
}
.progress {
  position: absolute;
  width: 90%;
  height: 50%;
  border-bottom: 2px solid #ACACA6;
  z-index: -1;
}
.percent {
  position: absolute;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #4B81BD;
  z-index: 1;
  transition: width 1s;
}

.boxoption {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.boxoption select {
  background-color: #0563af;
  color: white;
  padding: 12px;
  width: 75%;
  border: none;
  font-size: 20px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  -webkit-appearance: button;
  appearance: button;
  outline: none;
cursor: pointer;
}

.boxoption:before {
  content: "\f13a";
  font-family: FontAwesome;
  position: relative;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  text-align: center;
  font-size: 28px;
  line-height: 45px;
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
cursor: pointer;
}

.boxoption:hover:before {
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.2);
}

.boxoption select option {
  padding: 30px;
}