/*********************************************************************************************

Style Index:



1.  Color Codes

2.  Defaults & Reset & Global elements

3.  Preloader

4.  Nav

5.  Main Sections & Footer

6.  Header

7.  About Us

8.  Our Services

9.  Portfolio

10. Our Team

11. Our Clients

12. Pricing

13. News

14. Contact

15. Sub Pages

16. About Page

17. Portfolio Page

18. Scroll To Top

19. ***** Responsive *****

    1. Screen Min Width 1200px

    2. Screen Max Width 1199px

    3. Screen Max Width 991px

    4. Screen Max Width 767px

    5. Screen Max Width 600px

    6. Screen Max Width 450px

    7. Screen Max Width 350px

*********************************************************************************************/



/*------------------------------------------------------------------------------------------*/

/* 1. Color Codes */

/*------------------------------------------------------------------------------------------



************** Background Color **************



[ All Sections ]    ===> #6b345b, #2b387d

[ Content Boxes ]   ===> rgba(37, 37, 37, 0.45)

[ Buttons ]         ===> #6495ed, #fff





***************** Text Color *****************



[ Headings ]    ===> #6495ed, #fff

[ Paragraph ]   ===> #ddd

[ Menu ]        ===> #252525

[ Buttons ]     ===> #fff, #252525





/*------------------------------------------------------------------------------------------*/

/* 2. Defaults & Reset & Global elements */

/*------------------------------------------------------------------------------------------*/


.page .about .about-content .about-text {
    float: left;
    width: 100% !important;
}

* {

    -webkit-box-sizing: border-box;

    box-sizing: border-box

}



q, blockquote {

    display: block;

    background-color: #353535;

    font-style: italic;

    padding: 15px 20px;

    margin-left: 0;

    margin-right: 0;

    border-left: 3px solid;

    border-color: #6495ed

}



q:before,

blockquote:before,

q:after,

blockquote:after {

    content: ''

}



q p,

blockquote p {

    margin: 0

}



ul {

    list-style-type: none;

    margin: 0;

    padding: 0

}



a {

    color: inherit;

    text-decoration: none

}



.align-center {

    text-align: center

}



.clearfix {

    clear: both

}



.container {

    margin-left: auto;

    margin-right: auto

}



a,

button,

i:before,

li {

    -webkit-transition: .3s all ease-in-out;

    -o-transition: .3s all ease-in-out;

    transition: .3s all ease-in-out

}



::-webkit-scrollbar {

    display: none

}



html {

    overflow-x: hidden

}



body {

    color: #fff;

    font-family: 'Roboto', sans-serif;

    overflow-x: hidden

}



p {

    color: #ddd;

    font-size: 15px;

    line-height: 27px

}



.preloader {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    height: 100%;

    width: 100%;

    background: -webkit-gradient(linear, left top, right bottom, from(#6b345b), to(#2b387d));

    background: -webkit-linear-gradient(top left, #6b345b, #2b387d);

    background: -o-linear-gradient(top left, #6b345b, #2b387d);

    background: linear-gradient(to bottom right, #6b345b, #2b387d)

}



.img-bg,

.nav-and-footer-bg {

    z-index: -1;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    height: 100%;

    width: 100%

}



.img-bg,

.nav-and-footer-bg span {

    background-image: url(../images/header-background.jpg);

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-position: center center;

    -ms-background-size: cover;

    background-size: cover

}



.img-bg {

    position: fixed

}



.img-bg .overlay,

.nav-and-footer-bg span,

.nav-and-footer-bg .overlay {

    position: absolute;

    left: 0;

    right: 0

}



.img-bg .overlay,

.nav-and-footer-bg .overlay {

    background: -webkit-gradient(linear, left top, right bottom, from(#6b345b), to(#2b387d));

    background: -webkit-linear-gradient(top left, #6b345b, #2b387d);

    background: -o-linear-gradient(top left, #6b345b, #2b387d);

    background: linear-gradient(to bottom right, #6b345b, #2b387d);

    opacity: .8

}



.img-bg .overlay {

    z-index: 0;

    top: 0;

    bottom: 0

}



/*------------------------------------------------------------------------------------------*/

/* 3. Preloader */

/*------------------------------------------------------------------------------------------*/

.preloader {

    z-index: 6000;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex

}



.preloader .content {

    height: 102px;

    width: 100px;

    margin: auto;

    border-radius: 50%;

    -webkit-animation: spin 5s infinite linear;

    animation: spin 5s infinite linear

}



.preloader .content .circle {

    position: absolute;

    height: 100%;

    width: 100%

}



.preloader .content .circle .inner {

    height: 100%;

    width: 100%;

    border: 5px solid rgba(100, 149, 237, 0.7);

    border-right: none;

    border-top: none;

    border-radius: 100%;

    -webkit-box-sizing: content-box;

    box-sizing: content-box;

    -webkit-box-shadow: inset 0px 0px 10px rgba(100, 149, 237, 0.15);

    box-shadow: inset 0px 0px 10px rgba(100, 149, 237, 0.15)

}



@-webkit-keyframes spin {

    from {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg)

    }

    

    to {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@keyframes spin {

    from {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg)

    }

    

    to {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



.circle:nth-of-type(0) {

    -webkit-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

        transform: rotate(0deg)

}



.circle:nth-of-type(0) .inner {

    -webkit-animation: spin 2s infinite linear;

    animation: spin 2s infinite linear

}



.circle:nth-of-type(1) {

    -webkit-transform: rotate(70deg);

    -ms-transform: rotate(70deg);

        transform: rotate(70deg)

}



.circle:nth-of-type(1) .inner {

    -webkit-animation: spin 2s infinite linear;

    animation: spin 2s infinite linear

}



.circle:nth-of-type(2) {

    -webkit-transform: rotate(140deg);

    -ms-transform: rotate(140deg);

        transform: rotate(140deg)

}



.circle:nth-of-type(2) .inner {

    -webkit-animation: spin 2s infinite linear;

    animation: spin 2s infinite linear

}



/*------------------------------------------------------------------------------------------*/

/* 4. Nav */

/*------------------------------------------------------------------------------------------*/

nav {

    position: fixed;

    z-index: 3000;

    top: 0;

    left: 0;

    right: 0;

    -webkit-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out

}



.nav-and-footer-bg {

    position: absolute;

    overflow: hidden

}



.nav-and-footer-bg span {

    display: block

}



nav .nav-and-footer-bg span,

nav .nav-and-footer-bg .overlay {

    top: 0

}



nav .menu-body .nav-and-footer-bg {

    top: -10%;

    right: -10%;

    left: auto;

    border-radius: 30% 0 30% 65%

}



nav .menu-body .nav-and-footer-bg span,

nav .menu-body .nav-and-footer-bg .overlay {

    left: auto

}



nav .container {

    height: 70px;

    -webkit-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between

}



nav .logo {

    font-size: 22px;

    font-weight: normal;

    margin: 0;

    font-family: 'Audiowide', sans-serif

}



nav .menu-button {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    position: relative;

    z-index: 3000;

    height: 20px;

    width: 24px;

    cursor: pointer;

    -webkit-transition: -webkit-transform 330ms ease-out;

    transition: -webkit-transform 330ms ease-out;

    -o-transition: transform 330ms ease-out;

    transition: transform 330ms ease-out;

    transition: transform 330ms ease-out, -webkit-transform 330ms ease-out

}



nav .button-when-menu-is-open {

    -webkit-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

            transform: rotate(-45deg)

}



nav .menu-button span {

    display: block;

    height: 2px;

    width: 100%;

    background-color: #fff;

    border-radius: 5px

}



nav .menu-button span:first-of-type {

    width: 50%;

    -webkit-transition: -webkit-transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);

    transition: -webkit-transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);

    -o-transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);

    transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);

    transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57), -webkit-transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);

    -webkit-transform-origin: right;

        -ms-transform-origin: right;

            transform-origin: right

}



nav .menu-button span:last-of-type {

    -ms-flex-item-align: end;

        align-self: flex-end;

    width: 50%;

    -webkit-transition: -webkit-transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);

    transition: -webkit-transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);

    -o-transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);

    transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);

    transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57), -webkit-transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);

    -webkit-transform-origin: left;

        -ms-transform-origin: left;

            transform-origin: left

}



