body{
    font-family: 'Raleway', sans-serif;
}
.top-bg{
    width: 100%;
    height: 750px;
    background-color: #999;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding: .7rem 1.3rem;
    border-radius: 4px;
    text-align: center;
    color:#6e6e6e;
    font-weight: bold;
}
.navbar-expand-lg .navbar-nav .nav-link:hover {
    background-color: #00a99d;
    color:#fff;
}
.navbar{
    padding: 1rem;
    border-bottom: 3px solid #dedede;
}

/* What we Offer */
.offer{
    float: left;
    width: 100%;
    padding: 2rem 0;
}
.top-title{
    font-size: 26px;
    font-weight: bolder;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}
.under-title{
    color: #8a8a8a;
    text-align: center;
}
.offer-round{
    width: 100px;
    height: 100px;
    text-align: center;
    background-color: #383838;
    border-radius: 100%;
    margin: 1.5rem auto;
}
.offer-round:hover{
    background-color: #00a99d;
    cursor: pointer;
}
.item{
    padding: 2rem 0;
    text-align: center;
}
.offer-round span{
    color: #e4e4e4;
    line-height: 3.2;
}
.item .title{
    color: #606060;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bolder;
    
}
.item .paragraph{
    color: #606060;
    font-size: 14px;    
}
.btn-readmore{
    border: 1px solid #e2e2e2;
    color: #a4a4a4;
    font-size: 10px;
    padding: 9px 18px;
    text-transform: uppercase;
}
.btn-readmore:hover{
    border: 1px solid #00a99d;
    color: #fff;
    background-color: #00a99d;
}

/* Feature */

.feature{
    float: left;
    width: 100%;
    padding: 3rem 0 0 0;
    background-color: #383838;
    position: relative;
}
.angle-90{
    position: absolute;
    left:50%;
    top:-20px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}
.icon{
    width: 40px;
    height: 40px;
    background-color: #00a99d;
    color: #fff;
    font-size: 18px;
    text-align: center;
    padding: 8px 0;
    border-radius: 4px;
}

.offer-rounds{
    height: 100px;
    text-align: center;
    background-color: #383838;
    border-radius: 100%;
    margin: 1.4rem auto;
}
.offer-rounds span{
    color: #e4e4e4;
    line-height: 3.2;
}
.item-feature{
    padding: 2rem 0 0 0;
}
.item-feature .title{
    color: #e4e4e4;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bolder;
    
}
.item-feature .paragraph{
    color: #7a7a7a;
    font-size: 14px;    
}
.item-feature .under-title{
    font-size: 12px;
    color: #aaaaaa;
}

/* APP FEATURES */

.app-feature{
    float: left;
    width: 100%;
    padding: 3rem 0;
}
.left-icon{
    float: right;
}
.item-features{
    text-align: left;
}
.item-features .title{
    color: #606060;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bolder;
    margin: 0;
    
}
.item-features .paragraph{
    color: #7a7a7a;
    font-size: 14px;    
}
.item-features .under-title{
    font-size: 12px;
    color: #aaaaaa;
    text-align: left;
}



