body {font-family: 'Assistant', sans-serif;; color: #aba29f; height: 100%; background: #ffffff;}
.documentation-main {width: 1200px; 
    margin: 0% auto 0; 
    text-align: center;
}
.documentation-main img {margin: 0 0px; vertical-align: middle;}
/* font */

h1 {width: 80%; 
    margin: 0 auto; 
    color: #aba29f; 
    margin-bottom: 2%; 
    font-size: 22px; 
    font-weight: 300;
    line-height: 28px;
    text-decoration: none;
    text-underline-position: -10px;
}

p {width: 80%; 
    margin: 0 auto; 
    color: #aba29f; 
    margin-bottom: 2%; 
    font-size: 16px; 
    font-weight: 300;
    line-height: 22px;
    text-decoration: none;
    text-underline-position: -10px;
}

a, a:hover, a:focus, a:active, a.active {
    outline: 0;
    text-decoration: none;
}
a {
    color: #5e5a58;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s
}
a:hover, a:focus, a:active, a.active {
    color: #aba29f;
    font-size: auto;
}

/* social */

ul[role="social-icons"]{ padding:0; margin:0; text-align:center; padding-bottom:30px; padding-top:20px ;}

ul[role="social-icons"] > li{ display: inline-block; margin:0 6.5px}

ul[role="social-icons"] > li > a{ display:block; width:42px; height:42px; background-color:none; color:#aba29f; line-height:42px; font-size:40px; border-radius:100%; text-align:center}

ul[role="social-icons"] > li:hover a{ background-color:#none; color:#5e5a58}

/* logo */

.logo { 
    margin-bottom: 10px; 
    display: inline-block;
}

.logo img { 
    width: 70%;
}

.logo-small {
    max-width: 100px; 
    margin-bottom: 10px; 
    display: block;
    margin-bottom: 5%;
}



/* slider */

* {box-sizing: border-box}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -42px;
  color: #5e5a58;
  font-weight: normal;
  font-size: 36px;
  transition: 0.6s ease;
  border-radius: 0 0 0 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 0 0 0 0;
}

/* On hover */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0);
  color: #aba29f;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* footer */
footer {
  background-color: none;
  padding: 50px;
  text-align: center;
  color: #aba29f;
}

/* responsive */

@media (max-width: 1200px) {
    .documentation-main {width: 992px; margin: 0 auto 0;}  
    .slideshow-container {max-width: 992px; position: relative; margin: auto;} 
    h1 {width: 80%; font-size: 20px; line-height: 26px;}
    p {width: 80%; font-size: 16px; line-height: 22px;}
    .documentation-main a img{ width: 44%; }
}

@media (max-width: 1000px) {
    .documentation-main {width: 760px;} 
    .slideshow-container {max-width: 760px; position: relative; margin: auto;}   
    h1 {width: 80%; font-size: 16px; line-height: 22px;}
    p {width: 80%; font-size: 14px; line-height: 20px;}
    .documentation-main a img{ width: 40%; }
}

@media (max-width: 767px) {
    .documentation-main {width: 100%;} 
    .slideshow-container {max-width: 100€;}   
    .documentation-main a img{ width: 90%; }
    .documentation-main a.logo img{ width: 70%;}
    .documentation-main img {margin: 0}
}

@media (max-width: 640px) {
    .documentation-main {width: 100%;}   
    .slideshow-container {max-width: 100€;}
    .documentation-main a img{ width: 100%; }
    .documentation-main img {margin: 0}
}