/* colours */
$green:#86BC52;
$orange:#FF9933;
$purple:#7F63BB;
$blue: #55C5F4;

$header_bg_orange: #E67300;

$nav_default: #949494;
$nav_selected: #E07000;

$dark_heading: #212529;

$light_grey: #F6F6F6;

$image_path: "../../layout/";

/* =============================================================================
   IMPORTS
   ========================================================================== */


/* imports */
@import '_mixins';
@import '_typography';

a{
	color:$purple;
	&:hover{
		text-decoration:none;
		color:darken($purple, 20%);
	}
}

h1{
	@extend.heading_font;
	font-size:$big;
	font-weight:700;
}
h2{
	@extend.heading_font;
	font-size:$huge;
	font-weight:700;
}

h3{
	@extend.heading_font;
	font-size:$large;
	font-weight:400;
	color:$orange;
	border-top:2px solid $orange;
	padding-top:10px;
	margin:30px 0;
}

hr {
	border-color: #ddd;
	clear: both;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

body{
	background-color:lighten($green, 40%);
	@extend.body_font;
	font-size:$small;
}

div#wrapper{
	background: #fff;
}

#site-links{
	background:lighten($orange, 38%);
	color:#999;
	font-size:$mini;

	span{
		background:#4A90E2;
		@include border-radius(5px);
		padding:10px;
		&:first-of-type{
			margin-right:10px;
		}
		a{
			color:#fff;
			//border-right:1px solid #fff;
			display:inline-block;



			&#cp{
				background-image: url(#{$image_path}careerpilot-logo.png);
				background-repeat: no-repeat;
				background-position:center;
				width:122px;
				height:24px;
				text-indent:-9999em;
				text-align:left;
				display:inline-block;

			}
			&#won{
				background-image: url(#{$image_path}won-logo.png);
				width:124px;
				height:24px;
				text-indent:-9999em;
				background-repeat: no-repeat;
				text-align:left;
				display:inline-block;
				background-position:center;

			}
		}
	}

	ul{
		margin:0;
		padding:0;

		li{
			margin:0;
			padding:0;
			display:inline-block;
			list-style:none;
		}
	}
}

li#email i {
	margin-right: 15px;
}
li#phone i {
	margin-right: 19px;
	margin-left: 4px;
}




/*================= navbar bootstrap override ========================*/

a.logo{
	width:281px;
	height:103px;
	display:block;
	background-image: url(#{$image_path}win-logo.png);
	text-indent:-9999em;
	background-repeat:no-repeat;
	background-position-y: center;
}

#primary-nav{
	border-top:3px solid $orange;
	box-shadow: 0 1px 6px 0 #ccc;
}
.navbar{
	font-size:$small;
	//font-weight:700;
	padding-left:0;
	padding-right:0
}

.navbar-light .navbar-nav .nav-link{
	color: $nav_default;
	letter-spacing:0.6px;
}

.navbar-light .navbar-nav .active > .nav-link{
	color:$nav_selected;
}

.nav-item .dropdown-menu {
	left: auto;
}

.bg-light{
	background-color:#fff !important;
}

.pagination {
	.page-link {
		color: $purple;
	}
	.active .page-link {
		background-color: $purple;
		border-color: $purple;
	}
}

/*======end navbar====================================================*/

/*======== Alert =====================================================*/
section#alert{
	article{
		border:2px solid #ffc72c;
		background:#ffc72c;
		padding:15px;
		margin:30px 0 0 0;
	}
}

/*======header====================================================*/

.header-links li {
	.btn-link {
		color:#9F9F9F;
	}
	&.active .btn-link {
		color:$orange;
	}
}

.carousel{
	@include box-s(1px,1px,6px, rgba(0,0,0,0.5));

	header#strapline{
		position:absolute;
		bottom:30%;
		left:20%;
		right:20%;
		z-index:99999;
		background:rgba(255,255,255,0.8);
		text-align:center;
		@include box-s(1px,1px,6px, rgba(0,0,0,0.5));


		h1{
			font-size:$biggest;
			color:$orange;
			font-weight:700;
		}
	}
}
.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}



