/* Theme Name: Maxim Theme URL: https://bootstrapmade.com/maxim-free-onepage-bootstrap-theme/ Author: BootstrapMade.com Author URL: https://bootstrapmade.com */ /* =========================== CONTENTS: 01 General 02 Typography 03 Non-semantic 04 Navbar 05 Page sections 06 Footer 07 Icons 08 Buttons 09 Media queries =========================== */ /* Import css */ /* Google font */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'); /* bootstrap */ @import url('bootstrap.css'); /* bootstrap responsive */ @import url('bootstrap-responsive.css'); /* prettyPhoto */ @import url('prettyPhoto.css'); /* flexslider */ @import url('flexslider.css'); /* font awesome */ @import url('font-awesome.css'); /* overwrite */ @import url('overwrite.css'); /* animation */ @import url('animate.css'); /* ========================================================= 01. General ============================================================ */ div, article, section, header, footer, nav, li { position:relative; } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } body { background:#fff; color: #444; font-size: 16px; font-weight:300; font-family:'Open Sans', Arial, sans-serif; } body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ } ::-moz-selection { color:#333; } ::selection { color:#333; } /* scroll to top */ .scrollup{ position:fixed; width:32px; height:32px; bottom:20px; right:20px; } a.scrollup { outline:0; text-decoration:none; } a.scrollup:hover,a.scrollup:active,a.scrollup:focus { opacity:1; text-decoration:none; -webkit-transition: all 400ms ease-out 0s; -moz-transition: all 400ms ease-out 0s; -o-transition: all 400ms ease-out 0s; transition: all 400ms ease-out 0s; } a.scrollup i:hover { text-decoration:none; } .blankdivider10 { height: 10px; display: block; } .blankdivider20 { height: 20px; display: block; } .blankdivider30 { height: 30px; display: block; } .row { margin-bottom:30px; } .row .row{ margin-bottom:30px; } .row.nomargin { margin-bottom:0; } /*---------- forms ----------*/ input[type=text], input[type=submit], textarea { width: 100%; padding: 0.5em; font-size: 1em; margin-bottom: 1.5em; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } input, button, select, textarea { font-family:'Open Sans', Arial, sans-serif; } /* ========================================================= 02. Typography ============================================================ */ p { line-height: 1.6em; margin: 0 0 10px 0; } blockquote { font-size:18px; border:none; padding:0; } blockquote.large { font-size:36px; font-weight:700; line-height:1.1em; } blockquote.large:before { font-size:64px; font-family: FontAwesome; content: "\f10d"; margin-right:20px; } blockquote cite { display:block; font-size:12px;} blockquote cite:before { content:"\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color:#555; } ul, ol { font-size: 1em; /* 16px */ line-height: 1.5; /* 24px */ margin: 0 0 1.5em 0; } body, input, textarea { } a { color: #454545; text-decoration: none; } a:hover, a:active { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-weight: 400; color: #312f2b; line-height:1.1em; font-family:'Open Sans', Arial, sans-serif; } h1 { font-size: 36px; margin-bottom:20px; } h2 { font-size: 30px; margin-bottom:20px; } h3 { font-size: 26px; margin-bottom:20px; } h4 { font-size: 22px; margin-bottom:20px; } h5 { font-size: 18px; margin-bottom:15px; } h6 { font-size: 16px; margin-bottom:10px; } strong { font-weight:700; font-family: 'Open Sans', sans-serif; } small { font-size: 0.75em; /* 12px */ line-height: 2; /* 24px */ margin-top: 2em; margin-bottom: 0em; } em { font-style: normal; font-family: 'Open Sans'; } .muted { color: #A5A5A2; } .impressed { text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5), /* shadow */ 1px 1px 0 rgba(255, 255, 255, 0.9); /* highlight */ } h2.pagetitle { color:#fff; font-size:46px; } /* ========================================================= 03. Misc ============================================================ */ .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; font-size: 1em; } .alignright { text-align: right; } .alignleft { text-align: left; } .aligncenter { text-align: center; } .medium { font-weight: normal; } /* ========================================================= 04. Navigation ============================================================ */ .navbar-fixed-top .container { /* Uncomment to make nav expand full width */ /* width: auto; */ } .navbar .brand { margin-left:0; padding: 0; margin-top: 1.05em; } .navbar .brand a { padding: 0; color: #fff; font-size: 1.75em; margin-left: 0; font-weight: 400; text-transform:uppercase; } .navbar .brand a:hover { text-decoration: none; transition: color .15s linear; -webkit-transition: color .15s linear; -moz-transition: color .15s linear; } .navbar .brand a:focus { outline: none; } .navbar-inner { min-height: 4.75em; } .navbar-inverse .navbar-inner { background-repeat: repeat; background-color: #0b333f; } .navbar-wrapper { overflow:hidden; } #menu-main { margin-top: 1.125em; } ul#menu-main > li > a { font-weight: 600; color: #fff; font-size:14px; text-transform:uppercase; } ul#menu-main > li > a:hover { padding: 9px 15px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } ul#menu-main > li > a:focus { outline:0; } .navbar-inverse .brand, .navbar-inverse .nav > li > a { text-shadow: none; } /* ========================================================= 05. Page sections ============================================================ */ /* === section header === */ #header-wrapper { width: 100%; min-height: 600px; margin-top: -60px; padding-top:160px; text-align:center; } #header-wrapper h1 { color: #FFFFFF; font-size: 4em; font-weight: 400; margin: 1em 0; } #header-wrapper h2 { color: #fff; font-family: 'Open Sans', sans serif; font-size: 2em; font-weight: normal; margin: 0.5em 0; text-shadow: 1px 1px 1px #333333; } header .logo { text-align:center; margin-bottom:30px; } /* --- Header slider --- */ #header-wrapper.header-slider { background: #444 url(../img/bg/bg-1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #main-flexslider ul.slides li p { font-size: 72px; text-transform: uppercase; position: relative; margin-bottom: 0px; text-align: center; line-height: 1; color:#fff; } #main-flexslider.flexslider { margin:0; background:none; border:none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; } /* --- Header subscribe form --- */ #header-wrapper input[type=text] { background: rgba(227, 231, 228, 1); font-family: 'Open Sans', sans serif; font-size: 1.3125em; border: 0; text-align: center; vertical-align: middle; margin-bottom:0 !important; } #header-wrapper input[type=text]:focus { background: #43413e; color: #eff1ef; transition: background 0.25 ease-in; -moz-transition: background 0.25 ease-in; -webkit-transition: background 0.25 ease-in; } #header-wrapper input[type=text] { height: 2.9em; width:50%; } #header-wrapper input[type=submit] { color: #fff; width: 185px; height: 2.9em; font-size: 1.3125em; /* 21px */ padding:0.5em; letter-spacing: 0.05em; margin: 0; border: 0; text-transform: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #header-wrapper input[type=submit]:hover, #header-wrapper input[type=submit]:active { background: #43413e !important; } section.section { padding: 100px 0 80px; } section.section h4 { text-align: center; margin-bottom: 40px; font-size: 46px; font-weight: 700; letter-spacing: -1px; } section.inner { padding: 50px 0 50px; } .section.orange h4 ,.section.green h4{ color: #fcfcfc; } .section.orange p,.section.green p { color: #f7f7f7; } /* === section spacer === */ section.spacer { padding:90px 0 70px; color:#fcfcfc; } .spacer.green,.section.green { background:#1bac91; } .spacer.green,.section.green h4 { color:#fff; } .spacer.yellow,.section.yellow { background:#ffe873; } .spacer.orange,.section.orange { background:#f36f36; } section.spacer.bg2 { background: url(../img/bg/bg-2.jpg) 50% 0 no-repeat fixed; width:100%; height:auto; margin:0; } section.spacer.bg3 { background: url(../img/bg/bg-3.jpg) 50% 0 no-repeat fixed; width:100%; height:auto; margin:0; } section.spacer blockquote.large:before { color:#eee; opacity:0.6; } section.spacer blockquote cite { color:#555; } /* === section works === */ #works h4 { margin-bottom:20px; } #portfolio { padding-bottom: 0; } /* === portfolio filter === */ #filters { margin-bottom: 0px; text-align: center; display: block; float: none; z-index: 2; position: relative; } #filters ul { margin: 0 0 20px; list-style: none; padding: 0; } #filters ul li { display: inline-block; } #filters ul li a { display: block; float: left; padding: 2px 5px; color: inherit; margin-right: 5px; margin-bottom: 5px; font-weight: 600; } #filters ul li a:hover,#filters ul li a:focus { text-decoration:none; outline:0; } #filters ul li a h5 { font-size: 14px; padding: 5px 10px 5px; border: 2px solid #f2f2f2; } #filters ul li a:hover h5, #filters ul li a.active h5 { color:#fcfcfc; } /* === portfolio wrap - grid === */ #portfolio-wrap { position: relative; padding: 0; width: 100.1%; margin: 0 auto; display: block; } #portfolio-wrap .grid { margin: 0; overflow: hidden; line-height: 0; width: 20%; border:0; padding: 0; } .portfolio-item.current { z-index: 101; } .portfolio-item { padding: 0; position: relative; overflow: hidden; } .portfolio-item .portfolio-image { overflow: hidden; display: block; position: relative; } .portfolio-item .portfolio-image img { width: 100%; height: auto; } .portfolio .portfolio-overlay { width: 100%; height: 100%; top: 0; left: 0; position: absolute; display: block; z-index: 4; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio > a, .portfolio > a:hover { color: #ffffff; } .portfolio-item .portfolio > a:hover > .portfolio-overlay { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); } .portfolio > a img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio > a:hover img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio .thumb-info { position: absolute; width: 100%; height: 100%; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio a:hover .portfolio-overlay .thumb-info { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); } .portfolio-overlay .thumb-info i { top: 50%; } .portfolio-overlay .thumb-info h5 { top: 20%; font-size: 18px; } .portfolio-overlay .thumb-info p { top: 50%; font-size: 13px; } .portfolio-overlay .thumb-info h5 { color: #ffffff; width: 100%; position: absolute; text-align: center; } .portfolio-overlay .thumb-info p { color: #ffffff; width: 100%; position: absolute; text-align: center; font-weight: bold; } .portfolio-overlay .thumb-info i { color: #ffffff; width: 100%; position: absolute; text-align: center; display: block; } /* === Isotope CSS3 transitions === */ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* === section services === */ section#services h2 { font-size: 22px; margin-bottom: 15px; margin-top: 10px; text-align:center; } section#services p { margin:10px; } section#services .service-box { text-align: center; padding: 20px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } section#services .span3:hover { background:#e3e3e3; } section#services .service-box h2 { color: #f7f7f7; font-weight: 700; } section#services.section.orange .service-box:hover { background:#f36518; } /* === section blog === */ section#blog { background: #f2f2f2; } .home-post { background:#fff; } .home-post:hover { box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .home-post .entry-content { padding:20px; } .home-post .entry-content h5 a { font-size:22px; } .home-post .entry-content h5 a:hover { color:#312f2b; text-decoration:none; } .home-post .entry-content a.more { font-size:13px; } .home-post .post-meta { padding:20px; overflow:hidden; color:#fcfcfc; } .home-post .post-meta i { float:left; margin-right:20px; } .home-post .post-meta span { margin-top:10px; } .home-post .post-meta span.date { font-weight:700; font-size:13px; float:left; } .home-post .post-meta span.tags { font-weight:700; font-size:13px; float:right; color:#ddd; } .home-post .post-meta span.tags a { color:#fcfcfc; } /* === section about === */ section#about { background:#f2f2f2; } .people { text-align:center; } .people h3 { margin-bottom:10px; font-weight:700; letter-spacing:-1px; } .team-thumb { margin-top: 26px; text-align:center; } /* (spacer) latest tweet */ #tweet{ text-align:center; margin:20px 0 0; font-size:20px; color:#fff; } #tweet ul{ float:left; width:100%; text-align:center; list-style:none; margin:0; padding:0; } #tweet ul li{ display: inline-block; list-style:none; margin:0 0 20px; padding:0 0 0 34px; font-size:20px; line-height:1.5em; } #tweet ul li:before { font-family: 'FontAwesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f099"; margin-right:20px; } /* === Contact section === */ /* Contact Form */ .validation { color: red; display:none; margin: 0 0 20px; font-weight:400; font-size:13px; } #sendmessage { color: green; border:1px solid green; display:none; text-align:center; padding:15px; font-weight:600; margin-bottom:15px; background: #fff; } #errormessage { color: red; display:none; border:1px solid red; text-align:center; padding:15px; font-weight:600; margin-bottom:15px; background: #fff; } #sendmessage.show, #errormessage.show, .show { display:block; } #contact-form { position: relative; z-index: 999; } #contact-form input[type=text], .contactForm textarea { background: rgba(227, 231, 228, 1); font-family: 'Open Sans', sans serif; border: 0; font-size:16px; text-align: left; vertical-align: middle; } .contactForm textarea { height: 156px; } #contact-form input[type=text]:focus, .contactForm textarea:focus { background: #fff; color: #555; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; transition: background 0.25 ease-in; -moz-transition: background 0.25 ease-in; -webkit-transition: background 0.25 ease-in; } #contact-form input[type=text] { height: 60px; margin-bottom:30px; } #contact-form input[type=submit] { color: #fff; width: 185px; height: 60px; text-shadow: none; font-size: 16px; padding:0.5em; letter-spacing: 0.05em; margin: 0 0 20px 0; display: block; border: 0; text-transform: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } #contact-form input[type=submit]:hover, #contact-form input[type=submit]:active { background: #43413e !important; } #contact-form textarea { padding-top: 1em; } div.cform-response-output { max-width: 60%; text-align: center; margin-left: 40% !important; margin-top: 0.5em !important; padding: 0.5em !important; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .cform-not-valid-tip { color: #888; border: 1px dotted #ad3729 !important; width: 100% !important; left: 0 !important; padding: 0.5em !important; font-family: 'Open Sans', sans-serif; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } /* ========================================================= 06. Footer ============================================================ */ footer { background: #2b2b2b; text-align: center; color: #ddd; padding:50px 0 50px; } footer a { color: #ddd; } footer a:hover { color: #fff; } footer ul.social-networks { list-style:none; } footer ul.social-networks li { display:inline; } footer ul.social-networks li i { display:inline-block; } footer ul.social-networks li a { color: #5e5e5e; margin: 0 5px; } footer ul.social-networks li a:hover { text-decoration:none; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } footer ul.social-networks li i.icon-bgdark { background:#414141; color: #656565; } footer ul.social-networks li a i.icon-instagram:hover { background: #ba7b3d; color: #fff; } footer ul.social-networks li a i.icon-twitter:hover { background: #5ad2eb; color: #fff; } footer ul.social-networks li a i.icon-dribbble:hover { background: #f57b71; color: #fff; } footer ul.social-networks li a i.icon-pinterest:hover { background: #d84848; color: #fff; } /* ========================================================= 07. Icons ============================================================ */ /* bg */ i.icon-bglight { color: #444; background: #f7f7f7; } i.icon-bglight.active { color: #fff; } i.icon-bglight.active:hover{ color: #444; background: #f7f7f7; } i.icon-bgdark { color: #f7f7f7; background: #333; } i.icon-bgdark:hover { color: #fff; } i.icon-bgdark.active:hover { color: #f7f7f7; background: #333; } /* square */ i.icon-square { display: inline-block; text-align: center; width: 24px !important; height: 24px !important; line-height: 24px !important; } i.icon-square.icon-2x{ width: 48px !important; height: 48px !important; line-height: 48px !important; } i.icon-square.icon-3x{ width: 72px !important; height: 72px !important; line-height: 72px !important; } i.icon-square.icon-4x{ width: 96px !important; height: 96px !important; line-height: 96px !important; } i.icon-square.icon-5x{ width: 120px !important; height: 120px !important; line-height: 120px !important; } /* rounded */ i.icon-rounded { display: inline-block; border-radius: 6px !important; -moz-border-radius: 6px !important; -webkit-border-radius: 6px !important; -o-border-radius: 6px !important; -ms-border-radius: 6px !important; text-align: center; width: 24px !important; height: 24px !important; line-height: 24px !important; } .icon-rounded.icon-2x{ width: 48px !important; height: 48px !important; line-height: 48px !important; } .icon-rounded.icon-3x{ width: 72px !important; height: 72px !important; line-height: 72px !important; border-radius: 8px !important; -moz-border-radius: 8px !important; -webkit-border-radius: 8px !important; -o-border-radius: 8px !important; -ms-border-radius: 8px !important; } .icon-rounded.icon-4x{ width: 96px !important; height: 96px !important; line-height: 96px !important; border-radius: 10px !important; -moz-border-radius: 10px !important; -webkit-border-radius: 10px !important; -o-border-radius: 10px !important; -ms-border-radius: 10px !important; } .icon-rounded.icon-5x{ width: 120px !important; height: 120px !important; line-height: 120px !important; border-radius: 12px !important; -moz-border-radius: 12px !important; -webkit-border-radius: 12px !important; -o-border-radius: 12px !important; -ms-border-radius: 12px !important; } /* circled */ i.icon-circled { display: inline-block; border-radius: 1000px !important; -moz-border-radius: 1000px !important; -webkit-border-radius: 1000px !important; -o-border-radius: 1000px !important; -ms-border-radius: 1000px !important; text-align: center; width: 24px !important; height: 24px !important; line-height: 24px !important; } .icon-circled.icon-2x{ width: 48px !important; height: 48px !important; line-height: 48px !important; } .icon-circled.icon-3x{ width: 72px !important; height: 72px !important; line-height: 72px !important; } .icon-circled.icon-4x{ width: 96px !important; height: 96px !important; line-height: 96px !important; } .icon-circled.icon-5x{ width: 120px !important; height: 120px !important; line-height: 120px !important; } i.icon-white { color:#fff; } /* more icon sizes for font-awesome icons */ .icon-6x { font-size: 6em; } .icon-6x.icon-border { border-width: 6px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .icon-7x { font-size: 7em; } .icon-6x.icon-border { border-width: 6px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .icon-8x { font-size: 8em; } .icon-6x.icon-border { border-width: 6px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .icon-9x { font-size: 9em; } .icon-6x.icon-border { border-width: 6px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .icon-10x { font-size: 10em; } .icon-6x.icon-border { border-width: 6px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } /* ========================================================= 08. Buttons ============================================================ */ .btn { color: #fff; text-shadow: none; font-size: 16px; padding: 11px 19px; letter-spacing: 0.05em; border: 0; text-transform: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; background-color: #545454; border-color: none; *background-color: #545454; background-image: none; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: none; border: none; *border: 0; border-bottom-color: none; } .btn:link, .btn:visited { color: #fff; } .btn:hover { background: #333 !important; } .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { color: #fff; background-color: #333; *background-color: #333; } .btn.btn-theme:hover { background: #333 !important; } /* size */ .btn-large { padding: 18px 25px; font-size: 24px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .btn-large [class^="icon-"], .btn-large [class*=" icon-"] { margin-top: 4px; } .btn-small { padding: 6px 13px; font-size: 11.9px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .btn-small [class^="icon-"], .btn-small [class*=" icon-"] { margin-top: 0; } .btn-mini [class^="icon-"], .btn-mini [class*=" icon-"] { margin-top: -1px; } .btn-mini { padding: 0 6px; font-size: 10.5px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /* end size */ .btn-primary { color: #ffffff; text-shadow: none; background-color: #09828c; *background-color: #09828c; background-image: none; border-color: none; filter:none; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { color: #ffffff; background: #065158; *background-color: #065158; } .btn-primary:active, .btn-primary.active { background-color: #065158 \9; } .btn-warning { color: #ffffff; text-shadow: none; background-color: #ffe873; *background-color: #ffe873; background-image: none; border-color: none; filter:none; } .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] { color: #ffffff; background: #b88f22; *background: #b88f22; } .btn-warning:active, .btn-warning.active { background: #b88f22 \9; } .btn-danger { color: #ffffff; text-shadow: none; background-color: #f36f36; *background-color: #f36f36; background-image: none; border-color: none; filter:none; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] { color: #ffffff; background: #db5f58; *background: #db5f58; } .btn-danger:active, .btn-danger.active { background: #db5f58 \9; } .btn-success { color: #ffffff; text-shadow: none; background-color: #1bac91; *background-color: #1bac91; background-image: none; border-color: none; filter:none; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] { color: #ffffff; background: #55ba93; *background: #55ba93; } .btn-success:active, .btn-success.active { background: #55ba93 \9; } .btn-info { color: #ffffff; text-shadow: none; background-color: #4dbdc6; *background-color: #4dbdc6; background-image: none; border-color: none; filter:none; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] { color: #ffffff; background: #6a9ad0; *background: #6a9ad0; } .btn-info:active, .btn-info.active { background: #6a9ad0 \9; } .btn-inverse { color: #ffffff; text-shadow: none; background-color: #3c3c3c; *background-color: #3c3c3c; background-image: none; border-color: none; filter:none; } .btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] { color: #ffffff; background: #2b2a2a; *background: #2b2a2a; } .btn-inverse:active, .btn-inverse.active { background: #2b2a2a \9; } /* button flat */ .btn-flat { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /* button rounded */ .btn-rounded { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .btn-large.btn-rounded { -webkit-border-radius: 28px; -moz-border-radius: 28px; border-radius: 28px; } .navbar-inverse .btn-navbar { width: auto; height: auto; } /* ========================================================= 09. Media queries ============================================================ */ @media (min-width: 768px) and (max-width: 979px) { body { padding-left:0 ; padding-right:0; padding:0; } .navbar-inner { padding-right: 20px; padding-left: 20px; } .navbar-inner h1.brand { margin-left:20px; } .navbar-inner .btn-navbar { margin:20px 20px 0; } .container { padding-right: 20px; padding-left: 20px; } .navbar-inverse .navbar-inner { padding:0 0 30px; } .nav-collapse { text-align:center; width:100%; } } @media (max-width: 767px) { body { padding-left:0 ; padding-right:0; padding:0; } .navbar-inner { padding-right: 20px; padding-left: 20px; } .navbar-inner h1.brand { margin-left:20px; } .navbar-inner .btn-navbar { margin:20px 20px 0; } .container { padding-right: 20px; padding-left: 20px; } .navbar-inverse .navbar-inner { padding:0 20px 30px; } .nav-collapse { text-align:center; width:100%; } #portfolio-wrap .grid { width: 25%; } } /* Smaller screens ----------- */ @media (max-width : 480px) { #header-wrapper { padding-top:80px; } #team .team-thumb { margin-right: auto; margin-left: auto; width: 150px; display: block; text-align:center; } #portfolio-wrap .grid { width: 50%; } } /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { section.section { padding: 1em 0; } #works .container { top: 0 !important; } .max-img { width: 100%; } .max-img { margin-right: auto; margin-left: auto; display: block; } section#services h2 { margin-bottom: 0.25em; } section#services h2, section#services ul { text-align: center; } /* team */ #team .team-thumb { margin-right: auto; margin-left: auto; width: 150px; display: block; text-align:center } .job-position: { margin-bottom: 1.5em; } .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top { margin-left: auto; margin-right: auto; } /* Contact Form */ #contact-form { overflow: hidden; } #contact-form input[type=submit] { width: 100%; } }