#slider{ display:none; } .fixed .navicon-button{ } /*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */ html { color: #1d2d3d; font-size: 1em; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none; } .noscroll {overflow: hidden; position: fixed; } .scroll {overflow: scroll; position: static;} /*Prevent changing the font size on rotation*/ html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:none; } html.fp-enabled, .fp-enabled body { overflow-x: hidden !important; } ::-moz-selection { background: #2BFFFF; text-shadow: none; } ::selection { background: #2BFFFF; text-shadow: none; } :focus { outline: none; } section *, section *::before, section *::after { transform: translate3d(0px, 0px, 0px); } *{ -webkit-overflow-scrolling: page-wrapper; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } audio,canvas,iframe,img,svg,video { vertical-align: middle;} fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } input, textarea { -webkit-appearance: none; border-radius: 0; } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } body { font-family: "Dosis", Helvetica Neue, sans-serif; overflow-x: hidden; } .wrapper { width: 90%; margin: 0 5%; } /* ============== MOBILE: Main ============== */ .main { padding: 30px 0; } .main article h1 { font-size: 2em; } .main aside { color: black; padding: 0px 5% 10px; } /* =============== ALL: IE Fixes =============== */ .ie7 .title { padding-top: 20px; } /* ========================================================================== Typography ========================================================================== */ .uppercase { text-transform: uppercase; } .x-light { font-weight: 100; } .light { font-weight: 200; } .book { font-weight: 300; } .medium { font-weight: 500; } .bold { font-weight: 900; } .left-align { text-align: left; } .center-align { text-align: center; } .right-align { text-align: right; } .bottom-align { display: table-cell; position: relative; vertical-align: bottom; } .x-small { font-size: 0.875em } /* 14px */ .small { font-size: 1em } /* 16px */ .normal { font-size: 1.125em } /* 18px */ .med-size { font-size: 1.5em; } /* 24px */ .large { font-size: 2.250em; } /* 36px */ .x-large { font-size: 3em; } /* 48px */ @font-face { font-family: 'glyphs'; src: url('fonts/glyphs.eot'); } @font-face { font-family: 'glyphs'; src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'); font-weight: normal; font-style: normal; } i { font-family: 'glyphs'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-be-nav:before { content: "\e603"; } .icon-fb-nav:before { content: "\e604"; } .icon-in-nav:before { content: "\e605"; } .icon-tw-nav:before { content: "\e606"; } .icon-facebook:before { content: "\e600"; } .icon-linkedin:before { content: "\e601"; } .icon-twitter:before { content: "\e602"; } header { padding-top: 15px; position:absolute !important; left:0; top:0; width:100%; padding-left:2%; padding-right:2%; } .header-container .fp-tableCell { height:auto !important; } #home { height:auto !important; } .mobile-pic{ position:relative; } .strelka{ background-image: url(../img/arrow-down.png); background-position: bottom center; background-repeat: no-repeat; background-size:100%; height:108px; width:35px; position:absolute; top:82%; left:0; right:0; margin: 0 auto; animation-timing-function: ease-in-out; animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; -moz-animation: bounce 2s infinite; -o-animation: bounce 2s infinite; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% {background-position:center bottom;} 40% {background-position: center 55%;} 60% {background-position: center 80%;} } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% {background-position:center bottom;} 40% {background-position: center 55%;} 60% {background-position: center 80%;} } @-o-keyframes bounce { 0%, 20%, 50%, 80%, 100% {background-position:center bottom;} 40% {background-position: center 55%;} 60% {background-position: center 80%;} } @keyframes bounce { 0%, 20%, 50%, 80%, 100% {background-position:center bottom;} 40% {background-position: center 55%;} 60% {background-position: center 80%;} } /* ========================================================================== Media Queries ========================================================================== */ .col { border:0px solid rgba(0,0,0,0); float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -moz-background-clip:padding-box !important; -webkit-background-clip:padding-box !important; background-clip:padding-box !important; } @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media { .avatar-bg { display:inline; -webkit-mix-blend-mode: hard-light; } .member-avatar { filter: grayscale(100%); -webkit-filter: grayscale(100%); } .member-avatar:hover { filter: grayscale(0); -webkit-filter: grayscale(0); } .member-avatar:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: " "; background: rgba(0,0,0,0.5); display: table; } } } @media screen and (min-width: 0px) { .content-wrap { margin: 0 auto; max-width: 1280px; width: 100%; height: 100%; } .row .col:first-child { margin-left:0; padding-left: 0; } .one-third { width: 33.3%; } .one-fourth { width: 25%; } .span_1 { width:23.5%; } .span_3 { width:74.5%; } .span_4 { margin-left:0; width:100%; } /* ============== MOBILE: Menu ============== */ #nav-list { position: relative; } nav ul { margin: 0; padding: 0; list-style-type: none; } #nav-menu ul { float: right;} #nav-menu a { color: #1d2d3d; display: inline; font-family: "Dosis"; font-weight: 600; text-align: right; text-decoration: none; text-transform: uppercase; } #nav-menu a:hover { background: none repeat scroll 0 0 #1d2d3d; color: white; font-weight: 600; padding: 0 10px 0 40px; transition: all 0.33s ease 0s; o-transition: all 0.33s ease 0s; -ms-transition: all 0.33s ease 0s; -moz-transition: all 0.33s ease 0s; -webkit-transition: all 0.33s ease 0s; } #nav-bg { background: none repeat scroll 0 0 #2BFFFF; display: block; height: 100%; position: absolute; top: 0; width: 60%; right: 0; z-index: -1; } #closeit { cursor: pointer; z-index: 4; padding: 0 !important; line-height: 0;} #closeit:hover{ background: none !important; } #appendx { width: 100%; } #reference { height: auto; position: relative; text-align: right; width: 30%; transition: none; } #reference p { margin: 10px; font-size: 1.25em; } #reference ul li i { color:#1d2d3d; } #reference ul li i:hover { color:#ed7117; } #reference a:hover { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 0; } .share { display: block; margin-top: 0 !important; } .share > span { display: inline; float: left; margin: 0 10px; } .share > p { float: left; margin: 0 !important; } /* ========================================================================== Hero Slider ========================================================================== */ #main-header { position: relative; } .sound-btn { background: url("/img/off.png") no-repeat; border: none; float: left; position: absolute; left: 10px; bottom: 0; width: 30px; height: 30px; } .audio-on { background: rgba(0, 0, 0, 0) url("/img/on.png") no-repeat scroll 0 0 / contain; } .audio-off { background: rgba(0, 0, 0, 0) url("/img/off.png") no-repeat scroll 0 0 / contain; } .audio-on, .audio-off { display: block; height: 30px; width: 30px; } .video-container { position: absolute; width: 100%; z-index: -1; } .video-container::after { background: rgba(0, 0, 0, 0) url("/img/arrow-down.png") no-repeat scroll 0 0 / 34px 52px; bottom: 0; content: ""; left: -50px; position: absolute; right: 0; top: 80%; transform: translateX(50%); -ms-transform: translateX(50%); -moz-transform: translateX(50%); -webkit-transform: translateX(50%); -webkit-animation: arrowbounce 1.5s infinite; -moz-animation: arrowbounce 1.5s infinite; animation: arrowbounce 1.5s infinite; } @keyframes arrowbounce { 0% {top: 80%;} 50% {top: 82%;} 100 {top: 80%;} } @-webkit-keyframes arrowbounce { 0% {top: 80%;} 50% {top: 82%;} 100 {top: 80%;} } @-moz-keyframes arrowbounce { 0% {top: 80%;} 50% {top: 82%;} 100 {top: 80%;} } .sy-slide { overflow: hidden; position: absolute; width: 100%; z-index: 2; } .sy-slide > img { background-size: cover; position: relative; top: -30%; width: 100%; height: 100%; } .sy-box {left: 0; position: absolute; top: 0;width: 100%;z-index: -1; } div.sy-caption-wrap .sy-caption { background-color: transparent; font-weight: bold; text-align: center; left: 0; } .hero-title { position: relative; z-index: -1; } .hero-title h1 { color: white; margin: 0 auto; text-align: center; width: 340px; } .cont-svg { max-width:100px; height: 100px; } #home { background: #ecf1f1 none repeat scroll 0 0; z-index: -1; } #services, #team { background: #ecf1f1; } #services li h1 { font-size: 2.25em; font-weight: 500; text-transform: uppercase; } #services > ul { padding: 0; margin: 0; } #services li { display: block; float: left; text-align: center; } #services section > p { font-size: 22px; font-weight: 300; } ul.service-wrapper { margin: 0 auto !important; max-width: 1600px; } .window:target { background: #ecf1f1; margin-top: 0; } .window { background: none repeat scroll 0 0 #ecf1f1; display: none; height: 100%; min-width: 100%; top: 0; overflow-x: auto; overflow-y: auto; position: absolute; z-index: 4; } .window.active { display: block; } .inactive{ display:none; } .close { border: medium none; background: none transparent; color: rgb(29, 45, 61); font-size: 100px; font-weight: 100; width: 60px; height: 60px; line-height: 0; padding: 0; position: absolute; left: 0; top: 0;} #home .navicon-button { position: relative; } .navicon-button { -moz-user-select: none; cursor: pointer; float: right; z-index: 3; right: 0%; display: inline-block; position: fixed; transition: all 0.25s ease 0s; } .navicon-button.x > span { display:none; } .navicon-button .navicon::before, .navicon-button .navicon::after { transition: all 0.25s ease 0s; -ms-transition: all 0.25s ease 0s; -moz-transition: all 0.25s ease 0s; -webkit-transition: all 0.25s ease 0s; } .navicon { background: rgb(255, 255, 255) none repeat scroll 0 0; border-radius: 0; height: 0.42rem; position: relative; transition: all 0.5s ease 0s; width: 4.5em; } .fixed .navicon{ background: #a590e1 none repeat scroll 0 0;)} .fixed .navicon::before, .fixed .navicon::after{ background: #a590e1 none repeat scroll 0 0;)} .navicon::before { top: 1.1rem; } .navicon::after { top: -1.1rem; } .navicon::before, .navicon::after { background: rgb(255, 255, 255) none repeat scroll 0 0; border-radius: 0; content: ""; display: block; height: 0.45rem; margin-left: 8px; position: absolute; transition: all 0.5s ease 0.25s; width: 3.5rem; z-index: -1; } .open.x .navicon::after { transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); } .open.x .navicon::before { transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .navicon-button.x.open > span { display: none; } .open.x .navicon { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; } .open:not(.steps) .navicon::before, .open:not(.steps) .navicon::after { top: 0 !important; background: #1d2d3d; } .open .navicon::before, .open .navicon::after { transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; } .service-btn { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid #979897; color: #919190; font-size: 1.5em; font-weight: 200; letter-spacing: 5px; height: 60px; padding: 0; text-transform: uppercase; transition: all 0.25s ease 0s; o-transition: all 0.25s ease 0s; ms-transition: all 0.25s ease 0s; -webkit-transition: all 0.25s ease 0s; -moz-transition: all 0.25s ease 0s; width: 238px; } .service-btn:hover { background: none repeat scroll 0 0 #9a92ff; color: white; font-weight: 600; } #enq-btn { display: table; margin: auto; text-align: center; } .blu-box { background-color: #2bffff; min-height: 240px; margin-bottom: 30px; } #box-1 { background: url("../img/pelagonija.jpg"); background-size: cover; } #box-2 { background: url("../img/traktori.jpg"); background-size: cover; } #box-3 { background: url("../img/website.jpg"); background-size: cover; } #box-4 { background: url("../img/packaging.jpg"); background-size: cover; } #box-5 { background: url("../img/branding.jpg"); background-size: cover; } #box-6 { background: url("../img/APPS.webp"); background-size: cover; } .height-box { min-height: 460px; } .box-project::before { top: 0; bottom: 0; left: 0; right: 0; content: " "; position: absolute; transition: all ease-in .5s; -ms-transition: all ease-in .5s; -moz-transition: all ease-in .5s; -webkit-transition: all ease-in .5s; } .hovered:hover::before { top: 0; bottom: 0; left: 0; right: 0; content: " "; position: absolute; opacity: 0.7; background: #9a92ff; } .hovered .link-border, .hovered .box-link { color: #ecf1f1; display: block; } .box-project { max-width: 640px; width: 100%; float: left; color: #1d2d3d; cursor: pointer; position: relative; background-position: center; } .box-title { font-weight: 300; text-transform: uppercase; } .hovered .box-title { color: #ecf1f1; } .box-category { font-weight: 200; } .box-link { font-weight: 500; text-decoration: none; color: #ffffff; letter-spacing: 6px; display: none; } .box-project.dark { background: #ED7117; } .box-project.dark::before { position: relative; } .link-border { background: none repeat scroll 0 0 #ecf1f1; border-style: none; height: 12px; width: 53px; display: none; margin-top: 80px; } .dark a { color: #ecf1f1; } /* Our Clients Section */ .logo-box { display: table-cell; float: left; height: 274px; position: relative; transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; vertical-align: middle; } .logo-box:hover { background: #a590e1 none repeat scroll 0 0; } .logo-box > img { display: table-cell; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); vertical-align: middle !important;} .container.clients { margin: auto; max-width: 1200px; position: relative; width: 100%; z-index: 0; } /*Team Section*/ .tm-member-container { display: table; margin: 0 auto; max-width: 1620px; text-align: center; width: 100%; } .tm-member ul { margin: 0; padding: 0; } .tm-member ul li { background-color: #ecf1f1 !important; box-shadow: 0 0 0 5px #ecf1f1; display: block; text-align: center; width: 26px; } .tm-member ul li i { font-size: 19px;} .tm-member ul li i:hover { color: #ed7117; } .member-avatar { background-color: #1d2d3d; border: medium none; -webkit-mix-blend-mode: luminosity; -moz-mix-blend-mode: luminosity; mix-blend-mode: luminosity; border-radius: 100px; -o-border-radius: 100px; -ms-border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; } .member-avatar:hover { -webkit-animation-name: avatar-thumb; -webkit-animation-duration: 1500ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: avatar-thumb; -moz-animation-duration: 1500ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: avatar-thumb; -ms-animation-duration: 1500ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; } @-webkit-keyframes avatar-thumb { 0% { -webkit-transform: scale(1) } 50% { -webkit-transform: scale(1.1) } 100% { -webkit-transform: scale(1) } } @-moz-keyframes avatar-thumb { 0% { -moz-transform: scale(1) } 50% { -moz-transform: scale(1.1) } 100% { -moz-transform: scale(1) } } @-o-keyframes avatar-thumb { 0% { -o-transform: scale(1) } 50% { -o-transform: scale(1.1) } 100% { -o-transform: scale(1) } } @keyframes avatar-thumb { 0% { transform: scale(1) } 50% { transform: scale(1.1) } 100% { transform: scale(1) } } .avatar-bg { background: #1d2d3d; max-width: 168px; overflow: hidden; z-index: 2; position: relative; box-shadow: 0 0 0 1px #ecf1f1 inset; border-radius: 100px; -o-border-radius: 100px; -ms-border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; } .shape { display: block; height: 211px; max-width: 211px; top: -20px; opacity: 0.2; position: absolute; z-index: 0; } .circle { left: -5px; } .circle-links { left: 180px; margin: 0; padding: 0; position: absolute; transform: translate(0, -40px); -ms-transform: translate(0, -40px); -moz-transform: translate(0, -40px); -webkit-transform: translate(0, -40px); } .tw-icon-ci { transform: translate(10px, -50px); -ms-transform: translate(10px, -50px); -moz-transform: translate(10px, -50px); -webkit-transform: translate(10px, -50px); } .fb-icon-ci { transform: translate(-3px, -18px); -ms-transform: translate(-3px, -18px); -moz-transform: translate(-3px, -18px); -webkit-transform: translate(-3px, -18px); } .in-icon-ci { transform: translateX(-45px); -ms-transform: translateX(-45px); -moz-transform: translateX(-45px); -webkit-transform: translateX(-45px); } .triangle { left: -16px; transform: scale(1.18, 1); -ms-transform: scale(1.18, 1); -moz-transform: scale(1.18, 1); -webkit-transform: scale(1.18, 1); width: 250px; } .triangle-links { margin: 0; padding: 0; position: absolute; top: 50px; left: -28px; } .triangle-links > li { margin-bottom: 20px; } .pentagon { left: -23px; top: -35px; transform: rotate(-25deg) scale(1.06); -ms-transform: rotate(-25deg) scale(1.06); -moz-transform: rotate(-25deg) scale(1.06); -webkit-transform: rotate(-25deg) scale(1.06); } .pentagon-links { transform: translate(160px, -83px); -ms-transform: translate(160px, -83px); -moz-transform: translate(160px, -83px); -webkit-transform: translate(160px, -83px); position: absolute; } .tw-icon-pen { transform: translate(8px, -50px); -ms-transform: translate(8px, -50px); -moz-transform: translate(8px, -50px); -webkit-transform: translate(8px, -50px); } .fb-icon-pen { transform: translate(12px, -20px); -ms-transform: translate(12px, -20px); -moz-transform: translate(12px, -20px); -webkit-transform: translate(12px, -20px); } .square { width: 190px; height: auto; left: -7px; top: 0; transform: rotate(18deg); -ms-transform: rotate(18deg); -moz-transform: rotate(18deg); -webkit-transform: rotate(18deg); } .square-links {position: absolute; } .tw-icon-sq { transform: translate(-6px, -8px); -ms-transform: translate(-6px, -8px); -moz-transform: translate(-6px, -8px); -webkit-transform: translate(-6px, -8px); } .fb-icon-sq { transform: translate(50px, -12px); -ms-transform: translate(50px, -12px); -moz-transform: translate(50px, -12px); -webkit-transform: translate(50px, -12px); } .in-icon-sq { transform: translate(100px, -20px); -ms-transform: translate(100px, -20px); -moz-transform: translate(100px, -20px); -webkit-transform: translate(100px, -20px); } .tm-member-container.slick-slider { position: relative; z-index: 0; } .slick-dots { display: table !important; margin: auto; padding: 0; } .slick-dots > li { display: block; float: left; line-height: 20px; opacity: 0.6;} .slick-active { opacity: 1 !important; } .slick-dots button { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; font-size: 0; border: medium none; color: rgb(237, 113, 23); } .slick-dots button::after { content: "•"; font-size: 60px; vertical-align: text-bottom; } button.slick-prev::before, button.slick-next::before { content: "" !important; } button.slick-prev, button.slick-next { height: 44px; width: 70px; } button.slick-prev { background: rgba(0, 0, 0, 0) url("/img/arrow-prev.png") no-repeat scroll 0 0; left: 5%;} button.slick-next { background: rgba(0, 0, 0, 0) url("/img/arrow-next.png") no-repeat scroll 0 0; right: 5%;} /*Subscribtion Form*/ #subscribe-form > form { margin: auto; text-align: center; } #subscribe-form { text-align: center; margin-bottom: 60px; } .sub-form input { height: 60px; font-size: 24px; text-transform: uppercase; } .sub-field { background: none repeat scroll 0 0 rgba(165, 144, 225, 0.2); transition: .4s all ease; -o-transition: .4s all ease; -ms-transition: .4s all ease; -moz-transition: .4s all ease; -webkit-transition: .4s all ease; border: 0 none; color: rgba(29, 45, 61, 0.3); padding: 10px; text-align: center; } .sub-field:focus { color: #1d2d3d; text-transform: lowercase; background: none repeat scroll 0 0 rgba(165, 144, 225, 0.4); outline-style:none; box-shadow:none; border-color:transparent; } .popup-msg { background: none repeat scroll 0 0 rgb(154, 205, 50); bottom: 25%; color: rgb(255, 255, 255); font-size: 20px; font-weight: 500; text-align: center; margin: 30px auto 0; padding: 20px 0; position: relative; display: none; } .sub-field.error { background: none repeat scroll 0 0 rgba(255, 69, 0, 0.6); } label.error { color: #ff4500; display: block; font-weight: 500; text-transform: uppercase; line-height: 60px; } .err-container.err-red { background: none repeat scroll 0 0 #ffffff; box-shadow: 0 0 0 2px #ff4500 inset; -ms-box-shadow: 0 0 0 2px #ff4500 inset; -moz-box-shadow: 0 0 0 2px #ff4500 inset; -webkit-box-shadow: 0 0 0 2px #ff4500 inset; } .sub-btn { border: 1px solid rgb(151, 152, 151); background: none transparent; display: table; padding: 0; font-weight: 300; color: rgb(151, 152, 151); transition: .25s all ease; -ms-transition: .25s all ease; -moz-transition: .25s all ease; -webkit-transition: .25s all ease; } .sub-btn:hover { background: none repeat scroll 0 0 #9a92ff; color: #ecf1f1; border: none; } /*Foooter*/ .ft-wrapper { margin: auto; max-width: 1280px; width: 90%; } .footer-container { background: #1d2d3d; padding: 0px 0 80px 0; } footer h2 { color: #ecf1f1; text-align: center; font-size: 2.25em; } #contact-email { margin-top: 60px; } #contact-email .err-red { margin-bottom: 2px; } #contact-email label.error { text-indent: 36px; } .err-red .form-field { box-shadow: 0 0 0 2px rgb(255, 69, 0) inset; } .form-field { background: none repeat scroll 0 0 #ecf1f1; border: medium none; color: rgba(29, 45, 61, 0.3); float: left; font-size: 24px; font-weight: 100; height: 60px; padding: 0; margin-bottom: 2px; text-indent: 36px; width: 100%; transition: all 0.25s ease 0s; -o-transition: all 0.25s ease 0s; -ms-transition: all 0.25s ease 0s; -moz-transition: all 0.25s ease 0s; -webkit-transition: all 0.25s ease 0s; outline-style:none; box-shadow:none; border-color:transparent; } .form-field:focus { box-shadow: 15px 0 #ed7117 inset; color: inherit; } .txt-field { box-sizing: border-box; height: 180px; padding: 20px 36px; text-indent: 0; word-wrap: normal; } .form-submit { background: rgba(236, 241, 241, .25); border: medium none; color: #FFFFFF; font-size: 24px; font-weight: 200; text-transform: uppercase; padding: 0; height: 60px; width: 100%; transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; } .form-submit:hover { background: rgba(237, 113, 23, 1); font-weight: bold; } .footer-info { padding: 0; display: table; margin: 10px auto; } .footer-info > li { border-right: 2px solid rgb(237, 113, 23); color: rgb(236, 241, 241); display: inline-table; font-size: 1.125em; font-weight: 100; line-height: 27px; margin-right: -2px; padding: 0 20px; } .footer-info > li:last-child { border-right: medium none; } } @media only screen and (min-width: 320px) { /* ==================== HEADER SECTION ==================== */ header { padding-top: 30px;} .header-container .fp-tableCell { display: block; vertical-align: top; } #logo {max-width: 150px;} #reference { float: right; position: relative; width: 100%; } #reference > ul { float: right !important; margin: 0; position: relative !important; } #reference li { float: right; margin: 10px 5px 0 0; } #nav-menu { background: none repeat scroll 0 0 #2BFFFF; position: fixed; overflow-y: scroll; z-index: 3; display: none; height: 100%; width: 100%; right: 0; top: 0; } #nav-menu a { font-size: 36px; } #nav-menu li { text-align: right; } #home .navicon-button { position: relative; top: -40px; } #toggle-nav { font-size: 20px; } #closeit svg { width: 40px; } .about { display: none; } .column { padding: 0 6%; } .span_2 { width: 100%; } .nav-group.fixed { background: rgba(29, 45, 61, 0.95) none repeat scroll 0 0; display: table; float: none; height: 50px; margin: auto; position: fixed; width: 100%; z-index: 2; } .navicon-button { top: 23px; text-indent: -99999px; } .navicon::before, .navicon::after { height: 0.12rem; width: 2.5rem; } .navicon::after { top: -0.8rem; } .navicon::before { top: 0.8rem; } .navicon { height: 0.12rem; width: 3.5em; } #logo { width: 60%; } .video-container, .sound-btn { display: none; } .hero-title { display: none; } div.sy-caption-wrap .sy-caption { max-width: 280px; padding: 0;} div.sy-caption-wrap { bottom: inherit; color: #ffffff; height: 100%; left: auto; width: 100%;} div.sy-slides-wrap .sy-caption { font-size: 25px; margin-top: 40px;} .sy-slide > img { top: 0; position: relative; width: auto !important; left: -20%;} .logo-box { width: 100%; } #box-1, #box-2, #box-3, #box-5 { background-position: center center; background-repeat: no-repeat; } /* ==================== SERVICES SECTION ==================== */ .span_1 { width: 100%; } #services { padding: 2em 0; } #services li { margin: 36px 0; } #services ul { margin: 0; display: table-row; padding: 0; } /*.window, #services h1 { font-size: 24px; text-transform: inherit; font-weight: 900; }*/ .window { padding-top: 100px; } .service-btn { font-size: 1.125em; } .content-wrap { margin: 0 auto; padding: 0 4.5%; width:auto; } .close { height: 50px; margin: 30px 0px 0 0;} .one-third { width: 100%; } .blu-box { margin-bottom: 20px; } .blu-box > h2 { margin: 0; padding: 20px; font-weight: 400; font-size: 24px; word-wrap: break-word; } .window .one-third:last-child { margin-bottom: 30px; } .last { display: table; height: 240px; table-layout: fixed; } .window section .service-btn { width: 100%; } .window h1 { font-size: 25px; margin-bottom: 30px; } .window .blu-box h1 { margin: 0; padding: 15px; } .blu-list li { border-left: 8px solid rgb(255, 255, 255); float: none !important; font-size: 18px; margin: 20px !important; padding-left: 10px; text-align: left !important; } .sub-form input { width: 100%; } .shading-bg { background: rgba(0, 0, 0, 0) url("/img/shading.png") no-repeat center top; opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0);} .shading-bg:hover { background-size: 33% auto; opacity: 1; transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1);} /* ==================== PORTFOLIO SECTION ==================== */ .box-project { height: auto; } .box-inner { display: table; margin: auto; position: relative; z-index: 2; top: 50px; } .dark .box-inner { top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .box-title { font-size: 2.5em; margin-top: 0; } .box-category { font-size: 1.8em; } footer h2 { font-size: 1.5em;} .box-link { font-size: 2em; } .res-top-margin { margin-top: 50px; } /* ==================== TEAM SECTION ==================== */ #team h1 { font-size: 2.25em; } .tm-member h4, p { font-weight: 500; color: #1d2d3d; } .tm-member { display: table; margin: 40px auto; position: relative; float: none; } .member-name { font-size: 1.125em; margin: 2.5em 0 0 0; } .member-major { font-size: 0.875em; margin: 0.8em 0; } .err-container.err-red { margin-bottom: 2px; } .sub-field { margin-bottom: 3px; } /******************* Footer *********************/ } @media only screen and (min-width: 480px) { nav ul li { display: inline; float: right; } #nav-menu { width: 70%; } #nav-menu ul { width: 360px; } .list-container li {width: 100%;} .oldie nav a { margin: 0 0.7%; } div.sy-slides-wrap .sy-caption { margin-top: 0px; font-size: 36px;} } @media only screen and (min-width: 640px) { .sy-slide > img { height: 100%; top: -20%; } .sy-slide > img { width: auto !important; left: 0;} .span_1 { width: 50%; } .window .col.one-third { padding-right: 20px;} .box-project { width: 50%; } .mc-field-group { display: table; width: 100%; max-width: 720px; margin: auto; } /*.sub-form input { float: left; }*/ .sub-field-width, .button.sub-btn { float: left; width: 33%; margin-right: 2px;} .button.sub-btn { margin-right: 0; } .blu-list li { font-size: 24px;} .clients .tm-section { display: block; } .logo-box { width: 50%; } .tm-section { display: table; margin: 0 auto; } .tm-member { float: none; } } @media only screen and (min-width: 768px) { #mobile-pic{ display:none; } #logo { max-width: 220px; z-index: 999; position: relative; width: 12%; } #slider { display: block; } /*CUSTOM CSS*/ .text{ position:absolute; right:2%; top:21%; color:#fff; font-size:20pt; font-weight:200; } .tiksluscarousel .progress { background-color: #fff; height: 1px; opacity: 0.95; top: 29%; } .carousel{ position:relative; } .carousel li{ position:relative; } .carousel li.one .top{ background-image: url(../img/slider/design_picture-01.png); background-position: center; background-repeat: no-repeat; background-position:-25px -50px; background-size: calc(100% + 50px); } .carousel li.two .top{ background-image: url(../img/slider/branding_picture-01.png); background-position: center; background-repeat: no-repeat; background-position:-25px -50px; background-size: calc(100% + 50px); } .carousel li.three .top{ background-image: url(../img/slider/print_picture-01.png); background-position: center; background-repeat: no-repeat; background-position:-25px -50px; background-size: calc(100% + 50px); } .carousel li.four .top{ background-image: url(../img/slider/web_picture-01.png); background-position: center; background-repeat: no-repeat; background-position:-25px -50px; background-size: calc(100% + 50px); } .slider_nav{ display:none !important; } .tiksluscarousel .nav_right { background: transparent; border-radius: 0; cursor: pointer; font-size: 24pt; height: auto; opacity: 1; position: absolute; right: 2%; text-align: center; top: 90%; width: auto } .tiksluscarousel .nav_left { background: transparent; border-radius: 0; cursor: pointer; font-size: 24pt; height: auto; opacity: 1; left: 2%; position: absolute; text-align: center; top: 90%; width: auto } .tiksluscarousel .nav_left span, .tiksluscarousel .nav_right span { color: #fff; font-size: 18pt; font-weight: normal; text-align: center; font-weight:200; } .our_work{ position:absolute; right:2%; top:83%; } .our_work>a{ border:1px solid #fff; padding:7px 25px; color:#fff; text-decoration:none; font-weight:200; } .our_work>a:hover{ border:1px solid #e3f9fd; background-color:#fff; } .one .our_work>a:hover{ color:#a590e1; } .two .our_work>a:hover{ color:#ff87bc; } .three .our_work>a:hover{ color:#e66851; } .four .our_work>a:hover{ color:#6ecdd1; } .strelka{ top:73%; } .tiksluscarousel .nav_left span img, .tiksluscarousel .nav_right span img{ margin-top:-8px; } #logo { float: left; max-width: 220px; } .col { padding:0 1.5%; } nav { background: none repeat scroll 0 0 #2BFFFF; display: none; height: 100%; position: absolute;right: 0; top: 0; width: 60%; } .sy-slide > img { top: 0; } .hero-title { display: block;} .hero-title h1 { font-size: 60px; line-height: 70px; } #home .navicon-button { top: 40px; text-indent: 0; } .window .col.one-third { padding-right: inherit; } .one-third { width: 33.3%; } .logo-box { width: 33.333%; } .tm-member { display: table-cell; float: left; margin: 40px; } .about { padding: 0 0 0 5%; } } @media only screen and (min-width: 980px) { .span_2 { width:49.0%; } .tm-member { float: left; } .about { display: block; } } @media only screen and (min-width: 1024px) { #toggle-nav { font-size: 28px; } #closeit svg { width: auto; } .video-container, .sound-btn { display: block; } .hero-slider { display: none; } .middle { padding: 10% 0; } #reference { top: 15%;} #services ul { display: block; } .box-title { font-size: 24px; } .box-title > br:first-child { display: none; } .box-category { font-size: 2.5em;} .box-link { font-size: 2.25em;} .nav-group.fixed > #toggle-nav { background: #1d2d3d; font-size: 20px; font-weight: 600; margin: 30px; padding: 10px 10px 5px; } .nav-group.fixed #toggle-nav > #sandwich { margin-bottom: 5px; } .window h1 { font-size: 2em; margin-bottom: 80px; } } @media only screen and (min-width: 1140px) { .strelka{ top:83%; } .text { font-size: 34pt; } .our_work > a { font-size: 20pt; padding: 7px 45px; } .fixed .navicon-button { right: 2%; } .tiksluscarousel .nav_left span, .tiksluscarousel .nav_right span { font-size: 30pt; } .wrapper { width: 1000px; /* 1140px - 10% for margins */ margin: 0 auto; } #services { padding: 0; } .nav-group.fixed { background: none; } .navicon-button { top: 50px; text-indent: 0; } } @media only screen and (min-width: 1280px) { #main-header header { padding-top: 33px; position: relative;} #logo { max-width: 220px; } #nav-menu a { font-size: 46px;} #home .navicon-button { top: 40px; } .sy-caption-wrap .hero-title h1 { font-size: 80px; line-height: 80px; } .hero-title { margin: 0;} #menu-container { display: table; padding: 0 10%; position: relative; /*top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%);*/ width: 100%; } #reference ul li i { font-size: 50px; letter-spacing: 15px; } .span_1 { width: 25%; } .wrapper { width: 1200px;} .box-project { width: 33.333%; } .close {margin: 60px 0 0 60px;} .sy-caption-wrap { top: 14em; } } @media only screen and (min-width: 1445px) { #logo {max-width: 280px; width: 100%; } .hero-title { margin-top: 30px;} .sy-caption-wrap .hero-title h1 { font-size: 100px; line-height: 90px; } .logo-box { width: 274px; } .tm-member { margin: 50px; } } @media only screen and (min-width: 1800px) { .text { font-size: 50pt; } } /* ========================================================================== Helper classes ========================================================================== */ .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ========================================================================== Print styles ========================================================================== */ @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important;} a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")";} abbr[title]:after { content: " (" attr(title) ")"; } a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }