body {
  background-color : white;
  font-family      : 'Open Sans',
                     Arial;
  font-size        : 12px;
}

h1 {
  text-transform : uppercase;
  font-size      : 22px;
}

p {
  margin  : 0;
  padding : 0;
}

.section-faq .omschrijving {
  margin    : 20px 0 10px 0;
  font-size : 15px;
}

.section-faq h3 {
  margin    : 0;
  padding   : 0;
  font-size : 15px;
}

.section-faq .panel .panel-heading {
  padding       : 10px 20px;
  border-bottom : 2px solid #fff;
  background    : #ebeaeb;
}

.section-faq .panel .panel-body {
  padding    : 20px;
  background : #f8f7f8;
  font-size  : 15px;
}

.section-faq .geen-items {
  font-size : 15px;
}

@-webkit-keyframes textAnimation {
  0% {
    opacity : 0;
  }

  50% {
    opacity : 0;
  }

  100% {
    opacity : 1;
  }
}

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

  50% {
    opacity : 0;
  }

  100% {
    opacity : 1;
  }
}

@-webkit-keyframes xAnimation {
  0% {
    stroke-dashoffset : 1160;
  }

  100% {
    stroke-dashoffset : 0;
  }
}

@keyframes xAnimation {
  0% {
    stroke-dashoffset : 1160;
  }

  100% {
    stroke-dashoffset : 0;
  }
}

body,
html {
  color       : #939598;
  font-family : 'Proxima Nova',
                sans-serif;
  font-size   : 16px;
  font-weight : 400px;
  line-height : 26px;
}

h1 {
  text-align     : center;
  text-transform : none;
  font-size      : 40px;
}

h1.with-subtitle {
  margin-bottom : 0px;
}

@media
  screen
  and (max-width : 991px) {
  header .header-video {
    height : 409px;
  }
}

@media
  screen
  and (max-width : 767.97px) {
  header .header-video {
    height : 565px;
  }
}

@media
  screen
  and (max-width : 768.97px) {
  header .header-video {
    height : 523px;
  }
}

header .header-video video {
  width      : 100%;
  min-height : 648px;
}

header .navbar .navbar-brand {
  position : relative;
  top      : -5px;
  left     : -15px;
}

header .navbar .navbar-brand .logo svg,
header .navbar .navbar-brand img svg {
  height : 80px;
}

header .navbar .navbar-brand .logo.animated svg .x,
header .navbar .navbar-brand .logo:hover svg .x,
header .navbar .navbar-brand img.animated svg .x,
header .navbar .navbar-brand img:hover svg .x {
  stroke-dasharray                  : 1160;
  -webkit-animation-duration        : 2000ms;
  animation-duration                : 2000ms;
  -webkit-animation-iteration-count : 1;
  animation-iteration-count         : 1;
  -webkit-animation-name            : xAnimation;
  animation-name                    : xAnimation;
  -webkit-animation-timing-function : ease;
  animation-timing-function         : ease;
}

header .navbar .navbar-brand .logo.animated svg .text,
header .navbar .navbar-brand .logo:hover svg .text,
header .navbar .navbar-brand img.animated svg .text,
header .navbar .navbar-brand img:hover svg .text {
  -webkit-animation-duration        : 2000ms;
  animation-duration                : 2000ms;
  -webkit-animation-iteration-count : 1;
  animation-iteration-count         : 1;
  -webkit-animation-name            : textAnimation;
  animation-name                    : textAnimation;
  -webkit-animation-timing-function : ease;
  animation-timing-function         : ease;
}

@media
  screen
  and (max-width : 991px) {
  header .navbar .navbar-brand .logo,
  header .navbar .navbar-brand img {
    height : 65px;
  }
}

header .navbar .navbar-nav li {
  position : relative;
}

header .navbar .navbar-nav li a {
  position       : relative;
  padding        : 25px 20px;
  color          : #fff;
  text-transform : uppercase;
  font-size      : 14px;
}

