/* Template © admotion*/


html 
{
   height:			100%;
}


body
{
   height:			100%;
   margin:			0px;
   padding:			0px;
    font-family: 'Rubik', sans-serif;
   font-weight:		300;
   font-size:		16px;
   color:			#000;
   line-height:		145%;
   letter-spacing:	0.06em;
}


#system-message { margin: 0px; }
/* bootstrap import */

img {
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.nav > li > a:hover, .nav > li > a:focus {text-decoration: none;background-color: transparent;}
.nav > li > a {display: block;}
li { line-height: normal;}
.nav {list-style: none; padding: 0; margin: 0;}
table {border-collapse: collapse;border-spacing: 0;}

/* ---------------------------------- */


video {
  width: 100%;
  height: auto;
}

    #desktop { display: none; }
    #mobile { display: block; }   
    #left { width: 100%; float: none; }
    #right { width: 100%; float: none; margin-top: 4%; }
#24308d; float: left; width: 100%; margin-right: 0%;margin-bottom: 4%; }


#container-header { width: 100%; position: absolute; background: #fff; top: 0;}

#logo { padding: 50px 5% 28px;width:230px; }
#logo a {color: #000 !important; }
#logo a:hover {color: #999999 !important; }
.logo { font-family: 'Piazzolla', serif; font-size: 25px; float: left;  margin-right: 40px; float: left; }
.logotext { float: left; margin-top: 13px; font-size: 0.8em; }

#logo-ar { padding: 50px 5% 28px;width:230px;position: relative;}
#logo-ar a {color: #000 !important; }
#logo-ar a:hover {color: #999999 !important; }
#logo-ar .logo { font-family: 'Piazzolla', serif; font-size: 25px; float: left; margin-right: 0; float: left; }
.logotext { float: left; margin-top: 13px; font-size: 0.8em; }



#inhalt { width: 100%;}

#showbox { position: relative; overflow: hidden; z-index: -1; }
#showbox img { width: 100%; max-width: none;}
#showbox::after { content: ""; background: url('/images/Welle.svg') no-repeat;  background-size: 100%; width: 110%; height: 0;  padding-bottom: 5%; position: absolute; bottom: 0; left: -2%;}


.items-row { padding: 40px 0; width: 100%; }
.items-row:nth-child(even) { background: #ebebeb; }
.column-1 { width: 90%; margin: 0 auto; }



table.bildung td { padding: 15px 20px 15px 0; border-bottom: 1px solid #000;}
table.bildung td { min-width: auto;}

.rundiframe {border-radius: 50%; width: 300px; height: 300px; overflow: hidden; margin: 0 auto; }

#inhalt ul { padding-left: 17px; }
#inhalt ol { padding-left: 17px; }
#inhalt li { line-height: 130%%; padding: 0px 0 15px 10px; }

#row1 { width: 100%; margin-bottom: 20px; float: none;}
#row2 { width: 100%; margin-bottom: 20px; float: none;}
#row3 { width: 100%; margin-bottom: 20px; float: none;}
#row12 { width: 100%; margin-bottom: 20px; float: none;}

#sprachen { position: absolute; top: 6px; right: 43px;z-index: 1001; font-size: 0.8em;}
#sprachen li a {opacity: 0.5; color: #000;}
#sprachen li a:hover {opacity:1;}
#sprachen li.lang-active a {opacity: 1;}

footer { line-height: 0;}
#container-footer  {  width: 100%; background: #ebebeb; padding: 20px 0;}
#footer  {  width: 90%; margin: 0 auto; font-size: 0.8em; line-height: 140%;}
#footer a {color: #000 !important; }
#footer a:hover {color: #999999!important; }

h1 { margin: 0px 0px 35px 0px; padding: 0px; font-size: 28px; line-height: 130%; font-weight: 700; font-family: 'Piazzolla', serif; }
h2 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 22px; line-height: 130%; font-weight: 700; font-family: 'Piazzolla', serif;}
h3 { margin: 0px 0px 10px 0px; padding: 0px; font-size: 1em; line-height: 130%; font-weight: 500; }


a { text-decoration: none; outline: none; color: #999999;  }
a:hover { text-decoration: none; color: #696969; }
a:focus { text-decoration: none; outline: none; }

p {margin: 0; }


#webdesign  { margin-top: -140px; background: #000 url(../images/webdesign-admotion.png); position: absolute; right: 0px; width: 13px; height: 65px;background-size: 13px 65px;}
#webdesign p  { margin: 0px; }
#webdesign a  { width: 13px; height: 65px; display: block;  }




#scrollToTop { border-radius: 50%; padding-left: 11px; padding-right: 11px; padding-top: 15px; padding-bottom: 15px; right: 20px; bottom: 40px;  }  


.clear { line-height: 0; }



@media(min-width:768px){

    #logo { width: 85%;padding: 28px 40px; }
    .logo { font-size: 40px;} 
    #logo-ar { width: 85%;padding: 28px 40px; }
    #logo-ar .logo { font-size: 40px; margin-right: 40px;}
 
    
#desktop { display: block; }
#mobile { display: none; }

#left { width: 48%; float: left; margin-right: 4%; }
#right { width: 48%; float: left; margin-top: 0; }
    
    
    #footer li { float: none; padding: 0px; background: none; }
    
    
#row1 { width: 48%; margin-bottom: 20px; float: left; margin-right: 4%;}
#row2 { width: 48%; margin-bottom: 20px; float: left;}
#row3 { width: 48%; margin-bottom: 20px; float: left;}
.rundiframe {border-radius: 50%; width: 400px;height: 400px; overflow: hidden; margin: 0 auto; }
    
    #webdesign  { margin-top: -140px; background: #000 url(../images/webdesign-admotion.png); position: absolute; right: 0px; width: 25px; height: 91px; background-size: 100%;}
#webdesign p  { margin: 0px; }
#webdesign a  { width: 25px; height: 91px; display: block; }

}

@media(min-width:1000px){
    body { font-size: 18px;}
    .items-row:first-child { padding: 100px 0 150px;}
    .items-row { padding: 150px 0;}
    h1 {font-size: 40px;}
    h2 {font-size: 28px;}
    
    #scrollToTop { border-radius: 50%; padding-left: 11px; padding-right: 11px; padding-top: 15px; padding-bottom: 15px; right: 40px; bottom: 110px; }

    #container-header { position: absolute; width: 100%;}
    #sprachen {right: 150px; top: 20px; color: #fff;}
    #sprachen li a {opacity: 0.5; color: #fff;}
    #logo a { color: #fff !important;}
    #logotext a { color: #fff !important;}
    #logo a:hover {color: #fff !important; }
    
    #logo-ar { float: left;}
    #logo-ar a { color: #fff !important;}
    #logo-ar a:hover {color: #fff !important; }

}

@media(min-width:1250px){
    #footer  {  width: 1200px; margin: 0 auto; }
    .column-1 { width: 1200px; margin: 0px auto;  }
    table.bildung td { min-width: 180px;}

    .logo { font-family: 'Piazzolla', serif; font-size: 50px; float: left;  margin-right: 40px; float: left; }
    .logotext { float: left; margin-top: 13px;font-size: 1em; }
    
    .logo-ar { font-family: 'Piazzolla', serif; font-size: 50px; float: left;  margin-right: 40px; float: left; }
    
    #row1 { width: 30%; margin-bottom: 20px; float: left; margin-right: 5%;}
    #row2 { width: 30%; margin-bottom: 20px; float: left;margin-right: 5%;}
    #row3 { width: 30%; margin-bottom: 20px; float: left;}
    #row12 { width: 60%; margin-bottom: 20px; float: left;}

}