/*

My site

Author: Geertje König
URL:    http://www.geertje-koenig.de
Email:  post@geertje-koenig.de
*/


/* Source Sans Pro
-------------------------------------------------- */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/sourcesanspro-300.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/sourcesanspro-400.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/sourcesanspro-600.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: url(../fonts/sourcesanspro-400-italic.woff) format('woff');
}

@font-face {
  font-family: 'Dosis';
  src: url('../fonts/dosis-bold-webfont.eot');
  src: url('../fonts/dosis-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/dosis-bold-webfont.woff') format('woff'), url('../fonts/dosis-bold-webfont.ttf') format('truetype'), url('../fonts/dosis-bold-webfont.svg#ca77017c9ce4c854dee5d657c3771940') format('svg');
  font-weight: bold;
  font-style: normal;
}

body {
	background: url("http://www.praxis-blechert.de/content/bg.svg") center repeat !important;
}

body
 {
	font-family: 'Source Sans Pro', sans-serif !important;

	}

h1, h2, h3, h4, h5, h6, .button, .menu-text, .vertical.menu {
	font-family: 'Dosis', sans-serif;
	color:#6ea8d1;
}

.title {
	margin-top:1em;
}

h2 {
	font-size: 1.8rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.3rem;
}

h1, h4 {
	margin-bottom: 1em;
}


/* ------------------------ Header ---------------------------- */


.content {
	background: url("http://www.praxis-blechert.de/content/bg.svg") repeat !important;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	}

.logo {
	background: url("http://www.praxis-blechert.de/content/maennchen.jpg") no-repeat ;
	background-size: 120px;
	width:120px;
	height:120px;
	position: relative;
	left: 1em;
	margin-bottom: 2em;
	-webkit-border-radius: 1000px;
	-moz-border-radius: 1000px;
	border-radius: 1000px;
	box-shadow: 2px 10px 50px rgba(0, 0, 0, .6);
}

.off-canvas {
	background-color: transparent;
}


.menu-centered li a {
	margin-left: 0.2em !important;
	margin-right: 0.2em !important;
	margin-top:2em;
	min-width: 120px !important;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 2px 10px 50px rgba(0, 0, 0, .6);
}


