Difference between revisions of "Team:Imperial College/Resources/CSS:style"

 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<html>
+
/*!
−
 
+
* Start Bootstrap - Creative v1.1.0 (http://startbootstrap.com/template-overviews/creative)
−
<style>
+
* Copyright 2013-2016 Start Bootstrap
−
 
+
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
−
#sideMenu, #top_title {display:none;}
+
*/
−
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
html,
−
body {background-color:white; }
+
body {
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
  height: 100%;
−
#contentSub, #footer-box, #catlinks, #search-controls,
+
  width: 100%;
−
#p-logo, .printfooter, .firstHeading, .visualClear {
+
−
display: none;
+
 
}
 
}
−
 
+
body {
−
#top-section {
+
  font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;
−
border: 0 none;
+
−
height: 14px;
+
−
z-index: 100;
+
−
top: 0;
+
−
position: fixed;
+
−
width: 975px;
+
−
left: 50%;
+
−
margin-left: -487px;
+
 
}
 
}
−
+
hr {
−
#globalWrapper, #content {
+
  border-color: #F05F40;
−
width: 100%;
+
  border-width: 3px;
−
height: 100%;
+
  max-width: 50px;
−
border: 0px;
+
−
background-color: transparent;
+
−
margin: 0px;
+
−
padding: 0px;
+
−
font-size: 100%;
+
 
}
 
}
−
+
hr.light {
−
html, body, .wrapper {
+
  border-color: white;
−
width: 100%;
+
−
height: 100%;
+
−
background-color: transparent;
+
 
}
 
}
−
 
+
a {
−
.sidebar-nav {
+
  -webkit-transition: all 0.35s;
−
    padding: 9px 0;
+
  -moz-transition: all 0.35s;
 +
  transition: all 0.35s;
 +
  color: #F05F40;
 
}
 
}
−
 
+
a:hover,
−
.dropdown-menu .sub-menu {
+
a:focus {
−
     left: 100%;
+
  color: #eb3812;
 +
}
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 +
}
 +
p {
 +
  font-size: 16px;
 +
  line-height: 1.5;
 +
  margin-bottom: 20px;
 +
}
 +
.bg-primary {
 +
  background-color: #F05F40;
 +
}
 +
.bg-dark {
 +
  background-color: #222222;
 +
  color: white;
 +
}
 +
.text-faded {
 +
  color: rgba(255, 255, 255, 0.7);
 +
}
 +
section {
 +
  padding: 100px 0;
 +
}
 +
aside {
 +
  padding: 50px 0;
 +
}
 +
.no-padding {
 +
  padding: 0;
 +
}
 +
.navbar-default {
 +
  background-color: white;
 +
  border-color: rgba(34, 34, 34, 0.05);
 +
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 +
  -webkit-transition: all 0.35s;
 +
  -moz-transition: all 0.35s;
 +
  transition: all 0.35s;
 +
}
 +
.navbar-default .navbar-header .navbar-brand {
 +
  color: #F05F40;
 +
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 +
  font-weight: 700;
 +
  text-transform: uppercase;
 +
}
 +
.navbar-default .navbar-header .navbar-brand:hover,
 +
.navbar-default .navbar-header .navbar-brand:focus {
 +
  color: #eb3812;
 +
}
 +
.navbar-default .navbar-header .navbar-toggle {
 +
  font-weight: 700;
 +
  font-size: 12px;
 +
  color: #222222;
 +
  text-transform: uppercase;
 +
}
 +
.navbar-default .nav > li > a,
 +
.navbar-default .nav > li > a:focus {
 +
  text-transform: uppercase;
 +
  font-weight: 700;
 +
  font-size: 13px;
 +
  color: #222222;
 +
}
 +
.navbar-default .nav > li > a:hover,
 +
.navbar-default .nav > li > a:focus:hover {
 +
  color: #F05F40;
 +
}
 +
.navbar-default .nav > li.active > a,
 +
