/************* CSS Styles ************************
    Template Name: Adrian - Personal Portfolio Template
    Author: cosmos-themes
    Version: 2.0
    Copyright 2018
****************************************/


/*=========================================

            Table of Content
            1. Body and Core Css
            2. Preloader
            3. Navbar
            4. Home Banner Section
            5. About Section
            6. Services Section
            7. Portfolio Section
            8. Blog Section
            9. Contact Section
            10. Footer
            11. Blog Banner Section
            12. Blog Post Page Main Area
            13. Site Mobile Responsive
            14. Particles Background

===========================================*/

/* montserrat-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat-v29-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/montserrat-v29-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-v29-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/montserrat-v29-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v29-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/montserrat-v29-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/montserrat-v29-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v29-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/montserrat-v29-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v29-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/montserrat-v29-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v29-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/montserrat-v29-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat-v29-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/montserrat-v29-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v29-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/montserrat-v29-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/poppins-v23-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/poppins-v23-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/poppins-v23-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/poppins-v23-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v23-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/poppins-v23-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/poppins-v23-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v23-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/poppins-v23-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v23-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/poppins-v23-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v23-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/poppins-v23-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/poppins-v23-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/poppins-v23-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/poppins-v23-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/poppins-v23-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/*============ 1. Body and Core Css ============*/

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    font-family: "Poppins", sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Montserrat", sans-serif;
}

h2 {
    font-weight: 700;
}

h3,
h4,
h5,
h6 {
    font-weight: 600;
}

p {
    color: #212529;
    line-height: 28px;
}

a {
    color: #000;
}

a:hover {
    text-decoration: none;
}

a:hover,
a:focus {
    outline: none;
}

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

img {
    max-width: 100%;
    height: auto;
}

section {
    overflow: hidden;
}


/*Margins*/

.padtop-20 {
    padding-top: 20px;
}
.padtop-40 {
    padding-top: 40px;
}
.padtop-60 {
    padding-top: 60px;
}
.padtop-90 {
    padding-top: 90px;
}
.padbtm-20 {
    padding-bottom: 20px;
}
.padbtm-40 {
    padding-bottom: 40px;
}
.padbtm-60 {
    padding-bottom: 60px;
}
.padbtm-90 {
    padding-bottom: 90px;
}
.martop-20 {
    margin-top: 20px;
}
.martop-40 {
    margin-top: 40px;
}
.martop-60 {
    margin-top: 60px;
}
.marbtm-20 {
    margin-bottom: 20px;
}
.marbtm-40 {
    margin-bottom: 40px;
}
.marbtm-60 {
    margin-bottom: 60px;
}

.main-button {
    text-decoration: none;
    border: 1px solid #aaa;
    color: #000;
    padding: 10px 20px;
    font-size: 14px;
    text-transform: uppercase;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    background-color: transparent;
}

.main-button:hover {
    border: 1px solid #000;
    background: #000;
    color: #fff;
    text-decoration: none;
}

.main-button:hover,
.main-button:focus {
    outline: none;
}

.main-button.success {
    border-color: #28a745;
    color: #28a745;
}

.main-button.success:hover {
    background-color: #28a745;
    color: #fff;
}

.main-button.error {
    border-color: #dc3545;
    color: #dc3545;
}

.main-button.error:hover {
    background-color: #dc3545;
    color: #fff;
}

.wave {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    left: 0;
    fill: #fff;
    z-index: 1;
    visibility: hidden;
}

.wave-primary {
    position: relative;
}

.wave-primary .wave {
    fill: #fff;
    display: block;
    visibility: visible;
}

.wave-secondary {
    position: relative;
}

.wave-secondary .wave {
    fill: #f3f3f3;
    visibility: visible;
}

.wave-footer {
    position: relative;
}

.wave-footer .wave {
    fill: #111;
    visibility: visible;
    top: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}


/*============ 2. Preloader ============*/

body.loaded p {
    opacity: 1;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
}

#loader-wrapper .loader-section {
    position: fixed;
    top: -500%;
    width: 101%;
    height: 1000%;
    background: #111;
    z-index: 1000;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

