Ecommerce Website Designer | Younique Creation Web and Print Design

This post

/* Typography*/

body{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 500;
    color: #000000;
}
p{
    margin-bottom: 15px
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4{
    font-family: 'Komika Axis', sans-serif;
    line-height:1.3em;
    color:#5b44ca;
}
h1, .h1{
    font-size:50px;
}
h2, .h2{
    font-size:45px;
}
h3, .h3{
    font-size:35px;
}
h4, .h4{
    font-size:20px;
}
 a {
    color: #5b44ca;
}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a,
h1 a:active, .h1 a:active, h2 a:active, .h2 a:active, h3 a:active, .h3 a:active, h4 a:active, .h4:active{
    color: #5b44ca !important;
    text-decoration: none !important;
}
h1 a:hover, .h1 a:hover, h2 a:hover, .h2 a:hover, h3 a:hover, .h3 a:hover, h4 a:hover, .h4 a:hover{
    color: #795cff !important;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active { 
    text-decoration: none; 
}
.header-menu a {
    font-weight: bold;
}
ul, ol{
    margin-bottom: 15px;
} 
li{
    margin-bottom: 5px
}
ol li{
    margin-bottom: 15px
}
.subtitle{
    font-family:'Suplexmentary Comic NC', sans-serif;
    font-size: 25px;
    line-height: 1em;
}
.dark-section, .dark-section p, .dark-section a{
    color: #ffffff;
}
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4{
    color:#ffbe1d;
}
.blue-heading, .blue-heading h1, .blue-heading h2, .blue-heading h3, .blue-heading h4,
.homepage-header .blue-heading h1 {    
    color: #1a5375;
}
.light-blue-heading, .light-blue-heading h1, .light-blue-heading h2, .light-blue-heading h3, .light-blue-heading h4,
.homepage-header .light-blue-heading h1 {
    color: #3de1ff;
}
.purple-heading, .purple-heading h1, .purple-heading h2, .purple-heading h3, .purple-heading h4,
.homepage-header .purple-heading h1 {
    color: #5b44ca;
}
.yellow-heading, .yellow-heading h1, .yellow-heading h2, .yellow-heading h3, .yellow-heading h4,
.homepage-header .yellow-heading h1 {
    color: #ffbe1d;
}
.green-heading, .green-heading h1, .green-heading h2, .green-heading h3, .green-heading h4,
.homepage-header .green-heading h1 {
    color: #0e7763;
}
.quote-name{
   font-size: 24px; 
}
.quote-title{
   font-size: 14px;
   text-transform: uppercase;
   margin-top: -15px;
}
.phone-number{
    font-size: 40px;
    font-weight: bold;
}
.phone-number a{
    color: #1a5375;
}
.email-web-address{
    font-size: 24px;
}
.email-web-address a{
    color: #1a5375;
}
.comments-area .comment-list .reply a:hover, .comments-area .comment-list .reply a:focus, .comment-content p a, .comment-content ol a, .comment-content ul a, .comment-content table a, .comment-content datalist a, .comment-content blockquote a, .comment-content dl a, .comment-content address a, .entry-content p a, .entry-content ol a, .entry-content ul a, .entry-content table a, .entry-content datalist a, .entry-content blockquote a, .entry-content dl a, .entry-content address a{
    border-bottom: none;
}
.entry-content p a:hover, .comment-content p a:hover, .entry-content ol a:hover, .comment-content ol a:hover, .entry-content ul a:hover, .comment-content ul a:hover, .entry-content table a:hover, .comment-content table a:hover, .entry-content datalist a:hover, .comment-content datalist a:hover, .entry-content blockquote a:hover, .comment-content blockquote a:hover, .entry-content dl a:hover, .comment-content dl a:hover, .entry-content address a:hover, .comment-content address a:hover, .entry-content p a:focus, .comment-content p a:focus, .entry-content ol a:focus, .comment-content ol a:focus, .entry-content ul a:focus, .comment-content ul a:focus, .entry-content table a:focus, .comment-content table a:focus, .entry-content datalist a:focus, .comment-content datalist a:focus, .entry-content blockquote a:focus, .comment-content blockquote a:focus, .entry-content dl a:focus, .comment-content dl a:focus, .entry-content address a:focus, .comment-content address a:focus {
    color: #5b44ca;
}

/* General Styles */

.sticky-wrapper.is-sticky .menu-wrap a{
    color:#ffffff
}
.sticky-wrapper.is-sticky .menu-wrap a:hover, .sticky-wrapper.is-sticky .menu-wrap li.current-menu-item a{
    color:#ffbe1d !important
}
.alignleft {
    float: left;
    margin-right: 15px;
    margin-bottom: 5px;
}
.alignright {
    float: right;
    margin-left: 15px;
    margin-bottom: 5px;
}
a img:hover {
  opacity: .8;
}
.homepage-header{
    padding-top: 170px;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.4em
}
@media (max-width: 784px) {
.homepage-header{
    padding-top: 60px;
 }
}
.homepage-header .subtitle{
    font-size: 35px;
    line-height: 1em
}
.homepage-header h1{
    font-size: 45px;
    color: #ffbe1d;
}
.homepage-header-left{
    z-index: 1;
    margin-bottom: -340px
}
.page-header, .portfolio-header{
    padding-top: 200px;
    font-size: 16px;
    margin-top: 0;
}
.page-header2{
    padding-top: 250px;
}
@media (max-width: 784px) {
.page-header, .portfolio-header{
    padding-top: 40px;
 }
 .page-header2{
    padding-top: 70px;
 }
}
.page-header h1, .portfolio-header h1{
    font-size: 35px;
}
.portfolio-header h1{
    color: #ffbe1d;
}
.page-header .subtitle{
    font-size: 25px;
    line-height: 1em
}
.portfolio-header{
    color: #ffffff;
}
.nav-footer{
    padding: 50px 0 100px;
}
.flawsome-buttons{
    color:#ffffff !important;
    max-width: 900px;
    margin-left: auto;
    font-family: 'Suplexmentary Comic NC', sans-serif;
    margin-top: -50px;
    float: right;
}
.flawsome-button{
  margin-top: 8px
}
.flawsome-buttons .alignnone {
    margin: 5px 0 0 0;
}
.contact-form-section{
    background: url(/wp-content/uploads/Man-on-bed-with-female-Psychiatrist.png) no-repeat bottom left !important;
    padding-bottom: 100px;
}
.free-delivery .vc_column_container>.vc_column-inner{
    padding: 0 5px;
}
.free-delivery.vc_row.vc_row-flex{
    margin-bottom: 10px;
}
.free-delivery {
    color: #808080;
    font-size: 15px;
    border-radius: 5px;
    margin-top:8px;
    padding: 15px 5px 2px;
    line-height:1.2em;
    max-width: 400px;
    margin: 10px auto 5px;
    background: #f3f3f3;
    border: solid 1px #e2e2e2;
}
.free-delivery h4{
    font-family:'Montserrat';
    text-transform: uppercase;
    color: #808080;
    font-size: 23px;
    font-weight:600;
    margin-bottom:0;
    line-height:1.1em;
    font-size: 22px !important
}

/* Blog Styles */

.vc_gitem-post-data h4{
    font-size: 25px;
}

/* Buttons */

.vc_general.vc_btn3 {
    font-family: 'Komika Axis';
    font-weight: normal;
}
.vc_btn3.vc_btn3-size-md {
    font-size: 25px;
    padding: 5px 30px 10px;
}
.vc_btn3.vc_btn3-color-orange, .vc_btn3.vc_btn3-color-orange.vc_btn3-style-flat {
    background-color: #ed7f00;
}
.vc_btn3.vc_btn3-color-orange:hover, .vc_btn3.vc_btn3-color-orange.vc_btn3-style-flat:hover {
    background-color: #ff9c29;
}
.vc_btn3.vc_btn3-size-md .vc_btn3-icon {
    font-size: 30px;
    line-height: 14px;
}
.vc_btn3.vc_btn3-size-md.vc_btn3-icon-right:not(.vc_btn3-o-empty) {
    padding-right: 60px;
}
.vc_btn3.vc_btn3-size-md.vc_btn3-icon-left:not(.vc_btn3-o-empty) {
    padding-left: 60px;
}
.vc_btn3.vc_btn3-color-violet, .vc_btn3.vc_btn3-color-violet.vc_btn3-style-flat{
    background:#5b44ca;
}
.vc_btn3.vc_btn3-color-violet:hover, .vc_btn3.vc_btn3-color-violet.vc_btn3-style-flat:hover{
    background:#6e51f9;
}
.vc_btn3.vc_btn3-color-grey.vc_btn3-style-outline{
    border: none;
    padding-top: 0;
    padding-bottom: 0;
    color: rgba(255, 255, 255, .4);
}
.vc_btn3.vc_btn3-color-grey.vc_btn3-style-outline:hover{
    border: none;
    color: #ffbe1d;
    background: none;
}
.vc_btn3.vc_btn3-size-sm {
    font-size: 20px;
    font-family: 'Suplexmentary Comic NC', sans-serif !important;
    text-transform: uppercase;
    font-weight: bold !important;
    letter-spacing: 1px;
}
.flawsome-woocom-buttons{
    max-width: 450px;
    margin: 0 auto !important;
}
.flawsome-woocom-buttons .vc_column_container>.vc_column-inner, .flawsome-woocom-buttons2 .vc_column_container>.vc_column-inner {
    padding-left: 5px;
    padding-right: 5px;
}
.flawsome-woocom-buttons2 {
    max-width: 300px;
    margin: 20px auto 0 !important;
}

/* Visual Composer */

.vc_row.vc_row-flex {
    margin-bottom: 40px;
}
.wpb_button, .wpb_content_element, ul.wpb_thumbnails-fluid>li {
    margin-bottom: 20px;
}

/* Accordion */

.vc_tta-color-white.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-title>a {
    color: #000 !important;
    font-family: 'Suplexmentary Comic NC';
    font-weight: normal;
    font-size: 20px;
    line-height: 1.3em;
}
.vc_tta-color-white.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-title>a:hover {
    color: #5b44ca !important;
}
.vc_tta-color-white.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-body, .vc_tta-color-white.vc_tta-style-flat .vc_tta-panel.vc_active .vc_tta-panel-heading {
    background-color: transparent !important;
}
.vc_tta-color-white.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-heading {
    background-color: transparent !important;
}
.vc_tta-color-white.vc_tta-style-flat .vc_tta-panel.vc_active .vc_tta-panel-title>a{
    color: #5b44ca !important;
}
.vc_tta.vc_general .vc_tta-panel {
    border-bottom: 2px solid #ffbf1d !important;
}
.vc_tta.vc_general .vc_tta-panel:last-child {
    border-bottom: none !important;
}
.vc_tta.vc_general .vc_tta-panel-title>a {
    padding: 20px 0 !important;
}
.vc_tta.vc_general .vc_tta-panel-body {
    padding: 0 0 20px !important;
}
.vc_tta.vc_general .vc_tta-icon {
    font-size: 35px !important;
    color: #5b44ca !important;
}
    
/* Max Width Sections */

.max-width-500{
    max-width:500px;
    margin: 0 auto
}
.max-width-520{
    max-width:520px;
    margin: 0 auto !important;
}
.max-width-650{
    max-width:650px;
    margin: 0 auto
}
.max-width-750{
    max-width:750px;
    margin: 0 auto
}
.max-width-800{
    max-width:800px;
    margin: 0 auto
}
.max-width-850{
    max-width:850px;
    margin: 0 auto
}
.max-width-900{
    max-width:900px;
    margin: 0 auto
}

/* Contact Form */

.wpcf7 p{
  margin-bottom:12px;
}
input, select, textarea, .select2-container .select2-choice{
    border: none;
    background: #f0f0f0;
    padding: 15px;
    border-radius: 5px;
    font-size: 16px;
    color:#000000;
    width: 100%
}
.wpcf7-form input, .wpcf7-form select, .wpcf7-form textarea{
    background: #ffffff;  
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  background: #ed7f00;
  border:none;
  color:#ffffff;
  border-radius: 50px;
  margin-top: 8px;
  font-family: 'Komika Axis';
  font-weight: normal;
  font-size: 25px;
  padding: 15px 30px 20px;
  text-align: center;
}
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  width: 100%;
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background: #ff9c29;
}
span.wpcf7-list-item {
    margin-left: 0.5em;
    display: block;
    margin-bottom: 5px;
}
label {
    color: #000000;
    font-weight: normal;
}
input::-webkit-input-placeholder {
    color: #424b56
}
input::-moz-placeholder {
    color: #424b56
}
input:-moz-placeholder { 
    color: #424b56
}
input:-ms-input-placeholder { 
    color: #424b56
}
textarea::-webkit-input-placeholder {
    color: #424b56
}
textarea::-moz-placeholder {
    color: #424b56
}
textarea:-moz-placeholder { 
    color: #424b56
}
textarea:-ms-input-placeholder { 
    color: #424b56
}
div.wpcf7-validation-errors {
    background: #f7e700;
    padding: 10px 20px;
    border-radius: 10px;
}
div.wpcf7-mail-sent-ng{
    background: #ff0000;
    padding: 10px 20px;
    border-radius: 10px;
}
div.wpcf7-mail-sent-ng{
    background: #398f14;
    padding: 10px 20px;
    border-radius: 10px;
}
div.wpcf7-spam-blocked {
    background: #ffa500;
    padding: 10px 20px;
    border-radius: 10px;
}

