﻿@media screen and (max-width: 935px)
{
    .horizontal-nav                                                              {overflow: hidden;
                                                                                  height: 0;
                                                                                  transition: all 1s ease;
                                                                                 -webkit-transition: all 1s ease;
                                                                                 -moz-transition: all 1s ease;
                                                                                 -ms-transition: all 1s ease;
                                                                                 -o-transition: all 1s ease;}

    .mobile-menu-box                                                             {display: none;}

    .mobile-menu-label                                                           {display: block;
                                                                                  cursor: pointer;
                                                                                  text-align: center;}

    .mobile-menu-label:before                                                    {content: 'Menu';}

    .mobile-menu-box:checked ~ .horizontal-nav                                   {height: auto;}

    .mobile-menu-box:checked ~ .mobile-menu-label:before                         {content: 'Schliessen';}

    .horizontal-nav li                                                           {display: block;}

    .horizontal-nav .folder ul                                                   {position: static;}
    
    .horizontal-nav .folder-toggle-label a:before                                {content: '+ ';}

    .horizontal-nav .folder-toggle-box:checked ~ .folder-toggle-label a:before   {content: '- ';}

    .horizontal-nav .folder:hover ul,
    .horizontal-nav .folder-toggle-box ~ ul                                      {display: none;}
    
    .horizontal-nav .folder-toggle-box:checked ~ ul                              {display: block;}    
}

.placeHolder                                            {display: block;}

.header-banner-top                                      {display: block;
                                                         position: fixed;
                                                         text-align: center;
                                                         width: 100%;
                                                         z-index: 98;}

.main-navigation                                        {background: #222;
                                                         position: fixed;
                                                         width: 100%;
                                                         z-index: 99;
                                                         opacity: 0.75;
                                                         text-align: center;}

.horizontal-nav a                                       {padding: 1.5em 3em;
                                                         color: #fff;
                                                         text-decoration: none;
                                                         text-transform: uppercase;
                                                         font-size: 13px;
                                                         letter-spacing: 5px;
                                                         transition: all 0.5s ease;
                                                        -webkit-transition: all 0.5s ease;
                                                        -moz-transition: all 0.5s ease;
                                                        -ms-transition: all 0.5s ease;
                                                        -o-transition: all 0.5s ease;}

