_elements.scss 8.15 KB

body {

    font-family: "PT Sans",sans-serif;
}

* {
    font-family: "PT Sans",sans-serif;
    -webkit-font-smoothing: antialiased;
}

a.skip-link {
    display: none;
    left:0;
    opacity: 0;
    &:focus {
        opacity: 1;
    }
}

p{
    font-size: 16px;
    line-height: 20px;
}

.entry-content{
h1, h2, h3, h4, h5, h6 {
    font-family: "PT Sans",sans-serif;
    font-weight: 700;
    margin: 0 0 10px;
    padding: 0;
}

h1 {
    font-size: 45px;
    line-height: 52px;
    margin-bottom: 24px;
}
h2{ 
    font-size: 35px;
    line-height: 42px;
}
h3 {
    font-size: 24px;
    line-height: 30px;
}
h4 {
    font-size: 20px;
    line-height: 25px;
}   

ul:not(.side-menu):not(.children){
    li{
        color: #4D4D4D;
        margin-bottom: 8px;
        padding: 3px 0 2px 10px;
        ul:not(.side-menu):not(.children){
            list-style: none;
            margin-top: 8px;
            li:before{
                content: "-";
                color: #4D4D4D;
                font-weight: bold;
                display: inline-block;
                width: 1.5em;
                margin-left: -1.5em;
            } 
         }
    }
}

ol{
    li{
        color: #4D4D4D;
        margin-bottom: 8px;
        padding: 3px 0 2px 10px;
       
    }
}

.wp-block-pullquote{

    padding: 2em 0;
    margin-bottom:80px;

}
blockquote{
    border-left: 1px solid #EE0000;
    border-right: 1px solid #EE0000;
    margin: 0 70px 80px 70px;
    @media only screen and (max-width: 782px) {
        margin: 0 20px;
    }
    position: relative;
    
    p{
    font-size: 20px;
    line-height: 26px;
    font-style: italic;
    margin: 0 0 20px;
    padding: 0px 25px ;
    color: #4D4D4D;
    text-align: left;
    margin-bottom: -20px;
        &::before{
            content: "“";
            display: block;
            position: absolute;
            top: 0px;
            padding-top: 10px;
            left: -20px;
            font-size: 80px;
            line-height: 55px;
            color: #e00;
            height: 30px;
            width: 30px;
            background-color: #fff;
        }
        &::after{
            content: "”";
            display: block;
            position: absolute;
            bottom: 0px;
            right: -7px;
            font-size: 80px;
            line-height: 55px;
            padding-top: 10px;
            color: #e00;
            height: 20px;
            background-color: #fff;

        }
    }
    cite{
        font-size: 16px;
        line-height: 20px;
        display: block;
        color: #4D4D4D;
        font-weight: bold;
        font-style: normal;
        text-align: right;
        position: absolute;
        right: 30px;
        bottom: -40px;
        @media only screen and (max-width: 782px) {
        max-width: 50%;
        bottom: -80px;
        }
        @media only screen and (max-width: 400px) {
            bottom: -80px;
            max-width: 70%;
        }
        float: right;
    }
}

.wp-block-image {
    margin-bottom:0;
    position: relative;
    overflow: hidden;
    .cap-wrapper {
        position: relative;
        max-height: 750px;
    }
    figcaption {
        position: absolute;
        bottom: 0;
        margin: 0;
        color:white !important;
        left: 0;
        transition: bottom .3s;
        z-index: 99;
        background: rgba(0,0,0,1);
        display: block;
        color: #fff;
        padding: 1rem 2rem;
        font-size: .75rem;
        max-width: 65%;
        @media only screen and (max-width: 782px) {
            max-width: 100%;
            background: rgba(0,0,0,1);
        }
        cursor: pointer;
        &:hover {
            bottom:0 !important;
        }
        &:before {
            content:'';
            background: url(../img/caption.svg);
            background-repeat: no-repeat;
            display: block;
            height: 2.188rem;
            width: 2.188rem;
            z-index: 9;
            position: absolute;
            left:0;
            top:-2.188rem;
        }
        .copy {
            p {
                color: #fff!important;
            }
        }
    }
}
 figure.wp-block-image img{
    margin-bottom: 0px;
}
}