header .navbar .navbar-nav li:before {
  content            : "";
  position           : absolute;
  right              : 50%;
  bottom             : 20px;
  left               : 50%;
  height             : 2px;
  opacity            : 0;
  background-color   : #fff;
  -webkit-transition : all .15s ease-in-out;
  transition         : all .15s ease-in-out;
}

@media
  screen
  and (max-width : 991px) {
  header .navbar .navbar-nav li a {
    border-radius      : 10px;
    background-color   : rgba(255,255,255,0);
    -webkit-transition : background-color .15s ease-in-out;
    transition         : background-color .15s ease-in-out;
  }

  header .navbar .navbar-nav li:before {
    display : none;
  }
}

header .navbar .navbar-toggler {
  outline : none;
}

header .navbar .navbar-toggler .navbar-toggler-icon {
  position : relative;
  top      : 5px;
  outline  : none;
}

header .navbar .navbar-toggler .navbar-toggler-icon .line {
  height             : 2px;
  margin-bottom      : 7px;
  background-color   : #fff;
  -webkit-transition : all .15s ease-in-out;
  transition         : all .15s ease-in-out;
}

header .navbar .navbar-toggler .navbar-toggler-icon .line:first-of-type {
  -webkit-transform : translateX(0);
  transform         : translateX(0);
}

header .navbar .navbar-toggler .navbar-toggler-icon .line:nth-of-type(3) {
  -webkit-transform : translateX(0);
  transform         : translateX(0);
}

header .navbar .navbar-toggler .navbar-toggler-icon .line:nth-of-type(3) {
  -webkit-transform : translateX(0);
  transform         : translateX(0);
}

header .navbar .navbar-toggler .navbar-toggler-icon:hover {
  cursor : pointer;
}

header .navbar .navbar-toggler .navbar-toggler-icon:hover .line:first-of-type {
  -webkit-transform : translateX(5px);
  transform         : translateX(5px);
}

header .navbar .navbar-toggler .navbar-toggler-icon:hover .line:nth-of-type(3) {
  -webkit-transform : translateX(-16px);
  transform         : translateX(-16px);
}

header .navbar .navbar-toggler .navbar-toggler-icon:hover .line:nth-of-type(3) {
  -webkit-transform : translateX(3px);
  transform         : translateX(3px);
}

.hero {
  padding          : 200px 0;
  color            : #fff;
  background-image : url("/assets/www/img/graph.svg");
  background-size  : 100% 100%;
  text-align       : center;
  font-size        : 32px;
  font-weight      : 500;
  line-height      : 45px;
}

@media
  screen
  and (max-width : 1200px) {
  .hero {
    font-size : 28px;
  }
}

@media
  screen
  and (max-width : 991px) {
  .hero {
    padding     : 100px 0;
    font-size   : 22px;
    line-height : 32px;
  }
}

@media
  screen
  and (max-width : 768px) {
  .hero {
    padding     : 100px 0;
    font-size   : 30px;
    line-height : 42px;
  }
}

@media
  screen
  and (max-width : 510px) {
  .hero {
    text-align  : left;
    font-size   : 28px;
    line-height : 35px;
  }

  .hero br {
    display : none;
  }
}

@media
  screen
  and (max-width : 400px) {
  .hero {
    font-size   : 22px;
    line-height : 32px;
  }
}

.hero .btn {
  margin-top       : 14px;
  border           : 2px solid #fff;
  background-image : none;
  background-color : transparent;
  font-size        : 18px;
}

.intro {
  padding : 100px 0;
}

@media
  screen
  and (max-width : 990px) {
  .intro {
    padding : 10px 0 60px;
  }
}

section.team {
  padding : 80px 0;
}

.team-member {
  margin-bottom : 40px;
  text-align    : center;
}

.team-member img {
  display   : table;
  width     : 100%;
  max-width : 220px;
  margin    : 0 auto;
}

.team-member .subtitle {
  position : relative;
  top      : -10px;
}

.subtitle {
  color          : #CCCCCC;
  text-transform : uppercase;
  font-size      : 12px;
  letter-spacing : 1px;
}

