/*
Theme Name:    Sunpreet Singh Kalsi
Theme URI:     http://presstechit-institute.com/
Author:        Presstech IT Institute
Author URI:    http://presstechit-institute.com/
Description:   Video Game Programming at Institut Superieur d'Informatique | Actively Seeking Game Developer job Opportunities.
Version:       1.0.0
License:       GNU General Public License v2 or later
License URI:   http://www.gnu.org/licenses/gpl-2.0.html
Tags: Digital Media Creative, Digital, Media Creative, IT-Design, IT- Gymnsaiet, Örebro, First Learner.
Text Domain: pmprosanto
*/
.vc_row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.about-items {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr [2];
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px;
}
.about-items p{
  margin: 0px;
}
.hireme-btn {
  margin-top: 25px;
}
.mccan.page .vc_column-inner{
  padding: 0px!important;
}

/*================================= .PROGRESS BAR CSS ===================================*/
.choose-content {
 padding: 50px 30px;
 border-radius: 30px;
 box-shadow: #101010 2px 2px 6px, #3e3b3b -2px -2px 6px;
 margin: 30px 0px;
 -webkit-transition: all .5s ease-out 0s;
 -moz-transition: all .5s ease-out 0s;
 -ms-transition: all .5s ease-out 0s;
 -o-transition: all .5s ease-out 0s;
 transition: all .5s ease-out 0s;
}
.choose-chart-block h2 {
 padding-bottom: 40px;
}
.choose-content h2 {
 padding-bottom: 40px;
 color: #ffffff;
}
.progress-levels .progress-box {
 position: relative;
 overflow: hidden;
 margin-bottom: 10px;
 padding-top: 4px;
 padding-bottom: 15px;
}
.choose-text h6 {
  padding-bottom: 0px;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}
.choose-text p {
  padding-bottom: 5px;
  color: #888;
  margin: 0;
}
.progress-levels .progress-box:last-child{
 margin-bottom:0px;
}
.progress-levels .progress-box .bar{
 position:relative;
 height:12px;
}
.progress-levels .progress-box .box-title{
 position: relative;
 font-size: 14px;
 color: #ffffff;
 font-weight: 600;
 margin-bottom:6px;
 text-transform:uppercase;
}
.progress-levels .progress-box .bar .bar-innner {
 position: relative;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 10px;
 background-color: #f5f5f5;
}
.progress-levels .progress-box .bar .bar-fill {
 position: absolute;
 left: -100%;
 top: 0px;
 width: 0px;
 height: 10px;
 background: #F68338;
 -moz-transition: all 2000ms ease 300ms;
 -webkit-transition: all 2000ms ease 300ms;
 -ms-transition: all 2000ms ease 300ms;
 -o-transition: all 2000ms ease 300ms;
 transition: all 2000ms ease 300ms;
}
.progress-levels .progress-box .bar .bar-fill .number {
  position: absolute;
  right: -2px;
  top: -14px;
  color: #fff;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  background-color: #F68338;
  border-radius: 50%;
  font-weight: 600;
  font-size: 12px;
}
.progress-levels .progress-box.animated .bar .bar-fill{
 left:0px;
}
.progress-levels .progress-box.animated .percent{
 opacity:1;
}
/*================================= .COUNTER UP CSS ===================================*/
.counterup-area {
 padding: 50px 0;
}
.funfacts-content {
 box-shadow: #101010 2px 2px 6px, #3e3b3b -2px -2px 6px;
 padding: 60px 20px;
 border-radius: 30px;
}
.funfact {
  border: 2px dashed #F68338;
  border-radius: 5px;
  text-align: center;
  box-shadow: #101010 2px 2px 6px, #3e3b3b -2px -2px 6px;
  padding: 20px 10px;
  margin-right: 15px;
}
.funfact-icon {
 margin-right: 15px;
 font-size: 50px;
 color: #F68338;
 margin-top: 2px;
}
.promo-content h2 {
 font-weight: 700;
 text-transform: capitalize;
 z-index: 1;
 color: #ffffff;
}
.promo-content h2 span {
 position: relative;
 color: #F68338;
 font-size: 60px;
 z-index: 1;
}
.promo-content h2 span::before {
 position: absolute;
 content: "";
 border: 5px solid #333333;
 height: 84px;
 width: 88px;
 left: -5px;
 z-index: -1;
 top: 0px;
}
.funfact-content .odometer {
 color: #ffffff;
 margin-bottom: 5px;
 font-weight: 700;
 font-size: 36px;
 line-height: 46px;
}
.funfact-content h5 {
 color: #ffffff;
}




/*
==========================
    SERVICE AREA CSS
==========================
*/


.single-service {
  text-align: center;
  padding: 30px 25px;
  transition: all .3s;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #191919;
  margin: 15px 0px;
}

.circles-wrap {
  position: absolute;
  bottom  : -32%;
  left    : -5%;
  z-index : -1;
}

span.circle {
  border-radius: 50%;
  position     : absolute;
  -webkit-transform    : scale(0);
  -ms-transform    : scale(0);
  transform    : scale(0);
  -webkit-transition   : all .3s;
  -o-transition   : all .3s;
  transition   : all .3s;
}
.circles {
  height         : 400px;
  width          : 400px;
  background     : transparent;
  display        : flex;
  position       : relative;
  align-items    : center;
  justify-content: center;
  z-index        : 1;
}

span.circle.circle-1 {
  height    : 100px;
  width     : 100px;
  background: #5fdb97;
  z-index   : 5;
  display   : inline-block;
  z-index   : 5;
}


span.circle.circle-2 {
  height    : 200px;
  width     : 200px;
  background: #4dd78b;
  z-index   : 4;
}

