/*
Theme Name: Mindful
Description: Responsive WordPress theme (one page met parallax) op basis van Bootstrap 3 gebouwd door Meerinvormgeving in drie kleurstijlen: Forrest (natuurtinten - groen), Earth (aardetinten - terracotta) en Sky (luchttinten - blauw). Fotografie door Annemarie van der Beek.
Author: Meerinvormgeving | Rob Ypma, Willeke van der Meer & Mark Bax
Author URI: http://www.meerinvormgeving.nl/
Version: 1.3
Tags: responsive, bootstrap, one page, parallax, forrest, green, earth, terracotta, sky, blue.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miv_mindful
*/

/* Steigers voor tijdens de bouw.
.row { border: 1px solid red; }
.column { border: 1px solid blue; }
section { border: 1px solid green; } */

/* ==== TYPOGRAPHY */
html {
	/* font-size: 100%; Note: Default is 16px. */
	/* font-size: 87.5%; Sets basic font-size to 14px. */
}

/* Calculate the default headings based on basic font-size just set:
	h1 { font-size: 2em;} is now 28px (2 * basic font-size above)
	h2 { font-size: 1.5em;} is now 21px (1.5 * basic font-size above)
	h3 { font-size: 1.17em;} is 16.38px (1.17 * basic font-size above)
*/

body {
	font-family: 'Lato', sans-serif;/* A Google-font. */
	font-size: 16px; /* Set bootstrap font-size (14px) to 16px. */
	line-height: 1.7;
}

a,
a:hover {
    color: #333333;
    /* Same as bootstrap body. */
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}
/* ==== STANDARD TAGS */

img {
    /* In case of a forgotten class img-responsive. */
    display: block;
    height: auto;
    max-width: 100%;
}

input {
	max-width: 100%;
}

/* Form */
.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
	width: 80%;
}

/* WP image */
.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	background: #fff;
	border: 1px solid #f0f0f0;
	max-width: 96%;

	/* Image does not overflow the content area */
	padding: 5px 3px 10px;
	text-align: center;
}

.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}

.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	max-width: 98.5%;
	padding: 0;
	width: auto;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}

/* ==== AREAS AND SECTIONS */
body {
	background-color: #F8F5F5;
}

section {
    padding: 20px 0;
    background-color: #F8F5F5;
}

section.none {
	padding: 0;
}

.none-inner {
    margin: 40px 0;
    overflow: hidden;
}

.container-fluid,
.container {
    max-width: 970px;
}



.contact {
	padding-top: 70px;

}

.miv_contact_form {
	padding: 25px;
	background-color: #E1E1E1;
}

/* Social */
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icons/icomoon.eot');
    src: url('fonts/icons/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icons/icomoon.woff') format('woff'), url('fonts/icons/icomoon.ttf') format('truetype'), url('fonts/icons/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[data-icon]:before {
    font-family: 'icomoon';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.icon-facebook2:before {
    content: "\ea8d";
}

.icon-twitter2:before {
    content: "\ea92";
}

.socialmedia {
	font-size: 32px;
	padding: 0 5px;
}

.socialmedia-wrapper {
    float: right;
}

/* ==== NAVIGATION */

.navbar {
    margin: 0px;
    border: none;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(205, 205, 205, 1);
    -moz-box-shadow: 0px 5px 0px 0px rgba(205, 205, 205, 1);
    box-shadow: 0px 5px 0px 0px rgba(205, 205, 205, 1);
    border-radius: 0;
}
@media only screen and (min-width: 768px) {
    .navbar li {
        border-left: 1px solid rgba(205, 205, 205, 1);
    }
    .navbar li:first-child {
        border: none;
    }
}
.navbar li:hover + li {
    border-color: #F8F5F5;
}

.logo_image {
	float: left;
	margin-right: 10px;
	max-height: 50px;
}

/* ==== JUMBOTRON */
.jumbotron {
    text-align: center;
    margin: 50px 0 0 0;
    background-color: rgba(255,255,255,0);
	padding: 50px 0;
}

.jumbotron p {
    font-weight: normal;
}

.jumbotron .h1,
.jumbotron h1 {
	font-size: 64px;
	letter-spacing: 6px;
}

@media only screen and (min-width: 768px) {
    /* Small devices (tablets, 768px and up). */
	.jumbotron .styled_box {
		margin: 0 8%
	}
}

/* Over mij */
.miv_featured img {
	margin: 0 auto;
}


/* Parallax styling */

.jumbotron #parallax {
/*    background-repeat: no-repeat;*/
    background-position: center;
    background-size: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;

}
.styled_box {
    background-color: rgba(0,0,0,0.4);
    padding: 25px;
}