.twitter {

	.tweet-user {
		a {
			color: $purple;
			padding-left: 35px;
			background: url(#{$image_path}logo-twitter.png) 0 5px no-repeat;
			@include background-size(26px, 22px);
		}
	}

	.tweet {
		background-color: #fff;
		margin:0 0 10px;
		padding: 10px;
		color: #333;
		@include border-radius(5px);
		a {
			color: $purple;
			text-decoration: underline;
		}
		.tweet-text {
			display: block;
			padding-bottom: 5px;
			font-size:$small;
		}
		.tweet-date {
			color: #bbb;
			display: block;

		}
		.tweet-view {
			float: right;
			display: block;
			a {
				color: #bbb;
				text-decoration: none;
			}

		}
	}
}

section#partners{
	border-top:1px solid #ddd;
	padding:40px 0;
	&.no-border {
		border-top:none;
	}
	ul{
		margin:0;
		padding:0;
		li{
			margin:0 20px 20px 0;
			padding:0;
			display:inline-block;
			list-style:none;
			&:last-child{
				margin-right:0;
			}
		}
	}
}

section#hp-news{
	
	.card{
		background:lighten($purple, 25%);
		border:none;
	}

	ul{
		margin:0;
		padding:0;

		li{
			margin: 0;
			padding:0;
			list-style: none;

			a{
				padding:10px;
				margin:10px 0;
				display:block;
				background:#fff;
				color:$purple;
				@include border-radius(5px);

				&:hover{
					background:lighten($purple, 40%);
				}
			}
		}
	}
}




/*=====================Search======================*/

.search-result-item {
	display: block;
	padding: 15px;
	background-color: #ffe6cc;
	@include border-radius(5px);
}
.search-result-item-title {
	color: #000;
}
.search-result-item-category {
	float: right;
	display: block;
	color: $header_bg_orange;
}
.search-result-item-url {
	color: transparentize(#000, 0.6);
}


/*=====================footer links======================*/

#footer_links{
	margin:0 20px 0 0;
	padding:20px 0;
	font-size:$micro;
	ul.tcs{
		margin:0 ;
		padding:0;
		li{
			margin:0 5px 0 0;
			padding:0;
			list-style:none;
			display:inline-block;

			a{
				color: $nav_default;
			}
		}
	}



}

ul.social{
	margin:0 ;
	padding:0;
	li{
		margin:0 0 0 15px;
		padding:0;
		list-style:none;
		display: block;
		float:right;
		a{
			color: $orange;
			.fab {
				font-size: 2.5rem;					
			}
		}
	}
}

#site-links ul.social li {
	margin-left:10px;
}

#footer_links ul.social li a{
	color:#000;
	.fab {
		font-size: 2.5rem;					
	}
	display:none;
}

/*================header block ===============================*/

.header-block{
	background: $header_bg_orange;

	h1{
		color:#fff;
	}
}

#about.header-block .container{
	background: url(#{$image_path}header-about.png) bottom right no-repeat;
}
#students.header-block .container{
	background: url(#{$image_path}header-student.png) bottom right no-repeat;
}
#parents.header-block .container{
	background: url(#{$image_path}header-parents.png) bottom right no-repeat;
}
#teachers.header-block .container{
	background: url(#{$image_path}header-teacher.png) bottom right no-repeat;
}
#we.header-block .container{
	background: url(#{$image_path}header-case.png) bottom right no-repeat;
}
#news.header-block .container{
	background: url(#{$image_path}header-news.png) bottom right no-repeat;
}
#hub.header-block .container{
	background: url(#{$image_path}header-hub.png) bottom right no-repeat;
}

/* ===========secondary nav====================================*/

nav.card.secondary{
	border:3px solid $purple;

	.card-header{
		background:$purple;
		color:#fff;
		font-size:$medium;
		font-weight:700;
	}

	.list-group-item {
		display:block;
		color:#333;
		@include border-radius(0);

		&.active{
			color:$purple;
			background-color: $light_grey;
			border-color: rgba(0,0,0,.125);
			&.has_children {
				border-bottom-color: transparent;
			}
		}
		&.child_active {
			background-color: $light_grey;
			border-bottom-color: transparent;
			// font-weight: 600;
		}
		&.win-leftnav-child {
			padding-left: 3rem;
			padding-top: .5rem;
			padding-bottom: .5rem;
			border-color: transparent;
			background-color: $light_grey;
			font-size: $mini;
			&.active {
				// font-weight: 400;
			}
			&:last-of-type {
				padding-bottom: .75rem;
			}
		}
	}

	.list-group-flush {
		.list-group-item.win-leftnav-child:last-child {
			border-bottom-color: $light_grey !important;
		}
	}

	ul li i{
	//	float:right;
	}

}