#loader-wrapper .loader-section.section-left {
    left: -50%;
}

#loader-wrapper .loader-section.section-right {
    right: -50%;
}

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

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

.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded .loading {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
    visibility: hidden;
}

.loading {
    z-index: 1001;
    display: inline-block;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 70px;
    margin-top: -35px;
    margin-left: -35px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 10px solid transparent;
    border-left: 10px solid #3c3c3c;
    border-bottom: 10px solid #3c3c3c;
    -webkit-animation: spin-one 2s linear infinite;
    animation: spin-one 2s linear infinite;
}

.loading:before,
.loading:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 10px solid transparent;
    border-left: 10px solid #3c3c3c;
    border-bottom: 10px solid #3c3c3c;
}

.loading:before {
    -webkit-animation: spin-two 1s linear infinite;
    animation: spin-two 1s linear infinite;
}

.loading:after {
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
}

@-webkit-keyframes spin-one {
    0% {
        -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    100% {
        -webkit-transform: rotateX(0) rotateY(0) rotateZ(360deg);
        transform: rotateX(0) rotateY(0) rotateZ(360deg);
    }
}

@keyframes spin-one {
    0% {
        -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    100% {
        -webkit-transform: rotateX(0) rotateY(0) rotateZ(360deg);
        transform: rotateX(0) rotateY(0) rotateZ(360deg);
    }
}

@-webkit-keyframes spin-two {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
    }
    100% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
}

@keyframes spin-two {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
    }
    100% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
}


/*============ 3 .Navbar ============*/

.navbar {
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

.navbar .navbar-brand img {
    width: 100%;
	max-width: 250px;
}

.navbar .navbar-toggler {
    border: none;
}

.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:hover {
    outline: none;
}

.navbar .navbar-nav .back-button {
    color: #fff;
}

.navbar-scroll-fixed {
    padding-top: 10px;
    padding-bottom: 10px;
    position: fixed;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 70px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 70px rgba(0, 0, 0, 0.5);
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

.navbar-scroll-fixed .navbar-nav .back-button {
    color: #000;
}


/*============ Home Page ============*/


/*============ 4. Home Banner Section ============*/

/*Banner Section*/
#banner {
    background-position: top center;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
}

#banner:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.4;
    z-index: 1;
}

#banner .banner-text {
    text-align: center;
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#banner .banner-text h1 {
    font-weight: 800;
    color: #fff;
    font-size: 60px;
    line-height: 100px;
    letter-spacing: 2px;
}

#banner .banner-text #typed {
    color: #fff;
    font-size: 32px;
    font-weight: 500;
}


/*Animations*/

/*Typed Cursor Blink*/

.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    font-size: 35px;
    font-weight: 900;
    color: #fff;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*============ 5. About Section ============*/

#about {
    padding-top: 75px;
    padding-bottom: 160px;
}

#about .about-info-container {
    background-color: #f3f3f3;
    margin-top: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.01);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.01);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#about .about-info-container:hover {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.01);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.01);
}

#about .about-info-container .about-info {
    text-align: right;
    padding-right: 50px;
}

#about .about-info-container .about-info .info-item img {
    width: 100px;
    -webkit-border-radius: 90px;
    border-radius: 90px;
    border: 5px solid #fff;
    margin-bottom: 20px;
}

#about .about-info-container .about-info .info-item p {
    margin-bottom: 10px;
}

#about .about-info-container .about-info .info-item span {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #000;
}

#about .about-info-container .about-skills {
    padding-left: 50px;
}

#about .about-info-container .about-skills h3 {
    font-weight: 700;
    margin-bottom: 20px;
}

#about .about-info-container .about-skills .progress-box {
    margin-bottom: 20px;
}

#about .about-info-container .about-skills .progress-box p {
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 10px;
    color: #000;
}

#about .about-info-container .about-skills .progress-box .progress {
    -webkit-border-radius: 0;
    border-radius: 0;
    height: 2px;
}

#about .about-info-container .about-skills .progress-box .progress .progress-bar {
    background-color: #616161;
    -webkit-transition: width 1.5s ease;
    -o-transition: width 1.5s ease;
    transition: width 1.5s ease;
    width: 0;
}


