/* Theme Name: Hausarzt Stader Str Description: Für ein Hausarzt in Bremen Author: genofire Version: 1.0.3 License: GNU License URI: https://fireorbit.de */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: normal; src: url("fonts/Montserrat-Regular.otf") format("opentype"); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: lighter; src: url("fonts/Montserrat-Light.otf") format("opentype"); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: bold; src: url("fonts/Montserrat-Regular.otf") format("opentype"); } html,body{ padding:0px; margin:0px; background-color: white; color: #457575; font-family: 'Montserrat', sans-serif; background: url('img/bg.png') white repeat; background-attachment: fixed; font-size:18px; font-weight:lighter; letter-spacing: 0.05em; width: 100%; } .wrapper { width: 1024px; display: flex; flex-direction: column; margin: auto; background-color: white; min-height: 100vh; } header{ flex-shrink: 0; } header > div{ padding:67px 0px; height:140px; margin-bottom: 3px; background-image: url('img/main.jpg'); background-position: top; background-size: cover; background-repeat: no-repeat; } header .mobil{ display: none; background: white; text-align: center; padding: 30px 0px; } header .mobil .menu { text-align: center; position: absolute; top: 30px; right: 5px; } header .mobil .menu button{ border: none; outline-color: #009999; background-color: white; color: #009999; font-size: 36px; } header .mobil .menu button::before{ content:"\2630"; } header .mobil .menu button.active::before{ content:"x"; } header img { height:140px; } header .header-team img { display:none; } header .tel { position: relative; background-color:rgba(255,255,255,0.5); font-weight:bold; text-align: center; font-size:20px; top: -35px; width: 200px; float: right; } header .tel .label{ color:#457575; } header .tel .value{ color: rgba(0,0,0,0.7); } footer { margin-bottom:10px; font-size:18px; text-align:center; text-transform: uppercase; flex-shrink: 0; } footer ul { overflow: auto; list-style-type: none; padding: auto; margin: 0px; } footer li { line-height: 0.8em; border-right: 2px solid #457575; display: inline-block; padding: 0 10px; } footer li:last-child { border-right: none; } footer a{ text-decoration:none; } footer li.current-menu-item { color: #009999; font-weight: bold; } .main{ flex: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: row; align-items: stretch; overflow: hidden; min-height: 100vh; } nav { padding-top: 20px; background-color: rgba(113,140,139,0.12); flex: 0 33%; margin-right: 3px; } section{ flex: 0 100%; background-color: rgba(113,140,139,0.07); display: flex; flex-direction: column; } section > div{ padding-top: 44px; padding:36px; flex:1; } .affix{ position: fixed; top: 0px; } nav ul{ list-style: none; padding-left: 1.9em; } nav li .logo { display: inline-block; background-image: url('img/logo-noactive.svg'); background-size: contain; background-repeat: no-repeat; height: 35px; width: 57px; } nav li .logo+span { display:none; padding: 0; margin: 0; line-height: 23px; } nav li:hover .logo { background-image:url('img/logo-hover.svg'); } nav li.current-menu-item .logo{ background-image:url('img/logo-active.svg'); margin-left: 0; } @media only screen and (min-width: 1024px) { nav li.current-menu-item:before{ content: ""; border-style: solid; border-width: 0.65em 0 0.65em 0.85em; display: inline-block; height: 100%; width: 0; left: -1.9em; position: relative; border-color: transparent #009999; } nav li:first-child.current-menu-item:before{ top: -0.6em; } } nav li.current-menu-item a{ font-weight: bold; margin-left: -0.7em; color:#009999; } nav li:hover a, nav li:hover span { font-weight: bold; } nav li:hover:first-child a{ font-weight: normal; } nav li .logo-mobil { display: none; } nav a{ text-transform: uppercase; font-size: 22px; color: #457575; font-weight: normal; text-decoration: none; } h1{ margin:0px 0px; font-weight: bold; font-size:18px; letter-spacing: 0.05em; text-transform: uppercase; } h2 { margin:0px 0px; font-weight: normal; font-size:18px; letter-spacing: 0.05em; text-transform: uppercase; color: #8f2d53; } strong{ font-weight: bold; } a,a:link,a:hover,a:visited,a:active { color: #457575; } a.more { font-size: 12px; } a.more.red{ color: #8f2d53; text-decoration: none; } .post{ margin: 20px 0px; } .post > p { margin: 0px; } section .team{ flex-flow: wrap; } section .team .item{ display: inline-block; vertical-align: top; margin: 10px; width: 48%; } section .team .item > a{ white-space: nowrap; } section .team .item p{ display: inline; } section .team .item:nth-child(odd) { margin-left: 0; } section .team .item:nth-child(even) { margin-right: 0; } section .team .item img, section img.alignleft { float: left; margin: 0px 15px 0px 0px; } @media only screen and (max-width: 1024px) { .affix { position: relative; top: auto; } .wrapper { width: 100%; } header { height: auto; padding-top: 20px; } header > div { height: 180px; padding: 0px; } header .mobil, header img { height: 100px; } header div+div img{ display: none; height: 20%; } header .mobil { display: block; } header .tel { width: 100%; top: 0px; position:absolute; background-color:rgba(113,140,139,0.07); text-align:right; font-size: 18px; } header .tel .value { padding-right:10px; } .main{ flex-direction: column; -webkit-flex-direction: column; } nav { text-align: center; padding: 0px; } nav.collapse{ display: none; } nav.collapse.in { display: block; } nav.collapsing { position: relative; height: 0; overflow: hidden; transition-timing-function: ease; transition-duration: .35s; transition-property: height, visibility; } nav ul { padding-left:0px; margin: 0px; } nav li { background-color: #e1ecf2; margin:1px 0px; } nav li a, nav li a:link, nav li a:hover, nav li a:visited, nav li a:active { color: #829D9D; } nav li.current-menu-item { background-color: #009999; font-weight:bold; } nav li .logo{ display: none; } nav li .logo+span { display: inline; } nav li .logo-mobil{ display: block; } nav li.current-menu-item a { color: white; } section .team .item { width: 100%; margin: 0px; } section .team .item img { margin-bottom: 15px; } footer { font-size: 10px } }