html, body {
    height:100%;
}

body {
    background-attachment:fixed;
    background-size: cover;
    background-repeat: no-repeat;
    font-family:Calibri, Helvetica;
}

body.start {
    background-image: url("img/bg-start.jpg");
}

#logo {
    display:block;
    margin:1em 0;
    width:100%;
}


.content {
    margin-top:2em;
    margin-bottom:8em;
}

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.dropdown * {
    width:100%;
}

.dropdown-menu, .dropdown-content  {
    background:none;
    border: none;
    box-shadow:none;
    margin:0;
    padding:0;
}

.dropdown-menu  li a, .dropdown-content  li a {
    background:none;
    border: none;
    font-size:14px;
    padding:0.2em 0.5em;
}

#menu ul {
    list-style:none;
    text-align:left;
}



                   /* Dropdown Button */
.dropbtn {
    padding: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    list-style:none;
    position: absolute;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}



h1, h2 {
    color: #fff;
    font-family: Cambria, Times;
    text-shadow: 1px 1px #000;
}

h3 {
    color: #000;
    font-family: Cambria, Times;
    margin-top:1em;
}

.start h1 {
    font-size: 200%;
    padding:1em 0;
}

h1 {
    font-size: 200%;
    padding:1em 0 0;
}

h2 {
    font-size: 150%;
    padding:0em 0 0.6em;
}


.start-circle {
    display:block;
    background:#FF9F00;
    margin: 5%;
    padding: 10%;
    width:90%;
}

.sub-circle {
    display:block;
    background:#FF9F00;
    margin: 5%;
    padding: 0%;
    width:80%;
}

.sub-circle h2 {
    text-align:center;
    width:75%;
}


.start-circle .w3-display-container {
    height:50%;
}

.sub-circle .w3-display-container {
    height:100%;
}

.start-circle hr {
    margin: 0.6em 0;
}

.start-circle p {
    font-size:1.1em;
    padding: 0;
    text-align:center;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

a:hover  {
    text-decoration:none;
}

.footer {
    background: rgba(240,240,240,0.9);
    font-size:0.7em;
    padding:2em 0 1.5em;
    position:relative;
}

.footer a {
    text-decoration:underline;
}


@media only screen and (min-width:1px){
    
    .pic-right {
        float:right;
        margin:0 0 20px 20px;
        width:100%;
    }

    .start-circle {
        font-size:70%;
    }
    
    .start-circle h2 {
        color: #fff;
        font-family: Cambria, Times;
        font-size:200%;
        text-shadow: 1px 1px #000;
        padding:0 0;
    }
}


@media only screen and (min-width:321px){

    .pic-right {
        float:right;
        margin:0 0 20px 20px;
        max-width:50%;
    }
    .start-circle {
        font-size:85%;
    }
    .start-circle h2 {
        font-size:200%;
    }

    h1 {
        padding:1.7em 0 0;
    }

    .start h1 {
        padding:1.7em 0;
    }
}


@media only screen and (min-width:451px){
    .start-circle {
        margin:5% 15%;
        width:70%;
    }
    .start-circle {
        font-size:80%;
    }
    .start-circle h2 {
        font-size:200%;
    }
}

@media only screen and (min-width:601px){

#logo {
    margin-top:1em;
    width:60%;
}

.w3-navbar {
    float:right;
    font-family: Cambria, Times;
    font-size: 1em;
    text-transform: uppercase; 
}

.main-nav {
    height:10.5em;
}

.w3-navbar li  a {
    padding: 2.4em 0.3em 0;
}

.w3-navbar li  a.act {
    text-decoration:underline !important;
}

.dropdown * {
    min-width:100%;
    width:auto;
}

.dropdown-menu  li a, .dropdown-content  li a {
    background:none;
    border: none;
    font-family:Calibri;
    padding:0.4em 0.5em;
    text-transform:none;
    line-height:1.1em;
}



.start-circle {
    display:block;
    background:#FF9F00;
    margin:5% 1%;
    padding-left:5%;
    padding-right:5%;
    width:98%;
}

.start-circle .w3-display-container {
    height:50%;
}

.start-circle h2 {
    color: #fff;
    font-family: Cambria, Times;
    font-size:1.4em;
    text-shadow: 1px 1px #000;
    padding:0 0;
}

.start-circle hr {
    margin:1em 20% 0;
    width:60%;
}

.start-circle p {
    font-size:1em;
    padding: 1em 12%;
}

.footer {
    font-size:0.85em;
    padding:2em 0 1.5em;
    position:absolute;
}

.footer p {
    text-align:left;
}

}/* --- END --- */


@media only screen and (min-width:993px){

#logo {
    margin-top:1em;
    width:66%;
}

.pic-right {
    width:auto;
}

.w3-navbar {
    float:right;
    font-family: Cambria, Times;
    font-size: 1.8em;
    text-transform: uppercase; 
}

.main-nav {
    height:6em;
}

.w3-navbar li  a {
    padding: 1.5em 0.5em 0;
}
.dropdown-menu  li a, .dropdown-content  li a {
    padding:0.2em 1.1em;
}


.start-circle {
    width:95%;
}

.start-circle#circle1 {
}
.start-circle#circle2 {
    margin-left:5%;
}
.start-circle#circle3 {
    margin-left:10%;
}

.start-circle .w3-display-container {
    height:50%;
}

.start-circle h2 {
    font-size:2.2em;
}

.start-circle hr {
    margin:1em 20% 0;
    width:60%;
}

.start-circle p {
    font-size:1.2em;
    padding: 1em 20%;
}

.sub-circle {
    margin: 15% 5%;
}

    
}/* --- END --- */