/*============ 6. Services Section ============*/

#services {
    padding-top: 120px;
    padding-bottom: 110px;
}

#services .services-item {
    text-align: center;
    padding: 30px 20px;
    background-color: #f2f2f2;
    margin-bottom: 50px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#services .services-item:hover {
    -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
}

#services .services-item .fa {
    margin-bottom: 20px;
}

#services .services-item h3 {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
}


/*============ 7. Portfolio Section ============*/

#leistungen {
    padding-top: 100px;
    padding-bottom: 50px;
    background-color: #f2f2f2;
}

#portfolio {
    padding-top: 75px;
    padding-bottom: 130px;
    background-color: #f2f2f2;
}

#kontakt {
    padding-top: 100px;
    padding-bottom: 130px;
}

.portfolio-header .portfolio-filter {
    padding-top: 5px;
}

.portfolio-header .portfolio-filter ul {
    margin: auto;
    display: inline-block;
    padding-left: 0px;
}

.portfolio-header .portfolio-filter ul li {
    float: left;
    color: #748182;
    list-style: none;
    margin-right: 10px;
    cursor: pointer;
    font-size: 15px;
}

.portfolio-header .portfolio-filter ul li.sel-item {
    color: #000 !important;
    font-weight: bold;
}

.portfolio-header .portfolio-filter ul li li:last-child {
    margin-right: 0;
}

.portfolio-items .single-item {
    margin-bottom: 30px;
}

.portfolio-items .single-item .popup {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

.portfolio-items .single-item .popup img {
    width: 100%;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}

.portfolio-items .single-item .popup:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    -webkit-transition: background-color .6s ease-in-out;
    -o-transition: background-color .6s ease-in-out;
    transition: background-color .6s ease-in-out;
}

.portfolio-items .single-item .popup:hover:after {
    background-color: rgba(0, 0, 0, 0.5);
}

.portfolio-items .single-item .popup:hover img {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}


/*============ 8. Blog Section ============*/

#blog {
    background-color: #f2f2f2;
    padding-top: 120px;
    padding-bottom: 160px;
}

.blog-post {
    color: #000;
    margin-bottom: 40px;
}

.blog-post:hover {
    color: #000;
    text-decoration: none;
}

.blog-post .post-image {
    position: relative;
}

.blog-post .post-image img {
    width: 100%;
}

.blog-post .post-image:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: .3;
    z-index: 1;
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}

.blog-post .post-image:hover:before {
    opacity: 0;
}

.blog-post .post-title {
    font-size: 18px;
    line-height: 25px;
    padding-top: 30px;
    padding-bottom: 15px;
    margin-bottom: 0;
}

.blog-post .post-body {
    font-size: 15px;
    line-height: 25px;
}

.blog-post .post-meta {
    font-size: 13px;
    font-weight: 400;
    color: #b8b8b8;
    float: right;
}

.blog-post .post-meta span {
    color: #000;
    font-weight: 600;
}

.view-more-button {
    text-align: center;
    margin-top: 20px;
}

.view-more-button a {
    display: inline-block;
}


/*============ 9. Contact Section ============*/

#contact {
    padding-top: 120px;
    padding-bottom: 160px;
}

#contact h2 {
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 24px;
}

#contact .contact-item h4 {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 21px;
}

#contact .contact-item p {
    font-size: 14px;
    line-height: 24px;
}

#contact form .form-group {
    margin-bottom: 24px;
}

#contact form .form-group .form-control {
    font-size: 14px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #cccccc;
    height: 52px;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

#contact form .form-group textarea.form-control {
    height: auto;
}

#contact form .form-group .con-error {
    border-color: red;
}

#contact form .form-control:hover,
#contact form .form-control:active,
#contact form .form-control:focus {
    -webkit-box-shadow: none;
    -moz-webkit-box-shadow: none;
    box-shadow: none;
    border-color: #666666;
}


/*============ 10. Footer ============*/

footer {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #111;
    text-align: center;
}