nav .menu-button span.first-line-when-menu-is-open {

    -webkit-transform: rotate(-90deg) translateX(3px);

        -ms-transform: rotate(-90deg) translateX(3px);

            transform: rotate(-90deg) translateX(3px)

}



nav .menu-button span.last-line-when-menu-is-open {

    -webkit-transform: rotate(-90deg) translateX(-3px);

        -ms-transform: rotate(-90deg) translateX(-3px);

            transform: rotate(-90deg) translateX(-3px)

}



nav .menu-body {

    position: fixed;

    z-index: 2000;

    top: 0;

    right: 0;

    color: #252525;

    text-align: end;

    padding: 80px 30px 90px 90px;

    cursor: default;

    display: none

}



nav .menu-body .menu-bg1,

nav .menu-body .menu-bg2,

nav .menu-body .nav-and-footer-bg {

    -webkit-transform-origin: right top;

    -ms-transform-origin: right top;

    transform-origin: right top

}



nav .menu-body .menu-bg1,

nav .menu-body .menu-bg2 {

    position: absolute;

    z-index: -1;

    top: -50%;

    right: -50%;

    background-color: rgba(100, 149, 237, 0.5);

    border-radius: 50% 0 50% 50%

}



nav .menu-body .menu-bg1 {

    height: 140%;

    width: 145%;

    -webkit-animation: menuBgClose .6s ease .2s forwards;

    animation: menuBgClose .6s ease .2s forwards

}



nav .menu-body .menu-bg1-open {

    -webkit-animation: menuBgOpen .6s cubic-bezier(0.68, -0.55, 0.265, 1.55) .2s backwards;

    animation: menuBgOpen .6s cubic-bezier(0.68, -0.55, 0.265, 1.55) .2s backwards

}



nav .menu-body .menu-bg2,

nav .menu-body .nav-and-footer-bg {

    -webkit-animation: menuBgClose .4s ease-in-out forwards;

    animation: menuBgClose .4s ease-in-out forwards

}



nav .menu-body .menu-bg2 {

    height: 145%;

    width: 140%

}



nav .menu-body .menu-bg2-open {

    -webkit-animation: menuBgOpen .4s ease-in-out backwards;

    animation: menuBgOpen .4s ease-in-out backwards

}



nav .menu-body .nav-and-footer-bg.menu-bg2-open {

    -webkit-animation-delay: .4s;

    animation-delay: .4s

}



@-webkit-keyframes menuBgOpen {

    0% {

        -webkit-transform: scale(0);

        transform: scale(0)

    }

    

    100% {

        -webkit-transform: scale(1);

        transform: scale(1)

    }

}



@keyframes menuBgOpen {

    0% {

        -webkit-transform: scale(0);

        transform: scale(0)

    }

    

    100% {

        -webkit-transform: scale(1);

        transform: scale(1)

    }

}



@-webkit-keyframes menuBgClose {

    0% {

        -webkit-transform: scale(1);

        transform: scale(1)

    }

    

    100% {

        -webkit-transform: scale(0);

        transform: scale(0)

    }

}



@keyframes menuBgClose {

    0% {

        -webkit-transform: scale(1);

        transform: scale(1)

    }

    

    100% {

        -webkit-transform: scale(0);

        transform: scale(0)

    }

}



nav .menu-body ul li {

    display: inline

}



.menu-body ul li:nth-of-type(3n+0):after {

    content: '\A';

    white-space: pre

}



.menu-body ul li a {

    display: inline-block;

    margin: 15px 10px;

    -webkit-animation: myFadeOutRight .4s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;

    animation: myFadeOutRight .4s cubic-bezier(0.68, -0.55, 0.265, 1.55) both

}



.menu-body ul li a.show-links {

    -webkit-animation: myFadeInLeft .6s cubic-bezier(0.68, -0.55, 0.265, 1.55) .4s both;

    animation: myFadeInLeft .6s cubic-bezier(0.68, -0.55, 0.265, 1.55) .4s both

}



@-webkit-keyframes myFadeInLeft {

    0% {

        opacity: 0;

        -webkit-transform: translateX(100%);

        transform: translateX(100%)

    }

    

    100% {

        opacity: 1;

        -webkit-transform: translateX(0);

        transform: translateX(0)

    }

}



@keyframes myFadeInLeft {

    0% {

        opacity: 0;

        -webkit-transform: translateX(100%);

        transform: translateX(100%)

    }

    

    100% {

        opacity: 1;

        -webkit-transform: translateX(0);

        transform: translateX(0)

    }

}



@-webkit-keyframes myFadeOutRight {

    0% {

        opacity: 1;

        -webkit-transform: translateX(0);

        transform: translateX(0)

    }

    

    100% {

        opacity: 0;

        -webkit-transform: translateX(100%);

        transform: translateX(100%)

    }

}



@keyframes myFadeOutRight {

    0% {

        opacity: 1;

        -webkit-transform: translateX(0);

        transform: translateX(0)

    }

    

    100% {

        opacity: 0;

        -webkit-transform: translateX(100%);

        transform: translateX(100%)

    }

}



/*------------------------------------------------------------------------------------------*/

/* 5. Main Sections & Footer */

/*------------------------------------------------------------------------------------------*/

.particles-js-canvas-el {

    position: fixed;

    z-index: -1;

    top: 0

}



.section .container {

    height: 100%;

    -webkit-transition: .4s transform .6s ease-in-out;

    -o-transition: .4s transform .6s ease-in-out;

    transition: .4s transform .6s ease-in-out;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex

}



.section .container > div {

    margin: auto

}



body:not(.page) footer {

    position: fixed;

    z-index: 1000;

    left: 0;

    right: 0;

    bottom: 0;

    font-size: 14px;

    cursor: default

}



footer .nav-and-footer-bg span,

footer .nav-and-footer-bg .overlay {

    bottom: 0

}



footer .container {

    height: 50px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between

}



nav .logo:first-letter,

footer .section-number .current,

footer .site-lang .current {

    color: #6495ed

}



