body, html {
	font-family: 'Open Sans', sans-serif;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	color: #666;
	font-weight: 300;
	width: 100% !important;
	height: 100% !important;
}

h2 {
	margin: 0 0 20px 0;
	font-weight: 400;
	font-size: 36px;
	color: #777;
	text-transform: uppercase;
}

h3, h4 {
	font-size: 20px;
	font-weight: 600;
}

h5 {
	text-transform: uppercase;
	font-weight: 700;
	line-height: 20px;
}

p {
	font-size: 18px;   /* was 15px*/
}

p.intro {
	font-size: 16px;
	margin: 12px 0 0;
	line-height: 24px;
}

a {
	color: #3e8b8b;  /* #3e8b8b*/
}

a:hover, a:focus {
	text-decoration: none;
	color: #222; /*222*/
}

ul, ol {
	list-style: none;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}


.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}



ul, ol {
	padding: 0;
	webkit-padding: 0;
	moz-padding: 0;
}

hr {
	height: 5px;  /*was 2px*/
	width: 300px;  /*70 PX*/
	text-align: center;
	position: relative;
	background: #FAAFEE;  /* #468b8b green similar to h3 colour Was FAAFEE, and before that : #3e8b8b*/
	margin: 0 auto;
	margin-bottom: 20px;
	border: 0;
}

/*========================================================*/
/* Navigation */
#menu {
	padding: 5px;  /* originally was 20px then 10*/
	transition: all 0.5s;  /* was 0.8s*/  /* TWEAK THIS BIT TO CHANGE MENU CHANGING FROM TRANSPARENT*/
}

#menu.navbar-default {
	/*##############################*/
    /* sets the starting colour and opacity of the nav bar before scrolling*/
	background-color: rgba(0, 0, 0, 0.37);  /* rgba(248, 248, 248, 0); */
	/*##############################*/

	border-color: rgba(231, 231, 231, 0);		/* was rgba(231, 231, 231, 0);*/
}