/* WooCommerce Styles */

.woocommerce #container-primary, .woocommerce-page #container-primary, .woocommerce-cart #container-primary, .woocommerce-checkout #container-primary{
    padding-top:30px;
}
.woocommerce div.product {
    max-width: 850px;
    margin: 0 auto;
}
.woocommerce div.product div.images img {
    max-width: 320px !important;
    margin: 0 auto  !important;
}
.woocommerce div.product .woocommerce-tabs .panel, .woocommerce #content div.product .woocommerce-tabs .panel, .woocommerce-page div.product .woocommerce-tabs .panel, .woocommerce-page #content div.product .woocommerce-tabs .panel {
    background: #f3f3f3 !important;
    border: solid 1px #e2e2e2 !important;
    padding: 15px 30px 25px !important;
    border-radius: 20px !important;
}
.woocommerce div.product .woocommerce-tabs .panel h2, .woocommerce-page div.product .woocommerce-tabs .panel h2, .woocommerce-page #content div.product .woocommerce-tabs .panel h2 {
    font-family:'Suplexmentary Comic NC', sans-serif;
    font-size: 40px;
    line-height: 1.4em;
    text-align: center;
    margin-bottom: 20px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: none;
}
.woocommerce div.product .product_title {
    font-size: 32px;
    text-align: center;
    margin-bottom: 15px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: #f39e00;
    font-family: 'Suplexmentary Comic NC', sans-serif;
    font-size: 35px;
    margin-bottom: 25px;
    text-align: center;
}
.woocommerce div.product p.price del, .woocommerce div.product span.price del {
    opacity: 1;
    color: #ffbe1d;
}
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins {
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Komika Axis';
    font-size: 35px;
}
.woocommerce span.onsale {
    display: none;
}
.woocommerce div.product form.cart, .woocommerce div.product p.cart {
    max-width: 320px;
    margin: 15px auto;
}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    background-color: #ed7f00;
}
.woocommerce div.product form.cart .woocommerce #respond input#submit, 
.woocommerce div.product form.cart .woocommerce a.button, 
.woocommerce div.product form.cart .woocommerce button.button, 
.woocommerce div.product form.cart .woocommerce input.button {
    width: 100%;
}
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button {
    font-size: 20px;
    line-height: 1em;
    padding: 14px 30px 18px;
    border-radius: 30px;
    font-weight: normal;
    background-color: #ebe9eb;
    font-family: 'Komika Axis', sans-serif;
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
    background-color: #ff9c29;
    color: #fff;
}
.woocommerce .quantity .qty {
    margin-right: 15px;
}
.woocommerce-message a.button{
  background: transparent !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: #ed7f00;
}
.woocommerce-message a.button:hover{
  color: #ed7f00;
  text-decoration: underline
}
.woocommerce div.product form.cart .button {
    width: 100%;
    max-width: 240px;
}
.entry-content table tr th, .comment-content table tr th, .entry-content table tr td, .comment-content table tr td {
    border: none;
}
#add_payment_method table.cart img, .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img {
    width: 90px;
}
#add_payment_method table.cart input, .woocommerce-cart table.cart input, .woocommerce-checkout table.cart input {
    max-width: 250px;
}
#add_payment_method .wc-proceed-to-checkout a.checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {
    padding: 12px 10px 16px;
}
.woocommerce .cart-collaterals .cart_totals h2, 
.woocommerce-page .cart-collaterals .cart_totals h2{
    font-family: 'Suplexmentary Comic NC', sans-serif;
    font-size: 35px;
    color: #5b44ca;
}
.woocommerce-checkout h3{
    font-family: 'Suplexmentary Comic NC', sans-serif;
    font-size: 25px;
}
.select2-container {
    background: #f0f0f0;
    padding: 11px 5px;
    border-radius: 5px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 12px;
    right: 5px;
}
.select2-container--default .select2-selection--single {
    background-color: transparent;
    border: none;
}
.select2-dropdown {
    border: 1px solid #aaa !important;
    margin-top: -13px;
}
.woocommerce-checkout .amount {
    font-family: Montserrat;
}
#order_review_heading{
    margin-top:40px
}
#add_payment_method #payment ul.payment_methods li img, .woocommerce-cart #payment ul.payment_methods li img, .woocommerce-checkout #payment ul.payment_methods li img {
    padding: 0 12px;
    background: #ffffff;
    border-radius: 5px;
    margin-right: 10px;
}
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
    background: #f0f0f0;
    padding: 20px 0 0;
}
.woocommerce form .form-row .input-checkbox {
    width: 20px;
}
#add_payment_method #payment ul.payment_methods li input, .woocommerce-cart #payment ul.payment_methods li input, .woocommerce-checkout #payment ul.payment_methods li input {
    width: 20px;
}
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
    max-width: 320px;
}
.form-row.place-order{
    padding: 30px 20px !important
}
.woocommerce #payment .terms, .woocommerce #payment .wc-terms-and-conditions, .woocommerce-page #payment .terms, .woocommerce-page #payment .wc-terms-and-conditions {
    padding: 10px 1em 0 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
    padding-left: 5px;
}
.woocommerce-checkout #payment div.payment_box {
    background-color: #ffffff;
}
#add_payment_method #payment div.payment_box:before, .woocommerce-cart #payment div.payment_box:before, .woocommerce-checkout #payment div.payment_box:before {
    border: 1em solid #ffffff;
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
}
.woocommerce div.product form.cart .reset_variations, .woocommerce div.product form.cart .variations td.label{
    display: none !important;
}
.woocommerce-variation-price{
    text-align:center;
    margin:20px 0;
    padding-bottom: 15px;
    border-bottom:1px solid #cccccc
}
.product_meta{
    display: none
}

