/*************************************************************/ /* Name:off-on - Landing Page */ /* Author:off-on design */ /* Description:off-on design - HTML5 Landing Page Responsive */ /* Version:1.0 */ /*************************************************************/ @charset "utf-8"; @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic); @import url(http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900); /******************************************************** GENERAL *******************************************************************************************/ body { font-family:Roboto, sans-serif; font-size:18px; color:#5d5e5f; font-weight:100; overflow-x:hidden; } h1,h2,h3, h4,h5,h6 { font-family:Roboto, sans-serif; font-weight:100; } a, a:hover, a:focus { outline:none !important; text-decoration:none; } a { color:#5AA9CE; text-decoration:none; } a:hover, a:focus { color:#5AA9CE; text-decoration:none; } a:focus, .btn:focus { outline:none; } p { font-size:16px; line-height:24px; font-weight:300; margin-bottom:20px; } .bg-transparent a { color:#fff; text-decoration:none; } .bg-transparent a:hover, .bg-transparent a:focus { color:#fff; text-decoration:none; } .lead { font-size:20px; line-height:28px; font-weight:100; letter-spacing:0.02em; margin-top:40px; margin-bottom:40px; } .primary { color:#5AA9CE; } /******************************************************** MAIN LAYOUT ***************************************************************************************/ #backgrounds { z-index:0; } #page-loader { width:100%; height:100%; position:fixed; background:#FFF; z-index:9999; } #page-loader .loader-logo { width:250px; margin:-35px auto 0; top:30%; position:relative; display:block; text-transform:none; font-size:50px; line-height:70px; font-weight:400; text-align:center; z-index:2; } #page-loader .loader-logo span { font-size:50px; font-weight:100; } #page-loader .page-loader-gif { width:70px; height:70px; margin-top:-64px; margin:0 auto; top:40%; display:block; position:relative; background:url('../images/loading.gif') no-repeat; z-index:1; } #page-loader .color-logo { font-weight:400; color:#FB0; } #color-overlay { width:100%; height:100%; top:0; left:0; position:fixed; /*background-image:url('../images/overlay-6x6.png');*/ background-color:#625837/*757575*/; filter:alpha(opacity=70); opacity:0.3; z-index:-99999; } .img-center { margin:20px auto; } .padding-bottom { padding-bottom:80px; } .bg-light { background:#FFF; } .bg-transparent { padding:60px 0 40px; background:transparent; border-top:60px solid transparent; border-bottom:60px solid transparent; color:#FFF; } .no-rgba .bg-transparent { padding:120px 0 100px; } .no-overlay .bg-transparent { background:rgba(0,0,0,0.4); } #main-nav a.ir-logo { width:200px; height:50px; margin:0; margin-top:5px; padding:0; text-indent:200%; white-space:nowrap; overflow:hidden; background:none; } #main-nav a.ir-logo span { color:transparent; font:0/0 a; } .navbar { margin:0; border-radius:0; } .section-header { margin-top:170px; margin-bottom:60px; text-align:center; position:relative; border-top:1px dotted #FB0/*5AA9CE*/; border-bottom:1px dotted #FB0/*5AA9CE*/; } .section-icon { width:0px; height:0px; margin-left:-40px; top:-160px; left:50%; display:inline-block; position:absolute; text-align:center; background-color:#5AA9CE; border-radius:50%; z-index:1; overflow:hidden; } .section-icon [class*=fa] { line-height:80px; font-size:32px; color:#FFF; } .section-title { margin:0px; padding:0 40px; position:relative; top:-35px; display:inline-block; line-height:64px; font-size:50px; font-weight:100; background:#FFF; text-align:center; text-transform:uppercase; color:#7C7C7C; } .section-description { margin-top:-10px; } /******************************************************** BUTTONS *******************************************************************************************/ .btn-theme { margin-bottom:50px; color:#7C7C7C ; background-color:transparent; padding:10px 50px; font-size:20px; font-weight:300; letter-spacing:1px; text-transform:uppercase; border:1px solid #FB0; border-radius:0px; -webkit-transition:all 0.5s ease-out; transition:all 0.5s ease-out; } .btn-theme:hover, a.btn-theme:hover { cursor:pointer; color:#FFF; background-color:#FB0; } .btn-theme:active, .btn-theme:focus, a.btn-theme:active, a.btn-theme:focus { color:#fff; } .btn-theme [class*=fa] { margin-right:10px; } .bg-transparent .btn-theme { margin:0; background:transparent; border:1px solid #FB0; border-radius:0px; font-size:21px; padding:15px 20px; text-decoration:none; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; } .bg-transparent .btn-theme:hover { opacity:1; background:#FB0; color:#FFF; } /******************************************************** NAVIGATION ****************************************************************************************/ #main-nav { background:transparent; background:#FFF; color:#555; box-shadow:0 0 0px transparent; opacity:0.85; } #main-nav .navbar-toggle { border:1px solid rgba(255,255,255,0.5); border-radius:0; } #main-nav .navbar-brand .logo { width:180px; margin-top:1px; margin-right:5px; position:relative; display:inline; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; } #main-nav .icon-bar { background:#FFF; } .navbar-brand, .navbar-brand:hover, .navbar-brand:active, .navbar-brand:focus { padding:0 10px; font-size:28px; line-height:54px; font-weight:500; color:#555; -webkit-transition:font-size .2s ease-out; transition:font-size .2s ease-out; } .navbar-brand span { font-size:75%; font-weight:300; } #main-nav.scrolled .navbar-brand { font-size:24px; font-weight:100; color:#FFF; } #main-nav.scrolled .navbar-brand:hover { color:#FC0; } #main-nav.scrolled { background:#3d3304; border-bottom:1px solid #FB0; } #main-nav.scrolled .navbar-toggle { color:#5AA9CE; border-color:#5AA9CE; } #main-nav.scrolled .navbar-toggle .icon-bar { background:#5AA9CE; } #main-nav.scrolled .navbar-brand .logo { width:150px; margin-right:5px; top:1.5px; position:relative; display:inline; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; } #main-nav .container { padding:20px; -webkit-transition:padding 0.3s ease-out; transition:padding 0.3s ease-out; } #main-nav.scrolled .container { padding:5px 20px; } #main-nav .nav a { position:relative; z-index:1; } #main-nav .nav a, #main-nav .nav a:active, #main-nav .nav a:hover { padding:0px 10px; font-size:20px; line-height:54px; font-weight:300; background:transparent; color:#555; } #main-nav .nav a:before { display:block; position:absolute; bottom:-12px; left:0px; margin-left:-2px; content:""; width:0; height:4px; background:#FB0/*5AA9CE*/; -webkit-transform-origin:0% 100%; transform:none; transform-origin:0% 100%; z-index:-1; opacity:0; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } #main-nav .nav a:hover:before { width:100px; opacity:1; } #main-nav .nav .active a:before { width:100px; opacity:1; } #main-nav.scrolled .nav a, #main-nav.scrolled .nav a:hover { color:#FFF; } #main-nav.scrolled .nav .active a { color:#FC0; } .no-csstransforms #main-nav .nav a:before { display:none; } .no-csstransforms #main-nav .nav a:hover, .no-csstransforms #main-nav .nav .active a { color:#5AA9CE; } #main-nav li { width:100px; margin:0 10px; border:2px solid transparent; background:transparent; text-align:center; } #main-nav li:active { width:100px; margin:0 10px; border:2px solid transparent; text-align:center; } #main-nav .resp li { width:190px; margin:0 10px; border:2px solid transparent; background:transparent; text-align:center; } #main-nav .resp li:active { width:190px; margin:0 10px; border:2px solid transparent; text-align:center; } #main-nav .dropdown-menu a { font-size:14px; } /******************************************************** HEADER ********************************************************************************************/ .jumbotron { background:transparent; color:#fff; padding:0; margin-bottom:0; min-height:500px; } .jumbotron .container { position:relative; top:0; } .jumbotron .container.scale-in { opacity:0; -webkit-transform:scale(0.5); -moz-transform:scale(0.5); -ms-transform:scale(0.5); transform:scale(0.5); } .jumbotron .container.scale-in.in { opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transition:-webkit-transform .6s cubic-bezier(.17,.89,.67,1.57), opacity .6s ease-out; transition:transform .6s cubic-bezier(.17,.89,.67,1.57), opacity .6s ease-out; transition-delay:0.5s; } .jumbotron .message-box { margin:0 auto; background:transparent; padding:20px 0; } .jumbotron .first-line { text-align:center; } .jumbotron .second-line { text-align:center; overflow:hidden; border:none; box-shadow:none; background:transparent; margin:0; padding:0; } .jumbotron .first-line p { display:inline-block; margin:0; padding:0; font-size:55px; font-weight:300; line-height:48px; letter-spacing:0.05em; word-spacing:0.05em; text-transform:uppercase; } .jumbotron .second-line p { margin:0; padding:10px; font-size:83px; line-height:75px; font-weight:100; letter-spacing:5px; word-spacing:0.06em; text-transform:uppercase; } .jumbotron .second-line p.second { font-size:100px; color:#FC0; font-weight:100; letter-spacing:20px; } .jumbotron .home-slider .slides li { opacity:0; -webkit-transition:opacity 0.4s ease-out; transition:opacity 0.4s ease-out; } .no-csstransitions .jumbotron .home-slider .slides li { opacity:1; } .jumbotron .home-slider .slides li.flex-active-slide, .jumbotron .home-slider .slides li.clone { opacity:1; } .loading-container { padding:55px 0; text-align:center; text-align:center; overflow:hidden; } .spinner { width:40px; height:40px; margin:100px auto; position:relative; } .h4-body-title { font-size:18px; color:#4b4b4b; font-weight:normal; } /******************************************************** SERVICES ******************************************************************************************/ #services { top:0px; } #services .item { padding:30px; } #services .item h3 { font-size:21px; letter-spacing:0.02em; margin-bottom:20px; font-weight:300; } #services .item .icon { width:160px; height:160px; margin:0 auto 40px; background:#625837; border-radius:50%; opacity:0.85; } #services .item:hover .icon { background:#FB0; transition:background 0.4s ease-out; } #services .item [class*=fa] { margin-left:2px; line-height:164px; font-size:44px; color:#FB0; -webkit-transition:-webkit-transform .4s ease-out,color .4s ease-out; transition:transform .4s ease-out,color .4s ease-out; } #services .item:hover [class*=fa] { color:#FFF; -webkit-transform:scale(1.2); transform:scale(1.2); -webkit-transition:-webkit-transform .6s cubic-bezier(.17,.89,.67,4),color .4s ease-out; transition:transform .6s cubic-bezier(.17,.89,.67,4),color .4s ease-out; } #services .item h4 { padding:10px 60px; margin:0; border-bottom:1px dotted #625837; } #services .item:hover h4 { padding:10px 60px; margin:0; border-bottom:1px dotted #FB0; -webkit-transition:all 0.4s ease-out; transition:all 0.4s ease-out; } /******************************************************** MESSAGE *******************************************************************************************/ .cta .cta-message p { padding:0 20px; font-size:22px; line-height:32px; } .cta .cta-button { padding:0; } /******************************************************** ABOUT *********************************************************************************************/ #about .lead-member .member-title { position:relative; top:-20px; } #about .member .img-wrapper { width:416px; height:277px; margin:0 auto; position:relative; } #about .member img { position:relative; max-width:100%; } #about .member .main-img, #about .member .main-img-hover { display:block; } #about .member .main-img { position:relative; opacity:1; z-index:1; filter:grayscale(100%); transition:opacity .75s ease-in-out; -moz-transition:opacity .75s ease-in-out; -webkit-transition:opacity .75s ease-in-out; } #about .member .main-img:hover { opacity:0; z-index:1; cursor:default; } #about .member .main-img-hover { position:absolute; opacity:1; z-index:0; left:0; top:0; } #about .member-title h2 { font-size:24px; color:#777; } #about .btn { margin-top:20px; display:inline-block; position:relative; top:15px; color:#5AA9CE; text-decoration:none; font-size:28px; line-height:28px; z-index:1; } #about .btn:hover { text-decoration:none; font-size:28px; } #about .btn [class*=fa] { margin-right:0px; font-size:18px; line-height:30px; background:transparent; } #about .btn span { margin-left:10px; vertical-align:bottom; color:#777; text-decoration:none; font-size:20px; font-family:Roboto; line-height:30px; font-weight:300; } #about .btn:hover span { color:#FFF; -webkit-transition:all 0.5s ease-out; transition:all 0.5s ease-out; } #about .btn-theme { margin-bottom:50px; color:#7C7C7C ; background-color:#FFF; padding:10px 50px; font-size:20px; font-weight:300; letter-spacing:1px; text-transform:uppercase; border:1px solid #FB0; border-radius:0px; -webkit-transition:all 0.5s ease-out; transition:all 0.5s ease-out; } #about .btn-theme:hover, #about a.btn-theme:hover { cursor:pointer; color:#FFF; background-color:#FB0; } #about .member-details { margin:0; padding:30px; background:#FAFAFA; border:1px solid #F5F5F5; border-radius:3px; } #about .member-details p { text-align:left; color:#999; font-size:15px; } #about .member-socials { list-style:none; text-align:center; margin:0; padding:0; } #about .member-socials li { display:inline; margin:0 2px; } #about .member-socials li a { display:inline-block; padding:0; background:#FFF; width:50px; height:50px; font-size:24px; line-height:50px; color:#5AA9CE; border-radius:50%; -webkit-transition:all .3s ease-out; transition:all .3s ease-out; } #about .member-socials li a:hover { background:#5AA9CE; color:#fff; } /******************************************************** PORTFOLIO *****************************************************************************************/ #filter-works ul { list-style:none; padding:0; margin:0; text-align:center; } #filter-works ul li { display:inline-block; padding:0; line-height:24px; background:transparent; margin:0; margin-left:5px; margin-bottom:10px; } #filter-works ul [class*=fa] { margin-right:5px; } #filter-works ul [class*=fa-check] { position:relative; left:1px; } #filter-works ul li a { display:block; font-size:14px; text-transform:uppercase; padding:10px 15px; border-radius:3px; transition:all .2s ease-out; } #filter-works ul li a, #filter-works ul li a:active, #filter-works ul li a:hover { line-height:24px; font-weight:300; background:transparent; color:#333; text-decoration:none; background:#f5f5f5; } #filter-works ul li.active a, #filter-works ul li:hover a { color:#fff; background:#FB0/*5AA9CE*/; } #filter-works ul li.active a [class*=fa], #filter-works ul li:hover a [class*=fa] { color:#5AA9CE; } .filter-results { margin-top:30px; display:none; color:#5AA9CE; } .masonry-wrapper { margin:0 auto; padding:0; padding-top:20px; overflow:hidden; } #projects-container { margin:0 auto; visibility:hidden; } .project-item { display:block; position:relative; margin:0; margin-bottom:20px; width:350px; background:#625837; border:1px solid #ccc; border-radius:5px; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); box-shadow:2px 2px 2px #ccc; opacity:1; filter:alpha(opacity=100); overflow:hidden; z-index:10; } .project-item.filtered { -moz-transform:scale(0); -ms-transform:scale(0); transform:scale(0); opacity:0; filter:alpha(opacity=0); z-index:0; } .project-item img { z-index:1; -webkit-transform:scale(1) rotate(0); transform:scale(1) rotate(0); -webkit-transition:all .6s ease-out; transition:all .6s ease-out; } .project-item:hover img, .project-item.active img { -webkit-transform:scale(1.3) rotate(-3deg); transform:scale(1.3) rotate(-3deg); } .project-item:nth-child(2n):hover img, .project-item:nth-child(2n).active img { -webkit-transform:scale(1.3) rotate(3deg); transform:scale(1.3) rotate(3deg); } .project-item .details { position:relative; margin:0; padding:20px; text-align:center; color:#FFF; background:#777; border-bottom:3px solid #5AA9CE; border-color:transparent; z-index:2; -webkit-transition:border-color .5s ease-out; transition:border-color .5s ease-out; } .project-item .details h3 { margin:0; font-weight:300; -webkit-transform:scale(1); transform:scale(1); -webkit-transition:-webkit-transform .5s ease-out; color:#FFF; } .project-item .details small { font-weight:100; } .project-item a:hover, .project-item a:active, .project-item a:focus { text-decoration:none; } .project-item:hover .details, .project-item.active .details { border-bottom:5px solid #FA0; } .project-item:hover h3, .project-item.active h3 { -webkit-transform:scale(1.2); transform:scale(1.2); transition:all 0.5s ease-out; } .masonry, .masonry .masonry-brick { transition-timing-function:ease-in-out; -webkit-transition-duration:0.7s; -moz-transition-duration:0.7s; -ms-transition-duration:0.7s; -o-transition-duration:0.7s; transition-duration:0.7s; } .masonry { -webkit-transition-property:height, width; -moz-transition-property:height, width; -ms-transition-property:height, width; -o-transition-property:height, width; transition-property:height, width; } .masonry .masonry-brick { -webkit-transition-property:left, right, top, -webkit-transform, opacity; -moz-transition-property:left, right, top, -moz-transform, opacity; -ms-transition-property:left, right, top, -ms-transform, opacity; -o-transition-property:left, right, top, -o-transform, opacity; transition-property:left, right, top, transform, opacity; } /******************************************************** PROJECT PREVIEW ***********************************************************************************/ #preview-loader { display:block; position:fixed; top:-200px; right:-400px; width:0; height:0; border:200px solid transparent; border-top:200px solid #FB0; z-index:9999; -webkit-transition:top .4s ease-out, right .4s ease-out; transition:top .4s ease-out, right .4s ease-out; } #preview-loader.show { top:0; right:-200px; } #preview-loader::before, #preview-loader::after { position:absolute; bottom:100px; left:-60px; display:block; border:7px solid #fff; border-radius:50%; content:''; } #preview-loader::before { margin-left:-40px; width:80px; height:80px; border-right-color:rgba(255,255,255,0.4); border-left-color:rgba(255,255,255,0.4); } #preview-loader::after { bottom:120px; margin-left:-20px; width:40px; height:40px; border-top-color:rgba(255,255,255,0.4); border-bottom-color:rgba(255,255,255,0.4); } #preview-loader.show::before { -webkit-animation:rotation 3s linear infinite; animation:rotation 3s linear infinite; } #preview-loader.show::after { -webkit-animation:rotation 1s linear infinite; animation:rotation 1s linear infinite; } @-webkit-keyframes rotation { 0% { -webkit-transform:rotate(0deg); } 50% { -webkit-transform:rotate(180deg); } 100% { -webkit-transform:rotate(360deg); }} @keyframes rotation { 0% { transform:rotate(0deg); } 50% { transform:rotate(180deg); } 100% { transform:rotate(360deg); }} .no-cssanimations #preview-loader::after, .no-cssanimations #preview-loader::before { display:none; } .no-cssanimations #preview-loader .loader-gif { display:block; position:absolute; width:48px; height:48px; top:-160px; left:-80px; background:url('../assets/loader.gif') no-repeat; z-index:10; } #project-preview-wrapper { display:none; } #project-preview { color:#fff; -webkit-transform:scale(0); transform:scale(0); -webkit-transition:all .6s ease-out; transition:all .6s ease-out; } #project-preview.open { -webkit-transform:scale(1); transform:scale(1); } .no-overlay #project-preview-wrapper { background:rgba(0,0,0,0.4); } #project-preview h1, #project-preview h2, #project-preview h3, #project-preview h4, #project-preview h5, #project-preview h6 { font-weight:300; text-transform:uppercase; letter-spacing:0.02em; } #project-preview p { font-weight:300; letter-spacing:0.02em; } #project-preview a { color:#FFF; text-decoration:underline; } #project-preview a:hover, #project-preview a:focus { color:#FFF; text-decoration:none; } .preview-header { margin:40px 0; position:relative; border-bottom:1px solid #FFF; } .close-preview { position:absolute; top:0; right:0; font-size:45px; font-weight:100; line-height:34px; color:#FFF; cursor:pointer; padding:0 10px; transition:transform .5s ease-out; } .close-preview:hover { font-size:75px; color:#F40; font-weight:300; transition:all 0.3s ease-out; } #preview-content { padding:20px 0 40px; } #preview-details h2 { margin-top:0; } #preview-details ul { list-style:none; padding:0; margin:20px 0; } #preview-details li { padding:7px 0; font-size:16px; font-weight:400; letter-spacing:0.02em; border-bottom:1px dotted #fff; } #preview-details span { font-weight:500; font-style:italic; margin-right:10px; } #preview-details p { margin-right:10px; font-weight:300; float:right; font-style:normal; } .flexslider { margin:0 0 20px; padding:0 15px; background:transparent; border:none; box-shadow:none; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .flex-direction-nav { display:none; } .flex-control-nav { width:100%; position:absolute; bottom:-40px; text-align:center; } .flex-control-nav li { margin:0 6px; display:inline-block; zoom:1; } .flex-control-paging li a { padding:0px; width:16px; height:16px; display:block; background:transparent; cursor:pointer; text-indent:-9999px; border:2px solid #fff; -webkit-border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; border-radius:20px; box-shadow:none; } .flex-control-paging li a:hover { background:#fff; } .flex-control-paging li a.flex-active { background:#fff; cursor:default; } /******************************************************** TESTIMONIALS **************************************************************************************/ #testimonials { padding-bottom:80px; } #testimonials .quote-icon { padding-top:6px; text-align:center; } #testimonials .fa-quote-left { font-size:48px; margin-bottom:20px; } #testimonials a:hover, #testimonials a:active, #testimonials a:focus { text-decoration:none; } #testimonials .testimonial { font-size:22px; line-height:32px; font-weight:300; text-align:center; word-spacing:5px; margin-bottom:40px; } #testimonials .tweet a:hover { text-decoration:underline; } #testimonials .client-img { width:auto; margin:0 auto; } #testimonials .client { font-size:16px; font-weight:300; margin-bottom:15px; text-align:center; } #testimonials .client span { font-style:italic; } #testimonials-slider { border:none; box-shadow:none; background:transparent; margin:0; padding:0; } #testimonials-slider .flex-direction-nav { display:block; position:absolute; width:100%; top:20px; right:0; } #testimonials-slider .flex-direction-nav li { display:inline; } #testimonials .flex-direction-nav .flex-prev, #testimonials .flex-direction-nav .flex-next { background:transparent; background-image:none; display:inline; opacity:1; text-indent:0; position:absolute; top:0; width:44px; height:44px; padding:0; padding-left:12px; margin:0; margin-left:7px; font-size:42px; line-height:38px; color:#fff; border-radius:50%; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; } #testimonials .flex-direction-nav .flex-prev { left:-100px; } #testimonials .flex-direction-nav .flex-next { right:-100px; text-align:right; padding-right:12px; } #testimonials-slider .flex-direction-nav a:hover, #testimonials-slider .flex-direction-nav a:active, #testimonials-slider .flex-direction-nav a:focus { text-decoration:none; } #testimonials-slider .flex-direction-nav a:hover { background:#fff; color:#5AA9CE; } /******************************************************** TWITTER *******************************************************************************************/ #twitter a:hover, #twitter a:active, #twitter a:focus { text-decoration:none; } #twitter h1 { position:relative; } #twitter .tweet { font-size:22px; line-height:32px; font-weight:300; text-align:center; word-spacing:5px; margin-bottom:40px; } #twitter .timePosted { font-size:16px; font-weight:300; margin-bottom:15px; text-align:center; } #twitter .interact { font-size:21px; font-weight:300; text-align:center; } #twitter .interact a { margin-right:6px; color:#fff; text-decoration:none; } #twitter .twitter-icon { padding-top:6px; text-align:center; } #twitter .fa-twitter { font-size:48px; margin-bottom:10px; } #twitter-slider { border:none; box-shadow:none; background:transparent; margin:0; padding:0; } #twitter-slider .flex-direction-nav { display:block; position:absolute; width:100%; top:20px; right:0; } #twitter-slider .flex-direction-nav li { display:inline; } #twitter .flex-direction-nav .flex-prev, #twitter .flex-direction-nav .flex-next { background:transparent; background-image:none; display:inline; opacity:1; text-indent:0; position:absolute; top:0; width:44px; height:44px; padding:0; padding-left:12px; margin:0; margin-left:7px; font-size:42px; line-height:38px; color:#fff; border-radius:50%; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; } #twitter .flex-direction-nav .flex-prev { left:-100px; } #twitter .flex-direction-nav .flex-next { right:-100px; text-align:right; padding-right:12px; } #twitter-slider .flex-direction-nav a:hover, #twitter-slider .flex-direction-nav a:active, #twitter-slider .flex-direction-nav a:focus { text-decoration:none; } #twitter-slider .flex-direction-nav a:hover { background:#fff; color:#5AA9CE; } /******************************************************** CONTACT *******************************************************************************************/ #contact { background:#FFF url('../images/contact/contact_bg_03.jpg') no-repeat fixed; /*position:absolute;*/ z-index:0; } #contact a { color:#625837; text-decoration:none; } #contact a:hover, #contact a:focus { color:#5AA9CE; text-decoration:none; } #contact .section-header { width:100%; margin-top:170px; margin-bottom:0px; text-align:center; position:relative; border-top:0px dotted #FB0; border-bottom:0px dotted #FB0; } #contact .section-title { width:100%; margin:0 auto; padding:0 40px; position:relative; top:-35px; display:inline-block; line-height:64px; font-size:50px; font-weight:100; background:none; text-align:center; text-transform:uppercase; color:#7C7C7C; } #contact .section-line { width:100%; margin-top:0px; margin-bottom:0px; text-align:center; position:relative; border-top:1px dotted #FB0; border-bottom:0px dotted #FB0; } #contact .bg { } #contact .col-md-5 { margin:0px; padding:0px; } #contact h3 { margin-bottom:20px; } #contact ul { padding:0; margin:0 0 40px; list-style:none; } #contact ul li { margin:5px 0; list-style:none; } #contact ul li span { margin-right:10px; } #contact ul li span [class*=fa] { color:#5AA9CE; } #contact-form .form-group label { display:none; font-size:18px; line-height:24px; font-weight:100; text-transform:uppercase; } #contact-form.no-placeholder .form-group label { display:block; } #contact-form .controls { padding:0; margin-bottom:30px; border-bottom:0px solid #CACACA; } #contact-form .controls:focus { background:#FFF; border-color:#FB0; -webkit-transition:all .3s ease-out; transition:all .3s ease-out; } #contact-form .form-control:focus + [class*=fa] { color:#FB0; opacity:1; -webkit-transition:all .5s ease-in; transition:all .5s ease-in; } #contact-form .form-control { background:#FDFDFD; border:0px solid #FB0; border-bottom:1px solid #CACACA; border-radius:0; outline:none; box-shadow:none; height:62px; font-size:20px; line-height:32px; font-weight:100; padding-left:64px; -webkit-transition:border-bottom .3s ease-out; transition:border-bottom .3s ease-out; } #contact-form .form-control:focus { background:#FFF; border:#transparent; border-bottom:3px solid #FB0; outline:none; box-shadow:none; -webkit-transition:border-bottom 0.5s ease-in; transition:border-bottom 0.5s ease-in; } #contact-form .form-group { position:relative; } #contact-form .form-group [class*=fa] { display:block; width:64px; position:absolute; top:0; left:5px; color:#AEAEAE; font-size:24px; line-height:62px; text-align:center; font-weight:300; } #contact-form.no-placeholder .form-group [class*=fa] { top:30px; } #contact-form textarea.form-control { height:auto; max-width:100%; min-width:100%; font-size:20px; line-height:32px; padding-top:14px; } #contact-form .error-message { padding:5px 0; position:absolute; top:100%; right:0; font-size:14px; font-weight:300; color:#FF0000; z-index:10; } .map { position:relative; left:0%; } .map .spot { display:inline-block; position:absolute; top:30%; left:30%; margin:-4% 0 0 18.5%; padding:7px; } .map .spot span { display:block; width:8px; height:8px; background:#FB0; border-radius:50%; } .map .spot span:after { display:block; content:""; position:absolute; top:5px; left:5px; width:12px; height:12px; border:1px solid #FB0; border-radius:50%; opacity:1; -webkit-transform:scale(1); transform:scale(1); } .map .spot span:after { -webkit-animation:scaling 2.2s linear infinite; animation:scaling 2.2s ease-out infinite; } @-webkit-keyframes scaling { 0% { -webkit-transform:scale(0); opacity:0; } 40% { -webkit-transform:scale(3); opacity:0.8; } 80% { -webkit-transform:scale(0); opacity:0; } } @keyframes scaling { 0% { transform:scale(0); opacity:0;} 40% { transform:scale(3); opacity:0.8;} 80% { transform:scale(0); opacity:0;} } /******************************************************** GALLERY *******************************************************************************************/ #gallery .section-header { width:100%; margin-top:50px; margin-bottom:0px; text-align:center; position:relative; border-top:0px dotted #FB0; border-bottom:0px dotted #FB0; } #gallery .section-line { width:100%; margin-top:0px; margin-bottom:0px; text-align:center; position:relative; border-top:1px dotted #FFF; border-bottom:0px dotted #FB0; } #gallery .section-title { width:100%; margin:0 auto; padding:0 40px; position:relative; top:-35px; display:inline-block; line-height:64px; font-size:50px; font-weight:100; background:none; text-align:center; text-transform:uppercase; color:#FFF; } #gallery ul { margin:0; padding:0; list-style:none; text-align:center; } #gallery ul li { margin:0px auto; display:inline-block; } #gallery .filter { width:120px; margin:0px auto 20px; display:inline-block; cursor:pointer; } #gallery .icon { position:relative; display:block; text-align:center; width:100px; height:100px; margin:0 auto 30px; border:4px solid #FFF; border-radius:50%; font-size:32px; line-height:92px; color:#FFF; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out; } #gallery .icon:after { pointer-events:none; content:""; position:absolute; display:block; width:126px; height:126px; top:-17px; left:-17px; border:3px solid #fff; border-radius:50%; opacity:0; -webkit-transform:scale(0.8); transform:scale(0.8); -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out; } #gallery .icon:hover { background:#fff; border-color:#fff; } #gallery .icon:hover:after { opacity:1; -webkit-transform:scale(1); transform:scale(1); } .no-csstransforms #gallery .icon:after { display:none; } #gallery h4 { font-weight:500; -webkit-transition:color 0.2s ease-out; transition:color 0.2s ease-out; } #gallery .icon:hover { color:#5AA9CE; } #gallery .icon [class*=fa] { -webkit-transform:scale(1); transform:scale(1); -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out; } #gallery .icon:hover [class*=fa] { -webkit-transform:scale(1.3); transform:scale(1.3); } #gallery ul#Grid { margin-top:20px ; margin-bottom:250px; padding:0; /*position:relative;*/ text-align:center; } #gallery ul#Grid .col-md-1 { padding-right:0px; padding-left:0px; } #gallery ul#Grid li { margin-bottom:0px; position:relative; } #gallery ul#Grid .fa { margin-top:42%; display:inline-block; background:transparent; font-family:Roboto; font-weight:500; font-size:16px; text-transform:uppercase; } #gallery ul#Grid .mix { max-width:95px; } #gallery ul#Grid a:hover { color:#FFF; background:#FF4040; } #gallery ul#Grid span { display:block; color:#FFF; margin-top:15px; font-weight:700; } #gallery ul#Grid img { -webkit-transition:0.25s; -moz-transition:0.25s; -o-transition:0.25s; transition:0.25s; margin:0px auto; } #gallery ul#Grid .detail { width:100%; max-width:95px; height:100%; margin:0 auto; top:0px; right:0px; left0; opacity:0; cursor:pointer; position:absolute; text-align:center; transition:all 0.5s; } #gallery ul#Grid .fog { background:#A0A0A0; color:#F0F0F0 } #gallery ul#Grid .lsc { background:#03D3F9; } #gallery ul#Grid .nat { background:#0AC002; } #gallery ul#Grid .sth { background:#F98803; color:#FFFFFF; } #gallery ul#Grid .sun { background:#FFBB00; color:#FFFFFF; } #gallery ul#Grid .wat { background:#0376F8; } #gallery ul#Grid .win { background:#FEFEFE; color:#03AAF8 } #gallery ul#Grid .detail:hover { opacity:0.8; } /******************************************************** FOOTER ********************************************************************************************/ #main-footer { padding-top:20px; background:#191502; color:#5AA9CE; } #main-footer .small-logo { padding:0; margin:0; margin-bottom:24px; font-size:24px; line-height:24px; font-weight:normal; color:#5AA9CE; } #main-footer .small-logo span { padding:0; font-size:18px; line-height:24px; font-weight:300; text-transform:none; } #main-footer ul.footer-nav { list-style:none; padding:0; margin:0; margin-bottom:24px; } #main-footer ul.footer-nav li { display:inline-block; padding:0 15px; line-height:14px; border-right:1px solid #FB0; } #main-footer ul.footer-nav li:first-child { padding-left:0; } #main-footer ul.footer-nav li:last-child { border-right:none; } #main-footer ul.footer-nav li a { color:#D0D0D0; text-decoration:none; font-size:14px; line-height:14px; font-weight:300; text-transform:uppercase; letter-spacing:0.02em; padding:0; -webkit-transition:color 0.2s ease-out; transition:color 0.2s ease-out; } #main-footer ul.footer-nav li a:hover, #main-footer ul.footer-nav li a:active { color:#FB0; text-decoration:none; } #main-footer .color-logo { margin-right:0px; color:#FB0; font-weight:300; } #main-footer a { color:#D0D0D0; font-size:16px; line-height:24px; font-weight:300; } #main-footer a:hover, #main-footer a:active { color:#FB0; font-size:16px; line-height:24px; font-weight:300; text-decoration:none; } #main-footer p { color:#D0D0D0; font-size:16px; line-height:24px; font-weight:300; } #main-footer p span { margin-right:10px; color:#333; font-size:16px; line-height:24px; font-weight:700; } #main-footer .right-col { text-align:right; } /******************************************************** SCROLL ANIMATIONS *********************************************************************************/ .scrollimation.fade-in { opacity:0; -webkit-transition:opacity 0.6s ease-out; transition:opacity 0.6s ease-out; } .scrollimation.fade-in.in { opacity:1; } .scrollimation.scale-in { opacity:0; -webkit-transform:scale(0.5); -moz-transform:scale(0.5); -ms-transform:scale(0.5); transform:scale(0.5); -webkit-transition:-webkit-transform .6s cubic-bezier(.17,.89,.67,1.57), opacity .6s ease-out; transition:transform .6s cubic-bezier(.17,.89,.67,1.57), opacity .6s ease-out; } .scrollimation.scale-in.in { opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); } .scrollimation.fade-right { opacity:0; -webkit-transform:translateX(-100px); -moz-transform:translateX(-100px); -ms-transform:translateX(-100px); transform:translateX(-100px); -webkit-transition:-webkit-transform .4s ease-out,opacity .4s ease-out; transition:transform .4s ease-out,opacity .4s ease-out; } .scrollimation.fade-right.in { opacity:1; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); transform:translateX(0px); } .scrollimation.fade-left { opacity:0; -webkit-transform:translateX(100px); -moz-transform:translateX(100px); -ms-transform:translateX(100px); transform:translateX(100px); -webkit-transition:-webkit-transform .4s ease-out,opacity .4s ease-out; transition:transform .4s ease-out,opacity .4s ease-out; } .scrollimation.fade-left.in { opacity:1; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); transform:translateX(0px); } .scrollimation.fade-up { opacity:0; -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); transform:translateY(100px); -webkit-transition:-webkit-transform .4s ease-out,opacity .4s ease-in; transition:transform .4s ease-out,opacity .4s ease-in-out; } .scrollimation.fade-up.in { opacity:1; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); transform:translateY(0px); } .scrollimation.d1 { transition-delay:0.2s; } .scrollimation.d2 { transition-delay:0.4s; } .scrollimation.d3 { transition-delay:0.6s; } .scrollimation.d4 { transition-delay:0.8s; } .scrollimation.d5 { transition-delay:1.0s; } .scrollimation.d6 { transition-delay:1.2s; } .scrollimation.d7 { transition-delay:1.4s; } .scrollimation.d8 { transition-delay:1.6s; } .scrollimation.d9 { transition-delay:1.8s; } .touch .scrollimation.fade-in { opacity:1; } .touch .scrollimation.scale-in { opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); } .touch .scrollimation.fade-right { opacity:1; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); transform:translateX(0px); } .touch .scrollimation.fade-left { opacity:1; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); transform:translateX(0px); } .touch .scrollimation.fade-up { opacity:1; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); transform:translateY(0px); } /******************************************************** SCROLLBAR *****************************************************************************************/ ::-webkit-scrollbar { width:12px; } /******************************************************** TRACK *********************************************************************************************/ ::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.2); } /******************************************************** HANDLE *********************************************************************************************/ ::-webkit-scrollbar-thumb { -webkit-border-radius:8px; border-radius:8px; background:#5AA9CE; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5); } /******************************************************** MEDIA QUERIES **************************************************************************************/ @media (max-width:1199px) { .map .spot { margin:-4.4% 0 0 18.2%; } } @media (max-width:991px) { #gallery .section-line { width:0px; } .jumbotron .message-box { padding:10px 0; } .jumbotron .first-line { width:100%; text-align:center; } .jumbotron .first-line p { padding:10px; font-size:42px; } .jumbotron .second-line { width:100%; text-align:center; } .jumbotron .second-line p { padding:10px; font-size:52px; } .cta-message { text-align:center; } .map .spot { margin:-5.1% 0 0 17.3%; } } @media (max-width:767px) { #main-nav .navbar-brand { font-size:24px; } #main-nav { background:#fff; border-bottom:1px solid #ddd; } #main-nav .navbar-toggle { color:#5AA9CE; border-color:#5AA9CE; } #main-nav .navbar-toggle .icon-bar { background:#5AA9CE; } #main-nav .container { padding:10px 20px; } #main-nav .nav a, #main-nav .nav a:active, #main-nav .nav a:hover { line-height:42px; text-align:center; } #main-nav .nav a:before { display:none; } #main-nav .nav a:hover, #main-nav .nav li.active a { box-shadow:0 0 0 1px; } .jumbotron .first-line p { font-size:32px; line-height:38px; } .jumbotron .second-line p { font-size:42px; line-height:52px; } #about .member .main-img { margin:0 auto; opacity:1; } #about .member.lead-member .main-img { opacity:1; position:relative; max-width:100%; left:0; } #about .lead-member .member-title { position:relative; top:0; } #about .member { margin-bottom:70px; } #main-footer ul.footer-nav { margin-bottom:24px; } #main-footer .left-col, #main-footer .right-col { text-align:center; } #filter-works ul li a { font-size:16px; } #filter-works ul li.filter-title h4 { font-weight:400; } .contact-info { text-align:center; margin-top:60px; } .map { left:0; } .map img { max-width:100%; } .map .spot { margin:-3.2% 0 0 19.2%; } } @media (max-width:479px) { #main-nav .navbar-brand span { display:none; } .jumbotron .header-logo { width:50px; } .jumbotron .first-line p { font-size:24px; line-height:28px; } .jumbotron .second-line p { font-size:28px; line-height:36px; } h1.section-title { font-size:32px; line-height:46px; top:-25px; } .section-header .lead { font-size:18px; line-height:24px; } p { font-size:16px; line-height:21px; } .btn-theme { padding:15px 40px; font-size:18px; } #filter-works ul li a { font-size:11px; padding:7px 10px; } #contact .form-control { height:58px; font-size:18px; line-height:24px; } #contact textarea.form-control { font-size:18px; line-height:24px; padding-top:14px; } .map .spot { margin:-6% 0 0 16.5%; } }