@import url('reset.css');

@import url('font.css');

a:hover {
    text-decoration: none;
}
    div#haritaac.modal.fade.in{    
    visibility: visible;
}

div#haritaac.modal.fade{
    display: block;
    visibility: hidden;
}
.main-nav {
    -moz-user-select: none;
    background: #3d3d3d none repeat scroll 0 0;
    clear: both;
    display: block;
    line-height: 55px;
    min-height: 55px;
    position: relative;
}
 

.solmenu{
	width: 172px;
	border-bottom: 1px solid #d5d5d5;
	color: #3d3d3d;
	cursor: pointer;
	font-size: 16px;
	font-weight: 300;
	height: 52px;
	letter-spacing: -0.01em;
	line-height: 53px;

}

body { font-family: Arial;      color: #3d3d3d;
    }



.main {
	width: 1170px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
}



.FloaLeft { 
	width: 920px;
    float: right;
    padding: 0px;
    margin: 0px;
 }



.Golge { width: 198px; height: 29px; float: left; padding: 0px; margin-left: 4px; background: url(../img/golge-1.png) no-repeat;  }



.Golge300 { width: 300px; height: 29px; float: left; padding: 0px; margin-left: 4px; background: url(../img/golge-2.png) center no-repeat;  }



/** HEADER **/

.header { width: 100%; height: 110px; padding: 0px; margin: 0px; }

.logo { width: 170px; height: 110px; float: left; padding: 0px;}

.SosyalUst { width: 66px; height: 22px; float: left; padding: 0px; margin-top: 10px; margin-left: 75px;  }

.SosyalUst a { width: 22px; height: 22px; float: left; padding: 0px; margin: 0px;  }

.UstMenu { height: 22px; float: left; padding: 0px; margin-top: 10px; margin-left: 10px; }

