/*
Theme Name: VSA
Theme URI: 
Description: 
Version: 1.0
Author: Eugene @ rootbound.co.za
*/ 

body {font-weight: 300;} 

img, iframe {display: block;}
strong {font-weight: 400}

html {width: 100%;} /* force html to be viewport width */
body {width: 100%; overflow-x: hidden!important; } /* overflow the body */

input {transition: all 0.4s ease-in-out;}


.no-touch a[href^="tel"], a.no-link {
    color: inherit;
    text-decoration: none;
    cursor: text;
}

/* Helpers */
.position-relative { position: relative; }


@media only screen and (min-width: 769px) {
	.inner-left { padding-right: 30px; }
	.inner-right {padding-left: 30px;}
}

@media only screen and (max-width: 768px) {
	.last {-ms-flex-order: 0;order: 0;}
}

.show-small { display: none!important }
@media only screen and (max-width: 768px) {
	.show-small { display: block!important }
}

.show-desktop { display: none }
@media only screen and (min-width: 769px) {
	.show-desktop { display: block }
}

.pad-top-0 {padding-top: 0px!important;}
.pad-top-10 {padding-top: 10px!important;}
.pad-top-20 {padding-top: 20px!important;}
.pad-top-30 {padding-top: 30px!important;}

.pad-bottom-0 {padding-bottom: 0px!important;}
.pad-bottom-20 {padding-bottom: 20px!important;}

.pad-top-0 {padding-top: 0px!important;}

.pad-bottom-less {padding-bottom: 30px;}

@media only screen and (min-width: 769px) {
	.text-desktop-right { text-align: right; }
}

/* Buttons */



