@charset "utf-8";
@font-face {
    font-family: 'Baloo Bhai';

    src:  url('../fonts/baloo.ttf') format('truetype');

    font-weight: normal;

    font-style:normal;
}
@font-face {
    font-family: 'Open Sans';
    src:  url('../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style:normal;
}
body{
font-family: "Open Sans";
margin:0px;
background-image: url('../images/alt.png');
background-repeat: repeat-y;

}
body::-webkit-scrollbar-track
{
    border-radius: 0px;
    background-color: transparent;
}
body::-webkit-scrollbar
{
    width: 5px;
    background-color: transparent;
}
body::-webkit-scrollbar-thumb
{
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 10px rgb(37 49 92);
    background-color: rgb(37 49 92);
}
.acilis{
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    background-color:#FFF;
    background-image:url('../images/acilis.png');
    background-repeat:no-repeat;
    background-size:400px auto;
    background-position: center;
    transition: all 0.2;
    z-index:5;
    -webkit-animation-name: acilis;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0s;
    animation-name: acilis;
    animation-duration: 1s;
    animation-fill-mode:forwards;
    animation-delay: 0s;
}
@-webkit-keyframes acilis {
  0%  { background-size:400px auto;}
20% { background-size:350px auto;}
 30% { background-size:400px auto;}
40% { background-size:350px auto;}
100% { background-size:400px auto;}

}
@keyframes acilis {
0%  { background-size:400px auto;}
20% { background-size:350px auto;}
 30% { background-size:400px auto;}
40% { background-size:350px auto;}
100% { background-size:400px auto;}

}
.acilis > div{
position:absolute;
opacity: 0;
height:100%;
width:2px;
background-color: #FFF;
box-shadow:0px 0px 15px rgba(255, 255, 255, 0.596);
left:calc(50% - 400px);
}
.yukari{
    width: 50px;
    height: 50px;
    background-color: #dc1213;
    position: fixed;
    bottom: 20px;
    right: -100px;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: 30px;
    box-shadow: 0px 5px 15px rgb(1,1,1, 0.25);
    background-position: center;
    background-image: url(../images/ikonlar/yukari.png);
    cursor: pointer;
   /* display: none;*/
    z-index: 2;
    transition:all 0.5s;
}
.yukari:hover {
    background-color: #f92c2d;
}
.ust{
position:fixed;
width:100%;
height:80px;
background-color:#FFF;
box-shadow: 0px 5px 15px rgb(1,1,1, 0.20);
z-index: 2;
}
.ust > div{
width:100%;
max-width:1200px;
margin:auto;
}
.logo{
cursor:pointer;
float:left;
width:200px;
height:80px;
background-image:url('../images/logo.png');
background-repeat:no-repeat;
background-size:170px auto;
background-position: center;
}
.logo2{
float:right;
width:110px;
height:80px;
background-image:url('../images/logo2.png');
background-repeat:no-repeat;
background-size:60px auto;
background-position: center;
}
.mobilMenuDugme{
width: 50px;
height:50px;
float:left; 
margin:10px; 
background-image: url('../images/ikonlar/mobilMenu.png');
background-repeat: no-repeat;
background-position: center;
background-size: 25px;
display: none;
}
.menu{
float:right;
width:calc(100% - 360px);
height:40px;
margin:0px;
margin-top:20px;
text-align:right;
padding:0px;
}
.menu li{
list-style: none;
display: inline-block;
padding:10px 0px;
}
.menu a{
text-decoration:none;
color:#333;
margin-right:15px;
font-family: "Open Sans";
font-weight: bold;
transition: all 0.2s;
font-size: 11pt;
}
.menu a:hover{
color:#e74148;
}
.menu li:hover ul{
visibility: visible;
opacity: 1;
margin-top:10px;
}
.menu ul{

opacity: 0;
transition: all 0.5s;
visibility: hidden;
background-color:#FFF;
position: absolute;
width: 150px;
padding:5px 0px;
margin:0px;
margin-top:30px;
margin-left:-30px;
border-radius: 10px;
box-shadow: 0px 8px 20px rgb(1,1,1, 0.15);
}
.menu ul li a{
display:block;
padding:0px 10px;
text-align:center;
}
#iletisimMenu{
background-color:#e74148;
color:#FFF;
padding:7px 10px;
border-radius: 7px;
box-shadow: 0px 5px 10px rgb(1,1,1, 0.15);
}
#iletisimMenu:hover{
background-color:#f3535b;
}
.banners ul{
margin:0px;
padding:0px;
height:450px;
overflow: hidden;
box-shadow: 0px 5px 15px rgb(1,1,1, 0.35);
width: 100%;
}
.banners ul li{
height:450px;
list-style: none;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow:0px 5px 15px rgb(1,1,1, 0.35);
width: 100%;
position: absolute;
opacity: 0;
transition: none;
}
.bosluk{
height:80px;
}

