Common/design1.css

html, body { color: black; font-family: 'open-sans-bold'; font-size: 18px; text-align: center; }

.clear { clear: both; height:0px; }

#sideMenu{ display:none; }

#top_title{ display:none; }

#top_menu_14, #top_menu_under { box-sizing: initial; }

#firstheading{ display:none; }

#content { width: 100% !important; padding:0px; margin-top:0px; margin: 0px; background-color:white; }

#globlawrapper{ display:none; }

{margin: 0; padding: 0;}

a {text-decoration: none;}

/* This class is added on scroll */ .fixed { position: fixed; top: 0; height: 70px; z-index: 1; }

nawimain {

background-color:rgba(255,255,255,0.8); border-radius: 20px; border-radius: 20px; margin-left: 20%; padding: 10px 10px 10px 10px;

   width:70%;

height:90%; overflow:hidden; }

titelbild{

background:black; background-image: url("");

   width:50%;

height:50%; background-repeat: no-repeat; background-position: center; }

/* Screens Settings */

screen1 {

background: #43b29d; }

screen1 p {

padding-top: 200px; }

screen2 {

padding-top: 70px; background-image: url("../images/bg2.jpg"), url("../images/bg1.jpg"), url("../images/bg.jpg"), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat;

 background-position: bottom right, left, right;

padding-bottom: 2%; }

screen3 {

padding-top: 70px; background-image: url("../images/bg1.jpg"); padding-bottom: 2%; }

screen4 {

padding-top: 70px; background-image: url("../images/bg2.jpg"); padding-bottom: 2%; height:500px; }

.sponsoring{ width:30%; height:30%; float:left; }

.clearfix {

   overflow: auto;

}

wrapper {

width: 100%; margin: 0 auto; }

boxleft {

float: left; width: 40%; }

boxcenter {

margin: 0 205px; }

boxright {

float: right; width: 40%; }

.teamfoto { border: 3px solid #000; width:80%; padding: 4px 4px 4px 4px; margin-left: 10px; margin-top:10px; margin-bottom: 10px; background:white;

}

.teamfoto > img { width:100%; height:100%; padding: 1px 1px 1px 1px; }

.teamtext { width: 70%; max-width:300px; padding: 2px 2px 2px 2px; margin-left: 10px; margin-top:10px; margin-bottom: 10px; background:white; }

a { color: #aaa; text-decoration: none; outline: none; }

a img {

   	border: none;

}

a:hover, a:active { color: #333; }

homepagewrapper {

min-height:100%; position:relative; }

ueberschrift

{ color: black; margin-top:5px; padding-top: 5px; padding-bottom:5px; text-align: center;

   font-size: 200%;

}

section { height: 100vh; }

footer {

background:black; width:100%; min-height:3%; text-align:center; /*position:fixed;*/ bottom:0; left:0; height: 200px; padding-top: 15px; }

.copyright {font-size : 12px; font-family : courier new; color: white;} p {font-size : 20px}

global-nav{

width:90%;

}

nav { font-family: 'Open Sans', sans-serif; bottom: 0; margin-left:5%; width: 90%; height: 50px; background: black; background-image: url("../images/bg.jpg"); border: 0.2em solid white; border-radius:20px; }

nav > a { display: none;

}

nav li { display: inline-block; }

nav li a {

text-align:center; color: #757575; text-transform: uppercase; }

nav li a:active { background-color: blue !important; }

nav span:after { width: 0; height: 0; border: 1.313em solid transparent; /* 5 */ border-bottom: none; border-top-color: white; content: ; vertical-align: middle; display: inline-block; position: relative; right: -0.313em; /* 5 */ }

/* first level */ nav > ul {

margin:0 auto; height: 3.45em; /* 60 */ } nav > ul > li { width: 15%; min-width:100px; height: 100%; float: left; margin-left:10px; margin-top:10px; } nav > ul > li > a { text-decoration: none; display:block; height: 100%; color:white; font-size: 1.0em; /* 24 */ line-height: 1.8em; /* 60 (24) */ text-align: center; } nav > ul > li:not( :last-child ) > a { border-right: 14px solid white; } nav > ul > li:hover > a, nav > ul:not( :hover ) > li.active > a { transition: 0.3s; color:yellow; font-style: italic; } /* second level */ nav li ul { width:100%; display: none; font-size:80%; color: black; text-align:center; list-style: none; position: absolute; top: 100%; height:70px; width:57%; padding: 5px 5px 5px 5px; } nav li:hover ul { display: inline; left: 20px; right: 0; } nav li:not( :first-child ):hover ul { left: -10px; } nav li ul a { height:100%; font-size: 1.25em; /* 20 */ border-top: 1px solid white; color:black; text-decoration:none; padding: 5px 5px 5px 5px; /* 15 (20) */ } nav li ul li a:hover, nav li ul:not( :hover ) li.active a { background-color: yellow; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }

nav > ul > li > a > img { height: auto; width: auto; max-height:500px; max-width:200px; padding: 0 0.633em; /* 20 (24) */ }

@media screen and (max-width:680px) { #footer{ display:none; } #nawimain{ background-color:rgba(255,255,255,0.95); margin-left:0px; width:100%; padding:0px ; border-radius: 0px; border-radius: 0px; overflow:hidden; }

#screen1 { background: #43b29d; }

#screen2 { background-color: black; padding-bottom: 5px; }

#screen3 { padding-top: 0px; background-color: black; padding-bottom: 5px; }

#boxleft { float: none; width: 100%; }

#boxright { float: none; width: 100%; }

html { font-size: 55%; /* 12 */ }

nav{ width: 100%; border: 0.2em solid white; border-style: none; margin-left:0px; } nav > a { width: 3.125em; /* 50 */ height: 3.125em; /* 50 */ text-align: left; text-indent: -9999px; background-color: black; position: relative; } nav > a:before, nav > a:after { position: absolute; border: 2px solid #fff; top: 35%; left: 25%; right: 25%; content: ;

} nav > a:after { top: 60%; }

nav:not( :target ) > a:first-of-type, nav:target > a:last-of-type { display: block; }

/* first level */

nav > ul {

-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; height: auto; display: none; position: absolute; left: 0; right: 0; background-color:#aaa; opacity:0.98;

} nav:target > ul { width: 100%; display: block; } nav > ul > li { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;

/*background: url("../images/8.jpg");*/ background-size:100% 100%; width: 100%; float: none; } nav > ul > li > a {

height: auto; text-align: left; padding: 0 0.633em; /* 20 (24) */ } nav > ul > li:not( :last-child ) > a {

border-right: none; width:100%; border-bottom: 1px solid white; }

/* second level */

nav li ul { position: static; padding: 0.25em; /* 20 */ padding-top: 0; height:100%; width:98%; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; opacity:0.70; display: block; font-size:80%; list-style: none; top: 100%; }

}

ul.topnav {

 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;

}

ul.topnav li {float: left;}

ul.topnav li a {

 display: inline-block;
 font-size: 17px;
 width:90%;
 background-color:brown;

}

ul.topnav li a:hover {background-color: yellow; width:100%}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {

 ul.topnav li:not(:first-child) {display: none;}
 ul.topnav li.icon {

border-radius: 20px;

   display: inline-block;
 }

 ul.topnav.responsive {position: relative;}
 ul.topnav.responsive li.icon {
   position: relative;

 ul.topnav li a {
 display: inline-block;
 font-size: 17px;
 width:90%;
 background-color:transparent;

}

 #global-nav{

width:100%; min-width:230px;

 }
 ul.topnav.responsive li {
   float: none;
   display: inline;
 }
 ul.topnav.responsive li a {
   display: block;
   text-align: left;
 }

}