html {
    background-color: #e3e3e2;
    background-image: url("../Pix/BackgroundImageL.jpg?v=1");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
}
    
@media (max-width: 1000px) { html { background-image:url("../Pix/BackgroundImageM.jpg?v=1");}} 


@media (max-width: 585px) { html {background-image:none;}}

/* Hintergrund iOS-Geräte*/

html::before {
    content: ' ';
    display: block;
    background-image: url('../Pix/BackgroundImageL.jpg?v=1');
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: -10;
}

body
{
    /*background-color: #e3e3e2;*/
    margin:0px;       
    overflow-y: scroll; 
    }


*{  box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-text-size-adjust: none
}

@font-face
{
    font-family: "PTsansReg";
    src: url('../Fonts/PTS55F-webfont.eot'), 
    url('../Fonts/PTS55F-webfont.woff') format('woff');  
    }

@font-face
{
    font-family: "PTsansBold";
    src: url('../Fonts/PTS75F-webfont.eot'), 
    url('../Fonts/PTS75F-webfont.woff') format('woff');  
    }

.epresto *
{
    margin: 0px;
    padding: 0px;
    border:0px;
    background-color: transparent;
    }

.epresto.bartersite {
    width: 80%;
    max-width: 940px;
    min-width: 320px;
    margin-right: auto;
    margin-left: auto;
    font-family: PTsansReg, Arial;
    position: relative;
    top: 88px;
    overflow: hidden;
    color: #999999;
}
    

    
.epresto.bartersite main
{   
    
    min-height: 400px;
    }  
    
@media screen and (max-width: 585px) 
{
    .epresto.bartersite main
    {   
    background-color: transparent;
    } 
}      
    
.epresto.bartersite button
{
     font-family: PTsansReg,Calibri, Lucida Grande, Verdana;    
    }    

.epresto.bartersite h2
{
    font-size: 1.4em;
    font-weight: normal;
    letter-spacing: 0.02em;    
    margin-bottom: 0.2em;
    color: #333333;    
    }

.epresto.bartersite h3
{    
    font-family: PTsansBold;
    font-size: 0.8em;
    font-weight: normal;
    line-height: 1.2em;
    color: #ff6b00;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 0.9em;
    margin-bottom: 0.2em;   
    }

.epresto.bartersite p
{
    font-size: 1em;
    line-height: 1.5em;
    margin-bottom: 0.5em;    
    }

.epresto.bartersite p:last-child
{    
    margin-bottom: 0em;    
    }
    
.epresto.bartersite a
{
    color: #ff6b00;
    
    }   
    
.epresto.bartersite ul
{
    padding-left: 1.3em;
    margin-bottom:1.0em;
    }    

.epresto.bartersite section, .epresto.bartersite header
{
    background-color: #ff6b00;
    padding: 25px;    
    margin-bottom: 2px;
    }
    
.epresto.bartersite section
{
    background-color: #ffffff;    
    }   
    
        
          
/* Nachfolgende sections und header zurücksetzen  */
.epresto.bartersite section section, .epresto.bartersite section header
{
    background-color: transparent;
    padding: 0px;
    margin: 0px;    
    }
    
.epresto.bartersite section section
{
    border:0px;
    }

.mainHeaderBackground {
    background-color: #ff6b00;
    width: 100%;
    height: 80px;
    position: absolute;
    top: 0px;
    letter-spacing: 0px;
}

.epresto.bartersite header#mainHeader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
    height: 80px;
    background-color: #ff6b00;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 50;
}
    


/* Relatives Menü für mobile Devices */
@media screen and (max-width: 585px)
{
    .epresto.bartersite {
        width: 100%;
    }

    .epresto.bartersite section, .epresto.bartersite header {
        width: 95%;
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
        border-bottom: 0px;
        margin-bottom: 2px;

    }


    .epresto.bartersite section header, .epresto.bartersite section section {
        width: 100%;
    }


    .epresto.bartersite header#mainHeader {
        width: 100%;
    }
}

.epresto.bartersite header#mainHeader .banner {
    position: absolute;
    left: 28px;
    top: 20px;

}



     
@media screen and (max-width: 1240px) 
{
    .epresto.bartersite header#mainHeader .banner {
        width: 50px;
        position:static;
        margin-right: auto;
        margin-left: auto;
    }
}   


