/*!
Theme Name: Hassanity
Theme URI: https://hassanity.com
Author: Hassan Gani
Author URI: https://www.facebook.com/Ganiu.Hassan.Yusuf
Description: Hassanity is a Two Column Wordpress Theme for Entertainment blog. 
Version: 2.0
Text Domain: hassanity
License: Hassan
License URI: https://www.facebook.com/Ganiu.Hassan.Yusuf
Tags: Entertainment, News, two-columns, flexible-header, custom-menu, custom-logo, right-sidebar, featured-images

Hassanity Template is based on Bootstrap Framework :D
*/

/*--------------------------------------------------------------
##### TABLE OF CONTENTS: #####
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
    -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
}

body {
   margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
   display: block;
}

audio,
canvas,
progress,
video {
   display: inline-block;
   vertical-align: baseline;
}

audio:not([controls]) {
   display: none;
   height: 0;
}

[hidden],
template {
   display: none;
}


abbr[title] {
   border-bottom: 1px dotted;
}

b,
strong {
   font-weight: bold;
}

dfn {
   font-style: italic;
}

h1 {
   font-size: 2em;
   margin: 0.67em 0;
}

mark {
   background: #ff0;
   color: #000;
}

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: 1em 40px;
}

hr {
   box-sizing: content-box;
   height: 0;
}

pre {
   overflow: auto;
}

code,
kbd,
pre,
samp {
   font-family: inherit;
   font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
   color: inherit;
   font: inherit;
   margin: 0;
}

button {
   overflow: visible;
}

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;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
   border: 0;
   padding: 0;
}

input {
   line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
   box-sizing: border-box;
   padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
   height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
}

fieldset {
   border: 1px solid #c0c0c0;
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
}

legend {
   border: 0;
   padding: 0;
}

textarea {
   overflow: auto;
}

optgroup {
   font-weight: bold;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

td,
th {
   padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
   color: #111;
   font-family: inherit;
   font-size: 16px;
   line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
   clear: both;
   font-weight: bold;
}

p {
   margin-bottom: 1.5em;
}

dfn, cite, em, i {
   font-style: italic;
}

blockquote {
   margin: 0 1.5em;
}

address {
   margin: 0 0 1.5em;
}

pre {
   background: #eee;
   font-family: inherit;
   font-size: 15px;
   font-size: 0.9375rem;
   line-height: 1.6;
   margin-bottom: 1.6em;
   max-width: 100%;
   overflow: auto;
   padding: 1.6em;
}

code, kbd, tt, var {
   font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
   font-size: 15px;
   font-size: 0.9375rem;
}

abbr, acronym {
   border-bottom: 1px dotted #666;
   cursor: help;
}

mark, ins {
   background: #fff9c0;
   text-decoration: none;
}

big {
   font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
   box-sizing: border-box;
}

*,
*:before,
*:after {
   /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
   box-sizing: inherit;
}

body {
   background: #fff;
   /* Fallback for when there is no custom background color defined. */
}

hr {
   background-color: #ccc;
   border: 0;
   height: 1px;
   margin-bottom: 1.5em;
}

ul, ol {
   margin: 0 0 1.5em 3em;
}

ul {
   list-style: disc;
}

ol {
   list-style: decimal;
}

li > ul,
li > ol {
   margin-bottom: 0;
   margin-left: 1.5em;
}

dt {
   font-weight: bold;
}

dd {
   margin: 0 1.5em 1.5em;
}

img {
   height: auto;
   /* Make sure images are scaled correctly. */
   max-width: 100%;
   /* Adhere to container width. */
}

figure {
   margin: 1em 0;
   /* Extra wide images within figure tags don't overflow the content area. */
}

table {
   margin: 0 0 1.5em;
   width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
   border: 1px solid;
   border-color: #ccc #ccc #bbb;
   border-radius: 3px;
   background: #e6e6e6;
   color: rgba(0, 0, 0, 0.8);
   font-size: 12px;
   line-height: 1;
   padding: .6em 1em .4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
   border-color: #ccc #bbb #aaa;
}

button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
   border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
   color: #666;
   border: 1px solid #ccc;
   border-radius: 3px;
   padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
   color: #111;
}

select {
   border: 1px solid #ccc;
}

textarea {
   width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
   color: #BF0101;
}

a:visited {
   color: #BF0101;
}

a:hover, a:focus, a:active {
   color: #BF0101;
}

a:focus {
   outline: thin dotted;
}

a:hover, a:active {
   outline: 0;
   color: #BF0101;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
   clear: both;
   display: block;
   float: left;
   width: 100%;
}

.main-navigation ul {
   display: none;
   list-style: none;
   margin: 0;
   padding-left: 0;
}

.main-navigation ul ul {
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
   float: left;
   position: absolute;
   top: 100%;
   left: -999em;
   z-index: 99999;
}

.main-navigation ul ul ul {
   left: -999em;
   top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
   left: 100%;
}

.main-navigation ul ul a {
   width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
   left: auto;
}

.main-navigation li {
   float: left;
   position: relative;
}

.main-navigation a {
   display: block;
   text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
   display: block;
}

@media screen and (min-width: 37.5em) {
   .menu-toggle {
       display: none;
   }
   .main-navigation ul {
       display: block;
   }
}

.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
   margin: 0 0 1.5em;
   overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
   float: left;
   width: 49%;
   margin-right: 2px;
   border-bottom: 2px solid gray;
   border-radius: 10px;
   padding-left: 10px;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
   float: right;
   text-align: right;
   width: 49%;
   margin-left: 2px;
   border-bottom: 2px solid gray;
   border-radius: 10px;
   padding-right: 10px;
}


/* Text meant only for screen readers. */
.screen-reader-text {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute !important;
   width: 1px;
   word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
   background-color: #f1f1f1;
   border-radius: 3px;
   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
   clip: auto !important;
   clip-path: none;
   color: #21759b;
   display: block;
   font-size: 14px;
   font-size: 0.875rem;
   font-weight: bold;
   height: auto;
   left: 5px;
   line-height: normal;
   padding: 15px 23px 14px;
   text-decoration: none;
   top: 5px;
   width: auto;
   z-index: 100000;
   /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
   outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
   display: inline;
   float: left;
   margin-right: 1.5em;
}

.alignright {
   display: inline;
   float: right;
   margin-left: 1.5em;
}

.aligncenter {
   clear: both;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
   content: "";
   display: table;
   table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
   clear: both;
}



/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
   margin: 0 0 1.5em;
   overflow: hidden;
   /* Make sure select elements fit in widgets. */
}

.widget select {
   max-width: 100%;
}

widget-title {
   font-size: 18px;
}

h2.widget-title {
   font-size: 18px;
}
span.sidebar-widget-header {
   float: left;
   margin-bottom: 20px;
   width: 100%;
   height: 25px;

   }
span.sidebar-widget-header {
   /*border-top: 3px solid #e91b23;*/
   margin-top: -30px;

}
h3.sidebar-widget-header {
   background-color: #0f1013;
   /*background-image: linear-gradient(to top,#dedede,#f4f4f4);*/
   width: 400px;


}
h3.sidebar-widget-header,
h3.sidebar-widget-header a {
   color: #fff;
   float: left;
   font-size: 12px;
   padding: 5px 7px;
   position: relative;
   text-transform: uppercase;
   z-index: 10;
   }



/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/

.sticky {
   display: block;
}

.hentry {
   margin: 0 0 1.5em;
}

.updated:not(.published) {
   display: none;
}

.page-content,
.entry-content,
.entry-summary {
   margin: 1.5em 0 0;
}

.page-links {
   clear: both;
   margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
#comments {
   clear: both;
   padding: 2em 0 0.5em;
}

.comments-title {
   font-size: 20px;
   font-size: 1.25rem;
   margin-bottom: 1.5em;
}

.comment-list,
.comment-list .children {
   list-style: none;
   margin: 0;
   padding: 0;
}

.comment-list li:before {
   display: none;
}

.comment-body {
   margin-left: 65px;
}

.comment-author {
   font-size: 16px;
   font-size: 1rem;
   margin-bottom: 0.4em;
   position: relative;
   z-index: 2;
}

.comment-author .avatar {
   height: 50px;
   left: -65px;
   position: absolute;
   width: 50px;
}

.comment-author .says {
   display: none;
}

.comment-meta {
   margin-bottom: 1.5em;
}

