/* -------------------------------------------------------------------
  1. Reset
------------------------------------------------------------------- */
* {
  outline: none;
}

html {
  font-size: 16px;
}
/* -------------------------------------------------------------------
  2. Typography
------------------------------------------------------------------- */
body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  /*line-height: 30px;*/
}

h1, h2, h3, h4, h5, h6 {
  color: #000;
  font-family: 'Lato', sans-serif;
  margin-top: 0;
}

h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
p { margin: 0 0 20px 0; }

.bigText {
  font-weight: 900;
  font-size: 86px;
  line-height: 80px;
}

.mediumText {
  font-size: 22px;
  line-height: 95px;
}

.textLight {
  font-weight: 300;
}

.section-description {
	font-weight: 300;
	line-height: 40px;
}

.button.hollow { font-weight: 700; }

/* -------------------------------------------------------------------
  3. Colour Scheme
------------------------------------------------------------------- */
body {
  background-color: #fff;
  color: #273140;
}

a { color: inherit; }

.main-slider-container .prev,
.main-slider-container .next { background-color: #ed2437; }

.purple-bg {
	background: #7647a7;
	color: #fff;
}

.gray-bg {
  background: #f8f8f8;
  color: #0a0a0a;
}

.underline:after { background-color: #ed2437; }
.dark-section .underline:after { background-color: #fff; }
.dark-section * { color: #fff; }
.light-section .section-description { color: #ed2437; }
.light-section .goLower:before { color: #ed2437; }

/*.button {
  background-color: transparent;
  border: 1px solid #d82132;
	color: #d82132;
  font-weight: 700;
}

.button:hover {
  background-color: transparent;
  color: #d82132;
}

.dark-section .button {
  border: 1px solid #fff;
	color: #fff;
}*/

.dark-section .button.hollow {
  border-color: #fff;
  color: #fff;
}

/* -------------------------------------------------------------------
  4. Repeated Patterns
------------------------------------------------------------------- */
.animate {
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.goLower:before {
  vertical-align: middle;
  content: '\3b';
  font-size: 30px;
  margin-right: 10px;
  font-family: 'ElegantIcons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.goLower { font-weight: 700; }

.animatequeue { visibility: hidden; }
.animated { visibility: visible; }

.margin-top-15 { margin-top: 15px; }

/* -------------------------------------------------------------------
  5. Header
------------------------------------------------------------------- */
#logo {
	/* margin-top: 85px; */
  margin-top: 35px;
	line-height: 1;
	font-size: 30px;
	color: #fff;
  display: block;
	font-weight: 900;
  max-width: 310px;
	position: absolute;
	z-index: 30;
}

#logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0.10rem;
}

#logo a { color: inherit; }

.logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  font-weight: 900;
  position: relative;
}

.logo.underline::after { bottom: -6px; }

.menu-icon {
  background-color: #d82132;
  color: #fff;
  cursor: pointer;
  font-size: 38px;
  height: 40px;
  position: fixed;
  right: 35px;
  top: 85px;
  width: 40px;
  z-index: 30;
}

.menu-icon::after {
  background-color: #fff;
  box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
  height: 3px;
  left: 50%;
  margin-left: -10px;
  max-width: 20px;
  top: 12px;
}

.menu-icon:hover::after {
	background-color: #fff;
	box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
}

@media screen and (max-width:820px) {
  #logo { 
    /* margin-top: 30px;  */
    margin-top: 5px; 
    max-width: 210px;
  }
  .menu-icon { top: 20px; right: 20px; }
}

@media (max-width:320px) {
  #logo { 
    /* margin-top: 20px;  */
  }
  .menu-icon { top: 15px; }
}

/* -------------------------
  x. Menu
-------------------------- */
.js-off-canvas-overlay {
  background-color: hsla(0, 0%, 0%, 0.5);
  z-index: 91;
}

.off-canvas.is-transition-overlap { z-index: 99; }
.off-canvas-wrapper .position-right { box-shadow: -1px 0 2px 0px hsla(0,0%,0%,0.1) !important; }

.off-canvas {
  background: #fff;
  z-index: 99 !important;
}

.position-right {
	width: 300px;
	-webkit-transform: translateX(300px);
	-ms-transform: translateX(300px);
	transform: translateX(300px);
}

#menu-close {
  cursor: pointer;
  font-size: 38px;
  position: absolute;
  right: 0;
  top: -3px;
}

.menu a {
  color: #273140;
  padding: 0;
}

.menu .logo { margin: 2rem 1rem; }
.menu .logo a { display: inline-block; }

.menu ul {
  border-bottom: 1px solid hsla(0,0%,0%,0.1);
  border-top: 1px solid hsla(0,0%,0%,0.1);
  margin: 0;
}

.menu ul li a {
  font-size: 18px;
  font-weight: 700;
	padding: 1rem;
}

.menu li:hover a { background-color: hsla(195,22%,96%,0.4); }

.menu li a.current {
  background-color: hsla(195,22%,96%,0.8);
  color: #d82132;
}

.contact-items {
  padding: 1rem;
}

.contact-items a:hover { text-decoration: underline; }

/* -------------------------
  x. Sub Page Header
-------------------------- */
.bg-image-1 {
	background: url('../images/intro-slider/bg-slides/slide-1.jpg');
	background-position: top;
}

/* -------------------------------------------------------------------
  6. Footer
------------------------------------------------------------------- */
.footer {
  padding: 15px 0;
}
/* -------------------------------------------------------------------
  7. Sections
------------------------------------------------------------------- */
.section {
  overflow: hidden;
	padding: 75px 0;
  position: relative;
}

.section-info { margin-bottom: 75px; }
.section-info h2 { font-size: 30px; }

.section-title {
  font-weight: 900;
  line-height: 44px;
  margin-bottom: 20px;
}

.underline { position: relative; }
.underline:after { content: ' '; width: 34px; height: 5px; position: absolute; bottom: -10px; left: 0; }

.section.image-background { padding: 100px 0; }

@media screen and (max-width:820px) {
  .section { padding: 45px 0; }
  .section-info { margin-bottom: 25px; }
  .section.image-background { padding: 60px 0; }
}

@media screen and (max-width:500px) {
  .section-info h2 { font-size: 28px; }

  .section-info h2.section-description {
    font-size: 22px;
    line-height: 28px;
  }
}

/* -------------------------------------------------------------------
  x. Banner Slider
------------------------------------------------------------------- */
.main-slider-container {
  position: relative;
  width: 100%;
}

.main-slider-container .main-slider a { color: inherit; }

.main-slider-container .main-slider .bigText,
.main-slider-container .main-slider .mediumText {
  position: absolute;
  font-weight: 900;
  color: #fff;
  z-index: 101;
  font-size: 116px;
  top: -1000px;
}

.main-slider-container .main-slider .mediumText {
  font-size: 30px;
  line-height: 56px;
}

.main-slider-container .main-slider ul li .arrow_down {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: inline-block;
  font-size: 30px;
  line-height: 52px;
  text-align: center;
  vertical-align: middle;
  margin-right: 20px;
}

.main-slider-container .tparrows {
  display:none;
  margin-top: -15px;
  z-index: 901;
  opacity:1;
  height: 75px;
  width: 75px;
  border-radius: 50%;
  background-color:blue;
  background-size:20%;
  background-position:center;
}

.main-slider-container .tp-leftarrow { background-image: url('../images/prev.png'); margin-left: -77px; }
.main-slider-container .tp-rightarrow { background-image:url('../images/next.png'); }

.main-slider-container .tp-bullets { display:none; }

/*- slider navs -*/
.main-slider-container .prev,
.main-slider-container .next {
	bottom: -40px;
	cursor: pointer;
	display: inline-block;
	height: 75px;
	padding: 29px 33px;
	position: absolute;
	width: 75px;
	z-index: 20;
 }

.main-slider-container .prev { right: 50%; margin-right: 3px; }
.main-slider-container .next { left: 50%; margin-left: 3px; }

.main-slider-container .prev,
.main-slider-container .next { bottom: 15px; }

.main-slider-container .prev:hover,
.main-slider-container .next:hover {
  -webkit-transform: scale(1.1) translateZ(0);
  -moz-transform: scale(1.1) translateZ(0);
  -o-transform: scale(1.1) translateZ(0);
  transform: scale(1.1) translateZ(0);
}

.main-slider-container .prev img,
.main-slider-container .next img {
  display: block;
  max-width:100%;
}

/* Small only */
@media screen and (max-width:820px) {
  .main-slider-container .main-slider .bigText, .main-slider-container .main-slider .mediumText { left: 20px !important; }
  .main-slider-container .main-slider .imgArrowOffset { left: 50px !important; }
  .main-slider-container .main-slider .slideImgArrow { margin-top: -10px; left: 20px !important; }

  .main-slider-container .prev { bottom: 6px; right: 67px; left: auto; width: 60px; height: 60px; }
  .main-slider-container .next { bottom: 6px; right: 5px; left: auto; width: 60px; height: 60px; }
  .main-slider-container .prev, .main-slider-container .next { padding: 20px 24px; }
}

/* Small only */
@media (max-width:500px) {
  .main-slider-container .main-slider .slideImgArrow { margin-top: -10px; left: 15px !important; }
  .main-slider-container .main-slider .imgArrowOffset { left: 27px !important; }
  .main-slider-container .main-slider .mediumText a { font-size: 9px !important; }

  .main-slider-container .prev { right: 47px; left: auto; width: 40px; height: 40px; }
  .main-slider-container .next { right: 5px; left: auto; width: 40px; height: 40px; }
  .main-slider-container .prev, .main-slider-container .next { padding: 14px 16px; }
}

/* -------------------------------------------------------------------
  x. About Us Section
------------------------------------------------------------------- */
.about-us-row h3 {
  display: inline-block;
  font-size: 22px;
	font-weight: 400;
  margin-bottom: 10px;
	padding: 0 0 3px;
	position: relative;
  text-align: center;
  vertical-align: middle;
}

.about-us-row h3:after {
	background-color: #ed2437;
	bottom: 0;
	content: " ";
	height: 2px;
	left: 0;
	position: absolute;
	width: 40px;
}

.about-us-row p {
  color: #363636;
  font-size: 18px;
}

/* Discover Col */
.discover-col .hollow,
.discover-col .plus-sign {
	display: inline-block;
}

.discover-col .hollow {
  box-shadow: 0 0 2px 1px hsla(0,0%,0%,0.1);
	font-size: 25px;
  margin: 0 auto;
  max-width: 300px;
	padding: 1rem;
  width: 100%;
}

.discover-col .plus-sign {
	font-size: 30px;
	font-weight: 700;
}

@media screen and (max-width:820px) {
  .about-us-row { margin: -15px 0 15px; }

  .about-us-row .text-center h2 {
    margin-bottom: 1rem;
    text-align: left;
  }

  .discover-col { margin-bottom: 35px; }
  .aboutus-context h5 { font-weight: 700; }
}

/* -------------------------------------------------------------------
  x. Services Section
------------------------------------------------------------------- */
.services-row .figure {
  border: 1px solid #fff;
  border-radius: 6px;
  padding: 20px 5px 15px;
  text-align: center;
}

.services-row .figure h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 0;
  padding-top: 0.5rem;
  text-transform: uppercase;
}

.services-row .figure { margin-bottom: 0; }

.services-row .figure .icon i {
  font-size: 58px;
}

.services-row .figure svg {
  display: block;
  height: 60px;
  margin: 0 auto;
  max-width: 100%;
  position: static;
  width: auto;
}

.services-row .figure svg path { fill: #fff; }

.services-row .figure svg.prestashop-icon path.st1,
.services-row .figure svg.casper-js-icon path.st1 { fill: #7647A7; }

.services-row .figure svg.casper-js-icon .st0 { fill: #FFFFFF; }

@media screen and (max-width:520px) {
  .small-up-3 > .column:nth-of-type(3n+1),
  .small-up-3 > .columns:nth-of-type(3n+1) {
    clear: none;
  }

  .small-up-3 > .column:nth-of-type(2n+1),
  .small-up-3 > .columns:nth-of-type(2n+1) {
    clear: both;
  }

  .small-up-3 > .column,
  .small-up-3 > .columns {
    width: 50%;
  }

}

@media screen and (max-width:340px) {
  .services-row.small-up-3 > .column,
  .services-row.small-up-3 > .columns {
    width: 100%;
  }

  .services-row .figure {
    margin: 0 auto;
    max-width: 200px;
    width: 100%;
  }

}

/* -------------------------------------------------------------------
  x. Works Section
------------------------------------------------------------------- */
.works-page .our-works-row .column { display: none; }

.our-works-row .figure {
  box-shadow: 1px 1px 2px 0 hsla(0,0%,0%,0.2);
  overflow: hidden;
  position: relative;
}

.our-works-row .figcaption {
  background-color: #fff;
  padding: 15px;
}

.our-works-row .figure .external {
  background-color: hsla(354.4, 73.5%, 48.8%, 0.9);
	color: #fff;
	display: block;
	padding: 10px 18px 13px;
  position: absolute;
  right: 0;
  top: -47px;
  z-index: 1;

  -webkit-transition: all 0.4s ease 0s;
	        transition: all 0.4s ease 0s;
}

.our-works-row .figure:hover .external { top: 0; }
.our-works-row .figure .external:hover { background-color: hsla(269.4, 40.3%, 46.7%, 0.9); }

.our-works-row h3,
.our-works-row p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  margin-bottom: 0;
}

.our-works-row h3 { font-weight: 500; }

.our-works-row .figure h3 a {
  color: #000;
  -webkit-transition: all 0.4s ease 0s;
          transition: all 0.4s ease 0s;
}

.our-works-row .figure:hover h3 a { color: #d82132; }
.our-works-row .figcaption h3 a:hover { color: #7647a7; }



.view-more-row { padding-top: 1.875rem; }
.works-page .view-more-row { display: none; }

.loadmore-overlay .button { margin-bottom: 0; }

#load_more {
  opacity: 0;

  -webkit-transition: opacity 0.4s ease-in-out;
          transition: opacity 0.4s ease-in-out;
}

.loading-bar {
	background-color: #cfcfcf;
	border-radius: 2px;
	height: 2px;
	margin: 0 auto;
  max-width: 90px;
  opacity: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 1;

  -webkit-transition: opacity 0.4s ease-in-out;
          transition: opacity 0.4s ease-in-out;
 }

.loading-bar .blue-bar {
	background-color: #0073b1;
	border-radius: 2px;
	height: 100%;
	position: absolute;
	transform: translate(-30px,0);
	width: 60px;
  -webkit-animation: initial-loading 1.5s infinite ease;
	-webkit-transform: translate(-30px,0);
	animation: initial-loading 1.5s infinite ease;
 }

@-webkit-keyframes initial-loading {
  0%,100%{
    -webkit-transform:translate(-30px,0);
    transform:translate(-30px,0)
  }
  50%{
    -webkit-transform:translate(60px,0);
    transform:translate(60px,0)
  }
}

@keyframes initial-loading {
  0%,100% {
    -webkit-transform:translate(-30px,0);
    transform:translate(-30px,0)
  }
  50% {
    -webkit-transform:translate(60px,0);
    transform:translate(60px,0)
  }
}

.category-loader {
  display: none;
  left: 0;
  position: fixed;
  top: 50%;
  width: 100%;
}

.loading-bar.loadmore-loader { margin-top: -2px; }

@media screen and (max-width:500px) {
  .our-works-row.small-up-2 > .column,
  .our-works-row.small-up-2 > .columns {
    width: 100%;
  }

}

/* -------------------------------------------------------------------
  x. Contact Section
------------------------------------------------------------------- */
#contact .contact-item a:hover {
  color: #fff;
  text-decoration: underline;
}

#contact .contact-item a:focus { color: inherit; }

.contact-item {
	margin-bottom: 60px;
  overflow: hidden;
	padding-left: 45px;
	position: relative;
}

.contact-item:last-child { margin-bottom: 0; }

.contact-item .ci-icon {
  border-right: 1px solid #fff;
  font-size: 1.538em;
  height: 45px;
  line-height: 2em;
  left: 0;
	position: absolute;
	top: 0;
  width: 35px;
}

.contact-item .ci-title {
	font-size: .923em;
	font-weight: 700;
	line-height: 1.6em;
	letter-spacing: 0.083em;
	text-transform: uppercase;
}

.contact-item .ci-content {
	font-size: 1.231em;
	font-weight: 300;
	letter-spacing: 0.063em;
}

.contact-form { position: relative; }

.contact-form h2 {
  font-weight: 900;
  margin-bottom: 40px;
}

.contact-form .columns { position: relative; }

.contact-form input[type="text"],
.contact-form textarea {
  background-color: transparent;
  border: 1px solid #fff;
  box-shadow: none;
  color: #fff;
  height: auto;
  outline: 0;
  padding: 0.5rem;
}

.contact-form input[type="text"],
.contact-form textarea {
  margin-bottom: 40px;
  width: 100%;
}

.contact-form textarea { height: 120px; }

.contact-form input.error,
.contact-form textarea.error {
  /*border-color: #ef7070;*/
}

.contact-form label.error {
  background-color: #d82132;
  bottom: 100%;
  color: #fff;
  font-size: 0.7rem;
  margin-right: 0.9375rem;
  padding: 0 5px;
  position: absolute;
  right: 0;
}

.contact-form input[type="submit"] {
	font-weight: bold;
	margin: 0;
	outline: 0;
	vertical-align: middle;
}

.loader-overlay {
  display: inline-block;
  position: relative;
}

.typing-loader-warp {
  background-color: #7647a7;
  bottom: 1px;
  display: none;
  left: 1px;
  position: absolute;
  right: 1px;
  top: 1px;
  z-index: 1;
}

.loadmore-overlay .typing-loader-warp {
  background-color: #f8f8f8;
}


/*Typing Loader*/
.typing_loader {
  border-radius: 50%;
  bottom: 0;
  height: 6px;
  left: 0;
  margin: auto auto auto 45px;
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;

  -webkit-animation: typing 1s linear infinite alternate;
  -moz-animation: Typing 1s linear infinite alternate;
   animation: typing 1s linear infinite alternate;
}

.loadmore-overlay .typing_loader {
  margin: auto auto auto 35px;

  -webkit-animation: typing_2 1s linear infinite alternate;
  -moz-animation: typing_2 1s linear infinite alternate;
   animation: typing_2 1s linear infinite alternate;
}

@-webkit-keyframes typing {
    0% { background-color: rgba(255,255,255, 1); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,0.2); }
    25% { background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,0.2); }
    75% { background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,1); }
}