.horizontal-nav a:hover,
.horizontal-nav .active-link a                          {color: #aaaaaa;}

.horizontal-nav .folder ul                              {background-color: #222;
                                                         transition: padding 0.14s ease-out;
                                                         text-align: left;}

.horizontal-nav .folder a                               {padding: 0.5em 1em;
                                                         white-space: nowrap;}

.horizontal-nav .folder:hover ul                        {padding: 0.5em 0;}
                                                            
    .header-banner-top .banner                          {background-color: #006490;}

.header-banner-top .banner .banner-image                {background: url(../Img/DSC_2872_mb_1920x1080.png) center center; /*url(../Img/volksabfahrt_1.jpg) center center;*/
                                                         background-size: cover;
                                                         opacity: 0.8;}

.header-banner-top .banner .primary-wrapper             {padding-top: 150px;
                                                         padding-bottom: 250px;}

.header-banner-top .banner .site-title                  {letter-spacing: 2px;
                                                         font-size: 52px;
                                                         margin: 30px 0 30px;
                                                         display: block;}
                                                         
header hgroup                                           {display: inline-block;
                                                         text-align: center;
                                                         position: relative;
                                                         /*top: 50%;*/
                                                         color: #fff;
                                                         border: 0px solid #fff;
                                                         padding: .5em 3em;
                                                         background-color: rgba(0, 0, 0, 0);
                                                         z-index: 2;
                                                         width: 65%;}

.header-banner-top .banner .site-title a                {color: #fff;
                                                         text-decoration: none;}

.header-banner-top .banner .site-tagline                {color: #aaa;
                                                         letter-spacing: 1px;
                                                         font-size: 14px;
                                                         margin: 0 20%;}

@media screen and (max-width: 935px)
{
    .horizontal-nav a                               {padding: 0.75em 1em;}

    .horizontal-nav > ul > li:first-child a         {padding-top: 2em;}
    
    .horizontal-nav > ul > li:last-child a          {padding-bottom: 2em;}
    
    .horizontal-nav li                              {display: block;}
    
    .horizontal-nav .folder ul                      {text-align: center;
                                                     padding: 0.5em 0;
                                                     margin: 0.5em 0;
                                                     transition: none;
                                                     background-color: #292929;}

    .horizontal-nav .folder:hover ul                {padding: 0.5em 0;}
    
    .horizontal-nav .folder-toggle-label a          {cursor: pointer;}
    
    .mobile-menu-label                              {color: #ffffff;
                                                     background-color: #222;
                                                     padding: 1.5em 1em;
                                                     text-decoration: none;
                                                     text-transform: uppercase;
                                                     font-size: 13px;
                                                     letter-spacing: 5px;
                                                     transition: all 0.5s ease;
                                                    -webkit-transition: all 0.5s ease;
                                                    -moz-transition: all 0.5s ease;
                                                    -ms-transition: all 0.5s ease;
                                                    -o-transition: all 0.5s ease;}
                                                     
    .mobile-menu-label:hover                        {color: #aaa;}

    .mobile-menu-box:checked ~ .mobile-menu-label   {color: #ffffff;
                                                     letter-spacing: 5px;}
                                                     
    .mobile-menu-box:checked ~ .mobile-menu-label:hover     {color: #aaa;}

    .mobile-menu-box:checked ~ .horizontal-nav              {padding: 1em 0;
                                                             transition: all 1s ease;
                                                            -webkit-transition: all 1s ease;
                                                            -moz-transition: all 1s ease;
                                                            -ms-transition: all 1s ease;
                                                            -o-transition: all 1s ease;}

    .mobile-menu-box:checked ~ .mobile-menu-label:before    {content: 'Schliessen';}

#BannerNext                                     {font-size: 72px;
                                                 color: #800000;
                                                 position: fixed;
                                                 transform: rotate(-30deg);
                                                 text-align: center; 
                                                 height: 25%; 
                                                 width: 50%;
                                                 margin-top:15%;
                                                 margin-left:25%;
                                                 justify-content: center;
                                                 }
}

@media screen and (max-width: 1400px)
{
    .right-aside                                {width: 85%;}
    
    .Group                                      {width: 73%;}
    
    .person1                                    {width: 73%;}
    
    .sponsorenTable                             {transform: scale(0.7);
                                                 margin: -141px -130px -120px -213px;}
    
    .left-aside-special                         {margin-left: 20%;
                                                 width: 70%;}

    .placeHolder                                {display: block;}
}

@media screen and (max-width: 1130px)
{
    .header-banner-top .banner .site-title      {font-size: 35px;}
    
    .Rennstrecke                                {width: 85%;}
    
    .right-aside                                {width: 100%;
                                                 margin-left: 0%;}
                                                 
    .left-aside                                 {width: 100%;
                                                 margin-left: 0%;}
   
    .Title                                      {margin-left: 10px;}
    
    .VideoPic                                   {width: 50%;}
    
    #BGImg1                                     {background-image: url("../Img/DSC_8824_1920x1080.png");
                                                 background-size: cover;
                                                 background-attachment: scroll;
                                                 height: 200px;
                                                 background-position: center;}
                                                 
    #BGImg2                                     {background-image: url("../Img/AM4P4921_1920x1080.png");
                                                 background-size: cover;
                                                 background-attachment: scroll;
                                                 height: 200px;
                                                 background-position: center;}

    #BGImg3                                     {background-image: url("../Img/AM4P4907_1920x1080.png");
                                                 background-size: cover;
                                                 background-attachment: scroll;
                                                 height: 200px;
                                                 background-position: center;}
}

@media screen and (max-width: 945px)
{    
    .sponsoren                                  {width: 73%;}
}

@media screen and (max-width: 880px)
{
     .Group                                     {width: 100%;}
    
    .person1                                    {width: 100%;}

    .sponsorenTable                             {transform: scale(0.6);}
}

@media screen and (max-width: 800px)
{    
    .Rennstrecke                                {width: 100%;}

    #BannerNext                                 {font-size: 52px;}
}

@media screen and (max-width: 700px)
{
    .header-banner-top .banner .site-title      {font-size: 30px;}
    
    .Rennstrecke                                {font-size: 11px;}
    
    .Hotels                                     {font-size: 11px;}
    
    .form                                       {width: 90%;}
    
    #register                                   {width: 90%;}
    
    .FullContent                                {top: 400px;}
    
    input                                       {width: 100%;}
    
    select                                      {width: 73%;
                                                 margin-bottom: 10px;}
    
    .selectCat                                  {width: 100%;}

    #borderCB                                   {width: 100%;}
    
    .VideoPic                                   {width: 70%;}
    
    .sponsoren                                  {width: 73%;}
    
    .sponsorenTable                             {transform: scale(1);
                                                 margin: 0px 0px 0px 0px;}
                                                 
    .AmbassadorSchweiz                          {font-size: 12px;}
}
@media screen and (max-width: 570px)
{
    .arrows                                     {bottom: 195px;}

    #BannerNext                                 {font-size: 32px;
                                                 height: 25%;
                                                 width: 50%;
                                                 margin-top: 45%;
                                                 margin-left: 20%;}
}

