/*
Theme Name: Flat Bootstrap Child
Theme URI: http://xtremelysocial.com/wordpress/child/
Description: Child theme for Flat Bootstrap. Includes a stylesheet (style.css) for you to restyle any of the CSS and a functions.php file to change theme parameters or components. Both files include samples of a few common things you might want to do.
Author: XtremelySocial
Author url: http://xtremelysocial.com
Version: 1.4
License: GNU General Public License
License URI: http://www.opensource.org/licenses/GPL-3.0
Template: flat-bootstrap
Template Version: 1.4
Tags: one-column, right-sidebar, left-sidebar, fluid-layout, responsive-layout, custom-header, custom-menu, featured-images, featured-image-header, full-width-template, flexible-header, theme-options, sticky-post, threaded-comments, light, translation-ready, rtl-language-support, custom-background
*/

/* Include the parent theme's stylesheet(s). Then anything you change below that will
 * override those styles. If you'd rather start from scratch, you can comment out this
 * next line.
 */
@import url("../flat-bootstrap/style.css");

/* PUT YOUR CHANGED STYLES HERE 
 * 
 * The best way to do this is to copy in the relevant section from the parent's style.css
 * file, change what you want, and remove the lines that you didn't change.
*/

/* Make the buttons square. This is just an example, remove it if you want. */
.btn {
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
}

/* Change the content header to dark blue. This is just an example. */
.content-header {
	background-color: #2980b9;
}

/* PUT ANY NEW STYLES TO USE IN YOUR CONTENT AREAS HERE SO YOU CAN EASILY PASTE THIS
 * SECTION IF YOU CHANGE THEMES
 */
/*

/**Menu of changes**

1. General Formatting
2. Post formatting
3. Archive formatting
4. Breadcrumb
5. Social media
6. A to Z rotator
7. Main Navigation
8. Pills Navigation
9. Buttons
10. Sidebar and Widget area
11. Footer
12. Photo Gallery
13. Media queries - for responsive design
**/

/********************    1. General formatting    *********************/

.page {/**background color - vintage white**/
	background-color: #fdf0cc;
}

body {/**general text dark as possible for contrast without being bold**/
	color: #111;
	font-weight: 400;
}
blockquote {
	border-left: #cc1d25 solid 5px; /***changes the bar shown to red only seen in form submission**/
}



.col-sm-6 {
	padding: 0;
}

/**main body text**/
.main-body {
}

/**getting the titles across the top of the page**/
h3.entry-title a {
	font-size: .75em;
	color: #fff;
	background-color: #cc1d25;
	padding-top: 2px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
}

/**imported from richard coltman**/
.red {
	background-color: transparent;
	color: #CC1D25;
}

.green {
	background-color: transparent;
	color: #3F4B34;
}

.green:hover {
	background-color: transparent;
	color: #3F4B34;
	text-decoration: underline;
}

.blue {
	background-color: transparent;
	color: #3472A1;
}

.blue:hover {
	background-color: transparent;
	color: #3472A1;
	text-decoration: underline;
}

.underline {
	text-decoration: underline;
}

.container {
	background-color: transparent;
}

