@import url("framework.css");



/* Introblocks - x3
--------------------------------------------------------------------------------------------------------------- */
#introblocks{position:relative; z-index:1;}
#introblocks > ul{display:block; margin:-180px 0 0; text-align:center;}
#introblocks article{display:block; padding:30px; text-align:center;}
#introblocks article > a::after{display:block; width:100%; content:"";}
#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.2rem; font-weight:700;}
#introblocks article .heading.underline::after{left:50%; margin-left:-12%;}


/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:80px 0;}


.heading.underline::after{background-color:rgb(255, 60, 0);}

.row2{color:#474747; background-color:#F4F4F4;}

/* Introblocks */
#introblocks article{color:#474747; background-color:#FFFFFF; box-shadow:0px 0px 15px rgba(0,0,0,.1);}
#introblocks article:hover, #introblocks .active{color:#FFFFFF; background-color:#1C1D21;}
#introblocks article i{border-color:rgba(0,0,0,.1); color:rgb(255, 60, 0);}
#introblocks article:hover i, #introblocks .active i{color:#FFFFFF; background-color: rgb(255, 60, 0);}

a{color:rgb(255, 60, 0);}
a:active, a:focus{background:transparent !important;}
a{
    outline:none; text-decoration: none;
}



/* 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%;}

	

	#header{padding:30px 0;}
	#header #logo{margin-top:0;}


	#mainav ul{display:none;}
	#mainav form{display:block; margin-top:8px;}



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



	#copyright p:first-of-type{margin-bottom:10px;}
}

@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;}

	#topbar{text-align:center;}
	#topbar > div:first-of-type ul{margin:0 0 10px 0;}
	#topbar #searchform{display:none;}/* This is personal preference - remove if not required */

	#header{text-align:center;}
	#header #logo{margin:0 0 15px 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;}

	/*#footer .latestimg > li, #footer .latestimg > li:nth-last-child(-n+3){display:inline-block; float:none; width:auto; margin:0 5% 5% 0;}
	#footer .latestimg > li:last-child{margin-bottom:0;}
	#footer .latestimg > li img{width:auto;}*/
}

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


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.6rem;}
	.font-x3{font-size:1.8rem;}
}







/*F

.wrapper{display:block; position:relative; width:100%; margin:0; padding:0; text-align:left; word-wrap:break-word;}

.nospace{margin:0; padding:0; list-style:none;}

.hoc{display:block; margin:0 auto;}

.clear, .group{display:block;}
.clear::before, .clear::after, .group::before, .group::after{display:table; content:"";}
.clear, .clear::after, .group, .group::after{clear:both;}

.first{margin-left:0; clear:left;}

.one_third{width:30.52631%;}

h1, h2, h3, h4, h5, h6, .heading{margin:0 0 20px 0; font-size:1.4rem; line-height:normal; font-weight:normal; text-transform:uppercase;}

.heading.nospace{margin-bottom:0;}
.heading.underline{display:inline-block; position:relative; padding:0 0 15px 0;}
.heading.underline::after{display:block; position:absolute; bottom:0; width:25%; height:5px; border-radius:3px; content:"";}
.center .heading.underline::after{left:50%; margin-left:-12%;}

article{display:block; margin:0; padding:0;}




.one_third{display:inline-block; margin:0 0 0 4.21052%; list-style:none;}

html{overflow-y:scroll; overflow-x:hidden;}
html, body{margin:0; padding:0; font-size:14px; line-height:1.6em;}

*, *::before, *::after{box-sizing:border-box;}

.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.uppercase{text-transform:uppercase;}
.capitalise{text-transform:capitalize;}
.hidden{display:none;}
.nospace{margin:0; padding:0; list-style:none;}
.block{display:block;}
.inline{display:inline-block;}
.justified{text-align:justify;}
.inline *{display:inline-block;}
.inline *:last-child{margin-right:0;}
.pushright li{margin-right:20px;}
.pushright li:last-child{margin-right:0;}
.borderedbox{border:1px solid;}
.overlay{position:relative; z-index:1;}
.overlay::after{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:-1;}
.bgded{background-position:top center; background-repeat:no-repeat; background-size:cover;}
.circle{border-radius:50%; background-clip:padding-box;}*/