/* #Student Futures
================================================== */

/* colours

Blue bg: #8fcce1
Logo Blue: #8fcce1
Logo Orange: #f1b26d
Logo Green :#89ca8a

*/

/* General*/

.section_wrapper h1 {
    color: #333333!important;
}

.section_wrapper .textintro h2 {
    color: #51bbe0!important;
}

.section_wrapper .textintro {
    border-bottom: none!important;
	padding-bottom: 5px;
}

.section_wrapper .textintro:after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(45deg, rgb(244,170,115), rgb(137,205,228), rgb(0,143,104));
  right: 0;
  bottom: 0;
  position: absolute;
}

.pagetextimg {
    border-bottom: 5px solid #8fcce1!important;
}

.hpsection.hpblue, .row_cell.blueblock{
    background: #8fcce1!important;
}

.hpsection.hporange2, .row_cell.orange2block {
    background: #f1b26d!important;
}

.hpsection.hpgreen, .row_cell.greenblock {
    background: #89ca8a!important;
}

.row_cell i.green{
    color:#89ca8a;
}

.gradientBorder {
    background: linear-gradient(45deg, rgb(244,170,115), rgb(137,205,228), rgb(0,143,104));
    height: 20px;
    width: 100%;
    display: block;
}

.gradient-line{
	background: linear-gradient(45deg, rgb(244,170,115), rgb(137,205,228), rgb(0,143,104));
    height: 1px;
    width: 100%;
    display: block;
}

h3.trigger_basic{
	border: none;
}

.gradientBorder.small {
    height: 10px;
}

.row_cell:hover.nopadding.transparent {
    background: transparent!important;
}

.hpsection.events .event-info i{
	color: #89ca8a!important;
}

ul.event_info.top-info .btn:hover{
	background: #ebebeb!important;
	color: black!important;
}

ul.event_info li i {
    width: 30px;
    color: #8fcce1!important;

}

#studentfutures .trigger{
	 background: linear-gradient(90deg, rgb(244,170,115), rgb(137,205,228), rgb(0,143,104));
}

#studentfutures .toggle_container {
	background: linear-gradient(90deg, rgb(244,170,115), rgb(137,205,228), rgb(0,143,104));
	padding: 0 10px 10px;
	border: none;
}

#studentfutures .toggle_container .toggle_container_wrap{
	background: white;
	padding: 15px;
}

#studentfutures .toggle_container_basic{
	border: none;
}

#studentfutures .trigger_basic:after{
	color: #f1b26d!important;
}

#studentfutures .row_cell i.orange{
	color: #f1b26d!important;
}

.arrow li:before {
    color: #f1b26d;
}

@media only screen and (min-width: 45em){
	.hpsection.events .event-info {
		border-left: 1px dashed #f1b26d!important;
	}
}

@media only screen and (max-width: 44.99em){
	.hpsection.events .event-info {
		border-top: 1px dashed #f1b26d!important;
	}
}

.quote blockquote {
    border-left: 5px solid #f1b26d!important;
}

.quote blockquote:before, .quote blockquote p:after {
    color: #f1b26d!important;
}

.quote p.author {
    color: black!important;
}

.tabs-nav-wrap{ border-bottom: 4px solid #8fcce1!important; }
.tab-nav-link.current, .tabs-nav .tab-nav-link:hover {background:#8fcce1!important; border-color: #8fcce1!important;}

li.highlight_info{
	background-color: rgba(143, 204, 225, 0.3)!important;
}

.circleIconSmall{
	background: #8fcce1!important;
}
/* buttons*/

.btn.btn-blue2{
	background: #8fcce1;
	color: black;
}

.btn.btn-orange2{
	background: #f1b26d;
	color: black;
}

.btn.btn-green, .btn.btn-main, .row_cell .menulink.solid li a{
	background: #89ca8a!important;
	color: black!important;
	border: none;
}

.btn.btn-blue2:hover{
	background: black;
	color: #8fcce1;
}

.btn.btn-orange2:hover{
	background: black;
	color: #f1b26d;
}

.btn.btn-green:hover, .row_cell .menulink.solid li a:hover{
	background: #ccc!important;
	color: #333;
	border: none;
}

.events_button_group .btn{
	background-color: #89ca8a!important;
	color: black!important;
	border: none;
}

.events_button_group .btn:hover{
	background-color: black!important;
	color: #89ca8a!important;
	border: none;
}

.btn.btn-transparent-black:hover{
	background: #89ca8a!important;
	border-color: #89ca8a!important;
	color: black!important;
}

@media only screen and (max-width: 950px){
	#studentfutures .top-banner .innerdiv-left .btn{
		background: #f1b26d;
		color: black;
		border: none;
	}

	#studentfutures .top-banner .innerdiv-left .btn:hover{
		background: black;
		color: #f1b26d;
	}
}
/* Banners*/