.top {
	background-image: url(/assets/images/top.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: contain;
	background-color: transparent;
	height: 8em;
}

h1, h2/**, h3, h4**/ {
	font-family: Flareserif821BT-Roman, "Flareserif821 BT", "Times New Roman", serif;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
}

h3 {
	color: #cc1d25;
	font-family: Flareserif821BT-Roman, "Flareserif821 BT", "Times New Roman", serif;
	font-weight: normal;
	font-style: normal;
}

.top h1, .top h1 a {
	background-color: transparent;
	color: #CC1D25;
	margin: 1em 0;
}

.row h3 {
	margin: 0 0 .5em;
}

h4 {
	line-height: 175%;
	vertical-align: middle;
}

hr {
	border-top: 1px solid #ccc;
}

.row div {
/*border: solid 1px red; */
}

/** why here - it causes a problem on the archive menu but necessary for formatting bullet lists?**/
.row ul {
	padding-left: 1em;
}

.introtext {
	font-family: Flareserif821BT-Roman, "Flareserif821 BT", "Times New Roman", serif;
	font-weight: normal;
	font-style: normal;
	background-color: transparent;
	font-size: 125%;
}

/**link formatting**/
a {
	color: #cc1d25;
}

a:hover, a:focus {
/**change so that each colour link remains it's colour but has underlining**/
	color: #cc1d25;
	text-decoration: underline;
}

a:link, a:visited, a:hover, a:active {
	background-color: transparent;
}

a:hover {
	text-decoration: underline;
}

/** removing the entry summary for the sub pages **/
.entry-summary {
/**
	display: none;
}**/
/**framing the featured images**/
}


/**formatting the header text**/
.site-title a, .site-description {
	font-family: Flareserif821BT-Roman, "Flareserif821 BT", "Times New Roman", serif;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	font-size: 1.75em;
	display: none;
/**added 30th March to remove the title**/
}

/**making the header image responsive**/
.custom-header-image {
	background-position: top;
	background-size: 100%;
	background-repeat: no-repeat;
}

.site-branding {
	padding-top: 14px;
	position: relative;
/**added 30th March to display title**/
}

/**reducing the height of the YOuTube video**/
p iframe{height: 400px !important;}

/********************    2. Posts               *********************/

/**2.1 individual posts page**/
div#page.hfeed.site {
	background-color: #fdf0cc; /**vintage white background**/
}

header.content-header {
	background-color: #fdf0cc;/**vintage white background**/
	padding: 0;/*reduce redundant space**/
}
.content-header h1 {
	color: #cc1d25; /**red text from white**/
	text-align: center; /**centre aligned as full width format**/
}

.content-header { 
	min-height: 0 !important; /*removes the large white space*/
}

h1.entry-title {
	font-size: 1.5em;
}

/** 2.2 background for post page**/
div.section.bg-gray {/**formatting the background colour of full width posts**/
	background-color: #fdf0cc;
}
/** 2.3 Previous and Next button formatting **/
.pager li>a {
	background-color: #cc1d25; /**red background**/
	color: #fff; /**white text **/
}

.pager li>a:hover {
	background-color: #cc1d25; /**red background**/
	color: #fff; /**white text **/
	text-decoration: underline;
}
/********************    3. Archives    *********************/
/** 3.1 archives formatting on contact page**/
div#archives.tab-pane.fade.active.in ul li a {
	color: #3472A1; /** blue text **/
}

div#archives.tab-pane.fade.active.in ul li a:hover {
	color: #3472A1; /** blue text **/
	text-decoration: underline; /** underline text **/
}

/** 3.2 navigation in the archives page**/
.page-numbers.current {/** white text on red background **/
	color: #fff;
	background-color: #cc1d25 !important; 
	border-color: #cc1d25 !important;
	
}

a.page-numbers { /**red text (white background already there**/
	color: #cc1d25 !important;
}

.page-numbers:hover { /**white text with red background **/
	background-color: #cc1d25 !important;
	border-color: #cc1d25 !important;
	color: #fff !important;
}

.prev.page-numbers {/**red text (white background already there**/
	color: #cc1d25;
}

.prev.page-numbers:hover {/**white text with red background **/
	background-color: #cc1d25 !important;
	border-color: #cc1d25 !important;
	color: #fff;
}

.next.page-numbers {/**red text (white background already there**/
	color: #cc1d25;
}

.next.page-numbers:hover {/**white text with red background **/
	background-color: #cc1d25 !important;
	border-color: #cc1d25 !important;
	color: #fff;
}

ul.page-numbers.pagination:hover {/** earlier formating of ul 
means this needs to be transparent otherwise shows a red block**/
	border-color: transparent !important;
	background-color: transparent !important;
}

/********************    4. Breadcrumb  *********************/
/**is this redundant?**/
.breadcrumb {/**formatting the breadcrumb**/
	background-color: transparent !important;
} 
.breadcrumb>.active {
	color: #000;
}

