@import url("Plugin.css");

figure#Logo {
    margin-bottom: 20px;
    margin-top: -10px;
}
#Header #HeaderTop {
    margin: 12px 0;
}
#Header #HeaderTop a {
    font-size: 14px !important;
    margin-right: 14px;
    color: #707790;
    font-family: 'Roboto';
    line-height: 15px !important;
}
#Header #HeaderTop a:hover {
    text-decoration: underline;
}
div#Search {
    position: relative;
}
div#Search input {
    width: 97%;
    height: 55px;
    line-height: 55px;
    border: none;
    background: #F4F4F5;
    border-radius: 90px;
    color: #707790;
    font-size: 14px;
    padding-left: 22px;
    padding-right: 60px;
    font-family: 'Open Sans';
    font-weight: 400;
}
#HeaderContact strong {
}
div#Search input::-webkit-input-placeholder {
  color: #707790;
}
div#Search button {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 100%;
    background: #E84242;
    position: absolute;
    top: 7px;
    right: 20px;
    cursor: pointer;
}
div#Search button svg {
    width: 16px;
}

div#Search button svg .cls-1 {    
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
}
#HeaderContact svg {
    width: 34px;
    height: 54px;
}
#HeaderContact svg .cls-1 {    
    stroke: #e84242;
}
#HeaderContact span {
    display: block;
    color: #707790;
    font-size: 12px;
    font-family: 'Roboto';
    line-height: 19px;
}
#HeaderContact strong a {
    font-family: 'Roboto';
    font-size: 25px;
    color: #E84242;
    text-decoration: none !important;
    line-height: 23px !important;
}
#HeaderContact strong a.entel {
    font-size: 20px;
}

#HeaderContact strong a.enmail {
    font-size: 20px;
}
#BasketIcon {
    width: 43px;
    height: 50px;
    display: block;
    float: left;
}
#BasketIcon svg .cls-1, #BasketIcon svg .cls-2 {
    fill: none;
    stroke: #8ec150;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}
#BasketIcon svg .cls-2 {
    stroke-linecap: round;
}
span#BasketCount {
    width: 25px;
    height: 25px;
    display: block;
    background: #8EC150;
    border-radius: 100%;
    position: absolute;
    text-align: center;
    line-height: 25px;
    color: white;
    right: 12px;
    box-shadow: 0px 3px 10px rgba(142, 193, 80, 0.65);
}
#HeaderNav {
    margin: 6px 0;
}
#HeaderNav a {
    color: #707790;
    font-size: 12px;
    font-family: 'Roboto';
    margin-left: 20px;
}
#HeaderNav a:hover,#HeaderNav a.Active {
    font-weight: 700;
}
#SearchList, #SonucYok {
    background: white;
    box-shadow: 0px 6px 26px rgba(0,0,0,.12);
    border-radius: 30px;
    margin-top: 10px;
    position: absolute;
    overflow: hidden;
    height: 333px;
}
#SonucYok strong {
    text-align: center;
    line-height: 333px;
    display: block;
    font-family: 'Roboto';
    color: #0b1742;
    font-size: 35px;
}
#SearchList ul li {
    padding: 10px 20px;
}
#SearchList ul li:hover {
    background: #F7F7F7;
}
#SearchList ul li figure {
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 100%;
    float: left;
}
#SearchList ul li span {
    color: #8C8C8B;
    font-size: 14px;
    font-family: 'Roboto';
    float: left;
    margin-left: 20px;
    line-height: 42px;
}
#SearchList a#AllList {
    background: #8EC150;
    color: white;
    font-size: 13px;
    font-family: 'Roboto';
    border-radius: 10px;
    display: block;
    margin: 0 auto;
    width: 164px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    margin-bottom: 20px;
}
#Nav {
    height: 55px;
    background: #71246ba3;
    text-align: center;
    position: relative;
}
#Nav a {
    display: block;
}
#Nav strong {
    display: inline-block;
    font-size: 14px;
    color: white;
    font-family: 'Roboto';
    position: relative;
    top: -24px;
    line-height: 55px;
}
#Nav figure {
    display: inline-block;
    margin: 13px 0px;
    margin-right: 6px;
} 
#Nav figure img {
    height: 30px;
    display: block;
} 
#Nav .Navs > div {
    display: block;
    height: 55px;
    overflow: hidden;
}
#Nav .Navs div#SiparisTakip {
    background: #23B4B4;
}
#Nav .Navs div#Client {
    background: #E84242;
}
#NavOpen .Open {
    position: absolute;
    width: 100%;
    display: block;
    background: #ffffff;
    left: 0;
    top: 55px;
    opacity: 0;
    height: 0;
    pointer-events: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    z-index: 99999;
}
nav#Nav.Stick {
    position: fixed;
    top: 0;
    z-index: 999999999;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#NavOpen .Open.Active {
    opacity: 1;
    height: 240px;
    pointer-events: auto;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#Nav #NavOpen .Open a {
    padding: 80px 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#Nav #NavOpen .Open a:hover {
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(241,242,244,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f2f4', GradientType=0 );
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#NavOpen .Open img {
    height: 50px;
    display: inline-block;
}
#Nav #NavOpen .Open strong {
    display: inline-block;
    color: #707790;
    width: 100%;
    top: 0;
    line-height: 30px;
}
#Nav .NavIcon {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin: 13px 0;
    margin-right: 8px;
}
#Nav .NavIcon svg {
    width: 100%;
    height: 100%;
    display: block;
}
#Nav div:nth-child(4) .NavIcon {
    width: 35px;
    height: 35px;
    margin: 10px 0px;
    margin-right: 6px;
}
#Nav .Navs > div.Active {
    background: white;
}

#Nav .Navs > div.Active strong {
    color: #0b1742;
}

#Nav .Navs > div.Active .nav-1 {
    stroke: #0b1742
}
#Nav .Navs > div.Active .nav2-1,#Nav .Navs > div.Active .nav-5  {
    fill: #0b1742
}
#Nav .Navs > div.Active .nav2-2 {
    stroke: #0b1742
}
div#SiparisTakip.Active, #Client.Active {
    position: relative;
    z-index: 9999;
}
div#SiparisForm {
    position: absolute;
    width: 100%;
    display: block;
    background: #23b4b4;
    left: 0;
    top: 55px;
    opacity: 0;
    pointer-events: none;
    height: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    z-index: 999999999;
}
div#SiparisForm.Active {
    opacity: 1;
    pointer-events: auto;
    height: 240px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.PopUp .PopUpBg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(11, 23, 66, 0.80);
    display: none;
    z-index: 9999999;
}
.PopUp .PopUpBg.Active {
    display: block;
}
div#SiparisForm strong {
    display: block;
    text-align: center;
    margin: 30px 0;
    color: white;
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: 700;
}
.Input {
    margin: 0 auto;
    height: 0;
    pointer-events: none;
    opacity: 0;
}
.Input.Active {
    height: auto;
    pointer-events: auto;
    opacity: 1;
}
.Input input[type="text"],.Input input[type="password"] {
    width: 48%;
    background: transparent;
    border: none;
    border-bottom: 1px solid white;
    padding: 0 10px 15px 10px;
    color: white;
    text-align: center;
    display: block;
    font-family: 'Roboto';
    font-size: 14px;
}
.Input a.sifremiUnuttum {
    color:  white;
    display: inline-block !important;
    float:  right;
    margin: 6px 0;
}
.Input input::-webkit-input-placeholder {
  color: #fff;
    font-family: 'Roboto';
    font-size: 14px;
}
.Input input[type="submit"] {
    position: absolute;
    top: 170px;
    border: none;
    background: url(../Images/Arrow.svg) no-repeat;
    width: 20px;
    padding: 0;
    left: 50%;
    cursor: pointer;
    margin-left: -10px;
}
div#SiparisSonuc {
    opacity: 0;
    pointer-events: none;
    height: 0
}
div#SiparisSonuc.Active {
    opacity: 1;
    pointer-events: auto;
    height: auto;
}
div#SiparisSonuc p {
    display: block;
    text-align: center;
    color: white;
    font-size: 14px;
    font-family: 'Roboto';
    margin: 0;
}
div#SiparisSonuc a {
    width: 164px;
    height: 45px;
    display: block;
    margin: 0 auto;
    border: 1px solid white;
    line-height: 45px;
    text-align: center;
    color: white;
    font-size: 14px;
    font-family: 'Roboto';
    border-radius: 10px;
    margin-top: 30px;
}

div#LoginRegister {
    position: absolute;
    width: 100%;
    display: block;
    background: #e84242;
    left: 0;
    top: 55px;
    opacity: 0;
    pointer-events: none;
    height: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    z-index: 99999999;
}
div#LoginRegister.Active {
    opacity: 1;
    pointer-events: auto;
    height: 240px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#LoginRegister > div {
    margin: 0 auto;
}
div#LoginRegister #LoginRegisterButton img {
    float: left;
    width: 51px;
    height: 41px;
    display: block;
    margin-right: 10px;
}

div#LoginRegister #LoginRegisterButton strong {
    font-family: 'Roboto';
    font-weight: 400;
    line-height: 50px;
    color: white;
    font-size: 20px;
    top: 0;
}

div#LoginRegister div#Login, div#LoginRegister div#Register, div#LoginRegister div.Cikis, div#LoginRegister div.Hesabim {
    margin: 95px 0;
    cursor: pointer;
}