.aciklama >div{
float:left;
height:700px;
padding:0px 50px;
width: calc(50% - 100px);
/*font-family: "baloo bhai";*/
}
.aciklama{
background-color:#FFF;
overflow:hidden;
font-size:16pt;
line-height:30px;
margin:100px 0px;
box-shadow: 0px 10px 20px rgb(1,1,1, 0.20);
}
.aciklama >div:first-child{
background-image: -webkit-linear-gradient(0deg, #24c0f1 0%, #4c9afe 100%);
background-image: -ms-linear-gradient(0deg, #24c0f1 0%, #4c9afe 100%);
background-size: cover;
color:#FFF;
display: table;
#position: relative;
overflow: hidden;
line-height:35px;
}
.aciklama > div:first-child > div{
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.aciklama > div:first-child > div > div{
#position: relative;
#top: -50%;
}
.aciklama >div:last-child{
background-image:url('../images/aciklama.png');
background-size: cover;
}
.alt{
width:100%;
height:auto;
background-color:#25315c;
background-image: url('../images/alt.png');
background-size: 70%;
background-repeat:repeat-x;
padding-top:60px;
overflow: hidden;
background-position: left;
}
.alt > .altIcerik{
width:100%;
margin:auto;
max-width:1200px;
}
.alt > div > div{
    width: 27%;
    float: left;
    height: auto;
    margin-left: 9%;
    min-height: 280px;
    padding-bottom: 40px;
}
.alt> div > div:first-child{
background-image:url('../images/logo.png');
background-repeat:no-repeat;
background-size:auto auto;
background-position: center;
margin-left:0%;
}
.alt> div > div > strong{
display:block;
padding:5px;
border-bottom:3px solid #7883ac;
font-size:14pt;
width:50%;
color:#cbd2ee;
margin-bottom:20px;
}
.alt> div > div > a{
display:block;
color:#acb3ce;
text-decoration:none;
margin:10px 0px;
font-size:11pt;
}
.alt> div > div > a:hover{
text-decoration:underline;
}
.alt> div > div > span{
margin:15px 0px;
color:#acb3ce;
display:block;
}
.altMail{
    cursor:pointer;
}
.altMail:hover{
    text-decoration:underline;
}
.copyright{
padding:10px 0px;
border-top:1px solid #7883ac;
overflow:hidden;
width:100%;
text-align:center;
color:#acb3ce;
}
.amacimiz{
background-color:#edf0f8;
padding:150px 0px;
text-align:center;
margin-bottom:150px;
}
.amacimiz > div{
width:100%;
max-width:1200px;
margin:auto;
font-size:18pt;
line-height:45px;
color:#333;
box-sizing: border-box;
}
.amacimiz span{
display:block;
width:100%;
height:150px;
background-image:url('../images/logoMat.png');
background-repeat:no-repeat;
background-size:auto auto;
background-position: center;
margin-bottom:50px;
}
.indexMenu{
margin:100px 0px;
overflow:hidden;
}
.indexMenu > div{
width:100%;
max-width:1200px;
margin:auto;
text-align:center;
}
.indexMenu > div > a{
display:inline-block;
width:190px;
height:240px;
border-radius:10px;
margin:20px;
padding:30px;
background-color:#25315c;
transition: all 0.5s;
overflow:hidden;
text-decoration: none;
color:#edf0f8;
box-shadow: 0px 5px 15px rgb(1,1,1, 0.35);
}
.indexMenu > div > a:hover{
background-color:#ff1d1d;
}
.indexMenu > div > a > i{
display:block;
width:100%;
height:60px;
opacity: 0.9;
background-repeat:no-repeat;
background-size:contain;
background-position: center;
transition: all 0.5s;
}
.indexMenu > div > a:hover > i{
opacity: 1;
}
.indexMenu > div > a > strong{
margin-top:20px;
display: block;
}
.indexMenu > div > a > span{
display: block;
margin-top:50px;
}
.mobilMenu{
position:fixed;
width:100%;
height:100%;
background-color:#25315c;
z-index: 15;
left:-100%;
display:none;
}
.mobilMenu ul{
margin:0px;
padding: 0px;
}
.mobilMenu > ul{
margin-top:50px;
}
.mobilMenu ul li{
/*padding-left: 10px;*/
display: block;
border-top: 1px solid #435276;
}
.mobilMenu > ul > li:last-child{
border-bottom: 1px solid #435276;
}
.mobilMenu ul li a{
display:block;
padding:10px;
color:#becae7;
text-decoration: none;
background-image: url('../images/ikonlar/mobilMenuler.png');
background-repeat: no-repeat;
background-position: 10px center;
background-size: 10px;
padding-left:25px;
}
.mobilMenu ul li ul li a{
padding-left:40px;
background-position: 25px center;
}
.mobilMenu ul li ul{
/*   padding-left:20px;*/
}
.mobilMenu > strong{
display:block;
width:20px;
height:20px;
background-image: url('../images/ikonlar/kapat.png');
background-repeat: no-repeat;
background-position: left;
background-size: contain;
margin:15px;
float:right;
}
.sayfaBaslik{
    width:100%;
    height:250px;
    background-image: url('../images/baslik.png');
    background-size: cover;
    background-repeat:repeat-x;
    background-position: left;
    display: table;
    overflow: hidden;
    box-shadow:0px 5px 15px rgb(37 49 92 / 19%);
}
.sayfaBaslik > div{
	display: table-cell;
	vertical-align: middle;
}
.sayfaBaslik > div > div{
    width:100%;
    max-width:1200px;
    margin:auto;
    text-align:center;
    color:#4a598f;
    
}
.sayfaBaslik > div > div > strong{
    font-size:28pt;
    font-family: 'baloo bhai';

}
.sayfaIcerikYazi{
    padding:150px 0px;
    text-align:center;
    margin-bottom:150px;
}
.sayfaIcerikYazi > div{
    width:100%;
    max-width:1200px;
    margin:auto;
    font-size:18pt;
    line-height:45px;
    color:#000;
    box-sizing: border-box;
}
.sayfaIcerikYazi span{
display:block;
width:100%;
height:150px;
background-image:url('../images/logoMat.png');
background-repeat:no-repeat;
background-size:auto auto;
background-position: center;
margin-bottom:50px;
}
.hakkimizdaBaslik{
    font-weight:bold;
    margin-top:50px;
    font-size:26pt;
    
}
.iletisim{
    text-align:center;
    margin-top:50px;
    background-color:#FFF;
}
.iletisim > div{
    display:inline-block;
    width:calc(100% - 40px);
    height:200px;
    border-radius:10px;
    padding:20px;
    transition: all 0.5s;
    overflow:hidden;
    text-decoration: none;
    color:#25315c;
    border-bottom:1px solid #EEE;
}
.iletisim > div:last-child{
    border-bottom:0px;
}
.iletisim > div > i{
    display:block;
    width:100%;
    height:60px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;
    transition: all 0.5s;
}
.iletisim > div > strong{
    margin-top:20px;
    display: block;
    font-family: 'baloo bhai';
}
.iletisim > div > span{
    display: block;
    margin-top:20px;
}
.kalite{
    width:100%;
    text-align:center;
    margin:50px 0px;
}
.kalite > div{
    display:inline-block;
    width:250px;
    margin:30px;
    height:350px;
    background-repeat: no-repeat;
    background-size: 103%;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgb(1,1,1, 0.20);
    cursor: pointer;
    transition: all 0.5s;
}
.kalite > div:hover{
    background-size: 108%;
    box-shadow: 0px 15px 35px rgb(1,1,1, 0.35);
}
.gorselBuyuk{
    position: fixed;
    background-color:rgb(255,255,255, 1);
    width:100%;
    height:100%;
    z-index: 20;
    display:none;
    top:0%;
}
.gorselBuyuk > div{
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}
.gorselBuyuk > span{
    position:absolute;
    width:70px;
    height:150px;
    top:30%;
    background-color: rgb(1,1,1, 0.05);
    background-repeat: no-repeat;
    background-size: 40px auto;
    background-position: center;
    z-index: 2;
}
.gorselBuyuk > span:hover{
    cursor: pointer;
    background-color: rgb(1,1,1, 0.10);
}
.gorselBuyukSag{
    right: 0%;
    background-image:url('../images/ikonlar/sag.png');
}
.gorselBuyukSol{
    left: 0%;
    background-image:url('../images/ikonlar/sol.png');
}
.gorselBuyuk strong{
    display:block;
    width:30px;
    height:30px;
    background-image: url('../images/ikonlar/kapat.png');
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    margin:15px;
    right: 0%;
    cursor: pointer;
    z-index: 10;
    position: absolute;
}
.referanslar{
    margin:50px 0px;
}
.referanslar > div{
    border-bottom:1px solid #EEE;
    text-align: center;
}
.referanslar > div > strong{
    display:block;
    padding:10px 0px;
    font-size:14pt;
}
.referanslar > div > span{
    margin:10px 0px;
    display:block;
}
.urunler{
    width: 100%;
    max-width: 1200px;
    text-align: center;
    margin: 30px auto;
    overflow: hidden;
    padding: 20px 0px;
}
.urunler > a{
    display:block;
    float:left;
    width:calc(25% - 30px);
    box-sizing: border-box;
    height:550px;
    overflow: hidden;
    margin:15px;
    color:#333;
    text-decoration: none;
    background-color:#FFF;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgb(1,1,1, 0.20);
    transition: all 0.5s;
}
.urunler > a:hover{
    color:#FFF;
    background-color: #ff1d1d;
}
.urunler > a:hover > .urunGorsel{
    background-size:160%;
}
.urunGorsel{
    height:160px;
    margin:10px 20px;
    border:1px solid #EEE;
    background-repeat: no-repeat;
    background-size:100%;
    background-position: center;
    transition: all 0.5s;
}
.urunler > a > span{
    display:block;
    padding:10px;
    text-align:center;
    font-weight: bold;
}
.urunler > a > ul{
    padding: 10px;
    margin: 10px;
    overflow-y: auto;
    height: 270px;
}
.urunler > a > ul::-webkit-scrollbar-track
{
    border-radius: 10px;
    background-color: transparent;
}

.urunler > a > ul::-webkit-scrollbar
{
    width: 5px;
    background-color: transparent;
}

.urunler > a > ul::-webkit-scrollbar-thumb
{
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.3);
    background-color: rgb(1,1,1, 0.05);
}
.urunler > a > ul > li{
    text-align: left;
    font-size: 11pt;
    margin:10px 0px;
    list-style-type: none;
    
}
.mobilDil{
    border-bottom: 1px solid #435276;
}
.mobilDil a{
    border-right: 1px solid #435276;
    display: inline-block;
    color: #6d7283;
    text-decoration: none;
    padding: 10px 20px;
}
.mobilDil a:hover{
    background-color:rgb(255,255,255, 0.20);
}
#dil{
    color:#AAA;
}
#dil a{
    color:#888;
    font-size:9pt;
    margin-right:5px;
    margin-left:5px;
}
#dil a:hover{
    color:#333;
}