#style_sky .styled_box {
	background-color: rgba(0,0,0,0.3);
}

/* Blockquote styling */
.citaat {
	background-image: url('images/cirkelbloempatroon-02.png');
}

.citaat blockquote {
    padding: 0;
    border: none;
    text-align: center;
    quotes: "“""”""‘""’";
    margin: 20px 0 20px;
}
.citaat blockquote:before,
.citaat blockquote:after {
    font-size: 4em;
    font-weight: bold;
    font-family: 'Lobster', normal;
    line-height: 0.1em;
    margin: 0 0.25em;
}
.citaat blockquote:before {
    content: open-quote;
    vertical-align: -0.4em;
}
.citaat blockquote:after {
    content: close-quote;
    vertical-align: -0.55em;
}
.citaat blockquote p {
    display: inline;
}
.citaat p {
    text-align: right;
}
@media only screen and (min-width: 768px) {
    /* Small devices (tablets, 768px and up). */
    .citaat blockquote {
        padding: 0 15%;
    }
}
/* Vertical Align */

.something-semantic {
    display: table;
    width: 100%;
}
.something-semantic .something-else-semantic {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
/* Button styling */

.btn-wrapper-wrapper {
	position: relative;
}

.btn-wrapper {
	text-align: center;
	width: 100%;
}

.btn-wrapper-xs {
	position: absolute;
	bottom: 0;
}

.btn-styled {
    margin: 25px 0;
    color: #FFFFFF;
    font-weight: bold;
    padding: 15px 25px;
    font-size: 18px;
    border-radius: 10px;
    position: relative;
}
.btn-styled:hover,
.btn-styled:focus {
    top: 2px;
}
.btn-styled:active {
    top: 6px;
}
.btn-ghost {
    background-color: rgba(255, 255, 255, 0);
    border: 2px solid #FFFFFF;
    border-radius: 4px;
    color: #FFFFFF;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
}
.btn-ghost:hover {
    background-color: #F8F5F5;
    border: 2px solid #FFFFFF;
    color: #353535;
}
/* mindful Forrest theme styling */

/* COLORS
#44845C DARK GREEN
#2b6b43 DARKER GREEN
#858A3B LIGHTER GREEN
#D0D94F YELLOW GREEN
#b7C036 SHADOW GREEN
*/

#style_forrest .btn-styled {
    background-color: #D0D94F;
    color: #353535;
    box-shadow: 0 6px #b7c036;
}
#style_forrest .btn-styled:hover,
#style_forrest .btn-styled:focus {
    box-shadow: 0 4px #b7c036;
}
#style_forrest .btn-styled:active {
    box-shadow: none;
}
#style_forrest .jumbotron,
#style_forrest .subpages,
#style_forrest .citaat {
    color: #FFFFFF;
}

#style_forrest .jumbotron #parallax {
    background-image: url('images/mindful_forrest.jpg');
}
#style_forrest .subpages {
    background-color: #44845C;
}

#style_forrest .citaat {
    background-color: #B2BA44;/* PROBEERSEL ROB */
}

#style_forrest .citaat blockquote {
	color: #61652A;/* PROBEERSEL ROB */
}

#style_forrest .navbar li:hover,
#style_forrest .navbar li:focus,
#style_forrest .navbar li:active {
    background-color: #44845C;
    -webkit-box-shadow: 0px 5px 0px 0px #2b6b43;
    -moz-box-shadow: 0px 5px 0px 0px #2b6b43;
    box-shadow: 0px 5px 0px 0px #2b6b43;
    border-color: #44845C;
}
#style_forrest,
#style_forrest .socialmedia,
#style_forrest .navbar-default .navbar-brand,
#style_forrest .navbar-default .navbar-nav>li>a {
    color: #2b6b43;
}
#style_forrest .navbar-default .navbar-nav>li>a:hover {
    color: #FFFFFF;
}
/* mindful Sky theme styling */

