@font-face {
  font-family: Cinzel;
  src: url('../fonts/Cinzel-Regular.ttf');  
}
@font-face {
  font-family: Raleway;
  src: url('../fonts/Raleway-Regular.ttf');  
}
@font-face {
  font-family: OpenSans;
  src: url('../fonts/OpenSans-Regular.ttf');  
}


@font-face {
    font-family: Metropolis;
    src: url('../fonts/metropolis-latin-400-normal.ttf');  
} 

/** Body */
body {   
    font-family: "Metropolis", sans-serif;    
    font-size: 17px;
    color: black;
    line-height: 200%;
    width: 1300px;
    border: 2px solid black;
}

a  {
    color: #a94a4e;
    text-decoration: none;
    cursor: pointer;
}

ul {
    margin: 0 20px;   
}

a:hover, button:hover {
    color: #b88f4d;
    
}

h1 {
   text-transform: uppercase;
    font-size: 35px;
    font-family: 'OpenSans', sans-serif;    
}
h1, h2, h3 {          
    text-align: center;
    color: black;
    font-family: 'OpenSans', sans-serif;
}   

h3 {
    font-size: .8em;
    text-transform: uppercase;
    margin: 5px auto;
}
h5 {
    color: #555;    
    margin: 5px 0;
}
h5 i {
    color: #999;
}
img {
    padding: 0;
}
b {
    color: #333;
}
hr {
    display: none;
}

/** OUTERWRAP */
 
header {      
    padding: 0 ;  
    margin: 0 auto;  
    background-color: #a94a4e;
    border-bottom: 1px solid black;
 }

header h1 {
    margin: 45px auto 30px auto;
}

header h1 a{    
    font-size: 50px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 8px;
    color: white;
    font-weight: bold;
    font-family: "Cinzel", serif;  
   
    margin: 0 auto;
}


/** MENU */
.js-menu {
    display: none;
}
.css-menu {
    display: block;   
    margin: 0;
    padding: 3px 0;
    background-color: black;
    border-bottom: 1px solid #555;
}
/** CSS MENU */


.css-menu li, .css-menu li a {      
    color: white; 
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;    
}
.css-menu .submenu1 {
    background-color: black;
    width: 160px;
}
.css-menu .submenu1 li a{
    text-transform: none;
    padding: 0 10px;
}
/** All 3 levels of menu item hover color */
.css-menu a:hover, .css-menu li:hover, .css-menu .submenu1 li:hover,  a:hover, .css-menu li.current , .css-menu li.current a {
    color: #d7bd80;
}

.css-menu .submenu1 li a:hover {
    color: #333;
}
.css-menu li {
    padding: 10px 15px 5px 15px;  
}

.css-menu li a {
    padding: 0 5px;
}
.css-menu  ul.submenu1  {   
    padding-top: 8px;
}
.css-menu .submenu1 li {    
    padding: 10px 0;   
    background-color: #666;
   
}
.css-menu .submenu1 li a {
    color: #ddd;
   
}

.menu-node {
    padding: 0 10px;
}
/** JS Menu */
.menu-line { 
   background-color: black;  
}

.menuitem, .menubutton1 {
    font-size: 12px;
}
.menuitem img {
    width: 50px;
    padding: 0;
}
.menuitem p {
    margin: 0;
}

/** MAIN  */

.page-title h1 {
   
    padding: 10px 0;    
    margin-bottom: 40px;
    color: black;
}
.home .page-title h1 {
    margin: 0;
}
/** COLUMNS */
.home-splash-image.textblock {
    max-width: 100%;
    padding: 0;
    margin: auto;
    width: 100%;
}

.content-column-left {    
    margin: 10px 0;   
    text-align: left;   
    width: 70%;    
}

.sidebar-column-right  {  
    text-align: center;  
    width: 25%;
}
.half-column-1 {
    text-align: left;
    padding: 0 15px;
}
.imagegridcolumn {
    width: 300px;
}
/**   HOME */
.about img.img-0 {
    padding: 0 20px 0 0;
    margin: 0 auto;   
}
.home img.img-0 {
	padding: 0;  
    
}
.black-box {
    background-color: black;
    color: white;
    padding: 20px ;
}
.black-box h1 {
    color: white;
}
/** EVENTS */