div#LogIn,#SingUp {
    position: absolute;
    width: 100%;
    display: block;
    background: #e84242;
    left: 0;
    top: 55px;
    opacity: 0;
    pointer-events: none;
    height: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    z-index: 99999999;
}
div#LogIn.Active,#SingUp.Active {
    opacity: 1;
    pointer-events: auto;
    height: 240px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#SingUp .Input input[type="text"], #SingUp .Input input[type="password"] {
    margin-bottom: 20px;
}
#SingUp .Input input[type="submit"] {
    top: 230px;
}
#SingUp.Active {
    height: 300px;
}
div#LogIn img,#SingUp img {
    display: block;
    width: 51px;
    height: 41px;
    margin: 0 auto;
    margin-top: 30px;
}
div#LogIn strong,#SingUp strong {
    font-family: 'Roboto';
    font-weight: 400;
    line-height: 50px;
    color: white;
    font-size: 20px;
    display: block;
    width: 100%;
    text-align: center;
    top: 0;
}
#LogIn .Input input[type="submit"] {
    top: 180px;
}
#SingUp.Input input[type="submit"] {
    top: 200px;
}
#ContentTop #ContentTopBars{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2cb5ac+0,bac000+100 */
    background: rgb(44,181,172); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(44,181,172,1) 0%, rgba(186,192,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(44,181,172,1) 0%,rgba(186,192,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(44,181,172,1) 0%,rgba(186,192,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2cb5ac', endColorstr='#bac000',GradientType=1 ); /* IE6-9 */
    border-radius: 10px;
}
div#ContentTopBars svg {
    height: 38px;
    display: inline-block;
    margin: 15.5px 0;
    margin-right: 9px;
}

div#ContentTopBars strong {
    display: inline-block;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Roboto';
    line-height: 17px;
    position: relative;
    top: -18px;
}
#SearchFilter {
    height: 73px;
    background: #8EC150;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
}
#SearchFilter .Map {
    height: 37px;
    float: left;
    display: block;
    width: 37px;
}
#SearchFilter p {
    float: left;
    margin: 11px 0 11px 15px;
    display: block;
    color: white;
    font-size: 16px;
    font-family: 'Roboto';
}
#SearchFilter span.Arrow {
    width: 16px;
    height: 6px;
    margin: 13px 0;
}
#SearchFilter #Filter {
    background: white;
    border-radius: 10px;
    margin-top: 15px;
    overflow: hidden;
    height: 425px;
    display: none;
    position: absolute;
    z-index: 9999;
}
div#Arama {
    position: relative;
}
div#Arama input {
    width: 97%;
    height: 55px;
    line-height: 55px;
    border: none;
    border-radius: 90px;
    color: #707790;
    font-size: 14px;
    padding-left: 22px;
    padding-right: 60px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefef+0,f7f7f7+100 */
    background: rgb(239,239,239); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(239,239,239,1) 0%,rgba(247,247,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
}
div#Arama input::-webkit-input-placeholder {
  color: #D6D6D6;
}
div#Arama button {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 100%;
    background: #8EC150;
    position: absolute;
    top: 7px;
    right: 20px;
    cursor: pointer;
}
div#Arama button svg {
    width: 16px;
}

div#Arama button svg .cls-1 {    
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
}

#SearchFilter #Filter strong {
    display: block;
    text-align: center;
    margin: 20px 0;
    font-size: 20px;
    font-family: 'Roboto';
    color: #8EC150;
}
#SearchFilter #Filter ul li {
    text-align: center;
    display: block;
}

#SearchFilter #Filter ul li a {
    padding: 10px 20px;
    display: inline-block;
    border-radius: 6px;
    color: #8C8C8B;
    font-family: 'Roboto';
}

#SearchFilter #Filter ul li a:hover {
    background: #e6e6e6;
}
#SearchFilter #Filter ul {
    height: 276px;
    display: block;
    overflow: scroll;
    padding-bottom: 50px;
}
#SearchFilter #Filter:before {
    content: '';
    width: 100%;
    height: 55px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 78%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(78%, rgba(255,255,255,0.96)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 78%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 78%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 78%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 78%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
}
#SearchFilter #Filter.Active {
    display: block;
}
.Z-Index {
    position: relative;
    z-index: 999999999;
}
.SearchPopUp {
    position: fixed;
    z-index: 99999;
    width: 100%;
    top: 0;
    left: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.SearchPopUp.Active {
    height: 100%;
    opacity: 1;
    pointer-events: auto;
}
.SearchPopUp .PopUpArrow {
    width: 4%;
    display: block;
    position: absolute;
    left: 48.5%;
    top: 36%;
}

.SearchPopUp strong {
    position: absolute;
    z-index: 999;
    color: white;
    width: 100%;
    font-size: 40px;
    text-align: center;
    font-family: 'Roboto';
    font-weight: 400;
    top: 56%;
}
.SearchPopUp a {
    position: absolute;
    width: 250px;
    height: 50px;
    background: #E84242;
    text-align: center;
    line-height: 50px;
    border-radius: 28px;
    color: white;
    font-family: 'Roboto';
    font-weight: 400;
    left: 50%;
    margin-left: -125px;
    top: 80%;
}
div#Bars2 figure {
    border-radius: 10px;
    overflow: hidden;
}
/*
#Bars2 div {
    display: block;
}
#Bars2 div div {
    background: red;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    height: 145px;
    position: relative;
    padding: 20px 0 0 20px;
}
#Bars2 div:nth-child(1) div {
    background: #23B4B4;
}
#Bars2 div:nth-child(2) div {
    background: #90BF56;
}
#Bars2 div:nth-child(3) div {
    background: #E24949;
}
#Bars2 div:nth-child(4) div {
    background: #EFCB3F;
}
#Bars2 div div strong {
    color: #FFFFFF;
    font-size: 30px;
    font-family: 'Roboto';
    display: block;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#Bars2 div div:hover strong {
    margin-top: -7px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#Bars2 div div img {
    position: absolute;
    width: 177px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#Bars2 div div:hover img {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#Bars2 div:nth-child(1) div img {
    top: 10px;
    right: -30px;
}
#Bars2 div:nth-child(2) div img {
    top: 32px;
    right: -32px;
}
#Bars2 div:nth-child(3) div img {
    top: 30px;
    right: -40px;
}
#Bars2 div:nth-child(4) div img {
    top: 50px;
    right: -40px;
}
#Bars2 div:nth-child(1) div:hover img {
    top: 20px;
}
#Bars2 div:nth-child(2) div:hover img {
    top: 42px;
}
#Bars2 div:nth-child(3) div:hover img {
    top: 40px;
}
#Bars2 div:nth-child(4) div:hover img {
    top: 60px;
}*/
div#Slider .Slider {
    position: relative;
    overflow: hidden;
}
.Slide {
    height: 370px;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}
#Slider .Slide strong {
    position: absolute;
    top: 100px;
    left: 50px;
    color: white;
    font-size: 50px;
    font-family: 'Roboto';
}
#Slider .Slide > strong > span {
    font-size: 40px;
}
#Slider .Slide > span {
    font-size: 14px;
    width: 164px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: #8EC150;
    box-shadow: 3px 2px 26px rgba(142, 193, 80, 0.34);
    border-radius: 10px;
    position: absolute;
    color: white;
    font-family: 'Roboto';
    top: 230px;
    left: 50px;
}
#Slider .owl-controls.clickable {
    display: block !important;
    position: absolute;
    top: 310px;
    left: 50%;
}
#Slider .owl-controls.clickable .owl-pagination .owl-page {
    float: left;
    display: block;
    margin-right: 10px;
}
#Slider .owl-controls.clickable .owl-pagination .owl-page span {
    width: 15px;
    height: 15px;
    display: block;
    background: white;
    border-radius: 100%;
}
#CokSatan a {
    color: #707790;
    font-size: 20px;
    font-family: 'Roboto';
    margin-right: 20px;
    font-weight: 300;  
    display: inline-block;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#CokSatan a:last-child {
    margin-right: 0;
}
#CokSatan a:after {
    content: '';
    width: 0%;
    height: 4px;
    display: block;
    background: #E84242;
    margin: 0 auto;
    margin-top: 10px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#CokSatan a:hover:after, #CokSatan a.Active:after {
    width: 70%;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#CokSatan a:hover,#CokSatan a.Active {
    color: #E84242;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#ListFirst div {
    overflow: hidden;
    border-radius: 10px;
}
#ListFirst article {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
#ListFirst article p {
    font-size: 30px;
    color: #0B1742;
    font-family: 'Roboto';
    font-weight: 300;
    margin: 0;
    margin-top: 30px;
    display: block;
}
#ListFirst article strong {
    font-size: 100px;
    color: #E84242;
    font-family: 'Roboto';
    font-weight: 700;
    display: block;
}
#ListFirst article strong span {
    font-size: 40px;
    vertical-align: top;
    margin-top: 17px;
    display: inline-block;
}
#ListFirst article a {
    background: white;
    padding: 14px 32px;
    border-radius: 10px;
    color: #E84242;
    font-size: 14px;
    font-family: 'Roboto';
    box-shadow: 3px 2px 26px #E84242;
    margin-top: 60px;
    display: inline-block;
}