@-moz-keyframes typing {
    0% { background-color: rgba(255,255,255, 1); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,0.2); }
    25% { background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,0.2); }
    75% { background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,1); }
}

@keyframes typing {
    0% { background-color: rgba(255,255,255, 1); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,0.2); }
    25% { background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,0.2); }
    75% { background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,1); }
}

/* Typing 2 */
@-webkit-keyframes typing_2 {
    0% { background-color: rgba(118,71,167, 1); box-shadow: 12px 0px 0px 0px rgba(118,71,167,0.2), 24px 0px 0px 0px rgba(118,71,167,0.2); }
    25% { background-color: rgba(118,71,167, 0.4); box-shadow: 12px 0px 0px 0px rgba(118,71,167,0.2), 24px 0px 0px 0px rgba(118,71,167,0.2); }
    75% { background-color: rgba(118,71,167, 0.4); box-shadow: 12px 0px 0px 0px rgba(118,71,167,0.2), 24px 0px 0px 0px rgba(118,71,167,1); }
}

@-moz-keyframes typing_2 {
    0% { background-color: rgba(118,71,167, 1); box-shadow: 12px 0px 0px 0px rgba(118,71,167,0.2), 24px 0px 0px 0px rgba(118,71,167,0.2); }
    25% { background-color: rgba(118,71,167, 0.4); box-shadow: 12px 0px 0px 0px rgba(118,71,167,0.2), 24px 0px 0px 0px rgba(118,71,167,0.2); }
    75% { background-color: rgba(118,71,167, 0.4); box-shadow: 12px 0px 0px 0px rgba(118,71,167,0.2), 24px 0px 0px 0px rgba(118,71,167,1); }
}

