/****************************************************************
 * Stylesheet of http://www.food-nd.com                         *
 * Author: Patrick Emsinghoff                                   *
 * (c) Copyright by emsinghoff.net                              *
 * License: CC BY-NC-ND 4.0 | More: creativecommons.org         *
 ****************************************************************/

*                                                   {margin:0; padding:0;}
div.clear_float                                     {clear:both;}
body                                                {font-family:Arial;}
span.no_break                                       {white-space: nowrap;}


#content                                            {width:100%;}
#content h2                                         {font-family: 'Francois One', sans-serif; font-size:60px; font-weight:normal; text-transform:uppercase;}
#content h3                                         {font-family: 'Francois One', sans-serif; font-size:30px; font-weight:normal; text-transform:uppercase; padding:20px 0 10px 0;}
#content hr                                         {width:120px; background:#FFF; height:4px; border:none; margin:10px auto; box-shadow:0 0 10px rgba(0,0,0,.3);}
#content p                                          {font-family: 'News Cycle', sans-serif; font-size:24px; line-height:34px; padding:0 0 10px 0;}

#navigation_container                               {font-family: 'Francois One', sans-serif; position:fixed; text-align:center; width:100%; z-index:999999999999999999999999999999;}
#navigation_container nav                           {display:inline-block; background:rgba(255,255,255,.8); padding:0 3%; box-shadow:inset 0 0 10px rgba(0,0,0,.3);}
#navigation_container nav li                        {display:inline-block; list-style-type:none; float:left;}
#navigation_container nav li a                      {display:block; color:#333; padding:10px 15px; font-size:19px; text-decoration:none; text-transform:uppercase; border-top:5px solid rgba(0,0,0,.0); border-bottom:5px solid rgba(0,0,0,.0); -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out;}
#navigation_container nav li a:hover                {border-bottom:5px solid rgba(0,0,0,.7);}
#navigation_container nav li ul                     {display:none; position:absolute; background:rgba(0,0,0,.6); width:200px;}
#navigation_container nav li ul li                  {float:none !important; width:100%;}
#navigation_container nav li ul li a                {color:#FFF; font-size:14px; border-top:0px !important; border-bottom:0px !important; background:rgba(255,255,255,.0);}
#navigation_container nav li ul li a:hover          {background:rgba(255,255,255,.3);}

#home                                               {padding:16% 0;}
#home .wrapper                                      {background:rgba(255,255,255,.8); width:60%; max-width:400px; padding:40px; margin:auto; box-shadow:inset 0 0 10px rgba(0,0,0,.3);}
#home .wrapper h1,
#home .wrapper h2                                   {font-size:0px;}
#home .wrapper img                                  {width:100%; height:auto;}

#about                                              {background:#000;}
#about .wrapper                                     {padding:5% 0; text-align:center; color:#FFF; text-shadow:0 0 4px #000; background:rgba(0,0,0,.3);}
#about .text_container                              {width:80%; max-width:900px; margin:auto; padding:50px 0 0 0;font-family: 'News Cycle', sans-serif;}

#products                                           {background-image:url(../media/products.jpg); background-position:center; background-attachment:fixed; background-size:cover;}
#products .wrapper                                  {padding:15% 0; text-align:center; color:#FFF; text-shadow:0 0 4px #000;}
#products .title                                    {background:rgba(255,255,255,.3); padding:30px 0;}
#products .title a                                  {text-decoration:none; color:#FFF; border-bottom:3px solid rgba(255,255,255,.0); -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out;}
#products .title a:hover                            {border-bottom:3px solid rgba(255,255,255,.9);}
#products .title span                               {display:inline-block; padding:0 10px; font-family: 'Francois One', sans-serif; text-transform:uppercase; font-size:20px;}
#products .title h2                                 {font-size:80px;}

