body{
    margin:auto;
    padding: 0;
    border:2px solid #a05;
    font-family: sans-serif;
}

.header{
    display:block;
    margin: 0;
    z-index:100;
}

.header-logo,.header-social{
    display: inline-block;
    vertical-align: top;
}

.header-logo{
    width:50vw;
    height:8vw;
    background:#b05;
}

.header-logo img{
    padding:1vw;
    height:6vw;
}

.header-social{
    text-align: left;
}

.header-social span{
    display: inline-block;
    margin:1vw 2vw;
    font-size:1.6vw;
    font-weight:bold;
}

.mobile-header{
    display: none;
    position:sticky;
    top:0;
    margin:0 auto;
    padding: 5px 10px;
    background:#fff;
    color:#000;
    z-index:100;
    clear: both;
}

.menubar{
    display:inline-block;
    cursor: pointer;
}

.mobile-header .contact{
    width:74%;
    font-size:0.8em;
    font-weight:bold;
    float:right;
    line-height: 1em;
    padding: 10px;
}

.mobile-header .contact>span{
    display: inline-block;
}

.mobile-header img{
    display:inline-block;
    margin-left:10px;
    height:30px;
}

.line1,.line2,.line3{
    width: 5vw;
    height: 1vh;
    background-color: #b05;
    margin: 0.5vh 0;
    transition: 0.4s;
}

.change .line1 {
    -webkit-transform: rotate(-45deg) translate(-1.05vh, 1.05vh);
    transform: rotate(-45deg) translate(-1.05vh, 1.05vh);
}

.change .line2 {opacity: 0;}

.change .line3 {
    -webkit-transform: rotate(45deg) translate(-1.05vh,-1.05vh);
    transform: rotate(45deg) translate(-1.05vh,-1.05vh);
}


.navigation{
    position: sticky;
    top:0;
    left:0;
    right:0;
    margin: 0 auto;
    padding: 0;
    text-align:center;
    background:rgb(200, 0, 125);
    transition: 0.5;
    z-index:100;
}

.mobile-navigation{
    margin: 0;
    padding: 2vh;
    position:fixed;
    top:8vh;
    left:0;
    height: 80vh;
    width:50vw;
    text-align:left;
    overflow: auto;
    background:rgb(200, 0, 125);
    transition:0.5s;
    z-index:100;
}

.navigation a,.dropdown-button{
    margin: 0;
    padding: 1vh 5vw;
    background:rgb(200, 0, 125);
    color:#fff;
    text-align: left;
    text-decoration: none;
    transition: 0.5s;
    font-size:1.5vw;
    font-weight: bold;
    border:0px;
    
}

.navigation a{
    display: inline-block;
}

.mobile-navigation a,.mobile-navigation .dropdown-button{
    display:block;
    margin: 0;
    padding: 1vh;
    background:rgb(200, 0, 125);
    color:#fff;
    text-align: left;
    text-decoration: none;
    transition: 0.5s;
    font-size:1em;
    font-weight:bold;
    border:0px;
}


.navigation a:hover{
    background: #a05;
}

.mobile-navigation a:hover{
    background: #a05;
}

.navigation .dropdown-button:hover{
    background:#a05;
    
}

.dropdown{
    position: relative;
    display: inline-block;
    padding: 0;
    transition: 0.5s;
}

.mobile-navigation .dropdown{
    display: block;
    position: static;
}

.dropdown-content{
    display:none;
    position: absolute;
    min-width:26vw;
    transition: 0.5s;
}

.mobile-navigation .dropdown-content{
    display:block;
    position: static;
    min-width:25vw;
    margin-left:4vw;
    transition: 0.5s;
}

.dropdown-content a{
    display: block;
    padding: 1vw;
    text-align: left;
}

.navigation .dropdown-content a:hover{
    text-decoration: underline;
}

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



.footer{
    bottom:0;
    left:0;
    right:0;
    margin:0 auto;
    margin-top:2vh;
    padding:0;
    z-index:200;
}