#studentfutures .top-banner{
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover!important;
	}

#studentfutures .top-banner h1, #studentfutures .top-banner .icon-wrap{
	margin-bottom: 20px;
}

#studentfutures .top-banner .icon-wrap img, #studentfutures .top-banner .icon-wrap h2{
	display: inline-block; 
	margin-right: 10px;
	vertical-align: middle;
}

#studentfutures .top-banner .icon-wrap h2{
	margin: 0;
	padding: 0;
}

#studentfutures .other-banners img.stlogo{
	width: 100px;
	margin-bottom: 20px;
}
	
#studentfutures .other-banners img.icon{
	width: 100px;
}

@media only screen and (min-width: 45em) {
	#studentfutures .top-banner .btn{
		margin: 2px 0;
	}
	#studentfutures .top-banner.other-banners h1{
		float: right;
	}
	#studentfutures .home-banner img{
		width: 350px;	
	}
    #studentfutures .home-banner img.award{
		width: 100%;
        height: auto;
        margin-right: 20px;
    }
	#studentfutures .top-banner h1, #studentfutures .top-banner .icon-wrap{
		display: inline-block; 
		vertical-align: middle;
	}
}

@media only screen and (max-width: 44.9em) {
	#studentfutures .home-banner{
		max-height: 400px;	
	}
	
	#studentfutures .home-banner img{
		width: 300px;	
	}
	
	#studentfutures .top-banner {
    	height: 632px!important;
	}
    #studentfutures .home-banner img.award{
		width: 100px;
        height: 100px;
        margin: 10px auto;
	}
}

@media only screen and (min-width: 950px) {
    #studentfutures .top-banner p {
        font-size: 120%;
        line-height: 1.3;
        color: black;
        text-shadow: none;
    }
	
	#studentfutures .home-banner{
		background: url(/images/depts/studentfutures/home-banner.jpg) no-repeat center center;
	}
	
	#studentfutures .voluntees-banner{
		background: url(/images/depts/studentfutures/voluntees-banner.jpg) no-repeat center center;
	}
	
	#studentfutures .launchpad-banner{
		background: url(/images/depts/studentfutures/launchpad-banner.jpg) no-repeat center center;
	}
	
	#studentfutures .careers-banner{
		background: url(/images/depts/studentfutures/careers-page-banner.jpg) no-repeat center center;
	}
}

@media only screen and (max-width: 950px) {
	#studentfutures .top-banner .innerdiv-left{
		background: rgba(0,0,0,0.9);
		padding: 10px 20px;
	}
	
	#studentfutures .home-banner{
		background: url(/images/depts/studentfutures/home-banner.jpg) no-repeat center right;
	}
	
	#studentfutures .voluntees-banner{
		background: url(/images/depts/studentfutures/voluntees-banner.jpg) no-repeat center right;
	}
	
	#studentfutures .launchpad-banner{
		background: url(/images/depts/studentfutures/launchpad-banner.jpg) no-repeat center right;
	}
	
	#studentfutures .careers-banner{
		background: url(/images/depts/studentfutures/careers-page-banner.jpg) no-repeat center right;
	}
}

/* sections */

.hpteaching{
    background: linear-gradient(to right, #dfeedb 1%, #ddf0f7 48%, #ddf0f7 48%, #ddf0f7 48%, #ddf0f7 48%, #ddf0f7 48%, #ddf0f7 48%, #f9e8d8 100%, #f9e8d8 100%);
    position: relative;
}

.hpteaching i{
    font-size: 100%;
    color: #e87200;
}

.quotebg {
	border-top: 10px solid linear-gradient(45deg, rgb(244,170,115), rgb(137,205,228), rgb(0,143,104));
	border-bottom: 10px solid linear-gradient(45deg, rgb(244,170,115), rgb(137,205,228), rgb(0,143,104));
	background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)), url("/images/sections/about/student_life_bg.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover; 
}

#studentfutures .hpblue li a:before, #studentfutures li.telephone a:before{
    font-family: "Font Awesome 6 Brands";
    color: black!important;
    font-size: 220%;
    content: "\f054";
    display: block;
    text-align: center;
    margin-bottom: 15px;
}

