@import url("../fonts/RedHatDisplay/stylesheet.css");

body{color: #333; margin-top:0; padding-top:0; font-family:"Red Hat Display";}
a, a:hover {text-decoration:none; color:#1D3E8A;}
a:hover{color:#333}
/*ul, li{margin:0; list-style:none;}*/
a, button, input[type=submit], input[type=button], .product-img {-webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s;}
.overanim{-webkit-transition: .7s; -moz-transition: .7s; -ms-transition: .7s; -o-transition: .7s; transition: .7s;}
.renkBgBeyaz{background-color:#FFF;}
.renkBeyaz{color:#FFF}
.renkYesil{color:#519933;}
.renkYesilAcik{color:#A4BE44;}
.renkMavi{color:#2A255B;}
.renkMaviAcik{color:#1D3E8A;}
.renkGriAcik{color:#bcbcbc;}
.renkGriNormal{color:#999;}
.renkGriKoyu{color:#333;}
.font1x{font-size:100%;}
.font2x{font-size:150%;}
.font3x{font-size:200%;}
.font4x{font-size:250%;}
.font5x{font-size:300%;}
.iconMirror{-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";}
.iconRotate{rotate: 180deg;}

/************************************************************************************/
/*+HEADER & NAVIGATION*/
#header {width:100%; background: url(../rsm/cizgiust.png) top center repeat-x; background-size:10px auto; position: absolute; top: 0;z-index:999;}
#header .navbar li{margin:6px 8px 6px 8px; padding:6px 8px 6px 8px;}
#header .navbar li:hover {background-color:#2A255B; border-radius:5px;}
#header .navbar li:hover a {color: #FFF;}
#header .navbar li a{color:#333; font-size:110%; font-weight:900;}
#header .navbar .btn i{font-size:220%; margin-right:6px; border:1px solid #bebdbd; padding:6px 12px; border-radius:8px;}
#header img{max-width:250px;}
#myMenu {padding:5px 0;}
#myMenu .nav-link{font-size: 110%; margin:0 8px; padding:4px 5px;}
#myMenu .dropdown-menu{background-color: #6639A0; min-width:16rem;}
#myMenu .dropdown-menu .dropdown-item{margin:3px 0;}
#myMenu .dropdown-menu li{margin:8px 20px 5px 10px; border-bottom: 1px solid #FFF; color:#FFF; padding-bottom: 4px; font-size:80%;}
#myMenu .dropdown-menu li a:hover{color:#A00309;}
.dil{margin-top:22px;}
.dil a{font-size:85%; font-weight:900; border:1px solid #1D3E8A; background-color: #FFF; padding:4px 8px; border-radius:5px;}
.dil a:hover{background-color: #2A255B; color:#FFF;}
#sidebar .dil a{font-size:85%; font-weight:900; background-color: #1D3E8A; padding:4px 8px 8px 8px; border-radius:5px; color:#FFF;}


/*+ MOBİL SIDE BAR */
#sidebar {width:60%; position:fixed; top:0; left:-600px; height:100vh; z-index:999; background:#000; color:#fff; transition:all 0.3s; overflow-y:scroll; box-shadow:3px 3px 3px rgba(0, 0, 0, 0.2);}
#sidebar.active {left: 0;}
#dismiss {width: 35px; height: 35px; line-height: 35px; text-align: center; background: #519933; position: absolute; top: 10px; right: 10px; cursor: pointer; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
#dismiss:hover {background: #fff; color: #7386D5;}
.overlay {display: none; position:fixed; width:100%; height:100%; background:rgba(0, 0, 0, 0.7); z-index:998; opacity:0; transition: all 0.5s ease-in-out;}
.overlay.active {display: block; opacity: 1; position: absolute; left:0; top:0; bottom:0;}
#sidebar .sidebar-header {padding:10px 20px; background: #2A255B;}
.sidebar-header h3{font-size:200%;}
#sidebar ul.components {padding: 20px 0; border-bottom: 1px solid #47748b;}
#sidebar ul p {color: #fff; padding: 10px;}
#sidebar ul li a {padding: 10px; font-size: 1.1em; display: block; color:#FFF;}
#sidebar ul li a:hover {color: #7386D5; background: #fff;}
#sidebar ul li.active>a, a[aria-expanded="true"] {color: #fff; background: #6d7fcc;}
a[data-toggle="collapse"] {position: relative;}
#sidebar .dropdown-toggle::after {display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
#sidebar ul ul a {font-size: 0.9em !important; padding-left: 30px !important; background: #6d7fcc;}
#sidebar .sign{border:1px solid #FFF; display: inline-block; margin:0 12px 12px 12px;}
.camera_wrap .camera_pag .camera_pag_ul li {width: 14px !important;height: 14px !important;}
.camera_wrap .camera_pag .camera_pag_ul {bottom:-26px; right:45%;}

/*+SLAYT*/
#slayt{width:100%; height: auto; clear: both;}
#slayt .camera_caption{width:100%; height: 100%; position: absolute; top:0; bottom: 0; left:0; right: 0;}
#slayt .camera_caption .yazi1{width:100%; height: 100%; position: absolute; top:0; bottom: 0; left:0; right: 0; text-align:center;}
#slayt .camera_caption .yazi1 span{font-size:130%; background-color:#A00309; color:#FFF; position:absolute; bottom:0; left:0; right:0;}
#slayt .camera_caption .yazi1 h2{margin:0; position: relative; bottom: 10px; background-color:#A00309;}

/*+GİRİŞ*/
#girisYazi, #girisIkon{width:100%; height: auto; clear: both;}
#girisYazi h1{font-size:150%; font-weight:400; color:#333;}
#girisYazi span{font-size:320%; color:#1D3E8A;}
#girisYazi .baslik{font-size:270%; color:#1D3E8A;}

/*+ÜRÜN GRUPLARI*/
#girisUrunGrup{width:100%; height: auto; clear: both; position: relative;}
#girisUrunGrup h2{color:#1D3E8A; font-size:280%; font-weight: 400;}
#girisUrunGrup img:hover{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4); cursor: pointer;}
#girisUrunGrup .row{background-image: url(../rsm/cizgiSol.png), url(../rsm/cizgiSag.png); background-position: left bottom, right top;background-repeat: no-repeat, no-repeat; padding:20px 8px;}

/*+GİRİŞ BLOG*/
#girisBlog{width:100%; height: auto; clear: both; position: relative;}
#girisBlog h2{color:#1D3E8A; font-size:280%; font-weight: 400;}
#girisBlog .baslik{color:#1D3E8A; font-size:130%; font-weight:700; overflow: hidden; max-height:60px;}
#girisBlog .ozet{font-size:100%; font-weight:400; overflow: hidden; max-height:120px;}
/* #girisBlog .devam{ position: absolute; bottom:30px;} */
#girisBlog .devam a{color:#FFF; background-color: #1D3E8A; border-radius: 8px; padding:5px 12px; font-size:90%;}

/*+GİRİŞ ALT*/
#sosyalMedya{width:100%; height: auto; clear: both;}
#sosyalMedya h2{color:#1D3E8A; font-size:280%; font-weight: 400;}

/*+ Instafeed*/
/*{box-sizing: border-box; font-family: sans-serif}*/
#instafeed {height:auto;}
#instafeed a {display: block;}
#instafeed img {display: block; width: 100%;}
#instafeed img:hover{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4); cursor: pointer;}
.insta{height:280px; overflow:hidden; margin-bottom:0px;}
.insta img{height:255px;}

/*+İÇ SAYFA*/
.arkaplan{background:url(../rsm/background.jpg) center top repeat-y; padding-bottom:20px;}
#icSayfa, #urunListe, #urunDetay {width: 100%; margin:0 auto; padding:0 20px; min-height:670px;}
#icSayfa .icBaslik, #urunListe .icBaslik, #urunDetay .icBaslik {border-bottom:1px solid #dfdfdf; margin:100px 0 20px 0; padding: 14px 0; font-size: 220%;}
#icSayfa .icerik {font-size:105%; line-height:150%;}
.icerikYanMenu span{border-bottom:1px solid #dfdfdf; margin-bottom:10px; padding-bottom:6px; display: block;}
.icerikYanMenu a{font-size:120%; color:#333;}
.icerikYanMenu a:hover{color: red;}
.icerikYanMenu h3{border-bottom: solid 1px #dfdfdf;}

/*+GALERİ*/
.galeri .resimKutu{width:25%; flex: 0 0 auto;}
.galeri .resimKutu img{width:303px; height:230px;} /*normal galeri*/
.galeri .resimKutu .yazi, .galeri2 .resimKutu .yazi{text-align: center;}
.galeri .resimKutu img:hover,.galeri2 .resimKutu img:hover{border: 1px solid #238B22;}
.galeri2 .resimKutu{position: relative; width:33%; flex: 0 0 auto;}
.galeri2 .resimKutu img{width:330px; height:248px;} /*menülü sayfalardaki galeri*/

.video{position:absolute; background-color: rgba(0, 0, 0, 0); bottom:40%; left:40%;}
/* .video:hover{background-color: rgba(0, 0, 0, 0.4);} */
.video i{color: #ff0000; font-size:350%; position: relative;}
.video:hover i{color: #ffffff; font-size:500%;}
.resimKutu{position:relative;}
.sayfalama{clear: both; width: 100%; text-align: center;}
.sayfalama a, .sayfalama a span{color: #000; font-size: 12px; text-align: center; text-decoration: none !important; margin: 3px; height: 25px; width: 25px; border-radius: 3px; display: inline-block;	line-height:24px; background-color: #d6d6d6;}
.sayfalama a:hover{color: #FFFFFF; background-color: #A00309;}
.sayfalama .sAktif{color: #FFF;background-color: #A00309;}

/*+PATH*/
.path{border-bottom:1px solid #dfdfdf; margin:13px 0 15px 0; padding:1px 0 16px 0; font-size:120%;}
.path a{color:#333; font-size:100%;}
.path a:hover{color:red;}
.path i{margin:0 6px;}

/*+ÜRÜN KATEGORİLER*/
.urunKategoriler img:hover{box-shadow:3px 3px 3px rgba(0, 0, 0, 0.2);}
.urunKategoriler .ad{font-size:130%;}

/*+ÜRÜNLER YAN MENÜ*/
.urunYanMenu {margin: 10px 0; float: left; overflow-x: hidden; padding:0px;}
.menuKat1 {margin:5px 0 5px 15px; padding:4px 0; display: block; border-bottom: rgba(0,0,0,0.15) 1px solid;}
.menuKat1 a{color:#1D3E8A; font-size:140%;}
.menuKat1 a:hover {color:#2A255B;}
.menuKat1 i {font-size:70%; color:#1D3E8A; vertical-align:text-top;}
.menuKat2 {font-size: 100%; display: block; padding: 5px 0 5px 4px; margin: 4px 0 0 25px;  border-bottom: rgba(0,0,0,0.15) 1px solid;}
.menuKat2 i {font-size:70%; color:#1D3E8A;}
.menuKat2 a {color: #1D3E8A;}
.menuKat2 a:hover {color:#238B22;}
.menuKat3 {font-size: 90%; display: block; padding: 4px 0; margin: 3px 0 3px 28px;}
.menuKat3 i {margin-right:3px; color:#333;}
.menuKat3 a {color: #333;}
.menuKat3 a:hover {color: #1D3E8A;}

/*+ÜRÜNLER LİSTE*/
.urunler .kutu {position: relative;}
.urunler .resim {border:1px solid #dfdfdf; padding:15px;}
.urunler .resim .uCerceve {padding:0; border:1px solid #DDD; height:207px; overflow: hidden;}
.urunler .resim .uCerceve img {width:100%; height: 100%;}
.urunler .ad {width: 100%; height:auto; text-align:center !important; margin:10px 0 0 0;}
.urunler .ad a {color:#333; font-size:120%;}
.urunler .fiyat {color:#FFF; position: absolute; top:25px; background-color:#238B22; margin-left:1px; font-size:130%;}
.urunler .fiyat a {color:#FFF; padding:4px 10px; font-size:130%;}
.urunler .fiyat i {color:#FFF; font-size:70%;}
.urunler .resim:hover {border:1px solid #1D3E8A;}
.urunSayfalama{color:#FFF; padding:5px 10px; background-color:#999; margin:5px; border-radius:6px;}
.urunSayfalama:hover{ color: #FFF; background-color:#000;}
#urunListe .active{color: #FFF; background-color:#1D3E8A;}
.sayfaRakam{width:24px; margin:0px 0px 18px 12px; float:left;}
.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){width:auto; min-width:130px;}

/*+ÜRÜNLER DETAY*/
.urunDetay .resim .buyukR {position:relative; top:0; left:0;}
.urunDetay .resim .buyukR img {width:100%; height:100%;}
.urunDetay .resim .buyukR .cerce{border:10px solid rgba(185, 185, 185, 0.15); position:absolute; top:0; left:0; bottom:0; right:0;}
.urunDetay .resim .buyukR .cerce:hover{border:10px solid rgba(0,0,0,0.15);}
.urunDetay .resim .miniR{margin:10px 0 0 0;}
.urunDetay .resim .miniR img{margin-bottom: 10px; height:100%;}
.urunDetay .resim .miniR img:hover{cursor:pointer;}
.urunDetay .resim .miniR div{margin:10px 0px;}
.urunDetay .resim .miniR .resimKutu{height:100px;}
.urunDetay .resim .miniR .img-mini{border:1px solid rgba(117, 117, 117, 0.15);}
.urunDetay .ozet {font-size:160%;}
.urunDetay .bilgi{margin-bottom:20px;}
.urunDetay .bilgi .ad{font-size:200%; color:#666; margin-bottom:30px; width:100%;}
.urunDetay .bilgi .fiyat{font-size:180%; color:#fc8200; margin:40px 0;}
.urunDetay .bilgi .fiyat i{font-size:80%}
.urunDetay .bilgi .fiyat span{font-size:60%; margin:0 0 0 10px;}
.urunDetay .bilgi .satir{margin:6px 0; padding-bottom:5px; border-bottom:#DDD 1px solid;}
.urunDetay .bilgi .tanim{color:#2A255B;margin: 0 0 6px 0;}
.urunDetay .bilgi .icerik{color:#1D3E8A;}
.urunDetay .baslikdiger{border-bottom: 1px solid #DDD; padding-bottom: 6px; margin-bottom:10px;}
.urunDetay .baslikdiger span{font-size:130%; color:#fc8200}
.urunDetay .baslikdiger i{color:#ccc; margin-right:5px; font-size:120%;}
.urunDetay .diger{margin-bottom:20px;}
.sepetadet{border:1px solid #DDD; width:45px; margin: 0 10px; height:30px;}
.urunDetay .sepet{ display:none; }
.kategoriBaslik{color:#354350;}

/*+HABERLER LİSTELEME*/
#icerik .hbr {position:relative; width:100%;}
#icerik .hbr .hresim {position:relative; top:0; left:0; padding:5px; margin:5px;}
#icerik .hbr .hresim .cerceve{padding:5px; border:1px solid rgba(100,100,100,0.3); top:0; left:0; right:0; bottom:0; position:absolute; width:100%; height:100%; z-index:99;}
#icerik .hbr .hresim .cerceve:hover{padding:5px; border:1px solid rgba(100,100,100,0.6)}
#icerik .hbr .hresim img {width:100%; height:100%;}
#icerik .hbr .hozet {text-align: center; color:#666 !important; font-family:"Exo2"; font-size:110%;}
#icerik .hbr .hozet:hover{color:#000;}

/*+HABERL DETAY & YANBAR*/
#hDetay, #yanBar{margin:20px 0;}
#hDetay .icerik, #hDetay .galeri{ width:100%; height:auto; margin:0 0 10px 0; display:inline-block;}
#hDetay .hResim{margin:0; padding:0 0 0 5px; float:right;}
#hDetay .hResim img{border:1px solid #EEE; padding:3px; margin:0 0 5px 5px; width:100%;}
#hDetay .hYazi{margin:0; padding:0;}
#yanBar {border-left: 1px solid #DDD;}
#yanBar .baslik{font-family: "Red Hat Display"; font-size: 140%; border-bottom: 1px solid #EBEBEB; margin-bottom:10px; padding-bottom:10px; display:block;}
#yanBar .liste{	display:block;}
#yanBar .liste .hBaslik{display:block; border-bottom: 1px solid #EBEBEB; margin-bottom:15px; padding-bottom:10px; color:#354350;}
#yanBar .liste .hBaslik:hover{color:#D90000;}

/*+FOOTER*/
#footer {width: 100%; background-color:#2A255B; color:#FFF;}
#footer a{color:#FFF;}
#footer a:hover{color:#A4BE44;}
#footer span i{margin:0 10px;}
.tiridi{ width:100%; background-color:#000; color:#FFF; padding:5px 0; font-size:80%;}
.tiridi a:hover{color:#FFF !important}
#myBtn {display:none; position:fixed; bottom:85px; right:10px; z-index:99; border:none; outline:none; background-color:#D90000; color: white; cursor:pointer; padding:3px 9px; border-radius:4px;}
#myBtn:hover {background-color: #D90000;}

/*+ XL 1200-1399*/
@media (min-width: 1200px) and (max-width: 1399px){
    .galeri .resimKutu{width:25%;}
    .galeri .resimKutu img{width:261px; height:196px;}
    .galeri2 .resimKutu{width:33%;}
    .galeri2 .resimKutu img{width:261px; height:196px;}
}

/*+ LG 992-1199 */
@media (min-width: 992px) and (max-width: 1199px) {
    #header .navbar li{margin:6px 2px;}
    #header .navbar li a{font-size:100%;}
    #header {background-size:8px auto;}
    #header img{max-width:220px;}
    #girisYazi span {font-size:200%;}
    #girisYazi h1 {font-size:125%;}
    #girisBlog .baslik{font-size:170%; max-height:80px; margin-bottom:20px;}
    #girisBlog .ozet{font-size:120%; max-height:120px; margin-bottom:25px;}
    #myBtn {bottom:85px;}
    .galeri .resimKutu{width:25%;}
    .galeri .resimKutu img{width:214px; height:161px;}
    .galeri2 .resimKutu{width:33%;}
    .galeri2 .resimKutu img{width:214px; height:161px;}
    .urunler .resim .uCerceve {height:228px;}
    /*#instafeed {width:940px;height: 450px;}*/
    .insta{height:230px; overflow:hidden; margin-bottom:0px;}
    .insta img{height:205px;}
}

/*+ MD 768-991*/
@media (min-width: 768px) and (max-width: 991px) {
    #header {background-size:8px auto;}
    #header img{max-width:220px;}
    .dil a{font-size:90%; color:#FFF;}
    #girisBlog .baslik{font-size:150%; max-height:35px; margin-bottom:20px;}
    #girisBlog .ozet{font-size:130%; max-height:90px; margin-bottom:25px;}
    #myBtn {bottom:35px;}
    .galeri .resimKutu{width:33%;}
    .galeri .resimKutu img{width:216px; height:162px;}
    .galeri2 .resimKutu{width:50%;}
    .galeri2 .resimKutu img{width:360px; height:270px;}
    .urunler .resim .uCerceve {height:210px;}
    /*#instafeed {width:720px;height: 340px;}*/
    .insta{height:210px; overflow:hidden; margin-bottom:0px;}
    .insta img{height:190px;}
}

/*+ SM 767 */
@media (max-width: 767px) {
    #header {background-size:8px auto;}
    #header img{max-width:230px;}
    /*.dil a{font-size:90%; border-bottom:1px solid #ffffff; color:#FFF; background-color: #1D3E8A;}*/
    #girisBlog .baslik{font-size:130%; max-height:35px; margin-bottom:20px;}
    #girisBlog .ozet{font-size:110%; max-height:110px; margin-bottom:25px;}
    #myBtn {bottom:35px;}
    .camera_wrap .camera_pag .camera_pag_ul {right:41%;}
    .galeri .resimKutu{width:50%;}
    .galeri .resimKutu img{width:246px; height:185px;}
    .galeri2 .resimKutu{width:50%;}
    .galeri2 .resimKutu img{width:246px; height:185px;} 
    .urunler .resim .uCerceve {height:327px;}
    /*#instafeed {grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); width:99%; height:auto;}*/
    .insta{height:220px; overflow:hidden; margin-bottom:20px;}
    .insta img{height:100%;}
}
/*+ 575 */
@media (max-width: 575px) {
    #header {background-size:8px auto;}
    #header img{max-width:220px;}
    #girisBlog .baslik{font-size:130%; max-height:35px; margin-bottom:20px;}
    #girisBlog .ozet{font-size:110%; max-height:110px; margin-bottom:25px;}
    #myBtn {bottom:35px;}
    .camera_wrap .camera_pag .camera_pag_ul {right:39%;}
    .galeri .resimKutu{width:100%;}
    .galeri .resimKutu img{width:511px; height:383px;}
    .galeri2 .resimKutu{width:100%;}
    .galeri2 .resimKutu img{width:100%; height:auto;} 
    .urunler .resim .uCerceve {height:auto;}
    /*#instafeed {grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(3, 1fr); width:98%; height: auto;}*/
    .insta{height:auto; overflow:hidden; margin-bottom:20px;}
    .insta img{height:100%;}
}
/*+ 400 */
@media (max-width: 400px) {
    #header {background-size:5px auto;}
    #header img{max-width:150px;}
    #girisYazi span{font-size:200%;}
    #girisBlog .baslik{font-size:140%; max-height:70px; margin-bottom:20px;}
    #girisBlog .ozet{font-size:110%; max-height:130px; margin-bottom:25px;}
    #myBtn {bottom:35px;}
    .camera_wrap .camera_pag .camera_pag_ul {right:36%;}
    .galeri .resimKutu{width:100%;}
    .galeri .resimKutu img{width:333px; height:250px;}
    .galeri2 .resimKutu{width:100%;}
    .galeri2 .resimKutu img{width:100%; height:auto;} 
    .urunler .resim .uCerceve {height:auto;}
    /*#instafeed {grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(3, 1fr); width:98%; height: auto;}*/
}