.badge{
    position: absolute;
    right: 0%;
    top: -50px;
    box-shadow: 0px 3px 6px #0000003D;
    border-radius: 20px;
    width: auto;
    text-align: left;
    z-index: 99;
    padding: 10px 20px;
    background-color: #fff;
    @media only screen and (max-width: 782px) {
        padding: 10px 20px;
    }
        .badge-title{
        color: #000000;
        font-size: 16px;
        line-height:  30px;
        font-weight: bold;
        position: relative;
        display: inline-block;
        @media only screen and (max-width: 782px) {
            font-size: 0px;
            line-height:  0px;
        }
            &:after{
                content: "";
                display: inline-block;
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="clip-path"><rect id="Rectangle_249" data-name="Rectangle 249" width="4.525" height="13.303" fill="%23fff"/></clipPath></defs><g id="Group_1856" data-name="Group 1856" transform="translate(-1152 -683)"><circle id="Ellipse_2" data-name="Ellipse 2" cx="10" cy="10" r="10" transform="translate(1152 683)" fill="%234d4d4d"/><g id="Group_1855" data-name="Group 1855" transform="translate(1160.196 686.107)"><g id="Group_1854" data-name="Group 1854" transform="translate(0 0)" clip-path="url(%23clip-path)"><path id="Path_1493" data-name="Path 1493" d="M.308,5.032V4.579q.271-.109.615-.226t.706-.208q.362-.09.688-.154A3.073,3.073,0,0,1,2.9,3.928l.326.217-1.7,8.036H2.86v.471a3.262,3.262,0,0,1-.887.471,2.948,2.948,0,0,1-1,.181,1.009,1.009,0,0,1-.751-.235A.76.76,0,0,1,0,12.525a4.52,4.52,0,0,1,.054-.706q.054-.344.145-.76L1.466,5.213ZM1.774,1.014a.968.968,0,0,1,.29-.742A1.066,1.066,0,0,1,2.824,0a1.118,1.118,0,0,1,.8.271.968.968,0,0,1,.29.742.889.889,0,0,1-.29.706,1.168,1.168,0,0,1-.8.253,1.113,1.113,0,0,1-.76-.253.889.889,0,0,1-.29-.706" transform="translate(0 0)" fill="%23fff"/></g></g></g></svg>');
                background-repeat: no-repeat;
                background-size: contain;
                width: 20px;
                height: 20px;
                margin-left: 10px;
                top: 4px;
                position: relative;
                @media only screen and (max-width: 782px) {
                    margin-left: 0px;
                    top: 2px;
                }
            }
        }
    p{
        font-size: 14px;
        line-height:  18px;
        font-weight: normal;
        color: #000000;
        display: none;
        text-align: left;
        word-wrap: break-word;
        word-wrap: break-word;
        white-space: pre-line;

    }
    
}
.badge:hover{
    width: auto;
    height: auto;
    overflow: hidden;
    @media only screen and (max-width: 782px) {
        padding: 10px 20px;
    }
    .badge-title{
        display:block; 
        @media only screen and (max-width: 782px) {
            font-size:16px;
            line-height:  30px;
        }
        &:after{
           float: right;
           @media only screen and (max-width: 782px) {
            margin-left: 10px;
            top: 4px;
           }
        }
    }
    p{
        max-width: 270px;
        width: auto;
        height: auto;
        display: block;
     


    }
}



table {
    margin: 40px 0px;
    border: 4px solid #fff!important;
    background-color: #EAEDF1 !important;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    overflow-x: scroll;
  }
  table td, table th {
    border: 4px solid #FFFFFF !important;
    padding: 7px 7px;
    
  }
  table tbody td {
    font-size: 16px;
    line-height:  20px;
    padding: 10px 15px !important;
  }
  table tr:nth-child(even) {
    background: #FFFFFF !important;
  }
  table thead {
    background: #FFFFFF !important;
    border: 4px solid #fff!important;
  }
  table thead th {
    font-size: 16px;
    line-height:  20px;
    font-weight: bold;
    color: #000000;
    border: 4px solid #fff!important;
    padding: 10px 15px !important;
  }
  table thead th:first-child {
    border-left: none;
  }