.navbar-default .nav > li.active > a:focus {
 +
  color: #F05F40 !important;
 +
  background-color: transparent;
 +
}
 +
.navbar-default .nav > li.active > a:hover,
 +
.navbar-default .nav > li.active > a:focus:hover {
 +
  background-color: transparent;
 +
}
 +
@media (min-width: 768px) {
 +
  .navbar-default {
 +
     background-color: transparent;
 +
    border-color: rgba(255, 255, 255, 0.3);
 +
  }
 +
  .navbar-default .navbar-header .navbar-brand {
 +
    color: rgba(255, 255, 255, 0.7);
 +
  }
 +
  .navbar-default .navbar-header .navbar-brand:hover,
 +
  .navbar-default .navbar-header .navbar-brand:focus {
 +
    color: white;
 +
  }
 +
  .navbar-default .nav > li > a,
 +
  .navbar-default .nav > li > a:focus {
 +
    color: rgba(255, 255, 255, 0.7);
 +
  }
 +
  .navbar-default .nav > li > a:hover,
 +
  .navbar-default .nav > li > a:focus:hover {
 +
    color: white;
 +
  }
 +
  .navbar-default.affix {
 +
    background-color: white;
 +
    border-color: rgba(34, 34, 34, 0.05);
 +
  }
 +
  .navbar-default.affix .navbar-header .navbar-brand {
 +
    color: #F05F40;
 +
    font-size: 14px;
 +
  }
 +
  .navbar-default.affix .navbar-header .navbar-brand:hover,
 +
  .navbar-default.affix .navbar-header .navbar-brand:focus {
 +
    color: #eb3812;
 +
  }
 +
  .navbar-default.affix .nav > li > a,
 +
  .navbar-default.affix .nav > li > a:focus {
 +
    color: #222222;
 +
  }
 +
  .navbar-default.affix .nav > li > a:hover,
 +
  .navbar-default.affix .nav > li > a:focus:hover {
 +
    color: #F05F40;
 +
  }
 +
}
 +
header {
 +
  position: relative;
 +
  width: 100%;
 +
  min-height: auto;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  background-size: cover;
 +
  -o-background-size: cover;
 +
  background-position: center;
 +
  background-image: url(http://unsplash.it/1400/800);
 +
  text-align: center;
 +
  color: white;
 +
}
 +
header .header-content {
 +
  position: relative;
 +
  text-align: center;
 +
  padding: 100px 15px 100px;
 +
  width: 100%;
 +
}
 +
header .header-content .header-content-inner h1 {
 +
  font-weight: 700;
 +
  text-transform: uppercase;
 +
  margin-top: 0;
 +
  margin-bottom: 0;
 +
  font-size: 30px;
 +
}
 +
header .header-content .header-content-inner hr {
 +
  margin: 30px auto;
 +
}
 +
header .header-content .header-content-inner p {
 +
  font-weight: 300;
 +
  color: rgba(255, 255, 255, 0.7);
 +
  font-size: 16px;
 +
  margin-bottom: 50px;
 +
}
 +
@media (min-width: 768px) {
 +
  header {
 +
    min-height: 100%;
 +
  }
 +
  header .header-content {
 
     position: absolute;
 
     position: absolute;
−
     top: 0;
+
     top: 50%;
−
     visibility: hidden;
+
    -webkit-transform: translateY(-50%);
−
     margin-top: -1px;
+
    -ms-transform: translateY(-50%);
 +
    transform: translateY(-50%);
 +
    padding: 0 50px;
 +
  }
 +
  header .header-content .header-content-inner {
 +
     max-width: 1000px;
 +
     margin-left: auto;
 +
    margin-right: auto;
 +
  }
 +
  header .header-content .header-content-inner h1 {
 +
    font-size: 50px;
 +
  }
 +
  header .header-content .header-content-inner p {
 +
    font-size: 18px;
 +
    max-width: 80%;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
  }
 +
}
 +
.section-heading {
 +
  margin-top: 0;
 +
}
 +
.service-box {
 +
  max-width: 400px;
 +
  margin: 50px auto 0;
 +
}
 +
@media (min-width: 992px) {
 +
  .service-box {
 +
    margin: 20px auto 0;
 +
  }
 +
}
 +
.service-box p {
 +
  margin-bottom: 0;
 +
}
 +
.portfolio-box {
 +
  position: relative;
 +
  display: block;
 +
  max-width: 650px;
 +
  margin: 0 auto;
 +
}
 +
.portfolio-box .portfolio-box-caption {
 +
  color: white;
 +
  opacity: 0;
 +
  display: block;
 +
  background: rgba(240, 95, 64, 0.9);
 +
  position: absolute;
 +
  bottom: 0;
 +
  text-align: center;
 +
  width: 100%;
 +
  height: 100%;
 +
  -webkit-transition: all 0.35s;
 +
  -moz-transition: all 0.35s;
 +
  transition: all 0.35s;
 +
}
 +
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
 +
  width: 100%;
 +
  text-align: center;
 +
  position: absolute;
 +
  top: 50%;
 +
  transform: translateY(-50%);
 +
}
 +
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
 +
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
 +
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 +
  padding: 0 15px;
 +
}
 +
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
 +
  text-transform: uppercase;
 +
  font-weight: 600;
 +
  font-size: 14px;
 +
}
 +
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
 +
  font-size: 18px;
 +
}
 +
