/****  delta.css: changes to main.css, possibly incorporated later... ******************************/

/****  change to core classes - add a 'bold' class                    ******************************/
.boldtext {
	font-weight: bold;
}

/****  change body font-size to 15px to make @media enquiries simpler ******************************/
body {
	font-size: 15px;
}

h4{
	font-family: 'Open Sans';
}
/**** prevent box appearing around menu item  *****************************************************/
a:focus {
    outline: none;
}

/****  make sure media stays within box  *********************************************************/
audio, canvas, progress, video {
    max-width: 100%;
}

/****  format home image  ***********************************************************************/
#image-home {
	position: relative;
	display: block;
	height: auto;
	max-width: 100%;
	margin-top:100px;
}

 
#info i, #home i, #videoscribe i, #sp i, #contact i, footer i {
    color: #fac42b;
}


#home h1 {
	position: relative;
	right: 2000px;
}

#contact-subheader h2 {
	position: relative;
	right: 2000px;
}

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

/****  paragraph styling - change colour from grey to black <p>  ****/
.lead {
	color:#262626; 
}

/****  paragraph styling - add italic to <p>  ****/
.lead-italic {
	font-style: italic;
}

/* make buttons in home section the same size */
.equalise-buttons {
    display: inline-block;
    min-width: 100px; /** The min-width for each button **/
    max-width: 200px; /** The max-width for each button **/
    white-space: nowrap; 
}

.button {
	width: 100%;
    white-space: initial; 

	font-family:'Open Sans';
	font-size: 17px;
	text-transform: uppercase;
	border: none;
	padding: 5px 15px;
	display: inline-block;
	position: relative;
	outline: none;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
			transition: all 0.3s;
}


/* NAVBAR */
/* temp - display text font instead of logo */
.navbar-title {
	font-family:'Georgia';
	font-size:20px;
	font-weight:400;
	color:#ffffff;
}

.navbar-logo {
	float:left;
	max-width: 280px;
	padding-top: 5px;
}

.navbar-logo a img {
	max-height: 100%; 
	max-width: 100%;
}

.navbar-custom {
	font-family:'Open sans';
	font-size:12px;
	font-weight:400;
	letter-spacing:1px;
	/*background:transparent;*/
	background-color: #262626;
	margin-bottom:0;
	border-radius:0;
	z-index:1041;
	width:100%;
	-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
  -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
  transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.navbar-custom a {
	color:#ffffff;
}
.navbar-custom a {
	padding: 8px 0;
	background: #262626;
}

.navbar-nav > li {
    color: #ffffff;
    background: transparent;
}

.navbar-nav > li > a {
    color: #ffffff;
    background: transparent;
}

.navbar-custom .navbar-nav > li > a:hover {
	color:#fac42b;
	background:transparent;
}

.navbar-custom .navbar-nav > li > a:active,
.navbar-custom .navbar-nav > li > a:focus {
	color:#fac42b;
	background:transparent;
}

.navbar-custom .navbar-nav > li > a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 4px;
	background: rgba(0,0,0,0.1);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.navbar-custom .navbar-nav > li > a:hover::after,
.navbar-custom .navbar-nav > li > a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.navbar-custom .icon-bar {
	background:#fac42b;
}

/* navbar effect */
#highlight #right {
	background:#262626;
	min-height:100px;
} 



.sticky-wrapper {
	/*position:absolute;
	width:100%;
	padding-top:30px;*/
	background-color: #262626;
}

.sticky-wrapper a {
	color:#ffffff;
}

.is-sticky .navbar-custom {
	width:100%;
	color: #ffffff;
	background:#262626;
	-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
  	-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
	transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.is-sticky a {
	color:#ffffff;
}



/****  reduce size on smaller devices  ************************************************************/
footer .col-1 h4 {
	font-size: 15px;
}
/****  place h4 off the viewport (to preserve alignment)  *****************************************/
.invisible {
	position: relative;
    right: 2000px;
}
/****  default to open sans  ****/
/*p#copyright-notice {
    font-family: 'Cabin Condensed', sans-serif;
    font-size: .6em;
    color: #000000;
}*/

/****  media queries  *****************************************************************************/
/****  body font size is 15px, therefore 1em = 15px
/****  media first, ie no css in first query         **********************************************/

/****  20em = 300px  ******************************************************************************/
@media screen and (min-width: 20em) {}

/****  30em = 450px  ******************************************************************************/
@media screen and ( min-width: 30em ) {}

/****  48em = 720px  ******************************************************************************/
@media screen and (min-width: 48em) {
/****  set max length of logo image ***************************************************************/
	.navbar-logo {
		max-width: 500px;
		padding-top: 0px;
	}

	.navbar-logo a img {
		max-height: none; 
		max-width: none;
	}


	.navbar-custom {
		padding: 20px 0;
	}


	.is-sticky .navbar-custom {
		padding: 0 0;
	}

	/****  anchors for sections of index.html  ****************************************************/
	#info, #about {
		padding-top: 120px;
	}

	/****  reduce size on smaller devices  *******************************************************/
	footer .col-1 h4 {
		font-size: 18px;
	}

	#credits {
 		text-align: right;
 	}

}


/****  67em = 1005px  *****************************************************************************/
@media screen and ( min-width: 67em ) {}

/****  79em = 1185px  *****************************************************************************/
@media screen and ( min-width: 79em ) {}

/****  48.875em = 733.125px  **********************************************************************/
@media screen and ( max-width: 48.875em ) and ( min-width: 48em ) {}