.List > div {
    background: #FFFFFF;
    border-radius: 10px;
    font-family: 'Roboto';
    text-align: center;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    height: auto;
border:1px solid #c3c3c3;
}
.List > div:after {
    content: '';
    width: 0%;
    height: 0%;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    background: rgba(11, 23, 66, 0.60);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.List > div:hover:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.List > div:hover {
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.28);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.List div.Add {
    position: absolute;
    z-index: 999999999;
    background: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.List:hover div.Add {
    opacity: 1;
    pointer-events: auto;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.List div.Add a {
    color: #0B1742; 
}
.List figure {
    height: 247px;
}
.List article p {
    margin: 5px 0;
}
.List article p a {
    text-align: center;
    color: #0B1742;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 auto;
    height: 40px;
    display: block;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-decoration: none;
}
.List article span {
    color: #8EC150;
    font-size: 15px;
    font-weight: 600;
    display: block;
    height: 17px;
}
.List article span i {
    font-style: normal;
    font-family: 'Arial';
    font-weight: 400;
    margin-right: 3px;
}
.Star {
    position: absolute;
    top: 08px;
    right: 08px;
    background: white !important;
    width: 50px;
    height: 25px;
    line-height: 25px;
    border-radius: 25px;
    display: block;
}
.Star i {
    width: 15px;
    display: block;
    float: right;
    margin: 6px 0;
    margin-right: 6px;
}
.Star span {
    background: white;
    width: 25px;
    height: 25px;
    display: block;
    float: left;
    border-radius: 100%;
    color: #F5CE39;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0px 1px 11px rgba(0, 0, 0, 0.16);
    text-align: center;
}
.Discount {
    width: 65px;
    height: 65px;
    display: block;
    background: #23B4B4 !important;
    border-radius: 100% !important;
    box-shadow: 0px 0px 15px rgba(35, 180, 180, 0.62);
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    font-family: 'Roboto';
    text-align: center;
}
.Discount strong {
    font-size: 20px;
    margin-top: 10px;
    display: block;
}
.Discount strong span {
    font-size: 16px;
    vertical-align: top;
    margin-top: 5px;
    display: inline-block;
    font-weight: 400;
}
.Discount p {
    margin: 0;
    font-size: 14px;
    margin-bottom: 12px;
    display: block;
}

#ListLast div {
    overflow: hidden;
    border-radius: 10px;
    height: 296px;
}
#ListLast article {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
#ListLast article p {
    font-size: 30px;
    color: #0B1742;
    font-family: 'Roboto';
    font-weight: 300;
    margin: 0;
    margin-top: 30px;
    display: block;
    font-weight: 400;
}
#ListLast article strong {
    font-size: 45px;
    color: #8EC150;
    font-family: 'Roboto';
    font-weight: 700;
    display: block;
}
#ListLast article strong span {
    font-size: 40px;
    vertical-align: top;
    margin-top: 17px;
    display: inline-block;
}
#ListLast article a {
    background: white;
    padding: 14px 32px;
    border-radius: 10px;
    color: #8EC150;
    font-size: 14px;
    font-family: 'Roboto';
    box-shadow: 3px 2px 26px rgba(142, 193, 80, 0.34);
    margin-top: 120px;
    display: inline-block;
}
#SSS div.Container {
    padding: 0 130px;
    margin-top: 50px;
}
#SSS a,#etiketler
 a {
    font-family: 'Roboto';
    font-size: 14px;
    color: #707790;
    background: #F1F2F4;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    text-decoration: none;
}
#SSS a:hover,#etiketler a:hover {
    color: #f1f2f4;
    background: #707790;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#EBulten {
    margin: 20px 0;
}
#EBulten div.VDA-70 {
    margin: 0 auto;
}
#EBulten strong {
    font-family: 'Roboto';
    font-weight: 400;
    color: #E84242;
    text-align: center;
    display: block;
}
#EBulten svg {
    width: 30px;
    display: block;
    position: absolute;
    left: 10px;
    top: 29px;
}
#EBulten input[type=text] {
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-radius: 10px;
    border: 1px solid #CDCFD8;
    margin-top: 10px;
    padding: 0 50px;
    color: #707790;
    font-size: 14px;
    font-family: 'Roboto';
}
#EBulten input[type=submit] {
    background: url('../Images/MailArrow.svg') no-repeat;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: block;
    width: 25px;
    height: 18px;
    position: absolute;
    top: 30px;
    right: 10px;
    padding: 0;
}
#Comments {
    background: white;
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(241,242,244,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f2f4', GradientType=0 );
    margin-bottom: -470px;
    position: relative;
}
#Comments h1 {
    font-family: 'Roboto';
    color: #0B1742;
    font-size: 38px;
    display: block;
    text-align: center;
    font-weight: 400;
    position: relative;
    z-index: 9999;
    margin-top: 70px;
}

#Comments h1:after {
    content: '';
     background: url("../Images/Tirnak.svg") no-repeat;
    width: 90px;
    height: 49px;
    display: block;
    position: absolute;
    left: 50%;
    top: 14px;
    margin-left: -45px;
    z-index: -1;
}
#Comments #Comment {
    text-align: center;
    margin: 0 auto;
    margin-top: 40px;
    position: relative;
    z-index: 9999999;
}
#Comments #Comment p {
    font-size: 14px;
    font-family: "Roboto";
    color: #707790;
    margin: 0;
}
#Comments #Comment figure {
    width: 245px;
    height: 145px;
    display: block;
    margin: 0 auto;
    background: url("../Images/CommentBG.svg") no-repeat center center;
    background-size: contain;
    margin-top: 10px;
    position: relative;
    z-index: 99999999;
}
#Comments #Comment img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    margin-left: -53px;
    top: 50%;
    margin-top: -50px;
}
#Comments #CommentElips {
    background: #ffffff;
    width: 100%;
    height: 820px;
    display: block;
    border-radius: 100%;
    padding-top: 20px;
    overflow: hidden;
    position: relative;
}
#Comments #CommentElips:after {
    content: '';
    background: url("../Images/CommentCicekSol.svg") no-repeat;
    width: 600px;
    height: 300px;
    display: block;
    position: absolute;
    top: 30px;
    left: -240px;
}
#Comments #CommentElips:before {
    content: '';
    background: url("../Images/CommentCicekSag.svg") no-repeat;
    width: 600px;
    height: 300px;
    display: block;
    position: absolute;
    top: 30px;
    right: -270px;
}
#Comments .owl-buttons {
    position: absolute;
    top: 100px;
    width: 100%;
}
#Comments .owl-buttons .owl-prev {
    left: 270px;
    position: absolute;
    width: 15px;
    display: block;
    height: 30px;
}
#Comments .owl-buttons .owl-next {
    position: absolute;
    right: 270px;
    width: 15px;
    display: block;
    height: 30px;
}
#Height {
    background: #F1F2F4;
    display: block;
    height: 52px;
    position: relative;
}
#Footer {
    background: #F1F2F4;
    position: relative;
}
#Footer .SiteMap strong {
    display: block;
    font-size: 22px;
    font-family: 'Roboto';
    color: #E84242;
    margin-bottom: 15px;
}
#Footer .SiteMap a {
    display: block;
    font-size: 14px;
    font-family: 'Roboto';
    color: #707790;
    margin-bottom: 5px;
}
#Social {
    width: 100%;
    text-align: right;
}
#Social li {
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    border: 3px solid #707790;
    margin-left: 15px;
}
#Social li svg {
    width: 18px;
    height: 18px;
    display: block;
    margin: 5px auto;
}
figure#Banka {
    width: 90%;
    float: right;
    margin-top: 20px;
}
#Copy {
    font-family: 'Roboto';
    text-align: right;
    margin-top: 20px;
    font-size: 13px;
    color: #707790;
    width: 100%;
    display: block;
}
a#Vera {
    float: right;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