footer .scroll-to-next-section {

    text-align: center;

    cursor: pointer;

    -webkit-animation: vibration .8s infinite ease-in-out;

    animation: vibration .8s infinite ease-in-out

}



@-webkit-keyframes vibration {

    0%, 100% {

        -webkit-transform: translateY(3px);

        transform: translateY(3px)

    }

    

    50% {

        -webkit-transform: translateY(-3px);

        transform: translateY(-3px)

    }

}



@keyframes vibration {

    0%, 100% {

        -webkit-transform: translateY(3px);

        transform: translateY(3px)

    }

    

    50% {

        -webkit-transform: translateY(-3px);

        transform: translateY(-3px)

    }

}



footer .scroll-to-next-section i {

    display: none

}



footer .scroll-to-next-section.scroll-down:hover i:last-of-type,

footer .scroll-to-next-section.scroll-up:hover i:first-of-type {

    display: block

}



footer .scroll-to-next-section span {

    position: relative;

    display: block;

    width: 16px;

    height: 24px;

    border: 1px solid #fff;

    border-radius: 10px

}



footer .scroll-to-next-section span:after {

    content: '';

    display: block;

    width: 2px;

    height: 4px;

    background-color: #fff;

    border-radius: 50%;

    position: absolute;

    top: 5px;

    left: 50%;

    margin-left: -1px

}



/*------------------------------------------------------------------------------------------*/

/* 6. Header */

/*------------------------------------------------------------------------------------------*/

header .home-content {

    position: relative;

    height: 100%;

    width: 100%;

    text-align: center;

    overflow: hidden;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap

}



header .home-content .sub-head {

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 0

}



header .home-content h2 {

    font-size: 45px;

    margin-top: 20px;

    margin-bottom: 20px

}



header .home-content span {

    color: #6495ed

}



header .home-content p,

.about .about-content p:first-of-type {

    margin-top: 0

}



header .home-content p {

    max-width: 600px;

    margin-left: auto;

    margin-right: auto

}



header .home-content .buttons-container {

    margin-top: 30px;

    cursor: default

}



.buttons-container .button {

    display: inline-block;

    background-color: #6495ed;

    font-size: 14px;

    text-transform: capitalize;

    padding: 8px 20px;

    border: 2px solid #6495ed;

    outline: none;

    border-radius: 3px;

    cursor: pointer

}



header .home-content .buttons-container .button {

    font-size: 15px;

    padding: 12px 28px 11px;

    margin: 5px;

    border-radius: 30px

}



.buttons-container .button:nth-of-type(2) {

    background-color: #fff;

    color: #252525;

    border: 2px solid #fff

}



.buttons-container .button:first-of-type:hover {

    background-color: transparent

}



.buttons-container .button:nth-of-type(2):hover {

    background-color: transparent;

    color: #fff

}



.pagers li.active,

.pagers li:hover {

    opacity: 1

}



.pagers li span {

    display: block;

    height: 8px;

    width: 8px;

    background-color: #fff;

    border-radius: 50%;

    -webkit-transition: .3s all ease-in-out;

    -o-transition: .3s all ease-in-out;

    transition: .3s all ease-in-out

}



.pagers li.active span,

.pagers li:active span {

    background-color: #6495ed

}



/*------------------------------------------------------------------------------------------*/

/* 7. About Us */

/*------------------------------------------------------------------------------------------*/

body:not(.page) .about .about-content {

    max-width: 600px

}



.main-heading {

    width: -webkit-min-content;

    width: -moz-min-content;

    width: min-content;

    font-size: 45px;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-top: 20px;

    margin-bottom: 20px

}



.main-heading:first-line {

    color: #6495ed

}



.about .about-content .buttons-container .button {

    font-size: 15px;

    padding: 12px 28px 11px;

    margin: 5px 0

}



/*------------------------------------------------------------------------------------------*/

/* 8. Our Services */

/*------------------------------------------------------------------------------------------*/

.section-content {

    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap

}



.section-text {

    width: 300px;

    margin-right: 50px

}



.services .services-content .services-text {

    margin-right: 100px

}



.section-text h2 {

    margin-top: 0

}



.section-text p {

    margin-bottom: 0

}



.services .services-content .services-items {

    width: calc(100% - 400px);

    margin-bottom: -15px

}



.services .services-content .services-items .item {

    float: left;

    width: calc(50% - 30px);

    max-width: 325px;

    margin: 0 30px 20px 0

}



.services .services-content .services-items .item:nth-of-type(2) {

    margin: 0 0 20px 30px

}



.services .services-content .services-items .item:nth-of-type(3) {

    margin: 20px 30px 0 0

}



.services .services-content .services-items .item:last-of-type {

    margin: 20px 0 0 30px

}



.services .services-content .services-items .item h4 {

    text-transform: uppercase;

    letter-spacing: 2px;

    margin: 20px 0 0

}



.services .services-content .services-items .item p {

    line-height: 24px

}



/*------------------------------------------------------------------------------------------*/

/* 9. Portfolio */

/*------------------------------------------------------------------------------------------*/

.portfolio .portfolio-content .portfolio-text {

    width: -webkit-fit-content;

    width: -moz-fit-content;

    width: fit-content

}



.portfolio .portfolio-content .portfolio-items {

    position: relative;

    height: 406px;

    width: 789px

}



.portfolio .portfolio-text h2 {

    margin-bottom: 30px

}



.portfolio .portfolio-text .work-cat {

    margin-bottom: 25px;

    cursor: default

}



.portfolio .portfolio-text .work-cat li {

    font-size: 14px;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin: 12px 0

}



.portfolio .portfolio-text .work-cat li span {

    cursor: pointer;

    -webkit-transition: .3s all ease-in-out;

    -o-transition: .3s all ease-in-out;

    transition: .3s all ease-in-out

}



.portfolio .portfolio-text .work-cat li.active span,

.portfolio .portfolio-text .work-cat li span:hover {

    color: #6495ed

}



.portfolio .portfolio-text .buttons-container {

    display: block

}



.portfolio .portfolio-content > .buttons-container {

    display: none

}



.portfolio .portfolio-content .portfolio-items .item {
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 260px;
    height: 200px;
    background-color: #fff;
    margin: 0 0 3px 3px;
 /*   margin: 0 0 10px 25px;*/
    outline: 0;
    overflow: hidden
}



.portfolio .portfolio-content .portfolio-items .item img {

    width: 260px;

    height: 200px

}



.portfolio .portfolio-content .portfolio-items .item.animated {

    -webkit-animation-duration: .4s;

    animation-duration: .4s

}



.portfolio .portfolio-content .portfolio-items .item .overlay {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    height: 100%;

    width: 100%;

    cursor: -webkit-zoom-in;

    cursor: zoom-in;

    opacity: 0;

    -webkit-transition: .4s opacity ease-in-out;

    -o-transition: .4s opacity ease-in-out;

    transition: .4s opacity ease-in-out

}



.portfolio .portfolio-content .portfolio-items .item:nth-of-type(6n+1) .overlay {

    background-color: rgba(244, 67, 54, 0.9)

}



.portfolio .portfolio-content .portfolio-items .item:nth-of-type(6n+2) .overlay {

    background-color: rgba(233, 30, 99, 0.9)

}



