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

#wurst {
margin: 0 0 20px 0
}

#wurst a {
color: #565656;
text-decoration: underline
}

#wurst a:hover {
text-decoration: none;
}

#wurst .lead {
margin: 10px 0 0 0;
line-height: 1.6em;
}

/* Pagae Navigation */
#wurst ul.nav {
  display: -webkit-flex;
  display: flex;
  list-style: none;
  text-align: center;
  justify-content: left; 
  line-height: 18px;
  font-weight: bold;
}

#wurst ul.nav li {
list-style: none;
}

#wurst .nav a {
  margin: 20px 12px 20px 0;
  display: block;
  padding: 15px 24px;
  text-decoration: none;
  color: #FFFFFF;
  background: #000000;
}

#wurst .nav a:hover {
background: #565656
}

#wurst .nav a.active {
background: #565656
}



#wurst h1 {
margin: 0;
padding: 0;
}

.wurst-title {
    padding-top: 5px;
    display: flex;
}

.wurst-title span {
    display: block;
    font-size: 1.55rem;
    font-family: sans-serif;
    line-height: 100%;
    margin-bottom: 17px;
}

.wurst-title h1 {
    font-size: 5.7rem;
    font-family: serif;
    line-height: 100%;
}

.maru {
    background: #A69734;
    color: white;
    border-radius: 50%;
    height: 120px;
    width: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}

#wurst h2 {
font-size: 30px;
margin: 50px 0 30px 0;
border-top: #000000 1px solid;
border-bottom: #000000 1px solid;
padding: 25px 0 20px 0;
line-height: 34px
}

#wurst .item {
margin: 30px 0;
}

#wurst .item p {
margin: 10px 0 20px 0;
}

#wurst .item h3 {
font-size:18px;
line-height: 30px;
font-weight: normal;
margin: 0 0 10px 0
}

#wurst .item h3 span {
font-size: 28px;
font-weight: bold
}


#wurst .numbers h3 {
font-size:24px;
line-height: 30px;
margin: 0 0 10px 0
}

#wurst .numbers h3 span {
font-size: 14px;
font-weight: normal;
}

#wurst ul.rank {
margin: 10px 0 5px 0;
padding: 5px 0;
border-top: #cccccc 1px solid;
}

#wurst ul.rank li {
margin: 0;
padding:11px 0  8px 0;
font-size: 16px;
border-bottom: #cccccc 1px solid;
}

#wurst ul.rank li.germany {
font-size: 28px;
margin:0;
padding: 18px 0 20px 0;
font-weight: bold;
line-height: 1.2em;
}

#wurst ul.rank li .text-right-large {
text-align: right;
display: block;
margin: -36px 0 0 0;
}

#wurst ul.rank li .text-right {
text-align: right;
display: block;
margin: -20px 0 0 0;
}

#wurst .numbers p {
margin: 1em 0 3em 0
}

#wurst ul.trivia li {
margin: 10px 0 25px 0;
font-size: 16px;
line-height: 1.8em
}

#wurst ul.trivia li strong {
font-size: 26px;
font-weight: bold;
margin: 15px 10px
}


#wurst h3.type {
margin: 40px 0 10px 0;
color: #FFFFFF;
background: #555555;
padding: 5px 15px;
font-size: 14px;
}

#wurst .item {
margin: 15px 0 30px 0;
}

#wurst .item p {
margin: 10px 0 20px 0;
}

#wurst .item h3 {
font-size:18px;
line-height: 30px;
font-weight: normal;
margin: 0 0 10px 0
}

#wurst .item h3 span {
font-size: 28px;
font-weight: bold
}

#wurst .item img {
width: 350px;
height: auto;
}

#wurst .item.ham img {
width:300px;
height: auto;
margin: 10px 0
}



#wurst .col3, 
#wurst .col2 {
width: 100%;
clear: both;
margin: 40px 0 40px 0;
}

#wurst .col3 h3,
#wurst .col2 h3{
background: none;
padding: 0 0 2px 0;
color: #333333;
border-bottom: #333333 1px solid;
margin: 0 0 20px 0; 
font-size: 24px
}

#wurst .col3 ul,
#wurst .col2 ul{
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0;
display: -webkit-flex;  /* Safari */
-webkit-flex-direction: row; /* Safari */
flex-direction:  row;
-webkit-justify-content: space-between; /* Safari */
justify-content:  space-between;
list-style: none;
width: 100%;
margin: 0 ;
}

#wurst .col3 ul li {
width: 31%;
padding: 0;
line-height: 16px;
font-size: 12px;
}

#wurst .col2 ul li {
width: 48%;
padding: 0;
line-height: 16px;
}

#wurst .col2 ul li h4 {
font-size: 20px;
line-height: 22px;
}

#wurst .col3 ul li strong{
font-size: 1.2em;
display: block;
margin-bottom: 7px;
}

#wurst .col2 ul li img {
width: 100%;
height: auto;
}



#wurst .item img.smallimg {
width: 240px;
height: auto;
}

#wurst .suggest:before {
font-family: 'FontAwesome';
content:"\f0f5";
font-size:20px;
color: #000; 
margin:0 10px 20px 0px;
display:block;
float:left;
width:20px;
text-align:left;
}

/*  Responsivizer  */

body.white .site .wurst-title{
    flex-wrap: wrap;
}

body.white .site .wurst-title h1 {
    color: #444;
    font-size: 18vw;
    padding-top: 20px;
    z-index: 10;
}

body.white .site .wurst-title span {
    font-size: 5vw;
}

body.white .site .wurst-title .maru {
    position: absolute;
    right: 0;
    top: 10px;
    font-size: 3vw;
    width: 20vw;
    height: 20vw;
}

body.white .site #wurst .lead {
margin: 10px 0 30px 0;
}

body.white .site #wurst ul.nav {
display: inline;
}

body.white .site #wurst .nav a {
margin: 10px 0;
}

body.white .site #wurst ul.rank li .text-right {
margin: 0;
}

body.white .site #wurst .item h3 {
margin: 0;
}

body.white .site #wurst .item img,
body.white .site #wurst .item img.smallimg {
width: auto;
margin: 0 auto !important;
display: block; 
}

body.white .site #wurst .col2 ul li {
width: 100%;
margin-bottom: 30px;
}

body.white .site #wurst .col3 ul li {
width: 100%;
margin-bottom: 20px;
}