.comment-metadata {
   color: #767676;
   font-size: 10px;
   font-size: 0.625rem;
   font-weight: 800;
   letter-spacing: 0.1818em;
   text-transform: uppercase;
}

.comment-metadata a {
   color: #767676;
}

.comment-metadata a.comment-edit-link {
   color: #222;
   margin-left: 1em;
}

.comment-body {
   color: #333;
   font-size: 14px;
   font-size: 0.875rem;
   margin-bottom: 4px;
}

.comment-reply-link {
   font-weight: 800;
   position: relative;
}

.comment-reply-link .icon {
   color: #222;
   left: -2em;
   height: 1em;
   position: absolute;
   top: 0;
   width: 1em;
}

.children .comment-author .avatar {
   height: 30px;
   left: -45px;
   width: 30px;
}

.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
   border: 1px solid #333;
   padding: 2px;
}

.no-comments,
.comment-awaiting-moderation {
   color: #767676;
   font-size: 14px;
   font-size: 0.875rem;
   font-style: italic;
}

.comments-pagination {
   margin: 2em 0 3em;
}

#cancel-comment-reply-link  { 
   text-align:center;
   background-color: #0f1013;
   border:1px solid #55737D;
   border-radius:3px;
   padding:3px;
   width:50px;
   color:#FFFFFF;
   box-shadow: 1px 1px 2px 2px #4f4f4f;
   text-decoration:none;
   font-size: 14px;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
   /* Theme Footer (when set to scrolling) */
   display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
   display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
   border: none;
   margin-bottom: 0;
   margin-top: 0;
   padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
   max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
   display: inline-block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
   margin-bottom: 1.5em;
   max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.wp-caption .wp-caption-text {
   margin: 0.8075em 0;
}

.wp-caption-text {
   text-align: center;
}
/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
   margin-bottom: 1.5em;
}

.gallery-item {
   display: inline-block;
   text-align: center;
   vertical-align: top;
   width: 100%;
}

.gallery-columns-2 .gallery-item {
   max-width: 50%;
}

.gallery-columns-3 .gallery-item {
   max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
   max-width: 25%;
}

.gallery-columns-5 .gallery-item {
   max-width: 20%;
}

.gallery-columns-6 .gallery-item {
   max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
   max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
   max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
   max-width: 11.11%;
}

.gallery-caption {
   display: block;
}


/* ##############  Site Width  ################*/

/* 
 ##Device = Desktops
 ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
 
 .site-width {
     margin: 0 40px 0 40px;
     min-height: 500px;
 }

 .post-list-style {
     background-position: center; 
     background-size: cover; 
     height: 60px; 
     width: 60px;
     border-radius: 3px;
 }

 .post-title-text {
     font-size: 16px;
     color: #191a1f;
     font-weight: normal;
     text-transform: capitalize;
     font-family: 'Exo 2', sans-serif;
     line-height: 1.3;
 }

 .post-title-text:hover {
     color: #BF0101;
 }

 .logo-box-img { 
     margin-left: 60px;
 }

 .post-list-row-pad {
     margin:  0;
 }

 .featured-col {
   margin:  0 0 0 !important; 
   padding: 0px !important;
   }
   .featured-col-wrapper {
       margin: 0px !important; 
       padding: 1px !important;
   }
   .featured-col-inner {
       height: 170px; 
       background: #f1f1f1; 
       border-radius: 0; 
       width: 100% !important;
       overflow: hidden;
   }
   .featured-col-img {
       background-position: center; 
         background-size: cover; 
         width: auto;
         border-radius: 0; height: 115px;
   }
   .featured-col-text {
       font-weight: bold;
       color: #111; 
       font-size: 14px; 
       padding: 10px; 
       display: block;
       white-space: wrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   a:link {
   text-decoration: none;
}

}

/* 
 ##Device = Laptops, Desktops
 ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
 
 .site-width {
     margin: 0 40px 0 40px;
     min-height: 500px;
 }
 
 .post-list-style {
     background-position: center; 
     background-size: cover; 
     height: 60px; 
     width: 60px;
     border-radius: 3px;
 }

 .post-title-text {
     font-size: 16px;
     color: #191a1f;
     font-weight: normal;
     text-transform: capitalize;
     font-family: 'Exo 2', sans-serif;
     line-height: 1.3;
 }

 .post-title-text:hover {
     color: #BF0101;
 }

 .logo-box-img { 
     margin-left: 60px;
 }

 .post-list-row-pad {
     margin:  0;
 }

 .featured-col {
   margin: 0 0 2px 0 !important; 
   padding: 0px !important;
   }
   .featured-col-wrapper {
       margin: 0px !important; 
       padding: 1px !important;
   }
   .featured-col-inner {
       height: 170px; 
       background: #f1f1f1; 
       border-radius: 0; 
       width: 100% !important;
       overflow: hidden;
   }
   .featured-col-img {
       background-position: center; 
         background-size: cover; 
         width: auto;
         border-radius: 0; height: 90px;
   }
   .featured-col-text {
       font-weight: bold;
       color: #111; 
       font-size: 14px; 
       padding: 10px; 
       display: block;
       white-space: wrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   a:link {
   text-decoration: none;
}

}

/* 
 ##Device = Tablets, Ipads (portrait)
 ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
 
 .site-width {
     margin: 0 40px 0 40px;
     min-height: 500px;
 }

 .post-list-style {
     background-position: center; 
     background-size: cover; 
     height: 60px; 
     width: 60px;
     border-radius: 3px;
 }

 .post-title-text {
     font-size: 16px;
     color: #191a1f;
     font-weight: normal;
     text-transform: capitalize;
     font-family: 'Exo 2', sans-serif;
     line-height: 1.3;
 }

 .post-title-text:hover {
     color: #BF0101;
 }

 .logo-box-img { 
     margin-left: 0;
 }

 .post-list-row-pad {
     margin:  0;
 }

 .featured-col {
   margin: 0 0 2px 0 !important; 
   padding: 0px !important;
   }
   .featured-col-wrapper {
       margin: 0px !important; 
       padding: 1px !important;
   }
   .featured-col-inner {
       height: 170px; 
       background: #f1f1f1; 
       border-radius: 0; 
       width: 100% !important;
       overflow: hidden;
   }
   .featured-col-img {
       background-position: center; 
         background-size: cover; 
         width: auto;
         border-radius: 0; 
         height: 90px;
   }
   .featured-col-text {
       font-weight: bold;
       color: #111; 
       font-size: 14px; 
       padding: 10px; 
       display: block;
       white-space: wrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   a:link {
   text-decoration: none;
}

}

/* 
 ##Device = Tablets, Ipads (landscape)
 ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
 
 .site-width {
     margin: 0 40px 0 40px;
     min-height: 500px;
 }

 .post-list-style {
     background-position: center; 
     background-size: cover; 
     height: 60px; 
     width: 60px;
     border-radius: 5px;
 }

 .post-title-text {
     text-transform: capitalize;
     line-height: 1.3;
     font-size: 14px;
     color: #212121;
 }

 .post-title-text:hover {
     color: #BF0101;
 }

 .logo-box-img { 
     margin-left: 60px;
 }

 .post-list-row-pad {
     margin:  0;
 }

 .featured-col {
   margin: 0 0 2px 0 !important; 
   padding: 0px !important;
   }
   .featured-col-wrapper {
       margin: 0px !important; 
       padding: 1px !important;
   }
   .featured-col-inner {
       height: 170px; 
       background: #f1f1f1; 
       border-radius: 0; 
       width: 100% !important;
       overflow: hidden;
   }
   .featured-col-img {
       background-position: center; 
         background-size: cover; 
         width: auto;
         border-radius: 0; height: 90px;
   }
   .featured-col-text {
       font-weight: bold;
       color: #111; 
       font-size: 14px; 
       padding: 10px; 
       display: block;
       white-space: wrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   a:link {
   text-decoration: none;
}


 
}

/* 
 ##Device = Low Resolution Tablets, Mobiles (Landscape)
 ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
 
 .site-width {
     margin: 0 -23px 0 -23px;
     min-height: 500px;
 }

 .post-list-style {
     background-position: center; 
     background-size: cover; 
     height: 60px; 
     width: 60px;
     border-radius: 5px;
 }

 .post-title-text {
     text-transform: capitalize;
     line-height: 1.3;
     font-size: 14px;
     color: #212121;
 }

 .post-title-text:hover {
     color: #BF0101;
 }

 .logo-box-img { 
     margin-left: 60px;
 }

 .post-list-row-pad {
     margin:  0 -15px 0 -15px;
 }

 .featured-col {
   margin: 0 0 2px 0 !important; 
   padding: 0px !important;
   }
   .featured-col-wrapper {
       margin: 0px !important; 
       padding: 1px !important;
   }
   .featured-col-inner {
       height: 140px; 
       background: #f1f1f1; 
       border-radius: 0; 
       width: 100% !important;
       overflow: hidden !important;
   }
   .featured-col-img {
       background-position: center; 
         background-size: cover; 
         width: auto;
         border-radius: 0; 
         height: 80px;
   }
   .featured-col-text {
       font-weight: bold;
       color: #111; 
       font-size: 13px; 
       padding: 5px; 
       display: block;
       white-space: wrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .featured-col-text a {
       text-decoration: none;
   }
   .featured-col-text a:visited {
       text-decoration: none;
   }
   .featured-col-text a:hover {
       text-decoration: none;
   }

   .featured-post-pad {
       margin: 0 -15px 0 -15px !important;
   }



 
}

/* 
 ##Device = Most of the Smartphones Mobiles (Portrait)
 ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
 
 .site-width {
     margin: 0 -23px 0 -23px;
     min-height: 500px;
 }
 
 .post-list-style {
     background-position: center; 
     background-size: cover; 
     height: 60px; 
     width: 60px;
     border-radius: 5px;
 }

 .post-title-text {
     text-transform: capitalize;
     line-height: 1.3;
     font-size: 14px;
     color: #212121;
 }

 .post-title-text:hover {
     color: #BF0101;
 }

 .logo-box-img { 
     margin-left: 0;
 }

 .post-list-row-pad {
     margin:  0 -15px 0 -15px;
 }

 .featured-col {
   margin: 0 0 2px 0 !important; 
   padding: 0px !important;
   }
   .featured-col-wrapper {
       margin: 0px !important; 
       padding: 1px !important;
   }
   .featured-col-inner {
       height: 140px; 
       background: #f1f1f1; 
       border-radius: 0; 
       width: 100% !important;
       overflow: hidden !important;
   }
   .featured-col-img {
       background-position: center; 
         background-size: cover; 
         width: auto;
         border-radius: 0; 
         height: 80px;
   }
   .featured-col-text {
       font-weight: bold;
       color: #111; 
       font-size: 13px; 
       padding: 5px; 
       display: block;
       white-space: wrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   a:link {
   text-decoration: none;
}

   .featured-post-pad {
       margin: 0 -15px 0 -15px !important;
   }



}


/* ### Post List Rows*/

