/*    CSS Document                         */
/*    Author: Juerg Buettiker              */
/*    Created Date: 2022-04-30             */
/*    Project: Tantric-Yoga.ch             */


/* -------------------------------------*/
/* -------->>> TYPOGRAPHY <<<-----------*/
/* -------------------------------------*/


h1 {
    font-family:Times New Roman, Times, serif;
    text-align:center;
    font-size:40px;
    font-style:italic;
    color:#5C2037;
    background-color:#F5F9F2;
    margin-bottom:10px;
}

hr
{
    height:2px;
    border-top:solid 2px #666666;
    border-bottom:solid 1px #CCCCCC; 
    border-right:0px;
    border-left:0px;   
    }

h2 {
    font-family:Times New Roman, Times, serif;
    font-size:28px;
    font-style:italic;
    text-transform:none;
    color:#999999;
    background-color:#F5F9F2;    
}
    
h3 {
    font-family:Verdana,Geneva,Arial,Helvetica,Sans-Serif;    
    font-size:20px;
    color:#999999;
    background-color:#F5F9F2;    
    }        
    
h4 {
    font-family:Verdana,Geneva,Arial,Helvetica,Sans-Serif;
    font-size:16px;
    font-weight:bold;
    color:#666666;
    background-color:#F5F9F2;
    } 
    
h5 {
    font-family:Arial,Helvetica,Sans-Serif;
    font-size:15px;
    font-weight:bold;
    color:#333333;
    background-color:#F5F9F2;
    }

h6 {
    font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif;
    font-size: 13px;
    font-weight: bold;
    color: #666666;
    background-color: #F5F9F2;
    margin-bottom:0px;
}


a:link {
    color:#666699;    
}
a:hover {
    color:#FFCC33;    
}

a:visited {
    color:#8F254A;    
}

/* -------------------------------------*/
/* ------>>> Print Version <<<----------*/
/* -------------------------------------*/

@media print {

    .logo {
        display: none;
    }
    .logopnt {
        display: block;
    }
}

@media screen {

    .logo {
        display: block;
    }

    .logopnt {
        display: none;
    }
}


/* -------------------------------------*/
/* ---------->>> GLOBAL <<<-------------*/
/* -------------------------------------*/

/* Background picture width: 2380px     */
/* Website width fixed: 980px           */


body {
    font-family:Verdana,Geneva,Arial,Helvetica,Sans-Serif;
    font-size:13px;
    color:#666666;
    text-align:left;
    margin:0px auto;      /* alignment: center */
    background-position:top center;        
    }

figure {
    margin:0px;
}

#wrapper {
    width:980px;
    margin:0 auto;
    border:none;    
    color:#666666;
    background-color:#F5F9F2;
}


img 
{
    border:0px;
    }

.nobr {
	white-space:nowrap;
}

/* Evtl. Loeschen
.noliunderl {
    text-decoration:none;
}
 End Evtl. Loeschen */

/* -----------------------------------*/
/* ---------->>> HEADER <<<-----------*/
/* -----------------------------------*/


#header {
    font-family: Arial,Helvetica,Sans-Serif;
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    background-color: #8F254A;
    text-align: right;
    /*  ->->-> hier weiter arbeiten*/
    width: 980px;
    height: 100px;
    border: none;    
}

#logo {
    position:absolute;
    margin-top:-100px; 
    width:217px; 
    height:93px; 
    padding-top:10px;
    padding-left:32px;
    z-index:1;
}

.logo
{
    width:217px;
    height:93px;    
    }

#navtop {
    width:920px;
    height:84px;
    padding-top:10px;
    padding-left:30px;
    padding-right:30px;    
}



/* -----------------------------------*/
/* ---->>> NAVTOP  TYPOGRAPHY <<<-----*/
/* -----------------------------------*/


#navtop {
    font-family:Arial,Helvetica,Sans-Serif;
    text-transform:uppercase;
    font-size:15px;
    font-weight:bold;
}

#navtop li {
    display:inline-blocK;
    padding-left:10px;
    padding-bottom:5px;
    padding-top:5px;
    }      

#navtop ul {
    list-style:none;
    margin:0px;
    padding:0px;       
    }


/* SUBMENUE  */

#navtop ul li:hover ul {
    display: block;    
    background-color:blue;                  
}

#navtop ul li ul {
    font-size:13px;
    font-weight:normal;
    text-transform:none;
    text-align:left;
    position:absolute;
    width:170px; /* dropdown menue: default width*/
    margin-left:-5px;
    display:none;
                   
}

 #navtop li li {
    background:#5C2037;
    display: block;
}

 #navtop li li a {
    display: block !important;
}

 #navtop ul li ul li:hover {
    background: #eeeeee;
}

/* SUBMENUE */
    

#navtop a:link, #navtop a:visited
{
    color:#ffffff;
    text-decoration:none;    
    }  
    
#navtop a:hover
{
    color:#FF9900;
    text-decoration:underline;
    }     


/* -----------------------------------*/
/* ---------->>> CONTENT <<<----------*/
/* -----------------------------------*/

