@charset "UTF-8";
/*!
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! *
 *      ! This project is licensed under the MIT License !          *
 *                    📓 Read the license:👇                        *
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! *
 * !  https://github.com/Demonicheart/demons/blob/master/LICENSE  ! *
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! *
 */
/*===================================================================

---------------------------------------------------------------------
 * [Main Stylesheet]                                                *
---------------------------------------------------------------------

=====================================================================
 * Name       :    Demonic [M.B]
 * Project    :    Demon-Style
 * Version    :    2.9
 * Last change:    28.04.19
 * Copyright  :    Demonicheart
 * Contact    :    /contact.html
 * GitHub     :    https://github.com/Demonicheart/demons
==================== Font Family Used ====================
 * font-family:    'Roboto', sans-serif;
 * [Typography]:
 * Body    :       font-weight:400;
 *                 line-height:1.5;
 *                 font-size:1rem = 16px
 * Icons:                 'FontAwesome 5;
 * Paragraph:             'Roboto', 300;
 * Section Title:         'Roboto', 700;
 * Section Description:   'Roboto', 500;
=====================================================================

---------------------------------------------------------------------
[Table of contents]
---------------------------------------------------------------------

=====================================================================
01. Typography
02. preloader
03. jarallax
04. helpers
05. cc cookieconsent
06. animbrand
07. navtogglerXanim
08. navbarsocial
09. arrow
10. about FOCUS
11. interests
12. brackets-anim
13. featuresectionInfoBox
14. footerLinks-footerBox
15. accordionfa
16. responsive_slider
17. social-icons-2-img
18. services-box
19. footer-social-icons
20. wordsrotator
21. zigzag
22. ilogo
23. custom
24. scrolltotop
25. scrollbar + selection
26. media all and portrait + landscape

 ANIMATION: +DeMoNs+
===================================================================*/
/*=========================================================
-----           ** 02. demon preloader **             -----
=========================================================*/
#preloader {
  background: #141e30;
  background: -webkit-gradient(linear, left top, right top, from(#141e30), to(#186bac));
  background: linear-gradient(to right, #141e30, #186bac);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999; }

.spinner {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -22px 0 0 -22px;
  font-size: 10px;
  text-indent: -12345px;
  border-top: 8px solid #1b1c29;
  border-right: 8px solid #1b1c29;
  border-bottom: 8px solid #1b1c29;
  border-left: 8px solid #186bac;
  border-radius: 50%;
  -webkit-animation: spinner 700ms infinite linear;
  animation: spinner 700ms infinite linear;
  z-index: 10000; }

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.wow {
  visibility: hidden; }

/*---------------------------------------------------------
-----               ** 04. Helpers **                 -----
----------------------------------------------------------*/
.overflow-hidden {
  overflow: hidden; }

.full-wid {
  width: 100%; }

.no-padd {
  padding: 0px; }

.no-margin {
  margin: 0px; }

.justify {
  text-align: justify; }

.svg-white {
  fill: #fff; }

.svg-f-btm {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 3; }

.svg-abs {
  position: absolute; }

.hrone {
  width: 170px; }

.hrtwo {
  width: 82px; }

/*!
 * cookieconsent Design Demonic
 * Version: cookieconsent@3.5.1
 *
 * Custom: cookieconsent
 * MIT License !
 *
 */
/*=========================================================
-----       ** 05. demon cc cookieconsent **         -----
=========================================================*/
.cc-window {
  opacity: 1;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease; }
  .cc-window.cc-invisible {
    opacity: 0; }

/* only animate ifhas class 'cc-animate' */
.cc-animate.cc-revoke {
  -webkit-transition: transform 1s ease;
  -webkit-transition: -webkit-transform 1s ease;
  transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease; }
  .cc-animate.cc-revoke.cc-top {
    -webkit-transform: translateY(-2em);
            transform: translateY(-2em); }
  .cc-animate.cc-revoke.cc-bottom {
    -webkit-transform: translateY(2em);
            transform: translateY(2em); }
  .cc-animate.cc-revoke.cc-active.cc-top, .cc-animate.cc-revoke.cc-active.cc-bottom {
    -webkit-transform: translateY(0);
            transform: translateY(0); }

.cc-revoke:hover {
  -webkit-transform: translateY(0);
          transform: translateY(0); }

.cc-grower {
  /* Initially we don't want any height, and we want the contents to be hidden */
  max-height: 0;
  overflow: hidden;
  /* Set our transitions up. */
  -webkit-transition: max-height 1s;
  transition: max-height 1s; }

/* the popup window */
.cc-window, .cc-revoke {
  position: fixed;
  overflow: hidden;
  box-sizing: border-box;
  /* exclude padding when dealing with width */
  font-family: Helvetica, Calibri, Arial, Roboto, sans-serif;
  font-size: 16px;
  /* by setting the base font here, we can size the rest of the popup using CSS `em` */
  line-height: 1.5em;
  display: -webkit-box;
  display: flex;
  flex-wrap: nowrap;
  /* the following are random unjustified styles - just because - should probably be removed */
  z-index: 9999; }

.cc-window.cc-static {
  position: static; }

.cc-window.cc-floating {
  padding: 2em;
  max-width: 24em;
  /* 1em == 16px therefore 24em == 384px */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column; }

.cc-window.cc-banner {
  padding: 1em 1.8em;
  width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row; }

/* 2 basic types of window - floating / banner */
.cc-revoke {
  padding: .5em; }
  .cc-revoke:hover {
    text-decoration: none; }

.cc-header {
  font-size: 18px;
  font-weight: 700; }

/* clickable things */
.cc-btn, .cc-link, .cc-close, .cc-revoke {
  cursor: pointer; }

.cc-link {
  color: #1f9ed9 !important;
  opacity: .8;
  display: inline-block;
  padding: .2em;
  text-decoration: none; }
  .cc-link:hover {
    opacity: 1; }
  .cc-link:active, .cc-link:visited {
    color: initial; }

.cc-btn {
  color: #1f9ed9 !important;
  display: block;
  padding: .4em .8em;
  font-size: .9em;
  font-weight: 700;
  border-width: 2px;
  border-style: solid;
  text-align: center;
  white-space: nowrap;
  opacity: .8; }
  .cc-btn:hover {
    opacity: 1;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    outline: 0; }
  .cc-btn:active, .cc-btn:focus {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    outline: 0; }

.cc-banner .cc-btn:last-child {
  min-width: 125px; }

.cc-highlight .cc-btn:first-child {
  background-color: transparent;
  border-color: transparent; }
  .cc-highlight .cc-btn:first-child:hover, .cc-highlight .cc-btn:first-child:focus {
    background-color: transparent;
    text-decoration: underline; }

.cc-close {
  display: block;
  position: absolute;
  top: .5em;
  right: .5em;
  font-size: 1.6em;
  opacity: .9;
  /* seeing as this contains text and not an image, the element taller than it is wide (because it is text) */
  /*  - we want it to be a square, because it's acting as an icon */
  /*  - setting the line height normalises the height */
  line-height: .75; }
  .cc-close:hover, .cc-close:focus {
    opacity: 1; }

/* This file should contain CSS that modifies the popup layout. */
/* By layout, we mean the physical position of the elements on the popup window, and the margin / padding around those elements. */
.cc-revoke.cc-top {
  top: 0;
  left: 3em;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em; }

.cc-revoke.cc-bottom {
  bottom: 0;
  left: 3em;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em; }

.cc-revoke.cc-left {
  left: 3em;
  right: unset; }

.cc-revoke.cc-right {
  right: 3em;
  left: unset; }

/**************************************** FLOATING ****************************************/
/* these classes position the floating element */
.cc-top {
  top: 1em; }

.cc-left {
  left: 1em; }

.cc-right {
  right: 1em; }

.cc-bottom {
  bottom: 1em; }

/* links that are direct decendants should be displayed as block */
.cc-floating > .cc-link {
  margin-bottom: 1em; }

.cc-floating .cc-message {
  display: block;
  margin-bottom: 1em; }

.cc-window.cc-floating .cc-compliance {
  -webkit-box-flex: 1;
          flex: 1; }

.cc-window.cc-banner {
  -webkit-box-align: center;
          align-items: center; }

/**************************************** BANNER ****************************************/
.cc-banner {
  color: #fff;
  background-color: #1f2429e6; }
  .cc-banner.cc-top {
    left: 0;
    right: 0;
    top: 0; }
  .cc-banner.cc-bottom {
    left: 0;
    right: 0;
    bottom: 0; }
  .cc-banner .cc-message {
    -webkit-box-flex: 1;
            flex: 1; }

#cookieconsent\3a desc:before {
  content: "\f05a";
  font-family: FontAwesome5;
  font-weight: 400;
  margin-right: 8px;
  color: #1f9ed9; }

.cc-link:after {
  content: "\f0a4";
  font-family: FontAwesome5;
  font-weight: 300;
  /*   vertical-align: middle; */
  margin-left: 5px; }

/* COMPLIANCE BOX */
.cc-compliance {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  align-content: space-between; }
  .cc-compliance > .cc-btn {
    -webkit-box-flex: 1;
            flex: 1; }

.cc-btn + .cc-btn {
  margin-left: .5em; }

@media print {
  .cc-window, .cc-revoke {
    display: none; } }

@media screen and (max-width: 900px) {
  .cc-btn {
    white-space: normal; } }

/* dimensions for 'iPhone6 Plus' and lower */
@media screen and (max-width: 414px) and (orientation: portrait), screen and (max-width: 736px) and (orientation: landscape) {
  .cc-window.cc-top {
    top: 0; }
  .cc-window.cc-bottom {
    bottom: 0; }
  .cc-window.cc-banner, .cc-window.cc-right, .cc-window.cc-left {
    left: 0;
    right: 0; }
  .cc-window.cc-banner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column; }
    .cc-window.cc-banner .cc-compliance {
      -webkit-box-flex: 1;
              flex: 1; }
  .cc-window.cc-floating {
    max-width: none; }
  .cc-window .cc-message {
    margin-bottom: 1em; }
  .cc-window.cc-banner {
    -webkit-box-align: unset;
            align-items: unset; } }

/* iPhone 6 */
/* iPhone 6 plus */
/* iPhone 5 & 5S */
/* iPhone 2G - 4S */
/* Classic */
.cc-floating.cc-theme-classic {
  padding: 1.2em;
  border-radius: 5px; }

.cc-floating.cc-type-info.cc-theme-classic .cc-compliance {
  text-align: center;
  display: inline;
  -webkit-box-flex: 0;
          flex: none; }

.cc-theme-classic .cc-btn {
  border-radius: 5px; }
  .cc-theme-classic .cc-btn:last-child {
    min-width: 125px; }

.cc-floating.cc-type-info.cc-theme-classic .cc-btn {
  display: inline-block; }

.cc-banner, .cc-floating {
  color: #fff;
  background-color: #252e39; }

.cc-theme-classic.cc-bottom {
  animation-duration: 0.8s;
  -webkit-animation-duration: 0.8s;
  -moz-animation-duration: 0.8s;
  -o-animation-duration: 0.8s;
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp; }
  .cc-theme-classic.cc-bottom.cc-invisible {
    animation-duration: 0.8s;
    -webkit-animation-duration: 0.8s;
    -moz-animation-duration: 0.8s;
    -o-animation-duration: 0.8s;
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown; }

#cookieconsent\:desc {
  font-size: .9rem;
  -webkit-box-flex: 4;
          flex: 4;
  /* margin-bottom: 0;  */ }

/*=========================================================
-----           ** 06. demon animbrand **             -----
=========================================================*/
.animbrand {
  display: inherit; }
  .animbrand a::after, .animbrand a::before {
    display: inline-block;
    opacity: 0;
    transition: -webkit-transform .3s,opacity .2s;
    -webkit-transition: opacity .2s,-webkit-transform .3s;
    transition: opacity .2s,-webkit-transform .3s;
    transition: transform .3s,opacity .2s;
    transition: -webkit-transform .3s,opacity .2s,-webkit-transform .3s;
    transition: transform .3s,opacity .2s,-webkit-transform .3s;
    color: #039be5;
    font-size: inherit;
    line-height: inherit; }
  .animbrand a:before, .animbrand a:after {
    font-family: FontAwesome5;
    font-weight: 400; }
  .animbrand a::before {
    margin-right: 3px;
    content: "\f104";
    -webkit-transform: translateX(50px);
    transform: translateX(50px); }
  .animbrand a::after {
    margin-left: 3px;
    content: "\f105";
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px); }
  .animbrand a:focus::after, .animbrand a:focus::before {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  .animbrand a:hover::after, .animbrand a:hover::before {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

/*=========================================================
-----   ** 07. demon navbar-toggler x animation **    -----
=========================================================*/
.icon-bar {
  width: 25px;
  height: 3px;
  background-color: #039be5;
  display: block;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  margin: 4px 0;
  position: relative;
  left: 0; }

.navbar-toggler {
  border: none;
  background: transparent !important; }
  .navbar-toggler .top-bar {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
            transform-origin: 10% 10%; }
  .navbar-toggler .middle-bar {
    opacity: 0; }
  .navbar-toggler .bottom-bar {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
            transform-origin: 10% 90%; }
  .navbar-toggler.collapsed .top-bar {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  .navbar-toggler.collapsed .middle-bar {
    opacity: 1; }
  .navbar-toggler.collapsed .bottom-bar {
    -webkit-transform: rotate(0);
    transform: rotate(0); }

/*=========================================================
-----            ** 08. navbar social **              -----
=========================================================*/
.navbar.navbar-dark .navbar-nav .nav-item .nav-link:hover {
  color: #039be5; }

nav li a.active {
  color: #101010 !important;
  border-radius: .2rem;
  background-color: rgba(93, 51, 251, 0.5);
  background: rgba(93, 51, 251, 0.5);
  background: -webkit-gradient(linear, left top, right top, from(rgba(93, 51, 251, 0.75)), to(rgba(78, 239, 237, 0.75)));
  background: linear-gradient(90deg, rgba(93, 51, 251, 0.75), rgba(78, 239, 237, 0.75)); }

#scrollspy-nav a {
  -webkit-transition: background-color .3s ease,border .3s ease,color .3s ease,opacity .3s ease-in-out,padding .3s ease;
  transition: background-color .3s ease,border .3s ease,color .3s ease,opacity .3s ease-in-out,padding .3s ease; }
  #scrollspy-nav a * {
    -webkit-transition: background-color .3s ease,border .3s ease,color .3s ease,opacity .3s ease-in-out,padding .3s ease;
    transition: background-color .3s ease,border .3s ease,color .3s ease,opacity .3s ease-in-out,padding .3s ease; }

.social_icon li a {
  color: #fff;
  width: 35px;
  height: 35px;
  line-height: 35px;
  vertical-align: middle;
  margin: 0 5px;
  padding: 0 5px;
  font-size: 21px;
  display: inline-block;
  overflow: hidden; }
  .social_icon li a i {
    -webkit-transition: opacity 0.2s linear, -webkit-transform 0.25s ease !important;
    transition: opacity 0.2s linear, -webkit-transform 0.25s ease !important;
    transition: transform 0.25s ease, opacity 0.2s linear !important;
    transition: transform 0.25s ease, opacity 0.2s linear, -webkit-transform 0.25s ease !important;
    -webkit-transition: -webkit-transform 0.25s ease, opacity 0.2s linear !important;
    position: relative;
    line-height: 35px; }
    .social_icon li a i * {
      -webkit-transition: opacity 0.2s linear, -webkit-transform 0.25s ease !important;
      transition: opacity 0.2s linear, -webkit-transform 0.25s ease !important;
      transition: transform 0.25s ease, opacity 0.2s linear !important;
      transition: transform 0.25s ease, opacity 0.2s linear, -webkit-transform 0.25s ease !important;
      -webkit-transition: -webkit-transform 0.25s ease, opacity 0.2s linear !important;
      position: relative;
      line-height: 35px; }
  .social_icon li a:hover i {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
  .social_icon li a i:after {
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    color: #039be5;
    font-size: 21px;
    line-height: 35px; }

.social_icon li .social_icon li a {
  display: inline-block; }
  .social_icon li .social_icon li a img {
    display: inline-block; }

.social_icon li .fa-facebook-f:after {
  content: "\f39e";
  color: #3b5998; }

.social_icon li .fa-twitter:after {
  content: "\f099";
  color: #6795de; }

.social_icon li .fa-maxcdn:after {
  content: "\f136";
  color: #ff5627; }

.social_icon li .fa-instagram:after {
  content: "\f16d"; }

.social_icon li .fa-linkedin:after {
  content: "\f0e1";
  color: #0082ca; }

.social_icon li .fa-github:after {
  content: "\f09b";
  color: #333333; }

.social_icon li a i:before {
  width: 100%; }

.social_icon li a img {
  display: inline-block; }

.intro-page .navbar:not(.top-nav-collapse) {
  background-color: transparent; }

.navbar li a {
  -webkit-transition: color .5s linear;
  transition: color .5s linear; }

.navbar-toggler-right:hover span {
  background: linear-gradient(40deg, #ff6ec4, #7873f5); }

.navbar-toggler:hover span {
  background-color: #e53935;
  background: linear-gradient(40deg, #45cafc, #303f9f) !important; }

.dropdown.show.dropdown .dropdown-toggle::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear; }

.dropdown.dropdown .dropdown-toggle::after {
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear; }

.container-fluid > .row.mt-2.mb-1.text-center.wow.fadeIn > div > ul > li > a:hover {
  margin-left: 15px;
  color: #00cffe;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out; }

.row:before {
  content: "\20";
  display: table; }

.row:after {
  content: "\20";
  display: table;
  clear: both; }

/*=========================================================
-----             ** 09. demon arrow **               -----
=========================================================*/
.arrow-1, .arrow-2 {
  background: #2196f3;
  border-radius: 50%;
  position: absolute; }

.arrow-1 {
  position: absolute; }

.arrow-2 {
  position: absolute; }
  .arrow-2:before {
    position: absolute; }

.arrow-container {
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  bottom: 25px;
  left: 0;
  right: 0; }

.arrow-1 {
  width: 100px;
  height: 100px;
  opacity: .5; }

.arrow-2 {
  width: 60px;
  height: 60px;
  top: 20px;
  left: 20px;
  z-index: 1;
  display: table; }
  .arrow-2:before {
    width: 50px;
    height: 50px;
    content: "";
    border: 2px solid #0d47a1;
    border-radius: 50%;
    top: 5px;
    left: 5px; }
  .arrow-2 a {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    box-sizing: border-box;
    z-index: 3;
    padding: 0; }
  .arrow-2 i {
    font-size: 30px;
    vertical-align: middle;
    text-align: center;
    color: #0d47a1; }

.animated.hinge2 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

@-webkit-keyframes zoomIn2 {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.4, 0.4, 0.4);
    transform: scale3d(0.4, 0.4, 0.4); }
  50% {
    opacity: .5; }
  100% {
    opacity: 0; } }

@keyframes zoomIn2 {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.4, 0.4, 0.4);
    transform: scale3d(0.4, 0.4, 0.4); }
  50% {
    opacity: .5; }
  100% {
    opacity: 0; } }

.zoomIn2 {
  -webkit-animation-name: zoomIn2;
  animation-name: zoomIn2; }

/*---------------------------------------------------------
-----        ** 10. SECTION: about FOCUS **           -----
----------------------------------------------------------*/
.blog-logo-small {
  color: #9EABB3;
  font-family: "Fira Mono";
  font-size: 1.35vw;
  z-index: 10;
  font-weight: 400;
  position: fixed;
  top: 35px;
  -webkit-transition: color .2s ease;
  transition: color .2s ease; }
  .blog-logo-small:hover {
    color: #333;
    -webkit-transition: color .2s ease;
    transition: color .2s ease; }
  .blog-logo-small i:first-child {
    -webkit-transition: -webkit-transform .2s ease-out;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out;
    left: 6px;
    position: relative;
    font-size: 80%; }
  .blog-logo-small i:last-child {
    -webkit-transition: -webkit-transform .2s ease-out;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out;
    right: 6px;
    position: relative;
    font-size: 80%; }
  .blog-logo-small:hover i:first-child {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    -webkit-transition: -webkit-transform .2s ease-in;
    transition: -webkit-transform .2s ease-in;
    transition: transform .2s ease-in;
    transition: transform .2s ease-in, -webkit-transform .2s ease-in; }
  .blog-logo-small:hover i:last-child {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
    -webkit-transition: -webkit-transform .2s ease-in;
    transition: -webkit-transform .2s ease-in;
    transition: transform .2s ease-in;
    transition: transform .2s ease-in, -webkit-transform .2s ease-in; }

@media (max-width: 1224px) {
  .blog-logo-small {
    font-size: 2rem;
    position: absolute;
    left: 0;
    top: 35px;
    text-align: center;
    right: 0;
    margin: auto; } }

@media only screen and (max-width: 500px) {
  .blog-logo-small {
    font-size: 2rem;
    position: absolute;
    left: 0;
    top: 10px;
    text-align: center;
    right: 0;
    margin: auto; } }

.focus {
  padding-bottom: 100px;
  overflow: hidden;
  background: #fff; }

/* FOCUS BOX */
.focus-box {
  margin-bottom: 75px; }
  .focus-box .service-icon {
    width: 145px;
    height: 145px;
    margin: auto;
    border-radius: 50%;
    border: 10px solid #ececec;
    margin-bottom: 20px;
    position: relative;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; }

/* ON HOVER COLORED ROUNDED CIRCLE AROUND ICONS */
.redi, .greeni, .bluei, .yellowi {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }

.redi:hover .service-icon {
  border: 10px solid #e96656; }

.greeni:hover .service-icon {
  border: 10px solid #34d293; }

.bluei:hover .service-icon {
  border: 10px solid #3ab0e2; }

.yellowi:hover .service-icon {
  border: 10px solid #f7d861; }

.focus-box h4 {
  margin-bottom: 15px;
  color: #404040;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 18px; }

.focus-box p {
  font-size: 14px;
  font-weight: 400; }

.feature-box .features-big .fab, .feature-box .features-big .far {
  font-size: 4rem; }

.pixa {
  height: 63px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block; }
  .pixa.fab.fa-css3 {
    color: #e96656; }
  .pixa.far.fa-paint-brush {
    color: #3ab0e2; }
  .pixa.far.fa-star {
    color: #f7d861; }

#about h2.blue-border-bottom {
  position: relative;
  font-weight: 500; }

#about hr.info-color {
  z-index: 1;
  width: 300px;
  height: 2px; }

canvas {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  min-width: 100%; }

.streak.streak-photo {
  background-attachment: fixed; }

.reveal {
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 2rem 0;
  margin: 0 0 2rem;
  text-transform: uppercase;
  font-size: 2rem; }

.anime {
  height: 100%;
  padding-top: 50px;
  text-align: center;
  overflow: hidden;
  background: #eee;
  background: linear-gradient(45deg, #03D38E 0, rgba(3, 211, 142, 0) 70%), linear-gradient(135deg, #DD09EC 10%, rgba(221, 9, 236, 0) 80%), linear-gradient(225deg, #03C4DD 10%, rgba(3, 196, 221, 0) 80%), linear-gradient(315deg, #AA09D3 100%, rgba(170, 9, 211, 0) 70%); }

@media screen and (max-width: 767px) {
  #anime .row {
    display: inline-block; } }

.btn-hl:hover, .btn-hl:focus {
  opacity: .6;
  background: rgba(0, 0, 0, 0.3); }

.btn-hl:active {
  opacity: .6;
  background: rgba(0, 0, 0, 0.3); }
  .btn-hl:active:focus {
    opacity: .6;
    background: rgba(0, 0, 0, 0.3); }

.view.overlay.hm-white-slight.z-depth-1:after, .view.overlay.hm-white-slight:after {
  content: "";
  display: table;
  clear: both; }

.view a {
  color: #fff; }

/*---------------------------------------------------------
-----            ** 11. interests: +Anim+ **          -----
----------------------------------------------------------*/
.dark-grey-text-2 {
  color: #3c3c3c !important; }

.interests-holder {
  text-align: center; }
  .interests-holder .title {
    text-align: center; }
    .interests-holder .title h3 {
      position: relative;
      font-weight: 700 !important;
      letter-spacing: -1px;
      line-height: 140px;
      vertical-align: middle;
      display: inline-block; }
      .interests-holder .title h3:before {
        content: "\7b";
        font-family: 'Open Sans', sans-serif;
        position: absolute;
        font-size: 90px;
        line-height: 90px;
        font-weight: 100;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        left: 2%;
        top: -12%; }
      .interests-holder .title h3:after {
        content: "\7b";
        font-family: 'Open Sans', sans-serif;
        position: absolute;
        font-size: 90px;
        line-height: 90px;
        font-weight: 100;
        bottom: -13%;
        right: 5%;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg); }

.interests-row {
  text-align: center; }
  .interests-row.big li {
    width: 105px;
    height: 105px; }
    .interests-row.big li span {
      font-size: 16px;
      width: 100%;
      height: 16px;
      line-height: 16px; }
    .interests-row.big li i {
      top: -30%;
      font-size: 24px;
      width: 24px;
      height: 24px;
      line-height: 24px; }
  .interests-row.medium li {
    width: 70px;
    height: 70px; }
    .interests-row.medium li span {
      font-size: 14px;
      width: 100%;
      height: 10px;
      line-height: 14px; }
    .interests-row.medium li i {
      top: -15%;
      font-size: 15px;
      width: 15px;
      height: 15px;
      line-height: 15px; }
  .interests-row ul {
    list-style: none;
    padding-left: 0 !important; }
    .interests-row ul li {
      text-align: center;
      position: relative;
      display: inline-block;
      cursor: pointer;
      color: #272425;
      border-radius: 400px;
      background: linear-gradient(40deg, #45cafc, #303f9f); }
      .interests-row ul li i, .interests-row ul li span {
        -webkit-transition: all .3s ease;
        transition: all .3s ease; }
      .interests-row ul li:hover {
        background: linear-gradient(40deg, #FFD86F, #FC6262);
        color: #fff; }
        .interests-row ul li:hover i {
          transform: scale(1.3);
          -webkit-transform: scale(1.3);
          -moz-transform: scale(1.3);
          -ms-transform: scale(1.3);
          -o-transform: scale(1.3); }
        .interests-row ul li:hover span {
          transform: scale(0.9);
          -webkit-transform: scale(0.9);
          -moz-transform: scale(0.9);
          -ms-transform: scale(0.9);
          -o-transform: scale(0.9); }
      .interests-row ul li span {
        text-transform: capitalize;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        top: 25%; }
      .interests-row ul li i {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto; }
        .interests-row ul li i:before {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto; }

@media (max-width: 1199px) {
  .interests-holder {
    margin: 50px 0; } }

@media all and (max-width: 560px) {
  .interests-row.big li {
    width: 90px;
    height: 90px; }
  .interests-holder .title h1 {
    line-height: 50px; }
    .interests-holder .title h1:before, .interests-holder .title h1:after {
      display: none; } }

@media all and (max-width: 441px) {
  .interests-holder .title h3:before {
    left: 44%; }
  .interests-holder .title h3:after {
    right: 8%; } }

/*---------------------------------------------------------
-----           ** 19. BORDER BOTTOMS **              -----
----------------------------------------------------------*/
.white-border-bottom:before {
  position: absolute;
  margin: auto;
  z-index: 1;
  content: "";
  width: 100%;
  height: 2px;
  bottom: -10px;
  left: 0;
  background: #f5f5f5; }

.dark-border-bottom:before {
  position: absolute;
  margin: auto;
  z-index: 1;
  content: "";
  width: 100%;
  height: 2px;
  bottom: -10px;
  left: 0;
  background: #404040; }

.red-border-bottom:before {
  position: absolute;
  margin: auto;
  z-index: 1;
  content: "";
  width: 100%;
  height: 2px;
  bottom: -10px;
  left: 0;
  background: #e96656; }

.green-border-bottom:before {
  position: absolute;
  margin: auto;
  z-index: 1;
  content: "";
  width: 100%;
  height: 2px;
  bottom: -10px;
  left: 0;
  background: #34d293; }

.blue-border-bottom:before {
  position: absolute;
  margin: auto;
  z-index: 1;
  content: "";
  width: 100%;
  height: 2px;
  bottom: -10px;
  left: 0;
  background: #3ab0e2; }

.yellow-border-bottom:before {
  position: absolute;
  margin: auto;
  z-index: 1;
  content: "";
  width: 100%;
  height: 2px;
  bottom: -10px;
  left: 0;
  background: #f7d861; }

/*---------------------------------------------------------
-----         ** 12. ANIMATION: +DeMoNs+ **           -----
----------------------------------------------------------*/
.brackets::before, .brackets::after {
  display: inline-block;
  opacity: 0;
  transition: -webkit-transform .3s,opacity .2s;
  -webkit-transition: opacity .2s,-webkit-transform .3s;
  transition: opacity .2s,-webkit-transform .3s;
  transition: transform .3s,opacity .2s;
  transition: transform .3s,opacity .2s,-webkit-transform .3s; }

.brackets::before {
  margin-right: 3px;
  content: '{';
  color: #8C8C8C;
  line-height: 16px;
  font-family: 'BebasNeueRegular','Arial','Helvetica',sans-serif;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
  vertical-align: sub; }

.brackets::after {
  margin-left: 3px;
  content: '}';
  color: #169FE6;
  line-height: 16px;
  font-family: 'BebasNeueRegular','Arial','Helvetica',sans-serif;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  -webkit-transform: translateX(-50px);
  transform: translateX(-50px);
  vertical-align: sub; }

.brackets:hover::before, .brackets:hover::after {
  opacity: 1;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.brackets:focus::before, .brackets:focus::after {
  opacity: 1;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

div.brackets:hover, div.brackets:focus {
  outline: none; }

.fast {
  -vendor-animation-duration: 1s;
  -vendor-animation-delay: 0; }

.slow {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 1s; }

.reallyslow {
  -vendor-animation-duration: 6s;
  -vendor-animation-delay: 3s; }

/*=========================================================
-----    ** 13. demon Feature Section Info Box **     -----
=========================================================*/
.info-box {
  position: relative;
  overflow: hidden;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  border-radius: 3px; }
  .info-box a {
    color: #545A5F; }
  .info-box .info-box-icon {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    text-align: center;
    font-size: 48px;
    color: #545A5F;
    overflow: hidden;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; }
  .info-box:hover .info-box-icon {
    -webkit-animation-name: shaketwo;
    animation-name: shaketwo;
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

@-webkit-keyframes shaketwo {
  0%, 100% {
    -webkit-transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-2px); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(2px); } }

@keyframes shaketwo {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px); } }

.info-box-info p {
  font-size: 14px;
  font-weight: 400; }

.info-box-title {
  margin-top: 5px;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 700; }

.info-box-text {
  color: #263238 !important; }

.info-box-white {
  color: #eee; }
  .info-box-white a, .info-box-white .info-box-icon, .info-box-white .info-box-text {
    color: #eee; }

.info-box .square-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background-color: #545A5F;
  font-size: 24px;
  color: #fff; }

.info-box.info-box-white .square-icon {
  background-color: #eee;
  color: #545A5F; }

.info-box .square-icon:before {
  position: absolute;
  content: '';
  width: 50%;
  height: 100%;
  left: 0;
  top: 0;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.11); }

.info-box.info-box-white .square-icon:before {
  background-color: rgba(0, 0, 0, 0.04); }

.info-box .square-border-icon {
  width: 60px;
  height: 60px;
  line-height: 54px;
  background-color: transparent;
  font-size: 24px;
  color: #545A5F;
  border: 3px solid #545A5F; }

.info-box.info-box-white .square-border-icon {
  border-color: #eee;
  color: #eee; }

.info-box .half-square-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background-color: #545A5F;
  font-size: 24px;
  color: #fff;
  border-radius: 3px 18px; }

.info-box.info-box-white .half-square-icon {
  background-color: #eee;
  color: #545A5F; }

.info-box .half-square-icon:before {
  position: absolute;
  content: '';
  width: 50%;
  height: 100%;
  left: 0;
  top: 0;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.11); }

.info-box.info-box-white .half-square-icon:before {
  background-color: rgba(0, 0, 0, 0.04); }

.info-box .half-square-border-icon {
  width: 60px;
  height: 60px;
  line-height: 54px;
  background-color: transparent;
  font-size: 24px;
  color: #545A5F;
  border: 3px solid #545A5F;
  border-radius: 3px 18px; }

.info-box.info-box-white .half-square-border-icon {
  border-color: #eee;
  color: #eee; }

.info-box .rounded-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background-color: #545A5F;
  font-size: 24px;
  color: #fff;
  border-radius: 15%; }

.info-box.info-box-white .rounded-icon {
  background-color: #eee;
  color: #545A5F; }

.info-box .rounded-icon:before {
  position: absolute;
  content: '';
  width: 50%;
  height: 100%;
  left: 0;
  top: 0;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.1); }

.info-box.info-box-white .rounded-icon:before {
  background-color: rgba(0, 0, 0, 0.04); }

.info-box .rounded-border-icon {
  width: 60px;
  height: 60px;
  line-height: 54px;
  background-color: transparent;
  font-size: 24px;
  color: #545A5F;
  border: 3px solid #545A5F;
  border-radius: 50%; }

.info-box.info-box-white .rounded-border-icon {
  border-color: #eee;
  color: #eee; }

.info-box-2 {
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 30px; }

.info-box-3 {
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 30px;
  border: 3px solid #545A5F; }
  .info-box-3.info-box-white {
    border-color: #eee; }

.info-box-4 {
  padding-left: 3px;
  text-align: left; }
  .info-box-4 .info-box-icon {
    float: left;
    margin-right: 20px;
    margin-bottom: 0;
    font-size: 34px; }
  .info-box-4 .rounded-icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 20px; }
  .info-box-4 .rounded-border-icon {
    width: 55px;
    height: 55px;
    line-height: 49px;
    font-size: 20px; }
  .info-box-4 .square-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px; }
  .info-box-4 .square-border-icon {
    width: 50px;
    height: 50px;
    line-height: 44px;
    font-size: 20px; }
  .info-box-4 .half-square-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    border-radius: 2px 18px; }
  .info-box-4 .half-square-border-icon {
    width: 50px;
    height: 50px;
    line-height: 42px;
    font-size: 20px;
    border-radius: 2px 18px; }
  .info-box-4 .info-box-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 500; }
  .info-box-4 .info-box-info {
    display: table; }

.info-box-5 {
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 15px;
  text-align: left; }
  .info-box-5 .info-box-icon {
    float: left;
    margin-right: 20px;
    margin-bottom: 0;
    font-size: 34px; }
  .info-box-5 .rounded-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px; }
  .info-box-5 .rounded-border-icon {
    width: 50px;
    height: 50px;
    line-height: 44px;
    font-size: 20px; }
  .info-box-5 .square-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px; }
  .info-box-5 .square-border-icon {
    width: 50px;
    height: 50px;
    line-height: 43px;
    font-size: 22px; }
  .info-box-5 .half-square-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    border-radius: 3px 10px; }
  .info-box-5 .half-square-border-icon {
    width: 50px;
    height: 50px;
    line-height: 43px;
    font-size: 22px;
    border-radius: 3px 10px; }
  .info-box-5 .info-box-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 500; }
  .info-box-5 .info-box-info {
    display: table; }

.info-box-6 {
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 15px;
  text-align: left;
  border: 3px solid #545A5F; }
  .info-box-6.info-box-white {
    border-color: #eee; }
  .info-box-6 .info-box-icon {
    float: left;
    margin-right: 20px;
    margin-bottom: 0;
    font-size: 38px; }
  .info-box-6 .rounded-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px; }
  .info-box-6 .rounded-border-icon {
    width: 50px;
    height: 50px;
    line-height: 43px;
    font-size: 22px; }
  .info-box-6 .square-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px; }
  .info-box-6 .square-border-icon {
    width: 50px;
    height: 50px;
    line-height: 43px;
    font-size: 22px; }
  .info-box-6 .half-square-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    border-radius: 3px 10px; }
  .info-box-6 .half-square-border-icon {
    width: 50px;
    height: 50px;
    line-height: 43px;
    font-size: 22px;
    border-radius: 3px 10px; }
  .info-box-6 .info-box-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 500; }
  .info-box-6 .info-box-info {
    display: table; }

.service {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  text-align: center; }
  .service .service-title {
    position: relative; }
    .service .service-title .title {
      margin: 0 auto;
      display: table;
      color: #fff;
      font-size: 2em;
      font-weight: 700;
      line-height: 3;
      font-weight: 100;
      border-bottom: 2px solid #fff;
      line-height: normal;
      padding: 5px 10px;
      -webkit-transition: all .25s;
      transition: all .25s; }
    .service .service-title i {
      opacity: .04;
      -webkit-opacity: .04;
      -moz-opacity: .04;
      position: absolute;
      top: 30px;
      left: 0;
      width: 100%;
      font-size: 15em;
      color: #000; }
  .service:hover .navbar {
    background-image: none; }
  .service:hover .service-title .title {
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -webkit-animation-name: A;
    animation-name: A;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    background-color: rgba(255, 255, 255, 0.9);
    background-image: url("../images/05_bgpattern.png");
    color: #34D298; }
  .service:hover .service-title i {
    color: rgba(255, 255, 255, 0.9);
    opacity: .2;
    -webkit-opacity: .2;
    -moz-opacity: .2; }

/*=========================================================
-----      ** 14. demon footerLinks footerBox **     -----
=========================================================*/
footer .footerLinks a {
  display: inline-block;
  color: #00bcd4;
  text-shadow: 10px 10px 0 #d32f2f;
  font-family: Impact;
  font-size: 30px;
  margin: 0 5px;
  padding: 0 15px;
  position: relative;
  top: 0;
  left: 0;
  text-decoration: none;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out; }
  footer .footerLinks a:hover {
    top: 5px;
    left: 5px;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0.12);
    color: #d32f2f;
    text-decoration: none; }

li.mb-2:hover, i.far.fa-link:hover {
  color: #0094f2;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }

@media only screen and (max-width: 992px) {
  footer.page-footer .footer-copyright {
    font-size: 1rem; } }

.footerBox {
  margin: 40px 0 50px;
  color: #4D6879;
  font-size: 12px;
  padding: 0 10px; }
  .footerBox p {
    margin-bottom: 20px;
    line-height: 34px; }
  .footerBox a {
    color: #4D6879; }

.footerBox a {
  text-decoration: none; }

.ml {
  margin: 0 .3rem; }

.min.container-fluid {
  /*background:url(https://demon-style.de/images/shadows/shadow5.png) center top no-repeat*/
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7YAAAAeCAMAAAAvg3K0AAAA5FBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADTVA8dAAAATHRSTlMAAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ1Njc4OTo7PD0+P0BBQkNERUZHSElK6DxN+wAABYhJREFUeJzt131fE0cQwHGKFSlGLZRiSAOGCClPlRSFYiuRaqvUvv/3053d2d2ZfcoluRCvzO9vP+Tudr4359I3hZaDHgR9a3voWzE9sq2avsPWoMdYC3qiewo9030PrUMbqh90m6ofdVuq57q2ahvqdDo/Qd1udwfaVb3Q9Xq9PVW/339p2lcdqAaDn6FD1ZHu+Pj4RHV6evqL7pXqTDUc/gqdq16b3kAXusvLy99UV1dXb6HfoT+wd9A1NBqN3qtuVH9iH3QfXX+Z/vZ9Mn2Gbm9v//F9of1bQ+wPfsFfUb+pf/vzJxu5OLxcf/3mfvDmbm7gdtVdX5v0k3iHjwUekX5Y6qHBs1OP8NI8zAt4ruYRw9OGpz4cDuEMzuAw9Kmo44FTUodlTu1InR+c42AwgFM9gOPV56xOHA5enX/PTIIaCT0bakb0rKiZ0bMDQ9TW4wSDZUYMhs2MHQygnsR1mEkznjCoZmaf6PnFWdaDvWbH3Ay9Q4AoCJOHlk5oKiCXkblUYrtkCvXGfj1gKtgS9oZDxFnFxvEz73gd85JTlC1kTdlYZpi5ZuBMPBvOCFqTRs8aNIh2qD1r5TqCjbQj2wa3A+6JW+VOOjYaJcj7PhT6GFf418EfvjHy3o9M1yx7oeTi8Xbw5jzIiwsi0prUKilKw/IVPlj9lE8ITni1HpojITrx2Pre5wvn0wi1QEEoMfrcGvVEiVGCFJVqpuOdIlQvNUXVWY2whlqXl9HeDGxdFfzmDacUW8eccQCZSXaWyVLWlqO1HHB2oL3obteSNqotaUTtt7Td0QdWdmhb4za6CXG/uC1wJI6d216z3riYe+wq6u0MxX8NfyZGx+T5rXhuVyOGGAlEpIgY6bZ0Hg1Jq5LAtCzp6rQu0abbnh17wNtsg27ZaXA+c0CNUEvUGLVIUelaVqlzmoEaS01qXQ7I1cG2KDhNmBiOGHvIKxFkQtlifuxrJTxTzXw72/VsUNMVjZ/b9Itbq6aruutd+33thLutbde2Zb5PrDvmh7ajoGPSCY3pZ53VGvvTztpJGL3O8B7w1thetF+u+/t+Q/pvWEOxRx6pWZa7O+yDlq9MsjPjb1tPk3zgpnlynS0yXcEedUZXxxnlTjNSE1RDq/NjWwRcYhxAjiR7ymwre87Ucyw6AB3t6GBPe9obTLZb2Rw37u308vYbHCOLfJdS9+2l6pPoe+DgrqLE+rzkBe+RO/L4dkjkoVCH22w/ttsMJF2U1iTdllQlQxn+DzSxOqPlyXSu8sHzA1kimjGaZjoO6x2wraq4JDnWHHPmpCuZjj660x/f8crO+F7foCV3OG+Lqm/Ttkt1SInXQerVMH2pv0pXHK100SG8LVviubC1SBwmMMYan/Jzi0RmViaDmZUZr8/IZx5oEWlFpwtiOyHkMuUM6TTqlZWsak47wXuc8Ah5fpeH7Iv00++BoM38e2EubYaq4nK3EHyVJuCl/x+ZlBhRTO5IzjFhMnCZlhkOWJWpHDPYteBZHNt8s3vOqM4s67TwHHMKPVYeck+aj/G3xrwGsm+G4vuhxvxvVb5AAq2VAxfbS/Eb/8WaUJhfknmVlVhW0TlvIl8j20Jj3mRT+s4qn0Z6CXxp0YeVhrfwiphXE1xOtOZKC6+SvioKM8c36RRMMmFz15mtYWwrN9HTnw56Zk4mhT9Z+ZFeTDXeWrWHOUeEi7Y4Qf9XtlWbivdM2uup8jtjDi3ifh9MR5C36GGrr/vOdupmH6KZa6admVv0yX8NTcP2XrXoA8olau5zuWG9UxqSJNWQsJWkxiVsJalxCVtJalzCVpIal7CVpMYlbCWpcQlbSWpcwlaSGpewlaTGJWwlqXEJW0lqXMJWkhqXsJWkxiVsJalxCVtJalzCVpIa13+oh8asWeWazgAAAABJRU5ErkJggg==") center top no-repeat;
  width: 100%;
  height: 40px;
  z-index: 0;
  vertical-align: middle; }

.pt-22, .py-22 {
  padding: 0.8rem 0 0.8rem 0 !important; }

/*---------------------------------------------------------
-----       ** 15. Accordion +Fontawesome+ **         -----
----------------------------------------------------------*/
.accordion.accordion-ds .card {
  border: 0;
  background-color: transparent; }

.accordion .card .card-header a:hover {
  color: #f44336; }

.accordion.accordion-ds .card .card-header {
  border: 0;
  background-color: #f44336;
  -webkit-transition: .3s;
  transition: .3s; }
  .accordion.accordion-ds .card .card-header:hover {
    -webkit-transition: .3s;
    transition: .3s;
    background-color: #4288CC; }
  .accordion.accordion-ds .card .card-header .far {
    background-color: #fff;
    border-top-left-radius: 3px; }

.accordion.accordion-ds .card .card-body {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px; }

.accordion-ds .card .card-header {
  border-bottom: 0;
  padding: 1rem 1.5rem;
  background: 0 0; }
  .accordion-ds .card .card-header .card-title {
    font-weight: 400; }
  .accordion-ds .card .card-header a {
    -webkit-transition: ease-in-out .3s;
    transition: ease-in-out .3s; }
    .accordion-ds .card .card-header a:not(.collapsed) .rotate-icon {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg); }

.accordion-ds .card .fa-angle-down {
  float: right; }

.accordion-ds .card .card-body {
  font-size: .9rem;
  line-height: 1.7;
  font-weight: 300;
  color: #4f4f4f; }

.accordion-ds.accordion.accordion .card .fa-angle-down {
  background-color: transparent !important;
  color: white !important;
  margin-right: 15px; }

/*=========================================================
-----         ** 16. responsive-slider **            -----
=========================================================*/
.responsive-slider {
  width: 100%;
  position: relative; }
  .responsive-slider [data-animate] {
    opacity: 0; }
  .responsive-slider .slides {
    position: relative;
    overflow: hidden; }
    .responsive-slider .slides ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      white-space: nowrap;
      font-size: 0; }
      .responsive-slider .slides ul li {
        display: inline-block;
        max-width: 100%; }
        .responsive-slider .slides ul li .slide-body {
          display: inline-block;
          position: relative;
          max-width: 100%;
          font-size: 14px; }
          .responsive-slider .slides ul li .slide-body img {
            max-width: 100%; }
          .responsive-slider .slides ul li .slide-body .caption {
            position: absolute;
            color: #fff;
            text-shadow: 0px 1px 0px #000000; }
            .responsive-slider .slides ul li .slide-body .caption.header {
              top: 28%;
              left: 8%; }
              .responsive-slider .slides ul li .slide-body .caption.header h2 {
                font-size: 40px; }
                .responsive-slider .slides ul li .slide-body .caption.header h2 i {
                  font-size: 35px; }
            .responsive-slider .slides ul li .slide-body .caption.sub {
              bottom: -8px;
              right: -20px;
              font-weight: bold; }
            .responsive-slider .slides ul li .slide-body .caption.img-html5 {
              top: 13%;
              right: 8%;
              width: 30%; }
              .responsive-slider .slides ul li .slide-body .caption.img-html5 img {
                max-width: 100%; }
            .responsive-slider .slides ul li .slide-body .caption.img-css3 {
              top: 57%;
              right: 12%;
              width: 10%; }
              .responsive-slider .slides ul li .slide-body .caption.img-css3 img {
                max-width: 100%; }
            .responsive-slider .slides ul li .slide-body .caption.img-bootstrap {
              top: 48%;
              right: 12%;
              width: 11%; }
              .responsive-slider .slides ul li .slide-body .caption.img-bootstrap img {
                max-width: 100%; }
            .responsive-slider .slides ul li .slide-body .caption.img-twitter {
              top: 19%;
              right: 12%;
              width: 11%; }
              .responsive-slider .slides ul li .slide-body .caption.img-twitter img {
                max-width: 100%; }
            .responsive-slider .slides ul li .slide-body .caption.img-jquery {
              top: 66%;
              right: 12%;
              width: 33%; }
              .responsive-slider .slides ul li .slide-body .caption.img-jquery img {
                max-width: 100%; }
  .responsive-slider .slider-control {
    position: absolute;
    font-size: 20px;
    color: #000;
    top: 40%;
    background-color: #fff;
    padding: 10px; }
    .responsive-slider .slider-control.left {
      left: 0;
      padding-left: 0;
      border-radius: 0px 6px 6px 0px; }
      .responsive-slider .slider-control.left:hover {
        text-decoration: none;
        padding-left: 10px; }
    .responsive-slider .slider-control.right {
      right: 0;
      padding-right: 0;
      border-radius: 6px 0px 0px 6px; }
      .responsive-slider .slider-control.right:hover {
        text-decoration: none;
        padding-right: 10px; }
  .responsive-slider .pages {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center; }
    .responsive-slider .pages .page {
      display: inline-block;
      color: transparent;
      width: 10px;
      height: 10px;
      border: 3px solid #fff;
      border-radius: 50%;
      opacity: 0.5; }
      .responsive-slider .pages .page.active {
        opacity: 1; }

@media (min-width: 481px) and (max-width: 767px) {
  .responsive-slider .slides ul li .slide-body .caption.header h2 {
    font-size: 25px; }
    .responsive-slider .slides ul li .slide-body .caption.header h2 i {
      font-size: 20px; } }

@media (max-width: 480px) {
  .responsive-slider .slides ul li .slide-body .caption.header h2 {
    font-size: 16px; }
    .responsive-slider .slides ul li .slide-body .caption.header h2 i {
      font-size: 14px; } }

@media (min-width: 481px) and (max-width: 767px) {
  .responsive-slider .slides ul li .slide-body .caption.sub {
    font-size: 11px;
    bottom: 0px;
    right: -10px; } }

@media (max-width: 480px) {
  .responsive-slider .slides ul li .slide-body .caption.sub {
    font-size: 10px;
    bottom: 5px;
    right: 0; } }

@media (max-width: 480px) {
  .responsive-slider .slider-control.left, .responsive-slider .slider-control.right {
    display: none; } }

.responsive-slider-parallax {
  max-width: 100%;
  position: relative; }
  .responsive-slider-parallax [data-animate] {
    opacity: 0; }
  .responsive-slider-parallax .slides-container {
    position: relative;
    overflow: hidden;
    /*   background-image: url(../img/slider/background-paralax.jpg); */
    background-size: cover;
    background-position: 0 0; }
    .responsive-slider-parallax .slides-container ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      white-space: nowrap;
      font-size: 0; }
      .responsive-slider-parallax .slides-container ul li {
        display: inline-block;
        width: 100%; }
        .responsive-slider-parallax .slides-container ul li .slide-body {
          display: inline-block;
          position: relative;
          width: 100%;
          height: 380px;
          font-size: 14px; }
          .responsive-slider-parallax .slides-container ul li .slide-body img {
            max-width: 100%; }
          .responsive-slider-parallax .slides-container ul li .slide-body .container {
            height: 100%; }
            .responsive-slider-parallax .slides-container ul li .slide-body .container .wrapper {
              position: relative;
              height: 100%; }
          .responsive-slider-parallax .slides-container ul li .slide-body .caption {
            position: absolute;
            color: #212529;
            text-shadow: 0px 1px 0px #000000; }
            .responsive-slider-parallax .slides-container ul li .slide-body .caption.header {
              top: 28%;
              left: 8%; }
              .responsive-slider-parallax .slides-container ul li .slide-body .caption.header h2 {
                font-size: 40px;
                background: #FF6600;
                padding: 0 3px 0 3px; }
                .responsive-slider-parallax .slides-container ul li .slide-body .caption.header h2 i {
                  font-size: 35px; }
            .responsive-slider-parallax .slides-container ul li .slide-body .caption.sub {
              bottom: -8px;
              right: -20px;
              font-weight: bold;
              font-family: 'Cuprum', sans-serif;
              color: #000000;
              text-shadow: 0px 1px 0px #ffffff;
              padding: 0 3px 0 3px;
              background: #ffffff; }
            .responsive-slider-parallax .slides-container ul li .slide-body .caption.img-html5 {
              top: 12%;
              right: 8%;
              width: 30%; }
              .responsive-slider-parallax .slides-container ul li .slide-body .caption.img-html5 img {
                max-width: 100%; }
            .responsive-slider-parallax .slides-container ul li .slide-body .caption.img-css3 {
              top: 58%;
              right: 12%;
              width: 10%; }
              .responsive-slider-parallax .slides-container ul li .slide-body .caption.img-css3 img {
                max-width: 100%; }
            .responsive-slider-parallax .slides-container ul li .slide-body .caption.img-bootstrap {
              top: 56%;
              right: 12%;
              width: 11%; }
              .responsive-slider-parallax .slides-container ul li .slide-body .caption.img-bootstrap img {
                max-width: 100%; }
            .responsive-slider-parallax .slides-container ul li .slide-body .caption.img-twitter {
              top: 20%;
              right: 12%;
              width: 11%; }
              .responsive-slider-parallax .slides-container ul li .slide-body .caption.img-twitter img {
                max-width: 100%; }
            .responsive-slider-parallax .slides-container ul li .slide-body .caption.img-jquery {
              top: 55%;
              right: 12%;
              width: 33%; }
              .responsive-slider-parallax .slides-container ul li .slide-body .caption.img-jquery img {
                max-width: 100%; }
  .responsive-slider-parallax .slider-control {
    position: absolute;
    font-size: 20px;
    color: #000;
    top: 45%;
    background-color: #5d33fb80;
    background: #5d33fb80;
    background: -webkit-gradient(linear, left top, right top, color-stop(30%, #1ebbf0), to(#5d33fbbf));
    background: linear-gradient(to right, #1ebbf0 30%, #5d33fbbf 100%);
    padding: 10px;
    opacity: 0.6; }
    .responsive-slider-parallax .slider-control.left {
      left: 10px;
      padding-left: 7px;
      border-radius: 6px; }
      .responsive-slider-parallax .slider-control.left:hover {
        text-decoration: none;
        opacity: 1; }
    .responsive-slider-parallax .slider-control.right {
      right: 10px;
      padding-right: 7px;
      border-radius: 6px; }
      .responsive-slider-parallax .slider-control.right:hover {
        text-decoration: none;
        opacity: 1; }
  .responsive-slider-parallax .pages {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center; }
    .responsive-slider-parallax .pages .page {
      display: inline-block;
      color: transparent;
      width: 5px;
      height: 5px;
      border: 3px solid #fff;
      border-radius: 50%;
      opacity: 0.5; }
      .responsive-slider-parallax .pages .page.active {
        opacity: 1; }

@media (min-width: 481px) and (max-width: 767px) {
  .responsive-slider-parallax .slides-container ul li .slide-body .caption.header h2 {
    font-size: 25px;
    line-height: 25px; }
    .responsive-slider-parallax .slides-container ul li .slide-body .caption.header h2 i {
      font-size: 20px; } }

@media (max-width: 480px) {
  .responsive-slider-parallax .slides-container ul li .slide-body .caption.header h2 {
    font-size: 16px;
    line-height: 16px; }
    .responsive-slider-parallax .slides-container ul li .slide-body .caption.header h2 i {
      font-size: 14px; } }

@media (min-width: 481px) and (max-width: 767px) {
  .responsive-slider-parallax .slides-container ul li .slide-body .caption.sub {
    font-size: 11px;
    line-height: 11px;
    bottom: 0px;
    right: -10px; } }

@media (max-width: 480px) {
  .responsive-slider-parallax .slides-container ul li .slide-body .caption.sub {
    font-size: 10px;
    line-height: 10px;
    bottom: 0px;
    right: 0; } }

@media (min-width: 1200px) {
  .responsive-slider-parallax .slides-container ul li .slide-body {
    height: 480px; } }

@media (min-width: 768px) and (max-width: 979px) {
  .responsive-slider-parallax .slides-container ul li .slide-body {
    height: 300px; } }

@media (min-width: 481px) and (max-width: 767px) {
  .responsive-slider-parallax .slides-container ul li .slide-body {
    height: 220px; } }

@media (max-width: 480px) {
  .responsive-slider-parallax .slides-container ul li .slide-body {
    height: 150px; } }

@media (max-width: 480px) {
  .responsive-slider-parallax .slider-control.left, .responsive-slider-parallax .slider-control.right {
    display: none; } }

/*---------------------------------------------------------
-----           ** 17. Social Icons 2 img **          -----
----------------------------------------------------------*/
.align-right {
  text-align: right !important; }

.float-right {
  float: right; }

.ulti a {
  -webkit-transition: all .2s ease 0;
  transition: all .2s ease 0; }

.footer_mini ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; }

.footer_mini_right {
  font-size: 11px;
  color: #888; }

.social-icons ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  list-style: none;
  text-align: left; }
  .social-icons ul li {
    width: 31px;
    height: 31px;
    display: inline-block;
    position: relative;
    float: none;
    margin: 0;
    padding: 0;
    line-height: 31px !important; }
    .social-icons ul li a {
      -webkit-transition: all .3s ease 0s;
      transition: all .3s ease 0s;
      text-indent: -9999px;
      display: inline-block;
      width: 31px;
      height: 31px; }

.social-icons li a {
  background-color: transparent; }

.social-icons li.facebook a:hover {
  background-color: #3b5998; }

.social-icons li.linkedin a:hover {
  background-color: #0082ca; }

.social-icons li.pinterest a:hover {
  background-color: #cb2027; }

.social-icons li.rss a:hover {
  background-color: #fe9900; }

.social-icons li.twitter a:hover {
  background-color: #6795de; }

.social-icons ul li a {
  background-position: -4px -4px !important; }

.social-icons li {
  margin-left: 4px !important; }
  .social-icons li a:hover {
    background-position: -4px -44px !important; }
  .social-icons li:first-child {
    margin-left: 0 !important; }

.social-icons ul li a {
  border-radius: 2px; }

/*.social-icons li.facebook a{background:url(../img/facebook2.png) no-repeat 0 0}*/
/*.social-icons li.googleplus a{background:url(../img/googleplus.png) no-repeat 0 0}*/
/*.social-icons li.linkedin a{background:url(../img/linkedin.png) no-repeat 0 0}*/
/*.social-icons li.pinterest a{background:url(../img/pinterest.png) no-repeat 0 0}*/
/*.social-icons li.rss a{background:url(../img/rss.png) no-repeat 0 0}*/
/*.social-icons li.twitter a{background:url(../img/twitter2.png) no-repeat 0 0}*/
@media screen and (min-width: 800px) {
  .one_half {
    width: 48%; }
  .last_col {
    float: left;
    clear: right;
    margin-bottom: 0;
    margin-right: 0 !important; }
  .one_half {
    position: relative;
    float: left;
    margin-right: 4%; } }

@media only screen and (max-width: 799px) {
  .social-icons ul {
    text-align: center !important; }
  .footer_mini_right {
    margin-bottom: 20px; }
    .footer_mini_right > .float-right {
      float: none; } }

/*---------------------------------------------------------
-----           ** 19. footer-social-icons **         -----
----------------------------------------------------------*/
.footer-social-icons {
  width: auto;
  display: block;
  margin: 0 auto;
  text-align: center; }

.social-icon {
  color: #fff; }

ul.social-icons {
  margin-top: 10px;
  padding: 0; }

.social-icons li {
  vertical-align: top;
  display: inline; }

.social-icons a {
  color: #fff;
  text-decoration: none; }

.si {
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
  .si.fa-facebook-f {
    padding: 10px 14px;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30; }
    .si.fa-facebook-f:hover {
      background-color: #3b5998; }
  .si.fa-twitter {
    padding: 10px 12px;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30; }
    .si.fa-twitter:hover {
      background-color: #6795de; }
  .si.fa-rss {
    padding: 10px 14px;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30; }
    .si.fa-rss:hover {
      background-color: #eb8231; }
  .si.fa-youtube {
    padding: 10px 14px;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30; }
    .si.fa-youtube:hover {
      background-color: #ed302f; }
  .si.fa-reddit-alien {
    padding: 10px 14px;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30; }
    .si.fa-reddit-alien:hover {
      background-color: #ff4500; }
  .si.fa-github-alt {
    padding: 10px 14px;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30; }
    .si.fa-github-alt:hover {
      background-color: #212121; }
  .si.fa-linkedin {
    padding: 10px 14px;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #322f30; }
    .si.fa-linkedin:hover {
      background-color: #0082ca; }
  .si:hover {
    color: #fff;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }

/*=========================================================
-----         ** 20. demon wordsrotator **           -----
=========================================================*/
.wordsrotator_words {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  -webkit-transition: width 1s;
  transition: width 1s; }
  .wordsrotator_words .wordsrotator_wordIn {
    position: relative;
    display: inline-block;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -ms-animation-duration: 1s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both; }
  .wordsrotator_words .wordsrotator_wordOut {
    position: relative;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -ms-animation-duration: 1s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;
    left: 0;
    top: 0;
    position: absolute;
    display: inline-block; }
    .wordsrotator_words .wordsrotator_wordOut span {
      width: auto;
      position: relative; }
  .wordsrotator_words .wordsrotator_wordIn {
    opacity: 0; }

/*---------------------------------------------------------
-----            ** 23. +zigzag+ Draw **              -----
----------------------------------------------------------*/
.zigzag {
  stroke-dasharray: 1200%;
  stroke-dashoffset: -1200%;
  -webkit-animation: dash 2s ease-out forwards;
  animation: dash 2s ease-out forwards;
  fill: none;
  stroke: #fb3644;
  stroke-width: 3.7px;
  stroke-miterlimit: 10; }

.path {
  -webkit-animation: draw 3.5s infinite;
          animation: draw 3.5s infinite; }

@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0; } }

@keyframes dash {
  to {
    stroke-dashoffset: 0; } }

@-webkit-keyframes draw {
  50% {
    stroke-dashoffset: 0; } }

@keyframes draw {
  50% {
    stroke-dashoffset: 0; } }

/*=========================================================
-----                ** 22. ilogo **                  -----
=========================================================*/
.ilogo {
  text-shadow: #3075a5 0px 0px 0px, #3076a7 1px 1px 0px, #3178a9 2px 2px 0px, #3179ab 3px 3px 0px, #327bad 4px 4px 0px, #337caf 5px 5px 0px, #337db1 6px 6px 0px, #347fb3 7px 7px 0px, #3480b5 8px 8px 0px, #3582b7 9px 9px 0px, #3583b9 10px 10px 0px, #3685bb 11px 11px 0px, #3786bd 12px 12px 0px, #3788bf 13px 13px 0px, #3889c1 14px 14px 0px, #388ac3 15px 15px 0px, #398cc5 16px 16px 0px, #3a8dc7 17px 17px 0px, #3a8fc9 18px 18px 0px, #3b90cb 19px 19px 0px, #3b92cd 20px 20px 0px, #3c93cf 21px 21px 0px, #3c94d1 22px 22px 0px, #3d96d3 23px 23px 0px, #3e97d5 24px 24px 0px, #3e99d7 25px 25px 0px, #3f9ad9 26px 26px 0px, #3f9cdb 27px 27px 0px, #409ddd 28px 28px 0px, #419edf 29px 29px 0px, #41a0e1 30px 30px 0px, #42a1e3 31px 31px 0px, #42a3e5 32px 32px 0px, #43a4e7 33px 33px 0px, #43a6e9 34px 34px 0px;
  font-size: 80px;
  color: white;
  height: 150px;
  width: 150px;
  line-height: 150px;
  border-radius: 0%;
  text-align: center;
  background-color: #44a7eb; }

/*---------------------------------------------------------
-----        ** 18. services: service-box **          -----
----------------------------------------------------------*/
.services {
  margin-top: 25px; }

.service-box {
  text-align: center; }
  .service-box i {
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #49a0cc;
    font-size: 30px;
    margin-bottom: 20px;
    -webkit-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out; }
  .service-box:hover i {
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    background-color: #5d33fb;
    background-image: -webkit-gradient(linear, left top, right top, from(#5d33fb), to(#4eefed));
    background-image: linear-gradient(90deg, #5d33fb, #4eefed);
    color: #fff; }
  .service-box h3 {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 18px; }
  .service-box p {
    font-size: 13px; }

@media screen and (max-width: 767px) {
  .services {
    margin: 0; }
  .service-box i {
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #49a0cc;
    font-size: 18px;
    /* margin-bottom: -3px; */
    -webkit-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out; }
  .flex-center p {
    margin: 5px; }
  .services .col-md-4.mb-2 {
    margin-bottom: 0.25rem !important; } }

/*=========================================================
-----         ** 23. demon custom gedöns **           -----
=========================================================*/
.section-padding {
  display: block;
  padding-top: 5rem;
  padding-bottom: 3.125rem;
  width: 100%;
  height: 100%;
  overflow-x: hidden; }

.intro-page .navbar:not(.top-nav-collapse) {
  background-color: transparent !important; }

html, body, header, .full-height, .jarallax {
  height: 100%;
  height: 100vh; }

@media (min-width: 560px) and (max-width: 740px) {
  html, body, header, .full-height, .jarallax {
    height: 500px; } }

@media (min-width: 800px) and (max-width: 850px) {
  .navbar {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important; }
    .navbar:not(.top-nav-collapse) {
      background: #3f51b5 !important; } }

.font-small {
  font-size: 0.9rem; }

.intro h1 {
  font-family: inherit;
  font-size: 2.25em;
  line-height: 1.1;
  margin: .55em 0 .25em;
  color: inherit; }

@media screen and (max-width: 768px) {
  header h3.display-4 {
    font-size: 3rem; } }

@media screen and (max-width: 542px) {
  header h3.display-4 {
    font-size: 1.8rem; } }

@media screen and (max-width: 768px) {
  header h2.intro-subtext span {
    font-size: 2rem; } }

@media screen and (max-width: 542px) {
  header h2.intro-subtext span {
    font-size: 1.6rem; } }

#home .btn-blue {
  opacity: 1; }

#home .btn-blue:hover {
  opacity: 0.6; }

#home h2 > span:nth-child(1) {
  color: #673AB7 !important; }

.btn-info, .btn-success {
  color: #212529 !important; }

footer .list-unstyled li > a {
  color: #26C6DA; }

footer .list-unstyled li > a:hover {
  margin-left: 5px;
  color: #1976d2; }

.demon-gradient .top-nav-collapse {
  background: #4B79A1;
  background-color: #4B79A1;
  background: -webkit-gradient(linear, left top, right top, from(#283E51), to(#4B79A1));
  background: linear-gradient(to right, #283E51, #4B79A1); }

.demon-gradient .page-footer {
  background: #4B79A1;
  background-color: #4B79A1;
  background: -webkit-gradient(linear, right top, left top, from(#283E51), to(#4B79A1));
  background: linear-gradient(to left, #283E51, #4B79A1); }

.social-icons ul {
  text-align: center !important; }

.navbar:not(.top-nav-collapse) {
  background-color: transparent !important; }

.contact-icons {
  list-style: none; }

.navbar-dark .navbar-brand {
  color: #1976d2; }

.navbar.navbar-dark .navbar-nav .nav-item .nav-link:hover {
  color: #039be5;
  text-shadow: 1px 1px 4px #ff3547; }

.navbar-dark .navbar-brand:hover {
  color: #007bff !important;
  text-shadow: 1px 1px 4px #ff3547; }

@media screen and (max-width: 768px) {
  #contact .col-md-4.col-xl-3 {
    padding-top: 50px;
    text-align: center; } }

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

#page-top > footer > .footer-copyright {
  overflow: hidden;
  height: 50px;
  line-height: 50px;
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(0, 0, 0, 0.2);
  text-align: center;
  font-size: .95rem; }

.bg-gradient {
  background-color: #5d33fb;
  background-image: -webkit-gradient(linear, left top, right top, from(#5d33fb), to(#4eefed));
  background-image: linear-gradient(90deg, #5d33fb, #4eefed); }

.bg-parallax {
  position: relative;
  padding-top: 100px;
  padding-bottom: 150px; }
  .bg-parallax .parallax-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(93, 51, 251, 0.5);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(93, 51, 251, 0.75)), to(rgba(78, 239, 237, 0.75)));
    background-image: linear-gradient(90deg, rgba(93, 51, 251, 0.75), rgba(78, 239, 237, 0.75)); }

.mdb-skin-custom .btn-ptc {
  background-color: #4285f4 !important;
  color: #fff !important; }

a#alert-info, a#alert-success {
  font-weight: 500; }

/*=========================================================
-----         ** 24. demon scrolltotop **           -----
=========================================================*/
.scrolltotop {
  cursor: pointer;
  border: 2px solid #d32f2f;
  border-radius: 7px;
  padding: 8px 10px 8px;
  position: fixed;
  bottom: 1em;
  right: 20px;
  display: none;
  text-decoration: none;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  font-size: 16px;
  opacity: .75;
  z-index: 9999;
  background-color: transparent;
  color: #d32f2f !important;
  box-shadow: 0 5px 5px 0 rgba(64, 66, 72, 0.25); }
  .scrolltotop:hover {
    color: #1976d2 !important;
    border: 2px solid #1976d2;
    opacity: 1;
    -webkit-transition: all 250ms ease-in-out,opacity .2s linear;
    transition: all 250ms ease-in-out,opacity .2s linear; }

/*=========================================================
-----  ** 25. scrollbar-gradient-blue + selection  ** -----
=========================================================*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #F5F5F5;
  border-radius: 10px; }

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #F5F5F5; }

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background: linear-gradient(40deg, #45cafc, #303f9f);
  background-image: linear-gradient(120deg, #45cafc 0%, #303f9f 100%); }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(230deg, #a24bcf, #4b79cf, #4bc5cf);
    background-image: linear-gradient(230deg, #4bc5cf 0%, #4b79cf 100%); }

::-moz-selection {
  background-color: #f06565;
  color: #fff; }

::selection {
  background-color: #f06565;
  color: #fff; }

/*=========================================================
-----   ** 26. media all and portrait + landscape **  -----
=========================================================*/
@-webkit-viewport {
  width: device-width; }

@-moz-viewport {
  width: device-width; }

@-ms-viewport {
  width: device-width; }

@-o-viewport {
  width: device-width; }

@viewport {
  width: device-width; }

/*!
 * Ok so you have made it this far, that means you are very keen to on my code.
 * Anyway I don't really mind it. This is a great way to learn so you actually doing the right thing:)
 */