@media (min-width: 1800px){

    .container {

        width: 1800px;

    }

}



.box-inner {

    padding-top: 33px;

    max-width: 360px;

    background: url('../images/top-templates-showcase.png') no-repeat top left;

    background-size: 100%;

    display: inline-block;

}



.box-inner .image {

    height: 450px;

    overflow: hidden;

    border: 2px solid #E6E6E6;

}



.box-inner .image:hover {

    overflow-y: scroll;

}



h2.heding {

    font-weight: bold;

    font-family: 'Titillium Web', sans-serif;

    margin: 0 auto 15px;

}

@media (min-width: 767px){

    .title-left{

        width: 50%;

    }

}

@media (max-width: 1200px){

    .title-left{

        width: 80%;

    }

}

@media (max-width: 991px){

    .title-left{

        width: 100%;

    }

}

@media (max-width: 767px){

    .title-left{

        text-align: center;

    }

}

p.heding-sub {

    margin-bottom: 40px;

    font-family: 'Titillium Web', sans-serif;

    font-size: 16px;

}



a.button2 {

    text-transform: uppercase;

    display: inline-block;

    font-family: 'Titillium Web';

    font-size: 24px;

    padding: 10px 30px;

    position: relative;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    transition: all 0.4s ease 0s;

    margin-bottom: 20px;

}



sub {

    font-size: 12px;

    top: -18px;

}



.preset .box-inner .image {

    height: 460px;

    overflow: hidden !important;

}



.preset .box-inner .image.home1 {

    height: 474px;

    overflow: hidden !important;

}



.box-inner .image img {

    max-width: 360px;

    width: 360px !important;

}





/* Style css */



.wrapper h6,

.wrapper h5,

.wrapper h4,

.wrapper h2,

.wrapper h1 {

    font-family: 'Titillium Web', sans-serif;

    font-weight: 700;

    text-transform: uppercase;

}



.wrapper {

    color: #121212;

    font-family: 'Titillium Web', sans-serif;

}



.wrapper a {

    text-decoration: none;

    font-size: 14px;

    color: #121212;

}



.wrapper a:hover,

.wrapper a:focus {

    outline: none;

    text-decoration: none;

    -webkit-transition: all .3s ease;

    -moz-transition: all .3s ease;

    -ms-transition: all .3s ease;

    -o-transition: all .3s ease;

    transition: all .3s ease;

    color: #148fc8;

}



.wrapper li {

    list-style: none

}



.wrapper ul {

    padding: 0;

    margin: 0;

}



.wrapper img {

    max-width: 100%;

}



.top-head {

    background: transparent;

    padding: 30px 0;

    position: absolute;

    width: 100%;

}



.main-menu ul {

    padding-top: 16px;

}



.main-menu ul li {

    display: inline-block;

    float: left;

    margin: 0 17.5px

}



.main-menu ul li a {

    text-transform: uppercase;

    font-size: 15px;

    font-weight: 600;

    color: #222 !important;

}



.main-menu,

.top-head .btn-links {

    display: inline-block

}



@media (max-width: 480px){

    .top-head .main-menu{

        display: block

    }

    .top-head .main-menu ul{

        padding-bottom: 35px;

    }

    .top-head .btn-links a{

        margin-top: 0 !important;

    }

}



.top-head .btn-links {

    float: right

}



.top-head .btn-links a {

    height: 50px;

    line-height: 55px;

    padding: 0 25px;

    text-transform: uppercase;

    display: block;

    font-weight: 600;

    font-size: 15px;

    background: transparent;

    color: #222;

}

.main-logo{

	padding-bottom:820px;

    text-align: left;

}

.main-logo img{

    max-height: 60px;

    width: auto;

}

@media (max-width: 991px) {

    .main-logo {

         padding-bottom: 500px;

    }

}

@media (max-width: 767px) {

    .main-logo {

         padding-bottom: 200px;

    }

}

.main-logo p{

    color: #121212;

}

.main-logo h1 {

    margin: 0;

    padding: 100px 0 140px;

}

@media (max-width: 1199px) {

    .main-logo h1 {

        padding-bottom: 160px;

    }

}

@media (max-width: 767px) {

    .main-logo h1 {

        text-align: center;

        padding-bottom: 65px;

    }

}

.main-logo h2 {

    color:#fff;

    margin: 0;

    font-size: 42px;

    font-family: 'Titillium Web', sans-serif;

    padding-bottom: 20px;

    line-height: 52px;

	font-weight:700;

}

@media (max-width: 991px) {

    .main-logo h2 {

        font-size: 35px;

    }

}

