@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600&display=swap');
body{
margin:0px;
background:#fff;
font-family:'Roboto', Arial, sans-serif;
font-style: normal;
font-weight: 400;
font-size:0.86rem;
color:#333333;
}
a{color:#333; text-decoration:none; -webkit-transition:all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s;}
a:hover{color:#000000; text-decoration:none;}
:root {
--defaultcolor:79 70 229;
--defaultbordercolor:50 41 194;
--lightcolor:255 221 0;
}
.radius3{-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.radius5{-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.radius8{-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}
.circle{-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}
.transition{-webkit-transition:all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s;}
.cover{-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center;}
.circle{-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}
.transition{-webkit-transition:all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s;}
.shadow{-moz-box-shadow:0 2px 15px rgb(0 0 0 /20%); -webkit-box-shadow:0 2px 15px rgb(0 0 0 /20%); box-shadow:0 2px 15px rgb(0 0 0 / 20%);}

.govde{width:80%; height:auto; margin:30px 10%; display: flex; justify-content: space-between;}
.sol{width:24%; height:auto; display: flex; flex-direction: column;}
.sol ul{width:100%; height:auto; display: flex; flex-direction: column;}
.sol ul li{width:100%; height:auto; display: flex; margin-bottom: 1px;}
.sol ul li a{width:100%; display:block; padding:8px 12px; background-color:#ebebeb;}
.sol ul li a:Hover{background-color:#f4f4f4;}
.sag{width:74%; height:auto; display: flex; flex-direction: column;}

#top{width:80%; height:50px; padding:0px 10%; display: flex; justify-content: space-between; align-items: center; background:rgba(var(--defaultcolor)); -webkit-box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%); box-shadow: 0 2px 6px 0rgba(0,0,0,.1);}
#top ul:nth-child(1){width:auto; height:40px; display: flex;}
#top ul:nth-child(1) li{width:auto; height:40px; line-height: 40px; display: color: #fff; flex; justify-content:flex-start; align-items: center; font-size: 1.2em;}
#top ul:nth-child(1) li i{font-size:1.2em; line-height:40px; margin-right:3px;}
#top ul:nth-child(1) li span{font-size:1em; line-height:40px; color: #fff;}
#top ul:nth-child(1) li a{color:#fff;}
#top ul:nth-child(2){width:auto; height:32px; display: flex;}
#top ul:nth-child(2) li{width:32px; height:32px; margin:0 1px; display:flex;}
#top ul:nth-child(2) li a{width:32px; height:32px; display: flex; color:rgba(var(--defaultcolor)); justify-content: center; align-items: center; background-color: #fff;}
#top ul:nth-child(2) li i{font-size: 1.2em; line-height:32px; display: block;}
header{width:80%; height:80px; display: flex; justify-content:space-between; align-items: center; padding:0px 10%; -webkit-box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%); box-shadow: 0 2px 6px 0rgba(0,0,0,.1);}
header figure{}
header figure img{}

.Toogle{display:none;}

header .search{width:auto; height:50px; display: flex;}
header .search form{margin: 0; padding: 0;}
header .search input{ width:200px; height:32px; margin:6px 0; border:1px solid #ebebeb; background-color: #fff; color: #000;
-webkit-transition: 0.5s; transition: 0.5s; outline: none;}
header .search input:focus{border:1px solid rgba(var(--defaultbordercolor));}
header .search button{width:30px; height:32px; cursor: pointer; margin:3px 0px; border:0px; background-color:rgba(var(--defaultcolor)); color: #fff;}
header .search button i{line-height:30px;}
header ul{width:auto; height:40px; margin:20px 0; display: flex;}
header ul li{width:auto; height:40px; padding:0 8px; display: flex; line-height:40px; font-family: 'Raleway', sans-serif;}
header ul li a{color:#000; font-size: 1.1em; font-weight: 600; position: relative;}
header ul li a:Hover{color:#757575;}
header ul li a span{position: absolute; bottom: 0; left: 0; width:0; height:3px; background-color:rgba(var(--lightcolor)/100%);}
header ul li a:Hover span{width:100%;}


.jumbotron{width:76%; margin:30px 10%; padding:2%; min-height:200px; display: flex; justify-content:space-between; align-items: center;
box-shadow: -4px -6px 24px rgba(0, 0, 0, 0.08), 8px 12px 24px rgba(0, 0, 0, 0.08);}
.jumbotron div:first-child{width:60%; height:auto; flex-direction: column;}
.jumbotron div:first-child h2{width:100%; height:auto; font-size:1.8em; font-weight:500;}
.jumbotron div:first-child p{width:100%; height:auto; font-weight:300; font-size: 1.2em;}
.jumbotron div:last-child{width:30%; height:auto; flex-direction: column; text-align: center;}
.jumbotron div:last-child a{width:auto; height:40px; line-height: 40px; padding:14px 32px; font-size:1.2em; background-color: rgba(var(--lightcolor)/100%);}


.kategoriler{width:80%; margin: 0 10%; height:auto; display:flex; justify-content: space-between; flex-wrap: wrap;}
.kategoriler li{width:20%; padding:2%; margin:10px 0; cursor:pointer; display: flex; border:1px solid #e6e6e6;  flex-direction: column; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-position:center; border: 1px solid; border-color:#e5e6e9 #dfe0e4 #d0d1d5; position:relative;}
.kategoriler li:Hover{box-shadow: -4px -6px 24px rgba(0, 0, 0, 0.08), 8px 12px 24px rgba(0, 0, 0, 0.08);}
.kategoriler li figure{width: 100%;display: flex;}
.kategoriler li figure a{width: 100%;}
.kategoriler li figure a img{width: 100%;}
.kategoriler li h2{width:100%; height:40px; font-size:1.1em; margin:30px 0;}
.kategoriler li:Hover h2 a{color:rgba(var(--defaultcolor));}

.subeler{width:80%; margin:30px 10%; height:auto; display:flex; justify-content: space-between; flex-wrap: wrap;}
.subeler li{width:44%; padding:2%; margin:10px 0; cursor:pointer; display: flex; justify-content: space-between; border:1px solid #e6e6e6; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-position:center; border: 1px solid; border-color:#e5e6e9 #dfe0e4 #d0d1d5; position:relative; box-shadow: -4px -6px 24px rgba(0, 0, 0, 0.08), 8px 12px 24px rgba(0, 0, 0, 0.08);}
.subeler li figure{width:30%; line-height: 80px; display: flex; justify-content: center; align-items: center;}
.subeler li figure i{font-size: 2em; color:rgba(var(--defaultcolor));}
.subeler li section{width:60%; display:flex; flex-direction: column;}
.subeler li section h2{width:100%; height:40px; font-size:1.1em; margin:30px 0;}
.subeler li:Hover section h2 a{color:rgba(var(--defaultcolor));}


.bloglar{width:80%; margin:20px 10%; display: flex; flex-direction: column; position: relative;}
.blogimages{width:100%; height:auto; display: flex;}
.blogimages li{width:100%; height:auto; display: flex; justify-content:center; align-items: center;}
.blogimages li figure{width:30%; height:auto; display: flex; justify-content: center; align-items: center;}
.blogimages li figure img{width:80%;}
.blogimages li article{width:50%; height:auto; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.blogimages li article h3{width:100%; height:auto; display: flex; font-size: 1.5em; font-weight:300;}
.blogimages li article p{width:100%; height:auto; display: flex; font-size:1em;}
.blognumber{width:100%; height:20px; display: flex; justify-content: center;}
.blognumber li{width:30px; height:5px; margin:0 3px; display: flex; justify-content: center;}
.blognumber .blog1{display:block; line-height:5px; -webkit-transition:all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; background:rgba(0,0,0,0.4); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.blognumber .blog1:hover{background:rgba(0,0,0,0.7);}
.blognumber .blog2{display:block; line-height:5px; -webkit-transition:all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; background:rgba(var(--defaultcolor)); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.blogsolarrow{width:50px; height: 100%; display: flex; font-size: 2em; color:rgba(0,0,0,0.3); justify-content: center; align-items: center; position: absolute; left: 0; top: 0;}
.blogsolarrow:Hover{color:rgba(0,0,0,0.9);}
.blogsagarrow{width:50px; height: 100%; display: flex; font-size: 2em; color:rgba(0,0,0,0.3); justify-content: center; align-items: center; position: absolute; right:0; top: 0;}
.blogsagarrow:Hover{color:rgba(0,0,0,0.9);}


.urunler{width:100%; height: auto; margin: 0 0%; height:auto; display:flex; justify-content: space-between; flex-wrap: wrap;}
.urunler li{width:28%; height: auto; padding:2%; margin:10px 0; cursor:pointer; display: flex; border:1px solid #e6e6e6;  flex-direction: column; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-position:center; border: 1px solid; border-color:#e5e6e9 #dfe0e4 #d0d1d5; position:relative;}
.urunler li:Hover{box-shadow: -4px -6px 24px rgba(0, 0, 0, 0.08), 8px 12px 24px rgba(0, 0, 0, 0.08);}
.urunler li figure{width: 100%; height: auto; display: flex;}
.urunler li figure a{width: 100%;}
.urunler li figure a img{width: 100%;}
.urunler li h3{width:100%; height:40px; font-size:1.1em; margin:30px 0;}
.urunler li:Hover h2 a{color:rgba(var(--defaultcolor));}

.arama{width:100%; height: auto; margin: 0 0%; height:auto; display:flex; flex-direction: column;}
.arama li{width:96%; height:auto; padding:0 2%; line-height: 40px;}
.arama li a{color:#666;}


.blog{width:80%; height: auto; margin:30px 10%; height:auto; display:flex; justify-content: space-between; flex-wrap: wrap;}
.blog li{width:20%; height: auto; padding:2%; margin:10px 0; cursor:pointer; display: flex; border:1px solid #e6e6e6;  flex-direction: column; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-position:center; border: 1px solid; border-color:#e5e6e9 #dfe0e4 #d0d1d5; position:relative;}
.blog li:Hover{box-shadow: -4px -6px 24px rgba(0, 0, 0, 0.08), 8px 12px 24px rgba(0, 0, 0, 0.08);}
.blog li figure{width: 100%; height: auto; display: flex;}
.blog li figure a{width: 100%;}
.blog li figure a img{width: 100%;}
.blog li h3{width:100%; height:40px; font-size:1em; margin:30px 0;}
.blog li:Hover h2 a{color:rgba(var(--defaultcolor));}

.urundetay{width:68%; height:auto; padding:30px 3%; display: flex; flex-direction:column; box-shadow: -4px -6px 24px rgba(0, 0, 0, 0.08), 8px 12px 24px rgba(0, 0, 0, 0.08);}
.urundetay figure{width:100%; height:auto; display: flex; padding:30px 0; justify-content: center; align-items: center; margin-bottom: 30px; background-color: #f7f7f7;}
.urundetay h3{width:100%; height:auto; display: flex; margin-bottom: 30px; font-size: 1.3em;}
.urundetay table{width:100%; height:auto;}

.menudetay{width:68%; height:auto; padding:30px 3%; display: flex; flex-direction:column; box-shadow: -4px -6px 24px rgba(0, 0, 0, 0.08), 8px 12px 24px rgba(0, 0, 0, 0.08);}
.menudetay figure{width:100%; height:auto; display: flex; padding:30px 0; justify-content: center; align-items: center; margin-bottom: 30px; background-color: #f7f7f7;}
.menudetay h3{width:100%; height:auto; display: flex; margin-bottom: 30px; font-size: 1.3em;}
.menudetay p{width:100%; height:auto; font-size: 1.3em; margin-bottom: 10px;}


#homemap{width:100%; height:300px; float:left; border-top:1px solid #fff; margin-top:60px;}
.etiketler a{color:#CCCCCC; margin:3px; font-size:0.7rem;}
#breadcrumbs{width:80%; height:40px; line-height:40px; padding:0px 10%; font-size:0.7rem; display: flex; background-color:#ebebeb;}
#breadcrumbs a{color:#666666;}
#breadcrumbs a:hover{color:#333;}
#breadcrumbs i{line-height: 40px;}

.hometitle{width:80%; height:auto; line-height:50px; font-size:1.7em; font-weight:300; position:relative; margin:0 10%;}
.hometitle:before {background: #ff0000; bottom:0; content: ""; display: block; height: 2px; left: 0; margin: 0 0 -2px; position: absolute; width: 40px;}	
	

.googlemaps{width:100%; height:450px;}
.konumal{width:40%; margin: 0 30%; background-color: green; height:auto;}
.konumal a{color:#fff; font-size: 1.3em; line-height: 50px; display: block; padding:8px 0; text-align: center;}

.footertop{width:80%; height:auto; padding:20px 10%; display: flex; justify-content: center; flex-wrap: wrap; background-color: #ebebeb;}
.footertop a{color:#ccc; margin:3px 8px;}
.footertop a:Hover{color:#000;}

footer{width:80%; height:auto; padding:30px 10%; display: flex; justify-content: space-between; color:#ccc; background-color: rgb(0 0 0 / 100%);}
footer a{color:#fff;}

footer ul{width:60%; height:auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
footer ul li{width:28%; height:auto; border:1px solid #333; margin:3px;}
footer ul li a{padding:8px 12px; display: block;}
footer ul li a:Hover{color:#ccc;}

footer section{width:30%; display: flex; flex-direction: column;}


.sayfalama{width:100%; height:30px; float:left; margin:10px 0px;}
.sayfalama a{width:30px; text-align:center; display:block; float:left; line-height:30px;}
.sayfalama i{width:30px; text-align:center; display:block; float:left; line-height:30px;}
.sayfalama a.pasif_link{background:#ebebeb; color:#333333;}
.sayfalama a.aktif_link{background:#ef4900; color:#fff;}

@media only screen and (min-width: 960px){header ul{display:flex!important;}}
@media only screen and (max-width: 959px){

.Toogle{width:96%; height:50px; line-height:50px; display:flex; justify-content: center; align-items: center;
	margin:10px 2%; text-align:center; font-weight: 500;
    -moz-box-shadow: 0 2px 15px rgb(var(--defaultcolor) /100%);
    -webkit-box-shadow: 0 2px 15px rgb(var(--defaultcolor) /100%);
    box-shadow: 0px 1px 15px rgba(var(--defaultcolor)/100%);
}
.active{
    -moz-box-shadow: 0 2px 15px rgb(var(--lightcolor) /100%);
    -webkit-box-shadow: 0 2px 15px rgb(var(--lightcolor) /100%);
    box-shadow: 0px 1px 15px rgba(var(--lightcolor)/100%);
}

.govde{width:96%; height:auto; margin:30px 0%; padding:10px 2%; display: flex; flex-direction: column; justify-content: space-between;}
.sol{display:none;}
.sag{width:100%;}

#top{width:96%; height:50px; padding:0px 2%;}

header{width:96%; height:auto; justify-content:center; background-color:#f4f4f4; align-items: center; padding:0px 2%; flex-wrap: wrap;}

header .search{width:50%; height:50px; display: flex; order: 2; justify-content: flex-end;}
header .search form{margin: 0; padding: 0;}
header .search input{ width:120px; height:32px; margin:6px 0; border:1px solid #ebebeb; background-color: #fff; color: #000;
-webkit-transition: 0.5s; transition: 0.5s; outline: none;}
header .search input:focus{border:1px solid rgba(var(--defaultbordercolor));}
header .search button{width:30px; height:32px; cursor: pointer; margin:3px 0px; border:0px; background-color:rgba(var(--defaultcolor)); color: #fff;}
header .search button i{line-height:30px;}

header figure{width: 50%; order:1;}
header figure img{}

header ul#Menu{width:100%; height:auto; margin:20px 0; display:none; order:3;}
header ul#Menu li{width:100%; height:40px; display: flex;}
header ul#Menu li a{width:100%; position: relative; display: block;}


.jumbotron{width:80%; margin:30px 5%; padding:5%; flex-direction: column;}
.jumbotron div:first-child{width:100%; height:auto; flex-direction: column; margin-bottom:30px;}
.jumbotron div:last-child{width:100%;}


.kategoriler{width:96%; margin:0 2%; justify-content: center;}
.kategoriler li{width:40%; padding:2%; margin:10px 1%;}


.subeler{width:94%; margin:30px 3%;}
.subeler li{width:96%; padding:2%; margin:10px 0;}
.subeler li figure{display: none;}
.subeler li section{width:100%; display:flex; flex-direction: column;}


.bloglar{display:none;}



.urunler{width:94%; height: auto; margin: 0 3%;}
.urunler li{width:40%; padding:2%; margin:10px 1%;}

.arama{width:94%; height: auto; margin: 0 3%;}


.blog{width:94%; margin:30px 2%; justify-content: center;}
.blog li{width:40%; height: auto; padding:2%; margin:10px 1%;}

.urundetay{width:90%; height:auto; padding:30px 3%; margin: 0 2%;}

.menudetay{width:90%; height:auto; padding:30px 3%; margin: 0 2%;}


.etiketler a{color:#CCCCCC; margin:3px; font-size:0.7rem;}
#breadcrumbs{width:80%; height:40px; line-height:40px; padding:0px 10%; font-size:0.7rem; display: flex; background-color:#ebebeb;}
#breadcrumbs a{color:#666666;}
#breadcrumbs a:hover{color:#333;}
#breadcrumbs i{line-height: 40px;}

.hometitle{width:80%; height:auto; line-height:50px; font-size:1.7em; font-weight:300; position:relative; margin:0 10%;}
.hometitle:before {background: #ff0000; bottom:0; content: ""; display: block; height: 2px; left: 0; margin: 0 0 -2px; position: absolute; width: 40px;}	
	

.googlemaps{width:100%; height:250px;}
.konumal{width:94%; margin: 0 3%;}

.footertop{width:94%; height:auto; padding:20px 3%;}

footer{width:94%; height:auto; padding:30px 3%; flex-direction: column;}

footer ul{width:100%; margin-bottom: 20px;}
footer ul li{width:46%; height:auto; border:1px solid #333; margin:1%;}

footer section{width:100%; display: flex; flex-direction: column;}


.sayfalama{width:100%; height:30px; float:left; margin:10px 0px;}
.sayfalama a{width:30px; text-align:center; display:block; float:left; line-height:30px;}
.sayfalama i{width:30px; text-align:center; display:block; float:left; line-height:30px;}
.sayfalama a.pasif_link{background:#ebebeb; color:#333333;}
.sayfalama a.aktif_link{background:#ef4900; color:#fff;}
}



	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}