.banner.services-bnn {  
    text-align: center;
}

.services-bnn h1{
  font-size: 64px;
  font-family: 'Raleway', sans-serif;
  color: rgb( 255, 255, 255 );
  font-weight: 200;
      padding: 20px 0 55px;
}

.services-bnn h1 span{
  font-weight: 800;
  color: #f39c12;
}


.heading-services{
  position: relative;
  background-color: #ffffff;
  text-align: center;
  padding: 60px 0 75px;
}

.heading-services p {
    color: rgba(70,70,70,0.6);
}




ul.serviceslist{
  padding-left: 0;  margin-bottom: 0;     list-style: none;
     display: flex;    display: -webkit-flex;
    flex-wrap: wrap;    -webkit-flex-wrap: wrap;
}

li.services{
  color: #ffffff;  background-color: #247fba;
  background-image: url(img/banner-ptrn.png);
  background-repeat: repeat;  padding: 45px 5% ;
      text-align: center;    width: 50%; position: relative;
}


li.services .row{ margin: 0; /*  position: relative;top: 50%; 
    transform: translateY(-50%);    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);    -o-transform: translateY(-50%);*/
}

li.services .row .col-md-3{  display: table-cell;  float: none;  vertical-align: middle;}


li.services .row .col-md-9 {  display: table-cell;  float: none;}


li.services:nth-child(2) { background-color: #08ab8b;}
li.services:nth-child(3) { background-color: #954578;}
li.services:nth-child(4) { background-color: #5d5e60;}

li.services:nth-child(5) { background-color: #4e5ca0;}
li.services:nth-child(6) { background-color: #35944b;}

li.services:nth-child(7) { background-color: #ffce67;}
li.services:nth-child(8) { background-color: #a3d6d9;}






li.services:nth-child(even) .col-md-9{
  transform: translateX(-25px);
  -webkit-transform: translateX(-25px);
  -moz-transform: translateX(-25px);
  -ms-transform: translateX(-25px);
  -o-transform: translateX(-25px);
}


li.services img {
    margin: 0 auto;
    display: block;
}


li.services h3{
  font-size: 32px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;     text-transform: uppercase;
  margin-bottom: 15px;
}

li.services h3 span{display: block;}
li#logo_grph.services h3 span{display: inline;}

li.services p{
  font-size: 17px;
  line-height: 26px;
  color: rgba( 255, 255, 255, 0.702 );
  font-family: 'Open Sans', sans-serif;
}

 a.btn{
  margin-top: 2px;
  padding: 12px 45px 10px;
  font-size: 14px;
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #b06c00;
  font-weight: 800;
  transition: 0.5s ,color .5s, background-color .5s;
  -webkit-transition: 0.5s ,color .5s, background-color .5s;
  -moz-transition: 0.5s ,color .5s, background-color .5s;
  -ms-transition: 0.5s ,color .5s, background-color .5s;
  -o-transition: 0.5s ,color .5s, background-color .5s;

}

 a:hover.btn{
  background-color: #885000;
  color:white;
   transition: 0.5s ,color .5s, background-color .5s;
    -webkit-transition: 0.5s ,color .5s, background-color .5s;
    -moz-transition: 0.5s ,color .5s, background-color .5s;
    -ms-transition: 0.5s ,color .5s, background-color .5s;
    -o-transition: 0.5s ,color .5s, background-color .5s;

}
a:focus.btn{color:white;}

li.services:nth-child(2) a.btn{ background-color: #007c63;}
li.services:nth-child(2) a:hover.btn{ background-color: #014e3f;}

li.services:nth-child(3) a.btn{ background-color: #823666;}
li.services:nth-child(3) a:hover.btn{ background-color: #6c2c54; }

li.services:nth-child(4) a.btn{ background-color: #0f659d;}
li.services:nth-child(4) a:hover.btn{ background-color: #145178;}

li.services:nth-child(5) a.btn{ background-color: #3d4b8d;}
li.services:nth-child(5) a:hover.btn{ background-color: #3d3493;}

li.services:nth-child(6) a.btn{ background-color: #2a743b;}
li.services:nth-child(6) a:hover.btn{ background-color: #236733;}






/* -------- Learn bit more -----------*/

.vk_bitmore{
  text-align: center;
  background-color: #ffffff;
  padding: 75px 0 85px;
}

.vk_bitmore img {
    margin-bottom: 5px;
}

.vk_bitmore p {
    margin: 20px 0 33px;
    color: rgba(70,70,70,0.7);
}
    

.vk_bitmore a.btn{
  width: 230px;
  text-align: center;
  font-size: 15px;
  padding: 14px 10px 12px;
}


.vk_bitmore  a:first-child.btn{ background-color: #16a085;}
.vk_bitmore  a:first-child:hover.btn{ background-color: #168879;}

.vk_bitmore  a:last-child.btn{ background-color: #e74c3c;}
.vk_bitmore  a:last-child:hover.btn{ background-color: #e7341a;}





 .vk_or{
    position: relative;
    margin: 0 30px;
    display: inline-block;
    vertical-align: middle;
}

.vk_or:after{
    left: 50%;
    top: 50%;
    height: 1px;
    position: absolute;
    content: " ";
    width: 80px;
    background-color: #d9dde2;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    z-index: 1;
}


.vk_or span {
  background: #fff;
  border: 1px solid #d9dde2;
  color: #d9dde2;
  border-radius: 100%;
  height: 33px;
  width: 33px;
  display: inline-block;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  line-height: 28px;

}


@media  (max-width: 1299px) { 

li.services:nth-child(even) .col-md-9 {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
}




}


/* -------- Learn bit more end -----------*/
	
@media  (max-width: 992px) { 

.services-bnn h1 { font-size: 40px; padding: 10px 0 35px;}

.services-bnn h1 img {    width: 35px;}

.heading-services {  padding: 35px 0 55px;}




li.services:nth-child(even) .col-md-9 {
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
}


li.services { padding: 30px 10px;}

li.services h3 {    font-size: 25px; margin-bottom: 12px;}

li.services p { font-size: 15px;line-height: 24px;}

a.btn {padding: 10px 35px 8px;font-size: 13px;}

.vk_bitmore { padding: 45px 0 55px;}

.vk_bitmore img {width: 100px;}

.vk_bitmore p {    margin: 0px 0px 20px;}

.vk_bitmore a.btn {width: 220px;font-size: 14px; padding: 12px 10px 10px;}



}



@media (max-width: 767px) {

.services-bnn h1 {    font-size: 30px;   padding: 0px 0 15px;}

.services-bnn h1 img {   width: 25px;   margin-top: -5px;}



.heading-services {padding: 15px 0 30px;}

ul.serviceslist{display: block;}

li.services img {margin-bottom: 20px;}

li.services { padding: 25px ; width: 100%; text-align: center; }

li.services .row{
    transform: initial;    -webkit-transform: initial;
    -moz-transform: initial;    -o-transform: initial;
}
li.services h3 span {
    display: inline;
}

li.services h3 {font-size: 20px; line-height: 25px;}

li.services p {font-size: 17px; line-height: 24px;}


li.services .row{ display: block;}
li.services .row .col-md-3{ display: block;}
li.services .row .col-md-9 {  display: block;}


.vk_bitmore {    padding: 35px 0 45px;}

.vk_bitmore a.btn {   width: 100%;}

.vk_or {padding-top: 10px;padding-bottom: 8px;}



}