/********************    5. social media  *********************/

/** 5.1 General icons **/
.simple-social-icons ul li a {/**social icons**/
	font-family: 'ssi-icomoon' !important;
}
/** 5.2 Instagram widget **/
/**instagram sidebar widget**/
#sb_instagram #sbi_load .sbi_load_btn {
	background-color: #cc1d25; /**red background**/
}

#sb_instagram .sbi_follow_btn a {
	background-color: #cc1d25; /**red background**/
}
/********************    6. A to Z rotator  *********************/

.atoz {
	background-color: transparent; 
	color: #CC1D25; /** text red **/
}

.testimonial_rotator .testimonial_rotator_slide_title {
	font-size: 125%; /** increase font size **/
}

.testimonial_rotator h2 {
	margin-top: 0; /** remove redundant space **/
	color: #cc1d25; /** text red **/
}

.testimonial_rotator_wrap {
	margin-top: 0;/** remove redundant space **/
	padding-top: 0;/** remove redundant space **/
}

.testimonial_rotator.template-default .slide {
	margin-top: 0 !important;
/**removing the page header from the page**/
}

/********************    7. Main Navigation  *********************/ 

.site-branding {position: static !important;}
.navbar-default {
	background-color: transparent; 
	border-top: solid 1px #ccc; /**border line**/
	border-bottom: solid 1px #ccc; /**border line**/
}

.navbar-default a {
	font-family: Flareserif821BT-Roman, "Flareserif821 BT", "Times New Roman", serif; /**check if needed**/
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	text-decoration: none;
	background-color: transparent;
	color: #CC1D25; /**Red text**/
}

.navbar-default ul li a:link, .navbar-default ul li a:visited, .navbar-default ul li a:hover, .navbar-default ul li a:active {
	background-color: transparent;
	color: #CC1D25; /**Red text**/
}

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

.nav>li>a:hover { /**check if needed **/
	color: #fff;
	background-color: #000;
	border-width: 10px;
	text-decoration: underline;
}

.navbar-brand { /**removes the title from just above the menu **/
	display: none;
}

.navbar-brand span {
	background-color: transparent;
	color: #CC1D25; /**red text**/
}

/* fix for menu carat */
ul.nav li.dropdown:hover ul.dropdown-menu {/** is this required there are no dropdowns**/
	display: block;
}

.pager li>a {
	background-color: #cc1d25;
	color: #fff;
}

.pager li>a:hover {
	background-color: #cc1d25;
	color: #fff;
	text-decoration: underline;
}

/********************    8. Pills   *********************/ 
/**sub menu navigation done with pills under the page title area**/

/** 8.1 Pills in red, blue and green dependant on the page**/
.red-pill {
	color: #fff; /**white text**/
	text-align: left;
	background-color: #CC1D25; /*red background**/
	border-radius: 10px;
	border-color: #CC1D25;/*red background**/


}

.blue-pill {
	color: #fff;/**white text**/
	text-align: left;
	background-color: #3472A1;/*blue background**/
	border-radius: 10px;
	border-color: #3472A1;/*blue background**/
}

