/* * Elio - Creative Onepage Multi-Purpose Portfolio Template * Author: OrbmobThemes * Copyright (C) 2017 Orbmob * This is a premium product available exclusively here : https://themeforest.net/user/orbmobthemes/portfolio */ /* /*==================================================== Table of Contents 01. Generel Styles + Generate Google Fonts + Essential Styles + Buttons + Floats + Overlays + Row Fix + Section Styles + Separators 02. Typography + Font Classes + Font Positions + Font Weight + Font Transformation + Font Colors + Font Sizes 03. Loading Screen + Loader Logo + Loader Animation + After Loading 04. Backgrounds + Solid Backgrounds + Gradient Backgrounds + Image Backgrounds 05. Navigations + General + Bootstrap Fix + Dropdown 06. Homepage + Homepage Headers + Logo Styles 07. Slider 08. About 09. Services 10. Portfolio 11. Pricing Table 12. Blog + Blog Post + Blog Sidebar + Comments 13. Map 14. Contact 15. Footer 16. Shop 16. Responsive + Resolution Under 1025px + Resolution Under 860px + Resolution Under 768px + Resolution Under 530px + Resolution Under 450px + Resolution Under 400px + Resolution Under 375px ====================================================*/ /* Uncompressed Version is Inside the Main Download File. */ @import "https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"; @import "https://fonts.googleapis.com/css?family=Montserrat:400,700"; *{margin:0;padding:0}::selection{background-color:#ececec} /*html,body{width:100%;height:100%;padding:0;margin-left:0;margin-right:0;font-family:'Montserrat',sans-serif;-webkit-font-smoothing:antialiased;text-align:center;font-size:1em}*/ html,body{overflow-x:hidden;width:100%;height:100%;padding:0;margin-left:0;margin-right:0;font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;-webkit-font-smoothing:antialiased;text-align:center;font-size:1em} body{overflow-x:hidden} .container{margin:0 auto;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow:hidden;width:100%;height:auto;text-align:center;float:none} img{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;width:100%;height:auto} a{color:#191919;text-decoration:none;outline:none} a:hover,a:active,a:focus{text-decoration:none;outline:none;color:#505050} a i:hover,a i:active,a i:focus{text-decoration:none;outline:none;color:#505050} /*h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:'Montserrat',sans-serif;font-weight:100}*/ h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;font-weight:100} /*p{margin:0 0 5px;font-family:'Montserrat',sans-serif}*/ p{margin:0 0 5px;font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana,sans-serif} .clear{clear:both}ol,ul{list-style:none;padding:0} .no-padding{padding:0!important} .no-margin{margin:0!important} .no-border{border:none!important;border-style:none!important} /*.button{z-index:0;background:transparent;border:1px solid #505050;cursor:pointer;display:block;width:150px;height:50px;line-height:50px;margin:auto;font-weight:900;letter-spacing:3px;font-family:'Montserrat',sans-serif;text-transform:uppercase;font-size:11px;word-spacing:1px;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}*/ .button{z-index:0;background:transparent;border:1px solid #505050;cursor:pointer;display:block;width:150px;height:50px;line-height:50px;margin:auto;font-weight:900;letter-spacing:3px;font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;text-transform:uppercase;font-size:11px;word-spacing:1px;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s} .button:hover{color:#191919;background:#fff;border:1px solid #fff} .float-l{float:left!important} .float-r{float:right!important} .pattern-black:after,.pattern-white:after{content:'';width:100%;height:100%;top:0;left:0;position:absolute;z-index:-1} .pattern-black:after{background:url(../img/pattern-1.png) repeat} .pattern-white:after{background:url(../img/pattern-2.png) repeat} .row:before,.row:after{content:"";display:table;clear:both} .section-content{padding:0 10%;z-index:9999} .section-content-full{padding:0;z-index:9999} .sections{width:100%;z-index:1;padding-top:70px} .separator-small{width:40px;height:1px;background:#505050 none repeat;margin-top:30px;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s} .separator-center{width:40px;height:1px;background:#505050 none repeat;margin:25px auto;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s} /*.montserrat{font-family:'Montserrat',sans-serif}*/ .montserrat{font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif} .lato{font-family:'Lato',sans-serif} .t-left{text-align:left!important} .t-center{text-align:center!important} .t-right{text-align:right!important} .ultrabold{font-weight:900} .extrabold{font-weight:800} .bold{font-weight:700} .semibold{font-weight:600} .normal{font-weight:400} .light{font-weight:300} .lighter{font-weight:100} .italic{font-style:italic} .uppercase{text-transform:uppercase} .lowercase{text-transform:lowercase} .underline{text-decoration:underline} .line-through{text-decoration:line-through} .dark{color:#191919} .white{color:#e5e5e5} .gray1{color:#777} .gray2{color:#505050} .colored{color:#ffd700} .f-small{font-size:13px} .f-normal{font-size:18px} .f-semi-expanded{font-size:1.5em} .f-medium{font-size:28px} .f-expanded{font-size:2.5em} .f-big{font-size:45px} .f-large{font-size:3.6em} .f-extra-expanded{font-size:6em} #loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;overflow:hidden} #loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:100%;border:0 solid transparent;border-top-color:#fff;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001;overflow:hidden} .loader-img img{display:block;position:absolute;left:47.5%;bottom:48%;width:130px;height:auto;z-index:1002} #loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:100%;border:2px solid transparent;border-top-color:#fff;overflow:hidden;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite} #loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:100%;border:0 solid transparent;border-top-color:#fff;overflow:hidden;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}} #loader-wrapper .loader-section{position:fixed;top:0;width:50%;height:100%;overflow:hidden;background-color:#fff;background:r#fff;color:rgba(0,0,0,0.9);z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)} #loader-wrapper .loader-section.section-left{left:0} #loader-wrapper .loader-section.section-right{right:0} .loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)} .loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)} .loaded #loader{opacity:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out} .loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all .3s 1s ease-out;transition:all .3s 1s ease-out} .white-bg{background-color:#fff!important} .gray-bg{background-color:#505050!important} .dark-bg{background-color:#191919!important} .colored-bg{background-color:#ffd700} .solid-bg{background:#232121} .solid-bg-light{background:#e9e8e8} #gradient,.gradient-bg{background:-moz-linear-gradient(17% 81% 67deg,#E4A4B8,#86FFF4 90%);background:-webkit-gradient(linear,91% 91%,20% 0%,from(#B869A4),to(#6DC7A5));width:100%;background-size:cover;display:block;position:relative;overflow:hidden;background-repeat:no-repeat;background-attachment:fixed;background-position:center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;z-index:1} .image-bg{background:url(../img/bg-01.jpg);height:100vh} .image-bg-2{background:url(../img/bg-02.jpg)} .image-bg-3{background:url(../img/bg-03.jpg)} .image-bg-4{background:url(../img/bg-04.jpg)} .image-bg-5{background:url(../img/bg-05.jpg)} .image-bg-6{background:url(../img/bg-06.jpg)} .image-bg,.image-bg-2,.image-bg-3,.image-bg-4,.image-bg-5,.image-bg-6{width:100%;background-size:cover;display:block;position:relative;overflow:hidden;background-repeat:no-repeat;background-attachment:fixed;background-position:center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;z-index:1} .navigation{background:#fff;border: solid 1px #000;z-index:999;padding:12px 3% 12px 10%;-webkit-box-shadow:0 4px 10px -3px rgba(0,0,0,0.75);-moz-box-shadow:0 4px 10px -3px rgba(0,0,0,0.75);box-shadow:0 4px 10px -3px rgba(0,0,0,0.75);font-size:13px;opacity:.98} .navbar-brand img{width:225px;position:relative;right:18px;margin-top:-8px;} .nav{float:right} .nav li a{margin-right:10px;color:#777} .navbar-default .navbar-nav > li > a{color:#2f2f2f;font-weight:700;text-transform:uppercase;font-size:10.5px} .nav > li > a:focus,.nav > li > a:hover{text-decoration:none;background-color:transparent;color:#191919} .nav .open > a,.nav .open > a:focus,.nav .open > a:hover{background-color:transparent;border-color:transparent} .navbar-toggle{border-radius:0;border:2px solid #777} .navbar-nav > li > .dropdown-menu{border-radius:0} .navbar-toggle .icon-bar{background:#191919} .nav li a{text-align:left} .uk-subnav > * > :focus,.uk-subnav > * > :hover{color:#505050;text-decoration:none} .uk-subnav > .uk-active > *{color:#191919} .dropdown-menu{background:#191919} .dropdown-menu li{margin-bottom:15px} .dropdown-menu li a{color:#e5e5e5} .dropdown-menu > li > a:focus,.dropdown-menu > li > a:hover{color:#fff;text-decoration:none;background-color:transparent} .multi-drop a{margin-bottom:15px} .drop-left{float:left;padding-top:15px;padding-left:20px} .drop-right{float:right;padding-top:15px;padding-right:30px} .big-dropdown-home{min-width:500px} .big-dropdown{min-width:700px} .big-dropdown li{margin-bottom:25px} .big-dropdown-home li{margin-bottom:25px} #header{position:relative} #header-pages{padding-top:150px;padding-bottom:150px} .head{padding:100px 0} .big-text-full h2{max-width:100%} .big-text-full h3{max-width:100%} .big-text h2{max-width:600px} .big-text h3{max-width:800px} .big-text h2,.big-text-full h2{letter-spacing:1px;word-spacing:8px} .big-text h3,.big-text-full h3{letter-spacing:1px;word-spacing:3px;line-height:40px;margin-top:30px} .big-text i{font-size:7em} .header-img{margin-bottom:50px} .header-img img{width:30px;position:relative;right:15px} .multi-img-square img{border-radius:0;width:70px;margin-right:20px} .multi-img img{margin-left:25px;width:55px} .logo{position:absolute;top:30px;left:50px;z-index:9} .logo img{display:block;max-width:100px;height:auto;margin:auto} .logo-footer{max-width:100px;height:auto;float:left;position:relative;bottom:10px} .logo-nav{float:left;max-width:60px;position:relative;bottom:25px} .rslides,.rslides-background{position:relative;list-style:none;overflow:hidden;width:100%;padding:0;margin:0} .rslides{z-index:0} .rslides li{-webkit-backface-visibility:hidden;position:absolute;display:none;width:100%;height:100%;left:0;top:0} .rslides li:first-child{position:relative;display:block;float:left} .rslides img{display:block;float:left;width:100%;border:0} #about{position:relative;padding-top:50px;padding-bottom:150px;background:#fff} #proy_ver{position:relative;padding-top:50px;padding-bottom:50px;background:#fff} .brief{margin-top:100px} .brief h3{letter-spacing:2px;word-spacing:5px} .brief p{margin-top:30px;line-height:40px;padding-right:15px} .brief a{border-bottom:1px solid #777;margin-top:20px} .proj a{margin-left:20px;margin-top:0} .proj img{margin-bottom:20px} .about-quote p{line-height:200%} #services{position:relative;padding-top:150px;padding-bottom:50px;background:#fff} .service{padding-bottom:100px} .service i{font-size:35px} .service h2{word-spacing:3px;letter-spacing:1px} .service p{line-height:35px;color:#777;font-size:13px;margin-top:15px} #portfolio{position:relative;background:#fff;padding-top:40px;padding-bottom:0} .works-filter,.works-filter-full{width:100%;font-size:13px;word-spacing:3px;text-align:center;margin-bottom:30px;font-size:10.5px;} .works-filter li,.works-filter-full li{margin-right:30px} .works-filter-full{margin-left:10%} .work li{-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s;overflow:hidden} .work{overflow:hidden} .work li:hover{opacity:1} .work img{-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s;overflow:hidden;width:100%} /*.work .hover{background:url(../img/pattern-1.png) repeat;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;opacity:0;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}*/ .work .hover{background:#FFF repeat;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;opacity:0;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s} .work .hover p{text-align:left;position:absolute;top:5%;left:5%;letter-spacing:3px;text-align:left} .work .hover span{text-align:left;position:absolute;bottom:5%;left:5%;font-size:10px;text-align:left} .work .hover i{position:absolute;top:50%;left:50%;letter-spacing:9px;opacity:.2;font-size:10em;-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center} .work:hover .hover{opacity:1} .work:hover img{-o-transform:scale(1.3);-moz-transform:scale(1.3);-webkit-transform:scale(1.3);transform:scale(1.3)} .hover .button{margin:auto} .gutter{padding:20px;overflow:hidden} .gutter .hover{overflow:hidden;background:url(../img/pattern-2.png) repeat} .gutter:hover img{-o-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);overflow:hidden} #project{padding-top:150px;padding-bottom:150px} #pricing{position:relative;padding-top:150px;padding-bottom:70px;background:#fff} .price-table{border:1px solid #e5e5e5;padding:80px;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s;margin-bottom:100px} .price-table:hover{border:1px solid #777} .table-special{border:1px solid #777;transform:scale(1.1)} .price-head{margin-bottom:50px} .price-head h2{margin-bottom:20px} .price-value{margin-top:50px} .price-body ul li{margin:25px 0 0;padding:0 0 25px} .price-table .button{margin-top:50px} .price-table .button:hover{background:#fff;color:#191919} #blog{position:relative;padding-top:150px;padding-bottom:200px} #blog-post{padding-top:150px;padding-bottom:50px} .blog-post{margin-bottom:200px} .blog-post h3{letter-spacing:1px;word-spacing:3px;padding:20px 0} .blog-post ul li{display:inline-block;padding-left:15px;border-left:1px solid #b2b2b2;margin:0 0 20px 15px} .blog-post ul li a{margin-left:3px} .blog-post img{opacity:.9;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s} .blog-post img:hover{opacity:1} .blog-post p{line-height:40px} .post-text p{margin-bottom:25px} .blog-post .button{margin-top:30px} .blog-masonry .blog-post{padding:30px 30px 30px 0} .sidebar{margin:0 0 100px 30px} .sidebar ul{margin-top:25px} .sidebar ul li{margin-top:25px} .tags li{display:inline-block;padding:8px;margin:3px;border:1px solid #777;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s} .tags li:hover a{color:#fff} .tags li:hover{background:#191919;border:1px solid #191919} #subscribe{position:relative;padding-top:150px;padding-bottom:80px} #comments{padding-bottom:200px} .comment-form{float:left;text-align:left} .form{margin-top:50px} .form input{padding:10px;margin-bottom:10px;float:left;width:100%} .form .button{margin-top:40px} .comment-form{margin-bottom:100px} .comment-form h3{margin-bottom:20px} .form textarea{width:100%;margin-top:20px;padding:10px} .posted-comment{background:#f4f4f4;margin-top:50px;margin-bottom:10px;padding:20px} .posted-comment h3{letter-spacing:1px;word-spacing:2px} .posted-comment img{border-radius:100%;width:50px} .posted-comment span{font-size:11px} .posted-comment p{margin-top:30px;margin-bottom:30px;line-height:32px} #map_canvas{height:500px;width:100%;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s} .map-full{margin-bottom:200px} #contract{padding-top:100px;padding-bottom:100px} #contract .separator-center{margin-top:50px;margin-bottom:50px} #contract h2{margin-bottom:35px} #contract h3{letter-spacing:1px;word-spacing:3px;line-height:30px;margin-bottom:15px} #contract a i{-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s} #contract a i:hover{color:#fff} #contact{padding-bottom:200px;background:#fff} #contact form input,form textarea{-moz-box-sizing:border-box;box-sizing:border-box;padding-bottom:10px;margin-bottom:60px;transition:none;background:transparent;width:100%;border:none;color:#191919;float:left;border-bottom:4px solid #191919;font-size:13px;font-weight:500;word-spacing:2.5px;text-align:left} #message{height:100px} #contact-form{text-align:left} #contact-form p span{display:block;letter-spacing:2px;text-transform:uppercase} #contact-form p{margin-top:15px} #contact-form i{margin-right:5px} #contact-form p{float:right} .contact-full{margin-top:100px} .contact-wrapper{max-width:800px} .contact-btn{float:left}::-webkit-input-placeholder{color:#777} #contact-form label{cursor:text;display:block;margin:0;position:relative;top:0;width:100%}:-moz-placeholder{color:#777}::-moz-placeholder{color:#777}:-ms-input-placeholder{color:#777} #contact-form .error{bottom:12px;font-family:inherit;font-size:14px;font-weight:400;left:auto;letter-spacing:0;position:absolute;right:20px;text-transform:capitalize;width:auto} .response h3{letter-spacing:2px;margin:10px 0 25px;text-transform:uppercase} #footer{padding-top:50px;padding-bottom:50px} .footer-logo img{width:220px} .footer-social li{display:inline-block;margin:35px 0 0 35px} .footer-details{padding-top:10px} .footer-details p{margin-top:10px} .footer-details a{margin-left:5px} #shop{position:relative;padding-top:150px;padding-bottom:50px} .shop-post{margin-bottom:100px} .shop-post h3{letter-spacing:1px;word-spacing:3px;padding:20px 0} .shop-post ul{margin-top:25px} .shop-post ul li{display:inline-block;padding-left:10px;border-left:3px solid #b2b2b2;margin:0 0 20px 10px} .shop-post ul li a{margin-left:3px} .shop-post img{opacity:.9;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s} .shop-post img:hover{opacity:1} .shop-post p{line-height:40px} .shop-post .button{margin-top:30px} .shop-masonry .shop-post{padding:25px;margin-bottom:70px} .product-desc{margin-top:25px} .single-product{margin-bottom:50px} @media all and (max-width: 1025px){ .navbar-collapse{position:absolute;left:0;background:#fff;width:100%;z-index:99999999} } @media all and (max-width: 860px){ .nav > li > a{padding:15px 10px} } @media all and (max-width: 1027px){ .nav{float:left} .navbar-collapse{position:absolute;left:0;text-align:left;width:100%;z-index:99999999} .navbar-default .navbar-nav .open .dropdown-menu > li > a{color:#191919} .navbar-default .navbar-toggle{border:2px solid #191919;color:#191919} .navbar-toggle .icon-bar{color:#191919} .map-half{margin-bottom:200px} .sidebar{margin:100px 0 0} #services .row{margin-bottom:0} .big-dropdown{min-width:100%;overflow:auto} .drop-left{float:none;padding-top:15px;padding-left:20px} .drop-right{float:none;padding-top:0;padding-left:20px} .navigation{background:#fff;z-index:99999999;padding:10px 2% 10px 10%;-webkit-box-shadow:0 4px 10px -3px rgba(0,0,0,0.75);-moz-box-shadow:0 4px 10px -3px rgba(0,0,0,0.75);box-shadow:0 4px 10px -3px rgba(0,0,0,0.75)} } @media all and (max-width: 530px){ .loader-img img{left:45%} .blog-post ul li,.shop-post ul li{display:block;padding-left:15px;border-left:1px solid #b2b2b2;margin:0 0 20px} .blog-post .no-margin,.shop-post .no-margin{margin:0 0 20px!important} .blog-post .no-padding,.shop-post .no-padding{padding-left:15px!important} .blog-post .no-border,.shop-post .no-border{border-left:1px solid #b2b2b2!important} .multi-img img{margin-left:25px;width:45px} .simple-big h2{font-size:3em} } @media all and (max-width: 450px){ .loader-img img{left:42%} #map_canvas{height:350px} #contact-form p{float:left;margin-top:20px} .service .separator-small{display:none} #services .col-md-4{padding-bottom:100px;position:relative} .post-info .no-margin{margin:0 0 20px!important} .post-info .no-padding{padding-left:20px!important} .post-info .no-border{border-left:1px solid #b2b2b2!important} .simple-big h2{font-size:2.5em} } @media all and (max-width: 400px){ .big-text h2{width:100%} .f-large,.f-extra-expanded{font-size:2.3em} .f-medium,.f-expanded{font-size:20px} .big-text h3,.big-text-full h3{letter-spacing:1px;word-spacing:3px;line-height:30px} .big-text h2{line-height:47px} .works-filter li,.works-filter-full li{margin-right:18px} } @media all and (max-width: 375px){ .drop-right{float:left;padding-top:0;padding-right:20px} .f-big,.f-extra-expanded{font-size:20px} } .preview .button{ color: #fff; margin-top: 25px; } .preview .button:hover{ color: #191919; } .preview .work img{ border: 5px solid #ccc; } .preview .work:hover img{ opacity: 0.5; border: 5px solid #fff; } .preview .work{ padding: 50px; } .preview-header{ padding-top: 100px; padding-bottom: 100px; } .work .hover h3{ position: absolute; top: 60%; left: 50%; letter-spacing: 5px; font-size: 10px; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .preview-last{ margin-bottom: 150px; } .preview-footer .footer-logo img{ width: 50px; border-radius: 100%; margin-bottom: 25px; } .scrollable-text{ overflow-y:scroll; }