@import url("css/uploadifive.css");
@import url("css/jquery.fancybox.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/css/swiper.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css");
@import url("css/material-design-color-palette.min.css");
@import url("js/tour/css/bootstrap-tour.min.css");
@import url("https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css");
@import url('https://fonts.googleapis.com/css?family=Poppins:400,400i,500,500i,600,600i,700,700i&display=swap&subset=latin-ext');
@import url("https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css");


body{font-family: "Poppins", sans-serif; background:#000 !important;  color: #b0b8bd; }
.logo{width: 150px; height: 150px; background: #fff; border-radius: 20%;}

.sidebar{position:fixed; height:100% !important; min-width:100px; width:80%; max-width:320px; background-color:#212529; color:#fff; z-index:9999; left:-500px; box-shadow: 10px 0px 50px 0 rgba(0,0,0,.5); overflow:auto;}
.sidebar-close{position:absolute; right:0;}
.sidebar-overlay{position:absolute; display:none; right:0; top:0; left:0; bottom:0; background-color:#000; z-index:9998; opacity:.6;}

.site_menu{margin:0; padding:0; list-style:none;}
.site_menu li a{display:block; color:#ccc; padding:8px 16px; border-bottom:solid rgba(255,255,255,.082) 1px; transition: all .2s ease; text-decoration: none;}
.site_menu li.active a{display:block; background:#e6013362; color:#fff; border-right:solid #e601339d  3px; transition: all .3s ease;} 
.site_menu li a:hover{display:block; background:#343a40; color:#fff; border-right:solid #e601339d  3px; transition: all .3s ease;}
	

.fotorama__stage{background: #fff; box-shadow:0 5px 15px rgba(0,0,0,.2); }
.fotorama--fullscreen .fotorama__nav, 
.fotorama--fullscreen .fotorama__stage{background: #fff !important;}
.urunDetayResmi{border:solid #eee 2px; border-radius:5px;}
/* Sticky footer styles
-------------------------------------------------- */
html { position: relative; min-height: 100%;}
body { padding-bottom: 70px; background-color: #f6fbfe; }
footer{ position: absolute; bottom: 0; width: 100%; height: 60px; line-height: 20px; background-color: #000; font-size:12px;}

body > .container { padding: 10px 10px 0;}
footer > .container { padding-right: 15px; padding-left: 15px; color:#b0b8bd; padding-top: 15px;}
.copyright{display: block; float: right;}

.header{border-bottom: solid #e60133 2px; background-color: #000;}
.mainbody{position:relative; display:block; margin: 100px 0 0 0; z-index: 0 !important;}
code { font-size: 80%; }
.weblink{text-align: right;}
/*#resim[type="file"]{display:none; margin:0;}*/
.resim-onizleme{border:solid #eee 2px; width:100%; height:150px; line-height:150px; text-align:center; margin-bottom:10px; overflow:hidden;}
.file-info{display:block; margin-bottom:10px;}

.custom-file-control:lang(tr)::after {content: "Dosya Seçin...";}
.custom-file-control:lang(tr)::before {content: "Gözat";}
.custom-file-control.selected:lang(tr)::after {content: "" !important;}


.custom-file-name:after {content: attr(data-content) !important;}
.custom-file-name:before {content: 'Gözat' !important;}
.dondur{position:absolute; top:10px; right:10px; z-index:5;}
.resim-onizleme{position:relative; display:block; width:265px; height:200px; text-align:center; border:solid #eee 1px; overflow:hidden; line-height:200px;}


  
input[type='range']::-webkit-slider-thumb {background: #c82333;}

.bg-faded{border:none !important;}
.card:hover{  animation-play-state: running;}

p{white-space: pre-line;}
.navbar .dropdown-menu-right{right: 0 !important; left: auto !important;}

p{white-space: pre-line;}
.navbar .dropdown-menu-right{right: 0 !important; left: auto !important;}

.jumbotron-urunler{ background-size:100% auto !important; background-position:center !important; margin-bottom: 20px;}
.jumbotron-urunler > div{ padding: 30px; }
.jumbotron-urunler h1{ font-weight: bold !important; color:#fff; text-transform: uppercase; font-size:46px;}




.translation-links .dropdown-menu li,
.translation-links .dropdown-menu a{ color:#333 !important; display:block !important; width:100% !important; text-decoration: none;}
.translation-links .dropdown-menu li:hover,
.translation-links .dropdown-menu li.active{background:#efefef !important; color:#333 !important; display:block !important;}
.translation-links .dropdown-menu a i{ margin-right:5px;}

.text-limiter{width:60%;}
.ellipsis{white-space: nowrap;  text-overflow: ellipsis; }
.note-popover{display:none;}
a:hover{text-decoration: none; cursor:pointer;}
.topmenu {background:#000; }
.topmenu ul{margin: 0; padding: 0; list-style: none; }
.topmenu .row div:nth-child(2) ul{float:right; }
.topmenu li{display: inline-block;}
.topmenu li a{display: block; color: #fff; padding: 10px 15px; font-size: 14px;}
.topmenu li a:hover{background:rgba(255,255,255,.2); }
.topmenu li a i{display: inline-block; font-size: 18px; vertical-align: middle;} 


.row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display:  flex; flex-wrap: wrap; }
.row > [class*='col-'] { display: flex; flex-direction: column; }

.navbar-dark{background-color: #000 !important;}
.navbar-nav{color:#fff; font-weight: bold;}
.navbar-nav .active > .nav-link{color:#e60133 !important;}
.navbar-dark .navbar-nav .nav-link {color: #fff;}

.sitelerSlider{margin: 0; z-index:2;}
.sitelerSlider .carousel-item{height: 620px; z-index:0;}

.SolAltIconlar{left: 25px; }
.SagAltIconlar{right: 25px;}
.SolAltIconlar, .SagAltIconlar{position: fixed; bottom: 25px; visibility: visible; background-color: transparent; margin:0; padding:0; list-style:none; z-index: 200000 !important; }
.SolAltIconlar li, .SagAltIconlar li{position: relative; display:block; margin-top: 20px; }
.animatedFixed{ width: 50px; height: 50px; display:inline-block; cursor: pointer;transform-origin: center;}
.animatedFixed > .wiconWrap {width: 60px; height: 60px; top: 0; left: 0; position: absolute; transition: all 0.2s ease-in-out; border-radius: 100%; border: 2px solid transparent; transition: all .5s;}
.animatedFixed > .wicon {width: 40px; height: 40px; top: 10px; left: 10px; position: relative; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; transition: all 0.2s ease-in-out; transform-origin: 50% 50%;}
.animatedFixed > .wicon i{color:#fff; position:absolute; top:9px; left:9px; transform-origin: 50% 50%;}

.animatedFixed.whatsapp > .wiconWrap {background:rgba(79, 206, 93,.5);}
.animatedFixed.whatsapp > .wicon {background:rgb(79, 206, 93);} 

.animatedFixed.phone > .wiconWrap {background:rgba(18, 120, 255,.5);}
.animatedFixed.phone > .wicon {background:rgb(18, 120, 255);} 


.altserit{background: #5c6b78;}
.altserit .container{position: relative;}
.altserit a.bilgialmakistiyorumBtn{display: block; position: absolute; left:41%; top:30%; z-index: 2; transform-origin: 50%;}
.altserit .row > div.box1,
.altserit .row > div.box2
{height: 90px; background-repeat: no-repeat; text-align: center; color: #fff; text-shadow:2px 2px 10px rgba(70,70,70,.7);}
.altserit .row > div small{display: block; font-size: 22px; margin-top: 8px;}
.altserit .row > div b{display: block; font-size: 30px;}
.altserit .row > div:first-child{background-image:url('images/numaranizibirakin.gif');}
.altserit .row > div:last-child{background-image:url('images/musterihatti.gif');}
.altserit .gredientBg{background:linear-gradient(to left, #5c6b78ff 0px, #ffffff99 50%,  #5c6b78ff 100%);}


.hosgeldiniz{padding: 100px 10px; color: #6f8398; background-color:#000; border-top:solid #e60133 2px;border-bottom:solid #e60133 2px;}
.hosgeldiniz h1, .hosgeldiniz h2{ font-weight: bold;}
.hosgeldiniz h1{font-size: 24px; color: #fff;}
.hosgeldiniz h2{font-size: 18px; color: #fff; margin-bottom: 40px;}

.sitelerSlider .carousel-item:before{content:""; position: absolute; top:0; bottom:0; left:0; right:0; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(9,9,121,0) 50%, rgba(0, 0, 0, 0.5) 100%); z-index: 1;}
.sliderMenu > a{ display:block; width:211px; height:285px; text-transform: uppercase; color:#fff; background-size: 100% auto; transform-style: preserve-3d;
  transform: perspective(1000px); text-decoration:none; color:white; box-shadow:0px 2px 15px rgba(226,221,54,0.3);}
.sliderMenu > a:before{ content:""; position: absolute; top:0; bottom:0; left:0; right:0; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(9,9,121,0.2) 50%, rgba(226,221,54,0.3) 100%); z-index: 1;}
.sliderMenu > a h4{display:block; position: relative; z-index: 3; transform: translateZ(20px); text-shadow:0px 2px 5px rgba(0,0,0,0.9);}
.referanslarBar{padding:30px 0; text-transform: uppercase; color:#fff; background:linear-gradient(to left, rgba(203, 39, 65,.8) 0px, rgba(0, 0, 0, 0.8) 100%), url('images/') no-repeat center; background-size: 100% auto;}

.swiper-button-next,
.swiper-button-prev{color: #fff; top:150px !important;}
.swiper-pagination-bullet{background-color: #fff;}


.urunguruplari {padding: 70px 0 30px 0; background-color:#000;}
.urunguruplari h3{color: #e60133; font-size: 18px; position: relative; margin-bottom: 30px;}
.urunguruplari h3 span{padding-right: 10px; font-weight: bold; z-index: 2; position: relative; text-transform: uppercase;}
.urunguruplari h3:before{content:""; position:absolute; bottom:10px; left:0; right:0; height:2px; background: #000000; z-index: 0;}
.urunguruplari .row > div{margin-bottom:30px; }
.urunguruplari .row > div .resim{position:relative;  display: block; height: 250px; border-radius: 3px; box-shadow:0px 2px 5px rgba(0,0,0,0.2);transition: .3s all ease; overflow: hidden; background-size: cover; background-position: center;}
.urunguruplari .row > div .resim:hover{ box-shadow:0px 5px 25px rgba(0,0,0,0.4); transform: scale(1.02) ; transition: .3s all ease;}
.urunguruplari .row > div .resim::before{position: absolute; content: ""; display: block; width: 100%; top:0px; left:0; top:0; bottom:0; z-index: 0; background:linear-gradient(to bottom, rgb(220, 53, 69,0) 30%, rgba(0, 0, 0, 0.5) 100%);}
.urunguruplari .row > div .resim h1{position: absolute; bottom: 10px; left: 10px; font-size:26px; font-weight: bold; color: #fff;  z-index: 1;}

.referanslar .resim {display:block; height:200px; margin-bottom:30px; border-radius: 3px; box-shadow:0px 2px 5px rgba(0,0,0,0.2);transition: .3s all ease; }
.urunlistesi div .card{padding: 0; border: none !important; border-radius: 5px; box-shadow:0px 2px 5px rgba(0,0,0,0.2);}
.urunlistesi div a{position: relative; display:block; height: 300px; color: #fff; border-radius: 5px 5px 0 0;  box-shadow:0px 5px 10px rgba(0,0,0,0.3); transition: .5s all ease; overflow: hidden; background-size: 100% auto;}
.urunlistesi div a:hover{  transition: .5s all ease;}
.urunlistesi div a .resim{display:block; height: 100%; transition: .5s all ease; z-index:0;}
.urunlistesi div a:hover .resim{display:block; height: 100%; transform: rotate(10deg) scale(1.2); transition: .9s all cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.urunlistesi div a b{position: absolute; left: 0; right: 0; bottom:0; padding:10px; z-index:3;}
.urunlistesi div .baslik{color:#e60133; font-weight: bold; padding: 10px 0 10px 15px !important; border-bottom:solid rgba(0,0,0,.2) 1px;}


#kategoriMenu{display: block !important;}
#kategoriMenu li{display: block !important; border-bottom:solid rgba(0,0,0,.2) 1px;}
#kategoriMenu li:last-child{border: none;}
#kategoriMenu li a{color:#fff; font-size:16px;}

.navbar-toggler:focus,
.navbar-toggler:hover{outline: 0;outline: none; background: #eee;}
.navbar-toggler {padding:10px 15px;}
.navbar-toggler i{border-color: #cb2741;}



@media (max-width : 1400px){
	.urunlistesi div a{position: relative; display:block; height: 200px !important; }
}
@media (max-height : 480px){
}
@media (max-width : 1199px){
}
@media (max-width : 991px){
	.sitelerSlider .carousel-item{height: 400px;}
}

@media (max-width : 1024px){
}
@media (max-width : 1023px){
	.altserit a.bilgialmakistiyorumBtn{display: block; position: absolute; left:37%; top:30%; z-index: 2; transform-origin: 50%;}
	body{padding-bottom: 100px;}
	footer{  height: 100px;  text-align: left;}
	.urunlistesi div a{position: relative; display:block; height: 170px !important; }
}

@media (max-width : 767px){
	.sitelerSlider .carousel-item{height: 300px;}
	
	body{padding-bottom: 110px;}
	footer{  height: 100px;  text-align: center !important; }
	footer .copyright{display: block !important;  text-align: center !important;}
	/*.copyright{display:block; margin-top:20px; float: none;}

	.navbar-nav .nav-item{border-bottom:solid #b0b8bd33 1px; text-align: center;}*/
	
	.sliderMenu > a{width:auto; height:auto; padding:10px 20px !important; margin:3px 0px !important; background-image:none !important; box-shadow:none !important; border-left: solid #e60133 2px;}
	.sliderMenu > a:before{ content:""; position: absolute; top:0; bottom:0; left:0; right:0; background: rgba(0,0,0,.6); background-image:none !important;  /*background: linear-gradient(0deg, rgba(100,100,100,1) 30%, rgba(100,100,100,0.4) 100%);*/ z-index: 1;}
	.sliderMenu > a h4{position: relative; z-index: 3; font-size:16px; text-shadow:none !important; color:#fff !important; margin:0px; padding:0px; }
	
	.logo{width: 100px !important; height: 100px !important; background: #fff; border-radius: 50%;}
	.urunlistesi div a{position: relative; display:block; height: 170px !important; }
	.urunlistesi div .baslik{font-size: 16px; margin-bottom: 0px;}
	.urunlistesi div .list-group{font-size: 14px;}

	
	.jumbotron-urunler{margin: 10px 0; }
	.jumbotron-urunler > div{ padding: 20px; }
	.jumbotron-urunler h1{ font-size:26px;}
}


@media (max-width : 576px){
}
@media (max-width : 480px){
	.urunlistesi div .baslik{font-size: 14px; margin-bottom: 0px; padding: 10px 7px !important;}
	.urunlistesi div .list-group{font-size: 12px;}
	.urunlistesi div .list-group li{ padding: 7px !important;}
	.sitelerSlider .carousel-item{height: 250px;}
	.urunlistesi div a{position: relative; display:block; height: 150px !important; }
	
}
@media (max-width : 360px){
	.jumbotron-urunler{margin: 10px 0;}
	.jumbotron-urunler > div{ padding: 15px; }
	.jumbotron-urunler h1{ font-size:20px;}
}
	

@media (max-height : 768px){
	
	
}
.kategoriler .resim{position: relative; display:block; height: 270px; border-radius:15px 0; background: #ccc; content-visibility: auto;  filter: grayscale(1); }
.kategoriler .resim:hover{background: #aaa; box-shadow: 0 5px 15px rgba(0,0,0,.3); filter:grayscale(0);}
.kategoriler .resim h5{position: absolute; bottom:10px; left: 15px; padding: 10px 15px; background: #fff; color:#000; font-size: 16px; font-weight: 700; z-index: 2; border-radius: 15px 0; mix-blend-mode: lighten;  transition: all .3s cubic-bezier(0.47, 0, 0.745, 0.715);}
.kategoriler .resim:hover h5{font-size: 18px;}