/* Circle Progress */
.progress-circle {
    font-size: 20px;
    margin: 20px auto;
    position: relative; /* so that children can be absolutely positioned */
    padding: 0;
    width:130px;
    height: 130px;
    background-color: #F2E9E1; 
    border-radius: 50%;
    line-height:130px;
 }
 
 .progress-circle:after{
     border: none;
     position: absolute;
     top: 5px;
     left: 5px;
     text-align: center;
     display: block;
     border-radius: 50%;
     width: 120px;
     height: 120px;
     background-color: #383838;
     content: " ";
 }
 /* Text inside the control */
 .progress-circle span {
     position: absolute;
     line-height:130px;
     width:130px;
     text-align: center;
     display: block;
     color: #00a99d;
     z-index: 2;
 }
 .left-half-clipper { 
    /* a round circle */
    border-radius: 50%;
    width:130px;
    height:130px;
    position: absolute; /* needed for clipping */
    clip: rect(0,130px,130px, 65px); /* clips the whole left half*/ 
 }
 /* when p>50, don't clip left half*/
 .progress-circle.over50 .left-half-clipper {
    clip: rect(auto,auto,auto,auto);
 }
 .value-bar {
    /*This is an overlayed square, that is made round with the border radius,
    then it is cut to display only the left half, then rotated clockwise
    to escape the outer clipping path.*/ 
    position: absolute; /*needed for clipping*/
    clip: rect(0, 65px,130px, 0);
    width:130px;
    height:130px;
    border-radius: 50%;
    border: 10px solid #00a99d; /*The border is 0.35 but making it larger removes visual artifacts */
    /*background-color: #4D642D;*/ /* for debug */
    box-sizing: border-box;
   
 }
 /* Progress bar filling the whole right half for values above 50% */
 .progress-circle.over50 .first50-bar {
    /*Progress bar for the first 50%, filling the whole right half*/
    position: absolute; /*needed for clipping*/
    clip: rect(0,130px,130px, 65px);
    background-color: #00a99d;
    border-radius: 50%;
    width:130px;
    height:130px;
 }
 .progress-circle:not(.over50) .first50-bar{ display: none; }
 
 
 /* Progress bar rotation position */
 .progress-circle.p0 .value-bar { display: none; }
 .progress-circle.p1 .value-bar { transform: rotate(4deg); }
 .progress-circle.p2 .value-bar { transform: rotate(7deg); }
 .progress-circle.p3 .value-bar { transform: rotate(11deg); }
 .progress-circle.p4 .value-bar { transform: rotate(14deg); }
 .progress-circle.p5 .value-bar { transform: rotate(18deg); }
 .progress-circle.p6 .value-bar { transform: rotate(22deg); }
 .progress-circle.p7 .value-bar { transform: rotate(25deg); }
 .progress-circle.p8 .value-bar { transform: rotate(29deg); }
 .progress-circle.p9 .value-bar { transform: rotate(32deg); }
 .progress-circle.p10 .value-bar { transform: rotate(36deg); }
 .progress-circle.p11 .value-bar { transform: rotate(40deg); }
 .progress-circle.p12 .value-bar { transform: rotate(43deg); }
 .progress-circle.p13 .value-bar { transform: rotate(47deg); }
 .progress-circle.p14 .value-bar { transform: rotate(50deg); }
 .progress-circle.p15 .value-bar { transform: rotate(54deg); }
 .progress-circle.p16 .value-bar { transform: rotate(58deg); }
 .progress-circle.p17 .value-bar { transform: rotate(61deg); }
 .progress-circle.p18 .value-bar { transform: rotate(65deg); }
 .progress-circle.p19 .value-bar { transform: rotate(68deg); }
 .progress-circle.p20 .value-bar { transform: rotate(72deg); }
 .progress-circle.p21 .value-bar { transform: rotate(76deg); }
 .progress-circle.p22 .value-bar { transform: rotate(79deg); }
 .progress-circle.p23 .value-bar { transform: rotate(83deg); }
 .progress-circle.p24 .value-bar { transform: rotate(86deg); }
 .progress-circle.p25 .value-bar { transform: rotate(90deg); }
 .progress-circle.p26 .value-bar { transform: rotate(94deg); }
 .progress-circle.p27 .value-bar { transform: rotate(97deg); }
 .progress-circle.p28 .value-bar { transform: rotate(101deg); }
 .progress-circle.p29 .value-bar { transform: rotate(104deg); }
 .progress-circle.p30 .value-bar { transform: rotate(108deg); }
 .progress-circle.p31 .value-bar { transform: rotate(112deg); }
 .progress-circle.p32 .value-bar { transform: rotate(115deg); }
 .progress-circle.p33 .value-bar { transform: rotate(119deg); }
 .progress-circle.p34 .value-bar { transform: rotate(122deg); }
 .progress-circle.p35 .value-bar { transform: rotate(126deg); }
 .progress-circle.p36 .value-bar { transform: rotate(130deg); }
 .progress-circle.p37 .value-bar { transform: rotate(133deg); }
 .progress-circle.p38 .value-bar { transform: rotate(137deg); }
 .progress-circle.p39 .value-bar { transform: rotate(140deg); }
 .progress-circle.p40 .value-bar { transform: rotate(144deg); }
 .progress-circle.p41 .value-bar { transform: rotate(148deg); }
 .progress-circle.p42 .value-bar { transform: rotate(151deg); }
 .progress-circle.p43 .value-bar { transform: rotate(155deg); }
 .progress-circle.p44 .value-bar { transform: rotate(158deg); }
 .progress-circle.p45 .value-bar { transform: rotate(162deg); }
 .progress-circle.p46 .value-bar { transform: rotate(166deg); }
 .progress-circle.p47 .value-bar { transform: rotate(169deg); }
 .progress-circle.p48 .value-bar { transform: rotate(173deg); }
 .progress-circle.p49 .value-bar { transform: rotate(176deg); }
 .progress-circle.p50 .value-bar { transform: rotate(180deg); }
 .progress-circle.p51 .value-bar { transform: rotate(184deg); }
 .progress-circle.p52 .value-bar { transform: rotate(187deg); }
 .progress-circle.p53 .value-bar { transform: rotate(191deg); }
 .progress-circle.p54 .value-bar { transform: rotate(194deg); }
 .progress-circle.p55 .value-bar { transform: rotate(198deg); }
 .progress-circle.p56 .value-bar { transform: rotate(202deg); }
 .progress-circle.p57 .value-bar { transform: rotate(205deg); }
 .progress-circle.p58 .value-bar { transform: rotate(209deg); }
 .progress-circle.p59 .value-bar { transform: rotate(212deg); }
 .progress-circle.p60 .value-bar { transform: rotate(216deg); }
 .progress-circle.p61 .value-bar { transform: rotate(220deg); }
 .progress-circle.p62 .value-bar { transform: rotate(223deg); }
 .progress-circle.p63 .value-bar { transform: rotate(227deg); }
 .progress-circle.p64 .value-bar { transform: rotate(230deg); }
 .progress-circle.p65 .value-bar { transform: rotate(234deg); }
 .progress-circle.p66 .value-bar { transform: rotate(238deg); }
 .progress-circle.p67 .value-bar { transform: rotate(241deg); }
 .progress-circle.p68 .value-bar { transform: rotate(245deg); }
 .progress-circle.p69 .value-bar { transform: rotate(248deg); }
 .progress-circle.p70 .value-bar { transform: rotate(252deg); }
 .progress-circle.p71 .value-bar { transform: rotate(256deg); }
 .progress-circle.p72 .value-bar { transform: rotate(259deg); }
 .progress-circle.p73 .value-bar { transform: rotate(263deg); }
 .progress-circle.p74 .value-bar { transform: rotate(266deg); }
 .progress-circle.p75 .value-bar { transform: rotate(270deg); }
 .progress-circle.p76 .value-bar { transform: rotate(274deg); }
 .progress-circle.p77 .value-bar { transform: rotate(277deg); }
 .progress-circle.p78 .value-bar { transform: rotate(281deg); }
 .progress-circle.p79 .value-bar { transform: rotate(284deg); }
 .progress-circle.p80 .value-bar { transform: rotate(288deg); }
 .progress-circle.p81 .value-bar { transform: rotate(292deg); }
 .progress-circle.p82 .value-bar { transform: rotate(295deg); }
 .progress-circle.p83 .value-bar { transform: rotate(299deg); }
 .progress-circle.p84 .value-bar { transform: rotate(302deg); }
 .progress-circle.p85 .value-bar { transform: rotate(306deg); }
 .progress-circle.p86 .value-bar { transform: rotate(310deg); }
 .progress-circle.p87 .value-bar { transform: rotate(313deg); }
 .progress-circle.p88 .value-bar { transform: rotate(317deg); }
 .progress-circle.p89 .value-bar { transform: rotate(320deg); }
 .progress-circle.p90 .value-bar { transform: rotate(324deg); }
 .progress-circle.p91 .value-bar { transform: rotate(328deg); }
 .progress-circle.p92 .value-bar { transform: rotate(331deg); }
 .progress-circle.p93 .value-bar { transform: rotate(335deg); }
 .progress-circle.p94 .value-bar { transform: rotate(338deg); }
 .progress-circle.p95 .value-bar { transform: rotate(342deg); }
 .progress-circle.p96 .value-bar { transform: rotate(346deg); }
 .progress-circle.p97 .value-bar { transform: rotate(349deg); }
 .progress-circle.p98 .value-bar { transform: rotate(353deg); }
 .progress-circle.p99 .value-bar { transform: rotate(356deg); }
 .progress-circle.p100 .value-bar { transform: rotate(360deg); }

 .progress-text{
     font-size: 14px;
     color: #8a8a8a;
     font-weight: bolder;
     text-transform: uppercase;
     text-align: center;
     padding-bottom: 2.5rem;
 }


 /*  */

 .sample-work{
     float: left;
     width: 100%;
     padding: 3rem 0;
     background-color: #f9f9f9;
 }
 .btn-green{
     background-color: #00a99d;
     margin: 30px 0;
     color: #fff;
     font-weight: bolder;
     text-transform: uppercase;
 }
 .btn-green:hover{
    background-color: transparent;
    margin: 30px 0;
    color: #00a99d;
    font-weight: bolder;
    text-transform: uppercase;
    border:1px solid #00a99d;
}


