_elements.scss 8.22 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: 1rem;
    line-height: 1.25rem;
}

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

h1 {
    font-size: 2.8125rem;
    line-height: 3.25rem;
    margin-bottom: 1.5rem;
}
h2{ 
    font-size: 2.1875rem;
    line-height: 2.625rem;
}
h3 {
    font-size: 1.5rem;
    line-height: 1.875rem;
    text-transform: uppercase;
}
h4 {
    font-size: 1.25rem;
    line-height: 1.5625rem;
}   
h1+p{
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
}
p + ul{
    margin-top:.938rem !important;
}
p{
    a:hover{
        text-decoration: none;
    }
}
ul:not(.side-menu):not(.children){
    padding-left: 2rem;
    li{
        color: #4D4D4D;
        margin-top: 0.313rem;
        ul:not(.side-menu):not(.children){
            list-style: none;
            margin-top: 0.313rem;
            li:before{
                content: "-";
                color: #4D4D4D;
                font-weight: bold;
                display: inline-block;
                width: 1.5em;
                margin-left: -1.5em;
            } 
         }
    }
}

ol{
    padding-left: 2rem;
    li{
        color: #4D4D4D;
        margin-top: 0.313rem;
       
    }
}

.wp-block-pullquote{

    padding: 2em 0;
    margin-bottom:5rem;

}
blockquote{
    border-left: 0.0625rem solid #EE0000;
    border-right: 0.0625rem solid #EE0000;
    margin: 0 4.375rem 5rem 4.375rem;
    @media only screen and (max-width: 48.875rem) {
        margin: 0 1.25rem;
    }
    position: relative;
    
    p{
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-style: italic;
    margin: 0 0 1.25rem;
    padding: 0rem 1.5625rem ;
    color: #4D4D4D;
    text-align: left;
    margin-bottom: -1.25rem;
        &::before{
            content: "“";
            display: block;
            position: absolute;
            top: 0rem;
            padding-top: 0.625rem;
            left: -1.25rem;
            font-size: 5rem;
            line-height: 3.4375rem;
            color: #e00;
            height: 1.875rem;
            width: 1.875rem;
            background-color: #fff;
        }
        &::after{
            content: "”";
            display: block;
            position: absolute;
            bottom: 0rem;
            right: -0.4375rem;
            font-size: 5rem;
            line-height: 3.4375rem;
            padding-top: 0.625rem;
            color: #e00;
            height: 1.25rem;
            background-color: #fff;

        }
    }
    cite{
        font-size: 1rem;
        line-height: 1.25rem;
        display: block;
        color: #4D4D4D;
        font-weight: bold;
        font-style: normal;
        text-align: right;
        position: absolute;
        right: 1.875rem;
        bottom: -2.5rem;
        @media only screen and (max-width: 48.875rem) {
        max-width: 50%;
        bottom: -5rem;
        }
        @media only screen and (max-width: 25rem) {
            bottom: -5rem;
            max-width: 70%;
        }
        float: right;
    }
}

.wp-block-image {
    margin-bottom:0;
    position: relative;
    overflow: hidden;
    .cap-wrapper {
        position: relative;
        max-height: 46.875rem;
    }
    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: 48.875rem) {
            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: 0rem;
}
}




.badge{
    position: absolute;
    right: 0%;
    top: -3.125rem;
    box-shadow: 0rem 0.1875rem 0.375rem #0000003D;
    border-radius: 1.25rem;
    width: auto;
    text-align: left;
    z-index: 98;
    padding: 0.625rem 1.25rem;
    background-color: #fff;
    transition: 4s ease-in-out;
    color: #000000;
    @media only screen and (max-width: 48.875rem) {
        padding: 0.625rem 1.25rem;
    }
    span{
        display: block;
        margin-right: 20px;
        font-size: 1rem;
        line-height:  1.875rem;
        font-weight: bold;
        right: 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: 1.25rem;
        height: 1.25rem;
        margin-left: 0.625rem;
        top: 0.25rem;
        position: absolute;
        right: 10px;
        top: 15px;
        margin-left: 10px;
    }
    .badge_content{
        width: 0px;
        height: 0px;
        overflow: hidden;
        transition: 1s ease-in-out;
        max-width: 16.875rem;
        transition: 0.8s ease-in-out;
    }    
    p{
        width: 16.875rem;
        font-size: 0.875rem;
        line-height:  1.125rem;
        font-weight: normal;
        color: #000000;
        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: 48.875rem) {
        padding: 0.625rem 1.25rem;
    }

    .badge_content{
        width: 300px;
        height: 100px;
        overflow: hidden;
    }  
    
}



table:not(.ui-datepicker-calendar):not(#relevant-resources) {
    margin: 2.5rem 0rem;
    border: 0.25rem solid #fff!important;
    background-color: #EAEDF1 !important;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    overflow-x: scroll;
  
   td, table th {
    border: 0.25rem solid #FFFFFF !important;
    padding: 0.4375rem 0.4375rem;
    
  }
   tbody td {
    font-size: 1rem;
    line-height:  1.25rem;
    padding: 0.625rem 0.9375rem !important;
  }
   tr:nth-child(even) {
    background: #FFFFFF !important;
  }
   thead {
    background: #FFFFFF !important;
    border: 0.25rem solid #fff!important;
  }
   thead th {
    font-size: 1rem;
    line-height:  1.25rem;
    font-weight: bold;
    color: #000000;
    border: 0.25rem solid #fff!important;
    padding: 0.625rem 0.9375rem !important;
  }
   thead th:first-child {
    border-left: none;
  }
  

}