/*
 Theme Name:     Divi Child
 Theme URI:      
 Description:    Garibaldi Restaurant Theme
 Author:         about-go // werbeagentur
 Author URI:     https://about-go.de
 Template:       Divi
 Version:        1.0.0
*/



/*Colors
 * 
#FFF9E6  beige
#C69600  gold
#7c0021  d-rot


 */



/* =Theme customization starts here
------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Qwigley&subset=latin-ext');

*{
	font-family: Helvetica, Arial, sans-serif; 
	font-weight: 400;
}

h1,h2,h3,h4 {
	font-family: Helvetica, Arial, sans-serif; 
	font-weight: 800;
}

h5 {
	font-size: 50px !important;
	white-space: nowrap;
	color: #fff !important;
/*line-height: 1.6 !important; */
	font-weight: 700;
}

@media only screen and (max-width: 450px) {
   h5 {
	font-size: 25px !important;
	   white-space: normal;}}
@media only screen and (max-width: 1026px) {
  h5 {
	  white-space: normal;}}

h6 {
	font-size: 112px !important;
	font-family: 'Qwigley', cursive !important;
	color: #FFF9E6 !important;
	font-weight: 400;
}

@media only screen and (max-width: 450px) {
  h6 {
	  font-family: 'Qwigley', cursive !important;
	font-size: 60px !important;
	  white-space: normal;}}


		
#main-header.et-fixed-header{border-bottom: 1px solid #ccc;}


.headerbild {
	font-size: 70px !important;
	white-space: nowrap;
	line-height: 1.6 !important;
}
.headerbild2 {
	font-size: 70px !important;
	white-space: nowrap;
	line-height: 1.6 !important;
	font-family: 'Qwigley', cursive !important;
	font-weight: 400;
}


@media only screen and (max-width: 1000px) {
   .headerbild {
	font-size: 50px !important;
	   white-space: nowrap;}
}
@media only screen and (max-width: 700px) {
   .headerbild {
	font-size: 40px !important;
	   white-space: nowrap;}
}
@media only screen and (max-width: 450px) {
   .headerbild {
	font-size: 25px !important;
	   white-space: nowrap;}
}

#top-menu a {
	display: block;
    position: relative;
    color: rgba(0,0,0,.6);
    text-decoration: none;
    -webkit-transition: color .4s ease-in-out !important;
    -moz-transition: color .4s ease-in-out !important;
    transition: color .4s ease-in-out !important;
}

#top-menu a:hover {
	color: #922732 !important;
	opacity: 1 !important;
}

.restaurant-name {
	letter-spacing: 0.4em;
	font-weight: 800;
	}

.imagetext {
	padding-left: 20%;
	padding-right: 20%;
	font-size: 30px;
}
.imagetextp{margin-left: 20%; margin-right: 20%;}

@media only screen and (max-width: 500px) {
	.imagetext{font-size: 26px;}
}

@media only screen and (max-width: 700px) {
	.imagetextp{margin-left: 10%; margin-right: 10%;}
}

@media only screen and (max-width: 600px) {
	.imagetextp{margin-left: 0; margin-right: 0;}
}

@media only screen and (max-width: 450px) {
	.imagetextp{margin-left: 0; margin-right: 0;}
}

.signethover {transition: all .2s ease-in-out; width: 45px; height: auto; margin: 0 auto;}
.signethover:hover {transform: scale(1.2);}

.text-zentriert {margin-left: 20%; margin-right: 20%;}

@media only screen and (max-width: 1000px) {
.text-zentriert {margin-left: 15%; margin-right: 15%;}
}

@media only screen and (max-width: 800px) {
.text-zentriert {margin-left: 10%; margin-right: 10%;}
}
@media only screen and (max-width: 450px) {
.text-zentriert {margin-left: 0%; margin-right: 0%;}
}

.hovericon {   
	padding: 20px;
	-webkit-transition: color .4s ease-in-out !important;
    -moz-transition: color .4s ease-in-out !important;
    transition: color .4s ease-in-out !important;}