.epresto.bartersite header#mainHeader .logo {
    width: 95px;
    height: 95px;

    background-image: url(../Pix/BSR_Logo.png);
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: 95px 95px;
    outline: 4px solid #ffffff;
    cursor: pointer;
}

@media screen and (max-width: 1240px) {
    .epresto.bartersite header#mainHeader .logo {
        width: 50px;
        height: 50px;

        background-size: 50px 50px;
        outline: 2px solid #ffffff;
        background-image: url(../Pix/BSR_LogoS.png);
    }
}

.epresto.bartersite header#mainHeader h2 {

    color: #ffffff;
    width: 80%;
    max-width: 940px;
    min-width: 320px;
    margin-right: auto;
    margin-left: auto;
}


@media screen and (max-width: 1240px) {
    .epresto.bartersite header#mainHeader h2 {       
        width: auto;
        
        position: absolute;
        left: 10px;
    }
}

@media screen and (max-width: 750px) {
    .epresto.bartersite header#mainHeader h2 {
        /*display:none;*/
        max-width: 200px;
        min-width: 100px;
    }
}

@media screen and (max-width: 470px) {
    .epresto.bartersite header#mainHeader h2 {
        max-width: 130px;
        font-size: 1.0em;
    }
}

.epresto.bartersite header#mainHeader h2 a {
    color: #ffffff;
    text-decoration: none;
    border: 4px solid transparent;
}

.epresto.bartersite header#mainHeader .menuSection {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 2%;
}



.epresto.bartersite header#mainHeader .menuSection a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}



.epresto.bartersite header#mainHeader .butAdd {    
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #ffffff;
    margin-right: 0.5em;
    background-image: url(../Pix/MenueIcons.png);
    background-repeat: no-repeat;
    background-position: -0px center;
    background-size: 100px 50px;
    background-clip: content-box;
    cursor: pointer;


}  


    
@media screen and (max-width: 500px) 
{
    .epresto.bartersite header#mainHeader .butAdd
    {   
        display:none;
    }
    
}

.epresto.bartersite header#mainHeader .butAddLabel, .epresto.bartersite header#mainHeader .butEditLabel {    
    margin-right: 22px;
    padding-top: 1px;
    color: #ffffff;
    cursor: pointer;
}
    
@media screen and (max-width: 1240px) 
{
    .epresto.bartersite header#mainHeader .butAddLabel, .epresto.bartersite header#mainHeader .butEditLabel 
    {
    display:none;
    }
    
}

.epresto.bartersite header#mainHeader .butEdit {   
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #ffffff;
    margin-right: 0.5em;
    background-image: url(../Pix/MenueIcons.png);
    background-repeat: no-repeat;
    background-position: -50px center;
    background-size: 100px 50px;
    background-clip: content-box;
    cursor: pointer;
}  
    
@media screen and (max-width: 1240px) 
{
    .epresto.bartersite header#mainHeader .butEdit {
        display: none;
    }
    
}

.wrapperbutOpenMainMenu
{
    width:330px;

    }
    
@media screen and (max-width: 835px) 
{
    .wrapperbutOpenMainMenu
    {   
    width:100px;
    }
    
}

header#mainHeader button#butOpenMainMenu {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #ffffff;
    background-image: url(../Pix/Icons.png?v=1);
    background-repeat: no-repeat;
    background-position: -0px center;
    background-size: 1000px 50px;
    background-clip: content-box;
    cursor: pointer;
}
          
.epresto.bartersite header#mainHeader button#butOpenMainMenu:focus
{
    outline:0px;
    }   

.epresto.bartersite header#mainHeader label[for='butOpenMainMenu']
{
    margin-left: auto;
    padding-right:10px;
    
    color: #ff6b00; 
    font-size: 1.0em;
    font-weight: bold;
    
    cursor: pointer;
    
    }

@media screen and (max-width: 585px) 
{
    .epresto.bartersite header#mainHeader label[for='butOpenMainMenu'] { display: none; }   
    }

