/* General style and function */

html {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

body {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 0 80px #808080;
}

/* Header & Logo */

header {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  height: 100%;
  max-height: 150px;
  background: #ecebed;
  width: 100%;
  max-width: 1400px;
  min-width: 320px;
  position: relative;
}

.logo {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  font-size: 28px;
  letter-spacing: 5;
  text-transform: uppercase;
  text-align: left;
  float: left;
  margin: 26px;
  display: block;
  color: #000000;
  text-decoration: none;
}

/* Navigation */

.nav_big {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  text-align: right;
  font-size: 20px;
  float: right;
  margin: 65px 30px 0 0;
  display: flex;
  list-style: none;
}

.nav_big > li {
  margin-right: 15px;
  margin-left: 28px;
}

.nav_big > li > a {
  color: #000000;
  text-decoration: none;
  text-align: right;
  transition: 0.15s;
}

.nav_big > li > a:hover {
  color: #777777;
}

.active {
  color: #777777 !important;
  border-bottom: 2px #777777 solid;
  padding-bottom: 0.05em;
}

.active:hover {
  border-color: #777777;
}

#sort_select_de:hover {
  margin-left: -157.75px;
}

#sort_select_it:hover {
  margin-left: -195.66px;
}

#sort_select_en:hover {
  margin-left: -200px;
}

#sort {
  font-size: 18px;
  list-style: none;
  text-align: right;
  display: none;
  margin: 61px -5px 0 7px;
  text-decoration: none;
}

#sort > li > a {
  margin: 0;
  color: #000000;
  text-decoration: none;
}

#sort > li > a:hover {
  color: #777777;
}

.sort_span {
  width: 200px;
  display: block;
  background-color: #ecebed;
  padding: 0.5em 1em;
}

#sort_select_de:hover > #sort{
  display: block;
}

#sort_select_it:hover > #sort{
  display: block;
}

#sort_select_en:hover > #sort{
  display: block;
}

.dropdown {
  font-size: 20px;
}

.dropdown:hover > .language_nav {
  display: block;
}

.language_nav {
  font-size: 18px;
  list-style: none;
  text-align: right;
  display: none;
  margin: 61px -5px 0 7px;
}

.language_nav:hover {
  color: #000000;
}

.language_nav > li > a {
  text-decoration: none;
  color: #000000;
}

.language_nav > li > a:hover {
  color: #777777;
}

#drop_de:hover {
  margin-left: -40.4px;
  cursor: pointer;
}

#drop_de > a:after {
  content: "▾";
  font-size: 16px;
}

#drop_it:hover {
  margin-left: -47.7px;
  cursor: pointer;
}

#drop_it > a:after {
  content: "▾";
  font-size: 16px;
}

#drop_en:hover {
  margin-left: -39.2px;
  cursor: pointer;
}

#drop_en > a:after {
  content: "▾";
  font-size: 16px;
}

.lang_select {
  width: 30px;
  display: block;
  background-color: #ecebed;
  padding: 0.5em 1em;
}

#nav_small {
  float: right;
  height: 150px;
  width: 150px;
  position: relative;
}

.touchscreen {
  display: none;
  list-style: none;
  padding: 35px;
  float: right;
}

.phone_nav {
  font-size: 30px;
}

#check {
  position: absolute;
  display: none;
}

label {
  color: #000000;
}

label:active {
  color: #ffffff;
}

#check:checked ~ .menu {
  display: block;
}

.menu {
  font-size: 18px;
  list-style: none;
  text-align: right;
  display: none;
  position: absolute;
  right: 0;
  top: 10;
}

.menu > li > a {
  text-decoration: none;
  color: #000000
}

.phone_menu {
  max-width: 320px;
  width: 100%;
  display: inline-block;
  background-color: #ecebed;
  padding: 0.5em 1em;
}

#language_nav {
  color: #777777;
  margin: 0;
}

.minichoices {
  font-size: 16px;
}

.minichoices > span {
  width: 316px;
  padding: 0.75em 1.25em;
}

/* General style: Sections & Paragraphs */

section {
  background: #ecebed
}

.info {
  width: auto;
  max-width: 1400px;
  height: auto;
  position: relative;
}

.wrapper {
  max-width: 900px;
  width: auto;
  padding: 50px;
  height: auto;
  min-height: 125px;
  margin: 0 auto;
  position: relative
}

.text_left, .text_right {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  width: 45%;
  color: #000000;
  margin: 2.5%;
  font-size: 20px;
  line-height: 1.25;
  position: relative;
  display: block;
}

