﻿@charset "utf-8";
/* CSS Document */

body {
padding:0;
margin: 0;
font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
color:#4a4b49;
}
@font-face {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: normal;
    src: local('Proxima Nova'), url('../fonts/Proxima Nova-Regular.otf') format('opentype');
}
 

h3{
    font-size: 28px;
	text-align:left;
	margin: 28px 0 0 0px;
	font-weight:bold;
	font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
}
h4 {
font-size:24px;
padding:12px 0 0px 0px;
}

.phead {
font-size:14px;
font-weight:bold;
padding-top:34px;
}
.quote {
margin-top:34px;
}
.testimony {
font-size:16px;
color:#888;
font-style:italic;
padding:0px 15px 0 15px;
line-height: 1.6em;
}
.citation{
font-size:11px;
padding-top:14px;
color: #777;
}

.cftitle{
    font-size: 20px;
	text-align:left;
	color:#000;
	padding:0;
	margin: 34px 0px 8px 20px;
	font-weight:bold;
	font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
}
.white {
color:#ffffff;
}

.phonenumber {
float:right;
clear:both;
min-height:10px;
font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
color:#fff;
font-size: 14px;
padding: 0 20px 0 6px;
margin: 0 0 0 3px;
}

.accessibility {
float:right;
clear:left;
width:370px;
 font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
color:#fff;
font-size: 14px;
padding: 0;
margin-right:12px;
}
.accessibility ul {
width:100%;
float:right;
clear:left;
margin: 0;
}
.accessibility li {
display:inline;
list-style-type: none;
 font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
color:#fff;
text-align:right;
padding: 8px 12px 8px 0;
}
.headerlinks a,
.headerlinks2 a {
/* what kind of complete nob creates a separate class called headerlinks2 instead of re-using the existing class?! */
text-decoration:none;
color:#fff;
font-size: 14px;
text-align:center;
}

.headerlinks a:hover,
.headerlinks2 a:hover{
color: #00C2DE;
}

.nopadding {
padding:0;
margin: 0;
}
/* Dropdown Nav Bar Links */
.dropdowntoplinks {
display:none;
}

.btn-search2 {
display:none;
}

.btn-search3 {
position:relative;
float:right;
clear:right;
width:40px;
height:40px;
color:#444444;
	font-size: 30px;
		padding:  5px;
		margin: 13px 10px 0 0;
}
.btn-search3:hover, .btn-search3:focus, .btn-search3:active, .btn-search3.active, .open>.dropdown-toggle.btn-search3{
    color: #00c1de;
}
.btn-search3:hover span {
  color: #00c1de;
}
  .pagetitle {
position:relative;
margin-top:-80px;
margin-bottom: 40px;
width:100%;
height: 80px;
font-size:220%;
color:#fff;
padding:18px 0 18px 15px;
z-index:9;
-webkit-box-shadow: -4px -8px 17px -5px rgba(0,0,0,0.39);
-moz-box-shadow: -4px -8px 17px -5px rgba(0,0,0,0.39);
  }
    .socialmediapanel{
float:right;
margin:-3px 25px 0 0;
height:38px;
text-align:right;
  }
  .socialmediapanel ul {
float:right;
clear:left;
min-width:50px;
padding:0;
margin: 0;
}
.socialmediapanel li {
  display:inline;
list-style-type: none;
padding: 8px 24px 8px 0;
}
.socialmediapanel li a {
text-decoration:none;
color:#fff;
text-align:right;
font-size: 22px;
text-align:center;
}

.socialmediapanel li a:hover{
color: #222;
}

.headerlinks{
position:relative;
top: 0px;
color:#fff;
width:100%;
text-align:right;
height:36px;
margin: 8px 0 6px 0;
padding: 8px 0 8px 12px;
background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
background-color: rgba(0, 0, 0, 0.8);
z-index:99;
}

.headerlinks2{
float:right;
color:#fff;
min-width:50px;
text-align:right;
height:24px;
margin: 12px 0 0px 0;
padding: 0px 0 0px 0;
background:transparent;
display: none;
}
.viewcourses{
float:left;
clear:right;
 font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
color:#fff;
font-size: 14px;
text-align:center;
margin: 9px 0 0 0;
cursor: pointer;
border:1px solid #fff;
display:none;
}

.viewcourses a {color: white;}