.green-pill {
	color: #fff;/**white text**/
	text-align: left;
	background-color: #3F4B34;/*green background**/
	border-radius: 10px;
	border-color: #3F4B34;/*green background**/
}
.nav-pills>li.space-pill:hover{background-color: #fdf0cc !important;}

/** when activated the pills behave like letterbox apertures **/
.nav-pills>li.active>a {
	color: #fff; /**white text**/
	background-color: #000;  /**black background**/
	border-style: solid;
	border-width: 10px;
	border-radius: 10px;
}

.nav-pills>li.active>a:hover {
	color: #fff; /**white text**/
	background-color: #000 !important; /**black background**/
	border-width: 10px;
	border-style: solid;
	border-radius: 10px;
}

.nav-pills>li.active>a:focus {
	color: #fff; /**white text**/
	background-color: #000 !important; /**black background**/
	border-style: solid;
	border-width: 10px;
	border-radius: 10px;
}

.nav-pills>li {
	color: #fff; /**white text**/
	border-radius: 10px;
}

.nav-pills>li:hover {
	color: #fff; /**white text**/
	background-color: #000 !important;
	border-radius: 10px;
	border-width: 10px;
}

.nav-pills>li:active {
	color: #fff;/**white text**/
	background-color: #000 !important;
	border-radius: 10px;
}

.nav-pills>li>a {
	color: #fff;/**white text**/
	border-radius: 10px;
}

/********************    9. Buttons               *********************/


/** 9.1 General Buttons - Red, Blue and Green **/
button.btn.btn-primary{ /**general button on the website**/
	color: #fff; /**white text**/
	text-align: centre;
	background-color: #CC1D25; /**red background with border**/
	border: solid;
	border-color: #cc1d25;
	border-radius: 10px !important;
	border-width: 10px;
	padding: 10px 15px;
}
button.btn.btn-primary.active { 
	color: #fff !important; /**link text here to be white unlike the rest of the website**/
	text-align: centre;
	background-color: #000 !important; /**red background**/
	padding: 10px 15px;
	}

button.btn.btn-primary:hover {/**general button which looks like letterbox aperture when hovered over**/
	color: #fff !important; /**overriding link text to white**/
	text-align: centre;
	background-color: #000 !important; /**(overriding background to black**/
	border: solid;
	border-color: #000 !important;
border-width: 10px;
	padding: 10px 15px;
}

button.red-button { /**general button on the website**/
	color: #fff; /**white text**/
	text-align: left;
	background-color: #CC1D25; /**red background with border**/
	border: solid;
	border-color: #cc1d25;
	border-radius: 10px;
	border-width: 10px;
	padding: 5px 0;
}

button.red-button a { 
	color: #fff !important; /**link text here to be white unlike the rest of the website**/
	text-align: left;
	background-color: #CC1D25; /**red background**/
	padding: 10px 15px;
	}

button.red-button a:hover {/**general button which looks like letterbox aperture when hovered over**/
	color: #fff !important; /**overriding link text to white**/
	text-align: left;
	background-color: #000 !important; /**(overriding background to black**/
	padding: 10px 15px;
}
/**redundant button formatting left here in case needed later **/
/**button.green-button {
	color: #fff;
	text-align: left;
	background-color: #3f4b34;
	padding: 1em;
	border: 0;
	border-radius: .5em;
}**/
/**button.green-button a {
	color: #fff;
	text-align: left;
	background-color: #3f4b34;
	padding: 1em;
	border: 0;
	border-radius: .5em;
}**/
/** 9.2 Form Buttons - Changed to red **/
/** forms formatting**/

/**#contact-form-749**/ input[type="submit"] {
	background-color: #cc1d25;/**red background**/
	border: solid;
	border-radius: 10px;
	border-color: #cc1d25;/**red background**/
	padding: 10px;
	border-width: 10px;
}

/**#contact-form-749**/ input[type="submit"]:hover {/**general button which looks like letterbox aperture when hovered over**/
	background-color: #000;/**(overriding background to black**/
	border: solid;
	border-radius: 10px;
	border-color: #cc1d25;/**red background**/
	padding: 10px;
	border-width: 10px;
}

/**#contact-form-749**/ input[type="submit"]:active {/**general button which looks like letterbox aperture when hovered over**/
	background-color: #000;/**(overriding background to black**/
	border: solid;
	border-radius: 10px;
	border-color: #cc1d25;/**red background**/
	padding: 10px;
	border-width: 10px;
}

/**#contact-form-749**/ input[type="submit"]:focus {/**general button which looks like letterbox aperture when hovered over**/
	background-color: #000;/**(overriding background to black**/
	border: solid;
	border-radius: 10px;
	border-color: #cc1d25;/**red background**/
	padding: 10px;
	border-width: 10px;
}

/**blue buttons for the contact us page**/
#contact-form-54 input[type="submit"] {
	background-color: #3472a1;/**blue background**/
	border: solid;
	border-radius: 10px;
	border-color: #3472a1;/**blue background**/
	padding: 10px;
	border-width: 10px;
}

