/*----------------------- Main ------------------------*/ body background-color: $main-bg font-family: $font-reg .sidebar margin: 0 auto margin-top: 2em margin-bottom: 2em width: 840px background-color: $left-color background: linear-gradient(to bottom right,#50a699 ,$left-color) background: -webkit-linear-gradient(to bottom right,#50a699 ,$left-color) background: -o-linear-gradient(to bottom right,#50a699 ,$left-color) background: -ms-linear-gradient(to bottom right,#50a699 ,$left-color) background: linear-gradient(to bottom right,#50a699 ,$left-color) @media screen and (max-width: 991px) width: 100% margin-top: 0 margin-bottom: 0 &-left width: 380px float: left @media screen and (max-width: 991px) width: 100% float: none padding: 1em 0 .brand text-align: center position: relative margin-top: 60px @media screen and (max-width: 991px) margin-top: 0 width: 30% display: inline-block @media screen and (max-width: 767px) width: 100% > a display: block color: #fff position: relative @media screen and (max-width: 991px) padding-left: .5em @media screen and (max-width: 767px) padding-left: 0 &-title text-align: left vertical-align: top display: inline-block h2 font-size: 30px font-family: $font-bold margin-bottom: 3px h4 font-family: $font-semi font-size: 15px line-height: 18px margin: 0 text-transform: uppercase &-logo width: 45px margin-top: 6px vertical-align: top display: inline-block &-descr margin-top: 120px margin-bottom: 20px @media screen and (max-width: 991px) display: none h4 color: #fff text-align: center font-family: $font-bold line-height: 20px text-transform: uppercase font-size: 16px &-services padding: 0 text-align: center @media screen and (max-width: 991px) width: 69% display: inline-block @media screen and (max-width: 767px) display: none li display: inline-block list-style: none width: 30% text-align: center vertical-align: top color: #fff font-size: 13px font-family: $font-reg min-height: 100px @media screen and (max-width: 991px) min-height: 80px width: 15% font-size: 12px img width: 45px height: 60px display: block margin: 0 auto @media screen and (max-width: 991px) height: 50px width: 40px margin-bottom: .5em &:after vertical-align: top &-right margin-left: 380px width: auto background-color: #fff padding: 2.5em padding-bottom: 1em @media screen and (max-width: 991px) margin-left: 0 @media screen and (max-width: 767px) padding: 1.5em a color: $link-color font-family: $font-reg border-bottom: 1px solid transparent -webkit-transition: .3s ease all -moz-transition: .3s ease all -ms-transition: .3s ease all -o-transition: .3s ease all transition: .3s ease all font-size: 11px &:hover border-bottom: 1px solid $link-color-hover color: $link-color-hover -webkit-transition: .3s ease all -moz-transition: .3s ease all -ms-transition: .3s ease all -o-transition: .3s ease all transition: .3s ease all .form-group display: block position: relative margin-bottom: 1.5em &:last-child margin-bottom: 0 select font-style: italic position: relative ~ b background: url('../img/arrow.png') background-repeat: no-repeat background-position: center center -webkit-background-size: contain background-size: contain display: block position: absolute right: 6px top: 11px background-color: $input-bg content: '' width: 16px height: 16px z-index: 10 -webkit-transition: .4s ease all -moz-transition: .4s ease all -ms-transition: .4s ease all -o-transition: .4s ease all transition: .4s ease all option padding: 0 select.in ~ b -webkit-transition: .4s ease all -moz-transition: .4s ease all -ms-transition: .4s ease all -o-transition: .4s ease all transition: .4s ease all -webkit-transform: rotate(180deg) -moz-transform: rotate(180deg) -ms-transform: rotate(180deg) -o-transform: rotate(180deg) transform: rotate(180deg) input, select font-size: 12px -webkit-box-shadow: none -moz-box-shadow: none box-shadow: none font-family: $font-reg-i font-style: italic!important height: 38px background-color: $input-bg border: 0 color: $input-color input:not([name='password']).ng-valid-confirm , input:not([name='password']).ng-valid.ng-valid-minlength background-image: url('../img/confirm.png') background-repeat: no-repeat -webkit-background-size: 16px 16px background-size: 16px 16px background-position: 97% 50% input border: 2px solid $input-bg font-style: normal color: #000 font-family: $font-semi input.ng-invalid-required.ng-invalid-required.ng-touched border: 2px solid $alert-danger-color .form-group.check input.form-control margin-bottom: .5em .form-group.inline-block input @media screen and (max-width: 767px) margin-bottom: 1.5em .social &-services list-style: none margin-bottom: 1em @media screen and (max-width: 991px) text-align: center li width: 46px height: 46px margin-right: 5px display: inline-block -webkit-transition: .3s ease all -moz-transition: .3s ease all -ms-transition: .3s ease all -o-transition: .3s ease all transition: .3s ease all position: relative @media screen and (max-width: 767px) width: 32px height: 32px margin-right: 3px a position: absolute top: 0 right: 0 bottom: 0 left: 0 width: 100% height: 100% border-bottom: none -webkit-transition: .3s ease all -moz-transition: .3s ease all -ms-transition: .3s ease all -o-transition: .3s ease all transition: .3s ease all &:hover border-bottom: none &:hover a top: -5px -webkit-transition: .3s ease all -moz-transition: .3s ease all -ms-transition: .3s ease all -o-transition: .3s ease all transition: .3s ease all &:last-child margin-right: 0 &-icon &-facebook background-image: url('../img/social_share/facebook.svg') &-twitter background-image: url('../img/social_share/twitter.svg') &-linked background-image: url('../img/social_share/linkedin.svg') &-gplus background-image: url('../img/social_share/google-plus.svg') &-bankid background-image: url('../img/social_share/bankid.svg') &-ecp background-image: url('../img/social_share/etsp.svg') &-cartakiyv background-image: url('../img/social_share/kartka_kyanyna.svg')