/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 24.07.2018, 12:12:03
    Author     : juergen kind
*/



/* EXTERNE FONTS */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/fileadmin/templates/ems1/fonts/OpenSans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  font-size: medium;
  line-height: 1.42857;
  color: #333333;
  background-color: #fff;
  
  }
  

@media screen and (min-width:992px) {
    
    /* Seitenhintergrund */
    
    body { background: url(/fileadmin/templates/ems1/images/bg-page.jpg); }
    
    /* FONT */
    body {font-size: small;font-family: verdana,arial,helvetica,sans-serif;}

    .logo-container { width: 25%; border-right: 1px dotted orange; text-align: center;}
    
    /* Postion  */
    .header { position: relative; margin: auto; top: 25px; }
    .main   { position: relative; margin: auto; }
    .footer { position: relative; margin: auto; }
    
    /* Farben */
    .header {/* height: 200px; */background-color: #dcdcde;}
    .main   {/* height: auto; *//* min-height: calc(100vh - 600px); */background: white;}
    .footer {height: 200px;background: #666666;color: white;}
    .navigation-top {/* height: 200px; */}
    /* Ränder */
    .header { border-top-left-radius: 12px;border-top-right-radius: 12px; }
    .main   { }
    .footer {  margin-top: 2em; margin-bottom: 1em;border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; background: url(/fileadmin/templates/ems1/images/bg-footer.jpg); background-position-y: -50px;background-position-x: 550px; }
    
    /* Breiten */
    .header {width: 920px;max-width: 920px; }
    .main   {margin-bottom: 0px; width: 920px; max-width: 920px; }
    .footer { width: 920px; max-width: 920px; }
    
.content-with-menu .row { 
    background: url(/fileadmin/templates/ems1/images/cello-orange.png);
    background-size: 320px 470px;
    background-position-x: 250px;
    background-position-y: 120px;
    background-position-y: bottom;
    background-repeat: no-repeat;
}
    
    

    /* Abstand des Content */
    .row { margin-left: 20px; margin-right: 20px;}
    
    .footer {  margin-top: 1px; } 
    .footer .frame-default  { padding: 2em;}
    
    
    /* kopf mit Geige als Logo */
    .kopf {display: flex;height: 200px;}
    .logo-right {float: right;position: absolute;right: 12px;bottom: 12px;}
    
    /* PrimaryMenu */
    .menuPrimary    {/* margin-left: 37px; *//* border-left: 1px dotted orange; *//* margin-top: 0em; *//* width: 25%; *//* border-right: 1px dotted orange; */} 
    .menuPrimary ul { margin-top: 1.5em;}
    .menuPrimary  li { list-style: none outside; margin-left: -1em; }   
    .menuPrimary  li { list-style: none outside; width: 100%; text-align: left;  }   
    .menuPrimary  li a { margin-left: -1.2em;}
    
    /* Aktiver Menüpunkt */
    .menuPrimary li.active { font-weight: bold; }


     .navbar-right  { padding-top: 1.5em; }
    /* SecondaryMenu */

    .menuSecondary  {margin-left: 0;width: 25%;max-width: 25%;min-width: 25%;border-right: 1px dotted orange;}
    .menuSecondary ul { margin-top: 1.5em;}
    .menuSecondary  li { list-style: none outside; width: 100%; text-align: right;  }   
    

  .menuSecondary { height: calc( 100vh - 420px) ;}

    
    /* BreadCrump */
    .menuBreadcrump ol {display: inline-flex;margin-left: 0em;padding-left: 0px;-webkit-margin-before: 12px;}
    .menuBreadcrump li { display: flex; margin-left: 1em;}
    .menuBreadcrump li a { color: orange; }



    .menuSecondary  li a { margin-right: 1em;}
    /* Content */
    .content-with-menu {display: flex;/* border-bottom: 54px solid white; */}
    .contentmenu-25 { width:25% ; }
    .contentMain-75 {  }
    
    .contentSecondary {
        margin-left: 3em;
        margin-right: 2em;
    }
    


    /* Links */
    .header  a:hover { color: orange; text-decoration:none; }

    .menuPrimary li.normal a { color: black; text-decoration:none; }
    .menuPrimary li.normal a:hover { color: orange; text-decoration:none; }
    .menuPrimary li.active a { font-weight: bold; color: black; text-decoration:none; }

    .menuSecondary li.normal a { color: orange; text-decoration:none; }
    .menuSecondary li.normal a:hover { color: black; text-decoration:none; }
    .menuSecondary li.active a { font-weight: bold; color: black; text-decoration:none; }


    .footer a  { color: white;}
    .footer a:hover  { color: white; text-decoration: underline;}
    .footer p  { color: white;}
    .footer h2  { color: white;}
    
    /* footer Geige */
    .footer-geige {position: absolute;left: 25%;top: 91px;}
    .footer-geige img {  border: 0px solid red; }


    
    /* scroll top */
    .scroll-top  {    overflow: hidden;    -webkit-transition: all .3s ease-in-out;    -o-transition: all .3s ease-in-out;    transition: all .3s ease-in-out;    z-index: 1000;    background-color: orange;    color: #fff;    bottom: 40px;    left: calc(50vw + 400px); position: fixed;    opacity: 0;    width: 3em;    height: 3em;}
    .scroll-top-visible     {  opacity: 1; }
    .css-arrow, .scroll-top .scroll-top-icon {    position: absolute;    top: 0;    left: 0;    height: 100%;    width: 100%;color: #fff;    background: url(/fileadmin/templates/ems1/images/arrow-up.png);    background-size: cover;    background-position: center;}
    
    .frame-space-before-large {    margin-top: 8em;   }
    .frame-space-after-large {    margin-bottom: 8em;   }


}

@media screen and (max-width:991px) {
    .contentMain-75 { margin-top: 40px;}
}

/* Mobiler Footer */
@media screen and ( max-width: 992px) {
    .footer {  background: #555;}
    .footer h1 {  color: white; }
    .footer h2 {  color: white; }
    .footer h3 {  color: white; }
    .footer h4 {  color: white; }
    .footer h5 {  color: white; }
    .footer h6 {  color: white; }
    .footer p  {  color: white; }
    .footer a  {  color: white; }
}

/* Hochkant Tablet, ganze Höhe */
@media screen and ( max-width: 992px) { 

    main { min-height: calc(100vh - 205px);  
   
   body {
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: medium;
    line-height: 1.42857;
    color: #f00;
    background-color: #fff;
    /* background-color: #888; */
}

}


/* Tablet Querformat - ganze breite */

@media screen and (orientation:landscape) {
.container {
    min-width: 100%;
    
}
.header { border-top-left-radius: 0px;border-top-right-radius: 0px; }
.footer { border-bottom-left-radius: 0px;border-bottom-right-radius: 0px; }

}


@media  (min-width: 992px) {
    /* Breiten */
    .header {max-width: 920px; }
    .main   {margin-bottom: 0px;}
    .footer { max-width: 920px; }
    .container {max-width: 920px; }
}
@media  (min-width: 1200px) {
    /* Breiten */
    .header {max-width: 920px; }
    .main   {margin-bottom: 0px;}
    .footer { max-width: 920px; }
    .container {max-width: 920px; }
}