/*
Theme Name: Chrétiens
Theme URI: https://www.chretiens.info/
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[type=text], input[type=email], 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; }


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

@font-face {
    font-family: 'charterbold_italic';
    src: url('fonts/charter_bold_italic-webfont.eot');
    src: url('fonts/charter_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/charter_bold_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'charterbold';
    src: url('fonts/charter_bold-webfont.eot');
    src: url('fonts/charter_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/charter_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'charteritalic';
    src: url('fonts/charter_italic-webfont.eot');
    src: url('fonts/charter_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/charter_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'charterregular';
    src: url('charter_regular-webfont.eot');
    src: url('charter_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('charter_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


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

body { font-family: 'Lato', sans-serif; background: #F4F4F4; letter-spacing: 0.02em; position: relative;}
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;}
.left, .right { width: 48.5%;}
.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: 17px; line-height: 1.6em; color: #231F20;}
ul, ol { margin: 0; padding: 0;}
li { list-style: none;}
a, textarea, li { color: #231F20; outline: none;}
input, label { color: #231F20; border: 1px solid transparent; outline: none; font-size: 14px;line-height: 1em;}
input.ErrorField, textarea.ErrorField, select.ErrorField { border-bottom: 1px solid #B22026 !important; color: #B22026;}
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: 900; color: #231F20; font-family: 'Lato', sans-serif; letter-spacing: 0.05em; line-height: 1.3em;}
h1 { font-size: 30px;} 
h2 {}
h3 { font-size: 17px;}
h4 { font-size: 19px;}
h5 { font-size: 16px;}
h6 { font-size: 14px;}
strong { }
strong.caps { text-transform: capitalize;}
em { }
blockquote { padding: 0 0 0 25px; border-left: 5px solid #449fef; margin: 0 0 30px; font-style: italic; letter-spacing: 1px; line-height: 1.5em;}
blockquote p { font-size: 16px;}
::-moz-selection { background-color: #A3D4F9; color: #fff; }
::selection { background-color: #A3D4F9; color: #fff; }


/* General Styles */
.site_wrap { width: 100%; margin: 0 auto; background-color: #fff; position: relative;}
.site_wrap:after{ clear: both; content: ""; display: block;}
.wrapper { width: 93%; margin: 0 auto; max-width: 2000px;}
img.bg { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 0; max-height: none; max-width: none;}
.overlay { height: 100%;}
.overlay:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(15,30,50,0.2); transition: 0.5s ease; -webkit-transition: 0.5s ease;}
.overlay.dark:after { background-color: rgba(15,30,50,0.6);}
.overlay.darker:after { background-color: rgba(15,30,50,0.8);}
.skew { transform: skew(-20deg);}
.skew span { transform: skew(20deg); display: inline-block;}


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