.epresto.bartersite nav#mainMenu {
    position: fixed;
    width: 300px;
    right: -300px;
    top: 15px;
    padding-top: 0px;
    min-height: 445px;
    background-color: transparent;
    border-radius: 22px;
    z-index: 100;
    transition: right 0.2s;
    overflow: hidden;
}



.epresto.bartersite nav#mainMenu.open {    
    right: 2%;    
    transition: right 0.2s;
}

.epresto.bartersite nav#mainMenu a#butCloseMainMenu {
    background: url(../Pix/MainMenuCloseIcon.png);
    background-position: calc(100% - 10px) center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    cursor: pointer;
    padding-top: 18px;
}



.epresto.bartersite nav#mainMenu a, .epresto.bartersite nav#mainMenu a#butCloseMainMenu {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #ffffff;
    font-size: 1em;
    color: #ffffff;
    background-color: #666666;
    text-decoration: none;
}


     
@media screen and (max-width: 585px)
{
    .epresto.bartersite h2
        {
        font-size: 1.2em;   
        }
    
    }


.epresto.bartersite header#pageHeader {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
   
}
        
@media screen and (max-width: 585px) 
{
    .epresto.bartersite header#pageHeader{border-bottom: 0px;  margin-bottom: 2px; }
    
    }          
        
        
.epresto.bartersite header#pageHeader h1
{
    color: #ff6b00;
    font-weight: normal;
    }        

@media screen and (max-width: 585px) 
{
    .epresto.bartersite header#pageHeader h1{ font-size: 1.5em; }
    
    }  

.epresto.bartersite section.stepline
{
                 
    display: flex;        
    flex-wrap: wrap;
    
    display: -webkit-flex;        
    -webkit-flex-wrap: wrap;                
    }    
    
.epresto.bartersite section.stepline div.step
{
    flex: 1 1 1em;
    -webkit-flex: 1 1 1em;
    
    margin-right:5px;
    padding: 8px;    
    border-radius: 3px;
    
    background-image:url(../Pix/SteplineStepIcon.png);
    background-position: calc(100% - 10px) center;    
    background-repeat: no-repeat;    
    background-size:13px 20px;
    background-color: #717171;
    
    color: #ffffff;
    font-size: 0.9em;
    }

.epresto.bartersite section.stepline div.step.active
{
    background-color: #ff6b00;    
    }

.epresto.bartersite section.stepline div.step:last-child
{
    margin-right:0px;
    background-image: none;     
    }
    


 
@media screen and (max-width: 585px) 
{
    .epresto.bartersite section.stepline{display: block;}
    .epresto.bartersite section.stepline div.step
    {
        flex: none; 
        -webkit-flex: none;
        display: block;
        margin:0px;
        margin-bottom:2px;
        padding: 0px 4px 0px 4px;
        
        border-radius: 0px;        
        background-image: none;
        background-color: #717171;
        
        
        color: #ffffff;                      
    }
    
    .epresto.bartersite section.stepline div.step:first-child
    {
        border-radius: 3px 3px 0px 0px;
        }
        
    .epresto.bartersite section.stepline div.step:last-child
    {
        border-radius: 0px 0px 3px 3px;
        }        
        
        
    
    .epresto.bartersite section.stepline div.step.active
    {
        
        background-color: #ff6b00;
        }
    
    .epresto.bartersite section.stepline div.step:nth-child(1):before{ content: "1. Schritt: "; }
    .epresto.bartersite section.stepline div.step:nth-child(2):before{ content: "2. Schritt: "; }
    .epresto.bartersite section.stepline div.step:nth-child(3):before{ content: "3. Schritt: "; }
    .epresto.bartersite section.stepline div.step:nth-child(4):before{ content: "4. Schritt: "; }
            
}   
    
.epresto.bartersite section div.tiles
{
    width: calc(100% + 5px); /* gleicht margin-right aus */
    
    display: flex;
    display: -webkit-flex;
    
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
        
    margin-top: 8px;
    margin-bottom: 5px;
        
    }

