{ "version": 3, "file": "../scss/style.css", "sources": [ "../scss/style.scss", "../scss/_mixins.scss" ], "sourcesContent": [ "@import \"_mixins\";\r\n\r\n/** Media Break Points Larger Screen**/\r\n$larger-break-point:\"screen and(min-width: 1200px)\";\r\n\r\n/** Media Break Points Laptop**/\r\n$laptop-break-point:\"screen and(max-width: 1200px)\";\r\n\r\n/** Media Break Points Midi Laptops**/\r\n$notebook-break-point:\"screen and(max-width: 991px)\";\r\n\r\n/** Media Break Points Tablet**/\r\n$tablet-break-point:\"screen and(max-width: 768px)\";\r\n\r\n$tablet-break-point2:\"screen and(min-width: 768px) and(max-width: 991px)\" ;\r\n \r\n// Breakpoints\r\n$bp-small: 48em; // 768px\r\n$bp-medium: 64em; // 1024px\r\n$bp-large: 1367px; // 1366px\r\n$bp-xlarge: 120em; // 1920px\r\n$bp-xxlarge: 160em; // 2560px\r\n\r\n// Media Queries\r\n$mq-small: \"(min-width: #{$bp-small})\";\r\n$mq-medium: \"(min-width: #{$bp-medium})\";\r\n$mq-large: \"(min-width: #{$bp-large})\";\r\n$mq-xlarge: \"(min-width: #{$bp-xlarge})\";\r\n$mq-xxlarge: \"(min-width: #{$bp-xxlarge})\";\r\n$mq-retina: \"(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)\";\r\n\r\n/** Media Break Points Mobil**/\r\n$mobil-break-point:\"screen and(max-width: 480px)\";\r\n$primary-color:#ea610b;\r\n$secondary-color:#1d1819;\r\n$primary-font:\"Averta\";\r\n\r\n$default-link-color:$secondary-color;\r\n\r\n.p-color{\r\n color:$primary-color;\r\n}\r\n\r\n\r\n@font-face {\r\n font-family: 'Averta';\r\n font-weight: normal;\r\n src: url('../font/Averta.eot'); /* IE9 Compat Modes */\r\n src: url('../font/Averta.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */\r\n url('../font/Averta.woff') format('woff'), /* Pretty Modern Browsers */\r\n url('../font/Averta.ttf') format('truetype'), /* Safari, Android, iOS */\r\n url('../font/Averta.svg#svgFontName') format('svg'); /* Legacy iOS */\r\n \r\n }\r\n\r\n @font-face {\r\n font-family: 'Averta';\r\n font-weight: 500;\r\n src: url('../font/Averta-Semibold.eot'); /* IE9 Compat Modes */\r\n src: url('../font/Averta-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */\r\n url('../font/Averta-Semibold.woff') format('woff'), /* Pretty Modern Browsers */\r\n url('../font/Averta-Semibold.ttf') format('truetype'), /* Safari, Android, iOS */\r\n url('../font/Averta-Semibold.svg#svgFontName') format('svg'); /* Legacy iOS */\r\n \r\n }\r\n\r\n @font-face {\r\n font-family: 'Averta';\r\n font-weight: 600;\r\n src: url('../font/Averta-Bold.eot'); /* IE9 Compat Modes */\r\n src: url('../font/Averta-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */\r\n url('../font/Averta-Bold.woff') format('woff'), /* Pretty Modern Browsers */\r\n url('../font/Averta-Bold.ttf') format('truetype'), /* Safari, Android, iOS */\r\n url('../font/Averta-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */\r\n \r\n }\r\n\r\n*{\r\n margin: 0; padding: 0;\r\n}\r\na, a:hover{\r\n color: inherit;\r\n}\r\n\r\n.pad5{\r\n padding:5px;\r\n}\r\n\r\n.pad-10{\r\n padding:10px;\r\n}\r\n.pad-0{\r\n padding:0;\r\n}\r\nul, ol{\r\n list-style-position: inside;\r\n}\r\n.gallery-list-wrap{\r\n\r\n a{\r\n position: relative; display:block; border:2px solid #e2e2e2; \r\n }\r\n}\r\n\r\n.panel, .panel-default, .panel-body, .panel-title, .panel-heading, .panel-title, .panel-default>.panel-heading, .up-btn{ background:none ; background-color:transparent ; border:0 ; box-shadow:none; margin:0; padding:0; border:none; border-radius:none ;\r\n}\r\n\r\n.page-title{\r\n display:none;\r\n}\r\n\r\n\r\n* :focus{\r\n outline: 0;\r\n\r\n}\r\nbody {\r\n\r\n a{\r\n \r\n\r\n &:hover{\r\n text-decoration: none; \r\n \r\n \r\n }\r\n &:focus, &:visited {\r\n outline: 0; text-decoration: none; \r\n }\r\n }\r\n\r\n}\r\nnav.menu--open{\r\n\r\n .logo{ \r\n \r\n\r\n svg{ height:50px; margin:0 auto;\r\n\r\n & *{\r\n fill:#fff !important;\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n}\r\n \r\nnav.menu{\r\n\r\n .logo{\r\n position:fixed;\r\n top:30px; left:20px; display:block; \r\n\r\n svg{ height:50px; margin:0 auto;\r\n\r\n &, & *{\r\n @include transition(1s); transition-delay:0.3s;\r\n }\r\n\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n \r\n position:relative; display:inline-block; margin:20px auto; width:100%; text-align:center; left:0; top:0;\r\n border-bottom:1px solid rgb(66, 66, 66); padding-bottom:20px;\r\n\r\n\r\n svg{ height:40px; margin:0 auto;\r\n }\r\n \r\n }\r\n }\r\n\r\n .menu__inner{\r\n\r\n @media #{$larger-break-point}{\r\n\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n overflow: auto; padding:0; padding-bottom:40px;\r\n }\r\n\r\n\r\n \r\n\r\n \r\n\r\n .fixed-list{\r\n\r\n list-style: none; width: 25%; height: auto;float: left; margin-top: 30px; height: 300px; overflow-y: auto; overflow-x: hidden;\r\n\r\n \r\n\r\n @media #{$notebook-break-point}{\r\n width: 50%; margin: 10px auto; min-height: 300px; overflow-x: hidden; text-align: center;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n width: 50%; margin-bottom: 20px; overflow-x: hidden; text-align: center;\r\n }\r\n \r\n @media #{$mobil-break-point}{\r\n width: 100%; float: none; height: auto; max-height:none;min-height:0;\r\n }\r\n \r\n li{ color: #fff; line-height: 2em; position: relative;\r\n\r\n &.list-title{\r\n font-size: 24px;\r\n }\r\n\r\n a{\r\n font-size: 15px; font-weight: normal; color: #fff; line-height: 2em; padding-left: 25px; display: inline-block;\r\n position: relative; @include transition(0.4s); padding-top: 5px; padding-bottom: 5px; width: 100%;\r\n\r\n &:before{\r\n width: 20px; height: 1px; background-color: #fff; content: \"\"; left: -5px; top: 49%; position: absolute;\r\n @include transition(0.4s); \r\n\r\n @media #{$tablet-break-point}{\r\n\r\n left:50px;\r\n\r\n }\r\n }\r\n \r\n\r\n &:hover{\r\n color: $primary-color; @include translate3d(10px, 0, 0);\r\n\r\n &::before{\r\n @include rotate(-45deg); width: 30px; \r\n \r\n }\r\n \r\n }\r\n\r\n }\r\n }\r\n\r\n @media #{$mq-large}{\r\n\r\n height:auto; max-height:450px;\r\n\r\n li{\r\n\r\n &.list-title{\r\n\r\n font-size: 1.5vw; margin-bottom:25px;\r\n \r\n }\r\n\r\n a{\r\n\r\n font-size: 0.9vw;\r\n }\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n \r\n }\r\n\r\n .fixed-menu-phone{\r\n position:absolute; color:#fff; width: 40%; left:50px; bottom:50px; height:50px; font-size:16px; @include transition(0.3s);\r\n\r\n i{\r\n font-size: 50px;\r\n opacity: 0.7;\r\n position: relative;\r\n top: 1px;\r\n margin-right: 10px;\r\n }\r\n\r\n .big{\r\n font-size:30px; font-weight: 500; letter-spacing: -1px;\r\n }\r\n\r\n &:hover{\r\n color:$primary-color;\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n width: 100%; display:block; left:0; bottom:0; margin:20px 0; text-align: center; position: relative;\r\n .big{\r\n font-size:24px; font-weight: 500;\r\n }\r\n }\r\n }\r\n \r\n\r\n .social-menu{\r\n width: auto; position: absolute; right: 50px; bottom: 20px;\r\n\r\n @media #{$notebook-break-point}{\r\n position: relative;\r\n float: none;\r\n margin: 10px auto;\r\n left: 0;\r\n right: 0;\r\n width: 100%;\r\n text-align: center;\r\n }\r\n\r\n .text1{\r\n color: $primary-color; font-size: 14px; letter-spacing: -1px; left: -25px; position: relative;\r\n \r\n\r\n &::before{\r\n width: 20px; height: 1px; background-color: $primary-color; content: \"\"; position: absolute; right: -25px; top: 50%;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n color: #ea610b;\r\n font-size: 14px;\r\n letter-spacing: -1px;\r\n position: relative;\r\n display: block;\r\n width: 100%;\r\n text-align: center;\r\n left: 0;\r\n margin-bottom: 30px;\r\n\r\n &::before{\r\n width: 1px;\r\n height: 20px;\r\n background-color: #ea610b;\r\n content: \"\";\r\n position: absolute;\r\n right: 50%;\r\n top: 20px;\r\n }\r\n \r\n }\r\n }\r\n\r\n li{\r\n display: inline;\r\n\r\n a{\r\n display: inline-block; \r\n\r\n i{\r\n width: 40px; height: 40px; border: 2px solid $primary-color; color: $primary-color; line-height: 40px; display: inline-block; text-align: center; border-radius: 100%; margin-left: 5px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &::before{\r\n @include translate3d(-100%, 0%, 0); z-index: 4; width: 100%; height: 100vh; background-color: $primary-color; \r\n @include transition(0.4s); content: \"\"; position: absolute;transition-delay: 0.3s; z-index: 5;\r\n }\r\n\r\n &::after{\r\n @include translate3d(-100%, 0, 0); z-index: 2; width: 100%; height: 100vh; background-color: #000; \r\n @include transition(0.4s); content: \"\"; position: absolute; z-index: 5;\r\n }\r\n\r\n \r\n}\r\n\r\n.open-menu{ @include translate3d(0, 0%, 0); display: block; \r\n\r\n &::before{@include translate3d(100%, 0, 0);\r\n\r\n }\r\n &::after{@include translate3d(100%, 0, 0);\r\n\r\n }\r\n\r\n .fixed-menu-inner{\r\n opacity: 1; transition-delay: 0.8s; position: relative; height: 100%; width: 100%;\r\n }\r\n\r\n}\r\n.o-hidden{\r\n overflow: hidden;\r\n}\r\n\r\n.o-hidden1{\r\n overflow: visible;\r\n}\r\n\r\n.pad0{\r\n padding:0;\r\n} \r\n\r\nbody{\r\n background: url(../img/body-pattern1.png) repeat #fff; \r\n font-family: $primary-font;\r\n min-height: 100%; width: 100%; max-width: 100%;\r\n margin: 0; padding: 0;\r\n overflow-x: hidden;\r\n font-size: 15px;\r\n\r\n @media #{$mq-large}{\r\n\r\n font-size: 16px;\r\n }\r\n}\r\n\r\n#wrapper{\r\n position: relative;\r\n}\r\n\r\n.grid-lines{\r\n width: 100%; height: 100vh; position: fixed; z-index: 90; opacity: 0.15; pointer-events: none; display: none; \r\n display: flex;\r\n align-items: stretch; /* Default */\r\n justify-content: space-between;\r\n padding: 0 15px;\r\n animation: height-animation 1s;pointer-events: none; display: none; opacity: 0;\r\n\r\n @media #{$tablet-break-point}{\r\n display: none;\r\n }\r\n\r\n li{\r\n height: 100vh; width: 1px; animation: height-animation 1s; display:block; background-color: #fff; \r\n }\r\n}\r\n\r\n#main-header{\r\n position: fixed; top:0; left: 0; width: 100%; z-index: 95; display: block;\r\n\r\n @media #{$tablet-break-point}{\r\n position: relative !important;\r\n }\r\n}\r\n\r\n \r\n\r\n\r\n/* Float Panel: class=\"float-panel fixed\" */\r\n\r\n\r\n\r\n\r\n.logo-area{\r\n background-color: #fff; position: relative; width: calc(100% - 70px); float: left; @include skewX(-20deg); left: -15px; padding-left: 20px;\r\n @include box-shadow2(0, 0, 30px, 10px, rgba(0, 0, 0, 0.25)); \r\n\r\n @media #{$tablet-break-point}{\r\n\r\n width: calc(100% - 55px);\r\n\r\n }\r\n\r\n .logo{\r\n padding: 10px 15px; float: left; @include skewX(20deg);\r\n\r\n svg{\r\n height: 50px;\r\n\r\n @media #{$notebook-break-point}{\r\n\r\n height: 46px;\r\n\r\n }\r\n @media #{$tablet-break-point2}{\r\n\r\n height: 40px !important; padding-right: 5px; \r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n\r\n height: 40px;\r\n\r\n }\r\n }\r\n }\r\n\r\n .header-phone{\r\n float: right; width: 50px; height: 65px; position:relative; display: none; font-size:20px; color: $secondary-color; text-align: center; \r\n transform: skewX(20deg);\r\n\r\n &::before{\r\n width:1px; height: 100%; @include rotate(60deg); background: rgb(177, 177, 177); content:\"\"; position:absolute; left:0px; top:0;\r\n transform: skewX(-20deg);\r\n }\r\n\r\n i{\r\n color:$secondary-color; line-height: 65px; display:inline-block;\r\n }\r\n @media #{$tablet-break-point}{\r\n\r\n display:block;\r\n\r\n }\r\n \r\n }\r\n .main-menu{\r\n float: left; margin: 0 2em; list-style: none;\r\n @include skewX(20deg);\r\n\r\n @media #{$notebook-break-point}{\r\n\r\n margin: 0 1em;\r\n\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n\r\n display: none;\r\n \r\n }\r\n \r\n li{\r\n float: left;\r\n \r\n a{\r\n display: inline-block; padding: 10px 2em; color: $default-link-color; font-weight: 500; letter-spacing: -0.4px; line-height:35px; @include transition(0.4s); margin-top: 10px; padding-bottom: 20px;\r\n \r\n &:hover{\r\n background-color: $secondary-color; color: #fff; \r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n padding: 10px 1em; padding-bottom: 20px;\r\n }\r\n }\r\n }\r\n }\r\n \r\n\r\n \r\n}\r\n\r\n.menu-collapse{\r\n height: 70px; width: 75px; background-color: #fff; float: right; border: 0; outline: 0; z-index: 296; right: -5px; top: 10px;\r\n\r\n &::before{\r\n width: 40px; height: 100%; z-index: -1; position: absolute; content: \"\"; background-color: inherit; @include skewX(-20deg); left: -13px; top: 0;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n\r\n width: 60px; height: 65px; right: 0; top:0; background-color: #fff;\r\n\r\n &::before{\r\n width: 25px; border-left: 1px solid #bbbbbb;\r\n }\r\n\r\n }\r\n \r\n\r\n .line-wrap{\r\n height: 60px; width: 70px; display: block; position: relative; margin: 0 auto; text-align: center; right: 10px;\r\n\r\n span{\r\n width: 40px; height: 3px; background-color: rgb(65, 65, 65); position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; display: block;\r\n @include transition(0.2s);\r\n\r\n &.line1{\r\n top: 20px; left: 20px;\r\n }\r\n &.line2{\r\n top: 30px;\r\n }\r\n &.line3{\r\n top: 40px; left: 10px;\r\n }\r\n\r\n }\r\n\r\n \r\n @media #{$tablet-break-point}{\r\n\r\n right: 10px; height: 50px; width: 50px;\r\n\r\n span{\r\n width: 33px; height: 3px; background-color: rgb(61, 61, 61); position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; display: block;\r\n @include transition(0.2s);\r\n\r\n &.line1{\r\n top: 15px; left: 20px;\r\n }\r\n &.line2{\r\n top: 25px;\r\n }\r\n &.line3{\r\n top: 35px; left: 10px;\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n &:hover{\r\n\r\n .line1, .line3{\r\n\r\n left:0;\r\n\r\n }\r\n\r\n } \r\n\r\n \r\n\r\n \r\n }\r\n\r\n\r\n \r\n &.active{\r\n background-color: transparent; @include translate3d(5em,0em,0); transition-delay: 2s; @include transition(0.3s); @include rotate(90deg);\r\n\r\n &::before{\r\n display: none;\r\n }\r\n .line1{\r\n top: 30px !important; @include rotate(45deg); @include transform-origin(50% 50%); left: 0 !important; width: 30px; background-color: #fff;\r\n\r\n }\r\n .line3{\r\n\r\n top: 30px !important; @include rotate(-45deg); @include transform-origin(50% 50%); left: 0 !important;width: 30px; background-color: #fff;\r\n\r\n }\r\n .line2{\r\n width: 0; background-color: #fff;\r\n }\r\n }\r\n \r\n}\r\n\r\nnav.menu--open .menu-collapse.active{\r\n @include translate3d(0,0,0);transition-delay: 0.5s; @include rotate(0);\r\n\r\n &:hover{\r\n transition-delay: 0.2s; \r\n }\r\n\r\n}\r\n\r\n\r\n/** Banner **/\r\n\r\n#banner{\r\n position: relative; overflow: hidden; width: 100%;\r\n\r\n .banner-counter{\r\n\r\n position: absolute;\r\n right: 2%;\r\n top: 200px;\r\n z-index: 20;\r\n color: #fff;\r\n font-size: 50px;\r\n letter-spacing: -4px;\r\n\r\n @media #{$mq-large}{\r\n font-size:5vw;\r\n }\r\n }\r\n}\r\n.banner-mask-left{\r\n position: absolute; width: 45%; height: 200px; background: url(../img/body-pattern1.png) repeat #fff; left:-50px; bottom: -170px;\r\n @include rotate(5.5deg);\r\n}\r\n.banner-mask-right{\r\n position: absolute; width: 80%; height: 200px; background: url(../img/body-pattern1.png) repeat #fff; right:-50px; bottom: -170px;\r\n @include rotate(-5.5deg);\r\n}\r\n\r\n@media #{$tablet-break-point}{\r\n\r\n .banner-mask-right, .banner-mask-left{\r\n display: none;\r\n }\r\n}\r\n\r\n\r\n/** Home Project **/\r\n\r\n.proje-links-wrap{\r\n width: 100%; padding: 0 30px; display: block;\r\n\r\n @media #{$tablet-break-point}{\r\n width: 100%;\r\n padding: 0;\r\n text-align: center;\r\n float: none;\r\n margin: 0;\r\n top: 1px;\r\n position: relative;\r\n margin-top: 80px;\r\n }\r\n}\r\n\r\n.catalog{\r\n background: url(../img/sprite.png) no-repeat -200px -70px; width: 50px; height: 50px; display: inline-block;\r\n}\r\n\r\n.maps{\r\n background: url(../img/sprite.png) no-repeat -150px -70px; width: 50px; height: 50px; display: inline-block;\r\n}\r\n\r\n.proje-links{\r\n display: inline-block;\r\n float: right;\r\n margin-left: 10px;\r\n height: 70px;\r\n line-height: 70px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n color: $primary-color;\r\n \r\n padding: 0 20px;\r\n min-width: 290px;\r\n letter-spacing: -1px;\r\n position: relative;\r\n background: #fff;\r\n z-index: 22;\r\n position: relative;\r\n border: 3px solid transparent;\r\n top: -100px;\r\n @include transition(0.3s);\r\n\r\n \r\n @media #{$mq-large}{\r\n\r\n top: 0;\r\n transform: scale(1.1);\r\n right: 20px;\r\n margin-right: 30px;\r\n\r\n }\r\n \r\n\r\n @media #{$tablet-break-point}{\r\n float: none; margin:5px auto; \r\n font-size: 14px; min-width: 0; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\r\n }\r\n\r\n\r\n\r\n & i{\r\n position: relative; top: 10px; float: left; margin-right: 5px;\r\n }\r\n\r\n\r\n &:hover{\r\n }\r\n\r\n &::before{\r\n width: 100%; height: 50%; z-index: -1; position: absolute; border: 1px solid $primary-color; left: 0px; content: \"\"; border-bottom: 0;\r\n @include transform-origin(50% 50%); @include transition(0.3s); top: 0;\r\n\r\n }\r\n &:hover:before{@include translate3d(0, -8px, 0) \r\n \r\n }\r\n &:hover:after{\r\n @include translate3d(0, 8px, 0)\r\n }\r\n &::after{\r\n width: 100%; height: 50%; z-index: -1; position: absolute; border:1px solid $primary-color; left:0px; content: \"\"; border-top: 0;\r\n @include transform-origin(50% 50%); @include transition(0.3s); bottom: 0;\r\n\r\n \r\n\r\n }\r\n}\r\n\r\n.owl-home-proje, .home-project {\r\n margin-bottom: 0; min-height: 450px;\r\n\r\n .owl-nav, .lSAction{\r\n position: relative;\r\n left: 0;\r\n bottom: 30px;\r\n width: 150px;\r\n background-color: #fff;\r\n height: 80px;\r\n border: 1px solid #e2e2e2;\r\n\r\n &::before{\r\n width: 1px; height: 25px; background-color: $secondary-color; position: absolute; content: \"\"; left: 50%; top: 50%; margin-top: -12px;\r\n }\r\n\r\n .owl-next, .lSNext{\r\n position: relative;\r\n font-size: 0;\r\n border: 0;\r\n display: block;\r\n width: 70px;\r\n height: 70px;\r\n float: right;\r\n top: 18px;\r\n right: -5px;\r\n background-image: none;\r\n\r\n &::before{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(-30deg); position: absolute; top: 38px; right: 30px;\r\n @include transform-origin(100% 0);\r\n }\r\n &::after{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(30deg); position: absolute; top: 38px; right: 30px;\r\n @include transform-origin(100% 0);\r\n }\r\n\r\n &:hover{\r\n animation: arrow-animation3 0.5s;\r\n animation-iteration-count: 3;\r\n }\r\n }\r\n\r\n .owl-prev, .lSPrev{\r\n position: relative;\r\n font-size: 0;\r\n border: 0;\r\n display: block;\r\n width: 70px;\r\n height: 70px;\r\n float: left;\r\n top: 18px;\r\n left: -5px;\r\n background-image: none;\r\n\r\n &::before{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(30deg); position: absolute; top: 38px; left: 30px;\r\n @include transform-origin(0% 100%);\r\n }\r\n &::after{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(-30deg); position: absolute; top: 38px; left: 30px;\r\n @include transform-origin(0% 100%);\r\n }\r\n\r\n &:hover{\r\n animation: arrow-animation2 0.5s;\r\n animation-iteration-count: 3;\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n.home-title1{\r\n width: 100%; display: block; color: #fff; font-size: 26px; letter-spacing: -1px; font-weight: bold; margin-bottom: 65px; border-left: 3px solid $primary-color; padding-left: 10px; line-height: 1.3em;\r\n\r\n @media #{$mq-large}{\r\n\r\n font-size: 1.5vw;\r\n\r\n }\r\n\r\n @media #{$mobil-break-point}{\r\n font-size: 20px;\r\n }\r\n\r\n \r\n span{\r\n color: $primary-color;\r\n }\r\n}\r\n\r\n.owl-home-news{ position: relative; z-index: 20;\r\n\r\n &::before{\r\n width: 100%; height: 1px; background-color: #e2e2e2; content:\"\"; position: absolute; left: 0px; bottom: -20px; z-index: -1;\r\n }\r\n\r\n &::after{\r\n width: 1px; height: 300px; background-color: #e2e2e2; content:\"\"; position: absolute; left: -20px; bottom: 20px; z-index: -1;\r\n }\r\n \r\n}\r\n\r\n.home-project{\r\n position: relative; min-height: 600px; width: 100%; z-index: 88; padding-top: 40px;\r\n\r\n &:before{\r\n position: absolute; top: 2%; font-size: 16vw; color: #f1ded2; opacity: 0.18; content: \"PROJELERİMİZ\"; font-weight: bold;\r\n left: 0; letter-spacing: -20px; width: 100%; overflow: hidden; pointer-events: none; z-index: 0;\r\n\r\n @media #{$tablet-break-point}{\r\n letter-spacing: -3px; font-size: 20vw; display: none;\r\n }\r\n }\r\n}\r\n\r\n.home-project-mask{\r\n width: 100%; height: 600px; position: absolute; left: -80%; top: -75px; background: url(../img/pattern2.png) repeat #3e3e3e;\r\n z-index: -1;\r\n transform: rotate(5.5deg) skewX(-40deg);\r\n\r\n @media #{$mq-large}{\r\n\r\n height: 900px; top:-85px;\r\n\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n\r\n top: -18px;\r\n transform: rotate(0) skewy(4deg);\r\n left: 0;\r\n height: 550px;\r\n\r\n\r\n\r\n }\r\n\r\n}\r\n\r\n.box-1{\r\n float: left; width: 140px; min-height: 250px; position: relative;\r\n\r\n @media #{$tablet-break-point}{\r\n width: 100px;\r\n }\r\n\r\n \r\n}\r\n\r\n.rotate-link1 {\r\n -moz-transform-origin: 0 50%;\r\n -moz-transform: rotate(-90deg) translate(-50%, 50%);\r\n -webkit-transform-origin: 0 50%;\r\n -webkit-transform: rotate(-90deg) translate(-50%, 50%);\r\n -o-transform-origin: 0 50%;\r\n -o-transform: rotate(-90deg) translate(-50%, 50%);\r\n -ms-transform-origin: 0 50%;\r\n -ms-transform: rotate(-90deg) translate(-50%, 50%);\r\n transform-origin: 0 0%;\r\n transform: rotate(-90deg) translate(-50%, 100%);\r\n position: absolute;\r\n bottom: 0;\r\n height: 2em;\r\n margin: auto;\r\n font-weight: bold;\r\n font-size: 1em;\r\n line-height: 2em;\r\n width: 230px;\r\n color: #fff;\r\n left: 20px;\r\n -webkit-transition: all .3s ease-in;\r\n -moz-transition: all .3s ease-in;\r\n -o-transition: all .3s ease-in;\r\n transition: all .3s ease-in;\r\n height: 60px;\r\n left: 1px ;\r\n top: 330px;\r\n @include transition(0.3s);\r\n\r\n &:hover, &:focus, &:visited{\r\n color:#fff;\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n color: $primary-color;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n left: -30px; \r\n }\r\n\r\n\r\n\r\n i{\r\n @include rotate(90deg); position: relative; transition: transform 3s;\r\n\r\n @media #{$tablet-break-point}{\r\n color: $secondary-color; @include transition(0.3s); \r\n }\r\n }\r\n\r\n &:hover i{\r\n animation: arrow-animation1 0.5s;\r\n animation-iteration-count: 3;\r\n \r\n \r\n }\r\n}\r\n\r\n\r\n.box-11{\r\n width: calc(100% - 140px); min-height: 400px; float: left; margin-bottom: 120px;\r\n\r\n @media #{$tablet-break-point}{\r\n\r\n width: calc(100% - 100px); margin-bottom: 0;\r\n\r\n }\r\n}\r\n\r\n.project-wrap{\r\n position: relative; overflow: hidden;\r\n\r\n\r\n &::before{\r\n width: 90%; height: 92%; position: absolute; border: 1px solid #fff; top: auto; bottom: auto; left: 0; right: 0; margin:4% auto; content: \"\";\r\n z-index: 50; pointer-events: none; opacity: 0.4;\r\n }\r\n\r\n a.project-img{\r\n display: block; background: $secondary-color; position: relative;\r\n \r\n\r\n \r\n\r\n img{\r\n opacity: 0.7; width: 100%;margin-left: 0px;position: relative;transition-property: all;transition-duration: 2s; transition-timing-function: ease-in-out;transition-delay: 0s;\r\n }\r\n\r\n \r\n\r\n \r\n }\r\n\r\n &:hover a.project-img img{\r\n transform: scale(1.1) rotate(2deg); opacity: 0.6;\r\n }\r\n\r\n &:hover .project-text{\r\n\r\n @include translate3d(0,-90px, 0);\r\n\r\n .project-summary{\r\n opacity: 1; color: #fff;\r\n }\r\n \r\n }\r\n\r\n .project-text{\r\n position: absolute; bottom:0px; width: 95%; padding: 0 20px; color: #fff; left:5%; @include translate3d(0,0px, 0); @include transition(0.5s);\r\n transition-timing-function: cubic-bezier(.36,.69,.45,.88) ;\r\n\r\n\r\n .project-name{color: #fff; font-size: 24px; font-weight: bold; letter-spacing: -1px; padding:5px 0; opacity:1; \r\n display: block; position: relative; \r\n\r\n @media #{$mq-large}{\r\n\r\n font-size:2vw;\r\n\r\n }\r\n \r\n }\r\n \r\n \r\n \r\n .project-summary{\r\n position: relative; font-size: 17px; line-height: 1.3em; padding: 4px 0; opacity: 0; @include transition(0.3s);\r\n\r\n @media #{$mq-large}{\r\n\r\n font-size:1.4vw;\r\n\r\n }\r\n }\r\n \r\n \r\n }\r\n\r\n &:hover{\r\n\r\n .detail-button{\r\n color: $primary-color;\r\n\r\n .detail-text:before{\r\n width: 20px; background-color: $primary-color; position: absolute; content: \"\"; right: 105%; top: 50%; height: 1px;\r\n }\r\n .detail-arrow{\r\n width: 80px; height: 60px; position: relative; \r\n \r\n &::before{\r\n \r\n background: $primary-color; width: 80px; height: 60px;@include skewX(-20deg); right: -20px; position: relative; content: \"\"; position: absolute; top: 0;\r\n \r\n }\r\n \r\n i{\r\n \r\n border: solid rgb(255, 255, 255);\r\n border-width: 0 3px 3px 0;\r\n display: inline-block;\r\n padding: 10px; \r\n top: 10px; position: relative;@include rotate(-45deg); left: 30px;\r\n } \r\n }\r\n }\r\n\r\n \r\n \r\n }\r\n\r\n \r\n \r\n\r\n .detail-button{\r\n position: absolute; right: 0; bottom: 0; display: inline-block; color: #fff; height: 60px; line-height:60px;\r\n \r\n \r\n .detail-text, .detail-arrow{\r\n float: left; display: inline-block; position: relative;\r\n @include transition(0.3s);\r\n \r\n \r\n }\r\n \r\n .detail-text:before{\r\n width: 20px; background-color: #fff; position: absolute; content: \"\"; right: 105%; top: 50%; height: 1px;\r\n @include transition(0.3s);\r\n }\r\n .detail-arrow{\r\n width: 80px; height: 60px; position: relative; \r\n @include transition(0.3s);\r\n \r\n &::before{\r\n \r\n background: #fff; width: 80px; height: 60px;@include skewX(-20deg); right: -20px; position: relative; content: \"\"; position: absolute; top: 0;\r\n @include transition(0.3s);\r\n \r\n }\r\n \r\n i{\r\n \r\n border: solid black;\r\n border-width: 0 3px 3px 0;\r\n display: inline-block;\r\n padding: 10px; \r\n top: 10px; position: relative;@include rotate(-45deg); left: 30px;\r\n } \r\n }\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** animated Arrow **/\r\n\r\n@-webkit-keyframes pulse {\r\n 0% {\r\n opacity: 0;\r\n background-position: center top;\r\n -moz-background-size: 0 auto;\r\n -o-background-size: 0 auto;\r\n -webkit-background-size: 0 auto;\r\n background-size: 0 auto;\r\n }\r\n 10% {\r\n opacity: 0;\r\n }\r\n 50% {\r\n opacity: 1;\r\n -moz-background-size: 75% auto;\r\n -o-background-size: 75% auto;\r\n -webkit-background-size: 75% auto;\r\n background-size: 75% auto;\r\n }\r\n 90% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 0;\r\n background-position: center bottom;\r\n -moz-background-size: 0 auto;\r\n -o-background-size: 0 auto;\r\n -webkit-background-size: 0 auto;\r\n background-size: 0 auto;\r\n }\r\n }\r\n @-moz-keyframes pulse {\r\n 0% {\r\n opacity: 0;\r\n background-position: center top;\r\n -moz-background-size: 0 auto;\r\n -o-background-size: 0 auto;\r\n -webkit-background-size: 0 auto;\r\n background-size: 0 auto;\r\n }\r\n 10% {\r\n opacity: 0;\r\n }\r\n 50% {\r\n opacity: 1;\r\n -moz-background-size: 75% auto;\r\n -o-background-size: 75% auto;\r\n -webkit-background-size: 75% auto;\r\n background-size: 75% auto;\r\n }\r\n 90% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 0;\r\n background-position: center bottom;\r\n -moz-background-size: 0 auto;\r\n -o-background-size: 0 auto;\r\n -webkit-background-size: 0 auto;\r\n background-size: 0 auto;\r\n }\r\n }\r\n @-ms-keyframes pulse {\r\n 0% {\r\n opacity: 0;\r\n background-position: center top;\r\n -moz-background-size: 0 auto;\r\n -o-background-size: 0 auto;\r\n -webkit-background-size: 0 auto;\r\n background-size: 0 auto;\r\n }\r\n 10% {\r\n opacity: 0;\r\n }\r\n 50% {\r\n opacity: 1;\r\n -moz-background-size: 75% auto;\r\n -o-background-size: 75% auto;\r\n -webkit-background-size: 75% auto;\r\n background-size: 75% auto;\r\n }\r\n 90% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 0;\r\n background-position: center bottom;\r\n -moz-background-size: 0 auto;\r\n -o-background-size: 0 auto;\r\n -webkit-background-size: 0 auto;\r\n background-size: 0 auto;\r\n }\r\n }\r\n @keyframes pulse {\r\n 0% {\r\n opacity: 0;\r\n background-position: center top;\r\n -moz-background-size: 0 auto;\r\n -o-background-size: 0 auto;\r\n -webkit-background-size: 0 auto;\r\n background-size: 0 auto;\r\n }\r\n 10% {\r\n opacity: 0;\r\n }\r\n 50% {\r\n opacity: 1;\r\n -moz-background-size: 75% auto;\r\n -o-background-size: 75% auto;\r\n -webkit-background-size: 75% auto;\r\n background-size: 75% auto;\r\n }\r\n 90% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 0;\r\n background-position: center bottom;\r\n -moz-background-size: 0 auto;\r\n -o-background-size: 0 auto;\r\n -webkit-background-size: 0 auto;\r\n background-size: 0 auto;\r\n }\r\n }\r\n\r\n .scroll-down {\r\n margin: 0;\r\n\r\n position: absolute;\r\n left: 50%;\r\n bottom: 10%;\r\n width: 100px;\r\n height: 100px;\r\n margin-left: -50px;\r\n margin-top: -50px;\r\n }\r\n .scroll-down a {\r\n display: block;\r\n opacity: 0;\r\n \r\n -moz-transition: all 0.4s ease;\r\n -o-transition: all 0.4s ease;\r\n -webkit-transition: all 0.4s ease;\r\n transition: all 0.4s ease;\r\n line-height: 0;\r\n font-size: 0;\r\n color: transparent;\r\n margin-left: auto;\r\n margin-right: auto;\r\n width: 100%;\r\n height: 100%;\r\n -moz-background-size: 0 auto;\r\n -o-background-size: 0 auto;\r\n -webkit-background-size: 0 auto;\r\n background-size: 0 auto;\r\n -webkit-animation: pulse 1.5s 0s infinite normal ease forwards;\r\n -moz-animation: pulse 1.5s 0s infinite normal ease forwards;\r\n -o-animation: pulse 1.5s 0s infinite normal ease forwards;\r\n animation: pulse 1.5s 0s infinite normal ease forwards;\r\n background-image: url(\"../img/arrow-down.svg\");\r\n background-repeat: no-repeat;\r\n }\r\n .scroll-down a:before, .scroll-down a:after {\r\n content: \" \";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n background: url(\"../img/arrow-down.svg\") no-repeat center top;\r\n -moz-background-size: 100% auto;\r\n -o-background-size: 100% auto;\r\n -webkit-background-size: 100% auto;\r\n background-size: 100% auto;\r\n }\r\n .scroll-down a:before {\r\n -webkit-animation: pulse 1.5s 0.25s infinite normal ease forwards;\r\n -moz-animation: pulse 1.5s 0.25s infinite normal ease forwards;\r\n -o-animation: pulse 1.5s 0.25s infinite normal ease forwards;\r\n animation: pulse 1.5s 0.25s infinite normal ease forwards;\r\n }\r\n .scroll-down a:after {\r\n -webkit-animation: pulse 1.5s 0.5s infinite normal ease forwards;\r\n -moz-animation: pulse 1.5s 0.5s infinite normal ease forwards;\r\n -o-animation: pulse 1.5s 0.5s infinite normal ease forwards;\r\n animation: pulse 1.5s 0.5s infinite normal ease forwards;\r\n }\r\n .scroll-down a:hover {\r\n background-color: rgba(0, 0, 0, 0.3);\r\n }\r\n \r\n\r\n /** Phone İcons white **/\r\n\r\n\r\n .phone-icon-x5-white{\r\n width: 77px; height: 77px; background: url(../img/sprite.png) no-repeat 0 -171px; display: inline-block;\r\n }\r\n\r\n .phone-icon-x4-white{\r\n width: 59px; height: 59px; background: url(../img/sprite.png) no-repeat -77px -171px; display: inline-block;\r\n}\r\n.phone-icon-x3-white{\r\n width: 50px; height: 50px; background: url(../img/sprite.png) no-repeat -136px -171px; display: inline-block;\r\n}\r\n.phone-icon-x2-white{\r\n width: 35px; height: 35px; background: url(../img/sprite.png) no-repeat -186px -171px; display: inline-block;\r\n}\r\n.phone-icon-x1-white{\r\n width: 27px; height: 27px; background: url(../img/sprite.png) no-repeat -221px -171px; display: inline-block;\r\n}\r\n\r\n\r\n /** Phone İcons orange **/\r\n\r\n\r\n .phone-icon-x5-orange{\r\n width: 77px; height: 77px; background: url(../img/sprite.png) no-repeat 0 -248px; display: inline-block;\r\n}\r\n\r\n.phone-icon-x4-orange{\r\n width: 59px; height: 59px; background: url(../img/sprite.png) no-repeat -77px -248px; display: inline-block;\r\n}\r\n.phone-icon-x3-orange{\r\n width: 50px; height: 50px; background: url(../img/sprite.png) no-repeat -136px -248px; display: inline-block;\r\n}\r\n.phone-icon-x2-orange{\r\n width: 35px; height: 35px; background: url(../img/sprite.png) no-repeat -186px -248px; display: inline-block;\r\n}\r\n.phone-icon-x1-orange{\r\n width: 27px; height: 27px; background: url(../img/sprite.png) no-repeat -221px -248px; display: inline-block;\r\n}\r\n\r\n\r\n /** Phone İcons Black **/\r\n\r\n\r\n .phone-icon-x5-black{\r\n width: 77px; height: 77px; background: url(../img/sprite.png) no-repeat 0 -325px; display: inline-block;\r\n}\r\n\r\n.phone-icon-x4-black{\r\n width: 59px; height: 59px; background: url(../img/sprite.png) no-repeat -77px -325px; display: inline-block;\r\n}\r\n.phone-icon-x3-black{\r\n width: 50px; height: 50px; background: url(../img/sprite.png) no-repeat -136px -325px; display: inline-block;\r\n}\r\n.phone-icon-x2-black{\r\n width: 35px; height: 35px; background: url(../img/sprite.png) no-repeat -186px -325px; display: inline-block;\r\n}\r\n.phone-icon-x1-black{\r\n width: 27px; height: 27px; background: url(../img/sprite.png) no-repeat -221px -325px; display: inline-block;\r\n}\r\n\r\n\r\n/** Footer Form icons **/\r\n.form-black{ width: 50px; height: 50px; background:url(../img/sprite.png) no-repeat 0px -70px; display: inline-block;\r\n\r\n}\r\n\r\n.form-map{\r\n\r\n width: 50px; height: 50px; background:url(../img/sprite.png) no-repeat -50px -70px; display: inline-block;\r\n\r\n}\r\n\r\n/** Arrow İcons **/\r\n\r\n.arrow-left-black-2x{background:url(../img/sprite.png) no-repeat -42px -120px; width: 42px; height: 28px; display: inline-block;\r\n\r\n}\r\n.arrow-left-orange-2x{background:url(../img/sprite.png) no-repeat -84px -120px; width: 42px; height: 28px; display: inline-block;\r\n\r\n}\r\n.arrow-left-white-2x{background:url(../img/sprite.png)no-repeat 0 -120px ; width: 42px; height: 28px; display: inline-block;\r\n\r\n}\r\n\r\n.arrow-left-black-1x{background:url(../img/sprite.png) no-repeat -34px -148px; width: 34px; height: 23px; display: inline-block;\r\n\r\n}\r\n.arrow-left-orange-1x{background:url(../img/sprite.png) no-repeat -68px -148px; width: 34px; height: 23px; display: inline-block;\r\n\r\n}\r\n.arrow-left-white-1x{background:url(../img/sprite.png)no-repeat 0 -148px ; width: 34px; height: 23px; display: inline-block;\r\n\r\n}\r\n\r\n\r\n.arrow-right-black-2x{background:url(../img/sprite.png) no-repeat -178px -120px; width: 42px; height: 28px; display: inline-block;\r\n\r\n}\r\n.arrow-right-orange-2x{background:url(../img/sprite.png) no-repeat -136px -120px; width: 42px; height: 28px; display: inline-block;\r\n\r\n}\r\n.arrow-right-white-2x{background:url(../img/sprite.png)no-repeat -221px -120px ; width: 42px; height: 28px; display: inline-block;\r\n\r\n}\r\n\r\n\r\n.arrow-right-black-1x{background:url(../img/sprite.png) no-repeat -191px -148px; width: 34px; height: 23px; display: inline-block;\r\n\r\n}\r\n.arrow-right-orange-1x{background:url(../img/sprite.png) no-repeat -156px -148px; width: 34px; height: 23px; display: inline-block;\r\n\r\n}\r\n.arrow-right-white-1x{background:url(../img/sprite.png)no-repeat -227px -148px ; width: 34px; height: 23px; display: inline-block;\r\n\r\n}\r\n\r\n/** Footer-contact **/\r\n\r\n.footer-map{\r\n background:url(../img/sprite.png)no-repeat -0px 0px ; width: 71px; height: 71px; display: inline-block;\r\n}\r\n\r\n.footer-mail{\r\n background:url(../img/sprite.png)no-repeat -71px 0px ; width: 71px; height: 71px; display: inline-block;\r\n}\r\n\r\n\r\n\r\n\r\n/** Footer ID Main Footer **/\r\n\r\n#main-footer{\r\n background: #fff;\r\n position: relative; z-index:91;\r\n\r\n ul{\r\n list-style: none;\r\n }\r\n\r\n .footer-media{\r\n background: $secondary-color; width: 100%; color: #fff; padding: 0;\r\n\r\n\r\n a{\r\n color: #fff;\r\n }\r\n \r\n }\r\n\r\n .footer-phone{\r\n height: 128px; background-color: #4c4c4c; position: relative; width: 400px;padding: 20px; z-index: 5; float: left;\r\n\r\n &::before{\r\n width: 80px; background-color: inherit; position: absolute; z-index: -1; @include skewX(-25deg); right: -40px; height: 100%; content: \"\"; top: 0;\r\n }\r\n\r\n .icon-wrap{\r\n position: relative; float: left; display: inline-block; height: 80px;\r\n\r\n i.phone-icon-big-white{ @extend .phone-icon-x5-white;\r\n\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n \r\n }\r\n\r\n }\r\n\r\n .text-wrap{\r\n float: left;display: inline-block; width: calc(100% - 80px);color: #fff;padding: 10px 0; padding-left: 15px;\r\n\r\n @media #{$tablet-break-point}{\r\n width: auto; float: none; position: relative; bottom: 20px;\r\n }\r\n \r\n\r\n .white-title, .phone-number{\r\n display: block; line-height: 1.3em; font-size: 22px; font-weight: 500; letter-spacing: -1px; \r\n\r\n @media #{$notebook-break-point}{\r\n\r\n font-size: 16px;\r\n \r\n } \r\n \r\n\r\n }\r\n\r\n .phone-number{ font-size: 28px; font-weight: 600;\r\n\r\n @media #{$notebook-break-point}{\r\n\r\n font-size: 16px;\r\n \r\n }\r\n\r\n .phone-number-small{ \r\n font-size: 18px; font-weight: 400;\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n width: 280px; height: 100px; padding: 10px 15px;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n width: 100%; height: 100px; text-align: center; float: none; padding: 10px 0;\r\n\r\n &::before{\r\n display: none;\r\n \r\n }\r\n\r\n .icon-wrap{\r\n display: inline-block; float: none;\r\n }\r\n }\r\n\r\n \r\n }\r\n\r\n .footer-social{\r\n width: calc(100% - 400px); float: left; height: 128px; background-color: $secondary-color;position: relative; padding-right: 40px;\r\n\r\n &:hover::before{\r\n animation: fadeIn 1s; \r\n }\r\n \r\n &::before{\r\n content: \"#SOSYALMEDYA\"; position: absolute; right: 5px; top: 2px; @include rotate(-90deg) ; @include transform-origin(100% 100%); color: #fff;\r\n font-size: 12px; letter-spacing: -1PX; @include transition(0.3s);\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n width: calc(100% - 280px); height: 100px;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n\r\n width: 100%; float: none; background-color: $primary-color; height: auto; margin: 0; padding: 0;\r\n\r\n &::before{\r\n top: 10px;\r\n }\r\n\r\n }\r\n\r\n\r\n .social-menu{\r\n float: right; padding: 35px 15px; \r\n\r\n @media #{$notebook-break-point}{\r\n\r\n padding: 20px; margin: 0;\r\n\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n float: none; width: 100%; text-align: center;\r\n }\r\n li{\r\n float: left; \r\n\r\n @media #{$tablet-break-point}{\r\n display: inline; float: none;\r\n }\r\n \r\n a{\r\n display: inline-block; \r\n\r\n i{\r\n display: inline-block; width: 56px; height: 56px; text-align: center; line-height: 56px; border: 2px solid #fff; color: #fff; \r\n margin: 0 5px; font-size: 20px; @include border-radius(100%);\r\n\r\n\r\n } \r\n }\r\n }\r\n\r\n .text1{\r\n color: #fff; font-size: 18px; font-weight: 500; line-height:2em; position: relative; float: left; letter-spacing: -0.6px; right: 70px;\r\n top: 10px; text-transform: uppercase;\r\n\r\n @media #{$tablet-break-point}{\r\n position: relative;\r\n width: 100%;\r\n height: 40px;\r\n float: none;\r\n top: 0;\r\n display: inline-block;\r\n text-align: center;\r\n left: 0;\r\n right: 0;\r\n margin-bottom: 20px;\r\n }\r\n\r\n &::before{\r\n width: 50px; height: 2px; background-color: #fff; content: \"\"; position: absolute; left: 108%; top: 50%; margin-top: -1px;\r\n\r\n @media #{$tablet-break-point}{\r\n width: 50px;\r\n height: 2px;\r\n background-color: #fff;\r\n content: \"\";\r\n position: absolute;\r\n left: 50%;\r\n top: 80%;\r\n margin-top: -1px;\r\n margin-left: -25px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n \r\n\r\n \r\n \r\n }\r\n\r\n .inner-footer{\r\n width: 100%; min-height: 350px; position: relative; overflow: hidden; padding:0 20px;\r\n\r\n @media #{$tablet-break-point}{\r\n padding: 0; text-align: center;\r\n }\r\n\r\n .footer-contact{\r\n position: relative; min-height: 400px;z-index: 10; background-color: #fff; padding: 30px 0; text-align: center;\r\n\r\n \r\n &::before{\r\n width:120%; @include skewX(-30deg); content: \"\";\r\n background: url(../img/body-pattern1.png) repeat #fff; height: 100%; right: 0; position: absolute; top: 0; z-index: -1; border-left: 1px solid #e2e2e2;\r\n\r\n @media #{$tablet-break-point}{\r\n display:none; \r\n }\r\n }\r\n\r\n .contact-links{\r\n text-align: center; margin: 0 auto; display: inline-block; max-width: 260px;\r\n\r\n li{\r\n display: inline; margin: 20px auto; width: 100%;\r\n\r\n a{\r\n display: inline-block; color: $secondary-color;\r\n\r\n span, i{\r\n display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.7px; line-height: 1.5em; margin: 0 auto;\r\n }\r\n i{\r\n margin: 10px auto;\r\n }\r\n .title2{\r\n font-size: 24px; font-weight: 600;\r\n }\r\n\r\n .footer-pin {\r\n @extend .footer-map;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .footer-links{\r\n\r\n .footer-menu{\r\n width: 100%; padding: 10px 0; margin: 20px 0;\r\n\r\n \r\n \r\n li{\r\n float: left;\r\n \r\n \r\n a{\r\n display: inline-block; line-height: 2em; font-weight: 600; padding: 3px 2em; border-left: 1px solid #e2e2e2; color: $secondary-color;\r\n }\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n text-align: center; margin: 10px 0; margin-bottom: 0;\r\n\r\n li{\r\n float: none; display: inline;\r\n\r\n a{\r\n border-left: 0; padding: 0 10px; font-size: 14px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .footer-form-links{\r\n display:block; width: 100%; margin: 25px 0;\r\n\r\n @media #{$tablet-break-point}{\r\n margin: 10px 0; margin-bottom: 20px;\r\n \r\n \r\n }\r\n li{\r\n float: left; width: 35%; height: 80px; display: table-cell; vertical-align: middle; border: 1px solid #e2e2e2; margin-right: 15px;\r\n\r\n a{\r\n height: 80px; padding: 10px; margin-right: 15px; display: block; color: $secondary-color; font-weight: 600; font-size: 16px; letter-spacing: -1px; display: table-cell; vertical-align: middle; opacity: 0.6; padding-left: 70px; position: relative;\r\n\r\n \r\n span{display: table-cell; vertical-align: middle; \r\n\r\n }\r\n\r\n &.bilgi-form{ \r\n\r\n &::before{ @extend .form-black; position: absolute; left: 10px;top: 15px; content: \"\"; }\r\n\r\n \r\n \r\n \r\n }\r\n\r\n &.form-arsa{ \r\n\r\n &::before{ @extend .form-map; position: absolute; left: 10px;top: 15px; content: \"\"; }\r\n\r\n \r\n \r\n \r\n }\r\n\r\n \r\n }\r\n\r\n a.bilgi-form:before{\r\n @extend .form-black; position: absolute; left: 10px; top: 15px; \r\n }\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n\r\n width: 100%;\r\n\r\n li{\r\n width: 45%;\r\n\r\n @media #{$tablet-break-point}{\r\n width: 49%; margin: 0.5%;\r\n }\r\n\r\n @media #{$mobil-break-point}{\r\n width: 100%;\r\n }\r\n }\r\n\r\n }\r\n }\r\n \r\n .copy{\r\n font-size: 12px; color: $secondary-color; opacity: 0.4; letter-spacing: -0.5px; line-height: 1.8em; margin: 20px 0; display: block;\r\n position: relative; padding-top: 20px;\r\n\r\n &:before{\r\n width: 200%; height: 1px; z-index: -1; content: \"\"; position: absolute; left: -50px; top: 0; background-color: #e2e2e2;\r\n }\r\n }\r\n\r\n .footer-logo{\r\n display: block; float: left; width: 35%; padding: 25px 0;\r\n\r\n svg{\r\n width:200px;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n width: 49%; margin: 0.5%;\r\n }\r\n\r\n @media #{$mobil-break-point}{\r\n\r\n width: 100%; margin:1% 0;\r\n\r\n }\r\n }\r\n\r\n .e-bulten{\r\n display: block; float: left; margin-left: 20px; width: 35%; \r\n @media #{$tablet-break-point}{\r\n width: 49%; margin: 0.5%;\r\n }\r\n @media #{$mobil-break-point}{\r\n\r\n width: 100%; margin:1% 0;\r\n\r\n }\r\n\r\n label{\r\n display: block; width: 100%; font-size: 14px; font-weight: 400; font-weight: 500; letter-spacing: -1px; \r\n }\r\n\r\n .submit-wrap{\r\n position: relative; cursor: pointer; display: block;\r\n\r\n \r\n\r\n button{ @extend .arrow-right-black-1x; position: absolute; right: 20px;\r\n bottom: 11px; background-color: transparent; border: 0; outline: 0; box-shadow: none;\r\n @include transition(0.3s); \r\n\r\n @media #{$tablet-break-point}{\r\n bottom:20px;\r\n }\r\n\r\n }\r\n\r\n &:hover button{ animation: hover-arrow-right 0.5s ; animation-iteration-count: 3;\r\n\r\n }\r\n\r\n \r\n input{\r\n height: 40px;\r\n border: 0;\r\n background-color: #e8ddd6;\r\n padding: 0 10px;\r\n width: 100%;\r\n @include transition (0.5s);\r\n box-shadow: none;\r\n border: 1px solid transparent;\r\n cursor: pointer;\r\n margin-bottom: 5px;\r\n\r\n @media #{$tablet-break-point}{\r\n height:60px;\r\n }\r\n \r\n &:focus{\r\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.18) inset;\r\n border: 0;\r\n outline: 0;\r\n border: 1px solid #b9a496;\r\n padding-left: 15px;\r\n \r\n }\r\n \r\n }\r\n }\r\n\r\n \r\n }\r\n\r\n }\r\n\r\n\r\n\r\n \r\n}\r\n\r\n\r\n@keyframes hover-arrow-right {\r\n 0% {\r\n @include translate3d(0, 0, 0);\r\n }\r\n 50% {\r\n @include translate3d(-20px, 0, 0);\r\n }\r\n 100%{\r\n @include translate3d(0, 0, 0);\r\n }\r\n}\r\n\r\n\r\n@keyframes arrow-animation4 {\r\n 0% {\r\n @include translate3d(0px, -600px, 0);\r\n }\r\n 30% {\r\n @include translate3d(0, 100px, 0);\r\n }\r\n \r\n\r\n \r\n 100%{\r\n @include translate3d(0, 0, 0);\r\n }\r\n}\r\n\r\n\r\n@keyframes arrow-animation1 {\r\n 0% {\r\n top:0;\r\n }\r\n 50% {\r\n top:-10px;\r\n }\r\n 100%{\r\n top:0;\r\n }\r\n}\r\n\r\n\r\n@keyframes arrow-animation2 {\r\n 0% {\r\n left:0;\r\n }\r\n 50% {\r\n left:-10px;\r\n }\r\n 100%{\r\n left:0;\r\n }\r\n}\r\n\r\n@keyframes arrow-animation3 {\r\n 0% {\r\n right:0;\r\n }\r\n 50% {\r\n right:-10px;\r\n }\r\n 100%{\r\n right:0;\r\n }\r\n}\r\n\r\n@keyframes arrow-animation5 {\r\n 0% {\r\n left:0;\r\n }\r\n 50% {\r\n left:10px;\r\n }\r\n 100%{\r\n left:0;\r\n }\r\n}\r\n\r\n\r\n@keyframes height-animation {\r\n 0% {\r\n height: 0;\r\n }\r\n \r\n 100%{\r\n height: 100vh;\r\n }\r\n}\r\n\r\n\r\n/** Home About **/\r\n\r\n.home-about{\r\n padding: 0;margin: 100px 0; margin-top:0;\r\n\r\n @media #{$notebook-break-point}{\r\n\r\n margin-bottom: 0;\r\n \r\n\r\n }\r\n}\r\n\r\n.about-wrap{\r\n background: url(../img/body-pattern1.png) repeat $primary-color; min-height: 600px; padding: 50px; position: relative; z-index: 10;\r\n\r\n &:before{\r\n position: absolute; z-index: -1; width: 1000px; height: 1000px; background: url(../img/body-pattern1.png) repeat $primary-color; content: \"\"; right: 0; bottom: 0; @include rotate(-45deg); @include transform-origin(100% 100%);\r\n }\r\n\r\n @media #{$mq-large}{\r\n\r\n &::before{\r\n\r\n width: 1300px;\r\n\r\n }\r\n \r\n }\r\n\r\n &:after{\r\n position: absolute; z-index: -1; width: 1000px; height: 300px; background: url(../img/body-pattern1.png) repeat $primary-color; content: \"\"; right: 0; top: 0; @include rotate(7deg); @include transform-origin(100% 100%);\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n\r\n min-height: 0; \r\n\r\n @media #{$tablet-break-point}{\r\n &::after{\r\n\r\n right: 40px; top: -2px;\r\n \r\n }\r\n\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n padding: 0; padding-bottom: 100px;\r\n }\r\n\r\n \r\n\r\n }\r\n\r\n \r\n\r\n\r\n .slogan{\r\n padding:120px 60px; position: relative; width: 80%; margin: 0 auto;\r\n\r\n @media #{$notebook-break-point}{\r\n padding: 80px 20px;\r\n width: 90%;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n padding: 80px 20px;\r\n width: 80%;\r\n \r\n }\r\n @media #{$mobil-break-point}{\r\n\r\n width: 80%; margin-left: 20%; \r\n\r\n }\r\n\r\n .slogan-text{color: #fff; font-size: 40px; font-weight: normal; font-stretch: condensed; font-weight: 600; line-height: 1.3em; \r\n\r\n @media #{$mq-large}{\r\n\r\n font-size:3.5vw;\r\n }\r\n\r\n .color{\r\n color: $secondary-color;\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n font-size: 36px;\r\n }\r\n\r\n }\r\n\r\n .line1::before, .line2::before, .line3::before, .line4::before{\r\n width:5px; background-color: rgb(240, 213, 187); height: 100%; position: absolute; top: 0; left: 0; content: \"\"; \r\n\r\n @media #{$notebook-break-point}{\r\n\r\n height: 300px; width: 3px;\r\n\r\n }\r\n\r\n }\r\n\r\n .line2::before{\r\n @media #{$notebook-break-point}{\r\n\r\n height: 300px;\r\n\r\n }\r\n\r\n @media #{$mobil-break-point}{\r\n\r\n height: 200px; top: 100px;\r\n\r\n }\r\n }\r\n\r\n .line1, .line2, .line3, .line4{\r\n animation-name: line-animation1 ;\r\n animation-duration:20s; \r\n animation-timing-function: ease-out; \r\n animation-delay: 0s;\r\n animation-direction: alternate;\r\n animation-iteration-count: infinite;\r\n animation-fill-mode: none;\r\n animation-play-state: running; \r\n \r\n }\r\n\r\n .line2::before{\r\n @include rotate(90deg); @include transform-origin(0 100%);\r\n \r\n }\r\n\r\n .line3::before{\r\n @include rotate(-90deg); @include transform-origin(100% 0); height: 100px;\r\n \r\n }\r\n .line4::before{\r\n @include rotate(-45deg); @include transform-origin(100% 0); height: 100px ; left: 100px;\r\n \r\n }\r\n }\r\n\r\n \r\n\r\n .radial-link{\r\n color: #fff; position: relative; margin: 20px auto; text-align: center; display: block; padding-top: 80px; font-size: 18px; font-weight: 500; letter-spacing: -1px;\r\n\r\n span{\r\n position: relative;\r\n\r\n &::before{\r\n width: 25px; background-color: #fff; height: 1px; content:\"\"; position: absolute; left: -30px; top: 50%;\r\n }\r\n }\r\n\r\n &::before{\r\n background-color: #fff; width: 1px; height: 180px; bottom:40px; left: 50%; content: \"\"; position: absolute;\r\n }\r\n\r\n &::after{\r\n background-color: #fff; width: 10px; height:10px; bottom:220px; left: 50%; content: \"\"; position: absolute; @include border-radius(100%);\r\n margin-left: -4px; margin-top: 5px;\r\n box-shadow: 0 0 0 0 rgb(255, 246, 170);\r\n border-radius: 50%;\r\n background-color: #fff;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n cursor: pointer;\r\n -webkit-animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);\r\n -moz-animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);\r\n -ms-animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);\r\n animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);\r\n\r\n\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n \r\n &::before{ height: 140px;\r\n }\r\n\r\n &::after{\r\n bottom: 180px;\r\n\r\n }\r\n }\r\n }\r\n\r\n .rotate-link1 {\r\n -moz-transform-origin: 0 50%;\r\n -moz-transform: rotate(-90deg) translate(-50%, 50%);\r\n -webkit-transform-origin: 0 50%;\r\n -webkit-transform: rotate(-90deg) translate(-50%, 50%);\r\n -o-transform-origin: 0 50%;\r\n -o-transform: rotate(-90deg) translate(-50%, 50%);\r\n -ms-transform-origin: 0 50%;\r\n -ms-transform: rotate(-90deg) translate(-50%, 50%);\r\n transform-origin: 0 0%;\r\n transform: rotate(-90deg) translate(-50%, 100%);\r\n position: absolute;\r\n bottom: 0;\r\n height: 2em;\r\n margin: auto;\r\n font-weight: bold;\r\n font-size: 1em;\r\n line-height: 2em;\r\n color: $secondary-color;\r\n left: 20px;\r\n -webkit-transition: all .3s ease-in;\r\n -moz-transition: all .3s ease-in;\r\n -o-transition: all .3s ease-in;\r\n transition: all .3s ease-in;\r\n height: 60px;\r\n left: -10px;\r\n top: -40px;\r\n -webkit-transition: all .3s ease-in;\r\n -moz-transition: all .3s ease-in;\r\n -o-transition: all .3s ease-in;\r\n transition: all .3s ease-in;\r\n width: auto;\r\n\r\n @media #{$notebook-break-point}{\r\n left: -40px;\r\n }\r\n }\r\n\r\n\r\n}\r\n\r\n.baret{\r\n position: absolute; bottom: -120px; right: 0%; z-index: 200000;\r\n animation: baret 5s ; animation-iteration-count: infinite; @include transition(2s);\r\n @media #{$notebook-break-point}{\r\n bottom: -180px;\r\n right: 5%;\r\n\r\n width: 120px;\r\n\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n bottom: -50px;\r\n right: 8%;\r\n\r\n width: 150px;\r\n}\r\n}\r\n\r\n.shadow{\r\n position: absolute; bottom: -140px; right: -20px; \r\n animation: shadow 5s ; animation-iteration-count: infinite; @include transition(2s); width: 280px;\r\n\r\n @media #{$notebook-break-point}{\r\n bottom: -190px;\r\n right: 8%;\r\n\r\n width: 150px;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n bottom: -60px;\r\n right: 10%;\r\n\r\n width: 180px;\r\n }\r\n}\r\n\r\n@keyframes shadow {\r\n 0% {\r\n opacity: 0.8;\r\n @include translate3d(30px,5px,0);\r\n \r\n }\r\n 30% {\r\n opacity: 0.5;\r\n @include translate3d(30px,10px,0);\r\n }\r\n 70% {\r\n opacity: 1;\r\n @include translate3d(30px,0px,0);\r\n \r\n }\r\n \r\n 100% {\r\n opacity: 0.9;\r\n @include translate3d(30px,5px,0);\r\n \r\n \r\n }\r\n }\r\n\r\n \r\n@keyframes baret {\r\n 0% {\r\n @include translate3d(10px,-10px,0);\r\n \r\n }\r\n 30% {\r\n @include translate3d(10px,-15px,0);\r\n }\r\n 70% {\r\n @include translate3d(10px,5px,0);\r\n \r\n }\r\n \r\n 100% {\r\n @include translate3d(10px,-10px,0);\r\n \r\n \r\n }\r\n }\r\n\r\n.video-wrap{\r\n background: url(../img/pattern4.png) repeat $secondary-color; min-height: 640px; padding: 0; position: relative; z-index: 12;\r\n @include skewY(-10deg); @include transform-origin(0% 0%); \r\n\r\n @media #{$notebook-break-point}{\r\n min-height: 590px;\r\n\r\n }\r\n\r\n .video-inner{\r\n @include skewY(10deg); position: relative; color: #fff; \r\n padding: 140px 0px; width: 80%; margin: 0 auto;\r\n padding-bottom: 40px;\r\n\r\n @media #{$notebook-break-point}{\r\n width: 95%;\r\n }\r\n\r\n .rotate-link1 {\r\n -moz-transform-origin: 0 50%;\r\n -moz-transform: rotate(-90deg) translate(-50%, 50%);\r\n -webkit-transform-origin: 0 50%;\r\n -webkit-transform: rotate(-90deg) translate(-50%, 50%);\r\n -o-transform-origin: 0 50%;\r\n -o-transform: rotate(-90deg) translate(-50%, 50%);\r\n -ms-transform-origin: 0 50%;\r\n -ms-transform: rotate(-90deg) translate(-50%, 50%);\r\n transform-origin: 100% 0%;\r\n transform: rotate(-90deg) translate(100%, 0);\r\n position: absolute;\r\n bottom: 0;\r\n margin: auto;\r\n font-weight: bold;\r\n font-size: 1em;\r\n line-height: 2em;\r\n width: auto;\r\n color: #fff;\r\n -moz-transition: all .3s ease-in;\r\n -o-transition: all .3s ease-in;\r\n height: 40px;\r\n top: 360px;\r\n -moz-transition: all .3s ease-in;\r\n -o-transition: all .3s ease-in;\r\n right: 0;\r\n z-index: 500;\r\n\r\n @media #{$notebook-break-point}{\r\n right: 50px;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n display: none;\r\n }\r\n }\r\n\r\n \r\n \r\n }\r\n\r\n .youtube-link { position: relative; z-index: 99; display: block; @include transition(0.4s); overflow: hidden;\r\n \r\n\r\n &:hover{ box-shadow: 0 0 40px 5px rgba(0,0,0,0.5); \r\n\r\n img{@include scale(1.1);\r\n opacity: 0.2;\r\n }\r\n \r\n }\r\n\r\n & img{\r\n width: 100%; height: auto; opacity: 0.35;@include transition(0.4s);\r\n }\r\n\r\n &:hover .text i{\r\n animation : arrow-animation2 0.5s;\r\n animation-iteration-count: 3;\r\n }\r\n .text{\r\n position: absolute;\r\n display: inline-block;\r\n left: calc(50% - 150px);\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n color: #fff;\r\n font-size: 15px;\r\n\r\n @media #{$notebook-break-point}{\r\n left: calc(50% - 100px); font-size: 14px;\r\n\r\n }\r\n\r\n i{\r\n margin-top: 10px; position: relative;\r\n }\r\n }\r\n\r\n\r\n \r\n &:hover .home-video-icon{\r\n width: 180px;\r\n @media #{$notebook-break-point}{\r\n width: 120px;\r\n \r\n }\r\n }\r\n\r\n .home-video-icon{\r\n width: 200px; position: absolute; margin: 0 auto; top: 50%; left: 50%;transform: translate(-50%, -50%) !important;\r\n @include transition(0.4s); \r\n\r\n @media #{$notebook-break-point}{\r\n width: 100px;\r\n \r\n }\r\n\r\n\r\n\r\n\r\n &:hover .tri2{\r\n\r\n fill:rgb(255, 115, 0);\r\n stroke-dashoffset: 500;\r\n stroke-dasharray:200;\r\n stroke:#fff;\r\n opacity:1;\r\n \r\n \r\n }\r\n .tri2{\r\n stroke: rgb(255, 115, 0);\r\n fill: rgba(255, 255, 255, 0.01);\r\n stroke-width: 6px;\r\n stroke-dashoffset: 0;\r\n stroke-dasharray:2000;\r\n stroke-linecap: butt;\r\n -webkit-transition: all 0.5s ease-out;\r\n -moz-transition: all 0.5s ease-out;\r\n -ms-transition: all 0.5s ease-out;\r\n -o-transition: all 0.5s ease-out;\r\n transition: all 0.5s ease-out;\r\n opacity: 0.8;\r\n \r\n\r\n }\r\n\r\n &:hover .tri3{\r\n stroke-dasharray: 500;\r\n stroke-dashoffset: 200;\r\n \r\n stroke: #fff;\r\n opacity:1;\r\n \r\n }\r\n .tri3{\r\n\r\n \r\n stroke-dashoffset: 0;\r\n stroke-dasharray:200;\r\n -webkit-transition: all 0.5s ease-out;\r\n -moz-transition: all 0.5s ease-out;\r\n -ms-transition: all 0.5s ease-out;\r\n -o-transition: all 0.5s ease-out;\r\n transition: all 0.5s ease-out;\r\n stroke-width: 8;\r\n\r\n }\r\n \r\n \r\n }\r\n }\r\n}\r\n\r\n\r\n.grtyoutube-dark-theme{\r\n\tbackground:url(../img/pattern2.png) rgba(0,0,0, 0.97);\r\n}\r\n.grtyoutube-dark-theme .grtyoutube-popup-content {\r\n \r\n \r\n animation: arrow-animation4 2s;\r\n animation-iteration-count: 1;\r\n border: 5px solid rgba(256, 256, 256, 0.17);;\r\n}\r\n\r\n\r\n\r\n\r\n.grtyoutube-dark-theme .grtyoutube-popup-close {\r\n \r\n width: 40px;\r\n height: 40px;\r\n top: -42px;\r\n right: -2px;\r\n position: absolute;\r\n cursor: pointer;\r\n\r\n &::before{ position: absolute; content: \"\"; width: 4px; height: 30px; background-color: #fff; left:18px; right: 0; @include rotate (45deg);\r\n @include transform-origin(50% 50%);\r\n\t\t\r\n }\r\n \r\n &::after{ position: absolute; content: \"\"; width: 4px; height: 30px; background-color: #fff; left: 18px; right: 0; @include rotate (-45deg);\r\n @include transform-origin(50% 50%);\r\n\t\t\r\n\t}\r\n}\r\n\r\n\r\n\r\n\r\n\r\n @-webkit-keyframes pulse {\r\n to {\r\n box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);\r\n }\r\n }\r\n \r\n @-moz-keyframes pulse {\r\n to {\r\n box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);\r\n }\r\n }\r\n \r\n @-ms-keyframes pulse {\r\n /* line 60, C:/Users/PC/Desktop/anahtar-web/scss/default.scss */\r\n to {\r\n box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);\r\n }\r\n }\r\n \r\n @keyframes pulse {\r\n to {\r\n box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);\r\n }\r\n }\r\n\r\n .home-news{ margin-bottom: 30px;\r\n\r\n @media #{$mobil-break-point}{\r\n\r\n & .box-1{\r\n display: none;\r\n }\r\n & .box-11{\r\n width: 100%;\r\n }\r\n }\r\n \r\n\r\n &::before{\r\n content: \"HABER&MEDYA\";\r\n }\r\n\r\n .home-title1{\r\n color: $secondary-color; border-color: #fff; margin-bottom: 40px;\r\n\r\n span{\r\n color: #fff;\r\n\r\n @media #{$tablet-break-point}{\r\n color: $primary-color;\r\n }\r\n\r\n &::before{\r\n background-color: #fff;\r\n }\r\n }\r\n }\r\n\r\n /* width */\r\n::-webkit-scrollbar {\r\n width: 5px;\r\n height: 5px;\r\n}\r\n\r\n/* Track */\r\n::-webkit-scrollbar-track {\r\n background: #e2e2e2; height: 3px;\r\n position: relative;\r\n width: 5px;\r\n @include border-radius(30px);\r\n\r\n\r\n}\r\n \r\n/* Handle */\r\n::-webkit-scrollbar-thumb {\r\n background: $primary-color; \r\n width: 5px;\r\n @include border-radius(30px);\r\n height: 3px;\r\n\r\n}\r\n\r\n/* Handle on hover */\r\n::-webkit-scrollbar-thumb:hover {\r\n background: #555; \r\n}\r\n\r\n }\r\n\r\n\r\n .home-news-scroll { width:100%; white-space: nowrap; height: auto; padding: 50px 0;\r\n position: relative;z-index: 90; overflow: auto; overflow-y: hidden; padding-top:0;\r\n\r\n \r\n\r\n .home-news-wrap{\r\n width: 500px; margin:10px; height: 350px; background-color: $secondary-color; display: inline-block; overflow: hidden; position: relative; white-space: normal; position: relative; \r\n\r\n img{\r\n @include scale(1); @include transition(0.5s);\r\n }\r\n\r\n &:hover img{\r\n @include scale(1.2); opacity: 0.7;\r\n }\r\n a{\r\n color: #fff;\r\n }\r\n\r\n .text-wrap{\r\n width: 70%; height: 100%; position: absolute; top: 0; right: 0; background-color: rgba(0, 0, 0, 0.7); padding: 50px 20px;\r\n text-transform:uppercase;\r\n\r\n .date{\r\n position: absolute; top: 10px; left: 10px; color: #fff; display: inline-block; line-height: 1.3em; border-bottom: 1px solid $primary-color;\r\n padding: 5px 10px;\r\n }\r\n\r\n .title3{\r\n font-weight: 600; @include translate3d(0, 30px, 0); font-size:24px;\r\n\r\n @media #{$mobil-break-point\r\n \r\n \r\n }{\r\n transform: translate3d(0, 0px, 0);\r\n font-size: 18px;\r\n }\r\n }\r\n .summary3{\r\n\r\n @media #{$mq-large}{\r\n\r\n font-size: 0.8vw;\r\n }\r\n font-weight: 400; @include translate3d(0, 50px, 0);\r\n\r\n @media #{$mobil-break-point}{\r\n transform: translate3d(0, 0px, 0);\r\n font-size: 13px;\r\n height: 40px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: pre-line;\r\n line-height: 1em;\r\n }\r\n }\r\n\r\n .detail{\r\n position: absolute; bottom: 10px; right: 10px; display: inline-block; padding: 5px 10px; font-size: 12px; font-weight: 600; \r\n\r\n &::before{\r\n width: 200px; right: 100%; bottom: 10px; background-color: #fff; height: 1px; content: \"\"; position: absolute;\r\n }\r\n }\r\n\r\n \r\n }\r\n\r\n @media #{$mobil-break-point}{\r\n width: 95%; margin: 0 5%; height: auto; min-height: 0;\r\n }\r\n }\r\n }\r\n \r\n\r\n\r\n\r\n /** Proje Kategori Sayfası **/\r\n\r\n\r\n #project{\r\n text-align: center;\r\n }\r\n\r\n.proje-wrapper{\r\n padding: 0; margin-bottom: 16px; display: inline-block; float: none; margin:5px; width: 280px;\r\n}\r\n\r\n\r\n .categories{ \r\n list-style: none; width: 100%; float: none; text-align: center; margin-top: 120px; margin-bottom: 30px;\r\n\r\n li{\r\n display: inline;\r\n\r\n a{\r\n float: none; display: inline-block; padding: 15px 15px; line-height: 2em;border: 1px solid $secondary-color; font-weight: 600; color: $secondary-color; margin: 0 3px; position: relative; @include transition(0.3s); z-index: 2; transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);\r\n transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); @include transition(0.23s); letter-spacing: -0.6px;\r\n &:hover{\r\n color:#fff; \r\n }\r\n\r\n &:before{\r\n width: 100%; height: 0; background-color: $secondary-color; content: \"\"; bottom:0; left: 0; position: absolute;\r\n z-index: -1;\r\n transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); @include transition(0.23s);\r\n }\r\n\r\n &:hover:before{\r\n height: 100%; bottom:auto; top:0;\r\n }\r\n }\r\n\r\n \r\n }\r\n @media #{$notebook-break-point}{\r\n\r\n margin-top: 0; width: 100%; display:none;\r\n\r\n li{\r\n width: 100%; display:block;\r\n\r\n a{\r\n width: 100%; display: block; padding: 6px 15px; line-height: 2em; background-color: #f3f1ed; border: 0; \r\n border-bottom: 1px solid rgb(236, 223, 204);\r\n }\r\n }\r\n \r\n }\r\n\r\n @media #{$mq-large}{\r\n\r\n font-size: 1.0vw; margin-top: 7em;\r\n }\r\n}\r\n\r\n\r\n .project-list{\r\n margin:30px auto; width: 100%; text-align: center; display: block;\r\n\r\n .title2{\r\n font-size: 24px; letter-spacing: -1px; display: block; margin:30px 0 40px 0; display: block;\r\n\r\n @media #{$mq-large}{\r\n\r\n font-size: 1.7vw;\r\n }\r\n\r\n span{\r\n font-weight: bold;\r\n }\r\n }\r\n\r\n .project-wrap{\r\n overflow: hidden; \r\n\r\n &::before{\r\n display: none;\r\n }\r\n\r\n .project-name{\r\n font-weight: 500; font-size: 20px;\r\n\r\n @media #{$mq-large}{\r\n\r\n font-size: 1.3vw;\r\n }\r\n\r\n \r\n\r\n span{\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n .project-summary{\r\n\r\n @media #{$mq-large}{\r\n\r\n font-size: 1.0vw;\r\n }\r\n\r\n\r\n }\r\n \r\n .project-text{\r\n @include translate3d(0, 50px, 0); text-align: left; @include transition(0.4s); height: 135px; width: 100%; padding: 0 15px;\r\n }\r\n .project-img img{\r\n opacity:0.6; @include transition(0.3s);\r\n }\r\n &:hover{\r\n .project-text{\r\n @include translate3d(0, -40px, 0);\r\n }\r\n\r\n .project-img img{\r\n @include scale(1.2); opacity: 0.5;\r\n }\r\n }\r\n \r\n &:hover{\r\n .project-detail{\r\n opacity: 1;\r\n }\r\n \r\n }\r\n \r\n .project-detail{ display: block; opacity: 0; @include transition(0.4s); position: relative; top: 15px;\r\n\r\n &:hover i{\r\n animation : arrow-animation5 0.5s;\r\n animation-iteration-count: 3;\r\n }\r\n \r\n span{\r\n display: inline-block; color: #fff; line-height: 40px;\r\n }\r\n \r\n i{\r\n position: relative; top: 10px; left: 10px;\r\n }\r\n \r\n }\r\n }\r\n\r\n\r\n }\r\n \r\n\r\n /** Proje Detay ----\r\n **------------------\r\n -------------------------------------\r\n -------------------- -------------\r\n -------------------- ------------\r\n -----------------------------------------**/\r\n\r\n .project-main-slogan{\r\n width: auto; display: block; \r\n\r\n \r\n\r\n h4{\r\n font-size:36px; font-weight: 300; color: $secondary-color; letter-spacing: -0.5px; display: inline-block; margin-bottom: 40px;\r\n\r\n span{\r\n color: $primary-color;\r\n }\r\n }\r\n\r\n}\r\n\r\n .slogan-wrap{\r\n width: 100%; text-align: center; padding: 30px 0; margin: 50px auto;position: relative; margin-bottom: 90px;\r\n\r\n\r\n &::before{\r\n width: 300px; left: 0; right: 0; bottom: 0px; margin: 0 auto; background-color: $secondary-color; position: absolute; content: \"\"; height: 1px;\r\n }\r\n\r\n &::after{\r\n width:16px; left: 0; right: 0; bottom: -8px; margin: 0 auto; background-color: $secondary-color; position: absolute; content: \"\"; height: 16px;\r\n @include rotate(45deg);\r\n }\r\n\r\n .project-main-slogan{\r\n width: auto; display: inline-block; \r\n\r\n \r\n \r\n h2{\r\n font-size: 48px; font-weight: 600; color: $secondary-color; letter-spacing: -.3vw; display: inline-block;\r\n \r\n span{\r\n color: $primary-color;\r\n }\r\n }\r\n \r\n .sub-slogan{\r\n display: inline-block; text-align: right; font-size: 30px; float: right;\r\n }\r\n }\r\n\r\n }\r\n\r\n\r\n\r\n .container-fluid{\r\n padding: 0;\r\n\r\n }\r\n\r\n #project-detail{\r\n position: relative;\r\n }\r\n\r\n .project-banner{\r\n \r\n background-color: #1d1819 !important;\r\n position: relative;\r\n width: 100%;\r\n height: 90vh;\r\n z-index: 80;\r\n overflow: hidden;\r\n\r\n .arrow-scroll{\r\n top:70%;\r\n }\r\n\r\n img{\r\n opacity: 0.7; \r\n min-width: 100%;\r\n min-height: 100%;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n margin: auto;\r\n overflow: hidden;\r\n z-index: 8;\r\n background-size: cover;\r\n background-position: bottom center;\r\n width: 100%;\r\n width: 100%;\r\n }\r\n.color-fff{\r\n color: #fff;\r\n}\r\n .caption1{\r\n position: absolute;\r\n left: 5%;\r\n bottom: 20%;\r\n font-weight: bold;\r\n width:100%;\r\n z-index: 22;\r\n text-align: left;\r\n \r\n padding: 50px; \r\n\r\n h4{ font-size: 36px; letter-spacing: -2px; margin-bottom: 0;\r\n\r\n }\r\n\r\n h1{\r\n font-size: 90px; letter-spacing: -10px; line-height: 0.9em; margin:0;\r\n }\r\n\r\n span{\r\n font-size: 18px; letter-spacing: -1px; font-weight: 500;\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n\r\n\r\n\r\n h1{\r\n font-size: 60px; letter-spacing: -3px;\r\n }\r\n\r\n h4{\r\n font-size: 24px;\r\n }\r\n\r\n span{\r\n font-size: 15px;\r\n }\r\n\r\n \r\n }\r\n\r\n @media #{$mq-large}{\r\n\r\n h1{\r\n font-size: 7vw; \r\n }\r\n\r\n h4{\r\n font-size: 3vw;\r\n }\r\n\r\n span{\r\n font-size: 1.5vw;\r\n }\r\n\r\n\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n padding: 0 20px; bottom: 20px; left: 20px;\r\n\r\n }\r\n\r\n @media #{$mobil-break-point}{\r\n bottom: 80px; left: 0; padding:10px 20px;\r\n width:100%; top: -20px; margin-top: -20px;text-align:center;\r\n\r\n top: auto; \r\n\r\n h1{\r\n font-size: 50px; letter-spacing: -3px;\r\n }\r\n\r\n h4{\r\n font-size: 18px;\r\n }\r\n\r\n span{\r\n font-size: 13px;\r\n }\r\n\r\n \r\n }\r\n\r\n\r\n }\r\n }\r\n\r\n\r\n.project-info{\r\n\r\n margin:8vw 0; padding: 50px 0; position: relative;\r\n\r\n .col-md-6{\r\n padding: 0; position: relative;\r\n }\r\n\r\n\r\n.s-slide {\r\n\r\n img{\r\n width: 100%;\r\n }\r\n}\r\n\r\n.info-slide{\r\n\r\n position: relative;\r\n\r\n &::before{\r\n position: absolute; content:\"\" ; width: 100%; left: -140px; top: 0; background-color: #f1f1f1; height: 100%; z-index: -1;\r\n }\r\n\r\n .slider-counter {\r\n position: absolute;\r\n bottom: 0;\r\n right: 118px;\r\n z-index: 90;\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: 3px;\r\n width: 50px;\r\n background: #fff;\r\n height: 80px;\r\n text-align: center;\r\n line-height: 80px;\r\n }\r\n}\r\n\r\n.info-text{\r\n padding:0 25px !important; text-transform: uppercase;\r\n font-weight: 500;\r\n font-size: 14px;\r\n letter-spacing: -0.2px;\r\n line-height: 1.5em;\r\n color: rgb(88, 88, 88);\r\n padding: 0px 30px !important;\r\n\r\n @media #{$tablet-break-point}{\r\n margin-top:20px;\r\n }\r\n\r\n .title3{\r\n font-size: 36px; font-weight: 600; letter-spacing: -1px; margin-bottom: 10px; color:$primary-color;\r\n\r\n @media #{$mq-large}{\r\n font-size: 2.5vw;\r\n }\r\n }\r\n\r\n .slogan{\r\n font-size: 24px; font-weight: 600; margin-bottom: 10px;\r\n }\r\n \r\n\r\n .detail-scroll{\r\n \r\n max-height: 500px;\r\n overflow: auto;\r\n margin-top: 20px;\r\n padding-right: 30px;\r\n line-height: 1.9em;\r\n letter-spacing: -.3px;\r\n font-size: 14px;\r\n color: #444444;\r\n font-weight: 400;\r\n\r\n @media #{$mq-large}{\r\n font-size: 0.8vw; max-height: 700px;\r\n }\r\n\r\n p{\r\n margin: 10px 0;\r\n }\r\n }\r\n}\r\n\r\n.owl-detail-1{ padding: 60px 0 0 0;\r\n \r\n\r\n \r\n\r\n .caption-owl{\r\n \r\n height: 80px;\r\n position: relative;\r\n font-size: 14px;\r\n padding: 30px;\r\n line-height: 1.5em;\r\n width: calc(100% - 150px);\r\n z-index: 200000;\r\n bottom: 0;\r\n background: #e2e2e2;\r\n\r\n @media #{$mq-large}{\r\n font-size: 1vw;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n\r\n width:100%; top:0; bottom:auto; position:absolute;\r\n }\r\n \r\n }\r\n\r\n .owl-nav{\r\n position: absolute; right: 60px; width: 140px; background: #fff; height: 90px; bottom: 0;\r\n\r\n .owl-next{\r\n position: relative; font-size: 0; border: 0; display: block; width: 70px; height: 70px; float: right;\r\n \r\n &::before{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(-45deg); position: absolute; top: 38px; right: 20px;\r\n @include transform-origin(100% 0);\r\n }\r\n &::after{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(45deg); position: absolute; top: 38px; right: 20px;\r\n @include transform-origin(100% 0);\r\n }\r\n \r\n &:hover{\r\n animation: arrow-animation3 0.5s;\r\n animation-iteration-count: 3;\r\n }\r\n }\r\n \r\n .owl-prev{\r\n position: relative; font-size: 0; border: 0; display: block; width: 70px; height: 70px; float: left;\r\n \r\n &::before{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(45deg); position: absolute; top: 38px; left: 20px;\r\n @include transform-origin(0% 100%);\r\n }\r\n &::after{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(-45deg); position: absolute; top: 38px; left: 20px;\r\n @include transform-origin(0% 100%);\r\n }\r\n \r\n &:hover{\r\n animation: arrow-animation2 0.5s;\r\n animation-iteration-count: 3;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.owl-mask-title{\r\n font-size: 24px; font-weight: 600; letter-spacing: 4px; text-align: center; width: 60px; height: 100%; position: absolute; overflow: hidden; z-index: 20;; right: 0; top: 0; bottom:0; background: url(../img/body-pattern1.png) repeat #fff;\r\n\r\n span{\r\n \r\n display: block;\r\n text-align: center;\r\n margin: 0 auto;\r\n transform: rotate(90deg), translate(-50% 50%);\r\n transform: rotate(-90deg) translate(-100%, -50%);\r\n top: 50%;\r\n left: 15px;\r\n position: relative;\r\n color: #d8b6a1;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n position: relative;\r\n width: 100%;\r\n height: 50px;\r\n text-align: center;\r\n\r\n span{\r\n\r\n transform: none;\r\n top: 0;\r\n left: 0;\r\n\r\n }\r\n }\r\n}\r\n\r\n\r\n}\r\n\r\n\r\n::-webkit-scrollbar {\r\n width:6px; \r\n\r\n \r\n\r\n\r\n}\r\n \r\n::-webkit-scrollbar-track {\r\n -webkit-border-radius: 0;\r\n border-radius: 0;\r\n border-left: 1px solid #222;\r\n}\r\n \r\n::-webkit-scrollbar-thumb {\r\n background: rgba(170, 170, 170, 0.8); \r\n position: absolute !important;\r\n left: 10px;\r\n width: 10px !important;\r\n\r\n \r\n}\r\n::-webkit-scrollbar-thumb:window-inactive {\r\n\r\n}\r\n::-webkit-scrollbar-button {\r\n \r\n}\r\n\r\n\r\n/** Project Detail İcons **/\r\n\r\n.project-icons{\r\n text-align: center; position: relative; margin: 60px auto; width: 90%;\r\n\r\n \r\n\r\n .icon-wrap{\r\n width: 20%; display: inline-block; text-align: center; height: 240px; color: #4b4b4b;\r\n padding: 25px; float: left; min-width: 220px; @include transition(0.3s); cursor: pointer; position: relative; background: url(../img/body-pattern1.png) #fff;\r\n\r\n\r\n\r\n h4{\r\n margin: 0;\r\n }\r\n\r\n &:nth-child(2n+1){\r\n background-color:rgb(235, 218, 195); border: 1px solid #fff;\r\n\r\n \r\n\r\n i{\r\n \r\n }\r\n }\r\n\r\n @media #{$mobil-break-point}{\r\n background-color:rgb(235, 218, 195) ; border: 1px solid #fff;\r\n \r\n }\r\n\r\n .icon-name{\r\n font-size: 16px; display:block; letter-spacing: -1px; @include transition(0.3s);\r\n\r\n @media #{$mq-large}{\r\n font-size: 1vw;\r\n }\r\n }\r\n \r\n i{\r\n font-size: 80px; display:block; @include transition(0.3s); position: relative;\r\n }\r\n\r\n &:hover{\r\n\r\n background-color: $primary-color; color: #fff; overflow: hidden; @include box-shadow2(0, 0, 40px, 2px, rgba(0, 0, 0, 0.05));\r\n z-index: 5; @include scale(1.05);\r\n\r\n i{\r\n color: #fff; animation: anim1 0.3s;\r\n }\r\n\r\n .icon-name{\r\n color: #fff;\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n width: 100%; padding:0 10px;\r\n\r\n .icon-wrap{\r\n width: 33%; min-width: 0;\r\n }\r\n }\r\n\r\n @media #{$mobil-break-point}{\r\n \r\n\r\n .icon-wrap{\r\n width: 50%; min-width: 0;\r\n }\r\n }\r\n}\r\n\r\n@keyframes anim1 {\r\n 0% {\r\n @include translate3d(0, 0, 0); opacity: 1;\r\n }\r\n 25% {\r\n @include translate3d(0,-500%, 0); opacity: 1;\r\n }\r\n\r\n 35% {\r\n @include translate3d(0,-200%, 0); opacity: 0;\r\n }\r\n 50% {\r\n @include translate3d(0,200%, 0); opacity: 0;\r\n }\r\n 100%{\r\n @include translate3d(0, 0, 0); opacity: 1;\r\n }\r\n}\r\n\r\n\r\n@keyframes anim2 {\r\n 0% {\r\n @include translate3d(0, 0, 0);\r\n }\r\n 25% {\r\n @include translate3d(2px,0, 0); \r\n }\r\n\r\n\r\n 50% {\r\n @include translate3d(6px,0, 0); \r\n }\r\n 100%{\r\n @include translate3d(0, 0, 0); \r\n }\r\n}\r\n\r\n\r\n/** Gallery Carousel Thumbnails **/\r\n\r\n.project-gallery{\r\n position: relative; width: 80%; height: auto; margin:0 auto; margin-bottom: 150px; \r\n\r\n .owl-nav{\r\n\r\n\r\n .owl-next{\r\n position: absolute; font-size: 0; border: 0; display: block; width: 70px; height: 70px; right: -40px; top: 50%; z-index: 80; background-color: #fff;\r\n\r\n &::before{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(-30deg); position: absolute; top: 38px; right: 30px;\r\n @include transform-origin(100% 0);\r\n }\r\n &::after{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(30deg); position: absolute; top: 38px; right: 30px;\r\n @include transform-origin(100% 0); \r\n }\r\n\r\n &:hover{\r\n animation: anim2 0.5s;\r\n animation-iteration-count: 3;\r\n }\r\n }\r\n\r\n .owl-prev{\r\n position: absolute; font-size: 0; border: 0; display: block; width: 70px; height: 70px; left:-40px; background-color: #fff; top: 50%;\r\n\r\n &::before{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(30deg); position: absolute; top: 38px; left: 30px;\r\n @include transform-origin(0% 100%);\r\n }\r\n &::after{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(-30deg); position: absolute; top: 38px; left: 30px;\r\n @include transform-origin(0% 100%);\r\n }\r\n\r\n &:hover{\r\n animation: anim2 0.5s;\r\n animation-iteration-count: 3;\r\n }\r\n }\r\n\r\n \r\n }\r\n\r\n .slider-counter2{\r\n\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 200px;\r\n height: 80px;\r\n text-align: center;\r\n line-height: 80px;\r\n display: block;\r\n font-size: 24px;\r\n z-index: 55;\r\n background-color: #fff;\r\n color: #909090;\r\n letter-spacing: 3px;\r\n\r\n }\r\n}\r\n\r\n.owl-thumbs{\r\n width: 100%;\r\n text-align: center;\r\n text-align: center;\r\n position: absolute;\r\n left: 50%;\r\n bottom: -80px;\r\n height: 100px;\r\n z-index: 888888;\r\n transform: translate(-50%, 50%);\r\n white-space: nowrap;\r\n overflow-y: auto;\r\n button{\r\n width: 100px; display: inline-block; margin: 3px;\r\n\r\n img{\r\n width: 100%;\r\n }\r\n }\r\n}\r\n\r\n\r\n/** Thumbnail Slider \r\n\r\n.project-gallery1 > .tab-content > .tab-pane {\r\n\tdisplay: block;\r\n\theight: 0;\r\n\topacity: 0;\r\n}\r\n\r\n.project-gallery1> .tab-content > .tab-pane.active {\r\n\theight: auto;\r\n\topacity: 1;\r\n}**/\r\n\r\n.tab-content{\r\n min-height: 200px;\r\n}\r\n\r\n.tab-content > .tab-pane.active{\r\n\r\n animation: fadeIn 4s;\r\n}\r\n\r\n.proje-tabs, .nav-tabs.nav-justified {\r\n\r\n\r\n border: 0; text-align: center; width: 100%; margin: 20px 0;\r\n\r\n li{\r\n display: inline; position: relative; border: 0 !important; \r\n\r\n a{\r\n border: 0; margin: 0; position: relative; padding: 5px 20px; display: inline-block; line-height: 40px;font-size: 15px; font-weight: 600; letter-spacing: -0.4px; overflow: hidden;\r\n\r\n &::before{\r\n width: 99%; height: 15px; border: 1px solid #333; border-bottom: 0; top: 0; left: 0; position: absolute; content:\"\";\r\n @include transition(0.2s); @include translate3d(0, -100%, 0); opacity: 0;\r\n }\r\n &::after{\r\n width: 99%; height: 15px; border: 1px solid #333; border-top: 0; bottom: 0; left: 0; position: absolute; content:\"\";\r\n @include transition(0.2s); @include translate3d(0, 100%, 0); opacity: 0;\r\n }\r\n }\r\n\r\n &.active, &.active:hover a{\r\n border:0 !important; margin:0; \r\n\r\n &.active:hover a{\r\n\r\n &::before{\r\n width: 99%; height: 15px; border: 1px solid #333; border-bottom: 0; top: 0; left: 0; position: absolute; content:\"\";\r\n @include transition(0.2s); @include translate3d(0, 5px, 0); \r\n }\r\n &::after{\r\n width: 99%; height: 15px; border: 1px solid #333; border-top: 0; bottom: 0; left: 0; position: absolute; content:\"\";\r\n @include transition(0.2s); @include translate3d(0, -5px, 0); \r\n }\r\n\r\n }\r\n\r\n \r\n\r\n\r\n\r\n \r\n }\r\n &:hover a{\r\n border: 0 !important; margin: 0; background-color: transparent;\r\n\r\n\r\n }\r\n\r\n &.active a{\r\n border: 0 !important; margin: 0; background-color: transparent !important;\r\n\r\n &::before{\r\n width: 99%; height: 15px; border: 1px solid #333; border-bottom: 0; top: 0; left: 0; position: absolute; content:\"\";\r\n @include transition(0.2s); @include translate3d(0, 0, 0); opacity: 1;\r\n }\r\n &::after{\r\n width: 99%; height: 15px; border: 1px solid #333; border-top: 0; bottom: 0; left: 0; position: absolute; content:\"\";\r\n @include transition(0.2s); @include translate3d(0, 0, 0); opacity: 1;\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n.lightSlider li img {\r\n height: auto;\r\n max-width: 100%;\r\n display: block;\r\nmargin: 0 auto;\r\n}\r\n\r\n.info-slide{\r\n\r\n .lSAction{\r\n position: absolute;\r\n right: 50px;\r\n width: 190px;\r\n background: #fff;\r\n height: 80px;\r\n bottom: 0;\r\n z-index: 80;\r\n \r\n \r\n .lSNext{\r\n position: relative; font-size: 0; border: 0; display: block; width: 70px; height: 70px; float: right; top: 20px; background:none;\r\n\r\n &::before{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(-30deg); position: absolute; top: 38px; right: 30px;\r\n @include transform-origin(100% 0);\r\n }\r\n &::after{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(30deg); position: absolute; top: 38px; right: 30px;\r\n @include transform-origin(100% 0);\r\n }\r\n\r\n &:hover{\r\n animation: arrow-animation3 0.5s;\r\n animation-iteration-count: 3;\r\n }\r\n }\r\n\r\n .lSPrev{\r\n position: relative; font-size: 0; border: 0; display: block; width: 70px; height: 70px; float: left;top: 20px; background:none; z-index: 80;\r\n\r\n &::before{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(30deg); position: absolute; top: 38px; left: 30px;\r\n @include transform-origin(0% 100%);\r\n }\r\n &::after{\r\n width: 25px; height: 1px; background-color: $secondary-color; content: \"\"; @include rotate(-30deg); position: absolute; top: 38px; left: 30px;\r\n @include transform-origin(0% 100%);\r\n }\r\n\r\n &:hover{\r\n animation: arrow-animation2 0.5s;\r\n animation-iteration-count: 3;\r\n }\r\n }\r\n\r\n}\r\n\r\n }\r\n\r\n.owl-detail-1{\r\n\r\n overflow: visible;\r\n\r\n img{\r\n width: 100%;\r\n }\r\n\r\n\r\n\r\n}\r\n\r\n#imageGallery{\r\n\r\n \r\n}\r\n\r\n.project-gallery1{ position: relative; margin-bottom: 100px;\r\n\r\n @media #{$tablet-break-point}{\r\n margin-bottom:40px;\r\n }\r\n\r\n h4{\r\n margin: 0 0 10px 0;\r\n position: absolute;\r\n bottom: 45px;\r\n background: white;\r\n width: 150px;\r\n height: 80px;\r\n z-index: 5;\r\n color: #3a3a3a;\r\n text-align: center;\r\n left: 0;\r\n padding: 30px;\r\n font-size: 20px;\r\n\r\n @media #{$tablet-break-point}{\r\n display:none;\r\n\r\n }\r\n }\r\n\r\n \r\n\r\n .lSNext{\r\n position: absolute; font-size: 0; border: 0; display: block; width: 70px; height: 70px; right: 0px; top: 50%; z-index: 80; background-color: #fff;\r\n opacity: 1; background-image: none;\r\n\r\n \r\n \r\n &::before{\r\n width: 25px; height: 2px; background-color: $secondary-color; content: \"\"; @include rotate(-30deg); position: absolute; top: 34px; right: 24px;\r\n @include transform-origin(100% 0);\r\n }\r\n &::after{\r\n width: 25px; height: 2px; background-color: $secondary-color; content: \"\"; @include rotate(30deg); position: absolute; top: 34px; right: 24px;\r\n @include transform-origin(100% 0); \r\n } \r\n \r\n \r\n \r\n &:hover{\r\n animation: anim2 0.5s;\r\n animation-iteration-count: 3;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n @include scale(0.7); @include transform-origin(100% 0);\r\n\r\n &:hover{\r\n animation:none;\r\n }\r\n }\r\n }\r\n \r\n .lSPrev{\r\n position: absolute; font-size: 0; border: 0; display: block; width: 70px; height: 70px; left:-6px; background-color: #fff; top: 50%;\r\n opacity: 1; background-image: none; z-index: 80;\r\n \r\n &::before{\r\n width: 25px; height: 2px; background-color: $secondary-color; content: \"\"; @include rotate(30deg); position: absolute; top: 34px; left: 24px;\r\n @include transform-origin(0% 100%);\r\n }\r\n &::after{\r\n width: 25px; height: 2px; background-color: $secondary-color; content: \"\"; @include rotate(-30deg); position: absolute; top: 34px; left: 24px;\r\n @include transform-origin(0% 100%);\r\n }\r\n \r\n &:hover{\r\n animation: anim2 0.5s;\r\n animation-iteration-count: 3;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n @include scale(0.7); @include transform-origin(0% 0%);\r\n\r\n &:hover{\r\n animation:none;\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n/** Home Banner **/\r\n\r\n\r\n\r\n\r\n#banner{\r\n position:relative;\r\n\r\n \r\n .lSAction{\r\n\r\n width: 100px;\r\n height: 40px;\r\n left: 6.6%;\r\n bottom: 220px;\r\n position: absolute;\r\n\r\n\r\n\r\n a{\r\n @include scale(1.2); opacity: 1;\r\n }\r\n }\r\n\r\n\r\n}\r\n\r\n.banner-slider{\r\n\r\n position: relative;\r\n\r\n\r\n\r\n \r\n\r\n\r\n .banner-wrap{ position: relative; background-color: $secondary-color; width: 100%; overflow: hidden;\r\n\r\n .proje-logo{\r\n width: 600px !important; transform: scale(1) !important; display: block; margin: 10px 0; height: auto !important; @include transition(0s); opacity: 1 !important; max-width: none !important;\r\n\r\n @media #{$tablet-break-point}{\r\n width: 450px !important;\r\n }\r\n\r\n @media #{$mobil-break-point}{\r\n margin: 0 auto !important; width: 280px !important; left:0;\r\n }\r\n }\r\n\r\n img{\r\n opacity: 0.8; @include scale(1); width: 100%; position: relative; left:0; @include transition(10.8s);\r\n }\r\n\r\n .banner-caption{\r\n width: 100%; position: absolute; left: 50%; top: 50%; display: block; padding: 50px 100px; \r\n color: #fff; text-align: left; opacity: 0; @include transition (0.4s); @include translate(-54%, -50%); transition-delay: 1s;\r\n\r\n h1{\r\n font-size: 80px; font-weight: 600; letter-spacing: 10px; margin:15px 0;\r\n\r\n @media #{$mq-large}{\r\n\r\n font-size:6vw; letter-spacing: -5px;\r\n }\r\n span{\r\n font-weight: 400; \r\n }\r\n @media #{$mq-large}{\r\n\r\n font-size:6vw; letter-spacing: -5px;\r\n\r\n span{\r\n font-size:6vw;\r\n }\r\n }\r\n \r\n }\r\n h2{\r\n font-size: 24px; letter-spacing: -1px; font-weight: 500;\r\n\r\n @media #{$mq-large}{\r\n\r\n font-size:2vw; letter-spacing: -2px;\r\n }\r\n }\r\n\r\n \r\n .banner-detail{\r\n display: block;\r\n width: 200px;\r\n font-size: 15px;\r\n letter-spacing: 2px;\r\n text-align: center;\r\n margin: 30px 0;\r\n color: #fff;\r\n font-weight: bold;\r\n line-height: 30px;\r\n padding: 10px 0;\r\n border: 1px solid #fff;\r\n position: relative;\r\n @include transition(0.3s);\r\n transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);\r\n\r\n &:hover{\r\n color:#222;\r\n }\r\n \r\n &:before{\r\n width: 100%; height: 0; background-color: #fff; content: \"\"; bottom:0; left: 0; @include transition(0.3s); position: absolute;\r\n z-index: -1;\r\n transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);\r\n }\r\n \r\n &:hover:before{\r\n height: 100%; bottom:auto; top:0;\r\n }\r\n }\r\n \r\n }\r\n\r\n &.active .banner-caption{\r\n opacity: 1; @include translate(-50%, -50%); transition-delay: 1s;\r\n }\r\n \r\n\r\n &.active img{\r\n opacity: 0.9; @include scale(1.2); \r\n }\r\n \r\n }\r\n \r\n}\r\n\r\n\r\n .lSSlideOuter .lSPager.lSpg{\r\n\r\n position: absolute; right:0 !important; top: 50% !important; width: 20px; height: auto; width: 4%; text-align: center; margin:0 !important; padding:0 !important; @include transition(0.5s); transform: translate(-50%, -50%) !important;\r\n }\r\n .lSSlideOuter .lSPager.lSpg>li\r\n \r\n \r\n {\r\n\r\n &:hover a{\r\n\r\n background-color: transparent !important; border: 2px solid #fff;\r\n\r\n }\r\n \r\n a{\r\n width: 15px; height:15px; display: block; margin:12px 8px; background-color: #fff; position: relative; overflow: visible; \r\n\r\n &:hover{\r\n background-color: transparent !important; border: 2px solid #fff;\r\n }\r\n\r\n &::before{\r\n width: 15px; right: 30px; height: 1px; top: 50%; background-color: #fff; content:\"\"; position: absolute; @include transition(0.3s);\r\n\r\n }\r\n\r\n &:hover:before{\r\n width: 30px;\r\n }\r\n &::after{\r\n width: 120px; right: 35px; height: 20px; bottom:100%; content:\"Atrium Terrace\"; position: absolute; color: #fff; font-size: 14px; text-indent: 100%;\r\n display: block; text-align: center; @include transition(0.3s); @include translate(20px, 0px); opacity: 0;\r\n }\r\n \r\n \r\n }\r\n \r\n &.active a{\r\n background-color: transparent; border: 2px solid #fff; width: 20px; height: 20px;\r\n\r\n &::before{\r\n width: 120px; right: 30px; height: 1px; top: 50%; background-color: #fff; content:\"\"; position: absolute;\r\n }\r\n &::after{\r\n width: 120px; right: 35px; height: 20px; bottom:100%; content:\"Atrium Terrace\"; position: absolute; color: #fff; font-size: 14px; text-indent: 100%;\r\n display: block; text-align: center; @include scale(1); @include translate(0, 0); opacity: 1;\r\n }\r\n }\r\n\r\n &:nth-child(1) a:after{\r\n content: \"Atrium Terrace\"\r\n\r\n }\r\n\r\n &:nth-child(2) a:after{\r\n content: \"Marka Aydın\"\r\n\r\n }\r\n\r\n &:nth-child(3) a:after{\r\n content: \"Studio Life\"\r\n\r\n }\r\n\r\n &:nth-child(4) a:after{\r\n content: \"Lider Okulları\"\r\n\r\n }\r\n\r\n &:nth-child(5) a:after{\r\n content: \"Demirciler Sitesi\"\r\n\r\n }\r\n \r\n\r\n\r\n}\r\n\r\n/** Scroll-arrow **/\r\n@keyframes bounceArrow {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateY(-40px);\r\n transform: translateY(-40px);\r\n }\r\n 50% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateY(40px);\r\n transform: translateY(40px);\r\n \r\n}\r\n}\r\n\r\n.arrow-scroll {\r\n position: absolute;\r\n bottom: 10vh;\r\n left: 50%;\r\n width: 50px;\r\n z-index: 1;\r\n margin-left: -25px;\r\n margin-top: 40px;\r\n -webkit-animation: bounceArrow 2.4s cubic-bezier(.7,0,.3,1) infinite;\r\n animation: bounceArrow 2.4s cubic-bezier(.7,0,.3,1) infinite;\r\n -webkit-transform: translate3d(0,0,0);\r\n transform: translate3d(0,0,0);\r\n -webkit-backface-visibility: hidden;\r\n -webkit-perspective: 1000;\r\n -webkit-transition: all cubic-bezier(.215,.61,.355,1) .5s;\r\n transition: all cubic-bezier(.215,.61,.355,1) .5s;\r\n visibility: visible;\r\n -webkit-animation-iteration-count: infinite;\r\n animation-iteration-count: infinite;\r\n opacity: 0;\r\n color:#fff important;\r\n font-size:20px;\r\n background-color:transparent;\r\n z-index: 50;\r\n &::before{\r\n width:1px; height:50px; background-color:#fff; position:absolute; content:\"\"; left:50%; bottom:100%;\r\n }\r\n \r\n\r\n i{\r\n color:#fff !important;\r\n width: 50px;\r\n height:50px; line-height:50px; text-align:center;\r\n }\r\n}\r\n.banner-slider .banner-wrap .banner-caption h1{\r\n \r\n}\r\n\r\n\r\n/*** Banner Slider Tablet view **/\r\n @media #{$tablet-break-point}{\r\n#banner{\r\n\r\n z-index: 94;\r\n\r\n .banner-counter{\r\n display: none;\r\n }\r\n .lSAction{\r\n bottom: 20px;\r\n }\r\n\r\n \r\n}\r\n\r\n\r\n\r\n.banner-slider{\r\n\r\n .banner-wrap.active .banner-caption{\r\n @include translate(0, 0);\r\n }\r\n\r\n\r\n\r\n .banner-wrap{\r\n\r\n .banner-caption{\r\n\r\n top: 0 ; left: 0 ; padding: 50px 25px; width: auto; height: auto; left:auto; bottom:auto; transform: none !important;\r\n\r\n h1{\r\n font-size: 40px;\r\n }\r\n }\r\n }\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n@media #{$mq-medium}{\r\n\r\n #banner{\r\n \r\n .lSAction {\r\n top: 80%;\r\n \r\n width: 90px;\r\n display: inline-block;\r\n }\r\n }\r\n\r\n}\r\n\r\n@media #{$mq-small}{\r\n\r\n #banner{\r\n \r\n .lSAction {\r\n top: 80%;\r\n \r\n width: 90px;\r\n display: inline-block;\r\n }\r\n }\r\n\r\n}\r\n\r\n/*** Banner Slider Mobil view **/\r\n\r\n\r\n@media #{$mobil-break-point}{\r\n\r\n #banner{\r\n .lSSlideOuter .lSPager.lSpg{\r\n\r\n display:none;\r\n \r\n }\r\n\r\n .lSAction {\r\n bottom: 20px;\r\n left: 0;\r\n right: 0;\r\n margin: 0 auto;\r\n width: 90px;\r\n display: inline-block;\r\n }\r\n }\r\n \r\n\r\n\r\n .banner-slider{\r\n min-height:300px;\r\n\r\n .banner-wrap.active .banner-caption{\r\n @include translate(0, 0);\r\n }\r\n \r\n \r\n \r\n .banner-wrap{\r\n\r\n img{\r\n height:300px; width:auto; position:relative; left:-20%;\r\n }\r\n \r\n .banner-caption{\r\n \r\n top: 0 ; left: 0 ; right:0; margin:0 auto; padding: 20px 25px; height: auto; bottom:auto; transform: none !important; text-align:center;\r\n \r\n h1{\r\n font-size: 26px;\r\n }\r\n\r\n h2{\r\n font-size: 5vw; font-weight: normal;\r\n }\r\n\r\n\r\n .banner-detail{\r\n height:auto; padding:5px 20px; line-height: 30px; font-size: 13px; width:auto; display:inline-block; margin:0 auto;\r\n }\r\n\r\n \r\n }\r\n }\r\n \r\n }\r\n \r\n}\r\n\r\n\r\n\r\n@media #{$mobil-break-point}{\r\n\r\n.owl-home-proje .owl-nav, .owl-home-proje .lSAction, .home-project .owl-nav, .home-project .lSAction {\r\n bottom: 100px;\r\n\r\n}\r\n\r\n.proje-links-wrap{\r\n margin-top:0;\r\n}\r\n\r\n.box-1{\r\n width:80px;\r\n}\r\n.box-11{\r\n width: calc(100% - 80px);\r\n}\r\n\r\n.home-title1{\r\n margin-bottom: 30px;\r\n}\r\n\r\n.home-project{\r\n min-height:0;\r\n}\r\n\r\n}\r\n\r\n\r\n\r\n /*** Hakkımızda Css **/\r\n .static-banner-1{\r\n min-height: 460px; position: relative; background-color: $secondary-color; padding: 70px 20px; color: #fff; padding-top: 150px;\r\n margin-bottom: 30px; z-index: 20; text-align: center; font-size:18px;\r\n\r\n @media #{$tablet-break-point}{\r\n\r\n min-height: 350px; padding: 0; padding-top: 0;\r\n\r\n .static-title{\r\n @include scale(0.8); padding:20px 0; padding-bottom:0;\r\n }\r\n\r\n .static-banner-menu{\r\n margin: 0 !important;\r\n }\r\n\r\n }\r\n\r\n\r\n\r\n .arrow-scroll{ z-index: 40; bottom:30px; top: auto;\r\n \r\n i{\r\n \r\n }\r\n }\r\n\r\n &.kurumsal{\r\n background: url(../img/kurumsal-banner.jpg) no-repeat top center; background-attachment: fixed;\r\n\r\n @media #{$tablet-break-point}{\r\n\r\n background: url(../img/kurumsal-banner2.jpg) no-repeat top center;\r\n\r\n }\r\n }\r\n &.news-static{\r\n background: url(../img/news-static.jpg) no-repeat top right; background-attachment: fixed;\r\n }\r\n\r\n &::before{\r\n\r\n width: 100%; height: 60px; @include skewY(2deg); content: \"\"; position: absolute; bottom: -35px; left: 0; z-index: 10; \r\n background: url(../img/body-pattern1.png) repeat #fff;\r\n\r\n }\r\n &.contact::before{\r\n\r\n display:none;\r\n\r\n }\r\n &.contact{\r\n margin-bottom: 0;\r\n }\r\n\r\n .static-banner-menu{\r\n position: absolute; right: 5%; top: 50%; @include translate(-0%, -50%);\r\n\r\n\r\n\r\n li{\r\n display:block;\r\n\r\n a{\r\n font-size: 16px; font-weight: 500; color: #fff; line-height: 2em; padding-left: 25px; display: inline-block;\r\n position: relative; @include transition(0.4s); padding-top: 5px; padding-bottom: 5px; width: 100%; letter-spacing: -0.7px; opacity: 0.8;\r\n\r\n &:before{\r\n width: 20px; height: 1px; background-color: #fff; content: \"\"; left: -5px; top: 49%; position: absolute;\r\n @include transition(0.4s); \r\n\r\n @media #{$tablet-break-point}{\r\n\r\n left:50px;\r\n\r\n }\r\n }\r\n \r\n\r\n &:hover{\r\n color: #fff; @include translate3d(10px, 0, 0); opacity: 1;\r\n\r\n &::before{\r\n @include rotate(-45deg); width: 30px; \r\n \r\n }\r\n \r\n }\r\n\r\n .sep{\r\n display: none;\r\n }\r\n\r\n }\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n position: relative; width: 100%; margin:30px 0; right: 0; top: 0; @include translate(0, 0); text-align: center;\r\n\r\n li{\r\n display: inline;\r\n\r\n a{\r\n display: inline-block;\r\n width: auto;\r\n margin: 0 10px;\r\n }\r\n }\r\n }\r\n }\r\n .static-title{\r\n color: #fff; text-align: center; font-size: 48px; letter-spacing: -1px; font-weight: 600;padding: 40px 0;\r\n \r\n .title-text{\r\n position:relative; display:inline-block; \r\n\r\n &::before{\r\n width: 95px; height: 2px; background-color: #fff; bottom:-20px; left: -40px; content:\"\"; position:absolute;\r\n }\r\n\r\n &::after{\r\n height: 112px; width: 2px; background-color: #fff; bottom:-40px; left: -20px; content:\"\"; position:absolute;\r\n }\r\n\r\n .slogan{\r\n background: url(../img/sprite.png) no-repeat -242px 0; width: 342px; height: 30px; display:block; position: absolute; bottom: -30px; left: 80px; font-weight: normal;\r\n\r\n @media #{$mobil-break-point}{\r\n \r\n @include transform-origin(0 50%); @include scale(0.7);\r\n }\r\n\r\n &.with-text{\r\n background-image: none; font-size: 20px; left: 70px; width: 150px; display: block; height:auto;\r\n }\r\n }\r\n }\r\n \r\n }\r\n }\r\n\r\n\r\n\r\n\r\n .about-slogan{\r\n position: relative; z-index: 10;\r\n\r\n \r\n @media #{$notebook-break-point}{\r\n\r\n min-height: 0; \r\n\r\n @media #{$tablet-break-point}{\r\n &::after{\r\n\r\n right: 40px; top: -2px;\r\n \r\n }\r\n\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n padding: 0; padding-bottom: 20px;\r\n }\r\n\r\n \r\n\r\n }\r\n\r\n \r\n\r\n\r\n .slogan{\r\n padding: 100px 0 50px 40px;\r\n position: relative;\r\n width: 70%;\r\n margin: 20px auto;\r\n\r\n @media #{$notebook-break-point}{\r\n padding: 80px 20px;\r\n width: 90%;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n padding: 80px 20px;\r\n width: 80%;\r\n \r\n }\r\n @media #{$mobil-break-point}{\r\n\r\n width: 80%; margin-left: 20%; \r\n\r\n }\r\n\r\n .slogan-text{color: $primary-color; font-size: 48px; font-weight: normal; font-stretch: condensed; font-weight: 600; line-height: 1.3em; \r\n\r\n .color{\r\n color: $secondary-color;\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n font-size: 28px; \r\n }\r\n\r\n }\r\n\r\n .line1::before, .line2::before, .line3::before, .line4::before{\r\n width:5px; background-color:$primary-color; height:100%; position: absolute; top: 0; left: 0; content: \"\"; \r\n\r\n @media #{$notebook-break-point}{\r\n\r\n height: 300px; width: 3px;\r\n\r\n }\r\n\r\n }\r\n\r\n .line2::before{\r\n @media #{$notebook-break-point}{\r\n\r\n height: 300px;\r\n\r\n }\r\n\r\n @media #{$mobil-break-point}{\r\n\r\n height: 200px; top: 100px;\r\n\r\n }\r\n }\r\n\r\n .line1, .line2, .line3, .line4{\r\n animation-name: line-animation1 ;\r\n animation-duration:20s; \r\n animation-timing-function: ease-out; \r\n animation-delay: 0s;\r\n animation-direction: alternate;\r\n animation-iteration-count: infinite;\r\n animation-fill-mode: none;\r\n animation-play-state: running; \r\n \r\n }\r\n\r\n .line2::before{\r\n @include rotate(90deg); @include transform-origin(0 100%);\r\n \r\n }\r\n\r\n .line3::before{\r\n @include rotate(-90deg); @include transform-origin(100% 0); height: 100px;\r\n \r\n }\r\n .line4::before{\r\n @include rotate(-45deg); @include transform-origin(100% 0); height: 100px ; left: 100px;\r\n \r\n }\r\n }\r\n\r\n \r\n\r\n .radial-link{\r\n color: #fff; position: relative; margin: 20px auto; text-align: center; display: block; padding-top: 80px; font-size: 18px; font-weight: 500; letter-spacing: -1px;\r\n\r\n span{\r\n position: relative;\r\n\r\n &::before{\r\n width: 25px; background-color: #fff; height: 1px; content:\"\"; position: absolute; left: -30px; top: 50%;\r\n }\r\n }\r\n\r\n &::before{\r\n background-color: #fff; width: 1px; height: 180px; bottom:40px; left: 50%; content: \"\"; position: absolute;\r\n }\r\n\r\n &::after{\r\n background-color: #fff; width: 10px; height:10px; bottom:220px; left: 50%; content: \"\"; position: absolute; @include border-radius(100%);\r\n margin-left: -4px; margin-top: 5px;\r\n box-shadow: 0 0 0 0 rgb(255, 246, 170);\r\n border-radius: 50%;\r\n background-color: #fff;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n cursor: pointer;\r\n -webkit-animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);\r\n -moz-animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);\r\n -ms-animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);\r\n animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);\r\n\r\n\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n \r\n &::before{ height: 140px;\r\n }\r\n\r\n &::after{\r\n bottom: 180px;\r\n\r\n }\r\n }\r\n }\r\n\r\n .rotate-link1 {\r\n -moz-transform-origin: 0 50%;\r\n -moz-transform: rotate(-90deg) translate(-50%, 50%);\r\n -webkit-transform-origin: 0 50%;\r\n -webkit-transform: rotate(-90deg) translate(-50%, 50%);\r\n -o-transform-origin: 0 50%;\r\n -o-transform: rotate(-90deg) translate(-50%, 50%);\r\n -ms-transform-origin: 0 50%;\r\n -ms-transform: rotate(-90deg) translate(-50%, 50%);\r\n transform-origin: 0 0%;\r\n transform: rotate(-90deg) translate(-50%, 100%);\r\n position: absolute;\r\n bottom: 0;\r\n height: 2em;\r\n margin: auto;\r\n font-weight: bold;\r\n font-size: 1em;\r\n line-height: 2em;\r\n color: $secondary-color;\r\n left: 20px;\r\n -webkit-transition: all .3s ease-in;\r\n -moz-transition: all .3s ease-in;\r\n -o-transition: all .3s ease-in;\r\n transition: all .3s ease-in;\r\n height: 60px;\r\n left: -10px;\r\n top: -40px;\r\n -webkit-transition: all .3s ease-in;\r\n -moz-transition: all .3s ease-in;\r\n -o-transition: all .3s ease-in;\r\n transition: all .3s ease-in;\r\n width: auto;\r\n\r\n @media #{$notebook-break-point}{\r\n left: -40px;\r\n }\r\n }\r\n\r\n\r\n}\r\n\r\n.align-center{\r\n text-align: center;\r\n}\r\n.static-content-menu{\r\n display: inline-block; margin: 40px auto; position: relative;\r\n\r\n &::before{\r\n width: 1px; height: 90px; background-color: $primary-color; position: absolute; bottom:100%; left: 50%; content:\"\";\r\n }\r\n\r\n\r\n\r\n li{\r\n display:block; width: auto; text-align: right;\r\n\r\n a{\r\n color:$secondary-color; display: inline-block; line-height: 1.3em; padding: 6px 0; text-align: right; position: relative; @include transition(0.3s); font-size: 16px; letter-spacing: -1px; font-weight: 500;\r\n }\r\n\r\n &:hover a{\r\n color: $primary-color; @include translate3d(10px, 0px, 0);\r\n }\r\n\r\n .sep{\r\n margin-left: 10px;\r\n }\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n position: relative; width: 100%; margin:30px 0; right: 0; top: 0; @include translate(0, 0); text-align: center;\r\n\r\n li{\r\n display: inline;\r\n\r\n a{\r\n display:inline-block;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.about-text{\r\n position: relative; padding:0 80px 0 30px; margin-bottom: 40px;\r\n\r\n \r\n\r\n &::before{\r\n width: 1px; height: 120%; top:-20%; background-color: #e2e2e2; content:\"\"; position: absolute; left:0;\r\n }\r\n\r\n @media #{$tablet-break-point}{\r\n padding: 0 30px;\r\n }\r\n\r\n .title2{\r\n font-size: 24px; color:$primary-color; font-weight: bold; margin-top: 40px; margin-bottom:20px;\r\n\r\n span{\r\n position:relative; \r\n\r\n &::before{\r\n width:15px; height:15px; position:absolute; content:\"\"; left:-40px; top:5px; background-color: $secondary-color;\r\n }\r\n }\r\n }\r\n\r\n p{\r\n line-height: 2.9em;\r\n }\r\n}\r\n\r\n\r\n/** Contact Page **/\r\n\r\n#contact{\r\n\r\n position: relative ; \r\n\r\n .contact-info{\r\n text-align: center; padding: 80px 0; position: relative; \r\n\r\n .title{\r\n font-size: 48px; color:$primary-color; font-weight: 400; margin-bottom: 50px;\r\n }\r\n\r\n ul{\r\n list-style: none; max-width: 60%; margin:0 auto; \r\n\r\n @media #{$mobil-break-point}{\r\n max-width: 75%;\r\n }\r\n\r\n li{\r\n\r\n a{\r\n line-height: 1.8em; margin: 10px auto; display: block; font-size: 16px; position: relative; text-align: left; height: 50px;\r\n letter-spacing:-1px;\r\n\r\n i{\r\n font-size: 35px; color:$primary-color; display: block; height: 80px; line-height: 40px; \r\n float:left; margin-top: -45px; top:40px; position:relative; margin-right: 15px;\r\n }\r\n span{\r\n font-size:24px; font-weight: 600;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.contact-info-wrap{\r\n position: relative;\r\n\r\n .call-form{\r\n position:absolute; width:200px; background: $primary-color; line-height: 40px; display: block; margin:0 auto; left:0; right:0; z-index: 33; color: #fff; font-size:16px; font-weight: normal; bottom:0; text-align: center; padding: 6px 20px;\r\n }\r\n \r\n\r\n\r\n}\r\n\r\n.contact-page-form{\r\n\r\n background-color: #35302c; padding: 50px 10%; z-index: 90;\r\n\r\n .input-wrap{\r\n position: relative; \r\n\r\n input{\r\n\r\n height: 63px; background-color: transparent; border: 1px solid #7d7d7d; color:#fff; width:100%;\r\n padding: 0 20px; cursor: pointer; @include transition(0.3s);\r\n\r\n &:focus{\r\n box-shadow: 0 0 5px 2px rgba(212, 177, 131, 0.129);; border: 1px solid $primary-color;\r\n }\r\n\r\n }\r\n \r\n\r\n\r\n input[type=\"text\"].valid ~ label, \r\n input[type=\"text\"]:focus ~ label, \r\n {\r\n top: -45px;\r\n padding: 0 0px;\r\n left:10px;\r\n \r\n }\r\n \r\n\r\n \r\n\r\n label{\r\n position: absolute; left:20px; line-height: 60px; top:0; color:#999; font-size:14px; @include transition(0.2s); pointer-events: none;\r\n }\r\n }\r\n}\r\n\r\n\r\n.contact-form1{\r\n margin: 20px 0 50px 0;\r\n\r\n .title3{\r\n\r\n font-size: 36px;\r\n color: #fff;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n }\r\n\r\n .form-text{\r\n\r\n color: #e2e2e2;\r\n margin-bottom: 20px;\r\n display: block;\r\n }\r\n}\r\n\r\n\r\n\r\n.my-select{\r\n height: 60px;\r\n width: 100%;\r\n border: 1px solid $primary-color;\r\n color: #fff;\r\n background-color: #35302c;\r\n padding: 0 20px;\r\n}\r\n\r\n.submit-wrap1{\r\n display: block; position:relative; z-index: 5; width: 300px; overflow: hidden;\r\n &::after{\r\n width: 60px;\r\n height: 60px;\r\n background-color: #35302c;\r\n -webkit-transform: rotate(45deg);\r\n -moz-transform: rotate(45deg);\r\n -ms-transform: rotate(45deg);\r\n -o-transform: rotate(45deg);\r\n transform: rotate(45deg);\r\n position: absolute;\r\n right: -30px;\r\n top: -10px;\r\n pointer-events: none;\r\n content: \"\";\r\n }\r\n\r\n\r\n}\r\n\r\n.contact-button{\r\n line-height: 72px; background-color: $primary-color; color:#fff; font-size: 16px; letter-spacing: -1px; text-align:center; margin:20px 0;\r\n display:block; border:0; outline: 0; width: 100%; border:1px solid transparent; @include transition(0.4s); font-weight: 600;\r\n\r\n &:hover{\r\n background-color: $secondary-color; border:1px solid rgb(94, 94, 94);\r\n }\r\n \r\n}\r\n\r\n\r\n/** Yoshiko **/\r\n\r\n\r\n/* Yoshiko */\r\n\r\n\r\n.input {\r\n\tposition: relative;\r\n\tz-index: 1;\r\n\tdisplay: inline-block;\r\n\tmargin: 1.4em 0;\r\n\t\r\n vertical-align: top;\r\n \r\n}\r\n\r\n.input__field {\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\tfloat: right;\r\n\tpadding: 0.8em;\r\n\twidth: 60%;\r\n\tborder: none;\r\n\tborder-radius: 0;\r\n\tbackground: #f0f0f0;\r\n\tcolor: #aaa;\r\n\tfont-weight: 400;\r\n -webkit-appearance: none; /* for box shadows to show on iOS */\r\n height: 60px;\r\n}\r\ntextarea.input__field{\r\n width: 100%; height:160px;\r\n}\r\n\r\n.input__field:focus {\r\n\toutline: none;\r\n}\r\n\r\n.input__label {\r\n\tdisplay: inline-block;\r\n\tfloat: right;\r\n\tpadding: 0 1em;\r\n\twidth: 40%;\r\n\tcolor: #696969;\r\n\tfont-weight: bold;\r\n\tfont-size: 70.25%;\r\n\t-webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n\t-webkit-touch-callout: none;\r\n\t-webkit-user-select: none;\r\n\t-khtml-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n\r\n.input__label-content {\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\tpadding: 1.6em 0;\r\n\twidth: 100%;\r\n}\r\n\r\n.graphic {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tfill: none;\r\n}\r\n\r\n.icon {\r\n\tcolor: #ddd;\r\n\tfont-size: 150%;\r\n}\r\n\r\n\r\n.input__field--yoshiko {\r\n\twidth: 100%;\r\n\tbackground-color: transparent;\r\n border: 1px solid #9e9289;\r\n\t-webkit-transition: background-color 0.25s, border-color 0.25s;\r\n\ttransition: background-color 0.25s, border-color 0.25s;\r\n}\r\n\r\n.input__label--yoshiko {\r\n\twidth: 100%;\r\n\ttext-align: left;\r\n\tposition: absolute;\r\n\tbottom: 100%;\r\n\tpointer-events: none;\r\n\toverflow: hidden;\r\n\tpadding: 0 1.25em;\r\n@include translate3d(0, 50px, 0);\r\n\ttransition: transform 0.25s ;\r\n\t-webkit-transition-timing-function: ease-in-out;\r\n transition-timing-function: ease-in-out;\r\n font-size: 14px;\r\n font-weight: normal;\r\n}\r\n\r\n.input__label-content--yoshiko {\r\n\tcolor: #8B8C8B;\r\n\tpadding: 0.25em 0;\r\n\t-webkit-transition: -webkit-transform 0.25s;\r\n\ttransition: transform 0.25s;\r\n\t-webkit-transition-timing-function: ease-in-out;\r\n\ttransition-timing-function: ease-in-out;\r\n}\r\n\r\n.input__label-content--yoshiko::after {\r\n\tcontent: attr(data-content);\r\n\tposition: absolute;\r\n\tfont-weight: 800;\r\n\tbottom: 100%;\r\n\tleft: 0;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tcolor: $primary-color;\r\n\tpadding: 0.25em 0;\r\n\ttext-transform: uppercase;\r\n\tletter-spacing: 1px;\r\n\tfont-size: 0.85em;\r\n}\r\n\r\n.input__field--yoshiko:focus + .input__label--yoshiko,\r\n.input--filled .input__label--yoshiko {\r\n\t@include translate3d(0, 0, 0);\r\n}\r\n\r\n.input__field--yoshiko:focus + .input__label--yoshiko .input__label-content--yoshiko,\r\n.input--filled .input__label-content--yoshiko {\r\n\t@include translate3d(0, 100%, 0);\r\n}\r\n\r\n.input__field--yoshiko:focus + .input__field--yoshiko,\r\n.input--filled .input__field--yoshiko {\r\n\tbackground-color: transparent;\r\n\tborder-color: $primary-color;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n.lg-close{\r\n background-color: $primary-color; color:#fff !important; \r\n}\r\n\r\n.proje-catalog{\r\n position: relative; width: 100%; background: url(../img/pattern3.png) #fff; margin: 80px 0;\r\n\r\n @media #{$tablet-break-point}{\r\n margin-bottom: 10px;\r\n }\r\n\r\n \r\n\r\n .catalog-img{\r\n position: absolute;\r\n\r\n right:0; top:-80px; display:inline-block; \r\n animation: baret 5s;\r\n animation-iteration-count: infinite;\r\n -webkit-transition: all 2s ease-in;\r\n -moz-transition: all 2s ease-in;\r\n -o-transition: all 2s ease-in;\r\n transition: all 2s ease-in;\r\n\r\n img{\r\n width:500px; height:auto;\r\n }\r\n\r\n\r\n }\r\n\r\n .catalog-inner{\r\n padding: 10px 5%; width: 100%; margin:0 auto; height: 200px; position:relative; overflow:hidden; \r\n\r\n &::before{\r\n width: 800px; height:800px; @include border-radius(100%); background: url(../img/pattern3.png) rgb(44, 44, 44); position:absolute; top:50px; right: -10%; content:\"\";\r\n }\r\n\r\n h3{\r\n font-size: 4vw;\r\n }\r\n\r\n .link{\r\n display:block\r\n }\r\n\r\n i{\r\n display:block; font-size: 60px;\r\n }\r\n }\r\n\r\n @media #{$notebook-break-point}{\r\n\r\n overflow: hidden; margin-top:0;\r\n\r\n &::before{\r\n width: 800px; height:800px; @include border-radius(100%); background: url(../img/pattern3.png) rgb(44, 44, 44); position:absolute; top:70%; right: -10%; content:\"\";\r\n }\r\n\r\n .catalog-inner{\r\n\r\n text-align:center;\r\n\r\n padding:20px; width: 100%;\r\n\r\n &::before{\r\n display:none;\r\n }\r\n\r\n h3{\r\n font-size: 8vw;\r\n }\r\n }\r\n\r\n .catalog-img{\r\n position: relative;\r\n \r\n right:0; top:0%; display:block; @include translate(0%, 0); margin: 0 auto; text-align:center;\r\n \r\n img{\r\n width:400px; height:auto; \r\n }\r\n \r\n \r\n }\r\n\r\n }\r\n \r\n}\r\n\r\n/** Yeni Proje Detay **/\r\n\r\n\r\n.marka-top{\r\n background-image: url(../img/marka-static.jpg);\r\n\r\n}\r\n.studio-top{\r\n background-image: url(../img/studio-static.jpg);\r\n\r\n}\r\n.yildiz-top{\r\n background-image: url(../img/yildiz-static.jpg);\r\n\r\n}\r\n\r\n.konak-top{\r\n background-image: url(../img/konak-static.jpg);\r\n\r\n}\r\n.lider-top{\r\n background-image: url(../img/lider-static.jpg);\r\n\r\n}\r\n.demirciler-top{\r\n background-image: url(../img/demirciler-static.jpg);\r\n\r\n}\r\n.argos-top{\r\n background-image: url(../img/argos-static.jpg);\r\n\r\n}\r\n\r\n.hakan-top{\r\n background-image: url(../img/hakan-static.jpg);\r\n\r\n}\r\n\r\n.atay-top{\r\n background-image: url(../img/atay-static.jpg);\r\n\r\n}\r\n.ortaklar-top{\r\n background-image: url(../img/ortaklar-static.jpg);\r\n\r\n}\r\n.fulya-top{\r\n background-image: url(../img/fulya-static.jpg);\r\n\r\n}\r\n.merkez-top{\r\n background-image: url(../img/merkez-static.jpg);\r\n\r\n}\r\n.park-top{\r\n background-image: url(../img/park-static.jpg);\r\n\r\n}\r\n.alcak-top{\r\n background-image: url(../img/alcak-static.jpg);\r\n\r\n}\r\n.ege-top{\r\n background-image: url(../img/ege-static.jpg);\r\n\r\n}\r\n.butun-top{\r\n background-image: url(../img/butun-static.jpg);\r\n\r\n}\r\n.atrium-top{\r\n background-image: url(../img/atrium-static.jpg);\r\n\r\n}\r\n.proje-detay-top{\r\n\r\n @media (min-width: 480px) and (max-width: 990px) {\r\n\r\n background-size: 100% 100% !important; background-position: center center !important;\r\n\r\n\r\n }\r\n.proje-logo{\r\n width:600px; margin:2vw 0;\r\n\r\n @media #{$tablet-break-point}{\r\n width: 75%;\r\n }\r\n}\r\n width: 100%; height: 88vh; padding: 200px 100px; background-size:100% auto; background-color: $secondary-color; background-repeat: no-repeat;\r\n position: relative; z-index: 2; background-position: center center; background-attachment: scroll;\r\n\r\n &::before{\r\n width: 100%; height: 100%; position: absolute; left:0; top:0; bottom:0; content:\"\"; z-index: -1; background-color: $secondary-color;\r\n opacity: 0.3;\r\n\r\n }\r\n\r\n .proje-detay-caption{\r\n\r\n position: relative; height: auto; width:auto; color:#fff;\r\n\r\n h1{\r\n font-size: 6vw; font-weight: normal; margin:10px 0;\r\n\r\n span{\r\n font-weight:bold;\r\n }\r\n\r\n \r\n }\r\n\r\n h2{\r\n font-size: 35px; font-weight: normal; letter-spacing: -1px;\r\n }\r\n .text1{\r\n font-size: 22px; font-weight: 500; letter-spacing: -1px; text-transform: uppercase;\r\n\r\n @media #{$tablet-break-point}{\r\n font-size:16px;\r\n }\r\n }\r\n\r\n }\r\n\r\n}\r\n\r\n@media #{$tablet-break-point}{\r\n .proje-detay-top{\r\n background-size: auto 110%;\r\n max-height: 400px;\r\n padding: 50px 50px;\r\n min-height: 350px;\r\n background-position: 80% center !important;\r\n background-attachment: scroll;\r\n height:auto;\r\n\r\n\r\n\r\n .proje-detay-caption{\r\n\r\n h1{\r\n font-size:40px;\r\n }\r\n\r\n }\r\n }\r\n\r\n}\r\n\r\n@media #{$mq-large}{\r\n .proje-detay-top{\r\n \r\n\r\n\r\n .proje-detay-caption{\r\n\r\n h1{\r\n font-size:6vw;\r\n }\r\n\r\n h2{\r\n font-size: 3vw; font-weight: normal;\r\n }\r\n .text1{\r\n font-size: 1.3vw; font-weight: 500; \r\n }\r\n\r\n }\r\n }\r\n\r\n}\r\n\r\n.talep-btn{\r\n\r\n position: absolute;\r\n bottom: 0;\r\n right: 0;\r\n line-height: 1em;\r\n padding: 25px 20px;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n color: #fff;\r\n font-weight: 400;\r\n font-size: 16px;\r\n letter-spacing: -.4px;\r\n width: 180px;\r\n\r\n @include transition(0.3s);\r\n\r\n i{\r\n font-weight: 400;\r\n font-size: 40px;\r\n width: 50px;\r\n height: 35px;\r\n float: left;\r\n top: 5px;\r\n position: relative;\r\n }\r\n\r\n &:hover, &:focus, &:active{\r\n color:#fff;\r\n width: 185px;\r\n }\r\n}\r\n\r\n\r\n\r\n#talep{\r\n\r\n position: relative; z-index: 80; text-align: center;\r\n\r\n &.contact-page-form{\r\n\r\n background-color: transparent; padding: 50px 10%; z-index: 90;\r\n\r\n .form-text{\r\n color:$secondary-color;\r\n }\r\n\r\n .title3{\r\n font-size:4vw; color:$primary-color;\r\n\r\n @media #{$tablet-break-point}{\r\n font-size:24px;\r\n }\r\n }\r\n\r\n .input__field{\r\n height:80px; color:$secondary-color; font-weight: 500; font-size: 15px;\r\n }\r\n\r\n .input__label--yoshiko{\r\n\r\n bottom:90%;\r\n }\r\n\r\n .submit-wrap1 {\r\n display: inline-block;\r\n position: relative;\r\n z-index: 5;\r\n width: 400px;\r\n overflow: hidden;\r\n max-width: 100%;\r\n &::after {\r\n\r\n background: url(../img/body-pattern1.png) #fff;\r\n \r\n }\r\n }\r\n\r\n textarea{\r\n padding:0 15px; width:100%; resize:none;\r\n }\r\n\r\n \r\n }\r\n}\r\n\r\n/** Bizden Haberler **/\r\n\r\n .news-list{\r\n\r\n .news-list-wrap{\r\n position: relative; margin:25px auto; padding:25px 0; border-bottom:1px solid #e2e2e2;\r\n\r\n .news-list-img{\r\n\r\n }\r\n\r\n .news-list-text{\r\n\r\n .date{\r\n\r\n color: #ea610b;\r\n font-size: 13px;\r\n font-weight: 600;\r\n letter-spacing: 2px;\r\n display:inline-block;\r\n line-height:25px; \r\n border-bottom:1px solid $primary-color;\r\n\r\n }\r\n \r\n .news-list-title{ font-size: 30px;\r\n letter-spacing: -2px;\r\n color: #1d1819;\r\n margin:25px 0;\r\n display: block;\r\n\r\n }\r\n\r\n p{ \r\n font-weight: 500;\r\n color: #746e6e;\r\n letter-spacing: -0.2px;\r\n font-size: 16px;\r\n line-height: 1.8em;\r\n margin-bottom: 20px;\r\n\r\n }\r\n\r\n .detail{\r\n\r\n border: 1px solid #e2e2e2;\r\n line-height: 45px;\r\n display: inline-block;\r\n padding: 2px 30px;\r\n color: #31261d;\r\n font-size: 12px;\r\n font-weight: 600;\r\n position:relative;\r\n z-index:3;\r\n\r\n &:hover{\r\n color:#fff;\r\n }\r\n\r\n &::before{\r\n @include transition(0.3s); width:0; left:0; top:0; height:100%; position:absolute; z-index:-1; content:\"\";\r\n background-color: $secondary-color;\r\n -webkit-transition-timing-function: cubic-bezier(.7,0,.2,1);\r\n -moz-transition-timing-function: cubic-bezier(.7,0,.2,1);\r\n -ms-transition-timing-function: cubic-bezier(.7,0,.2,1);\r\n -o-transition-timing-function: cubic-bezier(.7,0,.2,1);\r\n transition-timing-function: cubic-bezier(.7,0,.2,1);\r\n }\r\n\r\n &:hover:before{\r\n width:100%; right:0; left:auto;\r\n }\r\n \r\n }\r\n\r\n \r\n }\r\n .news-list-img{\r\n padding: 0; display:block; overflow:hidden; position:relative; background-color: $secondary-color;\r\n\r\n \r\n\r\n img{\r\n @include transition(0.3s);\r\n }\r\n\r\n &:hover img{\r\n @include scale(1.1); opacity:0.7;\r\n\r\n }\r\n\r\n &::before{\r\n\r\n width:70px; height:70px; position:absolute; left:-40px; top:-40px; content:\"\"; background:url(../img/body-pattern1.png) #fff;\r\n @include rotate(45deg); z-index: 2;\r\n }\r\n\r\n &::after{\r\n\r\n width:70px; height:70px; position:absolute; right:-40px; bottom:-40px; content:\"\"; background:url(../img/body-pattern1.png) #fff;\r\n @include rotate(45deg); z-index: 2;\r\n }\r\n\r\n \r\n }\r\n }\r\n }\r\n\r\n\r\n .static-banner-2{\r\n height: 300px;\r\n position: relative;\r\n background-color: #4d4d4d;\r\n padding: 70px 20px;\r\n color: #fff;\r\n padding-top: 70px;\r\n margin-bottom: 30px;\r\n z-index: 20;\r\n\r\n &.news-static{\r\n }\r\n \r\n @media #{$tablet-break-point}{\r\n \r\n padding-top:30px;\r\n \r\n .static-title{\r\n @include scale(0.8); padding:20px 0; padding-bottom:0;\r\n }\r\n \r\n .static-banner-menu{\r\n margin: 0 !important;\r\n }\r\n \r\n }\r\n \r\n \r\n \r\n .arrow-scroll{ z-index: 40; bottom:30px; top: auto;\r\n \r\n i{\r\n \r\n }\r\n }\r\n \r\n &.kurumsal{\r\n background: url(../img/kurumsal-banner.jpg) no-repeat top right; background-attachment: fixed;\r\n\r\n @media #{$tablet-break-point}{\r\n\r\n }\r\n }\r\n \r\n &::before{\r\n \r\n width: 100%; height: 60px; @include skewY(2deg); content: \"\"; position: absolute; bottom: -35px; left: 0; z-index: 10; \r\n background: url(../img/body-pattern1.png) repeat #fff;\r\n \r\n }\r\n &.contact::before{\r\n \r\n display:none;\r\n \r\n }\r\n &.contact{\r\n margin-bottom: 0;\r\n }\r\n \r\n .static-banner-menu{\r\n position: absolute; right: 5%; top: 50%; @include translate(-0%, -50%);\r\n \r\n \r\n \r\n li{\r\n display:block;\r\n \r\n a{\r\n color:#fff; display: block; line-height: 1.6em; padding: 6px 0; text-align: right; position: relative; @include transition(0.3s);\r\n }\r\n \r\n &:hover a{\r\n padding-right: 10px; color: $primary-color;\r\n }\r\n \r\n .sep{\r\n margin-left: 10px;\r\n }\r\n }\r\n \r\n @media #{$notebook-break-point}{\r\n position: relative; width: 100%; margin:30px 0; right: 0; top: 0; @include translate(0, 0); text-align: center;\r\n \r\n li{\r\n display: inline;\r\n \r\n a{\r\n display:inline-block;\r\n }\r\n }\r\n }\r\n }\r\n .static-title{\r\n color: #fff; text-align: center; font-size: 48px; letter-spacing: -1px; font-weight: 600;padding: 40px 0;\r\n \r\n .title-text{\r\n position:relative; display:inline-block; \r\n \r\n &::before{\r\n width: 95px; height: 2px; background-color: #fff; bottom:-20px; left: -40px; content:\"\"; position:absolute;\r\n }\r\n \r\n &::after{\r\n height: 112px; width: 2px; background-color: #fff; bottom:-40px; left: -20px; content:\"\"; position:absolute;\r\n }\r\n \r\n .slogan{\r\n background: url(../img/sprite.png) no-repeat -242px 0; width: 342px; height: 30px; display:block; position: absolute; bottom: -30px; left: 80px; font-weight: normal;\r\n \r\n &.with-text{\r\n background-image: none; font-size: 20px; left: 70px; width: 150px; display: block; height:auto;\r\n }\r\n }\r\n }\r\n \r\n }\r\n }\r\n\r\n\r\n .form-elements{\r\n\r\n .form-control{\r\n\r\n height: 50px;\r\n padding: 6px 12px;\r\n width: 100%;\r\n \r\n color: #555;\r\n background-color: transparent;\r\n \r\n border-radius: 0;\r\n \r\n }\r\n }\r\n \r\n \r\n\r\n /** acar Proje Sass\r\n \r\n \r\n \r\n