.product                                            {background-attachment:fixed; background-size:cover; text-align:center; color:#FFF; text-shadow:0 0 4px #000; background-position:center;}
.product .wrapper                                   {padding:5% 0; background:rgba(0,0,0,.4);}
.product .text_container                            {width:80%; max-width:900px; margin:auto; padding:50px 0 0 0;font-family: 'News Cycle', sans-serif;}
#products_formaggi                                  {background-image:url(../media/formaggi.jpg);}
#products_salumi                                    {background-image:url(../media/salumi.jpg);}
#products_caffe                                     {background-image:url(../media/caffe.jpg);}
#products_prodotti                                  {background-image:url(../media/prodotti.jpg);}
#products_pasta                                     {background-image:url(../media/pasta.jpg);}
#products_olio                                      {background-image:url(../media/olio.jpg);}
#products_vino                                      {background-image:url(../media/vino.jpg);}

#events                                             {background:#444;}
#events .wrapper                                    {padding:5% 0; text-align:center; color:#FFF; width:80%; max-width:800px; margin:auto; font-family: 'News Cycle', sans-serif; text-shadow:0 0 4px #000;}
#events .wrapper img                                {width:100%; height:auto;}
#events .wrapper a                                  {display:inline-block; margin:20px 0; color:#FFF; text-decoration:none; font-size:20px; padding:20px; background:rgba(255,255,255,0); -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out;}
#events .wrapper a:hover                            {background:rgba(255,255,255,.3);}

#consulting                                         {background-image:url(../media/consulting.jpg); background-attachment:fixed; background-size:cover; background-position:center;}
#consulting .wrapper                                {padding:5% 0; text-align:center; color:#FFF; text-shadow:0 0 4px #000; background:rgba(0,0,0,.4);}
#consulting .text_container                         {width:80%; max-width:900px; margin:auto; padding:50px 0 0 0;font-family: 'News Cycle', sans-serif;}

#contact                                            {background:#444;}
#map_wrapper                                        {float:left; width:50%; height:700px;}
#map_canvas                                         {width:100%; height:100%;}
#contact .text_container                            {float:left; width:45%; padding:2% 0 0 2%; text-align:left; color:#FFF; text-shadow:0 0 4px #000;}
#contact hr                                         {width:120px; background:#FFF; height:4px; border:none; margin:10px auto 10px 40px; box-shadow:0 0 10px rgba(0,0,0,.3);}

#imprint                                            {background:#222;}
#imprint .logo_container                            {float:left; width:50%; padding:5% 0; background:#FFF; text-align:center; color:#FFF; text-shadow:0 0 4px #000; min-height:600px;}
#imprint .logo_container img                        {width:90%; max-width:400px;}
#imprint .text_container                            {float:left; width:45%; padding:2% 0 0 2%; text-align:left; color:#FFF; text-shadow:0 0 4px #000;}
#imprint hr                                         {width:120px; background:#FFF; height:4px; border:none; margin:10px auto 10px 40px; box-shadow:0 0 10px rgba(0,0,0,.3);}

#btn_mobile_nav,
#mobile_nav                                         {display:none;}

@media screen and (max-width: 900px) {
    #navigation_container nav                       {display:none;}
    #btn_mobile_nav                                 {display:block; width:100%; padding:15px 0; font-size:20px; background:rgba(255,255,255,.9); text-align:center; cursor:pointer;}
    #mobile_nav                                     {width:100%; background:rgba(255,255,255,.9);}
    #mobile_nav a                                   {display:block; color:#333; text-decoration:none; padding:10px 0;}
    
    
    #map_wrapper                                    {float:none; width:100%; height:300px;}
    #contact .text_container                        {float:none; width:95%; text-align:center;}
    #imprint .logo_container                        {float:none; width:100%; min-height:200px;}
    #imprint .text_container                        {float:none; width:95%; text-align:center;}
    #contact hr,
    #imprint hr                                     {margin:10px auto;}
    
    #content h2                                     {font-size:40px;}
    #content h3                                     {font-size:20px;}
    #content p                                      {font-size:18px; line-height:28px;}
    #products .title h2                             {font-size:50px;}
    
    #home                                           {padding:36% 0;}
}