/* Header */
header {background-position: center; position: relative; min-height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
header .header-inner {padding: 220px 0 30px 0; }
section {padding: 90px 0; position: relative; background: #fff}
section.pad-top-med {padding-top: 120px;}
section.mar-bottom {margin-bottom: 40px;}
section.section-pad {padding: 90px 60px;}
section.section-bottom-pad {padding-bottom: 180px;}

.link { font-size: 16px; line-height: 24px; color: #9e8b4e; font-size: 14px; font-weight: 500; text-decoration: none; }
.link:hover {color: #000}
.link span{ transition: all 0.6s ease; position: relative; left: 5px; font-size: 18px;top:-1px; }
.link:hover span { left: 10px; color: #000 }

.bg-light {background-color: #fff;}
.bg-light-2 {background-color: #F9F9F9;}

.bg-light-fade {background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0));}

.container {margin: 0; padding: 0 60px;width: 100%;}

.inner {max-width: 1100px; margin: 0 auto; width: 100%;}

.inner-xsmall {max-width: 700px; margin: 0 auto; width: 100%;}
.inner-xsmall2 {max-width: 500px;width: 100%;}
.inner-small {max-width: 820px; margin: 0 auto; width: 100%;}
.inner-narrow {max-width: 1024px; margin: 0 auto; width: 100%;}
.inner-wide {max-width: 1400px; margin: 0 auto; width: 100%;}


.max-medium {max-width: 820px;}

.pad-top-bottom {padding-top: 60px!important;padding-bottom: 45px!important;}
.pad-bottom {padding-bottom: 45px!important;}
.pad-top {padding-top: 60px!important;}
.pad-bottom-0 {padding-bottom: 0 !important;}

.paralax-holder {max-height: 600px;overflow: hidden;}

/* Here we go! */

.header-dark h1, .header-dark h5, .header-dark p {color: #fff}

p.intro { font-size: 20px;font-weight: 300; line-height: 1.6; max-width: 600px;margin-bottom: 50px; }

.button svg {width: 20px; height: 20px; line-height: 0;margin-right: 10px; position: relative;top:2px;}
.button.big span { position: relative;top:-2px; font-weight: 500; letter-spacing: 1.2px }
.button.inverted {color: #02466B}
.button path {fill:#fff;transition: all 0.4s ease-in-out;}
.button.inverted path {fill:#0F6179;transition: all 0.4s ease-in-out;}
.button.inverted:hover { opacity: 1; background: #0F6179; color: #fff; }
.button.inverted:hover path {fill:#fff;}

.element-bottom-right-white { width: 15px; height: 120px; background-color: #fff; position: absolute; bottom:0; right: 0; z-index: 9 }
.element-bottom-left-white { width: 15px; height: 120px; background-color: #fff; position: absolute; bottom:0; left: 0; z-index: 9 }
.element-top-right-blue { width: 15px; height: 220px; background-color: #9e8b4e; position: absolute; top:0; right: 0; z-index: 9 }
.element-top-left-blue { width: 15px; height: 220px; background-color: #02466B; position: absolute; top:0; left: 0; z-index: 9 }

#services {padding-top: 10%;position: relative;}
.no-touch #services {background-attachment: fixed;}
#services h1 {margin-bottom: 20px;}
#services .intro  {margin-bottom: 20px;}
#services p {font-weight: 300}

#services:after { content: ''; background-color: #fff; position: absolute; right: 0; left: 0; bottom: 0; z-index: 0; height: 30% }



.services-block {position: relative;margin-top: 30px;}
.services-block:after { content: ''; background-color: #02466B; position: absolute; top: 0; right: 0; width: 50%; bottom: 0; z-index: 1; }
.services-block-inner {background-color: #02466B; color: #fff; margin-left:40px; max-width: 1220px;margin: 0 auto;padding: 60px 0; position: relative; z-index: 9}

.services-block h4 {color: #fff}
.services-block ul { list-style: none; padding: 0; margin: 20px 0 10px 0; }
.services-block ul li { padding: 0 0 20px 21px; line-height: 1.2; margin: 0; position: relative; }
.services-block ul li:before { content: ''; position: absolute; left: 0; top: 11px; display: block; height: 1px; width: 10px; background-color: #fff; border-radius: 5px; }

.cta-services { position: absolute;bottom: -26px;left: 0; right: 0; text-align: center; z-index: 99 }
.cta-services a { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); letter-spacing: 1.5px; word-spacing: 2px }

.logo-list {margin-top: 20px;text-align: center;}
.logo-list .col {padding: 40px 20px;}
.logo-list img {display: inline-block;}

#news .element-top-right-blue {top:-40px;}

.log-1 {max-width: 200px;}
.log-2 {max-width: 140px;}
.log-3 {max-width: 160px;}
.log-4 {max-width: 160px;}
.log-5 {max-width: 120px;}
.log-6 {max-width: 100px;}

.form-holder input {}

#contact .col-4 p {margin-bottom: 30px; line-height: 1.8}	


footer {text-align: center;padding: 20px 0; font-size: 12px; font-weight: 400; color: #666}
footer span {opacity: 0.6}
footer span a{color: inherit; text-decoration: none;}

.alm-btn-wrap .alm-load-more-btn {transition: all 0.6s ease;font-size: 14px;letter-spacing:1px;font-weight: 400;width: auto;height: 42px;line-height: 42px;background: #fff;color: #03466b;    border: 1px solid rgba(3, 70, 107, 0.4);border-radius: 60px;margin: 40px 0 4px;padding: 0 50px;display: inline-block;position: relative;text-align: center;text-decoration: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: pointer;}
.alm-btn-wrap .alm-load-more-btn:hover {text-decoration: none;border: 1px solid rgba(3, 70, 107, 1); color: #000 }
.alm-btn-wrap .alm-load-more-btn:active { -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, .1); box-shadow: inset 0 2px 1px rgba(0, 0, 0, .1); text-decoration: none }
.alm-btn-wrap .alm-load-more-btn:active, .alm-btn-wrap .alm-load-more-btn:focus { outline: 0 }
.alm-btn-wrap .alm-load-more-btn.loading { padding-left: 44px }
.alm-btn-wrap .alm-load-more-btn.done { cursor: default; opacity: .2; background-color: #ed7070; outline: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important }
.alm-btn-wrap .alm-load-more-btn.done:before, .alm-btn-wrap .alm-load-more-btn:before { background: 0 0; width: 0 }
.alm-btn-wrap .alm-load-more-btn.loading:before {background: url(https://www.vaughnsa.com/wp-content/plugins/ajax-load-more/core/img/ajax-loader.gif) no-repeat center center;width: 20px;height: 30px;margin: 6px 15px;border-radius: 2px;display: inline-block;z-index: 0;content: '';position: absolute;left: 0;top: 0;overflow: hidden;-webkit-transition: width .5s ease-in-out;transition: width .5s ease-in-out;}
.alm-btn-wrap, .alm-masonry { display: block; overflow: hidden; clear: both }
.alm-btn-wrap { text-align: center; padding: 10px 0 25px }

.ajax-load-more-wrap.grey .alm-load-more-btn.done, .ajax-load-more-wrap.grey .alm-load-more-btn:hover { background-color: #777 }
.ajax-load-more-wrap.white .alm-load-more-btn { background-color: #fff; color: #666; border: 1px solid #efefef }
.ajax-load-more-wrap.white .alm-load-more-btn.done, .ajax-load-more-wrap.white .alm-load-more-btn:hover { background-color: #efefef; color: #333 }
.ajax-load-more-wrap.white .alm-load-more-btn.done { border-color: #fff }
.ajax-load-more-wrap.infinite .alm-load-more-btn { width: 100%; background-color: transparent !important; background-position: center center; background-repeat: no-repeat; background-image: url(https://www.vaughnsa.com/wp-content/plugins/ajax-load-more/core/img/spinner.gif); border: none !important; opacity: 0; -webkit-transition: opacity .25s ease; transition: opacity .25s ease; -webkit-box-shadow: none !important; box-shadow: none !important; overflow: hidden; text-indent: -9999px; cursor: default !important; outline: 0 !important }
.ajax-load-more-wrap.infinite .alm-load-more-btn:before { display: none !important }
.ajax-load-more-wrap.infinite .alm-load-more-btn:active { -webkit-box-shadow: none; box-shadow: none }
.ajax-load-more-wrap.infinite .alm-load-more-btn.done { opacity: 0 }
.ajax-load-more-wrap.infinite .alm-load-more-btn.loading { opacity: 1 }
.ajax-load-more-wrap.infinite.skype .alm-load-more-btn { background-image: url(https://www.vaughnsa.com/wp-content/plugins/ajax-load-more/core/img/spinner-skype.gif) }
.ajax-load-more-wrap.infinite.ring .alm-load-more-btn { background-image: url(https://www.vaughnsa.com/wp-content/plugins/ajax-load-more/core/img/spinner-ring.gif) }
.ajax-load-more-wrap.infinite.fading-blocks .alm-load-more-btn { background-image: url(https://www.vaughnsa.com/wp-content/plugins/ajax-load-more/core/img/loader-fading-blocks.gif) }
.ajax-load-more-wrap.infinite.fading-circles .alm-load-more-btn { background-image: url(https://www.vaughnsa.com/wp-content/plugins/ajax-load-more/core/img/loader-fading-circles.gif) }
.ajax-load-more-wrap.infinite.chasing-arrows .alm-load-more-btn { background-image: url(https://www.vaughnsa.com/wp-content/plugins/ajax-load-more/core/img/spinner-chasing-arrows.gif) }
.alm-listing { margin: 0; padding: 0 }
.alm-listing li { background: 0 0; margin: 0 0 30px; padding: 0 0 0 170px; overflow: hidden; position: relative; list-style: none }
.alm-listing li.no-img { padding: 0 }
.alm-listing li p { margin: 0 }
.alm-listing li h3 { margin: 0 0 10px }
.alm-listing li img { position: absolute; left: 0; top: 0; border-radius: 2px }

.alm-btn-wrap .alm-load-more-btn.done {display: none;}

.logo {
    width: 220px;
}
.main-nav.nav-moved .logo {
    width: 130px;
}
.nav-moved .logo-mobile {
    width: 130px;
}

@media (max-width: 1170px) { 
	.logo-mobile {
	    width: 160px;
	}
	.logo {
	    width: 160px;
	}
	.nav-moved .navigation-inner {
	    padding: 20px 40px;
	}
}

@media (max-width: 400px) { 
	.nav-moved .navigation-inner {
	    padding: 20px 20px;
	}
}


@media only screen and (max-width: 1340px) {
	h1 {font-size: 32px; line-height: 46px;margin-bottom: 30px;}
	h2 {font-size: 30px; line-height: 40px;}
	h3 {font-size: 26px; line-height: 36px;}
	p.intro { font-size: 18px; line-height: 1.5; max-width: 540px; margin-bottom: 40px; }

	.max-medium {max-width: 720px;}

}



@media only screen and (max-width: 1170px) {
	.max-medium {max-width: 620px;}
	h1 {font-size: 27px; line-height: 38px;margin-bottom: 20px;}
	h2 {font-size: 26px; line-height: 36px;}
	h3 {font-size: 24px; line-height: 34px;}
	h4, .h4 {font-size: 20px;line-height: 30px;}
	h5, .h5 {font-size: 18px;line-height: 32px;}

	p.intro { font-size: 16px; line-height: 1.6; max-width: 400px; margin-bottom: 40px; }
	.button.big {font-size: 12px;padding: 10px 30px;}

	.container { padding: 0 40px;}
	section {padding: 40px 0;}
	section.pad-top-med {padding-top: 80px;}
	header .header-inner {padding: 180px 0 30px 0; }
}
@media only screen and (max-height: 620px) {
	.max-medium {max-width: 620px;}
	h1 {font-size: 27px; line-height: 38px;margin-bottom: 20px;}
	h2 {font-size: 26px; line-height: 36px;}
	h3 {font-size: 24px; line-height: 34px;}
	h4, .h4 {font-size: 20px;line-height: 30px;}
	p.intro { font-size: 18px; line-height: 1.6; max-width: 400px; margin-bottom: 40px; }
	.button.big {font-size: 12px;padding: 10px 30px;}

	.container { padding: 0 40px;}
	section {padding: 40px 0;}
	section.pad-top-med {padding-top: 70px;}
	header .header-inner {padding: 180px 0 30px 0; }

}


@media only screen and (max-width: 1023px) {
	.row .col-smm-6 {width: calc(50% - 3%);    margin-left: 3%!important;}
}

@media only screen and (max-width: 960px) {
	.max-medium {max-width: 480px;}



}


@media only screen and (max-width: 768px) {
	html, body {font-size: 13px;line-height: 1.5;}

	.row.gutters .col {margin-bottom: 0px;}
	.row .col-sm-6 {width: calc(50% - 3%);    margin-left: 3%!important;}
	.row .col-sm-12 {width: 100$;    margin-left: 3%!important;}
	.row.flex-sm {margin-left: -3%;display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; }

	.paralax-holder {max-height: 300px;overflow: hidden;}

	.pad-bottom-none-mobile {padding-bottom: 0!important}

	.no-move-mobile {transform: rotateX(0deg) translateY(0px)!important;}

	.element-bottom-right-white { width: 10px; height: 60px; }
	.element-bottom-left-white { width: 10px; height: 60px; }
	.element-top-right-blue { width: 10px; height: 120px;}
	.element-top-left-blue { width: 10px; height: 120px;}


	.pad-top-bottom {padding-top: 30px!important;padding-bottom: 20px!important;}
	.pad-bottom {padding-bottom: 25px!important;}
	.pad-top {padding-bottom: 40px!important;}

	section {padding: 30px 0;}
	.services-block-inner { padding: 30px 0;}

	.max-medium {max-width: 380px;}
	h1 {font-size: 22px; line-height: 28px;margin-bottom: 20px;}
	h2 {font-size: 24px; line-height: 28px;margin-bottom: 10px;}
	h3 {font-size: 18px; line-height: 24px;}
	h4 {font-size: 18px;line-height: 26px;}
	h5 {font-size: 14px;line-height: 22px;}
	p.intro { font-size: 14px; line-height: 22px; margin-bottom: 30px; }
	.button.big {font-size: 11px;padding: 10px 30px;}
	.button.big span {letter-spacing: 0px;}

	header { background-position: right; background-size: cover; min-height: auto}


	.container { padding: 0 20px;}
	.container-less-pad-mobile.container  { }
	header .header-inner {padding: 160px 0 20px 0; }

	.services-block ul li { padding: 0 0 10px 21px; line-height: 1.5; }
	.services-block ul li:before { top: 6px; width: 10px; }

	.logo-list {margin-top: 0px;text-align: center;}
	.logo-list .col {padding: 20px 20px;}



	#contact .col-4 p {margin-bottom: 20px; }	

	.link span{top:1px; }

}


@media (max-width:600px) {
	.log-1 {max-width: 90%;}
	.log-2 {max-width: 84%;}
	.log-3 {max-width: 82%;}
	.log-4 {max-width: 77%;}
	.log-5 {max-width: 91%;}
	.log-6 {max-width: 61%;}
}

@media only screen and (max-width: 320px) {
	.row .col-xs-12 {width: 100%;    margin-left: 0!important;}
	.row.flex-sm { margin-left: 0%!important; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
}

@media (max-width:400px) {
	.max-medium {max-width: 280px;}
}

#ajax-load-more {
	max-width: 700px;
    margin: 0 auto;
}
.news-desc {
    text-align: left;
    border-bottom: 1px solid #eee;
}
.news-desc h4:after {
    margin: 10px 0;
}
