/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */

/**********************************************************************************

	Project Name: 524 Group Website
	Project Description: Fivetwentyfour Group is all about proving branded solutions to reinforce your business’s image.
	File Name: style.css
	Author: Alyoop
	Author URI: http://www.alyoop.com.au
	Version: 1.0.0
	
**********************************************************************************/


/**********************************************************************************

	*-- Table Of Contents --*

**********************************************************************************/


/* ----------------------------------------------------------
	HTML 5 display definitions
---------------------------------------------------------- */

/* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */
 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
/* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* * Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }
/* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4.
* Known issue:no IE 6 support. */
[hidden] { display: none; }

/* ----------------------------------------------------------
	Base
---------------------------------------------------------- */

/* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
*    user zoom. */
 
html { font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */ }
html, html a { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
/* * Addresses `font-family` inconsistency between `textarea` and other form
* elements. */
html, button, input, select, textarea { font-family: 'Merriweather', Arial, sans-serif; }
/* * Addresses margins handled incorrectly in IE 6/7. */
body { margin: 0; font-family: 'Merriweather', Arial, sans-serif; height: 70px;}

/* ----------------------------------------------------------
	Links
---------------------------------------------------------- */

/* * Addresses `outline` inconsistency between Chrome and other browsers. */
a{outline: 0;} 
a:focus { outline: thin dotted; }
/* * Improves readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }

/* ----------------------------------------------------------
	Typography
---------------------------------------------------------- */

/* * Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */
 
h1 { font-size: 2em; margin: 0.67em 0; color: #ecf0f1; }
h2 { font-size: 1.5em; margin: 0.83em 0; }
h3 { font-size: 1.17em; margin: 1em 0; }
h4 { font-size: 1em; margin: 1.33em 0; }
h5 { font-size: 0.83em; margin: 1.67em 0; }
h6 { font-size: 0.75em; margin: 2.33em 0; }
/* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }
/* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
/* * Addresses styling not present in Safari 5 and Chrome. */
dfn { font-style: italic; }
/* * Addresses styling not present in IE 6/7/8/9. */
mark { background: #ff0; color: #000; }
/* * Addresses margins set differently in IE 6/7. */
p, pre { margin: 1em 0; }
/* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */
code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* * Improves readability of pre-formatted text in all browsers. */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
/* * Addresses CSS quotes not supported in IE 6/7. */
q { quotes: none; }
/* * Addresses `quotes` property not supported in Safari 4. */
q:before, q:after { content: ''; content: none; }
small { font-size: 75%; }
/* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* ----------------------------------------------------------
	Lists
---------------------------------------------------------- */

/* * Addresses margins set differently in IE 6/7. */
 
dl, menu, ol, ul { margin: 1em 0; }
dd { margin: 0 0 0 40px; }
/* * Addresses paddings set differently in IE 6/7. */
menu, ol, ul { padding: 0 0 0 40px; }
/* * Corrects list images handled incorrectly in IE 7. */
nav ul, nav ol { list-style: none; list-style-image: none; }


/* ----------------------------------------------------------
	Global Styles
---------------------------------------------------------- */

	/****-----  Typography  -----****/

	body{
		-webkit-font-smoothing: antialiased;
	   text-rendering: optimizelegibility;
	   height: 100%;
	}
	
	h1{
		font-family: 'Fira Sans', Arial, sans-serif;
		font-weight: 700;
		font-size: 80px;
		line-height: 94px;
		color: #fff;
	}

	h2{
		font-family: 'Fira Sans', Arial, sans-serif;
		font-size: 60px;
		line-height: 70px;
		font-weight: 700;
	}

	h6{
		font-family: 'Fira Sans', Arial, sans-serif;
		font-size: 20px;
		font-weight: 500;
	}

	p{
		font-family: 'Droid Sans', Arial, sans-serif;
		font-size: 23px;
		line-height: 33px;
	}

	span{
		font-family: 'Droid Sans', Arial, sans-serif;
		font-size: 16px;
		line-height: 23px;
		color: #fff;
	}
	
	a:active{
    	outline: none
    	-webkit-outline-style: none;
    	-webkit-outline:none;
   	 }

    a:focus{
		-moz-outline-style: none;
		-webkit-outline-style: none;
	}
	a:focus{ 
		outline:none; 
	}
	

/* ----------------------------------------------------------
	Navigational Bar
---------------------------------------------------------- */
	nav{
		box-shadow: 0px 2px 25px rgba(0,0,0,.3);
	}

	.navbar{
		background-color: rgba(255,255,255,0.85);
		border: none;
		height: 80px;
		-webkit-border-radius:0px;
		-moz-border-radius:0px;
		border-radius: 0px;
		z-index: 4;
	}

	.navbar ul{
		margin-top: 16px;
	}

	.navbar ul li{
		padding-left: 9px;
	}

	.navbar ul li a{
		font-size: 20px;
		font-family: 'Fira Sans', Arial, sans-serif;
		color: #1b8ccc;
		-webkit-transition:all 0.3s ease-in-out;
   		-moz-transition:all 0.3s ease-in-out;
     	-o-transition:all 0.3s ease-in-out;
        transition:all 0.3s ease-in-out;
	}

	.nav>li>a:hover, .nav>li>a:focus, .nav>li>a:active{
		text-decoration: none;
		background: none;
		color: #f6861f;
		-webkit-transition:all 0.3s ease-in-out;
   		-moz-transition:all 0.3s ease-in-out;
    	-o-transition:all 0.3s ease-in-out;
        transition:all 0.3s ease-in-out;
	}

	.navbar .navbar-nav>.active>a, .navbar .navbar-nav>.active>a:hover, .navbar .navbar-nav>.active>a:focus{
		text-decoration: none;
		background: none;
		color: #f6861f;
		-webkit-transition:all 0.3s ease-in-out;
   		-moz-transition:all 0.3s ease-in-out;
     	-o-transition:all 0.3s ease-in-out;
        transition:all 0.3s ease-in-out;
	}

	/* Logo Links Styling */

	.navbar-brand{
		background: url(../img/logo.png) no-repeat;
		display: block;
		height: 64px;
		width: 70px;
		margin-top: 12px;
		white-space: nowrap; 
	}

	.navbar-brand{
		text-indent: 150%;
		white-space: nowrap;
		overflow: hidden;
	}


	div#scroll-able {
	    height:10px;
	    overflow:scroll;
	    margin-bottom: 120px;
	    position: relative;
	}

	#nav.affix  {
	    position: fixed;
	    top: 0;
	    left:0;
	    width: 100%;
	    z-index:10;
	    display: inline-block;
	}
	

/* ----------------------------------------------------------
	Header
---------------------------------------------------------- */

	header{
		background: url(../img/bg.jpg) center center fixed;
		-webkit-background-size: cover;
	  	-moz-background-size: cover;
	  	-o-background-size: cover;
	  	background-size: cover;
		background-position: left top;
		text-align: center;
		max-width: 100%;
		max-height: 100%;
		position: relative;
	}

	.heroElements{
		position: relative;
		z-index: 2;
		display: table-cell;
		vertical-align: middle;
		margin-top: 0;
		margin-bottom: 0;
		float: none;
	}

/* ----------------------------------------------------------
	About Us
---------------------------------------------------------- */
	#aboutus{
		background-color: #fff;
		padding: 150px 0px 100px 0px; 
		color: #1b8ccc;
	}

	#aboutus h2{
		margin-bottom: 0px;
}

	#aboutImage .img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
  width: 100%;

	}

	/* PROMOTIONAL MERCHANDISE */
	
	#promotionalMerchandise{
		background-color:#1b8ccc;
		padding: 150px 0px 200px 0px;;
		color: #fff;

	}

	#promotionalMerchandise h2{
		margin-bottom: 0px;
	}

	/* BRANDED WEARABLES */
	
	#brandedWearables{
		background: url(../img/branded.jpg) no-repeat;
		-webkit-background-size: cover;
	  	-moz-background-size: cover;
	  	-o-background-size: cover; 
		background-position: 100% 100%;
		background-size: cover;
		background-color: #fff;
		padding: 150px 0px 200px 0px;
		color: #fff;

	}

	#brandedWearables h2{
		margin-bottom: 0px;
	}

	/* GRAPHIC PRINT MANAGMENT */
	
	#graphicPrintManagement{
		background: url(../img/graphic.jpg) no-repeat;
		-webkit-background-size: cover;
	  	-moz-background-size: cover;
	  	-o-background-size: cover; 
		background-position: 100% 100%;
		background-size: cover;
		padding: 150px 0px 200px 0px;
		color: #fff;

	}

	#graphicPrintManagement h2{
		margin-bottom: 0px;
	}

