@charset "utf-8";
/* CSS Document */

*{
	margin:0px;
	padding:0px;
}

body {
	height:100%;
	width:100%;
	line-height:150%;
	font-family: 'Muli', sans-serif;
	font-size:12px;
	color:#666;
}

.clear {
	clear:both;
}

.wrapper {
	width:960px;
	margin:0 auto;
}

/*---- FONTS ----*/

a {
	text-decoration:none;
}

h1,h2,h3,h4 {
	font-weight:300;
	line-height:200%;
}

h1 {
	font-size:26px;
}

h2 {
	font-size:22px;
}

h3 {
	font-size:18px;
}

/*---- HEADER ----*/

header {
	position:relative;
	width:100%;
	height:100px;
}

#logo {
	position:relative;
	width:30%;
	margin-top:40px;
	float:left;
}

#logo img {
	width:100%;
}

nav {
	width:60%;
	float:right;
	height:50px;
}

nav li {
	list-style:none;
	display:inline-block;
	border-bottom:solid 3px #dedede;
-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
        transition: all 0.2s linear;
}

nav li:hover {
	border-bottom:solid 3px #7c1f58;
-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
        transition: all 0.2s linear;;
}

.main-nav {
	text-align:right;
	margin-top:80px;
}

.main-nav li a{
	color:#666;
	padding:10px 20px;
	font-size:14px;
	font-weight:500;
}

.main-nav li.active {
	color:#7c1f58;
	border-bottom:solid 3px #7c1f58;
}

/*---- GRID ----*/

section {
	position:relative;
	margin:50px 0px;
}

.box {
	position:relative;
	width:280px;
	padding:20px;
	float:left;
	text-align:left;
}

.box ul {
	margin-left:20px;
}

.row {
	position:relative;
	width:920px;
	padding:20px;
}

.box2 {
	position:relative;
	width:600px;
	padding:20px;
	float:left;
}

.box-height {
	height:330px;
}

.orchid {
	background-image:url(../img/frauenarzt.jpg);
}

.praxis {
	background-image:url(../img/frauenaerztin-langenhorn.jpg);
}

.praxis2 {
	background-image:url(../img/frauenarzt-hamburg-langenhorn.jpg);
}

.transparent-box {
	position:absolute;
	left:320px;
	top:0px;
	width:280px;
	height:330px;
	padding:20px;
	float:left;
	text-align:left;
	background-color:rgba(255,255,255,0.5);
}

/*---- FARBEN ----*/

.blau {
	background-color:#123c51;
	color:#fff;
}

.brombeer {
	background-color:#7c1f58;
	color:#fff;
}

.halb-brombeer {
	background-color:#ad5e8e;
	color:#fff;
}

.blau a, .brombeer a, .halb-brombeer a {
	color:#fff;
}

.grau {
	background-color:#dedede;
	color:#555;
}

/*---- KONTAKTFORMULAR ---- */


.map-box {
box-sizing: content-box;
padding: 0px;
}

label {
	float:left;
	width:30%;
}

input, select, textarea {
	padding:3px 5px;
	margin-bottom:8px;
	float:left;
	width:60%;
}

select {
	width:62%;
}

textarea {
	height:100px;
}

input[type="checkbox"] {
	margin-right:15px;
	margin-top:5px;
	border:none;
	width:auto;
	float: left;
}

input[type="submit"] {
	margin-left:30%;
	background-color:#7c1f58;
	color:#fff;
	font-weight:600;
	padding:5px 10px;
	border:none;
	width:62%;
}

input[type="submit"]:active {
	background-color:#ad5e8e;
}

.gelungen {
	width:90%;
	padding:10px 6px;
	background-color:#A4E16D;
	color:#fff;
	font-weight:600;
	margin:25px 0px;
}

.nicht-gelungen {
	width:90%;
	padding:10px 6px;
	background-color:#D13D40;
	color:#fff;
	font-weight:600;
	margin:25px 0px;
}



/*---- FOOTER ----*/

footer {
	position:relative;
	width:920px;
	height:40px;
	padding:20px;
	margin:0px auto 100px !important;
}

@media only screen and (min-width:760px) and (max-width: 960px) {
h2 {
	font-size:16px;
	font-weight:600;
}

table {
	font-size:10px;
}
	
.wrapper {
	width:760px;
	margin:0 auto;
}

.main-nav li a{
	padding:10px 15px;
}

.box {
	width:200px;
}

nav {
	width:70%;
}

.transparent-box {
	position:absolute;
	left:280px;
	top:0px;
	width:210px;
	height:360px;
}

.box ul {
	margin-left:20px;
}

.row {
	width:720px;
}

.box2 {
	width:480px;
}

footer {
	position:relative;
	width:720px;
}

.box-height {
	height:360px;
}
}

@media only screen and (max-width: 760px) {
	header {
		height:300px;
	}
	
	nav {
		width:100%;
		float:none;
		height:auto;
		margin-top:10px;
	}
	
	nav li {
		list-style:none;
		display:block;
		margin-bottom:10px;
		text-align:center;
	}
	
	.main-nav li a{
		color:#666;
		padding:10px 20px;
		font-size:24px;
		font-weight:500;
	}

	#logo {
		width:100%;
		margin-top:10px;
		margin-bottom:20px;
		text-align:center;
	}
	
	#logo img {
		max-width:466px;
	}
	
	.transparent-box {
		left:0px;
		width:100%;
	}
	
	.box, .box2, .row {
		width:90%;
	}
	
	.wrapper {
		width:90%;
		padding:5%;
	}
	
	footer {
		width:80%;
		padding:5%
	}
}

@media screen
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3)  {
	header {
		height:auto;
	}
	
	nav {
		width:100%;
		float:center;
		height:auto;
		margin-top:10px;
	}
	
	nav li {
		list-style:none;
		display:block;
		margin-bottom:10px;
		text-align:center;
	}
	
	.main-nav li a{
		color:#666;
		padding:10px 20px;
		font-size:24px;
		font-weight:500;
	}

	
	#logo {
		width:100%;
		margin-top:10px;
		margin-bottom:20px;
		text-align:center;
	}
	
	#logo img {
		max-width:466px;
	}
	
	.transparent-box {
		left:0px;
		width:90%;
	}
	
	.box, .box2, .row {
		width:90%;
	}
	
	.wrapper {
		width:90%;
		padding:5%;
	}
	
	footer {
		width:80%;
		padding:5%
	}
}