@font-face {
    font-family: 'Museo500';
    src: url('/css/fonts/Museo500-Regular_0.otf');
}

body {}

/* TOP NAV */

#topNav {min-height: 42px; margin-top: 35px;}

#topNav ul#list {list-style-type: none; margin: 0; padding: 0; float: right;}

#wsgMob ul li.dropdown ul.dropdown-menu li:hover a {color: #4AC4DB;}
#wsgMob ul li.dropdown ul.dropdown-menu li:last-child a {border-bottom: 0px;}
#wsgMob ul li.dropdown ul.dropdown-menu li a {border-bottom: 1px solid #303047; padding: 10px 7px; margin: 0 10px;}

#wsgMob ul li a {font-family: 'Museo500', arial; color: #A7AAAC;}
#wsgMob ul li a:hover {color: #00AEEF;}

#topNav ul#list li {
    float: left;
    margin: 0;
    cursor: pointer;
    padding: 10px 8px; 
    transition: background-color 0.3s ease;
}

#topNav ul#list li a {font-family: 'Museo500', arial; font-weight: 300; color: #A7AAAC; display: block; font-size: 14px; text-decoration: none; text-transform: uppercase; font-weight: 400; letter-spacing: -0.1px; transition: background-color 0.3s ease;}
#topNav ul#list li a:hover, #topNav ul#list li:hover {color: #00AEEF;}

#topNav ul#list li.dropdown ul {display: none;
    background-color: #070D23;
    list-style-type: none;
    margin: 8px 0px 0;
    height: 0;
    min-width: 304px;
    padding: 3px 0;
    left: 0px;
    position: absolute;
    z-index: 200;
}


#topNav ul#list li.dropdown > ul {transition: opacity 0.5s ease, display 0.5s;}
#topNav ul#list li.dropdown:hover > ul {opacity: 1; display: block; height: auto}

#topNav ul#list li.dropdown ul li {border: 0 none; float: none; margin: 0px 10px; padding: 0px 5px; border-bottom: 1px solid #303047; transition: background-color 0.5s;}
#topNav ul#list li.dropdown ul li:hover {cursor: pointer;}
#topNav ul#list li.dropdown ul li a {display: block; text-shadow: none; color: white; padding: 10px 0px; transition: color 0.3s ease;}
#topNav ul#list li.dropdown ul li:hover > a {color: #4AC4DB !important;}

#topNav ul#list li.dropdown ul li:first-child {background-image: none;}
#topNav ul#list li.dropdown ul li:last-child {border-bottom: 0;}


@media (max-width: 991px) {
    
	#topNav ul#list li a {font-size: 15px !important;}
	
	#topNav ul#list li {padding: 10px 6px !important;}

}

@media (min-width: 992px) and (max-width: 1199px) {
    
	#topNav ul#list li {padding: 9px 15px !important;}
    #topNav ul#list li a {font-size: 17px !important;}
    
    .nav>li>a {padding: 10px 8px !important;}
    
    .heroBanner .ms-layer.ms-caption.title {transform: translate(0%,75%) !important; -ms-transform: translate(0%,75%) !important; -webkit-transform: translate(0%,75%) !important;}
    
    .heroBanner {margin-bottom: 0px !important; transform: translate(0%, -17%) !important; -ms-transform: translate(0%,-17%) !important; -webkit-transform: translate(0%,-17%) !important;}

    .innerBanner {margin-bottom: 0px !important; transform: translate(0%, -26%) !important; -ms-transform: translate(0%,-26%) !important; -webkit-transform: translate(0%,-26%) !important;}

}