/* ----------------------------------------------------------
	Hire Us
---------------------------------------------------------- */

	#hireUs{
		background-color: #f6861f;
		padding: 150px 0px 200px 0px;
		color: #fff;
	}

	#hireUs h2{
		margin-bottom: 0px; 
	}

	#hireUs p{
		margin-bottom: 35px; 
	}

	.btnBig{
		background-color: #1a89c7;
		font-size: 30px;
		font-family: 'Fira Sans', Arial, sans-serif;
		font-weight: 500;
		line-height: 0px;
		padding: 25px 40px;
		color: #fff;
		-webkit-border-radius:0px;
   		-moz-border-radius:0px;
        border-radius:0px;
	}

	.btnBig:hover, .btnBig:focus{
		background-color: #479ece;
		color: #fff;
	}

/* ----------------------------------------------------------
	Social
---------------------------------------------------------- */
	
	#social{
		background-color: #fff;
		padding: 150px 0px 200px 0px;
		color: #1b8ccc;
	}

	#social h2{
		margin-bottom: 50px; 
	}

	#social ul{
		padding-left: 0px;
	}

	#social ul li{
		list-style: none;
		display: inline-block;
		margin-left: 30px; 
	}
	
	#social .fa{
		background-color: #f0831e;
		padding: 14px 0px;
		font-size: 40px;
		width: 70px;
		height: 70px; 
	}

	#social ul li a span i:hover{
		background-color: #f39c4b;
	}

	#social ul li a span i:active{
		box-shadow: inset 0px 5px 5px rgba(0,0,0,0.1);
	}


	#social ul li:first-child{
		margin-left: 0px;
	}