/* Skill Facts */

.fact-number{
    font-size: 80px;
    color: #fff;
    text-align: center;
    font-weight: 500;
    font-style: italic;
}
.fact-title{
    font-size:14px;
    color:#606060;
    text-transform: uppercase;
    font-weight: bolder;
    text-align: center;
}
.skill-line {
    width: 100%; 
    text-align: center; 
    border-bottom: 1px solid #484848; 
    line-height: 0.1em;
    margin: 10px 0 20px; 
 } 
 
.skill-line span { 
     background:#383838; 
     padding:0 10px; 
     color: #00a99d;
 }
 .skill-line span i{
     line-height: 4px;
 }


 /* purchase */

 .purchase{
    float: left;
    width: 100%;
    padding: 1rem 0;
    background-color: #00a99d;
 }
 .purchase p{
     margin: 0;
     color: #fff;
     font-weight: bolder;
     text-transform: uppercase;
     padding: 8px 0 0 0;
 }

 /* team-member */

 .team-member{
    float: left;
    width: 100%;
    padding: 3rem 0;
    background-color: #f9f9f9;
    position: relative;
 }
 .card-title{
    font-size: 12px;
    color: #606060;
    text-align: center;
 }
 .card-text{
    color: #aaaaaa;
    font-size: 12px;
    text-align: center;
 }
 .btn-green-black{
    background-color: #00a99d;
    margin-top:-68px;
    color: #fff;
    font-weight: bolder;
    text-transform: uppercase;
}
.btn-green-black:hover{
   background-color: #383838;
   color: #fff;
   font-weight: bolder;
   text-transform: uppercase;
   border:1px solid #383838;
}