.portfolio-box:hover .portfolio-box-caption {
 +
  opacity: 1;
 +
}
 +
.portfolio-box:focus {
 +
  outline: none;
 +
}
 +
@media (min-width: 768px) {
 +
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
 +
    font-size: 16px;
 +
  }
 +
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
 +
    font-size: 22px;
 +
  }
 +
}
 +
.call-to-action h2 {
 +
  margin: 0 auto 20px;
 +
}
 +
.text-primary {
 +
  color: #F05F40;
 +
}
 +
.no-gutter > [class*='col-'] {
 +
  padding-right: 0;
 +
  padding-left: 0;
 +
}
 +
.btn-default {
 +
  color: #222222;
 +
  background-color: white;
 +
  border-color: white;
 +
  -webkit-transition: all 0.35s;
 +
  -moz-transition: all 0.35s;
 +
  transition: all 0.35s;
 +
}
 +
.btn-default:hover,
 +
.btn-default:focus,
 +
.btn-default.focus,
 +
.btn-default:active,
 +
.btn-default.active,
 +
.open > .dropdown-toggle.btn-default {
 +
  color: #222222;
 +
  background-color: #f2f2f2;
 +
  border-color: #ededed;
 +
}
 +
.btn-default:active,
 +
.btn-default.active,
 +
.open > .dropdown-toggle.btn-default {
 +
  background-image: none;
 +
}
 +
.btn-default.disabled,
 +
.btn-default[disabled],
 +
fieldset[disabled] .btn-default,
 +
.btn-default.disabled:hover,
 +
.btn-default[disabled]:hover,
 +
fieldset[disabled] .btn-default:hover,
 +
.btn-default.disabled:focus,
 +
.btn-default[disabled]:focus,
 +
fieldset[disabled] .btn-default:focus,
 +
.btn-default.disabled.focus,
 +
.btn-default[disabled].focus,
 +
fieldset[disabled] .btn-default.focus,
 +
.btn-default.disabled:active,
 +
.btn-default[disabled]:active,
 +
fieldset[disabled] .btn-default:active,
 +
.btn-default.disabled.active,
 +
.btn-default[disabled].active,
 +
fieldset[disabled] .btn-default.active {
 +
  background-color: white;
 +
  border-color: white;
 +
}
 +
.btn-default .badge {
 +
  color: white;
 +
  background-color: #222222;
 +
}
 +
