:root{
    /*--------------------------------------------------------------------------------------*\
    | Content Width
    \*--------------------------------------------------------------------------------------*/
        --content-width-smallest: 95%;
        --content-width-small: 900px;
        --content-width-medium: 1200px;
        --content-width-big: 1800px;
        --content-width-full: 100%;
    
    
    /*--------------------------------------------------------------------------------------*\
    | Padding Content Width
    \*--------------------------------------------------------------------------------------*/
        --content-padding-huge: 120px;
        --content-padding-big: 60px;
        --content-padding-medium: 30px;
        --content-padding-small: 15px;
        --content-padding-smallest: 5px;
    
    /*--------------------------------------------------------------------------------------*\
    | Custom Colors
    \*--------------------------------------------------------------------------------------*/
        --color-black:#1D1D1D;
        --color-accent-black: #343A40;
		--color-accent-blue: #2936bd;
        --color-white: #fbfefb;
        --color-gray:#4b5a5fc4;
        --color-blue: #2835BC;
        --color-light-blue: #357AAD;
		--color-light-gray: #ebeeed;
	
        --clip-path-left: polygon(0 0, 100% 0, 100% 100%, 20px 100%);
        --clip-path-right: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0% 100%);
        --clip-path-both: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 20px 100%);
        --clip-path-both-reverse: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}
    

/*--------------------------------------------------------------------------------------*\
| Character Styles
\*--------------------------------------------------------------------------------------*/
body{
    font-family: 'Crimson Pro', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: var(--color-black);
    letter-spacing: 0px;
}

h1 {
    font-family: 'Crimson Pro', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    letter-spacing: 3px;
    color: var(--color-pearl);
    margin-top: 0;
}

h2 {
    font-family: 'Crimson Pro', serif;
    font-style: normal;
	font-weight: 600;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0px;
    color: var(--color-darkest-blue);
    margin-top: 1em;   
}
h2:first-child{
	margin-top: 0;   
}
h3 {
    font-family: 'Crimson Pro', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-darkest-blue);
	margin-bottom: var(--content-padding-small);
    margin-top: 0;
}

h4 {
    font-family: 'Crimson Pro', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-darkest-blue);
    margin-top: 0;
    margin-bottom: var(--content-padding-small);
	text-transform: uppercase;
}
h5 {
    font-family: 'Crimson Pro', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.33;
    letter-spacing: 20;
    color: var(--color-darkest-blue);
    margin-top: 0;
}
h6 {
    font-family: 'Crimson Pro', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.33;
    letter-spacing: 20;
    color: var(--color-black);
    margin-top: 0;
}
p {
    font-family: 'Crimson Pro', serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0px;
    color: var(--color-black);
    margin-top: 0;
}
figcaption{
    font-family: 'Crimson Pro', serif;
    font-weight: 300;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0px;
	font-weight: 300;
    color: var(--color-black);
    margin-top: 0;
}
a.wp-block-button__link, a{
    font-family: 'Crimson Pro', serif;
    text-decoration: none;
    color: inherit;
    line-height: 1.2;
    font-size: 18px;
    cursor: pointer;
}
ul{
    margin-left: 1em;
    padding-left: 0;
}
li {
    font-family: 'Crimson Pro', serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0px;
    color: var(--color-black);
    margin-top: 0;
}
ul.has-white-color li{
    color: var(--color-white);
}



/*--------------------------------------------------------------------------------------*\
| Block Color
\*--------------------------------------------------------------------------------------*/
.has-accent-black-background-color {
    background-color: var(--color-accent-black);
}
.has-accent-blue-background-color {
    background-color: var(--color-accent-blue);
}
.has-black-background-color {
    background-color: var(--color-black);
}
.has-white-background-color {
    background-color: var(--color-white);
}
.has-gray-background-color{
    background-color: var(--color-gray);
}

.has-blue-background-color {
    background-color: var(--color-accent-blue);
}
.has-light-blue-background-color {
    background-color: var(--color-light-blue);
}
.has-creme-background-color {
    background-color: var(--color-light-gray);
}
.has-light-gray-background-color {
    background-color: var(--color-light-gray);
}


/*--------------------------------------------------------------------------------------*\
| Text Color
\*--------------------------------------------------------------------------------------*/
.has-accent-black-color {
    color: var(--color-accent-black);
}
.has-accent-blue-color {
    color: var(--color-accent-blue);
}
.has-black-color {
    color: var(--color-black);
}
.has-white-color {
    color: var(--color-white) !important;
}
.has-gray-color{
    color: var(--color-gray);
}

.has-blue-color {
    color: var(--color-accent-blue);
}
.has-light-blue-color {
    color: var(--color-light-blue);
}
.has-accent-blue-color {
    color: var(--color-accent-blue);
}
.has-light-gray-color {
    color: var(--color-gray);
}.has-creme-color {
    color: var(--color-light-gray);
}




/*--------------------------------------------------------------------------------------*\
| Variables Media Queries
\*--------------------------------------------------------------------------------------*/
@media screen and (max-width: 1200px){
    h1{
        font-size: 40px;
        font-weight: bold;
    }
    h2{
        font-size: 32px;
        font-weight: bold;
    }
    h3{
        font-size: 24px;
        font-weight: bold;
    }
    h4, h5{
        font-size: 24px;
    }
      body footer p,  body header p,  body .entry-content p{
        font-size: 18px ;
    }
     body a{
        font-size: 17px;
    }
     body li{
        font-size: 15px;
    }
}

@media screen and (max-width: 1000px){
     body .entry-content a, header a{
        font-size: 17px;
    }
     body li{
        font-size: 17px;
    }
}
@media screen and (max-width: 768px){
	h1:not(:first-child), h2:not(:first-child), h3:not(:first-child), h4:not(:first-child), h5:not(:first-child), h6:not(:first-child){
		margin-top: 1em;
	}
}
@media screen and (max-width: 580px){
    h1{
        font-size: 40px;
    }
    h2{
        font-size: 35px;
    }
    h3{
        font-size: 24px;
    }
    h4, h5{
        font-size: 19px;
    }
    body footer p,  body header p,  body .entry-content p{
        font-size: 19px !important;
    }
	figcaption{
		font-size: 19px;
	}
    a.wp-block-button__link, a{
        font-size: 19px !important;
    }
    li{
        font-size: 19px !important;
    }
}