footer ul.social-icons {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

footer ul.social-icons li {
    display: inline-block;
    margin: 0 15px;
}

footer ul.social-icons li:first-child {
    margin-left: 0;
}

footer ul.social-icons li:last-child {
    margin-right: 0;
}

footer ul.social-icons li a {
    color: #757575;
    font-size: 16px;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

footer ul.social-icons li a:hover {
    color: #fff;
}

footer p {
  color: #aaa;
  margin: 24px 0 0 0;
  font-size: 18px;
}
footer a {
  color: #aaa;
  margin-left: 25px;
  font-size: 18px;
  display: inline-block;
}
.copyright {
  width: 45%;
  text-align: left;
  display: inline-block;
}
.impressum {
  width: 45%;
  text-align: right;
  display: inline-block;
}

/*============ Blog And Single-Blog Page ============*/

/*============ 11. Blog Post Page Banner ============*/

.blog-banner {
    padding: 150px 0;
    text-align: center;
    background-color: #111;
    color: #fff;
}

.blog-banner h1 {
    font-size: 46px;
    color: #fff;
    text-transform: capitalize;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 17px;
}

.blog-banner .bread-crumb a {
    color: #fff;
}


/*============ 12. Blog Post Page Main Area ============*/

#blog-posts-area,
#single-blog-area {
    background-color: #f2f2f2;
    padding: 100px 0;
}

.blog-featured-image {
    overflow: hidden;
    max-height: 400px;
}

.blog-meta span {
    font-size: 13px;
    text-transform: uppercase;
    margin-right: 15px;
}

.blog-content {
    margin-top: 12px;
}

#blog-posts-area .single-blog,
#single-blog-area .single-blog-details {
    padding: 30px;
    margin-bottom: 50px;
    background-color: #fff;
}

#blog-posts-area .single-blog h2,
#single-blog-area .single-blog-details h2 {
    margin: 20px 0 5px;
    font-size: 24px;
    font-weight: 600;
}

#blog-posts-area .pagination {
    margin: 0;
}

#blog-posts-area .pagination ul {
    list-style: outside none none;
}

#blog-posts-area .pagination ul li {
    display: inline-block;
}

#blog-posts-area .pagination ul li a {
    background-color: #fff;
    color: #444;
    display: block;
    font-size: 20px;
    font-weight: 500;
    height: 35px;
    line-height: 34px;
    margin-right: 5px;
    text-align: center;
    width: 35px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

#blog-posts-area .pagination ul li.active a,
#blog-posts-area .pagination ul li:hover a {
    background-color: #000;
    color: #fff;
}

#blog-posts-area #sidebar .widget,
#single-blog-area #sidebar .widget {
    padding: 20px;
    background-color: #fff;
    margin-bottom: 40px;
}

#blog-posts-area #sidebar .widget .widget-heading,
#single-blog-area #sidebar .widget .widget-heading {
    font-size: 22px;
    margin-bottom: 20px;
    text-transform: capitalize;
    font-weight: 600;
}

#blog-posts-area #sidebar .search-form,
#single-blog-area #sidebar .search-form {
    width: 100%;
    background-color: #f2f2f2;
}

#blog-posts-area #sidebar .search-form input[type="search"],
#single-blog-area #sidebar .search-form input[type="search"] {
    padding: 15px;
    border: none;
    background: transparent;
    width: 80%;
    color: #000;
}

#blog-posts-area #sidebar .search-form button[type="submit"],
#single-blog-area #sidebar .search-form button[type="submit"] {
    border: none;
    color: #fff;
    float: right;
    padding: 14px;
    width: 20%;
    cursor: pointer;
    background: #000;
    border: 1px solid #000;
}

#blog-posts-area #sidebar .featured-post p,
#single-blog-area #sidebar .featured-post p {
    margin-top: 10px;
}

#blog-posts-area #sidebar .social .social-icons,
#single-blog-area #sidebar .social .social-icons {
    list-style: outside none none;
    padding: 0;
    margin: 0;
}

#blog-posts-area #sidebar .social .social-icons li,
#single-blog-area #sidebar .social .social-icons li {
    line-height: 22px;
    display: inline-block;
    margin-right: 8px;
}

