@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body {
    font-size: 1.5em;
    color: #000;
    background: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: #2c9ab7;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
}

p {
    font-family:'Lato',sans-serif;
    font-weight: 300;
    font-size: 1.1em;
    margin-bottom: 15px;
}

img {
    max-width: 100%;
    height: auto;
}

a:hover, a:focus {
    color: #35abdb;
    text-decoration: none;
    outline: none;
}

a.black:link, a.black:visited {
    color: #000000 !important;
    text-decoration: none;
    outline: none;
}

a.black:hover, a.black:focus {
    color: #0072AB !important;
    text-decoration: none;
    outline: none;
}

.center {
    text-align: center;
}

/* Hero Section */
#hero {
    padding-top: 20px;
    padding-bottom: 10px;
}

.wbailogo {
    width: 230px;
    height: auto;
    padding-bottom: 15px;
}

#hero h1 {
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    line-height: 38px;
    padding-bottom: 30px;
    font-weight: 900;
    color: #000;
}

#hero p {
    font-size: 16px;
    font-weight: 400;
}

/* Resources Section */
#resources {
    padding-top: 20px;
    background-color: #fff;
}

#resources h3 {
    margin-top: 0px;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    font-family: 'Lato', sans-serif;
}

#resources p {
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
}

/* Well and Card Styles */
.well {
    min-height: 20px;
    padding: 0px;
    margin-bottom: 20px;
    background-color: #f5f7f9;
    border: 1px solid #E1E4ED;
    border-radius: 6px;
    -webkit-box-shadow: none;
    box-shadow: none;
    overflow: hidden;
}

.blogpaneinner {
    padding: 15px;
}

/* Image Button Container */
.imgbuttoncontainer {
    position: relative;
    width: 100%;
}

.imgbuttoncontainer img {
    width: 100%;
    height: auto;
}

.imgbuttoncontainer .playbutton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    padding: 2px 10px 2px 14px !important;
    border-radius: 40px !important;
}

.btn-casestudy {
    background: rgba(58, 58, 58, 0.54);
    font-size: 45px;
    color: #000;
    filter: drop-shadow(0px 3.985px 3.985px rgba(0, 0, 0, 0.25));
}

.btn-casestudy:hover,
.btn-casestudy:focus,
.btn-casestudy.focus,
.btn-casestudy:active,
.btn-casestudy.active {
    color: #fff;
    background: #52bad5;
    border-color: #52bad5;
    filter: drop-shadow(0px 3.985px 3.985px rgba(0, 0, 0, 0.25));
}

/* Row Flex */
.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
    margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
    width:100%;
}

.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}

.flex-grow {
    display: flex;
    -webkit-flex: 2;
    flex: 2;
}