/* COLORS
#b2c9e9 LIGHT BLUE
#425390 DARKER BLUE
#354273 DARKEST BLUE
#ddd7eb MAGENTA BLUE
#c4bed2 SHADOW MAGENTA BLUE
*/
#style_sky .btn-styled {
    background-color: #ddd7eb;
    color: #354273;
    box-shadow: 0 6px #c4bed2;
}
#style_sky .btn-styled:hover,
#style_sky .btn-styled:focus {
    box-shadow: 0 4px #c4bed2;
}
#style_sky .btn-styled:active {
    box-shadow: none;
}
#style_sky .jumbotron,
#style_sky .subpages,
#style_sky .citaat {
    color: #FFFFFF;
}
#style_sky .jumbotron #parallax {
    background-image: url('images/mindful_sky.jpg');
}
#style_sky .subpages {
    background-color: #4F75AB;
}

#style_sky .citaat {
	background-color: #A6BADA;/*#b2c8e9 PROBEERSEL ROB */
	background-image: url('images/cirkelbloempatroon-03.png');
}

#style_sky .citaat blockquote {
	color: #795B93;/* #8371A4 PROBEERSEL ROB */
}

#style_sky .navbar li:hover,
#style_sky .navbar li:focus,
#style_sky .navbar li:active {
    background-color: #b2c9e9;
    -webkit-box-shadow: 0px 5px 0px 0px #99b0d0;
    -moz-box-shadow: 0px 5px 0px 0px #99b0d0;
    box-shadow: 0px 5px 0px 0px #99b0d0;
    border-color: #b2c9e9;
}
#style_sky,
#style_sky .socialmedia,
#style_sky .navbar-default .navbar-brand,
#style_sky .navbar-default .navbar-nav>li>a {
    color: #425390;
}
#style_sky .navbar-default .navbar-nav>li>a:hover {
    color: #FFFFFF;
}
/* mindful Earth theme styling */

/* COLORS
#ef8b80 TERACOTTA
#87b19e GREENISH
#547e6b DARKER GREENISH
#354273 DARKEST BLUE
#ddd7eb MAGENTA BLUE
#c4bed2 SHADOW MAGENTA BLUE
*/
#style_earth .btn-styled {
    background-color: #Af4C64;
    color: #FFFFFF;
    box-shadow: 0 6px #96334b;
}
#style_earth .btn-styled:hover,
#style_earth .btn-styled:focus {
    box-shadow: 0 4px #96334b;
}
#style_earth .btn-styled:active {
    box-shadow: none;
}
#style_earth .jumbotron,
#style_earth .subpages,
#style_earth .citaat {
    color: #FFFFFF;
}
#style_earth .jumbotron #parallax {
    background-image: url('images/mindful_earth.jpg');
}
#style_earth .subpages {
    background-color: #ef8b80;
}

#style_earth .citaat {
    background-color: #B8556C;/* PROBEERSEL ROB */
}

#style_earth .citaat blockquote {
	color: white;/* PROBEERSEL ROB */
}


#style_earth .navbar li:hover,
#style_earth .navbar li:focus,
#style_earth .navbar li:active {
    background-color: #ef8b80;
    -webkit-box-shadow: 0px 5px 0px 0px #bf6f66;
    -moz-box-shadow: 0px 5px 0px 0px #bf6f66;
    box-shadow: 0px 5px 0px 0px #bf6f66;
    border-color: #ef8b80;
}
#style_earth,
#style_earth .socialmedia,
#style_earth .navbar-default .navbar-brand,
#style_earth .navbar-default .navbar-nav>li>a {
    color: #874961;/* ROB */
}
#style_earth .navbar-default .navbar-nav>li>a:hover {
    color: #FFFFFF;
}

#style_earth .miv_contact_form {
	background-color: #88b19d;
}

#wpadminbar {
	display: none;
}

/* footer */
#miv_footer {
	padding: 0;
}

.miv_copyright {
	text-align: center;
	font-size: 13px;
}

.miv_copyright a {
	color: inherit;
}

/* ==== RESPONSIVE */

/* Note: Basic CSS is for Extra small devices. */

@media only screen and (min-width: 768px) {
    /* Small devices (tablets, 768px and up). */
	.btn-wrapper-sm {
		position: absolute;
		bottom: 0;
	}
	.miv_contact_form { 
		width: 66%; 
	}

}

@media only screen and (min-width: 992px) {
    /* Medium devices (desktops, 992px and up). */
	.btn-wrapper-md {
		position: absolute;
		bottom: 0;
	}
}

@media screen and (min-width: 1200px) {
    /* Large devices (large desktops, 1200px and up). */
}