#toppic {
    color:#ffffff;
    background-color:#cccccc;    
    width:980px;
    height:375px;
    margin:0px;
    color:White;

}


#toppictext h3 {
    color:#ffffff;
    font-weight:bold;
    background-color:inherit;  
    font-family:'Times New Roman', Times, serif;
    font-size:24px;
    font-style:italic;
}

#toppictext {
    font-family:'Times New Roman', Times, serif;
    font-size:24px;
    font-style:italic;
    /* color defined in toppic, because pic transparency */
    width:500px; 
    margin-top:65px;
    margin-left:65px;
    position:absolute; 
    z-index:2;    
}

#toppichint {
    font-family:Arial,Helvetica,Sans-Serif;
    font-size:15px;
    margin-left:10px;
    position:absolute; 
    top:455px;    
    z-index:1;    
}

.topimg {
    width:980px;
    height:378px;
}


#content {
    width:920px;
    min-height:500px;
    margin:0 auto; 
    border:none;
    padding:0px 30px 30px 30px;
    background-color:#F5F9F2;
}


/* -----------------------------------*/
/* -->>> CONTENT: COLUMN BLOCK  <<<---*/
/* -----------------------------------*/

.column2 {
    
    column-count: 2;    
}

.column3 {
    column-count: 3;    
}

.column2, .column3 {
    width: 920px;
    column-gap: 40px;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

.column2 h2, .column3 h2, .column2 h3, .column3 h3 {
    column-span: all;
    text-align:left;    
}

    .column2 h4, .column3 h4, .column2 h5, .column3 h5 {
        break-after:avoid;
        text-align: left;
    }

.hyphenation {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* -----------------------------------*/
/* ---->>> CONTENT: TOP LINKS  <<<----*/
/* -----------------------------------*/

#toplinks {
    width:980px;
    height:90px;
    margin-top:40px;
    margin-left:-30px;
    margin-bottom:60px;
    padding-top:20px;
    background-color:#eeeeee;
}

#toplink1 {
    margin-left:130px;
    float:left;
}

#toplinkicon1 {
    width:50px;
    height:50px;
    float:left;
}

#toplinktext1, #toplinktext2, #toplinktext3 {
    font-family:Arial,Helvetica,Sans-Serif;
    font-size:11px;
    width:130px;
    margin-left:15px;
    float:left;    
}

#toplink2 {
    margin-left:70px;
    float:left;
}

#toplinkicon2 {
    width:50px;
    height:50px;
    float:left;      
}

#toplink3 {
    margin-left:70px;
    float:left;
}

#toplinkicon3 {
    width:50px;
    height:50px;
    float:left;
}

.toplinkimg {
    width:50px;
    height:50px;
}

.toplinktext a:link, .toplinktext a:visited {
    color:#666666;
    background-color:#eeeeee;
    text-decoration:none;
}

.toplinktext a:hover {
    color:#FFCC33; 
    background-color:#eeeeee;
}


/* -----------------------------------*/
/* ----->>> CONTENT: MAINPiC  <<<-----*/
/* -----------------------------------*/


/* Loeschen? 
#mainpic {
    width: 920px;    
}
*/

#mainpic1, #mainpic2, #mainpic3, #mainpic4 {
    width: 220px;
    margin-right: 13px;
    text-align: justify;
    float: left;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

#mainpic4 {
    margin-right:0px;
}

.mainpic {
    width: 220px;
    height: 194px;
    margin-bottom: 6px;
}

.mainpic:hover {
    opacity: 0.7;
}

.mainpiclink a:link, .mainpiclink a:visited {
    color:#666666;
    background-color:#F5F9F2;
    text-decoration:none;    
}


/* -----------------------------------*/
/* ----->>> CONTENT: MAIN  <<<-----*/
/* -----------------------------------*/


#maincontent{
    clear:both; 
    width:920px; 
    padding-top:0px;
    
}

.basisprhead a:link, .basisprhead a:visited {
    color: #333333;
    background-color: #F5F9F2;
    text-decoration: none;
}

.basisprhead a:hover {
    color: #FFCC33;
    background-color: #F5F9F2;
}


.basisprtext a:link, .basisprtext a:visited {
    color: #666666;
    background-color: #F5F9F2;
    text-decoration: none;
}

.basisprtext a:hover {
    color: #FFCC33;
    background-color: #F5F9F2;
}



/* -----------------------------------*/
/* ---------->>> FOOTER <<<-----------*/
/* -----------------------------------*/
#footernav a:link, #footernav a:visited {
    color: #999999;
    text-decoration: none;
}

#footernav a:hover
{
    color:#FF9900;
    text-decoration:underline;
    }     
 

#footernav {
    font-size:15px;
    color:#999999;
    width:980px;
    min-height:160px;
    margin:0px;
    background-color:#eeeeee;
}

.footernav {
    font-weight:bold;
    text-transform:uppercase;
}

#footernav1, #footernav2, #footernav3, #footernav4, #footernav5 {
    text-align:center;
    margin-left:50px;
    margin-top:32px;
    float:left;

}


