/*
Title: Widths CSS Rules
Author: Ian Borg <ianb@capsicumcorp.com>
Description: A custom set of css rules to overwrite template styles
Copyright: Capsicum Corporation 2015, 2016, 2017

This file is part of iOmy.

You should have received a copy of the GNU General Public License
along with iOmy.  If not, see <http://www.gnu.org/licenses/>.

* =================================================================================== */
/* ============================== Table of Contents ================================= */
/* == #1.0# - Base Classes                                                         == */
/* ================================================================================== */
/* ================================================================================== */

/* ================================================================================== */
/* == #1.0# Base Classes                                                           == */
/* ================================================================================== */
	
/* Custom Colors for KC

001e38 deep blue
fcc81d yellow

*/

.navbar-kc , footer {
	background-color: #001e38;
	border-color: #001e38;
	color: #fcc81d !important;
}

.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover  {
    color: #fcc81d;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #555;
    background-color: #f1bb02;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
	color: #555;
    background-color: #f1bb02;
}

.navbar-brand {
  padding: 0px;
  height: 75px;
}
@media only screen and (max-width: 767px) {
	.navbar-brand > picture > img{
	  margin-top:9px;
	}
}

.navbar-brand > picture > img{
  height: 100%;
  padding: 5px;
  width: auto;
}

/* Changes the default color for links to a darker yellow */
a.active, a:active, a:focus, a:hover {
    color: #fcc81d;
}

/* Sets the padding back to default for the portfolio-tabs */
.nav > li > .portfolio-tabs {
	padding: 10px 15px;
}

@media only screen and (min-width: 768px) {
	.nav > li > a {
	  padding-top: 30px;
	  padding-bottom: 30px;
	}
}
@media only screen and (max-width: 767px) {
	.navbar-brand > img {
	  margin-top:10px;
	}
}

.navbar-toggle {
  padding: 10px;
  margin: 25px 15px 25px 0;
}


.TextCenter {
	text-align: center;
}

.ElementCenter {
	margin: auto;
}

section h3.section-subheading {
    font-size: 40px;
		font-weight: 800;
}

/* Fix house image sizes for missing image issues */
.house-image {
  display: block;
  max-width: 300px;
  height: 150px;
}

/* ================================================================================== */
/* == #2.0# Ribbons                                                                == */
/* ================================================================================== */

.picture {
  position: relative;
  width:100%;
}

.ribbon {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  width: 100%; 
  height: 100%;
  text-align: right;
}
.ribbon-yellow span {
  font-size: 1.25rem;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 2.5rem;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 30rem;
  display: block;
  background: #fed136;
  background: linear-gradient(#fed136 0%, #b38b01 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 6rem;
  left: 3rem;
}

.ribbon-red span {
  font-size: 1.25rem;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 2.5rem;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 30rem;
  display: block;
  background: #fe3636;
  background: linear-gradient(#fe3636 0%, #b30101 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 6rem;
  left: 3rem;
}