@import 'https://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin-ext';
* {
font-family: 'Ubuntu', sans-serif;
margin : 0;
padding : 0;
}
#slopen,#slclose,#left{
display : none;
}
html, body{
width : 100%;
height : 100%;
font-weight : 400;
background: url(../img/bg.png) #ececee;
color : #444;
}
.bg {
background: rgba(0,0,0,0.1);
padding : 10px 0;
margin-top : -10px;
margin-bottom : 10px;
}
img {
border : 0;
}
b,strong {
font-weight : 700;
}
body {
font-size : 13px;
}
.left {
float : left;
}
.right {
float : right;
}
.clear {
clear : both;
}
.center {
margin : 0 auto;
width : 1000px;
}
#top {
width : 100%;
height : 36px;
background : #666;
}
#top a.tel{
height : 36px;
line-height : 36px;
color : #bbb;
text-decoration : none;
float : right;
}
#top a.tel span{
background : url(../img/tel.png) left 10px center no-repeat;
padding-left : 30px;
font-weight : 600;
color : #eee;
}
#header {
width : 100%;
height : 100px;
background : #fff;
border-bottom :  2px solid #f60;
box-shadow : 0px 0px 5px 3px rgba(0,0,0,0.1);
position :relative;
z-index : 9;
margin-bottom : 10px;
}
#logo {
float : left;
width : 204px;
height : 94px;
margin-top : -13px;
margin-left : 13px;
}
#logo img{
height : 94px;
}
#menu {
float : right;
width : auto;
height : 100px;
}
#menu a{
float : left;
line-height : 100px;
text-decoration : none;
color : #333;
padding : 0px 10px;
transition : all 0.1s linear;
background : url(../img/trans.png) top center no-repeat;
cursor : pointer; 
text-transform : uppercase;
font-size : 14px;
}
#menu a:hover{
background : url(../img/ok.png) top center no-repeat #fafafa;
}
#slide {
float : left;
width : 660px;
height : 380px;
margin : 10px;
background : #fff;
box-shadow : 0 0 5px 0px rgba(0,0,0,0.2)
}
#slide .flexslider {
width : 100%;
height : 380px;
position : relative;
background : url(../img/load.png) center center no-repeat #444;
overflow : hidden;
}
#slide .flexslider .slides > li {
display : none;
}
#slide .flexslider .flexresim {
margin : 0 auto;
width : 100%;
height : 380px;
display : block;
}
#slide .flexslider .flexresim img{
width : 100%;
}
#slide .flexslider .aciklama {
width : 100%;
height : auto;
background  : rgba(10,10,10,0.75);
position : absolute;
bottom : 0;
text-decoration : none;
color : #fff;
box-sizing : border-box;
padding : 15px;
line-height : 20px;
}
#slide .flexslider .aciklama b{
display : block;
color : #f60;
font-size : 14px;
}
#slide .flexslider .slides, .flex-control-nav, .flex-direction-nav {
margin : 0;
padding : 0;
list-style : none;
}
#slide .flexslider .flex-direction-nav {
width : 100%;
display : block;
position : absolute;
z-index : 4;
}
#slide .flexslider .flex-direction-nav li a {
width : 35px;
height : 67px;
display : block;
text-indent : -9999px;
overflow : hidden;
top : 154px;
opacity : 0.7;
}
#slide .flexslider .flex-direction-nav li a.next {
position : absolute;
right : 0;
background : url(../img/right.png);
}
#slide .flexslider .flex-direction-nav li a.prev {
position : absolute;
left : 0;
background : url(../img/left.png);
}
#slide .flexslider .flex-direction-nav li a:hover {
opacity : 1;
}
#slide .flexslider .flex-direction-nav li a.disabled {
opacity : 0;
cursor : default;
}
.flex-control-nav {
display : none;
}
#home {
float : left;
width : 300px;
height : 350px;
margin : 10px;
}
.home {
float : left;
width : 300px;
background : #fff;
box-shadow : 0 0 5px 0px rgba(0,0,0,0.2);
margin-bottom : 20px;
overflow : hidden;
position : relative;
height : 180px;
}
.home a.homb {
width : 100%;
height : auto;
background  : rgba(10,10,10,0.55);
position : absolute;
bottom : 0;
text-decoration : none;
color : #fff;
box-sizing : border-box;
padding : 5px 15px;
line-height : 30px;
transition : all 0.2s linear;
}
.home:hover a.homb {
background  : rgba(10,10,10,0.25);
}
.alan{
float : left;
width : 980px;
margin : 10px;
background : #fff;
box-shadow : 0 0 5px 0px rgba(0,0,0,0.2);
box-sizing : border-box;
}
.alan .baslik{
width : 100%;
padding : 0 10px;
box-sizing: border-box;
height : 40px;
line-height : 50px;
font-size : 14px;
text-transform : uppercase;
color : #ff6600;
}
.alan p{
padding : 5px;
line-height : 20px;
}
.alan_ic{
padding : 5px;
}
.resim {
float : left;
width : 20%;
padding : 5px;
box-sizing : border-box;
height : 120px;
}
.owl-carousel .resim {
width : 100%;
}
.resim_ic {
width : 100%;
height : 100%;
background-repeat:no-repeat;
background-size: cover;
border : 1px solid #555;
border-bottom : 0;
box-sizing : border-box;
}
.resim2 {
float : left;
width : 20%;
height : auto;
box-sizing : border-box;
padding : 5px;
overflow : hidden;
text-align : center;
}
.resim2 a.ub {
display : block;
padding : 10px;
height : 60px;
line-height : 22px;
background : #555;
text-decoration : none;
transition : all 0.2s linear;
color : #fff;
font-size : 13px;
overflow : hidden;
}
.resim2 a.ub2 {
display : block;
line-height : 40px;
background : #fff;
text-decoration : none;
transition : all 0.2s linear;
border-left : 1px solid #555;
border-right : 1px solid #555;
color : #555;
font-size : 14px;
}
.resim2 a.resim_ic {
display : block;
width : 100%;
height : 190px;
padding : 5px;
padding-bottom : 0px;
box-sizing : border-box;
overflow : hidden;
transition : all 0.2s linear;
}
a.buy {
display: inline-block;
padding: 0 15px;
line-height: 30px;
background: #f60;
border-radius: 5px;
color: #fff;
text-decoration: none;
margin: 15px 0 0px 0;}

