/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}


/* cormorant-garamond-300 - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/cormorant-garamond-v16-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/cormorant-garamond-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cormorant-garamond-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cormorant-garamond-v16-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cormorant-garamond-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cormorant-garamond-v16-latin-300.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}

/* cormorant-garamond-regular - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cormorant-garamond-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/cormorant-garamond-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cormorant-garamond-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cormorant-garamond-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cormorant-garamond-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cormorant-garamond-v16-latin-regular.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}

/* cormorant-garamond-600 - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/cormorant-garamond-v16-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/cormorant-garamond-v16-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cormorant-garamond-v16-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cormorant-garamond-v16-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cormorant-garamond-v16-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cormorant-garamond-v16-latin-600.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}




/* https://github.com/klml/usefulclassroomphrases */
.clear,
.cb { clear:both; }
.cl { clear:left; }
.cr { clear:right; }
.left { float:left;}
.right { float:right;}
.none { float: none !important;}
.marginleft,
img[src$='#left'], /* use blind hash as workaround if class can't set, eg markdown etc */
img.left { float:left;margin:0 5px 5px 0;}
.marginright,
img[src$='#right'],
img.right { float:right;margin:0 0 5px 5px;}
.block { display: block;}
.hidden { display: none; }
.row2 dl dt {font-weight: bold;}
@media only print, only screen and (min-width: 680px) {
    .row2 dl dt {clear: both; float: left; width: 25%;}
    .row2 dl dd {float: right; width: 75%; margin-left: 0}
}
@media print {
    .noprint {
        display:none;
    }
}
/* proportion */
body { font:normal 18px Arial, Helvetica; 
color:#204060;
background-color: #fff ;
margin: 0; padding: 0; outline: none;line-height:1.6;
    font-size: 20px;
    font-family: 'Cormorant Garamond', serif;
}
.main { background-color: #eee; padding: 3px 10px; }
.panel {margin:0 auto;padding:0 10px;max-width:1024px;}
.paneloutbreak { display: flex; align-items: center; justify-content: center; }
/* content */
a { 
    text-decoration: none;
    color: #ab6202;
}
a:hover { text-decoration: none; }
img { border: 0; max-width: 100%;}
#main ul {
    list-style:none;
    margin-left: -5px;
}
#main ul li:before {
    content: "–";
    margin-right: 10px;
}
p {
margin: 0 0 10px 30px;
max-width: 820px;
}
hr {color:#000;background-color:#000;height:1px;margin: 0 0 2px 0;}
td{vertical-align: text-top;}
select { width: 356px; }
textarea { height: 200px; }
h1,h2,h3,h4,h5{
margin:30px 0 0 30px;
max-width: 820px;}
h1 {
    font-size: 20px;
    font-weight: normal;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
}
h2 {
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 2px;
    font-weight: normal;
    margin-bottom: 45px;
}
h3,
ol li a strong {
    display:block;
    font-size: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-weight:  600 ;
    margin-bottom: 15px;
}
h4{font-size: 1.1em; font-weight: normal; }
h5{font-size: 1em; }
h6{
    font-size: 1em;
    text-transform: uppercase;
}
h1+h2 {margin-top: 2px;}
h2+h3 {margin-top: 2px;}
h3+h4 {margin-top: 2px;}
h4+h5 {margin-top: 2px;}
h5+h6 {margin-top: 2px;}
h2:before {
    content: "";
    display: block;
    width: 130px;
    padding-top: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #204060;
}
.lonley {
    font-size: 22px;
    color: #ab6202;
    text-decoration: underline;
    letter-spacing: 1px;
}
.lonley:hover {
    color: #626262;
}
/* navigation horizontal */
#navigation {
    background-image: url("/svayoga-logo.png"), url("/yoga-tempel.jpg");
    background-repeat: no-repeat  ;
    background-color:  #fff ;
    background-position: 770px 74px, 0 0 ;
    height: 200px;
    padding: 280px 0 0 135px ;
    margin-left: -10px;
    font-family: 'Roboto', sans-serif;
}
#navigation p{
    margin-left: 0;
}
#navigation ul li {
    display: inline-block;
    padding: 5px 10px 0 5px;
}
#navigation ul li ul {
    margin: 0 0 0 -5px;
    padding: 0;
    position: absolute;
}
#navigation ul li ul li {
    display: none;
    margin: 5px 0;
    padding:  0 5px;
    background-color: #fff;
     }