.UstMenu a { height: 22px; line-height: 22px; float: left; padding-left: 10px; padding-right: 10px; font-size: 12px; color: #000; border-left: 1px solid #cccccc; }

.UstMenu a:hover { text-decoration: underline; } 

.FaceGiris { width: 135px; height: 22px; float: left; padding: 0px; margin-left: 10px; margin-top: 12px;  }

.FaceGiris a { float: left; padding-left: 25px; background: url(../img/facebook.png) left no-repeat; font-size: 12px; color: #000; }

.FaceGiris a:hover { text-decoration: underline; }

.CanliGiris { height: 22px; float: left; padding: 0px; margin-top: 12px;  }

.CanliGiris a { float: left; padding-left: 25px; font-size: 12px; color: #000; background: url(../img/canli-destek.png) left no-repeat ;  }

.CanliGiris a:hover { text-decoration: underline; }

.UstIlt { 
    float: left;
    padding: 0px;
    margin-top: 28px;
 }


.temizle
{
clear:both;
}
.Mutlu { width: 70px; height: 34px; float: left; padding: 0px; margin-top: 25px; margin-left: 130px;  }

.Mutlu a { width: 70px; height: 34px; float: left; padding: 0px; margin: 0px; background: url(../img/mutlu.jpg) no-repeat; }

.Mutlu a span { float: left; margin-top: 8px; margin-left: 8px; color: #fff; font-size: 16px; }



.Sepet1 { width: 70px; height: 34px; float: right; padding: 0px; margin-top: 25px; }

.Sepet1 a { width: 70px; height: 34px; float: left; padding: 0px; margin: 0px; background: url(../img/sepet1.jpg) no-repeat; }

.Sepet1 a span { float: left; margin-top: 8px; margin-left: 8px; color: #fff; font-size: 16px; }



/** TOP MENU **/

.TopMenuBg {  -moz-user-select: none;
    background: #3d3d3d none repeat scroll 0 0;
    clear: both;
    display: block;
    line-height: 45px;
    min-height: 45px;
    position: relative; }

.TopMenu { height:40px;width: 100%; float: left; padding: 0px; margin: 0px;  }

.TopMenu ul {  height:40px; width: 100%; float: left; padding: 0px; margin: 0px; }

.TopMenu ul li { margin-left: 30px !important; float: left; padding: 0px; margin: 0px; position: relative; }

.TopMenu ul li::before { color:#fff; }

.TopMenu ul li a {  padding-left: 10px; font-size: 16px; color: #fff;text-decoration: none; }

.TopMenu ul li a:hover { color: #1aa4dd;   }



.TopMenu ul li ul { width: 250px; position: absolute; top: 40px; left: 0px; background: #3d3d3d ; z-index: 9999; display: none; }

.TopMenu ul li ul li { width: 100%;  }

.TopMenu ul li ul li b { height: 60px; float: left; padding: 0px; margin-left: 20px; margin-top: 10px; color: #fff; font-size: 17px;   }

.TopMenu ul li ul li a { width: 210px; }





.TopMenu ul li.TMDestek { float: right; }

.TopMenu ul li.TMDestek a { height: 40px; line-height: 40px; float: left; padding-left: 30px; padding-right: 20px; font-size: 15px; color: #fff;  background: url(../img/destekIcın.jpg) center left no-repeat;  }

.TopMenu ul li.TMDestek a:hover { background: #fff;  color: #0071bd; }

.TopMenu ul .destek::before {
    position: relative;
    display: inline-block;
    content: '?';
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-top: -4px;
    background: #fff;
    font-family: 'proxima-nova'!important;
    font-size: 13px;
    font-weight: 700!important;
    color: #3d3d3d;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
}

.TopMenu ul li.TMSss { float: right; }

.TopMenu ul li.TMSss a { height: 40px; line-height: 40px; float: left; padding-left: 30px; padding-right: 20px; font-size: 15px; color: #fff;  background: url(../img/SssIcon.jpg) center left no-repeat;  }

.TopMenu ul li.TMSss a:hover { background: #fff;  color: #0071bd; }


.TopMenu ul li:hover > ul {
    display:block;
}


/** SLİDER **/

.SliderBg { width: 100%; height: 400px; float:right; padding: 0px; margin: 0px;   }

.Slider { float: right;
    height: 420px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 920px;
}
.Slider ul { float: left; }

.Slider ul li {  width: 73%; height: 400px; float: left; padding: 0px; margin: 0px; }


 
.SliderSayfa { width: 200px; height: 18px; padding: 0px; margin: 0px; position: absolute; right: 0px; top: 300px; z-index: 99; }

.SliderSayfa a { width: 18px; height: 18px; float: left; padding: 0px; margin-right: 5px; background: #fff; }

.SliderSayfa a:hover { background: #0171bd; }

.SliderSayfa a.yactive { background: #0171bd; }

.Slider ul li a img { width:1011px;height:400px; }



/** ORTA ALAN **/

.OrtaAlanBg{
	width: 1135px;
	height: 651px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	background: url(../img/anasayfa-golge.png) no-repeat;
}

.OrtaAlan { 
    padding: 0px;
    margin: 0px;
 }



.Tab { width: 100%; height: 60px; float: left; padding: 0px; margin-top: -60px; position: relative; z-index: 999; }

.Tab a { width: 490px; height: 60px; line-height: 60px; float: left; padding: 0px; margin: 0px; color:  #d4155a; text-align: center; font-size: 20px;  }

.Tab a:hover { width: 488px; height: 59px; line-height: 58px; float: left; color: #0071bd;  border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; background: #fff; }

.Tab a.tabActive { width: 488px; height: 59px; line-height: 58px; float: left; color: #0071bd;  border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; background: #fff; }



.Tabs { width: 100%; float: left; padding: 0px; margin: 0px;  }

.Tabs div#Tabs2 { display: none; }





.OrtaSlideBg { width: 100%; height: 251px; float: left; padding: 0px; margin-top: 20px; margin-bottom: 20px; }

.SlideGeri { width: 28px; height: 39px; float: left; padding: 0px; margin-top: 120px; margin-left: 10px;  }

.SlideGeri a { width: 28px; height: 39px; float: left; padding: 0px; margin: 0px; background: url(../img/sol-ok-gri.png) no-repeat; }

.SlideGeri a:hover { background: url(../img/sol-ok-slider-mavi.png) no-repeat; }



.SlideIleri { width: 27px; height: 39px; float: right; padding: 0px; margin-top: 120px; margin-right: 10px; }

.SlideIleri a { width: 27px; height: 39px; float: left; padding: 0px; margin: 0px; background: url(../img/sag-ok-slider-mavi.png) no-repeat; }

.SlideIleri a:hover { background: url(../img/sag-ok-slider-mavi.png) no-repeat; }



.OrtaSlide { width: 880px; height: 251px; float: left; padding: 0px; margin-left: 20px; overflow: hidden; }

.OrtaSlide ul { width: 198px; height: 249px; float: left; padding: 0px; margin-right: 20px; border: 1px solid #cccccc; }

.OrtaSlide ul li.OSBaslik { width: 100%; height: 40px; float: left; padding: 0px; margin: 0px; }

.OrtaSlide ul li.OSBaslik b { width: 100%; height: 40px; line-height: 40px; float: left; padding: 0px; margin: 0px; color: #0071bd; font-size: 18px; text-align: center; font-weight: 600; }

.OrtaSlide ul li.OSImg { width: 198px; height: 140px; float: left; padding: 0px; margin: 0px; background: url(../img/golge-1.png) bottom no-repeat; }

.OrtaSlide ul li.OSAciklama { width: 100%; height: 45px; float: left; padding: 0px; margin: 0px; }

.OrtaSlide ul li.OSAciklama p { width: 188px; float: left; padding: 0px; margin-left: 5px; text-align: left; color: #797979; font-size: 12px; }

.OrtaSlide ul li.OSLink { width: 100%; float: left; padding: 0px; margin-top: 0px;  }

.OrtaSlide ul li.OSLink a { width: 188px; float: left; padding: 0px; margin: 0px; text-align: center; font-size: 12px; color: #de5082; }

.OrtaSlide ul li.OSLink a:hover { color: #0071bd; }



.AnaAltKat { width: 471px; height: 211px; float: left; padding: 0px; margin-left: 15px; background: url(../img/anasayfa-alt-katagoriler2.png) no-repeat; }



.TYukle { width: 956px; height: 225px; float: left; padding: 0px; margin-top: 40px; margin-left: 20px;  }

.TYukle ul { float: left; padding: 0px; margin: 0px; }

.TYukle ul li { width: 225px; height: 225px; float: left; padding: 0px; margin-right: 14px; }

.TYukle ul li a { width: 225px; height: 225px; float: left; padding: 0px; margin: 0px; background: #28c78f; }

.TYukle ul li a span.TYImg { width: 85px; height: 85px; float: left; padding: 0px; margin-top: 50px; margin-left: 70px; }

.TYukle ul li a span.TYLink { width: 100%; float: left; padding: 0px; margin-top: 45px; color: #fff; font-size: 15px; text-align: center; }

.TYukle ul li a:hover { background: #d3145a; }









.ikonlar { width: 700px; height: 150px; float: left; padding: 0px; margin-top: 40px; margin-left: 20px;  }

.ikonlar ul { float: left; padding: 0px; margin: 0px; }

.ikonlar ul li { width: 150px; height: 150px; float: left; padding: 0px; margin-right: 14px; }

.ikonlar ul li a { width: 150px; height: 150px; float: left; padding: 0px; margin: 0px; background: #28c78f; }

.ikonlar ul li a span.img { width: 60px; height: 60px; float: left; padding: 0px; margin-top: 50px; margin-left: 30px; }

.ikonlar ul li a span.Link { width: 100%; float: left; padding: 0px; margin-top: 45px; color: #fff; font-size: 15px; text-align: center; }

.ikonlar ul li a:hover { background: #d3145a; }







.AnaAltKat2 { width: 464px; height: 178px; float: left; padding: 0px; margin-top: 25px; margin-left: 20px; }



.AnaAltKat3 { width: 965px; height: 210px; float: left; padding: 0px; margin-top: 10px; overflow: hidden; background: url(../img/yorumlar-bg.png) no-repeat; }

.AnaAltKat3 ul { width: 100%; height: 210px; float: left; }

.AnaAltKat3 ul li { width: 810px; height: 150px; float: left; padding: 0px; margin-left: 78px; margin-top: 25px; overflow: hidden; }

.AnaAltKat3 ul li b { min-width: 400px; float: left; padding: 0px; margin-top: 20px; font-size: 20px; font-weight: 600; color: #0071bd;  }

.AnaAltKat3 ul li p { width: 100%; float: left; padding: 0px; margin-top: 10px; color: #797979; font-size: 12px; }



.YrmHit { width: 100%; float: left; }



.AnaAltKat33 { width: 965px; height: 210px; float: left; padding: 0px; margin-top: 10px; overflow: hidden; background: url(../img/yorumlar-bg.png) no-repeat; }

.AnaAltKat33 ul { width: 100%; height: 210px; float: left; }

.AnaAltKat33 ul li { width: 810px; height: 150px; float: left; padding: 0px; margin-left: 78px; margin-top: 25px; overflow: hidden; }

.AnaAltKat33 ul li b { min-width: 400px; float: left; padding: 0px; margin-top: 20px; font-size: 20px; font-weight: 600; color: #0071bd;  }

.AnaAltKat33 ul li p { width: 100%; float: left; padding: 0px; margin-top: 10px; color: #797979; font-size: 12px; }



.YrmHit2 { width: 100%; float: left; }







/** FOOTER **/

.FooterBg { width: 100%; height: 250px; float: left; padding: 0px; margin-top: 25px; background: #fff; }



.Footer { width: 100%; float: left; padding: 0px; margin-top: 10px;  }

.Footer hr{background:linear-gradient(to right, #fac26a 0%, #f66f54 20%, #7bd793 44%, #b89eee 100%);}
.social{
	margin-top:25px !important;
}

.social i {
       position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 51px;
    height: 51px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    text-align: center;
    line-height: 51px;
    background: transparent;
}



.Footer ul.FooterMenu { width: 200px; height: 155px; float: left; padding: 0px; margin: 0px; margin-top:25px; }

.Footer ul.FooterMenu li { width: 100%; float: left; padding: 0px; margin-bottom: 5px; margin-top:10px; }

.Footer ul.FooterMenu li p { float: left; margin-bottom: 5px; font-size: 18px; color: #0071bd;  }

.Footer ul.FooterMenu li a { font-size: 14px; color: #3D3D3D; }

.Footer ul.FooterMenu li a:hover { text-decoration: underline; }



.FooterAlt { width: 100%; height: 25px; float: left; padding: 0px; margin: 0px; margin-top:60px; }

.FooterAlt li.Con { height: 25px; float: left; padding: 0px; margin: 0px; margin-left:25%; }

.FooterAlt li.Con p { height: 25px; line-height: 25px; float: left; padding: 0px; margin: 0px; color: #000; font-size: 14px; }

.FooterAlt li.FotSos { width: 22px; height: 22px; float: right; padding: 0px; margin-top: 2px; }



/** SayfaBaslikBg **/

.SayfaBaslikBg { width: 100%; height: 60px; float: left; padding: 0px; margin: 0px; background: #cce3f1; }

.SayfaBaslik { width: 100%; height: 60px; float: left; padding: 0px; margin: 0px; }

.SayfaBaslik b { height: 60px; line-height: 60px; float: left; padding: 0px; margin: 0px; color: #d4155a; }



/** İLETİŞİM **/

.Iletisim { width: 100%; min-height: 485px;  float: left; padding: 0px; margin-top: 25px; }

.Iletisim ul.IltForm { width: 330px; float: left; padding: 0px; margin: 0px; }

.Iletisim ul.IltForm li { width: 100%; float: left; padding: 0px; margin-bottom: 10px; }

.Iletisim ul.IltForm li p { width: 100%; float: left; padding: 0px; margin-bottom: 4px; font-size: 14px; color: #0071bd; }

.Iletisim ul.IltForm li .IltText { width: 280px; height: 32px; float: left; padding-left: 10px; padding-right: 10px; margin: 0px;  }

.Iletisim ul.IltForm li .IltTxta { width: 280px; height: 90px; float: left; padding: 10px; }

.Iletisim ul.IltForm li a { width: 100px; height: 30px; line-height: 30px; float: right; padding: 0px; margin-right: 30px; background: #0071bd; color: #fff; font-size: 14px; text-align: center; }

.Iletisim ul.IltForm li a:hover { background: #d4155a; }



.Iletisim ul.IltHarita { width: 350px; height: 310px; float: left; padding: 0px; margin-top: 19px; border: 1px solid #cccccc; }



.Iletisim ul.IltAdres { width: 275px; min-height: 360px; float: left; padding: 0px; margin-left: 20px; margin-bottom: 20px; border-left: 1px solid #cccccc;  }

.Iletisim ul.IltAdres li { float: left; padding: 0px; margin-left: 15px; margin-top: 19px; }

.Iletisim ul.IltAdres li b { width: 100%; float: left; padding: 0px; margin-bottom: 5px; color: #d4155a; font-size: 14px; }

.Iletisim ul.IltAdres span { width: 14px; height: 28px; float: left; padding: 0px; margin: 0px; }

.Iletisim ul.IltAdres p { width: 200px; float: left; margin-left: 10px; font-size: 12px; color: #797979; }



/** ÜYELİK **/

.Uyelik { width: 100%; min-height: 485px;  float: left; padding: 0px; margin-top: 25px; }

.Uyelik ul.UyeForm { width: 350px; float: left; padding: 0px; margin: 0px; }

.Uyelik ul.UyeForm li { width: 100%; float: left; padding: 0px; margin-bottom: 10px; }

.Uyelik ul.UyeForm li p { width: 100%; float: left; padding: 0px; margin-bottom: 4px; font-size: 14px; color: #0071bd; }

.Uyelik ul.UyeForm li .IltText {     border: 1px solid #D0D0D0;width: 280px; height: 32px; float: left; padding-left: 10px; padding-right: 10px; margin: 0px;  }

.Uyelik ul.UyeForm li .IltTxta { width: 280px; height: 90px; float: left; padding: 10px; }

.Uyelik ul.UyeForm li a { width: 100px; height: 30px; line-height: 30px; float: right; padding: 0px; margin-right: 50px; background: #0071bd; color: #fff; font-size: 14px; text-align: center; }

.Uyelik ul.UyeForm li a:hover { background: #d4155a; }



.Uyelik ul.UyeYazi { width: 250px; min-height: 360px; float: left; padding: 0px; margin-left: 20px; margin-bottom: 20px; border-left: 1px solid #cccccc;  }

.Uyelik ul.UyeYazi li { float: left; padding: 0px; margin-left: 15px; margin-top: 19px; }

.Uyelik ul.UyeYazi li b { width: 100%; float: left; padding: 0px; margin-bottom: 5px; color: #d4155a; font-size: 14px; }

.Uyelik ul.UyeYazi span { width: 14px; height: 28px; float: left; padding: 0px; margin: 0px; }

.Uyelik ul.UyeYazi p { width: 390px; float: left; margin-left: 10px; font-size: 12px; color: #797979; }





/** kARTVİZİT TASARLA **/

.SolAalan { width: 800px; min-height: 500px; float: left; padding: 0px; margin-top: 25px; }

.SagAlan { width: 302px; float: right; padding: 0px; margin-top: 25px; }


/*
.KartTasarla { width: 658px; height: 400px; float: left; padding: 0px; margin: 0px; position: relative; z-index: 1; border: 1px solid #000; overflow: hidden; }

.OnYuz { width: 658px; height: 400px; float: left; padding: 0px; margin: 0px; }
.OnYuzKartvizit { }
.OnYuzBrosur { }
.OnYuzDavetiye { }


.ArkaYuz { width: 658px; height: 400px; float: left; padding: 0px; margin: 0px; display: none; }
.ArkaYuzKartvizit { }
.ArkaYuzBrosur { }
.ArkaYuzDavetiye { }

*/

.KartTasarla { width: 800px; height: 500px; float: left; padding: 0px; margin: 0px; position: relative; z-index: 1; border: 1px solid #000; overflow: hidden; }
.BrosurTasarla { width: 800px; height: 500px; float: left; padding: 0px; margin: 0px; position: relative; z-index: 1; border: 1px solid #000; overflow: hidden; }
.DavetiyeTasarla { width: 800px; height: 500px; float: left; padding: 0px; margin: 0px; position: relative; z-index: 1; border: 1px solid #000; overflow: hidden; }

.OnYuz { float: left; padding: 0px; margin: 0px; }
.OnYuzKartvizit { width: 800px; height: 500px; }
.OnYuzBrosur { width: 800px; height: 500px; }
.OnYuzDavetiye { width: 800px; height: 500px; }


.ArkaYuz { float: left; padding: 0px; margin: 0px; display: none; }
.ArkaYuzKartvizit { width: 800px; height: 500px; }
.ArkaYuzBrosur { width: 800px; height: 500px; }
.ArkaYuzDavetiye { width: 800px; height: 500px; }



.Cizgi { width: 642px; height: 384px; padding: 0px; margin: 0px; position: absolute; top: 7px; z-index: 0; left: 7px; border: 1px dashed #555555;  }

.Cizgi2 { width: 642px; height: 484px; padding: 0px; margin: 0px; position: absolute; top: 7px; z-index: 0; left: 7px; border: 1px dashed #555555;  }



.Asd { width: 214px; height: 484px; float: left;  margin-left: 222px; margin-top: 7px; border: 1px dashed #555555; border-top: none; border-bottom: none;  }



.Cer1 { width: 781px; height: 1px; position: absolute; top: 7px; left: 7px; background: url(../img/cer1.png) no-repeat; z-index: 9999;  }

.Cer2 { width: 1px; height: 486px; position: absolute; top: 7px; right: 7px; background: url(../img/cer2.png) no-repeat;  z-index: 9999; }

.Cer3 { width: 781px; height: 1px; position: absolute; bottom: 7px; left: 7px; background: url(../img/cer3.png) no-repeat; z-index: 9999; }

.Cer4 { width: 1px; height: 486px; position: absolute; top: 7px; left: 7px; background: url(../img/cer4.png) no-repeat; z-index: 9999;  }

.Cer5 { width: 1px; height: 486px; position: absolute; top: 7px; left: 7px; background: url(../img/cer5.png) no-repeat; z-index: 9999;  }

.Cer6 { width: 1px; height: 486px; position: absolute; top: 7px; right: 7px; background: url(../img/cer5.png) no-repeat; z-index: 9999;  }

 



.TasSag { width: 100%; float: left; padding: 0px; margin: 0px; }

.TasSag ul { width: 100%; float: left; padding: 0px; margin: 0px; }

.TasSag ul li { width: 100%; float: left; padding: 0px; margin-bottom: 15px; }



.TSLink1 { width: 133px; height: 34px; line-height: 34px; font-size: 15px; color: #fff; float: left; padding: 0px; margin: 0px; }

.TSLink1:hover { color: #000; }

.TSLink1Active { color: #000; }



.TSLink2 { width: 126px; height: 30px; line-height: 30px; text-align: center; font-size: 15px; color: #fff; float: left; padding: 0px; margin: 0px; background: url(../img/Link2.jpg) no-repeat; }

.TSLink3 { width: 126px; height: 30px; line-height: 30px; text-align: center; font-size: 15px; color: #fff; float: left; padding-left: 5px; margin-left: 10px; background: url(../img/Link3.jpg) no-repeat; }

.TSLink4 { width: 126px; height: 30px; line-height: 30px; text-align: center; font-size: 15px; color: #fff; float: left; padding: 0px; margin: 0px; background: url(../img/Link4.jpg) no-repeat; }

.TSLink5 { width: 126px; height: 30px; line-height: 30px; text-align: center; font-size: 15px; color: #fff; float: left; padding: 0px; margin-left: 10px; background: url(../img/Link5.jpg) no-repeat; }

.TSLink6 { width: 126px; height: 30px; line-height: 30px; text-align: center; font-size: 15px; color: #fff; float: left; padding: 0px; margin-left: 10px; background: url(../img/Link6.jpg) no-repeat; }




.UrunDetay2 { width: 100%; float: left; padding: 0px; }

.UrunDetay2 ul.DtyBaslik { width: 300px; min-height: 130px; float: left; padding: 0px; margin: 0px; background: #f8f9fb; border: 1px solid #d8d8d8; }

.UrunDetay2 ul.DtyBaslik li { width: 100%; float: left; padding: 0px; margin-top: 15px; }

.UrunDetay2 ul.DtyBaslik li b { float: left; padding: 0px; margin-left: 15px; font-size: 20px; font-weight: 600; color: #0171bb; }

.UrunDetay2 ul.DtyBaslik li p { float: left; padding: 0px; margin-left: 15px; font-size: 12px; color: #555555; }



.UrunDetay2 ul.DtyAlt { width: 300px; min-height: 200px; float: left; padding: 0px; margin-top: 25px; background: #f8f9fb;  border: 1px solid #d8d8d8; }

.UrunDetay2 ul.DtyAlt li { width: 100%; float: left; padding: 0px; margin: 0px; }

.UrunDetay2 ul.DtyAlt li span.dtySpn1 { width: 103px; height: 68px; float: left; padding: 0px; margin-top: 10px; margin-left: 10px; }

.UrunDetay2 ul.DtyAlt li span.dtySpn2 {  height: 58px; float: left; padding: 0px; margin-top: 20px; margin-left: 38px; }

.UrunDetay2 ul.DtyAlt li span.dtySpn2 p { font-size: 20px; color: #0171bb; } 

.UrunDetay2 ul.DtyAlt li span.dtySpn3 { width: 202px; height: 34px; float: left; padding: 0px; margin-top: 10px; margin-left: 49px;  }

.UrunDetay2 ul.DtyAlt li span.dtySpn4 { width: 202px; height: 34px; float: left; padding: 0px; margin-top: 10px; margin-left: 49px; }

.UrunDetay2 ul.DtyAlt li span.dtySpn4 a { width: 100%; height: 34px; line-height: 34px; float: left; padding: 0px; margin: 0px; color: #fff; font-size: 14px; text-align: center; background: #0071bd; }

.UrunDetay2 ul.DtyAlt li span.dtySpn4 a:hover { background: #0d8ade; }

.UrunDetay2 ul.DtyAlt li span.dtySpn5 { width: 277px; height: 16px; float: left; padding: 0px; margin-top: 10px; margin-left: 11px; }



.TopAlan { width: 100%; height: 50px; float: left; padding: 0px; margin: 0px; background: #e5e5e5; }

.TopAlan ul { width: 100%; float: left; padding: 0px; margin: 0px; }

.TopAlan ul li { height: 34px; float: left; padding: 0px; margin-top: 9px; margin-right: 5px;   }

.TopAlan ul li a { height: 32px; float: left; padding: 0px; margin: 0px; border: 1px solid #cccccc; }





.ustAlan { width: 100%; height: 52px; float: left; padding: 0px; margin: 0px; border-bottom: 1px solid #cccccc; background: #f5f5f5; }

.ustAlan ul { width: 100%; float: left; padding: 0px; margin: 0px; }

.ustAlan ul li { height: 34px; float: left; padding: 0px; margin-top: 10px; margin-right: 5px; }

.ustAlan ul li a { height: 32px; float: left; padding: 0px; margin: 0px; border: 1px solid #cccccc; }



.FamilySelect { min-width: 110px; float: left; padding-top: 6px; padding-bottom: 6px;  margin-left: 22px; background: #fff; color: #000;   }

.sizeSelect { float: left; padding-top: 6px; padding-bottom: 6px; background: #fff; color: #000;   }



.Renkler { width: 305px; height: 395px; padding-left: 5px; padding-top: 5px; position: absolute; left: 20px; top: 40px; background: #fff; border: 1px solid #f1f1f1; z-index: 999; display: none; }

.Renkler span { cursor: pointer; width: 26px; height: 26px; float: left; padding: 0px; margin: 2px; display: block; }



.BgRenkler { width: 305px; height: 395px; padding-left: 5px; padding-top: 5px; position: absolute; left: 20px; top: 40px; background: #fff; border: 1px solid #f1f1f1; z-index: 999; display: none; }

.BgRenkler span { cursor: pointer; width: 26px; height: 26px; float: left; padding: 0px; margin: 2px; display: block; }



.RenkSekil { width: 305px; height: 395px; padding-left: 5px; padding-top: 5px; position: absolute; left: 20px; top: 40px; background: #fff; border: 1px solid #f1f1f1; z-index: 999; display: none; }

.RenkSekil span { cursor: pointer; width: 26px; height: 26px; float: left; padding: 0px; margin: 2px; display: block; }





/** **/

.SablonBg { width: 100%; float: left; padding: 0px; margin: 0px; }

.SablonBg a { width: 100px; height: 100px; float: left; padding: 0px; margin-right: 10px; margin-bottom: 10px; }







/** LEFT **/

.Left { width: 235px; min-height: 500px; float: left; padding: 0px; margin: 0px; border-right: 1px solid #cccccc;  }



.LeftMenu { width: 235px; float: left; margin-top: 25px;  }

.LeftMenu b { float: left; padding: 0px; margin-bottom: 10px; font-size: 20px; font-weight: 600; color: #0071bd; }

.LeftMenu ul { width: 220px; float: left; padding: 0px; margin-left: 10px; }

.LeftMenu ul li { width: 100%; min-height: 40px; float: left; padding: 0px; margin: 0px; border-bottom: 1px solid #cccccc; }

.LeftMenu ul li a { width: 100%; min-height: 40px; line-height: 34px; float: left; padding: 0px; margin: 0px; font-size: 14px; color: #7a7a7a; }

.LeftMenu ul li a:hover { color: #d4155a; }



.LeftMenu ul li p { width: 100%; min-height: 34px; line-height: 34px; float: left; padding: 0px; margin: 0px; font-size: 15px; font-weight: bold; }





/** RİGHT **/

.Right { width: 700px; float: left; padding: 0px; margin: 25px 20px; }



/** SSS **/

.Sss { width: 100%; float: left; padding: 0px; margin: 0px; }

.Sss ul { width: 350px; float: left; padding: 0px; margin-bottom: 50px;  }

.Sss ul li { width: 100%; float: left; padding: 0px; margin-bottom: 5px;  }

.Sss ul li b { width: 205px; height: 31px; line-height: 31px; float: left; padding-left: 10px; font-size: 15px; color: #0071bd; background: #f5f6f8; border: 1px solid #cbe0f5; }

.Sss ul li a { min-height: 21px; line-height: 21px; float: left; padding-left: 20px; margin-left: 10px; color: #000; font-size: 14px; background: url(../img/dosya.jpg) center left no-repeat; }

.Sss ul li a:hover { text-decoration: underline; }





/** Urunler **/

.Urunler { 
    width: 100%;
    float: right;
    padding: 0px;
    margin: 0px;
 }

.Urunler ul {list-style-type: none;
    display: table;
    width: 100%;padding:10px;}

.Urunler ul li {     width: 25%;
    float: left;
    padding: 10px;
    background: #fff;}

.Urunler ul li div {
    position:relative;
    overflow: hidden;
}

.Urunler ul li div:hover > .alt {
    bottom:0px;
}

.Urunler ul li div .basla {
    position:absolute;
    bottom:0px;
    top:0px;
    right:0px;
    left:0px;
    text-align: center;
}

.Urunler ul li div .basla:hover > a {
    opacity:1;
}

.Urunler ul li div .basla a {
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    text-decoration: none;
    margin-top:70px;
    transition: all .3s ease;
    opacity:0;
}

.Urunler ul li div .basla i {
    margin-left:5px;
}

.Urunler ul li div .alt {
    position:absolute;
    bottom:-30px;
    width:100%;
    background-color:rgba(0,0,0,0.6);
    padding:5px;
	transition: all .3s ease;
}

.Urunler ul li div .tasarla {
    width:50%;
    float:left;
    text-align: center;
}

.Urunler ul li div .favori {
    width:50%;
    float:right;
    text-align: center;
}


.Urunler ul li div i {
    margin-left:auto;
    margin-right:auto;
}

.Urunler ul li div img {
    width:100%;
}

.Urunler ul li .alt a { font-size: 20px; color: #fff;text-decoration:none; opacity:0.6; transition: all .3s ease;}
.Urunler ul li .alt a:hover { opacity:1; }

.Urunler ul li .content {
    text-align: center;
    min-height: 100px;
    padding-top: 10px;
}

.Urunler ul li .content h1 {
    font-size:20px !important;
}

.Urunler ul li .content h2 {
    font-size:12px !important;    
    color: #999;
    padding:0px;
    margin-bottom:5px;
    margin-top:5px;
}

.Urunler ul li .content h3 {
    font-size:12px !important;
    color: #11a1dc;
}

/** UrunDetay **/

.UrunDetay { width: 100%; float: left; padding: 0px; margin-top: 25px; }

.UrunDetay ul.DtyBaslik { width: 300px; min-height: 130px; float: left; padding: 0px; margin: 0px; background: #f8f9fb; border: 1px solid #d8d8d8; }

.UrunDetay ul.DtyBaslik li { width: 100%; float: left; padding: 0px; margin-top: 15px; }

.UrunDetay ul.DtyBaslik li b { float: left; padding: 0px; margin-left: 15px; font-size: 20px; font-weight: 600; color: #0171bb; }

.UrunDetay ul.DtyBaslik li p { float: left; padding: 0px; margin-left: 15px; font-size: 12px; color: #555555; }



.UrunDetay ul.DtyResim { width: 660px; min-height: 500px; float: right; padding: 0px; margin: 0px; }

.UrunDetay ul.DtyResim li.BuyukR { width: 100%; height: 350px; float: left; padding: 0px; margin: 0px; }

.UrunDetay ul.DtyResim li.KucukR { width: 100%; float: left; padding: 0px; margin-top: 25px; }









.UrunDetay ul.DtyAlt { width: 300px; min-height: 200px; float: left; padding: 0px; margin-top: 25px; background: #f8f9fb;  border: 1px solid #d8d8d8; }

.UrunDetay ul.DtyAlt li { width: 100%; float: left; padding: 0px; margin: 0px; }

.UrunDetay ul.DtyAlt li span.dtySpn1 { width: 103px; height: 68px; float: left; padding: 0px; margin-top: 10px; margin-left: 10px; }

.UrunDetay ul.DtyAlt li span.dtySpn2 {  height: 58px; float: left; padding: 0px; margin-top: 20px; margin-left: 38px; }

.UrunDetay ul.DtyAlt li span.dtySpn2 p { font-size: 20px; color: #0171bb; } 

.UrunDetay ul.DtyAlt li span.dtySpn3 { width: 202px; height: 34px; float: left; padding: 0px; margin-top: 10px; margin-left: 49px;  }

.UrunDetay ul.DtyAlt li span.dtySpn4 { width: 202px; height: 34px; float: left; padding: 0px; margin-top: 10px; margin-left: 49px; }

.UrunDetay ul.DtyAlt li span.dtySpn4 a { width: 100%; height: 34px; line-height: 34px; float: left; padding: 0px; margin: 0px; color: #fff; font-size: 14px; text-align: center; background: #0071bd; }

.UrunDetay ul.DtyAlt li span.dtySpn4 a:hover { background: #0d8ade; }

.UrunDetay ul.DtyAlt li span.dtySpn5 { width: 277px; height: 16px; float: left; padding: 0px; margin-top: 10px; margin-left: 11px; }



/** SEPETİM **/

.Sepetim { width: 100%;  float: left; padding: 0px; margin-bottom: 50px; background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

.Sepetim ul.SBaslik { width: 980px; height: 30px; float: left; padding: 0px; margin-top: 25px; margin-left: 0px; background: #3d3d3d; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;  }

.Sepetim ul.SBaslik li { height: 30px; line-height: 30px; float: left; padding: 0px; margin: 0px; text-align: center; color: #fff; font-size: 14px; border-right: 1px solid #FFF;  }

.Sepetim ul.SBaslik li:last-child { border: none; }



.Sepetim ul.SIcerik {  width: 980px; height: 75px; float: left; padding: 0px; margin-left: 0px; border-bottom: 1px solid #d0d0d0;  }

.Sepetim ul.SIcerik li { height: 75px; line-height: 75px; float: left; padding-left: 5px; border-right: 1px solid #d0d0d0; font-size: 13px;  }

.Sepetim ul.SIcerik li:first-child { border-left: 1px solid #d0d0d0; }

.Sepetim ul.SIcerik li a { color: #3f7bbf; }

.Sepetim ul.SIcerik li a:hover { text-decoration: underline; }



.SepetTxt { width: 55px; height: 22px; border: 1px solid #d2d2d2; background: url(../img/txtBg.jpg) repeat-x; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }



.Sepetim ul.SAlt { width: 100%; float: left; padding-bottom: 10px; margin-left: 0px; margin-top: 25px; border-bottom: 1px solid #3d3d3d; }

.Sepetim ul.SAlt li { width: 200px; float: left; margin-left: 774px; margin-bottom: 10px;  }

.Sepetim ul.SAlt li p { width: 120px; font-size: 12px; float: left; padding: 0px; margin: 0px; text-align: right;}

.Sepetim ul.SAlt li span { font-size: 12px; float: right;}



.Sepetim ul.SLink { width: 214px; height: 40px; float: right; padding: 0px; margin: 0px;  }

.Sepetim ul.SLink li { float: left; }

.Sepetim ul.SLink li a { width: 216px; height: 40px; line-height: 40px; float: left; padding: 0px; margin-top: 20px; color: #fff; text-align: center; background: #3f7bbf; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

.Sepetim ul.SLink li a:hover { background: #4a83c4; }





/** ÖDEME ŞEKLİ **/

.OSec { width: 100%; float: left; padding: 0px;  background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

.OSec ul { float: left; padding: 35px; margin: 30px;  border: 1px solid #ededed; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

.OSec ul li { width: 894px; float: left; margin-bottom: 10px; }

.OSec ul li p { font-size: 14px; font-weight: bold; float: left; margin-bottom: 10px; color: #3f7bbf; }

.OSec ul li a { color: #3f7bbf; }

.OSec ul li a:hover { text-decoration: underline; }



/** SATIN AL **/

.SatinAl { width: 100%; float: left; padding: 0px; margin-bottom: 50px; background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;  }

.SatinAl ul { width: 550px; float: left; padding: 0px; margin: 0px; }

.SatinAl ul li { width: 275px; float: left; padding: 0px; margin-bottom: 20px; }

.SatinAl ul li p { width: 100%; float: left; padding: 0px; margin-bottom: 8px; font-size: 13px; }

.SatinAl ul li span { float: left; padding: 0px; margin-right: 15px; margin-left: 5px; }

.SatinAl ul li a { width: 216px; height: 40px; line-height: 40px; float: left; padding: 0px; margin-top: 20px; color: #fff; text-align: center; background: #3f7bbf; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

.SatinAl ul li a:hover { background: #4a83c4; }



.SatinAlbor { width: 894px;  float: left; padding: 35px; margin: 30px;  border: 1px solid #ededed; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }



/** SONUÇ SAYFASI **/

.Sonuc { width: 100%; float: left; padding: 0px; margin-bottom: 400px; background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

.Sonuc ul { float: left; padding: 35px; margin: 30px;  border: 1px solid #ededed; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

.Sonuc ul li { width: 894px; float: left; margin-bottom: 10px; }

.Sonuc ul li .basarili { width: 100%; float: left; font-size: 18px; color: #05a90c; margin-bottom: 25px; }

.Sonuc ul li .hatali { width: 100%; float: left; font-size: 18px; color: #8d0c15; margin-bottom: 25px; }



.Sonuc ul a { width: 175px; height: 40px; line-height: 40px; float: left; padding: 0px; margin-top: 20px; margin-right: 25px; color: #fff; text-align: center; background: #3f7bbf; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

.Sonuc ul a:hover { background: #4a83c4; }







/** Icerik **/

.Icerik { width: 100%; min-height: 500px; float: left; padding: 0px; margin-top: 25px; }

.Icerik ul { width: 100%; float: left; }

.Icerik ul li { width: 100%; float: left; padding: 0px; margin-bottom: 15px; }

.Icerik ul li p { font-size: 13px; }



.swatch { width: 312px; float: left; }

.swatch a { width: 26px; height: 26px !important; float: left; padding: 0px; margin: 1px !important; border: none; }



/** CLASS **/

.UOTxt { width: 215px; height: 22px; float: left; padding: 0px; margin: 0px; border: 1px solid #d2d2d2; background: url(../img/txtBg.jpg) repeat-x; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

.UOTxt2 { width: 213px; height: 144px; float: left; padding: 0px; margin: 0px; border: 1px solid #d2d2d2; background: url(../img/txtBg2.jpg) repeat-x; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }



.Tamam { width: 95%; height: 45px; line-height: 45px; float: left; padding-left: 10px; margin-left: 10px; margin-bottom: 10px; background: #72ef0d; color: #fff; font-size: 14px; }

.Hata { width: 95%; height: 45px; line-height: 45px; float: left; padding-left: 10px; margin-left: 10px; margin-bottom: 10px; background: #e2233e; color: #fff; font-size: 14px; }


.button:hover, .button.hover {
    border-color: #3d3d3d;
    color: #3d3d3d;
}
.button.hover:hover {
    background: #3d3d3d;
    color: #fff;
}
.button.hover:hover:before {
    color: #fff;
}
.button.hover:before {
    color: #3d3d3d;
}
.button {
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    appearance: none!important;
    padding: 15px 22px;
    border: 1px solid #a5a8ab;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 400;
    color: #a5a8ab;
    letter-spacing: -.025em;
    text-align: center;
}
.button:before {
    color: #a5a8ab;
}
.upload-work {
    margin-right: 20px;
    vertical-align: middle;
}

.shopping-beg {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border: 1px solid #a5a8ab;
    border-radius: 9999px;
    line-height: 50px;
    text-align: center;
    float: left;
	margin-top:30px;
}
.shopping-beg:before {
    position: relative;
    display: block;
    font-size: 23px;
    line-height: 48px!important;
    color: #a5a8ab;
}
.shopping-beg:hover {
    border-color: #3d3d3d;
}
.sepetimyeni span{
    position: absolute;
    display: block;
    content: attr(data-number);
    top: 0;
    left: 90%;
    width: auto;
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    letter-spacing: -.01em;
    border-radius: 9px;
    background: #f2772d;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.favori-beg {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border: 1px solid #a5a8ab;
    border-radius: 9999px;
    line-height: 50px;
    text-align: center;
	float: left;
    margin-top: 30px;
    margin-left: 20px;
}
.favori-beg:before {
    position: relative;
    display: block;
    font-size: 23px;
    line-height: 48px!important;
    color: #a5a8ab;
}
.favori-beg:hover {
    border-color: #3d3d3d;
}
.favoriyeni span{
    position: absolute;
    display: block;
    content: attr(data-number);
    top: 0;
    left: 90%;
    width: auto;
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    letter-spacing: -.01em;
    border-radius: 9px;
    background: #f2772d;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

a {
    text-decoration: none !important;
}

.calismayukle{
	float: left;
    margin-top: 35px;
    margin-left: 30px;
}

.oturum{
	float: left;
    margin-top: 30px;
    margin-left: 30px;
    border: 1px solid #a5a8ab;
    border-radius: 9999px;
    line-height: 50px;
    text-align: center;
    padding-left:10px;
    padding-right:10px;
}

.oturum a {
    padding-left:5px;
    padding-right:5px;
    color:#a5a8ab;
    font-size: 15px;
    text-decoration: none;
}

.search {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    margin-left: 50px;
}
.search:before {
    z-index: 1;
    position: absolute;
    display: block;
    bottom: 5px;
    left: 20px;
    font-size: 22px;
    line-height: 100%;
    color: #c4c4c4;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.search-input {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 50px;
    padding: 0 95px 0 52px;
    font-size: 17px;
    font-weight: 400;
    color: #3d3d3d;
    border: 3px solid #a5a8ab;
    border-radius: 9999px;
    background: #fff;
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    appearance: none!important;
}
input {
    line-height: normal;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
.search-submit:hover {
    background-color: transparent;
    color: #a5a8ab;
}
.search-submit {
    position: absolute;
    display: block;
    width: 75px;
    height: 55px;
    bottom: 0;
    right: 0;
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    line-height: 40px;
    text-align: center;
    border-radius: 0 9999px 9999px 0;
    border: 3px solid #a5a8ab;
    background: #a5a8ab;
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    appearance: none!important;
}
.arama_alan{
	margin: 27px 150px;
    float: right;
    position: absolute;
}

.categories {
    position: relative;
    display: inline-block;
    vertical-align: top;
}
.categories>a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 25px;
    font-size: 16px;
    color: #fff;
}
.categories>a:hover {
    color: #1aa4dd;
}
.categories-toggle {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 48px;
    cursor: pointer;
    background: transparent;
    bottom: 3px;
}
.categories.active .categories-toggle {
    background: #fff;
}
.categories-toggle:before {
    position: absolute;
    display: block;
    content: '';
    width: 23px;
    height: 2px;
    top: 50%;
    left: 50%;
    background: #fff;
    box-shadow: 0 -7px 0 0 #fff,
 0 7px 0 0 #fff;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.categories.active .categories-toggle:before {
    background: #3d3d3d;
    box-shadow: 0 -7px 0 0 #3d3d3d,
 0 7px 0 0 #3d3d3d;
}
.categories.active .categories-dropdown {
    display: block;
}
.categories-dropdown {
    z-index: 998;
    top: 100%;
    left: 0;
    width: 250px;
    margin: 0 -1px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-top: 0;
    text-align: left;
}
.categories-dropdown>* {
    display: block;
    height: 52px;
    font-size: 16px;
    font-weight: 300;
    color: #3d3d3d;
    letter-spacing: -.01em;
    line-height: 53px;
    cursor: pointer;
    border-bottom: 1px solid #d5d5d5;
    padding-left: 15px;
    text-decoration: none;
}
.categories-dropdown a {
    text-decoration: none !important;
}

.categories-dropdown a:hover {
    color: #1aa4dd;
    text-decoration: none;
}
.categories-dropdown>*:before {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 52px;
    font-size: 18px;
    line-height: 52px;
    text-align: center;
}

.category {
    position: absolute;
    display: none;
    left: 100%;
    top: 0;
    width: calc(1170px - 248px);
    max-width: calc(1170px - 248px);
    height: 420px;
    background: #fff;
    border: 6px solid #1aa4dd;
    box-shadow: 12px 14px 16px rgba(0,0,0,.17);
    cursor: default;
}
.sub-categories {
    position: relative;
    display: block;
    vertical-align: top;
    height: 100%;
    padding: 35px 50px;
    text-align: left;
}
.category-title {
    position: relative;
    display: block;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 600;
    color: #3d3d3d;
    letter-spacing: -.01em;
    line-height: 100%;
}
.category-columns {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100% - 54px);
    -webkit-columns: 4;
    -moz-columns: 4;
    -o-columns: 4;
    columns: 4;
    -webkit-column-gap: 100px;
    -moz-column-gap: 100px;
    -o-column-gap: 100px;
    column-gap: 100px;
    -webkit-column-rule: 1px solid #c8c8c8;
    -moz-column-rule: 1px solid #c8c8c8;
    -o-column-rule: 1px solid #c8c8c8;
    column-rule: 1px solid #c8c8c8;
}
.sub-categories a {
    position: relative;
    display: block;
    float: left;
    clear: both;
    font-size: 16px;
    font-weight: 300;
    color: #3d3d3d;
    line-height: 31px;
    letter-spacing: -.01em;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}
		.categories-dropdown>*.active{background:#1aa4dd;color:#fff;border-color:#1aa4dd}
		.categories-dropdown>a:hover{color:#1aa4dd}
		.categories-dropdown>*:before{    margin-left: -10px;position:relative;display:inline-block;vertical-align:top;width:52px;font-size:18px;line-height:52px;text-align:center}
		.categories-dropdown > *:not(a):after {position:relative;display:inline-block;vertical-align:middle;float:right;content:'';width:8px;height:8px;top:50%;right:15px;border-top:2px solid #a5a8ab;border-right:2px solid #a5a8ab;-webkit-transform:rotate(45deg) translate(-50%);-ms-transform:rotate(45deg) translate(-50%);-o-transform:rotate(45deg) translate(-50%);transform:rotate(45deg) translate(-50%)}
		.categories-dropdown>div.active:after{border-color:#fff}

.visible-with-text {
    display: none;
}