/*
	Theme Name: HTML5 Blank Child
	Theme URI: http://html5blank.com
	Description: HTML5 WordPress Theme for my design portfolio
	Version: 1.0.0
	Author: Ross McVinnie (@rmcvinnie)
	Author URI: http://toddmotto.com
	Template: html5blank
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*-- orange #ff6f00 --*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { 
    line-height: 1; 
    font-size: 62.5%;
	font-family: 'Montserrat', sans-serif;
	color: #534f4f;
}

* {
	vertical-align: top;
}

.centre {
	text-align: center;
}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
img, img a { /*outline: none;*/ border: none; }

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

.alignnone {
	margin: 5px 0 20px 0;
}

/* clear */
.clear:before,
.clear:after {
    content:' ';
    display: table;
}

.clear:after {
    clear: both;
}

.clear {
    *zoom: 1;
}

main.category-page article .date {
	display: none;
}

article figcaption {
	display: none;
}

img {
	max-width: 100%;
	vertical-align: bottom;
	height: auto;
}

a,
a:hover {
	text-decoration: none;
}

/*a:focus {
	outline: 1px dashed #000;
}*/

p a {
	text-decoration: underline;
}

input:focus {
	border: 1px solid #04A4CC;
}

.top {
	position: absolute;
	width: 100%;
	z-index: 10;
	background-image: linear-gradient(-135deg, #920508 0%, #ff6f00 100%);
}

.home .top {
	background-image: none;
}

header {
	position: relative;
	background-image: linear-gradient(-135deg, #920508 0%, #ff6f00 100%);
	height: 85vh;
	display: flex;
	align-items: flex-end;
}

.video-bg {
	position: absolute;
	height: 100%;
	width: 100%;
	opacity: 0.2;
	overflow: hidden;
}

video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
}

.top-nav {
	height: 90px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

#nav label {
	cursor: pointer;
    width: 6em; 
    height: 6em;
    text-align: left;
    text-indent: -9999px;
    background: url(img/menu-trigger.svg) no-repeat rgba(255, 255, 255, 0.1);
    background-position: center;
    position: relative;
}

nav input {
	display: none;
}

/* first level */

.home nav > ul
{
    max-height: 0;
    overflow: hidden;
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    left: 15px;
    right: 0;
    width: calc(100% - 30px);
    transition: max-height 0.5s ease-out;
}

nav > ul
{
    max-height: 0;
    overflow: hidden;
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    left: 15px;
    right: 0;
    width: calc(100% - 30px);
    transition: max-height 0.5s ease-out;
}
    
.home nav input:checked + ul {
	max-height: 500px;
    background: rgba(0, 0, 0, 0.85);
    transition: max-height 0.5s ease-in;
    display: block;
}

nav input:checked + ul {
	max-height: 500px;
    background: rgba(0, 0, 0, 0.85);
    transition: max-height 0.5s ease-in;
    display: block;
}

#nav li {
    width: 100%;
    float: none;
}

#nav li  a {
	display: block;
    height: auto;
    padding: 1.125rem 0;
    font-size: 1.25rem;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

#nav li  a:hover {
	background: rgba(255, 255, 255, 0.2);
}


/* second level */

#nav li ul {
    position: static;
    padding-top: 0;
}

.top-logo {
	height: 100%;
	display: flex;
	align-items: center;
}



.margin-bottom-extra-double {
	margin-bottom: 100px;
}

.home .header-animation h1 {
	font-size: 2.3125rem;
	font-weight: 700;
	color: #fff;
}

header h2 {
	font-size: 1rem;
	color: #fff;
	margin-bottom: 3.5rem;
}

.header-animation {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}

.header-animation span {
	text-transform: uppercase;
	display: block;
	position: absolute;
	top: 0;
	left: 15px;
	max-width: 0;
	overflow: hidden;
}

.text1 {
	animation: textHideOne 16.1s infinite;
}