span.circle.circle-3 {
  height    : 300px;
  width     : 300px;
  background: #39d27e;
  z-index   : 3;
}

span.circle.circle-4 {
  height    : 400px;
  width     : 400px;
  background: #22cd6f;
  z-index   : 2;
}



.single-service:hover span.circle, 
.single-service.active span.circle{
  transform : scale(1);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}


.service-area .circles-wrap {
  position: absolute;
  bottom  : -32%;
  left    : auto;
  z-index : -1;
  right   : -50%;
}


.service-text h4 {
  font-size: 24px;
  text-transform: uppercase;
  color: #22cd6f;
  margin-bottom: 30px;
}

.service-text {
  margin: 30px 0 30px 0px;
}

.service-area .service-text {
  margin: 30px 0 0px 0px;
}


.service-text p {
  color         : #999999;
  text-transform: capitalize;
  font-size     : 18px;
  font-weight   : 400;
  margin-bottom: 0;
}


.service-icon {
  width: 90px;
  margin: 0 auto;
  height: 90px;
}
.service-icon img {
  max-width: 100%;
  height: 100%;
}
.single-service.active, 
.single-service:hover {
  background: #131617;
  -webkit-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s;
}

.single-service.active .service-text h4,
.single-service.active .service-text h3,  
.single-service:hover .service-text h3,
.single-service.active .service-text h5,
.single-service:hover .service-text h5, 
.single-service:hover .service-text h4,  
.single-service.active .service-text p, 
.single-service:hover .service-text p  {
  color     : #fff;
  -webkit-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s;
}

.single-service.active .cbtn.pricing-btn, 
.single-service:hover .cbtn.pricing-btn{
  background: #06a950;
  -webkit-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s;
}
.single-service.active .cbtn.pricing-btn i, 
.single-service:hover .cbtn.pricing-btn i{
  color     : #06a950;
  -webkit-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s;
}

.single-service.active .separator, 
.single-service:hover .separator{
  border-color: #fff;
}

.service-area.service-primery {
  background: #fff;
}


.service-primery .single-service{
  background: #fff;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
}

.service-primery .single-service.active, 
.service-primery .single-service:hover {
  background: #131617;
  -webkit-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s;
}



.service-primery .service-text {
  margin: 40px 0 0 0px;
}

.service-primery {
  position: relative;
  z-index: 2;
}


.pricing2 {
  background: #FAFAFA;
}

.pricing2 .service-text h3, 
.pricing2 .service-text h4{
  color: #32383A ;
}
.features-pricinng ul {
  margin-bottom: 30px;
}
.features-pricinng ul li {
  list-style: none;
  color: #666;
  font-size: 16px;
}









.mccan-blog-navigation ul span {
  line-height: 30px;
  font-size: 18px;
}




/*================================
    [ OPACITY BACKGROUND ] 
    ==================================**/
    [data-overlay], [data-black-overlay] {
      position: relative;
    }
    [data-overlay] > div, [data-overlay] > *, [data-black-overlay] > div, [data-black-overlay] > * {
      position: relative;
      z-index: 2;
    }
    [data-overlay]::before, [data-black-overlay]::before {
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;
    }
    [data-overlay]::before {
     background-color: #084D68;
   }
   [data-black-overlay]::before {
    background-color: #000000;
  }
  [data-overlay="1"]::before, [data-black-overlay="1"]::before {
    opacity: 0.1;
  }
  [data-overlay="2"]::before, [data-black-overlay="2"]::before {
    opacity: 0.2;
  }
  [data-overlay="3"]::before, [data-black-overlay="3"]::before {
    opacity: 0.3;
  }
  [data-overlay="4"]::before, [data-black-overlay="4"]::before {
    opacity: 0.4;
  }
  [data-overlay="5"]::before, [data-black-overlay="5"]::before {
    opacity: 0.5;
  }
  [data-overlay="6"]::before, [data-black-overlay="6"]::before {
    opacity: 0.6;
  }
  [data-overlay="7"]::before, [data-black-overlay="7"]::before {
    opacity: 0.7;
  }
  [data-overlay="8"]::before, [data-black-overlay="8"]::before {
    opacity: 0.8;
  }
  [data-overlay="9"]::before, [data-black-overlay="9"]::before {
    opacity: 0.9;
  }
  [data-overlay="10"]::before, [data-black-overlay="10"]::before {
    opacity: 1;
  }
.content p {
    font-size: 18px;
  }


/* ---- Start of max-width 767px CSS ---- */
@media all and (max-width: 5920px) {
  body.page-template-page-blog .hero-media {
    display: none;
  }
  body.page-template-page-blog #social-profiles {
    display: none;
  }
  body.page-template-page-blog .my-info {
    display: none;
  }
  body.page-template-page-blog .content-wrap {
    width: 100% !important;
   
  }

  body.single.single-post .hero-media {
    display: none;
  }
  body.single.single-post #social-profiles {
    display: none;
  }
  body.single.single-post .my-info {
    display: none;
  }
  body.single.single-post .content-wrap {
    width: 100% !important;
   
  } body.page-template-page-blog .hero-media {
    display: none;
  }
  body.page-template-page-blog #social-profiles {
    display: none;
  }
  body.page-template-page-blog .my-info {
    display: none;
  }
  body.page-template-page-blog .content-wrap {
    width: 100% !important;
   
  }


  body.page-template-page-blog #site-menu {
    width: 35%!important;
  }
  body.single.single-post #site-menu {
    width: 35%!important;
    display: none;
  }
  
  body.page-template-page-blog .nav-menu a {
    padding: 5px 5px;
  }

  body.single.single-post .nav-menu a {
    padding: 5px 5px;
  }


}