.portfolio .portfolio-content .portfolio-items .item:nth-of-type(6n+3) .overlay {

    background-color: rgba(156, 39, 176, 0.9)

}



.portfolio .portfolio-content .portfolio-items .item:nth-of-type(6n+4) .overlay {

    background-color: rgba(103, 58, 183, 0.9)

}



.portfolio .portfolio-content .portfolio-items .item:nth-of-type(6n+5) .overlay {

    background-color: rgba(63, 81, 181, 0.9)

}



.portfolio .portfolio-content .portfolio-items .item:nth-of-type(6n+6) .overlay {

    background-color: rgba(100, 149, 237, 0.9)

}



.portfolio .portfolio-content .portfolio-items .item:hover .overlay {

    opacity: 1

}



.portfolio .portfolio-items .item .overlay .project-details {

    text-align: center;

    letter-spacing: 1px;

    background-color: rgba(0, 0, 0, 0.1);

    padding: 10px;

    margin: auto auto 15px 15px

}



.portfolio .portfolio-items .item .overlay .project-details h4,

.portfolio .portfolio-items .item .overlay .project-details h5 {

    margin: 0

}



.portfolio .portfolio-items .item .overlay .project-details h5 {

    margin-top: 10px

}



.mfp-bg,

.mfp-wrap {

    z-index: 5000

}



.prevent-scrolling {

    overflow-y: hidden !important;

}



.prevent-scrolling {

    overflow-y: hidden !important;

}



/*------------------------------------------------------------------------------------------*/

/* 10. Our Team */

/*------------------------------------------------------------------------------------------*/

.navigation-buttons {

    margin-top: 25px;

    cursor: default

}



.navigation-buttons span {

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;

    height: 25px;

    width: 25px;

    background-color: #6495ed;

    font-size: 18px;

    cursor: pointer;

    opacity: .8;

    -webkit-transition: .3s all ease-in-out;

    -o-transition: .3s all ease-in-out;

    transition: .3s all ease-in-out

}



.navigation-buttons span:hover {

    opacity: 1

}



.team .team-content .team-text .slider-controls {

    display: block

}



.team .team-content > .slider-controls {

    display: none

}



.team .team-content .team-members {

    width: 757px

}



.team .team-members .member {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center

}



.team .team-members .member:not(:first-of-type) {

    display: none

}



.team .team-members .member img {

    display: block;

    width: 250px;

    -webkit-filter: grayscale(100%);

    filter: grayscale(100%);

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, black), to(transparent));

    -webkit-mask-image: -webkit-linear-gradient(top, black 70%, transparent 100%);

    -webkit-user-drag: none

}



.team .team-members .member .member-info {

    margin-left: 50px

}



.team .team-members .member .member-info h3 {

    font-size: 22px;

    letter-spacing: 1px;

    margin: 0 0 10px

}



.team .team-members .member .member-info h5 {

    color: #ddd;

    letter-spacing: 1px;

    font-weight: normal;

    margin: 0

}



/*------------------------------------------------------------------------------------------*/

/* 11. Our Clients */

/*------------------------------------------------------------------------------------------*/

.clients .clients-content .clients-items {

    text-align: center;

    padding: 2px;

    margin-bottom: 50px

}



.clients .clients-items span {

    position: relative;

    z-index: 0;

    float: left;

    display: block;

    height: 100px;

    width: 60px;

    background-color: rgba(37, 37, 37, 0.45)

}



.clients .clients-items span:nth-of-type(odd) {

    margin: 1px 46px

}



.clients .clients-items span:nth-of-type(even) {

    margin: 52px 1px -50px

}



.clients .clients-items span:nth-of-type(5) {

    clear: both

}



.clients .clients-items span:before,

.clients .clients-items span:after {

    content: '';

    display: block;

    position: absolute;

    z-index: -1;

    top: 0;

    border-style: solid;

    border-width: 50px 45px

}



.clients .clients-items span:before {

    left: -90px;

    border-top-color: transparent;

    border-right-color: rgba(37, 37, 37, 0.45);

    border-bottom-color: transparent;

    border-left-color: transparent

}



.clients .clients-items span:after {

    right: -90px;

    border-top-color: transparent;

    border-right-color: transparent;

    border-bottom-color: transparent;

    border-left-color: rgba(37, 37, 37, 0.45)

}



.clients .clients-items span img {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

        -ms-transform: translate(-50%, -50%);

            transform: translate(-50%, -50%);

    display: block;

    width: 80px

}



/*------------------------------------------------------------------------------------------*/

/* 12. Pricing */

/*------------------------------------------------------------------------------------------*/

.pricing .pricing-plans {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap

}



.pricing .pricing-plans .plan {

    background-color: rgba(37, 37, 37, 0.45);

    padding: 20px 25px;

    margin: 0 12px;

    border-radius: 30px

}



.pricing .pricing-plans .plan:first-of-type {

    margin-left: 0

}



.pricing .pricing-plans .plan:last-of-type {

    margin-right: 0

}



.pricing .pricing-plans .plan .plan-name {

    font-size: 20px;

    margin: 0 0 20px

}



.pricing .pricing-plans .plan ul li {

    color: #ddd;

    font-size: 14px;

    padding: 5px 0

}



.pricing .pricing-plans .plan ul li:before {

    content: "\f00c";

    font-family: 'FontAwesome';

    color: #4CAF50;

    margin-right: 10px

}



.pricing .pricing-plans .plan ul li.unavailable:before {

    content: "\f00d";

    font-family: 'FontAwesome';

    color: #E91E63

}



.pricing .pricing-plans .plan .plan-price {

    font-size: 30px;

    margin: 20px 0 45px;

    position: relative

}



.pricing .pricing-plans .plan .plan-price:after {

    content: attr(data-period);

    color: #ddd;

    font-size: 12px;

    letter-spacing: 1px;

    font-weight: normal;

    position: absolute;

    left: 0;

    bottom: -50%

}



.pricing .pricing-plans .plan .buttons-container {

    text-align: center

}



.pricing .pricing-plans .plan .buttons-container .button {

    border-radius: 30px

}



/*------------------------------------------------------------------------------------------*/

/* 13. News */

/*------------------------------------------------------------------------------------------*/

.news .news-content {

    -ms-flex-wrap: nowrap;

        flex-wrap: nowrap

}



.news .news-content .news-text p {

    margin-bottom: 0

}



.news .news-content .post-img {

    margin-right: 50px

}



.news .news-content .post-img img {

    display: none;

    height: 350px;

    width: 300px;

    -webkit-animation-duration: .3s;

            animation-duration: .3s

}



.news .news-content .post-img img.active {

    display: block

}



.news .news-content .posts > li {

    margin-bottom: 20px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: start;

        -ms-flex-align: start;

            align-items: flex-start

}



.news .news-content .posts > li:last-of-type {

    margin-bottom: 0

}



.news .news-content .posts > li > img {

    display: none

}



.news .news-content .posts > li .post-date {

    text-align: center;

    min-height: 60px;

    min-width: 60px;

    border: 1px solid #6495ed;

    border-radius: 3px;

    cursor: default;

    -webkit-transition: .3s all ease-in-out;

    -o-transition: .3s all ease-in-out;

    transition: .3s all ease-in-out;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

    -ms-flex-line-pack: center;

        align-content: center;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap

}