.text_left {
  float: left;
}

.text_right {
  float: right;
}

.titel {
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 2.2;
}

.markierung {
  font-weight: 500;
}

.text_left > a {
  text-decoration: underline;
  color: #000000;
}

.text_left > a:hover {
  color: #777777;
}

/* Footer */

footer {
  max-width: 1400px;
  width: 100%;
  max-height: 232px;
  height: auto;
  background-color: #1a1a1a;
}

#addresse1, #addresse2 {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  font-size: 20px;
  color: #ffffff;
  line-height: 40px;
  float: left;
  margin: 0;
}

#addresse1 {
  float: left;
}

#addresse2 {
  float: right;
}

#mail {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 2px #ffffff solid;
  transition: 0.25s;
}

#mail:hover {
  color: #777777;
  border-color: #777777;
}

/* Background-images */

#logobild, #unteres_bild {
  width: 100%;
  max-width: 1400px;
  height: 100%;
  max-height: 300px;
}

#logobild {
  background: url(../img/logobild_test.jpg) center center;
  background-size: cover;
}

#unteres_bild {
  background: url(../img/Fotolia_italia_4.jpg) center center;
  background-size: cover;
}

/* Homepage */

#ueberschrift {
  padding-top: 75px;
  background: url(../img/Fotolia_69791681_XL_bearbeitet.jpg) center center;
  background-size: cover;
}

h2 {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  text-align: center;
  color: #000000;
  font-size: 80px;
  width: auto;
  margin: 150px 20px 10px 20px;
  text-shadow: 0 0 3px #ffffff;
}

h3 {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  text-align: center;
  font-size: 30px;
  letter-spacing: 2.5;
  text-transform: uppercase;
  padding-bottom: 250px;
}

h3 a {
  text-decoration: none;
  color: #000000;
}

h3 a:hover {
  color: #ffffff;
}

#mehr {
  display: inline-block;
  padding: 0.25em 0.5em;
  border: #000000 solid 5px;
  box-shadow: 0 0 4px #000000;
  transition: 0.25s;
}

#mehr:hover {
  border-color: #ffffff;
  box-shadow: none;
  transform: scale(1.1);
}

#glace {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  font-size: 30px;
  font-style: italic;
  text-align: center;
  margin: 100px 0 100px 0;
  position: relative;
}

.2008 {
  align-content: center;
  justify-content: space-around;
  margin-right: 10px;
}

#jahr, #anno, #year {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
  background-color: #0088ce;
  border-radius: 50%;
  font-size: 30px;
  letter-spacing: 3;
  float: right;
  display: inline-block;
  position: absolute;
  height: 125px;
  width: 125px;
  right: 20px;
  top: -50px;
  transition: 0.05s;
  transform: rotate(10deg);
}

#info1 {
  min-height: 300px;
}

/* Page: Das Produkt */

#info2 {
  min-height: 700px;
}

#startwrapper {
  min-height: 150px;
}

/* Page: Die Sorten */

.sortenauswahl {
  width: auto;
  max-width: 1302px;
  height: auto;
  min-height: 100px;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0 49px 20px 49px;
}

h6 {
  margin: 0;
}

.sortenueberschrift {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  font-size: 50px;
  text-align: left;
  padding-left: 20px;
  margin-top: 80px;
}

.vorschau {
  max-width: 1302px;
  margin: 0 auto;
  position: relative;
  min-height: 50px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: center;
  transition: 0.25s;
}

.icon {
  width: 180px;
  height: 180px;
  font-family: 'Roboto', 'Helvetica', sans-serif;
  font-size: 15px;
  color: #000000;
  text-align: center;
  display: inline-block;
  position: relative;
  margin: 10px;
  padding: 0.5em;
  border: #000000 solid 1px;
  transition: ease-in-out 250ms all;
}

.icon:hover {
  transform: scale(1.125);
  background-color: #d8d7d7;
}

#amarena:hover, #amalfi:hover, #moscato:hover, #pera:hover, #prosecco:hover {
  background: url(../img/gelati_freigestellt/Coming_Soon.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

.icon > a {
  color: #000000;
  text-decoration: none;
}

svg {
  width: 180px;
  height: 180px;
}

.st0 {
  fill: #1a1a1a;
  display: inline-block;
}

.icon:hover .st0 {
  display: none;
}

#amarena:hover {
  background-color: #d8d7d7;
}

