* {
font-family : "Poppins", "Helvetica", "Arial", "sans-serif";
}
html, body {
margin : 0;
padding : 0;
width : 100%;
height : 100%;
font-weight : 300;
font-size : 15px;
background : #eee;
}
b, strong, h1, h2, h3 {
font-weight : 400;
}
.left {
float : left;
}
img.men {
display : none;
}
.right {
float : right;
}
.clear {
clear : both;
}
.center {
margin : 0 auto;
width : 100%;
max-width : 1200px;
}
#load {
display : table;
position : fixed;
height : 100%;
width : 100%;
z-index : 1;
top : 0;
left : 0;
background : #eee;
overflow : hidden;
}
.load {
height : 100%;
width : 100%;
display : table-cell;
vertical-align : middle;
text-align : center;
}
.load img {
margin-top : 150px;
}
#page {
margin : 0 auto;
width : 100%;
}
#top {
width : 100%;
height : 50px;
background : #d71f24;
line-height : 50px;
position : relative;
z-index : 4;
}
#top a {
color : #fff;
text-decoration : none;
font-size : 12px;
transition : all 0.2s linear;
}
#top a:hover img.efbi {
opacity : 1;
filter : drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3));
}
#top a:first-child {
padding-left : 15px;
}
#top a:hover {
color : #474747;
}
#top a.whatsapp2 {
float : left;
padding-left : 50px;
padding-right : 15px;
background : url(../img/whatsapp.svg) left 15px center no-repeat #000;
background-size : 25px 25px;
font-weight : 600;
font-size : 14px;
}
#top a.whatsapp2:hover {
background : url(../img/whatsapp.svg) left 15px center no-repeat #4be809;
background-size : 30px 30px;
color : #fff;
}
#top a.tel {
float : right;
padding-left : 50px;
padding-right : 15px;
background : url(../img/tel.svg) left 15px center no-repeat #000;
background-size : 25px 25px;
font-weight : 600;
font-size : 14px;
}
#top a.tel:hover {
background : url(../img/tel.svg) left 15px center no-repeat #9a171b;
background-size : 30px 30px;
color : #fff;
}
#header {
width : 100%;
height : 100px;
background : url(../img/header-6.png) center center no-repeat #fff;
position : relative;
z-index : 3;
box-shadow : 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}
#logo {
float : left;
height : 60px;
padding : 20px 0;
}
#menu {
float : right;
height : 100px;
}
#mega {
float : right;
list-style : none;
margin : 0;
padding : 0;
}
#mega li {
float : left;
position : relative;
}
#mega li a {
padding : 0 15px;
margin : 35px 0;
font-size : 15px;
color : #e60000;
text-decoration : none;
display : inline-block;
border-right : 1px solid #ddd;
height : 30px;
line-height : 30px;
font-weight : 500;
text-transform : uppercase;
}
#mega li:hover a {
color : #000;
}
#mega div {
position : absolute;
border : 0;
top : 100px;
background : #000;
box-shadow : 0 5px 10px 0 rgba(0, 0, 0, 0.3);
transition : all 0.4s linear;
width : auto;
max-height : 0;
overflow : hidden;
}
#mega li:hover div {
max-height : 500px;
}
#mega li div a, #mega li:hover div a {
text-decoration : none;
display : block;
box-sizing : border-box;
height : 40px;
line-height : 40px;
font-weight : 300;
margin : 0;
padding : 0;
white-space : nowrap;
display : block;
padding : 0 15px;
text-transform : capitalize;
border-bottom : 1px solid rgba(255, 255, 255, 0.2);
box-sizing : border-box;
border-right : 0;
transition : all 0.2s linear;
color : #fff;
font-size : 14px;
}
a.all {
font-size : 14px;
background : #d71f24;
}
#mega li div a:hover, #mega li:hover div a:hover {
text-decoration : none;
background : rgba(0, 0, 0, 0.1);
color : #fff;
padding : 0 10px 0 20px;
}
#slide {
width : 100%;
overflow : hidden;
}
.slide {
position : relative;
width : 100%;
height : 100%;
}
@keyframes mymove {
from {
bottom : 100%;
}
to {
bottom : 85px;
}
}
@keyframes mymoves {
from {
bottom : 100%;
}
to {
bottom : 140px;
}
}
.slide a h2 {
position : absolute;
z-index : 9;
bottom : 140px;
line-height : 60px;
background : rgba(0, 0, 0, 0.6);
padding : 0 15px;
color : #fff;
font-size : 22px;
font-weight : 400;
text-shadow : 0 0 3px rgba(0, 0, 0, 0.7);
animation-name : mymoves;
animation-duration : 2s;
text-transform : uppercase;
}
.slide a span {
position : absolute;
z-index : 9;
bottom : 85px;
background : rgba(0, 0, 0, 0.5);
line-height : 60px;
padding : 0 15px;
color : #fff;
font-size : 22px;
font-weight : 300;
text-shadow : 0 0 3px rgba(0, 0, 0, 0.9);
animation-name : mymove;
animation-duration : 1s;
text-transform : uppercase;
}
.slide .resim {
width : 100%;
height : auto;
overflow : hidden;
}
.slide .resim img {
width : 100%;
height : auto;
}
.yer {
width : 100%;
line-height : 40px;
height : 40px;
background : #1b1b1b;
color : #fff;
font-size : 13px;
overflow : hidden;
}
.yer a {
float : left;
color : #fff;
text-decoration : none;
background : url(../img/right.svg) center right no-repeat;
background-size : 10px 10px;
padding-right : 20px;
margin-right : 10px;
}
.yer a:hover {
text-decoration : underline;
}
b.baslik {
display : block;
width : 100%;
line-height : 50px;
height : 50px;
background : #1b1b1b;
color : #fff;
font-size : 18px;
text-align : center;
}
h1.baslik {
display : block;
width : 100%;
line-height : 30px;
height : 50px;
color : #1b1b1b;
font-size : 18px;
margin : 0;
padding : 10px 0;
}
b.baslik2 {
display : block;
width : 100%;
line-height : 50px;
height : 50px;
background : #f4f6fa;
color : #1b1b1b;
font-size : 18px;
text-align : center;
box-shadow : 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}
#haber {
margin : 0 auto;
width : 100%;
max-width : 1220px;
}
.haber {
width : 100%;
background : #d50000;
padding-bottom : 10px;
}
.haberbox {
padding : 10px;
transition : all 0.2s linear;
}
.haberbox.ou {
float : left;
width : 33.33%;
box-sizing : border-box;
}
.haberbox:hover {
background : rgba(0, 0, 0, 0.3);
}
.haberbox .resim {
width : 100%;
height : 200px;
border : #fff solid 3px;
box-sizing : border-box;
background : #fff;
overflow : hidden;
}
.haberbox .resim img {
width : 100%;
height : auto;
}
.haberbox .baslik {
width : 100%;
height : 40px;
padding : 10px 0;
overflow : hidden;
}
.haberbox .baslik a {
color : #f8f8f8;
text-decoration : none;
}

