@charset "UTF-8";
/* CSS Document */
/* GLOBALS START */ :root {
  --lightBtn: rgba(244, 244, 244, 0.7);
  --lightBg: #eef5ff;
  --lightColor: #FFBD07;
  --textColor: #141414;
  --cardBg: #0A2028;
  --cardColor: #f4f4f4;
  --blue: #405CA9;
  --bg: #AAAAAA;
  --white: #fff;
  --menu-border: #AAAAAA;
  --menu-color: #fff;
  --menu-itemBg: #YOUR SUCCESS, IS MY SUCCESS.;
}
.dark {
  background: var(--lightBg);
  color: var(--textColor);
  --lightBtn: rgba(244, 244, 244, 0.4);
  --lightBg: linear-gradient(#141414, #28282C);
  --lightColor: #fff;
  --textColor: #f4f4f4;
  --cardBg: #f4f4f4;
  --cardColor: #141414;
  --menu-border: #AAAAAA;
  --menu-color: #28282C;
  --menu-itemBg: #28282C;
  --white: #28282C;
}
*, *:before, *:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
	overflow-x: hidden;
}
html, body {
  width: 100vw;
  background: var(--lightBg);
}
body {
  color: var(--textColor);
  font: normal 1rem/1.45rem;
  font-family: 'Dosis', sans-serif;
  font-weight: 600;
  font-style: italic;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  scroll-behavior: smooth;
  line-height: 1rem;
}
main {
  overflow-x: hidden;
}
h1 {
  font-size: 80px;
  font-weight: bolder;
  line-height: 7rem;
}
h2 {
  font-size: 44px;
  font-weight: bolder;
  line-height: 2rem;
}
h3 {
  font-size: 36px;
  font-weight: 900;
  line-height: 2rem;
}
h4 {
  font-size: 29px;
  font-weight: 700;
  margin: 40px;
  line-height: 1rem;
}
@media only screen and (max-width: 768px) {
  h1 {
    font-size: 66px;
    font-weight: bolder;
    line-height: 4rem;
  }
  h2 {
    font-size: 33px;
    font-weight: bold;
    line-height: 2rem;
  }
  h3 {
    font-size: 24px;
    font-weight: 900;
  }
  h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 40px;
    line-height: 30px;
  }
}
button {
  background: none;
  border: none;
  color: #fff;
  font-size: 100%;
  font-family: 'Dosis', sans-serif;
  font-weight: 500;
  font-style: oblique;
  width: 100%;
  cursor: pointer;
}
@media only screen and (max-width: 600px) {
  h1 {
    font-size: 44px;
    font-weight: bolder;
    line-height: 4rem;
  }
}
.title-area {
	   background: var(--textColor);
    color: var(--cardColor);
}
.title {
  margin: 25px 0px
}
.hero-text {
  text-align: left;
  padding: 50px;
  position: absolute;
  font-size: 44px;
  font-weight: bolder;
  font-variant-caps: all-petite-caps;
}
.text-box {
  padding: 0px 200px;
}
.image-box {
  max-width: 800px;
  margin: auto;
  padding: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
a.js-tilt {
  min-width: 700px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: 10px solid var(--bg);
  border-radius: 20px;
  transform-style: preserve-3d;
}
a.js-tilt > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.2s ease;
}
a.js-tilt:hover > svg {
  transform: translateZ(-40px);
}
.mission-img {
  max-width: 700px;
}
@media only screen and (max-width: 1000px) {
a.js-tilt {
  min-width: 600px;
	}
}
@media only screen and (max-width: 800px) {
a.js-tilt {
  min-width: 500px;
	}
}
@media only screen and (max-width: 600px) {
a.js-tilt {
  min-width: 400px;
	}
}@media only screen and (max-width: 400px) {
a.js-tilt {
  min-width: 300px;
	}
}
@media only screen and (max-width: 650px) {
  .image-box {
    padding: 50px 25px 0px 25px;
  }
  .text-box {
    padding: 0px 50px;
  }
}
section {
  margin: 50px 0px 50px 0px;
}
.divider {
	width: 5%;
    display: block;
    height: 3px;
    background-color: var(--textColor);
    margin: 10px auto 20px;
	border-radius: 5px;
}
/* GLOBALS END */
/* MENU */
.menu {
  z-index: 99999;
  position: fixed;
  display: flex;
  margin-bottom: 200px;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.menu__trigger {
  position: absolute;
  top: 50px;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background-color: #28282c;
  border: 7px solid var(--bg);
  border-radius: 50%;
  padding: 20px;
  cursor: pointer;
  transition: .35s ease;
}
.menu__home {
  position: absolute;
  top: 50px;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background-color: #28282c;
  border: 7px solid var(--bg);
  border-radius: 50%;
  padding: 20px;
  cursor: pointer;
}
#home-btn:hover {
  background-color: #AAAAAA;
  transition: .35s ease;
}
.menu__base {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: .7;
}
.menu__item {
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 60px;
  height: 60px;
  top: 70px;
  padding-top: 17px;
  border-radius: 50%;
  background-color: var(--menu-itemBg);
  border: none;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, .05);
  z-index: -1000;
  opacity: 0;
}
.menu__item--0 {
  transition: .35s ease;
  left: calc(50% - 30px);
}
.menu__item--1 {
  transition: .35s ease .1s;
  left: calc(50% - 30px);
}
.menu__item--2 {
  transition: .35s ease .2s;
  right: calc(50% - 30px);
}
.is-rotate {
  transform: rotateZ(225deg);
  background-color: var(--bg);
}
.item-0 {
  top: 20px;
  left: calc(50% - 110px);
  opacity: 1;
}
.item-1 {
  top: -25px;
  left: calc(50% - 30px);
  opacity: 1;
}
.item-2 {
  top: 20px;
  right: calc(50% - 110px);
  opacity: 1;
}
/* MENU END */
/* HERO START */
.navbar {
  z-index: 9999;
  overflow: auto;
}
.site-branding {
  float: left;
  z-index: 9999;
  text-align: left;
  max-height: 50%;
  max-width: 50%;
  vertical-align: middle !important;
}
.custom-logo {
  height: 100px;
  width: 300px;
  margin-left: -40px;
}
@media only screen and (max-width: 650px) {
  .custom-logo {
    height: 67px;
    width: 200px;
  }
}
.hero {
  height: 50vh;
  display: contents;
}
.hero-image img {
  width: 100vw;
}
.section {
  margin-bottom: 100px;
  display: block;
  position: relative;
}
/* HERO END */
/* SWITCH LIGHT/DARK START */
header .container {
  float: right;
  margin-right: 25px;
  position: fixed;
  right: 0;
  z-index: 9999;
}
.container_toggle[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}
.switch_label {
  cursor: pointer;
  text-indent: -9999px;
  width: 55px;
  height: 30px;
  background: var(--lightBtn);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  position: relative;
}
.switch_label:after {
  content: "";
  background: var(--lightColor);
  width: 20px;
  height: 20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 4px;
  transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms;
}
.container_toggle:checked + .switch_label {
  background: var(--lightBtn);
}
.container_toggle:checked + .switch_label:after {
  left: calc(100% - 5px);
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
html.transition, html.transition *, html.transition *:before, html.transition *:after {
  transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 420ms !important;
  transition-delay: 0 !important;
}
/* SWITCH LIGHT/DARK END */
/* ABOUT SECTION START */
.about {
  position: relative;
}
/* ABOUT SECTION END */
/* SERVICES SECTION START */
.services {
  position: relative;
  margin-bottom: 50px;
}
.grid-cards {
  width: 100%;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  padding: 20px 20px 50px 20px;
  justify-items: center;
}
@media only screen and (max-width: 1100px) {
  .grid-cards {
    grid-template-columns: 50% 50%;
  }
}
@media only screen and (max-width: 650px) {
  .grid-cards {
    grid-template-columns: 100%;
  }
}
.grid-cards label {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  cursor: pointer;
  padding: 20px;
}
.card {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 600ms;
  transition: all 600ms;
  z-index: 20;
}
.card div {
  font-size: 44px;
  line-height: 50px;
  padding: 100px 0px;
  text-align: center;
  position: absolute;
  height: 100%;
  width: 100%;
  background: var(--cardBg);
  color: var(--cardColor);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 50px;
}
.card .front p {
  padding: 0px 20px 50px 20px;
  font-size: 14px;
  background: var(--lightBg);
  border-radius: 50px;
  color: var(--textColor);
  height: 10px;
  margin: 40px 80px 0px 80px;
}
.card .back {
  font-size: 16px;
  line-height: 25px;
  text-align: center;
  list-style: none;
  padding: 20px;
  background: linear-gradient(#141414, #28282C);
  color: #fff;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.grid-cards label:hover .card {
  -webkit-transform: rotateX(20deg);
  transform: rotateX(20deg);
  box-shadow: 0 20px 20px rgba(50, 50, 50, .2);
  border-radius: 50px;
}
.input-cards {
  display: none;
}
:checked + .card {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}
.grid-cards label:hover :checked + .card {
  transform: rotateX(160deg);
  -webkit-transform: rotateX(160deg);
  box-shadow: 0 20px 20px rgba(255, 255, 255, .2);
}
/* SERVICES SECTION END */
/* EXPERTISE SECTION START */
.grid-container-expertise {
  color: #fff;
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 40px 0px;
}
#expertise-1 {
  background-color: #28282C;
  padding: 50px 100px;
}
#expertise-2 {
  background-color: #AAAAAA;
  padding: 50px 100px;
  color: #28282C;
}
#expertise-3 {
  background-color: var(--lightBg);
  padding: 50px 100px;
  color: var(--textColor);
}
#expertise-4 {
  background-color: #28282C;
  padding: 50px 100px;
}
@media only screen and (max-width:768px) {
  .grid-container-expertise {
    grid-template-columns: 100%;
  }
}
.fa-code-fork {
  color: #28282c !important;
}
#expertise-3 .fa-home {
  color: var(--textColor) !important;
}
#expertise-icons {
  font-size: 3em;
  width: 50px;
  height: 50px;
  color: #f4f4f4;
  margin: 0 40px;
  animation: animate 3s linear infinite;
}
/* EXPERTISE SECTION END */
/* WORK SECTION START */
.work {
  margin-bottom: 150px;
  margin-top: 150px;
}
.work a {
  text-decoration: none;
}
.work .swiper-container-1 .swiper-slide:hover {
  transform: scale(1.01);
  -ms-transform: scale(1.01);
  -webkit-transform: scale(1.01);
  box-shadow: 0px 0px;
}
.work .swiper-container-1 .swiper-slide {
  box-shadow: 5px 10px #AAAAAA;
}
.work .swiper-container-1 .swiper-slide p {
  position: relative;
  color: var(--textColor);
  font-weight: 600;
  padding-top: 10px;
}
.work .swiper-container-1 .swiper-slide p:hover {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.work .swiper-container-1 .swiper-slide p:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--textColor);
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.2s ease-in 0s;
  transition: all 0.2s ease-in 0s;
}
.work .swiper-container-1 .swiper-slide p:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.swiper-container-1 {
  width: 100%;
  height: 250px;
  margin: 20px auto;
  display: flex;
  cursor: grab;
}
.swiper-wrapper {
  display: flex;
}
.swiper-container-1 .swiper-slide {
  text-align: center;
  font-size: 14px;
  color: #141414;
  background: rgba(122, 122, 122, 0.1);
  background-size: cover;
  background-position: bottom;
  border-radius: 50px;
  height: 300px;
  width: 250px !important;
  margin-right: 10px;
  margin-left: 10px;
  padding-top: 250px;
  padding-left: 10px;
  padding-right: 10px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}

