/*
 Theme Name:   TBBC Theme
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  TBBC
 Author:       Waxed Media
 Author URI:   http://www.waxedmedia.co.za
 Template:     wordpress-bootstrap
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  wordpress-bootstrap-child
*/

@import url("../wordpress-bootstrap/style.css");

/* HEADER */
body {
	padding:0px;
	font-family: 'Roboto';
	font-style: normal;
	font-size: 16px;
	font-weight: 400;

}
.writing {
    text-align:justify;
}
.row {
	margin:0px;
}

.brand-specialist {
    margin-top: 24px;
}
.navbar {
    border-radius: 0px;
    margin-bottom: 0px;
}
.navbar-default {
    background-color: #607087;
    border:0px;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #607087;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #607087;
}
.navbar-default .navbar-nav > li > a {
    color: #fff;
 	border-right: 1px solid #7488a5;
}
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }

/* TYPOGRAPHY */
h1, .h1 {
    font-size: 50px;
    line-height: 52px;
    font-weight: 200;
    margin-top: 0px;
}
.home-page-title {
    font-size: 46px;
    line-height: 46px;
}
.home-page-title-bold {
    font-size: 46px;
    line-height: 46px;
    font-weight: 600;
    margin-bottom: 20px;
}
.sub-heading {
    font-size: 24px;
}

/* SECTIONS */

.section-light-grey {
    background: #e1e1e1 none repeat scroll 0% 0%;
    color: #666666;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-white {
    background: #fff none repeat scroll 0% 0%;
    color: #666666;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-orange {
    background: #FF841E none repeat scroll 0% 0%;
    color: #666666;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-magento {
    background: #9f0631 none repeat scroll 0% 0%;
    color: #fff;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-light-greenish {
    background: #d4dccb none repeat scroll 0% 0%;
    color: #000;
    padding-top: 40px;
    padding-bottom: 40px;
}

.section-maroon {
    background: #741326 none repeat scroll 0% 0%;
    color: #fff;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-cream {
    background: #f6d699 none repeat scroll 0% 0%;
    color: #000;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-green {
    background: #b6c881 none repeat scroll 0% 0%;
    color: #000;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-greyish {
    background: #b5cac7 none repeat scroll 0% 0%;
    color: #000;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-light-greyish {
    background: #dfdfdf none repeat scroll 0% 0%;
    color: #000;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-lightest-grey {
    background: #d8e1ec none repeat scroll 0% 0%;
    color: #000;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-peach {
    background: #fec0a6 none repeat scroll 0% 0%;
    color: #000;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-creamish {
    background: #feeac0 none repeat scroll 0% 0%;
    color: #000;
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-lime {
    background: #e3e69b none repeat scroll 0% 0%;
    color: #000;
    padding-top: 40px;
    padding-bottom: 40px;
}

.township-intro {
    background: url(http://www.tbbc.co.za/wp-content/themes/wordpress-bootstrap-child/images/township.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    text-align:center;
    overflow:auto;
    color:#fff;
    padding-top: 100px;
    padding-bottom: 180px;

}
.township-writing {
    text-align:center;
    margin-top: 150px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 150px;
}

/* FOOTER */

.footer-logo-text {
	 color:#f39723;
	 font-size: 18px;
	 text-align: left;
}
.attribution {
	text-align: center;
	color:#a2a2a2;
}
.section-black {
	background: #000;
    color: #fff;
    border-top: 8px #666666 solid;
}
.section-grey {
    background: #333 none repeat scroll 0% 0%;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
}

/* FORMS */

.wpcf7 {
    background-color: #FF841E;
    border: 5px solid #FF841E;
    color:#ffffff;
    margin-bottom:40px!important;
}

.wpcf7-form {
    margin-left: 25px;
    margin-right: 35px;
    margin-top: 25px;
}

.wpcf7-form p {
    margin-bottom:10px;
}

.wpcf7-textarea {
    width: 100%;
    color:#505050;
    padding: 3px;
}
.wpcf7 input {
    width: 100%;
    color:#505050;
}
.wpcf7-text {
    width: 85%;
    color:#505050;
}
.wpcf7-form input[type="submit"] {
    color:#fff; 
    background-color: #4c4c4c!important;
    display:inline-block;
    cursor: pointer;
    border: #cccccc 2px solid;
    padding: 12px 12px;
    text-transform: uppercase;
}
.wpcf7-form input[type="submit"]:hover {
    background-color:#ffffff!important;
    border: #fff 2px solid!important;
    color:#FF841E!important;
    padding: 12px 12px;
}
.contact-form-heading {
    font-size:39px;
    font-weight:100;
    line-height: 42px;
    margin-bottom: 30px;
}
.wpcf7 select {
    background-color: #fff;
    border: 1px solid #fff;
    margin: 0;
    color:#505050;
    padding: 0px 0px 0px;
    text-indent: 0px;
    width: 100%;
    z-index: 100;
}
.hideMe{
  display:block;
  position:absolute;
  text-indent:-9999px;
  float:left;
}
.overlay {
   background:transparent; 
   position:relative; 
   width:100%;
   height:400px; /* your iframe height */
   top:400px;  /* your iframe height */
   margin-top:-400px;  /* your iframe height */
}

/*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {
    	/* Header */
    	.brand-specialist {
    		margin-top: 24px;
    	}

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
    	/* Header */
    	.brand-specialist {
    		margin-top: 30px;
    	}
    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    	/* Header */
    	.brand-specialist {
    		margin-top: 20px;
    	}
    	
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
    	/* Header */
    	
    	
    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        /* Header */
       
    	
    }