@keyframes textHideOne {
	0% {
		max-width: 0;
	}

	4% {
		max-width: 100%;
	}

	21% {
		max-width: 100%;
	}

	25% {
		max-width: 0;
	}
}

.text2 {
	animation: textHideTwo 16.1s infinite;
}

@keyframes textHideTwo {
	25% {
		max-width: 0;
	}

	29% {
		max-width: 100%;
	}

	46% {
		max-width: 100%;
	}

	50% {
		max-width: 0;
	}
}

.text3 {
	animation: textHideThree 16.1s infinite;
}

@keyframes textHideThree {
	50% {
		max-width: 0;
	}

	54% {
		max-width: 100%;
	}

	71% {
		max-width: 100%;
	}

	75% {
		max-width: 0;
	}
}

.text4 {
	animation: textHideFour 16.1s infinite;
}

@keyframes textHideFour {
	75% {
		max-width: 0;
	}

	79% {
		max-width: 100%;
	}

	96% {
		max-width: 100%;
	}

	100% {
		max-width: 0;
	}
}

main h2 {
	font-size: 2.3125rem;
	color: #f66f00;
	margin-bottom: 1rem;
}

p {
	font-size: 1rem;
	margin-bottom: 1rem;
	line-height: 1.5rem;
}

.contact-button {
	display: block;
	width: 160px;
	text-align: center;
	color: #fff;
	font-size: 1.3125rem;
	padding: 0.75rem 2.5rem;
	border: 1px solid #fff;
	text-decoration: none;
	transition: background 0.25s linear, color 0.25s linear;
}

.contact-button:hover {
	background: #fff;
	color: #ff6f00;
	text-decoration: none;
}

#tab-links {
	font-size: 0px;
}

#tab-links svg {
	width: 100%;
}

#tab-links h3 {
	font-size: 1.3125rem;
	margin-bottom: 0.5rem;
	color: #ff6f00;
}

#tab-links p {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

#tab-links li img,
#tab-links li svg {
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
    -moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#tab-links a:hover img,
#tab-links a:hover svg {
	-moz-transform: scale(1.4);
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
	fill: #000;
}

.tab-content {
	padding-top: 1rem;
}

.content-wrap {
	background: #fcfcfc;
	border-bottom: 1px solid #cfcfcf;
}

.homepage-examples li {
	margin-bottom: 2rem;
}


/* Category page styles */

.category-page section,
.single-post section,
.portfolio section,
.page section {
	padding-top: 90px;
}

.category-page h1,
.single-post h1,
.portfolio h1,
.page h1 {
	font-size: 2.3125rem;
	color: #ff6f00;
}

article h2 {
	font-size: 1.3125rem;
	line-height: 1.75rem;
	margin: 0 0 0.25rem;
}

article h2 a {
	color: #ff6f00;
	text-decoration: none;
}

article p {
	font-size: 1rem;
	line-height: 1.5rem;
}

.author {
	display: none;
}

.single img {
	width: 100%;
}

.wp-caption {
	border: none;
	max-width: 100%;
	padding: 0;
	background: none;
}

figure {
    display: flex;
	align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
}

figure img,
fig-caption img,
.wp-caption img {
	width: 100%;
    max-width: 100%;
}

.category-page figure img {
	margin-bottom: 0.75rem;
}

figcaption {
	display: flex;
	align-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    position: absolute;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    top: 0;
    left: 0;
    font-size: 1rem;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}

figure:hover figcaption {
    opacity: 1;
}

figcaption h3,
figcaption p {
    width: 100%;
	display: block;
}

figcaption h3 {
	font-size: 1.3125rem;
	line-height: 1.75rem;
	color: #ff6f00;
	margin-bottom: 1rem;
}

figcaption p {
	font-size: 1rem;
	margin-bottom: 0;
}

figcaption div {
    width: 100%;
}

.pf-list {
	font-size: 0px;
	margin-bottom: 2rem;
}

