/*
Theme Name: Yoox
Theme URI: http://layerdrops.com/
Author: Layerdrops
Author URI: http://layerdrops.com/
Description: Yoox - Fine One Page Parallax HTML5 Responsive Template
Version: 1.0
License:
License URI:
*/

/*=======================================================================
[Table of contents]
=========================================================================

1. Header 01
2. Header 02
3. Header 3
4. Fixed Menu Right
5. Rev Slider 01
6. Rev Slider 02
7. Rev Slider 03
8. Rev Slider 04
9. Discover Section
10. Service Section
11. Testimonial Section
12. About Us Section
13. Portfolio Section
14. Funfact Section
15. Team Section
16. Our client Section
17. Blog Section
18. Pricing Section
19. Ready section
20. Contact section
21. gmap section
22. Join section
23. Footer section
24. Parallax Page
25. Page Banner
26. Blog Page
27. Single Blog Page
28. Portfolio Page
29. Popup Menu
30. Popup Search
31. Back To Top
32. Preloader
33. Color Preset
*/

/*------------------------------------------------------------------------------
/ 1. Header 01
------------------------------------------------------------------------------*/
.header_1{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
}
.logo{
    text-align: left;
    padding: 31px 0 20px;
}
.logo img{
    max-width: 100%;
    height: auto;
}
.navigator_right{
    position: relative;
    text-align: right;
    padding: 36px 0 0;
}
.navigator_right a{
    display: inline-block;
    color: #070707;
    font-size: 25px;
    line-height: .8;
    margin: 0 0 0;
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
}
.navigator_right a:hover{
    color: #0038e3;
}
.navigator_right a.naviSearch{
    margin-right: 16px;
}