@media (min-width: 768px) and (max-width: 991px) {

    header .logo {text-align: right;}
    
    header .logo img {max-height: 135px !important;}

    header .phone {margin-top: 47px !important; padding-right: 11px !important; float: left !important;}
    
    header .exceedLogo {width: 140px; margin-top: 6px !important}
    
    
    a.button {font-size: 12px !important; width: 100% !important; padding: 10px 0 10px 20px !important;}

    .nav>li>a {padding: 10px 9px !important;}

    .heroButtons .box {font-size: 19px !important;}

    .heroButtons {margin-top: -180px !important;}
    
    .heroBanner .ms-layer.ms-caption.title {transform: translate(0%,45%) !important; -ms-transform: translate(0%,45%) !important; -webkit-transform: translate(0%,45%) !important;}
    
    .heroBanner {margin-bottom: 50px !important; transform: translate(0%, 0%) !important; -ms-transform: translate(0%,0%) !important; -webkit-transform: translate(0%,0%) !important;}

    .innerBanner {margin-bottom: 50px !important; transform: translate(0%, -5%) !important; -ms-transform: translate(0%,-5%) !important; -webkit-transform: translate(0%,-5%) !important;}

}

@media (max-width: 767px) {

    html, body {overflow-x: hidden;}
    
    header .phone {font-size: 20px !important; padding-left: 40px !important; margin-top: 2px !important; padding-right: 9px !important;}

    header .exceedLogo {width: 100px !important;}
    
    #wsgMob {margin-bottom: 30px;}
    
    a.button {margin-bottom: 10px; width: 100% !important; font-size: 15px !important; padding: 15px 0px 15px 15px !important;}

    .heroButtons .box {width: 100% !important; font-size: 18px !important; padding: 40px 5px 10px 5px !important; border-radius: 0 0 15px 15px !important;}
    
    .heroButtons {margin-top: -50px !important; text-transform: capitalize; margin-bottom: 0px;}

    .heroButtons b, .heroButtons strong {font-weight: normal;}

    .heroButtons .lessPad {padding-left: 5px; padding-right: 5px;}

    .heroButtons .box figure {height: 70px !important; width: 70px !important; top: -35px !important;}

    .heroBanner .ms-layer.ms-caption.title {transform: translate(0%,15%) !important; -ms-transform: translate(0%,15%) !important; -webkit-transform: translate(0%,15%) !important;}

    .heroBanner .ms-layer.ms-caption.title h2 {margin-bottom: 0px; font-size: 20px !important;}
    
    .heroBanner .ms-layer.ms-caption.title p {font-size: 15px !important; margin-top: 0px !important; line-height: normal;}
   
    .heroBanner {margin-bottom: 0 !important; transform: translate(0%, -9%) !important; -ms-transform: translate(0%,-9%) !important; -webkit-transform: translate(0%,-9%) !important;}

    .innerBanner {margin-bottom: 15 !important; transform: translate(0%, -29%) !important; -ms-transform: translate(0%,-29%) !important; -webkit-transform: translate(0%,-29%) !important;}

    .heroBanner .content {top: 7% !important;}
    
    .heroBanner .content h2 {text-shadow: 0px 0px 1px #eee; font-size: 30px !important;}
    
    .heroBanner .content p {font-size: 17px !important;}

    .feeTable > div {padding: 5px 6px !important; color: #0097CF; font-size: 11px;}
    
}
    
/* ----------- */

/* FORM STYEL */

input[type="text"], textarea {
    width: 100% !important;
	resize: none;
    padding: 5px 10px;
    outline: none;
    margin-bottom: 5px;
}

input[type="submit"] {
	background-color: #00AEEF;
    color: white;
    padding: 10px 20px;
    border: 0;
    transition: background-color 0.4s ease;
}

input[type="submit"]:hover {
	background-color: #A7AAAC;
}

/* ----------- */

/* HEADER */

header {
    margin-top: 15px;
    overflow: visible;
    position: relative;
    z-index: 10;
}

header .logo img {max-height: 200px; max-width: 100%;}

header .phone {
    font-family: 'Museo500', arial;
    color: #00AEEF;
    font-size: 25px;
    padding-top: 4px;
    float: right;
    padding-left: 48px;
    background-image: url("/images/template/icon_phone.png");
    background-size: contain;
    background-repeat: no-repeat;

    padding-right: 25px;
    margin-top: 33px;
}

header .exceedLogo {
	float: right;
    width: 160px;
    margin-top: -10px;
}

header .exceedLogo img {
    max-width: 100%;
}

/* ----------- */

/* DEFAULTS */

.textCenter {text-align: center;}

a.button {
	border: 3px solid #a7a9ac;
    padding: 15px 5px;
    font-family: "Century Gothic", arial;
    width: 90%;
    margin: 0 auto;
    display: block;
    color: #a7a9ac; 
    border-radius: 15px;
    text-transform: uppercase;
    font-size: 17px;
    font-weight: bold;
    background-image: url("/images/template/abuttonarrow.png");
    background-repeat: no-repeat;
    background-size: 6%;
    background-position: left 18px top 50%;
    transition: color 0.3s ease, border-color 0.3s ease;
}

a.button:hover {
	color: rgba(231,93,93,1);
    border-color: rgba(231,93,93,1);
    text-decoration: none;
}

/* ----------- */

/* HERO BANNER */

.heroBanner img {max-width: 100%;}

.heroBanner {margin-bottom: 35px; position: relative; transform: translate(0%,-5%); -ms-transform: translate(0%,-5%); -webkit-transform: translate(0%,-5%);}

.innerBanner {position: relative; transform: translate(0%,-9%); -ms-transform: translate(0%,-9%); -webkit-transform: translate(0%,-9%);}

.heroBanner .content {   
    width: 100%;
    transform: translate(0%,0%);
    -ms-transform: translate(0%,0%);
    -webkit-transform: translate(0%,0%);
    position: absolute;
    top: 16%;
    text-align: center;
}

.heroBanner .content h2 {
	font-family: 'Museo500', arial; 
    font-weight: bold; 
    color: #777; 
    font-size: 45px;
    margin-bottom: 0px;
}

.heroBanner .content p {
    margin-top: 20px; 
    font-family: "Century Gothic", arial; 
    font-family: 500; 
    color: white; 
    text-transform: uppercase; 
    font-size: 25px;
    margin-top: 0px;
}

.heroBanner .ms-layer.ms-caption.title {width: 100%; transform: translate(0%,110%); -ms-transform: translate(0%,110%); -webkit-transform: translate(0%,110%);}

.heroBanner .ms-layer.ms-caption.title h2 {font-family: 'Museo500', arial; font-weight: bold; color: #58595b; font-size: 45px;}
.heroBanner .ms-layer.ms-caption.title p {margin-top: 20px; font-family: "Century Gothic", arial; font-family: 500; color: white; text-transform: uppercase; font-size: 25px;}

/* ----------- */

/* BANNER CALL TO ACTION */

.heroButtons {margin-top: -210px; overflow: auto; padding-top: 50px;}

.heroButtons .box {
    text-align: center; 
    color: white; 
    font-family: "Century Gothic", arial;
    width: 90%;
	padding: 60px 5px 20px 5px;
    font-size: 28px;
    font-weight: lighter;
    border-radius: 15px;
    position: relative;
    transition: background-color 0.4s ease;
    cursor: pointer;
}

.heroButtons .box.red:hover {background-color: rgba(231,93,93,1);}
.heroButtons .box.orange:hover {background-color: rgba(242,168,53,1);}
.heroButtons .box.green:hover {background-color: rgba(21,159,168,1);}    

.heroButtons .box figure {
    background-color: white;
    border-radius: 50%;
    background-size: 55%;
    background-position: center;
	background-repeat: no-repeat;
    height: 90px;
    width: 90px;
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%); /* IE 9 */
   	-webkit-transform: translate(-50%,0%); /* Safari */
}

.heroButtons .box.red figure {background-image: url("/images/template/icon_enrol.png");}
.heroButtons .box.orange figure {background-image: url("/images/template/icon_program.png");}
.heroButtons .box.green figure {background-image: url("/images/template/icon_blog.png");}

.heroButtons .box.red {
    background-color: rgba(231,93,93,0.8);
    float: right;
}

.heroButtons .box.orange {
    background-color: rgba(242,168,53,0.8);
    margin: 0 auto;
}

.heroButtons .box.green {
    background-color: rgba(21,159,168,0.8);
}

/* INNER BUTTONS */

.innerButtons .box figure.red {
    background-color: rgba(231,93,93,0.8);
    float: right;
}

.innerButtons .box figure.orange {
    background-color: rgba(242,168,53,0.8);
    margin: 0 auto;
}

.innerButtons .box figure.green {
    background-color: rgba(21,159,168,0.8);
}

.innerButtons .box figure.red {background-image: url("/images/template/icon_wt_enrol.png");}
.innerButtons .box figure.orange {background-image: url("/images/template/icon_wt_program.png");}
.innerButtons .box figure.green {background-image: url("/images/template/icon_wt_blog.png");}

.innerButtons .box figure {
    border-radius: 50%;
    background-size: 55%;
    background-position: center;
	background-repeat: no-repeat;
    height: 90px;
    width: 90px;
    position: absolute;
    top: -45px;
    left: 50%;
    transition: background-color 0.3s ease;
    transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%); 
   	-webkit-transform: translate(-50%,0%);
}

.innerButtons .box figure:hover {cursor: pointer;}

.innerButtons .box figure.red:hover {background-color: rgba(231,93,93,1);}
.innerButtons .box figure.orange:hover {background-color: rgba(242,168,53,1);}
.innerButtons .box figure.green:hover {background-color: rgba(21,159,168,1);}


/* INNER BANNERS */

.innerBanner img {max-width: 100%;}

/* PAGE CONTENT */

.pageContent h1 {
	font-family: 'Museo500', arial;
    color: #e75d5d;
    margin-top: 10;
}

.pageContent h2 {
	margin-top: 0;
    font-family: 'Museo500', arial;
    font-size: 22px;
	color: #00AEEF;
}

.blog-post h2 a {
    	margin-top: 0;
    font-family: 'Museo500', arial;
    font-size: 22px;
	color: #00AEEF;
}

.pageContent img {
    max-width: 100%
}

.feeTable {
    overflow: auto;
    border: 1px solid #00AEEF;
}

.feeTable .hr {font-weight: bold; border-bottom: 1px dashed #00AEEF; color: #00AEEF;}

.feeTable > div {padding: 8px 20px; color: #0097CF;}

/* ----------- */

/* FOOTER */

footer {
    margin-top: 30px;
    font-family: "Century Gothic", arial;
    background-color: #58595b;
	padding: 5px 0;
	color: white;
    font-weight: lighter;
    font-size: 12px;
    text-align: center;
}

footer a {color: #ddd; transition: 0.3s ease, text-decoration 0.3s ease;}
footer a:hover {color: #009FDB;} 

/* ----------- */

/* BC GALLERY RESPONSIVE PLUGIN */

.photogalleryItem img {width: 100%;}

#imageContainer {min-height: 100px;}

#outerImageContainer {width: 100% !important; max-width: 1020px !important; height: auto !important; font-size: 0px !important;}
#lightbox img {height: auto; width: 100% !important;}
.imageContainer img {width: 100%; max-width: 1000px;}
#imageDataContainer {width: 100% !important; max-width: 1020px !important; position: relative; z-index: 1000;}

#loading img {width: auto !important;}

table.photogalleryTable td {padding: 3px !important;}

@media (max-width: 767px) {

    #imageData #imageDetails {width: 30% !important;}

}

/* ----------- */

/* BOOTSTRAP OVERRIDE */

.navbar-toggle {margin-right: 0 !important;}

.navbar-default {
    background-color: transparent !important;
    border-color: transparent !important;
}