#ukpp {
  background-image: url("../images/UKPPicon.svg");
}
#mfc {
  background-image: url("../images/MFClogo.svg");
}
#milkshake-media {
  background-image: url("../images/MILKSHAKE_media_logo.svg");
}
#monalisas {
  background-image: url("../images/theMonalisasLogo.svg");
}
#nbnii {
  background-image: url("../images/LogoNbnii.svg");
}
#eyeful {
  background-image: url("../images/eyefulLogo.svg");
}
#id {
  background-image: url("../images/IDlogo.svg");
}
#topaw {
  background-image: url("../images/topawLogo.svg");
}
#ajhomes {
  background-image: url("../images/AjHomesLogo.svg");
}
#fatman {
  background-image: url("../images/FATMANlogo.svg");
}
#tutemaki {
  background-image: url("../images/TutemakiLogo.svg");
}
/* WORK SECTION END */
/* CONNECT SECTION START */
.connect {
  height: 100% !important;
  overflow: hidden;
  padding-bottom: 50px;
}
.text-box-connect {
  color: #f4f4f4;
  padding-bottom: 20px
}
body:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
#field-box-1 {
  grid-area: name;
}
#field-box-2 {
  grid-area: company;
}
#field-box-3 {
  grid-area: phone;
}
#field-box-4 {
  grid-area: email;
}
#field-box-5 {
  grid-area: timeline;
}
#field-box-6 {
  grid-area: budget;
}
#field-box-7 {
  grid-area: description;
}
#field-box-8 {
  grid-area: file;
}
#field-box-9 {
  grid-area: honey;
}
#field-box-10 {
  grid-area: send;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'name name name company company company'
    'phone phone phone email email email'
    'timeline timeline timeline budget budget budget'
    'description description description description description description'
    'file file file honey honey honey'
    'send send send send send send';
  gap: 10px;
}
@media only screen and (max-width: 768px) {
  .grid-container {
    grid-template-areas:
      'name name name name name name'
      'company company company company company company'
      'phone phone phone phone phone phone'
      'email email email email email email'
      'timeline timeline timeline timeline timeline timeline'
      'budget budget budget budget budget budget'
      'description description description description description description'
      'file file file file file file'
      'honey honey honey honey honey honey'
      'send send send send send send';
  }
}
.form-box {
  position: relative;
  top: 50%;
  left: 50%;
  width: 90%;
  padding: 40px;
  transform: translate(-50%, 0%);
  background: rgba(0, 0, 0, .5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
  border-radius: 50px;
}
.form-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}
.form-box .field-box {
  position: relative;
}
.form-box .field-box .form-control {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.form-box .field-box .form-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
  width: 100%;
  text-align: left;
}
.form-box .field-box .form-control:focus ~ .form-label, .form-box .field-box .form-control:valid ~ .form-label {
  top: -20px;
  left: 0;
  color: #fff;
  font-size: 12px;
}
.form-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px;
  width: 40%;
}
.form-box a:hover {
  background: #141414;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #444545, 0 0 25px #444545, 0 0 50px #444545, 0 0 100px #444545;
}
.form-box a span {
  position: absolute;
  display: block;
}
.form-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f4f4f4);
  animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