#supporting-sites{
	background:#4A90E2;
}

nav .breadcrumb{
	background-color:transparent;
	padding:0;
	font-size:$mini;

	&.force_show {
		display: flex !important;
	}
	&.force_hide {
		display: none !important;
	}

}

.lhs{
	margin:50px 0;
}

.main-content{
	margin:50px 0;
}

.rhs{
	margin:50px 0;
}

section#team{
	ul{
		margin:0;
		padding:0;

		li{
			margin:0;
			padding:5px 0;
			list-style:none;
		}
	}

	article{
		margin-bottom:30px;
		//border-top:1px solid #999;
		padding-bottom:20px;


		img{
			@include box-s(1px,1px,6px, rgba(0,0,0,0.5));

		}
	}
}

/*=========================case studies grid=============================*/

section#case-studies{
	.card{
		border:3px solid $purple;
		background:$purple;
		@include box-s(1px,1px,6px, rgba(0,0,0,0.5));
		@include border-radius(5px);
		text-align:center;
	}
	article{
		

		


		img{
			width:100%;
		}

		span{
			display:block;
			padding:30px 0 15px;
		}
	}

	a{
		color:#fff;
	}
}

/*=========================news items=============================*/

section#news{
	article{
		margin-bottom:30px;
	}
	img{
		width:100%;
		margin-bottom:15px;
		@include box-s(1px,1px,6px, rgba(0,0,0,0.5));
	}
}

.card.win-programme{
	padding:.75rem 1.25rem;
	border:3px solid $green;
	background:lighten($green,40%);
	margin-bottom:30px;

	a{
		color:$green;
		&:hover{
			color:darken($green, 20%);
		}

		&.btn-outline-success {
			border-color: $green;
			&:hover {
				background-color: $green;
			}
		}
	}

	h5 {
		color:$green;
		padding-left: 35px;
		position: relative;
		margin-bottom: 15px;
		i {
			position: absolute;
			left:0;
			top:5px;
		}
	}

	img{
		width:100%;
		margin-bottom:1rem;
	}
}

/*============= content ======================*/

.win-content-holder {
	padding:.75rem 1.25rem;
	border:1px solid #ccc;
	background:$light_grey;
	margin-bottom:30px;
	@include border-radius(5px);
}

.subsection {
	margin:30px 0;
	clear: both;
}
.subsection-item {
	margin:0 0 15px;
	a {
		background-color: $light_grey;
		border: 1px solid #ccc;
		@include border-radius(5px);
		img {
			@include border-radiuses(2px,0,0,2px);
		}
		h5 {
			padding: 15px 30px 15px 15px;
			margin:0;
			position: relative;
			color: #000;
			i {
				position: absolute;
				right:10px;
				top:18px;
			}
		}
	}
}

/*=============================================================================================*/
/*==============================New homepage styles=============================================*/
/*=============================================================================================*/



#strapline{
	text-align:center;
}

section#homepage-links{
	margin-bottom:30px;
	.card{
		@include box-s(1px,1px,6px, rgba(0,0,0,0.3));
		a{
			color:#333;
			text-decoration:none;
			font-size:$medium;
		}
	}
	.homepage-links-item{
		&:nth-child(1) .card{
			border:3px solid $blue;
			background:$blue;

			&:hover{
				background:lighten($blue,10%);
			}
		}
		&:nth-child(2) .card{
			border:3px solid lighten($orange, 15%);
			background:lighten($orange, 15%);
			&:hover{
				background:lighten($orange,25%);
			}
		}
		&:nth-child(3) .card{
			border:3px solid lighten($green, 15%);
			background:lighten($green, 15%);
			&:hover{
				background:lighten($green,25%);
			}
		}
	}
	i{
		margin-top:10px;
	}
}

