
.gate-content .gate-main .form-buttons .form-alt-button,.gate-content .gate-main .form-buttons .form-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-drag: none;
    -moz-user-drag: none
}

.gate-content .gate-main .form-buttons .form-alt-button,.gate-content .gate-main .form-buttons .form-button,.gate-content .gate-main .form-items .form-item,.gate-content .gate-main .form-items .form-item .form-label,.gate-content .gate-main .form-options .form-link {
    -webkit-transition: .2s;
    transition: .2s
}

.sprite,.sprite-after:after,.sprite-before:before {
    background-image: url("../img/gate/sprite-2.svg")!important;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-color: transparent
}

.sprite-after:after,.sprite-before:before {
    content: "";
    display: inline-block
}

body,html {
    scroll-behavior: smooth
}

@-webkit-keyframes gate-appearance {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px)
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes gate-appearance {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px)
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.gate .logo-container .logo-wrapper {
    position: relative;
    z-index: 9999;
    padding: 30px 50px 10px;
    background: #fff
}

@media screen and (min-width: 900px) {
    .gate .logo-container .logo-wrapper {
        position:fixed;
        top: -5px;
        left: 0;
        width: 650px;
    }
}

.gate .logo-container .logo-wrapper .logo,.gate .logo-container .logo-wrapper .logo:before {
    width: 200px;
    height: 50px;
    overflow: hidden
}

.gate .logo-container .logo-wrapper .logo {
    position: relative;
    margin: 0 auto
}

@media screen and (min-width: 900px) {
    .gate .logo-container .logo-wrapper .logo {
        margin:0
    }
}

.gate .logo-container .logo-wrapper .logo:before {
    content: "";
    display: inline-block;
    position: relative;
    background-image: url("https://egitim.poyrazsarioglu.com/assets/images/logo/01.png");
    background-color: transparent;
    /* max-width: 99%; */
    /* max-height: 119%; */
}

.gate .logo-container .logo-wrapper .logo .brand-name {
    position: absolute;
    top: -100px;
    left: -100px;
    font-size: 14px;
    text-indent: -1000px
}

.gate-content .gate-main {
    margin: 0 auto;
    padding: 40px 20px;
    max-width: 500px
}

.gate-content .gate-main .gate-header-container .gate-header {
    margin-bottom: 35px;
    text-align: center
}

@media screen and (min-width: 500px) {
    .gate-content .gate-main .gate-header-container .gate-header {
        text-align:left
    }
}

.gate-content .gate-main .gate-header-container .gate-header h2,.gate-content .gate-main .gate-header-container .gate-header h3 {
    display: block
}

.gate-content .gate-main .gate-header-container .gate-header h2 {
    color: #f16126;
    font-size: 30px;
    line-height: 45px;
    font-weight: 600;
    -webkit-animation: gate-appearance .3s ease-out;
    animation: gate-appearance .3s ease-out
}

.gate-content .gate-main .gate-header-container .gate-header h3 {
    color: rgba(45,58,73,.6);
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    -webkit-animation: gate-appearance .5s ease-out;
    animation: gate-appearance .5s ease-out
}

.gate-content .gate-main .form-items {
    margin-bottom: 30px;
    -webkit-box-shadow: rgba(45,58,73,.05) 0 5px 10px;
    box-shadow: 0 5px 10px rgba(45,58,73,.05);
    border-radius: 5px;
    overflow: hidden;
    -webkit-animation: gate-appearance .6s ease-out;
    animation: gate-appearance .6s ease-out
}

.gate-content .gate-main .form-items .form-item {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid rgba(45,58,73,.3);
    border-bottom-color: transparent
}

.gate-content .gate-main .form-items .form-item:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

.gate-content .gate-main .form-items .form-item:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-color: rgba(45,58,73,.3)
}

.gate-content .gate-main .form-items .form-item .form-label {
    position: absolute;
    top: 9px;
    left: 20px;
    z-index: 99;
    display: block;
    color: rgba(45,58,73,.9);
    font-size: 18px
}

.gate-content .gate-main .form-items .form-item .form-input {
    display: block;
    margin: 0;
    padding: 30px 20px 20px;
    width: 100%;
    border: none;
    color: #f16126;
    font-size: 16px;
    font-weight: 600
}

.gate-content .gate-main .form-items .form-item:focus-within .form-label,.gate-content .gate-main .form-items .form-item[data-filled] .form-label {
    top: 9px;
    color: rgba(45,58,73,.5);
    font-size: 14px
}

.gate-content .gate-main .form-items .form-item:focus-within {
    border-color: #f16126;
    -webkit-box-shadow: inset #f16126 6px 0 0;
    box-shadow: inset 6px 0 0 #f16126
}

.gate-content .gate-main .form-items .form-item.form-item-error {
    border-color: #f12958
}

.gate-content .gate-main .form-items .form-item.form-item-error,.gate-content .gate-main .form-items .form-item.form-item-error[data-filled] {
    -webkit-box-shadow: inset #f12958 6px 0 0;
    box-shadow: inset 6px 0 0 #f12958
}

.gate-content .gate-main .form-items .form-item.form-item-error .form-label {
    color: rgba(241,41,88,.5)
}

.gate-content .gate-main .form-items .form-item.form-item-error .form-input {
    color: #f12958
}