@keyframes typing_2 {
    0% { background-color: rgba(118,71,167, 1); box-shadow: 12px 0px 0px 0px rgba(118,71,167,0.2), 24px 0px 0px 0px rgba(118,71,167,0.2); }
    25% { background-color: rgba(118,71,167, 0.4); box-shadow: 12px 0px 0px 0px rgba(118,71,167,0.2), 24px 0px 0px 0px rgba(118,71,167,0.2); }
    75% { background-color: rgba(118,71,167, 0.4); box-shadow: 12px 0px 0px 0px rgba(118,71,167,0.2), 24px 0px 0px 0px rgba(118,71,167,1); }
}



#contactResponse { display: none; }

.contact-form .callout.success {
  background-color: #80c5a5;
  /*background-color: transparent;*/
  border-color: transparent;
  color: #fff;
  margin: 25px 0 0;
  padding: 0.3rem;
}

@media screen and (max-width: 820px) {
  .contact-form label.error {
    margin-right: 0.625rem;
  }

  .contact-item,
  .contact-item:last-child { margin-bottom: 40px; }
}

/* -------------------------------------------------------------------
  x. Google map
------------------------------------------------------------------- */
.google-map-section { padding: 0; }

.gmap_container {
  background-color: #ddd;
	height: 350px;
	width: 100%;
}