#contact-form-54 input[type="submit"]:hover {/**general button which looks like letterbox aperture when hovered over**/
	background-color: #000;/**(overriding background to black**/
	border: solid;
	border-radius: 10px;
	border-color: #3472a1;/**blue background**/
	padding: 10px;
	border-width: 10px;
}

#contact-form-54 input[type="submit"]:active {/**general button which looks like letterbox aperture when hovered over**/
	background-color: #000;/**(overriding background to black**/
	border: solid;
	border-radius: 10px;
	border-color: #3472a1;/**blue background**/
	padding: 10px;
	border-width: 10px;
}

html input[type="button"],input[type="submit"], input[type="submit"]:hover {
	background-color: #cc1d25;
}



/********************    10. Sidebar and Widget area  *********************/

div#secondary {/**padding to improve layout look on the sidebar widget**/
	padding-left: 40px;
}

div#secondary h2.widget-title {
	color: #cc1d25; /**text to red**/
	border-bottom: solid 1px #ccc; /** line below header **/
}
.sidebar-text {
	font-family: Flareserif821BT-Roman, "Flareserif821 BT", "Times New Roman", serif;
	font-weight: normal;
	font-style: normal;
	background-color: transparent;
	font-size: 85%;
}

h2.widgettitle {
	color: #cc1d25;
}

h2.widget-title {
	color: #cc1d25;
	font-size: 1.5em;
}

.sidebar-footer p {
	color: #fff !important;
}

.sidebar-footer h2 {
	font-size: 1.2em;
}

/********************    11. Footer  *********************/ 

.footer {
	width: 100%;
	background-color: #333333; /**darker background**/
	margin: 3em 0 0;
	color: #fff; /**white text**/
}

.footer span {
	color: #fff; /**white text**/
}

.footer a {
	font-family: Flareserif821BT-Roman, "Flareserif821 BT", "Times New Roman", serif;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: #fff; /**white text**/
}

.footer li a:hover {
	background-color: #CC1D25;
}
.sidebar-footer a:hover:not(.btn), .footer-nav-menu a:hover:not(.btn) {
	color: #cc1d25;
}

aside.widget.widget-instagram-for-wordpress{width: 30%; height: auto; position: relative; }

/********************    12. Photo Gallery  *********************/ 
label {/**what is the label?**/
	font-weight: normal;
}


.thumbnail { /**placing a black border around the thumbnail images**/
	border: none !important;
	border-color: #000000 !important;
	background-color: #fdf0cc /**#000000**/;
}
/********************    13. Photo Gallery  *********************/ 
/**
/* Extra small devices (phones, less than 768px) */
@media (max-width: 441px){
.custom-header-image {height: 100px !important;}}

/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: 442px) {
.custom-header-image {height: 100px !important;}
	
}

@media (min-width: 768px) {
	.custom-header-image {
	background-image: url('https://lbsg.org/wp-content/uploads/2016/12/theletterboxstudygroup.jpg') !important;
		width: /**95%**/
	1600px !important;
		height: 200px !important;
	}
	
	.navbar-default {
		font-size: 70%;
	}
	
	.navbar-brand {
		font-size: 100%;
	}
	
	.top h1 {
		margin: 1.2em 0;
		font-size: 225%;
	}
	
	.container {
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
		width: 95%;
	}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.navbar-default {
		font-size: 105%;
	}
	
	.navbar-brand {
		font-size: 100%;
	}
	
	.container {
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
		width: 95%;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1280px) {
	.navbar-default {
		font-size: 125%;
	}
	
	.navbar-brand {
		font-size: 100%;
	}
	
	.container {
		width: /**1170px**/
	95%;
	}
}

/* HD devices (larger desktops, 1920px and up) */
@media (min-width: 1800px) {
	.navbar-default {
		font-size: 125%;
	}
	
	.navbar-brand {
		font-size: 100%;
	}
	
	.container {
		width: 1300px;
	}
}