@charset "utf-8";

@import url("fontawesome-free/css/fontawesome-all.min.css");
@import url("framework.css");

/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0, .row0 a{}
.row1, .row1 a{}
.row2, .row2 a{        line-height: 2em;}
.row3, .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}




/* Page Intro
--------------------------------------------------------------------------------------------------------------- */
#pageintro{padding:250px 0 100px;}/* 300px => 100px for #introblocks negative margin */

#pageintro article, #pageintro article p{display:block; max-width:75%; margin:0 auto; text-align:center;}
#pageintro article p{max-width:65%; line-height:2rem;}
#pageintro .heading{margin-bottom:20px; font-size:4rem;}
#pageintro footer{margin-top:50px;}


/* Introblocks - x3
--------------------------------------------------------------------------------------------------------------- */
#introblocks{position:relative; z-index:1;}
#introblocks > ul{display:block; margin:-180px 0 0; text-align:center;}/* 180px => 100px + container padding */
#introblocks article{display:block; padding:30px; text-align:center;}
#introblocks article > a{}
#introblocks article > a::after{display:block; width:100%; content:"";}/* Used to stop the two inline-block elements stacking next to each other */
#introblocks article i{display:inline-block; position:relative; width:45px; height:45px; line-height:43px; margin-bottom:30px; font-size:16px; text-align:center; border:1px solid; border-radius:50%;}
#introblocks article .heading{font-size:1.0rem; font-weight:700;}
#introblocks article .heading.underline::after{left:50%; margin-left:-12%;}


/* Content Area
--------------------------------------------------------------------------------------------------------------- */


/* Transition Fade
This gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devices
If you don't want it to fade all elements, you have to list the ones you want to be faded individually
Delete it completely to stop fading
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}
#mainav form *{transition:none !important;}













/* Colours
--------------------------------------------------------------------------------------------------------------- */

a{color:#FF3F4A;}
a:active, a:focus{background:transparent !important;}/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#FF3F4A !important;}

.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.55);}
.overlay.light{color:#474747;}
.overlay.light::after{background-color:rgba(255,255,255,.7);}


.heading.underline::after{background-color:#019efb;}


/* Rows */
.row0{color:#474747; background-color:#F4F4F4;}
.row1{color:#FFFFFF; background-color:#FF3F4A;}
.row2{color:#474747; background-color:#ffffff;}
.row3{color:#474747; background-color:#FFFFFF;}
.row4{color:#A5A6AA; background-color:#27282E;}
.row5, .row5 a{color:#A5A6AA; background-color:#1C1D21;}




/* Page Intro */
#pageintro{color:#FFFFFF;}


/* Introblocks */
#introblocks article{color:#474747; background-color:#FFFFFF; box-shadow:2px 2px 10px #007bff52;}
#introblocks article:hover, #introblocks .active{color:#FFFFFF; background-color:#007BCD;}
#introblocks article a{color:#007BCD; background-color:#FFFFFF;}
#introblocks article:hover a, #introblocks .active a{color:#FFFFFF; background-color:#007BCD;}
#introblocks article i{border-color:rgba(0,0,0,.1);}
#introblocks article:hover i, #introblocks .active i{color:#FFFFFF; background-color:#019efb}


/* Content Area */
.overview a{color:inherit;}
.overview article:hover a{color:#FF3F4A;}













/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1140px){
	.hoc{max-width:1140px;}
}

@media screen and (min-width:978px) and (max-width:1140px){
	.hoc{max-width:95%;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:978px){
	.hoc{max-width:90%;}


	.container{}
	#comments input[type="reset"]{margin-top:10px;}
	.pagination li{display:inline-block; margin:0 5px 5px 0;}

	
}

@media screen and (max-width:750px){
	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	.group .group > *:last-child, .clear .clear > *:last-child, .clear .group > *:last-child, .group .clear > *:last-child{margin-bottom:0;}/* Experimental - Needs more testing in different situations, stops double margin when stacking */
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0;}


	#pageintro article, #pageintro article p{max-width:none;}
	#pageintro .heading{font-size:2rem;}

	#introblocks > ul > li{margin-bottom:50px;}
	#introblocks > ul > li:last-child{margin-bottom:0;}

	.sectiontitle{max-width:none;}
	.fixwidth{max-width:348px; margin:0 auto;}
	.overview > li:nth-last-child(-n+3){margin-bottom:50px;}



@media screen and (max-width:450px){
	#topbar > div:first-of-type ul li{display:block; margin:0;}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){

}