#blog-posts-area #sidebar .social .social-icons li a,
#single-blog-area #sidebar .social .social-icons li a {
    padding-bottom: 8px;
    display: block;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #aaaaaa;
    color: #444;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 16px;
    text-align: center;
}

#blog-posts-area #sidebar .social .social-icons li a:hover,
#single-blog-area #sidebar .social .social-icons li a:hover {
    background-color: #000;
    color: #fff;
}

.single-blog-details blockquote {
    font-size: 14px;
    font-style: italic;
    line-height: 30px;
    background-color: #f2f2f2;
    margin-top: 15px;
    margin-bottom: 15px;
    border-left: 5px solid #000;
    padding: 10px 20px;
    margin: 0 0 20px;
}

.discussion-list-area {
    padding: 30px;
    margin-bottom: 50px;
    background-color: #fff;
}

.discussion-list-area .discussion-title {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 21px;
}

.discussion-list-area ul.discussion-list {
    list-style: none;
}

.discussion-list-area ul.discussion-list li.discussion-item {
    border-bottom: 1px solid #ddd;
    margin-bottom: 40px;
    padding-bottom: 25px;
}

.discussion-list-area ul.discussion-list li.discussion-item:last-child {
    border-bottom: none;
}

.discussion-meta h5 {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 14px;
}

.discussion-meta p {
    font-size: 12px;
}

.discussion-reply-link {
    font-weight: 600;
}

.discussion-reply-link:hover {
    color: #000;
}

.row.reply-area {
    margin-left: 120px;
    margin-top: 40px;
}

.discussion-form-container {
    background-color: #fff;
    padding: 30px;
    margin-bottom: 50px;
}

.discussion-form-container h3 {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 21px;
}

.discussion-form-container .form-control {
    background: #f2f2f2;
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-size: 15px;
    height: 45px;
}

.discussion-form-container textarea.form-control {
    height: auto;
    resize: none;
}


/*============ 13. Site Mobile Responsive ============*/

/*Responsive Max Width 992px*/

@media screen and (max-width: 992px) {
    #banner .banner-text h1 {
        font-size: 50px;
    }
    #banner .banner-text #typed {
        font-size: 30px;
    }
    #banner .banner-text .typed-cursor {
        font-size: 30px;
    }
    #about .about-info-container .about-info {
        text-align: center;
        margin-bottom: 60px;
        padding-right: 15px;
    }
    #about .about-info-container .about-skills {
        padding-left: 15px;
    }
    #about .about-info-container .about-skills h3 {
        text-align: center;
    }
    #blog-posts-area .pagination {
        margin-bottom: 50px;
    }
    .wave {
        height: 25px;
    }
}


/*Max Width 768px*/

@media screen and (max-width: 767px) {
    #banner .banner-text h1 {
        font-size: 32px;
        line-height: 50px;
    }
    #banner .banner-text #typed {
        font-size: 20px;
    }
    #banner .banner-text .typed-cursor {
        font-size: 20px;
    }
    .navbar .navbar-brand img {
        width: 80%;
    }
    .navbar.navbar-dark .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.9);
        text-align: center;
    }
    .navbar.navbar-dark .navbar-collapse li.nav-item {
        border-bottom: 1px solid #111;
        margin-bottom: 4px;
    }
    .navbar.navbar-dark .navbar-collapse li.nav-item:last-child {
        margin-bottom: 0;
        border-bottom: 0px;
    }
    .navbar.navbar-light {
        text-align: center;
    }
    .navbar.navbar-light li.nav-item {
        border-bottom: 1px solid #eee;
        margin-bottom: 4px;
    }
    .navbar.navbar-light li.nav-item:last-child {
        margin-bottom: 0;
        border-bottom: 0;
    }
    #contact .message-box h2 {
        margin-top: 50px;
        text-align: left !important;
    }
    .blog-banner h1 {
        font-size: 32px;
    }
    .blog-banner .bread-crumb a {
        font-size: 14px;
    }
    .row.reply-area {
        margin-left: 40px;
        margin-top: 20px;
    }
}


/*============ 13. Particles Background ============*/

#banner #particles-js {
    position: absolute;
    height: 100vh;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 10;
}