/*
	Theme Name: Prestons of Potto
	Theme URI: http://www.peterhintondesign.co.uk
	Description: Tailored WordPress Theme
	Version: 1.0
	Author: Peter Hinton (@peterhinton)
	Author URI: http://www.peterhintondesign.co.uk
	Tags: HTML5, CSS3
*/

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, em, img, ins, kbd, q, s, samp,
small, strike, strong, 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;
	list-style: none;
}

body{margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 18px; line-height: 30px; color: #1a1a1a;}
h1{font-size: 50px; line-height: 52px; padding-bottom: 12px; font-family: 'BenchNine', sans-serif; text-transform: uppercase;}
h2{font-size: 40px; line-height: 40px; padding-bottom: 10px; font-family: 'BenchNine', sans-serif; text-transform: uppercase; color: #bb141a;}
h3{font-size: 24px; line-height: normal; padding-bottom: 12px;}
h4{font-size: 28px; line-height: normal; padding-bottom: 12px; font-family: 'BenchNine', sans-serif; text-transform: uppercase;}

p{padding: 10px 0;}
a{text-decoration: none; color: #bb141a; transition: all 0.3s ease-out 0s;}
a:hover{text-decoration: none;}
em, i{font-style: italic;}
b, strong{font-weight: 700;}
ul{margin: 0 auto 10px auto; padding: 0;}
ul li{list-style: disc; margin: 0 0 16px 16px; list-style-position: inside; list-style: circle;}
ol{margin: 10px auto; padding: 0 0 0 15px;}
ol li{list-style: decimal; margin: 0 0 16px 16px; list-style-position: inside;}
ol ol li{list-style-type: lower-roman;}
img{display: inline-block; max-width: 100%;}
iframe{max-width: 100%; width: 100%;}
blockquote{font-weight: 700; border-left: 2px solid #009dca; padding: 30px 0 0 20px; margin: 0 auto 30px auto; font-style: italic;}
hr{display: block; width: 100%; height: 1px; margin: 20px auto; overflow: hidden; background: rgba(0,0,0,0.1); border: 0;}

input, select, button{font-size: 16px; font-family: 'Roboto', sans-serif; display: inline-block; width: 100%; padding: 14px 15px; margin: 3px auto; box-sizing: border-box; border-radius: 0px; border-bottom-left-radius: 0; max-width: none; border: none;}
textarea{font-size: 16px; font-family: 'Roboto', sans-serif; display: inline-block; width: 100%; height: 110px; box-sizing: border-box; padding: 14px 15px; margin: 3px auto; border-radius: 0px; max-width: none; border: none;}
input[type="text"],
	input[type="email"],
	input[type="file"],
	select{border: 1px solid rgba(0,0,0,0.2);}
input[type="checkbox"]{width: auto;}
input[type="submit"], button{display: inline-block; width: auto; line-height: normal; padding: 14px 20px; transition: all 0.25s linear 0s; background: #ffb600; color: #bb141a; text-transform: uppercase; margin: 20px auto; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;}
input[type="submit"]:hover, button:hover{background: #bb141a; color: #ffb600; text-decoration: none;}
label{display: block; margin-top: 20px;}
div.wpcf7 .ajax-loader {display: block !important; margin: 4px auto !important;}
.wpcf7-list-item{margin: 0 !important;}
.wpcf7-list-item label{display: block; margin-top: 0px;}
.wpcf7-list-item-label{padding-left: 8px;}
.wpcf7-not-valid-tip {color: #ffb900 !important; font-size: inherit !important;}

#header .content{display: flex; align-items: end; justify-content: space-between; padding: 0;}
#header #logo{display: block; box-sizing: border-box; padding: 40px 20px; max-width: 65%;}
#header #menu .top-links{display: block; padding: 0 0 30px 0;}
#header .header-contact{display: inline-block; margin-left: 22px;}

#nav{display: block; width: 100%; height: 68px; text-align: center; background: #fff;}
#nav ul li{display: inline-block; margin: 0; padding: 0;}
#nav ul li a{display: inline-block; height: 68px; line-height: 70px; color: #1a1a1a; box-sizing: border-box; padding: 0 20px; transition: none; font-family: 'BenchNine'; font-size: 30px; text-transform: uppercase;}
#nav ul li:last-of-type a{padding: 0 0 0 20px !important;}
#nav ul li a:hover,
	#nav .menu-item-has-children:hover{color: #bb141a; text-decoration: none;}
#nav .menu-item-has-children:hover{background: #ffb600;}
#nav.nav-open{opacity: 1; transform: scale(1); transition: all 0.2s ease-out 0.05s;}
#nav.nav-close{opacity: 0; transform: scale(2.5); transition: all 0.3s ease-out 0s;}
#nav .current_page_item a,
 	#nav .current-page-ancestor a,
	#nav .current_page_item a:hover,
 	#nav .current-page-ancestor a:hover{color: #bb141a;}
#nav .menu-item{overflow: visible; position: relative; }
#nav .sub-menu{display: none; position: fixed; transition: all 0.3s ease-out 0s; z-index: 9; text-align: left; background: #ffb600; background: linear-gradient(180deg, rgba(218,153,41,1) 0%, rgba(255,182,0,1) 10px); padding: 8px 20px 10px 20px; -webkit-box-shadow: 0px 15px 25px 1px rgba(0,0,0,0.3); box-shadow: 0px 15px 25px 1px rgba(0,0,0,0.3)}
#nav .sub-menu li:first-of-type a{border: none !important;}
#nav .sub-menu li:last-of-type a{padding: 12px 0 !important;}
#nav .sub-menu li a{width: 250px; color: #1a1a1a; line-height: normal; padding: 12px 0px; text-transform: none; height: auto; border-top: 1px solid rgba(0,0,0,0.1); font-family: 'Roboto', sans-serif; font-size: 20px; line-height: 30px; text-transform: none;}
#nav .sub-menu li a:hover{color: #bb141a; background: none;}
#nav .sub-menu .sub-menu{position: static !important; display: block; margin: 0 !important; border-top: 0; background: none; padding: 0;}
#nav .sub-menu .sub-menu li{display: inline-block; margin: 0;}
#nav .sub-menu .sub-menu li a{padding-left: 10px;}
#nav .menu-item-has-children a{padding-right: 36px; position: relative;}
#nav .menu-item-has-children a::after{content: ""; background: url(images/nav-arrow.png) top left no-repeat; display: block; width: 17px; height: 10px; top: 25px; right: 12px; position: absolute; z-index: 1; transform-origin: center; transition: all 0.2s ease-out 0s;}
#nav .menu-item-has-children .sub-menu a::after{display: none !important;}
#nav .menu-item-has-children-hovered a,
	#nav .menu-item-has-children-hovered a:hover{color: #bb141a;}
#nav .menu-item-has-children-hovered a::after{transform: rotate(180deg);}
#nav .menu-item-has-children-hovered .sub-menu{display: block; position: absolute; left: 0;}
#nav .btn-nav-contact a{padding-right: 0px !important;}
#nav .btn-nav-contact a::after{background: none !important; padding-right: 0px !important;}
#nav .btn-nav-contact .sub-menu{display: none !important;}

#btn-nav{width: 70px; height: 70px; display: block; position: fixed; top: 12px; right: 25px; z-index: 999; background: none;}
#btn-nav .relative{display: block; height: 100%; width :100%;}
#btn-nav .line{width: 40px; height: 3px; display: block; background: #bb141a; position: absolute; left: 50%; transform: translateX(-50%); transition: all 0.2s linear 0s; margin-top: -1px; top: 50%;}
#btn-nav .line-01{transform: translateX(-50%) translateY(-13px);}
#btn-nav .line-03{transform: translateX(-50%) translateY(13px);}
#btn-nav:hover .line-01{transform: translateX(-50%) translateY(-18px);}
#btn-nav:hover .line-03{transform: translateX(-50%) translateY(18px);}
#btn-nav.btn-nav-open .line-01{transform: translateX(-50%) rotate(45deg); transition: all 0.25s linear 0s;}
#btn-nav.btn-nav-open .line-02{opacity: 0; transition: all 0.25s linear 0s;}
#btn-nav.btn-nav-open .line-03{transform: translateX(-50%) rotate(-45deg); transition: all 0.25s linear 0s;}
#btn-nav.nav-open:hover{background-position: center -50px;}

#hero{display: flex; position: relative; align-items: center; color: #fff; overflow: hidden;}
.hero-bg{display: block; width: 100%; max-width: 100%; position: absolute; top: 50%; left: 50%; z-index: -2; transform: translate(-50%, -50%) scale(1.2); transition: all 0.4s ease-out 0s; transform-origin: center;}
.hero-gradient{background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0.5; z-index: -1;}
.hero-height{display: block; height: 580px;}
.loaded .hero-bg{transform: translate(-50%, -50%) scale(1);}
#google-map{}

#grid-container{margin-top: 100px;}
.grid-hover.grid-hover-large{width: 100%; height: 610px;}
.grid-hover.grid-hover-large .inner{width: 100%; height: 610px;}
.grid-hover{display: block; position: relative; overflow: hidden; width: 100%; height: 290px; margin-bottom: 30px; opacity: 0;}
.grid-hover .inner{display: block; position: relative; width: 100%; height: 290px; transition: all 0.4s ease-out 0s; transform: translate(0%, 100%); opacity: 0; overflow: hidden;}
.grid-hover .photo{display: block; position: absolute; top: 50%; left: 50%; transition: all 0.4s ease-out 0s; transform: translate(-50%, -50%); transform-origin: center; width: 100%; z-index: 10; max-width: none;}
.grid-hover:hover .photo,
	.grid-hover.is-inview:hover .photo{width: calc(100% + 100px); opacity: 0.75;}
.grid-hover:hover .btn-arrow .relative{padding-right: 50px;}
.grid-hover:hover .arrow{right: 15px; opacity: 1;}
.grid-hover.is-inview{opacity: 1; transform: translate(0%, 0%);}
.grid-hover.delay3 .inner{transition: all 0.4s ease-out 0.4s;}
.grid-hover.delay4 .inner{transition: all 0.4s ease-out 0.6s;}
.grid-hover.delay2 .inner{transition: all 0.4s ease-out 0.8s;}
.grid-hover.delay5 .inner{transition: all 0.4s ease-out 1.0s;}
.grid-hover.is-inview .inner{transform: translate(0%, 0%); opacity: 1; background: #000}
.grid-hover.is-inview .photo{/*width: calc(100% + 0px);*/}
.grid-hover .btn-arrow{display: block; position: absolute; bottom: 20px; right: 20px; transition: all 0.3s ease-out 0s; z-index: 20; background: #ffb600; color: #bb141a; text-transform: uppercase;}
.grid-hover .btn-arrow .relative{display: block; padding: 12px 20px 12px 16px; box-sizing: border-box; transition: all 0.3s ease-out 0s;}
.grid-hover .arrow{display: block; position: absolute; top: 50%; right: 25px; transform: translateY(-50%); opacity: 0; transition: all 0.3s ease-out 0s; background: url(images/grid-btn-arrow.png) top right no-repeat; width: 11px; height: 18px;}
.btn-arrow:hover{background: #fff;}

#project-icons-container{display: flex; width: 100%; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; text-align: center; margin-top: 20px;}
.project-icon{width: 18%;}
.project-icon h4{padding: 0; font-size: 26px; line-height: 28px;}
.project-icon-svg{max-width: 100%;}
.project-icon-svg{opacity: 0;}
.project-icon-svgline{fill: none; stroke: #1a1a1a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;}
.project-icon.is-inview .project-icon-svg{opacity: 1;}
.project-icon-01.is-inview .project-icon-svgline{stroke-dashoffset: 0 !important; transition: all 2.2s ease-in-out 0.5s;}
.project-icon-02.is-inview .project-icon-svgline{stroke-dashoffset: 0 !important; transition: all 2.2s ease-in-out 1.25s;}
.project-icon-03.is-inview .project-icon-svgline{stroke-dashoffset: 0 !important; transition: all 2.2s ease-in-out 2s;}
.project-icon-04.is-inview .project-icon-svgline{stroke-dashoffset: 0 !important; transition: all 2.2s ease-in-out 2.75s;}
.project-icon-05.is-inview .project-icon-svgline{stroke-dashoffset: 0 !important; transition: all 2.2s ease-in-out 3.5s;}

#footer{margin-top: 100px;}
#footer a{color: #1a1a1a;}
#footer a:hover{color: #bb141a;}
#footer li{padding:0; margin: 0 0 6px 0; list-style: none;}
#footer .col-03{width: auto; padding: 0 18px; border-left: 1px solid rgba(0,0,0,0.08); margin-bottom: 30px;}
#footer .footer-contact{text-transform: uppercase; font-size: 20px; display: block; padding: 10px 0; line-height: 30px;}
#footer .social-container{display: block;}
#footer .social{display: inline-block; margin: 5px 2px 5px 0; width: 40px; height: 40px; border-radius: 40px; background: url(images/social-media.png) no-repeat #bb141a; text-indent: -9999px; overflow: hidden;}
#footer .social:hover{background-color: #1a1a1a;}
#footer .social.twitter{background-position: -40px 0;}
#footer .social.linkedin{background-position: 0 0;}
#footer .social.facebook{background-position: -80px 0;}
#footer .social.youtube{background-position: -160px 0;}
#footer .social.instagram{background-position: -120px 0;}
#footer-copyright .content{padding: 30px 0; color: #fff;}
#footer-copyright a{color: #fff;}
#footer-copyright a:hover{color: #fff; opacity: 0.6;}

.bg-cream{background-color: #faf4ef;}
.bg-red{background-color: #bb141a;}
.bg-yellow{background-color: #ffb600;}
.btn-box{display: inline-block; width: auto; line-height: normal; padding: 14px 20px; transition: all 0.25s linear 0s; background: #ffb600; color: #bb141a; text-transform: uppercase; margin: 20px auto;}
.btn-box.cream{background: #faf4ef;}
.btn-box:hover{background: #bb141a; color: #ffb600; text-decoration: none;}
.callout{display: flex !important; position: relative; align-items: center; color: #fff; overflow: hidden;}
.callout h2{color: #fff;}
.callout .btn-box:hover{background: #fff; color: #bb141a;}
.callout-bg{display: block; width: 100%; max-width: 100%; position: absolute; top: 50%; left: 50%; z-index: -2; transform: translate(-50%, -50%) scale(1.2); transition: all 0.4s ease-out 0s; transform-origin: center;}
.callout-bgcolor{display: block; width: calc(33% + 60px); position: absolute; top: 0; left: 0; bottom: 0; opacity: 0.8; z-index: -1;}
.callout-height{display: block; height: 580px;}
.is-inview .callout-bg{transform: translate(-50%, -50%) scale(1);}
.col-container{display: flex; width: 100%; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;}
.col-02{display: block; width: calc(50% - 15px);}
.col-03{display: block; width: calc(33% - 15px);}
.col-image{display: block; margin-bottom: 30px;}
.col-bottom-padding{padding-bottom: 40px;}
.content{width: 90%; max-width: 1400px; margin: 0 auto; padding: 100px 0; display: block;}
.content-area{display: block; margin: 0 auto; max-width: 60%;}
.content-inner{display: block; margin: 0 auto; padding: 0 50px; display: block;}
.no-padding{padding:0 !important;}
.relative{position: relative;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-red{color: #bb141a;}
.text-yellow{color: #ffb600;}

.anim-slideup{display:block; overflow: hidden;}
.anim-slideup-inner{transform: translateY(100%); transition: all 0.4s ease-out 0s; transform: translateY(100%);}
.anim-slideup.delay2 .anim-slideup-inner{transition: all 0.4s ease-out 0.4s;}
.anim-slideup.delay3 .anim-slideup-inner{transition: all 0.4s ease-out 0.6s;}
.anim-slideup.delay4 .anim-slideup-inner{transition: all 0.4s ease-out 0.8s;}
.anim-slideup.delay5 .anim-slideup-inner{transition: all 0.4s ease-out 1.0s;}
.anim-slideup.delay6 .anim-slideup-inner{transition: all 0.4s ease-out 1.2s;}
.is-inview .anim-slideup-inner{transform: translateY(0%);}

/* SMALL / MEDIUM */
@media screen and (min-width: 1140px) {

	#header{margin-top: 30px;}
	#btn-nav{display: none}

}

/* SMALL / MEDIUM */
@media screen and (min-width: 0px) and (max-width: 1139px) {

	#nav{width: 100%; height: 100%; display: table; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 990; margin: 0; visibility: hidden; transform: scale(2); opacity: 0; transition: all 0.3s ease-out 0s; background: #bb141a; float: none;}
  #nav.nav-open{opacity: 1; transform: scale(1);}
  #nav.nav-close{opacity: 0; transform: scale(2);}
	#nav ul{display: table-cell; vertical-align: middle;}
	#nav ul li{display: block; width: 100%; text-align: center; margin: 0; padding: 3px 0 !important;}
	#nav ul li a{height: auto; line-height: normal; font-size: 18px; padding: 5px 0; color: #fff;}
	#nav ul li:hover,
		#nav ul li:hover a,
		#nav ul li a:hover{color: #fff !important; background: none !important;}
	#nav .current_page_item a,
	 	#nav .current-page-ancestor a,
		#nav .current_page_item a:hover,
	 	#nav .current-page-ancestor a:hover{color: #ffdd0e;}
	#nav .sub-menu{display: none !important;}
	#nav .menu-item-has-children a{padding-right: 0;}
	#nav .menu-item-has-children a::after{display: none !important;}
	#btn-nav{display: block;}

}


/* SMALL */
@media screen and (min-width: 0px) and (max-width: 600px) {

	body{font-size: 15px; line-height: 22px;}
	h1{font-size: 34px; line-height: 38px;}
	h2{font-size: 26px; line-height: 30px;}
	h3{font-size: 16px;}

	#header #logo{padding: 30px 20px;}
	#header #menu .top-links{display: none;}

	#nav ul li:last-of-type a{padding: 0 !important;}

	#hero h1{max-width: 70%;}
	.hero-bg,
		.callout-bg{width: auto; max-width: none; height: 100%; max-height: 100%;}
	.hero-height,
		.callout-height{height: 350px;}

	#footer{margin-top: 50px;}
	#footer .footer-contact{font-size: normal;}
	#footer .col-03{width: 100%; margin: 0; padding: 0;}

	.callout .callout-bgcolor{width: 100%;}
	.callout .col-03{width: 100%;}
	.col-02,
		.col-03,
		.col-04,
		.col-05{width: 100%; margin: 10px 0%; font-size: inherit; line-height: inherit; min-height: inherit; text-align: left;}
	.content{padding: 50px 0;}
	.content-area{max-width: 100%;}
	#grid-container{margin-top: 50px;}
	#grid-container .col-02{margin: 0;}
	.grid-hover.grid-hover-large{height: 290px;}
	.project-icon{width: 40%;}

}