/** POSTS */

.single-post-page .sidebar-column-right {
    padding-top: 30px;
}
.money .featured-image {
    display: none;
}
.single-post-page .money .featured-image {
    display: block;
}

.postgridcolumn {
    width: 280px;
    margin: 5px;
    height: 320px;
    padding: 10px 20px;
    text-align: center;
    background-color: black;
    border-top: 6px solid #a94a4e;
}
.postgridcolumn img {
    padding: 0;
    max-width: 100%;
    width: 200px;
}
.post-content, .event-content {  
    margin: 10px auto;  
    width: 800px;
    max-width: 100%;
    display: block;
}
.post-title2 {
    display: none;
}
.post-subtitle {
    text-align: center;    
    font-style: italic;
}

img.featured-image  {
    max-width: 100%;   
    margin: auto;
    width: 400px;
}

.post-content {
    text-align: left;   
    margin: 20px auto;    
    padding: 20px;
    border: 1px solid #bbb;  
    background-color: #eee;
}
.post-categories {
    display: none;
}


.post-title1 {
    font-size: 18px;   
    text-transform: uppercase;
    height: 60px;
    text-align: center;   
}



.post-list-by-date-latest-first {
    width: 600px;
    max-width: 100%;
    margin: auto;
    padding: 20px;
    border: 1px solid #ddd;
}
/**  UNEMPLOYED CATS */
.post-thumbnails-text .post-content {
    display: inline-block;
    width: 300px;
    box-sizing: border-box;
    max-width: 100%;
    border: none; 
    position: relative;
    text-align: center;
    margin: 0 auto;    
    height: 380px;
   
}
.post-thumbnails-text a {
    text-decoration: none;
}

 button.post-title-box {
    background-color: #666;
    color: white;    
    box-sizing: border-box;
    margin: 0 auto;
   
    width: 260px;
    position: relative;
    transition: all 2s;
}
.post-text-box {   
    position: relative;
    visibility: hidden;
    background-color: #666;
    width: 260px;
    color: white;    
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;   
    opacity: 0;
    transition: all 0.7s ease-in-out , visibility .3s;
    top: -100px;
   
}

.post-content:hover .post-text-box {     
    visibility:visible;
    opacity: 1;
    font-size: 16px;
}
.post-content h2 {
    margin: 5px auto;
}
.post-thumbnails-text h2 {
    color: white;
    font-size: 20px;
}
.post-thumbnails-text .thumbnail-image {
    padding: 0 10px;
}
.post-thumbnails-text img.thumbnail-image {
    margin: 0 auto;
}
/** Forum */
.forum h3 {
    text-align: left;
   
}
.forum main { 
    text-align: left;
    width: 900px;
    margin: auto;
}



/** LInks */
.link-title {
    background-color: pink;
    color: black;
    display: inline-block;
    padding: 5px 7px;
    border: 1px solid #666;
    border-radius: 2px;
    margin: 0 auto 15px auto;
}
/** Contact form */
.contact-form {
    margin: auto;
    width: 450px;
    text-align: center;
}

.contact-form .half-column-1, .contact-form .half-column-2 {
    width: 100%;
    padding: 0;
    text-align: center;
}
.contact-subject,.contact-phone {
    display: none;
}

/** GALLERIES  */

.slideshowimage {
	width: 400px;
}

/** POST GRID HOVER TITLE FADE-IN, IMAGE FADE-OUT */
  
.hovertitle {   
    position: absolute;
    box-sizing: border-box;
    opacity: 0;   
    width: 100%;
    display: inline-block;
    bottom: 10px;  
    left: 0;
    text-align: center;    
    color: white;
    font-size: 12px;   
    padding: 5px;
    background-color: black;
    line-height: 130%;
}