section#wintogether-banner{
	background:lighten($orange, 30%);
	padding:15px;
	@include border-radius(5px);
	position:relative;

	h2{
		color:$dark_heading;
	}

	p{
		font-size:$medium;
	}

	a.btn{
		@include box-s(1px,1px,6px, rgba(0,0,0,0.3));
		color:#fff;
		i{
			margin-top:6px;
			margin-left:10px;
		}
	}

	article{
		margin-right:250px;
	}

	img{
		position:absolute;
		top:0;
		right:0;

	}
}

section#statistics{
	background:lighten($orange, 10%) url(#{$image_path}bg-stat.png) center left no-repeat;
	text-align:center;
	@include border-radius(5px);
	padding:0 15px;


	.card{
		border-width:0px;
		@include border-radius(5px);
		background-color:white;

		.card-footer{
			background:none;
			font-weight:700;
			color:$orange;
			line-height:1.3;
			border:none;
		}
	}
	.card-body{
		background:none;
		@include border-radius(5px);
		
		

		h5{
			color:$orange;
			font-size:62px;
			font-weight:700;
			
		}
	}


	.joining-text {
		.card{
			background:none;
			border:none;
		}
		.card-body{
			background:none;
			p{
				font-size:30px;
				color:#fff;
			}
		}
}
}

section#main-video{
	background:lighten($purple, 30%);
	margin:0 0 0;
	//padding:30px 0;
	.card{
		background:none;
		border:none;
		padding:30px 0;


		h2{
			color:$dark_heading;
		}

		p{
			color:#fff;
		}
	}
}

section#promo{
    background:$blue url(#{$image_path}promo.png) 10px 50% no-repeat;
    padding:15px;
    @include border-radius(5px);
    position:relative;
    h2{
        color:#333;
    }
    p{
        font-size:$medium;
    }
    a.btn{
        @include box-s(1px,1px,6px, rgba(0,0,0,0.3));
        color:#333;
        background:#F8E71C;
        i{
            margin-top:6px;
            margin-left:10px;
        }
        &.btn-dark{
            background-color:#F8E71C;
            border:none;
        }
	}
}

#uniconnnect img{
	margin-top:10px;
}

/*============= media queries======================*/

@media (max-width: 991px) {
	.carousel header#strapline h1{
		font-size:$huge;
	}
	#footer_links ul.social li a{
		
	}

	.navbar-nav li.home{
		display:block;
	}

	li.nav-item.won-link{
		display:none;
	}
	
}

@media (max-width: 768px) {
	
	.carousel{

		@include box-s(0px,0px,0px, rgba(255,255,255,100));

		header#strapline{
			position:relative;
			bottom:auto;
			left:auto;
			right:auto;
			background:none;
			text-align:center;
			@include box-s(0px,0px,0px, rgba(255,255,255,100));
			box-shadow:none;
			margin-bottom:30px;


			h1{
				font-size:$huge;
				color:$orange;
				font-weight:700;
			}
		}
	}
	

	section#promo{
        background:$blue url(#{$image_path}promo.png) 50% 10px no-repeat;
        padding-top:200px;
    }

	section#wintogether-banner {
		img{
		position:relative;
		text-align:center;
		display: block;
  		margin-left: auto;
  		margin-right: auto;
		width:100%;
		max-width:250px;
		margin-top:20px;
		}
		article{
			margin-right:auto;
			text-align:center;
		}
	}

	#main-video{
		text-align:center;
		h2{
			font-size:$large;
		}
	}

	.main-content{
		margin:15px 0 30px;
	}

	

}



@media (max-width: 460px) {

	

	#site-links {
		text-align:center !important;

		span{
			display:block;
		}
	}

}

@media (min-width: 576px) {

    .card {

        &.image-right {
            float: right;
            width: 50%;
            margin-left: 30px;
        }
        &.image-left {
            float: left;
            width: 50%;
            margin-right: 30px;
        }
	}

	
}

/*============= Retina======================*/

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

  /* Retina-specific stuff here */

    a.logo{
		background-image: url(#{$image_path}win-logo@2x.png);
		@include background-size(279px, 56px);
	}
}