.resim2:hover a.resim_ic{
border-color : #f60;
}
.resim2:hover a.ub{
background : #f60;
color : #fff;
}
.resim2:hover a.ub2{
border-color : #f60;
background : #eee;
}
.y50 {
float : left;
width : 50%;
height : auto;
box-sizing : border-box;
padding : 0 5px;
}
.y55 {
float : left;
width : 55%;
height : auto;
box-sizing : border-box;
padding : 0 5px;
}
.y45 {
float : left;
width : 45%;
height : auto;
box-sizing : border-box;
padding : 0 5px;
}
.fiyat {
width : 100%;
font-size : 15px;
border-bottom : 1px solid #aaa;
line-height : 40px;
padding : 0 5px;
margin-bottom : 10px;
}
.fiyat b{
color : #f80;
}
.zoom-small-image {
float : right;
width : 100%;
height : 500px;
overflow : hidden;
text-align : center;
border : #ddd solid 1px;
background : #fff;
box-sizing : border-box;
margin : 10px 0;
}
.kresim {
width : 100%;
box-sizing : border-box;
}
.kresimo {
float : left;
width : 25%;
height : 90px;
overflow : hidden;
border : #ddd solid 1px;
margin-bottom : 10px;
text-align : center;
background : #fff;
box-sizing : border-box;
}
#footer {
width : 100%;
background : #323232;
overflow : hidden;
margin-top : 10px;
border-top : 15px solid #2e2e2e;
}
.footeralan {
float:left;
width : 25%;
box-sizing: border-box;
padding-top : 25px;
padding-left :15px;
color : #989898;
}
.footerlogo {
float:left;
width : 25%;
box-sizing: border-box;
background : #2e2e2e;
padding-bottom :15px;
color : #989898;
text-align : center;
}
.footerlogo img.flogo {
margin : 0 auto;
max-width:100%;
text-align : center;
display:block;
}
.footeralan span {
display : block;
text-decoration : none;
font-size : 12px;
}
.footeralan span.adres {
padding-bottom : 20px;
padding-left : 20px;
margin-top : 10px;
background : url(../img/map.png) top 5px left no-repeat;
}
.footeralan span.tel2 {
padding-bottom : 20px;
padding-left : 20px;
background : url(../img/tel2.png) top 5px left no-repeat;
}
.footeralan span.mail {
padding-bottom : 20px;
padding-left : 20px;
background : url(../img/mail.png) top 5px left no-repeat;
}
.footeralan b{
display : block;
font-size : 15px;
font-weight : 400;
padding-bottom : 20px;
}
.footeralan a{
display : block;
border-bottom : 1px dotted #555;
line-height  : 20px;
padding : 10px 0;
color : #fff;
text-decoration : none;
font-size : 12px;
}
.footeralan a:hover{
color : #f05a28;
}
@media screen and (max-width:480px) {
.center {
width : 100%;
}
#header {
margin-bottom : 0px;
}
#menu,#home,.mgizle {
display : none;
}
#top a.tel{
height : 36px;
line-height : 36px;
color : #bbb;
text-decoration : none;
float : right;
margin-right : 10px;
font-size : 0px;
}
#top a.tel span{
background : url(../img/tel.png) left 10px center no-repeat;
padding-left : 30px;
font-weight : 600;
color : #eee;
font-size : 14px;
}
#slide {
float : left;
width : 100%;
height : auto;
margin : 0px;
background : #fff;
box-shadow : 0 0 5px 0px rgba(0,0,0,0.2)
}
#slide .flexslider {
width : 100%;
height : auto;
position : relative;
background : url(../img/load.png) center center no-repeat #444;
overflow : hidden;
}
#slide .flexslider .slides > li {
display : none;
}
#slide .flexslider .flexresim {
margin : 0 auto;
width : 100%;
height : auto;
display : block;
}
#slide .flexslider .flex-direction-nav li a {
top : 60px;
}
#top a.tel{
margin-left:0px;
}
.duyuru {
margin-left:0px;
}
.alan{
width : 100%;
margin : 0px 0;
box-sizing : border-box;
}
.alan.kr{
min-height : 270px;
background : #fff;
padding-right  :0px;
margin-top : 15px;
}
.footerlogo {margin-left:-10px}
.footeralan,.footerlogo {width : 50%;}
#slopen,#slclose {
display : block;
float : right;
width : 60px;
height : 65px;
line-height : 65px;
cursor : pointer;
color : #eee;
margin : 15px;
background : url(../img/menu.png) right center no-repeat;
}
#slclose {
display : none;
}
#left {
display : block;
width : 100%;
min-height : 100%;
background : #333;
z-index : 88;
position : absolute;
left : -1500px;
top : 0;
box-sizing : border-box;
top : 138px;
}
.zoom-small-image {
float : right;
width : 100%;
height : 300px;
overflow : hidden;
text-align : center;
border : #ddd solid 1px;
background : #fff;
box-sizing : border-box;
margin : 10px 0;
}
.y50 {
float : left;
width : 100%;
height : auto;
box-sizing : border-box;
padding : 0 5px;
}
#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 : 45px;
padding-left : 15px;
font-size : 15px;
box-sizing : border-box;
color : #ddd;
}
#cssmenu {
width : 100%;
}
#cssmenu > ul > li > a {
display : block;
border-bottom : 1px solid #666;
}
#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 : #444;
border-bottom : 1px solid #555;
padding-left : 20px;
box-sizing : border-box;
text-transform : capitalize;
}
.resim2 {
float : left;
width : 50%;
height : auto;
box-sizing : border-box;
padding : 5px;
overflow : hidden;
text-align : center;
}
}