.btn-lm {
    font-size: 16pt;
    cursor: pointer;
    width: 200px;
    height: 6vh;
    color: white;
    text-align: left;
    padding: 3px 20px 0;
    margin: 25px 0;
    border-radius: 20px;
    border: 1px solid white;
    background-color: rgb(0,17,43, .5);
    transition: all 0.3s ease;
}

.btn-lm:hover {
    background-color: rgb(0,17,43,1);
}

#chevron {
    height: 20px;
    float: right;
    fill: white;
}

.column-container {
    display: inline;
}

.hover svg {
    fill: #000 !important;
    transition: .5s ease-in-out;;
}

.column {
    flex: 25%;
    padding: 20px;
    height: 40vh;
    margin: 1vw 2vw;
}

#column-1 {
    background-image: url(/img/iStock-801895196.jpg);
    background-blend-mode: color-burn;
    background-size: cover;
    background-position: center;
    background-color: #aaa;
}

#column-2 {
    background-image: url(/img/iStock-1144570796.jpg);
    background-blend-mode: color-burn;
    background-size: cover;
    background-position: center;
    background-color: #aaa;
}

#column-3 {
    background-image: url(/img/iStock-1143910377.jpg);
    background-blend-mode: color-burn;
    background-size: cover;
    background-position: center;
    background-color: #aaa;
}

.column-subheading {
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.callout-text {
    margin: 0 auto;
    width: 84%;
    margin-top: -100px;
}

h2.callout-title {
    color: white;
    font-size: 1.9em;
    line-height: 1em;
    text-shadow: 0px 3px 12px rgba(150, 150, 150, 1);
}

.e-text {
    color: #0066FF;
    font-weight: bold;
}

#kd-hero h2 {
    font-size: 4.2em;
    color: white;
    line-height: 1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.hero-subtitle {
    font-size: 1.3em;
    margin: 5px 0;
    width: 60%;
    font-family: 'Montserrat', sans-serif;
    color: white;

}

.item-1, .item-2,.item-3 {
    animation-duration: 30s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

.hero-button {
    margin: 17vw 0 0 5vw;
}

@keyframes anim-1 {
	0%, 8.3% { opacity: 0; }
  8.3%,25% { opacity: 1; }
  33.33%, 100% { opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { opacity: 0; }
  41.63%, 58.29% { opacity: 1; }
  66.66%, 100% { opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { opacity: 0; }
  74.96%, 91.62% { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

#kd-advantage-content {
    padding: 10vh 3vw;
}

.kd-advantage-header {
    padding: 0 5vw 3vw 2vw;
    display: inline-flex;
}

.kd-advantage-header-text {
    padding: 0 1vw;
    font-size: 16pt;
}

.kd-advantage-header-text span {
    color: #0066FF;
    font-size: 41pt;
}

#kd-hero {
    //background: #0066FF;
    color: white;
    position: relative;
    min-height: 45vmin;
    max-height: 960px;
    align-items: center;
    overflow: hidden;
    padding: 40px 0 80px;
    background-position: center;
    background-size: cover;
    //background-blend-mode: overlay;
    background-image: url(/img/hompage-hero.jpg);
}

.kd-hero-content {
    margin: 0;
    position: absolute;
    padding: 5vw 0 0 5vw;
}

#kd-slogan {
    position: relative;
    min-height: 15vh;
    max-height: 970px;
    align-items: center;
    background-position: right;
    background-repeat: no-repeat;
    overflow: hidden;
    background-image: url(/img/slogan-pattern.png);
    padding: 40px 0 80px;
}

.callout-container {
    width: 33.3%;
    float: left;
}

.callout-border {
    height: 30px;
    background: #0066FF;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 10px;
}

.image-container {
    width: 90%;
    margin: 0 auto;
}

.image-container img {
    width: 100%;
}

@media screen and (max-width: 1366px) {
    .hero-button {
        margin: 20vw 0 0 5vw;
    }
}

@media screen and (max-width: 1024px) {
    .hero-button {
        margin: 27vw 0 0 5vw;
    }
}

@media screen and (max-width: 768px) {

    .btn-lm {
        font-size: 14pt;
        height: 7vh;
    }

    h2 {
        font-size: 22pt;
    }

    .hero-subtitle {
        font-size: 12pt;
        width: auto;
    }

    #kd-advantage-content {
        padding: 5vh 5vw;
    }

    .kd-advantage-header-text {
        padding: 0 5vw;
        font-size: 14pt;
        margin: auto;
    }

    .kd-advantage-header-text span {
        color: #0066FF;
        font-size: 25pt;
    }

    #kd-hero {
        padding: 15vh 0 15px;
    }

    .kd-hero-content {
        top: 5%;
        padding: 8vw;
    }

    #kd-slogan {
        padding: 40px 2vw 80px;
        background-image: none;
        border-bottom: 2px solid #aaa;
        background-size: contain;
    }

    .callout-container {
        width: 100%;
        margin-bottom: 70px;
    }

    .row {
        flex-direction: column; 
    }
}

.kd-slogan-content {
    margin: 0;
    position: absolute;
    top: 50%;
    padding: 5vw;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*p {
    font-size: 21pt;
    margin: 0;
}*/

.row {
    display: flex;
    color: white;
}

.sd-blue {
    height: 10vh; 
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .row {
        flex-direction: column;
    }

    .kd-hero-content {
        padding: 3vw 6vw
    }

    #kd-hero h2 {
        font-size: 2.2em;
    }
}

@media screen and (max-width: 768px) {

    .column-container {
        display: inline;
        margin: 5vw 0px;
    }

    .column-container svg {
        width: 100%;
    }
    
}