#amaretti:hover {
  background: url(../img/gelati_freigestellt/Amaretti.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#bacio:hover {
  background: url(../img/gelati_freigestellt/Bacio.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#banana:hover {
  background: url(../img/gelati_freigestellt/Banana.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#bb:hover {
  background: url(../img/gelati_freigestellt/Baselbieterli.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#biscoff:hover {
  background: url(../img/gelati_freigestellt/Biscoff.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#cannella:hover {
  background: url(../img/gelati_freigestellt/Cannella.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#castagna:hover {
  background: url(../img/gelati_freigestellt/Castagna.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#cioccolato:hover {
  background: url(../img/gelati_freigestellt/Cioccolato.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#csaa:hover {
  background: url(../img/gelati_freigestellt/Cioccolato_scuro_all_arancia.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#scuro:hover {
  background: url(../img/gelati_freigestellt/Cioccolato_scuro_con_zenzero.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#scuro > a > svg {
  position: relative;
  bottom: 25px;
}

#cc:hover {
  background: url(../img/gelati_freigestellt/Cocco-Citronella.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#croccant:hover {
  background: url(../img/gelati_freigestellt/Croccantino_alla_nocciola.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#dulce:hover {
  background: url(../img/gelati_freigestellt/Dulce_de_leche.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#fior:hover {
  background: url(../img/gelati_freigestellt/Fiordilatte.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#fragola_1:hover {
  background: url(../img/gelati_freigestellt/Fragola.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#gianduia:hover {
  background: url(../img/gelati_freigestellt/Gianduia.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#lampone_1:hover {
  background: url(../img/gelati_freigestellt/Lampone.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#latte:hover {
  background: url(../img/gelati_freigestellt/Latte_Macchiato.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#malaga:hover {
  background: url(../img/gelati_freigestellt/Malaga.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#meringata:hover {
  background: url(../img/gelati_freigestellt/Meringata.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#mocca:hover {
  background: url(../img/gelati_freigestellt/Mocca.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#pist:hover {
  background: url(../img/gelati_freigestellt/Pistacchio.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#straccia:hover {
  background: url(../img/gelati_freigestellt/Stracciatella.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#torro:hover {
  background: url(../img/gelati_freigestellt/Torroncino.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#vaniglia:hover {
  background: url(../img/gelati_freigestellt/Vaniglia.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#zabaione:hover {
  background: url(../img/gelati_freigestellt/Zabaione.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#amalfi:hover {
  background-color: #d8d7d7;
}

#anguria:hover {
  background: url(../img/gelati_freigestellt/Anguria.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#caip:hover {
  background: url(../img/gelati_freigestellt/Caipirinha.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#fragola_2:hover {
  background: url(../img/gelati_freigestellt/Fragola_Sorbet.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#frutta:hover {
  background: url(../img/gelati_freigestellt/Frutta_della_passione.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#kiwi:hover {
  background: url(../img/gelati_freigestellt/Kiwi.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#lampone_2:hover {
  background: url(../img/gelati_freigestellt/Lampone_Sorbet.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#limetta:hover {
  background: url(../img/gelati_freigestellt/Limetta.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#mango:hover {
  background: url(../img/gelati_freigestellt/Mango.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#mango_z:hover {
  background: url(../img/gelati_freigestellt/Mango-Zenzero.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#mojito:hover {
  background: url(../img/gelati_freigestellt/Mojito_Paris.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#moscato:hover {
  background-color: #d8d7d7;
}

#pera:hover {
  background-color: #d8d7d7;
}

#pesca:hover {
  background: url(../img/gelati_freigestellt/Pesca.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#prosecco:hover {
  background-color: #d8d7d7;
}

#cassata:hover {
  background: url(../img/gelati_freigestellt/Cassata_Siciliana.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#pezzo:hover {
  background: url(../img/gelati_freigestellt/Pezzo_duro.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#kouglof:hover {
  background: url(../img/gelati_freigestellt/Kouglof_gross.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#kleinkouglof:hover {
  background: url(../img/gelati_freigestellt/Kouglof_klein.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#vacherin:hover {
  background: url(../img/gelati_freigestellt/Vacherin_Torte.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#minivacherin:hover {
  background: url(../img/gelati_freigestellt/Vacherin_Minitoertchen.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#principessa:hover {
  background: url(../img/gelati_freigestellt/Principessa_del_giaco.png) center center;
  background-size: cover;
  background-color: #d8d7d7;
}

#geburi:hover {
  background-color: #d8d7d7;
}

#geburi > a > svg {
  position: relative;
  bottom: 25px;
}

/* Page: Über uns */

#info4 {
  min-height: 450px;
}

/* Page: Catering */

#info5 {
  min-height: 400px;
}

#kuehlbox {
  width: 342px;
  height: 271px;
  position: absolute;
  bottom: 0;
  right: 20px;
}

#kuehlbox > svg {
  width: 450px;
  height: 450px;
  position: absolute;
  fill: #1a1a1a;
  margin: 0 auto;
  right: -54px;
  bottom: -90px;
}

/* Page: Bestellung */

#info6 {
  min-height: 400px;
}

#info6 > .wrapper {
  min-height: 320px;
}

.bestellungen {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  max-width: 855px;
  width: auto;
  color: #000000;
  padding: 0 97.5px 40px 97.5px;
  margin: 0 auto;
  font-size: 20px;
  position: relative;
  display: block;
}

.download_bestellung {
  height: auto;
  width: auto;
  margin: 0 20px 0 0;
  display: inline-block;
}

.download_bestellung a {
  color: #000000;
  text-decoration: none;
}

.download_bestellung img {
  height: 100px;
  position: relative;
}

.download_bestellung p {
  width: 56px;
  text-align: center;
  position: relative;
  margin: 5px auto 20px auto;
}

/* Tablet and phone style */

@media screen and (max-width:1213px) {
  .nav_big {display: none;}
  .touchscreen {display: block;}
  .phone_nav {font-family: 'Roboto', 'Helvetica', sans-serif; text-align: right;}
  .menu {top: 150px; z-index: 4;}
  .wrapper {padding: 20px; width: auto;}
  .text_left, .text_right {float: none; width: 100%; margin: 0;}
  .text_left {margin: 0 0 20px 0}
  #kuehlbox {position: relative; margin: 0 auto; right: 0;}
  .bestellungen {max-width: 900px; padding: 50px 18px 35px 18px;}
}

@media screen and (max-width:1100px) {
  footer {max-width: 1400px; width: 100%; max-height: 212px; padding-bottom: 20px;}
  #addresse1 {font-size: 16px; line-height: 32px; float: none;}
  #addresse2 {font-size: 16px; line-height: 32px; float: none;}
}

@media screen and (max-width:1030px) {
  header {height: 100px;}
  .logo {letter-spacing: 4; font-size: 20px; margin: 15px;}
  .touchscreen {padding: 10px 25px 0 0;}
  .menu {top: 100;}
  #ueberschrift {padding-top: 25px; padding-bottom: 50px;}
  h2 {font-size: 50px; margin-left: 125px; margin-right: 125px; margin-top: 100px;}
  h3 {font-size: 25px; padding-bottom: 60px;}
  #mehr {display: inline-block; padding: 0.2em 0.45em; border: black solid 4px;}
  #logobild, #unteres_bild {max-height: 200px;}
}

@media screen and (max-width:932px) {
  #jahr, #anno, #year {font-size: 20px; letter-spacing: 3; height: 95px; width: 95px; right: 15px; top: -30px;}
}

@media screen and (max-width:660px) {
  header {height: 75px;}
  .logo {font-size: 16px; margin: 10px; letter-spacing: 2.5;}
  .touchscreen {padding: 0 20px 0 0;}
  .phone_nav {font-size: 30px;}
  .menu {top: 75;}
  #ueberschrift {padding-top: 10; padding-bottom: 10px;}
  h2 {font-size: 40px; margin-left: 75px; margin-right: 75px; margin-bottom: 25px; margin-top: 75px;}
  h3 {font-size: 16px; padding-bottom: 45px;}
  #mehr {display: inline-block; padding: 0.15em 0.4em; border: black solid 3px;}
  #jahr, #year, #anno {font-size: 12px; letter-spacing: 1; height: 55px; width: 55px; right: -30px; top: -16px;}
  #logobild, #unteres_bild {max-height: 150px;}
  #glace {font-size: 20px; margin: 50px 50px 50px 50px;}
}

@media screen and (max-width:534px) {
  #jahr {font-size: 12px; letter-spacing: 1; height: 55px; width: 55px;}
  #anno, #year {font-size: 12px; letter-spacing: 1; height: 55px; width: 55px; right: -40px; top: -16px;}
}

@media screen and (max-width:425px) {
  h2 {font-size: 30px;}
  #jahr {right: -40px; top: 16px;}
}

@media screen and (max-width:417px) {
  #unteres_bild {max-height: 180px;}
}

@media screen and (max-width:407px) {
  #year {top: 16px;}
}

@media screen and (max-width:362px) {
  h2 {font-size: 25px;}
}