.form-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #f4f4f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}
@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}
.form-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #f4f4f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}
@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}
.form-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #f4f4f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}
#inputAttachments {
  color: #fff;
  float: left;
}
@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
}
.g-recaptcha {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background: none !important;
    background: rgba(0, 0, 0, 0) !important;
    color: var(--textColor) !important;
}
#field-box-9-mobile {
	display: none;
}
@media only screen and (max-width: 768px) {
	#field-box-9-mobile {
		display:contents;
}
	#field-box-9 {
		display: none;
}
}
/* CONNECT SECTION END */
/* FOOTER START */
.sm-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
  width: 100vw;
}
#facebook, #behance, #linkedin, #instagram {
  font-size: 3em;
  width: 50px;
  height: 50px;
  color: var(--cardBg);
  margin: 0 40px;
  animation: animate 3s linear infinite;
  cursor: pointer;
  transition: 1s;
}
#facebook:hover, #behance:hover, #linkedin:hover, #instagram:hover {
    transform: scale(1.2) rotate(360deg);
}
@media only screen and (max-width: 450px) {
  #facebook, #behance, #linkedin, #instagram {
    margin: 0px 20px;
  }
}
@media only screen and (max-width: 300px) {
  #facebook, #behance, #linkedin, #instagram {
    margin: 0px 5px;
  }
}
#behance {
  animation-delay: 0.3s;
}
#linkedin {
  animation-delay: 0.7s;
}
#instagram {
  animation-delay: 0.1s;
}
@keyframes animate {
  from {
    filter: opacity-rotate(0deg);
  }
  to {
    filter: opacity-rotate(360deg);
  }
}
.footer-text {
  padding-bottom: 10px;
}
@media only screen and (max-width: 450px) {
  .footer-text {
    font-size: 12px;
  }
}
@media only screen and (max-width: 300px) {
  .footer-text {
    font-size: 9px;
  }
}
.footer-text a {
  color: var(--textColor);
}
/* FOOTER END */
.st0 {
  fill: var(--textColor);
}
.st1 {
  fill: #787878;
}
.st2 {
  fill: #CCCCCC;
}
.st3 {
  fill: #AEADAE;
}
.st4 {
  fill: #C9E2F2;
}
.st5 {
  fill: #FFFFFF;
}
.st6 {
  fill: #F0F1F2;
}
.st7 {
  fill: #CECFD0;
}
.st8 {
  fill: #323232;
}
.st9 {
  fill: var(--textColor);
}
.st10 {
  fill: var(--textColor);
}
.st11 {
  fill: var(--textColor);
}
section {
  opacity: 0;
  transition: opacity 0.1s;
}

