@import url('https://fonts.googleapis.com/css?family=Gudea');

/* General */
:root {
    --hightlight-color: #d4af37; /* Highlightcolor */
}
*{
    margin: 0;padding: 0;
} 
html, body{
    font-family: 'Gudea', Arial, sans-serif;
} 
.inner{
    max-width: 1040px;margin: 0pc auto;padding: 0px 20px;
}
.inner p{
    text-align: justify;
}


/* Navigation */ 
.header{width: 100%;padding: 20px 0;background: #FFF;position: fixed;top: 0;box-shadow: 0px 0px 3px #888;z-index: 12;transition: padding ease 0.5s;}    
    .boxlogo{width: 350px;float: left;}  
        .boxlogo img{height: 60px; }            
    .boxnavigation{width: 675px;float: right;}
        .boxnavigation ul{list-style: none;}
            .boxnavigation ul a{color: #666;font-weight: bold;transition: color .3s;}
                .boxnavigation ul a.active, .boxnavigation ul a:hover{color: var(--hightlight-color);}
                .boxnavigation ul a li{float: left;padding: 22px 12px;letter-spacing: 0px;font: Arial;transition: padding .3s;}  
        .navibutton{display: none;width: 80px;height: 64px;float: right;transition: 0.4s ease all;cursor: pointer;}
			.navibutton .barsbox{width: 30px;height: 28px;margin-top: 15px;display: inline-block;}
				.navibutton .barsbox .bar{width: 30px;height: 4px;background: var(--hightlight-color);display: block;margin-top: 4px;transition: 0.4s ease all;}
    /* STICKY */
    .sticky .header{padding: 5px 0;}
    .sticky .logo img{max-width: 250px;}
    .sticky .nav ul a li{padding: 12px 8px;}
    /* Toggle Mobile Nav */
    .showmobilenav .bar.one{
	   background: ;
	   -webkit-transform: translate(0, 8px) rotate(45deg);
	   transform: translate(0, 8px) rotate(45deg);}
    .showmobilenav .bar.two{
	   opacity: 0;}
    .showmobilenav .bar.three{
	   background: ;
	   -webkit-transform: translate(0, -8px) rotate(-45deg);
	   transform: translate(0, -8px) rotate(-45deg);}
@media (max-width: 1000px){
    .boxlogo{width: 100%;float: left;text-align: center;}
    .boxnavigation{width: 100%;float: left;}
        .boxnavigation ul{width: 675px;margin: 0pc auto;}
}
@media (max-width: 675px){
    .boxlogo{width: 240px;float: left;}
    .boxnavigation{width: 80px;float: right;}
    .ul-nav-desktop{display: none;}
    .navibutton{display: block;}
}
/* MobileNavigation */
.mobile_nav_overlay{position: fixed;top: 0;left: -100%;width: 100%;height: 100%;background: rgba(0,0,0,0.7);z-index: 10;}
.mobile_nav_sided{position: fixed;top: 180px;left: -100%;width: 100%;height: 100%;z-index: 11;transition: 0.3s ease left;text-align: center;}

.showmobilenav .header{box-shadow: 0px 0px 0px transparent;}
.showmobilenav .mobile_nav_overlay{left: 0;}
.showmobilenav .mobile_nav_sided{left: 0;}


.ul-nav-mobile{list-style: none;padding: 0;margin: 0;}
    .ul-nav-mobile li{padding: 10px 20px;margin: 0;}
    .ul-nav-mobile a{text-decoration: none;color: #FFF;font-weight: bold;}
        .ul-nav-mobile a.active, .ul-nav-mobile a:hover{color: var(--hightlight-color);}


/* Wrapper */
.wrapper{
    width: 100%;
    height: 350px;
    background: url(../images/LordJordanienStartbild.jpg) center;
    background-size: cover;
}
.wrapper.home{
    height: 500px;
}

/* Content */
.content{
    width: 100%;
    padding: 20px 0px;
}
    .content h1{
        color: var(--hightlight-color);text-align: center;
    }


/* Content: Home und Glossen */
.home_container, .gloss_container{
    width: 100%;
    display: inline-block;
}
    .home_container a, .gloss_container a{
        color: #000;
    }
    .home_box, .gloss_box, .grafics_box{
        float: left;
        color: #555;
        margin: 50px 1%;
        transition: all 0.3s ease;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
    }
        .home_box{
            width: 31.3%;
        }
        @media (max-width: 640px){
            .home_box{width: 98%;margin: 10px 1%;}
        }
        .gloss_box, .grafics_box{
            width: 23%;
        }
        @media (max-width: 1000px){
            .gloss_box, .grafics_box{width: 31.3%;}
        }
        @media (max-width: 640px){
            .gloss_box, .grafics_box{width: 48%;}
        }
            .home_box:hover, .gloss_box:hover{
                border-top: 1px solid #999;
                border-bottom: 1px solid #999;
                cursor: pointer;
            }
            .gloss_box:hover p{
                margin-left: -30px;
                color: var(--hightlight-color);
            }
            .home_box:hover h3{
                color: var(--hightlight-color);
            }
            .gloss_box:hover h3{
                margin-left: 30px;
                color: var(--hightlight-color);
            }
            .grafics_box:hover{
                border-top: 1px solid #999;
                border-bottom: 1px solid #999;
                cursor: zoom-in;
            }
.home_box h3, .gloss_box h3{
    padding: 15px 0 30px 0;
    font-size: 22px;
    font-weight: 200;
    text-align: center;
    transition: all 0.3s ease;
}
.home_box p, .gloss_box p{
    font-size: 15px;
    padding: 30px 0 15px 0;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* Gemälde */

.grafics_box .thumb{
    width:100%;height:150px;background-size:cover;
}
.lightbox_overlay{
    position: fixed;
    top: 0;
    left: -100%;
    transition: left 0.3s;
    width: 100%;
    height: 100%;
    z-index: 98;
    background: rgba(0,0,0,0.5);
}
.lightbox_inset{
    position: fixed;
    top: 50%;
    left: -100%;
    transition: left 0.5s;
    width: 90%;
    height: 85%;
    transform: translate(-50%, -50%);
    z-index: 99;
    background: transparent;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.showlightbox .lightbox_overlay{
    left: 0;
}
.showlightbox .lightbox_inset{
    left: 50%;
}
    .showinfo{
        width: auto;
        position: absolute;
        background: rgba(0,0,0,0.5);
        border-radius: 25px;
        transition: 0.5s ease;
        left: 50%;
        transform: translateX(-50%);
        color: #FFF;
        font-size: 16px;
        text-align: center;
        padding: 10px 20px;
        margin-top: 10px;
        cursor: pointer;
    }
        .showinfo:hover{
            background: rgba(0,0,0,0.9);
        }
        .endtext{
            display: none;
            font-size: 14px;
        }
        .showtext01 .showinfo:hover .endtext.one{display: block;}
        .showtext02 .showinfo:hover .endtext.two{display: block;}
        .showtext03 .showinfo:hover .endtext.three{display: block;}
        .showtext04 .showinfo:hover .endtext.four{display: block;}
        .showtext05 .showinfo:hover .endtext.five{display: block;}
        .showtext06 .showinfo:hover .endtext.six{display: block;}
        .showtext07 .showinfo:hover .endtext.seven{display: block;}
        .showtext08 .showinfo:hover .endtext.eight{display: block;}
        .showtext09 .showinfo:hover .endtext.nine{display: block;}
        .showtext10 .showinfo:hover .endtext.ten{display: block;}

/* Footer */
.footer{
    background: #1d2c3e;
    padding: 40px 0;
}
.footer .inner a{
    color: #DDDDDD;
}
    .footer .inner a:hover{
        color: var(--hightlight-color);
    }
.footer .inner p{
    text-align: center;
    font-family: Arial;
    color: #DDDDDD;
    font-size: 16px;
}