html {
    scroll-behavior: smooth;
}
.topNav {
    overflow: hidden;
    background-color: #ce6302;
    color: white;
    padding-left: 10px;
    padding-top: 2px;
}

.topNav a{
    display: block;
    float: right;
    padding: 14px 12px;
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 1.1em;
}

.topNav a:hover {
    background-color:  #fca34f;
    color: lightgrey;
    cursor: pointer;
}

.header {
    background-color: white;
    padding: 0;
    border-bottom: 1px solid #ce6302;
    text-align: right;
}

.header div{
    overflow: hidden;
}

.header a{
    display: block;
    float: right;
    text-align: right;
    padding: 16px 18px;
    text-decoration: none;
    color: slategrey;
    font-size: 1.8em;
    margin-bottom: 10px;
}

.header a:hover{
    cursor: pointer;
    color: #ce6302;
}

.subNav {
    overflow: hidden;
    background-color: white;
    color: grey;
}
.subNav a{
    border-top: 1px #ce6302 solid;
    font-size: 1.4em;
    padding: 12px;
    text-align: right;
    text-decoration: none;
    color: grey;
    float: right;
    display: block;
}
.subNav a:hover{
    color: #ce6302;
    cursor: pointer;
    text-decoration: none;
}

.sideNav {
    overflow: hidden;;
    color: white;

}

.sideNav a {
    /*display: block;
    float: none;
    padding: 9px;
    text-align: center;
    background-color: #ce6302;
    font-size: 1.15em;
    color: white;
    border-bottom: 3px solid white;*/
    font-size: 1.3em;
    padding: 7px;
    text-align: right;
    text-decoration: none;
    color: grey;
    float: none;
    display: block;
}

.sideNav a:hover {
    /*
    background-color: #fca34f;
    color: lightgrey;
    cursor: pointer;*/
    color: #ce6302;
    cursor: pointer;
    text-decoration: underline;
}

.sideNav #selected {
    background-color: #fca34f;
    color: lightgrey;
    cursor: default;
}

#logo {
    width: 20%;
}

body {
    margin: 0;
    font-family: "Calibri", Calibri, sans-serif;
    font-size: 1em;
    background: #f1f1f1;
    padding: 10px;
}

* {
    box-sizing: border-box;
}

.fullColumn {
    width: 100%;
    float: left;
}

.fullColumn img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 20px 0;
}

.mainColumn {
    width: 75%;
    float: left;
}

.sideColumn{
    padding-left: 20px;
    width: 25%;
    float: left;
}


.card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
    overflow: auto;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.hidden{
    border: 0;
    width: 100%;
}

.footer {
    background-color: #ce6302;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    color: white;
}

.footer a {
    color: white;
    text-decoration: none;
    text-align: center;
    size: 0.9em;
    padding: 14px 16px;
}

.footer a:hover {
    color: lightgrey;
    cursor: pointer;
    text-decoration: underline;
}


/*Text Layouts*/

div {

}

h1 {
    color: #fb7b04;
    size: 1.5em;
    text-decoration: underline;
    letter-spacing: 3px;
}

h2 {
    color: #fb7b04;
    size: 1.3em;
    text-decoration: none;
    letter-spacing: 2px;
}

h3 {
    color: #fb7b04;
    size: 1.2em;
    text-decoration: none;
    letter-spacing: 1px;
}

#textImg {
    width: 40%;
    float: right;
    /*padding: 10px;*/
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

a{
    size: 1.1em;
    color: #fb7b04;
    text-decoration: none;
}

a:hover {
    color: #ce6302;
    text-decoration: underline;
}

td{
    padding: 7px 0px;
}

input{
    border: 2px solid #fb7b04;
    background-color: #fc9636;
    color: dimgrey;
    font-size: 1em;
    padding: 4px 6px;
    font-family: "Calibri", Calibri, sans-serif;
    margin: 2px;
}
input:hover{
    border: 2px solid #fb7b04;
    background-color: white;
    color: black;
}
input:focus{
    border: 2px solid #fb7b04;
    background-color: white;
    color: black;
}

input[type=submit]{
    border: 2px solid #fb7b04;
    background-color: #fb7b04;
    color: dimgrey;
    font-size: 1em;
    padding: 4px 6px;
    font-family: "Calibri", Calibri, sans-serif;
    margin: 2px;
}
input[type=submit]:hover{
    border: 2px solid #fb7b04;
    background-color: white;
    color: black;
    cursor: pointer;
}

textarea{
    border: 2px solid #fb7b04;
    background-color: #fc9636;
    color: dimgrey;
    width: 80%;
    font-family: "Calibri", Calibri, sans-serif;
}
textarea:hover{
     border: 2px solid #fb7b04;
     background-color: white;
     color: black;
 }
textarea:focus{
    border: 2px solid #fb7b04;
    background-color: white;
    color: black;
}

.scroll_visible{
    display: block;
    animation-name: slideUp;
    -webkit-animation-name: slideUp;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

.scroll_unvisible{
    display: none;
    width: 0;
}

#site-navigation{
    position: fixed;
    bottom: 70px;
    right: 10px;
    padding-left: 25px;
    width: 25%;
}

@keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

@-webkit-keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}


/* changes depending on the window-size*/

@media screen and (max-width: 970px) {
    #logo{
        display: none;
        width: 0;
    }
    #textImg{
        width: 80%;
        float: none;
    }
}

@media screen and (max-width: 785px) {
    #turn a {
        float: none;
        text-align: center;
        width: 100%;
        transform: scaleY(-1);
    }
    #turn {
        transform: scaleY(-1);
        border-bottom: 0 solid #ce6302;
        border-top: 1px solid #ce6302;
    }

    .subNav a{
        float: none;
        text-align: center;
        border-top: 0;
        transform: scaleY(-1);
    }

    .subNav {
        transform: scaleY(-1);
    }

    .sideColumn, .mainColumn {
        width: 100%;
    }
    #site-navigation{
        position: fixed;
        bottom: 40px;
        right: 10px;
        width: 100%;
        opacity: 0.75;
        text-align: center;
    }

    vanish {
        display: none;
        visibility: hidden;
    }
    .sideNav a {
        float: bottom;
        text-align: center;
        font-size: 1.1em;
        padding: 4px;
    }
}