/* This is the stylesheet of the main frontend website */

@font-face {
    font-family: 'PlayfairDisplay-Regular'; 
    src: url("PlayfairDisplay-Regular.otf") format("opentype");
    font-style: normal;
}

@font-face {
    font-family: 'test'; 
    src: url("SourceSansPro-Regular.otf") format("opentype");
    font-style: normal;
}



html {
    overflow-y: scroll;
    margin: 0px;
    padding: 0px;
}

body {
    font-family: 'test';
    //font-family: 'Roboto', sans-serif;
    background-image: url("img/waves.jpg");
    background-repeat: repeat;
    margin: 0px;
    padding: 0px;
}


div.main {
    position: relative;
    width: 90%;
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 50px;
    box-shadow: 10px 10px 10px rgba(.7,.7,.7,.1);//#bbb;
    overflow: hidden;
}


div.main div.text {
    /*position: absolute;*/
    //z-index: 999;
    //margin: 0 auto;
    //left: 0;
    //right: 0;        
    //    text-align: ;
    background-color: rgba(255, 255, 255, 0);
    background-image: url("img/watermark.jpg");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 50%;
    min-height: 600px;
    margin-top: 20px;
}

/*
div.main img.bgimg {
    //position: absolute;
    width: 100%;
    filter: blur(1px);
    -webkit-filter: blur(1px);
    opacity: 0.06;
}
 */


/*
div.main div.bgimg {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.06;
    width: 40%;
    padding: 10px;
    z-index: -1;
    background-image: url("img/watermark.jpg");
    background-repeat: no-repeat;
}
*/





a {
    text-decoration: none;
    color: #014a3a; //087b61; //4144a7; //316095; //0f13c2; //15177d; //#0e0f4f; //1a5a0b;
    //font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    background: rgba(200,200,200,.4);//#efefef;
    border-radius: 5px;
}

a:hover {
    background: #bbb912; //fff9b9;
}


div.menu {
    position: relative;
    width: 100%;
    //margin-bottom: 20px;
    //margin: auto;
    background: #316095; //317595; //#95314d;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 999; /* on top of virtually everything*/
    box-shadow: 10px 10px 10px rgba(.7,.7,.7,.15);//#bbb;
    //display: flex;
    //justify-content: space-between;
    text-align: center;
    
    color: white;
    font-weight: bold;
    padding: 0px;
}

div.menu div.menuitems {
    display: inline-block;
}

p.who {
    // This is work in progress, not really functional
    display: none; //position: absolute;
    float: left;
    //display: inline-block;
    padding: 0px;
    margin: 0px;
    font-weight: 1000;
    padding-right: 10px;
    padding-left: 10px;
    background: rgba(255,255,255,.2);
    padding-top: 10px;
    padding-bottom: 10px;
}


div.menu a {
    background: #316095; //317595; //#95314d;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    border-radius: 0px;
    display: inline-block;
    //margin: 1px;
    //margin-left: 5px;
    margin: 0px;
    color: white;
    font-weight: bold;
}



/*
div.menu:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 5px 5px 5px rgba(50,50,50,.3);
}
*/


div.menu a#selectedmenu {
    background: #ccc; // #4d584c; //3e523c; // #284d23; //#084400;
    color: black;
}


div.menu a:hover {
    background: #95314d;
    color: white;
}



div.menu a#selectedmenu:hover {
    background: #622033; //7a283f; //95314d; //284d23; //#084400;
    color: white;
}






div.leftbox {
    display: inline-block;
    float: left;
    padding: 10px;
    vertical-align:top;
    margin: 15px;
    margin-bottom: 25px;
}


div.leftbox img.added {
    box-shadow: 10px 10px 10px #ccc;
    max-width: 300px;
    width: 95%;
}


div.leftbox img.logo {
    margin-top: 15px;
    max-width: 300px;
    display: block;
    width: 95%;
}




div.sidebox {
    display: inline-block;
    max-width: 400px;
    width: 95%;
    vertical-align:top
}

h1 {
    color: #95314d;
}


h2 {
    color: #11300e;
}


.maincontents {
    width: 95%;
}


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

    



div.copyright {
    margin-top: 50px;
    display: block;
    text-align: right;
}

div.copyright a {
    font-size: 70%;
    color: rgba(180,180,180,.9);
    background-color: rgba(255,255,255,0);
}