.viewcourses a:hover { color: #00C1DE; text-decoration:none;}

.glyphicon-earphone{
float:left;
clear:left;
margin: 0;
color:#ffffff;
font-size: 20px;
padding:0;
}
.toplogo{float:left;
width:240px; 
height:80px; 
margin: 10px 64px 10px 18px;
}

/* Form  radio btn customisation  */
.testbutton{
position:relative;
top:20px;
width: 100%;
height:94px;
}
.greenbutton{
position:relative;
top:20px;
width: 100%;
height:94px;
}

.greenbutton:link, .greenbutton:visited {
position:relative;
top:20px;
width: 100%;
	border-radius: 5px;
	color: #444;
	text-decoration: none;
	padding: 16px 32px;
	margin: 50px 0 0 30px;
	background-color: #00C2DE; 
	-webkit-transition: color .5s linear, background-color .5s ease-in-out;
	-moz-transition: color .5s linear, background-color .5s ease-in-out;
	-o-transition: color .5s linear, background-color .5s ease-in-out;
	transition: color .5s linear, background-color .5s ease-in-out;
}
.greenbutton:hover {
	background-color: #F7B334; 
	-webkit-transition: background-color .25s ease-in-out;
	-moz-transition: background-color .25s ease-in-out;
	-o-transition: background-color .25s ease-in-out;
	transition: background-color .25s ease-in-out;
}
.greybutton:link, .greybutton:visited {
position:relative;
top:20px;
width: 100%;
	border-radius: 5px;
	color: #fff;
	text-decoration: none;
	padding: 12px 32px;
	margin: 64px 0 20px 0px;
	background-color: #444; 
	-webkit-transition: color .5s linear, background-color .5s ease-in-out;
	-moz-transition: color .5s linear, background-color .5s ease-in-out;
	-o-transition: color .5s linear, background-color .5s ease-in-out;
	transition: color .5s linear, background-color .5s ease-in-out;
}
.greybutton:hover {
	background-color: #F7B334; 
	-webkit-transition: background-color .25s ease-in-out;
	-moz-transition: background-color .25s ease-in-out;
	-o-transition: background-color .25s ease-in-out;
	transition: background-color .25s ease-in-out;
}


.logomobile {
position:absolute;
top:55px;
left:0px;
right:0px;
width:100%;
height:88px;
   background: rgb(255, 255, 255); /* Fallback for older browsers without RGBA-support */
    background: rgba(255, 255, 255, 0.7);
 	margin: auto;
	font-size: 16px;
	z-index:1;
	background-image:url("../images/how-logo.png");
	background-repeat:no-repeat;
	background-position:center;
	display:none;
}

/* navbar */

        .navbar-wrapper {
            position: absolute;
            top: 20px;
            left: 0;
            width: 100%;
            height: 51px;
			background:transparent;
				z-index: 50;
        }
        .navbar-wrapper > .container {
            padding: 0;
        }

 
 .navbar-nav { float:right;}

.navbar-default {
   background: rgb(255, 255, 255); /* Fallback for older browsers without RGBA-support */
    background: rgba(255, 255, 255, 0.8);
 	margin: 0px 0 0 0;
	font-size: 16px;
	z-index: 9999;
	border:0;
}
/* title */
.navbar-default .navbar-brand {
    color: #333333;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: #000;
	font-size: 24px;
  font-weight: 700;
	margin: 24px 0 0 2px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    /*color: #00C2DE;*/
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;

}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* mobile version */
.navbar-default .navbar-toggle {
    border-color: transparent;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: transparent;
	color:#55C0D8;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
.mobilelogo{
float:left;
clear:both;
width:100%;
height:90px; 
margin: 5px auto;
  background: rgb(255, 255, 255); /* Fallback for older browsers without RGBA-support */
    background: rgba(255, 255, 255, 0.9);
	display:none;
	z-index:1;
}
    @media all and (max-width: 768px ){
            .navbar-wrapper {
                position: relative;
                top: 0px;
            }
			   .navbar-header {
			   width:100%;
                position: relative;
                top: 0px;
            }
			.navbar-default {
 	margin: 0;
	
}
.accessibility {
display:none;
  }  

        }
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
    }
}
/* NAVBAR TOGGLE STYLE */
.pull-left {
float:left;
margin-left: 12px;
}
.navbar-default-toggle .navbar .icon-bar {
  background-color: transparent;
  font-size:16px;
  line-height:18px;
  border: 0;
  }