.hovericon:hover {color: #BB9956;}

#et-footer-nav .container {
text-align: center;
}

.menu-item-78, .menu-item-79 {
	color: #ffffff !important;
	-webkit-transition: color .4s ease-in-out !important;
    -moz-transition: color .4s ease-in-out !important;
    transition: color .4s ease-in-out !important;}

.speisekarte {
	text-align: center;
	font-size: 30px;
	letter-spacing: 0.3em;
	font-weight: 600;
	/*color: #7c0021;*/
	color: #333 !important;

	text-transform: uppercase;
}
@media only screen and (max-width: 450px) {
	.speisekarte {font-size: 20px;}}

.speise {
	text-align: center;
	color: #333;
}

.speisenummer {
	font-size: 10pt;
	font-weight: 200;
}

.speisename{
	font-size: 25px;
	font-weight: 600;
	color: #333;
}

@media only screen and (max-width: 450px) {
	.speisename {font-size: 14px;}}

.beschreibung_de{
	font-size: 14px;
	font-weight:400;
}
.beschreibung_en{
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
}
.angaben{
	font-size: 8px;
	font-weight: 300;
}
.table-overflow{
	overflow-x:auto;
	margin-left: 18%;
	margin-right: 10%;
}

@media only screen and (max-width: 780px) {
.table-overflow {margin-left: 0%; margin-right: 0%;}
}
.table_speisekarte{
	border: none !important;
	padding: 10px 20px 10px 20px;
	white-space: nowrap;
}
.table_head {
	text-align: left;
	font-size: 25px;
	font-weight: 600;
	color: #333;
	border: none !important;
	white-space: nowrap;
}

@media only screen and (max-width: 450px) {
	.table_head {font-size: 20px;}}

.tabledrinks_row{
	border: none !important;
	border-bottom-color: rgba(255, 255, 255, 0) !important;
}
.tablenumber {
	font-size: 14px;
	font-weight: 300;
	width: 10%;
	text-align: left;
	border: none !important;
}
.tabledrink {
	font-size: 14px;
	font-weight:600;
	width: 40%;
	text-align: left;
	border: none !important;
}
@media only screen and (max-width: 450px) {
	.tabledrink {width: 30%;}
}
.tablesize1 {
	font-size: 14px;
	font-weight: 400;
	width: 10%;
	text-align: left;
	border: none !important;
}
.tablesize2 {
	font-size: 14px;
	font-weight: 400;
	width: 10%;
	text-align: right;
	border: none !important;
}
.tableprice {
	font-size: 14px;
	font-weight: 600;
	width: 10%;
	text-align: left;
	border: none !important;
	white-space: nowrap;
}
.tabledrink_wein {
	font-size: 14px;
	font-weight:600;
	width: 60%;
	text-align: left;
	border: none !important;
}

@media only screen and (max-width: 450px) {
	.tabledrink_wein {width: 40%;}
}

.tabledrink_warm {
	font-size: 14px;
	font-weight:600;
	width: 70%;
	text-align: left;
	border: none !important;
}


.widgettitle {
	margin-bottom: 20px;
	
	font-weight: 600;
	text-transform: uppercase;

}

.mobile_menu_ul {
	list-style-type: none !important;
	padding: 5px 15px 5px 15px !important;
}
.mobile_menu {
	float: left;
	text-decoration: none;
	color: #000;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Add a black background color to the top navigation */
.topnav {
    background-color: #e8e8e8;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 45px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

span.mobile_menu_bar:before {
    color: #7c0021 !important;
}
.et_mobile_menu { border-top: 3px solid #7c0021 !important; }

.wpfm-template-2 .wpfm-menu-nav.wpfm-position-right ul li a, .wpfm-template-2 .wpfm-menu-nav.wpfm-position-top-right ul li a, .wpfm-template-2 .wpfm-menu-nav.wpfm-position-bottom-right ul li a {
	background-color: #7c0021 !important;}