h1 {
  font-family: 'Raleway', sans-serif !important;
}

h2 {
  font-family: 'Raleway', sans-serif !important;
}

h3 {
  font-family: 'Raleway', sans-serif !important;
}

h4 {
  font-family: 'Raleway', sans-serif !important;
}

h5 {
  font-family: 'Raleway', sans-serif !important;
}

h6 {
  font-family: 'Raleway', sans-serif !important;
}


.footer {
  background: #222222;
  color: #7d7d7d;
  padding: 10px;
  line-height: 20px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 10px;
}

.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;

  margin-top: 25px;
}

li {
  display: inline;
  text-decoration: none;
  padding-right: 30px;
  font-family: sans-serif;
}

h3 {
  text-align: center;
  padding-bottom: 10px;
  font-weight: 200 !important;
  letter-spacing: 1px;
}

p {
  font-family: sans-serif;
    font-weight: 200;
  line-height: 28px;
  font-size: 15px;
  padding-left: 20px;
  padding-right: 20px;

}

li:hover {
  color: black;
}

.pagetitle {
  color: #4b4c4b;
  text-decoration: none;
  font-weight: 400;
  font-size: 34px;
  float: right;
  font-family: sans-serif;
}

.navbar {
  margin-bottom: 0 !important;
}

.button1 {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 200;
  background: white;
  border: 0.5px solid black;
  cursor: pointer;
  text-decoration: none;
  color: black;
  padding: 10px;
}

.button1:hover {
  background: black;
  color: white;
  cursor: pointer;
}


#contact_form input {
  width: 90%;
  height: 40px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 200;
  background: white;
  border: 0.5px solid black;
  cursor: pointer;
  text-decoration: none;
  color: black;
  border-radius: 0;
}

.cont_form input[type="text"] {
  width: 90%;
  height: 40px;
  line-height: 40px;
  border: 0.5px solid #adadad;
  margin-bottom: 10px;
  border-radius: 3px;
  font-size: 13px;
  color: #000;
  padding-left: 10px;
}

input:valid,
input:in-range {

  border: 0.5px solid #adadad;
  height: 35px;
  line-height: 35px;
  margin-right: 10px;
  border-radius: 3px;
  font-size: 13px;
  color: #000;
  padding-left: 10px;
}

#contact_form textarea {
  width: 90%;
  height: 40px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 200;
  background: white;
  border: 0.5px solid black;
  cursor: pointer;
  text-decoration: none;
  color: black;
  padding: 10px;
  border-radius: 0;
}

.cont_form textarea {
  width: 90%;
  height: 70px;
  border: 0.5px solid #adadad;
  margin-bottom: 10px;
  border-radius: 3px;
  font-size: 13px;
  color: #000;
  padding-left: 10px;
  padding-top: 10px;
}

.cont_form input:focus,
.cont_form textarea:focus,
input:valid:focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(248, 25, 14, 0.8);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(248, 25, 14, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(248, 25, 14, 0.8);
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {

  background-color: transparent;
  width: 250px;
  height: 350px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  background-size: auto;
  background-repeat: no-repeat;
  
  /* Remove this if you don't want the 3D effect */

}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;

}

/* Style the back side */
.flip-card-back {

  color: white;
  transform: rotateY(-180deg);

}

@media only screen and (max-width: 880px) {
  img.splashlogo {
    top: 3em !important;
    position: fixed !important;
    width: 300px !important;
    left: 7em !important;
  }
}

@media only screen and (max-width: 450px) {
  img.splashlogo {
    top: 50% !important;
    position: fixed !important;
    width: 300px !important;
    left: 2% !important;
  }
}

@media only screen and (max-width: 450px) {
  .splash {
    width: 300% !important;
  }

  @keyframes breath {
    0% {
      background-size: 100% auto;
      -webkit-filter: grayscale(100%);
    }

    50% {
      background-size: 110% auto;
    }

    100% {
      background-size: 320% auto;
      -webkit-filter: grayscale(0);
    }
  }
}

.splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(assets/img/splashscreen.jpg);
  animation: breath 4s linear infinite;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 999999;
  color: white;
  font-size: 110px;
  text-align: center;
}


.splash.display-none {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(assets/img/splashscreen.jpg);
  animation: breath 4s linear infinite;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -10;
  color: white;
  font-size: 60px;
  text-align: center;
  transition: all 2s;
}

