@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
* {
font-family : 'Open Sans', sans-serif;
}
::selection {
color : #fff;
background : #555;
}
::-moz-selection {
color : #fff;
background : #555;
}
html, body {
margin : 0;
padding : 0;
width : 100%;
height : 100%;
}
img {
border : 0;
}
body {
font-family : 'Open Sans', sans-serif;
font-size : 13px;
line-height : 20px;
background : url(../img/bg.jpg) top center no-repeat #f2f2f2;
}
.left {
float : left;
}
.right {
float : right;
}
.clear {
clear : both;
}
.center {
margin : 0 auto;
width : 1010px;
}
#left {
display : none;
}
#slopen {
display : none;
}
#header {
width : 100%;
height : 135px;
box-sizing : border-box;
position : relative;
z-index : 10;
background : url(../img/markalar.png) top 70px right 10px no-repeat;
}
a#logo {
float : left;
display : block;
width : 250px;
height : 80px;
margin : 10px;
}
#top {
width : 100%;
height : 35px;
border-bottom : 1px solid #eee;
background : #fafafa;
background : -webkit-linear-gradient(#fff, #fafafa);
background : -o-linear-gradient(#fff, #fafafa);
background : -moz-linear-gradient(#fff, #fafafa);
background : linear-gradient(#fff, #fafafa);
margin-left : -5px;
padding-right : 10px;
}
#top a{
float : left;
height : 35px;
line-height : 35px;
padding : 0 10px;
border-right : 1px solid #eee;
text-decoration : none;
color : #333;
}
#top a:hover{
background : #f9f9f9;
}
#top a.sec{
float : left;
height : 35px;
line-height : 35px;
padding : 0 10px;
border-right : 1px solid #eee;
border-bottom : 1px solid #fff;
text-decoration : none;
color : #008dd2;
font-weight : 600;
background : #fff;
}
#top a.link {
height : 35px;
background : url(../img/link.png) center left 9px no-repeat;
padding-left : 33px;
}
#top a.tel {
float : right;
height : 35px;
background : url(../img/tel.png) center left no-repeat;
text-align : right;
color : #333;
font-weight : 600;
font-size : 14px;
padding-right : 10px;
padding-left : 25px;
border-right : 0;
}
#bar {
width : 990px;
height : 45px;
background : #008dd2;
background : -webkit-linear-gradient(#008dd2, #0684c1);
background : -o-linear-gradient(#008dd2, #0684c1);
background : -moz-linear-gradient(#008dd2, #0684c1);
background : linear-gradient(#008dd2, #0684c1);
margin-left : -5px;
padding : 0 10px;
box-shadow : 0 -10px 25px 0 rgba(0, 0, 0, 0.05);
position  :relative;
border-top : 1px solid #fff;
}
#k1 {
width : 6px;
height : 50px;
position : absolute;
z-index : 9;
background : url(../img/k1.png);
top : 0;
left : -6px;
}
#k2 {
width : 6px;
height : 50px;
position : absolute;
z-index : 9;
background : url(../img/k2.png);
top : 0;
right : -6px;
}
#mega {
list-style : none;
margin : 0;
padding : 0;
float : left;
}
#mega li {
float : left;
position : relative;
line-height : 45px;
}
#mega a {
padding : 0 10px;
color : #fff;
text-decoration : none;
display : block;
font-weight : 600;
}
#mega li:hover {
background : rgba(0, 0, 0, 0.1);
}
#mega li:hover a{
color : #fff;
}
#mega li.sec {
background : #fff;
background : -webkit-linear-gradient(#fafafa, #fff);
background : -o-linear-gradient(#fafafa, #fff);
background : -moz-linear-gradient(#fafafa, #fff);
background : linear-gradient(#fafafa, #fff);
border-top : 5px solid #008dd2;
line-height : 35px;
padding-bottom : 5px;
}
#mega li.sec a,#mega li.sec:hover a{
color : #008dd2;
}
#top #mega li:hover {
background : #fff;
}
#mega li:hover a {
color : #fff;
text-shadow : 1px 1px rgba(0, 0, 0, 0.1);
}
#top #mega li:hover a {
color : #b01116;
text-shadow : 0 0;
}
#leftmenu {
float : left;
width : 200px;
box-sizing : border-box;
background : #fff;
margin : 10px 5px;
}
#leftmenu b{
display : block;
box-sizing : border-box;
background : #fafafa;
background : -webkit-linear-gradient(#fff, #fafafa);
background : -o-linear-gradient(#fff, #fafafa);
background : -moz-linear-gradient(#fff, #fafafa);
background : linear-gradient(#fff, #fafafa);
padding : 8px 10px;
color : #008dd2;
border : 1px solid #ddd;
}
#leftmenu a{
display : block;
border-bottom : 1px dotted #ddd;
border-left : 1px solid #ddd;
border-right : 1px solid #ddd;
box-sizing : border-box;
padding : 8px 10px;
text-decoration : none;
background : url(../img/t.png) left 7px center no-repeat;
padding-left : 22px;
color : #333;
}
#leftmenu a span{
font-size : 10px;
color : #999;
}
#leftmenu a:hover{
background : url(../img/t.png) left 7px center no-repeat #fbfbfb;
}
#leftmenu a.sec{
color : #008dd2;
background : url(../img/t2.png) left 7px center no-repeat;
font-weight : 600;
}
#slide {
float : left;
width : 780px;
height : 350px;
box-sizing : border-box;
overflow : hidden;
background : url(../img/load.gif) center center no-repeat #fafafa;
margin : 10px 5px;
margin-bottom : 0px;
border : 1px solid #ddd;
}
.flexslider {
width : 100%;
height : 100%;
position : relative;
overflow : hidden;
}
.flexresim {
width : 100%;
height : 100%;
display : block;
overflow : hidden;
position : relative;
}
.flexresim img {
width : 100%;
height : 100%;
}
.slides, .flex-control-nav, .flex-direction-nav {
margin : 0;
padding : 0;
list-style : none;
}
.flex-direction-nav {
margin-left : auto;
margin-right : auto;
overflow : hidden;
}
.flex-direction-nav li a {
width : 64px;
height : 350px;
display : block;
text-indent : -9999px;
opacity : 0.3;
transition : all 0.1s linear;
}
.flex-direction-nav li a.next {
position : absolute;
z-index : 1;
right : 0;
top : 0;
float : right;
background : url(../img/r.png) center right no-repeat;
}
.flex-direction-nav li a.prev {
position : absolute;
z-index : 1;
left : 0;
top : 0;
float : left;
background : url(../img/l.png) center left no-repeat;
}
.flex-direction-nav li a:hover {
opacity : 1;
}
.flex-direction-nav li a.disabled {
cursor : default;
}
.flex-control-nav {
display : none;
}
.kisa {
height : 200px;
overflow : hidden;
}
.top140 {
margin-top : -120px;
}
#urunluk {
float : left;
width : 790px;
padding-bottom : 10px;
}
#baslik {
float : left;
margin : 10px 5px;
margin-bottom : 0;
width : 780px;
height : 38px;
line-height : 36px;
background : #fafafa;
background : -webkit-linear-gradient(#fff, #fafafa);
background : -o-linear-gradient(#fff, #fafafa);
background : -moz-linear-gradient(#fff, #fafafa);
background : linear-gradient(#fff, #fafafa);
color : #008dd2;
border : 1px solid #ddd;
box-sizing : border-box;
}
#baslik h1 {
margin : 0;
padding : 0;
display : inline-block;
font-size : 14px;
font-weight : 600;
padding-left : 10px;
}
#baslik h2 {
margin : 0;
padding : 0;
display : inline-block;
font-size : 14px;
font-weight : 600;
padding-left : 10px;
color : #333;
}
#baslik span {
margin : 0;
padding : 0;
display : inline-block;
font-size : 12px;
font-weight : 400;
padding-left : 10px;
color : #555;
}
a.kat {
float : right;
color : #333;
text-decoration : none;
margin-right : 10px;
font-weight : 600;
}
a.kat img{
float : left;
margin : 5px;
}
a.kat:hover {
color : #008dd2;
}
#page {
margin : 10px auto;
width : 1000px;
box-shadow : 0 0 15px 0 rgba(0, 0, 0, 0.08);
position : relative;
padding : 0 5px;
background : #fff;
}
.center h2 {
margin : 0;
padding : 0;
font-size : 15px;
line-height : 40px;
font-weight : 600;
margin-top : 10px;
}
h2.defa {
margin : 0;
padding : 0;
font-size : 18px;
line-height : 40px;
font-weight : 600;
color : #008dd2;
border-bottom : 1px dotted #2c89c4;
margin : 0 5px;
}
.center h4 {
margin : 0;
padding : 0;
font-size : 15px;
font-weight : 600;
color : #2c89c4;
margin-top : 10px;
}
.footertop {
width : 990px;
height : 45px;
line-height : 45px;
background : #777;
background : -webkit-linear-gradient(#777, #666);
background : -o-linear-gradient(#777, #666);
background : -moz-linear-gradient(#777, #666);
background : linear-gradient(#777, #666);
overflow : hidden;
margin-left : -5px;
padding : 0 10px;
color : #fff;
}
#footer {
width : 990px;
margin : 0 5px;
background : #fbfbfb;
padding : 25px 0;
color : #333;
margin-left : -5px;
padding : 20px 10px;
border-bottom : 2px solid #ddd;
}
.footeralan {
float : left;
width : 50%;
min-height : 100px;
padding-left : 15px;
border-left : 1px solid #ddd;
box-sizing : border-box;
}
.footeradres {
float : left;
width : 40%;
min-height : 100px;
padding-left : 15px;
box-sizing : border-box;
border-left : 1px solid #ddd;
}
.footerlogo {
float : left;
width : 10%;
padding-right : 10px;
box-sizing : border-box;
}
.footerlogo img {
width : 100%;
margin-top : 20px;
}
.footeradres span {
display : block;
text-decoration : none;
padding-bottom : 10px;
margin-bottom : 5px;
}
.footeralan h4, .footeradres h4 {
display : inline-block;
margin : 0;
padding : 0;
font-size : 14px;
color : #008dd2;
font-weight : 700;
padding-bottom : 5px;
margin-bottom : 5px;
}
.footeralan a {
float : left;
width : 20%;
color : #333;
text-decoration : none;
padding-right : 10px;
margin-right : 10px;
box-sizing : border-box;
}
.footeralan a:hover {
color : #008dd2;
}
.resim {
float : left;
width : 25%;
height : auto;
box-sizing : border-box;
padding : 10px 5px;
overflow : hidden;
text-align : center;
position : relative;
}
.resim_ic {
width : 100%;
height : 300px;
overflow : hidden;
text-align : center;
vertical-align : center;
transition : all 0.1s linear;
border : #ddd solid 1px;
border-bottom : #ddd solid 3px;
box-sizing : border-box;
position : relative;
background : #fff;
background : -webkit-linear-gradient(#f0f0f0, #fff);
background : -o-linear-gradient(#f0f0f0, #fff);
background : -moz-linear-gradient(#f0f0f0, #fff);
background : linear-gradient(#f0f0f0, #fff);
}
.marka{
width : 24px;
height : 24px;
position : absolute;
right : 15px;
top : 15px;
}
.kod{
height : 24px;
line-height : 24px;
font-weight : 700;
color : #d00;
position : absolute;
left : 10px;
top : 5px;
}
.resim_ic2 {
width : 100%;
height : 185px;
overflow : hidden;
border-bottom : 1px solid #ddd;
background:#fff;
}
.resim_ic table {
width : 100%;
height : 185px;
border : 0;
padding : 0;
margin : 0;
border-collapse : collapse;
transition : all 0.2s linear;
}
.resim:hover .resim_ic{
border : #ccc solid 1px;
border-bottom : #008dd2 solid 3px;
box-shadow : 0 0 5px 0 rgba(0, 0, 0, 0.1);
}
.resim:hover .bilgi a{
color : #008dd2;
}
.resim_ictd {
text-align : center;
vertical-align : center;
background : url(../img/load.gif) center center no-repeat #fafafa;
padding : 0;
margin : 0;
}
.ur {
width : auto;
height : 185px;
}
.bilgi {
padding : 10px;
width : 100%;
box-sizing : border-box;
text-align : center;
height : 68px;
overflow : hidden;
}
.bilgi a, .bilgi a h2, .bilgi a h3{
color : #333;
font-size : 13px;
text-decoration : none;
line-height : 18px;
font-weight : 400;
}
.fiyat {
padding : 5px 10px;
width : 100%;
box-sizing : border-box;
font-size : 15px;
text-align : center;
}
.fiyat .yeni {
color : #0ca400;
font-weight : 600;
}
.bilgialan {
width : 100%;
padding : 0 10px;
box-sizing : border-box;
position : relative;
}
a.filnet {
float : right;
display : block;
width : 22px;
height : 22px;
background : url(../img/filnet.png) top left no-repeat;
transition : all 0.2s linear;
margin : 10px 5px;
}
a.filnet:hover {
width : 90px;
}
.zoom-small-image {
float : left;
width : 400px;
height : 400px;
overflow : hidden;
text-align : center;
border : #ddd solid 1px;
background : #fff;
box-sizing : border-box;
margin : 10px 5px;
}
.aciklama {
float : left;
width : 370px;
height : 400px;
margin : 10px 5px;
}
.aciklama h2{
float : left;
color : #444;
font-size : 16px;
line-height : 30px;
font-weight : 600;
width : 370px;
display : block;
margin : 0;
padding : 0;
}
.aciklama a.buy{
display : inline-block;
padding : 0 15px;
line-height : 30px;
background : #008dd2;
border-radius : 5px;
color : #fff;
text-decoration : none;
margin : 15px 0 0px 0;
}
a.fancybox{
cursor: url(../img/zoom.png), auto;
}
@media screen and (max-width:480px) {
#page {
width : 100%;
position : relative;
box-sizing : border-box;
padding : 0;
background : #fff;
margin  : 0 auto;
overflow : hidden;
}
#leftmenu,.men,#bar2 {
display:none;
}
#urunluk {
float : left;
width : 100%;
}
#top {
overflow : hidden;
box-sizing : border-box;
}
#header {
width : 100%;
margin : 0;
height : 135px;
box-shadow : 0 0 10px 0 rgba(0, 0, 0, 0.1);
margin-left:0px;
background : #fff;
border-bottom : 2px solid #008dd2;
}
#logo img {
height : 70px;
margin-top : 5px;
}
#slide {
width : 100%;
height : auto;
overflow : hidden;
background : url(../img/spin.svg) center center no-repeat #008dd2;
margin : 0;
border : 0;
}
.footertop {
width : 100%;
margin : 0;
padding : 15px 10px;
box-sizing : border-box;
background : #555;
color : #fff;
line-height : 20px;
margin-top : 30px;
box-sizing : border-box;
}
#footer {
width : 100%;
margin : 0;
padding : 25px 10px;
box-sizing : border-box;
}
#baslik {
width : 100%;
margin : 0;
width : 100%;
}
#baslik span,.slalt {
display : none;
}
.center {
width : 100%;
margin : 0;
}
.maron {
width : 100%;
box-sizing : border-box;
padding : 10px;
}
.mclear {
clear : both;
}
.hak {
display : none;
}
.zoom-small-image {
float : left;
width : 100%;
height : auto;
overflow : hidden;
text-align : center;
border : #ddd solid 1px;
background : #fff;
box-sizing : border-box;
margin : 0;
}
.aciklama {
float : left;
width : 100%;
height : auto;
padding : 10px 5px;
margin : 0;
box-sizing : border-box;
}
.aciklama h2{
width : 100%;
}
#bar {
display : none;
}
#left {
display : block;
width : 100%;
min-height : 100%;
background : #008dd2;
z-index : 8;
position : absolute;
left : -1500px;
top : 135px;
box-sizing : border-box;
}
#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {
margin : 0;
padding : 0;
border : 0;
list-style : none;
font-weight : normal;
text-decoration : none;
position : relative;
}
#cssmenu a {
outline : 0;
line-height : 50px;
padding-left : 30px;
font-size : 18px;
box-sizing : border-box;
color : #fff;
}
#cssmenu {
width : 100%;
}
#cssmenu > ul > li > a {
display : block;
border-bottom : 1px solid #0799e1;
box-shadow : 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
}
#cssmenu > ul > li > a > span {
display : block;
}
#cssmenu > ul > li > a:hover {
text-decoration : none;
}
#cssmenu > ul > li.active {
border-bottom : none;
}
#cssmenu ul ul {
display : none;
}
#cssmenu ul ul a {
display : block;
background : #9b060b;
border-bottom : 1px solid #c22e33;
box-shadow : 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
padding-left : 30px;
box-sizing : border-box;
text-transform : capitalize;
}
#slopen {
float : right;
display : block;
width : 120px;
height : 100px;
background : url(../img/menu.png) center center no-repeat;
cursor : pointer;
position : absolute;
right : -50px;
}
#slclose {
float : right;
display : none;
width : 120px;
height : 100px;
background : url(../img/menu2.png) center center no-repeat;
cursor : pointer;
position : absolute;
right : -50px;
}
.resim {
width : 50%;
}
.resim_ic {
height : 280px;
}
.resim_ic2 {
height : 170px;
}
.resim_ic table {
height : 170px;
}
.ur {
width : auto;
Height: 170px;
}
#urunluk p img {
width : 100%;
}
.flex-direction-nav {
display : none;
}
#load {
width : 100%;
height : 100%;
background : url(../img/spin.svg) top 160px center no-repeat #008dd2;
position : fixed;
z-index : 9;
transition : all 0.4s linear;
top : 135px;
}
.footeralan {
float : none;
width : 100%;
height : auto;
padding-left : 0;
border-left : 0;
box-sizing : border-box;
}
.footeralan a {
width : 30%;
}
.footeradres {
float : none;
width : 100%;
padding-left : 0;
margin-top : 20px;
box-sizing : border-box;
border-left : 0;
}
.footeradres span {
margin-top : 10px;
}
.footerlogo {
display : none;
}
a.filnet,a.filnet:hover {
width : 22px;
margin-top : 0;
}
#top a{display : none;
}
#top a.mbgz {
display : block;
}
#top a.tel{display : block;
margin-right : -10px;
}
}