/* -----  google Font  -----*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');

body {
 margin: 0;
 padding: 0;
 font-family: Roboto, sans-serif;
 background-image: url("../img/molekula.jpg");
 -webkit-background-size: cover;
 background-size: cover;
}

/* -----  Выравнивание по середине  -----*/
.lm-wrapper {
 display: flex;
 height: 100vh;
 justify-content: center;
 align-items: center;
}

.lm-form {
 background-color: rgba(255, 255, 255, 0.2);
 padding: 10px;
 border-radius: 10px;
}
.lm-form a {
 text-decoration: none;
 transition: .5s;
 color: #298cad;
}
.lm-form a:hover {
 color: #36d2ff;
}
.lm-form ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
.lm-form input {
 display: block;
 width: 100%;
}
.tab-form {
 background-color: #fff;
 display: none;
 padding: 30px 20px 20px;
 border-radius: 0px 5px 5px 5px;
}
.tab-form.active,
#tab-1:checked ~ #form-1,
#tab-2:checked ~ #form-2 {
 display: block;
}
label.tab {
 color: #ffffff;
 font-weight: 600;
 padding: 15px;
 display: inline-block;
 border-radius: 5px 5px 0 0;
 margin-bottom: -1px;
 cursor: pointer;
}
label.tab.active,
input[name="tabs"]:checked + label {
 background-color: #fff;
 color: #1d5f75;
}
input[name="tabs"] {
 display: none;
}

/* Иконки во вкладках */
.tab::before {
 content: '\f090';
 font-family: 'FontAwesome', sans-serif;
 font-size: 24px;
 margin-right: 11px;
 font-weight: normal;
}
.tab[for*='2']::before {
 content: '\f234';
}

/* Формы */
.input {
 font-size: 16px;
 border: 2px solid #e9eaea;
 padding: 12px 14px;
 box-sizing: border-box;
 margin-bottom: 22px;
 color: #1e8da6;
 outline: none;
}

::-webkit-input-placeholder {color:#c4c9c9;}/* webkit */
::-moz-placeholder          {color:#298cad;}/* Firefox 19+ */
:-moz-placeholder           {color:#298cad;}/* Firefox 18- */
:-ms-input-placeholder      {color:#298cad;}/* IE */

/* Анимация иконок */
.social {
 display: flex;
 justify-content: space-between;
 font-size: 24px;
}
.social a {
 width: 40px;
 height: 40px;
 display: block;
 line-height: 40px;
 text-align: center;
 position: relative;
}
.social li a::before,
.social li a::after {
 content: '';
 position: absolute;
 background: #2fbae1;
 width: 100%;
 height: 1px;
 left: 0;
 transition: transform .5s;
 transform: scaleY(0);
}
.social li a::before {
 transform-origin: right;
}
.social li a::after {
 transform-origin: left;
}
.social li a:hover::before {
 transform: scaleX(0);
 transform-origin: left;
}
.social li a:hover::after {
 transform: scaleX(0);
 transform-origin: right;
}

.social li a div::before,
.social li a div::after {
 content: '';
 position: absolute;
 background: #2fbae1;
 width: 1px;
 height: 100%;
 transition: transform .5s;
 transform: scaleY(0);
}
.social li a div::before {
 left: 0;
 transform-origin: bottom;
}
.social li a div::after {
 right: 0;
 transform-origin: top;
}
.social li a:hover div::before {
 transform: scaleY(1);
 transform-origin: top;
}
.social li a:hover div::after {
 transform: scaleY(1);
 transform-origin: bottom;
}







.social + a {
 margin-top: 10px;
 display: block;
 font-size: 12px;
 text-align: center;
}


/* Плавающий текст */
.box-input {
 position: relative;
}
.box-input input {
 border: none;
 border-bottom: 2px solid #e9eaea;
 padding: 10px 0;
}
.box-input label {
 position: absolute;
 top: 0;
 left: 0;
 padding-top: 10px;
 color: #c4c9c9;
 transition: .5s;
 pointer-events: none;
}
.box-input input:focus ~ label,
.box-input input:valid ~ label {
 top: -20px;
 font-size: 12px;
 color: #33d3fe;
}

/*!* Эффект кнопки *!*/
/*a.button {*/
/* background: #298cad;*/
/* color: #ffffff;*/
/* font-size: 18px;*/
/* text-transform: uppercase;*/
/* display: block;*/
/* text-align: center;*/
/* line-height: 46px;*/
/* margin-top: 30px;*/
/* margin-bottom: 10px;*/
/* position: relative;*/
/* z-index: 1;*/
/* overflow: hidden;*/
/* border-bottom: 4px solid #36d2ff;*/
/*}*/
/*a.button:hover {*/
/* color: #ffffff;*/
/*}*/

/* Эффект кнопки */
input.button {
 background: #298cad;
 color: #ffffff;
 font-size: 18px;
 text-transform: uppercase;
 display: block;
 text-align: center;
 line-height: 46px;
 margin-top: 30px;
 margin-bottom: 10px;
 position: relative;
 z-index: 1;
 overflow: hidden;
 border-bottom: 4px solid #36d2ff;
 cursor: pointer;
}
input.button:hover {
 color: #ffffff;
}

.button::before, .button::after {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 background: #27bfdc;
 position: absolute;
 top: 0;
 left: -100%;
 transition: .3s;
 z-index: -1;
}
.button::after {
 background: #36d2ff;
 top: 100%;
 left: 0;
 transition-delay: .2s;
}
.button:hover::before {
 left: 0;
}
.button:hover::after {
 top: 0;
}

/* Анимированный чекбокс */
.recover {
 margin-top: 15px;
 font-size: 12px;
}
label[for='ckbox'] {
 cursor: pointer;
 padding-left: 35px;
 width: 250px;
 display: block;
 position: relative;
}
label[for='ckbox']::before {
 content: '';
 position: absolute;
 border: 2px solid #c4c9c9;
 width: 18px;
 height: 18px;
 top: 0;
 left: 0;
 border-radius: 3px;
 transition: .2s;
}
#ckbox:checked + label::before {
 border-top: 2px solid transparent;
 border-left: 2px solid transparent;
 border-right: 2px solid #408cc2;
 border-bottom: 2px solid #408cc2;
 transform: rotate(40deg);
 width: 12px;
 height: 22px;
 transform-origin: 100% 100%;
 top: -4px;
 left: -5px;
}
#ckbox:not(:checked),
#ckbox:checked {
 display: none;
}


.del {
 display: none;
}