.post-list-row {
   margin-bottom: -10px; 
   margin-top: -10px; 
   padding-top: -15px;  
   padding-bottom: -5px;
}

.post-list-col {
   margin-bottom: 15px; 
   margin-top: -10px; 
   padding-bottom: 5px; 
   border-bottom: 1px solid #f1f1f1; 
   padding-right: 0px; 
   padding-left: 5px; 
   padding-top: 0px; 
   min-height: 76px;
}

/* ### Widget Container ###*/
.before_widget {
   background:white; 
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03), 0 1px 0 rgba(0, 0, 0, 0.03); 
   padding: 10px;
   margin-bottom:0px;
}

.before_title {
   margin-left: -10px;
   margin-top: -10px;
   width: 100%;
}

/* ##### Border Right Border Line Divider*/
.b-r {
   border-right: 1px solid rgba(120, 130, 140, 0.13);
}

/* ###### Breadcrumb #######*/
.breadcrumb {
   background-color: rgba(0, 0, 0, 0.065);
}
.breadcrumb > li + li:before {
   content: '/ ';
}

.breadcrumb {
   background-color: #fff;
   border: 1px solid #eaeef1;
   padding-left: 10px;
   margin-bottom: 10px;
}

.breadinline {
   display: inline-table;
}
.breadcrumb > li + li:before; display:inline,
.breadcrumb > .active {
 color: inherit;
}

