/*

Theme Name: Kelsey Drake

Author: Kelsey Drake

Tags: Black, White, Gray, Blue, Orange, Responsive, Fixed Width

Description: Kelsey Drake theme for Wordpress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images,  beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
version: 21.12.18

*/
/* Global css */
* { margin: 0px; padding: 0px; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; box-sizing: border-box; -webkit-box-sizing: border-box; }

html, body { width: 100%; font-size: 20px; color: #454545; font-family: 'Palatino Linotype'; background: #fff; }

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; vertical-align: baseline; }

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section { display: block; }


[href^="tel"] { cursor: text; text-decoration: none; }


[href^="tel"]:hover { }


*::-webkit-input-placeholder{ opacity: 1; line-height: 27px; color: #707374;} 

*::-moz-placeholder{ opacity: 1; line-height: 27px; color: #707374; } 

*:-ms-input-placeholder{ opacity: 1; line-height: 27px; color: #707374;}

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

input, textarea { font-weight: 400; transition: all 0.3s; -webkit-transition: all 0.3s;   font-family: 'Lato';}
input:focus, textarea:focus, button:focus { outline: none; }

/* common */

a { color: #f83138; text-decoration: none; outline: none; transition: all 0.3s; -webkit-transition: all 0.3s; }

a:hover { color: #30b1c4; }

img { border: 0px; outline: none; display: block; max-width: 100%; height: auto; }

ul { list-style: none; margin: 0px; }

.clear { clear: both; overflow: hidden; }

p { line-height: 29px; font-size: 19px; padding-bottom: 30px; }


h1, h2, h3, h4, h5, h6 { margin: 20px 0;  margin-bottom: 20px; font-weight: 700; }
h1, .h1 { font-size: 47px; line-height: 1.2; }
h2, .h2 { font-size: 36px; line-height: 1.2; }
h3, .h3 { font-size: 28px; }
h4, .h4 { font-size: 20px;}
h5, .h5 { font-size: 20px;  }
h6, .h6 { font-size: 18px; }

.field, .wpcf7-text, textarea { }

textarea { padding: 10px; height: 100px; resize: none; }



input[type=number]::-webkit-inner-spin-button, 

input[type=number]::-webkit-outer-spin-button { 

  -webkit-appearance: none; 

  margin: 0; 

}

input[type="number"] {

    -moz-appearance: textfield;

}
.button { padding: 7px 20px; display: inline-block; text-transform: uppercase; line-height: 31px; border: 0; color: #fff; font-size: 20px; font-weight: 400; font-family: 'Palatino Linotype'; background: #f83138; }
.button:hover {background: #333; color: #fff; }
.centering { width: 100%; max-width: 1630px; margin: 0 auto; position: relative; padding: 0 15px;}

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; }

/* ### main container ### */
#mainCntr { width: 100%; }
#contentCntr {width: 100%; overflow: hidden; }

/* headerCntr */
#headerCntr { width: 100%; position: fixed; float: left; left: 0; right: 0; top: 0; z-index:999;background: #080a09;}
.home #headerCntr { background: none; }
#headerCntr.sticky { background: #000;min-height: auto;} 
.mobileMenu { display: none; }
#headerCntr .navigation { padding: 20px 0; width: 100%; text-align: center; transition: all ease-in-out .5s; }
.home #headerCntr .navigation { padding: 73px 0 0; }
#headerCntr.sticky .navigation { padding:20px 0 20px !important;}
#headerCntr .navigation.mobilenav { display: none; }
#headerCntr .navigation ul li { display: inline-block; }
#headerCntr .navigation ul li a { padding: 0 33px; font-size: 25px; line-height: 32px; color: #cccccc; font-family: 'Mohave'; font-weight: 400; text-transform: uppercase; display: block; position: relative; letter-spacing:1px; }
#headerCntr .navigation ul li a:hover,#headerCntr .navigation ul li a.active { color: #f83138; }
#headerCntr .navigation ul li a:after { content:""; width:2px; height:23px; background: #ccc; position: absolute; right:0; top:5px; }
#headerCntr .navigation ul li:first-child a { padding-right: 40px; }
#headerCntr .navigation ul li:last-child a:after { display: none; }

/* banner-box */
.banner-box {padding: 276px 0 220px; width: 100%;  background: url('./images/banner-bg.jpg')no-repeat; background-repeat: bottom center; background-size: cover; min-height: 1534px; float: left; }
.banner-box .banner-text { width: 100%; max-width: 815px;}
.banner-box h5 { margin: 0; font-size: 31px; line-height: 38px; color: #8f8f8f; font-family: 'Mohave'; font-weight:300; text-transform: uppercase; letter-spacing: .8px; }
.banner-box h1 { font-size: 60px; line-height: 70px; color: #fefefe; font-family: 'Mohave'; font-weight:600; }
.banner-box h4 { margin: 0 0 5px; font-size: 34px; line-height: 40px; color: #fff; font-family: 'Palatino Linotype'; font-weight:400; position: relative; left: -7px;}
.banner-box h2 { margin: 0 0 15px; font-size: 67px; line-height: 70px; color: #f83138; font-family: 'Palatino Linotype'; font-weight:700; position: relative;left: -7px; }
.banner-box h3 { margin: 20px 0 35px;  font-size: 23px; line-height: 40px; color: #fff; font-family: 'Palatino Linotype'; font-weight:400; }
.banner-box p { font-size: 18px; line-height: 34px; color: #b9b9b9; font-family: 'Palatino Linotype'; font-weight:400; }
.banner-box .button { width: 360px; height: 75px; font-size: 24px; line-height: 24px; letter-spacing: 2px; text-align: center; padding: 25px 15px; }	

.banner-box .title { width: 917px; margin: 17px 0 12px;position: relative;left: -35px}


.about-box { padding: 215px 0; width: 100%; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: top center; min-height: 1020px;}
.about-box .title { width: 100%; margin: 2px auto 60px; max-width: 952px; }
.about-box .about-block { width: 100%; max-width: 1239px; margin:0 auto; text-align: center; }
.about-box .about-block h2 { margin:0 0 70px; font-size: 132px; line-height:	131px; color: #f83138; }
.about-box .about-block h2 em {color: #fff; font-style: normal; }
.about-box .about-block p { font-size: 26px; line-height: 55px; color: #cccdcd; font-family: 'Palatino Linotype'; font-weight:400;  }


/* latest-blog */

.latest-blog { padding: 180px 0 160px; width: 100%; background: #0f171a; overflow: hidden; }
.latest-blog .title {margin: 0 0 38px;position: relative; left: -12px;}
.latest-blog .latest-block h2 { margin:0 0 20px; font-size: 132px; line-height:	131px; color: #f83138; }
.latest-blog .latest-block h2 em {color: #fff; font-style: normal; }
.latest-blog .latest-list { width: 100%; display: flex; flex-wrap: wrap; }
.latest-blog .latest-list .blogs { width: 32%; margin-right:2%;}
.latest-blog .latest-list .blogs:nth-child(3n) {margin-right:0%;}
.latest-blog .latest-list span.date { padding-bottom: 29px; font-size: 20px; line-height: 18px; color: #4a5357; font-family: 'Mohave'; font-weight: 400; display: block; }
.latest-blog .latest-list h3 { padding-bottom: 5px; margin:0 0 29px; font-size: 29px; line-height: 38px; color: #ffffff; font-family: 'Mermaid'; font-weight: 700; display: block;  position: relative; }
.latest-blog .latest-list h3 a { color: #ffffff; } 
.latest-blog .latest-list h3 a:hover { color: #f83138;}
.latest-blog .latest-list h3:after { content:""; border-bottom:2px solid #676f72; width: 362px; height: 2px; position:absolute; bottom:0; left:0;}
.latest-blog .latest-list p { padding-bottom: 36px; font-size: 16px; line-height: 27px; color: rgba(255,255,255,.70); display: block; font-family: 'Palatino Linotype'; font-weight: 400;  max-width: 365px;}
.latest-blog .latest-list a.read-more { font-size:16px; line-height: 26px; color: #f83138; font-weight: 400; font-family: 'Mohave';  text-transform: uppercase; letter-spacing: 1.8px; position: relative; left: -3px} 
.latest-blog .latest-list a.read-more:hover { text-decoration: underline; }
.latest-blog .latest-list .img { margin-bottom: 35px;}
.latest-blog .latest-list .img img { display: block; max-width: 100%; height: auto;}
.latest-blog .latest-list .text {width: 100%; max-width: 407px; margin-left: 23px; }
.latest-blog .latest-list .blogs:nth-child(3) .text { margin-left: 32px;}

/* stories-box */
.stories-box { padding: 180px 0 0; width: 100%; overflow: hidden; background: url('./images/story-bg.jpg')no-repeat; min-height: 1281px; background-size: cover; background-repeat: no-repeat; }
.stories-box .title { width: 100%; margin: 9px auto 0px; max-width: 830px; }
.stories-box .stories-block h2 { margin:0 0 20px; font-size: 132px; line-height:131px; color: #0f171a; text-align: center; }
.stories-box .stories-block h2 em {color: #fff; font-style: normal; }

.stories-box .stories-list { width: 100%; padding:115px 0px 0; position: relative;}
.stories-box .stories-list:after {content:"";background: url('./images/story-layer.png')no-repeat; position: absolute; left: -74px;right: 0;top: 490px; width: 1650px; height: 557px; }
.stories-box .stories-list .slick-arrow { position: absolute; top:42%; font-size:0px;border:0;cursor: pointer;  }
.stories-box .stories-list .slick-prev { background: url('./images/arrow-left.png')no-repeat; background-size: contain; width: 26px; height:44px; left:-20px; }
.stories-box .stories-list .slick-next { background: url('./images/arrow-right.png')no-repeat; background-size: contain; width: 26px; height:44px; right:-15px; }
.stories-box .stories-list img { max-width: 100%; height: auto; }
.stories-box .stories-list .links { text-align: center; margin-top: -33px;max-width: 256px; width: 100%; position: relative; left: -4px;}
.stories-box .stories-list .stories { width: 100%; max-width: 265px; margin:0 auto;}
.stories-box .stories-list .button { padding: width: 187px; height: 61px; font-size: 21px; line-height: 21px; font-family: 'Palatino Linotype'; letter-spacing:2px; padding: 20px 15px;}
.stories-box .stories-list .slick-slider { z-index:9; max-width: 1520px; margin:0 auto; }

/* joinmy-box */
.joinmy-box { padding: 247px 0; width: 100%; background: url('./images/news-bg.jpg')no-repeat; background-size: cover; min-height: 1063px;background-position: center; background-repeat: no-repeat;}
.joinmy-box .latest-block { width: 100%; max-width: 1348px; margin:0 auto; text-align: center; }
.joinmy-box .latest-block h4 { margin:0 0 45px; font-size: 39px; line-height: 36px; color: #4a5357; font-family: 'Mohave'; font-weight: 400; text-transform: uppercase; letter-spacing:2px;}
.joinmy-box .latest-block p { font-size: 52px; line-height: 72px; color: #fff; font-family: 'Mermaid'; font-weight: 700; }

.joinmy-box .latest-block .newsletter { width: 100%; max-width: 1104px; margin:53px auto 0; position: relative;}
.joinmy-box .latest-block .newsletter input[type="email"]{padding:60px 80px; font-size: 30px; line-height: 51px; color: #707374; font-family: 'Palatino Linotype'; font-weight: 400;  background: #fff; width: 100%; border:0;  height: 154px; }
.joinmy-box .latest-block .newsletter input[type="submit"] { width: 297px; background: #f83138; height: 154px; font-size: 29px; line-height: 29px; color: #fff;  font-family: 'Palatino Linotype'; font-weight: 400; letter-spacing:2px; position: absolute; right:0; top:0; text-transform: uppercase; border:0; cursor: pointer;  padding: 60px 20px; }
.joinmy-box .latest-block .newsletter input[type="submit"]:hover { background: #333; }

#BlogCntr { padding: 120px 0 50px;}
#BlogCntr .dateBar { padding-bottom: 15px;}
#BlogCntr .singleimage {  width: 100%; margin-bottom: 20px;}

.innerbanner.error404 { padding: 120px 0 0; text-align: center;}
.content-box { text-align: center; padding-bottom: 50px;}

.innerbanner { padding: 120px 0 50px; }
.innerbanner .innerbanner-block { text-align: center; }



/* footerCntr */

#footerCntr { padding: 112px 0 50px; width: 100%; overflow: hidden; background: #0f171a; }
.footertopBox { width: 100%; text-align: center; }
.footertopBox .flogo { margin-bottom: 50px;}
.footertopBox .flogo img { margin:0 auto; }
.footertopBox .social { margin-bottom: 45px; position: relative; left:5px;}
.footertopBox .social li { padding: 0 30px; display: inline-block;}
.footertopBox .social li.facebook a { background: url('./images/facebook-icon.png')no-repeat; width: 15px; height: 28px; display: block; } 
.footertopBox .social li.tiwtter a { background: url('./images/twitter-icon.png')no-repeat; width: 30px; height: 23px; display: block; } 
.footertopBox .social li.instagram a { background: url('./images/instagram-icon.png')no-repeat; width: 27px; height: 27px; display: block; } 
.footertopBox .social li a:hover { opacity:.7;}
.footertopBox p { padding-bottom: 0px; font-size: 20px; line-height:34px; color: rgba(255,255,255,.50); display: block; font-family: 'Palatino Linotype'; font-weight: 400; }