a#Vera img {
    width: 42px;
}
a#Vera:hover {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
ul#Breadcrump {
    margin-top: 15px;
}
#Breadcrump li:after {
    content: '';
    background: url("../Images/ArrowRight.svg") no-repeat;
    width: 23px;
    height: 14px;
    display: block;
    float: right;
    margin-left: 10px;
    margin-top: 2px;
}
#Breadcrump li:last-child:after {
    display: none;
}
#Breadcrump a img {
    width: 18px;
    height: 16px;
    display: block; 
}
#Breadcrump a,#Breadcrump span {
    color: #9DA2B3;
    font-size: 14px;
    font-family:"Roboto";
    float: left;
    display: block;
}
.Sonuc {
    text-align: right;
    font-size: 13px;
    color: #707790;
    font-family: 'Roboto';
}
#Category {
    position: relative;
}
#Category strong {
    display: block;
    text-align: center;
    font-size: 14px;
    margin: 10px 0;
    color: #707790;
    font-family: 'Roboto';
    padding: 5px;
    position: relative;
}
#Category strong:before {
    content: '';
    width: 40px;
    height: 25px;
    background: rgba(255, 255, 255, 0);
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -165px;
    border-left: 2px solid #F5CE39;
    top: 12px;
    border-top: 2px solid #F5CE39;
}
#Category strong:after {
    content: '';
    width: 40px;
    height: 25px;
    background: rgba(255, 255, 255, 0);
    display: block;
    position: absolute;
    left: 50%;
    margin-left: 125px;
    border-right: 2px solid #F5CE39;
    top: 12px;
    border-top: 2px solid #F5CE39;
}
#CategoryTitle {
    background: #F5CE39;
    border-radius: 10px;
    margin-bottom: 40px;
}
#CategoryTitle li {
    cursor: pointer;
    text-align: center;
    padding: 16px 0;
}
#CategoryTitle li span {
    display: inline-block;
    color: #937B22;
    font-size: 14px;
    font-family: 'Roboto';
    font-weight: 400;
}
#CategoryTitle li i.ArrowBottom, #CategoryTitle li i.Close {
    display: inline-block;
    width: 15px;
    margin: 5px 0;
    margin-left: 8px;
}
#CategoryTitle li i.Close,#CategoryTitle li.Active i.ArrowBottom {
    display: none;
}
#CategoryTitle li.Active i.Close {
    display: inline-block;
    width: 12px;
}
#CategoryTitle li p {
    display: block;
    width: 100%;
    margin: 0;
    color: #7A671C;
    font-size: 20px;
    font-family: 'Roboto';
    font-weight: 400;
}
#CategoryTitle li p.Active {
    font-weight: 700;
}
#CategoryTitle li.Active {
    background: #DCB933;
    border-radius: 10px 10px 0 0;
    padding: 15px 0;
}
.CategoryList {
    position: relative;
}
.CategoryList > div  {
    background: #DCB933;
    position: absolute;
    top: -40px;
    z-index: 999999;
    width: 67%;
    left: 50%;
    margin-left: -35%;
    border-radius: 0 0 10px 10px;
    height: 0;
    pointer-events: none;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.CategoryList > div.Active {
    height: auto;
    pointer-events: auto;
    opacity: 1;
    padding: 20px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.CategoryList a {
    background: #F5CE39;
    border-radius: 25px;
    width: 14%;
    height: 45px;
    display: block;
    text-align: center;
    line-height: 45px;
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
    color: #7A671C;
    font-size: 14px;
    font-family: 'Roboto';
    font-weight: 700;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.CategoryList a:nth-child(6n) {
    margin-right: 0;
}
.CategoryList a:hover {
    background: #695507;
    color: #F5CE39;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#Paging {
    margin-top: 20px;
}
#Paging a {
    color: #707790;
    font-size: 14px;
    font-family: 'Roboto';
    background: #F1F2F4;
    border-radius: 5px;
    padding: 10px 15px;
    margin-right: 8px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    display: inline-block;
    margin-bottom: 10px;
}
#Paging a:hover,#Paging a.selected {
    color: #f1f2f4;
    background: #707790;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#ProductDetail {
    margin-top: 20px;
}
#ProductDetail #ProductImg  {
    position: relative;
    margin-bottom: 50px;
}
#ProductDetail #ProductImg #BigImg {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    min-height: 356px;
}
#ProductDetail #ProductImg #ImageList {
    background: white;
    border-radius: 10px;
    position: absolute;
    bottom: -25px;
    left: 50%;
}
#ProductDetail #ProductImg #ImageList img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    margin-right: 5px;
    display: block;
    float: left;
    cursor: pointer;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#ProductDetail #ProductImg #ImageList img:hover {
    opacity: .8;    
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#ProductDetail #ProductImg #ImageList img:last-child {
    margin-right: 0px;
}
#ProductDetail #ProductImg #BigImg img {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    height: 100% !important;
}
#ProductDetail #ProductImg #BigImg img.Active {
    pointer-events: auto;
    opacity: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#ProductArticle #ProductTitle h1 {
    color: #0B1742;
    font-size: 30px;
    font-weight: 600;
    font-family: 'Roboto';
    margin: 0;
    display: block;
}
#ProductArticle #ProductTitle strong {
    display: block;
    color: #707790;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Roboto';
    margin: 5px 0 10px 0px;
}
#Delivery p {
    font-family: 'Roboto';
    color: #707790;
    font-size: 13px;
    margin: 10px 0 20px 0;
}
#Delivery .Time {
    background: #F5F5F5;
    display: block;
    height: 50px;
    border-radius: 40px;
    position: relative;
}
#Delivery .Time #BgDeliver {
    display: block;
    border-radius: 30px;
    height: 40px;
    position: absolute;
    top: 5px;
    left: 5px;
    line-height: 43px;
    background: rgba(142,193,80,1);
    background: -moz-linear-gradient(left, rgba(142,193,80,1) 0%, rgba(220,203,62,1) 40%, rgba(239,205,58,1) 50%, rgba(238,177,60,1) 60%, rgba(232,66,66,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(142,193,80,1)), color-stop(40%, rgba(220,203,62,1)), color-stop(50%, rgba(239,205,58,1)), color-stop(60%, rgba(238,177,60,1)), color-stop(100%, rgba(232,66,66,1)));
    background: -webkit-linear-gradient(left, rgba(142,193,80,1) 0%, rgba(220,203,62,1) 40%, rgba(239,205,58,1) 50%, rgba(238,177,60,1) 60%, rgba(232,66,66,1) 100%);
    background: -o-linear-gradient(left, rgba(142,193,80,1) 0%, rgba(220,203,62,1) 40%, rgba(239,205,58,1) 50%, rgba(238,177,60,1) 60%, rgba(232,66,66,1) 100%);
    background: -ms-linear-gradient(left, rgba(142,193,80,1) 0%, rgba(220,203,62,1) 40%, rgba(239,205,58,1) 50%, rgba(238,177,60,1) 60%, rgba(232,66,66,1) 100%);
    background: linear-gradient(to right, rgba(142,193,80,1) 0%, rgba(220,203,62,1) 40%, rgba(239,205,58,1) 50%, rgba(238,177,60,1) 60%, rgba(232,66,66,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ec150', endColorstr='#e84242', GradientType=1 );
}
#Delivery .Time #BgDeliver span {    
    padding-left: 10px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Roboto';
}
#Delivery .Time #Dakka {
    position: absolute;
    width: 74px;
    height: 74px;
    border-radius: 100%;
    background: #e85142;
    top: -12px;
}
#Delivery .Time #Dakka strong {
    font-size: 20px;
    font-family: 'Roboto';
    font-weight: 700;
    display: block;
    text-align: center;
    color: white;
    margin: 17px 0;
}
#Delivery .Time #Dakka strong span {
    font-size: 13px;
    display: block;
}

#Delivery .Time #Dakka:after {
    content: '';
    width: 57px;
    height: 57px;
    display: block;
    border-radius: 100%;
    border: 2px solid white;
    top: 6.5px;
    left: 7px;
    position: absolute;
}
#NeZaman {
    text-align: center;
    font-size: 14px;
    font-family: 'Roboto';
    color: #707790;
    font-weight: 400;
    display: block;
    margin: 20px 0 10px 0;
}
#ProductArticle #SearchFilter {
    margin-top: 32px;
}
#ProductArticleBottom #Calender {
    border-radius: 10px;
    background:#F1F2F4;
    padding-top: 5px;
    overflow: hidden;
}
#ProductArticleBottom #Calender a {
    display: inline-block;
    text-align: center;
    color: #707790;
    font-family: 'Roboto';
    padding: 12px 12px;
    border-radius: 10px 10px 0 0;
}
#ProductArticleBottom #Calender a strong {
    display: block;
    font-size: 20px;
}
#ProductArticleBottom #Calender a span {
    display: block;
    font-size: 13px;
}
#ProductArticleBottom #Calender a:nth-child(10) strong {
    display: block;
    font-size: 13px;
    line-height: 15px;
}
#ProductArticleBottom #Calender a:nth-child(11) strong {
    display: block;
    font-size: 13px;
    line-height: 15px;
}
#ProductArticleBottom #Calender a:nth-child(10) {
    background: #CDCFD8;
    padding: 20px 11px 12px 11px;
}

#ProductArticleBottom #Calender a#OzelGun {
    background: #F5CE39;
    color: #7A671C;
    padding: 20px 11px 12px 11px;
}

#ProductArticleBottom #Calender a:hover,#ProductArticleBottom #Calender a.Active {
    background: #707790;
    color: white;
}
#Clock {
    background: #707790;
    border-radius:  0 0 10px 10px;
}
#Clock p {
    margin: 0;
    float: left;
    display: block;
    font-size: 14px;
    font-family: 'Roboto';
    color: #FFFFFF;
    line-height: 38px;
    margin-right: 5px;
}
#Clock a {
    display: block;
    float: left;
    font-size: 16px;
    font-family: 'Roboto';
    color: #FFFFFF;
    padding: 7px 9px;
    border-radius: 25px;
    margin-right: 2px;
    border: 1px solid rgba(255, 255, 255, 0);
}
#Clock a span {
    font-size: 9px;
    vertical-align: top
}
#Clock a strong:first-child {
    margin-right: 7px;
}#Clock a strong:last-child {
    margin-left: 7px;
}
div#ClockDetail div svg {
    width: 25px;
    display: block;
    margin: 0 auto;
    height: 25px;
    position: relative;
}

div#ClockDetail div {
    float: left;
    position: relative;
    width: 6.6666%;
}
div#ClockDetail {
    margin-top: 20px;
    position: relative;
}
div#ClockDetail div span {
    width: 100%;
    height: 1px;
    display: block;
    background: #9DA2B3;
    position: relative;
    margin-top:8px;
}
div#ClockDetail div p {
    font-size: 12px;
    text-align: center;
    display: block;
    width: 100%;
    margin-top: 5px;
}
div#ClockDetail div span:after {
    content: '';
    width: 4px;
    height: 4px;
    display: block;
    background: #707790;
    border:2px solid #9DA2B3;
    border-radius: 100%;
    position: absolute;
    top: -3px;
    left:50%;
    margin-left: -4px;
}
div#ClockDetail div span:before {
    content: '';
    width: 2px;
    height: 8px;
    display: block;
    background: #9da2b3;
    position: absolute;
    top: -3px;
    right:0;
    margin-left: -4px;
}
div#ClockDetail div:last-child span:before {
    display: none;
}
div#ClockDetail div:nth-child(5) svg,div#ClockDetail div:nth-child(13) svg {
    top: -8px;
}
div#ClockDetail div:nth-child(15) svg {
    top: -15px;
}
div#ClockDetail div a {
    padding: 0 !important;
    width: 100%;
    border: none;
}
div#Saat {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    display: none;
}
div#Saat.Active {
    display: block;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