.news .news-content .posts > li .post-date div {

    width: 100%

}



.news .news-content .posts > li .post-date .day {

    font-size: 22px;

    margin-bottom: 4px

}



.news .news-content .posts > li .post-date .month {

    font-size: 14px

}



.news .news-content .posts > li.active .post-date {

    background-color: #6495ed

}



.news .news-content .posts > li .post-text {

    padding-left: 20px

}



.news .news-content .posts > li .post-text .post-title,

.news .news-content .posts > li .post-text .post-content {

    margin: 0

}



.news .news-content .posts > li .post-text .post-title {

    width: -webkit-fit-content;

    width: -moz-fit-content;

    width: fit-content;

    margin-bottom: 8px;

    cursor: pointer;

    -webkit-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out

}



.news .news-content .posts > li .post-text .post-title:hover {

    color: #6495ed

}



.news .news-content .posts > li .post-text .post-content {

    font-size: 14px;

    line-height: 24px

}



.news .news-content .posts li .post-popup-bg {

    position: fixed;

    z-index: 5000;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: rgba(0, 0, 0, 0.8);

    display: none

}



.news .news-content .posts li .post-popup-bg .post-popup-content {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

        -ms-transform: translate(-50%, -50%);

            transform: translate(-50%, -50%);

    width: 700px;

    height: 90%;

    background-color: #252525;

    border-radius: 3px 0 3px 3px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex

}



.news .posts li .post-popup-bg .post-popup-content .sidebar {

    position: absolute;

    top: 0;

    right: -30px;

    border-radius: 0 3px 3px 0;

    overflow: hidden

}



.news .posts li .post-popup-bg .post-popup-content .popup-close-btn {

    height: 30px;

    width: 30px;

    background-color: #353535;

    color: #fff;;

    font-size: 19px;

    cursor: pointer;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center

}



.news .posts li .post-popup-bg .post-popup-content .popup-close-btn:hover {

    color: #E91E63

}



.news .posts li .post-popup-bg .navigation-buttons {

    margin-top: 0

}



.news .posts li .post-popup-bg .navigation-buttons span {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    height: 30px;

    width: 30px;

    background-color: #353535;

    opacity: 1

}



.news .posts li .post-popup-bg .navigation-buttons .next-button {

    border-color: #252525;

    border-style: solid;

    border-width: 1px 0

}



.news .posts li .post-popup-bg .navigation-buttons span i {

    -webkit-transition: none;

    -o-transition: none;

    transition: none

}



.news .posts li .post-popup-bg .navigation-buttons span:hover {

    background-color: #6495ed

}



.news .posts li .post-popup-bg .post-popup-content .post-header {

    position: absolute;

    top: 0;

    left: 30px;

    right: 30px;

    text-align: center;

    padding: 25px 0;

    border-bottom: 1px solid #353535

}



.news .posts li .post-popup-bg .post-popup-content .post-header h2 {

    color: #6495ed;

    margin: 0

}



