/*!
 Theme Name:	ASI APHO
 Version:		1.0
 Author:		James Peek (james@peek.ws)
 Author URI:	https://rowdydigital.com.au/
*/

//@import "../bower_components/bootstrap/less/bootstrap.less";
//@import (inline) "../bower_components/tiny-slider/dist/tiny-slider.css";

@import "less/bootstrap/bootstrap.less";
@import "less/tiny-slider.less";


@font-face {
	font-family: "icomoon";
	src:
		url("fonts/icomoon.ttf?4g2q765") format("truetype"),
		url("fonts/icomoon.woff?4g2q765") format("woff"),
		url("fonts/icomoon.svg?4g2q765#icomoon") format("svg");
	font-weight: normal;l
	font-style: normal;
}

@pink: #e72d90;
@navy: #040d50;
@yellow: #ffc60a;
@grey: #e6e6e7;
@orange: #f58220;

body {
	color: @navy;
	font-family: "proxima-nova", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	background-color: #f4f4f4;

	a {
		color: @orange;

		&:hover {
			color: @navy;
		}

	}
}


.btn {
	border-radius: 0;
	border-width: 2px;

	&.btn-default {
		color: @navy;
		border-color: @pink;
		background-color: #fff;
		font-weight: 700;
		font-size: 13px;
		text-transform: uppercase;
		background-image: none;

		&:hover {
			color: @navy;
			border-color: @yellow;
			background-color: #fff;
		}

		padding-right: 25px;
		position: relative;

		&:after {
			.icon-this();
			position: absolute;
			content: "\e901";
			top: 50%;
			right: 5px;
			margin-top: -7px;
			color: @pink;
		}

		&:hover:after {
			color: @yellow;
		}
	}
}

.lead {
	font-weight: 700;
}

body > .container {
	padding: 0;
}

header {
	background-color: #fff;
	position: relative;

	.bg {
		background-image: url(images/bg-header-left.png), url(images/bg-header-right.png);
		background-repeat: no-repeat;
		background-position: left center, right center;
		background-size: auto 100%;

		@media (max-width: @screen-sm-max) {
			background-image: url(images/bg-header-left.png);
		}
	}

	.logo-apho {
		.hide-text();

		display: block;
		width: 230px;
		height: 66px;
		margin: 20px 0 20px 100px;

		background: url(images/logo-apho.png) no-repeat center center / contain;
		
		@media (max-width: @screen-xs-max) {
		width: 190px;
		margin: 20px 0 20px 85px;
				}
			}
	

	form {
		position: absolute;
		right: 50px;
		top: 20px;

		.help {
			font-size: 12px;
			text-align: right;

			a {
				color: #aaa;
			}

			margin-bottom: 2px;
		}

		label {
			margin-right: 10px;
		}

		.form-control {
			border-radius: 0;
			border-color: @pink;
		}

		.btn-primary, .btn-primary:hover {
			border: 1px @pink solid;
			background-color: @pink;
		}

		.input-group {
			margin-top: -1px;
		}
	}
	
	nav {
		background-color: @navy;
		text-align: center;

		.container {
			.navbar-toggle {
				.visible-xs();
				.visible-sm();
				margin-right: 0;

				.icon-bar {
					background-color: #fff;
				}
			}

			display: flex;
			flex-direction: column;
			align-items: center;

			ul {

				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
				//justify-content: center;

				li {
					position: relative;

					a {
						display: block;
						color: #fff;
						font-size: 15px;
						text-decoration: none;
						position: relative;

						&.home {
							color: @yellow;
						}

						padding: 15px 20px;
						border-right: 1px lighten(@navy, 20%) solid;
					}

					&.current_page_item a, &.current_page_ancestor a, a:hover {
						color: #fff;
						background-color: lighten(@navy, 10%);
						text-decoration: none;
					}

					&.social {
						align-self: center;

						a {
							padding: 5px;
							margin-left: 10px;
							width: 30px;
							height: 30px;
							border-right: none;
						}
					}

					ul {
						display: none;
						position: absolute;
						background-color: @navy;
						z-index: 1;
						text-align: center;
						min-width: 200px;
						left: -50px;
						
						li {
							a {
								padding: 5px 10px;
								border: none;
							}
						}
					}

					&:hover {
						ul {
							display: block;
						}
					}
				}

				@media (max-width: @screen-sm-max) {
					display: block;

					li {
						display: block;

						a {
							border-right: none;
						}
					}

					.home, .social {
						display: none;
					}
				}
			}

			@media (max-width: @screen-sm-max) {
				display: block;

				> ul {
					display: none;
	
					ul {
						display: block !important;
						background-color: #e72d90 !important;
						position: unset !important;
					}
				}
			}
		}
	}
}