div#Buy {
    width: 480px;
    margin: 0 auto;
}
div#Price {
    border: 2px solid #CDCFD8;
    border-radius: 10px;
    position: relative;
    padding: 5px 10px;
    margin-top: 20px;
}
#Price strong {
    font-size: 31px;
    font-weight: 700;
    font-family: 'Roboto';
    color: #8EC150;
    display: block;
    float: left;
}
#Price strong span {
    font-size: 14px;
    vertical-align: top;
    margin-top: 7px;
    display: inline-block;
}
#Price p {
    font-size: 13px;
    color: #707790;
    margin: 0;
    font-weight: 400;
    font-family: 'Roboto';
    display: block;
    float: left;
    margin-top: 20px;
}
#Price a,#Price input[type=submit] {
    float: right;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Roboto';
    color: white;
    background: #E84242;
    border-radius: 10px;
    padding: 15px 60px;
    border: none;
    margin-top: -17px;
}
#Clock a:hover,#Clock a.Active {
    border: 1px solid white;
}
div#ClockDetail div a:hover {
    border: none;
}
.Interval {
    height: 8px;
    border-radius: 20px;
    display: block;
    background: #8EC150;
    position: absolute;
    top: 30px;
    pointer-events: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.Interval.Active {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.Interval#Interval1 {
    width: 0%;
    left: 2.5%;
    opacity: 0;
}
.Interval#Interval1.Active {
    width: 28%;
    opacity: 1;
}
.Interval#Interval2 {
    width: 0%;
    left: 2.5%;
    opacity: 0;
}
.Interval#Interval2.Active {
    width: 55%;;
    opacity: 1;
}
.Interval#Interval3 {
    width: 0%;
    left: 22.5%;
    opacity: 0;
}
.Interval#Interval3.Active {
    width: 21.5%;;
    opacity: 1;
}
.Interval#Interval4 {
    width: 0%;
    left: 22.5%;
    opacity: 0;
}
.Interval#Interval4.Active {
    width: 41.5%;;
    opacity: 1;
}
.Interval#Interval5 {
    width: 0%;
    left: 76%;
    opacity: 0;
}
.Interval#Interval5.Active {
    width: 14.5%;;
    opacity: 1;
}
#DetailBars  {
    height: 73px;
    padding: 18px 0;
    text-align: center;
    display: block;
    border-radius: 10px;
    margin-top: 20px;
    background: rgba(45,181,171,1);
    background: -moz-linear-gradient(left, rgba(45,181,171,1) 0%, rgba(143,191,80,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(45,181,171,1)), color-stop(100%, rgba(143,191,80,1)));
    background: -webkit-linear-gradient(left, rgba(45,181,171,1) 0%, rgba(143,191,80,1) 100%);
    background: -o-linear-gradient(left, rgba(45,181,171,1) 0%, rgba(143,191,80,1) 100%);
    background: -ms-linear-gradient(left, rgba(45,181,171,1) 0%, rgba(143,191,80,1) 100%);
    background: linear-gradient(to right, rgba(45,181,171,1) 0%, rgba(143,191,80,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2db5ab', endColorstr='#8fbf50', GradientType=1 );
}
#DetailBars svg {
    height: 30px;
    display: inline-block;
    margin-right:  6px;
}
#DetailBars strong {
    height: 30px;
    display: inline-block;
    text-align: left;
    font-size: 16px;
    font-family: 'Roboto';
    color: white;
    font-weight: 400;
}
#ListProducts .ContentTitle {
    margin-bottom: 20px;
}
.ContentTitle {
    font-size: 30px;
    font-family: 'Roboto';
    color: #0B1742;
}
#ProductContent article p {
    font-size: 14px;
    color: #707790;
    font-family: 'Roboto';
    line-height: 20px;
}
#ProductComments .CommentTop {
    position: relative;
}
#ProductComments .ProductComment {
    background: #F1F2F4;
    padding: 20px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}
#ProductComments .CommentTop .Star {
    position: relative;
    display: inline-block;
    top: 5px;
    left: 1px;
}
#ProductComments .CommentTop > strong {
    display: inline-block;
    font-family: 'Roboto';
    font-size: 20px;
    color: #707790;
    margin-right: 10px;
}
#ProductComments .ContentTitle {
    margin-bottom: 20px;
}
#ProductComments .Info svg {
    height: 18px;
    margin-right: 6px;
}
#ProductComments .Info {
    display: block;
    float: right;
    background: white;
    padding: 10px 30px;
    border-radius: 25px;
    margin-top: -5px;
}
#ProductComments .Info > div {
    display: inline-block;
}
#ProductComments .Info span {
    margin-right: 25px;
    color: #9DA2B3;
    font-size: 13px;
    font-family: 'Roboto';
    position: relative;
    top: -3px;
}
#ProductComments .ProductComment article p {
    color: #707790;
    font-size: 14px;
    font-family: 'Roboto';
    margin: 10px;
}
#Step {
    margin-top: 20px;
    font-family: 'Roboto';
    position: relative;
}
#Step ul li {
    text-align: center;
    position: relative;
}
#Step ul li strong {
    display: block;
    color: #CDCFD8;
    font-size: 20px;
}

#Step ul li p {
    width: 38px;
    height: 38px;
    border-radius: 100%;
    display: block;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    background: #8EC150;
    box-shadow: 0px 0px 15px rgba(142, 193, 80, 0.57);
    margin: 0 auto;
    line-height: 38px;
    text-align: center;
    margin-top: 11px;
    opacity: 0;
    z-index: 99;
    position: relative;
}
#Step ul li.Active p {
    opacity: 1;
}
.Active ~ li span.Line, #Step ul li.Active span.Line  {
  background: #F1F2F4 !important;
}
.Active ~ li span.Round  {
  background: #cdcfd8 !important;
}
#Step ul li.Active strong {
    color: #0B1742;
}
#Step ul li span.Line {
    content: '';
    width: 100%;
    height: 5px;
    display: block;
    background: #8ec150;
    position: absolute;
    left: 90px;
    top: 49.5px;
    z-index: -1;
    opacity: 1;
}
#Step ul li:last-child span.Line {
    display: none;
}

#Step ul li span.Round {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #8ec150;
    display: block;
    position: absolute;
    left: 85px;
    top: 47px;
}
.StepInfo {
    background: #F1F2F4;
    padding: 0 30px;
    line-height: 55px;
    border-radius: 30px;
    position: relative;
    height: 55px;
}
.StepInfo p {
    text-align: left;
    font-size: 14px;
    color: #707790;
    font-style: italic;
    display: inline-block;
    margin: 0;
}
.StepInfo i {
    font-family: 'Times New Roman';
    font-size: 55px;
    font-weight: 600;
    font-style: italic;
    display: inline-block;
    line-height: 55px;
    vertical-align: middle;
    color: #707790;
    margin-right: 15px;
}
.StepInfo:before {
    content: '';
    width: 43px;
    height: 36px;
    display: block;
    background: #f1f2f4;
    border-radius: 8px;
    position: absolute;
    transform: rotate(-68deg);
    left: 4px;
    top: -4px;
    z-index: -1;
}
div#Step1 {
    width: 80%;
    margin: 15px 0;
    margin-left: 90px;
}
div#Step2 {
    width: 70%;
    margin: 15px 0;
    margin-left: 250px;
}

div#Step3 {
    width: 80%;
    margin: 15px 0;
    margin-left: 100px;
}
div#Step3:before {
    left: 360px;
}
div#Step4 {
    width: 59%;
    margin: 15px 0;
    margin-left: 40px;
}
div#Step4:before {
    left: 610px;
}
div#Step5 {
    width: 44%;
    margin: 15px 0;
    margin-left: 344px;
}
div#Step5:before {
    left: 449px;
    transform: rotate(60deg);
}
div#Step6 {
    width: 36%;
    margin: 15px 0;
    margin-left: 634px;
}
div#Step6:before {
    left: 349px;
    transform: rotate(60deg);
}
.StepInfo:after {
    content: '';
    background: url("../Images/oval.svg") no-repeat;
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    right: 10px;
    top: 6px;
}
#DiscountCoupon {
    float: right;
    font-family: 'Roboto';
    margin-top: 20px;
    margin-right: 20px;
}
#DiscountCoupon input[type=submit] {
    background: #8EC150;
    color: white;
    padding: 14px 14px;
    font-size: 14px;
    border-radius: 10px;
    float: right;
    position: relative;
    z-index: 999;
    border: none;
    cursor: pointer;
}
#DiscountCoupon input[type=text] {
    width: 0;
    height: 45px;
    border-radius: 10px;
    border: 1px solid #8EC150;
    float: right;
    display: block;
    padding: 10px 17px;
    margin-right: -40px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    color: #707790;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
}
#DiscountCoupon [type=submit]:hover + input[type=text] {
    width: 300px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    opacity: 1;
    pointer-events: auto;
}

#DiscountCoupon input[type=text]:focus,#DiscountCoupon input[type=text]:hover {
    width: 300px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    opacity: 1;
    pointer-events: auto;
}
#DiscountCoupon p {
    background: #F1F2F4;
    color: #707790;
    padding: 14px 14px;
    font-size: 14px;
    border-radius: 10px;
    float: right;
    position: relative;
    z-index: 999;
    margin: 0;
}
#MyProducts  {
    margin-top: 20px;
}
#MyProducts .MyProduct {
    background: #F1F2F4;
    border-radius: 10px;
    margin-bottom: 40px;
}
#MyProducts .MyProduct article {
    padding-left: 24px;
}
#MyProducts .MyProduct article p {
    margin: 0;
    color: #0B1742;
    font-size: 20px;
    font-weight: 400;
    font-family: 'Roboto';
}
#MyProducts .MyProduct article ul {
    margin-top: 20px;
}
#MyProducts .MyProduct article ul li img {
    width: 20px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
}
#MyProducts .MyProduct article ul li {
    background: white;
    display: inline-block;
    margin-right: 10px;
    font-family: 'Roboto';
    padding: 12px 17px;
    border-radius: 30px;
    position: relative;
    z-index: 9;
}
#MyProducts .MyProduct article ul li span {
    color: #707790;
    font-size: 13px;
}
#MyProducts .MyProduct article ul li strong {
    color: #707790;
    font-size: 14px;
}
#MyProducts .MyProduct article ul li strong span {
    font-size: 9px;
    font-weight: 400;
    vertical-align: top;
}
#MyProducts .MyProduct article ul li:nth-child(3) ,#MyProducts .MyProduct article ul li:nth-child(4) {
    padding: 10px 17px;
}
#MyProducts .MyProduct article ul li:nth-child(3) img ,#MyProducts .MyProduct article ul li:nth-child(4) img {
    height: 22px;
    width: 22px;
}