.btn-search {
float:right;
width:45px;
height:45px;
    color: #4e4d4d;
	font-size: 30px;
		padding:  5px;
		margin: 28px 4px 0 0;
		
}
.btn-search:hover, .btn-search:focus, .btn-search:active, .btn-search.active, .open>.dropdown-toggle.btn-search {
    color: #fff;
	cursor:pointer;
}
.btn-search:hover span {
  color: #00c1de;
}
.searchcontainer{
position:relative;
top:0px;
left:0;
width: 100%;
height: 75px;
margin:0;
padding:0;
	z-index:5;
background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
background: rgba(0, 0, 0, 0.6);
display:none;
}
.searchcontainermobile{
position:relative;
top:0px;
left:0;
width: 100%;
height: 75px;
margin:0;
padding:0;
	z-index:5;
	overflow:hidden;
	display:none;
}
.headsearch{
position:relative;
top:0px;
width: 100%;
height: 75px;
margin:0;
padding:0;
	z-index:5;
}
.headsearchmobile{
position:relative;
top:0px;
width: 100%;
height: 75px;
margin:0;
padding:0;
background: rgb(255, 255, 255); /* Fallback for older browsers without RGBA-support */
    background: rgba(255, 255, 255, 1);
	z-index:5;
	display:none;
	}
.inputfieldstyletop {
position:relative;
font-size:0%;
color:#797979;
height:45px;
width: 100%;
margin:14px 0 0 14px;
	border: 1px solid grey;
}
.inputfieldstyletop  a :active{
border: 0;
}
.btn-searchslider {
position:relative;
float:right;
clear:right;
width:45px;
height:45px;
    color: #4e4d4d;
	font-size: 28px;
		padding:  5px;
		margin: 12px 12px 0 0;
}
.btn-searchslider:hover, .btn-searchslider:focus, .btn-searchslider:active, .btn-searchslider.active, .open>.dropdown-toggle.btn-searchslider {
    color: #00c1de;
	cursor:pointer;
}
.btn-searchslider:hover span {
  color: #00c1de;
}
.btn {
    padding: 6px 24px;
	margin: -4px 0 0 12px;
    border: 0 none;
    font-weight: 700;
    letter-spacing: 1px;
}
 
.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
	border: 0;
}
/*
.staticheader-container{
position:relative;
height:600px;
    /*Add a width here if you do not want the default 100%
    text-align:center;
    overflow:hidden;
}
.staticheader-container img{
    position:absolute;
    left:50%;
    transform:translate(-50%, 0);
}*/

.staticheader-container{
    position:relative;
	top:0;
    left:0;
    height:100%;
	overflow:hidden;
}
.staticheader-container img{
    position:relative;
	top:0;
    left:0;
	background-repeat:no-repeat;
    width: 100%;
}

/*------------------- COURSE FINDER FORM -------------------------*/

.coursefinder {
 position:relative;
 top:0;
left:0;
margin-top:20px;
width: 100%;
min-height:300px;
padding:14px;
border:1px solid #D8D8D8;
background: rgb(255, 255, 255); /* Fallback for older browsers without RGBA-support */
background: rgba(255, 255, 255, 0.8);
overflow:hidden;
z-index:1;
}
.cftitle{
    font-size: 20px;
	text-align:left;
	color:#000;
	padding:0;
	margin: 34px 0px 0px 20px;
	font-weight:bold;
	font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
}
/* Form  radio btn customisation  */

input[type=radio] {
    margin: 24px 8px 0 0px;
    line-height: normal;
	padding:5px 0 0 0;
	
}
.form-horizontal .form-group {
    margin:8px 0 8px 0;
}
select.input-lg {
    line-height: 86px;
}
.input-lg {
    font-size: 14px;
    line-height: 1.9;
}



/*------------------- SETTINGS FOR BANNER CONTAINERS -------------------------*/

.tp-banner-container{
	width:100%;
	position:relative;
	padding:0;
	z-index:1;

}

.tp-banner{
	width:100%;
	position:relative;
		z-index:1;
}

.tp-banner-fullscreen-container {
		width:100%;
		position:relative;
		padding:0;
			z-index:1;
}