#footer {
    font-family:Arial,Helvetica,Sans-Serif;
    font-size:12px;
    width:920px;
    min-height:230px;
    margin:0px;
    padding:40px 30px 30px 30px;
    color:#999999;
    background-color:#5C2037;
}

#nutzung, #gewinn, #organisation {
    width:200px;
    float:left;
    margin-right:50px;
}

#kontakt {
    width:170px;
    float:left;    
}

.nutzungimg {
    width:30px;
    height:33px;
    float:left;
    margin-right:8px;
}
 
#footer h5 {
    color:#ffffff;
    background-color:#5C2037;
    margin-top:0px;    
}

#footer h6 {
    color:#cccccc;
    background-color:#5C2037;
    font-weight:bold;
    margin-top:0px;
    margin-bottom:0px;
}


#footer ul {
    list-style:disc;
    margin-left:12px;
    margin-bottom:-12px;
    padding:0px;        
    }

#footer li {
    padding-left:0px;
} 

#footer a:visited {
    color:#999966;
    background-color:#5C2037;
}

#footer hr {
    color:#666666;   
    border-top:solid 1px #666666;
    border-bottom:none; 
    margin-bottom:30px;
    }

#bookmarks {
    text-align:center;  
    width:920px;
    margin-bottom:60px;
}

#bookmarks ul {
    list-style:none;
    margin:0px;
    padding:0px;   
}

#bookmarks li {
    display:inline-block;
    padding-right:30px;    
}  

#footerlinks {
    clear:both; 
    padding-top:30px;     
}

#footerlinks a:link {
    color:#999999;
    background-color:#5C2037;
}

#footerlinks a:hover {
    color:#FFCC33;    
    background-color:#5C2037
}

#footerlinks a:visited {
    color: #999966;
    background-color: #5C2037;
}

.icon {
    width:16px;
    height:16px;
    float:left;
    margin-right:8px;
    margin-top:-2px;
}

.w3c, .spende, .sitemap {
    width:80px;
    height:15px;
    float:left;
    padding-top:1px;
    margin-right:8px;
    
}

.spende {
    width:25px;
}

.sitemap {
    width:16px;
    height:16px;
}

#copy {
    font-size:11px;
    text-align:center;
    clear:both;
    width:920px;
    padding-top:0px;
 
}

/* -----------------------------------*/
/* --->>> TABLE BASISPROGRAMM <<<-----*/
/* -----------------------------------*/

#basisprogram table {
    width: 920px;
}

#basisprogram a:link  {
    color: #666666;
}

#basisprogram a:hover {
    color: #FFCC33;
}

#basisprogram thead {
    font-weight: bold;
    color: white;
}

#basisprogram thead td {
    background-color: #A5516E;
    }

#basisprogram tr:nth-child(odd) {
    background-color: #cccccc;
}

#basisprogram tr:nth-child(even) {
    background-color: #E5E5E5;
}

#basisprogram td {
    padding: 6px;
}

#basisprogram .phasechk {
    text-align: center;
}

.iconasanas {
    width: 50px;
    height: 50px;
}

.iconchk {
    width:24px;
    height:24px;
}

.tblsubtitle {
    font-size:16px;
}

/* -------------------------------------*/
/* -------->> PagePreview <<<-----------*/
/* -------------------------------------*/

.pageprev {
    width: 400px;
    height: 400px;
    position: absolute;
    margin-top: 15px;
    margin-left: -400px;
    border: 1px solid #cccccc;
    visibility:hidden;    
}

/* -------------------------------------*/
/* ------->> ImgPopUpLayer <<<----------*/
/* -------------------------------------*/

.imgpopup {
    cursor: pointer;
    transition: 0.3s;
}

    .imgpopup:hover {
        opacity: 0.7;
    }

/* The PopUpLayer (background) */
.popuplayer {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* PopUpLayer Content (image) */
.popuplayer-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 980px;
}

/* Caption of PopUpLayer Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 980px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
    font-size: 20px;
    font-weight: bold;
}

/* Add Animation */
.popuplayer-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 980px) {
    .modal-content {
        width: 100%;
    }
}

/* -------------------------------------*/
/* ------>>> SLIDESHOW GALLERY <<<------*/
/* -------------------------------------*/

/* Position the image container (needed to position the left and right arrows) */
.container {
    position: relative;
    width: 920px;
    height: 322px;
}

/* Hide the images by default */
.mySlides {
    clear:both;
    display: none;
    margin: 0px;
}

/* Picture figcaption */
.slidecaption {
    text-align: center;
    background-color: #222;
    color: white;
    padding: 10px 16px;
    margin-top: -4px;
}

/* Number text (1/3 etc) */
.numbertext {
    position: absolute;
    margin-top: -32px;
    text-align: right;
    color: white;
    width: 916px;
    height: 33px;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
    cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

.row:after {
    content: "";
    display: table;
    clear: both;
}

/* SLIDESHOW GALLERY Six columns side by side */
.column {
    float: left;
    width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
    opacity: 0.6;
}

    .active,
    .demo:hover {
        opacity: 1;
    }