/*algemeen**/
*{
  padding: 0;
  margin:0;
}

html, body{
  height:100%;
  font-family: Helvetica, sans-serif; 
}
/*header**/

header h1{
  text-align: center;
  font-family: legia;
  font-size: 100px;
  color: #424242;
  padding: 0;
  margin: 0;
}
@font-face {
  font-family: legia;
  src: url(font/legia.ttf);
}

/*navbar**/


nav{
  padding-top:5px;
  border-bottom: #424242 10px solid;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 70px;
}

#navbar {
  overflow: hidden;
  background-color: white;
}
nav ul{
    text-align: center;
    padding: 0;
    margin: 0;
}

nav li{
  display: inline-block;
  padding: 0 30px 10px 30px;
  
}

nav a{
  text-decoration: none;
  color: #424242;
  transition: 0.5s;
  font-size: 30px;
  padding: 0;
  margin: 0;
  font-family: Helvetica, sans-serif;
}

nav a:hover{
  color: #ff6434;
}

.active{
  color: #ff6434;
}

.burger{
  display:none;
  cursor: pointer;
}
.burger div{
  width: 25px;
  height: 3px;
  background-color: #424242;
  margin: 5px;
  transition: all 0.3s ease;
}
/*main**/
.fancy{

  font-size: 20px;
}
.container{
    margin:auto;
    width:1200px;
}

.imgcenter{
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 50px 0px 50px 0px;
}

.paddingtop{
  padding-top: 50px;
}

main{

  color: #424242;
  overflow:auto;
  padding-bottom:100px;
}

main h1{
  padding-top: 0;
  margin-top: 0;
}
main h2{
  margin-top: 20px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  font-size: 40px;
  line-height: 1.5;
}

main p{
  padding: 0 0 30px 0;
  margin: 0 0 30px 0;
  color: #6d6d6d;
  font-size: 17px;
  line-height: 1.8;
}

.data dd{
  line-height: normal;
}
.line{
  border-bottom: #ff6434 1px solid;
  padding: 0 0 30px 0;
  margin: 0 0 30px 0;
}

main a{
  color:#ff6434;

}


.centertext{
  text-align:center;
}

.justifytext{
  text-align: justify;
}



/*flexbox*/

.backgroundcolor{
  background: #f7f7f7;
  padding-top: 5px;
  padding-bottom: 5px;
}
.container-1{
  display: flex;
  align-items:center;
  padding: 0 20px 0 20px;
  margin-bottom: 50px;
  margin-top: 75px;
}

.container-1 div{
  padding:10px;
}

.container-2{
  display: flex;
  padding: 0 20px 0 20px;
  margin-bottom: 50px;
}

.container-2 div{
  padding:10px;
}
.container-2 .box1{
  flex:3;
  order:2;
}
.container-3{
  display: flex;
  padding: 0 20px 0 20px;
  margin-bottom: 50px;
}

.container-3 .box2{
  padding-left:50px;
}

.container-3 div{
  padding:10px;
}
.container-4{
  display: flex;
  align-items:center;
  padding: 20px 20px 20px 20px;
  margin-bottom: 50px;
  margin-top: 50px;

  border-radius: 10px;
}

.container-4 div{
  padding:10px;

}
.container-4 .box2{
  flex:2;
  padding-right: 30px;
  text-align: justify;
}

.container-4 .box2r{
  flex:2;
  padding-left: 30px;
  text-align: justify;
}
.box1{
  flex:1;
  order:2;
}

.box2{
  flex:1;
  order:1;

}
.box1r{
  flex: 1;
  order:1;
}
.box2r{
  flex: 1;
  order:2;
}
dt{
  font-size: 30px;
}

dt a{
  text-decoration: none;
  color: #424242;
  transition: 0.5s;
}

dt a:hover{

  color: #ff6434 ;
}

dd{
  padding: 0 0 20px 0;
  color: #808080;
  font-size: 16px;
  line-height: 1.8;
  margin-left: 0;
}

/*FORM*/

form input{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  transition: 0.5s;
}

form input:focus{
  border: 1px solid #ff6434;
  box-shadow: #ff6434;
  outline: none;
}

form textarea{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: Helvetica, sans-serif;
  box-shadow: #ff6434;
  transition: 0.5s;
}

form textarea:focus{
  border: 1px solid #ff6434;
  box-shadow: #ff6434;
  outline: none;
}