.btn-primary {
 +
  color: white;
 +
  background-color: #F05F40;
 +
  border-color: #F05F40;
 +
  -webkit-transition: all 0.35s;
 +
  -moz-transition: all 0.35s;
 +
  transition: all 0.35s;
 +
}
 +
.btn-primary:hover,
 +
.btn-primary:focus,
 +
.btn-primary.focus,
 +
.btn-primary:active,
 +
.btn-primary.active,
 +
.open > .dropdown-toggle.btn-primary {
 +
  color: white;
 +
  background-color: #ee4b28;
 +
  border-color: #ed431f;
 +
}
 +
.btn-primary:active,
 +
.btn-primary.active,
 +
.open > .dropdown-toggle.btn-primary {
 +
  background-image: none;
 +
}
 +
.btn-primary.disabled,
 +
.btn-primary[disabled],
 +
fieldset[disabled] .btn-primary,
 +
.btn-primary.disabled:hover,
 +
.btn-primary[disabled]:hover,
 +
fieldset[disabled] .btn-primary:hover,
 +
.btn-primary.disabled:focus,
 +
.btn-primary[disabled]:focus,
 +
fieldset[disabled] .btn-primary:focus,
 +
.btn-primary.disabled.focus,
 +
.btn-primary[disabled].focus,
 +
fieldset[disabled] .btn-primary.focus,
 +
.btn-primary.disabled:active,
 +
.btn-primary[disabled]:active,
 +
fieldset[disabled] .btn-primary:active,
 +
.btn-primary.disabled.active,
 +
.btn-primary[disabled].active,
 +
fieldset[disabled] .btn-primary.active {
 +
  background-color: #F05F40;
 +
  border-color: #F05F40;
 +
}
 +
.btn-primary .badge {
 +
  color: #F05F40;
 +
  background-color: white;
 +
}
 +
.btn {
 +
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 +
  border: none;
 +
  border-radius: 300px;
 +
  font-weight: 700;
 +
  text-transform: uppercase;
 +
}
 +
.btn-xl {
 +
  padding: 15px 30px;
 +
}
 +
::-moz-selection {
 +
  color: white;
 +
  text-shadow: none;
 +
  background: #222222;
 +
}
 +
::selection {
 +
  color: white;
 +
  text-shadow: none;
 +
  background: #222222;
 
}
 
}
−
 
+
img::selection {
−
.dropdown-menu li:hover .sub-menu {
+
  color: white;
−
    visibility: visible;
+
  background: transparent;
 
}
 
}
−
 
+
img::-moz-selection {
−
.dropdown:hover .dropdown-menu {
+
  color: white;
−
    display: block;
+
  background: transparent;
 
}
 
}
−
 
+
body {
−
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
+
  webkit-tap-highlight-color: #222222;
−
    margin-top: 0;
+
 
}
 
}
−
 
−
 
−
/********************************* CONTENT OF THE PAGE ********************************/
 
−
 
−
/* Wrapper for the content */
 
−
.content_wrapper {
 
−
width: 85%;
 
−
margin-left:150px;
 
−
padding:10px 0px;
 
−
float:left;
 
−
background-color:white;
 
−
}
 
−
 
−
/*LAYOUT */
 
−
.column  {
 
−
padding: 10px 25px;
 
−
float:left;
 
−
background-color:white;
 
−
}
 
−
 
−
.full_size {
 
−
width:100%;
 
−
}
 
−
 
−
.full_size img {
 
−
padding: 10px 15px;
 
−
width:96.5%;
 
−
}
 
−
 
−
.half_size {
 
−
width: 50%;
 
−
}
 
−
.half_size img {
 
−
padding: 10px 15px;
 
−
width: 93%;
 
−
}
 
−
 
−
 
−
.clear {
 
−
clear:both;
 
−
}
 
−
 
