@media (max-width:1023px)

{

.baslik_urunler {
    width: 100%;
    float: left;
    text-align: center;
    font-weight: 700;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #0293ff;
    margin-top: 10px;
    color: white;
}
    
.urunler_bg{width:100%;float:left;padding: 50px 0 50px 0;}

.urunler_bg .baslik {float: left;width: 100%;text-align: left;margin-bottom: 20px;text-align: center;}
.urunler_bg .baslik {overflow: hidden;position: relative;display: block;} 
.urunler_bg .baslik h1 {color:#333;font-weight: 800;font-size: 25px;margin-top: 0px;margin-bottom: 0px;letter-spacing: 0px;text-transform: uppercase;letter-spacing: -0.5px;}
.urunler_bg .baslik h2 {color:#999;font-weight: 300;font-size:16px;margin-top: 10px;margin-bottom: 0px;letter-spacing:2px;}
.urunler_bg .baslik h3 {display: inline-block;width:100%;color:#333;font-weight:300;font-size:16px;margin-top: 30px;margin-bottom: 0px;line-height: 22px;}


/* Item Hover CSS */
.hover-box {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-bottom:20px;
}
.hover-layer {
    margin: 0 auto;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    transform: translateY(100%);
    transition: all 0.2s linear;
}
.hover-box:hover .hover-layer {
    transform: translateY(0);
}
.hover-box-content {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    z-index: 111;
    margin-top: -25px;
    opacity: 0;
}
.hover-box:hover .hover-box-content {
    opacity: ;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.hover-box-content a i {
    background: #fff;
    color: #f59000;
    border-radius: 50%;
    font-size: 22px;
    margin: 0 5px;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    text-align: center;
    line-height: 50px;
    font-weight: 600;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.hover-box-content p a:hover {
    color: #53CAEF;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.hover-box-content {
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.hover-box:hover .hover-box-content {
    opacity: 1;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
.hover-box .thumbnail {
    padding: 0;
    border-radius: 0;
    border: none;
    margin-bottom: 0;
    background: transparent;
    display: inline-block;
}


.hover-box .image .over-layer {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(2, 146, 252, 0.75);
    transform:translateY(100%);
    transition:all 0.4s linear;
}

.hover-box:hover .image .over-layer{
    transform:translateY(0);
}

.hover-box .image .over-layer .links {
    padding:0;
    margin:0;
    list-style:none;
    text-align:center;
    position:relative;
    top:37%;
}

.hover-box .image .over-layer .links a{background:#3333338a;color:#fff;border-radius:0px;}

.service-item.style-1 i {
    color: #f59000;
}

.hover-box .image .over-layer .links h3{
    margin: 0px 0 30px 0;
    padding: 20px;
    background: #3333338a;
    color: white;
    top: 20%;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    line-height: 30px;
}   

.service-img {width: 100%;float: left;height: auto;border: 1px solid #cccccc73;padding: 10px;}
.service-img img{width:100%;}

}


@media (min-width:1024px){

.urunler_bg{width:100%;float:left;padding:50px 0 50px 0;}
.urunler_bg .baslik {float: left;width: 100%;text-align: left;margin-bottom:40px;text-align: center;}
.urunler_bg .baslik {overflow: hidden;position: relative;display: block;} 
.urunler_bg .baslik h1 {color:#333;font-weight: 800;font-size:33px;margin-top: 0px;margin-bottom: 0px;letter-spacing: 0px;text-transform: uppercase;letter-spacing: -0.5px;}
.urunler_bg .baslik h2 {color:#999;font-weight: 300;font-size:16px;margin-top: 10px;margin-bottom: 0px;letter-spacing:2px;}
.urunler_bg .baslik h3 {display: inline-block;width:800px;color:#333;font-weight:300;font-size:16px;margin-top: 30px;margin-bottom: 0px;line-height: 22px;}


/* Item Hover CSS */
.hover-box {
    position: relative;
    overflow: hidden;
    text-align: center;
}
.hover-layer {
    margin: 0 auto;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    transform: translateY(100%);
    transition: all 0.2s linear;
}
.hover-box:hover .hover-layer {
    transform: translateY(0);
}
.hover-box-content {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    z-index: 111;
    margin-top: -25px;
    opacity: 0;
}
.hover-box:hover .hover-box-content {
    opacity: ;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.hover-box-content a i {
    background: #fff;
    color: #f59000;
    border-radius: 50%;
    font-size: 22px;
    margin: 0 5px;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    text-align: center;
    line-height: 50px;
    font-weight: 600;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.hover-box-content p a:hover {
    color: #53CAEF;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.hover-box-content {
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.hover-box:hover .hover-box-content {
    opacity: 1;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
.hover-box .thumbnail {
    padding: 0;
    border-radius: 0;
    border: none;
    margin-bottom: 0;
    background: transparent;
    display: inline-block;
}


.hover-box .image .over-layer {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(2, 146, 252, 0.75);
    transform:translateY(100%);
    transition:all 0.4s linear;
}

.hover-box:hover .image .over-layer{
    transform:translateY(0);
}

.hover-box .image .over-layer .links {
    padding:0;
    margin:0;
    list-style:none;
    text-align:center;
    position:relative;
    top:37%;
}

.hover-box .image .over-layer .links a{background:#3333338a;color:#fff;border-radius:0px;}

.service-item.style-1 i {
    color: #f59000;
}

.service-img {width: 100%;float: left;height: auto;border: 1px solid #ccc;padding: 10px;}
.service-img img{width:100%;}
.hover-box .image .over-layer .links h3{
    margin: 0px 0 30px 0;
    padding: 20px;
    background: #3333338a;
    color: white;
    top: 20%;
    font-size: 19px;
    font-family: 'Roboto', sans-serif;
    line-height: 30px;
}   
}
/*
.hovereffect {width: 100%;padding:15px;border:1px solid #333;height: 250px;float: left;overflow: hidden;position: relative;text-align: center;cursor: default;} .hovereffect .overlay {width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; }
.hovereffect img {width: 100%;height: 220px;display: block;position: relative;-webkit-transition: all 0.4s ease-in;transition: all 0.4s ease-in;}
.hovereffect:hover img {filter: grayscale(1) blur(3px); -webkit-filter: grayscale(1) blur(3px); -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .hovereffect h2 {text-transform: uppercase; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.6); }
.hovereffect a.info {display: inline-block; text-decoration: none; padding: 7px 14px; border: 1px solid #fff; margin: 50px 0 0 0; background-color: transparent; } .hovereffect a.info:hover {box-shadow: 0 0 5px #fff; }
.hovereffect a.info, .hovereffect h2 {-webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); -webkit-transition: all 0.4s ease-in; transition: all 0.4s ease-in; opacity: 0; filter: alpha(opacity=0); color: #fff; text-transform: uppercase; }
.hovereffect:hover a.info, .hovereffect:hover h2 {opacity: 1; background: #e92c409e; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
*/