input[type=submit] {
  width: 100%;
  background-color: #ff6434;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/*---------- SLIDE SHOW --------------*/
.slideshow{
  overflow-x: hidden;
  margin-left: 300px;
  margin-right: 300px;
  padding-bottom: 0;
  margin-bottom: 0;
}
#slider{
  overflow: hidden
}
#slider{
  z-index:-1;
  margin-top:50px;
  position: relative;
  width: 500%;
  margin 0;
  left:0;
  animation: 20s slider infinite;
}

#slider figure img{
  width: 20%;
  float: left;
}

@keyframes slider {
  0%{
    left:0;
  }
  20%{
    left:0;
  }
  25%{
    left: -100%
  }
  45%{
    left: -100%
  }
  50%{
    left: -200%
  }
  70%{
    left: -200%
  }
  75%{
    left: -300%
  }
  95%{
    left: -300%
  }
  100%{
    left: -400%;
  }


}
/*------------- END OF ANIMATION PART ---------------*/
/*footer**/


footer{
  background-color: #424242;





}

footer p{
    color: white ;
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    padding: 0px 0 10px 0;
    margin: 0 0 0 0;
}
footer ul{
        text-align: center;
        padding: 0;
        margin: 0;
    }
footer li{
      display: inline-block;
      padding: 20px 30px 10px 30px;
    }

footer a{
      text-decoration: none;
      color: white;
      padding: 0;
      margin: 0;
      font-family: Helvetica, sans-serif;
      transition: 0.5s;
    }
footer a:hover{
      color: #ff6434;
    }

/*tablet*/
@media screen and (max-width:1700px) {
  .slideshow{
    margin-left: 250px;
    margin-right: 250px;
  }
}
@media screen and (max-width:1650px) {
  .slideshow{
    margin-left: 225px;
    margin-right: 225px;
  }
}
@media screen and (max-width:1600px) {
  .slideshow{
    margin-left: 200px;
    margin-right: 200px;
  }
}
@media screen and (max-width:1550px) {
  .slideshow{
    margin-left: 175px;
    margin-right: 175px;
  }
}
@media screen and (max-width:1500px) {
  .slideshow{
    margin-left: 150px;
    margin-right: 150px;
  }
}
@media screen and (max-width:1450px) {
  .slideshow{
    margin-left: 125px;
    margin-right: 125px;
  }
}
@media screen and (max-width:1400px) {
  .slideshow{
    margin-left: 100px;
    margin-right: 100px;
  }
}
@media screen and (max-width:1350px) {
  .slideshow{
    margin-left: 75px;
    margin-right: 75px;
  }
}
@media screen and (max-width:1300px) {
  .container{
    width:100%;
  }
  main{
    margin-left: 0;
    margin-right: 0;
  }
  .slideshow{
    margin-left: 20px;
    margin-right: 20px;
  }
  .phonepadding{
    margin-left: 20px;
    margin-right: 20px;
  }
}

/*gsm**/
@media screen and (max-width:768px) {
  main{
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
  main .slideshow{
    margin-left: 20px;
    margin-right: 20px;
  }

  .sticky + .content{
    padding-top: 0px;
  }
  .box1r{
    flex: 1;
    order:2;
  }
  .box2r{
    flex: 1;
    order:1;
  }
  .container-1{
    flex-direction: column;
  }
  .container{
    width:100%;
  }

  .container-2{
    align-items:center ;
    flex-direction: column;
  }
  .container-3{

    flex-direction: column;
  }
  .container-4{
    flex-direction: column;
  }
  .google-maps iframe {
          width: 100% ;
          height: 100% ;
  }

  header h1{
    font-size: 80px;
  }
  header{
    display: flex;
    align-items:center;
    justify-content: space-between;
    padding:0 30px 20px 30px;
    margin:0;
  }
  nav{
    border-bottom:none;


  }
  body{
    overflow-x: hidden;

  }
  .slideshow{
    margin-left: 0;
    margin-right: 0;
  }



  .nav-links{
    position:absolute;
    right: 0px;
    height: 100vh;
    top: 15vh;
    width: 50%;
    background-color:white;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li{
    opacity: 0;
  }
  .burger{
    display:block;
    flex
  }
}

.nav-active{
  transform: translateX(0%);
}

@keyframes navLinkFade{
  from{
    opacity: 0;
    transform: translate(50px);
  }
  to{
    opacity: 1;
    transform: translate(0px);
  }
}

.toggle .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
    opacity:0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px,-6px);
}