html 
{
	scroll-behavior: smooth;
}
body
{
    margin: 0;
}
div #body
{
    margin: 0;
    display: grid;
    grid-template-areas:
        "title"
        "topics"
        "numbers"
        "news"
        "customers"
        "about"
        "team"
        "contact"
        "footer";
    grid-template-columns: 1fr;
    padding: 0;
    z-index: -2;
}
#nav-container
{   
    background-color: var(--white);
    color: var(--black);
    position: fixed;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-column-gap: 10px;
    text-align: center;
    top: 0px;
    right: 0px;
    width: 100%;
    z-index: 3;
    padding: 15px 15px 15px 0;
    align-items: center;
    justify-items: center;
 
}
#nav-container a
{
    color: var(--main-blue);
    text-decoration: none;
    font-family: Myriad1;
	font-size: 22px;
    font-weight: 700;
    margin: auto;
    
}
#nav-logo
{
    padding: 0 0 0 30px;
    text-align: left;
    align-items: left;
    justify-items: left;
}

a 
{
    text-decoration: none;
    color: #1c3356;
}

#footer-container a, #footer-end a 
{
    color: white !important;
}


.gradient
{   
    background: linear-gradient(90deg, #f79533, #a166ab, #183553); 
    position: fixed;
    text-align: center;
    top: 85px;
    right: 0px;
    width: 100%;
    height: 5px;
    z-index: 3;
}

a.anchor
{
    display: block;
    grid-column: span 2;
    position: relative;
    top: -70px;
    visibility: hidden;
}
#main-title-container
{
    margin-top: 50px;
    position: relative;
    width: 100%;
    height: 50%;
    z-index: 1;
    overflow: hidden;
}
.banner-image
{
    width: 100%;
}
.landing-background
{
    width: 100%;
    height: 100%;
    position: relative;
}
.landing-text-container
{
    position: absolute;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(1,1,1,0.7);
}
.banner-text
{
    grid-row: 2 / span 2; 
    grid-column: 1;
    padding: 0 0 45px 60px;
    font-size: 65px;
    color: var(--white);
    align-self: end;
    font-weight: 700;
}
#main-content-grid, #impressum-content-grid
{
    display: grid;
    grid-template-columns: 2fr 16fr;
    grid-column-gap: 20px;
    grid-row-gap: 40px;
    padding: 60px 30px 85px 50px;
    color: var(--dark-grey);
}
#impressum-content-grid
{
    margin-top: 50px;
    grid-template-columns: 1fr 2fr;
}
.section-heading
{
    font-size: 22px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--main-blue);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}
#topics-container, #groups-container
{
    /*margin: 0 150px;*/
    /*margin-color: var(--dark-grey);*/
    padding: 0px 180px 0px 70px;
    display: grid;
    grid-template-columns: repeat(4, 2fr);
    grid-column-gap: 20px;
    background-color: var(--white);
    color: var(--dark-grey);

}

#partner-company-container
{
    /*margin: 0 150px;*/
    /*margin-color: var(--dark-grey);*/
    padding: 0px 180px 0px 70px;
    display: grid;
    grid-template-columns: repeat(5, 2fr);
    grid-column-gap: 15px;
    background-color: var(--white);
    color: var(--dark-grey);

}

.topic-card-container
{
    display: inline-block;
    position: relative;
    max-height: 300px;
    max-width: 300px;
    overflow: hidden;
    border-radius: 2px;
}

.partner-card-container
{
    display: inline-block;
    position: relative;
    max-height: 250px;
    max-width: 250px;
    overflow: hidden;
    border-radius: 2px;
}

.topic-card-container:hover .topic-card, .partner-card-container:hover .partner-card
{
    transition: transform 0.3s;
    transform: scale(1.1);
    border-radius: 2px;
}
.topic-card-container::before, .partner-card-container::before
{
    content:"";
    display:block;
    margin-top:100%;
    border-radius: 2px;
}
.topic-card, .partner-card
{
    position: absolute;
    display: grid;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    /**background: rgb(1,1,1,0.5);**/
    text-align: center;
    border-radius: 2px;

}
.topic-card:hover, .partner-card:hover
{
    cursor: pointer;
}
.topic-card-content
{
    margin: auto;
}
#about-container
{
    padding: 0 180px 0 70px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 20px;
    background-color: var(--white);
    font-size: 20px;
    line-height: 26px;
}
#reasons-container
{
    padding: 0 180px 0 70px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
    background-color: var(--white);
    font-size: 20px;
    line-height: 26px;
}
#footer-container
{
    padding: 70px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background-color: var(--dark-grey);
    color: var(--white);
    line-height: 1.7;
}