#MyProducts .MyProduct article ul li:nth-child(3):before {
    content: '';
    position: absolute;
    width: 40px;
    height: 5px;
    background: white;
    -: 10px 17px
    z-index:;
    right: -35px;
    top: 17px;
}
.MyProductPrice {
    margin: 35px 0;
    display: block;
    float: left;
}
.MyProductPrice strong {
    font-size: 25px;
    font-family: 'Roboto';
    color: #707790;
}
.MyProductPrice strong span {
    font-size: 14px;
    vertical-align: top;
    margin-top: 10px;
    display: inline-block;
}
.MyProductDelete {
    display: block;
    float: left;
    margin: 27px 0;
    margin-left: 10px;
    float: right;
}
.MyProductDelete svg {
    width: 27px;
    height: 14px;
    display: block;
}
#TotalPrice {
    height: 55px;
    border-radius: 10px;
    background: #F1F2F4;
    padding: 15px;
    font-family: 'Roboto';
}
#TotalPrice span {
    line-height: 25px;
    font-size: 20px;
    color: #707790;
}
#TotalPrice .AraToplam  {
    float: left;
    display: block;
    margin-left: 30px;
    position: relative;
    text-decoration: none;
}
#TotalPrice .AraToplam span {
    font-size: 14px;
    color: #707790;
    display: block;
    line-height: 1;
    }
#TotalPrice .AraToplam:first-child:after {
    content: "";
    float: right;
    width: 1px;
    height: 20px;
    display: block;
    background: #CDCFD8;
    position: absolute;
    top: 4px;
    right: -15px;
}
#Toplam {
    background: #8EC150;
    float: left;
    padding: 0 12px;
    border-radius: 10px;
    margin-left: 10px;
    position: relative;
    top: -21px;
    font-family: 'Roboto';
    text-decoration: none;
}
#Toplam span {
    color: #fff !important;
    font-size: 13px;
    display: block;
}
#Toplam strong {
    color: #fff !important;
    font-size: 35px;
    display: block;
}
#Toplam strong span {
    color: #fff;
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}
#SiparsiButon a,#SiparsiButon input[type=submit] {
    width: 164px;
    height: 45px;
    background: red;
    border-radius: 10px;
    text-align: center;
    line-height: 45px;
    display: inline-block !important;
    margin-right: 15px;
    font-size: 14px;
    color: white;
    font-family: 'Roboto';
    border: none;
    cursor: pointer;
}
#SiparsiButon a:nth-child(1) {
    background: #23B4B4;
}
#SiparsiButon a:nth-child(2),#SiparsiButon input[type=submit] {
    margin:0;
    background: #8EC150;
}
#CardNote {
    margin: 0 auto;
}
.SelectList {
    position: relative;
    font-family: 'Roboto';
}
.SelectList .SelectListTitle {
    width: 100%;
    height: 55px;
    line-height: 55px;
    border-radius: 25px;
    cursor: pointer;
    background: rgba(239,239,239,1);
    background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(247,247,247,1) 97%, rgba(247,247,247,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(239,239,239,1)), color-stop(97%, rgba(247,247,247,1)), color-stop(100%, rgba(247,247,247,1)));
    background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(247,247,247,1) 97%, rgba(247,247,247,1) 100%);
    background: -o-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(247,247,247,1) 97%, rgba(247,247,247,1) 100%);
    background: -ms-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(247,247,247,1) 97%, rgba(247,247,247,1) 100%);
    background: linear-gradient(to bottom, rgba(239,239,239,1) 0%, rgba(247,247,247,1) 97%, rgba(247,247,247,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f7f7f7', GradientType=0 );
    margin-bottom: 20px;
}
.SelectList .SelectListTitle span {
    color: #707790;
    font-size: 14px;
    padding-left: 20px;
}
.SelectList .SelectListTitle .SelectArrow {
    float: right;
    background: #8EC150;
    border-radius: 100%;
    margin: 5px 0;
    margin-right: 7px;
    display: block;
    height: 45px;
    width: 45px;
}
.SelectList .SelectListTitle svg {
    width: 16px;
    margin: 18px 15px;
}
.SelectList ul {
    background: white;
    padding: 30px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0px 6px 26px rgba(0, 0, 0, 0.12);
    height: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: 999999999999;
    overflow: scroll;
}

.SelectList ul.Active {
    height: 250px;
    opacity: 1;
    pointer-events: auto;
}

.SelectList ul li {
    font-size: 14px;
    color: #707790;
    margin-bottom: 17px;
    display: block;
    cursor: pointer;
}
#CardNote .Note {
    background: #F1F2F4;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    position: relative;
}
#CardNote .Note .textarea {
    resize: none;
    width: 100%;
    height: 170px;
    border: none;
    border-radius: 10px;
    font-family: 'Roboto';
    font-size: 20px;
    color: #707790;
    margin-bottom: 20px;
    background: white;
}
#CardNote .Note .textarea textarea {
    resize: none;
    width: 100%;
    height: 170px;
    padding: 20px;
    border: none;
    border-radius: 10px;
    font-family: 'Roboto';
    font-size: 20px;
    color: #707790;
    margin-bottom: 20px;
    background: transparent;
    position: relative;
    z-index: 99;
}
#CardNote .Note .textarea:before {
    content: '';
    background: url('../Images/feather.svg') no-repeat;
    background-size: contain;
    display: block;
    width: 45%;
    height: 45%;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    left: 25%;
    top: 22%;
}
#CardNote .Note input[type="text"] {
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: 10px;
    font-family: 'Roboto';
    font-size: 14px;
    color: #707790;
    padding-right: 145px;
}
#CardNote .Note a {
    font-size: 14px;
    color: #707790;
    margin-bottom: 17px;
    display: block;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}
#RecipientInformation,#CardInformation {
    margin: 0 auto;
}
.input {
    margin-bottom: 20px;
    position: relative;
}
.input  input[type="text"]{
    width: 100%;
    height: 55px;
    border: 1px solid #CDCFD8;
    border-radius: 10px;
    padding-left: 45px;
    font-family: 'Roboto';
    line-height: 55px;
    color: #707790;
    font-size: 14px;
}
.input  textarea {
    width: 100%;
    height: 115px;
    border: 1px solid #CDCFD8;
    border-radius: 10px;
    padding-top: 15px;
    padding-left: 45px;
    font-family: 'Roboto';
    resize: none;
    color: #707790;
    font-size: 14px;
}
.input svg {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 15px;
    left: 15px;
}

.input label {
    display: inline-block;
    font-size: 14px;
    font-family: 'Roboto';
    color: #707790;
    position: relative;
    vertical-align: top;
}
.input p {
    display: inline-block;
    font-size: 14px;
    font-family: 'Roboto';
    color: #707790;
    font-weight: 700
}
.input input[type=checkbox] {
    opacity: 0;
    pointer-events: none;
    height: 0;
    width: 0;
}
.input input[type=radio] {
    opacity: 0;
    pointer-events: none;
    height: 0;
    width: 0;
}
.input label:before {
    content: '';
    width: 22px;
    height: 22px;
    border: 1px solid #CDCFD8;
    border-radius: 100%;
    display: inline-block;
    margin-right:  10px;
    vertical-align: middle;
}
.input input[type=checkbox]:checked + label:after {
    content: '';
    width: 14px;
    height: 14px;
    background: #8EC150;
    border-radius: 100%;
    display: inline-block;
    position: absolute;
    left: 4px;
    top: 4px;
}
.input input[type=radio]:checked + label:after {
    content: '';
    width: 14px;
    height: 14px;
    background: #8EC150;
    border-radius: 100%;
    display: inline-block;
    position: absolute;
    left: 4px;
    top: 4px;
}
.input select {
    width: 100%;
    height: 55px;
    border-radius: 10px;
    border: 1px solid #CDCFD8;
    color: #707790;
    font-family: 'Roboto';
    font-size: 14px;
    padding: 0 20px;
}
#FaturaBilgi {
    width: 100%;
    height: 55px;
    line-height: 55px;
    background: #F1F2F4;
    border-radius: 10px;
    padding: 0 20px;
    position: relative;
    cursor: pointer;
}
#FaturaBilgi i.icon svg {
    width: 21px;
    height: 21px;
    position: relative;
    top: 6px;
}
#FaturaBilgi span {
    font-size: 14px;
    font-family: 'Roboto';
    color: #707790;
}
.arrow {
    display: block;
    width: 20px;
    float: right;
    margin: 21px 0;
}

.bilgi-1 {
    fill: #707790;
}
.Bilgi {
    display: none;
}
.Bilgi.Active {
    display: block;
}
.Bilgi ul {
    text-align: center;
    margin: 20px 0;
}
.Bilgi ul li {
    display: inline-block;
    padding: 3px 17px;
    margin-right: 6px;
    border: 1px solid rgba(0,0,0,0);
}
.Bilgi ul li.Active ,.Bilgi ul li:hover {
    border: 1px solid #8EC150;
    border-radius: 10px;
}
.Bilgi ul li svg {
    width: 23px;
    height: 23px;
    display: block;
    margin: 10px auto;
}
.Bilgi ul li span {
    font-family: 'Roboto';
    color: #707790;
    font-size: 14px;
}
.Bilgi ul li.Active span ,.Bilgi ul li:hover span {
    color: #8EC150;
}

.Bilgi ul li.Active .bilgi-1 , .Bilgi ul li:hover .bilgi-1  {
    fill: #8EC150;
}
#Payment {
    margin: 0 auto;
}
#Payment ul.Title {
    margin-bottom: -15px;
}
#Payment ul.Title li {
    text-align: center;
    padding: 20px 0;
    position: relative;
    border: 5px solid rgba(255, 255, 255, 0);
    top: 5px;
}