/*------------------- SEARCH BAR BOTTOM OF IMAGE SLIDER -------------------------*/
.slidersearch {
position:relative;
top:-35px;
width: 80%;
clear:both;
padding:4px;
margin:auto;
height: 75px;
background-color: #ffffff;
-webkit-box-shadow: 0px 7px 5px 0px rgba(143,143,143,1);
-moz-box-shadow: 0px 7px 5px 0px rgba(143,143,143,1);
box-shadow: 0px 7px 5px 0px rgba(143,143,143,1);
z-index: 1;
border:1px solid #B6B6B6;
}
.inputfieldstyletop {
float:left;
left:5px;
font-size:30px;
color:#797979;
height:45px;
width: 100%;
margin: 12px 0 0 10px;
padding:5px;
}
.inputfieldstyleslider {
float:left;
left:5px;
font-size:30px;
color:#797979;
height:45px;
width: 78%;
margin: 12px 0 0 10px;
border:0;
}

/* MAIN BODY CONTENT BELOW SLIDER STARTS HERE */
.headline {
  padding: 20px 15px;
  text-align: center;
    font-size: 28px;
}
.generalbtn {
position:relative;
display:block;
margin: 14px auto;
text-align:center;
font-size:16px;
padding: 10px 0 10px 0;
color:#fff;
text-decoration:none;
}
.generalbtn li {
width:100%;
height:42px;
text-decoration:none;
}
.generalbtn a {
display:block;
 text-decoration:none;
}
.generalbtn:hover {
    background-color: #333;
	color:#fff;
	text-decoration:none;
  background:cover;
}


/* SUBJECT DETAILS PAGE RIGHT COLUMN */
.subjectarearightcol {
position:relative;
top:0px;
left:0;
width:100%;
min-height:530px;
padding:40px 14px 30px 14px;
background-color: #DFDEE0;
border: 1px solid #DFDEE0;
}
.subjectarearightcol1 {
position:relative;
top:0px;
left:0;
width:100%;
min-height:530px;
padding:40px 14px 30px 14px;
margin-bottom:75px;
background-color: #EBF5FF;
}
.detailsheader{
color: #E9004C;
font-size:16px;
font-weight:bold;
}
.detailspagehead{
color: #95D61E;
font-size:24px;
font-weight:bold;
margin-top:40px;
}
.detailsheader{
color: #E9004C;
font-size:16px;
font-weight:bold;
}

.headspace { 
margin-top: 30px; 
}
/*Course Type Panels Version Two*/

.ctype2 {
position:relative;
clear:both;
width:100%;
height:250px;
margin:20px 0px 20px 0px !important;
padding:  0;
cursor:pointer;
overflow:hidden;
clear:both;
z-index:1;
}
.ctype2:hover {
top:0;
background-color: #232323;
-webkit-transition: background-color 1s;
	-moz-transition: background-color 1s;
	-o-transition: background-color 1s;
	-ms-transition: background-color 1s;
	transition: background-color 1s;
}
  
.leavers-img {
position:absolute;
left:0;
top:0;
height:100%;
width: 200px;
margin: 0;
background-image: url('../media/static/sl2.png');
background-repeat:no-repeat;
  }
.uni-img {
position:absolute;
left:0;
top:0;
height:100%;
width: 200px;
margin: 0;
background-image: url('../media/static/uni2.png');
background-repeat:no-repeat;
  }
    .adult-img {
position:absolute;
left:0;
top:0;
height:100%;
width: 200px;
margin: 0;
background-image: url('../media/static/adult2.png');
background-repeat:no-repeat;
  }
    .wrt-img {
position:absolute;
left:0;
top:0;
height:100%;
width: 200px;
margin: 0;
background-image: url('../media/static/wrt2.png');
background-repeat:no-repeat;
  }
  .viewcourses{
float:left;
clear:right;
font-size: 12px;
padding: 5px 5px 5px 5px;
margin:12px 0 0 0;
}

  
  /* Courses Page Styles */
  
  .coursesimage {
position:relative;
top:0;
left:0;
width: 100%;
height:auto;
margin: 14px 0 1px 0;
  background:cover;
  }
  .coursesimage img {
      width: 100%;
  }
.coursesimage:hover { opacity: 0.3; filter: alpha(opacity=30); }
    .coursetopborder{
position:relative;
top:0;
left:0;
width: 100%;
height:5px;
margin: 0;
  }
           .coursetitle{
position:relative;
top:0;
left:0;
min-height:40px;
    font-size:15px;
    line-height:16px;
width: 100%;
padding:12px 0 0 14px;
margin: 0px 0 14px 0;
}