−
.highlight {
 
−
width: 90%;
 
−
margin: auto;
 
−
padding: 15px 5px;
 
−
background-color: #f2f2f2;
 
−
}
 
−
 
−
.judges-will-not-evaluate {
 
−
border: 4px solid #72c9b6;
 
−
display: block;
 
−
margin: 5px 15px;
 
−
width: 95%;
 
−
font-weight:bold;
 
−
}
 
−
 
−
 
−
/*STYLING */
 
−
 
−
/* styling for the titles */
 
−
.content_wrapper h1, .content_wrapper h2 {
 
−
padding:5px 15px;
 
−
border-bottom:0px;
 
−
color:#003E74;
 
−
 
−
}
 
−
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
 
−
padding:5px 15px;
 
−
border-bottom:0px;
 
−
color: #000000; 
 
−
}
 
−
 
−
 
−
/* font and text */
 
−
.content_wrapper p {
 
−
padding:0px 15px;
 
−
font-size: 13px;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
}
 
−
 
−
/* Links */
 
−
.content_wrapper a {
 
−
font-weight: bold;
 
−
text-decoration: underline;
 
−
text-decoration-color:#72c9b6;
 
−
color: #72c9b6;
 
−
-webkit-transition: all 0.4s ease;
 
−
-moz-transition: all 0.4s ease;
 
−
-ms-transition: all 0.4s ease;
 
−
-o-transition: all 0.4s ease;
 
−
transition: all 0.4s ease;
 
−
}
 
−
 
−
/* hover for the links */
 
−
.content_wrapper a:hover {
 
−
text-decoration:none;
 
−
color:#000000;
 
−
}
 
−
 
−
/* non numbered lists */
 
−
.content_wrapper ul {
 
−
padding:0px 20px;
 
−
font-size: 13px;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
}
 
−
 
−
/* numbered lists */
 
−
.content_wrapper ol {
 
−
padding:0px;
 
−
font-size: 13px;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
}
 
−
 
−
/* Table */
 
−
.content_wrapper table {
 
−
width: 97%;
 
−
margin:15px 10px;
 
−
border: 1px solid #d3d3d3;
 
−
border-collapse: collapse;
 
−
}
 
−
 
−
/* table cells */
 
−
.content_wrapper  td {
 
−
padding: 10px;
 
−
vertical-align: text-top;
 
−
border: 1px solid #d3d3d3;
 
−
border-collapse: collapse;
 
−
}
 
−
 
−
/* table headers */
 
−
.content_wrapper th {
 
−
padding: 10px;
 
−
vertical-align: text-top;
 
−
border: 1px solid #d3d3d3;
 
−
border-collapse: collapse;
 
−
background-color:#f2f2f2;
 
−
}
 
−
 
−
/* Button class */
 
−
.button_click {
 
−
margin: 10px auto;
 
−
padding: 15px; width:12%; 
 
−
text-align:center;
 
−
font-weight:bold;
 
−
background-color: #72c9b6;
 
−
cursor:pointer; 
 
−
-webkit-transition: all 0.4s ease;
 
−
-moz-transition: all 0.4s ease;
 
−
-ms-transition: all 0.4s ease;
 
−
-o-transition: all 0.4s ease;
 
−
transition: all 0.4s ease;
 
−
}
 
−
 
−
/* button class on hover */
 
−
.button_click:hover { 
 
−
background-color:#000000;
 
−
color:#72c9b6;
 
−
}
 
−
 
−
/********************************* RESPONSIVE STYLING ********************************/
 
−
 
−
/* IF THE SCREEN IS LESS THAN 1000PX */
 
−
 
−
@media only screen and (max-width: 1000px) {
 
−
 
−
#content {width:100%; }
 
−
.menu_wrapper {width:15%;}
 
−
.content_wrapper {margin-left: 15%;}
 
−
.menu_item {display:block;}
 
−
.icon {display:none;}
 
−
.highlight {padding:10px 0px;}
 
−
}
 