/* ### Post Place Style*/
.post-panel {
   height: 100%; 
   border-radius: 5px; 
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03), 0 1px 0 rgba(0, 0, 0, 0.03);
}
.post-heading-breadcrumb {
   height: auto !important; 
   padding: 0px !important;
}
.breadcrumb-styler {
   border-top: 0px; 
   border-right: 0px; 
   border-left: 0px; 
   font-size: 13px; 
   text-align: left; 
   margin-left: -15px; 
   border-radius: 0px; 
   padding-left: 20px;
}
.post-heading-title {
   background: #f5f5f5 !important; 
   padding: 40px !important; 
   height: auto !important; 
   margin-top:-10px !important;
}
.post--title-style {
   margin-top: -20px !important; 
   margin-left: -20px !important; 
   font-size: 25px !important; 
   font-weight: normal !important; 
   text-align: left !important; 
   text-transform: capitalize !important; 
   font-family: 'Post--Title', sans-serif !important;
}
.post-title-sideline {
   border-left: 5px solid #7A0202; 
   padding-right: 20px; 
   height: 5px;
}
.post-title-inside {
   margin-top: -35px; 
   margin-left: 20px;
}
.post-line-divider {
   border-bottom: 1px solid #f1f1f1;
}
.post-author-placeholder {
   background: #f5f5f5 !important; 
   height: 10px !important; 
   padding: 13px !important;
}
.post-author-box {
   margin-top: -10px !important; 
   margin-left: 5px !important; 
   font-size: 13px !important;
}
.featured-img-styler {
   width: 100% !important; 
   clear: both;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.arrow_box {
   position: relative;
   background: #fcfcfc;
   border: 4px solid #f5eeee;
}
.arrow_box:after, .arrow_box:before {
   right: 100%;
   top: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
}

.arrow_box:after {
   border-color: rgba(252, 252, 252, 0);
   border-right-color: #fcfcfc;
   border-width: 90px;
   margin-top: -90px;
}
.arrow_box:before {
   border-color: rgba(245, 238, 238, 0);
   border-right-color: #f5eeee;
   border-width: 96px;
   margin-top: -96px;
}

.panel-title-in {
   margin-top: -3px !important; 
   margin-left: 15px;
   margin-bottom: 5px !important;
}
.panel-title-h4 {
   margin-left: -10px; 
   font-size: 18px; 
   background:#fff !important; 
   text-transform: capitalize;
   padding: 10px; 
   border-radius: 5px 5px 0 0; 
   opacity: 1; 
   color: #111; 
   font-weight: bold;
   border-color: #fff;
}
.panel-heading-in {
   background-image: linear-gradient(to right, #ff0000 -90%, #9D0000 100%);
   /*background-image: linear-gradient(to top,#dedede,#f4f4f4)!important;*/ 
   height: 40px !important; 
   border-radius: 5px 5px 0 0 !important;
}
.br- {
   border-right: 1px solid rgba(120, 130, 140, 0.13) !important;
}
.panel-white-in {
   height: 100% !important; 
   border-radius: 5px !important; 
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03), 0 1px 0 rgba(0, 0, 0, 0.03) !important;
}

/* #### Footer Style ### */
.footer-style {
   background-color: black;
     background: #0f1013;
   min-height: 50px; 
   color: #fff; 
   font-size: 13px; margin-bottom: -0px; padding: 30px;
}

.footer-style a { 
   color: #27c24b !important; 
   text-decoration: none !important; 
   background-color:transparent !important;
}
.footer-style a:visited { 
   color: #27c24b !important; 
   text-decoration: none !important; 
   background-color:transparent !important;
}
.footer-style a:hover { 
   color: #27c24b !important; 
   text-decoration: none !important; 
   background-color:transparent !important;
}
.footer-style a:active { 
   color: #27c24b !important; 
   text-decoration: none !important; 
   background-color:transparent !important;
}

 /*Related Post*/

@media (min-width: 1200px) { 
.simple-post h3.similar-title a {

   font-size: 15px;

}

.similar-post-row {
 margin: 0 -3px;
}
.row:after {
   clear: both;
   display: table;
   content: " ";
}
.col-3 {
 width: 25%;
 float: left;
}
.col-12 {
 width: 100%;
}
.similar-post-wrapper {
 padding: 10px 10px;
   margin: 40px 0;
   background: #fff;
   border: 1px solid #cccccc;
}
.similar-post-wrapper span {
}
.similar-post-wrapper .similar-title {
display: inline-block;
   background: #000;
   color: #fff;
   padding: 3px 10px;
   font-size: 1.0em;
   font-weight: 600;
   border-radius: 0px;
   margin-bottom: 3px;
   text-shadow: 2px 1px 3px #000000;
}
.similar-post-wrapper .similar-single {
 padding: 5px;
   box-sizing: border-box;
}
.similar-post-wrapper .similar-single a {
 font-weight: bold;
   display: block;
   background: #f0f0f0;
   padding: 5px;
   min-height: auto-flow;
  
}
.similar-post-wrapper .similar-single a img {
 border: 1px solid #000;
 max-height: 150px;
 border-radius: 5px;
}
.similar-post-wrapper .similar-single a span {
 display: block;
   color: #8c8c8c;
}
.similar-post-wrapper .similar-single a .similar-single-title {
 padding: 5px;
 line-height: 1.2;
 font-size: 12px;
}

.related_img {
   background-size: cover; 
   background-position: center; 
   height: 150px; 
   border-radius: 5px;
}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
.simple-post h3.similar-title a {

   font-size: 15px;

}

.similar-post-row {
 margin: 0 -3px;
}
.row:after {
   clear: both;
   display: table;
   content: " ";
}
.col-3 {
 width: 25%;
 float: left;
}
.col-12 {
 width: 100%;
}
.similar-post-wrapper {
 padding: 10px 10px;
   margin: 40px 0;
   background: #fff;
   border: 1px solid #cccccc;
}
.similar-post-wrapper span {
}
.similar-post-wrapper .similar-title {
display: inline-block;
   background: #000;
   color: #fff;
   padding: 3px 10px;
   font-size: 1.0em;
   font-weight: 600;
   border-radius: 0px;
   margin-bottom: 3px;
   text-shadow: 2px 1px 3px #000000;
}
.similar-post-wrapper .similar-single {
 padding: 5px;
   box-sizing: border-box;
}
.similar-post-wrapper .similar-single a {
 font-weight: bold;
   display: block;
   background: #f0f0f0;
   padding: 5px;
   min-height: auto-flow;
  
}
.similar-post-wrapper .similar-single a img {
 border: 1px solid #000;
}
.similar-post-wrapper .similar-single a span {
 display: block;
   color: #8c8c8c;
}
.similar-post-wrapper .similar-single a .similar-single-title {
 padding: 5px;
 line-height: 1.2;
 font-size: 12px;
}

.related_img {
   background-size: cover; 
   background-position: center; 
   height: 150px; 
   border-radius: 5px;
}
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
.simple-post h3.similar-title a {

   font-size: 15px;

}

.similar-post-row {
 margin: 0 -3px;
}
.row:after {
   clear: both;
   display: table;
   content: " ";
}
.col-3 {
 width: 25%;
 float: left;
}
.col-12 {
 width: 100%;
}
.similar-post-wrapper {
 padding: 10px 10px;
   margin: 40px 0;
   background: #fff;
   border: 1px solid #cccccc;
}
.similar-post-wrapper span {
}
.similar-post-wrapper .similar-title {
display: inline-block;
   background: #000;
   color: #fff;
   padding: 3px 10px;
   font-size: 1.0em;
   font-weight: 600;
   border-radius: 0px;
   margin-bottom: 3px;
   text-shadow: 2px 1px 3px #000000;
}
.similar-post-wrapper .similar-single {
 padding: 5px;
   box-sizing: border-box;
}
.similar-post-wrapper .similar-single a {
 font-weight: bold;
   display: block;
   background: #f0f0f0;
   padding: 5px;
   min-height: auto-flow;
  
}
.similar-post-wrapper .similar-single a img {
 border: 1px solid #000;
}
.similar-post-wrapper .similar-single a span {
 display: block;
   color: #8c8c8c;
}
.similar-post-wrapper .similar-single a .similar-single-title {
 padding: 2px;
 line-height: 1.2;
 font-size: 10px;
}

.related_img {
   background-size: cover; 
   background-position: center; 
   height: 100px; 
   border-radius: 5px;
}
}

/* Landscape phones and down */
@media (max-width: 480px) { 
.simple-post h3.similar-title a {

   font-size: 15px;

}

.similar-post-row {
 margin: 0 -3px;
}
.row:after {
   clear: both;
   display: table;
   content: " ";
}
.col-3 {
 width: 25%;
 float: left;
}
.col-12 {
 width: 100%;
}
.similar-post-wrapper {
 padding: 10px 10px;
   margin: 40px 0;
   background: #fff;
   border: 1px solid #cccccc;
}
.similar-post-wrapper span {
}
.similar-post-wrapper .similar-title {
display: inline-block;
   background: #000;
   color: #fff;
   padding: 3px 10px;
   font-size: 1.0em;
   font-weight: 600;
   border-radius: 0px;
   margin-bottom: 3px;
   text-shadow: 2px 1px 3px #000000;
}
.similar-post-wrapper .similar-single {
 padding: 5px;
   box-sizing: border-box;
}
.similar-post-wrapper .similar-single a {
 font-weight: bold;
   display: block;
   background: #f0f0f0;
   padding: 5px;
   min-height: auto-flow;
  
}
.similar-post-wrapper .similar-single a img {
 border: 1px solid #000;
}
.similar-post-wrapper .similar-single a span {
 display: block;
   color: #8c8c8c;
}
.similar-post-wrapper .similar-single a .similar-single-title {
 padding: 2px;
 line-height: 1.2;
 font-size: 10px;
}

.related_img {
   background-size: cover; 
   background-position: center; 
   height: 50px; 
   border-radius: 5px;
}
}

.blinktxt {
   animation: blinker 1s step-start infinite;
}

@keyframes blinker {
 50% {
   opacity: 0;
 }
}

/* Mini Menu Item */
.carder-item {
 background: #fff;
 border:1px #fafafa solid;
 box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
 padding:5px;
}
.carder-item:hover,
.carder-item:focus
{background:#f4f4f4;}

/*Tags*/
.terms a, .terms a:visited, .terms a:active { 
background:#555;
border:0px solid #ccc;
color: #fff;
border-radius: 5px;
text-decoration:none;
padding:6px;
margin:3px;
text-transform: uppercase;
}

.terms a:hover { 
background:#a8281a;
color:#FFF;
}

/*BlockQoute*/
blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 100%;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "\2014 \2009";
}

/*Content Item*/
.c-item {
 border-radius: 5; }

.c-item:hover, .c-item:focus {
 background-color: rgba(120, 120, 120, 0.1); }



/*Footer Spacing*/
@media (min-width: 1200px) { 
   .left-spacing {
       margin-left: 90px;
   }
   .right-spacing {
       margin-left: -100px;
   }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
   .left-spacing {
       margin-left: 90px;
   }
   .right-spacing {
       margin-left: -100px;
   }

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
   .left-spacing {
       margin: 0 -40px 0 -40px;
       padding: -0px;
   }
   .right-spacing {
       margin: 0 -40px 0 -40px;
       padding: -0px;
   }

}

/* Landscape phones and down */
@media (max-width: 480px) { 
   .left-spacing {
       margin: 0 -40px 0 -40px;
       padding: -0px;
   }
   .right-spacing {
       margin: 0 -40px 0 -40px;
       padding: -0px;
   }

}


/* BTN Styles*/
.btn .label {
 position: relative;
 top: -1px; }

.btn {
 font-weight: 500;
 outline: 0 !important;
 border-width: 0;
 padding: 0.4375rem 1rem; }
 .btn:not([disabled]):hover, .btn:not([disabled]):focus, .btn:not([disabled]).active {
   box-shadow: inset 0 -10rem 0px rgba(158, 158, 158, 0.2); }
 .btn > i.pull-left, .btn > i.pull-right {
   line-height: 1.5; }
 .btn.rounded {
   padding-left: 1.2em;
   padding-right: 1.2em; }

.btn-lg {
 padding: .8125rem 1.75rem; }

.btn-sm {
 padding: .3445rem .75rem; }

.btn-xs {
 padding: .1565rem .5rem;
 font-size: 0.8rem; }

.btn-outline {
 border-width: 1px;
 background-color: transparent;
 box-shadow: none !important; }

.btn.b-primary:hover, .btn.b-primary:focus, .btn.primary:hover, .btn.primary:focus {
 color: rgba(255, 255, 255, 0.87) !important;
 background-color: #ca4a1f; }

.btn.b-accent:hover, .btn.b-accent:focus, .btn.accent:hover, .btn.accent:focus {
 color: rgba(255, 255, 255, 0.87) !important;
 background-color: #a88add; }

.btn.b-warn:hover, .btn.b-warn:focus, .btn.warn:hover, .btn.warn:focus {
 color: rgba(255, 255, 255, 0.87) !important;
 background-color: #fcc100; }

.btn.b-success:hover, .btn.b-success:focus, .btn.success:hover, .btn.success:focus {
 color: rgba(255, 255, 255, 0.87) !important;
 background-color: #6cc788; }

.btn.b-info:hover, .btn.b-info:focus, .btn.info:hover, .btn.info:focus {
 color: rgba(255, 255, 255, 0.87) !important;
 background-color: #6887ff; }

.btn.b-warning:hover, .btn.b-warning:focus, .btn.warning:hover, .btn.warning:focus {
 color: rgba(255, 255, 255, 0.87) !important;
 background-color: #f77a99; }

.btn.b-danger:hover, .btn.b-danger:focus, .btn.danger:hover, .btn.danger:focus {
 color: rgba(255, 255, 255, 0.87) !important;
 background-color: #BF0101; }

.btn.b-dark:hover, .btn.b-dark:focus, .btn.dark:hover, .btn.dark:focus {
 color: rgba(255, 255, 255, 0.87) !important;
 background-color: #1c202b; }

.btn.b-black:hover, .btn.b-black:focus, .btn.black:hover, .btn.black:focus {
 color: rgba(255, 255, 255, 0.87) !important;
 background-color: #17171b; }

.btn.b-white:hover, .btn.b-white:focus {
 color: rgba(0, 0, 0, 0.87) !important;
 background-color: #ffffff; }

.btn.b-light:hover, .btn.b-light:focus {
 color: rgba(0, 0, 0, 0.87) !important;
 background-color: #f8f8f8; }

.btn-icon {
 text-align: center;
 padding: 0 !important;
 width: 2.25rem;
 height: 2.25rem;
 line-height: 2.25rem;
 position: relative;
 overflow: hidden; }
 .btn-icon i {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   display: block;
   line-height: inherit;
   -webkit-transition: all 0.3s;
   transition: all 0.3s; }
 .btn-icon.btn-xs {
   width: 1.5rem;
   height: 1.5rem;
   line-height: 1.5rem; }
 .btn-icon.btn-sm {
   width: 1.775rem;
   height: 1.775rem;
   line-height: 1.775rem; }
 .btn-icon.btn-lg {
   width: 3.167rem;
   height: 3.167rem;
   line-height: 3.167rem; }
 .btn-icon.btn-social i:last-child {
   top: 100%; }
 .btn-icon.btn-social:hover i:first-child, .btn-icon.btn-social:focus i:first-child, .btn-icon.btn-social.active i:first-child {
   top: -100%; }
 .btn-icon.btn-social:hover i:last-child, .btn-icon.btn-social:focus i:last-child, .btn-icon.btn-social.active i:last-child {
   top: 0;
   color: #fff; }
 .btn-icon.btn-social-colored i:first-child {
   color: #fff; }

.btn.white {
 box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3); }
 .btn.white:not([disabled]):hover, .btn.white:not([disabled]):focus, .btn.white:not([disabled]).active,
 .btn.btn-default:not([disabled]):hover,
 .btn.btn-default:not([disabled]):focus,
 .btn.btn-default:not([disabled]).active {
   box-shadow: inset 0 -10rem 0px rgba(158, 158, 158, 0.1); }


.btn-groups .btn {
 margin-bottom: .25rem; }

.btn-fw {
 min-width: 7rem; }

.rounded,
.circle {
 border-radius: 500px; }

.white {
 background-color: #fff; }

/* Pagination */
/*Pagination*/
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
   color: #fff;
   text-decoration:none;
}

.navigation li {
   display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
   background-color: #0f1013;
   border-radius: 3px;
   cursor: pointer;
   padding: 6px;
   
}

.navigation li a:hover,
.navigation li.active a {
   background-color: #444;
}

/* Adsense Style */
ins.adsbygoogle { background: transparent !important;}


/* Colors Class Styler */

.red {
 background-color: #f44336;
 color: rgba(255, 255, 255, 0.87); }

.red-50 {
 background-color: #ffebee;
 color: rgba(0, 0, 0, 0.87); }

.red-100 {
 background-color: #ffcdd2;
 color: rgba(0, 0, 0, 0.87); }

.red-200 {
 background-color: #ef9a9a;
 color: rgba(0, 0, 0, 0.87); }

.red-300 {
 background-color: #e57373;
 color: rgba(0, 0, 0, 0.87); }

.red-400 {
 background-color: #ef5350;
 color: rgba(0, 0, 0, 0.87); }

.red-500 {
 background-color: #f44336;
 color: rgba(255, 255, 255, 0.87); }

.red-600 {
 background-color: #e53935;
 color: rgba(255, 255, 255, 0.87); }

.red-700 {
 background-color: #d32f2f;
 color: rgba(255, 255, 255, 0.87); }

.red-800 {
 background-color: #c62828;
 color: rgba(255, 255, 255, 0.87); }

.red-900 {
 background-color: #b71c1c;
 color: rgba(255, 255, 255, 0.87); }

.red-A100 {
 background-color: #ff8a80;
 color: rgba(0, 0, 0, 0.87); }

.red-A200 {
 background-color: #ff5252;
 color: rgba(255, 255, 255, 0.87); }

.red-A400 {
 background-color: #ff1744;
 color: rgba(255, 255, 255, 0.87); }

.red-A700 {
 background-color: #d50000;
 color: rgba(255, 255, 255, 0.87); }

.pink {
 background-color: #e91e63;
 color: rgba(255, 255, 255, 0.87); }

.pink-50 {
 background-color: #fce4ec;
 color: rgba(0, 0, 0, 0.87); }

.pink-100 {
 background-color: #f8bbd0;
 color: rgba(0, 0, 0, 0.87); }

.pink-200 {
 background-color: #f48fb1;
 color: rgba(0, 0, 0, 0.87); }

.pink-300 {
 background-color: #f06292;
 color: rgba(0, 0, 0, 0.87); }

.pink-400 {
 background-color: #ec407a;
 color: rgba(0, 0, 0, 0.87); }

.pink-500 {
 background-color: #e91e63;
 color: rgba(255, 255, 255, 0.87); }

.pink-600 {
 background-color: #d81b60;
 color: rgba(255, 255, 255, 0.87); }

.pink-700 {
 background-color: #c2185b;
 color: rgba(255, 255, 255, 0.87); }

.pink-800 {
 background-color: #ad1457;
 color: rgba(255, 255, 255, 0.87); }

.pink-900 {
 background-color: #880e4f;
 color: rgba(255, 255, 255, 0.87); }

.pink-A100 {
 background-color: #ff80ab;
 color: rgba(0, 0, 0, 0.87); }

.pink-A200 {
 background-color: #ff4081;
 color: rgba(255, 255, 255, 0.87); }

.pink-A400 {
 background-color: #f50057;
 color: rgba(255, 255, 255, 0.87); }

.pink-A700 {
 background-color: #c51162;
 color: rgba(255, 255, 255, 0.87); }

.purple {
 background-color: #9c27b0;
 color: rgba(255, 255, 255, 0.87); }

.purple-50 {
 background-color: #f3e5f5;
 color: rgba(0, 0, 0, 0.87); }

.purple-100 {
 background-color: #e1bee7;
 color: rgba(0, 0, 0, 0.87); }

.purple-200 {
 background-color: #ce93d8;
 color: rgba(0, 0, 0, 0.87); }

.purple-300 {
 background-color: #ba68c8;
 color: rgba(255, 255, 255, 0.87); }

.purple-400 {
 background-color: #ab47bc;
 color: rgba(255, 255, 255, 0.87); }

.purple-500 {
 background-color: #9c27b0;
 color: rgba(255, 255, 255, 0.87); }

.purple-600 {
 background-color: #8e24aa;
 color: rgba(255, 255, 255, 0.87); }

.purple-700 {
 background-color: #7b1fa2;
 color: rgba(255, 255, 255, 0.87); }

.purple-800 {
 background-color: #6a1b9a;
 color: rgba(255, 255, 255, 0.87); }

.purple-900 {
 background-color: #4a148c;
 color: rgba(255, 255, 255, 0.87); }

.purple-A100 {
 background-color: #ea80fc;
 color: rgba(0, 0, 0, 0.87); }

.purple-A200 {
 background-color: #e040fb;
 color: rgba(255, 255, 255, 0.87); }

.purple-A400 {
 background-color: #d500f9;
 color: rgba(255, 255, 255, 0.87); }

.purple-A700 {
 background-color: #aa00ff;
 color: rgba(255, 255, 255, 0.87); }

.deep-purple {
 background-color: #673ab7;
 color: rgba(255, 255, 255, 0.87); }

.deep-purple-50 {
 background-color: #ede7f6;
 color: rgba(0, 0, 0, 0.87); }

.deep-purple-100 {
 background-color: #d1c4e9;
 color: rgba(0, 0, 0, 0.87); }

.deep-purple-200 {
 background-color: #b39ddb;
 color: rgba(0, 0, 0, 0.87); }

.deep-purple-300 {
 background-color: #9575cd;
 color: rgba(255, 255, 255, 0.87); }

.deep-purple-400 {
 background-color: #7e57c2;
 color: rgba(255, 255, 255, 0.87); }

.deep-purple-500 {
 background-color: #673ab7;
 color: rgba(255, 255, 255, 0.87); }

.deep-purple-600 {
 background-color: #5e35b1;
 color: rgba(255, 255, 255, 0.87); }

.deep-purple-700 {
 background-color: #512da8;
 color: rgba(255, 255, 255, 0.87); }

.deep-purple-800 {
 background-color: #4527a0;
 color: rgba(255, 255, 255, 0.87); }

.deep-purple-900 {
 background-color: #311b92;
 color: rgba(255, 255, 255, 0.87); }

.deep-purple-A100 {
 background-color: #b388ff;
 color: rgba(0, 0, 0, 0.87); }

.deep-purple-A200 {
 background-color: #7c4dff;
 color: rgba(255, 255, 255, 0.87); }

.deep-purple-A400 {
 background-color: #651fff;
 color: rgba(255, 255, 255, 0.87); }

.deep-purple-A700 {
 background-color: #6200ea;
 color: rgba(255, 255, 255, 0.87); }

.indigo {
 background-color: #3f51b5;
 color: rgba(255, 255, 255, 0.87); }

.indigo-50 {
 background-color: #e8eaf6;
 color: rgba(0, 0, 0, 0.87); }

.indigo-100 {
 background-color: #c5cae9;
 color: rgba(0, 0, 0, 0.87); }

.indigo-200 {
 background-color: #9fa8da;
 color: rgba(0, 0, 0, 0.87); }

.indigo-300 {
 background-color: #7986cb;
 color: rgba(255, 255, 255, 0.87); }

.indigo-400 {
 background-color: #5c6bc0;
 color: rgba(255, 255, 255, 0.87); }

.indigo-500 {
 background-color: #3f51b5;
 color: rgba(255, 255, 255, 0.87); }

.indigo-600 {
 background-color: #3949ab;
 color: rgba(255, 255, 255, 0.87); }

.indigo-700 {
 background-color: #303f9f;
 color: rgba(255, 255, 255, 0.87); }

.indigo-800 {
 background-color: #283593;
 color: rgba(255, 255, 255, 0.87); }

.indigo-900 {
 background-color: #1a237e;
 color: rgba(255, 255, 255, 0.87); }

.indigo-A100 {
 background-color: #8c9eff;
 color: rgba(0, 0, 0, 0.87); }

.indigo-A200 {
 background-color: #536dfe;
 color: rgba(255, 255, 255, 0.87); }

.indigo-A400 {
 background-color: #3d5afe;
 color: rgba(255, 255, 255, 0.87); }

.indigo-A700 {
 background-color: #304ffe;
 color: rgba(255, 255, 255, 0.87); }

.blue {
 background-color: #2196f3;
 color: rgba(255, 255, 255, 0.87); }

.blue-50 {
 background-color: #e3f2fd;
 color: rgba(0, 0, 0, 0.87); }

.blue-100 {
 background-color: #bbdefb;
 color: rgba(0, 0, 0, 0.87); }

.blue-200 {
 background-color: #90caf9;
 color: rgba(0, 0, 0, 0.87); }

.blue-300 {
 background-color: #64b5f6;
 color: rgba(0, 0, 0, 0.87); }

.blue-400 {
 background-color: #42a5f5;
 color: rgba(0, 0, 0, 0.87); }

.blue-500 {
 background-color: #2196f3;
 color: rgba(255, 255, 255, 0.87); }

.blue-600 {
 background-color: #1e88e5;
 color: rgba(255, 255, 255, 0.87); }

.blue-700 {
 background-color: #1976d2;
 color: rgba(255, 255, 255, 0.87); }

.blue-800 {
 background-color: #1565c0;
 color: rgba(255, 255, 255, 0.87); }

.blue-900 {
 background-color: #0d47a1;
 color: rgba(255, 255, 255, 0.87); }

.blue-A100 {
 background-color: #82b1ff;
 color: rgba(0, 0, 0, 0.87); }

.blue-A200 {
 background-color: #448aff;
 color: rgba(255, 255, 255, 0.87); }

.blue-A400 {
 background-color: #2979ff;
 color: rgba(255, 255, 255, 0.87); }

.blue-A700 {
 background-color: #2962ff;
 color: rgba(255, 255, 255, 0.87); }

.light-blue {
 background-color: #03a9f4;
 color: rgba(255, 255, 255, 0.87); }

.light-blue-50 {
 background-color: #e1f5fe;
 color: rgba(0, 0, 0, 0.87); }

.light-blue-100 {
 background-color: #b3e5fc;
 color: rgba(0, 0, 0, 0.87); }

.light-blue-200 {
 background-color: #81d4fa;
 color: rgba(0, 0, 0, 0.87); }

.light-blue-300 {
 background-color: #4fc3f7;
 color: rgba(0, 0, 0, 0.87); }

.light-blue-400 {
 background-color: #29b6f6;
 color: rgba(0, 0, 0, 0.87); }

.light-blue-500 {
 background-color: #03a9f4;
 color: rgba(255, 255, 255, 0.87); }

.light-blue-600 {
 background-color: #039be5;
 color: rgba(255, 255, 255, 0.87); }

.light-blue-700 {
 background-color: #0288d1;
 color: rgba(255, 255, 255, 0.87); }

.light-blue-800 {
 background-color: #0277bd;
 color: rgba(255, 255, 255, 0.87); }

.light-blue-900 {
 background-color: #01579b;
 color: rgba(255, 255, 255, 0.87); }

.light-blue-A100 {
 background-color: #80d8ff;
 color: rgba(0, 0, 0, 0.87); }

.light-blue-A200 {
 background-color: #40c4ff;
 color: rgba(0, 0, 0, 0.87); }

.light-blue-A400 {
 background-color: #00b0ff;
 color: rgba(0, 0, 0, 0.87); }

.light-blue-A700 {
 background-color: #0091ea;
 color: rgba(255, 255, 255, 0.87); }

.cyan {
 background-color: #00bcd4;
 color: rgba(255, 255, 255, 0.87); }

.cyan-50 {
 background-color: #e0f7fa;
 color: rgba(0, 0, 0, 0.87); }

.cyan-100 {
 background-color: #b2ebf2;
 color: rgba(0, 0, 0, 0.87); }

.cyan-200 {
 background-color: #80deea;
 color: rgba(0, 0, 0, 0.87); }

.cyan-300 {
 background-color: #4dd0e1;
 color: rgba(0, 0, 0, 0.87); }

.cyan-400 {
 background-color: #26c6da;
 color: rgba(0, 0, 0, 0.87); }

.cyan-500 {
 background-color: #00bcd4;
 color: rgba(255, 255, 255, 0.87); }

.cyan-600 {
 background-color: #00acc1;
 color: rgba(255, 255, 255, 0.87); }

.cyan-700 {
 background-color: #0097a7;
 color: rgba(255, 255, 255, 0.87); }

.cyan-800 {
 background-color: #00838f;
 color: rgba(255, 255, 255, 0.87); }

.cyan-900 {
 background-color: #006064;
 color: rgba(255, 255, 255, 0.87); }

.cyan-A100 {
 background-color: #84ffff;
 color: rgba(0, 0, 0, 0.87); }

.cyan-A200 {
 background-color: #18ffff;
 color: rgba(0, 0, 0, 0.87); }

.cyan-A400 {
 background-color: #00e5ff;
 color: rgba(0, 0, 0, 0.87); }

.cyan-A700 {
 background-color: #00b8d4;
 color: rgba(0, 0, 0, 0.87); }

.teal {
 background-color: #009688;
 color: rgba(255, 255, 255, 0.87); }

.teal-50 {
 background-color: #e0f2f1;
 color: rgba(0, 0, 0, 0.87); }

.teal-100 {
 background-color: #b2dfdb;
 color: rgba(0, 0, 0, 0.87); }

.teal-200 {
 background-color: #80cbc4;
 color: rgba(0, 0, 0, 0.87); }

.teal-300 {
 background-color: #4db6ac;
 color: rgba(0, 0, 0, 0.87); }

.teal-400 {
 background-color: #26a69a;
 color: rgba(0, 0, 0, 0.87); }

.teal-500 {
 background-color: #009688;
 color: rgba(255, 255, 255, 0.87); }

.teal-600 {
 background-color: #00897b;
 color: rgba(255, 255, 255, 0.87); }

.teal-700 {
 background-color: #00796b;
 color: rgba(255, 255, 255, 0.87); }

.teal-800 {
 background-color: #00695c;
 color: rgba(255, 255, 255, 0.87); }

.teal-900 {
 background-color: #004d40;
 color: rgba(255, 255, 255, 0.87); }

.teal-A100 {
 background-color: #a7ffeb;
 color: rgba(0, 0, 0, 0.87); }

.teal-A200 {
 background-color: #64ffda;
 color: rgba(0, 0, 0, 0.87); }

.teal-A400 {
 background-color: #1de9b6;
 color: rgba(0, 0, 0, 0.87); }

.teal-A700 {
 background-color: #00bfa5;
 color: rgba(0, 0, 0, 0.87); }

.green {
 background-color: #4caf50;
 color: rgba(255, 255, 255, 0.87); }

.green-50 {
 background-color: #e8f5e9;
 color: rgba(0, 0, 0, 0.87); }

.green-100 {
 background-color: #c8e6c9;
 color: rgba(0, 0, 0, 0.87); }

.green-200 {
 background-color: #a5d6a7;
 color: rgba(0, 0, 0, 0.87); }

.green-300 {
 background-color: #81c784;
 color: rgba(0, 0, 0, 0.87); }

.green-400 {
 background-color: #66bb6a;
 color: rgba(0, 0, 0, 0.87); }

.green-500 {
 background-color: #4caf50;
 color: rgba(255, 255, 255, 0.87); }

.green-600 {
 background-color: #43a047;
 color: rgba(255, 255, 255, 0.87); }

.green-700 {
 background-color: #388e3c;
 color: rgba(255, 255, 255, 0.87); }

.green-800 {
 background-color: #2e7d32;
 color: rgba(255, 255, 255, 0.87); }

.green-900 {
 background-color: #1b5e20;
 color: rgba(255, 255, 255, 0.87); }

.green-A100 {
 background-color: #b9f6ca;
 color: rgba(0, 0, 0, 0.87); }

.green-A200 {
 background-color: #69f0ae;
 color: rgba(0, 0, 0, 0.87); }

.green-A400 {
 background-color: #00e676;
 color: rgba(0, 0, 0, 0.87); }

.green-A700 {
 background-color: #00c853;
 color: rgba(0, 0, 0, 0.87); }

.light-green {
 background-color: #8bc34a;
 color: rgba(0, 0, 0, 0.87); }

.light-green-50 {
 background-color: #f1f8e9;
 color: rgba(0, 0, 0, 0.87); }

.light-green-100 {
 background-color: #dcedc8;
 color: rgba(0, 0, 0, 0.87); }

.light-green-200 {
 background-color: #c5e1a5;
 color: rgba(0, 0, 0, 0.87); }

.light-green-300 {
 background-color: #aed581;
 color: rgba(0, 0, 0, 0.87); }

.light-green-400 {
 background-color: #9ccc65;
 color: rgba(0, 0, 0, 0.87); }

.light-green-500 {
 background-color: #8bc34a;
 color: rgba(0, 0, 0, 0.87); }

.light-green-600 {
 background-color: #7cb342;
 color: rgba(0, 0, 0, 0.87); }

.light-green-700 {
 background-color: #689f38;
 color: rgba(0, 0, 0, 0.87); }

.light-green-800 {
 background-color: #558b2f;
 color: rgba(255, 255, 255, 0.87); }

.light-green-900 {
 background-color: #33691e;
 color: rgba(255, 255, 255, 0.87); }

.light-green-A100 {
 background-color: #ccff90;
 color: rgba(0, 0, 0, 0.87); }

.light-green-A200 {
 background-color: #b2ff59;
 color: rgba(0, 0, 0, 0.87); }

.light-green-A400 {
 background-color: #76ff03;
 color: rgba(0, 0, 0, 0.87); }

.light-green-A700 {
 background-color: #64dd17;
 color: rgba(0, 0, 0, 0.87); }

.lime {
 background-color: #cddc39;
 color: rgba(0, 0, 0, 0.87); }

.lime-50 {
 background-color: #f9fbe7;
 color: rgba(0, 0, 0, 0.87); }

.lime-100 {
 background-color: #f0f4c3;
 color: rgba(0, 0, 0, 0.87); }

.lime-200 {
 background-color: #e6ee9c;
 color: rgba(0, 0, 0, 0.87); }

.lime-300 {
 background-color: #dce775;
 color: rgba(0, 0, 0, 0.87); }

.lime-400 {
 background-color: #d4e157;
 color: rgba(0, 0, 0, 0.87); }

.lime-500 {
 background-color: #cddc39;
 color: rgba(0, 0, 0, 0.87); }

.lime-600 {
 background-color: #c0ca33;
 color: rgba(0, 0, 0, 0.87); }

.lime-700 {
 background-color: #afb42b;
 color: rgba(0, 0, 0, 0.87); }

.lime-800 {
 background-color: #9e9d24;
 color: rgba(0, 0, 0, 0.87); }

.lime-900 {
 background-color: #827717;
 color: rgba(255, 255, 255, 0.87); }

.lime-A100 {
 background-color: #f4ff81;
 color: rgba(0, 0, 0, 0.87); }

.lime-A200 {
 background-color: #eeff41;
 color: rgba(0, 0, 0, 0.87); }

.lime-A400 {
 background-color: #c6ff00;
 color: rgba(0, 0, 0, 0.87); }

.lime-A700 {
 background-color: #aeea00;
 color: rgba(0, 0, 0, 0.87); }

.yellow {
 background-color: #ffeb3b;
 color: rgba(0, 0, 0, 0.87); }

.yellow-50 {
 background-color: #fffde7;
 color: rgba(0, 0, 0, 0.87); }

.yellow-100 {
 background-color: #fff9c4;
 color: rgba(0, 0, 0, 0.87); }

.yellow-200 {
 background-color: #fff59d;
 color: rgba(0, 0, 0, 0.87); }

.yellow-300 {
 background-color: #fff176;
 color: rgba(0, 0, 0, 0.87); }

.yellow-400 {
 background-color: #ffee58;
 color: rgba(0, 0, 0, 0.87); }

.yellow-500 {
 background-color: #ffeb3b;
 color: rgba(0, 0, 0, 0.87); }

.yellow-600 {
 background-color: #fdd835;
 color: rgba(0, 0, 0, 0.87); }

.yellow-700 {
 background-color: #fbc02d;
 color: rgba(0, 0, 0, 0.87); }

.yellow-800 {
 background-color: #f9a825;
 color: rgba(0, 0, 0, 0.87); }

.yellow-900 {
 background-color: #f57f17;
 color: rgba(0, 0, 0, 0.87); }

.yellow-A100 {
 background-color: #ffff8d;
 color: rgba(0, 0, 0, 0.87); }

.yellow-A200 {
 background-color: #ffff00;
 color: rgba(0, 0, 0, 0.87); }

.yellow-A400 {
 background-color: #ffea00;
 color: rgba(0, 0, 0, 0.87); }

.yellow-A700 {
 background-color: #ffd600;
 color: rgba(0, 0, 0, 0.87); }

.amber {
 background-color: #ffc107;
 color: rgba(0, 0, 0, 0.87); }

.amber-50 {
 background-color: #fff8e1;
 color: rgba(0, 0, 0, 0.87); }

.amber-100 {
 background-color: #ffecb3;
 color: rgba(0, 0, 0, 0.87); }

.amber-200 {
 background-color: #ffe082;
 color: rgba(0, 0, 0, 0.87); }

.amber-300 {
 background-color: #ffd54f;
 color: rgba(0, 0, 0, 0.87); }

.amber-400 {
 background-color: #ffca28;
 color: rgba(0, 0, 0, 0.87); }

.amber-500 {
 background-color: #ffc107;
 color: rgba(0, 0, 0, 0.87); }

.amber-600 {
 background-color: #ffb300;
 color: rgba(0, 0, 0, 0.87); }

.amber-700 {
 background-color: #ffa000;
 color: rgba(0, 0, 0, 0.87); }

.amber-800 {
 background-color: #ff8f00;
 color: rgba(0, 0, 0, 0.87); }

.amber-900 {
 background-color: #ff6f00;
 color: rgba(0, 0, 0, 0.87); }

.amber-A100 {
 background-color: #ffe57f;
 color: rgba(0, 0, 0, 0.87); }

.amber-A200 {
 background-color: #ffd740;
 color: rgba(0, 0, 0, 0.87); }

.amber-A400 {
 background-color: #ffc400;
 color: rgba(0, 0, 0, 0.87); }

.amber-A700 {
 background-color: #ffab00;
 color: rgba(0, 0, 0, 0.87); }

.orange {
 background-color: #ff9800;
 color: rgba(0, 0, 0, 0.87); }

.orange-50 {
 background-color: #fff3e0;
 color: rgba(0, 0, 0, 0.87); }

.orange-100 {
 background-color: #ffe0b2;
 color: rgba(0, 0, 0, 0.87); }

.orange-200 {
 background-color: #ffcc80;
 color: rgba(0, 0, 0, 0.87); }

.orange-300 {
 background-color: #ffb74d;
 color: rgba(0, 0, 0, 0.87); }

.orange-400 {
 background-color: #ffa726;
 color: rgba(0, 0, 0, 0.87); }

.orange-500 {
 background-color: #ff9800;
 color: rgba(0, 0, 0, 0.87); }

.orange-600 {
 background-color: #fb8c00;
 color: rgba(0, 0, 0, 0.87); }

.orange-700 {
 background-color: #f57c00;
 color: rgba(0, 0, 0, 0.87); }

.orange-800 {
 background-color: #ef6c00;
 color: rgba(255, 255, 255, 0.87); }

.orange-900 {
 background-color: #e65100;
 color: rgba(255, 255, 255, 0.87); }

.orange-A100 {
 background-color: #ffd180;
 color: rgba(0, 0, 0, 0.87); }

.orange-A200 {
 background-color: #ffab40;
 color: rgba(0, 0, 0, 0.87); }

.orange-A400 {
 background-color: #ff9100;
 color: rgba(0, 0, 0, 0.87); }

.orange-A700 {
 background-color: #ff6d00;
 color: rgba(0, 0, 0, 0.87); }

.deep-orange {
 background-color: #ff5722;
 color: rgba(255, 255, 255, 0.87); }

.deep-orange-50 {
 background-color: #fbe9e7;
 color: rgba(0, 0, 0, 0.87); }

.deep-orange-100 {
 background-color: #ffccbc;
 color: rgba(0, 0, 0, 0.87); }

.deep-orange-200 {
 background-color: #ffab91;
 color: rgba(0, 0, 0, 0.87); }

.deep-orange-300 {
 background-color: #ff8a65;
 color: rgba(0, 0, 0, 0.87); }

.deep-orange-400 {
 background-color: #ff7043;
 color: rgba(0, 0, 0, 0.87); }

.deep-orange-500 {
 background-color: #ff5722;
 color: rgba(255, 255, 255, 0.87); }

.deep-orange-600 {
 background-color: #f4511e;
 color: rgba(255, 255, 255, 0.87); }

.deep-orange-700 {
 background-color: #e64a19;
 color: rgba(255, 255, 255, 0.87); }

.deep-orange-800 {
 background-color: #d84315;
 color: rgba(255, 255, 255, 0.87); }

.deep-orange-900 {
 background-color: #bf360c;
 color: rgba(255, 255, 255, 0.87); }

.deep-orange-A100 {
 background-color: #ff9e80;
 color: rgba(0, 0, 0, 0.87); }

.deep-orange-A200 {
 background-color: #ff6e40;
 color: rgba(0, 0, 0, 0.87); }

.deep-orange-A400 {
 background-color: #ff3d00;
 color: rgba(255, 255, 255, 0.87); }

.deep-orange-A700 {
 background-color: #dd2c00;
 color: rgba(255, 255, 255, 0.87); }

.brown {
 background-color: #795548;
 color: rgba(255, 255, 255, 0.87); }

.brown-50 {
 background-color: #efebe9;
 color: rgba(0, 0, 0, 0.87); }

.brown-100 {
 background-color: #d7ccc8;
 color: rgba(0, 0, 0, 0.87); }

.brown-200 {
 background-color: #bcaaa4;
 color: rgba(0, 0, 0, 0.87); }

.brown-300 {
 background-color: #a1887f;
 color: rgba(255, 255, 255, 0.87); }

.brown-400 {
 background-color: #8d6e63;
 color: rgba(255, 255, 255, 0.87); }

.brown-500 {
 background-color: #795548;
 color: rgba(255, 255, 255, 0.87); }

.brown-600 {
 background-color: #6d4c41;
 color: rgba(255, 255, 255, 0.87); }

.brown-700 {
 background-color: #5d4037;
 color: rgba(255, 255, 255, 0.87); }

.brown-800 {
 background-color: #4e342e;
 color: rgba(255, 255, 255, 0.87); }

.brown-900 {
 background-color: #3e2723;
 color: rgba(255, 255, 255, 0.87); }

.blue-grey {
 background-color: #607d8b;
 color: rgba(255, 255, 255, 0.87); }

.blue-grey-50 {
 background-color: #eceff1;
 color: rgba(0, 0, 0, 0.87); }

.blue-grey-100 {
 background-color: #cfd8dc;
 color: rgba(0, 0, 0, 0.87); }

.blue-grey-200 {
 background-color: #b0bec5;
 color: rgba(0, 0, 0, 0.87); }

.blue-grey-300 {
 background-color: #90a4ae;
 color: rgba(0, 0, 0, 0.87); }

.blue-grey-400 {
 background-color: #78909c;
 color: rgba(255, 255, 255, 0.87); }

.blue-grey-500 {
 background-color: #607d8b;
 color: rgba(255, 255, 255, 0.87); }

.blue-grey-600 {
 background-color: #546e7a;
 color: rgba(255, 255, 255, 0.87); }

.blue-grey-700 {
 background-color: #455a64;
 color: rgba(255, 255, 255, 0.87); }

.blue-grey-800 {
 background-color: #37474f;
 color: rgba(255, 255, 255, 0.87); }

.blue-grey-900 {
 background-color: #263238;
 color: rgba(255, 255, 255, 0.87); }

.grey-50 {
 background-color: #fafafa;
 color: rgba(0, 0, 0, 0.87); }

.grey-100 {
 background-color: #f5f5f5;
 color: rgba(0, 0, 0, 0.87); }

.grey-200 {
 background-color: #eeeeee;
 color: rgba(0, 0, 0, 0.87); }

.grey-300 {
 background-color: #e0e0e0;
 color: rgba(0, 0, 0, 0.87); }

.grey-400 {
 background-color: #bdbdbd;
 color: rgba(0, 0, 0, 0.87); }

.grey-500 {
 background-color: #9e9e9e;
 color: rgba(0, 0, 0, 0.87); }

.grey-600 {
 background-color: #757575;
 color: rgba(255, 255, 255, 0.87); }

.grey-700 {
 background-color: #616161;
 color: rgba(255, 255, 255, 0.87); }

.grey-800 {
 background-color: #424242;
 color: rgba(255, 255, 255, 0.87); }

.grey-900 {
 background-color: #212121;
 color: rgba(255, 255, 255, 0.87); }


/* Large desktop */
@media (min-width: 1200px) { 
.pagination-padder {
   margin-left: ;
}
}

/* iPad Pro */
@media (min-width: 1024px) and (max-width: 1366px) {  

.pagination-padder {
   margin-left: ;
}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 

.pagination-padder {
   margin-left: -20px;
}
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 

.pagination-padder {
   margin-left: -70px;
}
}

/* Landscape phones and down */
@media (max-width: 480px) { 

.pagination-padder {
   margin-left: -70px;
}
}


/* Extra css code for fujinaija */

p.comment-form-email {
    display: none;
}

p.comment-form-url {
    display: none;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #c50101;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: bold;
    padding: 1em 2em;
}