/*------------------------------------------------------------------------
# mod_ol_services Extension
# ------------------------------------------------------------------------
# author    olwebdesign
# copyright Copyright (C) 2019 olwebdesign.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.olwebdesign.com
-------------------------------------------------------------------------*/

.hex-feature {
 -webkit-transition: .3s ease-in;
-o-transition: .3s ease-in;
transition: .3s ease-in;
}
@media only screen and (max-width:1399px) {
 .feature-wrap {
  max-height:initial;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-right:-20px;
  margin-bottom:10px
 }
 .feature-wrap .hex-feature {
  -webkit-box-shadow:5px 5px 45px rgba(0,0,0,.05);
  box-shadow:5px 5px 45px rgba(0,0,0,.05);
  background-color:#fff;
  margin-right:20px;
  margin-bottom:20px;
  padding:40px 15px;
  -webkit-box-flex:0;
  -ms-flex:0 0 23.2%;
  flex:0 0 23.2%
 }
}
@media only screen and (max-width:1199px) {
 .feature-wrap .hex-feature {
  -webkit-box-flex:0;
  -ms-flex:0 0 30%;
  flex:0 0 30%
 }
}
@media only screen and (max-width:767px) {
 .feature-wrap .hex-feature {
  -webkit-box-flex:0;
  -ms-flex:0 0 46%;
  flex:0 0 46%
 }
}
@media only screen and (max-width:575px) {
 .feature-wrap .hex-feature {
  -webkit-box-flex:0;
  -ms-flex:0 0 95%;
  flex:0 0 95%
 }
}
.hex-feature h3, .hex-feature h3 a {
 margin-top:24px;
   font-size: 24px;
  padding: 0;
  margin: 0;
  margin-top: 0px;
  font-weight: 700;
  line-height: calc(76 / 66);
  color: #202020;
 -webkit-transition: .3s ease-in;
-o-transition: .3s ease-in;
transition: .3s ease-in;
}
.hex-feature i {
font-size: 55px;
 color:var(--color-custom)
}
.hex-feature .content {
 position:relative;
 text-align:center
}
@media only screen and (min-width:1400px) {
 .hex-feature .content {
  z-index:2;
  max-width:190px;
  margin:0 auto;
  -webkit-transform:rotate(-30deg);
  -ms-transform:rotate(-30deg);
  transform:rotate(-30deg);
  top:0px;
 }
}
@media only screen and (min-width:1400px) {
.feature-wrap {
 max-height:760px
}
 .hex-feature:nth-child(1) {
  left:264px;
  top:-10px
 }
 .hex-feature:nth-child(2) {
  left:736px;
  top:-229px
 }
 .hex-feature:nth-child(3) {
  left:30px;
  top:-309px
 }
 .hex-feature:nth-child(4) {
  left:501px;
  top:-530px
 }
 .hex-feature:nth-child(5) {
  left:974px;
  top:-749px
 }
 .hex-feature:nth-child(6) {
  left:266px;
  top:-830px
 }
 .hex-feature:nth-child(7) {
  left:738px;
  top:-1049px
 }
 .hex-feature:nth-child(8) {
  left:503px;
  top:-1131px
 }
 .hex-feature:nth-child(9) {
  left:268px;
  top:-1214px
 }
 .hex-feature:nth-child(10) {
  left:740px;
  top:-1433px
 }
 .hex-feature:nth-child(11) {
  left:30px;
  top:-1780px
 }
 .hex-feature:nth-child(12) {
  left:974px;
  top:-2000px
 }
}
@media only screen and (min-width:1400px) {
 .hexagon {
  position:relative;
  width:252px;
  height:145.49px;
  background-color:#fff;
  margin:72.75px 0;
  -webkit-box-shadow:5px 5px 45px rgba(0,0,0,.05);
  box-shadow:5px 5px 45px rgba(0,0,0,.05);
  -webkit-transform:rotate(30deg);
  -ms-transform:rotate(30deg);
  transform:rotate(30deg)
 }
 .hexagon:after,
 .hexagon:before {
  content:"";
  position:absolute;
  z-index:1;
  width:178.19px;
  height:178.19px;
  -webkit-transform:scaleY(.5774) rotate(-45deg);
  -ms-transform:scaleY(.5774) rotate(-45deg);
  transform:scaleY(.5774) rotate(-45deg);
  background-color:inherit;
  left:36.9045px;
  -webkit-box-shadow:5px 5px 45px rgba(0,0,0,.05);
  box-shadow:5px 5px 45px rgba(0,0,0,.05)
 }
 .hexagon:before {
  top:-89.0955px
 }
 .hexagon:after {
  bottom:-89.0955px
 }
 .hexagon span {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:252px;
  height:145.4923px;
  z-index:2;
  background:inherit
 }
}

.hex-feature:hover h3, .hex-feature:hover h3 a{
 color: #fff
}
.hex-feature:hover {
 background-color:var(--color-custom)
}
.hex-feature:hover .content i {
 color:#ffffff
}
.feature-wrap.style--two .hex-feature i {
 color:#FF9927
}
.feature-wrap.style--two .hex-feature:hover {
 background-color:#ff9927
}
.feature-wrap.style--two .hex-feature:hover i {
 color:#ffffff
}

:root {
    --color-custom: #0071dc;
    --color_secondary: #f7bc20;

}