/*  CSS RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

html {
  height: 100%;
  scroll-behavior: smooth;}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
	color:inherit;
}

ul {list-style-type:none;}
/*  CSS RESET END*/

/* SITEWIDE STYLINGS */

body {
  font-family: 'EB Garamond', serif;
  height: 100%;
  line-height: 1.5;
  text-align: center;
  color: #5e6671;
  -webkit-font-smoothing: antialiased;}

.no-select { 
       user-select: none; 
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;}

.full-width {width: 100%;}
.content-width {width:96%; max-width: 900px;}
.para-width {max-width: 40em; margin:0.2em;}

.full-height {	
  height: calc(100% - 138px);
  height: -o-calc(100% - 138px);
  height: -webkit-calc(100% - 138px); 
  height: -moz-calc(100% - 138px);}

.center-text {text-align: center;}
.left-text {text-align: left;}

.center-flex {align-items: center;
  justify-content: center;}

.center-image{  
  display: block;
  margin-left: auto;
  margin-right: auto;}

.center-div {margin: auto;}

.vert-horiz-align {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);}

.relative {position: relative}
.absolute {position: absolute}


.border-bottom {
border-bottom: solid 1px rgba(0,0,0,0.2);
padding-bottom: 1em;
margin-bottom:1em;}

.flex-box {
  display: flex;   
  flex-direction: row;
  flex-wrap: wrap;}

.flex-large {width:48%; margin: 1%;}
.flex-small, .flex-small-third {width:31.3%; margin: 1%;}
.flex-full {width:100%; margin: 1%;}



p {font-size:1em; padding: 0.2em 0.1em 0 0.1em;}
h2 {font-size: 1.2em; padding: 0.8em 0 0.8em 0;}
h3 {font-size: 1.2em; padding: 0.3em 0 0.1em 0;}
h4 {font-size:1em; font-weight: bold;}
q {font-size: 1.1em; font-style: italic;}

.footer-menu a:hover, .underline:hover, .relative:hover .slot-link {text-decoration: underline;}

