body{font-family: 'Rubik', sans-serif;}
:root{--white:#fff;--gray:#999;--lightgray:#f5f5f5;--popular:#ffdd40;--starter:#0274c4;--essential:#ff631b;--professional:#11881e}
.fg .heading{padding:1rem;color:var(--white);font-size: 24px;display: flex;align-items: center;justify-content: center;}
.fg [class*="col"] {padding-left:0;padding-right:0}
.fg .varyok .ust{text-align: center;position: sticky;top:50px;z-index: 999;margin-bottom: 62px;}
.fg .varyok:nth-child(2) .heading{background:var(--starter);border-left:1px solid var(--lightgray);border-left:unset}
.fg .varyok:nth-child(3) .heading{background:var(--essential);border-left:1px solid var(--lightgray)}
.fg .varyok:nth-child(4) .heading{background:var(--professional);border-left:1px solid var(--lightgray)}
.fg .varyok:nth-child(5) .heading{background: #bb2124;border-left:1px solid var(--lightgray)}
.fg .info{position:relative;padding:1.5rem 0;border-left:1px solid var(--lightgray)}
.fg .varyok:nth-child(2) .info{background: #0384ce;border-left: unset;}
.fg .varyok:nth-child(3) .info{background: #ff7b3f;}
.fg .varyok:nth-child(4) .info{background: #22BB33;}
.fg .varyok:nth-child(5) .info{background: #ce3f42;}
.fg  button{display:inline-block;padding:8px 20px;margin-top:10px;transition:all .2s}
.fg .varyok:nth-child(2) button{color:var(--white);background:var(--starter)}
.fg .varyok:nth-child(2) button:hover{border:1px solid var(--white)}
.fg .varyok:nth-child(3) button{color:var(--white);background:var(--essential)}
.fg .varyok:nth-child(3) button:hover{border:1px solid var(--white)}
.fg .varyok:nth-child(4) button{color:var(--white);border:1px solid var(--professional);background:var(--professional)}
.fg .varyok:nth-child(4) button:hover{color:var(--white);}
.fg .varyok:nth-child(5) button{background: #274894;color:#fff}
.fg .varyok:nth-child(5) button:hover{border:1px solid var(--white)}
.fg .varyok button:hover{color:var(--white)}
.fg .ust .info{position:relative;padding:1.5rem 0;border-left:1px solid var(--lightgray)}
.fg .ust .popular{position:absolute;top:10px;right:0;font-size:15px;background:#5cb85c;color:#fff;padding:4px 8px;border-radius:2px;box-shadow: 3px 3px 6px #0006;}
.fg .ust .amount{font-size: 32px;}
.fg .ust .amount span{display:block;transform:translateY(-8px)}
.fg .ust .amount{color:var(--white)}
.fg  .billing-msg, .amount span{font-weight:400;font-size: 18px;color: #fff;}
.ozellikler .ust{opacity:0}
.fg .row {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display:flex;flex-wrap: wrap;}
.fg .row > [class*='col-'] {display: flex;flex-direction: column;}
.fg .column{text-align: center;font-size:14px;color: #737E86;height: 60px;display: flex;align-items: center;justify-content: center;font-weight:400;}
.fg .gelismis{font-size: 24px;font-weight:500;color: #444444;justify-content: flex-start;height:72px; margin-top:19px;}
.fg .ozellikler .column{justify-content: space-between;padding: 0 30px;}
.fg .boxshadow{box-shadow: 0 15px 30px 0 rgba(0,0,0,.15);z-index: 99;position: relative;}
.fg .boxshadow-s{box-shadow: 0 5px 20px 0 rgba(0,0,0,.15);z-index: 99;position: relative}
.fg .varyok:hover{transition: box-shadow .25s ease;box-shadow: 0 15px 30px 0 rgba(0,0,0,.15);z-index: 999;position: relative;}
.fg button{background:none;border:none;cursor:pointer}
.fg h1{font-size:2.5rem}
.plan{font-size: 32px;color: #5cb85c;}
.fg .fa-times{font-size: 16px;color:#ff5471;}
.fg .fa-check{font-size: 16px;color:#5cb85c;}
.fg .fa-question-circle{font-size:20px}
.fg b{font-weight: 700!important;font-size: 20px!important;}
.masaustundeGizle{background: #933679;width:100%;border-bottom:1px solid #fff}
.masaustundeGizle .info{border-left:unset!important}
.tooltip > .tooltip-inner {background-color: #333;width:450px;max-width:100%;font-size:16px}
i.fa.fa-check::after,i.fa.fa-times::after {content: '';height: 30px;width: 30px;border-radius: 100%;background: #fff;display: block;margin-top: -24px;}
.col-md-2.col-sm-12.col-xs-12.varyok {background: #f6f6f6;}
.fg .billing-msg2, .amount span {
    font-weight: 400;
    font-size: 14px;
    color: #fff;
}
@media screen and (min-width: 780px) {
.fg section:nth-child(1),section:nth-child(3){padding:0}
.fg section:nth-child(1){height:70vh}
.fg section:nth-child(3){height:100vh}

}
@media(max-width:992px){
    .fg .mobildeGizle{display:none!important}
    span.mobilOzellik.masaustundeGizle i {
      margin-left: 15px;
  }
    .fg .ust{display: flex;}
    .fg .varyok > div:not(.ust){display:none;height: 70px;justify-content: center;align-items: center;padding: 0;}
    .fg .heading {flex: 2;}
    .fg .ust .info {flex: 1;}
    .fg .masaustundeGizle {flex: 1;font-size: 22px;display:flex;justify-content: center;align-items: center;border:unset}
    .fg .masaustundeGizle i.fa-plus {color:#fff}
    .fg .masaustundeGizle .fa-chevron-down {margin:0 10px}
    .fg .varyok:nth-child(2) .masaustundeGizle{background:var(--starter);border-left:unset}
    .fg .varyok:nth-child(3) .masaustundeGizle{background:var(--essential);}
    .fg .varyok:nth-child(4) .masaustundeGizle{background:var(--professional);}
    .fg .varyok:nth-child(5) .masaustundeGizle{background: #b82023;}
    .fg .ust .info{border:unset}
    .fg .mobilOzellik{margin-bottom:5px;font-weight: 700;background: transparent!important;font-size: 14px;}
    .fg button{display:block;width:100%;padding: 8px 0px;flex: 1;margin-top: 0px;}
    .fg .varyok .heading{border-left:unset!important}
    .fg .column:nth-child(2n+2) {background: #f6f6f6;}
}
@media(max-width:640px){.fg .heading{flex:1}.fg .ust .info{flex:2}}
@media(max-width:640px){.fg .heading{flex:2}.fg .ust .info{flex:2}}
@media(min-width:992px){.masaustundeGizle{display:none!important}.fg .column:nth-child(2n+3) {background: #e3e3e3;}.fg .varyok > div:not(.ust){display:flex!important}.fg .column:nth-child(2n+2) {background: #f6f6f6;}} 


.fg  a{display:inline-block;padding:8px 20px;margin-top:10px;transition:all .2s}
.fg .varyok:nth-child(2) a{color:var(--white);background:var(--starter)}
.fg .varyok:nth-child(2) a:hover{border:1px solid var(--white)}
.fg .varyok:nth-child(3) a{color:var(--white);background:var(--essential)}
.fg .varyok:nth-child(3) a:hover{border:1px solid var(--white)}
.fg .varyok:nth-child(4) a{color:var(--white);border:1px solid var(--professional);background:var(--professional)}
.fg .varyok:nth-child(4) a:hover{color:var(--white);}
.fg .varyok:nth-child(5) a{background: #274894;color:#fff}
.fg .varyok:nth-child(5) a:hover{border:1px solid var(--white)}
.fg .varyok a:hover{color:var(--white)}

.fg a{background:none;border:none;cursor:pointer}
@media(max-width:992px){
 .fg a{display:block;width:50%;padding: 8px 0px;margin-top: 0px;}
	}