/*
Theme Name: A Visual Guide
Theme URI: http://avisualguide.com/
Author: Cloud 10
Author URI: https://www.cloudtencreative.co.uk
Developers: Suzanne Lowery
Version: 1.0
*/

/* CSS RESET
---------------------------------------------------------------------------------- */

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
[hidden] { display: none; }
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #222; -webkit-font-smoothing: antialiased; line-height: 1.4; }
body { margin: 0; }
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
dfn { font-style: italic; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
mark { background: #ff0; color: #000; }
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre-wrap; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
button, input { line-height: normal; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="submit"] { -webkit-transition: 0.2s; transition: 0.2s; }
input, textarea { -webkit-appearance: none; border-radius: 0; outline: none; }
select option[disabled] { display: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0; }
a { outline: 0; -webkit-transition: 0.3s; transistion: 0.3s; }
a:focus { outline: none; }



/* GLOBAL
---------------------------------------------------------------------------------- */

body { font-family: 'steagal_regularregular', sans-serif;}
body.noscroll { height: 100%; overflow: hidden;}
body#tinymce {  padding: 3% !important; width: 94%; background: #fff !important;}
body#tinymce p { margin-bottom: 25px;}
body#tinymce ul { margin-left: 20px;} 
.clear { clear: both;}
.left, .alignleft { float: left;}
.right, .alignright { float: right;}
.alignleft { margin: 0 30px 30px 0;}
.alignright { margin: 0 0 30px 30px;}
.aligncenter { display: block; margin: 0 auto;}
p, li { margin: 0; padding: 0; font-size: 16px; line-height: 1.9em; color: #231F20; letter-spacing: 0.02em;}
ul { margin: 0; padding: 0;}
li { list-style: none;}
a, textarea, li { color: #25333A; outline: none;}
input { color: #554D4F; border: 1px solid transparent; outline: none; font-size: 15px;line-height: 18px;}
input.ErrorField, textarea.ErrorField, select.ErrorField { border: 1px solid #B22026 !important;}
label { font-size: 15px;line-height: 18px;}
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: 400; color: #231F20; line-height: 1.2em; letter-spacing: 1px; text-transform: uppercase; font-family: 'chris_font_1regular'; }
h1 { font-size: 32px; margin-bottom: 25px;} 
h2 { color: #fff; font-size: 43px;}
h3 { font-size: 25px;}
h4 { font-size: 26px;}
h5 { font-size: 16px;}
h6 { font-size: 14px;}
strong { font-family: 'steagalbold', sans-serif;}
strong.caps { text-transform: capitalize;}
em { font-style: italic; }
blockquote { font-weight: normal; font-size: 1em; line-height: 1.4; color: #000; width: 100%; padding: 0 0 0 90px; }
::-moz-selection { background-color: #A3D4F9; color: #fff; }
::selection { background-color: #A3D4F9; color: #fff; }


/* Wordpress Styles */
.wp-caption { border: 1px solid #000; text-align: center; padding: 10px; margin: 0 0 20px; overflow: hidden; }
.wp-caption a { border: none; }
.wp-caption img { margin: 0 0 10px 0; padding: 0; border: 0 none; display: block; width: 100%; height: auto; -webkit-transition: 0.2s; transition: 0.2s; }
.wp-caption a:hover img { opacity: 0.9; }
.wp-caption p.wp-caption-text { font-size: 12px; margin: 0; padding: 0; }
.alignleft, img.alignleft { float: left; margin: 0 30px 20px 0; }
.alignright, img.alignright { float: right; margin: 0 0 20px 30px; }
.aligncenter, img.aligncenter { display: block; margin: 0 auto 20px; }


/* Clearfix */
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }

.cloudten_cookies p { color: #fff; font-size: 12px; line-height: 16px; margin: 10px 0; font-family: 'Open Sans', sans-serif;}
.cloudten_cookies img { width: 12px;}
.cloudten_cookies a { box-shadow: 1px 1px 7px #666; text-decoration: none; background-color: #FED920; border-radius: 4px; padding: 5px 12px; font-family: 'steagalmedium'; display: inline-block; transition: 0.3s; -webkit-transition: 0.3s;}
.cloudten_cookies a:hover { background-color: #DABC1B;}


/* FONTS
---------------------------------------------------------------------*/


@font-face {
    font-family: 'chris_font_1regular';
    src: url('fonts/chris_font-webfont.woff2') format('woff2'),
         url('fonts/chris_font-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'steagalbold';
    src: url('fonts/insigne_-_steagal-bo-webfont.woff2') format('woff2'),
         url('fonts/insigne_-_steagal-bo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'steagalbold_italic';
    src: url('fonts/insigne_-_steagal-boit-webfont.woff2') format('woff2'),
         url('fonts/insigne_-_steagal-boit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'steagallight';
    src: url('fonts/insigne_-_steagal-li-webfont.woff2') format('woff2'),
         url('fonts/insigne_-_steagal-li-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'steagallight_italic';
    src: url('fonts/insigne_-_steagal-liit-webfont.woff2') format('woff2'),
         url('fonts/insigne_-_steagal-liit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'steagalmedium';
    src: url('fonts/insigne_-_steagal-me-webfont.woff2') format('woff2'),
         url('fonts/insigne_-_steagal-me-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'steagalmedium_italic';
    src: url('fonts/insigne_-_steagal-meit-webfont.woff2') format('woff2'),
         url('fonts/insigne_-_steagal-meit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'steagal_regularregular';
    src: url('fonts/insigne_-_steagal-re-webfont.woff2') format('woff2'),
         url('fonts/insigne_-_steagal-re-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'steagalregular_italic';
    src: url('fonts/insigne_-_steagal-reit-webfont.woff2') format('woff2'),
         url('fonts/insigne_-_steagal-reit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* GENERAL
---------------------------------------------------------------------*/

.wrapper { width: 90%; max-width: 1500px; margin: 0 auto;}
.overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: rgba(35,65,111,0.2);}
.band { float: left; width: 100%; padding: 100px 0; text-align: center; position: relative;}
.band p.small { font-size: 14px; font-family: 'steagalmedium'; letter-spacing: 0.05em;}
.band p.quote { font-family: 'steagalregular_italic'; margin-bottom: 20px;}
.band .buttons { margin-top: 40px;}
img.bg { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 0;}
.person { position: absolute; width: 171px; bottom: 0;}

.band.grey { background-color: #E6E7E8;}
.band.grey { overflow: hidden;}
.band.grey .wrapper { position: relative;}
.band.grey img.bg { opacity: 0.05;}

.band.yellow { background-color: #FED920; box-shadow: 1px 1px 5px #999;}

/* BUTTONS
---------------------------------------------------------------------*/

a { -webkit-transition: 0.3s; transition: 0.3s;}
.button { font-family: 'steagalmedium'; background-color: #414042; color: #fff; display: inline-block; text-decoration: none; font-size: 15px; line-height: 1em; padding: 12px 25px; -webkit-transition: 0.3s; transition: 0.3s; border: 2px solid #414042; background-repeat: no-repeat; border-radius: 4px; box-shadow: 1px 1px 7px #666;}
.button.ghost { background-color: transparent; border-color: #fff;}
.button.ghost:hover { background-color: #fff; color: #1E4773;} 
.button.ghost.grey { border-color: #414042; color: #414042;}
.button.ghost.grey:hover { background-color: #414042; color: #fff;}
.button:hover { background-color: #333; color: #fff;}
a.text_link { margin: 30px 0; display: block; text-decoration: none; font-style: italic;}
a.text_link:hover { color: #2AACE2;}
.buy { background-image: url(images/icon-book.png); background-size: 30px; background-position: 17px 4px; padding: 15px 20px 15px 60px;}
.buy:hover { background-color: #333; border-color: 333; color: #fff;}

.buttons { display: inline-block; font-size: 0;}
.buttons .button { margin: 0 10px;}


/* HERO
---------------------------------------------------------------------*/

.hero { padding: 0; height: 100vh; overflow: hidden; box-shadow: 1px 1px 5px #ccc; position: relative; z-index: 1;}
.hero .banner { background-color: #FED920; font-family: 'chris_font_1regular'; position: fixed; width: 100%; left: 0; top: -100px; text-transform: uppercase; font-size: 26px; z-index: 2; box-shadow: 1px 0px 3px #999;}
.hero .inner { position: absolute; top: 40%; transform: translatey(-40%); -webkit-transform: translatey(-40%); width: 100%; opacity: 0;}
.hero h1 { width: 100%; max-width: 480px; margin: auto;}
.hero h1 img { width: 100%; height: auto;}
.hero h4 { margin: 10px 0; font-size: 34px; letter-spacing: 0;}
.hero h3 { font-size: 42px; line-height: 0.8em; letter-spacing: 0; text-align: center;}
.hero h5 { font-family: 'steagalbold', sans-serif; font-size: 33px; color: #FED920; line-height: 1em;}
.hero img.luke { position: absolute; width: 300px; right: 80px; bottom: 0;}
.hero .buttons { margin-top: 70px;}
.hero .buttons .button { width: 180px; box-sizing: border-box;}
.hero .buy { float: left; margin: 25px 0 0 25px; opacity: 0;}
.hero .scroll { position: absolute; bottom: 60px; left: 0; right: 0; margin: auto; cursor: pointer; transition: 0.3s; -webkit-transition: 0.3s; opacity: 0;}
.hero .scroll img { width: 55px; height: 55px; display: block; margin: auto;}
.hero .scroll:hover { bottom: 46px !important;}

.takeover { position: fixed; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; display: none; overflow: hidden; background-color: #fff;}
.takeover_video video { width: 100%; height: auto; position: relative; z-index: 0; top: 50%; transform: translatey(-50%); -webkit-transform: translatey(-50%);}
.takeover_video #stop_video { position: absolute; z-index: 1; top: 20px; right: 20px; width: 45px; cursor: pointer; transition: 0.3s; -webkit-transition: 0.3s;}
.takeover_video #stop_video:hover { opacity: 0.9;}

.header { overflow: hidden;}
.header img { opacity: 0.6;}
.header .wrapper { position: relative; z-index: 1;}
.header h1 { margin-bottom: 10px;}
.header .wrapper .button { margin-top: 20px;}
.header .buy { position: absolute; z-index: 2; top: 25px; left: 25px;}


/* LOOKOUT
---------------------------------------------------------------------*/

.lookout { background-color: #E6E7E8;}
.lookout img { width: 260px; display: inline-block; vertical-align: middle;}
.lookout .right { float: none; display: inline-block; vertical-align: middle; max-width: 800px; margin: 0 0 0 40px;}
.lookout h1 { font-size: 44px; margin: 0;}
.lookout h6 { font-family: 'steagalbold', sans-serif; margin: 17px 0 28px; font-size: 16px; text-transform: none;}


/* INTRO
---------------------------------------------------------------------*/

#intro .person { left: 50px;}


/* ABOUT
---------------------------------------------------------------------*/

#about p { width: 80%; margin: auto; margin-bottom: 35px;}
#about p strong { font-family: 'steagalbold_italic';}
#about p.bold { font-size: 18px; margin-bottom: 20px; letter-spacing: 0.03em; line-height: 1.4em;}

.get_started { float: left; width: 100%; margin: 50px 0 30px;}
.get_started .box, .get_started .border { display: inline-block; vertical-align: middle; margin: 0 45px; transition: 0.3s; -webkit-transition: 0.3s;}
.get_started .border img { width: 4px;}
.get_started .box { text-decoration: none; width: 18%;}
.get_started .box .image { position: relative; width: 100%; height: 120px; transition: 0.3s; -webkit-transition: 0.3s;}
.get_started .box img { width: 240px; left: 50%; transform: translatex(-50%); position: absolute; top: 0; bottom: 0;}
.get_started .pdf img { width: 105px;}
.get_started .video img { width: 240px;}
.get_started .sermons img { width: 100px;}
.get_started h3 { margin-top: 15px;}
.get_started .box:hover .image { transform: scale(1.05);}

.authors { text-align: center; box-shadow: 1px 1px 5px #ccc; position: relative; z-index: 1;}
.authors .author { position: relative; display: inline-block; vertical-align: top; width: 41%; margin: 0 4%;}
.authors .author .image { width: 200px; height: 200px; position: relative; overflow: hidden; display: inline-block; border: 2px dashed; border-radius: 200px; padding: 10px; box-sizing: border-box; margin-bottom: 25px; opacity: 0.99;}
.authors .author .image .inner { position: relative; overflow: hidden; width: 100%; height: 100%; border-radius: 200px; transition: 0.3s linear all;; -webkit-transition: 0.3s linear all;;}
.authors .author h3 { margin-bottom: 18px;}
.authors .author p { margin-bottom: 28px;}
.authors .author .button { margin-bottom: 26px;}
.authors .author .image:hover .inner { transform: rotate(5deg); -webkit-transform: rotate(5deg);}
.authors .people { width: 119px; position: absolute; z-index: 1; left: 50px; bottom: -50px;}

#quotes .quote_slider { width: 80%; margin: 0 auto;}
#quotes .person { right: 50px;}
.flex-control-nav { margin: 30px 0 0; padding: 0;}
.flex-control-nav li { display: inline-block; margin: 0 6px;}
.flex-control-nav li a { display: inline-block; width: 7px; height: 7px; border: 2px solid #414042; border-radius: 8px; text-indent: -999px; overflow: hidden;}
.flex-control-nav li a.flex-active { background-color: #414042;}


/* DEFAULT PAGE
---------------------------------------------------------------------*/

.main { width: 90%; margin: auto; text-align: left;}
.main p { margin-bottom: 30px;}
.main h3 { margin-bottom: 10px;}


/* SERMONS
---------------------------------------------------------------------*/

ul.sermon_list { float: left; width: 100%;}
ul.sermon_list li { width: 100%; text-align: left; font-size: 0; max-width: 850px; display: inline-block; border-bottom: 1px dashed; padding: 15px 0;}
ul.sermon_list h3 { display: inline-block; vertical-align: middle; width: calc(100% - 108px); padding-right: 50px; box-sizing: border-box; font-size: 23px;}
ul.sermon_list .file { display: inline-block; width: 108px; vertical-align: middle;}
ul.sermon_list li a { display: inline-block; width: 50px; height: 50px; background-size: 50px !important;}
ul.sermon_list li a:hover { transform: scale(1.05); -webkit-transform: scale(1.05);}
ul.sermon_list .listen { background: url(images/icon-play.png) no-repeat 0 0; margin-right: 8px;}
ul.sermon_list .download { background: url(images/icon-download.png) no-repeat 0 0;}
.sermons .wp-pagenavi { float: left; width: 100%; margin-top: 30px;}
.sermons .wp-pagenavi a, .sermons .wp-pagenavi span { border: none; padding: 5px 10px; margin: 0 2px;}
.sermons .wp-pagenavi span.current { background-color: #FED920; border-radius: 15px; color: #231F20; border: 2px solid #231F20;}


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

footer { float: left; width: 100%; background-color: #414042; padding: 17px 0; text-align: center;}
footer p { color: #fff; font-size: 13px;}
footer a { color: #fff; text-decoration: none;}
footer a:hover { color: #FED920;}
footer span { margin: 0 8px;}