:root {
    --customer-primary-color: #390;
    --customer-secondary-color: #999;
    --gray-light: #f5f5f5;
    --gray-medium: #d5d5d5;
    --gray-dark: #444;
    --background-lightest: #fff;
    --customer-080-color: #5f5f61;
    --customer-060-color: #808080;
    --customer-040-color: #bababa;
    --customer-020-color: #f7f7f7;
    --customer-000-color: #fff;

    --customer-primary-darker: #21480e;

    --main-background: var(--background-lightest);
    --content-background: var(--gray-light);
    --header-background: var(--background-lightest);
    --footer-background: var(--customer-primary-color);
    --footer-txt: var(--customer-000-color);

    --department-txt: var(--customer-000-color);
    --department-bkg: var(--customer-primary-color);

    --department-txt-hover: var(--gray-dark);
    --department-bkg-hover: var(--customer-primary-color);

}

html,
body {
    background-color: var(--main-background);
    color: var(--gray-dark);
    font-family: 'Nunito', sans-serif; /* AKRB change to Default */
    font-weight: 200;
    height: 100vh;
    margin: 0;
}

/* all Optima Font styles here */
p,
h1,
h2,
h3,
h4,
.site-title,
.page-title,
.info-session,
#page-footer{
	font-family: "Optima",Arial,sans-serif;
}

a{
    color: var(--customer-primary-color);
}
a:visited{
    color: var(--customer-primary-darker);
}

#page-footer a{
    color: var(--footer-txt);
    align-self: center;
    flex-basis: 100%;
    margin: 0.3rem 1rem;
}

h1{
font-size: 2.2rem;
    font-weight: 900;
}

.logo-box{
    margin: 0;
    padding: 0;
}

img.logo{
    max-height: 5rem;
    max-width: 8rem;
    padding-bottom: 0.5rem;
}

img.logo.campus02{

}

img.logo.fhwien{

}

img.logo.wifi{

}

.full-height {
    height: 100vh;
}

.pagewrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.page-header-wrapper{
    background: var(--header-background);
}

.top-header {

}

#page-footer{
    background: var(--footer-background);
    color: var(--footer-txt);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 2.4rem;
    flex-wrap: wrap;
}

.page-footer-links{
    margin-left: 2rem;
}

.home-link{
    width: 1.5rem;
    height: 1.5rem;
}

.welcome-left img,
.wifi-front-picture{
    width: 100%;
}

.webinar-wrapper{
    background: var(--background-lightest);
    border-bottom: 2px solid var(--gray-medium);
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

.position-ref {
    position: relative;
}

.top-right {
    position: absolute;
    right: 10px;
    top: 18px;
}

.content {
    text-align: center;
}

.title {
    font-size: 48px;
}

.subtitle {
    font-size: 32px;
}

.links > a {
    color: #636b6f;
    padding: 0 25px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;
}

.m-b-md {
    margin-bottom: 30px;
}

.logo-wrapper .logo-img{
    width: 4rem;
}

/******* Info-Sessions *******/

.info-session{
    background-color: var(--customer-primary-color);
    border-radius: 0.2rem;
    color: var(--customer-000-color);
    margin: 0.5rem 2rem;
    padding: 0.4rem;
}

.info-session-time{
}

.info-session-title{
    text-align: left;
}

.info-session-leader{
    text-align: left;
}

.info-session-link{
    background-color: #999;
    margin: 0.3rem;
    padding: 0.3rem;
    border-radius: 0.4rem;
}

.info-session-title-main{
    font-weight: 900;
}

/* .welcome-header .row, */
/* .row, */
/* .container-fluid {

    padding-left: 0;
    padding-right: 0;
} */

.row.small{
    padding-left: 15px;
    padding-right: 15px;
}

.pagecontent{
    margin: 0;
    padding: 0;
}

.jumbotron{
    margin-bottom: 0;
    background: #fff;
}

.row.info-important{
    justify-content: center;
}


.row.info-important .alert{
    width: 80%;
    margin-top: 1rem;
}

.welcome-info.jumbotron{
    /*background-image: url(/img/akademische-ausbildung-infoabend.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;*/
    padding-bottom: 2rem;
}

.main.welcome-info.jumbotron{
    background-image: url(/img/main-public-info.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.main.jumbotron{
    min-height: 40vh;
}

/************ departments ****************/

.departments{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.department{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    min-width: 35%;
}

.department a{
    display: flex;
    justify-content: space-between;
    flex-basis: 100%;
    padding: 1rem;
    border-radius: 0.3rem;
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--department-txt);
    background: var(--department-bkg);
    text-decoration: none;
    align-items: center;
}

.department a:hover{
    color: var(--department-txt-hover);
    background: var(--department-bkg-hover);
}

.department-link-logo{
    width: 3rem;
    height: 3rem;
    border-radius: 0.2rem;
}

.department-link-txt{

}

.welcome-left h4{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.welcome-left h5{
}

.welcome-info h4{
    margin: 2rem 3rem;
    /* margin-left: 2rem;
    margin-right: 2rem; */
}

.welcome-info h5{
    margin: 1rem 3rem;
    text-align: justify;
}

.welcome-picture{
    /* background-image: url(/img/akademische-ausbildung-infoabend.png);
    background-size: cover;
    background-repeat: no-repeat; */
}

.info-main,
.info-welcome{
    font-size: 1.5rem;
}

/************** info-sessions *************/

.info-sessions{
    margin: 0.5rem 0 4rem;
}

.info-session-datentime{
    flex-basis: 100%;
    align-self: center;
}

.info-session-link {
    color: var(--customer-000-color);
    background-color: var(--gray-dark);
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 100%;
}


.info-session-link a{
    color: var(--customer-primary-color);
    font-weight: 900;
    flex-basis: 100%;
    background: #fff;
    padding: 0.3rem;
    border-radius: 0.2rem;
}

.info-session-link.aktiv{
    color: var(--customer-primary-color);
    background-color: var(--gray-light);
    font-weight: 900;
}

/**************** media Query *****************/

@media only screen and (max-width: 420px) {
    .department{
        min-width: auto;
        width: 100%;
    }

    .department-link-txt {
        font-size: 1.8rem;
    }

    /* AKRB auf fronseite beschränken */
    #pagecontent {
        padding-bottom: 5rem;
    }

}