@media screen and (max-width: 500px)
{    
    input                                       {width: 98%;}
    
    .btnReg                                     {width: 100%;}
    
    .FullContent                                {top: 380px;}
    
    blockquote                                  {margin: 1.5em 0em;
                                                 padding: 0.5em 2px;}

    blockquote.RegWarn                          {margin: 1.5em 0em;
                                                 padding: 0.5em 2px;}
                                                 
    blockquote.register                         {margin: 1.5em 0em;
                                                 padding: 0.5em 2px;
                                                 margin-left: 0px;}
                                                 
    .VideoPic                                   {width: 100%;}
    
    .arrows                                     {bottom: 155px;}
    
    header hgroup                               {margin-top: -20%;}
    
    .AmbassadorSchweiz                          {font-size: 10px;}

    .left-aside-special                         {transform: rotateZ(0deg);
                                                 margin-left: 0px;}

    .placeHolder                                {display: none;}
}

@media screen and (max-width: 437px)
{
    .left-aside-special                         {transform: rotateZ(0deg);}
}
@media screen and (max-width: 400px)
{
    input                                       {width: 95%;}
    
    select                                      {width: 100%;}
    
    .AmbassadorSchweiz                          {font-size: 8px;}
}

@media screen and (max-width: 340px)
{
    .header-banner-top .banner .site-title      {font-size: 25px;}
    
    .btnReg                                     {width: 100%;}
    
    input                                       {width: 92%;}
    
    #borderCB                                   {width: 98%;}
    
    .AmbassadorSchweiz                          {font-size: 6px;}

#BannerNext                                     {font-size: 32px;
                                                 height: 25%; 
                                                 width: 50%;
                                                 margin-top:45%;
                                                 margin-left:20%;
                                                 }
}

@media screen and (max-width: 290px)
{
    blockquote                                  {margin: 1.5em 0em;
                                                 padding: 0.5em 2px;}

    blockquote.RegWarn                          {margin: 1.5em 0em;
                                                 padding: 0.5em 2px;}
                                                 
    blockquote.register                         {margin: 1.5em 0em;
                                                 padding: 0.5em 2px;
                                                 margin-left: 0px;}
                                                 
    input                                       {width: 90%;}
}