@media (max-width: 767px) {

    .main-logo h2 {

        font-size: 30px;

    }

}

.main-logo .subtitle {

    color:#fff;

    font-size: 21px;

    font-family: 'Titillium Web', sans-serif;

    font-weight: 400;

    text-transform: uppercase;

}

@media (max-width: 767px) {

    .main-logo .subtitle{

        font-size: 20px;

    }

}

.main-logo .button a {

    margin-top: -57px;

    float: right;

    padding: 0 36px;

    display: inline-block;

    background: #31b2ee;

    text-transform: uppercase;

    font-weight: 700;

    letter-spacing: 2px;

    font-family: Titillium Web;

    height: 50px;

    line-height: 50px;

	color:#fff;

}

@media (max-width: 767px) {

    .main-logo .button{

        float:unset;

    }

}

.main-logo .button2 a {

    margin-top: 50px;

    padding: 0 26px;

    display: inline-block;

    background: #0d0d0d;

    text-transform: uppercase;

    font-weight: 700;

    height: 50px;

    line-height: 50px;

	color:#fff;

}

.main-logo .button:hover a:hover {

    background:#148fc8;

}

.main-logo .button2:hover a:hover {

    background:#148fc8;

}

.main-logo h1 a {

    display: inline-block;

	max-width:300px;

}

@media (max-width: 767px) {

    .main-logo h1 >a {

        margin-top: 0;

        float: unset!important;

    }

}

.main-logo h1 .button a {

    display: inline-block;

}

@media (max-width: 767px) {

    .main-logo h1 .button >a {

        margin-bottom: 0;

        margin-top: 70px;

        float: unset!important;

    }

}

.main-logo .title-head {

    padding-top: 400px;

    color: #fff;

    font-size: 35px;

    line-height: 35px;

    margin-bottom: 53px;

    text-transform: uppercase;

}



@media (max-width: 991px){

    .main-logo .title-head{

        padding-top: 160px;

    }

}



@media (max-width: 767px){

    .main-logo .title-head{

        font-size: 30px;

        line-height: 35px;

    }

}



.main-logo >p {

    font-size: 20px;

    line-height: 28px

}



.list-home {

    padding-top: 105px;

    position: relative

}



.list-home .col-3 {

    width: 33.33333333%;

}



.list-home .number-home-page {

    position: absolute;

    top: 0px;

    left: calc(100% - 100px);

    min-width: 250px

}



.number-home-page .number {

    display: inline-block;

    float: left;

    font-weight: 700;

    font-size: 100px;

    color: #121212;

    line-height: 100%;

    margin: 0;

    position: relative

}



.number-home-page .number::before {

    content: "";

    position: absolute;

    top: 100%;

    right: 100%;

    width: 58px;

    height: 87px;

    display: block;

    background: url(../images/next-icon.png) no-repeat;

    background-size: 98%

}



.number-home-page .content {

    display: inline-block;

    float: left;

    margin-left: 15px;

    margin-top: 34px

}



.number-home-page .content p {

    font-size: 18px;

    font-weight: 500;

    margin-bottom: 0

}



.number-home-page .content h3 {

    font-size: 24px;

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 0;

    margin-top: 5px

}



.wrapper-img a img,

.wrapper-img-1 {

    -webkit-transition: all .5s ease;

    -moz-transition: all .5s ease;

    -ms-transition: all .5s ease;

    -o-transition: all .5s ease;

    transition: all .5s ease

}



.wrapper-img-1 {

    margin-bottom: 40px;

}



.wrapper-img a{

    display: inline-block;

    width: 100%;

    vertical-align: top;

    position: relative;

}

.wrapper-img a:before{

    position: absolute;

    content: "";

    background: url(../images/next.jpg) no-repeat;

    left: calc(50% - 24px);

    top: calc(50% - 50px);

    height: 48px;

    width: 48px;

    line-height: 50px;

    z-index: 1;

    opacity: 0;

    -webkit-transition: all .2s ease;

    -moz-transition: all .2s ease;

    -ms-transition: all .2s ease;

    -o-transition: all .2s ease;

    transition: all .2s ease;

}

.wrapper-img a:after{

    position: absolute;

    content: "";

    left: 0;

    top: 0;

    background: #121212;

    height: 100%;

    width: 100%;

    z-index: 0;

    opacity: 0;

    -webkit-transition: all .3s ease;

    -moz-transition: all .3s ease;

    -ms-transition: all .3s ease;

    -o-transition: all .3s ease;

    transition: all .3s ease;

}

.wrapper-img:hover a:after,

.wrapper-img-1:hover a:after{

    opacity: 0.3;

}



