/* Template for YVA © meandmyself */


html 
{
   height:			100%;
}


body
{
   height:			100%;
   margin:			0px;
   padding:			0px;
   font-family:		'Roboto', sans-serif;
   font-weight:		300;
   font-size:		17px;
   color:			#000000;
   line-height:		160%;
   letter-spacing:	0.02em;
}



#system-message { margin: 0px; }
img { height: auto; max-width: 100%; vertical-align: middle; border: 0px; }


#col-left { padding: 20px; position: fixed; width: 100%; box-sizing: border-box; z-index: 9998; background: #ffffff; -webkit-box-shadow: 1px 0px 20px 0px rgba(0,0,0,0.2); box-shadow: 1px 0px 20px 0px rgba(0,0,0,0.2); }

#logo { width: 100px; transition: .3s ease-out; }
#logo p { margin: 0px; }

.shrink #logo { width: 70px; }

#menu { display: none; }



.filter { margin: 40px 0px 40px 0px !important; }



#icons { position: fixed; top: 90px; right: 20px; z-index: 9999; transition: .3s ease-out; }
#icons p { margin: 0px; }

#icons.shrink { top: 60px; }

.socialmedia { float: left; width: 30px; margin: 0px 0px 0px 8px; }
.st0 { fill: #000000; transition: .5s ease-out; }

#showbox { display: none; }
#showbox-mobile { padding: 140px 0px 0px 0px; }
#showbox-mobile img { min-width: 100%; }
#showbox img { min-width: 100%; }


#zumausblenden { padding: 20px 20px 20px 20px; }

#text a { color: #e6007e; font-weight: 500; }

#text ul { margin: 0px 0px 10px 0px; padding: 0px; }
#text li { margin: 0px; padding: 5px 0px 5px 0px; line-height: 160%; list-style: none; border-bottom: 1px solid #000000; }


.uk-scope .uk-accordion li { border: 0px !important; padding: 0px !important; }
.uk-scope .uk-accordion-content { margin-top: 10px; }
.uk-scope .uk-accordion-content li { border-bottom: 0px solid #c6c7c8 !important; padding: 0px 0px 5px 18px !important; background: url(../images/list.png) no-repeat scroll 0 10px; background-size: 6px 6px; }

.uk-scope .uk-accordion-title { color: #000000 !important; padding: 10px 0px !important; transition: 0.2s ease-out color; border-bottom: 1px solid #000000; }
.uk-scope .uk-accordion-title:hover { color: #e6007e !important; }
.uk-scope .uk-open .uk-accordion-title { color: #e6007e !important; }

.uk-scope .uk-accordion-title::before { background: url(../images/open.png) no-repeat scroll right center; background-size: 15px 15px; }
.uk-scope .uk-open .uk-accordion-title::before { background: url(../images/close.png) no-repeat scroll right center; background-size: 15px 3px; }


.aufklappbild { width: 50px; padding: 0px 20px 0px 0px; margin: -5px 0px 0px 0px; }


.uk-scope .uk-h3, .uk-scope h3 { margin: 0px 0px 10px 0px; padding: 0px; font-size: 20px; line-height: 130%; font-weight: 400; letter-spacing: 0.02em; font-family: 'Yeseva One', cursive; }


#footer { background: #000000; color: #ffffff; padding: 20px 20px 0px 20px; }
#footer ul { margin: 0px; padding: 0px; }
#footer li { margin: 0px; padding: 0px; line-height: 160%; list-style: none; }

#footer a { color: #ffffff; }
#submenu { background: #000000; padding: 20px; }






h1 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 27px; line-height: 130%; font-weight: 400; letter-spacing: 0.02em; color: #e6007e; font-family: 'Yeseva One', cursive; }
h2 { margin: 0px 0px 10px 0px; padding: 0px; font-size: 20px; line-height: 130%; font-weight: 400; letter-spacing: 0.02em; font-family: 'Yeseva One', cursive; }
h3 { margin: 0px 0px 10px 0px; padding: 20px 0px 0px 0px; font-size: 22px; line-height: 130%; font-weight: 400; letter-spacing: 0em; font-family: 'Yeseva One', cursive; color: #e6007e; }



a { text-decoration: none; outline: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; outline: none; }

figure { margin: 0px; padding: 0px; }

p { margin: 0px 0px 10px 0px; }
.clear { line-height: 0; }


table { margin: 0px 0px 10px 0px; }

hr { border: 0px; border-bottom: 1px solid #000000; margin: 0px 0px 40px 0px; padding: 30px 0px 0px 0px; }






@media(min-width:500px)
{
    #zumausblenden { padding: 30px 50px 50px 50px; }

    #footer { padding: 30px 30px 0px 30px; }
    #submenu { padding: 30px; }

    h1 { margin: 0px 0px 30px 0px; font-size: 38px; }
    h2 { font-size: 22px; }
}







@media(min-width:800px)
{
    #col-left { bottom: 0; top: 0; width: 250px; padding: 50px; }
    
    #showbox-mobile { padding: 0px; }
    
    
    #logo { width: 150px; }
    .shrink #logo { width: 150px; }

    #icons { position: absolute; background: none; right: 25px; top: 25px; }
    .shrink #icons { top: 25px; }
    
    .socialmedia { margin: 0px 0px 0px 10px; width: 35px; }

    #zumausblenden { padding: 30px 50px 50px 50px; }
    
    
    #menu { display: block; padding: 112px 0px 0px 0px; }
    #menu-small { display: none; }

    #submenu { position: fixed; bottom: 50px; margin: 0px 0px 0px 50px; z-index: 9999; background: none; padding: 0px; }
    #footer { padding: 30px 30px 30px 300px; }

    #col-right { margin: 0px 0px 0px 250px; }

}




@media(min-width:1400px)
{
    #showbox-mobile { display: none; }
    #showbox { display: block; position: fixed; z-index: -999; height: 100%; width: 100%; }

    #icons { position: absolute; right: 50px; top: 50px; }

    #zumausblenden { position: absolute; width: 700px; padding: 230px 50px 50px 50px; background: rgb(255,255,255,.8); border-right: 2px solid #ffffff; box-sizing: border-box; min-height: 100%; }
    
    #hide { width: 30px; height: 30px; position: absolute; left: 300px; top: 60px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; }
    #hide span { display: block; position: absolute; height: 2px; width: 100%; background: #000000; border-radius: 0px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }

    #hide span:nth-child(1) { top: 10px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
    #hide span:nth-child(2),#hide span:nth-child(3) { top: 10px; }
    #hide span:nth-child(4) { top: 20px; width: 20px; }
    #hide.open span:nth-child(1) { top: 10px; width: 0%; left: 50%; }
    #hide.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
    #hide.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
    #hide.open span:nth-child(4) { top: 10px; width: 0%; left: 50%; }


    .uk-scope .referenzueb.uk-grid { margin-left: 0px;}
    .uk-scope .referenzueb p { margin: 0px; }
    .referenzueb .uk-first-column { padding: 0px 0px 30px 0px; border-bottom: 1px solid #bebebe;}

    .uk-first-column .uk-grid { margin-left: 0px; }
    .referenzueb .uk-first-column .uk-panel .uk-grid .uk-first-column { padding: 0px; border-bottom: 0px solid #bebebe;}
    .referenzueb .uk-grid-margin { padding: 30px 0px; border-bottom: 1px solid #bebebe;}
    .referenzueb .uk-grid-margin:first-child { border-top: 1px solid #bebebe;}
    .referenzueb .uk-grid-margin:last-child { padding: 30px 0px 0px 0px; border-bottom: 0px solid #bebebe;}


    footer { position: fixed; border: 5px solid #000000; right: 50px; bottom: 0; width: 360px; height: 180px; border-radius: 180px 180px 0px 0px; padding: 5px; box-sizing: border-box; border-bottom: 0; }
    #footer { padding: 40px 0px 0px 0px; width: 340px; height: 170px; text-align: center; border-radius: 170px 170px 0px 0px; box-sizing: border-box; }
}