.headlineContainer{
    display:flex;
    flex-direction: column;
}

.mainHeadline{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
}

/* .mainHeadline h1{
    padding-bottom: 20px;
    text-align: center;
}

.mainHeadline h3{
    padding-bottom: 30px;
    text-align: center;
} */

.headlineImage{
    margin-top: 20px;
    margin-bottom: 40px;
    align-self: center;
    max-width: 500px;
}

.xtDocuments{
    display: flex;
    flex-direction: column;

}

.xtDocuments .docContainer{
    display: flex;
    flex-direction: row;
    max-width: 900px;
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 5px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.docHeader{
    margin-top: 30px;
}

.docHeaderDetail{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #345ea8;
    padding: 1.5em;
}

.docHeaderDetail h2{
    text-align: center;
    color: white;
}

.docHeaderDetail p{
    color: white;
    font-size: 1.25rem;
}

.docDetail{
    padding-top: 30px;
    padding-bottom: 30px;
}

.docContainer .docDetail h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    color: black;
}

.docContainer .docDetail p{
    font-size: 1.25rem;
    align-items: center;
    color: black;
    padding-top: 10px;
}


.docImage {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 500px;
}

.docImage img {
    border-radius: 10px;
    height: 75%;
    align-self: center;
}


.videoRow{
    display: flex;
    flex-direction: row;
    background-color: #57486b;
    padding-top: 100px;
}

/* .pdfVideo{
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;

} */

.videoRow h4{
    color: white;
}

.xtYoutubeContainer{
	margin: 20px auto;
	max-width: 500px;
}


/* .btn{
    font-weight: bold !important;
}

.btn a{
    font-color: black !important;
} */

.outline-dark{
    color: black !important;
}
.outline-dark:hover{
    color: white !important;
}

.button-primary-override:hover, 
.button-primary-override:active,
.button-primary-override:focus,
.button-primary-override:visited{
    background-color: #42A5F5 !important;
    border-color: #42A5F5 !important;
    background-image: none !important;
    border: 0 !important;
}

@media screen and (min-width: 480){
    


}

@media screen and (min-width: 600){



    /* .productImage{
        max-width: 500px;
        max-height: 300px;
    } */

} 
  
@media screen and (min-width: 768){
    
    .xtYoutubeContainer{
        max-width: 	200px;
        max-height: 100px;
    }

    /* .productContainer{
        flex-direction:     ;
        max-width: 400px !important;
        max-height: 800px !important;
    }

    .productFooter a{
        font-size: 1rem;
    }

    .productContainer{
        flex-direction: row;
        max-height: 600px;
    }

    .mindmapProductContainer{
        flex-direction: column-reverse;
    }

    .kanProductContainer{
        flex-direction: column-reverse;
    }

    .productImage{
        max-width: 500px;
        max-height: 300px;
    } */

    
} 

@media screen and (min-width: 800px){

    .xtYoutubeContainer{
        max-width: 	400px;
        max-height: 300px;
    }
}

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

    .xtDocuments .docContainer{
        flex-direction: column;  
        max-width: 500px;     
        justify-content: space-between; 
    }

    .xtDocuments .reverseContainer{
        flex-direction: column-reverse;
    }

    .docImage img{
        max-width: 80%;
        min-width: 80%;
        margin-top: 20px;
    } 

    .docHeader img{
        max-width: 100%;
        min-width: 100%;
    }

}


@media screen and (min-width: 1200px){
    .productContainer{
        flex-direction: row;
        max-width: 75%;
        min-width: 75%;
    }

    .productFooter a{
        font-size: 1.5rem;
    } 
}