.subtitle.after-title {
  display       : block;
  margin-bottom : 70px;
  text-align    : center;
}

section.counters {
  background-image : -webkit-gradient(linear, left top, right top, color-stop(50%, #F6F6F6), color-stop(50%, #e7e7e7));
  background-image : linear-gradient(
                       to right,
                       #F6F6F6 50%,
                       #e7e7e7 50%
                     );
}

section.counters .container {
  padding          : 50px 0 40px;
  background-image : linear-gradient(
                       110deg,
                       #F6F6F6 33.01%,
                       #eee 33.01%,
                       #eee 66.01%,
                       #e7e7e7 66.01%
                     );
}

@media
  screen
  and (max-width : 768px) {
  section.counters {
    background-image : none;
    background-color : #F6F6F6;
  }

  section.counters .container {
    background-image : none;
  }
}

.counter {
  text-align : center;
}

.counter .number {
  color       : #414042;
  font-size   : 48px;
  line-height : 48px;
}

.counter .subtitle {
  color : #b3b3b3;
}

@media
  screen
  and (max-width : 768px) {
  .counter {
    padding : 20px 0;
  }
}

section.blog {
  padding : 80px 0;
}

.article {
  margin-bottom : 30px;
}

.article img {
  width : 100%;
}

.article .article-image-wrapper {
  position : relative;
}

.article .article-image-wrapper:before {
  content            : "";
  position           : absolute;
  right              : 0;
  bottom             : 0;
  left               : 0;
  height             : 0;
  opacity            : 0;
  background-color   : rgba(24,187,185,0.8);
  -webkit-transition : all .2s ease-in-out;
  transition         : all .2s ease-in-out;
}

.article .article-image-wrapper:after {
  content            : "\f002";
  position           : absolute;
  top                : 50%;
  left               : 50%;
  color              : #fff;
  opacity            : 0;
  font-family        : "FontAwesome",
                       sans-serif;
  font-size          : 40px;
  -webkit-transform  : translate(-50%, -50%);
  transform          : translate(-50%, -50%);
  -webkit-transition : all .3s ease-in-out;
  transition         : all .3s ease-in-out;
}

.article:hover .article-image-wrapper:before {
  height  : 100%;
  opacity : 1;
}

.article:hover .article-image-wrapper:after {
  opacity : 1;
}

.article .article-date {
  position         : absolute;
  top              : 10px;
  right            : 10px;
  width            : 60px;
  padding          : 10px 0;
  color            : #939598;
  background-color : #F6F6F6;
}

.article .article-date span {
  display    : block;
  color      : #939598;
  text-align : center;
}

.article .article-date span:first-of-type {
  font-size   : 36px;
  line-height : 40px;
}

.article .article-date span:nth-of-type(2) {
  text-transform : uppercase;
  font-size      : 16px;
  line-height    : 18px;
}

.article .article-date span:nth-of-type(3) {
  opacity     : .5;
  font-size   : 13px;
  line-height : 24px;
}

.article .article-description {
  position         : absolute;
  right            : 0;
  bottom           : 0;
  left             : 0;
  padding          : 10px 10px;
  color            : #fff;
  background-color : rgba(0,0,0,0.6);
}

.article .article-description span {
  margin-right     : 5px;
  padding          : 10px;
  color            : #fff;
  background-color : #18BBB9;
  line-height      : 36px;
}

.featured-project {
  background-image : -webkit-gradient(linear, left top, right top, color-stop(50%, #ececec), color-stop(50%, #F6F6F6));
  background-image : linear-gradient(
                       to right,
                       #ececec 50%,
                       #F6F6F6 50%
                     );
  background-color : #F6F6F6;
}

.featured-project .container {
  padding-top      : 50px;
  padding-bottom   : 50px;
  background-image : linear-gradient(
                       110deg,
                       #ececec 25%,
                       #F6F6F6 25%
                     );
}

.featured-project .subtitle {
  position : relative;
  top      : -30px;
}

.featured-project img {
  width : 100%;
}

@media
  screen
  and (max-width : 768px) {
  .featured-project {
    background-image : -webkit-gradient(linear, left top, left bottom, color-stop(25%, #ececec), color-stop(25%, #F6F6F6));
    background-image : linear-gradient(
                         to bottom,
                         #ececec 25%,
                         #F6F6F6 25%
                       );
  }

  .featured-project .container {
    background-image : none;
  }

  .featured-project img {
    margin-bottom : 30px;
  }
}

.btn {
  padding             : 13px 20px;
  color               : #fff !important;
  border              : none;
  background-image    : -webkit-gradient(linear, left top, right top, color-stop(50%, #18BBB9), color-stop(50%, #15a4a3));
  background-image    : linear-gradient(
                          to right,
                          #18BBB9 50%,
                          #15a4a3 50%
                        );
  background-color    : #18BBB9;
  background-position : 0%;
  background-size     : 200%;
  -webkit-transition  : all .15s ease-in-out;
  transition          : all .15s ease-in-out;
}

.btn.btn-accent {
  background-image : -webkit-gradient(linear, left top, right top, color-stop(50%, #3C92CF), color-stop(50%, #3085c2));
  background-image : linear-gradient(
                       to right,
                       #3C92CF 50%,
                       #3085c2 50%
                     );
}

.btn.btn-center {
  display : table;
  margin  : 0 auto;
}

.btn .la-angle-right {
  position  : relative;
  left      : 5px;
  font-size : 14px;
}

.copyright {
  padding    : 15px 0 30px;
  border-top : 1px solid rgba(0,0,0,0.2);
  font-size  : 14px;
}

.copyright .social i {
  width              : 30px;
  color              : #fff;
  border-radius      : 100%;
  background-color   : #414042;
  text-align         : center;
  line-height        : 30px;
  -webkit-transition : all .15s ease-in-out;
  transition         : all .15s ease-in-out;
}

.copyright .social i:hover {
  border-radius    : 0;
  background-color : #18BBB9;
}

.copyright .title {
  text-transform : uppercase;
}

.copyright .title span {
  color : #414042;
}

@media
  screen
  and (max-width : 480px) {
  .copyright .social {
    width         : 100%;
    margin-bottom : 15px;
    text-align    : center;
  }
}

.project-header-wrapper {
  background-position : center;
  background-size     : cover;
}

.project-header {
  margin-bottom    : 50px;
  padding          : 100px 0;
  color            : #fff;
  background-image : -webkit-gradient(linear, left top, right top, from(rgba(60,146,207,0.8)), to(rgba(24,187,185,0.8)));
  background-image : linear-gradient(
                       to right,
                       rgba(60,146,207,0.8),
                       rgba(24,187,185,0.8)
                     );
}

.project-header h1 {
  margin-bottom : 0;
  color         : #fff;
}

.project-header .subtitle {
  display       : block;
  margin-bottom : 0;
  color         : #fff;
  text-align    : center;
}

.page-project {
  padding : 70px 0;
}

.cms img {
  width : 100%;
}

.cms a {
  color : #18BBB9;
}

.project-navigation {
  margin-top : 60px;
}

.project-navigation .elevator {
  display    : table;
  max-width  : 300px;
  margin     : 30px auto;
  text-align : center;
}

.project-navigation .elevator .image {
  display       : table;
  width         : 50px;
  margin        : 0 auto;
  margin-bottom : 15px;
}

.project-navigation .elevator .image svg {
  overflow : visible;
}

.project-navigation .elevator .image svg .st0 {
  stroke             : #939598;
  -webkit-transition : all .15s ease-in-out;
  transition         : all .15s ease-in-out;
}

.project-navigation .elevator .image .arrow {
  -webkit-transform  : translateY(0);
  transform          : translateY(0);
  -webkit-transition : all .15s ease-in-out;
  transition         : all .15s ease-in-out;
}

.project-navigation .elevator .image .doors rect {
  width              : 15.7px;
  -webkit-transform  : translateX(-7px);
  transform          : translateX(-7px);
  -webkit-transition : all .15s ease-in-out;
  transition         : all .15s ease-in-out;
}

.project-navigation .elevator .image:hover .st0 {
  stroke : #18BBB9;
}

.project-navigation .elevator .image:hover .arrow {
  -webkit-transform : translateY(-10px);
  transform         : translateY(-10px);
}

.project-navigation .elevator .image:hover .doors rect {
  width             : 3.7px;
  -webkit-transform : translateX(0px);
  transform         : translateX(0px);
}

@media
  screen
  and (max-width : 400px) {
  .project-navigation .btn {
    display : none;
  }
}

.basic-page {
  padding : 70px 0;
}

.basic-page .subtitle {
  display    : block;
  text-align : center;
}

.contact-ctas {
  margin-top : 40px;
}

.contact-ctas .contact-cta {
  margin-bottom       : 30px;
  padding             : 30px;
  background-image    : -webkit-gradient(linear, left top, right top, color-stop(50%, #F6F6F6), color-stop(50%, #ececec));
  background-image    : linear-gradient(
                          to right,
                          #F6F6F6 50%,
                          #ececec 50%
                        );
  background-position : 0;
  background-size     : 200%;
  text-align          : center;
  -webkit-transition  : background-position .15s ease-in-out;
  transition          : background-position .15s ease-in-out;
}

.contact-ctas .contact-cta .subtitle {
  line-height : 18px;
}

.contact-ctas .contact-cta:hover {
  background-position : -100%;
}

textarea {
  height : 156px;
}

input,
textarea {
  width              : 100%;
  margin-bottom      : 15px;
  padding            : 7px 15px;
  border             : 1px solid #E6E6E6;
  outline            : none;
  -webkit-transition : all .15s ease-in-out;
  transition         : all .15s ease-in-out;
}

input:focus,
textarea:focus {
  border-color : #18BBB9;
}

.google-maps {
  position   : relative;
  margin-top : 50px;
}

.google-maps .map,
.google-maps .map-image {
  width : 50%;
  float : left;
}

.google-maps .map {
  height : 400px;
}

.google-maps .map-image {
  height              : 400px;
  background-position : center;
  background-size     : cover;
}

@media
  screen
  and (max-width : 900px) {
  .google-maps .map,
  .google-maps .map-image {
    width : 100%;
    float : none;
  }
}

.feature {
  margin-bottom : 50px;
}

hr {
  border-top : 1px solid #E6E6E6;
}

.project-small {
  margin-bottom      : 30px;
  -webkit-box-shadow : 0 0 0px rgba(0,0,0,0.1);
  box-shadow         : 0 0 0px rgba(0,0,0,0.1);
  -webkit-transition : all .15s ease-in-out;
  transition         : all .15s ease-in-out;
}

.project-small .project-small--image-wrapper {
  position : relative;
}

.project-small .project-small--image-wrapper .project-small--image-overlay {
  position            : absolute;
  top                 : 0;
  right               : 0;
  bottom              : 0;
  left                : 0;
  background-image    : -webkit-gradient(linear, left top, left bottom, from(transparent), to(#18BBB9));
  background-image    : linear-gradient(
                          to bottom,
                          transparent,
                          #18BBB9
                        );
  background-color    : transparent;
  background-repeat   : no-repeat;
  background-position : center bottom;
  background-size     : 100% 0;
  -webkit-transition  : all .25s ease-in-out;
  transition          : all .25s ease-in-out;
}

.project-small .project-small--image-wrapper .project-small--image-overlay:after,
.project-small .project-small--image-wrapper .project-small--image-overlay:before {
  content            : "";
  position           : absolute;
  top                : 15px;
  right              : 15px;
  bottom             : 15px;
  left               : 15px;
  border             : 1px solid rgba(255,255,255,0.8);
  -webkit-transition : all .4s ease-in-out;
  transition         : all .4s ease-in-out;
}

.project-small .project-small--image-wrapper .project-small--image-overlay:before {
  top          : 50%;
  bottom       : 50%;
  border-width : 0 1px;
}

.project-small .project-small--image-wrapper .project-small--image-overlay:after {
  right        : 50%;
  left         : 50%;
  border-width : 1px 0;
}

.project-small .project-small--image-wrapper .project-small--image-overlay .center {
  position           : absolute;
  top                : 50%;
  right              : 0;
  left               : 0;
  opacity            : 0;
  -webkit-transform  : translateY(-50%);
  transform          : translateY(-50%);
  -webkit-transition : all .15s ease-in-out;
  transition         : all .15s ease-in-out;
}

.project-small .project-small--image-wrapper .project-small--image-overlay .center span {
  display    : block;
  color      : #fff;
  text-align : center;
  text-align : center;
  font-size  : 20px;
}

.project-small .project-small--image-wrapper .project-small--image-overlay .center span:first-of-type {
  font-size : 24px;
}

.project-small .project-small--image-wrapper .project-small--image-overlay .center span:nth-of-type(2) {
  color          : rgba(255,255,255,0.5);
  text-transform : uppercase;
  font-size      : 14px;
  font-weight    : 400;
  letter-spacing : 3px;
}

.project-small .project-small--image-wrapper .tag {
  display            : block;
  position           : absolute;
  top                : 20px;
  left               : 0;
  padding            : 5px 10px;
  color              : #fff;
  opacity            : 1;
  background-color   : #18BBB9;
  text-transform     : uppercase;
  -webkit-transition : all .25s ease-in-out;
  transition         : all .25s ease-in-out;
}

.project-small .project-small--image-wrapper img {
  width : 100%;
}

.project-small .project-small--description {
  padding          : 10px 15px;
  color            : #939598;
  background-color : #F6F6F6;
}

.project-small:hover .project-small--image-wrapper .tag {
  padding-left : 20px;
  opacity      : 0;
}

.project-small:hover .project-small--image-overlay {
  background-color : rgba(24,187,185,0.8);
  background-size  : 100% 100%;
}

.project-small:hover .project-small--image-overlay .center {
  opacity : 1;
}

.project-small:hover .project-small--image-overlay:before {
  top    : 15px;
  bottom : 15px;
}

.project-small:hover .project-small--image-overlay:after {
  right : 15px;
  left  : 15px;
}

.isotope {
  margin-right : -15px;
  margin-left  : -15px;
}

.isotope .isotope-item {
  -webkit-box-sizing : border-box;
  box-sizing         : border-box;
  width              : 33.333333%;
  padding            : 0 15px;
}

@media
  screen
  and (max-width : 991px) {
  .isotope .isotope-item {
    width : 50%;
  }
}

@media
  screen
  and (max-width : 768px) {
  .isotope .isotope-item {
    width : 100%;
  }
}

.feedback {
  margin-bottom : 20px;
  padding       : 12px 15px;
  color         : #fff;
}

.feedback.error {
  background-color : #ff5f5f;
}

.feedback.success {
  background-color : #18BBB9;
}

.hny {
  display : none;
}

.page-not-found h1 {
  font-size   : 100px !important;
  font-weight : bold;
}

[v-cloak] {
  display : none;
}

.timeline {
  background-image    : -webkit-gradient(linear, left top, right top, from(#E6E6E6), to(#E6E6E6));
  background-image    : linear-gradient(
                          to right,
                          #E6E6E6,
                          #E6E6E6
                        );
  background-repeat   : repeat-y;
  background-position : center;
  background-size     : 1px;
}

@media
  screen
  and (max-width : 768px) {
  .timeline {
    background-position : left;
  }
}

.timeline .timeline-event {
  margin-top    : -15px;
  margin-bottom : 0px;
}

@media
  screen
  and (max-width : 768px) {
  .timeline .timeline-event {
    margin-top    : 0;
    margin-bottom : 30px;
  }
}

.timeline .timeline-event h2 {
  position       : relative;
  padding-bottom : 10px;
  border-bottom  : 1px solid #E6E6E6;
  font-size      : 20px;
}

.timeline .timeline-event h2:before {
  content          : "";
  position         : absolute;
  bottom           : -10px;
  width            : 20px;
  height           : 20px;
  border           : 1px solid #E6E6E6;
  border-radius    : 50%;
  background-color : #fff;
}

.timeline .timeline-event img {
  width : 100%;
}

@media
  screen
  and (max-width : 768px) {
  .timeline .timeline-event img {
    display : table;
    width   : 120px;
    margin  : -10px auto 15px;
  }
}

.timeline .timeline-event.timeline-event--active h2:before {
  background-image : radial-gradient(
                       circle at center,
                       #18BBB9 40%,
                       transparent 40%
                     );
}

.timeline .timeline-event.timeline-event--left {
  padding-right : 15px;
}

.timeline .timeline-event.timeline-event--left h2 {
  margin-right  : -30px;
  padding-right : 30px;
}

.timeline .timeline-event.timeline-event--left h2:before {
  right : -10px;
}

@media
  screen
  and (max-width : 768px) {
  .timeline .timeline-event.timeline-event--left {
    padding-right : 0;
    padding-left  : 30px;
  }

  .timeline .timeline-event.timeline-event--left h2 {
    margin-right  : 0px;
    margin-left   : -30px;
    padding-right : 0px;
    padding-left  : 30px;
  }

  .timeline .timeline-event.timeline-event--left h2:before {
    left : -10px;
  }
}

.timeline .timeline-event.timeline-event--right {
  padding-left : 15px;
}

.timeline .timeline-event.timeline-event--right h2 {
  margin-left  : -30px;
  padding-left : 30px;
}

.timeline .timeline-event.timeline-event--right h2:before {
  left : -10px;
}

@media
  screen
  and (max-width : 768px) {
  .timeline .timeline-event.timeline-event--right {
    padding-right : 0;
    padding-left  : 30px;
  }

  .timeline .timeline-event.timeline-event--right h2 {
    margin-left   : -30px;
    padding-right : 0px;
    padding-left  : 30px;
  }

  .timeline .timeline-event.timeline-event--right h2:before {
    left : -10px;
  }
}

@media
  screen
  and (max-width : 768px) {
  .timeline .btn-center {
    margin : 0 0 0 0;
  }
}

.modal-backdrop {
  background-image   : -webkit-gradient(linear, left top, right top, from(#3C92CF), to(#18BBB9));
  background-image   : linear-gradient(
                         to right,
                         #3C92CF,
                         #18BBB9
                       );
  background-color   : transparent;
  -webkit-transform  : scale(0, 0);
  transform          : scale(0, 0);
  -webkit-transition : all .2s ease-in-out;
  transition         : all .2s ease-in-out;
}

.modal-backdrop.show {
  opacity           : .95;
  -webkit-transform : scale(1, 1);
  transform         : scale(1, 1);
}

.modal .modal-dialog .close {
  position : relative;
  top      : -10px;
}

.modal .modal-dialog .modal-content {
  padding          : 20px;
  border           : none;
  background-color : #414042;
}

.modal .modal-dialog .modal-content .modal-header {
  color            : #fff;
  border           : none;
  background-color : transparent;
}

.modal .modal-dialog .modal-content .modal-header span {
  color : #fff;
}

.modal .modal-dialog .modal-content .modal-header .modal-title {
  color : #fff;
}

.modal .modal-dialog .modal-content .modal-header h5 {
  font-size : 32px !important;
}

.modal .modal-dialog .modal-content .modal-body {
  border           : none;
  background-color : transparent;
}

.modal .modal-dialog .modal-content .modal-body p {
  margin-top : 20px;
  color      : #fff;
}

.modal .modal-dialog .modal-content .modal-body form {
  margin-top : 30px;
}

.modal .modal-dialog .modal-content .modal-body input,
.modal .modal-dialog .modal-content .modal-body select,
.modal .modal-dialog .modal-content .modal-body textarea {
  color            : #fff;
  border           : none;
  background-color : rgba(255,255,255,0.1);
}

.modal .modal-dialog .modal-content .modal-footer {
  border           : none;
  background-color : transparent;
}

.sidenav h3 {
  margin-bottom  : 20px;
  padding-bottom : 10px;
  border-bottom  : 1px solid #E6E6E6;
  font-size      : 20px;
}

.sidenav ul {
  margin          : 0;
  margin-bottom   : 50px;
  padding         : 0;
  list-style-type : none;
}

.sidenav ul li a {
  display            : block;
  padding-left       : 0;
  color              : #939598;
  line-height        : 28px;
  -webkit-transition : all .15s ease-in-out;
  transition         : all .15s ease-in-out;
}

.sidenav ul li a:hover {
  padding-left : 5px;
  color        : #18BBB9;
}

.article-medium {
  padding-bottom : 50px;
}

.article-medium img {
  width         : 100%;
  margin-bottom : 30px;
}

.article-medium .article-image-wrapper {
  position : relative;
}

.article-medium .article-image-wrapper:before {
  content            : "";
  position           : absolute;
  top                : 100%;
  right              : 0;
  bottom             : 30px;
  left               : 0;
  opacity            : 0;
  background-color   : rgba(24,187,185,0.8);
  -webkit-transition : all .2s ease-in-out;
  transition         : all .2s ease-in-out;
}

.article-medium .article-image-wrapper:after {
  content            : "\f002";
  position           : absolute;
  top                : 50%;
  left               : 50%;
  color              : #fff;
  opacity            : 0;
  font-family        : "FontAwesome",
                       sans-serif;
  font-size          : 40px;
  -webkit-transform  : translate(-50%, -50%);
  transform          : translate(-50%, -50%);
  -webkit-transition : all .3s ease-in-out;
  transition         : all .3s ease-in-out;
}

.article-medium .article-image-wrapper:hover:before {
  top     : 0;
  opacity : 1;
}

.article-medium .article-image-wrapper:hover:after {
  opacity : 1;
}

.article-medium .article-medium-description .article-medium-description-date {
  width : 100px;
}

@media
  screen
  and (max-width : 520px) {
  .article-medium .article-medium-description .article-medium-description-date {
    display : none;
  }
}

.article-medium .article-medium-description .article-medium-description-date .article-medium-description-date-wrapper {
  width            : 100px;
  padding          : 20px 0;
  background-color : #F6F6F6;
}

.article-medium .article-medium-description .article-medium-description-date .article-medium-description-date-wrapper span {
  display    : block;
  color      : #939598;
  text-align : center;
}

.article-medium .article-medium-description .article-medium-description-date .article-medium-description-date-wrapper span:first-of-type {
  font-size   : 36px;
  line-height : 40px;
}

.article-medium .article-medium-description .article-medium-description-date .article-medium-description-date-wrapper span:nth-of-type(2) {
  font-size   : 16px;
  line-height : 18px;
}

.article-medium .article-medium-description .article-medium-description-date .article-medium-description-date-wrapper span:nth-of-type(3) {
  opacity     : .5;
  font-size   : 13px;
  line-height : 24px;
}

.article-medium .article-medium-description .article-medium-description-text {
  padding-top  : 0 !important;
  padding-left : 30px;
}

@media
  screen
  and (max-width : 520px) {
  .article-medium .article-medium-description .article-medium-description-text {
    padding-left : 0;
  }
}

.article-medium .article-medium-description .article-medium-description-text a {
  color : #18BBB9;
}

.article-medium .article-medium-description .article-medium-description-text a:hover {
  color : #16a9a7;
}

.modal-dialog {
  display               : -ms-flexbox;
  display               : flex;
  display               : -webkit-box;
  -webkit-box-direction : normal;
  -webkit-box-orient    : vertical;
  -webkit-box-pack      : center;
  min-height            : calc(100vh - 60px);
  overflow              : auto;
  -ms-flex-direction    : column;
  flex-direction        : column;
  -ms-flex-pack         : center;
  justify-content       : center;
}

@media
  (max-width : 768px) {
  .modal-dialog {
    min-height : calc(100vh - 20px);
  }
}