/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Passion+One'); @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i'); 

/* ==================== [ HEADER STYLES ] ==================== */

.header {
    padding: 20px 0;
    text-align: center;
}

.header .logo {
    display: inline-block;
    font-size: 0;
    margin: 0 auto;
}

.header .logo img {
    display: inline-block;
    margin: 0 10px 0 0;
    vertical-align: top;
}

.header .logo span {
    display: block;
    text-transform: uppercase;
}

.header .logo .text {
    display: inline-block;
    padding: 20px 0 0;
}

.header .logo .first {
    font: 700 60px/40px "Passion One", sans-serif;
}

.header .logo .second {
    font: 700 25px/30px "Passion One", sans-serif;
}

.header .logo a {
    color: #333333;
}

.header .phone {
    font: 400 20px/30px "Open Sans", sans-serif;
    margin: 20px 0;
    text-transform: uppercase;
}

.header .support {
    font-size: 0;
}

.header .support input {
    display: inline-block;
    width: 150px;
}

.header .support input[type="submit"] {
    background: #86d486;
    font-weight: 700;
    margin: 0 0 0 10px;
    width: 170px;
}

@media (min-width: 768px) {
    .header {
        margin: 0 !important;
        text-align: left;
    }

    .phone, .support {
        text-align: right;
    }

    .phone {
        font: 400 22px/30px "Open Sans", sans-serif !important;
        margin: 15px 0 5px !important;
    }
}

/* ==================== [ HEADER STYLES ] ==================== */

.navigation ul {
	font-size: 0;
	list-style: none;
	margin: 0;
	text-align: center;
}

.navigation li {
	border-bottom: 1px solid #ffffff;
	margin: 0;
	padding: 0;
}

.navigation a {
	color: #ffffff;
	display: block;
	font: 700 18px/50px "Open Sans", sans-serif !important;
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	
	.navigation ul {
		display: flex;
		justify-content: space-between;
	}
	
	.navigation li {
		border: 0 none;
		display: inline-block;
	}
	
	.navigation a {
		font: 700 16px/50px "Open Sans", sans-serif !important;
	}
	
}

/* ==================== [ BANNER STYLES ] ==================== */

.banner {
    background: url('../images/information-technology-services-perth.jpg') no-repeat center;
    background-size: cover;
    display: flex;
    text-align: center;
    align-items: center;
}

@media (min-width: 1024px) {
	
	.inner .banner {
		text-align: left;
	}
}

.banner h1 {
	color: #ffffff;
	font: 700 32px/80px "Open Sans", sans-serif;
	text-shadow: 2px 2px 2px #000000;
}

/* ==================== [ HOMEBOXES STYLES ] ==================== */

.homeBoxes {
    margin: 40px 0 20px;
}

.row.homeBoxes {
	margin: 50px auto 40px;
}

.homeBoxes .columns a {
    color: #ffffff;
    display: block;
    font-size: 0;
    margin: 0 0 20px;
}

.homeBoxes .columns .text {
    padding: 20px;
}

.homeBoxes .columns h3 {
    font: 700 20px/30px "Open Sans", sans-serif;
    margin-top: 0;
}

.homeBoxes .columns p {
    font: 400 16px/26px "Open Sans", sans-serif;
}

.homeBoxes .columns .cta {
    font-weight: 700;
    margin-bottom: 0;
}

.homeBoxes .columns:nth-child(1) a {
    background: #591f61;
}

.homeBoxes .columns:nth-child(2) a {
    background: #c29970;
}

.homeBoxes .columns:nth-child(3) a {
    background: #b36666;
}

.homeBoxes .columns:nth-child(4) a {
    background: #647bff;
}

.homeBoxes .columns a:hover {
    opacity: 0.9;
}

/* ==================== [ CONTENT STYLES ] ==================== */

.content {
	padding: 40px 0;
}

.featured {
	background: #cca6ff;
}

.form {
	text-align: center;
}

.content h1 {
	color: #591f61;
    font: 700 25px/35px "Open Sans", sans-serif;
}

.content h2 {
	color: #666666;
    font: 700 21px/31px "Open Sans", sans-serif;
}

.content h3 {
    font: 700 18px/28px "Open Sans", sans-serif;
	color: #444444;
}

.content p {
    font: 400 16px/26px "Open Sans", sans-serif;
}

.content a {
	color: #591f61;
	text-decoration: underline;
}

.content .lead {
	color: #591f61;
	font: 400 21px/31px "Open Sans", sans-serif;
}

.button,
.content a.button {
	background: #591f61;
	color: #ffffff;
	font: 700 16px/50px "Open Sans", sans-serif;
	height: 50px;
	margin: 15px 20px 15px 0;
	padding: 0 15px;
	text-decoration: none;
	text-transform:  uppercase;
}

.button:hover {
	opacity: 0.9;
}

.content input, .content textarea {
	border-radius: 0px !important;
}

.content textarea {
	height: 100px
}

.g-recaptcha:hover {
	opacity: 0.9;
}

/* ==================== [ MISC STYLES ] ==================== */

.colour-strip {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fbee2a+0,e89524+20,ee2f25+40,8551a0+60,577bbd+80,51b848+100 */
    background: #591f61;
    /* Old browsers */
    background: -moz-linear-gradient(left, #591f61 0%, #88d488 20%, #c29970 40%, #b36666 60%, #647bff 80%, #7c4388 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #591f61 0%,#88d488 20%,#c29970 40%,#b36666 60%,#647bff 80%,#7c4388 100%);
    /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to right, #591f61 0%,#88d488 20%,#c29970 40%,#b36666 60%,#647bff 80%,#7c4388 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#591f61', endColorstr='#647bff',GradientType=1 );
    /* IE6-9 */
    height: 5px;
}

.colour-strip.navigation {
	height: auto;
}

/* ==================== [ FOOTER STYLES ] ==================== */

.footer {
	background: #333333;
	color: #ffffff;
	font: 400 14px/24px "Open Sans", sans-serif;
	padding: 20px 0;
	text-align: center;
}

.footer .columns {
	margin: 0 0 20px;
}

.footer .columns:last-child {
	margin: 0;
}

.footer a {
	color: #ffffff;
}

@media (min-width: 641px) {
	
	.footer {
		text-align: left;
	}
	
	.footer .columns:nth-child(2), .footer .columns:nth-child(4) {
		text-align: right;
	}
	
	.footer .columns:nth-child(3), .footer .columns:nth-child(4) {
		margin: 0;
	}
}

@media (min-width: 1025px) {
	
	.footer {
		padding: 60px 0 45px;
	}
	
	.footer .columns {
		margin: 0;
		text-align: left !important;
	}
	
	.footer .columns:last-child {
		text-align: right !important;
	}
}