.wrapper-img:hover a:before,

.wrapper-img-1:hover a:before{

    opacity: 1;

    top: calc(50% - 24px);

}



.wrapper-img div {

    padding: 30px 0;

}



.wrapper-img .font-second {

    font-weight: 700;

    margin-top: 30px;

    margin-bottom: 40px;

    font-size: 18px;

	text-transform:uppercase;

}



.wrapper-img > .font-second {

    display: block;

}



.wrapper-img .font-second:hover {

    color: #121212

}



.btn-link-big a {

    background: #121212;

    padding: 0 30px;

    color: #fff;

    text-transform: uppercase;

    display: inline-block;

    font-weight: 600;

    line-height: 54px;

    font-size: 18px

}



.btn-link-big a:hover {

    background: #f0ad39;

}



.section-1{

	padding-bottom : 0px;

}



.section-1:not(.bg) .wrapper-img-1{

    border: 1px solid #ebebeb;

    box-shadow: 0 0 8px 1px rgba(144, 144, 144, 0.2);

}



.section-1.bg{

    background: #f5f5f5;

}



.section-1 .container-inner {

    padding: 60px 0;

    border-top: 1px solid #dedede;

    border-bottom: 1px solid #dedede;

}



.section-1 .title-section {

    font-size: 40px;

    line-height: 50px;

    margin-top: 20px;

    margin-bottom: 70px;

}



@media (max-width: 767px){

    .section-1 .title-section{

        font-size: 25px;

        margin-bottom: 30px;

    }

}



.col-5 {

    width: 20%

}



.section-2 {

    padding-bottom: 60px;

}



.section-2 .text-head {

    text-transform: uppercase;

    color: #666666;

    margin-bottom: 0;

}



.section-2 .title-section {

    font-size: 50px;

    font-weight: 700;

    color: #000;

    line-height: 56px;

    text-transform: uppercase;

    margin-top: 20px;

    margin-bottom: 70px;

}



#blog-page,

#header-style {

    background: #f5e0c3;

}

#header-page .content-head{

    background: url(../images/bg-header.jpg) no-repeat center top;

    padding-bottom: 65px;

    padding: 0 45px;

}



#header-page .content-head .container-title{

		width: 1200px;

		margin:auto;

		padding:0 15px;

}	

@media (min-width: 1201px)  and (max-width: 1300px){

    #header-page .content-head{

        background: url(../images/bg-header.jpg) no-repeat 49% bottom;

    }

}

@media (max-width: 991px) {

    #header-page .content-head {

        padding: 0;

    }

}



.wrapper-section2 {

    background: #fff;

    border: 1px solid #ebebeb;

    padding: 35px 15px;

    margin-bottom: 21px;

    box-shadow: 0 0 10px 1px rgba(220, 220, 220, 0.4);

	min-height : 265px;

}



.wrapper-section2 .content h3 {

    margin-top: 28px;

    margin-bottom: 23px;

    font-size: 14px;

    font-weight: 700;

    color: #1b1b1b;

    text-transform: uppercase;

}



.wrapper-section2 .content p {

    color: #666666;

    font-family: Titillium Web;

}



.section-3 {

    padding-bottom: 110px;

    padding-top: 110px;

}



.list-img-head li {

    margin-bottom: 15px;

}



.list-img-head li:last-child {

    margin-bottom: 0;

}



.section-3 .title-section {

    margin: 0;

}



.section-4 {

    background: url(../images/bg-sc4.png) no-repeat center;

    background-size: cover;

    padding-top: 155px;

    padding-bottom: 207px

}



.section-4 .title-section {

    font-size: 52px;

    color: #fff;

    line-height: 56px;

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 15px;

    margin-top: 0;

}



.text-section4 {

    color: #666666;

    text-transform: uppercase;

    margin-bottom: 100px;

}



.section-4 .img-section img {

    width: 100%;

}



.section-4 .img-section {

    border: 3px solid #393939;

    padding: 12px;

}



.section-4 .icon-list {

    padding-left: 45px;

}



.icon-list li {

    margin-bottom: 20px;

    color: #fff;

}



.icon-list li img {

    border: 3px solid #393939;

    padding: 8px

}



.icon-list li span {

    margin-left: 26px;

}



.icon-list li:last-child {

    margin-bottom: 0;

}



.section-5 {

    padding: 120px 0 130px;

}



.box-5.left h2 {

    margin: 0;

    font-size: 52px;

    font-weight: 700;

    color: #1b1b1b;

    margin-bottom: 15px

}



.box-5.left >p {

    color: #666666;

    margin-bottom: 0;

}