@media only screen and (max-width: 600px) {
    
    #Payment ul.Title li {
        width: 160px;
    }

}
#Payment ul.Title li img {
    width: 92px;
    display: block;
    margin: 0 auto
}
#Payment ul.Title li strong {
    font-size: 16px;
    font-family: 'Roboto';
    color: #707790;
    display: block;
    padding: 3.5px 0;
}
#Payment ul.Title li.Active strong, #Payment ul.Title li:hover strong {
    color: #0B1742;
    display: block;
}
#Payment ul.Title li.Active {
    border: 5px solid #f1f2f4;
    border-bottom: 25px solid white;
    border-radius: 20px;
}
#Card {
    padding: 70px 150px;
    border: 5px solid #F1F2F4;
    border-radius: 20px;
    margin-bottom: 50px;
    display: none;
}
@media only screen and (max-width: 600px) {
    #Card {
        padding: 0px;
    }
}
#Payment ul.Title li.Active:after,#Payment ul.Title li.Active:before {
    content: '';
    width: 38%;
    height: 44px;
    border: 5px solid #f1f2f4;
    display: block;
    position: absolute;
    border-top: 0;
    bottom: -10px;
    pointer-events: none;
}
#Payment ul.Title li.Active:after {
    right: -38%;
    border-right: 0;
    border-radius: 0 0 0 11px;
}
#Payment ul.Title li.Active:before {
    left: -37.7%;
    border-left: 0;
    border-radius: 0 0 20px 0;
}
#Payment ul.Title li.Active:first-child:before,#Payment ul.Title li:hover:first-child:before {
    content: '';
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0;
    bottom: -30px;
    height: 60px;
}

#Card  input[type="text"]{
    width: 100%;
    height: 55px;
    border: 1px solid #CDCFD8;
    border-radius: 10px;
    font-family: 'Roboto';
    line-height: 55px;
    color: #707790;
    font-size: 14px;
    padding: 0 20px;
}
#Card  span {
    font-size: 14px;
    color: #707790;
    font-family: 'Roboto';
    width: 100%;
    display: block;
    margin: 20px 0;
}
#Card .uyari  span {
    background: #F1F2F4;
    font-size: 20px;
    font-family: 'Arial';
    border-radius: 100%;
    width: 38px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    color: #95989A;
    cursor: pointer;
    user-select: none;
    position: absolute;
    right: 0;
}
#Card .uyari {
    position: absolute;
    right: 6px;
    top: 25px;
}

#Card > div {
    position: relative;
}
#Card .uyari  p {
    position: absolute;
    top: 10px;
    width: 284px;
    background: #f1f2f4;
    font-size: 15px;
    font-family: 'Roboto';
    padding: 5px 19px;
    right: 0;
    border-radius: 10px;
    color: #95989A;
    top: 60px;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

#Card .uyari  span:hover + p {
    opacity: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#Card #Toplam span {
    display: block;
    color: white;
    font-size: 13px;
    margin: 0;
    line-height: 25px;
}

#Card #Toplam strong span {
    width: 41px;
    display: inline-block;
}
#Card #Toplam {
    float: none;
    top: 110px;
    margin-top: -60px;
    display: inline-block;
    left: 50%;
    margin-left: -70px;
}
.input label a {
    color: #707790;
    border-bottom: 1px solid #CDCFD8;
}
#Completed {
    margin: 40px auto;
    background-size: contain;
}
#Completed article {
    font-family: 'Roboto';
    text-align: center;
}
#Completed article strong {
    display: block;
    color: #8EC150;
    font-size: 30px;
    margin-bottom: 5px;
    font-weight: 700;
}
#Completed article span {
    display: block;
    color: #707790;
    font-size: 16px;
    font-weight: 700;
}
#Completed article p {
    display: block;
    color: #8EC150;
    font-size: 16px;
    font-weight: 700;
}
.Home .List > div:after {
    display: none;
}

#MobilHeader {
    display: none;
}
#MobilNav {
    display: none;
}
.CategoryListProducts .List > div:after {
    display: none;
}
.MobilPopUp {
    display: none;
}
#Card.CardActive {
    display: block;
}

div#divSiparisKontrol,#divUyeGiris, #divUyelik {
    font-family: 'Roboto'; 
    display: block;
    position: absolute;
    width: 100%;
    top: 200px;
    color: white;
    font-weight: 600;
}
#divUyelik {
    top: 260px;
}
div.Open {
    position: absolute;
    width: 100%;
    display: block;
    background: #ffffff;
    left: 0;
    top: 55px;
    opacity: 0;
    height: 0;
    pointer-events: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    z-index: 999999999;
    box-shadow: 0px 6px 20px rgba(11, 23, 66, 0.2);
}

#Nav .Navs > div:hover .Open {
    opacity: 1;
    pointer-events: auto;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    height: 270px;
}

#Nav .Navs > div .Open a {
    padding: 26px 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#Nav .Navs > div  .Open a:hover {
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(241,242,244,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(241,242,244,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f2f4', GradientType=0 );
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#Nav .Navs > div  .Open img {
    height: 50px;
    display: inline-block;
}
#Nav .Navs > div  .Open strong {
    display: inline-block;
    color: #707790;
    width: 100%;
    top: 0;
    line-height: 30px;
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100% !important;
}
.a2a_kit.a2a_kit_size_32.a2a_default_style {
    float: none;
    width: 144px;
    margin: 0 auto;
    margin-top: 50px;
}
p.YolTutari {
    color: #0b1742;
    display: block;
    font-size: 16px;
    margin-top: 10px;
}
p.HizmetYok {
    color: #e84242;
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
}

#Price strong.Eski {
    font-size: 20px;
}
div.UrunSelect {
    margin-bottom: 20px;
}
p.EkUrun {
    color: #0b1742;
    font-size: 16px;
    font-family: 'Roboto';
    font-weight: 600;
    padding-left: 10px;
}
.Add .bootstrap-select.btn-group .dropdown-menu.inner {
    height: 130px !important;
}

.Add .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 80% !important;
    top: 50%;
    margin-top: -17px;
}

.Eski {
    color: #e84242 !important;
    text-decoration: line-through;
}
.Note .btn-group.bootstrap-select {
    margin-bottom: 15px;
}

.Note button.btn.dropdown-toggle.bs-placeholder.btn-default {
    height: 50px;
    border: none;
    border-radius: 10px;
    color: #707790 !important;
    font-family: 'Open Sans';
    font-weight: 400;
}
p.NoteNumber {
    font-family: 'Open Sans';
    font-size: 15px;
    font-weight: 600;
    color: #0b1742;
}
div#Sirket {
    display: none;
}
#Nav .Navs > div:hover .NavIcon svg .nav-1 {
    stroke: #0b1742;
}
#Nav .Navs > div:hover .NavIcon svg .nav2-1 {
    fill: #0b1742;
}

#Nav .Navs > div:hover .NavIcon svg .nav2-2 {
    fill: none;
    stroke: #0b1742;
    stroke-width: 2px;
}

#Nav .Navs > div:hover .NavIcon svg .nav-5 {
    fill: #0b1742;
    stroke: #0b1742;
    stroke-width: 0.3px;
}
#Nav .Navs > div:hover {
    background : #ffffff;
}
#Nav .Navs > div:hover strong {
    color: #0b1742;
}
#Nav .Navs div#SiparisTakip:hover .NavIcon svg .nav2-1 ,#Nav .Navs div#Client:hover .NavIcon svg .nav2-1 {
    fill: #ffffff;
}
#Nav .Navs div#SiparisTakip:hover strong,#Nav .Navs div#Client:hover strong  {
    color: #ffffff;
}
p.Bulunamadi {
    text-align: center;
    font-family: 'Open Sans';
    color: #0b1742;
    font-weight: 700;
    font-size: 20px;
}
.Cikis,.Hesabim {
    width: 40%;
    margin: 95px 0;
}
div#GeneralContent article {
    font-family: 'Roboto';
    margin: 40px 0;
}

div#GeneralContent article p {
    color: #0b1742;
    font-size: 15px;
}
div#GeneralContent article h1 {
    color: #0b1742;
    font-size: 22px;
    margin-top: 0;
}
.TumIller {
    text-align: center;
}
.TumIller li {
    display: inline-block;
    margin-bottom: 30px;
}
.TumIller li a {
    padding: 10px 30px;
    margin-right: 10px;
    background: #f1f2f4;
    color: #707790;
    border-radius: 10px;
}
.TumIller li a:hover {
    background: #707790;
    color: #fff;
}
div#ListFirst > div {
    height: auto;
}
div.Metin {
    font-family: 'Open Sans';
    font-size: 13px;
    color: #0b1742;
    padding: 20px;
    font-weight: 600;
    background: #f1f2f4;
    border-radius: 11px;
    margin: 0 10px;
    width: 100%;
    display: block;
    margin-left: 0;
}
.SozlesmePopUp {
    position: fixed;
    top: 0;
    left: 0;
}

.SozlesmePopUp.Active {z-index: 99;}
.SozlesmePopUp .BGPopUp {
    position: fixed;
    top: 50%;
    left: 50%;
    background: rgba(11, 23, 66, 0.55);
    width: 0%;
    height: 0%;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    opacity: 0;
    pointer-events: none;
}
.SozlesmePopUp.Active .BGPopUp {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    opacity: 1;
    pointer-events: auto;
}
.SozlesmePopUp .PopUp {
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0px;
    height: 0px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    border-radius: 10px;
    pointer-events: none;
}

.SozlesmePopUp.Active .PopUp {
    opacity: 1;
    background: white;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -300px;
    width: 600px;
    height: 600px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    overflow-y: scroll;
    pointer-events: auto;
}
.SozlesmePopUp .PopUp article {
    padding: 10px 20px;
}

.SozlesmePopUp .PopUp article p {
    color: #5d5d5d;
    font-family: 'Roboto';
}
.SozlesmePopUp .Close {
    background: #0B1742;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 7px;
    border-radius: 100%;
    cursor: pointer;
}
p.SepetBos {
    text-align: center;
    font-family: 'Roboto';
    font-size: 30px;
    font-weight: 200;
    color: #0b1742;
}
.Select {
    width: 33%;
    margin: 10px 0;
    float: right;
    margin-left: 20px;
}