.navigation-list{
    background: #333;
    color:#fff;
}

.droplist{
    display:inline-block;
    vertical-align: top;
}

.droplist-special{
    list-style: none;
    margin-right:5vw;
}

.droplist-head{
    font-size: 1.2em;
    text-decoration: underline;
}

.droplist-list{
    list-style:disc;
}

.droplist li{
    font-weight: normal;
}

.droplist-list li a{
    font-size:1em;
    text-decoration: none;
    color:#fff;
}

.droplist-special li a{
    font-size:1.2em;
    text-decoration: none;
    color:#fff;
}

.droplist-special li a:hover{
    text-decoration: underline;
}

.droplist-list li a:hover{
    text-decoration: underline;
}

.copyright{
    display: block;
    margin:0;
    padding:5px;
    text-align: center;
    background: #b05;
    color: #fff;
}

.flex{
    display: flex;
}

.inline{
    display: inline-block;
}

#gotoTopBtn{
    display:none;
    position: fixed;
    bottom: 2vh;
    right: 2vw;
    padding:0em 0.2em;
    cursor: pointer;
    font-size: 3em;
    font-weight: bold;
    background:#f05;
    color:#fff;
    border: none;
    outline: none;
    border-radius: 50%;
    opacity: 0.5; 
}

#gotoTopBtn:hover{
    background: #805;
    opacity: 1;
}



.slideBox{
    position: relative;
    left:0;
    right:0;
    width:100%;
    margin:2vh auto;
    padding: 0;
    height:0;
    overflow: hidden;
    background:#aaa;
    z-index:0;
    transition: 1s;
    cursor: pointer;
}

.slideBox p{
    margin:auto;
    height: 2vw;
    text-align: center;
    vertical-align: middle;
    font-size:1.6vw;
    font-weight: bold;
}

.slideBox .prevSlide{
    display: none;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto 0;
    padding:0;
    height:4vw;
    font-size:3.5vw;
    background:transparent;
    color:#fff;
    opacity: 0.5;
    z-index:10;  
}

.slideBox .prevSlide:hover{
    opacity: 1;
}

.slideBox .nextSlide{
    display: none;
    position: absolute;
    right:0;
    top:0;
    bottom: 0;
    margin:auto 0;
    padding:0;
    height:4vw;
    font-size:3.5vw;
    background:transparent;
    color:#fff;
    opacity: 0.5;
    z-index:10;  
}

.slideBox .nextSlide:hover{
    opacity: 1;
}

.slideBox .controlSlide{
    display: none;
    position: absolute;
    left:0;
    bottom: 0;
    right:0;
    margin:0 auto;
    padding:0;
    width:20vw;
    background:transparent;
    opacity: 0.5;
    text-align: center;
    z-index:10;
}

.slideBox .controlSlide:hover{
    opacity: 1;
}


.triangle-right {
    display: inline-block;
    margin:0 1vw;
	width: 0;
	height: 0;
	border-top:0.75vw solid transparent;
	border-left: 1.5vw solid #fff;
	border-bottom: 0.75vw solid transparent;
}

.square{
    display: inline-block;
    margin:0 1vw;
    width:1.5vw;
    height:1.5vw;
    background:#fff;
}

#slideButton input[type="radio"]{
    margin: auto;
    width:1.8vw;
    height:1.8vw;
    vertical-align:text-bottom;
}

#progressBar{
    display: none;
    margin:auto;
    position: absolute;
    height:50vh;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index:3;
}

#slideImage{
    min-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    z-index:5;
}

#slideImage .img-div{
    display: inline-block;
    position: relative;
    margin:auto;
    padding: 0;
    height:30vw;
    width:100%;
    max-width: 100%;
    z-index:5;
    transition: 0.5;
    overflow: hidden;
}


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


h1 {
    margin: 10px;
    color:#b05;
    text-shadow: 1px 2px #aaa;
 
}

