/* * stlye.less * * @project http://www.? * @package Vayes vStart İYS * @author Vayes Web Tasarım - Yazılım ve Reklam Hizm. - Geliştirici Takımı * @copyright Her hakkı saklıdır. Vayes Web Tasarım - Yazılım ve Reklam Hizm. (http://vayes.net) * @license Ticari Lisans (http://vayes.net) * @link http://vayes.net * @since Version 1.0 * @filesource * @example */ @tCBlack: #434e5f; @tCPurple: #a71380; @tCRed: #48B3E2; @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;} .border(){} .bg(){ background-color: #fff; box-shadow: 0px 0px 1px #E2E2E2; } @import url('https://fonts.googleapis.com/css?family=Quicksand:400,700&subset=latin-ext'); @import url('../../../default/assets/stylesheets/tinymce_user_style.css'); @font-face { font-family: "Flaticon"; src: url("../fonts/flaticon/Flaticon.eot"); src: url("../fonts/flaticon/Flaticon.eot?#iefix") format("embedded-opentype"), url("../fonts/flaticon/Flaticon.woff2") format("woff2"), url("../fonts/flaticon/Flaticon.woff") format("woff"), url("../fonts/flaticon/Flaticon.ttf") format("truetype"), url("../fonts/flaticon/Flaticon.svg#Flaticon") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: "Flaticon"; src: url("../fonts/flaticon/Flaticon.svg#Flaticon") format("svg"); } } [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-family: Flaticon; font-style: normal; } .flaticon-right-chevron:before { content: "\f100"; } .flaticon-left-chevron:before { content: "\f101"; } .flaticon-magnifying-glass:before { content: "\f102"; } .flaticon-smartphone:before { content: "\f103"; } .flaticon-mail:before { content: "\f104"; } .flaticon-whatsapp:before { content: "\f105"; } .flaticon-facebook:before { content: "\f106"; } .flaticon-instagram:before { content: "\f107"; } .flaticon-youtube:before { content: "\f108"; } .flaticon-linkedin:before { content: "\f109"; } .flaticon-right-arrow:before { content: "\f10a"; } .flaticon-left-arrow:before { content: "\f10b"; } .flaticon-hospital:before { content: "\f10c"; } .flaticon-first-aid-kit:before { content: "\f10d"; } .flaticon-placeholder:before { content: "\f10e"; } .flaticon-worldwide:before { content: "\f10f"; } .flaticon-pin:before { content: "\f110"; } .flaticon-location:before { content: "\f111"; } .flaticon-menu:before { content: "\f112"; } .flaticon-appointment:before { content: "\f113"; } body{ font-family: 'Barlow', 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%; } #pageWrapper{ width: 100%; min-height: 100%; height: auto !important; margin-bottom: -283px; .ghostFooter{ height: 278px; }//.ghostFooter }//#pageWrapper body.subpage{ #pageWrapper{ background-color: #efefef; } } .container{ max-width: 1060px !important; min-width: 1060px !important; position: relative; } .container-f { padding: 0 80px; } .right{ float: right; } header{ width: 100%; height: auto; z-index: 12; position: absolute; z-index: 100; left: 0; top: 0; padding: 10px 0; background-image: -webkit-linear-gradient(top,rgba(0, 0, 0, 0.7) 0,rgba(0, 0, 0, 0.02) 100%); .logo{ width: 175px; display: block; top: -5px; position: relative; z-index: 1; } #menu{ width: 100%; position: relative; z-index: 25; margin-top: 20px; 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; color: #fff; } } >a{ color: #fff; display: block; padding: 0px 28px; font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; text-align: center; position: relative; .anim(); &:hover{ color: @tCRed; } }// a ul{ display: none; } }// >li >li:last-child{border: none;} li.active{ a{ color: @tCRed; text-decoration: none; } } }// >ul }//#menu .phones, .social { display: block; float: right; margin-top: 20px; } .phones { margin-right: 20px; ul { margin: 0; padding: 0; li { display: inline-block; a { color: #fff; display: flex; align-items: center; padding: 0 17px; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; text-align: center; position: relative; i { font-size: 24px; margin-right: 10px; } .anim(); &:hover { text-decoration: none; } } } } } .social{ position: relative; 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 }// header header.affix{ background-color: fade(#fff, 85%); } #mobilHeader{ width: 100%; height: 60px; background-color: #333; 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: 100%; 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: 6px; max-width: 165px; max-height: 50px; } }//.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: #fff; font-weight: 700; 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(); .shareTrigger, .location, .sendMail, .call{ width: 33%; float: left; display: block; text-align: center; height:60px; a{ font-size: 21px; color: #fff; display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px 0; font-size: 25px; } } .share{ width: 100%; position: absolute; left: 0; bottom: -4px; z-index: -1; border-bottom: 1px solid #000000; background-color: @tCRed; .anim(); &.active{bottom: 46px;} >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;} } .shareTrigger{ background-color: @tCRed; .anim(); &.active{ background-color: darken(@tCRed, 15%); } } .location{background-color: #2C82C9;} .sendMail{background-color: #F1654C;} .call{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 { .item { width: 100%; height: 100vh; img { width: 100%; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 1; max-width: 60%; padding: 40px; background: rgba(255,255,255,.6); h3 { color: #333; font-weight: 700; font-size: 64px; } .cnt { p { color: #333; font-size: 24px; font-weight: 500; } } } } .owl-dots { position:absolute; bottom: 20px; left: 50%; z-index: 1; transform: translateX(-50%); .owl-dot { display: inline-block; width: 20px; height: 5px; background: #333; margin: 5px; transition: .3s; &.active { background: #48B3E2; transform: translateY(-5px); } } } } .sliderNav { .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); text-align: center; z-index: 1; opacity: .6; transition: .4s; i { display: block; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; background: #333; color: white; cursor: pointer; } &:hover { opacity: 1; } } .prev { left: 50px; } .next { right: 50px; } } .section-title { margin-bottom: 50px; position: relative; z-index: 1; text-align: center; h3{ text-transform: uppercase; font-weight: 700; font-size: 29px; line-height: 40px; letter-spacing: 2px; margin-top: 0; margin-bottom: 15px; border: 0; color: #222222; position: relative; display: block; margin: 0px auto; &:before{ content: ''; position: absolute; bottom: -2px; left: 50%; transform: translate(-50%); background: #222; height: 2px; width: 150px; } } p{ color: #fff; text-align: left; display: block; padding-top: 16px; font-size: 16px; line-height: 25px; } } #kurumsal{ padding: 60px 0 0; img{ border-radius: 10px; } .about_text{ color: #777777; line-height: 186%; font-size: 17px; margin-bottom: 15px; overflow: hidden; padding: 0 20px; h5{ /* margin-top: 30px; */ margin-bottom: 10px; font-size: 17px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; color: #222; } .quick{ margin: 30px auto; position: relative; } a{ margin: 0 7px; display: inline-block; padding: 8px 20px; border: 1px solid #f1f1f1; color: #000; position: relative; overflow: hidden; .anim(); &:before{ content: ''; background: @tCRed; top: -100%; height: 100%; left: 0; right: 0; z-index: -1; position: absolute; .anim(); } &:hover{ text-decoration: none; color: #fff; &:before{ top: 0; } } } } } .homeVideo { padding: 120px 0; position:relative; .content { text-align: center; a#playButton { i { display: block; width: 60px; height: 60px; line-height: 60px; border: 2px solid white; color: white; background: transparent; cursor: pointer; transition: .4s; margin: 0 auto; border-radius: 50%; &:hover { background: white; color: #000; } } &:hover { text-decoration: none; } } h3 { font-size: 48px; font-weight: bold; color: white; margin: 60px 0 20px; } p { font-size: 18px; color: white; font-weight: 500; } } &:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(51,51,51,.8); } } .no-padding{ padding: 0px; } #galeri{ padding: 60px 0; background: rgba(72,179,226,.1); .itemBg{ .img{ height: 218px; a{ background-size: cover; } &:before{ content: "\f002"; font: normal normal normal 25px/1 FontAwesome; position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%,-50%); color: #fff; opacity: 0; cursor: pointer; .anim(); } &:after{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background-color: rgba(0, 0, 0, 0.5); opacity: 0; .anim(); } } &:hover{ .img{ &:before,&:after{ opacity: 1; } } } } } #musteri_yorumlari{ padding: 60px 0; .itemBg{ .img{ height: 440px; padding: 10px; border: 2px solid #f1f1f1; img{ background-size: cover; display: block; width: 100%; margin: 0 auto; } } &:hover{ .img{ &:before,&:after{ opacity: 1; } } } } .owl-nav { .owl-prev { position:absolute; top: 50%; transform: translateY(-50%); left: -20px; display: block; width: 40px; height: 40px; line-height: 40px; text-align:center; color: white; border-radius: 50%; transition: .4s; background: rgba(0,0,0,.6); &:hover { background: rgba(0,0,0,1); } } .owl-next { position:absolute; top: 50%; transform: translateY(-50%); right: -20px; display: block; width: 40px; height: 40px; line-height: 40px; text-align:center; color: white; border-radius: 50%; transition: .4s; background: rgba(0,0,0,.6); &:hover { background: rgba(0,0,0,1); } } } } #services_list{ padding-top: 60px; color: #fff!important; position:relative; z-index: 2; .section-title{ h3{ color: #333; &:before{ background: #333; } } } .bg-car>div { } .bg-car>.row:nth-child(even){ >div{ float: right !important; } } .bg-car{ .row:nth-child(1){ background-color: #feda00!important; color: #333!important; } .row:nth-child(2){ background-color: #f1f1f1!important; color: #333!important; } .row:nth-child(3){ background-color: #D280CC!important; color: #fff!important; .box-heading-lg:after{border-bottom-color: #fff;} } .row:nth-child(4){ background-color: #f1f1f1!important; color: #333!important; } .row:nth-child(5){ background-color: #8DCCE4!important; color: #333!important; } .row:nth-child(6){ background-color: #f1f1f1!important; color: #333!important; } .w-full { width: 100%!important; } .box{ padding: 40px!important; padding-bottom: 0px; .box-heading-lg { font-size: 40px; margin-bottom: 20px; position: relative; &:after { position: absolute; bottom: -8px; left: 0; content: ''; margin-left: 0px; border-bottom: 2px solid #333; width: 70px; } } p{ font-size: 16px; font-weight: 400; } .btn { display: inline-block; padding: 10px 20px; background: #fff; color: #333; font-weight: 500; border-radius: 3px; margin-top: 10px; background-color: #333!important; color: #fff!important; } } } } #uygulamalar{ background-color: #333; padding: 150px 0; margin-top: -100px; position:relative; z-index: 1; .section-title{ h3{ color: #fff; margin: 0; } p{ color: rgba(255,255,255,.6); } } h3{ text-transform: uppercase; font-weight: 700; font-size: 18px; line-height: 40px; letter-spacing: 2px; margin-top: 10px; margin-bottom: 10px; color: #fff; position: relative; } .cnt { display: block; max-width: 100%; p{ color: rgba(255,255,255,.6); display: block; max-width: 100%; text-align: left; font-size: 16px; } } } #services{ .list{ >div{padding-left: 0;padding-right: 0;} a.link{z-index: 10;} .img{ width: 100%; height: 250px; a{ transform: none; filter: none; .anim(); } &:before, &:after{ .anim(); opacity: 0; } &:before{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background-color: fade(#fff, 70%); content: ""; } &:after{ font-family: Flaticon; font-size: 150px; z-index: 2; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); color: @tCRed; } &:hover{ a{ transform: none; filter: none; } }//&:hover }//.img .img[data-select="cocuk-jimnastigi"]{ &:after{content: "\f101";} } .img[data-select="yoga"]{ &:after{content: "\f102";} } .img[data-select="pilatesmat"]{ &:after{content: "\f103";} } .img[data-select="pilatesreformer"]{ &:after{content: "\f104";} } .itemBg:hover{ .img:before, .img:after{ opacity: 1; } } } }//#services #icons{ background-color: #f1f1f1; margin: 60px 0; padding: 60px 0; .icon, .text{ float: left; display: block; } .icon{ width: 20%; position: relative; font-size: 60px; line-height: 100%; top: 0; } .icon[data-numb="1"]{ top: -7px; } .icon[data-numb="2"]{ top: -3px; } .icon[data-numb="3"]{ top: -7px; } .text{ width: 80%; padding-left: 8px; span, a{ display: block; } span{ font-size: 20px; color: @tCRed; } a{ color: @tCBlack; font-size: 15px; .tTextControl(); } } }//#icons #texts{ width: 100%; overflow: hidden; padding-top: 20px; >div{padding-left: 0;padding-right: 0;} .item{ width: 100%; height: 400px; display: block; position: relative; overflow: hidden; .bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; transform: scale(1.1); filter: grayscale(0%); .anim(); } .text{ max-width: 100%; background-color: fade(#fff, 75%); padding: 16px 20px; position: absolute; top: 50%; transform: translateY(-50%); .anim(); p, span{ display: block; } p{ width: 450px; color: @tCBlack; font-size: 20px; } span{ color: @tCRed; font-size: 16px; padding-top: 8px; } } &:hover{ .bg{ filter: grayscale(100%); transform: scale(1); } .text{background-color: #fff;} } } .item[data-numb="1"] .text, .item[data-numb="3"] .text{ left: 0; text-align: left; } .item[data-numb="2"] .text, .item[data-numb="4"] .text{ right: 0; text-align: right; } } #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: 20px; padding-top: 10px; a{ font-size: 30px; text-decoration: none; color: @tCBlack; text-align: left; display: block; .anim(); &:hover{ color: @tCRed; } } &:after{ position: absolute; width: 100%; height: 2px; left: 0; bottom: -12px; background-color: @tCRed; content: ""; } } }//.title #info{ padding: 60px 0; background-color: #fff; .table-bordered, .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{ vertical-align: middle; padding-left: 10px !important; border: none; border-bottom: 5px solid #fff; } .table-bordered > tbody > tr:first-child > td{ border: none; } .table-bordered > tbody > tr:first-child > td:first-child{ border-bottom: 5px solid #fff; } .Renk--Arkaplan-SIYAH{ padding: 10px !important; } .table-bordered>tbody>tr>td{ &.Renk--Arkaplan-SIYAH{ text-align: center; &:first-child{ text-align: left; } } } .Renk--Arkaplan-KIRMIZI{ font-weight: 300 !important; padding: 5px !important; } #workTime{ .cnt{ table{ tr td:first-child{ font-weight: 700; } } } }//#workTime #news{ .item{ .img{ width: 100%; height: 220px; position: relative; overflow: hidden; -webkit-clip-path: polygon(50% 0, 0 0, 2% 100%, 98% 100%, 100% 0); clip-path: polygon(50% 0, 0 0, 2% 100%, 98% 100%, 100% 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.4); filter: grayscale(0%); .anim(); } &:hover{ a{ transform: scale(1.2); filter: grayscale(100%); } }//&:hover }//.img .text{ position: relative; a.go{ display: block; padding: 0px 10px; color: @tCBlack; text-align: left; box-sizing: border-box; border-top: 1px solid #f8f8f8; height: 50px; overflow: hidden; .anim(); >span{ max-height: 40px; overflow: hidden; height: auto; display: inline-block; line-height: 135% !important; font-weight: 700; font-size: 16px; position: relative; top: 50%; transform: translateY(-50%); } }// a.go }//.text &:hover{ .text a.go { color: @tCRed; } }// &:hover }// .item }//#news }//#info #subPageBanner{ width: 100%; height: 350px; position: relative; top: 0; left: 0; background-size: cover; background-position: center 20%; border-radius: @tBR; margin-bottom: -44px; z-index: 1; &:before{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0,0,0,0.3); } .text{ width: 100%; height: 350px; position: relative; h2{ color: #fff; position: absolute; top: 50%; transform: translateY(-50%); font-size: 70px; } } }//#subPageBanner #vayesBreadCrumb{ width: 100%; overflow: hidden; padding: 3px 0 4px 0; background-color: fade(#fff, 60%); border-radius: @tBR; position: relative; z-index: 2; top: -44px; border-bottom: 1px solid #ddd; ol{ margin-bottom: 0; background-color: transparent; li{ a{ color: @tCBlack; font-size: 14px; }// a }// li li.active, li:last-child a{ font-weight: 700; }// li.active }// ol }// #vayesBreadCrumb #leftNav{ width: 100%; border-radius: 5px; height: auto; position: relative; z-index: 3; padding-bottom: 5px; .title{ padding: 7px 21px; text-transform: uppercase; font-weight: 600; font-size: 17px; background-color: fade(#fff, 80%); margin-bottom: 10px; h3{ color: @tCBlack; font-size: 16px; font-weight: 300; padding: 6px 0; font-weight: 700; &:before, &:after{ display: none; } } } >ul{ margin: 0 auto; padding: 15px 0; background-color: #fff; box-shadow: 0px 0px 2px #c7c7c7; >li{ width: 88%; display: block; margin: 0 auto; border-bottom: 1px solid @tCRed; position: relative; >a{ display: block; padding: 6px 8px; font-size: 16px; color: #808080; 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{ font-weight: 600; color: @tCRed; } }//ul }//#leftNav .list{ width: 100%; position: relative; overflow: hidden; z-index: 2; .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 .img.edit{height: 195px;} /* ---------- HTML ---------- */ /**/ }//.itemBg .itemBg.vertical .img a{ background-size: cover; /* ---------- HTML ---------- */ /**/ } .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 ---------- */ /**/ }//.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 ---------- */ /* */ }//.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 .list[data-select="listItem"]{ .itemNormal{ .img img{ transform: scale(1.1) } &:hover{ .img img{transform: scale(1)}; } } } #rightArea{ position: relative; overflow: hidden; z-index: 2; background-color: #fff; border-radius: @tBR; padding: 20px 15px; box-shadow: 0px 0px 2px #c7c7c7; margin-bottom: 10px; .table-bordered, .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{ vertical-align: middle; padding-left: 10px !important; border: none; border-bottom: 5px solid #fff; } .table-bordered > tbody > tr:first-child > td{ border: none; } .table-bordered > tbody > tr:first-child > td:first-child{ border-bottom: 5px solid #fff; } .Renk--Arkaplan-SIYAH{ padding: 10px !important; } .Renk--Arkaplan-KIRMIZI{ font-weight: 300 !important; padding: 5px !important; } .slide{ border-radius: @tBR; overflow: hidden; }//.slide .table-responsive{ text-align: center; table thead{font-weight: 600;} }//.table-responsive h1{ font-size: 29px; margin-top: 14px; margin-bottom: 9px; color: #101010; font-weight: 300; } .cnt{ color: #8e8e8e; font-weight: 400; margin-bottom: 7px; 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; } } } p,a { display: flex; align-items: center; text-align: center; i { width: 30px; } } }// .cnt.contactPage }//#rightArea .vTabWrapper{ .helperText{ margin: 3px 0 15px 0; color: @tCBlack; display: block; text-align: center; #a71380{ } }//.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; #a71380{ } } 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-dots{ bottom: -10px; } }//#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: 10px; position: relative; overflow: hidden; padding: 5px; border: 1px solid #ddd; .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 ---------- */ /* */ .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: 0; } &: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%; left: 0; bottom: 0; z-index: 1; padding-top: 60px; font-size: 15px; position: relative; background-color: #111!important; color: #fff!important; .vC{ width: 62%; } h3{ font-size: 20px; margin: 20px 0; font-weight: 600; color: #fff; text-transform: uppercase; display: block; a{ font-size: inherit; font-weight: inherit; margin: 0; padding: 0; display: block; color: inherit; } } ul>li>a, p, p a{ color: #848484; display: block; padding: 2px 0; &:hover{ text-decoration: none; i{color: @tCRed} }//&:hover i{ padding-right: 5px; color: @tCRed; } } .contact { margin-bottom: 40px; p { a { display: flex; i { width: 20px; height: 30px; margin-right: 10px; line-height: 23px; text-align: center; } } } } .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 .bottom{ 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; #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 #map[data-select="homeMap"]{ height: 500px; margin-bottom: 0; } 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: 0; text-align: center; .owl-dot{ display: inline-block; margin-left: 8px; span{ width: 10px; height: 10px; display: block; background-color: #808080; border-radius: 100%; transform: scale(1); } }// .owl-dots .owl-dot.active{ span{ background-color: @tCRed; transform: scale(1.7); } }// .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; } } /* All Small devices (Phone & Tablet & Small Desktop) */ @media only screen and (min-width: 0) and (max-width: 992px) { .container-f { padding: 0 20px; } footer .vC{ width: 50%; } .section-title{ margin: 50px 20px; } #kurumsal{ padding: 50px 0; .section-title{ margin-top: 0; } .about_text{ margin-top: 15px; } } #services_list .bg-car .box .box-heading-lg{ &:after { left: 50%; transform: translateX(-50%); } } .section-title h3 { &:before { left: 50%; transform: translateX(-50%); } } #uygulamalar{ padding: 20px 0; } #services_list{ padding: 0px; } #mobilHeader .logo img { margin-top: 7px; } body{ 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; padding-bottom: 40px; } #sliderWrapper{ height: auto; .item { height: auto; .content { width: 100%; min-height: auto; h3 { font-size: 20px !important; } .cnt { p { font-size: 13px !important; } } } } .owl-dots { bottom: -30px; } } .sliderNav { .next, .prev { top: 20%; } .next { right: 10px; } .prev { left: 10px; } } #services{ .img{ &:before, &:after{ display: none; } } }//#services #icons{ display: none; } #texts{ .item{ height: 350px; p{ max-width: 90%; } } } #map[data-select="homeMap"]{ height: 250px; } #info #news .item .text a.go{ text-align: center; } #subPageBanner{ height: 150px; margin-bottom: 0; .text{ height: 150px; h2{ font-size: 7vw; color: #fff; text-shadow: 1px 1px @tCRed; } } }//#subPageBanner #vayesBreadCrumb{ top: 0; margin-bottom: 10px; } .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{ padding-top: 20px; a.mobilHideTrigger{ display: block; margin: 10px auto; font-size: 26px; text-align: center; background: #fff; width: 60px; height: 40px; line-height: 40px; color: @tCRed; border: 1px solid #ddd; position: relative; top: -60px; margin-bottom: -40px; .anim(); i.fa-times{ display: none; } &.active{ background-color: @tCRed; color: #fff; top: -12px; 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) */