@import"reset.css";
.outside p{padding-bottom:-3px !important;}
p{padding-bottom:20px; color:#666; line-height:1.1em;}
a{color:#000;outline:none;cursor:pointer; text-decoration:none; -webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
a:hover{text-decoration:none;}
/* Header styles */
h1,h2,h3,h4,h5,h6{line-height:1.3em;color:#000; font-family: 'Roboto', sans-serif; font-weight:300;}
h1{
font-size:27px;
font-weight:400;
line-height:1.2em;
}
h2{
font-size:36px;
font-weight:100;
letter-spacing:-0.5px;
line-height:1em;
padding-bottom:17px;
}
h3{
font-size:20px;
font-weight:400;
padding-bottom:7px;
}
h4{font-size:18px; letter-spacing:-1px; padding-bottom:13px;
font-weight:400;}
h5{font-size:16px;}
h6{font-size:14px;}
/*----- txt,links,lines,titles -----*/
.clear{clear:both;line-height:0;font-size:0;overflow:hidden;height:0;width:100%;}
.wrapper{overflow:hidden;position:relative;}
.extra-wrap{overflow:hidden;display:block;}
.fleft{float:left}
.fright{float:right}
.alignright{text-align:right}
.aligncenter{text-align:center}
.alignmiddle *{vertical-align:middle}
.color1{color:#000;}
.wrapper-large{overflow:hidden;position:relative; height:80px;}
/* Images */
.image_left{
float:left;
margin:0;
}
.image_right{ float:right; margin:0.2em 0 0.2em 1em;}
.image_centered{ display:block; text-align:center; margin:0.2em 0 0.5em;}
.image_style1{display:inline-block; border:1px solid #999; padding:2px;}
.image_style1_marg{ margin-top:-5px;}
.image_style2 img,.image_style3 img{border-radius:8px;}
.image_style3{display:inline-block; box-shadow:inset 0 0 2px rgba(0,0,0,.5); padding:4px; border-radius:10px;}
.image_with_capt{ margin-bottom:1em;}
.image_round{ display:block; border-radius:60px; background: url(../images/stock_images/120x120_1.jpg) 0 0 no-repeat; width:120px; height:120px;}
.image_card{box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);border-radius: 20px;display:block;background: url(../images/stock_images/120x120_2.jpg) 0 0 no-repeat;width:120px; height:120px;}
.image_embossed{box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);border-radius: 20px;display:block;background: url(../images/stock_images/120x120_3.jpg) 0 0 no-repeat;width:120px; height:120px;}
.image_soft-embossed{box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);border-radius: 20px;display:block;background: url(../images/stock_images/120x120_4.jpg) 0 0 no-repeat;width:120px; height:120px;}
.image_cut_out{box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6); border-radius: 20px;display:block;background: url(../images/stock_images/120x120_5.jpg) 0 0 no-repeat;width:120px; height:120px;}
.image_morphing_glowing{display:block;background: url(../images/stock_images/120x120_6.jpg) 0 0 no-repeat;width:120px; height:120px;border-radius: 20px;
-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
.image_morphing_glowing:hover {
box-shadow: 0 0 20px rgba(0,0,0,.6), inset 0 0 20px rgba(0,0,0,1);
-webkit-border-radius: 60em;
-moz-border-radius: 60em;
border-radius: 60em;}
.image_glossy{box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);border-radius: 20px;display:block;width:120px; height:120px; position:relative;}
.image_glossy span{display:block;background: url(../images/stock_images/120x120_7.jpg) 0 0 no-repeat;width:120px; height:120px;border-radius: 20px;}
.image_glossy:after {
position: absolute;
content: ' ';
width: 100%;
height: 50%;
top: 0;
left: 0;
border-radius: 20px;
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);}
.image_reflection{display:block;width:120px; height:120px; position:relative;}
.image_reflection span{display:block;background: url(../images/stock_images/120x120_8.jpg) 0 0 no-repeat;width:120px; height:120px;border-radius: 20px;}
.image_reflection:after {
position: absolute;
content: ' ';
width: 100%;
height: 30px;
bottom: -31px;
left: 0;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
-pie-background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);}
.pad-image{ padding:8px 10px 20px 0; position:relative; float:left;}
/* hovers, genel hovers*/
.view {
width: 250px;
height: 220px;
margin:0 0 0px 0;
position: relative;
text-align: center;
cursor: default;
/* [disabled]background: #fff; */
overflow:hidden;
}
.view .mask, .view .content {
width: 250px;
height: 220px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {display: block;position: relative;}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 30px 0 0 0
}
.view p {
font-family: 'Roboto', sans-serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 10px 15px;
text-align: center
}
.view a.btn {
display: inline-block;
box-shadow: 0 0 1px #000;
text-decoration: none;
padding: 7px 14px;
background: #63BC47;
color: #fff;
text-transform: uppercase;
border:none;
border-radius:0;
text-shadow:none;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.view a.btn:hover {
background:#fff;
color:#63BC47;
}
/* haber hovers baş*/
.galeri_view {
width: 165px;
height: auto;
margin:15px 10px 0px 0px;
text-align: center;
cursor: default;
float:left;
}
.galeri_view2 {
width: 250px;
height: auto;
cursor: default;
float:left;
}
/* haber hovers son*/
/* first hover lokasyon */
.view_first img {-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
.view_first .mask {opacity: 0; -moz-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.view_first h2 {opacity: 0;
-moz-transform: translateY(-100px); -webkit-transform: translateY(-100px); -o-transform: translateY(-100px);transform: translateY(-100px);
-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.view_first p {opacity: 0;
-moz-transform: translateY(100px);-webkit-transform: translateY(100px);-o-transform: translateY(100px);transform: translateY(100px);
-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
.view_first a.btn{opacity: 0;-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.view_first:hover img {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);}
.view_first:hover .mask {opacity:1;}
.view_first:hover h2,
.view_first:hover p,
.view_first:hover a.btn {opacity:1;-moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px);transform: translateY(0px);}
.view_first:hover p {-moz-transition-delay: 0.1s;-webkit-transition-delay: 0.1s;-o-transition-delay: 0.1s;transition-delay: 0.1s;}
.view_first:hover a.btn {-moz-transition-delay: 0.2s;-webkit-transition-delay: 0.2s;-o-transition-delay: 0.2s;transition-delay: 0.2s;}
/* seventh hover online katalog sol kutu*/
.view_seventh img{opacity: 1;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.view_seventh .mask {background-color:rgba(0,25,54, 0.6);opacity: 0;
-webkit-transform: rotate(0deg) scale(1);-moz-transform: rotate(0deg) scale(1);-o-transform: rotate(0deg) scale(1);transform: rotate(0deg) scale(1);
-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;
-webkit-transform: translateY(-200px) rotate(180deg);-moz-transform: translateY(-200px) rotate(180deg);-o-transform: translateY(-200px) rotate(180deg);transform: translateY(-200px) rotate(180deg);}
.view_seventh h2{
-webkit-transform: translateY(-200px);-moz-transform: translateY(-200px);-o-transform: translateY(-200px);transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.view_seventh p {
-webkit-transform: translateY(-200px);-moz-transform: translateY(-200px);-o-transform: translateY(-200px);transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.view_seventh a.btn {
-webkit-transform: translateY(-200px);-moz-transform: translateY(-200px);-o-transform: translateY(-200px);transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.view_seventh:hover img{opacity: 0;
-webkit-transform: rotate(720deg) scale(0);-moz-transform: rotate(720deg) scale(0);-o-transform: rotate(720deg) scale(0);transform: rotate(720deg) scale(0);}
.view_seventh:hover .mask {opacity: 1;
-webkit-transform: translateY(0px) rotate(0deg);-moz-transform: translateY(0px) rotate(0deg);-o-transform: translateY(0px) rotate(0deg);transform: translateY(0px) rotate(0deg);
-webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-o-transition-delay: 0.4s;transition-delay: 0.4s;}
.view_seventh:hover h2 {
-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);
-webkit-transition-delay: 0.7s;-moz-transition-delay: 0.7s;-o-transition-delay: 0.7s;transition-delay: 0.7s;}
.view_seventh:hover p {
-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);
-webkit-transition-delay: 0.6s;-moz-transition-delay: 0.6s;-o-transition-delay: 0.6s;transition-delay: 0.6s;}
.view_seventh:hover a.btn {
-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);
-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-o-transition-delay: 0.5s;transition-delay: 0.5s;}
/* online katalo hover küçültüp büyütüyor
örnek:
*/
.partners{ position:relative; overflow: hidden; margin-top:-1px;}
.partners li{ float:left; margin:0 60px 0 0px;}
.partners li a{ display:block;}
.partners li a img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}
.partners li a:hover img{-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-o-transform:scale(0.9);transform:scale(0.9);}
/* buttons */
.button{ display:inline-block; background:#000 url(../images/bg-body2.jpg) 0 0 repeat; text-transform:uppercase; font:11px/15px Arial, Helvetica, sans-serif; color:#fff; -webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease; padding:7px 15px 6px;}
.button:hover{ background:#e4e0dd; color:#000; text-decoration:none;}
/* LightBox */
.lightbox-image {position:relative;overflow:hidden;display:inline-block;z-index:99;}
.lightbox-image img {position:relative;z-index:2;}
.lightbox-image span {display:block;position:absolute;left:0;top:0;width:100%;height:100%;background: url(../images/magnifying-glass.png) no-repeat 50% 50%;z-index:1;}
.video .lightbox-image span{background: url(../images/icons/play_video.png) no-repeat 50% 50%;z-index:3; opacity:.8;}
.video .lightbox-image:hover span{ opacity:1;}
.video{ z-index:99; position:relative;}
/*---------------------------------
/* form */
ol { list-style:none;}
ol li {
display:block;
clear:both;
float: left;
}
ol li label {
display:block;
margin:0 0 0 -5px;
padding:16px 0 10px 0;
}
ol li input.text {
width:722px;
border: none 0;
border-left: 1px solid #ccc;
border-top: 1px solid #999;
margin:0 0 0 -5px;
padding:5px 0 0 0;
height:20px;
background-color:#FFF;
}
ol li textarea {
width:722px;
border: none 0;
border-left: 1px solid #ccc;
border-top: 1px solid #999;
padding:2px;
background-color:#fff;
margin-left:-5px;
}
ol li .send {
margin:16px 0 0 0;
border: none 0;
border-left: 1px solid #999;
border-top: 1px solid #999;
}
.action {
margin:16px 0 0 0;
border: none 0;
border-left: 1px solid #ccc;
border-top: 1px solid #999;
}
.form {
margin:0px;
padding:0;
float: left;
}
/* **************** */
.gks {
margin-top:-50px;
margin-bottom:50px;
width:250px;
margin-left:12px;
}
.ygadv a {
display:block;
margin-top:20px;
color:#96b7d3;
text-decoration: none;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
font-size:12px;
}
.ygadv a:hover{
margin-top:20px;
color: #CCC;
text-decoration: none;
}
.response {
margin-left:-5px;
width:auto;
padding:8px;
background:#f0652f;
color:#fff;
text-decoration: none;
}
/* ***** POPUP BAŞ CSS****** */
.box {
background-color: #ffffff;
color: #888888;
height:auto;
left: 100%;
padding: 15px;
position: fixed;
right: 20%;
top: 10%;
width:600px;
z-index: 101;
border:4px solid #ccc;
border-radius:10px;
-moz-border-radius:10px;
}
.overlay {
background: #000000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 100;
opacity:0.5;
}
a.boxclose {
background: url(../images/cancel.png) repeat scroll left top transparent;
cursor: pointer;
float: right;
height: 26px;
left: 32px;
position: relative;
top: -33px;
width: 26px;
}
.devam{
margin:0 auto;
position: relative;
display: inline-block;
background:url(../images/devam-1.png) 0 0 no-repeat;
width:170px;
height:30px;
padding:5px;
float: right;
text-decoration:none;
transition:background .3s ease,background .3s linear;
-moz-transition:background .3s ease,background .3s linear;
-o-transition:background .3s ease,background .3s linear;
-webkit-transition:background .3s ease,background .3s linear;
-ms-transition:background .3s ease .3s
}
.devam:hover{background:url(../images/devam-2.png) 0 0 no-repeat;
}
/* ***** POPUP SON CSS****** */
/* @balon css
-------------------------------------------------- */
[data-balloon]{position:relative}[data-balloon]:after,[data-balloon]:before{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-khtml-opacity:0;-moz-opacity:0;opacity:0;pointer-events:none;-webkit-transition:all .18s ease-out .18s;transition:all .18s ease-out .18s;bottom:100%;left:50%;position:absolute;z-index:10;-webkit-transform:translate(-50%,10px);-ms-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top}[data-balloon]:after{background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);font-size:12px;padding:.5em 1em;white-space:nowrap;margin-bottom:11px}[data-balloon]:before{background:url('data:image/svg+xml;utf8,') no-repeat;background-size:100% auto;height:6px;width:18px;content:"";margin-bottom:5px}[data-balloon]:hover:after,[data-balloon]:hover:before{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;pointer-events:auto;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}[data-balloon][data-balloon-break]:after{white-space:normal}[data-balloon-pos=down]:after,[data-balloon-pos=down]:before{bottom:auto;left:50%;top:100%;-webkit-transform:translate(-50%,-10px);-ms-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon-pos=down]:after{margin-top:11px}[data-balloon-pos=down]:before{background:url('data:image/svg+xml;utf8,') no-repeat;background-size:100% auto;height:6px;width:18px;margin-top:5px;margin-bottom:0}[data-balloon-pos=down]:hover:after,[data-balloon-pos=down]:hover:before{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}[data-balloon-pos=left]:after,[data-balloon-pos=left]:before{bottom:auto;left:auto;right:100%;top:50%;-webkit-transform:translate(10px,-50%);-ms-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-balloon-pos=left]:after{margin-right:11px}[data-balloon-pos=left]:before{background:url('data:image/svg+xml;utf8,') no-repeat;background-size:100% auto;height:18px;width:6px;margin-right:5px;margin-bottom:0}[data-balloon-pos=left]:hover:after,[data-balloon-pos=left]:hover:before{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}[data-balloon-pos=right]:after,[data-balloon-pos=right]:before{bottom:auto;left:100%;top:50%;-webkit-transform:translate(-10px,-50%);-ms-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-balloon-pos=right]:after{margin-left:11px}[data-balloon-pos=right]:before{background:url('data:image/svg+xml;utf8,') no-repeat;background-size:100% auto;height:18px;width:6px;margin-bottom:0;margin-left:5px}[data-balloon-pos=right]:hover:after,[data-balloon-pos=right]:hover:before{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}[data-balloon-length]:after{white-space:normal}[data-balloon-length=small]:after{width:80px}[data-balloon-length=medium]:after{width:150px}[data-balloon-length=large]:after{width:260px}[data-balloon-length=xlarge]:after{width:90vw}@media screen and (min-width:768px){[data-balloon-length=xlarge]:after{width:380px}}[data-balloon-length=fit]:after{width:100%}
.example
{
margin-left: 38px;
margin-top: -17px;
}
.example button {
display:inline-block;
min-width: 100px;
text-align: center;
color:#CCC;
background-color:#222222;
padding: 2px 5px;
font-size: 12px;
margin-top: 0.2rem;
border:none;
cursor:context-menu;
}
.example button:hover {
background: #000;
}
