.g5plus-icon-box .icon {
text-align: center;
line-height: 45px;
width: 45px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.g5plus-icon-box .icon i {
font-size: 45px;
font-weight: 600;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.g5plus-icon-box .icon-image img {
height: auto;
text-align: center;
}
.g5plus-icon-box h4,
.g5plus-icon-box a {
color: #1f1f1f;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.g5plus-icon-box p {
font-size: 14px;
letter-spacing: .02em;
}
.g5plus-icon-box.has-line h4:after {
content: '';
height: 2px;
width: 65px;
margin-top: 20px;
margin-bottom: 29px;
display: block;
}
.g5plus-icon-box.background .icon,
.g5plus-icon-box.out-line .icon {
position: relative;
width: 80px;
height: 80px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.g5plus-icon-box.background .icon:before,
.g5plus-icon-box.out-line .icon:before {
content: '';
position: absolute;
opacity: 0;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.g5plus-icon-box.background .icon i,
.g5plus-icon-box.out-line .icon i {
font-size: 35px;
display: inline-block;
line-height: 80px;
position: relative;
}
.g5plus-icon-box.out-line .icon {
background-color: transparent;
}
.g5plus-icon-box.out-line .icon:before {
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.g5plus-icon-box.transparent {
background-color: transparent;
border-color: transparent;
}
.g5plus-icon-box.box_shadow_hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
padding: 45px 29px 55px 29px;
border-radius: 10px;
}
.g5plus-icon-box:hover.box_shadow_hover {
-webkit-box-shadow: 0px 7px 35px rgba(119, 119, 119, 0.2);
-moz-box-shadow: 0px 7px 35px rgba(119, 119, 119, 0.2);
box-shadow: 0px 7px 35px rgba(119, 119, 119, 0.2);
}
.g5plus-icon-box:hover.out-line .icon i {
color: #fff;
}
.g5plus-icon-box:hover.out-line .icon:before {
opacity: 1;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
}
.g5plus-icon-box:hover.background .icon:before {
opacity: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.g5plus-icon-box:hover.background .icon i {
color: #fff;
}
.g5plus-icon-box:hover.transparent .icon i {
transform: scale(1.1);
}
.g5plus-icon-box.text-light h4 {
color: #fff;
}
.g5plus-icon-box.text-light h4 a {
color: #fff;
}
.g5plus-icon-box.text-light p {
color: #ccc;
}
.g5plus-icon-box.text-light .icon i {
color: #fff;
}
.g5plus-icon-box.text-light.out-line .icon {
border: 1px solid #fff;
}
.g5plus-icon-box.text-light.out-line .icon:before {
background-color: #fff;
}
.g5plus-icon-box.text-light:hover h4,
.g5plus-icon-box.text-light:hover a {
color: #fff !important;
}
.g5plus-icon-box.text-light:hover .icon i {
color: #fff;
}
.g5plus-icon-box.text-light:hover.out-line .icon:before {
border-color: #fff;
}
.g5plus-icon-box.align-center {
text-align: center;
}
.g5plus-icon-box.align-center .icon,
.g5plus-icon-box.align-center .icon-image {
margin: auto;
}
.g5plus-icon-box.align-center .icon i {
line-height: 80px;
}
.g5plus-icon-box.align-center .ib-content {
margin-top: 25px;
}
.g5plus-icon-box.align-center .ib-content h4 {
margin-bottom: 7px;
}
.g5plus-icon-box.align-center.has-line h4:after {
margin-left: auto;
margin-right: auto;
}
.g5plus-icon-box.align-left .ib-shape {
display: table-cell;
}
.g5plus-icon-box.align-left .icon-image img {
max-width: 80px;
}
.g5plus-icon-box.align-left .ib-content {
vertical-align: top !important;
display: table-cell;
padding-left: 24px;
text-align: left;
}
.g5plus-icon-box.align-left .ib-content h4 {
margin-bottom: 5px;
}
.g5plus-icon-box.align-top-left .ib-shape {
display: table-cell;
}
.g5plus-icon-box.align-top-left .icon-image img {
max-width: 80px;
}
.g5plus-icon-box.align-top-left h4 {
display: table-cell;
padding-left: 15px;
vertical-align: middle !important;
}
.g5plus-icon-box.align-top-left p {
margin-top: 17px;
font-size: 15px;
}
.g5plus-icon-box.icon-small .icon {
line-height: 40px;
width: 40px;
}
.g5plus-icon-box.icon-small .icon i {
font-size: 40px;
}
.g5plus-icon-box.icon-small.out-line .icon,
.g5plus-icon-box.icon-small.background .icon {
width: 75px;
height: 75px;
}
.g5plus-icon-box.icon-small.out-line .icon i,
.g5plus-icon-box.icon-small.background .icon i {
line-height: 75px;
font-size: 35px;
}
.g5plus-icon-box.icon-small.align-center .icon i {
line-height: 75px;
}
.g5plus-icon-box.icon-small.align-center .ib-content {
margin-top: 16px;
}
.g5plus-icon-box.icon-small.align-center .ib-content h4 {
margin-bottom: 14px;
}
.g5plus-icon-box.icon-large .icon {
line-height: 50px;
width: 50px;
}
.g5plus-icon-box.icon-large .icon i {
font-size: 50px;
}
.g5plus-icon-box.icon-large.out-line .icon,
.g5plus-icon-box.icon-large.background .icon {
width: 100px;
height: 100px;
}
.g5plus-icon-box.icon-large.out-line .icon i,
.g5plus-icon-box.icon-large.background .icon i {
line-height: 100px;
}
.g5plus-icon-box.icon-large.align-center .icon i {
line-height: 100px;
}
.g5plus-icon-box.icon-mini .icon {
line-height: 30px;
width: 30px;
}
.g5plus-icon-box.icon-mini .icon i {
font-size: 30px;
}
.g5plus-icon-box.icon-mini.out-line .icon,
.g5plus-icon-box.icon-mini.background .icon {
width: 70px;
height: 70px;
}
.g5plus-icon-box.icon-mini.out-line .icon i,
.g5plus-icon-box.icon-mini.background .icon i {
line-height: 70px;
}
.g5plus-icon-box.icon-mini.background .ib-content {
margin-top: 27px !important;
}
.g5plus-icon-box.icon-mini.align-center .icon i {
line-height: 70px;
}
.g5plus-icon-box.icon-mini.align-center .ib-content {
margin-top: 13px;
}.g5plus-process {
position: relative;
}
.g5plus-process ul,
.g5plus-process li {
list-style: none;
padding: 0;
margin: 0;
}
.g5plus-process ul a,
.g5plus-process li a {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.g5plus-process .title,
.g5plus-process .title a {
line-height: 1.2;
margin-bottom: 20px;
}
.g5plus-process .sub-title {
line-height: 1.8;
font-size: 15px;
font-weight: 600;
letter-spacing: .2em;
}
.g5plus-process .desc {
line-height: 1.8;
margin-bottom: 30px;
letter-spacing: 0.02em;
}
.g5plus-process.style-1 {
overflow: hidden;
}
.g5plus-process.style-1 .desc {
font-size: 15px;
}
.g5plus-process.style-1 .process-number {
position: relative;
font-size: 427px;
color: #ececec;
font-weight: 700;
line-height: 1;
}
.g5plus-process.style-1 .process-content {
position: absolute;
top: 100px;
}
.g5plus-process.style-1 .process-content .sub-title {
margin-bottom: 18px;
}
.g5plus-process.style-1.text-left .process-number {
left: -145px;
}
.g5plus-process.style-1.text-left .process-content {
left: 95px;
}
.g5plus-process.style-1.text-right .process-number {
left: 35px;
}
.g5plus-process.style-1.text-right .process-content {
right: 95px;
}
.g5plus-process.style-2 .process-number {
position: absolute;
top: 0;
left: 0;
font-size: 80px;
color: rgba(255, 255, 255, 0.12);
font-weight: 600;
line-height: 1;
}
.g5plus-process.style-2 .process-content {
position: relative;
top: 38px;
margin-left: 35px;
}
.g5plus-process.style-2 .process-content .sub-title {
font-size: 16px;
margin-bottom: 15px;
letter-spacing: .15em;
}
.g5plus-process.style-2.text-right .process-number {
left: inherit;
right: 0;
}
.g5plus-process.style-2.text-right .process-content {
left: inherit;
right: 35px;
}
.g5plus-process.style-3 .process-number {
font-size: 200px;
color: #eee;
font-weight: 700;
line-height: 1;
}
.g5plus-process.style-3 .sub-title {
position: absolute;
top: 115px;
left: 95px;
}
.g5plus-process.style-3 .process-content {
margin-top: 25px;
}
.g5plus-process.style-3 .process-content .title {
position: relative;
padding-left: 60px;
}
.g5plus-process.style-3 .process-content .title:before {
content: '';
position: absolute;
left: 0;
top: 15px;
display: inline-block;
width: 45px;
height: 2px;
}
.g5plus-process.style-3 .process-content .desc {
padding-left: 60px;
font-size: 15px;
font-weight: 400;
}
.g5plus-process.style-3.text-right .process-content {
left: 180px;
}
.g5plus-process.style-4 {
display: table;
}
.g5plus-process.style-4:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 68px;
height: 100%;
background: #fff;
box-shadow: 0 7px 20px rgba(153, 153, 153, 0.2);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.g5plus-process.style-4 .process-number {
position: relative;
display: table-cell;
vertical-align: middle;
padding-right: 30px;
padding-left: 20px;
font-size: 130px;
font-weight: 300;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.g5plus-process.style-4 .process-content {
position: relative;
display: table-cell;
vertical-align: middle;
padding: 35px 0;
}
.g5plus-process.style-4 .process-content .desc {
margin-bottom: 0;
}
.g5plus-process.style-4.text-right:before {
right: 0;
left: inherit;
}
.g5plus-process.style-4.text-right .process-number {
padding-right: 20px;
padding-left: 30px;
}
.g5plus-process.style-4:hover:before {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
.g5plus-process.style-4:hover .process-number {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.g5plus-process.style-5:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 68px;
height: 100%;
background: #fff;
box-shadow: 0 7px 20px rgba(153, 153, 153, 0.2);
}
.g5plus-process.style-5 .process-number {
margin-left: -10px;
font-size: 140px;
font-weight: 400;
line-height: 1;
}
.g5plus-process.style-5 .process-content {
position: relative;
padding: 25px 0 20px 25px;
}
.g5plus-process.style-5 .process-content .desc {
max-width: 350px;
margin-bottom: 0;
}
.g5plus-process.style-5 .process-content .title {
margin-bottom: 15px;
}
.g5plus-process.style-5.text-right:before {
right: 0;
left: inherit;
}
.g5plus-process.style-5.text-right .process-number {
margin-right: -10px;
margin-left: 0;
}
.g5plus-process.style-5.text-right .process-content {
padding-right: 25px;
padding-left: 0;
}
.g5plus-process.style-5.text-right .process-content .desc {
margin-left: auto;
}
.g5plus-process.style-5.text-right .process-content .title {
margin-bottom: 15px;
}
.g5plus-process.light-color .process-content .sub-title,
.g5plus-process.light-color .process-content .title {
color: rgba(255, 255, 255, 0.8);
}
.g5plus-process.light-color .process-content .sub-title a,
.g5plus-process.light-color .process-content .title a {
color: rgba(255, 255, 255, 0.8);
}
.g5plus-process.light-color .process-content .desc {
color: #ccc;
}
@media (max-width: 479px) {
.g5plus-process.style-1 .process-number {
font-size: 200px;
}
.g5plus-process.style-1 .process-content {
position: static;
}
.g5plus-process.style-1.text-left .process-number {
left: -35px;
}
.g5plus-process.style-4:before {
width: 50px;
}
.g5plus-process.style-4 .process-number {
font-size: 80px;
}
.g5plus-process.style-4.text-left .process-number {
padding-right: 20px;
}
.g5plus-process.style-4.text-right .process-number {
padding-left: 20px;
}
.g5plus-process .title {
font-size: 25px !important;
}
.g5plus-process .desc {
font-size: 13px;
}
}ul.g5plus-lists {
list-style: none;
padding: 0;
margin: 0;
}
ul.g5plus-lists span {
float: left;
font-size: 15px;
}
ul.g5plus-lists p {
padding-left: 24px;
font-size: 14px;
margin-bottom: 0;
}
ul.g5plus-lists li + li {
margin-top: 9px;
}
ul.g5plus-lists.g5plus-lists-round span {
background: transparent;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 26px;
height: 26px;
text-align: center;
position: relative;
line-height: 24px;
}
ul.g5plus-lists.g5plus-lists-round span i {
padding-left: 2px;
}
ul.g5plus-lists.g5plus-lists-round p {
padding-left: 36px;
}
ul.g5plus-lists.g5plus-lists-round li + li {
margin-top: 15px;
}
ul.g5plus-lists.g5plus-lists-dot li:before,
ul.g5plus-lists.g5plus-lists-square li:before {
content: '';
width: 4px;
height: 4px;
top: 11px;
position: relative;
float: left;
}
ul.g5plus-lists.g5plus-lists-dot p,
ul.g5plus-lists.g5plus-lists-square p {
padding-left: 18px;
}
ul.g5plus-lists.g5plus-lists-dot li:before {
border-radius: 50%;
}
ul.g5plus-list-size-lg span {
font-size: 17px;
}
ul.g5plus-list-size-lg p {
padding-left: 25px;
font-size: 16px;
}
ul.g5plus-list-size-lg li + li {
margin-top: 11px;
}
ul.g5plus-list-size-lg.g5plus-lists-round span {
width: 35px;
height: 35px;
line-height: 33px;
}
ul.g5plus-list-size-lg.g5plus-lists-round p {
padding-left: 50px;
}
ul.g5plus-list-size-lg.g5plus-lists-round li + li {
margin-top: 19px;
}
ul.g5plus-list-size-lg.g5plus-lists-dot li:before,
ul.g5plus-list-size-lg.g5plus-lists-square li:before {
width: 6px;
height: 6px;
}
ul.g5plus-list-size-lg.g5plus-lists-dot p,
ul.g5plus-list-size-lg.g5plus-lists-square p {
padding-left: 20px;
}
.g5plus-lists-color-blue.g5plus-lists-dot li:before,
.g5plus-lists-color-blue.g5plus-lists-square li:before {
background-color: #5472D2;
}
.g5plus-lists-color-blue span {
color: #5472D2;
}
.g5plus-lists-color-turquoise.g5plus-lists-dot li:before,
.g5plus-lists-color-turquoise.g5plus-lists-square li:before {
background-color: #00C1CF;
}
.g5plus-lists-color-turquoise span {
color: #00C1CF;
}
.g5plus-lists-color-pink.g5plus-lists-dot li:before,
.g5plus-lists-color-pink.g5plus-lists-square li:before {
background-color: #FE6C61;
}
.g5plus-lists-color-pink span {
color: #FE6C61;
}
.g5plus-lists-color-violet:before {
background-color: #8D6DC4;
}
.g5plus-lists-color-violet span {
color: #8D6DC4;
}
.g5plus-lists-color-peacoc:before {
background-color: #4CADC9;
}
.g5plus-lists-color-peacoc span {
color: #4CADC9;
}
.g5plus-lists-color-chino:before {
background-color: #CEC2AB;
}
.g5plus-lists-color-chino span {
color: #CEC2AB;
}
.g5plus-lists-color-mulled_wine:before {
background-color: #50485B;
}
.g5plus-lists-color-mulled_wine span {
color: #50485B;
}
.g5plus-lists-color-vista_blue:before {
background-color: #75D69C;
}
.g5plus-lists-color-vista_blue span {
color: #75D69C;
}
.g5plus-lists-color-black:before {
background-color: #2A2A2A;
}
.g5plus-lists-color-black span {
color: #2A2A2A;
}
.g5plus-lists-color-orange:before {
background-color: #F7BE68;
}
.g5plus-lists-color-orange span {
color: #F7BE68;
}
.g5plus-lists-color-sky:before {
background-color: #5AA1E3;
}
.g5plus-lists-color-sky span {
color: #5AA1E3;
}
.g5plus-lists-color-green:before {
background-color: #6DAB3C;
}
.g5plus-lists-color-green span {
color: #6DAB3C;
}
.g5plus-lists-color-juicy_pink:before {
background-color: #F4524D;
}
.g5plus-lists-color-juicy_pink span {
color: #F4524D;
}
.g5plus-lists-color-sandy_brown:before {
background-color: #F79468;
}
.g5plus-lists-color-sandy_brown span {
color: #F79468;
}
.g5plus-lists-color-purple:before {
background-color: #B97EBB;
}
.g5plus-lists-color-purple span {
color: #B97EBB;
}
.g5plus-lists-color-white:before {
background-color: #fff;
}
.g5plus-lists-color-white span {
color: #fff;
}
.g5plus-lists-color-grey:before {
background-color: #888;
}
.g5plus-lists-color-grey span {
color: #888;
}