@font-face {
font-family: 'Inter';
src: url(//journal.timepad.ru/wp-content/plugins/sub_form/fonts/InterRegular.eot);
src: url(//journal.timepad.ru/wp-content/plugins/sub_form/fonts/InterRegular.eot) format('embedded-opentype'),
url(//journal.timepad.ru/wp-content/plugins/sub_form/fonts/InterRegular.woff2) format('woff2'),
url(//journal.timepad.ru/wp-content/plugins/sub_form/fonts/InterRegular.woff) format('woff'),
url(//journal.timepad.ru/wp-content/plugins/sub_form/fonts/InterRegular.ttf) format('truetype'),
url(//journal.timepad.ru/wp-content/plugins/sub_form/fonts/InterRegular.svg#InterRegular) format('svg');
}
#subform{
display:flex;
position:relative;
width:100%;
max-width:900px;
min-height:360px;
bor-sizing:border-box;
background-color:#B1BFFE;
border-radius:20px;
padding:50px;
align-items:center;
justify-content:space-between;
font-family:'Inter', sans-serif;
line-height:100%;
font-weight:normal;
color:#382631;
}
#subform *{
font-family:'Inter', sans-serif;
line-height:100%;
font-weight:normal;
color:#382631;
box-sizing:border-box;
appearance:none;
outline:none;
border:0;
margin:0;
padding:0;
line-height:normal;
}
#subform a{
text-decoration:underline;
}
#subform a:hover{
color:#382631;
text-decoration:none;
}
#subform .form{
width:100%;
max-width:370px;
margin-right:20px;
}
#subform .form h5{
padding:0 0 12px 0;
margin:0;
font-size:36px;
}
#subform .form p{
padding:0 0 32px 0;
margin:0;
font-size:20px;
}
#subform .form > div{
padding-right:30px;
position:relative;
}
#subform .form > div #iagreesub{
width:0;
left:0;
top:40px;
}
#subform .form input{
border:0;
border-bottom:2px solid #382631;
width:100%;
outline:none;
font-size:20px;
padding:4px;
background-color:transparent;
}
#subform .form input::placeholder{
color:#8d91c1;
}
#subform .form input.err{
background-color:#c199cb;
}
#subform .form #iagreesub{
position:absolute;
z-index:-1;
opacity:0;
}
#subform .form label{
display:block;
font-size:12px;
line-height:120%;
margin-top:14px;
}
#subform .form #iagreesub+label span{
display:inline-block;
width:14px;
height:14px;
border:1px solid #382631;
border-radius:4px;
margin-right:6px;
position:relative;
cursor:pointer;
vertical-align:sub;
}
#subform .form #iagreesub+label.err span{
border-color:#ff0000;
}
#subform .form #iagreesub+label span::before{
content:'';
display:block;
position:absolute;
left:1px;
top:1px;
right:1px;
bottom:1px;
width:10px;
height:10px;
border:0;
border-radius:3px;
background-color:transparent;
}
#subform .form #iagreesub:checked+label span::before{
background-color:#382631;
}
#subform .form button{
height:46px;
border-radius:6px;
background-color:#382631;
border:0;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
width:100%;
cursor:pointer;
margin-top:24px;
}
#subform .preview{
width:100%;
display:flex;
align-items:center;
justify-content:end;
position:relative;
}
#subform .preview img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
border:0;
}
#subform .preview > div{
display:none;
position:absolute;
width:230px;
max-width:100%;
border:2px solid #382631;
border-radius:16px;
padding:25px;
background-color:#fff;
text-align:center;
left:50%;
top:50%;
margin:-115px 0 0 -115px;
font-size:30px;
line-height:106%;
}
#subform .preview > div span{
display:block;
margin:0 auto;
width:48px;
height:48px;
cursor:pointer;
margin-bottom:10px;
background:url(//journal.timepad.ru/wp-content/plugins/sub_form/img/subform3.svg) center center no-repeat;
}
@media only screen and (max-width: 819px) {
#subform{
flex-wrap:wrap;
padding:30px;
}
#subform .form{
order:2;
margin-right:0;
max-width:580px;
min-height:270px;
display:flex;
flex-direction:column;
justify-content:center;
}
#subform .form > div{
padding-right:0;
}
#subform .preview{
order:1;
padding-bottom:10px;
justify-content:start;
}
#subform .preview img{
height:80px;
}
#subform .preview > div{
left:auto;
right:0;
top:0;
margin:0;
}
}