.news .posts li .post-popup-bg .post-content-and-comments {

    padding: 0 30px;

    margin-bottom: 5px;

    overflow-y: auto

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content img {

    max-width: 100%;

    height: auto

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content .alignleft {

    float: left;

    margin: 5px 20px 20px 0

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content .alignright {

    float: right;

    margin: 5px 0 20px 20px

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content ol {

    counter-reset: li;

    list-style-type: none;

    padding: 0

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content ol,

.news .posts li .post-popup-bg .post-content-and-comments .post-content ul {

    margin-bottom: 15px

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content ol li,

.news .posts li .post-popup-bg .post-content-and-comments .post-content ul li {

    position: relative;

    font-size: 14px;

    line-height: 22px;

    margin-bottom: 8px

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content ol li {

    margin-left: 28px

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content ul li {

    margin-left: 22px

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content ol li:before,

.news .posts li .post-popup-bg .post-content-and-comments .post-content ul li:before {

    display: block;

    position: absolute;

    top: 0;

    text-align: center;

    font-size: 12px;

    border-radius: 50%

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content ol li:before {

    content: counter(li);

    counter-increment: li;

    background-color: #6495ed;

    left: -28px;

    height: 18px;

    line-height: 18px;

    width: 18px

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content ul li:before {

    content: '';

    background-color: #6495ed;

    left: -22px;

    height: 14px;

    line-height: 14px;

    width: 14px

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content a {

    color: #6495ed

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content a:hover {

    text-decoration: underline

}



.news .posts li .post-popup-bg .post-content-and-comments .post-content iframe {

    width: 100%;

    height: 300px;

    border: none

}



.news .posts li .post-popup-bg .post-content-and-comments .post-popup-bg-main-heading {

    color: #6495ed;

    padding: 15px 0;

    margin: 35px 0 25px;

    border-top: 2px dashed #353535;

    border-bottom: 2px dashed #353535

}



.news .posts li .post-popup-bg .post-content-and-comments .comments .list-comments .comment {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap

}



.news .posts li .post-popup-bg .post-content-and-comments .comments .list-comments .comment,

.news .posts li .post-popup-bg .post-content-and-comments .comments .list-comments .comment .children {

    position: relative

}



.news .posts li .post-popup-bg .post-content-and-comments .comments .list-comments .comment:not(:last-of-type):before,

.news .posts li .post-popup-bg .post-content-and-comments .comments .list-comments .comment .children .comment:before {

    content: '';

    display: block;

    position: absolute;

    z-index: -1;

    background-color: #353535

}



.news .posts li .post-popup-bg .post-content-and-comments .comments .list-comments .comment:not(:last-of-type):before {

    top: 60px;

    left: 30px;

    width: 2px;

    height: 100%

}



.news .posts li .post-popup-bg .post-content-and-comments .comments .list-comments .comment .children .comment:before {

    top: 30px;

    left: -40px;

    width: 40px;

    height: 2px

}



.news .posts li .post-popup-bg .post-content-and-comments .comments .list-comments .comment .children {

    margin-left: 70px

}



.news .posts li .post-popup-bg .post-content-and-comments .comments .list-comments .comment .img {

    margin-right: 15px

}



.news .posts li .post-popup-bg .comments .list-comments .comment .img img {

    display: block;

    height: 60px;

    width: 60px;

    border-radius: 10px 2px 10px 10px

}



.news .posts li .post-popup-bg .comments .list-comments .comment .text {

    position: relative;

    width: calc(100% - 75px);

    background-color: #353535;

    padding: 8px 12px;

    margin-bottom: 20px;

    border-radius: 2px 8px 8px 8px

}



.news .posts li .post-popup-bg .comments .list-comments .comment .text:before {

    content: '';

    display: block;

    position: absolute;

    top: 0;

    left: -6px;

    border-style: solid;

    border-width: 3px 3px 3px 3px;

    border-color: #353535 #353535 transparent transparent

}



.news .posts li .post-popup-bg .comments .list-comments .comment .text .name-and-date {

    margin-bottom: 10px

}



.news .posts li .post-popup-bg .comments .list-comments .comment .text .name-and-date .date {

    color: #bbb;

    font-size: 12px

}



.news .posts li .post-popup-bg .comments .list-comments .comment .text .comment-author {

    margin: 0 0 5px

}



.news .posts li .post-popup-bg .comments .list-comments .comment .text p {

    font-size: 14px;

    line-height: 24px;

    margin: 0

}



.news .posts li .post-popup-bg .comments .comment-respond input,

.news .posts li .post-popup-bg .comments .comment-respond textarea {

    display: block;

    width: 100%;

    background-color: #353535;

    color: #ddd;

    font-size: 14px;

    padding: 6px 8px;

    margin-bottom: 15px;

    border: none;

    outline: none;

    border-radius: 3px

}



.news .posts li .post-popup-bg .comments .comment-respond input,

.news .posts li .post-popup-bg .comments .comment-respond textarea,

.news .posts li .post-popup-bg .comments .comment-respond .buttons-container .button {

    color: #ddd

}



.news .posts li .post-popup-bg .comments .comment-respond textarea {

    height: 100px;

    resize: none

}



.news .posts li .post-popup-bg .comments .comment-respond .buttons-container {

    margin-bottom: 15px

}



/*------------------------------------------------------------------------------------------*/

/* 14. Contact */

/*------------------------------------------------------------------------------------------*/

.contact .contact-text .main-heading {

    margin-bottom: 30px

}



.contact .contact-text .contact-details > div {

    letter-spacing: 1px;

    margin-bottom: 20px

}



.contact .contact-text .contact-details > div:last-of-type {

    margin-bottom: 0

}



.contact .contact-text .contact-details > div h4 {

    margin: 0 0 8px

}



.contact .contact-text .contact-details > div h4 i {

    color: #6495ed;

    margin-right: 5px

}



.contact .contact-text .contact-details > div ul {

    color: #ddd;

    font-size: 13px

}



.contact .contact-text .contact-details > div ul li {

    line-height: 1.6

}



.contact .contact-form {

    width: 550px

}



.contact .contact-form input,

.contact .contact-form textarea {

    display: block;

    width: 100%;

    background-color: rgba(37, 37, 37, 0.45);

    color: #fff;

    font-size: 14px;

    padding: 12px 15px;

    margin-bottom: 20px;

    border: none;

    outline: none;

    border-radius: 30px

}



.contact .contact-form .small-fields,

.contact .contact-form .buttons-container {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap

}



.contact .contact-form .small-fields input,

.contact .contact-form .buttons-container .button {

    width: 48%

}



.contact .contact-form textarea {

    height: 130px;

    resize: none

}



.contact .contact-form .buttons-container .social-media {

    cursor: default

}



.contact .contact-form .buttons-container .social-media a {

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;

    height: 36px;

    width: 36px;

    background-color: rgba(37, 37, 37, 0.45);

    color: #fff;

    margin-right: 5px;

    border-radius: 50%

}



.contact .contact-form .buttons-container .social-media a:last-of-type {

    margin-right: 0

}



.contact .contact-form .buttons-container .social-media a i:before {

    -webkit-transition: none;

    -o-transition: none;

    transition: none

}



.contact .contact-form .buttons-container .social-media a:hover {

    background-color: #fff;

    color: #252525

}



.contact .contact-form .buttons-container .button {

    color: #fff;

    border-radius: 30px

}



/*------------------------------------------------------------------------------------------*/

/* 15. Sub Pages */

/*------------------------------------------------------------------------------------------*/

.page header {

    background-image: url(../images/header-background.jpg);

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-position: center center;

    -ms-background-size: cover;

    background-size: cover;

    -webkit-mask-image: -webkit-linear-gradient(top, black 70%, transparent 100%)

}



.page header .overlay {

    background: -webkit-gradient(linear, left top, right bottom, from(rgba(43, 56, 125, 0.8)), to(rgba(107, 52, 91, 0.8)));

    background: -webkit-linear-gradient(top left, rgba(43, 56, 125, 0.8), rgba(107, 52, 91, 0.8));

    background: -o-linear-gradient(top left, rgba(43, 56, 125, 0.8), rgba(107, 52, 91, 0.8));

    background: linear-gradient(to bottom right, rgba(43, 56, 125, 0.8), rgba(107, 52, 91, 0.8))

}



.page .img-bg .overlay,

.page .nav-and-footer-bg .overlay {

    opacity: 1

}



.page header .container {

    min-height: 350px;

    padding: 100px 0 70px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -ms-flex-line-pack: center;

    align-content: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap

}



.page header .page-title {

    margin-top: 0;

    margin-bottom: 15px

}



.breadcrumbs {

    width: 100%;

    text-align: center;

    padding: 0 15px;

    white-space: nowrap;

    overflow: hidden;

    -o-text-overflow: ellipsis;

       text-overflow: ellipsis

}



.breadcrumbs a {

    color: #6495ed

}



.breadcrumbs a:hover {

    text-decoration: underline

}



.page .section {

    padding: 70px 0 !important;

    -webkit-box-shadow: 0 20px 110px rgba(0, 0, 0, .1);

    box-shadow: 0 20px 110px rgba(0, 0, 0, .1);

    -webkit-mask-image: -webkit-linear-gradient(bottom, black 75%, transparent 200%)

}



/*------------------------------------------------------------------------------------------*/

/* 16. About Page */

/*------------------------------------------------------------------------------------------*/

.page .about .about-content .about-text {

    float: left;

    width: 60%

}



.page .about .about-content .about-img {

    float: right;

    width: 35%

}



.page .about .about-content .about-img img {

    display: block;

    width: 100%

}



.page .statistics {

    text-align: center;

    margin-top: 70px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap

}



.page .statistics .statistics-item {

    width: 250px;

    margin-bottom: 70px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

    -ms-flex-line-pack: center;

        align-content: center;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap

}



.page .statistics .statistics-item span {

    display: block;

    width: 100%;

    font-size: 40px;

    margin: 15px 0

}



.page .statistics .statistics-item h4 {

    word-spacing: 2px;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin: 0

}



/*------------------------------------------------------------------------------------------*/

/* 17. Portfolio Page */

/*------------------------------------------------------------------------------------------*/

.page .portfolio .portfolio-content {

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center

}



.page .portfolio .portfolio-text {

    margin-right: 0;

    margin-bottom: 50px

}



.page .portfolio .portfolio-text h2 {

    margin-bottom: 20px

}



.page .portfolio .portfolio-text .work-cat li {

    display: inline-block;

    margin: 12px 6px

}



.page .portfolio .portfolio-content .portfolio-text,

.page .portfolio .portfolio-content .portfolio-items {

    width: 1052px

}



.page .portfolio .portfolio-content .portfolio-items {

    height: auto

}



.page .portfolio .portfolio-content > .buttons-container {

    display: block;

    width: 100%;

    text-align: center;

    margin-top: 40px

}



.page .portfolio .portfolio-content > .buttons-container .button {

    padding: 12px 24px;

    border-radius: 30px

}



.page footer {

    background-color: rgba(37, 37, 37, 0.15);

    text-align: center;

    word-spacing: 1px;

    padding: 25px 0

}



.page footer .container {

    height: auto;

    font-size: 14px;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap

}



.page footer span,

.page footer a {

    color: #6495ed

}



/*------------------------------------------------------------------------------------------*/

/* 18. Scroll To Top */

/*------------------------------------------------------------------------------------------*/

.Scroll-To-Top {

    position: fixed;

    right: -50px;

    bottom: 50px;

    z-index: 1000;

    width: 40px;

    height: 40px;

    line-height: 38px;

    background-color: #6495ed;

    text-align: center;

    font-size: 20px;

    cursor: pointer;

    opacity: .8;

    -webkit-transition: .3s all ease-in-out;

    -o-transition: .3s all ease-in-out;

    transition: .3s all ease-in-out

}



.Scroll-To-Top:hover {

    opacity: 1

}



.Scroll-To-Top:active {

    opacity: .9

}





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

/* 19. Responsive */

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



/*------------------------------------------------------------------------------------------*/

/* 1. Large Screen */

/*------------------------------------------------------------------------------------------*/

@media (min-width: 1200px) {

    .container {

        width: 1170px

    }

}





/*------------------------------------------------------------------------------------------*/

/* 2. Medium Screen */

/*------------------------------------------------------------------------------------------*/

@media (min-width: 992px) and (max-width: 1199px) {

    .container {

        width: 970px

    }

    

    .about .about-content,

    .section-text:not(.team-text):not(.contact-text),

    .services .services-content .services-items,

    .pricing .pricing-plans,

    .portfolio .portfolio-content > .buttons-container {

        width: 80% !important

    }

    

    .section-text:not(.team-text):not(.contact-text) {

        margin-right: 0 !important;

        margin-bottom: 50px

    }

}





@media (max-width: 1199px) {

    .section {

        -webkit-box-shadow: 0 20px 110px rgba(0, 0, 0, .2);

        box-shadow: 0 20px 110px rgba(0, 0, 0, .2)

    }

    

    .section:not(.home) {

        padding: 100px 0

    }

    

    .main-heading {

        margin-top: 0

    }

    

    .section-content {

        -webkit-box-pack: center;

            -ms-flex-pack: center;

                justify-content: center

    }

    

    .services .services-content .services-items .item {

        max-width: none

    }

    

    .portfolio .portfolio-content .portfolio-text,

    .page .portfolio .portfolio-content .portfolio-text,

    .page .portfolio .portfolio-content .portfolio-items {

        width: 789px

    }

    

    .portfolio .portfolio-text h2 {

        margin-bottom: 20px

    }

    

    .portfolio .portfolio-text .work-cat {

        margin-bottom: -12px

    }

    

    .portfolio .portfolio-text .work-cat li {

        display: inline-block;

        margin: 12px 6px

    }

    

    .portfolio .portfolio-text .buttons-container {

        display: none

    }

    

    .portfolio .portfolio-content > .buttons-container {

        display: block;

        text-align: center;

        margin-top: 40px

    }

    

    .portfolio .portfolio-content .portfolio-items {

        height: auto

    }

    

    .team .team-content .team-members {

        width: 600px

    }

    

    .news .news-content {

        -webkit-box-align: start;

            -ms-flex-align: start;

                align-items: flex-start;

        -ms-flex-wrap: wrap;

            flex-wrap: wrap

    }

    

    .news .news-content .posts {

        width: calc(80% - 350px)

    }

    

    .contact .contact-form {

        width: 500px

    }

    

    .page .statistics .statistics-item {

        width: 50%

    }

}





/*------------------------------------------------------------------------------------------*/

/* 3. Small Screen */

/*------------------------------------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 991px) {

    .about .about-content,

    .section-text:not(.team-text):not(.contact-text),

    .services .services-content .services-items,

    .pricing .pricing-plans,

    .portfolio .portfolio-content > .buttons-container {

        width: 97% !important

    }

    

    .section-text:not(.team-text):not(.contact-text) {

        margin-right: 0 !important;

        margin-bottom: 50px

    }

}



@media (max-width: 991px) {

    .container {

        width: 750px

    }

    

    .about .about-content {

        max-width: none

    }

    

    .portfolio .portfolio-content .portfolio-text,

    .page .portfolio .portfolio-content .portfolio-text,

    .portfolio .portfolio-content .portfolio-items,

    .page .portfolio .portfolio-content .portfolio-items {

        width: 526px

    }

    

    .team .team-content .team-text {

        width: 250px

    }

    

    .team .team-content .team-members {

        width: 450px

    }

    

    .news .news-content .post-img img {

        height: 300px;

        width: 250px

    }

    

    .news .news-content .posts {

        width: calc(97% - 300px)

    }

    

    .contact .contact-text {

        width: 250px

    }

    

    .contact .contact-form {

        width: 450px

    }

}





/*------------------------------------------------------------------------------------------*/

/* 4. Extra Small Screen */

/*------------------------------------------------------------------------------------------*/

@media (min-width: 601px) and (max-width: 767px) {

    .about .about-content,

    .section-text:not(.portfolio-text),

    .services .services-content .services-items,

    .pricing .pricing-plans,

    .news .news-content .posts,

    .contact .contact-form,

    .portfolio .portfolio-content > .buttons-container {

        width: 80% !important

    }

    

    .section-text,

    .news .news-content .post-img {

        margin-right: 0 !important;

        margin-bottom: 50px

    }

}



@media (max-width: 767px) {

    .img-bg,

    .nav-and-footer-bg span,

    .page header {

        background-attachment: scroll

    }

    

    .particles-bg .background {

        opacity: .1

    }

    

    .container {

        width: auto;

        margin: 0

    }

    

    .section:not(.home) {

        padding: 70px 0

    }

    

    nav, footer {

        padding: 0 20px

    }

    

    header .home-content .home-item {

        width: calc(100% - 60px);

    }

    

    .services .services-content .services-items .item {

        float: none;

        width: 100%

    }

    

    .services .services-content .services-items .item:first-of-type,

    .services .services-content .services-items .item:nth-of-type(2),

    .services .services-content .services-items .item:nth-of-type(3),

    .services .services-content .services-items .item:last-of-type {

        margin: 0 auto 40px

    }

    

    .team .team-content .team-text .slider-controls {

        display: none

    }

    

    .team .team-content > .slider-controls {

        display: block;

        width: 100%;

        text-align: center;

        margin-top: 40px

    }

    

    .clients .clients-content .clients-items {

        margin-left: -50px

    }

    

    .clients .clients-items span:nth-of-type(5) {

        clear: none

    }

    

    .clients .clients-items span:nth-of-type(3),

    .clients .clients-items span:nth-of-type(7) {

        clear: both

    }

    

    .pricing .pricing-plans {

        -webkit-box-pack: center;

            -ms-flex-pack: center;

                justify-content: center

    }

    

    .pricing .pricing-plans .plan {

        padding: 25px 30px;

        margin-bottom: 30px

    }

    

    .pricing .pricing-plans .plan:first-of-type,

    .pricing .pricing-plans .plan:nth-of-type(2),

    .pricing .pricing-plans .plan:last-of-type {

        margin-left: 80px;

        margin-right: 80px

    }

    

    .services .services-content .services-items .item:last-of-type,

    .pricing .pricing-plans .plan:last-of-type {

        margin-bottom: 0

    }

    

    .news .news-content .posts li .post-popup-bg .post-popup-content {

        height: 85%;

        width: 95%

    }

    

    .news .posts li .post-popup-bg .post-popup-content .sidebar {

        top: -30px;

        right: 0;

        border-radius: 3px 3px 0 0;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-orient: horizontal;

        -webkit-box-direction: reverse;

            -ms-flex-direction: row-reverse;

                flex-direction: row-reverse

    }

    

    .news .posts li .post-popup-bg .navigation-buttons span {

        float: right

    }

    

    .news .posts li .post-popup-bg .navigation-buttons .next-button {

        border-width: 0 1px

    }

    

    .news .posts li .post-popup-bg .post-popup-content .post-header {

        left: 15px;

        right: 15px;

        padding: 20px 0

    }

    

    .news .posts li .post-popup-bg .post-content-and-comments {

        padding: 0 15px;

        margin-bottom: 20px

    }

    

    .news .posts li .post-popup-bg .post-content-and-comments .post-content iframe {

        height: 200px

    }

    

    .news .posts li .post-popup-bg .post-content-and-comments .comments .list-comments .comment:not(:last-of-type):before {

        left: 15px

    }

    

    .news .posts li .post-popup-bg .post-content-and-comments .comments .list-comments .comment .children {

        margin-left: 30px

    }

    

    .news .posts li .post-popup-bg .post-content-and-comments .comments .list-comments .comment .children .comment:before {

        left: -15px;

        width: 15px

    }

    

    .news .posts li .post-popup-bg .comments .comment-respond .buttons-container .button {

        width: 100%

    }

    

    .page footer .container > div {

        width: 100%;

        line-height: 24px

    }

    

    .page .about .about-content .about-img,

    .page .about .about-content .about-text {

        float: none;

        width: 100%

    }

    

    .page .about .about-content .about-img {

        margin: 60px 0 30px

    }

    

    .page .about .about-content .about-img img {

        width: auto;

        max-width: 100%;

        margin: auto

    }

}





/*------------------------------------------------------------------------------------------*/

/* 5. Screen Width 600px */

/*------------------------------------------------------------------------------------------*/

@media (max-width: 600px) {

    .about .about-content,

    .section-text,

    .services .services-content .services-items,

    .portfolio .portfolio-content .portfolio-items,

    .page .portfolio .portfolio-content .portfolio-items,

    .team .team-content .team-members,

    .pricing .pricing-plans,

    .news .news-content .posts,

    .contact .contact-form,

    .portfolio .portfolio-content > .buttons-container {

        width: 90% !important

    }

    

    .section-text,

    .news .news-content .post-img {

        margin-right: 0 !important;

        margin-bottom: 50px

    }

    

    .portfolio .portfolio-text .work-cat li,

    .page .portfolio .portfolio-text .work-cat li {

        display: block;

        margin: 12px 0

    }

    

    .portfolio .portfolio-content .portfolio-items .item {

        float: none;

        margin-left: auto;

        margin-right: auto

    }

    

    .team .team-members .member {

        -ms-flex-wrap: wrap;

            flex-wrap: wrap

    }

    

    .team .team-members .member .member-info {

        width: 100%;

        text-align: center;

        margin: 30px 0 0

    }

    

    .team .team-content > .slider-controls {

        margin-top: 30px

    }

    

    .clients .clients-content .clients-items {

        width: 370px;

        margin-left: 0

    }

    

    .clients .clients-items span {

        clear: none !important

    }

    

    .clients .clients-items span:nth-of-type(3n+4) {

        clear: both

    }

    

    .clients .clients-items span:not(:nth-of-type(3n+2)) {

        margin: 1px 46px

    }

    

    .clients .clients-items span:nth-of-type(3n+2) {

        margin: 52px 1px -50px

    }

    

    .pricing .pricing-plans .plan:first-of-type,

    .pricing .pricing-plans .plan:nth-of-type(2),

    .pricing .pricing-plans .plan:last-of-type {

        margin-left: auto;

        margin-right: auto

    }

    

    .contact .contact-form .small-fields input,

    .contact .contact-form .buttons-container .button,

    .contact .contact-form .buttons-container .social-media {

        width: 100%

    }

    

    .contact .contact-form .buttons-container .button {

        margin-bottom: 30px;

        -webkit-box-ordinal-group: 1;

            -ms-flex-order: 0;

                order: 0

    }

    

    .contact .contact-form .buttons-container .social-media {

        text-align: center;

        -webkit-box-ordinal-group: 2;

            -ms-flex-order: 1;

                order: 1

    }

    

    footer .container {

        height: 40px;

        padding-top: 8px

    }

    

    footer .scroll-to-next-section span {

        width: 14px;

        height: 20px

    }

    

    footer .scroll-to-next-section i {

        font-size: 12px

    }

    

    .page .statistics .statistics-item {

        width: 100%

    }

    

    .page .about .about-content .buttons-container {

        text-align: center

    }

}





/*------------------------------------------------------------------------------------------*/

/* 6. Screen Width 450px */

/*------------------------------------------------------------------------------------------*/

@media (max-width: 450px) {

    nav .logo {

        font-size: 20px

    }

    

    .menu-body ul li:nth-of-type(3n+0):after {

        content: '';

        white-space: normal

    }

    

    .menu-body ul li:nth-of-type(2n+0):after {

        content: '\A';

        white-space: pre

    }

    

    header .home-content .home-item {

        width: calc(100% - 30px)

    }

    

    header .home-content h2 {

        font-size: 30px;

        margin-top: 15px;

        margin-bottom: 15px

    }

    

    header .home-content .buttons-container {

        margin-top: 15px

    }

    

    @-webkit-keyframes vibration {

        0%, 100% {

            -webkit-transform: translateY(-2px);

            transform: translateY(-2px)

        }

        

        50% {

            -webkit-transform: translateY(-6px);

            transform: translateY(-6px)

        }

    }

    

    @keyframes vibration {

        0%, 100% {

            -webkit-transform: translateY(-2px);

            transform: translateY(-2px)

        }

        

        50% {

            -webkit-transform: translateY(-6px);

            transform: translateY(-6px)

        }

    }

    

    .clients .clients-content .clients-items {

        width: 260px;

        margin-bottom: 0

    }

    

    .clients .clients-items span:nth-of-type(odd) {

        margin: 1px 46px

    }

    

    .clients .clients-items span:nth-of-type(even) {

        margin: 52px 1px -50px

    }

}





/*------------------------------------------------------------------------------------------*/

/* 7. Screen Width 350px */

/*------------------------------------------------------------------------------------------*/

@media (max-width: 350px) {

    .main-heading {

        font-size: 35px

    }

    

    header .home-content .buttons-container .button,

    .about .about-content .buttons-container .button {

        padding: 7px 15px

    }

    

    .buttons-container .button {

        padding: 8px 15px

    }

    

    .portfolio .portfolio-content .portfolio-items,

    .page .portfolio .portfolio-content .portfolio-items {

        width: auto !important

    }

    

    .news .news-content .news-text {

        margin-bottom: 30px

    }

    

    .news .news-content .post-img {

        display: none

    }

}