section.slider {
	//background: url(images/bg-slide1.jpg) no-repeat center bottom / cover;
	
	.slides {
		height: 500px;

		.slide {
			height: 100%;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			position: relative;

			&:after {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				content: '';
				background: url(images/overlay.png) no-repeat top left / cover;
			}

			a { 
				text-decoration: none;
				}
		}

		.container {
			height: 100%;
			position: relative;
			z-index: 1;

			.row {
				display: flex;
				height: 100%;

				> div {
					align-self: center;
				}
			}

			color: #fff;
			font-size: 25px;
			font-weight: 700;
			line-height: 1;

			.lg {
				font-size: 38px;
				&:hover {
					text-decoration: none!important;
				}
			}

			.xlg {
				font-size: 90px;
                width: 600px;
				&:hover {
					text-decoration: none!important;
				}
			}

            @media (min-width: @screen-md-min) {
				.lg {
					width: 400px;
				}
            }

			@media (max-width: @screen-xs-max) {
				.lg {
					font-size: 28px;
				}

				.xlg {
					font-size: 42px;
					width: unset;
				}
			}
		}
	}
}

section.title {
	height: 300px;

	background-image: url(images/bg-slide1.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;

	display: flex;
	justify-content: center;

	h1 {
		font-size: 80px;
		margin: 0;
		color: #fff;
		line-height: 1;
		align-self: center;
		margin-bottom: 30px;
	}

	@media (max-width: @screen-xs-max) {
		height: 200px;

		h1 {
			font-size: 40px;
		}
	}
}

section.social {
	background-color: @navy;
	padding: 40px 0;

	.title {
		font-size: 16px;
		border-left: 2px solid @yellow;
		padding-left: 5px;
		color: @yellow;
		line-height: 1.1;
	}
}

section.banner {
	font-size: 22px;
	text-transform: uppercase;
	text-align: center;
	color: @pink;
	background: @navy url(images/bg-banner.jpg) no-repeat center center / cover;
	padding: 30px 0;

	.title {
		&:before {
			display: inline-block;
			content: "";
			width: 30px;
			height: 30px;
			background: url(images/clock.svg) no-repeat center center / cover;
			vertical-align: text-bottom;
			margin-right: 10px;
		}
	}

	.counter {
		margin-left: 10px;
		color: #fff;
	}
}

main {
	background-color: #fff;

	.content {
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 70px;
		padding-right: 70px;

		h1 {
			color: @pink;
			font-size: 60px;
			font-weight: 700;
			line-height: .9;
			padding-bottom: 30px;
		@media (max-width: @screen-xs-max) {
		font-size: 50px;
		padding-bottom: 10px;
		}
		}

		h2 {
			color: @navy;
			font-size: 24px;
		}

		h3 {
			color: @orange;
			text-transform: uppercase;
			font-size: 18px;
			font-weight: 700;
		}

		h4 {
			font-weight: 700;
		}

		ul {
			&.social {
				align-self: center;
				list-style: none;
				display: flex;
				padding: 0;

				a {
					padding: 5px;
					width: 30px;
					height: 30px;
					border-right: none;
				}
			}
		}	

		.content-image {
			width: 100%;
			height: auto;
			flex-shrink: 0;
			-ms-interpolation-mode: bicubic;
		}

		.content-sponsor-image {
			width: 50%;
			height: auto;
			flex-shrink: 0;
			-ms-interpolation-mode: bicubic;
		}

		.home & {
			padding-top: 100px;
			padding-bottom: 200px;

			@media (max-width: @screen-sm-max) {
				padding-top: 40px;
				padding-bottom: 40px;
			}

			.row {
				position: relative;
				@media (min-width: @screen-sm-min) {
					display: flex;
					align-items: center;
				}
			}

			.btn {
				margin-top: 20px;
			}

			img {
				display: block;
				margin: 0 auto;
				width: 80%;
				height: auto;
				border-radius: 10px;

				box-shadow: 5px 5px 20px rgba(0,0,0,.4);
			}

			.quote {
				position: absolute;
				bottom: -100px;
				left: 0;
				width: 50%;
				padding: 30px;
				color: #fff;
				font-size: 16px;
				text-transform: uppercase;
				background: fade(@navy, 90%);
				border-top-left-radius: 30px;
				border-bottom-right-radius: 30px;

				box-shadow: 5px 5px 20px rgba(0,0,0,.2);

				&:after {
					position: absolute;
					top: -80px;
					left: -40px;
					font-size: 300px;
					color: @pink;
					content: "“";
					line-height: 1;
				}

				@media (max-width: @screen-md-max) {
					bottom: -100px;
					width: 80%;
				}

				@media (max-width: @screen-sm-max) {
					display: none;
				}
			}
		}
	}

	.home & {
		background-image: url(images/bg-home-content-top.png), url(images/bg-home-content-bottom.jpg);
		background-repeat: no-repeat;
		background-position: left top, right bottom;
		background-size: 30% auto, 100% auto;

		@media (max-width: @screen-sm-max) {
			background-size: 60% auto, 100% auto;
		}
	}
}

section.updates {
	padding: 50px 60px;
	background: @grey url(images/lines2.png) no-repeat top right / contain;
	background-size: 50% auto;

	@media (max-width: @screen-xs-max) {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	h2 {
		color: @pink;
		font-size: 60px;
	    font-weight: 700;
	    line-height: .9;
	    padding-bottom: 60px;
	    @media (max-width: @screen-xs-max) {
		font-size: 50px;
		padding-bottom: 20px;
	}
	}

	article {
		margin-bottom: 30px;

		.row {
			@media (min-width: @screen-sm-min) {
				display: flex;

				& > div {
					&:nth-child(2), &:last-child {
						border-bottom: 1px solid #fff;
						padding-left: 0;
						padding-bottom: 10px;
					}

					&:last-child {
						display: flex;
						flex-direction: column;
						justify-content: center;

						.btn {
							font-size: 80%;
						}
					}
				}
			}
		}

		&:last-child {
			margin-bottom: 0;

			.row {
				& > div {
					&:nth-child(2), &:last-child {
						border-bottom: 0;
						padding-bottom: 0px;
					}
				}
			}
		}

		.date {
			align-self: center;
			color: @pink;
			font-weight: 700;
			text-align: center;
			display: inline-block;
			
			@media (max-width: @screen-xs-max) {
		padding-bottom: 20px;
	}

			> div {
				background-color: #fff;
				padding: 0 10px;
				line-height: 1;
				text-transform: uppercase;
			}

			.month {
				padding-top: 3px;
				font-size: 30px;
			}

			.dom {
				padding-bottom: 3px;
				font-size: 60px;
			}

			.day {
				margin-top: 3px;
				font-size: 18px;
				padding-top: 3px;
				padding-bottom: 3px;
			}
		}

		h3 {
			margin-top: 0;
			font-weight: 700;
		}
	}
}


@media (max-width: @screen-xs-max) {
  #twitterbr { display: block; }  /* show it on small screens */
}

@media (min-width: @screen-sm-min) {
  #twitterbr { display: none; }   /* hide it elsewhere */
}

@media (max-width: @screen-xs-max) {
  #countdown { display: block; padding: 5px; }  /* show it on small screens */
}

@media (min-width: @screen-sm-min) {
  #countdown { display: none; }   /* hide it elsewhere */
}

@media (max-width: @screen-xs-max) {
  #footerpad { display: block; padding: 6px; }  /* show it on small screens */
}

@media (min-width: @screen-sm-min) {
  #footerpad { display: none; }   /* hide it elsewhere */
}

@media (max-width: @screen-xs-max) {
  #footerpad2 { display: block; padding: 10px; }  /* show it on small screens */
}

@media (min-width: @screen-sm-min) {
  #footerpad2 { display: none; }   /* hide it elsewhere */
}

section.about {
	color: #fff;
	background-color: @navy;
	overflow: hidden;

	h2 {
		font-weight: 700;
		font-size: 50px;
	}

	> .row {
		@media (min-width: @screen-md-min) {
			display: flex;
			margin: 0;

			> div {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}

	.slides {
		.slide {
			min-height: 400px;
			height: 100%;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			overflow: hidden;

			position: relative;

			.desc {
				background: url(images/bg-about-image.png) no-repeat top left / contain;
				position: absolute;
				top: 0;
				left: 0;
				width: 400px;
				height: 120px;
				padding: 20px 30px 50px;

				@media (max-width: @screen-sm-max) {
					width: 100%;
				}

				span {
					display: inline-block;
					width: 40%;

					@media (max-width: @screen-sm-max) {
						width: 80%;
					}
				}
			}
		}
	}

	.content {
		background: url(images/lines.png) no-repeat top right / contain;
		background-size: auto 30%;
		padding-top: 40px;
		padding-bottom: 40px;

		h2 {
			color: @yellow;
		}

		.btn {
			margin-top: 20px;
			color: #fff;
			background-color: transparent;
		}
	}
}

section.sponsors {
	padding: 5px 0;
	background-color: #fff;
	border-top: 2px solid @grey;

	.container-fluid {
		@media (min-width: @screen-md-min) {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-evenly;
		}

		> div {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: left;
			flex-wrap: wrap;

			@media (min-width: @screen-md-min) {
				justify-content: space-around;
			}

			&:last-child {
				flex: 2;
			}
		}

		.title {
			color: @navy;
			font-size: 18px;
			border-left: 1px solid @navy;
			padding-left: 5px; 
			margin-left: 10px;
			line-height: 1;
		}

		img {
			width: auto;
			height: 60px;
			margin: 10px 0 10px 15px;
		}

		.home & {
			border-top: 0;
		}
	}
}

section.sitemap {
	background: @grey url(images/bg-sitemap.png) no-repeat top left / 300px auto;
	padding: 40px 0;

	.row {
		@media (min-width: @screen-sm-min) {
			display: flex;
		}
	}

	h4 {
		font-weight: 700;
	}
	.logo-apho {
		.hide-text();

		display: block;
		margin: 0 25px;
		min-height: 100px;
		height: 100%;
		max-width: 300px;

		background: url(images/logo-apho.png) no-repeat center center / contain;
	}

	nav {
		display: flex;
		flex-wrap: wrap;

		a {
			flex: 50%;
			color: @pink;
			padding: 5px 0;
			border-bottom: 1px solid #fff;
			text-decoration: none;

			&:last-child {
				flex-grow: 0;
			}

			&:hover {
				color: @orange;
			}
		}
	}
}

footer {
	color: #fff;
	background-color: @navy;
	padding: 15px 0;

	a {
		color: #fff;
		text-decoration: none;
		margin-left: 15px;

		&.rowdy {
			opacity: .5;
			margin-left: 0;
		}

		&:hover {
			color: @yellow;
			text-decoration: none;
		}
	}
}

.posts {

	img {
		width: 100%;
		height: auto;
	}
	
	h1 {@media (max-width: @screen-xs-max) {
		font-size: 30px !important;
		}
	}

	.sidebar {
	    @media (max-width: @screen-sm-max) {
			padding-bottom: 24px;}
		h2 {
		    background: @navy;
		    padding: 20px;
		    color: #fff;
		    margin-top: 0;
		    margin-bottom: 5px;
		}

		li {
			list-style: none;
			background: @grey;
		    padding: 20px;
		    margin-bottom: 5px;
		
			a {
				color: @navy;

				&:hover {
					color: @pink;
					text-decoration: none;
				}

			}
		}
	}
}

.single-post {
	img {
		width: 100%;
		height: auto;
	}
	h1 {@media (max-width: @screen-xs-max) {
		font-size: 30px !important;
		}
	}
}

//Fixed a bug where the slider wasn't displaying pixel perfectly in Edge.
.tns-item { @media (min-width: @screen-sm-min) {
    width: unset !important; 
}
}

.tns-outer {
	position: relative;

	.tns-nav {
		position: absolute;
		bottom: 15px;
		left: 0;
		right: 0;
		z-index: 1;
		text-align: center;

		> [aria-controls] {
			width: 15px;
			height: 15px;
			padding: 0;
			margin: 0 5px;
			border-radius: 50%;
			background: transparent;
			border: 1px solid #fff;
			outline: none;
		}

		> [aria-selected="true"] {
			background: @yellow;
		}
	}

	> button {
		display: none;
	}
}

[class^="icon-"], [class*=" icon-"], .icon-this {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
	content: "\eeef";
}
.icon-instagram:before {
	content: "\e900";
}
.icon-twitter:before {
	content: "\eef5";
}
.icon-youtube:before {
	content: "\eefc";
}
.icon-home:before {
	content: "\e923";
}
.icon-envelop:before {
  content: "\e945";
}
.icon-phone:before {
  content: "\e942";
}
.icon-arrow:before {
  content: "\e901";
}

/*pointless things because they want them*/

/* CONTACT US PAGE */
		.page-id-21{
			.social {

				.icon-facebook, .icon-twitter, .icon-instagram, .icon-youtube {
					color: @pink;
					margin: -8px;
					font-size: 20px;

					&:hover {
						color: @orange;
					}
				}

				a {
				color: @pink;

			
					&:hover {
						color: @orange;
						text-decoration: none;
					}
				}
			}

			h2 {
				color: @pink!important;
			}

		}

		.wpcf7-textarea {
			-webkit-appearance: textfield;
		}

		input.wpcf7-form-control.wpcf7-text, textarea.wpcf7-form-control.wpcf7-textarea {
			    background-color: @grey;
			    border: none;
			    padding: 10px;
			    max-width: 100%;
		}

		.wpcf7-submit {
			.btn();
			.btn-default();
			
			padding-right: 12px;
		}

		.wpcf7-response-output {
		    margin: 0!important;
		}


.supporter-logos {
	.row {
		display: flex;

		> div {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
}

#mc_embed_signup {
	input, button {
		border-radius: 0 !important;
	}
}

.fts-tweeter-wrap {
	vertical-align: top;
}

.fts-twitter-quoted-image .fts-twitter-quoted-text {
	color: #fff;
}