/* team-text */

.team-text{
    float: left;
    width: 100%;
    padding: 4rem 0;
    background-color: #00a99d;
    position: relative;
}
.tex-green{
    color: #00a99d;
}
.tex-dark{
    color: #aaaaaa;
    font-weight: normal;
}
.team-text p{
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    padding: 1rem 0 0 0;
}

/* clients */

.clients{
    float: left;
    width: 100%;
    background-color: #383838;
    padding: 3rem 0;
}



/* price */

.price{
    float: left;
    width: 100%;
    background-color: #f9f9f9;
    padding: 3rem 0;
}
.plan{
    float:left;
    width: 100%;
    padding: 0 20px 20px 20px;
    border:1px solid #ebebeb;
    border-radius: 4px;
    text-align: center;
}
.btn-green-black-plan{
    background-color: #00a99d;
    margin-top:-27px;
    color: #fff;
    font-weight: bolder;
    text-transform: uppercase;
}
.btn-green-black-plan:hover{
   background-color: #383838;
   color: #fff;
   font-weight: bolder;
   text-transform: uppercase;
   border:1px solid #383838;
}
.btn-green-black-sign{
    background-color: #00a99d;
    margin-top:20px;
    color: #fff;
    font-weight: bolder;
    text-transform: uppercase;
}
.btn-green-black-sign:hover{
   background-color: #383838;
   color: #fff;
   font-weight: bolder;
   text-transform: uppercase;
   border:1px solid #383838;
}
.plan p{
    font-size: 60px;
    font-weight: bolder;
    color: #383838;
}
.plan p span{
    color: #8a8a8a;
    font-size: 16px;
    font-weight: normal;
}
.plan p sup{
    font-size: 16px;
    top: -1.5em;
}
.plan-price{
    border-bottom: 1px solid #ebebeb;
}
.plan-feature{
    border-bottom: 1px solid #ebebeb;
}
.plan-feature p{
    color: #8a8a8a;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    padding: 15px 0;
}

/* purchase */

.purchase{
    float: left;
    width: 100%;
    background-color: #8a8a8a;
    padding: 3rem 0; 
}
.purchase p{
    font-size: 22px;
    color: #383838;
}


/* social */

.social{
    float: left;
    width: 100%;
    background-color: #383838;
    padding: 3rem 0; 
    text-align: center;
}
.social-icon{
    text-align: center;
    padding: 30px 0 0 0;
}
.social-icon li{
    width: 50px;
    height: 50px;
    border: 1px solid #606060;
    display: inline-block;
    border-radius: 4px;
    color: #fff;
    padding: 10px 0;
}
.social-icon li:hover{
    border: 1px solid #00a99d;
    color: #00a99d;
    cursor: pointer;
}

/* MAP */

.map{
    float: left;
    width: 100%;
    background-image:url(../images/map.png);
    background-size: cover;
    padding: 3rem 0; 
    text-align: center;
}
.contact-form{
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #F2E9E1;
}

/* footer */

footer{
    float: left;
    width: 100%;
    background-color: #383838;
    padding: 1rem 0; 
    text-align: center;
    color: #fff;
    font-weight: bolder;
}


/* OVERLAY */

.overlay-container {
    position: relative;
    width: 100%;
  }
  
  .overlay-image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    border-radius: 4px;
  }
  
  .overlay-middle {
    width: 100%;
    height: 100%;
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 51%;
    left: 51%;
    transform: translate(-51%, -51%);
    -ms-transform: translate(-51%, -51%);
    text-align: center;
    padding: 20px 0 0 0;
    border-radius: 4px;
  }
  
  .overlay-container:hover .overlay-image {
    background-color: #00a99d;
  }
  
  .overlay-container:hover .overlay-middle {
    opacity: 1;
    background-color: #00a99d;
  }
  
  .overlay-text {
    color: #e4e4e4;
    font-size: 12px;
  }
  .overlay-text p{
      margin: 0;
      padding: 15px 0 0 0;
  }
  .p-11{
      padding: 1px;
  }