/* ----------------------------------------------------------
	Contact Us
---------------------------------------------------------- */
	
	#contact{
		background-color: #1b8ccc;
		padding: 100px 0px 150px 0px;
		color: #fff;
	}

	#contact h2{
		margin-bottom: 50px; 
	}

	#contact h6{
		margin-bottom: -10px; 
	}

	.email a{
		color: #fff;
		-webkit-transition:all 0.4s ease-in-out;
   		-moz-transition:all 0.4s ease-in-out;
     	-o-transition:all 0.4s ease-in-out;
        transition:all 0.4s ease-in-out;
	}

	.email a:hover{
		color: #f6861f;
		text-decoration: none;
		-webkit-transition:all 0.4s ease-in-out;
   		-moz-transition:all 0.4s ease-in-out;
     	-o-transition:all 0.4s ease-in-out;
        transition:all 0.4s ease-in-out;
	}

/* ----------------------------------------------------------
	Footer
---------------------------------------------------------- */
	footer{
		background-color: #2d2d2d;
		padding: 50px 0px 50px 0px;
		color: #fff;
	}
	.alyoop{
		background: url(../img/alyoop_icon.svg) no-repeat;
		display: inline-block;
		height: 36px;
		width: 36px;
		position: absolute;
		margin-left: 6px;
		margin-top: -1px; 

	}

	.alyoop{
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

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

		.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand{
			margin-left: 10px;
		}

		/* Header */

		h1{
		font-size: 60px;
		line-height: 70px;
		}

		h2{
			font-size: 32px;
			line-height: 38px;
		}

		header{
		background: url(../img/bg.jpg);
		-webkit-background-size: cover;
	  	-moz-background-size: cover;
	  	-o-background-size: cover;
	  	background-size:cover;
		color:#FFF;
		height:900px;
		width:100%;
		text-align: center;
		background-position: left top;
		}

		#contact, #aboutus,#promotionalMerchandise ,#brandedWearables ,#graphicPrintManagement, #hireUs, #social{
		padding: 70px 0px 120px 0px;
		}

		#logoHeader{
			width: 17%;
		}


		/* Footer */
		#contact, h6 + p{
			text-align: left;
		}


		.address p, .phone p{
			padding-bottom: 10px;
		}

		#contact section{
			margin-left:24px; 
		}

		.email p{
			margin-bottom: -20px;
		}

		footer span:last-child{
			margin-top: 0px;
		}

}


	@media (max-width: 767px){ /* Affix Navbar wasn't working, had to include the colalpse bar under 767px */
	
	/* Collapse Nav Bar*/

	button.navbar-toggle{
		margin-top: -12px;
		margin-right: 20px;
	}
	
	.navbar-toggle i{
		margin-top: -4px;
	}

	.navbar-toggle .fa{
		color: #1b8ccc;
		font-size: 30px;
	}

	#nav.affix .navbar-toggle{
		margin-top: 19px;
	}

	.navbar-default .navbar-toggle{
		border-color: transparent;
	}

	.navbar-collapse{
		background-color: rgba(255,255,255,0.85);;
		border-top: none;
		-webkit-box-shadow:none;
   		-moz-box-shadow:none;
        box-shadow:none;
	}

	.navbar-collapse ul{
		margin: 0px -15px;
	}

	.navbar-collapse li{
		padding: 12px 0;
		text-align: left;
	}

	.navbar-collapse li:hover{
		background-color: #f0831e;
		color: #fff;
	}

	.navbar-collapse li a:active{
		background-color: #f0831e;
		color: #fff;
	}

	.navbar .navbar-nav li a:hover{
		color: #fff;
 
	}

	.navbar-brand{
		margin-left: 20px;
	}

	#nav.affix a.navbar-brand{
		padding-bottom: none;
		margin-top: 12px;
		padding-top: 10px; 
	}

	#nav.affix{
		height: 78px;
	}

	/* Header*/

	h1{
		font-size: 40px;
		line-height: 47px;
	}

	h2{
		font-size: 32px;
		line-height: 38px;
	}

	header{
		background: url(../img/bg.jpg);
		-webkit-background-size: cover;
	  	-moz-background-size: cover;
	  	-o-background-size: cover;
	  	background-size:cover;
		color:#FFF;
		height:900px;
		width:100%;
		text-align: center;
		background-position: left top;
	}

	#contact, #aboutus,#promotionalMerchandise ,#brandedWearables ,#graphicPrintManagement, #hireUs, #social{
		padding: 70px 0px 120px 0px;
	}

	#logoHeader{
			width: 30%;
		}

	/* Hire Us */
	.btnBig{
		font-size: 20px;
		padding: 22px 38px;
	}

	/* Footer */
	#contact, h6 + p{
		text-align: left;
	}


	.address p, .phone p{
		padding-bottom: 40px;
	}

	#contact section{
		margin-left:24px; 
	}

	.email p{
		margin-bottom: -10px;
	}

	footer span:last-child{
		margin-top: 30px;
		margin-left: -13px; 
	}
}

@media (max-width: 420px){

	header{
		
	background-position: center center;
	}

	/* Contact */

	.address p, .phone p{
		padding-bottom: 10px;
	}

	.email p{
		margin-bottom: -40px;
	}

	#social .fa{
		background-color: #f0831e;
		padding: 14px 0px;
		font-size: 30px;
		width: 56px;
		height: 56px; 
	}
	
	#social ul li{
		margin-left: 10px;
	}


}

@media ( -webkit-min-device-pixel-ratio : 1.5 ),
( min-resolution : 144dpi ){
	.navbar-brand{
		background: url(../img/logox2.png) no-repeat;
		background-size: 50px 50px;
	}
}