.epresto.bartersite section div.tiles button.tile
{
    
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    display: block;
    
    background-color: #ff6b00;
    min-width: 200px;
    max-width: calc(50% - 5px);
    min-height: 75px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
    
    color: #ffffff;
    padding: 5px;
    padding-left: 50px;
    padding-right: 10px;
    background-image: url(../Pix/TileIconStandard.png);
    background-size:50px 50px;
    background-repeat: no-repeat;
    background-position: 0px center;
           
    align-items: center;
    -webkit-align-items: center;
    
    cursor: pointer;    
    
    text-align: left;
    font-size: 1.2em;    
    
    }
 
.epresto.bartersite section div.tiles button.tile:focus
{
    outline: 0px;   
    }   

.epresto.bartersite section div.tiles button.tile p
{
    line-height: normal;
    margin: 0px;   
    }
    
.epresto.bartersite section div.tiles button.tile p:nth-child(2)
{
    font-size: 0.7em;
    line-height: normal;   
    
    }    

@media screen and (max-width: 585px) 
{
    .epresto.bartersite section div.tiles button.tile
    {
        max-width: 100%;
        
        }
    
    } 
    
.epresto.bartersite div.message 
{
           
    background-position: 21px 21px;
    background-repeat: no-repeat;
        
    color: #ffffff;
    
    
    min-height: 200px;
    
    padding: 20px;
    padding-top: 85px;
    margin-bottom: 10px;
    }     
    
.epresto.bartersite div.message h2
{
    font-size: 1.8em;
    margin-bottom: 0.6em;
    color: #ffffff;
    }
    
.epresto.bartersite div.message p
{
    
    margin-bottom: 0em;
    }        

.epresto.bartersite div.message b
{
    font-weight: bold;    
    }

.epresto.bartersite div.message.information 
{
    background-image: url(../Pix/MessageInformationIcon.png);
    background-color: #99c25c;
    background-size:50px 50px; 
    }
    
.epresto.bartersite div.message.warning
{  
    background-image: url(../Pix/MessageErrorIcon.png);   
    background-color: #ffc15c;  
    background-size:50px 50px;
}    
    
.epresto.bartersite div.message.error 
{  
    background-image: url(../Pix/MessageErrorIcon.png);   
    background-color: #e50041;  
    background-size:50px 50px;
}

.epresto.bartersite footer#mainFooter
{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    
    background-color: transparent;
    
    display: flex;
    display: -webkit-flex;
    /*
    justify-content: space-between;
    -webkit-justify-content: space-between;
    */
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    
    align-items: center;
    -webkit-align-items: center;
    
    }

.epresto.bartersite footer#mainFooter a {
    color: #373737;
}

@media screen and (max-width: 585px) {
    .epresto.bartersite footer#mainFooter {
        width: 95%;
        padding: 0px;
        margin-left: auto;
        margin-right: auto;
        font-size: 0.9em;
    }
}

    .epresto.bartersite div.sandglass.panel
{
    
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
        
    display: flex;
    display: -webkit-flex;
    
    justify-content: center;
    -webkit-justify-content: center;
    
    align-items: center;
    -webkit-align-items: center;
    
    }

.epresto.bartersite div.sandglass.panel div.sandglass.icon
{
    width: 70px;
    height: 70px;
            
    background-image: url(../Pix/Sandglass.png);
    background-repeat:no-repeat;
    background-position: center center;     
        
    animation: sandglassSpin 1s linear infinite;
    -webkit-animation: sandglassSpin 1s linear infinite;                       
    }                
    
    @-webkit-keyframes sandglassSpin { 100% { -webkit-transform:rotate(360deg); } }
    @keyframes sandglassSpin { 100% { transform:rotate(360deg); } 
}

.epresto.bartersite img#logoEprestoBartersite
{
    width: 200px;
    height: auto;
    margin: 10px 0px 10px 0px;
    }


.epresto.bartersite div.signature
{
    display: flex;
    display: -webkit-flex;
    
    
    
    margin: 10px 0px 10px 0px;
        
    }
    
.epresto.bartersite div.signature div
{
    min-width: 70px;
    }  
              
.epresto.bartersite div.signature a
{
    color: #999999;
    text-decoration: none;
    }    
    
.epresto.bartersite div.signature img.logo
{
    
    
    width: 60px;
    height: 60px;
    margin-right: 10px;
    }

.epresto.bartersite .logoGruenOrange {
    width: 185px;
    height: auto;
    margin-bottom: 0.8em;
}