@keyframes breath {
  0% {
    background-size: 140% auto;
    opacity: 0;
    -webkit-filter: grayscale(100%);
  }

  50% {
    background-size: 120% auto;
    opacity: 1;
  }

  100% {
    background-size: 100% auto;
    opacity: 1;
    -webkit-filter: grayscale(0%);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fadein {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
  width: 440px;
}

h1 {
  font-family: sans-serif;
  font-weight: 200;
}

@media only screen and (max-width: 600px) {
  img.homelogo {
    width: 185px !important;
  }
}

@media only screen and (max-width: 880px) {
  img.homelogo {
    width: 185px !important;
  }
}

@media only screen and (max-width: 880px) {
  map {
    width: 250px;
  }
}

.homelogo {
  animation: scale 2s forwards;
  width: 220px;

}

.homeproject {
  width: 90px;
}

@media only screen and (max-width: 880px) {
  img.homeproject {
    width: 45px;
  }
}

@keyframes scale {
  0% {
    opacity: 0;
    transform: scale(5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}



.aboutcard {
  border: 1px solid black;
  width: 100%;
  align-content: center;
  background: #252525;
  padding-bottom: 30px;
  padding-top: 30px;
}

.aboutcontainer {
  padding: 0 3px;
  text-align: center;
  color: #9b9b9b;
}

.aboutcontainer::after,
.row::after {
  content: "";
  clear: both;
  display: table;
}


.abouttitle {
  color: grey;
  text-align: center;
}

.aboutbutton {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.aboutbutton:hover {
  background-color: #555;
}

h1 {
  text-align: center;
}


.navbar-nav {
  margin: 14.5px 25px !important;
}



.aboutlogoleft {

  width: 200px;
  animation-delay: 4s;
}

@keyframes aboutlogoleft {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.heading {
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 25px;
  margin-top: 20px;
  margin-bottom: 20px;

}

.serviceimage1 {
  width: 500px;
  text-align: center;
  margin: auto;
  display: block;
}


.owl-carousel .owl-item img:hover {
  transform: scale(1) !important;
}

.owl-item cloned {
  width: 60px !important;
}

.owl-item active {
  width: 60px !important;
}

.ingle logo {
  width: 60px !important;
}

.col-xs-2 {
  width: 19.666667% !important;
  color: #FFF;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.col-half-offset {}

.cbp-l-filters-buttonCenter .cbp-filter-item.cbp-filter-item-active {
  color: #cccccc;
  border-color: #e2e2e2;
  cursor: default;
  background: #252525;
}

.cbp-l-filters-buttonCenter .cbp-filter-item {
  color: #cccccc;
  border-color: #e2e2e2;
  cursor: default;
  background: #252525 !important;
}

.single-logo {
  width: 60px !important;
}

.owl-item {
  width: 60px !important;
}

.portfolio-filter {
  text-align: center;
  display: block;
  margin-top: 30px;
}


.portfolio-filter-elements {
  border: 1px solid grey;
  padding: 10px;
  margin-right: 30px;
  background-color: black;
  color: rgb(128, 128, 128);
}

.portfolio-filter-elements .current {
  color: white !important;

}

.navbar .current {

  color: white !important;
  position: fixed !important;
  right: 0px;
  font-size: 20px;
  text-align: right !important;
  animation-name: leftslide;
  animation-duration: 2s;
  animation-direction: normal;
}

.menu1:hover span {
  display: none
}

.menu1:hover:before {
  content: "WHO WE ARE"
}

.menu2:hover span {
  display: none
}

.menu2:hover:before {
  content: "WHY ELAAN"
}

.menu3:hover span {
  display: none
}

.menu3:hover:before {
  content: "WHAT WE DO"
}

.menu4:hover span {
  display: none
}

.menu4:hover:before {
  content: "OUR PORTFOLIO"
}

.menu5:hover span {
  display: none
}

.menu5:hover:before {
  content: "MEET US"
}


body {
  animation: fadeInAnimation 4s ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.owl-carousel {
  width: 500px;
  text-align: center;
  margin: auto;
  display: block;
  margin-bottom: 10%;
  background-color: #f5f5f5;
}

.flip-back-text {
  font-size: 15px;
  color: white;
  line-height: 23px;
  padding:10px 25px 25px 25px;
  font-weight: 400;

}

.navbar-right {
  animation-name: leftslide;
  animation-duration: 2s;
  animation-direction: alternate-reverse;
  position: relative;
  right: 0px;

}

@keyframes leftslide {
  0% {
    right: 1200px;
  }

  100% {
    right: 0px;
  }
}

.homelogotagline1 {
  width: 110px;
  animation: scaletagline 2s forwards;
  animation-delay: 2s;
  opacity: 0;
}

.homelogotagline2 {
  width: 110px;
  animation: scaletagline 2s forwards;
  animation-delay: 4s;
  opacity: 0;
}

.homelogotagline3 {
  width: 83px;
  animation: scaletagline 2s forwards;
  animation-delay: 6s;
  opacity: 0;
}

@keyframes scaletagline {
  0% {
    opacity: 0;
    transform: scale(5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}


.owl-stage-outer {
  animation: homeproject1 2s forwards;
  opacity: 0;
  animation-delay: 6s;
}

@keyframes homeproject1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.owl-dots {
  animation: homeproject1 2s forwards;
  opacity: 0;
  animation-delay: 8s;
}

.homeback {
  margin: 0;
  padding: 0;
  width: 100%;
  animation: breath 3s linear;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background: url(assets/img/splashscreen.jpg);
  padding-bottom: 3%;
}

.flip-card-front-text {
  filter: drop-shadow(0px 1px 1px black);
  font-size: 60px;
  font-family: sans-serif;
  font-weight: 600;
  transform: rotate(-90deg);
  padding-top: 250px;
  color: #18ce1ed4;
  margin-left: -25%;
}

.owl-item {
  border: 1px solid white;
}


.navbar-inverse .navbar-nav>li>a {
  color: #a2a0a0 !important;
}

.navbar-inverse .navbar-nav>li>a:hover {
  color: #fff !important;
}

.navbar-inverse .navbar-nav>li>a:active {
  color: #fff;
}

.navbar-inverse .navbar-nav>li>a:visited {
  color: #fff;
}