.hpsection.events {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(/images/sections/Business/the-curve.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover; 
}

.row_teaching{
    background: url(/images/Depts/studentfutures/Teaching-Fair-img-2.png) no-repeat right top!important;
    background-size: auto 75%!important ;
    box-sizing: border-box;
}

.row_work{
    background: url(/images/Depts/studentfutures/Part-time-jobs-week-img-2.png) no-repeat left bottom!important;
    background-size: auto 95%!important ;
    box-sizing: border-box;
}

.row_work.border, .row_teaching.border{
    border: 1px solid #8fcce1;
    box-sizing: border-box;
}

  @media only screen and (max-width: 44.99em) {
        .hpcarousel.default-banner.futures-banner {
            background: url(/images/depts/studentfutures/home-banner-small.jpg) no-repeat center center;
            background-size: cover;
            align-items: end;
        }
        
        .hpcarousel.futures-banner {
            height: 300px;
        }
        
        .hpcarousel.futures-banner h1 {
            margin-bottom: -10px;
            padding-bottom: 0;
        }
        
        .hpcarousel.default-banner.futures-banner:before {
            background: linear-gradient(360deg, rgba(138, 197, 215, 1) 0%, rgba(138, 197, 215, 1) 30%, rgba(138, 197, 215, 0.6) 58%, rgba(138, 197, 215, 0) 70%);
        }
        
        .row_work div, .row_teaching div{
			background: rgba(250,250,250,0.9) ;
			padding: 5px 20px 0 20px;
		}
    }
	  
	@media only screen and (min-width: 45em){
		.row_work{
			padding-left: 380px!important;
		}
		
		.row_teaching{
			padding-right: 350px!important;
		}
        #studentfutures .hpcarousel.futures-banner {
            background: url(/images/depts/studentfutures/home-banner-big.jpg) no-repeat top center;
            background-size: cover;
         
        }
        #studentfutures .hpcarousel.futures-banner:before {
            content: none;
        }
    }

/*sidebar*/

#studentfutures .sidebar {
    background: #8fcce1!important;
}

#studentfutures .sidebar .icon {
	margin: auto;
	height: 90px;
	display: block;
	padding-top: 5px;
}

#studentfutures .sidebar .logo {
	height: 100px;
	margin-bottom: 15px;
	width: 100%;
}

#studentfutures .sidebar h2 {
	text-align: center;
	text-shadow: 1px 1px 2px rgb(0 0 0 / 60%);
	color: white;
	padding-top: 0!important;
}


/*content pages */

.texthighlight {
    background: #93c887;
    background: -webkit-linear-gradient(left, #93c887 1%, #89cde3 48%, #89cde3 48%, #89cde3 48%, #89cde3 48%, #89cde3 48%, #89cde3 48%, #f4af6e 100%, #f4af6e 100%)!important;
    background: -o-linear-gradient(left, #93c887 1%, #89cde3 48%, #89cde3 48%, #89cde3 48%, #89cde3 48%, #89cde3 48%, #89cde3 48%, #f4af6e 100%, #f4af6e 100%)!important;
    background: linear-gradient(to right, #93c887 1%, #89cde3 48%, #89cde3 48%, #89cde3 48%, #89cde3 48%, #89cde3 48%, #89cde3 48%, #f4af6e 100%, #f4af6e 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#93c887', endColorstr='#f4af6e', GradientType=1);
	padding: 30px 20px!important;
}

.texthighlight h2,  .texthighlight p{
    color: black!important;
}

/* Event list */
.eventslist ul { margin-top: -10px;}
.eventslist a.button { color:#fff;}
.eventDate{ margin-left:1%; }
.eventslist .eventTable th{ padding:5%; }
.eventslist .eventTable tbody tr:hover td, .eventslist .eventTable table tbody tr:hover th { background-color: #f9f9f9;}
.eventslist .eventTable {
    background: #fff;
    border:1px solid #ebebeb;	
    margin-top:5%;
}
 .eventslist .eventTable td{
    padding:2%;
    padding-left:4%;
    padding-right:5%;
    border:none;
    border-bottom:1px solid #ebebeb;
}
.eventslist .eventTable td{ background: #f9f9f9; }
.eventslist .eventTable td:before{
    content: "\f133";
    font-family: "Font Awesome 5 Pro";
    display: block;
    float: left;
    padding-right: 10px;
}
.eventslist .eventTable td.date:before{ content: ""; }	

ul.studyMenuLinkspage li, ul.studyMenuLinkspage a {
    background: #8fcce1 !important;
}

ul.studyMenuLinkspage li:hover, ul.studyMenuLinkspage a:hover li, ul.studyMenuLinkspage a:hover {
    background-color: #333!important;
}

.boxouthead {
    background: #333!important;
}
.boxout .arrow li:before{
    color: #333 !important;
}