.button.button-home {
	  background-color: #c60000 !important;
  color: #fefefe; }
  .button.button1:hover, .button.button1:focus {
    background-color: #8a0909 !important;
    color: #fefefe; }

.button.button1, .link1 {
	  background-color: #fac1e1 !important;
  color: #fefefe; }
  .button.button1:hover, .button.button1:focus, .link1:hover, .link1:focus {
    background-color: #eb92c6 !important;
    color: #fefefe; }

.button.button2, .link2 {
	  background-color: #86d6b5 !important;
  color: #fefefe; }
  .button.button2:hover, .button.button2:focus, .link2:hover, .link2:focus {
    background-color: #72ba9c !important;
    color: #fefefe; }

.button.button3, .link3 {
	  background-color: #6ea8d1 !important;
  color: #fefefe; }
  .button.button3:hover, .button.button3:focus, .link3:hover, .link3:focus {
    background-color: #7198b4 !important;
    color: #fefefe; }

.button.button4, .link4 {
	  background-color: #ffe100 !important;
  color: #fefefe; }
  .button.button4:hover, .button.button4:focus, .link4:hover, .link4:focus {
    background-color: #cbb304 !important;
    color: #fefefe; }


.button.button5, .link5 {
	  background-color: #2a4373 !important;
  color: #fefefe; }
  .button.button5:hover, .button.button5:focus, .link5:hover, .link5:focus {
    background-color: #19263f !important;
    color: #fefefe; }


/* ------------------ Inhalt --------------------- */



.row {
 max-width: 60em !important;
}

.main {
	position: relative;
	padding: 3em;
	background-color: rgba(255, 255, 255, 0.9);
	border: 10px solid rgba(199, 0, 0, 0.6);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
	box-shadow: 2px 10px 50px rgba(0, 0, 0, .7);
	margin-top:-12px;
	z-index:100 !important;
}

.home h1 {
	margin-bottom: 0;
}
.meldung {
	margin-top:2em;
	margin-bottom:2em;
	margin-left: 6em;
	margin-right: 6em;
	background-color: white;
	padding:1em !important;
	border: 10px solid rgba(199, 0, 0, 0.4);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
	z-index:100 !important;
}


@media only screen and (max-width:40rem) {
.meldung {
	margin-top: 0.5 em;
	margin-bottom: 0.5 em;
	margin-left: 0;
	margin-right: 0;
	padding: 0 0.5em;
	border: 5px solid rgba(199, 0, 0, 0.6);
	
}
}





.blog img{
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	box-shadow: 2px 10px 50px rgba(0, 0, 0, .7);
}

.blog p {
	margin-bottom:0 !important;
	margin-top: 0.5em;
}

.blog h2 {
	margin-top: 1em;
}

.blogarticle h2 {
	margin-bottom: 2em;
}

.blogarticle img {
	float: left;
	margin-right: 2em !important;
	margin-bottom: 1em;
	box-shadow: 2px 10px 50px rgba(0, 0, 0, .7);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

footer {
	margin-top: 1em;
	margin-bottom: 1em;
}



/* ------------ Text-Kasten für Links ----------------

	.info-text {
		position: relative;
 	}
 	
 	*/
 	
 	.links {
  background: #d1e5f4;
  padding:1em;
  margin-top: 1em;
  -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

}

.links a{
	color:#004d84;
}
.links a:hover{
	color:#fff;
}

/*	
@media only screen and (min-width:40rem) {
 .info-text:before {
    content: '';
    float: right;
    display: block;
    height: 600px;
    width: 33.33333%;
    margin: 0 0 15px 15px;
  }

	  .links {
    position: absolute;
    top: 0;
    right: 0;
    width: 33.33333%;
  }
	
}

*/

/* ---------------- Tablet ------------- */

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	
	.row.main {
	padding-left:0.5em;
	padding-right: 0.5em;
	margin-left:0.5em;
	margin-right:0.5em;
	
}

.logo {
	background: url("http://www.praxis-blechert.de/content/maennchen.jpg") no-repeat ;
	background-size: 80px;
	width:80px;
	height:80px;
	margin-top:0.5em;
	margin-bottom: 0.5em;
	}
	
	
}


/* ---------------- Telefon ------------- */

@media only screen and (max-width:40rem) {
	h2,h3,h4 {
		font-size: 1.2rem;
	}
	
	.logo {
	background: url("http://www.praxis-blechert.de/content/maennchen.jpg") no-repeat ;
	background-size: 80px;
	width:80px;
	height:80px;
	margin-top:0.5em;
	margin-bottom: 0.5em;
	}
	
.row.main {
	padding-left:0.5em;
	padding-right: 0.5em;
	padding-top: 1em; 
	margin-left:0.5em;
	margin-right:0.5em;
	
}

.title-bar {
	background-color: rgba(255, 255, 255, 0.7);
	padding-top: 0 !important;
	margin-top: -2em;
}

.menu-text{
	color: #6ea8d1;
	font-size: 1.5em;
}


.menu-icon {
	margin-bottom: -4em !important;
}

.menu-icon.dark::after {
    background: #8a0909;
    box-shadow: 0 7px 0 #8a0909, 0 14px 0 #8a0909;
}
  .menu-icon.dark:hover::after {
    background: #f00;
    box-shadow: 0 7px 0 #f00, 0 14px 0 #f00;
}

}



/* ------------ Columns ------------- */

.row-1 .column {
  width: 100%;
}
.row-2 .column {
  width: 50%;
}
.row-3 .column {
  width: 33.33%;
}
.row-4 .column {
  width: 25%;
}
.row-5 .column {
  width: 20%;
}

@media only screen and (max-width:40rem) {

.row-2 .column {
  width: 100%;
}
.row-3 .column {
  width: 100%;
}
.row-4 .column {
  width: 100%;
}
.row-5 .column {
  width: 100%;
}

}