/*
Theme Name: frugaltheme - col-lg-4
Theme URI: frugalbucharest.com
Description: A brief description will do.
Author: Alen Todorov;
Version: 0.2
*/



@import url('https://fonts.googleapis.com/css?family=Nunito:400,700,900');
@import url('https://fonts.googleapis.com/css?family=Raleway:900');


/*THEME COLORS AND TYPOGRAPHY*/

/*
main-color: #008739 (green)
secondary-color: #FEE6DC (light-orange)
secondary-color-contrast: #E26B37 (strong-orange)
*/


/*GENERAL BOOSTRAP RESET*/


/*.collapse.show {
	display: inline-block;
}
*/

.card-body {
	padding: 1rem;
}

/*TYPOGRAPHY AND GENERIC STYLES*/
body {
	font-family: Nunito ,sans-serif;
}

.paper {
	background-image: url(./assets/images/paper.png);
	background-size: cover;
}


/*CONTENT CARDS*/


.google-maps {
	color: #E26B37;
	padding-right: 5px;
	text-decoration: none;
}

.google-maps:hover {
	color: #E26B37;
}

.content {
	background-color: #FEE6DC;
	margin-top: 2rem;
	background-image: url(./assets/images/background-card.png);
	background-repeat: no-repeat;
	background-position: center center;
}

/*sizes are what wordpress would output by default*/

.content .img-fluid, .size-full, .size-large , .size-medium {
	width: 100%;
	height: auto;
	margin: 0 auto;
    border: 5px solid #FFFFFF;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,0.10);

}

/*style of the inline images so they will show a zoom cursor*/

.size-full, .size-large , .size-medium {
	cursor:zoom-in;
}


.content:nth-child(odd) .img-fluid{
    transform: rotate(0.5deg);
}


.content:nth-child(even) .img-fluid{
    transform: rotate(-0.5deg);
}

.card-body-full a, .card-body-full a:visited {
	color: white;
	text-decoration: underline;
}


.content h1, .content h2, .content h3, .content h2 a, .content h2 a:hover {
	color: #E26B37;
	font-weight: 900;
}

.content h1 {
	font-size: 42px;
	text-transform: lowercase;
}

.content h2 {
	font-size: 18px;
	text-transform: uppercase;
}

.content h3 {
	font-size: 18px;
	text-transform: lowercase;

}

/*A messy way of styling the paragraph without styling the images as well*/
/*It seems Tiny MCE adds the number of paragraphs if there are more than one so places with more images need the .p1 class as well*/

.card-body-full p:first-child, .card-body-full .p1 {
	color: white;
	background-color: #E26B37;
	padding: 1rem;
	margin-top: 1rem;
	background-image: url(./assets/images/paper.png);
	background-size: cover;
}

.card-body-title {
	text-align: center;
}


/*BUTTON STYLE*/

.btn-text b{display:inline}
.btn-text:not(.collapsed)  span{display:none}
.btn-text.collapsed b {display:none}

.btn {
	display: block;
	margin: auto;
	color: white;
	background-color: #E26B37;
	text-decoration: underline;
	border-radius: 0;
	border:0;
	margin-top: 1rem;
	margin-bottom: 1rem;
	cursor: pointer;
}

 .btn:hover {
	color: white;
	background-color: #E26B37;
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}


/*SINGLE POST RESETS*/

.more {
	opacity: 0.7;

}

.more:hover {
	opacity:  1;
}


/*HEADER*/


.header a, .header a:hover, .header a:visited {
	color: white;
	text-decoration: none;
}

.header {

	color: white;
	text-align: center;
	background-color: #008739;
	font-family: Raleway;
	height: 450px;
	z-index: 10;


}


.header p {
	padding:0 1rem;
	font-family: Nunito;
}

.header h2 {
	text-transform: uppercase;
	color: #233831;
	padding-top: 20px;
	font-weight: 900;
}

.header h1 {
	padding-top: 0;
	padding-bottom: 50px;
	font-weight: 900;
	font-size: 3.5rem;
}

.header .ghost {
	text-align: left;
    font-size: 0.9rem;
    display: inline-block;
    border: 1px solid #E7F142;
    color: #E7F142;
    border-radius: 5px;
    padding: 0.2rem 0.4rem;
    margin-bottom: 1rem;
}

/*HEADER STICKY*/

/*this div is needed for adjusting full card view of the first 2 cards*/

#fill-header-sticky {
	display: none;
	height: 500px;
}

.sticky {

    height: 110px;
    width: 380px;
  	position: fixed;
  	top:0;


}

.sticky .ghost, .sticky p, .sticky img {
	display: none;
}

.sticky h1 {
	padding-bottom: 0;
	margin-top:-30px;
}

.sticky h2 {
	padding-top: 10px;
}

.sticky .nav {
	padding-top: 0;
}

/*MENU*/


.nav {
	margin: 0 auto;
	text-align: center;
	padding-top: 10px;
}

.nav a, .nav a:hover {
	color: white;
	text-transform: uppercase;
	text-decoration: underline;
}


.nav li {
	padding:0 0.5rem;
}

.nav .current-menu-item a {
	color: #233831;
}



/*CUSTOM CARD: google-custom-map*/

#google-custom-map .content h1{
	color: #008739;
}

#google-custom-map .content {
	background-color: rgba(23, 140, 73, 0.17);
    background-image: none;
}


#google-custom-map .card-body-full p {
	background-color: #008739;
}

/*CUSTOM CARD: facebook-share-card*/

#facebook-share-card .content{
	background-color: #dfe3ee;
	background-image: none;
}

#facebook-share-card .content h1 {
	color: #3B5998
}

#facebook-share-card .card-body-full p {
	background-color: #3b5998;
}





/*FOOTER*/

.footer{
	height: 300px;
	margin-top: 200px;
}

.footer img {
	margin-top: -200px;
}

.footer p {
	max-width: 400px;
	margin: 0 auto;
	padding-bottom: 10px;
}

.footer a {
	color: #E7F142;
}

.footer .ghost {
	text-decoration: underline;
}

.footer h1 {
	margin-top: -33px;
    padding-bottom: 10px;
}

/*MOBILE*/

@media (max-width: 576px) {

	.sticky {
		width: 100%;
		height: 74px;
	}

	.sticky h1 {
		font-size: 2rem;
	}

	.sticky h2 {
		font-size: 2rem
	}

	.header {
		padding-left:0;
		padding-right:0;
	}


	.nav {
		/*padding-top: 50px;*/

	}


	.footer {
		margin-top: 20px;
	}

	.footer img {
		display: none;
	}
}