Starter CSS

  1. Home
  2. Code Snippets
  3. Starter CSS
/* * * * * * FONTS * * * * * * */



/* * * * * * COLORS * * * * * */

body {
  --blue: #233d78;
  --light-blue: #5e84c3;
  --dark-blue: #0b1c35;
  --white: #ffffff;
  --black: #000000;
  --gray: #696c76;
  --light-gray: #c4c6c9;
  --green: #00824b;
  --light-green: #86c881;
  --yellow: #ffdd4f;
}

.white {
    color:var(--white) !important;
}

.black {
    color:var(--black) !important;
}

/* * * * * STARTER STYLES * * * * */

.display-none {
display:none;
}

.my-clearfix {
clear:both;
}

.appear-on-mobile {
display:none;
}

.appear-on-tablet {
display:none;
}

.no-margin {
margin:0px !important
}

.no-padding {
padding:0px !important
}

/* * * * * TYPOGRAPHY STYLES * * * * * */

.details-p {
font-style:italic;
font-size: .8em;
}

.italic {
font-style:italic;
}

.center, .center p {
    text-align:center;
}

.bold {
font-weight:600;
}

.normal-weight {
    font-weight:400;
}

.all-caps {
text-transform:uppercase;
}

.capitalize {
    text-transform:capitalize;
}

p {
    line-height:1.3em;
    margin: 0 0 .8rem;
}

.big-p {
font-size:1.2em;
}

h1, h2, h3, h4, h5, h6 {
    margin:0px;
    padding:0px;
    margin-bottom:5px;
    line-height:1em;
}

h1 {
    font-size:3em;
    font-weight:600;
}

h2 {
    font-size:2em;
    font-weight:600;
}

h3 {
    font-size:1.6em;
    font-weight:600;
}

h4 {
    font-size:1.6em;
}

h5 {
    font-size:1.3em;
    font-weight:600;
}

h6 {
    font-size:1.3em;
}

.small-heading {
    font-size:1.3em;
}

.medium-heading {
    font-size:1.6em;
}

.large-heading {
    font-size:2em;
}

/* * * * * MENU STYLES * * * * * */



/* * * * * FOOTER STYLES * * * * * */



/* * * * * GENERAL STYLES * * * * * */

.list-no-styles ul, .list-no-styles ul li {
    list-style:none;
    margin-left:0px;
    padding-left:0px;
    line-height:1em;
}

/* * * * * BUTTON STYLES * * * * * */

.full-width-button a.w-btn {
    width: 100% !important;
}

.full-width-button .w-btn-wrapper {
    width: 100% !important;
}

/* * * * * BLOG STYLES * * * * * */

/* * * * * ACCORDION/TAB STYLES * * * * * */


/* * * * * JOB MANAGER STYLES * * * * * */
/* fixes single page issues with WPBakery */

.type-job_listing .w-blogpost-preview, .type-job_listing .w-blogpost-meta {
    display:none;
}

.single_job_listing .meta, .job-manager-application-wrapper .application, .single_job_listing .application {
    max-width:1140px;
    margin:auto;
}

.job_description .l-section:first-child {
    padding-top:0px !important;
}

.single_job_listing .job_description {
    margin: 0;
}

.single_job_listing .application {
    margin-bottom:60px;
}


/* * * * * MEDIA QUERIES * * * * */

@media (min-width:320px) and (max-width:640px) {
/* smartphones, iPhone, portrait 480x320 phones */

.disappear-on-mobile {
display:none;
}

.appear-on-mobile {
display:initial;
}

}


@media (min-width:641px) and (max-width:780px) {
/* portrait tablets, portrait iPad, landscape e-readers, 
landscape 800x480 or 854x480 phones */

.disappear-on-tablet {
display:none;
}

.appear-on-tablet {
display:initial;
}

.full-width-tablet {
width:100%;
}

.half-width-tablet {
width:50%;
}

}


@media (min-width:961px) {
/* tablet, landscape iPad, lo-res laptops ands desktops */

.full-width-tablet-landscape {
width:100%;
}

.half-width-tablet-landscape {
width:50%;
}

}

@media (min-width:1025px) {
/* big landscape tablets, laptops, and desktops */

}

@media (min-width:1281px) {
/* hi-res laptops and desktops */

}
Menu