#urun {
margin : 0 auto;
width : 100%;
max-width : 1220px;
}
#ref {
margin : 0 auto;
width : 100%;
max-width : 1220px;
}
#bayi {
margin : 0 auto;
width : 100%;
max-width : 1220px;
}
.urun {
width : 100%;
padding : 15px 0;
}
.urunbox {
padding : 10px;
transition : all 0.2s linear;
}
.urunbox.yrm {
float : left;
width : 20%;
box-sizing : border-box;
}
.urunbox:hover {
background : rgba(0, 0, 0, 0.05);
}
.urunbox .resim {
width : 100%;
height : 250px;
background : #fff;
overflow : hidden;
position : relative;
border : #fff solid 5px;
box-sizing : border-box;
box-shadow : 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.urunbox .resim .resim_img {
width : 31% !important ;
height : 250px !important ;
overflow : hidden;
display : table-cell;
overflow : hidden;
text-align : center;
vertical-align : middle;
margin : 0 auto;
text-align : center;
}
.urunbox .resim .resim_img img {
max-width : 250px !important ;
max-height : 250px !important ;
height : auto;
vertical-align : baseline;
}
.urunbox .baslik {
width : 100%;
height : 60px;
padding : 10px;
background : #fafafa;
box-sizing : border-box;
box-shadow : 0 5px 10px 0 rgba(0, 0, 0, 0.1);
overflow : hidden;
}
.urunbox .baslik a {
color : #444;
text-decoration : none;
}
.resimler {
margin : 0 auto;
width : 100%;
max-width : 1220px;
padding-bottom : 10px;
}
.resimler h2 {
display : block;
width : 100%;
line-height : 50px;
height : 50px;
color : #1b1b1b;
font-size : 18px;
margin : 0 10px;
padding : 0;
}
.galeribox {
float : left;
width : 20%;
height : 220px;
overflow : hidden;
position : relative;
box-sizing : border-box;
padding : 10px;
}
.galeribox .galeri {
width : 31% !important ;
height : 200px !important ;
overflow : hidden;
display : table-cell;
overflow : hidden;
text-align : center;
vertical-align : middle;
margin : 0 auto;
text-align : center;
background : #fff;
box-shadow : 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.galeribox .galeri img {
max-width : 200px !important ;
max-height : 200px !important ;
height : auto;
vertical-align : baseline;
}
.galeribox.belge {
height : 320px;
width : 25%;
}
.galeribox.belge .galeri {
height : 300px !important ;
}
.galeribox.belge .galeri img {
max-width : 300px !important ;
max-height : 300px !important ;
}
.galeribox:hover {
background : rgba(0, 0, 0, 0.05);
}
.page {
line-height : 25px;
}
.page p b {
color : #1b1b1b;
}
.y50 {
float : left;
width : 50%;
}
.y50 iframe {
width : 100% !important ;
height : 355px !important ;
margin-bottom : 10px;
}
.iform {
float : right;
width : 100%;
padding : 10px;
box-sizing : border-box;
background : #474747;
height : 355px;
margin-bottom : 10px;
}
.iform b {
display : block;
color : #fff;
font-size : 15px;
font-weight : 400;
margin-top : 5px;
}
input.ifo, textarea.ifo {
width : 100%;
box-sizing : border-box;
height : 38px;
line-height : 18px;
padding : 10px;
background : #fff;
border : rgba(0, 0, 0, 0.1) solid 1px;
margin-top : 12.5px;
outline : 0;
color : #333;
transition : all 0.2s linear;
}
textarea.ifo {
height : 80px;
line-height : 20px;
}
textarea.ifo:focus, input.ifo:focus {
background : #eee;
}
input.giris {
float : right;
cursor : pointer;
height : 45px;
line-height : 22px;
padding : 10px 15px 6px 15px;
background : none;
color : #fff;
border : 0;
margin-top : 12.5px;
outline : 0;
text-transform : uppercase;
font-size : 14px;
transition : all 0.2s linear;
font-weight : 400;
}
input.giris:hover {
background : rgba(0, 15, 25, 0.5);
}
#footer {
width : 100%;
min-height : 300px;
padding : 20px 0;
background : #d71f24;
color : #fff;
box-shadow : 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
.footer_left {
float : left;
width : 80%;
min-height : 300px;
box-sizing : border-box;
border-right : 1px solid rgba(255, 255, 255, 0.2);
padding-right : 14px;
}
.footerlogo {
float : left;
width : 25%;
box-sizing : border-box;
padding : 14px 7px 0 7px;
}
.footerlogo img {
width : 400px;
max-width : 100%;
}
.maillist {
float : left;
width : 75%;
box-sizing : border-box;
padding-left : 14px;
border-left : 1px solid rgba(255, 255, 255, 0.2);
}
.maillist b {
display : block;
color : #fff;
margin-bottom : 10px;
}
input.maillist {
margin : 0;
outline : 0;
width : 100%;
height : 40px;
line-height : 40px;
padding : 0 10px;
background : #fff;
border : #1e1e1e solid 1px;
color : #555;
box-sizing : border-box;
transition : all 0.2s linear;
}
input.ekle {
margin : 0;
outline : 0;
padding : 0 10px;
box-sizing : border-box;
background : #1e1e1e;
border : #1e1e1e solid 1px;
color : #fff;
cursor : pointer;
height : 40px;
line-height : 40px;
float : right;
margin-top : -40px;
}
.falt {
width : 100%;
padding-top : 14px;
margin-top : 14px;
box-sizing : border-box;
border-top : 1px solid rgba(255, 255, 255, 0.2);
}
.falan {
float : left;
width : 25%;
padding-left : 15px;
box-sizing : border-box;
border-right : 1px solid rgba(255, 255, 255, 0.2);
min-height : 150px;
}
.falan b {
display : block;
margin-bottom : 10px;
color : #fff;
}
.falan a {
display : block;
text-decoration : none;
color : #fff;
line-height : 22px;
}
.falan a:hover {
color : #1e1e1e;
text-decoration : none;
}
.falan span {
display : block;
text-decoration : none;
color : #fff;
line-height : 22px;
}
.falan.son {
border-right : 0;
}
.destek {
float : left;
width : 100%;
margin-top : 10px;
padding : 0 10px;
height : 40px;
line-height : 40px;
box-sizing : border-box;
background : rgba(0, 0, 0, 0.1);
border-radius : 3px;
}
.destek .phone {
background-image : url(../img/tel.svg);
background-repeat : no-repeat;
background-size : 16px 16px;
background-position : left 10px center;
padding-left : 32px;
float : left;
color : #fff;
font-weight : 500;
}
.destek span {
float : right;
color : #eee;
font-size : 12px;
}
.footer_right {
float : left;
width : 20%;
box-sizing : border-box;
padding-left : 14px;
}
.sosyal {
width : 100%;
padding-bottom : 8px;
margin-bottom : 15px;
border-bottom : 1px solid rgba(255, 255, 255, 0.2);
}
.footer_right b {
display : block;
color : #fff;
margin-bottom : 10px;
}
.footer_right span {
display : block;
text-decoration : none;
color : #fff;
line-height : 22px;
}
#copyright {
width : 100%;
height : 50px;
line-height : 50px;
background : #fff;
color : #1e1e1e;
box-sizing : border-box;
padding : 0 14px;
overflow : hidden;
}
a.filnet {
float : right;
margin-top : 15px;
margin-right : 35px;
display : block;
width : 60px;
height : 40px;
transition : all 0.2s linear;
}
a.filnet img {
width : 60px;
}