.box-5 .content {

    padding-left: 107px;

    padding-top: 10px;

    padding-bottom: 10px;

}



.box-5 .content .title-section {

    margin: 0;

    font-size: 18px;

    font-weight: 700;

    color: #1b1b1b;

    position: relative;

    padding-bottom: 12px;

    margin-bottom: 12px;

}



.box-5 .content .title-section::before {

    content: "";

    position: absolute;

    top: 100%;

    left: 0;

    width: 40px;

    height: 1px;

    background: #1b1b1b;

}



.box-5 .content p a {

    color: #008bbf;

}



.box-5 .content p a:hover {

    color: #121212;

}



.box-5 .content p {

    color: #1c1c1c;

    margin-bottom: 0

}



.box-5.bg-1 .content {

    background: url(../images/icon-4.png) no-repeat left;

    background-size: 84px;

}



.box-5.bg-2 .content {

    background: url(../images/icon-5.png) no-repeat left;

    background-size: 84px;

}



#footer-page {

    padding-top: 320px;

    padding-bottom: 260px;

    background: url(../images/bg-footer.jpg) no-repeat left bottom;

	margin-top:100px;

}

.footer-page img {

	max-height:50px;

}

.box-title-footer h2{

	font-size:44px;

    line-height: 65px;

    color: #fff;

    letter-spacing: 5px;

	margin-bottom:20px !important;

	font-weight:700;

    max-width: 1120px;

    margin: 0 auto;

    text-transform: capitalize;

    text-shadow: 0 0 7px #071888;

}

.box-title-footer h3{

	font-size:34px;

	margin:0 0 10px;

	font-weight:400;

	letter-spacing:6px;

}

.footer-page .title-footer {

    margin-top: 170px;

    font-weight: 700;

}



.footer-page .btn-link-ft a {

    display: inline-block;

    height: 50px;

    line-height: 50px;

    padding: 0 40px;

    background: #31b2ee;

    text-transform: uppercase;

    font-weight: 700;

    font-size: 15px;

    border-left-width: 2px;

    margin-bottom: 60px;

    margin-top: 30px;

    color: #fff;

    font-family: Titillium Web, sans-serif;

}



.footer-page .btn-link-ft a:hover {

    background: #148fc8;

    color: #fff;

}



.copyright {

    color: #4a5560;

    font-family: Titillium Web, sans-serif;

}



.copyright a {

    color: #e7b053;

}



.copyright a:hover {

    color: #121212

}



@media (max-width: 768px) {

    .logos.sticky {

        display: none;

    }

}



.logos.sticky {

    background-color: #148fc8;

    top: 0px;

    width: 100%;

    position: fixed;

    left: 0;

    -webkit-transition: all 0.4s linear;

    -moz-transition: all 0.4s linear;

    -o-transition: all 0.4s linear;

    transition: all 0.4s linear;

    z-index: 100000;

    box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.1);

}

.logos.sticky a:hover{

	color:#fff!important;

}



ul.list-img-head {

    list-style: none;

}



.image-bg {

    position: relative;

}



.comming-soon{

	position : relative;

    padding: 0 !important;

}

.comming-soon:after{

	content : "";

	background : rgba(0,0,0,0.4);

	position : absolute;

	top : 0;

	left : 0;

	right : 0;

	bottom : 0;

	z-index : 1;

}

.hot,.new {

    top: 15px;

    right : 30px;

    z-index: 9 ;

    text-align: center ;

    color: #fff;

    background: #148fc8;

    font-size: 12px;

    width: 50px;

    height: 50px;

    text-transform: uppercase;

    position: absolute;

    font-weight: 700;

	border-radius : 50%;

	padding : 0px!important;

	line-height : 50px;

}



.new{

	background : #105caa;	

}