#navigation ul li:hover ul li {
    display: block;
}
#navigation ul li a {
    color: inherit ;
    font-style: normal;
    letter-spacing: 1px;
}
#navigation ul li a:hover { 
    color: #212121;
}
ol {
    padding: 0;
}
ol li {
    display: block;
    float: left;
    list-style-type: none;
    width: 268px;
    height: 560px;
    border: 1px solid #204060;
    margin: 0 17px 17px 0;
    padding: 0 30px;
}
ol li:nth-child(3),
ol li:nth-child(6) {
    margin: 0 0 17px 0;
}
ol li a {
    text-decoration: none;
    color: inherit;
}
ol li a img {
    float: left;
    margin-left: -30px;
    margin-bottom: 40px;
    max-width: 328px;
}
ol li a:hover {
    text-decoration: none;
}
ol li a:hover {
    color: #798ca0 ;
    opacity: 0.9;
}
.podcast ol li {
    width: 270px;
    height: 205px;
    padding-top: 15px;
    color: #fff;
    border: none;
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    background-image: url(/podcast-yoga-1.jpg)
}
.podcast ol li:hover {
    opacity: 0.2;
}
.podcast ol li:hover a {
    color: #fff;
}
.podcast ol li a {
    display: block;
    margin-top: 35px;
    font-size: 25px;
    text-decoration: none;
    text-transform: none;
    font-family: 'Cormorant Garamond', serif;
}
.podcast ol li:nth-child(2) { background-image: url(/podcast-yoga-2.jpg) }
.podcast ol li:nth-child(3) { background-image: url(/podcast-yoga-3.jpg) }
.podcast ol li:nth-child(4) { background-image: url(/podcast-yoga-4.jpg) }
.podcast ol li:nth-child(5) { background-image: url(/podcast-yoga-5.jpg) }
.podcast ol li:nth-child(6) { background-image: url(/podcast-yoga-6.jpg) }


form.contact {
    background: url('/svayoga_formular.jpg') no-repeat 0 0 transparent ;
    padding: 0 0 0px 410px;
    height: 516px;
    box-shadow: -25px 15px 5px 0px #cacaca; 
}

form.contact h4 {
    padding: 35px 0;
    font-size: 35px;
}
form.contact input,
form.contact textarea {
    font-size: 16px;
    background-color: transparent ;
    border: 1px solid #204060;
    width: 92%;
    min-width: 300px;
    max-width: 550px;
    padding: 5px 10px;
    margin: 5px 0;
    font-family: Roboto;
    color: #204060;
}
form.contact input {
    height: 26px;
} 
form.contact textarea { 
    height: 120px;
}
form.contact input[type="submit"] {
    margin-left: 355px;
    width: 100px;
    text-transform: lowercase;
    margin-right: 25px;
    float: right;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #204060;
  opacity: 1;
}
small {
    display: block;
    line-height: 20px;
    margin-top: 20px;
}

#footeroutbreak {
    background-color:#a6b3bf;
    padding-top: 25px;
    margin-top: 50px;
}
#footeroutbreak hr {
    background-color: #204060;
    border: 0px;
    height: 1px;
}
#footer div {
    float: left;
    width: 297px;
    font-family: Roboto;
    font-size: 14px;
    border-left: 1px solid #204060;
    padding: 0 20px;
    margin: 20px 0;
}
#footer div p {
    margin: 0;
}
#footer div a {
    color:#204060;
}
#footer input {
    border: 1px solid #204060;
    padding: 5px;
    background-color:#a6b3bf;
}
#footer ::placeholder {
    color:#204060;
}
#footer h6 {
    margin: 10px 0;
}
#footer #sndcld * {
    margin-right: 10px;
}
#footer #sndcld {
    height: 210px;
}
#footer #sndcld ul {
    padding: 0;
    margin-top: 130px;
}
#footer #sndcld ul li {
    list-style: none;
    display:  inline;
}
#footer img.logo {
    margin-bottom: 10px;
}

#drf-edit {
    margin-top: 90px;
}

.hmbrgicn,
#xicn {
    display: none;
}
@media only screen and (max-width: 1023px) {
    #navigation {
        background-image: url("/svayoga-logo-mobil.png"), url("/yoga-tempel.jpg");
        background-position: 165px 240px, 0 0 ;
        height: 330px;
        padding: 0;
    }
    #navlist {
        color: #fff;
        background-color: #204060;
        opacity: 0.95;
        padding: 3px 20px ;
        display: none;
        font-size: 20px;
        text-transform: uppercase;
    }
    #main ul {
        margin-left: -37px;
    }
    #navigation ul li,
    #navigation ul li ul,
    #navigation ul li ul li {
        display: inherit;
        position: relative;
    }
    #navigation ul li ul {
        margin-left: 20px;
    }
    #navigation ul li ul li {
        padding:  inherit;
        background-color: inherit;
        margin: 5px 0;
        font-size: 18px;
    }
    .hmbrgicn,
    #xicn {
        color: #fff !important;
        display: block;
        float: left;
    }
    .hmbrgicn {
        font-size: 70px;
        line-height: 70px;
    }
    #xicn {
        margin-left: -35px;
        font-size: 45px;
    }
    ol li:nth-child(3),
    ol li:nth-child(6) {
        margin: 0 17px 17px 0;
    }
    ol li:nth-child(2),
    ol li:nth-child(4) {
        margin: 0 0 17px 0;
    }
    ol li a::after {
        content: "Weiter lesen";
        color: orange;
    }
    .podcast ol li a::after {
        content: "";
    }
    h1,h2,h3,h4,h5,h6,
    p {
        margin-left:0px;
    }
    form.contact {
        background-image: url('/svayoga_formular-mobil-1024.jpg') ;
        background-color: #e4cabb;
        background-position: bottom;
        min-height: 700px;
        padding: 0 0 0px 10px;
        box-shadow: none ; 
    }
}