yo    /*Stela Minimal Portfolio Template By TeamXcel*/

/*  ==========================================================================
    Table of Contets
    ==========================================================================

    1.0 Common Styles
    2.0 Header Section
    3.0 Hero Section
    4.0 Portfolio Section
    5.0 Services Section
    6.0 Testimonial Section
    7.0 Team Section
    8.0 Call To Action Section
    9.0 About Section
    10.0 Page Header Section
    11.0 Contact Section
    12.0 Blog Section
    13.0 Footer Section
    14.0 Scroll To Top

    ==========================================================================
    TeamXcel
    ========================================================================== */

    @import url('https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display:400,700,900');

/*  ==========================================================================
    1.0 Common Styles
    ========================================================================== */
*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 180%;
    color: #777;
    font-weight: 400;
    position: relative;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing:antialiased;
    color: #222;
}
h1{
    font-size: 40px;
    line-height: 50px;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    font-weight: 700;
}
h2{
    font-size: 32px;
    color: #333;
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: -0.04em;
}
h3,h4{
    margin: 0 0 10px;
    font-weight: 400;
    line-height: 1.4;
    color: #333;
    letter-spacing: -0.04em;
}
h3{
    font-size: 28px;
}
h4{
    font-size: 24px;
}
h5,h6{
    font-size: 20px;
    margin: 0 0 10px;
}
img{
    border: none;
    outline:none;
}
ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
p{
    font-size: 16px;
    margin-bottom: 50px;
    line-height: 180%;
}
a{  font-family: "Roboto",sans-serif;
    letter-spacing: -0.04em;
}
a, a:hover{
    text-decoration: none;
}
a:focus{
    outline: 0;
    text-decoration: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
   color: #888 !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder{ /* Firefox 18- */
   color: #888 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder{  /* Firefox 19+ */
   color: #888 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder{
   color: #888 !important;
}
button{
    border: none;
    background: none;
}
/* Helper Class */
.padding{
    padding: 80px 0;
}
.pd-15{
    padding: 15px;
}
.no-padding{
    padding: 0;
}
.mb-10{ margin-bottom: 10px; }
.mb-15{ margin-bottom: 15px; }
.mb-20{ margin-bottom: 20px; font-family: "Roboto",sans-serif;}
.mb-25{ margin-bottom: 25px; }
.mb-30{ margin-bottom: 30px; }
.mb-35{ margin-bottom: 35px; }
.mb-40{ margin-bottom: 40px; }
.mb-45{ margin-bottom: 45px; }
.mb-50{ margin-bottom: 50px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.ml-5{ margin-left: 5px; }
.ml-10{ margin-left: 10px; }
.mr-5{ margin-right: 5px; }
.mr-10{ margin-right: 10px; }
.mt-15{ margin-left: 15px; }
.mt-15{ margin-left: 15px; }
.padding-15{ padding: 15px; }

.display-block{ display: block; }
.text-black{
    color: #282828;
}
.text-white{
    color: #ffffff;
}
.align-left{
    text-align: left;
}
.align-right{
    text-align: right;
}
.align-center{
    text-align: center;
}
.fl-right{
    float: right;
}
.fl-left{
    float: left;
}
.display-table{
    width: 100%;
    height: 100%;
    display: table;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
}
.overlay{
    width: 100%;
    position: relative;
    z-index: 1;
}
.overlay:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.bg-white{
    background-color: #fff;
}
.bg-grey{
    background-color: #f2f2f2;
}
.bd-bottom{
    border-bottom: 1px solid #eaeaea;
}
.bg-dark{
    background-color: #232323;
}

/* Preloader Styles */
.loaded .site-preloader-wrap {
    opacity: 0;
    visibility: hidden;
}
.site-preloader-wrap {
    background-color: #111;
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.site-preloader-wrap .spinner {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
}
.spinner {
  width: 40px;
  height: 40px;

  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}


/* Button Style */
.btn_group{}
.btn_group a{
    margin: 5px;
}
.default-btn{
    font-family: "Open Sans",sans-serif;
    letter-spacing: 2px;
    background-color: #111;
    color: #ddd;
    line-height: 45px;
    display: inline-block;
    padding: 0 25px;
    border-radius: 0;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    z-index: 1;
    -webkit-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.default-btn:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #f2f2f2;
    -webkit-transform-origin: right center;
       -moz-transform-origin: right center;
        -ms-transform-origin: right center;
            transform-origin: right center;
    -webkit-transform: scale(0, 1);
       -moz-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
         -o-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}
.default-btn:hover{
    color: #111;
}
.default-btn:hover:before{
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
        transform-origin: left center;
    -webkit-transform: scale(1, 1);
       -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
         -o-transform: scale(1, 1);
            transform: scale(1, 1);
}
.default-btn.btn_sm{
    line-height: 40px;
    padding: 0 15px;
}

/* Transition Effect */
a,a:hover, .overlay, img, .form-control,  .form-control:hover, button{
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

/* ==========================================================================
   2.0 Header Section
   ========================================================================== */
.header-section{
    background-color: #fff;
    position: absolute;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.06);
    box-shadow: 0 0 15px rgba(0,0,0,0.06);
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
}
.header-section.navbar-fixed-top{
    position: fixed;
}
.header-height{ width: 100%; }

/*Main Header */
.main-header{
    background-color: #fff;
    position: relative;
}
.bottom-content-wrap{
    display: flex;
    align-items: center;
}
#mainmenu{
    display: inline-block;
    margin-right: 20px;
}
#mainmenu li{
    position: relative;
    padding-left: 20px;
    display: inline-block;
    text-align: left;
}
#mainmenu li a{
    font-family: "Open Sans",sans-serif;
    color: #222;
    font-weight: 600;
    padding: 30px 0;
    text-transform: uppercase;
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0;
}
#mainmenu li a:hover{
    color: #111;
}
/*Dropdown */
#mainmenu li ul{
    background-color: #fff;
    width: 200px;
    height: auto;
    position: absolute;
    left: 0;
    top: 140%;
    visibility: hidden;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 999;
}
#mainmenu li:hover > ul{
    visibility: visible;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    top: 100%;
}
#mainmenu li ul li{
    border-bottom: 1px solid #eaeaea;
    display: block;
    position: relative;
}
#mainmenu li ul li:last-child{
    border: none;
}
#mainmenu li ul li a{
    line-height: 45px;
    display: block;
    padding: 0 15px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #777;
    -webkit-transition: color 0.3s ease 0s, padding 0.3s ease 0s;
    transition: color 0.3s ease 0s, padding 0.3s ease 0s;
}
#mainmenu li > ul > li:hover a{
    color: #111;
}
#mainmenu li > ul ul{
    background-color: #fff;
    left: 200px;
}
#mainmenu li > ul li:hover > ul li a{
    color: #777;
}
#mainmenu li ul li:hover > ul{
    top: 0;
    opacity: 1;
    visibility: visible;
}
#mainmenu li > ul li:hover > ul li > a:hover{
    background-color: transparent;
    color: #fff;
}
#mainmenu li ul li li a:hover{
    color: #ffca3f !important;
}
/*Mobile Menu */
.slicknav_menu {
    background: none;
    padding: 4px 0;
    display:none;
    z-index: 999;
}
.slicknav_nav {
    background-color: #fff;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.06);
    box-shadow: 0 0 15px rgba(0,0,0,0.06);
}
.js .slicknav_menu {
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
.slicknav_btn{
    background-color: transparent;
    margin: 17px 5px 16px;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row,
.slicknav_nav a,
.slicknav_nav a:hover{
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.slicknav_nav .slicknav_row,
.slicknav_nav a {
    padding: 10px 15px;
    margin: 0;
    color: #777;
}
.slicknav_nav a .caret{
    display: none;
}
.slicknav_nav ul{
    margin: 0;
}
.slicknav_nav ul li a{
    padding-left: 30px;
    font-size: 12px;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover{
    background-color: transparent;
    color: #333;
}

/* ==========================================================================
   3.0 Hero Section
   ========================================================================== */
.hero-section{
    width: 100%;
    padding: 150px 0;
}
.hero-content h1{
    margin: 0;
}

/* ==========================================================================
   4.0 Portfolio Section
   ========================================================================== */
.portfolio-section{
    display: block;
    padding-top: 40px;
}
.inner-page{
    margin-top: 0;
}
.portfolio-wrapper{}
.portfolio-box{
    position: relative;
    overflow: hidden;
}
.portfolio-box img{
    width: 100%;
}
.portfolio-box:hover .portfolio-inner{
    visibility: visible;
    opacity: 1;
}
.portfolio-box:hover img{
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}
.portfolio-inner{
    background-color: rgba(255,255,255,0.8);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}
.portfolio-content h3{
    margin-bottom: 5px;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    transition-delay: 0.3s;
    visibility: hidden;
    opacity: 0;
}
.portfolio-content h3 a{
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-bottom: 0;
}
.portfolio-content span{
    display: block;
    transform: translateY(10px);
    transition: all 0.3s ease-in-out;
    transition-delay: 0.3s;
    visibility: hidden;
    opacity: 0;
}
.portfolio-box:hover .portfolio-content h3,
.portfolio-box:hover .portfolio-content span{
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}
/*Portfolio Filter*/
.portfolio-filter{
    width: 100%;
}
.portfolio-filter li{
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 8px;
    cursor: pointer;
}
.portfolio-filter li.active{
    color: #111;
}



/*Portfolio Single Page 1*/
.portfolio-single{
    background-image: url(../img/portfolio-4.21.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.portfolio-single .page-content h1{
    padding: 100px 0;
    display: block;

}
.portfolio-single .page-content h1 span{
    display: block;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}
.portfolio-single .single-content .single-details h2{
    margin-bottom: 20px;
}
.single-content .share-wrap{
    margin-bottom: 0;
}
.single-carousel .single-item:hover{
    cursor: ew-resize;
}

#mobilityapp{
    padding-top: 2%;
    width: 100%;
    height: 40%;

}

#image-style{
    padding-top: 2%;
    width: 100%;
    height: 40%;
     filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));

}

/*Portfolio Single Page 2*/
.portfolio-single2{
    background-image: url(../img/cebanner.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.portfolio-single2 .page-content h1{
    padding: 100px 0;
    display: block;
}
.portfolio-single2 .page-content h1 span{
    display: block;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}
.portfolio-single2 .single-content .single-details h2{
    margin-bottom: 20px;
}

/*Portfolio Single Page 3*/
.portfolio-single3{
    background-image: url(../img/portfolio-4.3.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.portfolio-single3 .page-content h1{
    padding: 100px 0;
    display: block;
}
.portfolio-single3 .page-content h1 span{
    display: block;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}
.portfolio-single3 .single-content .single-details h2{
    margin-bottom: 20px;
}

/*Portfolio Single Page 4*/
.portfolio-single4{
    background-image: url(../img/RiskM.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.portfolio-single4 .page-content h1{
    padding: 100px 0;
    display: block;
}
.portfolio-single4 .page-content h1 span{
    display: block;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}
.portfolio-single4 .single-content .single-details h2{
    margin-bottom: 20px;
}

/*Portfolio Single Page 5*/
.portfolio-single5{
    background-image: url(../img/jokerpurple.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.portfolio-single5 .page-content h1{
    padding: 100px 0;
    display: block;
}
.portfolio-single5 .page-content h1 span{
    display: block;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}
.portfolio-single5 .single-content .single-details h2{
    margin-bottom: 20px;
}

/*Portfolio Single Page 6*/
.portfolio-single6{
    background-image: url(../img/metricsplash.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.portfolio-single6 .page-content h1{
    padding: 100px 0;
    display: block;
}
.portfolio-single6 .page-content h1 span{
    display: block;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}
.portfolio-single6 .single-content .single-details h2{
    margin-bottom: 20px;
}

/*Portfolio Single Page 7*/
.portfolio-single7{
    background-image: url(../img/art1splash.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.portfolio-single7 .page-content h1{
    padding: 100px 0;
    display: block;
}
.portfolio-single7 .page-content h1 span{
    display: block;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}
.portfolio-single7 .single-content .single-details h2{
    margin-bottom: 20px;
}

/*Portfolio Single Page 8*/
.portfolio-single8{
    background-image: url(../img/art_2splash.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.portfolio-single8 .page-content h1{
    padding: 100px 0;
    display: block;
}
.portfolio-single8 .page-content h1 span{
    display: block;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}
.portfolio-single8 .single-content .single-details h2{
    margin-bottom: 20px;
}

/*Portfolio Single Page 9*/
.portfolio-single9{
    background-image: url(../img/art_3splash.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.portfolio-single9 .page-content h1{
    padding: 100px 0;
    display: block;
}
.portfolio-single9 .page-content h1 span{
    display: block;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}
.portfolio-single9 .single-content .single-details h2{
    margin-bottom: 20px;
}

/*Portfolio Single Page 10*/
.portfolio-single10{
    background-image: url(../img/elmsplash.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.portfolio-single10 .page-content h1{
    padding: 100px 0;
    display: block;
}
.portfolio-single10 .page-content h1 span{
    display: block;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}
.portfolio-single10 .single-content .single-details h2{
    margin-bottom: 20px;
}

/*Portfolio Single Page 11*/
.portfolio-single11{
    background-image: url(../img/dougsplash.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.portfolio-single11 .page-content h1{
    padding: 100px 0;
    display: block;
}
.portfolio-single11 .page-content h1 span{
    display: block;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}
.portfolio-single11 .single-content .single-details h2{
    margin-bottom: 20px;
}

/*Portfolio Single Page 12*/
.portfolio-single12{
    background-image: url('../img/meta.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.portfolio-single12 .page-content h1{
    padding: 100px 0;
    display: block;
}
.portfolio-single12 .page-content h1 span{
    display: block;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}
.portfolio-single12 .single-content .single-details h2{
    margin-bottom: 20px;
}

/* YOUTUBE VIDEOS*/

.youtube-video {
  aspect-ratio: 1.775 / 1;
  width: 100%;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
}

.youtube-video-small {
  aspect-ratio: 1.6 / 1;
  width: 100%;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
}

.youtube-video-figma {
  aspect-ratio: 1.658 / 1;
  width: 100%;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
}



/* ==========================================================================
   5.0 Service Section
   ========================================================================== */
.service-section{}
.service-content{}
.service-content i{
    background-color: #000;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    color: #fff;
    font-size: 30px;
    margin-bottom: 15px;
}
/* ==========================================================================
   6.0 Testimonial Section
   ========================================================================== */
.testimonial-section{
    padding: 120px 0;
}
.testi-item{}
.testi-item i{
    color: #111;
    font-size: 30px;
    margin-bottom: 15px;
}
.testi-item h4{
    color: #222;
    display: block;
    font-size: 18px;
    font-weight: 600;
}
.testi-item h4 span{
    font-family: "Open Sans",sans-serif;
    display: block;
    font-size: 14px;
    color: #777;
    font-weight: 400;
}

/*Dots*/
.testimonial-carousel .owl-dots{
    display: block;
    text-align: center;
    margin-top: 20px;
}
.testimonial-carousel .owl-dots .owl-dot{
    background-color: #bbb;
    display: inline-block;
    width: 10px;
    height: 10px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    margin: 0 3px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    transition: all 0.5s ease-in-out;
}
.testimonial-carousel .owl-dots .owl-dot.active{
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: all 0.5s ease-in-out;
    background-color: #111;
    transition: all 0.5s ease-in-out;
}
/* ==========================================================================
   7.0 Team Section
   ========================================================================== */
.team-section{}
.team-wrap{}
.team-box{
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.team-box:hover img{
    opacity: 0.8;
}
.team-box img{
    width: 100%;
}
.team-content{
    background-color: #f2f2f2;
    padding: 20px 0;
    border: 1px solid #eaeaea;

}
.team-content h3{
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}
.team-content h3 span{
    display: block;
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    color: #777;
    font-weight: 400;
}
/* ==========================================================================
   8.0 Call To Action Section
   ========================================================================== */
.cta-section{
    padding: 120px 0;
}
.cta-content{}
.cta-content h2{
    font-size: 32px;
    margin-bottom: 30px;
}
/* ==========================================================================
   9.0 About Section
   ========================================================================== */
.about-section{}
.about-wrap{
    display: flex;
    align-items: center;
}
.about-wrap img{
    width: 100%;
}

.about-content{}
.about-content h2{
    font-size: 28px;
    margin-bottom: 20px;
}
.about-content p{
    margin-bottom: 30px;
}

/* ==========================================================================
   10.0 Page Header Section
   ========================================================================== */
.page-header{
    padding: 150px 0;
}
.page-header .meta-info{
    margin-top: 30px;
}
.page-header .meta-info a{
    font-size: 16;
    color: #222;
    font-weight: 600;
}
.page-header .meta-info a:hover{
    opacity: 0.8;
}
.page-header .meta-info span{
    margin: 10px;
}

/* ==========================================================================
   11.0 Contact Section
   ========================================================================== */
.contact-section{
    position: relative;
    z-index: 1;
}
.contact-wrap{
    background-color: #f2f2f2;
    padding: 50px;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.15);
    margin-top: 110px;
    border-radius: 2px;
}
.mfp-wrap{
    opacity: 0;
    transition: 0.3s all ease;
}
.mfp-wrap.fade-in{
    opacity: 1;
}
.contact-info ul li{
    line-height: 40px;
    display: flex;
    align-items: center;
}
.contact-info ul li i{
    margin-right: 10px;
    color: #999;
}
.contact-info ul li{
    font-family: "Open Sans",sans-serif;
    font-weight: 600;
}
/*Contact Form*/
.contact-form .form-control{
    border: 1px solid #ddd;
    border-radius: 0;
    height: 45px;
    background-color: transparent;
}
.contact-form .form-control.message{
    height: 150px;
}
#form-messages{
    display: none;
}
#form-messages.alert-danger,
#form-messages.alert-success{
    display: block;
}
/*Google Map*/
#google_map{
    width: 100%;
    height: 350px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.mfp-content label{
    display: none;
}

.contact-wrap h4{
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
}

.contact-wrap p{
    font-size: 13px;
}

.password-field{
    margin-top: 15px;
    margin-bottom: 15px;
}

.default-btn{
    cursor: pointer;
}

input{
    border: 1px solid rgba(136, 136, 136, 0.5);
    border-radius: 2px;
    color: #888;
    padding: 5px 10px;
    width: 100%;
}

input:focus{
    border-color: rgba(136, 136, 136, 1);
}

#errMsg{
    font-size: 12px;
    color: red;
    padding: 0;
}

/* ==========================================================================
   11.5 Blog Section
   ========================================================================== */

   .contact-wrap{
        margin-top: 0;
   }

   .mfp-content{
        padding-left: 100px;
        padding-right: 100px;
        max-width: 768px;
   }

   .contact-wrap{
        padding-left: 50px;
        padding-right: 50px;
   }

/* ==========================================================================
   12.0 Blog Section
   ========================================================================== */
.blog-section{}
.left-sidebar .blog-items{
    border-right: none;
    border-left: 1px solid #ddd;
    padding-right: 0;
    padding-left: 10px;
}
.blog-post{}
.blog-post img{
    width: 100%;
    margin-bottom: 10px;
}
.blog-post img:hover{
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.20);
}
.blog-post .blog-content h3{
    font-weight: 700;
    font-size: 18px;
}
.blog-post .blog-content a{
    color: #333;
}
.blog-post .blog-content a:hover{
    opacity: 0.8;
}
span.date{
    font-family: "Open Sans",sans-serif;
    color: #999;
    font-weight: 700;
    font-size: 10px;
    display: block;
    margin-bottom: 5px;
}
.blog-post .blog-content .post-meta{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    letter-spacing: -0.2px
}
.blog-post .blog-content .post-meta:hover{
    opacity: 0.8;
    text-decoration: underline;
}

/*Single Post Style*/
.single-post{}
.single-post img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
    margin-bottom: 20px;
}
.single-post h2{
    font-weight: 800;
}
.single-post .meta-info{
    margin-bottom: 25px;
}
.single-post .meta-info span{
    font-family: "Open Sans",sans-serif;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    font-size: 12px;
    margin-right: 15px;
}
.single-post .meta-info a{
    font-weight: 800;
    color: #777;
}
.single-post .meta-info i{
    color: #777;
}

/*Social Share*/
.share-wrap{
    margin-top: 25px;
    margin-bottom: 50px;
    width: 100%;
}
.share-wrap h4{
    text-transform: uppercase;
    font-weight: 800;
    font-size: 14px;
}
.share-icon{
    display: inline-block;
}
.share-icon li{
    display: inline-block;
    margin-right: 10px;
}
.share-icon i{
    margin-right: 5px;
}
.share-icon li:nth-child(1) a{ background-color: #3B5998; }
.share-icon li:nth-child(2) a{ background-color: #1DCAFF; }
.share-icon li:nth-child(3) a{ background-color: #DB4A39; }
.share-icon li:nth-child(4) a{ background-color: #e4405f; }
.share-icon li:nth-child(5) a{ background-color: #0077B5; }
.share-icon li a{
    display: inline-block;
    font-size: 13px;
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    font-weight: 600;
}
.share-icon li a:hover{
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.20);
}

/*Comments Style*/
.comments-wrapper{
    width: 100%;
}
.comments-wrapper h4{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 800;
}

.comments-list {
	margin-top: 30px;
	position: relative;
    margin-bottom: 50px;

}
/*Lines Details*/
.comments-list:before {
	content: '';
	width: 2px;
	height: 100%;
	background: #eee;
	position: absolute;
	left: 32px;
	top: 0;
}
.comments-list:after {
	content: '';
	position: absolute;
	background: #eee;
	bottom: 0;
	left: 29px;
	width: 7px;
	height: 7px;
	border: 3px solid #dee1e3;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.reply-list:before, .reply-list:after {display: none;}
.reply-list li:before {
	content: '';
	width: 60px;
	height: 2px;
	background: #eee;
	position: absolute;
	top: 25px;
	left: -55px;
}
.comments-list li {
	margin-bottom: 15px;
	display: block;
	position: relative;
}
.comments-list li:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	width: 0;
}
.reply-list {
	padding-left: 88px;
	clear: both;
	margin-top: 15px;
}
/*Avatar*/
.comments-list .comment-avatar {
	width: 65px;
	height: 65px;
	position: relative;
	z-index: 99;
	float: left;
	border: 3px solid #FFF;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	overflow: hidden;
    margin-right: 10px;
}

.comments-list .comment-avatar img {
	width: 100%;
	height: 100%;
}
.reply-list .comment-avatar {
	width: 50px;
	height: 50px;
}
.comment-main-level:after {
	content: '';
	width: 0;
	height: 0;
	display: block;
	clear: both;
}
/*Comment List*/
.comments-list .comment-box {
	width: 870px;
	float: right;
	position: relative;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
	box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.comments-list .comment-box:before, .comments-list .comment-box:after {
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	display: block;
	border-width: 10px 12px 10px 0;
	border-style: solid;
	border-color: transparent #FCFCFC;
	top: 8px;
	left: -11px;
}
.comments-list .comment-box:before {
	border-width: 11px 13px 11px 0;
	border-color: transparent rgba(0,0,0,0.05);
	left: -12px;
}
.reply-list .comment-box {
	width: 800px;
}
.comment-box .comment-head {
	background: #FCFCFC;
	padding: 10px 12px;
	border-bottom: 1px solid #E5E5E5;
	overflow: hidden;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}
.comment-box .comment-head i {
	float: right;
	margin-left: 14px;
	position: relative;
	top: 2px;
	color: #A6A6A6;
	cursor: pointer;
	-webkit-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
}
.comment-box .comment-head i:hover {
	color: #03658c;
}
.comment-box .comment-name {
	color: #283035;
	font-size: 14px;
	font-weight: 700;
	float: left;
	margin-right: 10px;
}
.comment-box .comment-name a {
	color: #283035;
}
.comment-box .comment-head span {
	float: left;
	color: #999;
	font-size: 13px;
	position: relative;
	top: 1px;
}
.comment-box .comment-content {
	background: #FFF;
	padding: 12px;
	font-size: 15px;
	color: #595959;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
}
.comment-box .comment-name.by-author, .comment-box .comment-name.by-author a {color: #03658c;}
.comment-box .comment-name.by-author:after {
	content: 'autor';
	background: #03658c;
	color: #FFF;
	font-size: 12px;
	padding: 3px 5px;
	font-weight: 700;
	margin-left: 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/*Comment Form*/
.comment-form h4{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 800;
}
.comment-form .form-control{
    border: 1px solid #ddd;
    border-radius: 0;
    height: 45px;
    background-color: transparent;
}
.comment-form .form-control.message{
    height: 150px;
}
#form-messages{
    display: none;
}
#form-messages.alert-danger,
#form-messages.alert-success{
    display: block;
}

/* Pagination
=============== */
.pagination_wrap{}
.pagination_wrap li{
    display: inline-block;
    margin: 0 5px;
}
.pagination_wrap li a{
    border: 1px solid #ddd;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    color: #777;
    font-weight: 600;
}
.pagination_wrap li a:hover{
    opacity: 1;
    text-decoration: none;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.20);
}
.pagination_wrap li a.active{
    background-color: #111;
    border: 1px solid #111;
    color: #fff;
}

/* ==========================================================================
   13.0 Footer Section
   ========================================================================== */
.footer-widget-section{
    background-color: #111;
}
.footer-widget{}
.footer-widget h2 {
    font-family: "Open Sans", sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0;
}
.footer-widget .sep{
    width: 60px;
    height: 4px;
    background: #e0e0e0 none repeat;
    margin-top: 15px;
    margin-bottom: 25px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.footer-widget .address{}
.footer-widget .address li{
    display: block;
    line-height: 30px;
    color: #777;
    margin-bottom: 25px;
    padding-left: 50px;
    position: relative;
}
.footer-widget .address li i{
    font-size: 13px;
    color: #888;
    margin-right: 10px;
    width: 30px;
    text-align: center;
    height: 30px;
    line-height: 28px;
    border: 1px solid #888;
    position: absolute;
    left: 0;
    top: 0;
}
.footer-widget .address li a{
    color: #777;
    font-family: "Open Sans", sans-serif;
    letter-spacing: inherit;
}

/*Social Icon*/
.social-icon{
    position: relative;
    display: inline-block;
}
.social-icon li{
    display: inline-block;
    margin-bottom: 25px;
}
.social-icon li:not(:last-of-type){
    margin-right: 10px;
}
.social-icon li a{
    background-color: rgba(255,255,255,0.1);
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 2px;
    text-align: center;
    display: inline-block;
    color: #fff;
    font-size: 14px;
}
.social-icon li a:hover{
    opacity: 0.6;
}
.social-icon li.facebook a{ background-color: #3b5998; }
.social-icon li.twitter a{ background-color: #55acee; }
.social-icon li.instagram a{ background-color: #bd3381; }
.social-icon li.pinterest a{ background-color: #bd081c; }
.social-icon li.dribbble a{ background-color: #ea4c89; }
.social-icon li.linkedin a{ background-color: #0077B5; }
.social-icon li.envelope a{ background-color: #ea4c89; }
.social-icon li.link a{ background-color: #00B4A0; }


/*Copyright Text*/
.copyright-text{
    background-color: #111;
    padding: 25px 0;
    border-top: 1px solid #222;
}
.copyright-text p{
    margin: 0;
}
/* ==========================================================================
   14.0 Scroll To Top
   ========================================================================== */
#scroll-to-top{
    background-color: #111;
    display: none;
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 14px;
    line-height: 45px;
    border-radius: 50%;
    color: #fff;
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 999;
}
#scroll-to-top:hover{
    background-color: #222;
    color: #fff;
}

/* ==========================================================================
   15.0 keyframes
   ========================================================================== */

   @keyframes fade-in {
    from{ opacity: 0; }
    to{ opacity: 1; }
   }

   @-webkit-keyframes fade-in {
     from{ opacity: 0; }
     to{ opacity: 1; }
    }