@font-face { font-family: Arial; font-display: swap; }

.max-width {
  max-width: none;
}

.main-sidebar{
	max-width: 100%;
}

#main{
	min-height:500px !important;
}

.site-title {
    font-size: 1.5em;
    line-height: 1;
}
.social-media-icons a.custom-icon img {
	padding-top:3px;
	height:25px;
	width:25px;
}

#blog-name{
	box-sizing border-box
	color rgb(255, 255, 255)
	cursor pointer
	display inline
	font-family Rokkitt, sans-serif
	font-size 25px
	height auto
	line-height 28px
	text-align center
	text-decoration-color rgb(255, 255, 255)
	text-decoration-line none
	text-decoration-style solid
	text-decoration-thickness auto
	transition-delay 0s
	transition-duration 0.2s
	transition-property color
	transition-timing-function ease-in-out
	width auto
	-webkit-font-smoothing subpixel-antialiased
}

.menu-primary-items{
	padding-left:5%;
}

.more-link{
    padding: 8px 16px;
    border: solid 1px #202224;
    text-decoration: none;
}

.sidebar-primary .widget-title{
    font-family: "Lato",sans-serif;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 0.75em;
}

#post-content-body {
	 content-visibility: auto !important;
}

#jetpack-search-filters-3-wrapper{
	 font-family: "Lato",sans-serif;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 0.75em;
	   color: #CCCCCC;
}

.jetpack-search-filters-widget__sub-heading {
    font-family: "Lato",sans-serif;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 0.75em;
}

.jetpack-search-filter__link {
    font-size: 14px;

}

.sidebar-primary .widget_search input[type=search] {
	height:40px;
	font-size: 18px;
}
.search-form-container input[type=submit] {
	height:40px;
	font-size: 14px;
}

/*custom font*/

.aioseo-breadcrumbs .aioseo-breadcrumb-separator{
  display:none;
}

.breadcrumbs-container {
    /*centering*/
    border-radius: 5px;
    display: block;
	  height:50px;
    overflow: hidden;
	  overflow-y: hidden;
	  margin-bottom: 20px;
}

.aioseo-breadcrumbs span a {
    text-decoration: none;
    outline: none;
    display: block;
    float: left;
    font-size: 12px;
    line-height: 36px;
    color: white;
    /*need more margin on the left of links to accomodate the numbers*/
    padding: 0 10px 0 40px !important;
    background: #333;
    background: linear-gradient(#333, #111);
    position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.aioseo-breadcrumbs span:last-child {
    padding-left: 46px;
    border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.aioseo-breadcrumbs span:first-child {
    left: 14px;
}
.aioseo-breadcrumbs span:last-child {
    border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
    padding-right: 20px;
}

/*hover/active styles*/
.aioseo-breadcrumbs span:last-child, .aioseo-breadcrumbs span:hover{
    background: #111;
    background: linear-gradient(#333, #111);
}
.aioseo-breadcrumbs span:last-child, .aioseo-breadcrumbs span:hover {
    background: #222;
    background: linear-gradient(145deg, #333, #222);
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.aioseo-breadcrumbs span a:after {
    content: '';
    position: absolute;
    top: 0; 
    right: -18px; /*half of square's length*/
    /*same dimension as the line-height of .breadcrumb a */
    width: 36px; 
    height: 36px;
    /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
    length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
    if diagonal required = 1; length = 1/1.414 = 0.707*/
    transform: scale(0.707) rotate(45deg);
    /*we need to prevent the arrows from getting buried under the next link*/
    z-index: 1;
    /*background same as links but the gradient will be rotated to compensate with the transform applied*/
    background: #555;
    background: linear-gradient(135deg, #777, #333);
    /*stylish arrow design using box shadow*/
    box-shadow: 
        2px -2px 0 2px rgba(0, 0, 0, 0.1), 
        3px -3px 0 2px rgba(255, 255, 255, 0.3);
    /*
        5px - for rounded arrows and 
        50px - to prevent hover glitches on the border created using shadows*/
    border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.aioseo-breadcrumbs span:last-child {
    content: none;
}
/*we will use the :before element to show numbers*/
.aioseo-breadcrumbs span a:before {
    /*some styles now*/
    border-radius: 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin: 8px 0;
    position: absolute;
    top: 0;
    left: 30px;
    background: #333;
    background: linear-gradient(#333, #300);
    font-weight: bold;
}


.aioseo-breadcrumbs span a, .aioseo-breadcrumbs span a:after {
    background: #333333;
    color:#eee;
    transition: all 0.7s;
}
.aioseo-breadcrumbs span a:before {
    background: #111;
    box-shadow: 0 0 0 1px #00c;
}
.aioseo-breadcrumbs span a:hover, 
.aioseo-breadcrumbs span a:hover:after {
    background: #5c6066;
}

.aioseo-breadcrumbs span:last-child {   
    display:none
}