.gate-content .gate-main .form-items .form-item input:-webkit-autofill,.gate-content .gate-main .form-items .form-item input:-webkit-autofill:focus textarea:-webkit-autofill,.gate-content .gate-main .form-items .form-item input:-webkit-autofill:hover,.gate-content .gate-main .form-items .form-item select:-webkit-autofill,.gate-content .gate-main .form-items .form-item select:-webkit-autofill:focus,.gate-content .gate-main .form-items .form-item select:-webkit-autofill:hover,.gate-content .gate-main .form-items .form-item textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus {
    border-color: transparent;
    -webkit-text-fill-color: #f16126;
    -webkit-box-shadow: inset 0 0 0 1000px hsla(0,0%,100%,.2)!important;
    box-shadow: inset 0 0 0 1000px hsla(0,0%,100%,.2)!important;
    -webkit-transition: background-color 5000s ease-in-out 0s!important;
    transition: background-color 5000s ease-in-out 0s!important
}

.gate-content .gate-main .form-options {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 3px;
    -webkit-animation: gate-appearance .8s ease-out;
    animation: gate-appearance .8s ease-out
}

.gate-content .gate-main .form-options .form-links {
    text-align: right
}

.gate-content .gate-main .form-options .form-link {
    color: rgba(45,58,73,.5);
    font-size: 17px;
    font-weight: 600
}

.gate-content .gate-main .form-options .form-link:hover {
    color: #f16126
}

.gate-content .gate-main .form-options .form-check-accept label a {
    text-decoration: underline
}

.gate-content .gate-main .form-buttons {
    margin-top: 20px;
    -webkit-animation: gate-appearance 1.1s ease-out;
    animation: gate-appearance 1.1s ease-out
}

@media screen and (min-width: 500px) {
    .gate-content .gate-main .form-buttons {
        display:-webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.gate-content .gate-main .form-buttons .form-alt-button,.gate-content .gate-main .form-buttons .form-button {
    margin: 0 0 20px;
    display: block;
    padding: 15px 25px;
    width: 100%;
    border-radius: 50px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 18px;
    min-width: 160px;
    text-align: center
}

.gate-content .gate-main .form-buttons .form-button {
    background: #f16126;
    color: #fff;
    -webkit-box-shadow: rgba(0,83,245,.3) 0 3px 20px;
    box-shadow: 0 3px 20px rgba(0,83,245,.3)
}

.gate-content .gate-main .form-buttons .form-button:hover {
    background: #1061ff
}

.gate-content .gate-main .form-buttons .form-button .form-button-loading {
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    overflow: hidden
}

.gate-content .gate-main .form-buttons .form-alt-button {
    background: transparent;
    border-color: rgba(45,58,73,.5);
    color: #2d3a49
}

.gate-content .gate-main .form-buttons .form-alt-button:hover {
    border-color: #f16126;
    color: #f16126
}

@media screen and (min-width: 500px) {
    .gate-content .gate-main .form-buttons .form-alt-button,.gate-content .gate-main .form-buttons .form-button {
        margin:0;
        display: inline-block;
        width: auto
    }

    .gate-content .gate-main .form-buttons .form-button {
        margin-right: 20px
    }
}

.gate-content .gate-main .form-contract-text {
    -webkit-animation: gate-appearance .9s ease-out;
    animation: gate-appearance .9s ease-out;
    color: rgba(45,58,73,.4);
    font-size: 15px
}

.gate-content .gate-main .form-contract-text a {
    text-decoration: underline
}

.gate-content .gate-main .form .form-item-error i {
    display: block;
    margin: 0 0 15px;
    color: #f12958;
    font-style: normal;
    font-weight: 700
}

.gate-content .gate-image {
    display: none
}

@media screen and (min-width: 420px) {
    .gate-content .gate-main {
        padding:80px 40px
    }
}

@media screen and (min-width: 700px) {
    .gate-content .gate-main {
        padding:120px 50px
    }
}

@media screen and (min-width: 900px) {
    .gate-content {
        display:-ms-grid;
        display: grid;
        -ms-grid-columns: 650px auto;
        grid-template-columns: 650px auto;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .gate-content .gate-main {
        margin: 0;
        padding: 80px 100px;
        max-width: none
    }

    .gate-content .gate-image {
        display: block;
        -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
        background: url("https://egitim.poyrazsarioglu.com/assets/log-bg.png") no-repeat;
        background-size: cover;
        height: 100%;
        min-height: 100vh;
        opacity: 0;
        -webkit-filter: blur(10px);
        filter: blur(10px);
        -webkit-transition: opacity .4s .5s,-webkit-filter .7s .4s;
        transition: opacity .4s .5s,-webkit-filter .7s .4s;
        transition: filter .7s .4s,opacity .4s .5s;
        transition: filter .7s .4s,opacity .4s .5s,-webkit-filter .7s .4s
    }

    .gate-content .gate-image.gate-image-loaded {
        opacity: 1;
        -webkit-filter: blur(0);
        filter: blur(0)
    }
}

.gate.gate-has-error .gate-header-container .gate-header h3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: rgba(241,41,88,.6)
}

.gate.gate-has-error .gate-header-container .gate-header h3:before {
    content: "";
    display: inline-block;
    position: relative;
    margin-right: 5px;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    overflow: hidden;
    background: #f12958
}

.gate.gate-has-success .gate-header-container .gate-header h2 {
    color: #23c197
}

.gate.gate-has-success .gate-header-container .gate-header h3 {
    color: #f16126
}