/* Colours */
.blue { background-color: #449fef; color: #fff !important;}
.dark_blue { background-color: #14202D; color: #fff !important;}
.yellow { background-color: #FFCD06;}
.purple { background-color: #7D59A5; }
.green { background-color: #3CA59B;}
.red { background-color: #CC485B;}

a.blue:hover, input.blue:hover, .close.blue:hover, p.blue:hover { background-color: #4c88ba;}
a.dark_blue:hover, input.dark_blue:hover { background-color: #243544;}
a.yellow:hover, input.yellow:hover, p.yellow:hover { background-color: #E7BA0A;}
a.purple:hover, input.purple:hover, p.purple:hover { background-color: #6E4D91;}
a.green:hover, input.green:hover, p.green:hover { background-color: #349188;}
a.red:hover, input.red:hover, p.red:hover { background-color: #B64051;}


/* Buttons */
a { -webkit-transition: 0.3s; transition: 0.3s; text-decoration: none;}
.button, a.comment-reply-link, input.submit { font-weight: 700; font-size: 14px; padding: 10px 30px; line-height: 1em; letter-spacing: 0.05em; display: inline-block; box-sizing: border-box; text-align: center;}
.button.ghost, .main .button.ghost { border: 1px solid; color: #231F20; background-color: transparent; padding: 9px 30px;}
.button.ghost:hover { background-color: #DDE3E8;}
.button.full { width: 100%;}
a.continue { text-transform: uppercase; color: #449fef; font-size: 13px; font-weight: 700; letter-spacing: 0.1em;}
input.search { background: url(images/icon-search.png) no-repeat 0 0; background-size: 15px; width: 15px; height: 16px; position: absolute; right: 20px; top: 22px; transition: 0.3s; -webkit-transition: 0.3s;}
input.search:hover { transform: scale(1.1);}

.sticky_button { position: fixed; right: 0; z-index: 99; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%);}
.sticky_button a { padding: 13px 20px; text-transform: uppercase; font-size: 12px;}


/* Article styles */

.wp-caption { border: 1px solid #dedede; text-align: center; padding: 15px; margin: 0 0 20px; overflow: hidden; max-width: 100%; box-sizing: border-box;}
.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; }
ul.sitemap { margin: 20px 0 0 20px;}
ul.sitemap li { padding-left: 7px; list-style: disc; margin-bottom: 5px;}
ul.sitemap li a:hover { color: #449fef;}

/* Cookies */
.cloudten_cookies p { color: #fff; font-size: 12px; line-height: 16px; margin: 10px 0; font-family: 'Lato', sans-serif;}
.cloudten_cookies img { width: 12px;}
.cloudten_cookies a { background-color: #333; padding: 6px 13px; display: inline-block; color: #fff;}
.cloudten_cookies a:hover { background-color: #555; }


/* HEADER
---------------------------------------------------------------------------------- */

.top_bar { float: left; width: 100%; background-color: #DDE3E8; padding: 6px 0; position: relative; box-sizing: border-box; height: 34px;}
.top_bar .left { position: absolute; left: 0; top: 0; height: 100%; width: auto;}
.top_bar p { font-size: 11px; line-height: 1em; text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; float: left; padding: 11px 30px; height: 100%; box-sizing: border-box;}
.top_bar p.tagline { background-color: #B7BDC2; position: relative; padding: 11px 10px 11px 20px;}
.top_bar p.tagline:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 34px 20px 0 0; border-color: #b7bdc2 transparent transparent transparent; position: absolute; top: 0; right: -20px;}

.top_bar .social { float: right; padding-right: 20px;}
.social a { background-image: url(images/sprite-social.png); background-repeat: no-repeat; background-size: 121px; display: inline-block; vertical-align: middle; margin-left: 10px;}
.social a.facebook { background-position: 0 0; width: 7px; height: 15px;}
.social a.twitter { background-position: -7px 0; width: 15px; height: 13px;}
.social a.instagram { background-position: -22px 0; width: 13px; height: 13px;}
.social a.google { background-position: -36px 0; width: 15px; height: 14px;}
.social a.pinterest { background-position: -51px 0; width: 13px; height: 16px;}
.social a.youtube { background-position: -64px 0; width: 18px; height: 17px;}
.social a.linkedin { background-position: -82px 0; width: 15px; height: 15px;}
.social a.tumblr { background-position: -97px 0; width: 10px; height: 14px;}
.social a.rss { background-position: -107px 0; width: 14px; height: 14px;}
.social a:hover { opacity: 0.8;}

header { float: left; width: 100%; padding: 22px 0;}
header .logo { float: left; line-height: 0; width: 180px;}
header .logo img { width: 100%; height: auto;}
header h1, header h2 { display: inline-block; vertical-align: middle;}
header .menu { display: inline-block; vertical-align: middle; margin-left: 25px;}
header .menu li { float: left; margin-left: 15px; text-transform: uppercase; font-size: 11px; line-height: 1em; letter-spacing: 0.1em; font-weight: 700; position: relative;}
header .menu li a { padding-bottom: 40px;}
header .menu li a:hover, header .menu li.current-menu-item a { color: #449fef;}
header .menu li:hover > ul.sub-menu { display: block;}

header .menu-buttons { float: right; margin-right: 35px;}
header .menu-buttons li { display: inline-block; vertical-align: middle; margin-left: 15px; font-size: 14px;}
header .menu-buttons li a { display: inline-block; vertical-align: middle;}
header .menu-buttons li a.bible-audio { background: url(images/bible-audio.png) no-repeat center; background-size: 130px; text-indent: -999px; overflow: hidden; width: 130px; margin-top: 5px;}
header .menu-buttons li a.chretiens-tv { background: url("images/chretiens-tv.png") no-repeat center; background-size: 111px; text-indent: -999px; overflow: hidden; width: 111px;}
header .menu-buttons li a.chretiens-com { background: url("images/logo-chretiens-com.png") no-repeat center; background-size: 145px; text-indent: -999px; overflow: hidden; width: 145px; height: 35px;}
header .menu-buttons li a.download-app, header .menu-buttons li a.donate { border-radius: 20px; padding: 9px 20px;}
header .menu-buttons li a.download-app { border: 1px solid #dedede; background: url(images/icon-app-ltblue.png) no-repeat 20px 11px; background-size: 13px; padding-left: 45px;}
header .menu-buttons li a.donate { background: url(images/icon-heart.png) no-repeat 17px 12px #FFCD06; background-size: 21px; padding-left: 49px;}
header .menu-buttons li a:hover { opacity: 0.7;}
header .menu-buttons li a.download-app:hover { border-color: #999; opacity: 1;}

header .menu ul.sub-menu { display: none; position: absolute; left: 0; top: 44px; width: 200px; box-shadow: 0 2px 5px #666; z-index: 1;}
header .menu ul.sub-menu li { margin: 0; width: 100%;}
header .menu ul.sub-menu li a { background-color: #fff; padding: 10px 15px; border-top: 1px solid #dedede; float: left; width: 100%; box-sizing: border-box;}
header .menu ul.sub-menu li ul.sub-menu { left: 200px; top: 0;}

header .search_site { width: 15px; float: right; margin-top: 13px; cursor: pointer; transition: 0.3s; -webkit-transition: 0.3s;}
header .search_site:hover { -webkit-transform: scale(1.1); transform: scale(1.1);}

header .mobile_menu { width: 16px; float: right; margin: 15px 0 0 10px; cursor: pointer; transition: 0.3s; -webkit-transition: 0.3s;}
header .mobile_menu:hover { opacity: 0.8;}

nav { float: left; width: 100%; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede;}
nav .wrapper { position: relative;}
nav ul { float: left;}
nav ul li { float: left;}
nav ul li a, nav p { float: left; padding: 9px 12px; height: 40px; box-sizing: border-box; font-size: 14px; line-height: 1.4em;}
nav ul li a:hover, nav ul li.current-menu-item a, nav #menu-more li a:hover, nav #menu-more li.current-menu-item a { color: #449FEF;}

nav .menu-more { position: absolute; right: 0; top: 40px; width: 250px; z-index: 3; display: none; border: 1px solid #dedede;}
nav .menu-more li { width: 100%;}
nav .menu-more li a { width: 100%; background-color: #E8F6FD; border-left: none; border-right: none; border-bottom: 1px solid #dedede; height: auto;}
nav p { float: right; padding-right: 40px; background-size: 12px; cursor: pointer; border-left: 1px solid #dedede; border-right: 1px solid #dedede;}
nav p:after { content: ""; background: url(images/icon-arrow-down.png) 0 0; background-size: 12px; width: 12px; height: 5px; position: absolute; right: 12px; top: 18px; transition: 0.3s; -webkit-transition: 0.3s; }
nav p.open:after { -webkit-transform: rotate(180deg); transform: rotate(180deg);}

nav .menu-more-mobile, nav .menu-more-desktop { float: right;}
nav .menu-more-mobile { display: none;}


/* TAKEOVERS
---------------------------------------------------------------------------------- */

.takeover { position: fixed; z-index: 13; width: 100%; height: 100%; top: 0; left: 0; text-align: center; background: rgba(255,255,255,0.5); display: none;}
.takeoverSearch {}
.takeoverSearch .inner { max-width: 650px; width: 90%; box-sizing: border-box; margin: 0 auto; top: 50%; position: relative; transform: translateY(-58%); background: rgba(51,51,51,1); padding: 47px 68px 78px; display: inline-block; box-shadow: 3px 3px 5px #666;}
.takeoverSearch .inner h3 { color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 4px; line-height: 36px; background: url(images/icon-search-white.png) no-repeat 0 8px; display: inline-block; padding-left: 32px; background-size: 22px; text-transform: uppercase;}
.takeoverSearch .inner p { color: #fff; margin-bottom: 26px; font-size: 16px; font-weight: 300; letter-spacing: 0.03em;}
.takeoverSearch .inner form { width: 100%; position: relative;}
.takeoverSearch .inner input[type=text] { float: left; width: 100%; padding: 12px 15px; box-sizing: border-box; height: 48px;}
.takeoverSearch .inner input[type=submit] { position: absolute; right: 0; top: 0; height: 48px; text-transform: uppercase; padding: 0 20px; letter-spacing: 0.05em; width: 140px; overflow: hidden;}
.takeoverSearch .inner .pointy { width: 0; height: 0; border-style: solid; border-width: 9px 6px 9px 0; border-color: transparent #449fef transparent transparent; position: absolute; top: 15px; right: 140px; }
.takeoverSearch .inner input[type=submit]:hover + .pointy { border-color: transparent #4c88ba transparent transparent; }
.takeoverSearch .inner .close { width: 15px; height: 15px; position: absolute; border-radius: 60px; top: -10px; right: -10px; cursor: pointer; transition: 0.2s; -webkit-transition: 0.2s; padding: 10px;}

.takeoverMenu { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(68,159,239,0.97); margin: 0; text-align: center; padding: 90px 0 50px; overflow: scroll; box-sizing: border-box; z-index: 4;}
.takeoverMenu ul { float: left; width: 100%;}
.takeoverMenu ul li { float: left; width: 100%; position: relative;}
.takeoverMenu ul li a { float: left; width: 100%; color: #fff; padding: 10px 0; text-transform: uppercase; font-size: 16px;}
.takeoverMenu ul li a:hover { background-color: #4c88ba;}
.takeoverMenu ul li.current-menu-item a:before { content: "-- "; display: inline-block; margin-right: 3px;}
.takeoverMenu ul li.current-menu-item a:after { content: " --"; position: relative; top: auto; height: auto; width: auto; background: none; display: inline-block; margin-left: 3px;}
.takeoverMenu .close { position: absolute; top: 30px; right: 30px; width: 15px; background: none; cursor: pointer;}


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

.hero { float: left; width: 100%; padding: 30px 0;}
.feature { float: left; width: 60%; overflow: hidden; height: 430px; position: relative;}
.cat_slider { width: 100%;}

.hero .newsletter, .sidebar .newsletter { min-height: 430px; padding: 30px;}
.hero .newsletter form, .sidebar .newsletter form { float: left; width: 100%;}
.hero .newsletter form input[type=text], .hero .newsletter form input[type=email], .sidebar .newsletter form input[type=text], .sidebar .newsletter form input[type=email] { width: 100%; padding: 9px 12px; margin: 0 0 10px;}
.hero .newsletter form input[type=submit], .sidebar .newsletter form input[type=submit] { width: auto; text-indent: 0; background-image: none; font-weight: 800; padding: 0 35px;}
.hero .newsletter h3, .sidebar .newsletter h3 { font-size: 21px; margin: 0 0 6px;}
.hero .newsletter p, .sidebar .newsletter p { color: #fff; line-height: 1.5em; font-style: italic; margin-bottom: 13px;}
.hero .newsletter p.small, .sidebar .newsletter p.small { font-size: 11px; color: #fff; margin: 10px 0 0; float: left; width: 100%;}
.hero .flex-viewport { height: 100%;}
.hero ul.slides { height: 100%;}
.hero ul.slides li { height: 100%; overflow: hidden;}
.hero ul.slides li a { float: left; height: 100%; position: relative; width: 100%; color: #fff;}
.hero ul.slides li .text { position: absolute; top: 50%; transform: translatey(-50%); -webkit-transform: translatey(-50%); left: 50px; width: 500px; z-index: 1;}
.hero ul.slides li .text h2 { color: #fff; font-size: 33px; line-height: 1.1em; margin-bottom: 13px;}
.hero ul.slides li .text h5 { font-size: 12px; text-transform: uppercase; font-weight: 400; letter-spacing: 0.1em; padding: 6px 14px; display: inline-block; margin-bottom: 13px;}
.hero p.post_meta { color: #fff; font-size: 12px;}
.hero p.post_meta span.author:after { background-color: #fff;}
.hero .no_image:after { background-color: #231F20;}

.flex-direction-nav { position: absolute; z-index: 2; right: 25px; bottom: 25px; font-size: 0;}
.flex-direction-nav li { display: inline-block; line-height: 0; margin-left: 5px;}
.flex-direction-nav li a { background: url(images/slider-nav.png) no-repeat 0 0; background-size: 68px; text-indent: -999px; overflow: hidden; display: inline-block; width: 34px; height: 34px;}
.flex-direction-nav li a.flex-next { background-position: -34px 0;}
.flex-direction-nav li a:hover { opacity: 0.8;}
.flex-direction-nav li a.flex-disabled { opacity: 0.4; cursor: default; display: none;}


/* VIDEO BOXES
---------------------------------------------------------------------------------- */

.sidebar.video_boxes { float: left; width: 40%;}
.video_boxes .video_holder { float: left; width: 100%;}
.video_boxes .video_holder .post_video { float: left; width: calc(50% - 20px); margin: 0 0 20px 20px; box-sizing: border-box; position: relative;}
.post_video .image { height: 150px; margin-bottom: 7px; overflow: hidden;}
.post_video .overlay { display: block;}
.post_video h2 { font-size: 15px; font-weight: 300;}
.post_video img.play { position: absolute; z-index: 1; width: 50px; left: 0; right: 0; margin: auto; top: 0; bottom: 0; transition: 0.3s; -webkit-transition: 0.3s;}
.post_video:hover .overlay:after { background-color: rgba(15,30,50,0.5);}
.post_video .text { position: absolute; z-index: 2; background-color: #E8F6FD; bottom: 7px; left: 0; padding: 5px 10px;}
.post_video h5 { text-transform: uppercase; font-size: 11px; font-weight: 500; letter-spacing: 2px;}


/* MAIN CONTAINER
---------------------------------------------------------------------------------- */

.container { float: left; width: 100%; padding-bottom: 30px;}
.content { float: left; width: 68%;}
.content.full { width: 100%;}
.container.full .content { width: 100%;}
.main { float: left; width: 100%; box-sizing: border-box;}
.main h1 { margin-bottom: 20px;}
.main h2 { font-size: 22px; margin-bottom: 15px; line-height: 1.4em;}
.main h3 { margin-bottom: 15px;}
.main h4, .main h5 { text-transform: uppercase; font-size: 14px; letter-spacing: 1.5px; line-height: 1.6em; margin-bottom: 15px;}
.main h5 { color: #449fef;}
.main h6 { margin-bottom: 13px; font-weight: 700; font-size: 15px; font-style: italic;}
.main p { margin-bottom: 30px; white-space: pre-line;}
.main p.post_meta { margin-bottom: 10px;}
.main a { color: #449fef;}
.main a:hover { border-bottom: 1px dotted;}
.main img { max-width: 100%; height: auto;}
.main p a.button { margin: 0 10px 10px 0;}
.main p a.button:hover { border: none;}
.main p a.button.ghost:hover { border: 1px solid;}
.main hr { margin: 0 0 30px;}
.main ul, .main ol { padding-left: 20px; margin-bottom: 30px;}
.main ul li, .main ol li { padding-left: 8px; margin-bottom: 10px;}
.main ul li { list-style: disc;}
.main ol li { list-style: decimal;}
.main iframe { max-width: 100%;}
h3.rule { float: left; width: 100%; margin-bottom: 25px; font-size: 16px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; position: relative; text-align: left;}
h3.rule span { background-color: #fff; padding-right: 15px; position: relative; z-index: 1;}
h3.rule:after { content: "";  position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background-color: #999; z-index: 0;}

.follow_us { float: left; width: 100%; margin: 30px 0;}
.follow_us h3 { font-size: 23px;}


/* POSTS
---------------------------------------------------------------------------------- */

.buttons { margin-bottom: 30px;}
.main .buttons a:hover { border: none;}

p.post_meta { text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em;}
p.post_meta span.author { position: relative; padding-left: 18px;}
p.post_meta span.author:after { content: ""; width: 3px; height: 3px; background-color: #231F20; border-radius: 2px; left: 7px; position: absolute; top: 6px;}
.avatar { position: relative; width: 50px; height: 50px; overflow: hidden; border: 3px solid #fff; border-radius: 45px;}

.archive_header { float: left; width: 100%; text-align: center; padding: 10px 0 30px; position: relative;}
.archive_header:after { content: ""; width: 100%; height: 1px; background-color: #999; position: absolute; left: 0; top: 30px; z-index: 0;}
.archive_header .cat_title { display: inline-block; background: #fff; padding: 0 22px; position: relative; z-index: 1;}
.archive_header h5 { padding: 10px 22px; font-size: 17px;}
.archive_header p { margin: 30px 0 0;}
.archive_header a.button { margin-top: 30px;}
.archive_header h1 { display: inline-block; margin-top: 30px;}
.search .archive_header:after { display: none;}
.search .filter { margin-top: 0;}

.post_holder { float: left; width: 100%; position: relative; text-align: center;}
.post_holder h2 { border-bottom: 1px solid #dedede; margin-bottom: 25px; text-align: left; padding: 12px 0; border-top: 1px solid #dedede; font-family: 'charterbold';}
.post_holder .wp-pagenavi { display: inline-block; margin: 30px 0 10px; width: 100%}
.post_holder .wp-pagenavi span, .post_holder .wp-pagenavi a { border: none; display: inline-block; padding: 3px 7px;}
.post_holder .wp-pagenavi span.current { font-weight: normal; background-color: #449fef; color: #fff;}
.intro_posts { padding-bottom: 20px;}

.post_columns { }
.post_columns .left { width: calc(33.3% - 17px); margin-right: 26px;}
.post_columns .left:last-child { margin-right: 0;}

.post { float: left; width: 100%; position: relative; margin-bottom: 20px; box-sizing: border-box; text-align: left;}
.post .image { float:left; overflow: hidden; position: relative; width: 120px; height: 120px; margin-right: 20px;}
.post .image img { transition: 1.5s ease; -webkit-transition: 1.5s ease;}
.post .image h5,
.post .text h5.blue { position: absolute; bottom: 7px; left: 0; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; padding: 5px 10px; background-color: #E8F6FD; color: #231F20 !important;}
.post .text h5.blue { position: relative; margin-top: 10px; display: inline-block;}
.post .image:hover img { -webkit-transform: scale(1.1); transform: scale(1.1);}
.post .text { width: calc(100% - 140px); position: absolute; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); right: 0;}
.post .text h5 { font-size: 15px; margin-bottom: 5px;}
.post .text p { margin-top: 15px;}
.post a:hover { color: #324560;}

.post_small p.post_meta { }
.post.no_image .image h5 { top: 50%; width: auto; -webkit-transform: translatey(-50%); transform: translatey(-50%); bottom: auto; padding: 50px 10px;}

.post_large { margin-bottom: 25px;}
.post_large .image { height: 180px; width: 48%; margin-right: 30px;}
.post_large .text { width: calc(100% - 48% - 30px);}
.post_large .text h5 { margin: 10px 0 0; font-weight: 700; font-size: 26px;}
.post_large.no_image .text { width: 100%; position: relative; top: auto; -webkit-transform: none; transform: none;}
	
.post_medium .image { width: 100%; margin: 0 0 15px; height: 240px;}
.post_medium .text { position: relative; top: 0; -webkit-transform: none;  transform: none; float: left; width: 100%;}
.post_medium .text h5 { font-size: 28px; font-weight: 700; padding-right: 10px;}

.post_minimal .image { width: 200px; height: 130px; background-color: #DDE3E8}
.post_minimal .image h5 { display: none;}
.post_minimal .text { width: calc(100% - 220px);}
.post_minimal .text h5 { font-weight: 300;}
.post_minimal .text h6 { text-transform: uppercase; font-weight: 300; font-size: 10px; letter-spacing: 2px; margin-bottom: 11px; color: #449fef;}
.post_minimal.post-1 .image { width: 100%; margin: 0 0 15px; height: 240px;}
.post_minimal.post-1 .text { position: relative; top: 0; -webkit-transform: none; transform: none; float: left; width: 100%;}
.post_minimal.post-1 .text h5 { font-size: 18px;}
.post_minimal.post-1 .image h5 { display: block;}
.post_minimal.post-1 .text h6 { display: none;}

.post_box { display: inline-block; vertical-align: middle; margin: 15px; width: calc(33.3% - 30px); height: 510px; padding: 30px; border: 1px solid #999;}
.post_box .image { width: 100%; height: 190px; background-color: #DDE3E8;}
.post_box .avatar { position: absolute; left: 10px; top: -35px;}
.post_box .text { position: relative; top: 0; -webkit-transform: none;  transform: none; width: 100%; float: left;}
.post_box .text h5 { font-size: 16px; margin-bottom: 13px;}
.post_box .text p.post_meta { margin: 27px 0 12px 0;}
.post_box a.continue { position: absolute; bottom: 30px; left: 30px;}

.direct { box-sizing: border-box; margin-bottom: 30px;}
.direct h2 { background: url("images/icon-clock.png") no-repeat left center; background-size: 36px; padding-left: 49px; margin-bottom: 0;}
.direct h4 { background-color: #449fef; color: #fff; font-size: 17px; position: absolute; left: -1px; top: -19px; padding: 6px 18px;}
.direct .post { margin-bottom: 0; border-bottom: 1px solid #dedede; padding: 25px 15px;}
.direct .post .info { display: inline-block; width: calc(100% - 85px); vertical-align: middle;}
.direct .post h5 { display: inline-block; font-size: 21px; vertical-align: middle; margin-right: 15px; width: 65px; font-family: 'charterbold';}
.direct .post h6 { color: #449fef; text-transform: uppercase; font-weight: 300; font-size: 11px; letter-spacing: 2px; margin-bottom: 6px;}
.direct .post p { display: inline-block; vertical-align: middle; font-weight: 400; font-size: 14px; line-height: 1.5em;}
.direct .post p strong { color: #449fef; text-transform: uppercase; font-size: 12px; letter-spacing: 0.1em;}

.related_posts { float: left; width: 100%; background-color: #DDE3E8; padding: 50px 0 40px;}
.related_posts .post_box { background-color: #fff; border: none;}
.related_posts h3.rule { text-align: center; font-size: 26px; text-transform: unset; font-weight: 900; letter-spacing: 0.05em;}
.related_posts h3.rule span { padding: 0 15px; background-color: #DDE3E8;}

.related_posts.in_content { background: none;}
.related_posts.in_content h3.rule span { background-color: #fff;}
.related_posts.in_content .post_box { border: none; padding: 0; background-color: #F2F2F2; margin: 10px; width: calc(33% - 18px); height: 430px;}
.related_posts.in_content .post_box .image { height: 150px;}
.related_posts.in_content .post_box .text { padding: 0 20px; box-sizing: border-box;}
.related_posts.in_content .post_box p.post_excerpt { display: none;}
.related_posts.in_content .post_box a.continue { left: 20px; bottom: 20px;}

.single .feature { width: 60%;}
.single .container { padding-top: 30px;}
.single .main { margin-top: 30px; padding-right: 30px;}
.single .content.full { margin-bottom: 30px;}
.single .content.full .main { margin-top: 0;}
.single .tags { margin: 20px 0 10px;}
.single .comments { float: left; width: 100%; border-top: 1px solid #dedede; padding-top: 30px;}
.comments img { display: inline-block; vertical-align: middle; border: 1px solid #dedede; margin-right: 7px;}
.comments label { font-size: 15px; display: block; margin-bottom: 10px;}
.comments p.comment-form-cookies-consent label { display: inline-block; margin: 0 0 0 10px;}
.comments a.comment-reply-link, .comments input.submit { background-color: #449fef; color: #fff;}
.comments a.comment-reply-link:hover, .comments input.submit:hover { background-color: #4c88ba; border: none;}
.comments .comment-respond { float: left; width: 100%;}
.comments input[type=text], .comments textarea { border: 1px solid rgb(222, 222, 222); padding: 10px 13px;}

.share { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: auto; padding: 10px 20px; box-sizing: border-box;}
.share .wrapper { position: relative; z-index: 1; width: 100%;}
.share .share_icons { float: left; font-size: 0; display: none;}
.share .share_icons h5, .share .share_icons a { display: inline-block; vertical-align: middle;}
.share .share_icons h5 { color: #fff; text-transform: uppercase; font-size: 12px; letter-spacing: 0.1em; margin-right: 10px; font-weight: 700;}
.share .share_icons a { background: url(images/sprite-social-white.png) no-repeat 0 0; background-size: 104px; width: 26px; height: 26px; margin-right: 4px;}
.share .share_icons a.twitter { background-position: -26px 0;}
.share .share_icons a.google { background-position: -52px 0;}
.share .share_icons a.email { background-position: -78px 0;}
.share .share_icons a:hover { opacity: 0.8;}
.share p { float: right; color: #fff; text-transform: uppercase; font-size: 10px; margin-top: 4px; letter-spacing: 0.1em;}

.filter { float: left; width: 100%; margin: 45px 0 5px; font-size: 0;}
.filter .browse { display: inline-block; float: none; width: 300px; text-align: left; margin: 8px; height: 60px;}
.filter .browse ul.top { position: absolute; z-index: 2; top: 59px; border: 1px solid #999; left: -1px;}
.filter .browse form { height: 100%;}
.filter .browse form input[type=text] { height: 100%;}

.soutenir { float: left; width: 100%; text-align: center; background-color: #F2F2F2; padding: 30px; box-sizing: border-box;}
.soutenir .button { background-color: #449fef; color: #fff; margin-bottom: 20px; text-transform: uppercase; padding: 23px; box-sizing: border-box; font-size: 16px; border-radius: 6px;}
.soutenir .button:hover { border: none;}
.soutenir p:last-child { margin: 0;}


/* SIDEBAR & WIDGETS
---------------------------------------------------------------------------------- */

.sidebar { float: right; width: 29%;}
.sidebar-posts { width: 100%; margin-top: 30px;}
.sidebar .box { overflow: hidden; position: relative; float: left; width: 100%; margin-bottom: 30px; height: 260px;}
.sidebar .box .text { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; padding: 20px; box-sizing: border-box; transition: 0.5s ease; -webkit-transition: 0.5s ease;}
.sidebar .box .text h4 { color: #fff; font-size: 27px; }
.sidebar .box .text p { color: #fff; height: auto; max-height: 0; overflow: hidden; transition: max-height 0.6s; -webkit-transition: max-height 0.6s; margin: 10px 0 -10px;}
/*.sidebar .box:hover p { max-height: 260px; margin-bottom: 0;}*/
.sidebar .box:hover .overlay:after { background-color: rgba(68,159,239,0.8);}
.sidebar .box:hover .text { }
.sidebar .post_holder { margin-bottom: 30px;}

.browse { float: left; width: 100%; box-sizing: border-box; border: 1px solid #999; margin-bottom: 30px; position: relative;}
.browse.author {}
.browse .avatar { position: absolute; right: 20px; width: 80px; height: 80px; top: 10px;}
.browse h4 { float: left; width: 100%; padding: 17px 25px; box-sizing: border-box; background-color: #449fef; color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;}
.browse .text { padding: 25px; font-size: 0; float: left; width: 100%; box-sizing: border-box;}
.browse h6 { margin: 0 0 15px; width: calc(100% - 80px);}
.browse p { margin-bottom: 20px; font-size: 14px;}
.browse a.button { font-size: 12px; margin-right: 10px; padding: 9px 20px;}

.browse h5 { float: left; width: 100%; padding: 20px; box-sizing: border-box; font-weight: 500; font-size: 14px; cursor: pointer; position: relative;}
.browse h5:after { content: ""; background: url(images/icon-arrow-down.png) no-repeat 0 0; background-size: 12px; width: 12px; height: 5px; position: absolute; right: 22px; top: 30px; transition: 0.3s; -webkit-transition: 0.3s;}
.browse h5.border { border-top: 1px solid #999;}
.browse h5.open:after { -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.browse ul.top { float: left; width: 100%; display: none;}
.browse ul.top li { float: left; width: 100%; position: relative; font-size: 14px;}
.browse ul.top li a { float: left; width: 100%; padding: 10px 20px; background-color: #EAEDEF; box-sizing: border-box; border-top: 1px solid #dedede;}
.browse ul.top li a:hover { background-color: #DDE3E8;}
.browse ul.children { display: none; width: 100%; box-sizing: border-box;}
.browse ul.children li a { padding-left: 30px; padding-right: 40px;}
.browse ul.children li ul li a { padding-left: 50px;}
.browse ul.children li ul li ul li a { padding-left: 65px;}
.browse ul li span a { padding: 0 !important; border: none; background: none;}
.browse ul li.has_children > span.toggle, .browse ul li.has_children > span span.toggle { background: url(images/icon-arrow-down.png) no-repeat 0 0;     background-size: 13px; width: 13px; height: 6px; position: absolute; right: 21px; top: 22px; transition: 0.3s; -webkit-transition: 0.3s;}
.browse ul li.has_children span.toggle.open { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.browse-category ul li.has_children span.toggle { top: 18px;}

.browse form { float: left; width: 100%; position: relative;}
.browse input[type=text] { float: left; width: 100%; padding: 20px; box-sizing: border-box; font-size: 14px;}
.browse input[type=submit] {}

.sidebar .social { margin-bottom: 15px;}
.sidebar .social a { margin-left: 0; margin-right: 10px;}

.widget { float: left; width: 100%; border: 1px solid #231F20; padding: 20px; box-sizing: border-box; margin-bottom: 30px !important; text-align: left;}
.widget h5 { margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px;}
.widget_area { float: left; width: 100%;}
.widget_header { margin-top: 30px !important;}
.widget_area.columns { text-align: center;}
.widget_area.columns .widget { float: none; display: inline-block; vertical-align: middle; width: calc(33.3% - 30px); margin: 15px;}
.widget img { max-width: 100%; height: auto;}


/* CONTACT PAGE
---------------------------------------------------------------------------------- */

form.contact { float: left; width: 100%; margin: 0 0 30px;}
form.contact .field { float: left; width: 48%; margin: 2% 4% 2.5% 0; position: relative; text-align: left;}
form.contact .field:nth-child(2n) { margin-right: 0;}
form.contact .field.full { width: 100%; margin: 2% 0 30px;}
form.contact .field .text { float: left; width: 100%; border: none; border-bottom: 1px solid #999; background: none; font-size: 15px; line-height: 18px; letter-spacing: 1px; padding-bottom: 15px;}
form.contact .field .text:focus { border-color: #449fef; color: #449fef;}
form.contact .field .styled_dropdown { position: relative; cursor: pointer;}
form.contact .field .styled_dropdown .text { overflow: hidden; position: relative; z-index: 0;}
form.contact input[type=submit] {}
form.contact .field span.error, form.contact label { position: absolute; left: 0; bottom: -5px; font-size: 12px; color: #1B6384; opacity: 0; transition: 0.2s;}
form.contact label { color: #449fef;}
form.contact .field input.error ~ span,
form.contact .field textarea.error ~ span,
form.contact .field select.error ~ span,
form.contact .field input:focus ~ label,
form.contact .field textarea:focus ~ label { bottom: -23px; opacity: 1; }
form.contact .g-recaptcha { margin-bottom: 25px;}



/* DONATE
---------------------------------------------------------------------------------- */

.give-form-wrap {}
.main .give-form-wrap legend { margin: 15px 0 20px; float: left; width: 100%; font-size: 17px;}
.main .give-form-wrap p { white-space: normal;}
.main .give-form button, .main .give-form input[type=submit] { background-color: #449fef; color: #fff; border: none; padding: 12px 20px; line-height: 1em;}
.main .give-form button:hover, .main .give-form input[type=submit]:hover { background-color: #4c88ba;}
.main .give-form .give-donation-total-label { font-size: 15px !important; font-weight: 700;}


/* PARTNERS
---------------------------------------------------------------------------------- */

.partners { float: left; width: 100%;}
.partner { float: left; width: 100%; margin-bottom: 40px; padding-top: 40px; border-top: 1px solid #999;}
.partner .image { float: left; margin: 0 20px 20px 0; max-width: 200px;}
.partner .image:hover { opacity: 0.8;}
.partner img { width: 100%; height: auto;}
.partner .text { float: right; width: calc(100% - 250px);}
.partner h5 { text-transform: uppercase; margin-bottom: 15px; letter-spacing: 0.1em;}
.partner p { margin-bottom: 30px;}


/* ADVERTS
---------------------------------------------------------------------------------- */

.advert { float: left; width: 100%; margin-bottom: 30px; text-align: center;}
.ad_top { display: block; max-width: 1400px; margin: 20px auto; overflow: hidden;}
.ad_left { position: absolute; left: -180px; width: 160px; top: 20px;}
.ad_right { position: absolute; right: -180px; width: 160px; top: 20px;}
.ad_sb { float: left; width: 100%; margin-bottom: 30px;}
.ad_article { float: left; width: 100%; margin-bottom: 30px;}
.ad img { float: left; width: 100%; height: auto;}

.ad_sitewrap { position: absolute; left: 0; top: 0; width: 100%; z-index: 0;}
.ad_sitewrap img { width: 100%;}

.site_wrap.wrap_on { top: 310px;}


/* TEAM
---------------------------------------------------------------------------------- */

.team_page .main { text-align: center;}
.team_page .main h1 { text-transform: uppercase; font-weight: 100; letter-spacing: 3px; font-size: 25px; margin: 40px 0 60px;}
.team_page .main h2 { color: #3C9BC6; text-transform: uppercase; margin: 50px 0 0; font-size: 20px; letter-spacing: 3px; display: inline-block;}
.team_page .main h4 { text-transform: none; margin-top: 6px; font-size: 16px;}
.team_container {}
.team_members { margin: 40px 0 20px; font-size: 0; float: left; width: 100%;}
.team_member { display: inline-block; width: 215px; vertical-align: top; margin: 20px; font-size: 0;}
.team_member .team_image { width: 170px; overflow: hidden; height: 170px; border-radius: 200px; display: inline-block; margin-bottom: 25px;}
.team_member .team_image img { max-width: none; width: 300px;}
.team_member .team_image:hover { border: none; opacity: 0.9;}
.team_member .team_bio { position: relative;}
.team_member .seemore { background: url("images/seemore.png") no-repeat 0 0; width: 35px; height: 35px; background-size: 35px; display: inline-block; position: absolute; top: -45px; left: 0; right: 0; margin: auto;}
.team_member .seemore:hover { border: none; top: -48px;}
.team_member h5 { color: #231F20; margin-bottom: 3px; letter-spacing: 3px;}
.team_member p { font-size: 14px;}
.single-team .feature { height: 550px;}
.backtoteam { margin: 20px 0 30px;}


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

.editor { float: left; width: 100%; margin-bottom: 30px; text-align: center;}
.editor .inner { position: relative; float: left; width: 100%; padding: 70px 0; overflow: hidden;}
.editor .text { position: relative; z-index: 1; width: 500px; margin: auto;}
.editor .text h4 { color: #fff; font-size: 30px; margin-bottom: 20px;}
.editor .text p { color: #fff; margin-bottom: 30px;}

.newsletter { background-color: #449fef; padding: 17px 0; box-sizing: border-box;}
.newsletter.full { float: left; width: 100%;}
.newsletter h3 { display: inline-block; vertical-align: middle; color: #fff; margin-right: 15px; font-size: 16px; font-weight: 100;}
.newsletter form { display: inline-block; vertical-align: middle; font-size: 0; width: calc(100% - 230px);}
.newsletter form input[type=text], .newsletter form input[type=email] { width: calc(33% - 34px); padding: 9px 12px; margin-right: 15px; color: #449fef; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; height: 38px; box-sizing: border-box; display: inline-block; vertical-align: middle;}
.newsletter form input[type=submit] { background: url(images/icon-arrow-black.png) no-repeat center center #FFCD06; background-size: 8px; height: 38px; display: inline-block; vertical-align: middle; width: 38px; text-indent: -999px;}
.newsletter form input[type=submit]:hover { background-color: #E7BA0A;}

footer { float: left; width: 100%; background-color: #DDE3E8; padding: 40px 0;}
footer h3 { margin-bottom: 20px; font-family: 'charterbold';}
footer .col { float: left; width: 33.3%; padding-right: 50px; box-sizing: border-box;}
footer .col2 { width: 35%;}
footer .col3 { width: 30%; padding-right: 0;}
footer .col1 img { margin-bottom: 12px; width: 200px;}
footer p { margin-bottom: 13px; font-size: 14px;}
footer p.small { margin: 0; font-size: 11px; font-style: italic;}
footer p span { position: relative; padding-left: 9px; margin-left: 5px;}
footer p span:before { content: ""; width: 2px; height: 2px; background-color: #231F20; position: absolute; left: 0; top: 6px;}
footer .col1 p a:hover, footer li a:hover, footer li.current-menu-item a { color: #449fef;}
footer ul { float: left; width: 100%; margin-bottom: 20px;}
footer ul li { float: left; width: 50%; padding-right: 25px; box-sizing: border-box; margin-bottom: 8px; font-size: 14px; line-height: 1.3em;}
footer .social a { margin: 0 6px 0 0;}
.tags { float: left; width: 100%;}
.tags h5 { display: inline-block; vertical-align: middle; margin: 0 20px 4px 0; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 0.1em; color: #231F20;}
.tags p { display: inline-block; margin: 0 5px 8px 0; transform: skew(-20deg); transition: 0.3s; -webkit-transition: 0.3s; font-size: 15px;}
.tags a { color: #fff; padding: 5px 14px; display: inline-block; transform: skew(20deg);}
.tags a:hover { border: none;}