@-webkit-keyframes fadeIn {
	 from {
		 opacity: 0;
		 -webkit-transform: translateY(0.5em);
		         transform: translateY(0.5em);
	}
	 to {
		 opacity: 1;
	}
}

@keyframes fadeIn {
	 from {
		 opacity: 0;
		 -webkit-transform: translateY(0.5em);
		         transform: translateY(0.5em);
	}
	 to {
		 opacity: 1;
	}
}

section.visible {
	 opacity: 0;
	 -webkit-animation-name: fadeIn;
	         animation-name: fadeIn;
	 -webkit-animation-delay: 0s;
	         animation-delay: 0s;
	 -webkit-animation-duration: 0.7s;
	         animation-duration: 0.7s;
	 -webkit-animation-fill-mode: forwards;
	         animation-fill-mode: forwards;
	 -webkit-animation-timing-function: ease-in-out;
	         animation-timing-function: ease-in-out;
}

section.visible .title {
	 opacity: 0;
	 -webkit-animation-name: fadeIn;
	         animation-name: fadeIn;
	 -webkit-animation-delay: 0s;
	         animation-delay: 0s;
	 -webkit-animation-duration: 0.7s;
	         animation-duration: 0.7s;
	 -webkit-animation-fill-mode: forwards;
	         animation-fill-mode: forwards;
	 -webkit-animation-timing-function: ease-in-out;
	         animation-timing-function: ease-in-out;
}
section.visible .text-box {
	 opacity: 0;
	 -webkit-animation-name: fadeIn;
	         animation-name: fadeIn;
	 -webkit-animation-delay: 0.7s;
	         animation-delay: 0.7s;
	 -webkit-animation-duration: 0.7s;
	         animation-duration: 0.7s;
	 -webkit-animation-fill-mode: forwards;
	         animation-fill-mode: forwards;
	 -webkit-animation-timing-function: ease-in-out;
	         animation-timing-function: ease-in-out;
}

section.visible .content-box {
	 opacity: 0;
	 -webkit-animation-name: fadeIn;
	         animation-name: fadeIn;
	 -webkit-animation-delay: 1s;
	         animation-delay: 1s;
	 -webkit-animation-duration: 0.7s;
	         animation-duration: 0.7s;
	 -webkit-animation-fill-mode: forwards;
	         animation-fill-mode: forwards;
	 -webkit-animation-timing-function: ease-in;
	         animation-timing-function: ease-in;
}