.pf-list li {
	font-size: 1.3125rem;
	color: #ff6f00;
	padding: 0.5rem 0 1rem 3rem;
	line-height: 2.5rem;
}

.pf-list .print {
	background: url(img/print.svg) no-repeat 0 7px;
	background-size: 2.5rem;
}

.pf-list .web {
	background: url(img/web.svg) no-repeat 0 7px;
	background-size: 2.5rem;
}

.pf-list .logos {
	background: url(img/logos.svg) no-repeat 0 7px;
	background-size: 2.5rem;
}

.pf-list .illustration {
	background: url(img/illustration.svg) no-repeat 0 7px;
	background-size: 2.5rem;
}

.pf-contact {
	border: 1px solid #ff6f00;
	color: #ff6f00;
	padding: 0.5rem 2rem;
	text-decoration: none;
	transition: all 0.25s linear;
}

.pf-contact:hover {
	background: #ff6f00;
	color: #fff;
}

article ul {
	font-size: 1.125rem;
	line-height: 1.5rem;
}

article li {
	background: url(img/bullet-circle.svg) no-repeat 0 0.52rem;
	margin-bottom: 1.5rem;
	padding-left: 1rem;
}

/* Category page style end*/

.divup-wrap .first {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
}

.divup-wrap .div-2 p {
	width: 100%;
}

.divup-wrap .first img {
	margin: 0 0 2rem 0;
	width: 100%;
}


/*------------------------------------*\
    FORM
\*------------------------------------*/

form {
	padding-bottom: 1rem;
}


/*Remove webkit input styles*/
input[type=text],
input[type=email],
textarea {   
	/* Remove First */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;   
}

form label {
	width: 100%;
}

input,
textarea {
	border-radius: 0;
	padding: 0.5rem;
	border: 1px solid #ccc;
}

textarea {
	resize: vertical;
	margin-bottom: 1rem;
}

input,
textarea {
	width: 100%;
}

input[type="submit"] {
	width: 100%;
	color: #ff6f00;
	background: none;
	border: 1px solid #ff6f00;
	padding: 0.75rem 0.5rem;
	transition: all 0.25s linear;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
	color: #fff;
	background: #ff6f00;
	border: 1px solid #ff6f00;
}


/*------------------------------------*\
    FOOTER
\*------------------------------------*/

footer {
	background-image: linear-gradient(-135deg, #333333 0%, #656565 100%);
	color: #fff;
}

footer h3 {
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
	color: #ccc;
	padding-bottom: 1rem;
	border-bottom: 1px solid #808080;
}

footer li {
	line-height: 1.5rem;
}

footer a {
	color: #fff;
	font-size: 0.875rem;
	transition: color .25s linear;
}

footer a:hover {
	color: #ff6f00;
}

#menu-footer-contact li {
	line-height: 2rem;
}

#menu-footer-contact .facebook a {
	background: url(img/footer-icons.svg) no-repeat 0 -47px;
	padding-left: 2rem;
}

#menu-footer-contact .twitter a {
	background: url(img/footer-icons.svg) no-repeat 0 -97px;
	padding-left: 2rem;
}

#menu-footer-contact .linkedin a {
	background: url(img/footer-icons.svg) no-repeat 0 -147px;
	padding-left: 2rem;
}

footer li.facebook a,
footer li.twitter a,
footer li.linkedin a {
	padding: 0.5rem 0;
}

.copyright {
	font-size: 0.75rem;
}


/*-------- media queries --------*/