#footer-end
{
    color: var(--white);
    background-color: var(--dark-grey);
    text-align: center;
    padding: 60px 0 20px 0;
}
#trainer-container
{
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.grid-heading
{
    grid-area: head;
}
.trip-grid-middle
{
    grid-area: middle;
}
.trip-grid-bot
{
    grid-area: bot;
}
.grid-span-2
{
    grid-column: span 2;
   padding-left: 0px;
}
.full-width
{
    margin: 0px -30px 0px -50px;
}

/** ------- **/
#news-input-form
{
    width: 40%;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: 10px;
}
.input-title
{
    text-align: right;
}

/** ---------- **/
.news-display 
{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.news-content 
{
    background-color: var(--white);
    margin: 15% auto;
    padding: 20px;
    border: 1px solid var(--dark-grey);
    width: 40%;
}

.close 
{
    color: var(--light-grey);
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover, .close:focus 
{
    color: var(--dark-grey);
    text-decoration: none;
    cursor: pointer;
}

.hover-pointer
{
    cursor: pointer;
}

#gradient-border-button-1
{
    background: linear-gradient(45deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); 
    background-size: 300% 200%; 
    animation: animatedgradient 4s ease alternate infinite; 
    position: relative; 
    width: 110px; 
    height: 30px; 
    padding: 2px; 
    border-radius: 4px;
}
#gradient-button-1
{
    background-color: var(--dark-grey); 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    width: 110px; 
    height: 30px;
    border-radius: 4px;
}
#button-1
{
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
    text-align: center;
}

#gradient-border-square
{
    background: linear-gradient(45deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); 
    background-size: 200% 200%; 
    animation: animatedgradient 4s ease alternate infinite; 
    position: relative; 
    width: 170px; 
    height: 44px;
    padding: 4px; 
    border-radius: 6px;
}
#gradient-square
{
    background-color: var(--white); 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    width: 170px; 
    height: 44px;
    border-radius: 3px;
}
#square
{
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
    text-align: center;
    font-size: 20px;
}

#gradient-border-square
{
    width: 400px; 
    height: 400px;
    padding: 4px; 
    border-radius: 8px;
}
#gradient-square
{
    width: 400px; 
    height: 400px;
    border-radius: 3px;
}
#square
{
    font-size: 35px;
}

#academy-junction-container
{
    padding: 100px 120px 100px 120px;
    display: grid;
    grid-template-columns: 410px 410px;
    grid-column-gap: 120px;
    grid-row-gap: 30px;
    background-color: var(--white);
    font-size: 20px;
    line-height: 26px;
}

#social-container
{
    font-size: 2rem; 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    grid-column-gap: 1rem; 
    width: 18%; 
    position: absolute; 
    left: 50%; 
    transform: translate(-50%, -150%);
}

.icons {
  color: #eee;
}

.fab {
  font-size: 5rem;
}

/* transition for social icon hover animation */
.fa-facebook,
.fa-linkedin,
.fa-youtube,
.fa-instagram,
.fa-xing,
.fa-twitter {
  transition: 0.4s;
  cursor: pointer;
}

/* social media icons hover color */
.fa-facebook:hover,
.fa-facebook:focus {
  color: #1877f2;
  transform: scale(1.1);
}

.fa-twitter:hover,
.fa-twitter:focus {
  color: #10A9E0;
  transform: scale(1.1);
}

.fa-youtube:hover,
.fa-youtube:focus {
  color: #df2426;
  transform: scale(1.1);
}

.fa-instagram:hover,
.fa-instagram:focus {
  color: #bd22a2;
  transform: scale(1.1);
}

.fa-xing:hover,
.fa-xing:focus {
  color: #5ECC1D;
  transform: scale(1.1);
}

.fa-linkedin:hover,
.fa-linkedin:focus {
  color: #1877f2;
  transform: scale(1.1);
}

.fa-twitter:hover,
.fa-twitter:focus {
  color: #10A9E0;
}

.trainerbutton {
  background-color: rgba(76, 175, 80, 0.0); /* Green */
  border: none;
  color: white;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 30px 2px;
  cursor: pointer;
}

.button{
  background-color: none; 
  color: white; 
  border: 3px solid #FFFFFF;
  border-radius: 5px;
}

.alltrainers {
padding-top: 100px;
}

/** -------- ANIMATIONS --------- **/

@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	25% {
		background-position: 50% 0%;
	}
	50% {
		background-position: 100% 50%;
	}
    75% {
		background-position: 50% 100%;
	}
    100% {
        background-position: 0% 50%;
    }
}

/** ------------------- **/
@media (max-width: 500px), (max-height: 500px)
{
    #main-content-grid
    {
        grid-template-columns: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 30px;
        padding: 50px;
        color: var(--dark-grey);
        grid-template-columns: 1fr;
    }
    #nav-container
    {   
        grid-template-columns: repeat(10, 1fr);
    }
    #nav-logo
    {
        padding: 0 0 0 25px;
    }
    .nav-element
    {
        display: none;
    }
    #topics-container, #groups-container
    {
        padding: 0px;
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
    #about-container
    {
        padding: 0px;
    }
    #footer-container
    {
        padding: 20px;
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
    .grid-span-2
    {
        grid-column: span 1;
    }
    .full-width
    {
        margin: 0px -50px 0px -50px;
    }
    a.anchor
    {
        display: none;
        grid-column: span 1;
    }
    .slider-container
    {
        display: none;
    }
    #footer-end
    {
        color: var(--white);
        background-color: var(--dark-grey);
        text-align: center;
        padding: 80px 0 20px 0;
    }
    #social-container
    {
        left: 0; 
        transform: translate(125%, -150%);
    }
}