Team:Tsinghua-A/css/style.css

From 2013.igem.org

(Difference between revisions)

Revision as of 21:56, 27 September 2013

/*

Maxim one page bootstrap template @2013 by iWebStudio

/*

===============

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('http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'); /* bootstrap */ @import url('http://tagsys.org/css/bootstrap.css'); /* bootstrap responsive */ @import url('http://tagsys.org/css/bootstrap-responsive.css'); /* prettyPhoto */ @import url('http://tagsys.org/css/prettyPhoto.css'); /* flexslider */ @import url('http://tagsys.org/css/flexslider.css');

/* font awesome */ @import url('http://tagsys.org/css/font-awesome.css'); /* overwrite */ @import url('http://tagsys.org/css/overwrite.css'); /* animation */ @import url('http://tagsys.org/css/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: 0px; /* 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; vertical-align: middle; } .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.violet,.section.violet { color:rgba(209, 184, 232);; }

.spacer.yellow,.section.yellow { background:#ffe873; } .spacer.orange,.section.orange { background:#f36f36; } .spacer.wood,.section.wood { background:#edb887; } .spacer.blue,.section.blue { background:#CAE1FF; }

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 filter2 === */

filters2 {

margin-bottom: 0px; text-align: center; display: block; float: none; z-index: 2; position: relative; }

filters2 ul {

margin: 0 0 20px; list-style: none; padding: 0; }

filters2 ul li {

display: inline-block; }

filters2 ul li a {

display: block; float: left; padding: 2px 5px; color: inherit; margin-right: 5px; margin-bottom: 5px; font-weight: 600; }

filters2 ul li a:hover,#filters2 ul li a:focus {

text-decoration:none; outline:0; }

filters2 ul li a h5 {

font-size: 14px; padding: 5px 10px 5px; border: 2px solid #f2f2f2; }

filters2 ul li a:hover h5, #filters2 ul li a.active h5 {

color:#fcfcfc; background:#ee6363; }

/* === 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: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); } .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:500; 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 { display:none; margin: -10px 0 20px; color:#fff; font-weight:700; font-size:13px; }

sendmessage {

border:1px solid #fff; display:none; text-align:center; padding:15px 12px 15px; margin:10px 0; font-weight:600; margin-bottom:30px; }

sendmessage.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; }

contact-form input[type=text]:focus, .contactForm textarea:focus {

background: rgba(101, 106, 100, 1); color: #eff1ef; 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: #5e5e5e; padding:50px 0 50px; }

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-group:hover { background: #ba7b3d; color: #fff; }

footer ul.social-networks li a i.icon-dashboard: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%; } }

@@ Line 481: / Line 481: @@
 .spacer.green,.section.green h4 {
 	color:#fff;
+}
+.spacer.violet,.section.violet  {
+	color:rgba(209, 184, 232);;
 }