h2 {
    margin:10px;
    color:#000;
    text-shadow: 1px 2px #aaa;
}

h3 {
    margin:10px;
    text-align: center;
    color:#a0a;
}

h4 {
    padding:10px;
    color:rgb(86, 86, 151);
}


p{ padding:1vw;
    text-align: justify;
}

p .floatleft{
    float: left;
}

p .floatright{
    float: right;
}

.largerFont{
    font-size: 1.5em;
}

.italicFont{
    font-style: italic;
}

.newsBox{
    margin:20px 10px;
    padding:10px;
    background:#eee;
    box-shadow: 0px 0px 10px #888;
    border-radius: 5px;
}

.dimText{
    color:#999;
    font-size:0.75em;
}

ul{
    list-style: disc;
}

ul li{
    font-weight:bold;
}

.form-box{
    position: relative;
    min-width: 300px;
    margin:auto;
    max-width: 60vw;
    padding:40px;
    box-shadow: 0px 0px 10px #999;
}

.form-box .form-heading{
    font-size: 1.5em;
    font-weight: bold;
    color:#555;
}

.form-box .form-center{
    text-align: center;
    width:fit-content;
    margin:auto;
}

.form-box .form-input{ 
    position:relative; 
    margin-bottom:45px; 
    width:320px;
}

.form-box input{
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
    width:300px;
    border:none;
    border-bottom:1px solid #757575;
}

.form-box textarea{
    min-width: 300px;
    width:50vw;
    max-width: 50vw;
}

.form-box input[type="submit"]{
    width:300px;
    margin: auto;
    text-align: center;
    background: rgb(56, 56, 156);
    color:#fff;
}

.form-box input[type="submit"]:hover{
    background: #5264AE;
}

.form-box input:focus{ outline:none; }
  
  /* LABEL ======================================= */
.form-box label{
    color:#999; 
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
  
  /* active state */
.form-box input:focus ~ label,.form-box input:valid ~ label{
    top:-20px;
    font-size:14px;
    color:#5264AE;
}
  
  /* BOTTOM BARS ================================= */
.form-box .bar{
    position:relative;
    display:block;
    width:315px;
}

.form-box .bar::before,.form-box .bar::after{
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background:#5264AE; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}

.form-box .bar::before {
    left:50%;
}

.form-box .bar::after {
    right:50%; 
}
  
  /* active state */
.form-box input:focus ~ .bar:before,.form-box input:focus ~ .bar:after {
    width:50%;
}
  
  /* HIGHLIGHTER ================================== */
.form-box .highlight{
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
}
  
  /* active state */
.form-box input:focus ~ .highlight{
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

.form-box .error{
    color:red;
}
  


@-webkit-keyframes inputHighlighter {
    from { background:#5264AE; }
to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#5264AE; }
to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#5264AE; }
to 	{ width:0; background:transparent; }
}


@-webkit-keyframes progress {
    from { 
        left:0%;
        opacity: 1;
    }

    25%{
        opacity: 0.5;
    }

    50% {
        opacity: 0.25;
    }

    75% {
        opacity: 0.5;
    }
    to 	{
        left:100%;
        opacity: 1;
    }
}
@-moz-keyframes progress {
    from { 
        left:0%;
        opacity: 1;
    }

    25%{
        opacity: 0.5;
    }

    50% {
        opacity: 0.25;
    }

    75% {
        opacity: 0.5;
    }
    to 	{
        left:100%;
        opacity: 1;
    }
}
@keyframes progress {
    from { 
        left:0%;
        opacity: 1;
    }

    25%{
        opacity: 0.5;
    }

    50% {
        opacity: 0.25;
    }

    75% {
        opacity: 0.5;
    }
    to 	{
        left:100%;
        opacity: 1;
    }
}





@media screen and (max-width: 600px){
    .header{
        display: none;
    }

    .navigation{
        display:none;
    }

    .mobile-header{
        display: block;
    }
    .slideBox{
        margin-top:6vh;
    }
}