aside.Sidebar, .SiparisList,.ProfilEdit  {
    margin-top: 20px;
    font-family: 'Open Sans';
}
aside.Sidebar h1,.SiparisList h1,.ProfilEdit h1 {
    color: #0b1742;
    font-size: 22px;
    margin-top: 0;
    font-family: 'Open Sans';
}
aside.Sidebar ul li a {
    font-family: 'Open Sans';
    color: #0b1742;
    border-bottom: 1px solid #0b1742;
    padding: 10px;
    display: block;
}
aside.Sidebar ul li a:hover {
    background: #0b1742;
    color: white;
}
ul.ListTitle {
    background: #0b1742;
    color: white;
    padding: 0 10px;
    border-radius: 10px;
}

ul.ListTitle li {
    display: block;
    line-height: 40px;
}
ul.List {
    color: #0b1742;
    padding: 0 10px;
}

ul.List li {
    display: block;
    line-height: 40px;
    border-bottom: 1px solid #c3c3c3;
}
.ProfilEdit form {
    width: 30%;
    margin: 0 auto;
    font-family: 'Open Sans';
}

.ProfilEdit form label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0b1742;
    margin-bottom: 5px;
    text-align: center;
}

.ProfilEdit form input[type=text],.ProfilEdit form input[type=password] {
    text-align: center;
    width: 100%;
    height: 30px;
    border: none;
    border-bottom: 1px solid #0b1742;
    margin-bottom: 10px;
    color: #0b1742;
    font-size: 14px;
    font-weight: 400;
}

.ProfilEdit form textarea {
    text-align: center;
    width: 100%;
    height: 60px;
    border: none;
    border-bottom: 1px solid #0b1742;
    margin-bottom: 10px;
    color: #0b1742;
    font-size: 14px;
    font-weight: 400;
    resize: none;
}
.ProfilEdit form input[type=submit] {
    width: 190px;
    height: 40px;
    color: #ffffff;
    margin: 0 auto;
    display: block;
    background: #0b1742;
    border: 1px solid #0b1742;
    cursor: pointer;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.ProfilEdit form input[type=submit]:hover {
    width: 190px;
    height: 40px;
    color: #0b1742;
    margin: 0 auto;
    display: block;
    background: #ffffff;
    border: 1px solid #0b1742;
    cursor: pointer;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
div#ListFirst {
    margin-bottom: 0.5px;
}
.MyProductDelete a {
    background: #E84242;
    display: block;
    padding: 15px 9px;
    border-radius: 100%;
}
#bankaNo {
    font-size: 17px !important;
    display: inline-block !important;
    margin: 0 !important;
    width: auto !important;
}
#Payment ul.Title li input[type="radio"] {
    opacity: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.Ulkeler li a {
    background: none !important;
    padding: 0;
    display: block;
}
.Ulkeler li a p {
    display: block;
    text-align: center;
    margin-top: 10px;
}

.Ulkeler li a img {
    display: block;
    margin: 0 auto;
}

.Ulkeler li {
    display: block;
    float: left;
    width: 16.5%;
}
div#ListProducts h1 ,#GeneralContent h1 {
    float: left;
    margin: 0;
    margin: 10px 0;
    color: #0b1742;
    background: #f1f2f4;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 22px;
}
div#ListProducts h2 {
    display: inline-block;
    margin: 10px 0;
    margin-left: 10px;
    color: #0b1742;
    background: #f1f2f4;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 22px;
}
#CommentAdd input[type="text"] {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    border-radius: 10px;
    font-family: 'Roboto';
    font-size: 14px;
    color: #707790;
    border: 1px solid #babdc7;
    margin-bottom: 15px;
}
#CommentAdd input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #707790;;
}
#CommentAdd input[type="text"]::-moz-placeholder { /* Firefox 19+ */
  color: #707790;;
}
#CommentAdd input[type="text"]:-ms-input-placeholder { /* IE 10+ */
  color: #707790;;
}
#CommentAdd input[type="text"]:-moz-placeholder { /* Firefox 18- */
  color: #707790;;
}
#CommentAdd textarea {
    width: 100%;
    height: 116px;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: 'Roboto';
    font-size: 14px;
    color: #707790;
    border: 1px solid #babdc7;
    margin-bottom: 15px;
    resize: none;
}
#CommentAdd input[type="submit"] {
    width: 164px;
    height: 45px;
    background: #23B4B4;
    border-radius: 10px;
    text-align: center;
    line-height: 45px;
    display: block !important;
    font-size: 14px;
    color: white;
    font-family: 'Roboto';
    border: none;
    cursor: pointer;
    float: right;
}
.star-cb-group {
  unicode-bidi: bidi-override;
  direction: rtl;
  height: 50px;
  display: block;
  text-align: center;
  line-height: 50px;
}
.star-cb-group > input {
  display: none;
}
.star-cb-group > input + label {
  display: inline-block;
  cursor: pointer;
  width: 20px;
  height: 20px;
}
.star-cb-group > input + label:before {
    content: '';
    display: inline-block;  
    background: url("../Images/star.png") no-repeat -23px -1px;
    width: 20px;
    height: 19px;
}
.star-cb-group > input:checked ~ label:before, .star-cb-group > input + label:hover ~ label:before, .star-cb-group > input + label:hover:before {
    content: "";
    background: url("../Images/star.png") no-repeat -1px -1px;
}
.star-cb-group:hover > input + label:before {
  content: "";
    background: url("../Images/star.png") no-repeat -23px -1px;
}
.star-cb-group:hover > input + label:hover ~ label:before, .star-cb-group:hover > input + label:hover:before {
  content: "";
    background: url("../Images/star.png") no-repeat -1px -1px;
}
.paging {
    margin: 20px 0;
    text-align: center;
}

.paging span {
    width: 30px;
    height: 30px;
    display: inline-block;
    border: 1px solid #707790;
    line-height: 30px;
    color: #fff;
    background: #707790;
    font-weight: 700;
    text-decoration: none;
    margin-right: 5px;
}
.paging a {
    width: 30px;
    height: 30px;
    display: inline-block;
    border: 1px solid #707790;
    line-height: 30px;
    color: #707790;
    font-weight: 700;
    text-decoration: none !important;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    margin-right: 1px;
}
.paging a:hover {
    color: #fff;
    background: #707790;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.MyProductPrice del {
    font-size: 12px;
    color: #707790;
}

.Anasayfaalt {
    display: none!important;
}



div#orderStatus {
    margin: 40px 0;
}

div#orderStatus .VDA-70 {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.statusOne {
    display:  flex;
    margin-bottom: 30px;
}

.statusOne figure {
    border-radius:  10px;
    overflow:  hidden;
    margin-right:  5%;
}

.statusOne article {
    font-family:  'Roboto';
}

.statusOne article ul li {
    padding-bottom: 20px;
    border-bottom: 1px solid #d4d4d4;
    display:  flex;
    align-items:  center;
    justify-content:  space-between;
    padding-top: 20px;
}

.statusOne article ul li strong {
    width:  25%;
    display:  flex;
    height:  100%;
    align-items:  center;
    font-size: 16px;
    color: #0b1742;
}

.statusOne article ul li span {
    width: 75%;
    display:  flex;
    height:  100%;
    align-items:  center;
    font-size: 16px;
    color: #707790;
}

.statusOne article ul li p {
    margin: 0;
    font-size: 16px;
    color:  #707790;
}
.statusOne article ul li a {
    color:  #707790;
    text-decoration: underline;
}


.statusTwo {
    display:  flex;
    margin-bottom:  20px;
}

.statusTwo ul {
    font-family:  'Roboto';
}

.statusTwo ul li {
    padding-bottom: 20px;
    border-bottom: 1px solid #d4d4d4;
    display:  flex;
    align-items:  center;
    justify-content:  space-between;
    padding-top: 20px;
}

.statusTwo ul li strong {
    width:  25%;
    display:  flex;
    height:  100%;
    align-items:  center;
    font-size: 16px;
    color: #0b1742;
}

.statusTwo ul li span {
    width: 75%;
    display:  flex;
    height:  100%;
    align-items:  center;
    font-size: 16px;
    color: #707790;
}

.statusTwo ul li p {
    margin: 0;
    font-size: 18px;
    color:  #707790;
}
.statusTwo ul li a {
    color:  #707790;
    text-decoration: underline;
}


div#SifremiUnuttum {
    position: absolute;
    width: 100%;
    display: block;
    background: #e84242;
    left: 0;
    top: 55px;
    opacity: 0;
    pointer-events: none;
    height: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    z-index: 99999999;
}

div#SifremiUnuttum.Active {
    height: 300px;
    opacity: 1;
    pointer-events: auto;
    height: 240px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#SifremiUnuttum .Input input[type="text"] {
    margin: 0 auto;
    margin-bottom: 20px;
}
#SifremiUnuttum .Input input[type="submit"] {
    top: 230px;
}
div#SifremiUnuttum img {
    display: block;
    width: 51px;
    height: 41px;
    margin: 0 auto;
    margin-top: 30px;
}
div#SifremiUnuttum strong {
    font-family: 'Roboto';
    font-weight: 400;
    line-height: 50px;
    color: white;
    font-size: 20px;
    display: block;
    width: 100%;
    text-align: center;
    top: 0;
}
#SifremiUnuttum .Input input[type="submit"] {
    top: 180px;
}
#Completed #Toplam {
    float:  none;
    display:  inline-block;
    top: 0;
    margin-bottom: 20px;
    padding: 5px 12px;
}

#Completed #Toplam span {
}

span {}

#Completed #Toplam strong {
    margin-bottom:  0;
}
.List figure img {
    width: auto;
    height: 100%;
    border-radius: 10px;
}

.List figure a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
input.paymentButton {
    width: 164px;
    height: 45px;
    background: #8ec150;
    border-radius: 10px;
    text-align: center;
    line-height: 45px;
    display: block !important;
    margin-right: 15px;
    font-size: 14px;
    color: white;
    font-family: 'Roboto';
    border: none;
    cursor: pointer;
    margin: 40px auto 10px auto;
}
.Close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 27px;
    height: 27px;
}