/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	.home .header-animation h1 {
		font-size: 4.1875rem;
	}

	.home header h2 {
		font-size: 1.3125rem;
	}

	/*nav li .sub-menu li a,
	nav ul li:last-child a {
		padding: 1.5rem 0;
	}*/
	
	.alignnone {
		margin: 5px 0 20px 0;
	}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.home .header-animation h1 {
		font-size: 5.5625rem;
	}

	.home header h2 {
		font-size: 1.75rem;
	}

	#nav {
	    height: 100%;
	    display: inline-flex;
	    align-items: center;
	}

	nav label {
	    display: none;
	}

	#nav li {
	    position: relative;
	}

	#nav li a {
	    color: #fff;
	    display: block;
	    font-size: 0.875rem;
	}

	#nav li a:hover {
		background: transparent;
	}

	#nav li a:active {
	}

	/* first level */

	#nav > ul{
	    display: inline;
	    position: static;
	    width: auto;
	    overflow: visible;
	}

	#nav > ul > li {
	    height: 100%;
	    display: inline-block;
	    padding: 0 1.5rem;
	    width: auto;
	    font-size: 0.875rem;
	}

	#nav > ul > li > a {
	    height: 100%;
	    text-align: center;
	    padding: 0.5rem 0;
	    border-bottom: 1px solid transparent;
	    transition: border 0.25s linear, color 0.25s linear;
	}

	#nav > ul > li > a:hover,
	#nav > ul > li > a:focus {
		border-bottom:  1px solid #fff;
	}

	#nav > ul > li:hover > a,
	#nav > ul:not( :hover ) > li.active > a {
	    text-decoration: none;
	}


	/* second level */

	#nav li ul {
	    background-color: rgba(255, 255, 255, 0);
	    max-height: 0;
	    position: absolute;
	    left: 0;
	    right: 0;
	    top: 30px;
	    border-top: 1px solid transparent;
	    transition: max-height 0.25s linear;
	    overflow: hidden;
	}

	#nav li:hover ul,
	#nav ul li:focus-within > ul {
	    border-top: 1px solid #fff;
	    max-height: 180px;
	    transition: max-height 0.25s ease-in;
	}

	.home #nav li ul li {
		margin-bottom: 1px;
		background: rgba(255, 255, 255, 0.1);
	}
	
	#nav li ul li {
		margin-bottom: 1px;
		background: rgba(246, 111, 0, 0.85);
	}

	#nav li ul a {
	    padding: 0.75em; /* 15 (20) */
	}

	#nav li ul li a:hover,
	#nav li ul li a:focus,
	#nav li ul:not( :hover ) li.active a {
	    background-color: rgba(255, 255, 255, 0.2);
	    text-decoration: none;
	}
	
	#tab-links li img,
	#tab-links li svg {
		-moz-transform: scale(1.8);
		-webkit-transform: scale(1.8);
		transform: scale(1.8);
		-moz-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	#tab-links a:hover img,
	#tab-links a:hover svg {
		-moz-transform: scale(2);
		-webkit-transform: scale(2);
		transform: scale(2);
		fill: #000;
	}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	
	#tab-links li img,
	#tab-links li svg {
		-moz-transform: scale(1.2);
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
		-moz-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	#tab-links a:hover img,
	#tab-links a:hover svg {
		-moz-transform: scale(1.4);
		-webkit-transform: scale(1.4);
		transform: scale(1.4);
		fill: #000;
	}
	
	article.page p,
	article.post p {
		width: 75%;
	}

	article.has-post-thumbnail p {
		width: 100%;
	}
	
	.divup-wrap .first {
		flex: 0 0 50%;
		max-width: 50%;
		padding-right: 15px;
		padding-left: 15px;
	}
	
	/*------------------------------------*\
    	FORM
	\*------------------------------------*/

	input,
	textarea {
		width: 64.2857%;
	}

	input[type="submit"] {
		width: 50%;
	}

	div.wpcf7-response-output {
		font-size: 1rem;
		margin: 0;
		padding: 0.75rem 0.5rem 0.75rem 2rem;
	}

	.content-wrap div.wpcf7-mail-sent-ok {
		background: url(img/success-tick.svg) no-repeat;
		background-position: 1% 50%;
	}

	.content-wrap div .wpcf7-validation-errors {
		background: url(img/validation-error.svg) no-repeat;
		border-color: #f00;
		background-position: 1% 50%;
	}
	
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 

	.tab-content {
		padding-top: 0.25rem;
	}

}