/* Mobile Responsiveness */

@media (max-width: 1008px) {
 .phone-number{
    font-size: 30px !important;
 }
 .email-web-address{
    font-size: 18px !important;
    text-align: center;
 }
 .contact-form-section{
    padding-bottom: 220px;
  }
}
@media (max-width: 768px) {
    .homepage-header-left{
    z-index: 1;
    margin-bottom: 0;
 }
  h3, .h3{
     font-size:26px;
 }
 .vc_btn3.vc_btn3-size-md {
    font-size: 18px;
    padding: 5px 30px 10px;
 }
.vc_btn3.vc_btn3-size-md .vc_btn3-icon {
    font-size: 20px;
 }
.vc_btn3.vc_btn3-size-md.vc_btn3-icon-right:not(.vc_btn3-o-empty) {
    padding-right: 50px;
 }
.mobile-hidden{
   display: none;   
 }
 h1, .h1, h2, .h2, h3, .h3, h4, .h4,
 .subtitle, 
 .vc_btn3-container.vc_btn3-left, .vc_btn3-container.vc_btn3-right {
    text-align: center;
 }
 .homepage-header h1 {
    font-size: 40px;
 }
 .flawsome-buttons{
  margin-top: 0;
 }
 .flawsome-buttons-title{
  margin: 15px 0 10px;   
 }
 .phone-number{
    font-size: 40px !important;
    text-align: center;
 }
.email-web-address{
    font-size: 24px !important;
    text-align: center;
 }
 .contact-form-section{
    background: none;
    padding-bottom: 0;
 }
}
@media (min-width: 769px) {
 .mobile-visible{
    display:none;
 }
}
@media (max-width: 520px) {
.phone-number{
    font-size: 30px !important;
 }
.email-web-address{
    font-size: 15px !important;
 }
}
@media (max-width: 380px) {
 .flawsome-button{
    text-align: center;
    display: block;
    margin: 0 auto;
 }
}
.jig-filterButtons, .jig-filterTags {
    margin-bottom: 20px;
}

.sticky-wrapper {
    z-index: 1000;
}
.header-single, header{
    z-index: 500;
}

Save

Write CSS OR LESS and hit save. CTRL + SPACE for auto-complete. Made by wpion.com