/*
Theme Name: Musikgymnasium Wien
Author: lco
Version: 1.0
Text Domain: mgw
*/

/*
Browser; Fonts; General
*/

.darkgray { color: #696869; }
.lightgray { color: #818387; }
.gold { color: #A89968; }
.wpdate { float: right; font-size: smaller; padding-top: 0.5em; }


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* Grid - Desktop */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }


/*
!!!! 30 DAYS TRIAL VERSION !!!!! 7.11.2018
font-family: 'Neue Haas Grotesk Display 25 Thin'
font-family: 'Neue Haas Grotesk Display 45 Light'
*/

/*
@font-face {
  font-family: palanquin;
  src: url(//www.mgw.at/wp-content/themes/mgw/fonts/palanquin/palanquin-light.ttf);
}
*/

#container {
/*  font-family: "Neue Haas Grotesk Display 45 Light", palanquin, Helvetica, Sans-Serif;*/
  font-family: Arial, sans-serif;
}

/* Main Boxes */
#header { }
#logo { }
#logo img { height: 8em; margin: auto; width: auto; display: block; }
/*
#title a { 
  color: #A89968; 
  text-decoration: none; 
  font-size: 2em; 
  margin: 0; 
  padding: 0; 
  font-family: Arial, sans-serif;
}
*/

#menu { margin: 1em 0; }

#center { color: #696869; line-height: 160%; margin: 2em 0 2em 0; }
#center a { text-decoration: none; color: #A89968; }
/* #center img { margin: 1em 0; width: auto; height: 20em; display: block; margin: auto; max-width: 100%; } */
#center p { margin: 1em 0; }
#center ul { list-style: none; padding: 0; }
#center li { padding-left: 1.2em; margin-left: 0.4em; }
#center li:before {
  content: "\f105"; 
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.2em; /* same as padding-left set on li */
  width: 1.0em; 
  color: #A89968;
  font-size: 1.2em;
}
#center img { padding: 1em 1em 1em 0;  }
.alignleft { float: left; }
.alignright { float: right; }
.aligncenter { display: block; max-width: 100%; height: auto; margin: auto; }

#center h1 { font-weight: 100; }
#center h2 { font-weight: 100; }
#center h3 { font-weight: 100; }
#center h4 { font-weight: 100; }
#center h5 { font-weight: 100; }
#center h6 { font-weight: 100; }

#postthumb img { margin: auto; max-width: 100%; width: auto; height: auto; display: block; }

#previmg { }
#previmg img { display: block; max-width: 100%; margin: auto; height: auto; padding-top: 1em; max-height: 20em;  }
#prevtitle h2 { font-size: 1.2em !important; font-weight: bold;  }
#prevarticle { border-bottom: 1px solid #333; padding-bottom: 1em; }

#maincontent textarea { width: 90%; }
#maincontent .wpcf7-submit { max-width: 20%; }
#maincontent .wpcf7-text { width: 90%; font-size: larger;}
#maincontent .wpcf7-list-item { padding: 0 0.5em; }
#maincontent input { margin-right:0.5em; }

#maincontent table { width: 90%; margin: 1em 0; border-collapse: collapse; }
#maincontent th { text-align: left; }
#maincontent td { border: 1px solid #696869; padding: 0.4em; } 
#maincontent tr:nth-child(even){background-color: #f2f2f2;}
#maincontent tr:hover { background-color: #ddd; }
#maincontent th { background-color: #A89968; color: #fff; padding: 0.4em; border: 1px solid #696869; font-weight: normal; }

#maincontent blockquote { font-style: italic; text-indent: 1em; }
#maincontent iframe { width: 100%; height: 30em; border: none; }

#footer { text-align: center; color: #fff; background: #696869; font-size: 1.1em; }
#footer a { text-decoration: none; color: #fff; }
#footer-bottom { border-top: 3px solid #818387; padding: 0.5em; font-size: 0.8em; }
.footer-top-box { padding: 2em 0 1em 0; }
.footer-top-box i { font-size: 2em; padding-bottom: 0.5em; }

#metaslider_container_617 { z-index: 1; }
#metaslider_container_617 img{ width: 100%; height: auto; display: block; }
#metaslider_container_617 ul { list-style-type: none; }

#diashow img{ display: block; margin: auto; width: 100%; padding: 1em; }