/* -------------------------------------------------------------------
  x. Works Page
------------------------------------------------------------------- */
/* -------------------------
  x. Category Panel
-------------------------- */
.category-panel {
  opacity: 0;
  left: 0;
  padding-left: 40px;
  position: fixed;
  top: 35%;
  width: 240px;
  z-index: 40;
}

.category-panel.closed { margin-left: -200px; }

.category-panel .category-panel-switch,
.category-panel .category-panel-content {
  background-color: #FFF;
  border: 1px solid #ddd;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left: 0;
  z-index: 50;

  -webkit-box-shadow: -2px 0px 11px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: -2px 0px 11px rgba(0, 0, 0, 0.12);
  box-shadow: -2px 0px 11px rgba(0, 0, 0, 0.12);
}

.category-panel .category-panel-switch {
  position: absolute;
  top: 15px;
  right: 0;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  font-size: 22px;
  cursor:pointer;
}

.category-panel .category-panel-switch:hover { font-size:28px; color:#000; }

.category-panel .category-panel-content {
  padding: 10px 20px;
  position: relative;
  right:40px;
  top:0;
}

.category-panel .category-panel-content .heading {
  font-weight: 900;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* -------------------------
  x. Category Dropdown
-------------------------- */
.category-dropddown {
  background-color: #fff;
  margin-bottom: 1rem;
  position: relative;
  text-transform: uppercase;
  width: 100%;
}

.category-dropddown h3 {
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>") no-repeat right -16px center;
  background-size: 9px 6px;
  background-origin: content-box;
  border: 1px solid #cacaca;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 0;
  padding: 9px 26px 9px 10px;
}

.category-dropddown h3 span {
  display: block;
  line-height: 18px;
  overflow: hidden;
  position: relative;
}

.category-dropddown ul,
.category-dropddown ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-dropddown ul {
  border: 1px solid #cacaca;
  border-top: 0 none;
  display: none;
  left: 0;
  max-height: 140px;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  width: 100%;
}

@media screen and (max-height: 420px) {
  .category-dropddown ul {
    border-bottom: 0 none;
    border-top: 1px solid #cacaca;
    bottom: 100%;
    top: auto;
  }
}

.category-dropddown ul li {
  background-color: #fff;
  border-top: 1px solid #cacaca;
  color: #0a0a0a;
  cursor: pointer;
  font-size: 14px;
  padding: 5px 10px;
}

.category-dropddown ul li:first-child { border-top: 0 none; }

.category-dropddown ul li.current,
.category-dropddown ul li:hover {
  background-color: #3399ff;
  color: #fff;
}

/* -------------------------
  x. Links Catching
-------------------------- */
body.introducing .body-container-fluid { opacity: 0; }

body.introduced .body-container-fluid {
  opacity: 1;

  -webkit-transition: opacity 0.6s ease;
          transition: opacity 0.6s ease;
}

body.introduced.leaving-final .body-container-fluid { opacity: 0; }

body.introduced #header {
  position: relative;
  top: 0;

  -webkit-transition: top 0.6s ease 0.2s;
          transition: top 0.6s ease 0.2s;
}

body.introducing #header,
body.introduced.leaving-final #header { top: -120px; }

body.introduced .menu-icon {
  -webkit-transition: top 0.6s ease 0.2s;
          transition: top 0.6s ease 0.2s;
}

body.introducing .menu-icon,
body.introduced.leaving-final .menu-icon { top: -120px; }

body.introduced.leaving-final .off-canvas.is-open {
  -webkit-transform: translateX(300px);
      -ms-transform: translateX(300px);
          transform: translateX(300px);
}

/* -------------------------
  x. Page Loader
-------------------------- */
.preloader-wrap {
  background-color: hsla(0,100%, 100%, 1);
  bottom: 0;
  display: table;
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  z-index : 999;
}

.preloader-inner {
  display: table-cell;
  opacity: 0;
  padding: 1rem;
  vertical-align: middle;
}

.preloader {
  border: 2px solid #69af23;
  border-radius: 20px;
  height: 30px;
  margin: 0 auto;
  max-width: 500px;
  width: 100%;
}

.preloader:after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.pretrackbar {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  overflow: hidden;
  position: relative;
  opacity: 0.99;
}

.preloadbar {
  width: 0%;
  height: 100%;
  background: repeating-linear-gradient(
  45deg,
    #008737,
    #008737 10px,
    #69af23 10px,
    #69af23 20px
  ); /* Stripes Background Gradient */
  box-shadow: 0px 0px 14px 1px #008737;
  position: absolute;
  top: 0;
  left: 0;
  animation: flicker 5s infinite;
  overflow: hidden;
}

.percentage {
  font-weight: 300;
  margin: 0 auto;
  max-width: 500px;
  text-align: center;
  width: 100%;
}

/* -------------------------------------------------------------------
  x. 404 Page
------------------------------------------------------------------- */
.page-not-found-section .section-info { margin-bottom: 0; }

.page-not-found-section .anchor-link {
  border-bottom: 1px solid #1468a0;
  color: #1468a0;
  font-size: 16px;
  padding-bottom: 3px;
  text-transform: uppercase;
}

.page-not-found-section .anchor-link:hover {
  border-bottom-color: #008737;
  color: #008737;
}

.float{
  line-height: 58px;
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
  z-index:100;
}

.my-float{
	margin-top:16px;
}