#features{
    padding: 60px 0 0;
  }
  #features .site-section__header {
    text-align: center;
  }
  #features .site-section__header .primary-heading{
    font-size: 25px;
    line-height: 1.2;
  }
  #features .site-section__header .description {
    color: #000;
    font-size: 16px;
    margin-top: 15px;
  }
  #features .features-table {
    background: #fff;
    box-shadow: 0 20px 100px rgb(0 0 0 / 9%);
    margin-top: 80px;
    position: relative;
  }
  #features .features-table table {
    border-collapse: collapse;
    width: 100%;
  }
  #features td, #features th {
    border-right: 1px solid #ececec;
    padding: 10px 10px 16px;
    text-align: center;
    width: 25%;
    color: #000;
    font-size: 14px;
  }
  #features td:last-child, #features th:last-child {
    border-right: none;
  }
  #features .features-table table thead th {
    color: #fff;
    background: #31b2ee;
    font-size: 15px;
    padding: 23px 10px;
    text-transform: uppercase;
  }
  #features .features-table table thead th:last-child {
    border-right: none;
  }
  #features td:first-child, #features tfoot th:first-child {
    text-align: left;
    padding-left: 35px;
  }
  #features tr:nth-child(2n) td {
    background: #f6f6f6;
  }
  #features td span {
    display: inline-block;
    background: red;
    border-radius: 10px;
    padding: 0 10px 2px;
    line-height: 18px;
    font-size: 13px;
    color: #fff;
    margin-left: 10px;
  }
  #features tfoot th {
    height: 145px;
    font-weight: 700;
    padding: 20px 40px;
    font-size: 18px;
    line-height: 1.4;
  }
  #features tfoot .total {
    background: #009045;
    color: #fff;
    display: inline-block;
    padding: 16px 20px;
    width: 100%;
  }
  #features tfoot .total:hover {
    background: #000;
  }
  #features .features-table__footer-mb {
    display: none;
  }
  
  /*------------------- Popup Password -----------------*/
  .overlay-password{
    background-color: rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    overflow: hidden;
    position: fixed;
    display: none;
  }
  .overlay-password.active{
    display: block;
  }
  .popup-password{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    max-width: 767px;
    width: calc(100% - 30px);
    background: #f4f1e7;
    border-radius: 3px;
    display: none;
  }
  .popup-password.active{
    display: block;
  }
  .popup-password .content-popup{
    position: relative;
  }
  .popup-password .content-popup .close-popup{
    height: 30px;
    width: 30px;
    position: absolute;
    top: 25px;
    transform: translateY(-50%);
    right: 20px;
    box-sizing: border-box;
    line-height: 30px;
    display: inline-block;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0px 1px 12px 2px rgba(0, 0, 0, 0.05);
  }
  .popup-password .content-popup .close-popup:before{
    transform: rotate(-45deg);
    content: '';
    position: absolute;
    top: 50%;
    left: calc(50% - 7px);
    display: block;
    height: 1px;
    width: 13px;
    background-color: #000;
    transition: all .3s ease-out;
  }
  .popup-password .content-popup .close-popup:after{
    transform: rotate(-135deg);
    content: '';
    position: absolute;
    top: 50%;
    left: calc(50% - 7px);
    display: block;
    height: 1px;
    width: 13px;
    background-color: #000;
    transition: all .3s ease-out;
  }
  .popup-password .content-popup .close-popup:hover:before{
    transform: rotate(0);
  }
  .popup-password .content-popup .close-popup:hover:after{
    transform: rotate(0);
  }
  .popup-password .content-popup{
    display: flex;
    align-items: center;
    padding: 25px 25px 0;
  }
  .popup-password .content-popup .img{
      max-width:235px;
  }
  .popup-password .content-popup .img img{
        aspect-ratio: 235/278;
        object-fit: cover;
        object-position: center;
        max-width: 100%;
        height: auto;
  }
  .popup-password .content-popup .info{
    margin-left: 45px;
    padding-bottom: 20px;
  }
  .popup-password .content-popup .info svg{
    margin-bottom: 15px;
  }
  .popup-password .content-popup .info h2{
    font-size: 25px;
    margin-bottom: 20px;
  }
  .popup-password .content-popup .info h2 span{
    background: #f5f233;
    border: 1px solid #000;
    border-radius: 34px;
    padding: 0 20px;
    line-height: 32px;
    display: inline-block;
  }
  .popup-password .content-popup .info .btn-default{
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #000 !important;
    border: 1px solid #000;
    padding: 0 30px;
    border-radius: 0;
    line-height: 40px;
    text-transform: uppercase;
  }
  .popup-password .content-popup .info .btn-default.active{
      -webkit-animation-name: text-transform;
      animation-name: text-transform;
      -webkit-animation-duration: 1.5s;
      animation-duration: 1.5s;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
  }
  .popup-password .content-popup .info .btn-default:hover{
    background: #31b2ee;
    color: #fff !important;
    border-color: #31b2ee;
  }

@media (max-width: 767px){
    .popup-password .content-popup .img{
		display:none;
	}
	.popup-password .content-popup{
		padding:25px;
	}
	.popup-password .content-popup .info{
		margin:0;
	}
	.popup-password .content-popup .info h2{
		font-size: 18px;
		line-height: 30px;
	}
	.popup-password .content-popup .info h2 span{
		padding: 0 10px;
		line-height: 23px;
	}
    #footer-page {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}