Backups Created:
/home/japatmex/public_html/wp-content/edit-wolf.php
Savvy
W
olf -
MANAGER
Edit File: default.css
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700'); /*================================================ [ Table of contents ] ================================================ #. General #. Page section margin padding #. Section title #. Button #. Share button #. Text color #. Input #. Extra class #. Loading #. Box Layout #. Back to top #. Basic margin padding ====================================== [ End table content ] ======================================*/ /************************* General *************************/ body { font-family: 'Poppins', sans-serif; font-weight: 400; font-style: normal; line-height: 25px; color: #7a7a7a; font-size: 14px; } img { max-width: 100%; transition: all 0.3s ease-out 0s; } .img-full img { width: 100% } a, .btn { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .btn { border-radius: 4px; font-size: 14px; padding: 0px 15px; height: 32px; font-weight: 500; line-height: 30px; } .btn-group > .btn { margin-right: 5px; } a:focus, .btn:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: #ff5252; text-decoration: none; } a, button, input { outline: medium none; color: #7a7a7a; } .uppercase { text-transform: uppercase } .capitalize { text-transform: capitalize } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: normal; color: #363f4d; margin-top: 0px; font-style: normal; font-weight: 400; margin: 0 0 5px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1 { font-size: 33px; font-weight: 500; } h2 { font-size: 27px; } h3 { font-size: 18px; line-height:24px; } .product-info h3 { font-size: 18px; font-weight: 500; } .modal-details .product-info h3 { font-size: 17px; font-weight: 500; letter-spacing:-0.3px; } h4 { font-size: 15px; } h5 { font-size: 12px; } h6 { font-size: 10px; } ul { margin: 0px; padding: 0px; } li { list-style: none } p { font-size: 14px; font-weight: normal; line-height: 24px; color: #7a7a7a; margin-bottom: 15px; } hr { margin: 60px 0; padding: 0px; border-bottom: 1px solid #eceff8; border-top: 0px; } hr.style-2 { border-bottom: 1px dashed #f10; } hr.mp-0 { margin: 0; border-bottom: 1px solid #eceff8; } hr.mtb-40 { margin: 40px 0; border-bottom: 1px solid #eceff8; border-top: 0px; } label { font-size: 14px; font-weight: 400; color: #626262; } *::-moz-selection { background: #91b2c3; color: #fff; text-shadow: none; } ::-moz-selection { background: #91b2c3; color: #fff; text-shadow: none; } ::selection { background: #91b2c3; color: #fff; text-shadow: none; } .mark, mark { background: #ff5252 none repeat scroll 0 0; color: #ffffff; } span.tooltip-content { color: #00a9da; cursor: help; font-weight: 600; } .f-left { float: left } .f-right { float: right } .fix { overflow: hidden } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /*************************** transtion ****************************/ a.button-small::after { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .share ul, .share:hover ul { transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } a.button-border span, a.button-border-white span, input, select, textarea { -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } /************************* Section title ***********************/ .section-title1-border { border-bottom: 2px solid #ff5252; margin: 0 0 30px; border-radius: 0 0 0 6px; } .section-title1 h3 { background: #ff5252; border-radius: 8px 30px 30px 4px; color: #fff; font-size: 16px; display: inline-block; line-height: 25px; text-transform: capitalize; padding: 8px 18px; position: relative; margin: 0; font-weight: 500; } .section-title2 h3 { background: #ff5252; border-radius: 4px 4px 0 0; color: #fff; font-size: 14px; display: block; line-height: 26px; text-transform: uppercase; padding: 10px 20px; position: relative; font-weight: 500; margin: 0; float: left; width: 100%; } .section-title3 > h3 { font-size: 30px; color: #ffffff; text-align: center; font-family: Raleway; font-weight: 900; font-style: normal; margin-bottom: 20px; line-height: 24px; } .section-title3 > p { text-align: center; font-style: italic; color: #717171; margin-bottom: 35px; } /************************* button *************************/ a.button { font-size: 13px; color: #fff; line-height: 46px; text-transform: uppercase; font-weight: 700; display: inline-block !important; vertical-align: top; padding: 0 40px; font-weight: 500; background: #ff5252; border-radius: 5px; } a.button:hover { background: #363F4D; } .cart-button a.button2 { border: none; background: #586985; width: 150px; color: #a3acb9; height: 50px; line-height: 50px; text-align: center; padding: 0 20px; display: inline-block; text-transform: capitalize; font-size: 14px; font-weight:500; margin-bottom: 10px; margin-top: 10px; border-radius: 4px; font-weight: 500; } .cart-button { background: #37475b; margin: 0 -20px; padding: 10px 20px; border-radius: 0 0 6px 6px; overflow: hidden; } .cart-button a.button2:hover { background: #ff5252; color: #fff; } a.button.add-btn, a.button.add-btn.big { background: #363F4D; height: 44px; line-height: 44px; position: absolute; left: 0; top: 46px; opacity: 0; border-radius: 4px; visibility: hidden; transition: all 0.3s ease-in-out; margin: 0 auto; right: 0; padding: 0 10px; width: 150px; text-transform: capitalize; font-weight: 500; font-size: 14px; } a.button.add-btn.big { top: auto; bottom: 15px; } a.button.add-btn:hover { background: #ff5252; } .button { font-size: 13px; color: #fff; line-height: 46px; text-transform: uppercase; font-weight: 700; display: inline-block !important; vertical-align: top; padding: 0 40px; background: #ff5252; border-radius: 5px; } .button:hover { background: #363F4D; } .button2 { background: none; border: 1px solid #4c4c4c; color: #7a7a7a; height: 40px; line-height: 40px; margin-top: 26px; box-shadow: none; border-radius: 3px; display: inline-block; font-size: 1em; font-weight: 400; height: 42px; line-height: 42px; overflow: hidden; padding: 0 25px; text-shadow: none; text-transform: capitalize; text-align: center; transition: all .3s ease-out; vertical-align: middle; } .button2:hover { background: #ff5252; color: #fff; border-color: #ff5252; } /************************* button small *************************/ a.button-small { border: 0 none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03) inset; cursor: pointer; display: inline-block; margin-right: 10px; overflow: hidden; padding: 0; position: relative; background-color: #ff5252; color: #fff; font-size: 15px; } a.button-small i { background: rgba(0, 0, 0, 0.09); display: block; float: left; padding: 10px; font-size: 13px; color: #fff; font-weight: normal; width: 40px; text-align: center; } a.button-small span { display: block; float: left; position: relative; z-index: 2; padding: 8px 10px; font-size: 13px; color: #fff; font-weight: normal; } a.button-small:after { background: rgba(0, 0, 0, 0.09) none repeat scroll 0 0; content: ""; height: 100%; right: 0; position: absolute; top: 0; width: 0; z-index: 1; } a.button-small:hover::after { width: 100% } .form-button, .readmore-button, .price-button, .compare-btn { background: #363f4d; box-shadow: none; border: 0; border-radius: 4px; color: #fff; display: inline-block; font-size: 14px; font-weight: 500; height: 38px; line-height: 38px; overflow: hidden; padding: 0 20px; text-shadow: none; text-transform: capitalize; text-align: center; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; vertical-align: middle; white-space: nowrap; } .action-btn.big, .action-btn.small { background: #363f4d; color: #fff; display: block; border-radius: 4px; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; text-transform: capitalize; height: 38px; line-height: 40px; padding: 0 12px; min-width: 170px; transition: all 0.3s ease-in-out; } .action-btn.small i { font-size: 16px; } .action-btn.big { min-width: 170px; } .action-btn.small { min-width: 35px; } .readmore-button { letter-spacing: 2px; margin-bottom: 25px; } .price-button { padding: 0 15px; height: 30px; line-height: 28px; font-size: 12px; width: auto; text-transform: uppercase; font-weight: 500; display: block; margin-top: 10px; } .price-button:focus { background: #363f4d; } .compare-btn { font-weight: 500; position: relative; float: right; height: 35px; line-height: 35px; } .compare-btn::after { content: "\f00c"; font-family: FontAwesome; font-weight: normal; vertical-align: bottom; margin-left: 5px; } .form-button:hover, .readmore-button:hover, .price-button:hover, .compare-btn:hover, .action-btn.big:hover, .action-btn.small:hover { background: #ff5252; color: #fff; } .quantity-button { background: #363f4d; box-shadow: none; border: 0; border-radius: 3px; color: #fff; display: block; font-size: 1em; font-weight: 500; height: 42px; line-height: 42px; overflow: hidden; padding: 0 30px; text-shadow: none; text-transform: capitalize; text-align: center; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; vertical-align: middle; white-space: nowrap; min-width: auto; background: #ff5252; margin: 0; } .quantity-button:hover { background: #363F4D; color: #fff; } /************************* buttons variation *************************/ a.button.large { margin-right: 0px; } a.button.large span { padding: 16px 80px; font-size: 18px; } a.button.large i { padding: 20px; width: 60px; font-size: 18px; } a.button.medium span { padding: 14px 60px; font-size: 16px; } a.button.medium i { padding: 17px; width: 50px; font-size: 16px; } a.button.small span { padding: 12px 40px; } a.button.small i { padding: 14px; width: 45px; } a.button.small span { padding: 12px 40px; } a.button.small i { padding: 15px; width: 45px; } a.button.extra-small span { padding: 8px 20px; font-size: 13px; } a.button.extra-small i { padding: 11px; width: 38px; font-size: 13px; } /************************* social-icon *************************/ .social-icon ul { margin: 0; padding: 0; } .social-icon ul li { display: inline-block; list-style: none; } .social-icon ul li a { display: block; margin: 3px; width: 50px; height: 50px; line-height: 50px; font-size: 16px; color: #fff; background: #ff5252; text-align: center; border-radius: 50%; } .social-icon ul li a:hover { background: #EB3B60; } .social-icon.socile-icon-style-2 ul li a { color: #fff; background: #323232; border-radius: 0; } .social-icon.socile-icon-style-2 ul li a:hover { background: #EB3B60; } .social-icon.socile-icon-style-3 ul li a { color: #fff; background: transparent; border: 1px solid #fff; } .social-icon.socile-icon-style-3 ul li a:hover { background: #EB3B60; border-color: #EB3B60; } /************************* Text color *************************/ .text-blue { color: #ff5252; } .text-white { color: #fff; } .text-black { color: #363636; } .text-theme { color: #f10; } .text-white h1, .text-white p, .text-white h2 { color: #fff; } .text-white { color: #fff; } .text-black { color: #363636; } .text-theme { color: #f10; } /************************* Input *************************/ input { background: #fff; border: 0; height: 50px; box-shadow: none; padding-left: 18px; font-size: 14px; color: #7a7a7a; width: 100%; border-radius: 0 25px 25px 0; } .home-3 select, select.form-control { height: 46px; } select, select.form-control { -moz-appearance: none; -webkit-appearance: none; background: rgba(0, 0, 0, 0) url("../img/arow.png") no-repeat scroll 97% center; border: 1px solid #ebebeb; border-radius: 6px; box-shadow: none; cursor: pointer; line-height: auto; max-width: 100%; outline: 0 none; position: relative; text-indent: 0.01px; text-overflow: ""; width: 100%; padding: 0 15px; color: #7a7a7a; height: 50px; font-size: 14px; font-weight: 400; } option { background: #fff; border: 0px solid #626262; padding-left: 10px; font-size: 14px; } input:focus { background: #fff; } textarea { resize: vertical; background: #fff; border: 1px solid #ebebeb; padding: 10px; padding-left: 18px; width: 100%; border-radius: 6px; font-size: 14px; height: 135px; } textarea:focus { background: transparent; border: 1px solid #ebebeb; outline: none; } ::-moz-placeholder { color: #444; font-size: 14px; } .input-group.divcenter.input-group .form-control { padding-left: 0px } /************************* back-to-top *************************/ #scrollUp { width: 40px; height: 40px; background: #ff5252; bottom: 15px; right: 15px; line-height: 40px; text-align: center; font-size: 18px; color: #fff; border-radius: 100%; transition: all 0.6s ease-in-out; } /************************* Basic margin padding *************************/ .m-0 { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; } .p-0 { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } /************************* Margin top *************************/ .mt-0 { margin-top: 0 !important } .mt-10 { margin-top: 10px } .mt-15 { margin-top: 15px } .mt-20 { margin-top: 20px } .mt-25 { margin-top: 25px } .mt-30 { margin-top: 30px } .mt-40 { margin-top: 40px } .mt-50 { margin-top: 50px } .mt-60 { margin-top: 60px } .mt-70 { margin-top: 70px } .mt-80 { margin-top: 80px } .mt-90 { margin-top: 90px } .mt-100 { margin-top: 100px } .mt-110 { margin-top: 110px } .mt-120 { margin-top: 120px } .mt-130 { margin-top: 130px } .mt-140 { margin-top: 140px } .mt-150 { margin-top: 150px } /************************* Margin right *************************/ .mr-0 { margin-right: 0px } .mr-10 { margin-right: 10px } .mr-15 { margin-right: 15px } .mr-20 { margin-right: 20px } .mr-30 { margin-right: 30px } .mr-40 { margin-right: 40px } .mr-50 { margin-right: 50px } .mr-60 { margin-right: 60px } .mr-70 { margin-right: 70px } .mr-80 { margin-right: 80px } .mr-90 { margin-right: 90px } .mr-100 { margin-right: 100px } .mr-110 { margin-right: 110px } .mr-120 { margin-right: 120px } .mr-130 { margin-right: 130px } .mr-140 { margin-right: 140px } .mr-150 { margin-right: 150px } /************************* Margin bottom *************************/ .mb-0 { margin-bottom: 0 } .mb-10 { margin-bottom: 10px } .mb-15 { margin-bottom: 15px } .mb-20 { margin-bottom: 20px } .mb-30 { margin-bottom: 30px } .mb-35 { margin-bottom: 35px } .mb-40 { margin-bottom: 40px } .mb-50 { margin-bottom: 50px } .mb-55 { margin-bottom: 55px } .mb-60 { margin-bottom: 60px } .mb-70 { margin-bottom: 70px } .mb-80 { margin-bottom: 80px } .mb-85 { margin-bottom: 85px } .mb-90 { margin-bottom: 90px } .mb-100 { margin-bottom: 100px } .mb-110 { margin-bottom: 110px } .mb-120 { margin-bottom: 120px } .mb-130 { margin-bottom: 130px } .mb-140 { margin-bottom: 140px } .mb-150 { margin-bottom: 150px } /************************* Margin left *************************/ .ml-0 { margin-left: 0 } .ml-10 { margin-left: 10px } .ml-15 { margin-left: 15px } .ml-20 { margin-left: 20px } .ml-30 { margin-left: 30px } .ml-40 { margin-left: 40px } .ml-50 { margin-left: 50px } .ml-60 { margin-left: 60px } .ml-70 { margin-left: 70px } .ml-80 { margin-left: 80px } .ml-90 { margin-left: 90px } .ml-100 { margin-left: 100px } .ml-110 { margin-left: 110px } .ml-120 { margin-left: 120px } .ml-130 { margin-left: 130px } .ml-140 { margin-left: 140px } .ml-150 { margin-left: 150px } /************************* Padding top *************************/ .pt-0 { padding-top: 0 } .pt-10 { padding-top: 10px } .pt-15 { padding-top: 15px } .pt-20 { padding-top: 20px } .pt-30 { padding-top: 30px } .pt-30 { padding-top: 35px } .pt-40 { padding-top: 40px } .pt-50 { padding-top: 50px } .pt-60 { padding-top: 60px } .pt-70 { padding-top: 70px } .pt-80 { padding-top: 80px } .pt-90 { padding-top: 90px } .pt-100 { padding-top: 100px } .pt-110 { padding-top: 110px } .pt-120 { padding-top: 120px } .pt-130 { padding-top: 130px } .pt-140 { padding-top: 140px } .pt-150 { padding-top: 150px } /************************* Padding right *************************/ .pr-0 { padding-right: 0 } .pr-10 { padding-right: 10px } .pr-15 { padding-right: 15px } .pr-20 { padding-right: 20px } .pr-30 { padding-right: 30px } .pr-40 { padding-right: 40px } .pr-50 { padding-right: 50px } .pr-60 { padding-right: 60px } .pr-70 { padding-right: 70px } .pr-80 { padding-right: 80px } .pr-90 { padding-right: 90px } .pr-100 { padding-right: 100px } .pr-110 { padding-right: 110px } .pr-120 { padding-right: 120px } .pr-130 { padding-right: 130px } .pr-140 { padding-right: 140px } /************************* Padding bottom *************************/ .pb-0 { padding-bottom: 0 } .pb-10 { padding-bottom: 10px } .pb-15 { padding-bottom: 15px } .pb-20 { padding-bottom: 20px } .pb-30 { padding-bottom: 30px } .pb-40 { padding-bottom: 40px } .pb-50 { padding-bottom: 50px } .pb-55 { padding-bottom: 55px } .pb-60 { padding-bottom: 60px } .pb-70 { padding-bottom: 70px } .pb-80 { padding-bottom: 80px } .pb-85 { padding-bottom: 85px } .pb-90 { padding-bottom: 90px } .pb-100 { padding-bottom: 100px } .pb-110 { padding-bottom: 110px } .pb-120 { padding-bottom: 120px } .pb-130 { padding-bottom: 130px } .pb-140 { padding-bottom: 140px } .pb-150 { padding-bottom: 150px } /************************* Padding left *************************/ .pl-0 { padding-left: 0 } .pl-10 { padding-left: 10px } .pl-15 { padding-left: 15px } .pl-20 { padding-left: 20px } .pl-30 { padding-left: 30px } .pl-40 { padding-left: 40px } .pl-50 { padding-left: 50px } .pl-60 { padding-left: 60px } .pl-70 { padding-left: 70px } .pl-80 { padding-left: 80px } .pl-90 { padding-left: 90px } .pl-100 { padding-left: 100px } .pl-110 { padding-left: 110px } .pl-120 { padding-left: 120px } .pl-130 { padding-left: 130px } .pl-140 { padding-left: 140px } .pl-150 { padding-left: 150px } /*************************** Page section padding ****************************/ .ptb-0 { padding: 0 } .ptb-10 { padding: 10px 0 } .ptb-20 { padding: 20px 0 } .ptb-30 { padding: 30px 0 } .ptb-40 { padding: 40px 0 } .ptb-50 { padding: 50px 0 } .ptb-60 { padding: 60px 0 } .ptb-70 { padding: 70px 0 } .ptb-80 { padding: 80px 0 } .ptb-90 { padding: 90px 0 } .ptb-100 { padding: 100px 0 } .ptb-110 { padding: 110px 0 } .ptb-120 { padding: 120px 0 } .ptb-130 { padding: 130px 0 } .ptb-140 { padding: 140px 0 } .ptb-150 { padding: 150px 0 } /*************************** Page section margin ****************************/ .mtb-0 { margin: 0 } .mtb-10 { margin: 10px 0 } .mtb-15 { margin: 15px 0 } .mtb-20 { margin: 20px 0 } .mtb-30 { margin: 30px 0 } .mtb-40 { margin: 40px 0 } .mtb-50 { margin: 50px 0 } .mtb-60 { margin: 60px 0 } .mtb-70 { margin: 70px 0 } .mtb-80 { margin: 80px 0 } .mtb-90 { margin: 90px 0 } .mtb-100 { margin: 100px 0 } .mtb-110 { margin: 110px 0 } .mtb-120 { margin: 120px 0 } .mtb-130 { margin: 130px 0 } .mtb-140 { margin: 140px 0 } .mtb-150 { margin: 150px 0; } /************************* Extra class *************************/ .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10 { float: left; } .col-1 { width: 10%; } .col-2 { width: 20%; } .col-3 { width: 25%; } .col-4 { width: 35%; } .col-5 { width: 50%; } .col-6 { width: 65%; } .col-7 { width: 70%; } .col-8 { width: 80%; } .col-9 { width: 90%; } .col-10 { width: 100%; } /************************************* Background variation set **************************************/ .white-bg { background: #f7f7f7 !important; } .gray-bg { background: #F9F9F9 !important; } .blue-bg { background: #ff5252 !important; } .default-bg { background: #ff5252!important; } .transparent-bg { background: transparent !important; } .bg-opacity-black-10:before, .bg-opacity-black-20:before, .bg-opacity-black-30:before, .bg-opacity-black-40:before, .bg-opacity-black-50:before, .bg-opacity-black-60:before, .bg-opacity-black-70:before, .bg-opacity-black-80:before, .bg-opacity-black-90:before, .bg-opacity-white-10:before, .bg-opacity-white-20:before, .bg-opacity-white-30:before, .bg-opacity-white-40:before, .bg-opacity-white-50:before, .bg-opacity-white-60:before, .bg-opacity-white-70:before, .bg-opacity-white-80:before, .bg-opacity-white-90:before { content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .bg-opacity-black-10:before { background: rgba(0, 0, 0, 0.1); } .bg-opacity-black-20:before { background: rgba(0, 0, 0, 0.2); } .bg-opacity-black-30:before { background: rgba(0, 0, 0, 0.3); } .bg-opacity-black-40:before { background: rgba(0, 0, 0, 0.4); } .bg-opacity-black-50:before { background: rgba(0, 0, 0, 0.5); } .bg-opacity-black-60:before { background: rgba(0, 0, 0, 0.6); } .bg-opacity-black-70:before { background: rgba(0, 0, 0, 0.7); } .bg-opacity-black-80:before { background: rgba(0, 0, 0, 0.8); } .bg-opacity-black-90:before { background: rgba(0, 0, 0, 0.9); } .bg-opacity-white-10:before { background: rgba(255, 255, 255, 0.1); } .bg-opacity-white-20:before { background: rgba(255, 255, 255, 0.2); } .bg-opacity-white-30:before { background: rgba(255, 255, 255, 0.3); } .bg-opacity-white-40:before { background: rgba(255, 255, 255, 0.4); } .bg-opacity-white-50:before { background: rgba(255, 255, 255, 0.5); } .bg-opacity-white-60:before { background: rgba(255, 255, 255, 0.6); } .bg-opacity-white-70:before { background: rgba(255, 255, 255, 0.7); } .bg-opacity-white-80:before { background: rgba(255, 255, 255, 0.8); } .bg-opacity-white-90:before { background: rgba(255, 255, 255, 0.9); } .bg-1 { background: url(../img/bg/bg-1.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; } .bg-2 { background: url(../img/bg/bg-2.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; } .bg-4 { background: url(../img/about/1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } .bg-6 { background: url(../../images/bg/6.jpg); } .bg-7 { background: url(../../images/bg/7.jpg); } .bg-8 { background: url(../../images/bg/8.jpg); } .bg-9 { background: url(../../images/bg/9.jpg); } .bg-10 { background: url(../../images/bg/10.jpg); } .pattern-bg { background: url(../../images/pattern/pattern-bg.png) repeat; background-position: top right; background-color: rgba(236, 239, 247, 1); } .separator { position: relative; display: inline-block; clear: both; background: rgba(0, 0, 0, 0.07) none repeat scroll 0 0; bottom: 0; height: 1px; width: 33%; } .separator::before { background: #ff5252 none repeat scroll 0 0; content: ""; display: block; height: 1px; position: absolute; transition: all 0.4s ease 0s; width: 100px; } .section-title:hover .separator::before { width: 75%; } .separator i { background: #ECEFF7 none repeat scroll 0 0; color: #ff5252; display: block; font-size: 20px; height: 40px; line-height: 40px; position: absolute; text-align: center; top: -20px; width: 40px; } .separator span { background: #ffffff none repeat scroll 0 0; border: 1px solid #ff5252; border-radius: 100%; display: block; height: 10px; position: absolute; top: -5px; width: 10px; } .separator i, .separator span { left: 0; transform: none; } .text-center .separator::before, .text-center .separator i, .text-center .separator span { left: 50%; transform: translateX(-50%); } .text-right .separator::before, .text-right .separator i, .text-right .separator span { left: auto; transform: none; right: 0; }