−
 
−
 
−
/* IF THE SCREEN IS LESS THAN 680PX */
 
−
 
−
@media only screen and (max-width: 680px) {
 
−
.collapsable_menu_control { display:block;}
 
−
.menu_item {display:none;}
 
−
.menu_wrapper { width:100%; height: 15%; position:relative;}
 
−
.content_wrapper {width:100%; margin-left:0px;}
 
−
.column.half_size {width:100%; }
 
−
.column img { width: 100%; padding: 5px 0px;}
 
−
.icon {display:block;}
 
−
.highlight {padding:15px 5px;}
 
−
}
 
−
 
−
</style>
 
−
</html>
 

Latest revision as of 10:02, 26 July 2016

/*! 

* Start Bootstrap - Creative v1.1.0 (http://startbootstrap.com/template-overviews/creative)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/

html, body { 

 height: 100%;
 width: 100%;

} body { 

 font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;

} hr { 

 border-color: #F05F40;
 border-width: 3px;
 max-width: 50px;

} hr.light { 

 border-color: white;

} a { 

 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;
 color: #F05F40;

} a:hover, a:focus { 

 color: #eb3812;

} h1, h2, h3, h4, h5, h6 { 

 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

} p { 

 font-size: 16px;
 line-height: 1.5;
 margin-bottom: 20px;

} .bg-primary { 

 background-color: #F05F40;

} .bg-dark { 

 background-color: #222222;
 color: white;

} .text-faded { 

 color: rgba(255, 255, 255, 0.7);

} section { 

 padding: 100px 0;

} aside { 

 padding: 50px 0;

} .no-padding { 

 padding: 0;

} .navbar-default { 

 background-color: white;
 border-color: rgba(34, 34, 34, 0.05);
 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;

} .navbar-default .navbar-header .navbar-brand { 

 color: #F05F40;
 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 font-weight: 700;
 text-transform: uppercase;

} .navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { 

 color: #eb3812;

} .navbar-default .navbar-header .navbar-toggle { 

 font-weight: 700;
 font-size: 12px;
 color: #222222;
 text-transform: uppercase;

} .navbar-default .nav > li > a, .navbar-default .nav > li > a:focus { 

 text-transform: uppercase;
 font-weight: 700;
 font-size: 13px;
 color: #222222;

} .navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { 

 color: #F05F40;

} .navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus { 

 color: #F05F40 !important;
 background-color: transparent;

} .navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover { 

 background-color: transparent;

} @media (min-width: 768px) { 

 .navbar-default {
   background-color: transparent;
   border-color: rgba(255, 255, 255, 0.3);
 }
 .navbar-default .navbar-header .navbar-brand {
   color: rgba(255, 255, 255, 0.7);
 }
 .navbar-default .navbar-header .navbar-brand:hover,
 .navbar-default .navbar-header .navbar-brand:focus {
   color: white;
 }
 .navbar-default .nav > li > a,
 .navbar-default .nav > li > a:focus {
   color: rgba(255, 255, 255, 0.7);
 }
 .navbar-default .nav > li > a:hover,
 .navbar-default .nav > li > a:focus:hover {
   color: white;
 }
 .navbar-default.affix {
   background-color: white;
   border-color: rgba(34, 34, 34, 0.05);
 }
 .navbar-default.affix .navbar-header .navbar-brand {
   color: #F05F40;
   font-size: 14px;
 }
 .navbar-default.affix .navbar-header .navbar-brand:hover,
 .navbar-default.affix .navbar-header .navbar-brand:focus {
   color: #eb3812;
 }
 .navbar-default.affix .nav > li > a,
 .navbar-default.affix .nav > li > a:focus {
   color: #222222;
 }
 .navbar-default.affix .nav > li > a:hover,
 .navbar-default.affix .nav > li > a:focus:hover {
   color: #F05F40;
 }

} header { 

 position: relative;
 width: 100%;
 min-height: auto;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
 -o-background-size: cover;
 background-position: center;
 background-image: url(http://unsplash.it/1400/800);
 text-align: center;
 color: white;

} header .header-content { 

 position: relative;
 text-align: center;
 padding: 100px 15px 100px;
 width: 100%;

} header .header-content .header-content-inner h1 { 

 font-weight: 700;
 text-transform: uppercase;
 margin-top: 0;
 margin-bottom: 0;
 font-size: 30px;

} header .header-content .header-content-inner hr { 

 margin: 30px auto;

} header .header-content .header-content-inner p { 

 font-weight: 300;
 color: rgba(255, 255, 255, 0.7);
 font-size: 16px;
 margin-bottom: 50px;

} @media (min-width: 768px) { 

 header {
   min-height: 100%;
 }
 header .header-content {
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   padding: 0 50px;
 }
 header .header-content .header-content-inner {
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
 }
 header .header-content .header-content-inner h1 {
   font-size: 50px;
 }
 header .header-content .header-content-inner p {
   font-size: 18px;
   max-width: 80%;
   margin-left: auto;
   margin-right: auto;
 }

} .section-heading { 

 margin-top: 0;

} .service-box { 

 max-width: 400px;
 margin: 50px auto 0;

} @media (min-width: 992px) { 

 .service-box {
   margin: 20px auto 0;
 }

} .service-box p { 

 margin-bottom: 0;

} .portfolio-box { 

 position: relative;
 display: block;
 max-width: 650px;
 margin: 0 auto;

} .portfolio-box .portfolio-box-caption { 

 color: white;
 opacity: 0;
 display: block;
 background: rgba(240, 95, 64, 0.9);
 position: absolute;
 bottom: 0;
 text-align: center;
 width: 100%;
 height: 100%;
 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;

} .portfolio-box .portfolio-box-caption .portfolio-box-caption-content { 

 width: 100%;
 text-align: center;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);

} .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category, .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { 

 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 padding: 0 15px;

} .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { 

 text-transform: uppercase;
 font-weight: 600;
 font-size: 14px;

} .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { 

 font-size: 18px;

} .portfolio-box:hover .portfolio-box-caption { 

 opacity: 1;

} .portfolio-box:focus { 

 outline: none;

} @media (min-width: 768px) { 

 .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
   font-size: 16px;
 }
 .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
   font-size: 22px;
 }

} .call-to-action h2 { 

 margin: 0 auto 20px;

} .text-primary { 

 color: #F05F40;

} .no-gutter > [class*='col-'] { 

 padding-right: 0;
 padding-left: 0;

} .btn-default { 

 color: #222222;
 background-color: white;
 border-color: white;
 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;

} .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { 

 color: #222222;
 background-color: #f2f2f2;
 border-color: #ededed;

} .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { 

 background-image: none;

} .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { 

 background-color: white;
 border-color: white;

} .btn-default .badge { 

 color: white;
 background-color: #222222;

} .btn-primary { 

 color: white;
 background-color: #F05F40;
 border-color: #F05F40;
 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;

} .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { 

 color: white;
 background-color: #ee4b28;
 border-color: #ed431f;

} .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { 

 background-image: none;

} .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { 

 background-color: #F05F40;
 border-color: #F05F40;

} .btn-primary .badge { 

 color: #F05F40;
 background-color: white;

} .btn { 

 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 border: none;
 border-radius: 300px;
 font-weight: 700;
 text-transform: uppercase;

} .btn-xl { 

 padding: 15px 30px;

}

-moz-selection {
 color: white;
 text-shadow: none;
 background: #222222;

}

selection {
 color: white;
 text-shadow: none;
 background: #222222;

} img::selection { 

 color: white;
 background: transparent;

} img::-moz-selection { 

 color: white;
 background: transparent;

} body { 

 webkit-tap-highlight-color: #222222;

}