.grey-bg {background-color: #f2f2f2;}
.white-tx {color: #FFF;}

.padding-top {padding-top:1.5em;}

/* SITEWIDE STYLINGS END */









/* HEADER STYLE */
.logo-bar {background:white; z-index:9;}
.logo {width:300px; padding: 10px;}

nav input[type="checkbox"], nav .hamburger-lines {
  display: none;
}

nav {
  position: relative;
  background-color: #f2f2f2;
  width: 100%;
  z-index: 6;
}

.container {
    max-width: 1200px;
    height: 46px;
    margin: 0 auto;
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-items {
  display: flex;
}

.menu-items li {
  list-style: none;
  padding-left: 10px !important;
  padding-right: 10px !important;
  display: flex;
  align-items: center;
}

nav a {
  color: #5e6671;
  text-decoration: none;
  display: block;
  padding: 12px;
  font-size:16px;
}

nav a:hover {
    background-color: #566167;
    color: #FFF;
}

/* HEADER STYLE END */

/* SLIDESHOW */

.slideshow, .slideshow-single {
width: 100%; 
z-index: 1; 
margin: auto;}

.slideshow li span, .slideshow-single li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-size: cover;
  background-position: 50% 80%;
  background-repeat: no-repeat;
}
  
 .slideshow li span { 
  color: transparent;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: imageAnimation 18s linear infinite 0s;
  -moz-animation: imageAnimation 18s linear infinite 0s;
  animation: imageAnimation 18s linear infinite 0s;
}

.slideshow li h2, .slideshow-single li h2 {
  z-index: 2;
  padding: 0px 15px 5px 15px;
  background-color: rgba(242,242,242,0.6);
}
  
 .slideshow li h2 { 
  opacity: 0;
  -webkit-animation: titleAnimation 18s linear infinite 0s;
  -moz-animation: titleAnimation 18s linear infinite 0s;
  animation: titleAnimation 18s linear infinite 0s;
}

.slideshow li:nth-child(2) span {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;
}

.slideshow li:nth-child(3) span {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  animation-delay: 12s;
}


.slideshow li:nth-child(2) h2 {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;  
}

.slideshow li:nth-child(3) h2 {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  animation-delay: 12s;  
}


/* DOWN ARROW */
.arrows {
	width: 70px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 20px;
   z-index: 5;
}

.arrows path {
	stroke: #f2f2f2;
	fill: transparent;
	stroke-width: 3px;	
	animation: arrow 6s infinite;
	-webkit-animation: arrow 6s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow 
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	        animation-delay:0.5s;
	-webkit-animation-delay:0.5s;
}

.arrows path.a2 {
	          animation-delay:1s;
	  -webkit-animation-delay:1s; 
}

.arrows path.a3 {
	        animation-delay:1.5s;
	-webkit-animation-delay:1.5s; 
}

/* DOWN ARROW END */


/* titles END */

@-webkit-keyframes 
imageAnimation {  0% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
}
 12.5% {
 opacity: 1;
 -webkit-animation-timing-function: ease-out;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@-moz-keyframes 
imageAnimation {  0% {
 opacity: 0;
 -moz-animation-timing-function: ease-in;
}
 12.5% {
 opacity: 1;
 -moz-animation-timing-function: ease-out;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
@keyframes 
imageAnimation {  0% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
 -moz-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 12.5% {
 opacity: 1;
 -webkit-animation-timing-function: ease-out;
 -moz-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@-webkit-keyframes 
titleAnimation {  6% {
 opacity: 0;
}
 18% {
 opacity: 1;
}
 20% {
 opacity: 1;
}
 33% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@-moz-keyframes 
titleAnimation {  6% {
 opacity: 0;
}
 18% {
 opacity: 1;
}
 20% {
 opacity: 1;
}
 33% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@keyframes 
titleAnimation {  6% {
 opacity: 0;
}
 18% {
 opacity: 1;
}
 20% {
 opacity: 1;
}
 33% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
/* slideshow end */















/* testimonials */

#testimonials {height:30%; min-height:250px;  }

.testimonials {
display: none;
height:100%; 
padding: 0px 80px 0px 80px;}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: #5e6671;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  position: absolute;
  right: 0;
  border-radius: 5px 0 0 5px;
}

.prev {
  position: absolute;
  left: 0;
  border-radius: 0 5px 5px 0;
}

.prev:hover, .next:hover {
  background-color: rgba(94,102,113,0.5);
  color: #FFF;
}

.dot-container {
    text-align: center;
    padding: 10px;
}

.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: rgba(94,102,113,0.5);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #5e6671;
}

q::before {
 color:rgba(94,102,113,0.5);}


.client{padding-top:1em;}

/* testimonials end */


.social-icon {width:30px; padding:4px;}



/* SLOTS ANIMATION */





img.under-image {
    max-width: 100%;
    height: auto;}

img.over-image {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation: slotsAnimation 8s linear infinite 0s;
  -moz-animation: slotsAnimation 8s linear infinite 0s;
  animation: slotsAnimation 8s linear infinite 0s;
}

img.slot2 {  -webkit-animation-delay: 0.5s;
          -moz-animation-delay: 0.5s;
          animation-delay: 0.5s;}

img.slot3 {  -webkit-animation-delay: 1s;
          -moz-animation-delay: 1s;
          animation-delay: 1s;}

img.slot4 {  -webkit-animation-delay: 1.5s;
          -moz-animation-delay: 1.5s;
          animation-delay: 1.5s;}

img.slot5 {  -webkit-animation-delay: 2s;
          -moz-animation-delay: 2s;
          animation-delay: 2s;}
		  
img.slot6 {  -webkit-animation-delay: 2.5s;
          -moz-animation-delay: 2.5s;
          animation-delay: 2.5s;}

img.slot7 {  -webkit-animation-delay: 3s;
          -moz-animation-delay: 3s;
          animation-delay: 3s;}

img.slot8 {  -webkit-animation-delay: 3.5s;
          -moz-animation-delay: 3.5s;
          animation-delay: 3.5s;}

img.slot9 {  -webkit-animation-delay: 4s;
          -moz-animation-delay: 4s;
          animation-delay: 4s;}

img.slot10 {  -webkit-animation-delay: 4.5s;
          -moz-animation-delay: 4.5s;
          animation-delay: 4.5s;}		  


@keyframes 
slotsAnimation {  0% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
 -moz-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}

 40% {
 opacity: 0;
}  
  
 50% {
 opacity: 1;
 -webkit-animation-timing-function: ease-out;
 -moz-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
  
 90% {
 opacity: 1;
} 
  
100% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
 -moz-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}  
}

@-webkit-keyframes
slotsAnimation {  0% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
 -moz-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}

 40% {
 opacity: 0;
}  
  
 50% {
 opacity: 1;
 -webkit-animation-timing-function: ease-out;
 -moz-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
  
 90% {
 opacity: 1;
} 
  
100% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
 -moz-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}  
}

@-moz-keyframes  
slotsAnimation {  0% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
 -moz-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}

 40% {
 opacity: 0;
}  
  
 50% {
 opacity: 1;
 -webkit-animation-timing-function: ease-out;
 -moz-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
  
 90% {
 opacity: 1;
} 
  
100% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
 -moz-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}  
}

/* SLOTS ANIMATION END */

/* MEDIA QUERY */

@media only screen and (max-width: 656px) {
.flex-large, .flex-small-third{width:100%}
.flex-small {width:48%;}
#testimonials {height:80%;}
.testimonials {padding: 0px 60px 0px 60px; }
.dot {height: 15px; width: 15px;}


.navbar-container input[type="checkbox"],
  .navbar-container .hamburger-lines {
    display: block;
  }

  .navbar-container {
    display: block;
    position: relative;
    height: 46px;
  }

  .navbar-container input[type="checkbox"] {
    position: absolute;
    display: block;
    height: 32px;
    width: 30px;
    top: 10px;
    right: 20px;
    z-index: 8;
    opacity: 0;
    cursor: pointer;
  }

  .navbar-container .hamburger-lines {
    display: block;
    height: 28px;
    width: 35px;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .navbar-container .hamburger-lines .line {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: #5e6671;
  }

  .navbar-container .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.3s ease-in-out;
  }

  .navbar-container .hamburger-lines .line2 {
    transition: transform 0.1s ease-in-out;
  }

  .navbar-container .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.3s ease-in-out;
  }

  .menu-items {
    padding-top: 20px;
    padding-bottom: 20px;
    background: #f2f2f2;
    width: 100%;
    transform: translateY(-150%);
    flex-direction: column;
    transition: transform 0.5s ease-in-out;
    overflow: hidden;
    align-items: center;
    justify-content: center;
	z-index: 7;
  }
  
  
nav a:hover {
    background-color: #f2f2f2;
    color: #FFF;
}




  .navbar-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateY(0);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(45deg);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-45deg);
  }




}

@media only screen and (max-width: 330px) {
.flex-small {width:100%;}
#logo {width:86%;}
#testimonials {height:80%;}
.testimonials {padding: 0px 20px 0px 20px; }

}
	

/* MEDIA QUERY END*/