/* ==========================================================================
   Table of Contents
   ========================================================================== */

/*

    1.  Includes
    2.  General - Base Styles
    3.  Utilities
    4.  General - Main Styles
    5.  Single Post
    6.  Third Party Elements
    7.  Pagination
    8.  Footer
    9.  Menus
    10. Read Progress
    11. Media Queries (Tablet)
    12. Media Queries (Mobile)

 */

/* ==========================================================================
   1. Includes
   ========================================================================== */

@import url(normalize.css);


/* ==========================================================================
   2. General - Base styles
   ========================================================================== */

html { height: 100%; max-height: 100%; }

body { height: 100%; max-height: 100%; font-family: 'Lato', serif; font-size: 16px; font-weight: 400; line-height: 140%; color: #222222; }

h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; line-height: 115%; padding: 0; margin: 20px 0 10px 0; font-weight: 700; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #000000; }

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration: none; }  

h1 { font-size: 50px; margin-bottom:20px; }

h2 { font-size: 42px; }

h3 { font-size: 28px; }

h4 { font-size: 20px; }

h5 { font-size: 22px; }

a { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;  }

a:hover { text-decoration: underline;}

a:focus { outline: none; text-decoration: none; }

a.blog-logo, a.blog-logo:hover { color:#ffffff; }

p { margin: 8px 0 25px; padding: 0; }

ul, ol, dl { margin: 15px 0; }

ol ol, ul ul,
ul ol, ol ul { margin: 5px 0; }

dl dt { float: left; width: 180px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap;  font-weight: bold; margin-bottom: 1em; }

dl dd { margin: 0 0 10px 200px; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #dddddd; margin: 40px 0; padding: 0; }

blockquote { font-size: 18px; font-style: italic; padding: 35px 0 35px 75px; border-left: none; position: relative; margin: 40px 0; }

blockquote p { font-weight: 400; line-height: 1.44; position: relative; }

blockquote p:after { position: absolute; content: "\201C"; left: -60px; top:-22px; font-style: normal; font-size: 90px; }

blockquote:before { position: absolute; height: 1px; width: 55px; top:0; left: 75px; }

blockquote:after { position: absolute; height: 1px; width: 55px; bottom:0; left: 75px; }

code, tt { padding: 1px 3px; font-family: Inconsolata, monospace, sans-serif; font-size: 15px; white-space: pre-wrap; border: 1px solid #E3EDF3; background: #F7FAFB; border-radius: 2px; }

pre { margin: 20px 0; padding: 20px; border: 1px solid #E3EDF3; width: 100%; font-family: Inconsolata, monospace, sans-serif;
font-size: 15px; white-space: pre; overflow: auto; background: #F7FAFB;
border-radius: 3px; -moz-box-sizing: border-box; box-sizing: border-box; }

pre code, tt { font-size: inherit; white-space: -moz-pre-wrap; white-space: pre-wrap; background: transparent; border: none; padding: 0; }

table { -moz-box-sizing: border-box; box-sizing: border-box; margin: 40px 0; width:100%; max-width: 100%; background-color: transparent; }

table th { font-size:16px; border:1px solid #dddddd; color:#ffffff; }

table th, table td { vertical-align: top; padding:15px; text-align:left; }

table td { vertical-align: top; text-align:left; border:1px solid #dddddd;  }

table tr.even, table tr.odd  { border-bottom: 1px solid #dddddd; background:none; }

iframe, .fluid-width-video-wrapper { display: block; margin: 20px 0; }

.fluid-width-video-wrapper iframe { margin: 0; }


/* ==========================================================================
   3. Utilities
   ========================================================================== */

.hidden { text-indent: -9999px; visibility: hidden; display: none; }

.vertical { display: table-cell; vertical-align: middle; }


/* ==========================================================================
   4. General - Main styles
   ========================================================================== */

.site-head { position: relative; display: table; width: 100%; margin-bottom: 50px; text-align: center; color: #fff;
background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

.blog-logo { text-decoration: none; }

.blog-logo img { display: block; max-height: 100px; width: auto; margin: 0 auto;  padding:0 0 20px 0; line-height: 0; }

.blog-logo img:hover {  opacity: 0.8; filter: alpha(opacity=80);
-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.blog-title { padding: 0 0 20px 0; font-size: 32px; font-weight: bold; display:inline-block; }

.blog-description { margin: 0; font-size: 18px; line-height: 150%; font-weight: 300; }

h1.blog-title { margin:0; }

h2.blog-description { color: #ffffff; font-weight:700; }

.post { position: relative; margin: 0 0 40px 0; padding: 0 0 40px 0; word-break: break-word; hyphens: auto; }

.post-title { margin:0 0 5px 0; }

.post-title a { text-decoration: none; }

.post-excerpt p { margin: 15px 0 0 0; line-height: 160%; }

header { position:relative;  }

.page-subtitle { margin-top: 0; }

time { color: #aaaaaa; font-style: italic; font-size: 12px; }

.navigation-menu time { font-size:11px; }

time .fa, .post-tags .fa, .post-tags.inside .fa { padding:0 5px 0 0; }

.caption.divider { margin: 50px auto; text-align:center; padding: 50px 0; position:relative; width: 70%; }

.caption h1 { font-weight: 900; text-transform: uppercase; color: #ffffff; margin: 0 0 10px 0; padding:0 20px; }

.divider { padding-bottom: 25px; margin-bottom: 25px; position: relative; }

.divider:after { height: 1px; width: 50px; content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -25px; background-color: #dddddd; }

.full-divider { padding:0 0 50px 0; margin: 0 0 50px 0; border-bottom: 1px solid #dddddd;}

a.home { color:#ffffff; font-size:18px; text-decoration:none; } a.home i { padding:0 5px 0 0; }

.caption.divider:before { position: absolute; content: ""; height: 1px; width: 100px; background: #ffffff; top: 0; left: 50%; margin-left: -50px; }

.caption.divider:after { width: 100px; background: #ffffff; margin-left: -50px; }


/* ==========================================================================
   5. Single Post
   ========================================================================== */

.post-template .post { margin-top: 0; border-bottom: none; padding-bottom: 0; }

.post-template .post:after { display: none; }

.post-content img { display: block;  max-width: 100%; margin: 0 auto; height: auto; }

.post-tags, .post-tags.inside { font-size: 14px; padding: 20px 0 0 0; color:#aaaaaa; font-style: italic; }

.post-tags.inside { padding:0; color:#ffffff; }

.post-meta.inside time { color:#ffffff; }

.share { width:100%; }

.share h4 { margin:0; font-weight:300; } .share h4.progress-title { margin:0 0 10px 0; }

.share a { font-size: 24px; display: inline-block; margin: 1.4rem 1.6rem 1.6rem 0; color: #222222; text-decoration: none; }

.post-footer { position: relative; margin: 60px 0 0 0; padding: 60px 0 0 0; border-top:1px solid #dddddd; text-align:center; }

.author { text-align: center; margin:0; color: #000000; }

.author img { max-width: 160px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; margin: 0 auto 20px; }

.author h2 { margin: 0; text-transform: none; font-size:30px; font-weight:300; }

.author .author-title { font-size: 14px; text-transform: uppercase;  }

.author i { display: block; font-size: 20px; }

.author .author-email a { color: #000000; word-wrap: break-word; word-break: break-all; white-space: pre; white-space: pre-wrap; }

.author .author-email a:hover { text-decoration: none; color: #22ae69; }

.author-page h2 { font-weight:300; margin:0; }

.author-page .large { font-size: 24px; font-weight: 300; }

ul.check-list { list-style: none; margin: 10px 0; padding: 0; }

ul.check-list li { margin: 0 0 15px 0; }

ul.check-list li i { display: inline-block; width: 30px; height: 30px; -webkit-border-radius: 100%; margin-right: 20px;
-moz-border-radius: 100%; border-radius: 100%; color: #fff; line-height: 30px; text-align: center; }

/* ==========================================================================
   6. Third Party Elements
   ========================================================================== */

#disqus_thread { text-align:center;  }

#disqus_thread .fa { padding: 0 10px 0 0; }

#map-canvas { height: 470px; display: none; }

#map-canvas img { max-width: inherit; }

.mapswitch-wrapper { width: 80px; text-align:center; margin: 0 auto; }

.mapswitch-text { font-size: 13px; text-align: center; margin: 3px 0; }

.mapswitch { position: relative; width: 80px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; }

.mapswitch-checkbox { display: none; }

.mapswitch-label { display: block; overflow: hidden; cursor: pointer; border: 1px solid #000; -webkit-border-radius: 50px; 
-moz-border-radius: 50px; border-radius: 50px; margin-bottom: 3px;}

.mapswitch-inner { width: 200%; margin-left: -100%; display: block; -moz-transition: margin 0.1s ease-in 0s; -webkit-transition: margin 0.1s ease-in 0s;
-o-transition: margin 0.1s ease-in 0s; transition: margin 0.1s ease-in 0s; }

.mapswitch-inner:before, .mapswitch-inner:after { float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 12px; color: white;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.mapswitch-inner:before { content: "";  color: #FFFFFF; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }

.mapswitch-inner:after { content: ""; background-color: #222222; color: #FFFFFF; }

.mapswitch-switch { width: 21px; margin: 6px; border: 2px solid #95a5a6; -webkit-border-radius: 50px; 
-moz-border-radius: 50px; border-radius: 50px; position: absolute; top: 0; bottom: 0; right: 46px; -moz-transition: all 0.1s ease-in 0s; 
-webkit-transition: all 0.1s ease-in 0s; -o-transition: all 0.1s ease-in 0s; transition: all 0.1s ease-in 0s; display: block; }

.mapswitch-checkbox:checked + .mapswitch-label .mapswitch-inner { margin-left: 0; }

.mapswitch-checkbox:checked + .mapswitch-label .mapswitch-switch { right: 0px; border: 2px solid #FFFFFF; background: #FFFFFF; }

#toTop { position: fixed; right: 30px; bottom: 30px; color: #222222; display: none; width: 40px; height: 40px; 
-webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid #222222; cursor: pointer; text-align: center; 
-webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; z-index: 100; }

#toTop i { width: 100%; height: 100%; font-size: 18px; line-height: 37px; }

#toTop:hover { border: 2px solid #7f8c8d; color: white; }

#navigation.affix { position: relative; }
#share.affix { position: relative; }

@media (min-width: 992px) {
#navigation.affix { position: fixed; top: 20px; }
#share.affix { position: fixed; top: 20px; }
}

.panel-group .panel { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }

.panel-default>.panel-heading { color: #ffffff;  padding: 15px; outline: none; border: none;
-webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; width: 100%; }

.panel-default>.panel-heading a:hover { color:#ffffff; text-decoration:underline; }

/* ==========================================================================
   7. Pagination
   ========================================================================== */

.paginations { padding:10px 0; }

.paginations a.newer-posts .fa { padding:0 10px 0 0; }

.paginations a.older-posts .fa { padding: 0 0 0 10px; }

/* ==========================================================================
   8. Footer
   ========================================================================== */

.site-footer { position: relative; margin: 80px 0 0 0; padding: 0; font-size: 14px; }

.site-footer a { color: #ffffff; text-decoration: underline; }

.subscribe {  position: absolute; top: -19px; left: 50%; margin-left: -20px; text-align: center; line-height: 2.4rem; background: #fff;
color: #222222; display: block; width: 40px; height: 40px;
-webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid #222222; transition: box-shadow 0.5s; 
-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.subscribe i { color:#222222; width: 100%; height: 100%; font-size: 18px; padding:0 0 0 2px; line-height: 37px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.subscribe:hover i { color:#ffffff; }

#footer { color: #ffffff; text-align: center; background: #000000; padding:40px 0; }

#subfooter { color: #ffffff; text-align: center; background: #191919; padding:40px 0;  }

ul.social-bookmarks, ul.brands { list-style: none; margin: 0; padding: 10px 0; text-align: center; }

ul.social-bookmarks li, ul.brands li { display: inline-block;  margin: 4px; }

ul.social-bookmarks li a, ul.brands li a { color: #222222; display: block; width: 40px; height: 40px; -webkit-border-radius: 100%; -moz-border-radius: 100%; 
border-radius: 100%; border: 2px solid #222222; }

ul.social-bookmarks li i, ul.brands li i { width: 100%; height: 100%; font-size: 23px; line-height: 37px; }

ul.social-bookmarks li a:hover, ul.brands li a:hover { color: #ffffff; text-decoration: none; background-color: #22ae69; border: 2px solid #22ae69; }

ul.social-bookmarks li.facebook a:hover { background-color: #3b5998; border: 2px solid #3b5998; }

ul.social-bookmarks li.twitter a:hover { background-color: #00b6f3; border: 2px solid #00b6f3; }

ul.social-bookmarks li.googleplus a:hover { background-color: #cf4231; border: 2px solid #cf4231; }

ul.social-bookmarks li.linkedin a:hover { background-color: #2086bc; border: 2px solid #2086bc; }

ul.social-bookmarks li.youtube a:hover { background-color: #c8312b; border: 2px solid #c8312b; }

ul.social-bookmarks li.instagram a:hover { background-color: #723f2d; border: 2px solid #723f2d; }

ul.social-bookmarks li.flickr a:hover { background-color: #ff0084; border: 2px solid #ff0084; }

ul.social-bookmarks li.vimeo a:hover { background-color: #627486; border: 2px solid #627486; }

ul.social-bookmarks li.pinterest a:hover { background-color: #cb2027; border: 2px solid #cb2027; }

ul.social-bookmarks li.skype a:hover { background-color: #00aff0; border: 2px solid #00aff0; }

/* ==========================================================================
   9. Menus
   ========================================================================== */

ul.menu { margin: 0; padding: 0 0 20px 0; list-style: none; }

ul.menu li { padding: 0 0 20px 0; margin:0; position: relative; }

ul.menu li a { color: #222222; line-height: 150%; display: inline-block; }

ul.menu li a:hover, ul.menu li a.active { text-decoration: none; }

#main-menu { display:none; position:fixed; top:0; bottom:0; left:0; height:100%; z-index:999; 
background:rgba(149,165,166,0.8); color:#ffffff; width:240px; padding:20px 0; border-right:1px solid #9fafb0; }

#main-menu a { color:#ffffff; }

#main-menu ul.menu { clear:both; }

#main-menu ul.menu li { font-size:17px; padding:0; }

#main-menu ul.menu li .fa { padding:0 15px 0 0; }

#main-menu ul.menu li a { color:#ffffff; display:block; padding:10px 15px; margin:0; border-bottom:1px solid #9fafb0; }

#main-menu ul.menu li:first-child a {border-top:1px solid #9fafb0;  }

#main-menu ul.menu li a:hover { text-decoration:none; background:rgba(255,255,255,0.1); }

a#open-menu-item { position:fixed; z-index:9999; left:15px; top:15px; font-size:20px; color:#ffffff; padding:8px 10px; cursor:pointer; }

a#close-menu-item { cursor:pointer; font-size:12px; display:inline-block; padding: 0 15px 15px 15px; float:right; }

a#close-menu-item i { font-size:22px; }

.navigation-menu { font-size: 12px; }

.navigation-menu a { padding:0 0 2px 0; }

/* ==========================================================================
   10. Read Progress
   ========================================================================== */

#progressbar { background-color: #f3f3f3; width: 0; position: absolute; top: 0; bottom: 0; left: 0; min-height: inherit;
-moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

.post-progress-info { position: relative; z-index: 9999; display: block; overflow: hidden; font-size:13px; line-height:135%; padding-bottom:4px; }

#progressbar-value { position: relative; z-index:99999; color:#999999; font-size:13px; font-style:italic;  }

.post-progress { position: relative; padding: 10px; overflow: hidden; width: 100%; border-left: solid 8px #95a5a6; margin:0 0 40px 0; }

.post-progress:after { background: #f3f3f3; height: 1px; width: 100%; content: " "; display: block; position: absolute; bottom: 0; left: 0; }


/* ==========================================================================
   11. Media Queries - Smaller than 992px
   ========================================================================== */

@media only screen and (max-width: 992px) {

    .site-head { height: auto; }

    #navigation { margin-top:40px; }

    .post-progress { display:none; }

    .author-page h2, .author-page .large { text-align:center; }

    #share {margin: auto; text-align: center; }

}

/* ==========================================================================
   12. Media Queries - Smaller than 768px
   ========================================================================== */


@media only screen and (max-width: 768px) {

    .blog-logo img { max-height: 80px; }

    .post { font-size: 0.8em; line-height: 1.6em; }

    .post-content img:before { margin: 0 -15px; }

    .post-footer { margin: 30px 0 0 0; padding: 30px 0 0 0; }

    .site-head { padding: 0; margin-bottom:40px; }

    .blog-title { font-size: 3rem; }

    .blog-description { font-size: 1.5rem; }

    h1, h2 { font-size: 3rem; line-height: 1.1em; }

    h3 { font-size: 2.8rem; }

    h4 { font-size: 2.3rem; }

    .caption.divider { width: 90%; }

    .site-footer { margin-top:40px; }

    #map-canvas { height: 270px; }

    .paginations .fa { display:none; }

}