/*------------------------------------------------------------------------------
/ 2. Header 02
------------------------------------------------------------------------------*/
.header_02{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
}
.mainMenu{
    position: relative;
    line-height: .8;
    padding: 39px 0 0;
}
.mainMenu ul{
    position: relative;
    margin: 0;
    padding: 0;
    line-height: .8;
}
.mainMenu ul li{
    display: inline-block;
    list-style: none;
    margin-right: 50px;
    line-height: .8;
    padding-bottom: 29px;
}
.mainMenu ul li:last-child{
    margin-right: 0;
}
.mainMenu ul li a{
    color: #FFF;
    text-transform: uppercase;
    font-size: 18px;
    line-height: .8;
    font-weight: 600;
    display: inline-block;
}
.mainMenu ul li.menu-item-has-children{
    position: relative;
}
.mainMenu ul ul.sub-menu {
    background: rgba(17, 17, 17, 0.98);
    left: -30px;
    position: absolute;
    top: 60px;
    width: 250px;
    z-index: 9;
    text-align: left;
    padding: 24px 30px 12px;
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    visibility: hidden;
    opacity: 0;
}
.mainMenu ul li:hover ul.sub-menu{
    visibility: visible;
    opacity: 1;
    top: 45px;
}
.mainMenu ul ul.sub-menu:before {
    content: '';
    left: 30px;
    margin: auto;
    position: absolute;
    right: auto;
    top: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(17, 17, 17, 0.98);
    z-index: 10;
}
.mainMenu ul ul.sub-menu li{
    margin: 0;
    padding: 0 0 14px;
    display: block;
}
.mainMenu ul ul.sub-menu li a{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.mainMenu ul li.active > a, .mainMenu ul li a:hover{
    color: #0038e3;
}

.header_02 .navigator_right a{
    color: #fff;
}
.header_02 .navigator_right a:hover{
    color: #0038e3;
}
/*------------------------------------------------------------------------------
/ 3. Header 3
------------------------------------------------------------------------------*/
.header_03{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
}
.header_03 .navigator_right a{
    color: #fff;
}
.navigator_right .social_menu{
    display: inline-block;
    font-size: 20px;
    color: #fff;
    line-height: .8;
    margin: 0 27px 0 0;
    position: relative;
    top: -4px;
}
.header_03 .navigator_right a:hover{
    color: #0038e3;
}
.fixedHeader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 30;
    min-height: 100px;
    background: rgba(17, 17, 17, 0.98);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.fixedHeader .mainMenu ul ul.sub-menu{
    top: 75px;
}
.fixedHeader .mainMenu ul li:hover ul.sub-menu{
    top: 60px;
}
.fixedHeader .mainMenu ul li{
    padding-bottom: 44px;
}
.header_1.fixedHeader{
    background: rgba(255, 255, 255, 0.98);
}
.header_1.fixBg.fixedHeader{
    background: rgba(17, 17, 17, 0.98);
}
.header_1.fixBg.fixedHeader .navigator_right a{
    color: #fff;
}
.header_1.fixBg.fixedHeader .navigator_right a:hover{
    color: #0038e3;
}

/*------------------------------------------------------------------------------
/ 4. Fixed Menu Right
------------------------------------------------------------------------------*/
.headerFixed{
}
.fixednavHeader {
    z-index: 10;
    text-align: right;
    width: 180px;
    position: fixed;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
    transition: all 900ms ease;
}
.fixednavHeader li {
    line-height: .8;
    margin-bottom: 4px;
    position: relative;
    display: block;
}
.fixednavHeader li a {
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 3.2px;
    padding-right: 20px;
    display: inline-block;
    position: relative;
    text-decoration: underline;
}
.fixednavHeader li a:after{
    background: #393a39;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    content: '';
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}
.fixednavHeader li a span{
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 3.2px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}
.fixednavHeader li.active a:after,
.fixednavHeader li a:hover:after{
    background: #fff;;
}
.fixednavHeader li a:hover span,
.fixednavHeader li.active a span{
    visibility: visible;
    opacity: 1;
}

/*------------------------------------------------------------------------------
/ 5. Rev Slider 01
------------------------------------------------------------------------------*/
.slider{
    position: relative;
    width: 100%;
    background: #f7f7f7;
}
.tp-bannertimer{
    display: none;
}
.normalWraping{
    white-space: normal !important;
}
.tp-caption.imgDiagramBox{
    width: 100% !important;
    max-width: inherit !important;
    min-width: inherit !important;
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
}
.imgDiagramBox img{
    width: 100% !important;
    height: auto !important;
}
.tp-caption .discoer_btn{
    text-transform: uppercase;
    background: #ff5ee1;
    height: 70px;
    font-weight: 600 !important;
    padding: 20px 0 !important;
    min-width: 198px;
    font-size: 18px !important;
    display: inline-block;
    text-align: center !important;
    color: #fff;
    letter-spacing: 0 !important;
    transition: all ease 400ms !important;
    -webkit-transition: all ease 400ms !important;
    -moz-transition: all ease 400ms !important;
}
.tp-caption .discoer_btn:hover{
    color: #fff;
}
.tp-bullets.custom{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 999;
    top: auto !important;
    width: auto !important;
}
.tp-bullets.custom .tp-bullet{
    position: absolute;
    bottom: 0;
    top: auto !important;
    background: transparent;
    width: auto;
    height: auto;
    font-size: 24px;
    line-height: .8;
    letter-spacing: 0;
    font-weight: 500;
    color: #fff;
}
.tp-bullets.custom .tp-bullet:before{
    width: 0;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -4px;
    background: #fff;
    content: '';
    visibility: hidden;
    opacity: 0;
    transition: all ease 300ms;
    -webkit-transition: all ease 300ms;
    -moz-transition: all ease 300ms;
}
.tp-bullets.custom .tp-bullet.selected:before,
.tp-bullets.custom .tp-bullet:hover:before{
    visibility: visible;
    opacity: 1;
    width: 100%;
}

/*------------------------------------------------------------------------------
/ 6. Rev Slider 02
------------------------------------------------------------------------------*/
.slider_2{
    position: relative;
    width: 100%;
    background: #000;
}
.sidebarSlider{
    width: 298px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #ff5ee1;
    z-index: 5;
}
.socialLink{
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    position: relative;
    top: 154px;
}
.socialLink a{
    display: inline-block;
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0 35px 0 0;
    transition: all ease 500ms;
    -webkit-transition: all ease 500ms;
    -moz-transition: all ease 500ms;
}
.socialLink a:hover{
    color: #0038e3;
}
.readycontact{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0 60px 60px;
}
.readycontact h2{
    font-size: 40px;
    line-height: 40px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 44px;
}
.readycontact .common_btn{
    background: #0038e3;
    padding: 27px 0;
    width: 100%;
}
.slider_2 .responsiveClass_2 span.inline_css{
    font-family: 'Covered By Your Grace', cursive; 
    color: #ff5ee1;
}

/*------------------------------------------------------------------------------
/ 7. Rev Slider 03
------------------------------------------------------------------------------*/
.slider_3{
    position: relative;
    width: 100%;
    background: #fff;
}
.slider_3 .tp-bullets.custom .tp-bullet{
    color: #000000;
}
.slider_3 .tp-bullets.custom .tp-bullet:before{
    background: #000000;
}

/*------------------------------------------------------------------------------
/ 8. Rev Slider 04
------------------------------------------------------------------------------*/
.slider_4{
    position: relative;
    width: 100%;
}
.slider_4 .singnature{
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 10px !important;
    position: relative;
    transition: all ease 1200ms;
    -webkit-transition: all ease 1200ms;
    -moz-transition: all ease 1200ms;
}
.slider_4 .singnature:after{
    position: absolute;
    left: 0;
    bottom: -10px;
    content: '';
    background: url(../images/slider/signature.png) no-repeat left bottom;
    width: 172px;
    height: 9px;
    transition: all ease 1200ms;
    -webkit-transition: all ease 1200ms;
    -moz-transition: all ease 1200ms;
}

.popUpvideo{
    position: absolute;
    right: 0;
    bottom: 60px;
}
.popUpvideo a.video_link{
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    line-height: .8;
    width: 104px;
    height: 104px;
    background: #ff5ee1;
    border-radius: 50%;
    text-align: center;
    padding: 42px 0 42px 6px;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.popUpvideo a.video_link:hover{
    background: #000;
    color: #fff;
}

/*------------------------------------------------------------------------------
/ 9. Discover Section
------------------------------------------------------------------------------*/
.discoverSection{
    background: url(../images/bg/1.png) no-repeat center center;
}
.mb82{
    margin-bottom: 82px;
}
.discover_yoox{
    position: relative;
    padding-left: 60px;
    padding-top: 60px;
}
.dy_img2{
    position: relative;
}
.dy_img2 img{
    max-width: 100%;
    height: auto;
}
.discover_content{
    position: absolute;
    left: 60px;
    width: 292px;
    bottom: 0;
    background: #0038e3;
    color: #FFF;
    font-size: 26px;
    line-height: 30px;
    letter-spacing: 0;
    font-weight: 700;
    padding: 54px 30px 54px 60px;
}
.dy_img1{
    position: absolute;
    right: 60px;
    top: 0;
    z-index: 2;
}
.dy_img1 img{
    max-width: 100%;
    height: auto;
}

/*------------------------------------------------------------------------------
/ 10. Service Section
------------------------------------------------------------------------------*/
.bg_position{
    position: relative;
}
.perelaxBg1 {
    background: rgba(0, 0, 0, 0) url(../images/bg/parallaxbg_1.png) no-repeat center  center;
    left: 0;
    position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    margin: auto;
    width: 100%;
    z-index: 1;
}

.icon_box_1{
    position: relative;
    background: #FFF;
    padding: 10px;

    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.icon_box_1:hover{
    box-shadow: 0 0 30px rgba(0, 0, 0, .05)
}
.box_inner{
    position: relative;
    background: #FFF;
    padding: 50px 50px 47px;

    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.icon_box_1:hover .box_inner{
    background: #0038e3;
}
.icon_box_1 i{
    font-size: 64px;
    line-height: 1;
    color: #0038e3;
    display: block;
    margin-bottom: 38px;

    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.icon_box_1:hover i{
    color: #FFF;
}
.icon_box_1 h4{
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
    margin: 0 0 32px;
    letter-spacing: 0;

    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.icon_box_1:hover h4{
    color: #FFF;
}
.icon_box_1 p{
    font-size: 18px;
    line-height: 30px;
    color: #737980;
    margin: 0;

    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.icon_box_1:hover p{
    color: #FFF;
}

/*------------------------------------------------------------------------------
/ 11. Testimonial Section
------------------------------------------------------------------------------*/
.testimonialSection{
    background: url(../images/bg/3.jpg) no-repeat fixed center / cover;
}
.testimonialSection .container{
    position: relative;
    z-index: 2;
}
.testimonial_icon{
    margin: 0 auto 46px;
    width: 110px;
    height: 110px;
    background: url(../images/bg/4.png) no-repeat center center #ff5ee1;
    border-radius: 50%;
}
.testimonial_item{
    position: relative;
}
.testimonial_item p{
    font-size: 50px;
    line-height: 60px;
    color: #FFF;
    font-weight: 500;
    margin: 0 0 54px;
}
.testimonial_item h5{
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    margin: 0;
    line-height: .8;
}
.testimonial_item h5 span:first-child{
    margin: 0 13px;
}
.testimonial_carousel.owl-theme .owl-dots{
    line-height: 11px;
    margin-top: 38px;
}
.testimonial_carousel.owl-theme .owl-dots .owl-dot span{
    margin: 0 2px 0;
    width: 11px;
    height: 11px;
    background: rgba(255, 255, 255, .2);

    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.testimonial_carousel.owl-theme .owl-dots .owl-dot.active span, 
.testimonial_carousel.owl-theme .owl-dots .owl-dot span:hover{
    background: #FFF;
}
.testimonial_carousel.owl-theme .owl-nav{
    display: none;
}

/*------------------------------------------------------------------------------
/ 12. About Us Section
------------------------------------------------------------------------------*/
.perelaxBg2 {
    background: rgba(0, 0, 0, 0) url(../images/bg/parallaxbg_2.png) no-repeat center  center;
    left: 0;
    position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    margin: auto;
    width: 100%;
    z-index: 1;
}
.aboutUsSection{
    background: url(../images/bg/5.png) no-repeat center center;
}
.aboutus_content{
    position: relative;
}
.aboutus_content img{
    width: 100%;
    height: auto;
}
.abc_inner{
    position: relative;
    margin-top: -261px;
    z-index: 2;
}
.abci_content{
    position: relative;
    background: #FFF;
    padding: 82px 70px 27px 100px;
}
.abci_content h2{
    font-size: 60px;
    line-height: 72px;
    margin: 0 0 30px;
}
.abci_content p{
    font-size: 20px;
    line-height: 32px;
    margin: 0;
}
.abc_btn_col{
    padding-top: 291px;
}
.abc_discover_btn{
    height: 120px;
    display: block;
    width: 100%;
    background: #0038e3;
    color: #FFF;
    text-align: center;
    font-size: 20px;
    line-height: 120px;
    font-weight: 500;
    text-transform: uppercase;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.abc_discover_btn:hover{
    color: #fff;
}

/*------------------------------------------------------------------------------
/ 13. Portfolio Section
------------------------------------------------------------------------------*/
.portfolioSection{
    background: #f5f6fa;
    padding-bottom: 90px;
}
.singlefolio{
    position: relative;
    overflow: hidden;
    margin: 0 0 30px;
}
.singlefolio img{
    width: 100%;
    height: auto;
    transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.singlefolio:hover img {
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.folioHover{
    margin: 20px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.folioHover:after{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    content: '';
    background: rgba(255, 255, 255, 1);
    visibility: hidden;
    opacity: 0;

    transition: all ease 500ms;
    -moz-transition: all ease 500ms;
    -webkit-transition: all ease 500ms;
}
.folioHover a.btn_folio{
    width: 37px;
    height: 37px;
    background: #ff5ee1;
    border-radius: 50%;
    position: absolute;
    right: 15px;
    top: 30px;
    font-size: 16px;
    line-height: .8;
    color: #fff;
    display: inline-block;
    text-align: center;
    z-index: 2;
    padding: 11px 17px;
    visibility: hidden;
    opacity: 0;

    transition: all ease 600ms;
    -moz-transition: all ease 600ms;
    -webkit-transition: all ease 600ms;
}
.folioHover a.btn_folio img{
    width: 6px;
    height: 10px;
    text-align: center;
}
.folioHover a.btn_folio:hover{
    background: #000;
}
.foliodesc{
    position: absolute;
    left: 30px;
    bottom: 15px;
    z-index: 2;
    visibility: hidden;
    opacity: 0;

    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
}
.foliodesc a.cate{
    font-size: 16px;
    line-height: 20px;
    color: #737980;
    font-weight: 500;
    display: block;
    margin: 0 0 3px;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.foliodesc a.cate:hover{
    color: #0038e3;
}
.foliodesc h4{
    font-size: 20px;
    line-height: 20px;
    color: #000;
    font-weight: 600;
    margin: 0 0 0;
}
.foliodesc h4 a{
    color: #000;
}
.foliodesc h4 a:hover{
    color: #0038e3;
}
.singlefolio:hover .folioHover:after{
    visibility: visible;
    opacity: 1;
}
.singlefolio:hover .folioHover a.btn_folio{
    visibility: visible;
    opacity: 1;
    right: 30px;
}
.singlefolio:hover .foliodesc{
    visibility: visible;
    opacity: 1;
    bottom: 32px;
}

/*------------------------------------------------------------------------------
/ 14. Funfact Section
------------------------------------------------------------------------------*/
.funfactsction{
    background: url(../images/bg/4.jpg) no-repeat center center / cover;
}
.singlefunfact{
    background: #fff;
    padding: 10px;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.singlefunfact h1{
    font-size: 60px;
    line-height: 40px;
    letter-spacing: 0;
    font-weight: 200;
    margin: 0 0 27px;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.singlefunfact h3{
    font-size: 20px;
    line-height: .8;
    letter-spacing: 0;
    font-weight: 400;
    color: #737980;
    margin: 0 0 0;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.factInner{
    text-align: center;
    padding: 48px 0 48px;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.singlefunfact:hover .factInner{
    background: #0038e3;
}
.singlefunfact:hover h1,
.singlefunfact:hover h3{
    color: #fff;
}

/*------------------------------------------------------------------------------
/ 15. Team Section
------------------------------------------------------------------------------*/
.teamsection{
    background: #fff;
    padding-bottom: 90px;
}
.teamSkills{
    position: relative;
    text-align: left;
    margin: 0px 0 63px;
}
.singleSkill{
    position: relative;
    margin: 0 0 38px;
}
.singleSkill h5{
    font-size: 18px;
    line-height: .8;
    text-align: left;
    font-weight: 500;
    color: #000;
    margin: 0 0 18px;
}
.singleSkill .skillbar{
    width: 100%;
    height: 3px;
    background: #f5f6fa;
    position: relative;
}
.singleSkill .skillbar .parcent{
    color: #737980;
    font-size: 18px;
    font-weight: 500;
    position: absolute;
    top: -32px;
    right: 0;
    line-height: .8;
}
.singleSkill .skillbar .skill{
    position: relative;
    height: 3px;
    background: #0038e3;
    width: 1px;
}
.singleSkill .skillbar  span.rounds{
    position: absolute;
    left: -5px;
    top: -4px;
    width: 11px;
    height: 11px;
    background: #0038e3;
    border-radius: 50%;
    content: '';
}
.subscripform{
    border: 4px solid #f5f6fa;
    text-align: center;
    padding: 50px 56px 52px;
}
.subscripform h4{
    font-size: 22px;
    font-weight: 600;
    line-height: .8;
    margin: 0 0 29px;
}
.subscripform input[type="email"]{
    width: 100%;
    border: none;
    background: #f5f6fa;
    height: 60px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #737980;
    outline: none;
    padding: 0 15px;
    margin-bottom: 10px;
}
.subscripform input[type="email"]::-moz-placeholder{
    color: #737980 !important;
    opacity: 1 !important;
}
.subscripform input[type="email"]::-ms-input-placeholder{
    color: #737980 !important;
    opacity: 1 !important;
}
.subscripform input[type="email"]::-webkit-input-placeholder{
    color: #737980 !important;
    opacity: 1 !important;
}
.subscripform button[type="submit"]{
    width: 100%;
    height: 60px;
    border: none;
    background: #ff5ee1;
    color: #fff;
    font-size: 18px;
    line-height: .8;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    padding: 22px 0;
    outline: none;
}
.subscripform .fix_btn:after{
    background: #0038e3;
}
.singleTeamMember{
    position: relative;
    overflow: hidden;
    margin: 0 0 30px;
}
.singleTeamMember:after{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: '';
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 56, 227, 1);
    transition: all ease 500ms;
    -moz-transition: all ease 500ms;
    -webkit-transition: all ease 500ms;
}
.singleTeamMember img{
    width: 100%;
    height: auto;
}
.teamDesc{
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 60%;
    transform: translateY(-50%);
    z-index: 2;
    text-align: center;
    visibility: hidden;
    opacity: 0;

    transition: all ease 900ms;
    -moz-transition: all ease 900ms;
    -webkit-transition: all ease 900ms;
    -ms-transition: all ease 900ms;
    -o-transition: all ease 900ms;
}
.teamDesc h3{
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    margin: 0 0 3px;
    color: #fff;
}
.teamDesc h3 a{
    color: #fff;
}
.teamDesc h3 a:hover{
    color: #000;
}
.teamDesc h4{
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    margin: 0 0 16px;
    color: #fff;
}
.teamDesc a.teamSocial{
    display: inline-block;
    width: 49px;
    height: 49px;
    background: #ffffff;
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
    color: #000000;
    font-weight: 400;
    padding: 9px 0;
    margin: 0 3px 0;
}
.teamDesc a.teamSocial:hover{
    color: #0038e3;
}
.singleTeamMember:hover:after{
    visibility: visible;
    opacity: 1;
}
.singleTeamMember:hover .teamDesc{
    visibility: visible;
    opacity: 1;
    top: 50%;
}

/*------------------------------------------------------------------------------
/ 16. Our client Section
------------------------------------------------------------------------------*/
.clientsection{
    background: #f5f6fa;
}
.singleClient{
    position: relative;
    width: 100%;
    height: 208px;
    background: #fff;
    padding: 10px;
    text-align: center;
}
.singleClient a{
    position: relative;
    text-align: center;
    width: 100%;
    height: 100%;
    display: inline-block;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.singleClient a img{
    max-width: 119px;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: inline-block !important;
    transition: all ease 500ms;
    -moz-transition: all ease 500ms;
    -webkit-transition: all ease 500ms;
}
.singleClient a img:last-of-type{
    opacity: 0;
}
.singleClient:hover a{
    background: #0038e3;
}
.singleClient:hover a img:last-of-type{
    opacity: 1;
}
.client_slider.owl-theme .owl-dots{
    line-height: 11px;
    margin: 39px 0 0;
}
.client_slider.owl-theme .owl-dots .owl-dot span {
    margin: 0 2px 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #c4d0f5;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.client_slider.owl-theme .owl-dots .owl-dot.active span,
.client_slider.owl-theme .owl-dots .owl-dot span:hover{
    background: #0038e3;
}

/*------------------------------------------------------------------------------
/ 17. Blog Section
------------------------------------------------------------------------------*/
.latestBlogItem{
    position: relative;
    background: #f5f6fa;
}
.lbi_thumb{
    position: relative;
    overflow: hidden;
}
.lbi_thumb img{
    width: 100%;
    height: auto;
}
.lbi_details{
    position: relative;
    padding: 54px 60px 56px 60px;
}
.lbi_details .lbid_date{
    height: 41px;
    background: #ff5ee1;
    line-height: 41px;
    color: #fff;
    padding: 0 18px 0 20px;
    min-width: 120px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    position: absolute;
    left: 60px;
    top: -22px;
    z-index: 2;
    display: inline-block;
    text-decoration: none;
    transition: all ease 500ms;
    -webkit-transition: all ease 500ms;
    -moz-transition: all ease 500ms;
}
.lbi_details .lbid_date:hover{
    color: #000;
}
.lbi_details h2{
    font-size: 30px;
    line-height: 30px;
    font-weight: 700;
    margin: 0 0 8px;
}
.lbi_details h2 a{
    color: #000;
}
.lbi_details h2 a:hover{
    color: #0038e3;
}
.lbid_meta{
    font-size: 14px;
    line-height: 30px;
    color: #727980;
    font-weight: 500;
    margin-bottom: 28px;
}
.lbid_meta a{
    color: #727980;
    margin: 0 9px;
}
.lbid_meta a:first-child{
    color: #0038e3;
    margin-left: 0;
}
.lbid_meta a:last-child{
    margin-right: 0;
}
.lbid_meta a:hover{
    color: #0038e3;
}
.lbid_meta a:first-child:hover{
    color: #727980;
}
.lbid_det{
    font-size: 16px;
    line-height: 30px;
    color: #727980;
}

/*------------------------------------------------------------------------------
/ 18. Pricing Section
------------------------------------------------------------------------------*/
.perelaxBg3 {
    background: rgba(0, 0, 0, 0) url(../images/bg/parallaxbg_3.png) no-repeat center  center;
    left: 0;
    position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    margin: auto;
    width: 100%;
    z-index: 1;
}
.singlePricingTable{
    position: relative;
    padding: 10px;
    background: #FFF;
}
.spt_inner{
    position: relative;
    background: #FFF;

    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
}
.spti_head{
    position: relative;
    padding: 51px 15px 0;
}
.spti_bar{
    margin-left: -25px;
    margin-right: -25px;
    background: #f5f6fa;
    height: 1px;
    margin-top: 44px;
}
.spti_head h5{
    line-height: .8;
    font-size: 14px;
    letter-spacing: 2.8px;
    color: #0038e3;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 21px;
}
.spti_head h2{
    font-size: 50px;
    line-height: .8;
    letter-spacing: 0;
    font-weight: 100;
    margin: 0;
}
.spti_boddy{
    position: relative;
    padding: 36px 15px 41px;
}
.spti_boddy p{
    font-size: 18px;
    line-height: 20px;
    margin: 0 0 20px;
}
.spti_boddy p:last-of-type, .spti_boddy p:last-child{
    margin-bottom: 0;
}
.spti_foot{
    position: relative;
    padding: 0 15px 50px;
}
.spti_foot a{
    min-width: 146px;
    padding: 0 15px;
    height: 60px;
    background: #f5f6fa;
    color: #737980;
    text-transform: uppercase;
    font-size: 18px;
    display: inline-block;
    line-height: 59px;
}
.singlePricingTable:hover .spt_inner{
    background: #0038e3;
}
.singlePricingTable:hover .spti_head h5,
.singlePricingTable:hover .spti_head h2,
.singlePricingTable:hover .spti_boddy p{
    color: #fff;
}
.singlePricingTable:hover .spti_bar{
    background: #1a4ce6;
    margin-left: -15px;
    margin-right: -15px;
}
.singlePricingTable:hover .spti_foot a{
    background: #ff5ee1;
    color: #fff;
}

/*------------------------------------------------------------------------------
/ 19. Ready Section
------------------------------------------------------------------------------*/
.readysection{
    background: url(../images/bg/5.jpg) no-repeat fixed center / cover;
}
.readysection .section_title{
    margin: 0;
    line-height: 50px;
}

/*------------------------------------------------------------------------------
/ 20. Contact Section
------------------------------------------------------------------------------*/
.contactsection{
    background: url(../images/bg/6.png) no-repeat center center;
}
.contactForm{
    padding: 0 0 0;
    position: relative;
}
.input-form{
    width: 100%;
    height: 60px;
    background: #f5f6fa;
    border: none;
    text-align: left;
    padding: 0 30px;
    font-size: 16px;
    line-height: .8;
    color: #737980;
    font-weight: 500;
    margin: 0 0 20px;
    outline: none;
    border-radius: 0;
}
.contactForm textarea.input-form{
    height: 190px;
    padding: 18px 30px 18px;
    line-height: 30px;
    resize: none;
    margin-bottom: 12px;
}
input.input-form[type="text"]::-moz-placeholder,
input.input-form[type="email"]::-moz-placeholder,
textarea.input-form::-moz-placeholder{
    color: #737980 !important;
    opacity: 1 !important;
}
input.input-form[type="text"]::-ms-input-placeholder,
input.input-form[type="email"]::-ms-input-placeholder,
textarea.input-form::-ms-input-placeholder{
    color: #737980 !important;
    opacity: 1 !important;
}
input.input-form[type="text"]::-webkit-input-placeholder,
input.input-form[type="email"]::-webkit-input-placeholder,
textarea.input-form::-webkit-input-placeholder{
    color: #737980 !important;
    opacity: 1 !important;
}
.contactForm .common_btn{
    padding: 13px 46px;
    height: 60px;
    line-height: 32px;
}
.input-form.reqError{
    border: 1px solid #f00;
}

/*------------------------------------------------------------------------------
/ 21. Gmap section
------------------------------------------------------------------------------*/
.gmapsection{
    position: relative;
}
.gmap{
    width: 100%;
    height: 610px;
}

/*------------------------------------------------------------------------------
/ 22. Join section
------------------------------------------------------------------------------*/
.goinsection{
    position: relative;
}
.leftjoin{
    background: #0038e3;
    padding: 0 100px 0 0;
}
.rightjoin{
    background: #ff5ee1;
    padding: 0 100px 0 0;
}
.rightjoin .row,
.leftjoin .row{
    margin: 0;
}
.rightjoin img,
.leftjoin img{
    width: 100%;
    height: auto;
}
.rightjoin h2,
.leftjoin h2{
    font-size: 50px;
    line-height: 50px;
    font-weight: 600;
    letter-spacing: 0;
    color: #fff;
    margin: 91px 0 35px;
}
.leftjoin .common_btn{
    margin-bottom: 100px;
}
.rightjoin .common_btn{
    margin-bottom: 100px;
    background: #0038e3;
}
.leftjoin .pdLeft_50,
.rightjoin .pdLeft_50{
    padding-left: 50px;
}

/*------------------------------------------------------------------------------
/ 23. Footer Section
------------------------------------------------------------------------------*/
.footer_1{
    background: #000;
    padding: 110px 0 120px;
}
.foo_social{
    position: relative;
    padding: 10px 0 0;
}
.foo_social a{
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    line-height: .8;
    color: #000000;
    text-align: center;
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: #fff;
    padding: 16px 0;
    margin: 0 6px 0 0;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.foo_social a:hover{
    background: #0038e3;
    color: #fff;
}
.foo_social a.twi:hover{
    background: #1DA1F2;
}
.foo_social a.pin:hover{
    background: #EE1B22;
}
.foo_social a.fac:hover{
    background: #4267B2;
}
.foo_social a.you:hover{
    background: #FF0000;
}
.footer_1 p{
    font-size: 18px;
    line-height: 30px;
    font-weight: 500;
    color: #9f9f9f;
    margin: 0 0 0;
}
.footer_1 p a{
    color: #9f9f9f;
}
.footer_1 p a:hover{
    color: #fff;
}

/*------------------------------------------------------------------------------
/ 24. Parallax Page
------------------------------------------------------------------------------*/
.parallax_section{
    position: relative;
    height: auto;
    width: 100%;
}
.fullHeight{
    height: 100vh;
    width: 100%;
}
.center_content{
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 100%;
}
.home_content{
    position: relative;
    text-align: center;
    padding: 0 160px;
}
.home_content h5{
    font-size: 36px;
    line-height: .8;
    font-family: 'Covered By Your Grace', cursive;
    font-weight: 400;
    color: #fff;
    margin: 0 0 35px;
}
.home_content h2{
    font-size: 100px;
    line-height: 90px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 47px;
    text-transform: uppercase;
}
.singleAB{
    position: relative;
    margin: 0 0 53px;
}
.singleAB.underline{
    margin: 0 0 49px;
}
.singleAB.underline h5 span{
    position: relative;
}
.singleAB.underline h2{
    position: relative;
    display: inline-block;
}
.singleAB.underline h5 span:after{
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 100%;
    height: 2px;
    content: '';
    background: #fff;
}
.singleAB.underline h2:after{
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 100%;
    height: 6px;
    content: '';
    background: #fff;
}
.singleAB h5{
    font-size: 24px;
    line-height: .8;
    font-family: 'Covered By Your Grace', cursive;
    font-weight: 400;
    color: #fff;
    display: block;
    margin: 0 0 2px;
}
.singleAB h2{
    font-size: 100px;
    line-height: 90px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0;
    text-transform: uppercase;
}
.story_content{
    padding: 0 175px;
    margin-bottom: 106px;
}
.story_content h2{
    font-size: 100px;
    line-height: 90px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 28px;
    text-transform: uppercase;
}
.story_content p{
    font-size: 26px;
    line-height: 40px;
    letter-spacing: 0;
    font-weight: 400;
    color: #fff;
    margin: 0 0 0;
}
.transparent_bg{
    text-align: center;
    background: transparent;
    padding: 0;
}
.transparent_bg  h3,
.transparent_bg h1{
    color: #fff;
}
.whatDo_content h2{
    font-size: 80px;
    line-height: 90px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0;
    text-transform: uppercase;
}
.whoare_content{
    text-align: center;
}
.whoare_content h2{
    font-size: 70px;
    line-height: 50px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 52px;
    text-transform: uppercase;
}
.whoare_content p{
    font-size: 26px;
    line-height: 40px;
    letter-spacing: 0;
    font-weight: 400;
    color: #fff;
    margin: 0 0 52px;
    padding: 0 260px;
}
.whoare_content h3{
    font-size: 50px;
    line-height: 40px;
    font-family: 'Covered By Your Grace', cursive;
    font-weight: 400;
    color: #fff;
    margin: 0;
}

/*------------------------------------------------------------------------------
/ 25. Page Banner
------------------------------------------------------------------------------*/
.pageBanner{
    position: relative;
    min-height: 445px;
    background: url(../images/bg/7.jpg) no-repeat center center / cover;
    padding-top: 258px;
}
.pageBanner:after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .4);
}
.pageBanner .container{
    position: relative;
    z-index: 2;
}
.pageBanner h2{
    font-size: 60px;
    line-height: 60px;
    font-weight: 700;
    margin: 0;
    color: #FFF;
}

/*------------------------------------------------------------------------------
/ 26. Blog Page
------------------------------------------------------------------------------*/
.blogListPage .latestBlogItem{
    margin-bottom: 30px;
}
.yoox_paginations{
    position: relative;
    padding-top: 30px;
}
.yoox_paginations a, .yoox_paginations span{
    position: relative;
    display: inline-block;
    height: 60px;
    background: #F5F6FA;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    padding: 0 27px;
    line-height: 60px;
    margin-right: 1px;
}
.yoox_paginations a:hover, .yoox_paginations span.current{
    background: #0038e3;
    color: #FFF;
}
.lbiBig .lbi_details h2{
    font-size: 44px;
    line-height: 44px;
}
.sidebar .widget{
    position: relative;
    background: #f5f6fa;
    padding: 50px;
    margin-bottom: 30px;
}
.sidebar .widget_title{
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: .8;
    margin: 0 0 30px;
}
.sidebar .widget.search-widget{
    padding: 0;
}
.sidebar .widget form.searchform{
    margin: 0;
    padding: 0;
}
.sidebar .widget form.searchform input{
    width: 100%;
    height: 95px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 16px;
    color: #727980;
    font-weight: 500;
    padding: 0 40px;
}
.sidebar .widget form.searchform input:focus{
    outline: 0;
    box-shadow: none;
}
.yoox_post_widget{
    position: relative;
}
.yoox_post_widget .ypw_item{
    position: relative;
    padding-left: 80px;
    border-bottom: 1px solid #FFF;
    min-height: 56px;
    padding-bottom: 21px;
    margin-bottom: 20px;
    padding-top: 2px;
}
.ypw_item img{
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 56px;
}
.ypw_item a{
    font-size: 18px;
    line-height: 24px;
    color: #727980;
    display: inline-block;
}
.ypw_item a:hover{
    color: #000000;
}
.yoox_post_widget .ypw_item:last-of-type{
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
.sidebar ul{
    margin: -5px 0 0;
    padding: 0;
    line-height: 22px;
}
.sidebar ul li{
    list-style: none none;
    line-height: 22px;
    margin-bottom: 21px;
}
.sidebar ul li:last-child{
    margin-bottom: 0;
}
.sidebar ul li a{
    font-size: 18px;
    line-height: 22px;
    color: #727980;
    display: inline-block;
}
.sidebar ul li a:hover{
    color: #ff5ee1;
}
.tagcloude{
    font-size: 16px;
    line-height: 30px;
    color: #727980;
}
.tagcloude a{
    color: #727980;
}
.tagcloude a:hover{
    color: #ff5ee1;
}

/*------------------------------------------------------------------------------
/ 27. Single Blog Page
------------------------------------------------------------------------------*/
.single_blog{
    position: relative;
}
.blog_thumb{
    position: relative;
}
.blog_thumb img{
    width: 100%;
    height: auto;
}
.blog_headings{
    position: relative;
    padding: 52px 0 0;
}
.blog_headings .blog_date{
    height: 41px;
    background: #ff5ee1;
    line-height: 41px;
    color: #fff;
    padding: 0 18px 0 20px;
    min-width: 120px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    position: absolute;
    left: 60px;
    top: -22px;
    z-index: 2;
}
.blog_headings h2{
    font-size: 40px;
    line-height: 40px;
    margin: 0 0 6px;
}
.blog_metas {
    font-size: 14px;
    line-height: 30px;
    color: #727980;
    font-weight: 500;
    margin-bottom: 28px;
}
.blog_metas a {
    color: #727980;
    margin: 0 9px;
}
.blog_metas a:first-child {
    color: #0038e3;
    margin-left: 0;
}
.blog_metas a:hover{
    color: #0038e3;
}
.blog_metas a:last-child {
    margin-right: 0;
}
.lbid_meta a:hover {
    color: #0038e3;
}
.blog_details{
    position: relative;
    border-bottom: 1px solid #f5f6fa;
    padding-bottom: 25px;
    margin-bottom: 40px;
}
.blog_details p{
    font-size: 16px;
    line-height: 30px;
    color: #727980;
    margin: 0 0 29px;
}
.tag_and_social{
    position: relative;
    margin-bottom: 40px;
}
.postSocial{
    position: relative;
}
.postSocial a{
    display: inline-block;
    margin-left: 6px;
}
.postSocial a:first-child{
    margin-left: 0;
}
.postSocial a i{
    display: inline-block;
    height: 49px;
    width: 49px;
    background: #0038e3;
    color: #FFF;
    text-align: center;
    line-height: 49px;
    border-radius: 50%;
    font-size: 18px;
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
}
.postSocial a:hover i.fa-twitter{
    background: #1DA1F2;
}
.postSocial a:hover i.fa-pinterest{
    background: #EE1B22;
}
.postSocial a:hover i.fa-facebook{
    background: #365BA9;
}
.postSocial a:hover i.fa-linkedin{
    background: #0177B4;
}
.tagitems{
    font-size: 16px;
    line-height: 30px;
    color: #ff5ee1;
    font-weight: 500;
    padding-top: 8px;
}
.tagitems span{
    font-weight: 700;
    color: #000;
    font-size: 20px;
    display: inline-block;
    margin-right: 7px;
}
.tagitems a{
    color: #ff5ee1;
}
.tagitems a:hover{
    color: #000;
}
.post_author{
    position: relative;
    background: #f5f6fa;
    padding: 60px 60px 56px 60px;
    margin-bottom: 57px;
}
.post_author img{
    float: left;
    width: 170px;
    height: 190px;
    margin-right: 40px;
}
.post_author h3{
    font-size: 24px;
    line-height: .8;
    font-weight: 600;
    margin: -1px 0 37px;
}
.post_author h3 a{
    color: #000;
}
.post_author h3 a:hover{
    color: #0038e3;
}
.post_author p{
    font-size: 18px;
    line-height: 30px;
    color: #727980;
    margin: 0 0 17px;
}
.post_author > a{
    font-size: 14px;
    text-transform: uppercase;
    color: #ff5ee1;
    letter-spacing: 2.8px;
    display: inline-block;
    line-height: .8;
    font-weight: 700;
}
.post_author > a:hover{
    color: #000;
}
.comment_area{
    position: relative;
    text-align: left;
}
.comment_area h3{
    font-size: 30px;
    font-weight: 700;
    line-height: .8;
    margin: 0 0 61px;
}
.comment_area ol{
    margin: 0;
    padding: 0;
}
.comment_area ol li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.single-comment{
    position: relative;
    padding: 0 55px 56px 143px;
    border-bottom: 1px solid #f5f6fa;
    margin-bottom: 60px;
}
.single-comment img{
    width: 110px;
    height: 110px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
}
.single-comment .authorDetails{
    text-align: left;
    margin: 0 0 0;
}
.single-comment .authorDetails h5{
    font-size: 20px;
    line-height: .8;
    font-weight: 500;
    margin: 0 0 7px;
    position: relative;
    top: -2px;
}
.single-comment .authorDetails h5 a{
    color: #000000;
}
.single-comment .authorDetails h5 a:hover{
    color: #ff5ee1;
}
.single-comment .authorDetails span{
    font-size: 16px;
    line-height: 30px;
    color: #ff5ee1;
    font-weight: 400;
    margin: 0 0 29px;
    display: block;
}
.single-comment .comment{
    text-align: left;
}
.single-comment .comment p{
    font-size: 18px;
    line-height: 30px;
    color: #727980;
    font-weight: 400;
    margin: 0;
}
.single-comment a.commentReply{
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    font-size: 14px;
    line-height: .8;
    font-weight: 600;
    color: #fff;
    height: 40px;
    padding: 14px 20px;
    text-align: center;
    text-transform: uppercase;
    background: #ff5ee1;
}
.single-comment a.commentReply:hover{
    background: #000;
}
.commentForm{
    position: relative;
}
.commentForm h3{
    font-size: 30px;
    font-weight: 700;
    line-height: .8;
    margin: -3px 0 40px;
}
.commentForm input.input-form{
    margin-bottom: 30px;
}
.commentForm textarea.input-form{
    height: 190px;
    resize: none;
    line-height: 30px;
    padding: 18px 30px;
    margin-bottom: 12px;
}

/*------------------------------------------------------------------------------
/ 28. Portfolio Page
------------------------------------------------------------------------------*/
.mt10{
    margin-top: 10px;
}
.folioDetilsThumb{
    margin-bottom: 30px;
}
.folioDetilsThumb img{
    width: 100%;
    height: auto;
}
.singleFolioDetail{
    position: relative;
    text-align: left;
    margin: 0 0 0;
}
.singleFolioDetail h3{
    font-size: 34px;
    line-height: .8;
    font-weight: 600;
    margin: -3px 0 38px;
}
.singleFolioDetail p{
    font-size: 18px;
    line-height: 30px;
    margin: 0 0 28px;
}
.singleFolioDetail .singleIteamPro{
    margin: 0 0 28px;
}
.singleIteamPro h4{
    font-size: 24px;
    line-height: 30px;
    font-weight: 500;
    margin: 0 0 2px;
}
.singleIteamPro span{
    display: block;
    color: #737980;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
}
.singleIteamPro span a{
    color: #737980;
}
.singleIteamPro span a:hover{
    color: #ff5ee1;
}
.folio_social{
    position: relative;
    text-align: left;
}
.folio_social a {
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    line-height: .8;
    color: #fff;
    text-align: center;
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: #0038e3;
    padding: 16px 0;
    margin: 0 6px 0 0;
}
.folio_social a:hover{
    background: #000;
}
.folio_social a.twi:hover {
    background: #1DA1F2;
}
.folio_social a.pin:hover {
    background: #EE1B22;
}
.folio_social a.fac:hover {
    background: #4267B2;
}
.folio_social a.you:hover {
    background: #FF0000;
}
.nextprevPagination{
    position: relative;
    border-top: 2px solid #e9ebf4;
    border-bottom: 2px solid #e9ebf4;
    padding: 50px 0 52px;
    margin-top: 30px;
}
.nextprevPagination a{
    display: inline-block;
    font-size: 20px;
    line-height: .8;
    color: #000000;
    font-weight: 500;
}
.nextprevPagination a i{
    font-size: 16px;
    font-weight: 400;
    position: relative;
    top: -1px;
}
.nextprevPagination a.prevFolio i{
    margin-right: 9px;
}
.nextprevPagination a.nextFolio i{
    margin-left: 9px;
}
.nextprevPagination a:hover{
    color: #0038e3;
}
.portfolioPopUp{
    width: 100%;
    height: 100%;
    position: fixed;
    content: '';
    z-index: 100;
    background-color: rgba(0, 56, 227, 0.9);
    display: none;
}
.center_align{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: left;
    top: 50%;
    transform: translateY(-50%);
}
.folio_slider{
    position: relative;
}
.singelThumb{
    position: relative;
}
.singelThumb img{
    width: 100%;
    height: auto;
}
.folio_slider .owl-nav{
    margin: 0;
}
.folio_slider .owl-nav .owl-prev,
.folio_slider .owl-nav .owl-next{
    width: 59px;
    height: 59px;
    border-radius: 50%;
    border: none;
    background: rgba(73, 70, 72, 1);
    font-size: 24px;
    color: #000000;
    line-height: .8;
    font-weight: 400;
    padding: 16px 0;
    margin: 0;
    text-align: center;
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
}
.folio_slider .owl-nav .owl-prev:hover,
.folio_slider .owl-nav .owl-next:hover{
    background: #fff;
    color: #000;
}
.folio_slider .owl-nav .owl-prev{
    position: absolute;
    left: 40px;
    top: 50%;
}
.folio_slider .owl-nav .owl-next{
    position: absolute;
    right: 40px;
    top: 50%;
}
.portdescrip{
    background: #ffffff;
    padding: 0 0 0 60px;
}
.portdescrip span{
    font-size: 18px;
    line-height: 32px;
    color: #0038e3;
    font-weight: 400;
    margin: 30px 0 0;
    display: block;
}
.portdescrip span a{
    color: #0038e3;
    display: inline-block;
    margin: 0 8px;
}
.portdescrip span a:first-child{
    margin-left: 0;
}
.portdescrip span a:hover{
    color: #000;
}
.portdescrip h3{
    font-size: 30px;
    font-weight: 400;
    color: #000000;
    line-height: .8;
    margin: 0;
}
.portdescrip .common_btn{
    width: 100%;
    height: 130px;
    padding: 57px 0;
}
.closePopUp{
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 32px;
    top: 28px;
    z-index: 5;
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
}
.closePopUp:before {
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 0;
    content: '';
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
}
.closePopUp:after {
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 0;
    content: '';
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
}
.closePopUp:hover:before,
.closePopUp:hover:after{
    background: #000;
}
.folioLoader span {
    position: relative;
    top: 0.63em;  
    display: inline-block;
    text-transform: uppercase;  
    opacity: 0;
    transform: rotateX(-90deg);
    font-size: 25px;
    letter-spacing: 3px;
    font-weight: 500;
    color: #fff;
}
.let1 {
    animation: drop 1.2s ease-in-out infinite;
    animation-delay: 1.2s;
}
.let2 {
    animation: drop 1.2s ease-in-out infinite;
    animation-delay: 1.3s;
}
.let3 {
    animation: drop 1.2s ease-in-out infinite;
    animation-delay: 1.4s;
}
.let4 {
    animation: drop 1.2s ease-in-out infinite;
    animation-delay: 1.5s;
}
.let5 {
    animation: drop 1.2s ease-in-out infinite;
    animation-delay: 1.6s;
}
.let6 {
    animation: drop 1.2s ease-in-out infinite;
    animation-delay: 1.7s;
}
.let7 {
    animation: drop 1.2s ease-in-out infinite;
    animation-delay: 1.8s;
}
@keyframes drop {
    10% {
        opacity: 0.5;
    }
    20% {
        opacity: 1;
        top: 3.78em;
        transform: rotateX(-360deg);
    }
    80% {
        opacity: 1;
        top: 3.78em;
        transform: rotateX(-360deg);
    }
    90% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        top: 6.94em
    }
}
.hiddenOverflow{
    overflow: hidden;
}

/*------------------------------------------------------------------------------
/ 29. Popup Menu
------------------------------------------------------------------------------*/
.popup {
    background: rgba(17, 17, 17, 0.98);
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    height: 100vh;
    opacity: 0;
    padding-top: 30px;
    padding-bottom: 30px;
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.6s 0s cubic-bezier(0.7, 0, 0.3, 1);
    width: 100%;
    z-index: 1000;
}
.close-popup{
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 0px #fff;
    font-weight: 600;
    height: 50px;
    width: 50px;
    position: absolute;
    right: 30px;
    top: 30px;
    text-transform: uppercase;
    transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    z-index: 99;
}
.close-popup:after{
    width: 15px;
    height: 1px;
    background: #000;
    position: absolute;
    right: 17.5px;
    top: 24px;
    content: '';
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
}
.close-popup:before{
    width: 15px;
    height: 1px;
    background: #000;
    position: absolute;
    right: 17.5px;
    top: 24px;
    content: '';
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
}
.close-popup:hover{
    box-shadow: 0 0 0 10px rgba(255,255,255, .2);
    box-shadow: 0 0 0 10px rgba(255,255,255, .2);
    -moz-box-shadow: 0 0 0 10px rgba(255,255,255, .2);
}
.close-popup:hover:after,
.close-popup:hover:before{
    background: #0038e3;
}
.logo2{
    z-index: 99;
    position: absolute;
    left: 0;
    top: 27px;
}
.footer__contacts{
    position: absolute;
    left: 0;
    bottom: 40px;
    margin: 0;
}
.popUp_social{
    position: absolute;
    right: 0;
    bottom: 45px;
    padding: 0;
}
.footer__contacts li{
    list-style: none;
    display: block;
    font-size: 16px;
    color: #fff;
    line-height: 22px;
    margin: 0 0 7px;
    font-weight: 400;
}
.footer__contacts li:last-child{
    margin-bottom: 0;
}
.popup__btn-close {
    background-color: transparent;
    border: 0;
    letter-spacing: .3rem;
    opacity: 1;
    position: absolute;
    right: 30px;
    top: 30px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.6s 0s cubic-bezier(0.7, 0, 0.3, 1);
    z-index: 1;
}
.popup__btn-close:hover {
    opacity: .5;
}
.popup-inner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    height: 100vh;
    transform: translateY(-100%);
    transition: all 0.6s 1000ms cubic-bezier(0.7, 0, 0.3, 1);
    width: 100%;
}
.show-popup .popup-inner, .show-overlay-nav .popup-inner {
    transform: translateY(0);
}
.show-popup .popup.popup-overlay, .show-overlay-nav .popup.popup__menu {
    opacity: 1;
    overflow-x: hidden;
    overflow-y: auto;
    visibility: visible;
    transform: translateY(0);
}
.show-popup,
.show-overlay-nav {
    overflow: hidden;
}
.popup.popup__menu {
    background-image: url(../images/line-maker.svg);
    background-repeat: repeat;
    background-position: center center;
    padding: 0;
}
.popup.popup__menu .popup-inner {
    display: flex;
}
.show-overlay-nav .popup.popup__menu.popup__menu {
    box-shadow: none;
    overflow: hidden;
}
.show-overlay-nav .top {
    background-color: transparent;
    box-shadow: none;
}

.dl-menu__wrap {
    height: auto;
    position: relative;
    perspective: 600px;
    perspective-origin: 50% -200%;
    text-align: center;
    transition: all 0.6s 0s cubic-bezier(0.7, 0, 0.3, 1);
    width: 100%;
}
.dl-menu__wrap ul {
    list-style: none;
    padding: 0;
    transform-style: preserve-3d;
}
.dl-menu__wrap ul li {
    margin: 15px 0;
    position: relative;
}
.dl-menu__wrap ul li a {
    color: #FFF;
    text-transform: uppercase;
    font-size: 16px;
    line-height: .8;
    letter-spacing: 1px;
    font-weight: 400;
    padding-right: 15px;
    padding-top: 4px;
    padding-left: 15px;
    padding-bottom: 6px;
    position: relative;
    text-decoration: none;
    -webkit-text-decoration-skip: objects;
    transition: all 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
.dl-menu__wrap ul li.menu-item-has-children a{
    padding-right: 30px;
}
.dl-menu__wrap ul li a::after {
    background-color: #0038e3;
    content: '';
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    pointer-events: none;
    user-select: none;
    transition: all 0.6s 0s cubic-bezier(0.7, 0, 0.3, 1);
    z-index: -1;
}
.dl-menu__wrap ul li.menu-item-has-children > a{
    position: relative;
}
.dl-menu__wrap ul li.menu-item-has-children > a:before{
    position: absolute;
    right: 14px;
    top: 0;
    content: "\f107";
    transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
    font-family: 'fontAwesome';
    font-size: 12px;
    color: #fff;
    line-height: 28px;
}
.dl-menu__wrap ul li.menu-item-has-children > a:hover:before{
    transform: rotate(-180deg);
}
.dl-menu__wrap ul li.active > a::after,
.dl-menu__wrap ul li a:hover::after {
    width: 100%;
}
.dl-menu__wrap ul li .dl-submenu {
    display: none;
}
.dl-menu__wrap .dl-menu {
    margin: 0;
    pointer-events: none;
    transform: translateY(10px);
    backface-visibility: hidden;
    width: 100%;
}
.dl-menu__wrap .dl-menu.dl-menu-toggle {
    transition: all 0.3s ease;
}
.dl-menu__wrap ul li .dl-submenu li a{
    padding-right: 15px;
}
.dl-menu__wrap .dl-menu.dl-menuopen {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0px);
}
.dl-menu__wrap .dl-menu.dl-subview li,
.dl-menu__wrap .dl-menu.dl-subview li.dl-subviewopen > a, 
.dl-menu__wrap .dl-menu.dl-subview li.dl-subview > a {
    display: none;
}
.dl-menu__wrap .dl-menu.dl-subview li.dl-subview, 
.dl-menu__wrap .dl-menu.dl-subview li.dl-subview .dl-submenu, 
.dl-menu__wrap .dl-menu.dl-subview li.dl-subviewopen, 
.dl-menu__wrap .dl-menu.dl-subview li.dl-subviewopen > 
.dl-submenu, .dl-menu__wrap .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
    display: block;
}
.dl-menu__wrap .dl-menu.dl-animate-out-3 {
    -webkit-animation: MenuAnimOut3 0.4s ease;
    animation: MenuAnimOut3 0.4s ease;
}
.dl-menu__wrap .dl-menu.dl-animate-in-3 {
    -webkit-animation: MenuAnimIn3 0.4s ease;
    animation: MenuAnimIn3 0.4s ease;
}
.dl-menu__wrap .dl-menu .dl-back a {
    position: relative;
    width: 26px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.dl-menu__wrap .dl-menu .dl-back a:before {
    content: '';
    background-color: transparent;
    background-image: url(../images/arrow-back.svg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 26px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    width: 26px;
}
.dl-menu__wrap .dl-menu.dl-subview .dl-back {
    -webkit-animation: SubMenuAnimIn3 0.4s ease;
    animation: SubMenuAnimIn3 0.4s ease;
}
.dl-menu__wrap > .dl-submenu {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.dl-menu__wrap > .dl-submenu.dl-animate-in-3 {
    -webkit-animation: SubMenuAnimIn3 0.4s ease;
    animation: SubMenuAnimIn3 0.4s ease;
}
.dl-menu__wrap > .dl-submenu.dl-animate-out-3 {
    -webkit-animation: SubMenuAnimOut3 0.4s ease;
    animation: SubMenuAnimOut3 0.4s ease;
}
@keyframes MenuAnimOut3 {
    100% {
        transform: translateZ(300px);
        opacity: 0;
    }
}
@keyframes MenuAnimIn3 {
    0% {
        transform: translateZ(300px);
        opacity: 0;
    }
    100% {
        transform: translateZ(0px);
        opacity: 1;
    }
}
@keyframes SubMenuAnimIn3 {
    0% {
        transform: translateZ(-300px);
        opacity: 0;
    }
    100% {
        transform: translateZ(0px);
        opacity: 1;
    }
}
@keyframes SubMenuAnimOut3 {
    0% {
        transform: translateZ(0px);
        opacity: 1;
    }
    100% {
        transform: translateZ(-300px);
        opacity: 0;
    }
}

/*------------------------------------------------------------------------------
/ 30. Popup Search
------------------------------------------------------------------------------*/
.searchFixed{
    height: 100px;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(17, 17, 17, 0.98);
    z-index: 9999;
    display: none;
    -webkit-box-shadow: 0px 7px 21px 0px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0px 7px 21px 0px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0px 7px 21px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 7px 21px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 7px 21px 0px rgba(0, 0, 0, 0.2);
}

.SearchForm {
    height: 100px;
    width: 100%;
}
.SearchForm input[type="search"] {
    outline: none;
    background: transparent;
    border: none;
    color: #fff;
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 35px;
    padding: 0 60px 0 30px;
}
.SearchForm input[type="search"]::-moz-placeholder{
    color: #fff !important;
    opacity: 1 !important;
}
.SearchForm input[type="search"]::-ms-input-placeholder{
    color: #fff !important;
    opacity: 1 !important;
}
.SearchForm input[type="search"]::-webkit-input-placeholder{
    color: #fff !important;
    opacity: 1 !important;
}
.SearchForm button[type="submit"] {
    padding: 32px 0;
    outline: none;
    border: none;
    background: #0038e3;
    font-size: 14px;
    line-height: .8;
    color: #fff;
    font-weight: 400;
    position: absolute;
    height: 100%;
    width: 100px;
    letter-spacing: .60px;
    text-transform: uppercase;
    right: 0;
    top: 0;
    text-align: center;
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
}
.SearchForm .fix_btn:after{
    background: #ff5ee1;
}

/*------------------------------------------------------------------------------
/ 31. Back To Top
------------------------------------------------------------------------------*/
.showit {
    background: #0038e3;
    bottom: 60px;
    color: #ffffff;
    font-size: 20px;
    height: 40px;
    line-height: 0.8;
    padding: 10px 12px;
    position: fixed;
    right: 60px;
    text-align: center;
    width: 40px;
    z-index: 99;
}
.showit i {
    color: #ffffff;
}
.showit:hover {
    background: #000;
    color: #ffffff;
}

/*------------------------------------------------------------------------------
/ 32. Preloader
------------------------------------------------------------------------------*/
.preloader {
    background: #000;
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 99999;
}
.la-ball-scale-multiple,
.la-ball-scale-multiple>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.la-ball-scale-multiple{display:block;font-size:0;color:#fff}
.la-ball-scale-multiple.la-dark{color:#333}
.la-ball-scale-multiple>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}
.la-ball-scale-multiple{width:32px;height:32px}
.la-ball-scale-multiple>div{position:absolute;top:0;left:0;width:32px;height:32px;border-radius:100%;opacity:0;-webkit-animation:ball-scale-multiple 1s 0s linear infinite;-moz-animation:ball-scale-multiple 1s 0s linear infinite;-o-animation:ball-scale-multiple 1s 0s linear infinite;animation:ball-scale-multiple 1s 0s linear infinite}
.la-ball-scale-multiple>div:nth-child(2){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-o-animation-delay:.2s;animation-delay:.2s}
.la-ball-scale-multiple>div:nth-child(3){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-o-animation-delay:.4s;animation-delay:.4s}
.la-ball-scale-multiple.la-sm{width:16px;height:16px}
.la-ball-scale-multiple.la-sm>div{width:16px;height:16px}
.la-ball-scale-multiple.la-2x{width:64px;height:64px; left: 0; top: 0; right: 0; margin: auto; bottom: 0; position: absolute;}
.la-ball-scale-multiple.la-2x>div{width:64px;height:64px}
.la-ball-scale-multiple.la-3x{width:96px;height:96px}
.la-ball-scale-multiple.la-3x>div{width:96px;height:96px}@-webkit-keyframes ball-scale-multiple{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}5%{opacity:.75}100%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes ball-scale-multiple{0%{opacity:0;-moz-transform:scale(0);transform:scale(0)}5%{opacity:.75}100%{opacity:0;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes ball-scale-multiple{0%{opacity:0;-o-transform:scale(0);transform:scale(0)}5%{opacity:.75}100%{opacity:0;-o-transform:scale(1);transform:scale(1)}}@keyframes ball-scale-multiple{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}5%{opacity:.75}100%{opacity:0;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}


/*------------------------------------------------------------------------------
/ 33. Color Preset
------------------------------------------------------------------------------*/
.color_settings {
    position: fixed;
    backface-visibility: hidden;
    left: -240px;
    top: 25%;
    width: 240px;
    box-sizing: border-box;
    padding: 25px 20px 20px;
    z-index: 1000;
    background: #fff;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
    -webkit-transition: left 0.3s ease-in-out;
    -moz-transition: left 0.3s ease-in-out;
    -ms-transition: left 0.3s ease-in-out;
    -o-transition: left 0.3s ease-in-out;
    transition: left 0.3s ease-in-out;
}
.color_settings .switch-btn {
    width: 40px;
    height: 40px;
    background: #fff;
    font-size: 18px;
    color: #000;
    border: none;
    position: absolute;
    line-height: .8;
    padding: 11px 0;
    top: 20px;
    right: -40px;
    box-shadow: -1px 0 2px rgba(0, 0, 0, 0.1) inset;
    text-align: center;
}
.color_settings .color_preset button {
    background: #fff;
    border: none;
    border-radius: 0;
    height: 30px;
    width: 50px;
    display: block;
    float: left;
    margin: 5px;
    outline: none;
}
.color_settings .color_preset button.active{
    opacity: .2;
}
.color_settings .color_preset h4{
    text-align: center;
    font-size: 16px;
    color: #000;
    line-height: .8;
    font-weight: 500;
    text-transform: uppercase;
    padding: 9px 0;
    margin: 0 0 7px;
    border: 2px solid #f5f6fa;
}
.color_settings .switch-btn.active,
.color_settings .switch-btn:hover{
    color: #0038e3;
}