img.galleryimage:hover {
	opacity: .8;	
	transition: all 1.5s ease;
}
 .postgridcolumn:hover .hovertitle {
     z-index: 10;
     opacity: 1;	
     background-color: black;
   transition: opacity 1s ease;  
}

.gallery-with-categories a.menuitem {
    background-color: white;
    color: black;
}
img.galleryimage {
    margin: 0;
    border: 1px solid #666;
    border-radius: 3px;
    
}
.categorywrap {
    margin-bottom: 10px;
}
/** Calendar */
.event-cell {
    border: 1px solid #bbb;
}

/** BLOCKS */

.event-box {
	display: inline-block;
	width: 300px;
	vertical-align: top;
	max-width: 100%;
}

.event-box p {
	font-size: 14px;
}
.event-box:hover {
	background-color: #eee;
}
.event  .event-box {
	display: block;
	width: 800px;
}
.how-to-make-more-money h2, .how-to-make-more-money h3 {
    color: black;
}

.yellow-button-inner {
    background-color: #ffc439;
    border: 1px solid blue;
    padding: 5px;
    border-radius: 20px;
    width: 130px;
    color: black;
    margin: 10px  auto;
    text-align: center;
}

.toggle-banner {
    width: 100%;
    margin:  auto;
    cursor: pointer;  
    padding: 10px;    
}

.discussion-forum .toggle-banner {
    text-align: left;
}
.registration-form {
	background-color: #eee;
	border: 1px solid #666;
	padding: 20px;
	width: 500px;
	max-width: 100%;
	margin: auto;
}

.subscribe-form {
    width: 400px;
    margin: auto;
}

/** FOOTER */
footer {
     background-color: #a94a4e;
    padding: 30px;
	margin: 40px auto 0 auto;
}
footer, footer a, footer button.menuitem, footer a.menuitem {
    color: white;
}
.footer-open-button {
   display: block;
}
footer .link-title-above {
    display: none;
}
footer .menu {
    width: 100%;
    text-align: center;
}
footer .menuitem { 
  padding: 0 5px;
}

/** Popup Modal Styles */

.display-none {
    display: none;
}

#close-popup-modal {
    text-align: right;
}
/** KEYFRAMES */
@keyframes page-load {
   0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/**  */
/**  BREAKPOINTS */
/**  */

@media only screen and (max-width: 1220px) {
    .postgridcolumn {
        width: 260px;
    }


}
@media only screen and (max-width: 850px)  {
    .css-menu li {
        padding: 0 15px;
    }
    .css-menu li, .css-menu li a {         
        font-size: 12px;
    }

    .content-column-left, .sidebar-column-right, .full-width-column, .half-column-1, .half-column-2 {  
        display: block;
        padding: 0px;
        width: 95%;
        margin: 10px auto; 
        float: none;          
    }  
    .content-column-left {
        text-align: center;
    }
    .forum .content-column-left {
        text-align: left;
    }
}

@media only screen and (max-width: 770px)  {
    .js-menu {
        display: block;
    }
    .css-menu {
        display: none;          
    }

   
    /** JS MEnu */
    .menubutton {
        display: block;
        margin: auto;
    }     
    .menucontent  {      
        display: none;           
    }    
    .menuwrap1 {
        display: block; 
        margin: auto;        
    }    
    .menucontent1, .menucontent2 { 
        text-align: left;
        width: 100%;
        position: relative;
    }    
    .menuitem, .menubutton1, .menubutton2 {       
        box-sizing: border-box; 
        margin: 0 auto;
        font-size: 16px;
        border: none;
        display: block;
    }
    .menuitem, .menuwrap1 {  
        padding: 15px 0;        
    }
    h1 {
        font-size: 25px;
    }
    
    img.image-left, img.image-right  {
        float: none;
        margin: auto;
        display: block;
    }
    
}  

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

    .headerwrap h1 a {
        font-size: 40px;
    }
    .page-title h1 {
        font-size: 18px;
    }
}

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

    .headerwrap h1 a {
        font-size: 25px;
    }
}