.featured { border-top: 1px solid #333; padding-bottom: 1em; }
.featured a h4{ color: #696869 !important; }
.featured img { padding: 0 1em 0 0; display: block; max-width: 100%; height: auto; }

.pagechange { text-align: center; margin: 2em 0; font-weight: bold; }
.search { width: 100%; margin-bottom: 0.5em; }


/* Mobiles */
@media only screen and (max-width: 864px) {
  [class*="col-"] {
    width: 100%;
  }
  .mobilehide { display: none; }
  #title { display: none; }
  #logo { display: none; }
  #metaslider_container_617 { display: none; }

  #mobilelogo img { max-width: 100%; display: block; height: auto; margin: auto; max-height: 4em; margin-left: 0; padding-left: 1em; }

  #center {  margin-left: 1em; }
  #center h1 { line-height: 140%; margin-top: 1em;}
  #center h2 { line-height: 140%; margin-top: 1em;}
  #center h3 { line-height: 140%; margin-top: 1em;}
  #center h4 { line-height: 140%; margin-top: 1em;}
  #center h5 { line-height: 140%; margin-top: 1em;}
  #center h6 { line-height: 140%; margin-top: 1em;}
  #center hr { margin: 3em 0; }

  #postthumb { margin: 3em 0; padding-right: 1em; }
  #maincontent { clear: both; padding-right: 1em; }
  #sidebox h3 { padding-bottom: 0.5em; }

  .wpdate { padding-right: 1em; }
  #prevtxt { padding-right: 1em; }

/* tmp!! */
  /* Dropdown Button */
  .dropbtn {
    padding: 0.4em; 
    border: none;
    background-color: #A89968;
    color: #fff;
    font-size: 0.8em;
    margin-bottom: 0.5em;
    width: 5em !important;
    text-align: center;
  }
  .dropdown { 
    position: relative; 
    display: inline-block; 
  }
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    z-index: 10;
    width: 12em;
    text-align: left;
    padding: 1em 0;
    background-color: #f2f2f2;
  }
  .dropdown-content a {
    background-color: #f2f2f2;
    text-decoration: none;
    padding: 0.5em 1em;
    display: block;
    color: #696869;
  }
  .dropdown-content li { list-style-type: none; }
  .dropdown-content a:hover { color: #A89968; font-weight: bold; }
  .dropdown:hover .dropdown-content {display: block;}
  .dropdown:hover .dropbtn {}

  .featured a h4{ font-weight: bold !important; padding-bottom: 0.5em; }
  .footer-top-center { border-left: 3px solid #818387; border-right: 3px solid #818387;  }
}

/* Desktops */
@media (min-width: 864px) {
  .row::after {
      content: "";
      clear: both;
      display: table;
  }
  [class*="col-"] {
    float: left;
  }

  #container { margin: 0 2em 1em 2em; }

  #logo img { float: right; } 
  #mobilelogo { display: none; }

  #center h1 { line-height: 140%; margin: 1em 0; font-size: 2em; }
  #center h2 { line-height: 140%; margin: 0.9em 0; font-size: 1.8em; }
  #center h3 { line-height: 140%; margin: 0.8em 0; font-size: 1.6em; }
  #center h4 { line-height: 140%; margin: 0.7em 0; font-size: 1.4em; }
  #center h5 { line-height: 140%; margin: 0.6em 0; font-size: 1.2em; }
  #center h6 { line-height: 140%; margin: 0.5em 0; font-size: 1em; }

  #postthumb img { float: left; padding: 1em 0 1em 0; }
  #prevtxt { padding-left: 2em; max-width: 60em; font-size: larger; }
  #maincontent { padding-right: 2em; }
  #sidebox { padding: 0.5em 0 2em 2em; }


  /* Dropdown Button */
  .dropbtn {
    padding: 0.4em 1.4em;
    margin-right: 1em;
    border: none;
    background-color: #A89968;
    color: #fff;
    font-size: 0.8em;
  }
  .dropdown { position: relative; display: inline-block; }
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    z-index: 10;
    width: 12em;
    text-align: left; 
    padding: 1em 0;
    background-color: #f2f2f2;
  }
  .dropdown-content a {
    background-color: #f2f2f2;
    text-decoration: none;
    padding: 0.5em 1em;
    display: block;
    color: #696869;
  }
  .dropdown-content li { list-style-type: none; }
  .dropdown-content a:hover { color: #A89968; font-weight: bold; }
  .dropdown:hover .dropdown-content {display: block;}
  .dropdown:hover .dropbtn {}

  .featexp { margin-top: -1em; }

  .footer-top-center { border-left: 3px solid #818387; border-right: 3px solid #818387;  }

  #title  { padding-top: 1.5em; }
  #title img { max-width: 50%; height: auto; margin-left: -0.4em !important; }
}

/* Large */
@media (min-width: 1280px) { 
   #container { max-width: 90%; margin: auto; margin-bottom: 1em; }
  .dropbtn { font-size: 1.1em; }

}
@media (min-width: 1920px) {
   #container { max-width: 70%; }
  .dropbtn { font-size: 1.3em; }
}

/* bugfix - ninja forms */
.wpcf7-list-item{ display: block; }