.coursetitle ul {
width:100%;
text-align:left;
margin: 0;
padding:0;
}
.coursetitle li {
display:inline;
list-style-type: none;
 font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
color:#fff;
text-align:right;
padding: 8px 0px 8px 0px;
border-top: 6px solid rgba(255, 255, 255, 0.0);
}
.coursetitle li a,
.coursetitle a {
text-decoration:none;
color:#fff;
}

.coursetitle a:hover{
color: yellow;
}
  
   
.ctypetitle {
float:right;
margin:24px 62px 0 0;
min-height:48px;
width:170px;
color: #ffffff;
 font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
text-align:right;
font-size: 22px;
font-weight:bold;
line-height: 24px;
}
  .btn-coursesearch {
position:absolute;
top: 0px;
right: 0px;
    color: #ffffff;
  font-size: 24px;
        border: 0px solid #357ebd; 
    padding:  5px;
    margin: 18px 20px 0px 0;
}



/*Brand Colours */
.alphablue {
    background-color:#00c1de;
	}
	.alphagreen {
    background-color:#95d600;
	}
.alphared {
    background-color:#e9004c;
	}
.alphaorange {
    background-color:#f7b334;
	}
	
.howcblue {background-color:#00c1de; font-size:220%;}
.howcgreen {background-color:#95d600; font-size:220%; }  	
.howcorange {background-color:#f7b334; font-size:220%; }  
.howcpink {background-color:#e9004c; font-size:220%; }  
.wrtsolutions {background-color:#78839d; font-size:220%; } 
.whitebg { background-color:#fff; font-size:220%; }	
.blueicons {color:#00c1de;}	
	
.access-he { background-color:#00b0a3; }	
.care-community { background-color:#e11383; }
.creative-arts { background-color:#a3195b; }
.enterprise { background-color:#5f2889; }
.foundation-learning { background-color: #f08238; }
.higher-education { background-color:#25387f; }
.leisure { background-color:#8f4393; }
.services { background-color:#2395d3; }
.trades { background-color: #00af41; }
.work-related-training { background-color:#778196; }


.newspanel, .eventspanel, .videopanel  {
 position:relative;
width:100%;
height:209px;
margin:20px 0px 20px 0px;
  cursor:pointer;
  overflow:hidden;
}

.newspanel img,.eventspanel img,.videopanel  img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  background:cover;
}

.newspanel img.top:hover, .eventspanel img.top:hover, .videopanel  img.top:hover {
  opacity:0;
}

.news {
position:relative;
width:100%;
height:209px;
margin:60px 0px 140px 0px !important;
cursor:pointer;
overflow:hidden;
}
.news ul {
    margin: 0;
    padding: 0;
}
.news li {
    display: inline;
    list-style: outside none none;
    text-decoration: none;
}
.news a {
}
.news:hover .newshoverbg{
float:left;
top:0px;
display:block;
z-index:99;
-webkit-filter: opacity(.5); 
filter: opacity(.5);
} 

.newsimage {
position:absolute;
top: 0px;
clear:both;
width: 100%;
height:209px;
margin: 0;
z-index: 10;
}
.newshoverbg {
position:relative;
top: 0px;
width: 100%;
min-height:209px;
padding: 34px ;
-webkit-transition: all 500ms ease-out 60ms;
-moz-transition: all 500ms ease-out 60ms;
-o-transition: all 500ms ease-out 60ms;
transition: all 500ms ease-out 60ms;
display:none;
}

.opacity
{ -webkit-filter: opacity(.5); 
filter: opacity(.5); 
}

.videolink {
position:relative;
width: 100%;
height: 208px;
margin: 0px;
border: 1px solid grey;
}
 .eventstitle{
position:absolute;
top: 20px;
left: 0;
 padding: 5px 12px 0 14px;
 min-width:135px;
 height:35px;
color: #ffffff;
 font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
font-size: 19px;
z-index:99;
}

.btn {
    padding: 6px 24px;
	margin:20px auto;
    border: 0 none;
    font-weight: 700;
    letter-spacing: 1px;
}
 
.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
	border: 0;
}
 
.btn-primary {
    background: #0099cc;
    color: #ffffff;
		border: 0;
}
 
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background: #33a6cc;
}
 
.btn-primary:active, .btn-primary.active {
    background: #007299;
    box-shadow: none;
}
/* Modal styles */

 .modal-header {
color: #181818;
 font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
font-size: 24px;
text-align:left;
font-weight:bold;
text-align:center;
border:0;
 }
 .fade{opacity:0;
 -webkit-transition:opacity .15s linear;
 -o-transition:opacity .15s linear;
 transition:opacity .15s linear}
 
 .fade.in{opacity:0.8}
 
 
 .btn-primary {
  background: #00C1DE;
  color: #ffffff;
}
 .prospectusworcs {
 width: 90%;
height: auto;
margin: auto;
 } 
.prospectusbroms {
 width: 90%;
height: auto;
margin: auto;
 } 
 /* End of Modal styles */
.footerlinks {
position:relative;
top:-32px;
display:block;
height:60px;
width:120px;
font-size: 18px;
text-align:center;
padding: 14px 30px 14px 30px;
margin:30px 0 42px 0;
color: #000000;
background-color: #e3e1e1;
}
footer {
    margin-top: 40px;
}

a.footerlinks {
    text-decoration: none;
	margin:15px auto 15px auto;
	width:55%;
}

a.footerlinks:hover {
color:#fff;
    background: #777;
}
.footertext {
color: #ffffff;
 font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
font-size: 14px;
padding-top: 20px;
}
address.footertext {
    margin-bottom: 0px;
}

.footertext ul {
 width: 75%; padding-left:0;  }

.footertext ul li { display: block; padding-left:0;width: 75%; }

.footertext a {color: #ffffff;}

.footertext ul li a { font-size: 14px; color: #ffffff; text-decoration: none;}

.footertext a:hover { color: #00C1DE; text-decoration:none;}

/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:14px;
  padding-left:14px;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
  padding-right:14px;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
  padding-left:14px;
}
/* Secondary padding style

remove spacing between middle columns */
.row.no-gutter2 [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:15px;
  padding-left:15px;
}
/* remove right padding from first column */
.row.no-gutter2 [class*='col-']:first-child {
  padding-right:30px;
}
/* remove left padding from first column */
.row.no-gutter2 [class*='col-']:last-child {
  padding-left:5px;
   padding-right:15px;
}
.backtotop {
float:right;
clear:right;
width: 40px;
height:40px;
    color: #ffffff;
	font-size: 38px;
	text-align:right;
		padding:  0px;
		z-index:999;
}
.backtotop:hover, .backtotop:focus, .backtotop:active, .backtotop.active, .open>.dropdown-toggle.backtotop {
    color: #fff;
}
.backtotop:hover span {
  color: #00C1DE;
}
.partnerlogos {
position:relative;
width:100%;
height:75px;
margin:20px 0 20px 0;
background-image: url("../images/ftr-logos.png");
background-size: contain;
background-repeat:no-repeat;
}
.copyright {
font-size: 12px;
color:#ffffff;
text-align:center;
margin: 22px 12px 12px 0;
}
.reserved {
position:relative;
text-align:center;
font-size: 12px;
color:#888888;
border-left:1px solid #fff;
padding-left:10px;
margin-left:12px;
}
 .greybg {
  background-color: #181818;
}
 .blackbg {
  background-color: #000000;
  height:60px;
}
   .clearbelow{
   margin-bottom:60px;
   }
     .clearabove{
   margin-top:60px;
   }


/* NAVBAR BREAKPOINT */
@media (max-width: 1200px) {
.headerlinks  {
display: none;
}
.btn-search  {
display: none;
}
.viewcourses{
display:block;
}
.headerlinks2 {
display:block;
}
.searchcontainer{
display:none;
}
.logomobile {
display:block;
}
.headline {
    font-size: 23px;
}
           .coursetitle{
position:relative;
min-height:50px;
padding:12px 0 14px 14px;
}
           .coursetitle {
position:relative;
min-height:50px;
padding:12px 0 14px 14px;
}


.btn-search2 {
float:left;
clear:right;
display:block;
width:40px;
height:40px;
    color: #00C2DE;
  font-size: 24px;
    padding:  5px;
    margin: 7px 2px 0 0;
}
.btn-search2:hover span {
  color: #00c1de;
}
.white{
  color: #ffffff;
}
.glyphicon-search{
cursor:pointer;
}
  .toplogo{
display:none;
}
.mobilelogo{
display:block;
}
.slidersearch {
width: 75%;
}

.inputfieldstyle {
width: 25%;
}

.btn-search {
display:none;
}

.navbar-header {
        float: none;
    width:100%;
      background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
    }
  .navbar-default {
   background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
    background: rgba(0, 0, 0, 0.6);
  }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    z-index:999;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    color:#ffffff!important;
    }
  .navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #00C2DE!important;
background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
background: rgba(0, 0, 0, 0.8);
}
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
  
}

 /*Small Devices, Tablets*/
@media only screen and (max-width : 768px) {

.partnerlogos {
display:none;
}
.headerlinks2 ul {
display:none;
}
.coursesimage {
display:none;
}
          .coursetitle{
position:relative;
min-height:40px;
padding:12px 0 14px 14px;
}

}
/*THIS QUERY FOR SOCIAL MEDIA ICONS*/
@media only screen and (max-width : 625px) {

.pagetitle {
height: 55px;
color:#fff;
padding:15px 0 8px 15px;
z-index:9;
font-size:140%;       
margin:0px 0 50px 0;
}
  .socialmediapanel{
position:absolute;
left:10px;
top:94%;
margin:15px 0 12px 0;
width:200px;
height:38px;
color:#222;
text-align:left;
  }
  .socialmediapanel li a {
color:#222;
}


}

/*Extra Small Devices, Phones*/
@media only screen and (max-width : 480px) {

.slidersearch {
display:none;
}
.glyphicon-search{
display:none;
}
.btn-search2 {
display:none;
}

.viewcourses{
position:relative;
left:0px;
font-size: 12px;
border:1px solid #fff;
}

          .coursetitle{
position:relative;
min-height:40px;
padding:12px 0 14px 14px;
}
   .col-xxs-12 {
   width:100%;
   }
.tp-banner-container {
display:none;
}

  .footerlinks {
position:relative;
top:-32px;
display:block;
height:60px;
width:120px;
font-size: 13px;
text-align:center;
padding: 14px 30px 14px 30px;
margin:30px 0 42px 0;
color: #000000;
background-color: #e3e1e1;
}

a.footerlinks {
    text-decoration: none;
	margin:15px auto;
	width:92%;
}
a.footerlinks {
    text-decoration: none;
	margin:15px auto;
	width:82%;
	font-size:14px;
	font-weight:bold;
}

a.footerlinks:hover {
color:#fff;
    background: #777;
}
.footertext {
color: #ffffff;
 font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight:bold;
}

.footertext ul {
 width: 75%; padding-left:0;  }

.footertext ul li { display: block; padding-left:0;width: 75%; }

.footertext a {color: #ffffff;}

.footertext ul li a { font-size: 12px; color: #ffffff; text-decoration: none;}

.footertext a:hover { color: #00C1DE; text-decoration:none;}

.copyright {
font-size: 12px;
padding-left:5px;
}
.reserved {
display:none;}

}

/* Custom, iPhone Retina */
	@media only screen and (max-width : 320px) {

.btn-search2 {
display:none;
}
.glyphicon-search{
display:none;
}


.viewcourses{
float:left;
clear:right;
font-size: 12px;
border:1px solid white;
}

.phonenumber {
width:110px;
min-height:11px;
 font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
color:#fff;
font-size: 11px;
padding: 0 10px 0 0px;
margin: 3px 0 0 3px;
}
.glyphicon-earphone{
float:left;
clear:left;
margin: 0;
color:#ffffff;
font-size: 15px;
padding:0;
}

.coursetitle{
position:relative;
min-height:40px;
padding:12px 0 14px 14px;
}

.footerlinks {
position:relative;
top:-32px;
display:block;
height:60px;
width:160px;
font-size: 16px;
text-align:center;
padding: 14px 30px 14px 30px;
margin:30px 0 42px 0;
background-color: #e3e1e1;
}
.inputfieldstyletop {
width: 75%;
margin:14px 0 0 14px;

}

a.footerlinks {
    text-decoration: none;
	margin:16px auto;
	width:94%;
}
.partnerlogos {
display:none;
}
.copyright {
font-size: 12px;
padding-left:5px;

}
.reserved {
font-size: 9px;
}

}

.img-responsive {
    margin: 0 auto;
}