#menu a.navbar-brand {
	font-size: 18px;
	color: rgba(255,255,255,0.9);  /*  255,255,255,0.8 colour of brand logo text before hover */
	font-weight: 500;
	text-transform: uppercase;
}
#menu a.navbar-brand:hover {
	color:  #f0d824;  /* : f0d824 : changes the BRAND text hover colour :-) #cd65b5*/
}
#menu.navbar-default .navbar-nav > li > a {
	text-transform: uppercase;     /* ############################################### */
	color: rgba(243,225,88,0.9);   /*  : yellow 243,225,88,0.9 this is the colour of the main menu text :-); */
									/*   was 255,255,255,0.8  */
									/* ############################################### */
	font-size: 15px;
	font-weight: 600;   /*make menu text heavier here*/
	letter-spacing: 1px;
}
#menu.navbar-default .navbar-nav > li > a:hover {     /*   S.S. was able to change this */
	color:  #fbf6cb; /* yellow?,  was #cd65b5 a magenta then fede3f a yellow*/
}
.on {
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	background-color: rgba(0,0,0,0.8) !important;   /* color that the nav bar fades to rgba(0,0,0,0.8) */
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	padding: 0 !important;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {

    /* ----------------------------------------------------------------------------------------*/
	color: #try yellow !important; /*fbf677 : in between yellow color */
	                  /*this changes the colour relating to the section scrolled to*/
    /* ----------------------------------------------------------------------------------------*/
	/*##############################*/
	background-color: transparent; /* transparent changes the block behind current menu section */ 
    /* could change this also?*/
}
.navbar-toggle {
	border-radius: 0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background-color: #3e8b8b;
	border-color: #3e8b8b;
}
.navbar-default .navbar-toggle:hover>.icon-bar {
	background-color: #FFF; /*#FFF;*/
}
.section-title {
	margin-bottom: 50px;
}
.section-title p {
	font-size: 18px;  /* 18px*/
	color: #888;
}

/*   now the button*/
.btn-custom {
	text-transform: uppercase;
	color: #fff;
	background-color: #19505b;  /*main colour of the button : dark cyan*/
	padding: 14px 20px;
	margin: 0;
	font-size: 15px;
	border-radius: 0;
	margin-top: 20px;
	transition: all 0.3s;
	border-bottom: 4px solid #3e8b8b;  /* the colour of the line accross the bottom of the button*/
}										/* ligher cyan */
.btn-custom:hover, .btn-custom:focus, .btn-custom.focus, .btn-custom:active, .btn-custom.active {
	color: #fff;
	background-color: #3e8b8b; /* was #b73c9b magenta hover colour for the button on top of header image*/
}
/*=============================================================================*/

/* Header Sections */
.intro {
	display: table;
	width: 100%;  /*modify */
	padding: 0;
	background: url(../img/intro-bg.jpg) no-repeat right bottom;
	background-color: #e5e5e5; /* #e5e5e5*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

/*.intro .overlay { */
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1b71d6+0,c54daa+100&0.5+0,0.5+100 */
/*	background: -moz-linear-gradient(top, rgba(27,113,214,0.5) 0%, rgba(197,77,170,0.5) 100%); */      /* FF3.6-15 */
/*	background: -webkit-linear-gradient(top, rgba(27,113,214,0.5) 0%, rgba(197,77,170,0.5) 100%); */  /* Chrome10-25,Safari5.1-6 */
/*	background: linear-gradient(to bottom, rgba(27,113,214,0.5) 0%, rgba(197,77,170,0.5) 100%);  */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#801b71d6', endColorstr='#80c54daa', GradientType=0 );*/  /* IE6-9 */
/*
} 
*/


.intro h1 {
	color: rgba(255,255,255,0.9); /* 255,255,255.0.9 text on top of header image*/
	font-size: 60px;  /* 54px, previously 72px*/
	font-weight: 800;
	letter-spacing: -2px;  /*was -1 px*/
	text-transform: uppercase;
	margin-bottom: 10px; /*was 20px*/
	margin-top: 0;
}
.intro p {
	color: #fff;
	font-size: 24px;  /*22px*/
	font-weight: 300;
	
	margin-bottom: 50px; /*was 40px*/
	margin-top: 10px;    /*was 20px*/
}


.intro span {
	color: rgba(255,255,255,0.5);
	font-size: 28px;
	font-weight: 300;
}


header .intro-text {
	padding-top: 250px;  /*was 250px*/
	padding-bottom: 180px; /*200px*/
	padding-left: 30px;  /*was 75px, and previously 100px*/
	
}

/*==================== -=-==-=-=-=-=-==-= ================ */

.intro_navbar {
	display: table;
	width: 100%;  /*modify */
	padding: 0;
	background: url(../img/banner.jpg ) no-repeat right bottom;
	               /* ../img/intro-bg.jpg or ../img/banner.jpg */
	background-color: #e5e5e5;
	-webkit-background-size: cover; /*was cover */
	-moz-background-size: cover;	/*was cover */
	background-size: cover;			/*was cover */
	-o-background-size: cover;		/*was cover */
}

.intro_navbar  h1 {
	color: rgba(255,255,255,0.9); /* 255,255,255.0.9 text on top of header image*/
	font-size: 30px;  /* was 72px*/
	font-weight: 600;  /*was 800*/
	letter-spacing: -2px;  /*was -1 px*/
	text-transform: uppercase;
	margin-top: 40px; /*previously was 0*/
	margin-bottom: 20px;  /* was 20 px*/
	text-align: center;
}
.intro_navbar p {
	color: #fff;
	font-size: 22px;
	font-weight: 300;
	margin-bottom: 40px;
	margin-top: 20px;
	text-align: center;
}
.intro_navbar span {
	color: rgba(255,255,255,0.5);
	font-size: 28px;
	font-weight: 300;

}


header .intro-text_navbar {
	padding-top: 250px;
	padding-bottom: 200px;
	padding-left: 75px;  /*was 100px*/
}

/*====================Adapted this to be used for music clips pages  ================ */

.intro_musicclips {
	display: table;
	width: 100%;  /*modify */
	padding: 0;
	background: url(../img/intro-bg.jpg) no-repeat right bottom;
	               /* or banner */
	               
	background-color: #e5e5e5;
	-webkit-background-size: cover; /*was cover */
	-moz-background-size: cover;	/*was cover */
	background-size: cover;			/*was cover */
	-o-background-size: cover;		/*was cover */
}

.intro_musicclips  h1 {
	color: rgba(255,255,255,0.9); /* 255,255,255.0.9 text on top of header image*/
	font-size: 30px;  /* was 72px*/
	font-weight: 600;  /*was 800*/
	letter-spacing: -2px;  /*was -1 px*/
	text-transform: uppercase;
	margin-top: 5px; /*30 previously was 0*/
	margin-bottom: -10px;  /* was 20 px*/
	text-align: center;
}
.intro_musicclips p {
	color: #fff;			/*was #fff */
	font-size: 22px;		/*was 22*/
	font-weight: 300;		/*was */
	margin-bottom: 40px;	/*was */
	margin-top: 20px;    	/*was */
	text-align: center;
}
.intro_musicclips span {
	color: rgba(255,255,255,0.5);
	font-size: 28px;
	font-weight: 300;

}


header .intro-text_musicclips {
	padding-top: 250px;  /* was 250px*/`
	padding-bottom: 200px; /* was 200px*/
	padding-left: 75px;  /*was 100px*/
}





/*===================== End of .intro_musicclips parts ======================== */

/* About Section */


#about {
	padding: 60px 0;  /* was 30 and 120px originally*/
	                  /*first number is the gap about the about heading text*/
	background: #F6F6F6; /*was #f6f6f6*/
}
#about .about-text {
	margin-left: 20px; /*was 10px */
}
#about .about-text h3 {
	font-weight: 400;
	color: #3e8b8b;
}
#about img {
	float: right;
}
#about p {
	margin: 30px 0;  /* was 30px 0;  vertical gap between paragraphs*/
	font-weight: 400; /*added this */
    line-height: 22px;

}


/* adapted from About Section */
/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
#remixes {
	padding: 20px 0;  /* 120px*/  /*gap above the remixes text*/
	background: #F6F6F6; /*was #f6f6f6*/
}
#remixes .remixes-text {

	color: #af7;			/*was #fff */
	font-size: 22px;		/*was 22*/
	font-weight: 300;		/*was */
	margin-bottom: 40px;	/*was 40*/
	margin-top: 20px;    	/*was */
	text-align: center;
}
#remixes .remixes-text h3 {
	font-weight: 400;
	color: #3e8b8b;
}

}
#remixes p {
	margin: 30px 0;
	line-height: 22px;
}

/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/


/*-------------------------------------------------------------*/
/* Desc Section used on pop, ochestra pages etc*/

#desc {
	padding: 17px 0; /* was 120px*/
	background: #2e2e2e; /*was #f6f6f6*/
}
#desc .desc-text {
	/*margin-left: 10px;*/
	font-weight: 400;
	color: #FAFAFA;  

	text-align: center;  /** added*/
}
#desc .desc-text h3 {
	font-weight: 400;
	color: #FFFFFF;  /*was #3e8b8b*/
	text-align: center;  /** added*/
}
#desc img {
	float: right;
}
#desc p {
	margin: 15px 0;  /* 30 */
	line-height: 25px;  /*22 */
	
	margin-top: -10px; /*30 previously was 0*/
	margin-bottom: -10px;  /* was 20 px*/
}


/*========================End of Desc section ====================================== */



/* Services Section */
#services {
	padding: 120px 0;
}
#services h4 {
	color: #3e8b8b;
	text-transform: uppercase;
}
#services i.fa {
	font-size: 38px;
	margin-bottom: 20px;
	transition: all 0.5s;
	color: #fff;
	width: 100px;
	height: 100px;
	padding: 30px 0;
	background: #3e8b8b;
	border-radius: 50%;
}


/*======================= End of services section =======================================*/

/* Portfolio Section */
#portfolio {
	padding: 120px 0;
	background: #f6f6f6;
}

/*-----------------------------------*/
.categories {
	padding-bottom: 7px;  /* was 30px*/
	text-align: center;
}
ul.cat li {
	display: inline-block;
	padding-bottom: 8px;  /*ADDED THIS  it seems to allow some space between the boxes vertically*/
						  /* but also adds a gap between the category headings and the next section*/
						  /*effectively this prevents the boxes from overlapping!*/


}
ol.type li {
	display: inline-block;
	margin-left: 20px;

}
ol.type li a {
	color: #19505b;  /* dark turquoise */
	padding: 6px 10px; /* 10px 10px    1st is height of box  2nd is width of box*/
	 /*border: 2px solid #19505b; */ /*C54DAA;*/   /*removing the borders as it might look better*/
	text-transform: uppercase;
	font-size: 25px;   /* added this to increase the size of the text : 25px*/
    font-weight: 370;  /* and this to set the text a little heavier */


}
ol.type li a.active {
	background: #3e8b8b;   /*light turquoise*/
	color: #fff;
}
ol.type li a:hover {
	background: #3e8b8b;   /*light turquoise*/
	color: #fff;
}
/*.....................................*/
.isotope-item {
	z-index: 2
}
.isotope-hidden.isotope-item {
	z-index: 1
}
.isotope, .isotope .isotope-item {
	/* change duration value to whatever you like */
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	transition-duration: 0.8s;
}
.isotope-item {
	margin-right: -1px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.isotope {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition-property: height, width;
	-moz-transition-property: height, width;
	transition-property: height, width;
}
.isotope .isotope-item {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	transition-property: transform, opacity;
}


.portfolio-item {
	margin: 15px 0;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;

	text-align: center;  /*added this*/
/**/background: #000;  /*previously #3e8b8b    turquoise*/
	
	text-decoration-color: white;  /**/
	font-weight: 390;
}



/* ############################# added this new secion! ################################ */
	.portfolio-item p {
	color: rgba(255,255,255,0.9); /* 255,255,255.0.9  : WHITE */
								  /* tried yellow, not as good : #fbf677;*/
	font-size: 16px;  
	font-weight: 370;
	/* letter-spacing: -2px;  */
	text-transform: uppercase;
	/* margin-bottom: 20px; */
	margin-top: 5px;
	
	
	
	
}

/* ############################# end of new secion! ################################ */

.portfolio-item:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
.portfolio-item .hover-bg {
	height: 195px;
	overflow: hidden;
	position: relative;
}
.hover-bg .hover-text {
	position: absolute;
	text-align: center;
	margin: 0 auto;
	color: #ffffff;
	background: rgba(248, 248, 248, 0.66);  /*0 0 0 0.66*/
	padding: 30% 0 0 0;
	height: 100%;
	width: 100%;
	opacity: 0; /* 0 */  /*solid starting transparancy*/
	transition: all 0.5s;
}
.hover-bg .hover-text>h4 {
	opacity: 0;  /* 0 */
	color: #fff;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	transition: all 0.3s;
	font-size: 16px;
	font-weight: 300;
}
.hover-bg:hover .hover-text>h4 {
	opacity: 1; /* 1*/
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.hover-bg .hover-text>i {
	opacity: 0; /*0*/
	-webkit-transform: translateY(0);
	transform: translateY(0);
	/*transition: all 0.3s;*/
	transition: 50% 0.3s;
}
.hover-bg:hover .hover-text>i {
	opacity: 1; /*was 1*/
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}
.hover-bg:hover .hover-text {
	opacity: 0.3; /*1*/   /*this also adjusts the how transparent the image becomes when hovering on it*/
}

#portfolio i.fa {
	font-size: 20px;
	padding: 5px;
	color: #E87E04;
}

/*=============================== End of portfolio section ============================== */

/* Achivements Section */
#achievements {
	background: url(../img/achievements-bg.jpg) no-repeat center bottom fixed;
	background-color: #e5e5e5;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}
#achievements .overlay {
	padding: 120px 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3e8b8b+0,1b71d6+100&0.6+0,0.6+100 */
	background: -moz-linear-gradient(left, rgba(197,77,170,0.6) 0%, rgba(27,113,214,0.6) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(197,77,170,0.6) 0%, rgba(27,113,214,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(197,77,170,0.6) 0%, rgba(27,113,214,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99c54daa', endColorstr='#991b71d6', GradientType=1 ); /* IE6-9 */
}


#achievements h2 {
	color: #fff;
}

#achievements h3 {  /* added this to allow white text*/
	color: #fff;
}


#achievements p {  /* added this to allow white text*/
	color: #fff;
}



.achievement-box h4 {
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	margin-left: 5px;
	text-transform: uppercase;
}
.achievement-box span.count {
	font-size: 52px;
	font-weight: 600;
	display: block;
	color: #fff;
	padding: 0;
	margin: 0;
}

/*====================== End of acheivements section ======================== */


/* Testimonials Section ------------------------------------------- */
#testimonials {
	padding: 120px 0 80px 0;
	background: #F6F6F6;
}
#testimonials i.fa {
	color: #8e9599;
	font-size: 36px;
}
#testimonial {
	padding: 30px 0;
}
#testimonial .item {
	display: block;
	width: 100%;
	height: auto;
}
#testimonial img {
	width: 140px;
	height: 140px;
	border-radius: 50%;
}
#testimonial .item p {
	margin: 30px 0;
}
.owl-theme .owl-controls .owl-page span {
	display: block;
	width: 20px;
	height: 6px;
	margin: 5px 7px;
	filter: Alpha(Opacity=1);
	opacity: 1;
	border-radius: 0;
	background: #fff;
	transition: all 0.5s;
	border: 1px solid #ccc;
}
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {
	filter: Alpha(Opacity=100);
	opacity: 1;
	background: #3e8b8b;
	border: 1px solid #3e8b8b;
}
.owl-theme .owl-controls .owl-page.active span {
	background: #3e8b8b;
	border: 1px solid #3e8b8b;
}


/* Contact Section */
#contact {
	padding: 15px 0 30px 0; /*was 1: 120px    2:0     3: 60px*/
	                        /*1: gap between CONTACT heading and previous About section above it 
				  2: 0 ?,   
				  3: gap between box and text above it*/
  

  
}
#contact form {
	padding: 30px 0; /*was 30px*/
}
#contact .text-danger {
	color: #cc0033;  /*#cc0033;*/
	text-align: left;
}
label {
	font-size: 12px;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
	float: left;
}
#contact .form-control {
	display: block;
	width: 100%;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #222;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}
#contact .form-control:focus {
	border-color: #3e8b8b;
	outline: 0;
	-webkit-box-shadow: transparent;
	box-shadow: transparent;
}
.form-control::-webkit-input-placeholder {
color: #2c3e50;
}
.form-control:-moz-placeholder {
color: #2c3e50;
}
.form-control::-moz-placeholder {
color: #2c3e50;
}
.form-control:-ms-input-placeholder {
color: #2c3e50;
}
#contact .social {
	margin-top: 80px;
}
#contact .social ul li {
	display: inline-block;
	margin: 0 20px;
}
#contact .social i.fa {
	font-size: 28px;
	padding: 4px;
	color: #3e8b8b;
	transition: all 0.3s;
}
#contact .social i.fa:hover {
	color: #444;
}
.btn:active, .btn.active {
	background-image: none;
	outline: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}
a:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
	outline: none;
	outline-offset: none;
}
/* Footer Section*/
#footer {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3e8b8b+0,1b71d6+100 */
	background: rgb(197,77,170); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(197,77,170,1) 0%, rgba(27,113,214,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(197,77,170,1) 0%, rgba(27,113,214,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(197,77,170,1) 0%, rgba(27,113,214,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e8b8b', endColorstr='#1b71d6', GradientType=1 ); /* IE6-9 */
	color: rgba(255,255,255,0.5);
	padding: 30px 0 25px 0;
}


#footer a {
	color: rgba(255,255,255,0.7);
}
#footer a:hover {
	color: #fff;
}

@media (max-width: 1024px) {
#about img {
	float: left;
	margin-bottom: 20px;
}
}