/* * stlye.less * * @project http://www.yildizbilisim.net * @package Yıldız Bilişim Hizmetleri * @author Yıldız Bilişim Hizmetleri. - Geliştirici Takımı * @copyright Her hakkı saklıdır. Yıldız Bilişim Hizmetleri (http://yildizbilisim.net) * @license Ticari Lisans (http://yildizbilisim.net) * @link http://yildizbilisim.net * @since Version 1.0 * @filesource * @example */ @tCBlack: #4f4f4f; @tCOrange: #ef7c00; @tCBlue: #127EB5; @tCGray: #f4f4f4; @tCRed: #ee3234; @tM: 10px; @tBR: 0px; .aH(){box-sizing: border-box;border:1px solid transparent;height: auto;min-height: 1px !important;} .anim(@time: 0.3s){ -webkit-transition: @time all ease-in; -moz-transition: @time all ease-in; -ms-transition: @time all ease-in; transition: @time all ease-in;} .gradient(){background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image: -o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); } .tTextControl(){white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display: block;} .cTextControl(){text-overflow: ellipsis;} .placeholder(@color: #d8d8d8) {&::-webkit-input-placeholder {color:@color}&::-moz-placeholder {color:@color}&:-ms-input-placeholder {color:@color}&:-moz-placeholder {color:@color}} .bg(){ background-color: #fff; box-shadow: 0px 0px 1px #E2E2E2; } @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700&subset=latin-ext'); @import url('../../../default/assets/stylesheets/tinymce_user_style.css'); @import url('./flag-icon.min.css'); body{ font-family: 'Raleway', sans-serif; position: relative; left: 0; background: #e8e8e8; -webkit-overflow-scrolling: touch; } html, body{ margin: 0; padding: 0; background-color: #fff; } html, body, #pageWrapper{ height: 100%; } .right{ float: right; } #pageWrapper{ width: 100%; min-height: 100%; height: auto !important; margin-bottom: -283px; .ghostFooter{ height: 283px; }//.ghostFooter }//#pageWrapper a{ &:hover,&:focus{ outline: none; text-decoration: none; } } .pagination>.active>a{ background-color: #ee3234 !important; border-color: #ee3234 !important; color: #fff !important; } .pagination>li>a, .pagination>li>span{ color: #202020 !important; } /* .container{ max-width: 1060px !important; min-width: 1060px !important; position: relative; } */ header{ width: 100%; height: auto; z-index: 12; position: relative; left: 0; top: 0; padding-bottom: 5px; background-color: #fff; #headerTop{ width: 100%; margin-bottom: 5px; font-size: 15px; font-weight: 300; background: #fafafa; border-bottom: 1px solid #efefef; display: block; padding: 3px 0; .slogan{ padding: 6px 0; }//.slogan a{ display: block; padding: 5px 10px; float: right; &:hover{ text-decoration: none; }//&:hover } .slogan, a{ padding-top: 6px; padding-bottom: 6px; color: #000; font-size: 13.5px; } }//#headerTop #headerMiddle{ .logo{ width: 265px; display: block; margin-top: 5px; position: relative; z-index: 1; span{ position: absolute; color: #fff; font-size: 15px; right: -162px; bottom: -3.5px; display: none; } } .upper-right { position: relative; padding-top: 35px; float: right; .info-box { position: relative; float: left; min-height: 56px; margin-left: 35px; font-size: 13px; color: #777777; text-transform: uppercase; padding: 0px 0px 20px 45px; .icon-box { position: absolute; left: 0px; color: #043247; font-size: 32px; text-align: left; line-height: 1.2em; span:before{ font-size: 32px; } } ul{ li { position: relative; line-height: 20px; color: #848484; font-size: 16px; margin-bottom: 3px; font-weight: 300; text-transform: none; a{ color: inherit; } strong { font-weight: 500; color: #222222; font-size: 16px; } } } } } } .social{ float: right; position: relative; margin: 16px 0 5px 0; ul{ text-align: center; li{ display: block; float: left; border-right: 1px solid #fff; &:last-child{ border: none; }//&:last-child a.soc{ width: 28px; height: 28px; line-height: 28px; display: block; text-align: center; border-radius: @tBR; margin-left: 5px; background-color: #fff; .anim(); &:hover{ color: #fff; } }// a.soc }// li } a.facebook{ color: #3B5998; &:hover{background-color: darken(#3B5998, 10%);} } a.twitter{ color: #55acee; &:hover{background-color: darken(#55acee, 10%);} } a.google-plus{ color: #d1402e; &:hover{background-color: darken(#d1402e, 10%);} } a.youtube{ color: #CC181E; &:hover{background-color: darken(#CC181E, 10%);} } a.linkedin{ color: #0077b5; &:hover{background-color: darken(#0077b5, 20%);} }// a.linkedin a.instagram{ color: #A57D60; &:hover{background-color: darken(#A57D60, 20%);} }// a.instagram }// .social .searchArea{ width: 250px; height: 34px; z-index: 1; float: right; background-color: #fff; border-radius: @tBR; margin-bottom: 10px; border-bottom: 1px solid @tCRed; .anim(); &:hover{ border-color: @tCRed; }//&:hover form{ background-color: transparent; overflow: hidden; input, button{ background-color: transparent; border: none; outline: none; color: @tCBlack; } input{ width: 80%; float: left; height: 34px; padding: 0 10px; font-size: 12px; color: #3D3D3D; font-family: 'Arial'; .anim(); &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: @tCBlack; font-weight: 500; } &::-moz-placeholder { /* Firefox 19+ */ color: @tCBlack; font-weight: 500; } &:-ms-input-placeholder { /* IE 10+ */ color: @tCBlack; font-weight: 500; } &:-moz-placeholder { /* Firefox 18- */ color: @tCBlack; font-weight: 500; } } button{ width: 20%; float: left; height: 34px; color: @tCBlack; border: none; &:hover{ color: @tCRed; } } }// form }//.searchArea }// header #menu{ width: 100%; float: right; position: relative; z-index: 99; background-color: #202990; border-top: 2px solid #202990; ul{ width: 100%; list-style: none; margin: 0; padding: 0; >li{ display: block; float: left; list-style: none; margin: 0; padding: 0; position: relative; &:hover{ >a{ text-decoration: none; color: @tCRed; &:after { opacity: 1; width: 100%; .anim(); } } ul{ display: block; } } >a{ font-weight: 700; letter-spacing: 0.3px; text-align: center; position: relative; display: block; font-size: 14px; color: #fff; line-height: 30px; text-transform: uppercase; padding: 14px 20px 16px 15px; .anim(); &:after { position: absolute; content: ''; left: 0px; top: -2px; width: 0%; height: 2px; background-color: @tCRed; .anim(); } &:hover{ } }// a >ul{ width: 250px; height: auto; display: none; position: absolute; top: 60px; left: 50%; transform: translateX(-50%); background: #1c1c1c; border-top: 2px solid @tCRed; box-shadow: 0px 15px 35px -14px #000; overflow: hidden; >li{ width: 100%; margin: 0 auto; border-bottom: 1px solid rgba(255,255,255,0.1); >a{ font-weight: 300; text-align: left; color: #fff; font-size: 14px; padding: 7px 19px; text-transform: capitalize; text-align: start; border-radius: 0 !important; &:after{ display: none; } &:before { content: ''; position: absolute; left: 0px; top: 50%; height: 16px; margin-top: -8px; border-left: 2px solid @tCRed; .anim(); } &:hover{ background-color: @tCRed; color: #fff !important; &:before { border-color: #ffffff; .anim(); } }//&:hover }// a }//li } }// >li >li:last-child{border: none;} li.active{ a{ border-color: @tCRed; text-decoration: none; } } }// >ul .search{ form{ padding: 10px 8px; position: relative; input[type="text"]{ padding: 8px; width: 100%; border: none; } button{ background-color: transparent; border: none; position: absolute; right: 15px; top: 50%; transform: translate(0,-50%); } input,button{ &:hover,&:focus{ outline: none; } } } } }//#menu #menu.affix{ width: 100%; position: fixed; z-index: 99; top: 0; margin-top: 0; background-color: #fff; box-shadow: 0px 8px 27px -12px #000; .wrp{ >ul{ > li{ > a{ color: #222 !important; } } } } } #mobilHeader{ width: 100%; height: 60px; background-color: #fff; position: fixed; display: none; left: 0; top: 0; z-index: 1000; text-align: center; line-height: 60px; box-shadow: 0px 0px 4px #000; color: @tCRed; a.i{ width: 50%; display: block; float: left; font-size: 24px; position: relative; color: @tCRed; margin-top: 1px; } a.i.search{ top: -3px; } a.i.active{ color: @tCBlack; } .logo{ img{ margin-top: 2px; max-width: 179px; max-height: 60px; } }//.logo #phoneNavTrigger{ .icon{ width: 60px; height: 60px; position: relative; top: 4px; margin: 0 auto; -webkit-transform: rotate(0deg) scale(0.40); -moz-transform: rotate(0deg) scale(0.40); -o-transform: rotate(0deg) scale(0.40); transform: rotate(0deg) scale(0.40); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; span { background-color: @tCRed; display: block; position: absolute; height: 9px; width: 100%; border-radius: 10px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; &:nth-child(1) { top: 0px; } &:nth-child(2),&:nth-child(3) { top: 18px; } &:nth-child(4) { top: 36px; } } } .icon.open span{ &:nth-child(1) { top: 18px; width: 0%; left: 50%; } &:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } &:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } &:nth-child(4) { top: 18px; width: 0%; left: 50%; } } }//#phoneNavTrigger .mobilDropdownArea{ width: 100%; height: 50px; float: right; border-radius: 0; overflow: hidden; position: fixed; left: 0; top: 60px; z-index: 5; background-color: @tCRed; color: #fff; display: none; >div{ display: none; } .search{ padding: 2px 10px 0 10px; form{ border-bottom: 1px solid #fff; overflow: hidden; input, button{ border: none; outline: none; } input{ width: 85%; float: left; height: 40px; line-height: 40px; padding: 0 10px; font-size: 19px; color: inherit; font-weight: 300; background-color: transparent; color: #fff; &::-webkit-input-placeholder { color: #fff; } &::-moz-placeholder { color: #fff; } &:-ms-input-placeholder { color: #fff; } &:-moz-placeholder { color: #fff; } } button{ width: 10%; height: 40px; line-height: 40px; background-color: transparent; float: right; color: inherit; font-size: 27px; } }// form } .share{ >a{ width: 20%; height: 50px; line-height: 53px; display: block; float: left; color: #fff; font-size: 19px; } a.whatsapp{background-color: #25d366;} a.facebook{background-color: #3B5998;} a.twitter{background-color: #55acee;} a.googleplus{background-color: #d1402e;} } }//.mobilSearchArea &.slideUp{ transform: translateY(-100%); } &.slideDown, &.headroom--top{ transform: translateY(0%); } }//#mobilHeader #phoneNav{ width: 280px; height: 100%; overflow-y: scroll; overflow-x: hidden; position: fixed; padding: 10px 0; top: 0; right: -280px; background-color: #5B5B5B; z-index: 1000; box-shadow: -1px 0px 2px rgba(0,0,0,0.5); text-align: left; .dl-menuwrapper{width:100%;max-width:300px;float:left;position:relative;-webkit-perspective:750pt;perspective:750pt;-webkit-perspective-origin:50% 200%;perspective-origin:50% 200%}.dl-menuwrapper:first-child{margin-right:75pt}.dl-menuwrapper button{background:#ccc;border:none;width:3pc;height:45px;text-indent:-900em;overflow:hidden;position:relative;cursor:pointer;outline:0;opacity:0}.dl-menuwrapper button:after{content:'';position:absolute;width:68%;height:5px;background:#fff;top:10px;left:16%;box-shadow:0 10px 0 #fff,0 20px 0 #fff}.dl-menuwrapper ul{padding:0;list-style:none;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.dl-menuwrapper li{position:relative}.dl-menuwrapper li a{display:block;position:relative;padding:15px 20px;font-size:1pc;line-height:20px;font-weight:300;color:#fff;outline:0}.no-touch .dl-menuwrapper li a:hover{background:rgba(255,248,213,.1)}.dl-menuwrapper li.dl-back>a{padding-left:30px}.dl-menuwrapper li.dl-back:after,.dl-menuwrapper li>a:not(:only-child):after{position:absolute;top:0;line-height:50px;font-family:FontAwesome;speak:none;-webkit-font-smoothing:antialiased;content:"\f101"}.dl-menuwrapper li.dl-back:after{left:10px;color:#fff;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dl-menuwrapper li>a:after{right:10px;color:#fff}.dl-menuwrapper .dl-menu{margin:5px 0 0 0;position:absolute;width:100%;opacity:0;pointer-events:none;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-backface-visibility:hidden;backface-visibility:hidden}.dl-menuwrapper .dl-menu.dl-menu-toggle{transition:all .3s ease}.dl-menuwrapper .dl-menu.dl-menuopen{opacity:1;pointer-events:auto;-webkit-transform:translateY(0);transform:translateY(0)}.dl-menuwrapper li .dl-submenu{display:none}.dl-menu.dl-subview li,.dl-menu.dl-subview li.dl-subview>a,.dl-menu.dl-subview li.dl-subviewopen>a{display:none}.dl-menu.dl-subview li.dl-subview,.dl-menu.dl-subview li.dl-subview .dl-submenu,.dl-menu.dl-subview li.dl-subviewopen,.dl-menu.dl-subview li.dl-subviewopen>.dl-submenu,.dl-menu.dl-subview li.dl-subviewopen>.dl-submenu>li{display:block}.dl-menuwrapper>.dl-submenu{position:absolute;width:100%;top:50px;left:0;margin:0}.dl-menu.dl-animate-out-1{-webkit-animation:MenuAnimOut1 .2s;animation:MenuAnimOut1 .2s}.dl-menu.dl-animate-out-2{-webkit-animation:MenuAnimOut2 .3s ease-in-out;animation:MenuAnimOut2 .3s ease-in-out}.dl-menu.dl-animate-out-3{-webkit-animation:MenuAnimOut3 .4s ease;animation:MenuAnimOut3 .4s ease}.dl-menu.dl-animate-out-4{-webkit-animation:MenuAnimOut4 .4s ease;animation:MenuAnimOut4 .2s ease}.dl-menu.dl-animate-out-5{-webkit-animation:MenuAnimOut5 .4s ease;animation:MenuAnimOut5 .4s ease}@-webkit-keyframes MenuAnimOut1{50%{-webkit-transform:translateZ(-250px) rotateY(30deg)}75%{-webkit-transform:translateZ(-372.5px) rotateY(15deg);opacity:.5}100%{-webkit-transform:translateZ(-500px) rotateY(0);opacity:0}}@-webkit-keyframes MenuAnimOut2{100%{-webkit-transform:translateX(-100%);opacity:0}}@-webkit-keyframes MenuAnimOut3{100%{-webkit-transform:translateZ(300px);opacity:0}}@-webkit-keyframes MenuAnimOut4{100%{-webkit-transform:translateZ(-300px);opacity:0}}@-webkit-keyframes MenuAnimOut5{100%{-webkit-transform:translateY(40%);opacity:0}}@keyframes MenuAnimOut1{50%{-webkit-transform:translateZ(-250px) rotateY(30deg);transform:translateZ(-250px) rotateY(30deg)}75%{-webkit-transform:translateZ(-372.5px) rotateY(15deg);transform:translateZ(-372.5px) rotateY(15deg);opacity:.5}100%{-webkit-transform:translateZ(-500px) rotateY(0);transform:translateZ(-500px) rotateY(0);opacity:0}}@keyframes MenuAnimOut2{100%{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}@keyframes MenuAnimOut3{100%{-webkit-transform:translateZ(300px);transform:translateZ(300px);opacity:0}}@keyframes MenuAnimOut4{100%{-webkit-transform:translateZ(-300px);transform:translateZ(-300px);opacity:0}}@keyframes MenuAnimOut5{100%{-webkit-transform:translateY(40%);transform:translateY(40%);opacity:0}}.dl-menu.dl-animate-in-1{-webkit-animation:MenuAnimIn1 .3s;animation:MenuAnimIn1 .3s}.dl-menu.dl-animate-in-2{-webkit-animation:MenuAnimIn2 .3s ease-in-out;animation:MenuAnimIn2 .3s ease-in-out}.dl-menu.dl-animate-in-3{-webkit-animation:MenuAnimIn3 .4s ease;animation:MenuAnimIn3 .4s ease}.dl-menu.dl-animate-in-4{-webkit-animation:MenuAnimIn4 .4s ease;animation:MenuAnimIn4 .4s ease}.dl-menu.dl-animate-in-5{-webkit-animation:MenuAnimIn5 .4s ease;animation:MenuAnimIn5 .4s ease}@-webkit-keyframes MenuAnimIn1{0%{-webkit-transform:translateZ(-500px) rotateY(0);opacity:0}20%{-webkit-transform:translateZ(-250px) rotateY(30deg);opacity:.5}100%{-webkit-transform:translateZ(0) rotateY(0);opacity:1}}@-webkit-keyframes MenuAnimIn2{0%{-webkit-transform:translateX(-100%);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}@-webkit-keyframes MenuAnimIn3{0%{-webkit-transform:translateZ(300px);opacity:0}100%{-webkit-transform:translateZ(0);opacity:1}}@-webkit-keyframes MenuAnimIn4{0%{-webkit-transform:translateZ(-300px);opacity:0}100%{-webkit-transform:translateZ(0);opacity:1}}@-webkit-keyframes MenuAnimIn5{0%{-webkit-transform:translateY(40%);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes MenuAnimIn1{0%{-webkit-transform:translateZ(-500px) rotateY(0);transform:translateZ(-500px) rotateY(0);opacity:0}20%{-webkit-transform:translateZ(-250px) rotateY(30deg);transform:translateZ(-250px) rotateY(30deg);opacity:.5}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0);opacity:1}}@keyframes MenuAnimIn2{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes MenuAnimIn3{0%{-webkit-transform:translateZ(300px);transform:translateZ(300px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes MenuAnimIn4{0%{-webkit-transform:translateZ(-300px);transform:translateZ(-300px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes MenuAnimIn5{0%{-webkit-transform:translateY(40%);transform:translateY(40%);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.dl-menuwrapper>.dl-submenu.dl-animate-in-1{-webkit-animation:SubMenuAnimIn1 .4s ease;animation:SubMenuAnimIn1 .4s ease}.dl-menuwrapper>.dl-submenu.dl-animate-in-2{-webkit-animation:SubMenuAnimIn2 .3s ease-in-out;animation:SubMenuAnimIn2 .3s ease-in-out}.dl-menuwrapper>.dl-submenu.dl-animate-in-3{-webkit-animation:SubMenuAnimIn3 .4s ease;animation:SubMenuAnimIn3 .4s ease}.dl-menuwrapper>.dl-submenu.dl-animate-in-4{-webkit-animation:SubMenuAnimIn4 .4s ease;animation:SubMenuAnimIn4 .4s ease}.dl-menuwrapper>.dl-submenu.dl-animate-in-5{-webkit-animation:SubMenuAnimIn5 .4s ease;animation:SubMenuAnimIn5 .4s ease}@-webkit-keyframes SubMenuAnimIn1{0%{-webkit-transform:translateX(50%);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}@-webkit-keyframes SubMenuAnimIn2{0%{-webkit-transform:translateX(100%);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}@-webkit-keyframes SubMenuAnimIn3{0%{-webkit-transform:translateZ(-300px);opacity:0}100%{-webkit-transform:translateZ(0);opacity:1}}@-webkit-keyframes SubMenuAnimIn4{0%{-webkit-transform:translateZ(300px);opacity:0}100%{-webkit-transform:translateZ(0);opacity:1}}@-webkit-keyframes SubMenuAnimIn5{0%{-webkit-transform:translateZ(-200px);opacity:0}100%{-webkit-transform:translateZ(0);opacity:1}}@keyframes SubMenuAnimIn1{0%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes SubMenuAnimIn2{0%{-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes SubMenuAnimIn3{0%{-webkit-transform:translateZ(-300px);transform:translateZ(-300px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes SubMenuAnimIn4{0%{-webkit-transform:translateZ(300px);transform:translateZ(300px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes SubMenuAnimIn5{0%{-webkit-transform:translateZ(-200px);transform:translateZ(-200px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.dl-menuwrapper>.dl-submenu.dl-animate-out-1{-webkit-animation:SubMenuAnimOut1 .4s ease;animation:SubMenuAnimOut1 .4s ease}.dl-menuwrapper>.dl-submenu.dl-animate-out-2{-webkit-animation:SubMenuAnimOut2 .3s ease-in-out;animation:SubMenuAnimOut2 .3s ease-in-out}.dl-menuwrapper>.dl-submenu.dl-animate-out-3{-webkit-animation:SubMenuAnimOut3 .4s ease;animation:SubMenuAnimOut3 .4s ease}.dl-menuwrapper>.dl-submenu.dl-animate-out-4{-webkit-animation:SubMenuAnimOut4 .4s ease;animation:SubMenuAnimOut4 .4s ease}.dl-menuwrapper>.dl-submenu.dl-animate-out-5{-webkit-animation:SubMenuAnimOut5 .4s ease;animation:SubMenuAnimOut5 .4s ease}@-webkit-keyframes SubMenuAnimOut1{0%{-webkit-transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(50%);opacity:0}}@-webkit-keyframes SubMenuAnimOut2{0%{-webkit-transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(100%);opacity:0}}@-webkit-keyframes SubMenuAnimOut3{0%{-webkit-transform:translateZ(0);opacity:1}100%{-webkit-transform:translateZ(-300px);opacity:0}}@-webkit-keyframes SubMenuAnimOut4{0%{-webkit-transform:translateZ(0);opacity:1}100%{-webkit-transform:translateZ(300px);opacity:0}}@-webkit-keyframes SubMenuAnimOut5{0%{-webkit-transform:translateZ(0);opacity:1}100%{-webkit-transform:translateZ(-200px);opacity:0}}@keyframes SubMenuAnimOut1{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}}@keyframes SubMenuAnimOut2{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}}@keyframes SubMenuAnimOut3{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}100%{-webkit-transform:translateZ(-300px);transform:translateZ(-300px);opacity:0}}@keyframes SubMenuAnimOut4{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}100%{-webkit-transform:translateZ(300px);transform:translateZ(300px);opacity:0}}@keyframes SubMenuAnimOut5{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}100%{-webkit-transform:translateZ(-200px);transform:translateZ(-200px);opacity:0}}.no-js .dl-menuwrapper .dl-menu{position:relative;opacity:1;-webkit-transform:none;transform:none}.no-js .dl-menuwrapper li .dl-submenu{display:block}.no-js .dl-menuwrapper li.dl-back{display:none}.no-js .dl-menuwrapper li>a:not(:only-child){background:rgba(0,0,0,.1)}.no-js .dl-menuwrapper li>a:not(:only-child):after{content:''}.demo-1 .dl-menuwrapper button{background:#c62860}.demo-1 .dl-menuwrapper button.dl-active,.demo-1 .dl-menuwrapper button:hover,.demo-1 .dl-menuwrapper ul{background:#9e1847}.demo-2 .dl-menuwrapper button{background:#e86814}.demo-2 .dl-menuwrapper button.dl-active,.demo-2 .dl-menuwrapper button:hover,.demo-2 .dl-menuwrapper ul{background:#D35400}.demo-3 .dl-menuwrapper button{background:#08cbc4}.demo-3 .dl-menuwrapper button.dl-active,.demo-3 .dl-menuwrapper button:hover,.demo-3 .dl-menuwrapper ul{background:#00b4ae}.demo-4 .dl-menuwrapper button{background:#90b912}.demo-4 .dl-menuwrapper button.dl-active,.demo-4 .dl-menuwrapper button:hover,.demo-4 .dl-menuwrapper ul{background:#79a002}.demo-5 .dl-menuwrapper button{background:#744783}.demo-5 .dl-menuwrapper button.dl-active,.demo-5 .dl-menuwrapper button:hover,.demo-5 .dl-menuwrapper ul{background:#643771} /* Overrade Styles */ .dl-menuwrapper .dl-menu.dl-menuopen{ position: relative !important; } ul.dl-menu, .dl-animate-in-5, .dl-animate-in-5{ li{ border-bottom: 1px solid #fff; a:after{ color: @tCRed; } &:last-child{ border-bottom: none; } }//li ul.dl-submenu{ li{ border-bottom: 1px solid #fff !important; &:last-child{ border-bottom: none !important; } }// li }// ul.dl-submenu li.dl-subviewopen{border-bottom: none !important;} }//ul /* Overrade Styles */ .company{ box-shadow: 0px 3px 4px -3px #000; padding-bottom: 15px; position: absolute; left: 0; top: 12px; width: 100%; z-index: 5; a{ color: @tCRed; display: block; text-decoration: none; text-align: center; } }//.company a.quickCont{ display: block; width: 100%; background: #3d3d3d; color: #fff; padding: 8px 11px; font-size: 15px; font-weight: 300; border-bottom: 1px solid #fff; text-align: center; i{color: @tCRed} } .vLang{ display: block; float: right; margin-top: 4px; margin-left: 10px; padding-right: 10px; ul{ width: 100%; text-align: center; li{ display: block; float: left; border-radius: 5px; overflow: hidden; margin-left: 7px; opacity: 0.3; .anim(); a{ display: block; overflow: hidden; position: relative; } &:hover{ opacity: 1; } .flag{ width: 22px; height: 19px; float: left; position: relative; } .flag-icon-background{ background-size: cover; } }// li li.active{ opacity: 1; } } }// .vLang .social{ width: 100%; position: relative; margin-top: 20px; ul{ width: 100%; text-align: center; li{ display: inline-block; float: none; padding: 0 2px; &:last-child{ border: none; }//&:last-child a.soc{ width: 30px; height: 30px; line-height: 30px; font-size: 16px; display: block; text-align: center; border-radius: 100%; color: #fff; }// a.soc }// li } a.facebook{background-color: #3B5998;} a.twitter{background-color: #55acee;} a.google-plus{background-color: #d1402e;} a.linkedin{background-color: darken(#0077b5, 20%);} a.youtube{background-color: #CC181E;} a.instagram{background-color: #A57D60;} }// .social }//#phoneNav .mobilBg{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 999; background-color: fade(#000, 90%); display: none; } #mobilFooter{ width: 100%; left: 0; bottom: 0; position: fixed; left: 0; bottom: 0; z-index: 100; display: none; transform: translateY(100%); .anim(); >div{ width: 33.33333333%; float: left; display: block; text-align: center; a{ font-size: 21px; color: #fff; display: block; padding: 8px 0; } } >div:nth-child(1){background-color: #2C82C9;} >div:nth-child(2){background-color: #F1654C;} >div:nth-child(3){background-color: #2CC990;} &.ontop, &.onpin{transform: translateY(100%);} &.onunpin, &.onbottom{transform: translateY(0%);} } .mobilFooter, .ghostMobilFooter{height: 38px;display: none;} .headerSpace{ width: 100%; height: 55px; display: none; }//.headerSpace #sliderWrapper{ width: 100%; margin: 0 auto; position: relative; overflow: hidden; .tp-caption.largeblackbg { background-color: rgba(0,0,0,.7); } a.specialLink { padding: 8px 30px !important; font-size: 17px !important; border-radius: 0px; font-weight: 700; background-color: rgba(0, 0, 0, 0.50); color: #ffffff; &:hover { background-color: #e30615; color: #fff; } } .tp-leftarrow, .tp-rightarrow{ &:hover{ &:after{background-color: @tCRed !important;color: #fff;}} } /* Caption Override */ .tp-caption.large_text, .tp-caption.very_large_text{ text-shadow: 0 2px 5px rgb(0, 0, 0); } .tp-arr-imgholder{ display: none !important; } .tparrows.preview2:after, .tparrows.preview2:before{ margin-top: -15px; } .tp-bannertimer{display: none !important;} .very_large_text{ font-weight: 700; font-size: 65px; } .fullscreenvideo:before{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background-color: #000; opacity: 0.4; content: ""; } }//#sliderWrapper #block{ width: 100%; height: auto; padding: 20px 0; position: relative; z-index: 2; overflow: hidden; &:before{ width: 100%; position: absolute; left: 0; top: 0; height: 100%; background: url('../img/blockBg.png') 0 0 repeat; content: ""; z-index: -2; opacity: 0.7; }//&:before &:after{ width: 100%; position: absolute; left: 0; top: 0; height: 100%; background: #777; content: ""; z-index: -2; opacity: .9; }//&:after h3{ color: #fff; font-size: 20px; font-weight: 500; margin-bottom: 4px; font-weight: 700;; } p{ color: #fff; font-weight: 300; font-size: 14px; } .vbtn{ position: relative; .bg{ width: 1000px; height: 86px; left: -70px; top: -20px; position: absolute; z-index: 1; &:after{ content: ""; width: 100%; height: 100%; left: 0; bottom: 0; position: absolute; background-color: fade(#000, 50%); transform: skewX(45deg); } }//&:before a{ display: inline-block; padding: 5px 40px; color: #fff; border: 1px solid #fff; margin-top: 6px; position: relative; z-index: 2; .anim(); &:hover{ background-color: @tCRed; color: #fff; border-color: @tCRed; text-decoration: none; }//&:hover }// a }//.vbtn }//#block .section_title { color: #7a7a7a; font-size: 15px; max-width: 356px; h2 { font-size: 26px; color: #2a2a2a; font-weight: 400; text-transform: uppercase; padding-bottom: 16px; position: relative; &:before, &:after{ position: absolute; content: ""; } &:before { background: #ededed none repeat scroll 0 0; bottom: 0; height: 3px; left: 0; width: 150px; border-radius: 3px; } &:after { background: @tCRed none repeat scroll 0 0; bottom: 0; border-radius: 3px; left: 0; height: 3px; width: 125px; } } p{ font-size: 15px; color: #5d5d5d; font-weight: 400; margin-top: 10px; margin-bottom: 0; line-height: 28px; height: 55px; overflow: hidden; } }//.section-title #yeniurunler{ padding: 50px 0; .section_title{ margin-bottom: 25px; } .itemVertical{ .itVt, .itVb{ z-index: 9; &:before, &:after{ content: ''; position: absolute; background-color: #2c3e50; width: 0px; height: 0px; .anim(); } } .itVt{ position: absolute; top: 0; left: 0; &:before, &:after{ left: 0; top: 0; } } .itVb{ position: absolute; bottom: 0; right: 0; &:before, &:after{ right: 0; bottom: 0; } } .text-title{ a{ background-color: #2c3e50; color: #fff; height: 60px; border-top: 1px solid transparent; p { margin-bottom: 2px; display: block; } &:hover{ background-color: @tCRed; span{ color: inherit; } } } } &:hover{ .itVt,.itVb{ &:before{ width: 2px; height: 45px; .anim(); } &:after{ height: 2px; width: 45px; .anim(); } } a.go{ background-color: @tCRed; span{ color: inherit; } } } } } #kurumsal{ background-color: #f6f6f6; padding: 70px 0; .single_feature { -webkit-transition-duration: 500ms; transition-duration: 500ms; padding: 30px 15px; background-color: #fff; position: relative; z-index: 1; text-align: center; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1); i{ display: block; &:before{ font-size: 55px; text-align: center; color: #2c3e50; } } .feature_img { margin: 5px auto 20px; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .feature_text{ a.go span{ color: #2c3e50; font-size: 18px; text-transform: capitalize; -webkit-transition-duration: 500ms; transition-duration: 500ms; font-weight: 600; } p{ font-size: 15px; color: #5d5d5d; font-weight: 400; margin-top: 10px; margin-bottom: 0; line-height: 28px; height: 55px; overflow: hidden; } } &:hover{ &:after{ opacity: 1; } } &:after { background-color: @tCRed; bottom: 0; content: ""; height: 5px; left: 0; position: absolute; -webkit-transition-duration: 500ms; transition-duration: 500ms; width: 100%; z-index: 5; opacity: 0; .anim(); } } } #sayilar{ padding: 50px 0; background-image: url(../img/bg-fact.jpg) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; .single_sayilar{ text-align: center; .sayilar_img i:before{ font-size: 80px; width: 140px; height: 140px; display: inline-block; text-align: center; line-height: 140px; color: #fff; .anim(); } .sayilar_text{ b { font-size: 45px; color: #fff; } h4 { font-size: 22px; color: #fff; } } &:hover{ .sayilar_img i:before{ } } } } #services{ padding: 60px 0; /*background-color: #f6f6f6;*/ .section_title { margin: 0px auto; text-align: center; h2:before { width: 100%; border-radius: 3px; } h2:after{ left: 50%; height: 3px; width: 125px; transform: translate(-50%); } } .itemVertical{ position: relative; margin-right: 7px; margin-left: 7px; border: 1px solid #eeeeee; .anim(); .imgMiddle{ height: 250px; } .text-title{ position: relative; padding-left: 90px; border-top: 1px solid #eeeeee; height: auto; position: relative; -webkit-transition-duration: 500ms; transition-duration: 500ms; width: 100%; z-index: 5; .anim(); .icon-box { position: absolute; left: 0px; top: 0px; color: @tCRed; width: 70px; font-size: 40px; line-height: 1.1em; padding: 8px 0px; text-align: center; border-right: 1px solid #eeeeee; span:before{ font-size: inherit; } } a.go{ display: block; padding: 0px 10px; color: #222222; text-align: center; box-sizing: border-box; height: 60px; overflow: hidden; .anim(); >span{ max-height: 36px; overflow: hidden; height: auto; display: inline-block; line-height: 135% !important; font-weight: 700; font-size: 14px; position: relative; top: 50%; transform: translateY(-50%); p { margin-bottom: 2px; display: block; } } } }//.text-title &:hover{ box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1); a.go{ background-color: transparent; span{ color: inherit; } } .img{ opacity: 0.5; img{ transform: scale(1.1); } } } }//.itemVertical }//#services #icons{ height: 150px; background-color: #ddd; }//#icons #pageBg{ width: 100%; height: 639px; position: absolute; background-image: radial-gradient(#ececec 40%, #f8f8f8); left: 0; top: 0; // border-radius: 0 0 300px 300px; } .title{ width: 100%; border-bottom: 1px solid #ddd; padding: 10px 0; margin-bottom: 20px; h3{ position: relative; display: inline-block; padding-left: 60px; padding-top: 10px; a{ font-size: 30px; text-decoration: none; color: @tCBlack; text-align: left; display: block; .anim(); &:hover{ color: @tCRed; } } &:before{ width: 30px; height: 30px; position: absolute; margin: 0 5px; content: ""; top: 0px; left: 5px; font-family: Flaticon; font-size: 40px; font-style: normal; color: @tCBlack; } &:after{ position: absolute; width: 100%; height: 2px; left: 0; bottom: -12px; background-color: @tCRed; content: ""; } } }//.title #products{ width: 100%; padding: 25px 0 40px 0; .title{ h3:before{ content: "\f102"; } }//.title }//#products #info{ padding: 40px 0; background-color: #f1f1f1; //background-color: #fff; .title h3:before{top: 5px;} #docs{ .inner { display: table; overflow: hidden; width: 100%; background-color: #fff; margin-bottom: 21px; padding: 49px; border-radius: 5px; position: relative; .itVt, .itVb{ &:before, &:after{ content: ''; position: absolute; background-color: #444; width: 0px; height: 0px; .anim(); } } .itVt{ position: absolute; top: 10px; left: 10px; &:before, &:after{ left: 0; top: 0; } } .itVb{ position: absolute; bottom: 10px; right: 10px; &:before, &:after{ right: 0; bottom: 0; } } .thumb { display: block; text-align: center; vertical-align: middle; width: 75px; max-width: 75px; margin: 0px auto; border-bottom: 1px solid #ccc; i:before{ font-size: 50px; color: @tCRed; } } .text-wrap { display: block; vertical-align: middle; /* padding-left: 30px; */ text-align: center; .title { padding: 0; border: none; margin-bottom: 0px; a{ color: #222222; font-size: 18px; font-weight: bold; } } .excerpt { font-size: 17px; color: #5d5d5d; font-weight: 400; margin-top: 0; margin-bottom: 0; line-height: 28px; height: 27px; overflow: hidden; } } &:hover{ .itVt,.itVb{ &:before{ width: 2px; height: 45px; .anim(); } &:after{ height: 2px; width: 45px; .anim(); } } } } }//#docs #news{ .item{ background-color: #fff; border-radius: 6px; margin-bottom: 30px; position: relative; z-index: 1; .anim(); .text-area { padding: 20px; padding-top: 10px; h4 { color: #2c3e50; font-size: 18px; font-weight: 600; line-height: 1.5; .anim(); a{ color: inherit; } } p { font-size: 15px; color: #5d5d5d; font-weight: 400; line-height: 25px; height: 124px; overflow: hidden; } a.go{ display: block; padding: 0; color: #2c3e50; text-align: left; box-sizing: border-box; height: 60px; overflow: hidden; .anim(); >span{ max-height: 47px; overflow: hidden; height: auto; display: inline-block; line-height: 135% !important; font-weight: 700; font-size: 18px; position: relative; top: 50%; transform: translateY(-50%); } } a.gos{ background-color: #596775; color: #fff; font-size: 16px; font-weight: bold; margin-top: 15px; padding: 8px 25px; display: inline-block; .anim(); &:hover{ background-color: @tCRed; } } } &:hover{ a.gos{ background-color: @tCRed; } } } .img{ width: 100%; height: 200px; position: relative; overflow: hidden; border-radius: 6px 6px 0 0; a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; transform: scale(1); filter: grayscale(0%); .anim(); } &:hover{ a{ transform: scale(1.1); filter: grayscale(100%); } }//&:hover }//.img .text{ position: relative; h3{ a{ font-size: 20px; background-color: fade(#fff, 95%); color: @tCBlack; display: block; padding: 7px; font-weight: 700; .anim(); &:hover{ color: @tCRed; text-decoration: none; } } } p{ width: 100%; height: 102px; overflow: hidden; padding: 0 8px; } a.go{ width: 95%; display: block; padding: 6px 0; background-color: @tCRed; color: #fff; margin: 8px auto; font-weight: 400; text-align: center; &:hover{ text-decoration: none; background-color: darken(@tCRed, 10%); }//&:hover } }//.text }//#news }//#info #breadcrumb-main { position: relative; overflow: hidden; margin-bottom: 40px; width: 100%; } #subPageBanner{ width: 100%; height: 200px; position: relative; top: 0; left: 0; background-size: cover; background-position: center 20%; border-radius: 0; z-index: 1; &:before { content: ''; left: 0; right: 0; top: 0; bottom: 0; position: absolute; background-color: #000; opacity: .4; } }//#subPageBanner #yildizBreadCrumb{ width: 100%; overflow: hidden; padding: 3px 0 4px 0; position: relative; z-index: 2; margin-bottom: 10px; .searchbreadcrumb{ color: #000; } .title-page{ text-align: left; color: #fff; margin-bottom: 0; font-size: 2.857em; line-height: normal; font-weight: 700; margin-top: 30px; } ol{ margin-bottom: 0; background-color: transparent; text-align: left; li{ a{ color: #fff; font-size: 15px; }// a }// li li.active, li:last-child a{ font-weight: 700; }// li.active }// ol }// #yildizBreadCrumb #page-title{ position: relative; text-align: center; padding: 50px 0px 50px 0px; background: url(../img/pageSubBanner.jpg) repeat; h1 { position: relative; font-size: 36px; font-weight: 600; color: #fff; line-height: 1.5em; text-transform: capitalize; } .text { position: relative; color: #fff; font-size: 16px; font-weight: 400; text-align: center; } }//#page-title #page-info { position: relative; color: #272727; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; margin-bottom: 35px; .bread-crumb { position: relative; font-size: 14px; padding: 10px 0px 10px; li { position: relative; display: inline-block; margin-right: 24px; &:not(.active) a{ color: #1a1a1a; } a { color: @tCRed; font-weight: 500; line-height: 24px; font-size: 14px; text-transform: capitalize; &:after { content: '\f0da'; font-family: 'FontAwesome'; position: absolute; right: -21px; width: 10px; line-height: 24px; font-size: 16px; color: #222222; } } &:last-child{ a:after{ display: none; } } } } }//#page-info .locate-widget { position: relative; .inner-box { position: relative; overflow: hidden; padding: 25px 15px 20px; border: 1px solid #eeeeee; h3 { position: relative; color: #222222; font-size: 20px; font-weight: 500; margin-bottom: 10px; } .text { position: relative; color: #848484; font-size: 16px; font-weight: 400; margin-bottom: 8px; line-height: 26px; a{ color: @tCRed; display: inline-block; } } .locate-link { position: relative; color: #222222; font-size: 16px; font-weight: 500; } } } #leftNav{ width: 100%; border-radius: 5px; height: auto; position: relative; z-index: 3; padding-bottom: 5px; margin-bottom: 50px; .view-all { position: relative; color: #222222; font-weight: 600; font-size: 14px; padding: 15px 20px; display: block; margin-bottom: 9px; background-color: #f1f1f1; a{ color: inherit; } .fa { font-size: 17px; padding-top: 2px; float: right; color: #848484; } } >ul{ position: relative; margin-bottom: 50px; >li{ position: relative; line-height: 24px; >a{ position: relative; color: #222222; font-weight: 600; font-size: 14px; padding: 15px 20px; display: block; margin-bottom: 2px; background-color: #f7f7f7; .anim(); .anim(); i{ float: right; position: relative; top: 3px; padding-left: 6px; } } &:hover{ a{color: @tCRed;text-decoration: none;} }//&:hover &:last-child{ border-bottom: none; }//&:last-child }//li li.active a{ color: #ffffff; background-color: @tCRed; } }//ul }//#leftNav .list{ width: 100%; position: relative; overflow: hidden; z-index: 2; &.service-list{ .itemNormal{ background-color: transparent; margin-bottom: 30px; a.go{ text-align: left; padding: 0px; height: 56px; span{ max-height: 46px; font-size: 18px; margin-bottom: 14px; } } .content{ font-size: 14px; font-weight: 400; line-height: 26px; color: #919191; height: 80px; overflow: hidden; } .lbtn{ a{ padding: 7px 36px; font-size: 12px; margin: 10px 0 0; background-color: @tCRed; font-weight: 700; border: 2px solid @tCRed; display: inline-block; color: #fff; .anim(); &:hover{ background-color: #fff; color: @tCRed; } } } &:hover{ a.go{ background: transparent; span{ color: inherit; } } } } } &.product-list{ .itemVertical{ position: relative; margin-right: 7px; margin-left: 7px; border: 1px solid #eeeeee; .anim(); .imgMiddle{ width: 100%; position: relative; overflow: hidden; height: 216px; padding: 8px; .anim(); img{ max-width: 100%; max-height: 200px; height: auto !important; } a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; } img{ height: 300px; .anim(); } }//.img .text-title{ position: relative; border-top: 1px solid #eeeeee; height: auto; position: relative; -webkit-transition-duration: 500ms; transition-duration: 500ms; width: 100%; z-index: 5; .anim(); .icon-box { position: absolute; left: 0px; top: 0px; color: @tCRed; width: 70px; font-size: 40px; line-height: 1.1em; padding: 8px 0px; text-align: center; border-right: 1px solid #eeeeee; .anim(); span:before{ font-size: inherit; } } a.go{ display: block; padding: 0px 10px; color: #222222; text-align: center; box-sizing: border-box; height: 60px; overflow: hidden; padding-left: 90px; .anim(); >span{ max-height: 36px; overflow: hidden; height: auto; display: inline-block; line-height: 135% !important; font-weight: 700; font-size: 14px; position: relative; top: 50%; transform: translateY(-50%); } } }//.text-title &:hover{ box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1); .text-title{ color: #fff; background: #ee3234; .icon-box{ color: #fff; } a.go{ color: #fff; } } a.go { background-color: transparent; span{ color: inherit; } } .img{ opacity: 0.5; img{ transform: scale(1.1); } } } }//.itemVertical } &.katalog-list{ .itemNormal{ position: relative; margin-right: 7px; margin-left: 7px; border: 1px solid #eeeeee; .text-title{ position: relative; padding-left: 90px; border-top: 1px solid #eeeeee; height: auto; position: relative; -webkit-transition-duration: 500ms; transition-duration: 500ms; width: 100%; z-index: 5; .anim(); .icon-box { position: absolute; left: 0px; top: 0px; color: @tCRed; width: 70px; font-size: 40px; line-height: 1.1em; padding: 8px 0px; text-align: center; border-right: 1px solid #eeeeee; span:before{ font-size: inherit; } } a.go{ display: block; padding: 0px 10px; color: #222222; text-align: center; box-sizing: border-box; height: 60px; overflow: hidden; .anim(); >span{ max-height: 36px; overflow: hidden; height: auto; display: inline-block; line-height: 135% !important; font-weight: 700; font-size: 14px; position: relative; top: 50%; transform: translateY(-50%); } } }//.text-title &:hover{ box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1); a.go { background-color: transparent; span{ color: inherit; } } .img{ opacity: 0.5; img{ transform: scale(1.1); } } } }//.itemNormal }//.katalog-list .itemBg{ .img{ width: 100%; height: 150px; position: relative; overflow: hidden; a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: contain; background-repeat: no-repeat; background-position: center center; transform: scale(1); filter: grayscale(0%); .anim(); } &:hover{ a{ transform: scale(1.1); filter: grayscale(100%); } }//&:hover }//.img /* ---------- HTML ---------- */ /*
#text
*/ }//.itemBg .itemBg.vertical .img a{ background-size: cover; /* ---------- HTML ---------- */ /*
#text
*/ } .itemNormal{ .img{ width: 100%; position: relative; overflow: hidden; img{ transform: scale(1); filter: grayscale(0%); .anim(); } }//.img &:hover{ img{ transform: scale(1.1); filter: grayscale(100%); } }//&:hover /* ---------- HTML ---------- */ /*
#text
#text
*/ }//.itemNormal .itemVertical{ display: block; text-align: center; position: relative; .imgMiddle{ width: 100%; height: 200px; padding: 10px 0; display: table; position: relative; overflow: hidden; div{ width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; img{ max-width: 90%; max-height: 170px; width: auto; display: inline-block; margin: 0 auto; } } }//.imgMiddle /* ---------- HTML ---------- */ /*
#text
#text
*/ }//.itemVertical .itemBg, .itemNormal, .itemVertical{ margin-bottom: 10px; display: block; overflow: hidden; border-bottom-left-radius: @tBR; border-bottom-right-radius: @tBR; background-color: #fff; &:hover{ a.go{ background-color: @tCRed; span{color: #fff;} } } } a.go{ display: block; padding: 0px 10px; color: @tCBlack; text-align: center; box-sizing: border-box; border-top: 1px solid #f8f8f8; height: 50px; overflow: hidden; .anim(); >span{ max-height: 36px; overflow: hidden; height: auto; display: inline-block; line-height: 135% !important; font-weight: 700; font-size: 14px; position: relative; top: 50%; transform: translateY(-50%); } }// a.go }//.list #rightArea{ position: relative; overflow: hidden; z-index: 2; /* background-color: #fff; */ /* border-radius: 0px; */ padding: 20px 15px; padding-top: 0px; /* box-shadow: 0px 0px 2px #c7c7c7; */ margin-bottom: 10px; .stitle{ position: relative; color: #222222; font-size: 24px; font-weight: 600; line-height: 1.2em; padding-bottom: 15px; margin-bottom: 32px; border-bottom: 1px solid rgba(238,238,238,0.50); &:before { position: absolute; content: ''; left: 0px; bottom: -1px; width: 70px; height: 1px; background-color: @tCRed; } } .slide{ border-radius: @tBR; overflow: hidden; }//.slide .table-responsive{ text-align: center; table thead{font-weight: 600;} }//.table-responsive h1{ font-size: 29px; margin-bottom: 9px; color: #101010; font-weight: 300; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #ccc; } .cnt{ position: relative; font-weight: 400; margin-bottom: 25px; word-spacing: 2px; font-size: 17px!important; font-style: normal; line-height: 1.75!important; letter-spacing: .2px!important; text-transform: none; color: #3a3a3a; *{ font-size: inherit; color: inherit; font-weight: inherit; letter-spacing: inherit; } img.business{ margin-left: 10px; margin-top: 10px; } }//.cnt .cnt.contactPage{ margin-top: 0; h1{ margin-bottom: 25px; } a i{ width: 15px; } p{ margin-bottom: 5px; a{ color: #717171; text-decoration: none; padding-left: 5px; &:hover{ color: @tCRed; } } } }// .cnt.contactPage }//#rightArea .vTabWrapper{ .helperText{ margin: 3px 0 15px 0; color: @tCBlack; display: block; text-align: center; b{ color: @tCBlue; } }//.helperText ul[data-select="1"] li{ width: ~"calc(100% / 1)"; } ul[data-select="1"] li.active a.tTitle{ background-color: #fff; color: #000; } ul[data-select="2"] li{ width: ~"calc(100% / 2)"; } ul[data-select="3"] li{ width: ~"calc(100% / 3)"; } ul[data-select="4"] li{ width: ~"calc(100% / 4)"; } ul[data-select="5"] li{ width: ~"calc(100% / 5)"; } ul[role="tablist"]{ border-bottom: 1px solid #ddd; overflow: hidden; li{ float: left; position: relative; &:before{ width: 1px; height: 80%; content:""; position: relative; top: 10%; background-color: #ddd; display: block; }//&:before a.tTitle{ width: 100%; height: 45px; display: block; padding: 10px; color: #000; font-size: 13px; box-sizing: border-box; text-align: center; .anim(); >span{ max-height: 37px; overflow: hidden; height: auto; display: inline-block; line-height: 135% !important; font-weight: 700; position: relative; top: 48%; transform: translateY(-50%); } }//a.tTitle &:last-child{ &:before{ display: none; } }//&:last-child }//li li.active a{ background-color: #ddd; border-top-right-radius: 5px; border-top-left-radius: 5px; } }//ul .tab-content{ width: 100%; padding-top: 10px; .cnt.vPadding{ padding: 10px 30px; }//.cnt.vPadding .pItem{ border-bottom: 1px solid #ddd; &:last-child{border: none;} a{ width: 100%; height: 85px; line-height: 85px; display: block; text-align: center; color: #868686; text-decoration: none; font-size: 50px; &:hover{ color: @tCBlack; } } a.download, a.see{ font-size: 25px; &:hover{ color: @tCBlue; } } span{ display: block; padding: 0px 5px; color: @tCBlack; text-align: center; box-sizing: border-box; height: 85px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; overflow: hidden; >label{ max-height: 77px; overflow: hidden; height: auto; display: inline-block; line-height: 135% !important; font-weight: 500; font-size: 17px; position: relative; top: 50%; transform: translateY(-50%); } }// a.go } .mItem{ .iframe{ width: 100%; height: 290px; display: block; background-color: #fff; >iframe{ width: 100%; height: 100%; } &:hover{ }//&:hover }// iframe }//.mItem .mItem[data-item="mouch"]{ .iframe{ height: 160px; margin-bottom: 10px; } } }//.tab-content .item{ width: 20%; margin: 7px 2.5%; display: block; float: left; .panelContent{ width: 100%; overflow: hidden; display: block; padding-top: 10px; } .bg, .text{ display: block; width: 100%; } .bg{ height: 90px; background-size: cover !important; border: 1px solid #dedede; text-align: center; line-height: 157px; border-radius: 10px; span.code{ border-top-right-radius: 10px; border-top-left-radius: 10px; background-color: #fff; padding: 4px 5px; font-size: 13px; font-weight: 700; .anim(); } &:hover{ span.code{ opacity: 0; } }//&:hover }//.bg .text{ width: 100%; height: 45px; display: block; padding: 10px; color: #000; font-weight: 300; font-size: 13px; box-sizing: border-box; text-align: center; .anim(); >span{ max-height: 37px; overflow: hidden; height: auto; display: inline-block; line-height: 135% !important; font-weight: 300; position: relative; top: 48%; transform: translateY(-50%); } }//.text }//.item .goTabDetail{ background-color: @tCRed; *{ color: #fff !important; } &:focus, &:hover{ outline: none; } select{ width: 90%; border: none; background-color: transparent; outline: none; margin: 0 auto; padding: 8px 16px; -webkit-appearance: none; } }//.goTabDetail }//.vTabWrapper #ohter{ margin-top: 75px; h6{ margin: 0 0 15px 0; font-weight: 700; font-size: 22px; color: #515050; border-bottom: 1px solid #e2e2e2; padding-bottom: 6px; font-weight: 300; } .list{ margin: 0; overflow: initial; } .owl-controls{ position: relative; margin-top: 35px; } .textMiddle{ a.go{ p{ margin-bottom: 2px; display: block; } } } .item{ &.ohter-product{ .img{ height: 220px; } } .img{ width: 100%; position: relative; overflow: hidden; height: 150px; padding: 8px; a.link { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; } div{ width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; img { max-width: 100%; max-height: 200px; height: auto !important; } } } .overlay { width: 100%; height: 100%; position: absolute; left: 0; top: -100%; border: 3px solid @tCRed; background-color: rgba(238, 50, 52, 0.56); .anim(); .box { display: table; height: 100%; width: 100%; .content { display: table-cell; text-align: center; vertical-align: middle; a i { background: rgba(238, 50, 52, 0.6) none repeat scroll 0 0; border-radius: 3%; color: #ffffff; display: inline-block; font-size: 20px; height: 45px; line-height: 48px; width: 45px; .anim(); &:hover{ background-color: rgba(238, 50, 52, 1); .anim(); } } } } } &:hover{ .overlay { top: 0; .anim(); } a.go{ background-color: transparent; span{ color: inherit; } } }//&:hover }//.item }//#ohter .file{ margin: 10px 0; font-size: 17px; .item{ padding: 3px 5px; display: block; float: none; width: 100%; overflow: hidden; height: auto; font-size: 15px; border-bottom: 1px solid @tCRed; margin-bottom: 5px; .anim(); span{ float: left; color: black; padding: 2px 5px; text-transform: capitalize; } a{ float: right; margin-right: 5px; border: 1px solid transparent; background: #fff; padding: 1px 5px; color: @tCRed; .anim(); &:hover{ color: #fff; border: 1px solid #ddd; background-color: @tCRed; }//&:hover }// a }//.item }//.file #itemSlider ,#movArea{ width: 100%; margin-bottom: 20px; position: relative; overflow: hidden; border: 1px solid #ccc; .crsl{ width: 100%; height: auto; overflow: hidden; margin: 0 auto; } .imgMiddle{ width: 100%; height: 340px; padding: 10px 0; display: table; position: relative; overflow: hidden; div{ width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; img{ max-width: 90%; max-height: 290px; width: auto; display: inline-block; margin: 0 auto; } } }//.imgMiddle /* ---------- HTML ---------- */ /*
#text
#text
*/ .iframe{ width: 100%; height: 380px; display: block; padding: 3px; background-color: #fff; >iframe{ width: 100%; height: 100%; } }// iframe a.prev, a.next{ width: 40px; height: 40px; line-height: 40px; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); font-family: FontAwesome; background: #ddd; z-index: 10; color: #fff; font-size: 32px; .anim(); &:hover{ background-color: @tCRed; } } a.prev{ content: "\f104"; left: 0; } a.next{ content: "\f105"; right: 0; } a.createFancy{ overflow: hidden; } .owl-dots{ bottom: 10px; } &:hover{ border-color: @tCRed; // a.prev, a.next, .owl-dots{opacity: 1;} } } #movAreaThumbnail, #itemSliderThumbnail{ height: auto; padding: 10px; border-radius: 0; position: relative; margin-bottom: 5px; img{ cursor: pointer; border-radius: 0; display: inline-block; } .noCrsl, .crsl{ text-align: center; .item{ width: 150px; height: 150px; display: inline-block; margin: 0 10px; border: 1px solid #ddd; &:hover, &.active{border-color: @tCRed;} .imgMiddle{ width: 100%; height: 150px; display: table; position: relative; overflow: hidden; div{ width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; img{ max-width: 90%; max-height: 130px; width: auto; display: inline-block; margin: 0 auto; } } }//.imgMiddle } }//.noCrsl .crsl{ width: 90%; margin: 0 auto; .item{ width: 100%; margin: 0; } }//.crsl img:hover, img.active{ border-color: @tCRed; } .owl-dots{ width: 100%; position: absolute; bottom: -20px; text-align: center; .owl-dot{ display: inline-block; margin-left: 5px; span{ border-radius: 0; background-color: #fff; } }// .owl-dots .owl-dot.active{ span{ } }// .owl-dot.active }// .owl-dots }// #movAreaThumbnail, #itemSliderThumbnail #itemSliderThumbnail.noProduct .item{ padding: 5px; } #references{ width: 100%; display: block; background-color: #fff; padding: 25px 0; box-shadow: 0px -4px 12px -9px #000; .itemVertical{ margin-bottom: 0; .imgMiddle{ height: 70px; div img{ max-width: 85%; max-height: 70px; } }//.imgMiddle .anim(); }//.itemVertical }//#references select.goDirectory{ width: 80%; margin: 10px auto; padding: 4px; display: none; }// select.goDirectory footer{ width: 100%; padding: 62px 0 0 0; color: #e9dddd; background: #202020; .social{ li{ display: inline-block; a{ font-size: 18px; i{ color: #fff; } } } } h3{ color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; line-height: 24px; padding-bottom: 20px; display: block; a{ font-size: inherit; font-weight: inherit; margin: 0; padding: 0; display: block; color: inherit; } } ul{ li{ border-bottom: 1px dashed transparent; list-style: none; margin: 0 0 -11px 0; position: relative; border-color: #454545; a{ margin-bottom: 10px; margin-top: 18px; } &:last-child{ border: none; } } } .footer_logo{ padding-bottom: 20px; margin-bottom: 17px; img{ margin-left: -15px; margin-bottom: 17px; } p{ color: #e9dddd; margin-left: -15px; margin-top: 0px; font-size: 15px; } } ul>li>a, p, p a{ color: #e9dddd; font-size: 14px; display: block; padding: 2px 0; &:hover{ text-decoration: none; i{color: @tCRed} }//&:hover i{ padding-right: 5px; color: @tCRed; } } .social{ a.facebook{ &:hover{ i{color: darken(#3B5998, 10%);} } } a.twitter{ &:hover{ i{color: darken(#55acee, 10%);} } } a.google-plus{ &:hover{ i{color: darken(#d1402e, 10%);} } } a.youtube{ &:hover{ i{color: darken(#CC181E, 10%);} } } a.instagram{ &:hover{ i{color: darken(#A57D60, 20%);} } }// a.instagram }//.social .contact h3 { margin-bottom: 15px; } .bottom{ margin: 10px 0 20px 0; display: block; border-top: 1px solid fade(@tCRed, 50%); padding: 10px 0; a,p{ font-size: 15px; color: #848484; font-weight: 300; display: block; } a{ text-align: right; float: right; margin-left: 10px; } }//.bottom a:hover{ color: @tCRed; text-decoration: none; } }// footer a#jq-BackToTop{ font-size: 25px; display: block; position: fixed; bottom: 30px; right: -60px; background: @tCRed; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #fff; z-index: 1000; .anim(); i{position: relative;top: 0;} } #map{ width: 100%; height: 300px; display: block; position: relative; z-index: 1; background-color: #ddd; margin-bottom: 20px; margin-top: 62px; #map-canvas { height: 100%; margin: 0px; padding: 0px; overflow: hidden; } #disabledScroll{ position: absolute; width: 100%; height: 100%; z-index: 2; left: 0; top: 0; } a.map{ text-decoration: none; } }//#map form.vForm{ margin: 25px 0; label.error{ color: red; font-size: 12px; margin: 0; font-weight: 500; } span.exp{ display: block; float: left; } input[type='text'], input[type='password'], input[type='email'], select, textarea{ width: 100%; border-radius: 0; padding: @tM; height: 35px; font-size: 14px; outline: none !important; outline: none; border: none; box-shadow: none; border-bottom: 1px solid #ccc; margin-bottom: 10px; border-radius: @tBR; &:hover, &:focus{ box-shadow: none !important; border-color: @tCRed; } }// input textarea{ resize: vertical; min-height: 50px; } .checkbox{ width: 100%; height: auto; display: block; label{ font-size: 13px; } } .edit{ margin-bottom: (@tM*1.5); .aH(); overflow: hidden; .exp{ line-height: 30px; font-weight: 400; width: 100%; font-size: 12px; text-align: center; } div[class^='col-']{ padding-left: 3px; padding-right: 3px; } } button[type=submit]{ width: 100%; background-color: fade(@tCRed, 90%); border-radius: 0; font-size: 13px; padding: 8px 16px; float: right; border: none; color: #fff; &:hover{ background-color: darken(@tCRed, 5%); } } img{ display: block; margin: 0 auto; } }// form .owlDots{ .owl-dots{ width: 100%; position: absolute; bottom: 5px; text-align: center; .owl-dot{ display: inline-block; margin-left: 15px; span{ width: 11px; height: 11px; display: block; background-color: #808080; border-radius: 100%; transform: scale(1); } }// .owl-dots .owl-dot.active{ span{ background-color: @tCRed; transform: scale(1.5); } }// .owl-dot.active }// .owl-dots }// owlDots a.link{ position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; display: block; } .vC{ display: block; margin-left: auto; margin-right: auto; } .crsl{ .item, img, a, p{ transform-style: preserve-3d; backface-visibility: hidden; } } .pr{ position: relative; } ul, ul li, h1, h2, h3, h4, h5, p{ margin: 0; padding: 0; list-style-type: none; } .vCenter{ width: 100%; height: 100px; display: table; .vCenterMiddle{ width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; } img{ max-width: 100%; max-height: 100px; width: auto; display: inline-block; } }//.vCenter #shareArea{ width: 100%; overflow: hidden; margin: 15px 0; display: block; .count{ display: none !important; } .button{ float: left; width:60px; margin-right: 10px; margin-left: 13px; } .button.facebook{ position: relative; right: 9px; } .button.googleplus{ width: 32px; } .fb-share-button{ float: left; } .typ{ float: left; a{ float: left; display: inline-block; position: relative; margin-left: 10px; font-size: 14px; font-weight: 700; background: #4267b2; padding: 0 15px 0 5px; color: #fff; border-radius: 5px; .anim(); &:hover{ text-decoration: none; background: darken(#4267b2, 10%); } sub{ font-weight: 300; font-size: 18px; position: absolute; right: 5px; top: 11px; } } a.down sub{top: 9px;} } } b, strong{ font-weight: 700 !important; } a:focus, a:visited, a:active{ border: none; text-decoration: none; outline: none; } .anim{.anim()} .clearfix{ clear: both; height: 0; } a#jq-BackToTop i.active{ -webkit-animation-name: jump; -webkit-animation-timing-function: linear; -webkit-animation-duration: .4s; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwads; -webkit-animation-direction: alternate; } @-webkit-keyframes jump{ from { top: -3px; } to { top: 3px; } } .md-none{ display: none; } /* All Small devices (Phone & Tablet & Small Desktop) */ @media only screen and (min-width: 0) and (max-width: 992px) { .xs-block{ display: block; margin: 5px 14px 25px; } .xs-none{ display: none; } #sayilar .single_sayilar { margin-bottom: 20px; } footer .contact h3 { margin-top: 35px; } .section_title { text-align: center; margin: 0px auto; h2:before{ width: 100%; } h2:after{ left: 50%; transform: translate(-50%); } } #ohter{ .item{ .img{ height: 93px; } &.ohter-product{ .img{ height: 220px; } } } } #page-title{ padding: 40px 0px 40px 0px; } #kurumsal{ .single_feature{ margin-bottom: 15px; } } #subPageBanner { height: 150px; top: 0; } #yildizBreadCrumb { bottom: -10px; left: 10px; } body{ text-align: center; overflow-x: hidden !important; } .pull-left, .pull-right{ float: none !important; } .container{ max-width: initial !important; min-width: initial !important; }//.container #mobilHeader, .headerSpace, #mobilFooter, .ghostMobilFooter{ display: block; } header, #menu, .ghostFooter{ display: none; } #pageWrapper{ margin-bottom: 0; } #sliderWrapper .fullscreenvideo:before{ display: none; } #block{ &:after{ background-color: #333; } .vbtn{ a{ margin-top: 10px; } .bg{ display: none; }//.bg }//.vbtn }//#block #services{ .img{ height: auto; a{ position: relative; } }//.img .text{ top: 0; margin-bottom: 0; margin-top: 10px; p{display: none;} }//.text }//#services #subPageBanner{ height: 150px; top: 0; }//#subPageBanner .title{ text-align: center; margin-top: 10px; }//.title #leftNav{ margin-bottom: 15px; }//#leftNav #rightArea{ text-align: center; border: none; }//#rightArea .crsl{ .item, img, a, p{ transform-style: preserve-3d; backface-visibility: hidden; } } #shareArea{ text-align: center; .typ{ width: 100%; a{ width: 48%; margin: 0 1%; padding: 5px 0; sub{position: initial;} } } } #itemSlider ,#movArea{ border: none; margin-bottom: 30px; overflow: initial; .crsl{ overflow: initial; } .imgMiddle{ width: 100%; height: 200px; padding: 10px 0; display: table; position: relative; overflow: hidden; div{ width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; img{ max-width: 90%; max-height: 180px; width: auto; display: inline-block; margin: 0 auto; } } }//.imgMiddle .iframe{ height: 200px; }// iframe .owl-dots{ bottom: -25px; } a.prev, a.next{ display: none; } } footer{ a.mobilHideTrigger{ display: block; margin: 10px auto; font-size: 26px; background: #fff; width: 60px; height: 40px; line-height: 40px; color: @tCRed; border: 1px solid #ddd; position: relative; top: -50px; margin-bottom: -40px; .anim(); i.fa-times{ display: none; } &.active{ background-color: @tCRed; color: #fff; top: 0; margin-bottom: 10px; i.fa-times{ display: inline-block; } i.fa-bars{ display: none; } } } .mobilHide{ display: none; } .bottom{ text-align: center; border: none; margin: 0; a{ display: inline-block; float: none; margin-top: 10px; } }//.bottom }// footer }// @media only screen and (min-width: 0) and (max-width: 992px) /* Extra Small devices (Phone) */ @media only screen and (min-width: 0) and (max-width: 800px) { #leftNav ul{ display: none; } select.goDirectory{ display: block; } } /* Extra Small devices (Phone) */