.tile-wrapper
{
    position: relative; 
    max-height: 100%; 
    max-width: 100%;
    overflow: hidden;
    border-radius: 2px;
}
.course-selection-container
{
    display: grid;
    width: 260px;
    height: 260px;
    padding: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto repeat(2, 1fr) auto;
    grid-row-gap: 5px;
    grid-template-areas: 
        "title title"
        "date date"
        ".    ."
        "online registered";
    background-color: var(--main-blue);
    color: var(--white);
    font-size: 23px;
}
.course-selection-container:hover
{
    transform: scale(1.05);
    transition: 500ms ease;
}
#course-selection-title
{
    grid-area: title; position: relative; font-weight: bold;
}
.course-selection-info
{
    position: relative; 
    font-size: 18px;
}

.form-grid-submit
{
    grid-column: 1 / span 2;
}
#submit_register_div
{
    width: 100%;
    text-align: center;
    margin-top: 40px;
}
#submit_register
{
    padding: 10px;
    color: blue;
}

#creditcard-info, #banktransfer-info, #offer-info
{
    display: none;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
}

#grid-split-span, #grid-triple-span
{
    grid-column: span 3;
}

.highlight
{
    border: 2px solid green;
}

#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;
}

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

#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;
}

.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;
}

#course-description-title, .course-description-header
{
    font-size: 30px;
    font-weight: bold;
}
.course-description-header
{
    margin-bottom: 6px;
}
#course-description-teacher
{
    color: var(--light-grey);
}
#course-description-place, #course-description-date
{
    color: black;
}

.form-column
{
    display: grid;
    grid-template-columns: 2fr 5fr;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
}

.quick-filter
{
    display: grid;
    grid-template-areas: 
        "waylf   waylf   waylf   waylf   waylf   waylf"
        "reset   fusa    cyber   assr    aspice  other";
        /**"select  select  select  select  select  select";**/
    grid-template-rows: repeat(2, min-content);
    grid-template-columns: repeat(6, 1fr);
    grid-row-gap: 15px;
    margin-right: 20px;
}

.quick-filter .filter-heading
{
    grid-area: waylf;
    font-size: 30px;
    font-weight: bold;
}

.filter-element
{
    padding: 5px 10px;
    color: var(--main-blue);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    display: flex;
    border-left: 2px solid var(--main-blue);
}
.fusa-element { grid-area: fusa; }
.cyber-element { grid-area: cyber; }
.assr-element { grid-area: assr; }
.aspice-element { grid-area: aspice; }
.other-element { grid-area: other; border-right: 2px solid var(--main-blue);  } 
.reset-element { grid-area: reset; }

#filter-select
{
    border-image-slice: 0 !important;
    font-size: 15px;
}

#filter-select:focus-visible
{
    outline: none;
}

.filter-selected
{
    grid-area: select;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 60px;
}

.filter-selected div
{
    background-color: #6fba82;
    border-radius: 3px;
    width: 100%;
    height: 100%;
}

/**.quick-filter
{
    display: grid;
    grid-template-columns: minmax(min-content, auto) 1fr;
    grid-row-gap: 5px;
}
.filter-element
{
    grid-column: 1;
    padding: 10px;
    background-color: var(--main-blue);
    color: var(--white);
    cursor: pointer;
}**/

/**#vat-heading, #vat-input, #vat-note
{
    visibility: hidden;
}**/

#vat-note
{
    text-align: right;
    font-size: 12px;
}

#gradient-border-button-1, #gradient-border-button-1-wide, #gradient-border-square, .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: 170px; 
    height: 44px;
    padding: 4px; 
    border-radius: 6px;
}
#gradient-button-1, #gradient-button-1-wide, #gradient-square, .gradient-button-1
{
    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;
}
#button-1, #square, .button-1
{
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
    text-align: center;
    font-size: 20px;
}

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

#gradient-button-1-wide, #gradient-border-button-1-wide
{
    width: 280px; 
    height: 44px;
}

.pretend-button
{
    display: inline-block; 
    border: 4px solid var(--main-blue); 
    padding: 10px 18px; 
    color: var(--main-blue); 
    border-radius: 7px;
    margin-right: 15px;
    vertical-align: top;
    font-size: 20px;
}

.grid-alignment-left{ text-align: left; width: 100%; }
.grid-alignment-right{ text-align: right; width: 100%; }

#footer-end a 
{
    color: white !important;
}
#footer-end
{
    color: var(--white);
    background-color: var(--dark-grey);
    text-align: center;
    padding: 120px 0 20px 0;
}

#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%);
}

.wpwl-form
{
    margin: 0 !important;
}

.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;
}

.hover-pointer
{
    cursor: pointer;
}

.hover-blocked
{
    cursor: not-allowed;
}

#searchbar-container
{
    display: inline-block; 
    text-align: auto; 
    width: 20%;
}

.mandatory-input-hover
{
    border-image-source: linear-gradient(90deg, #f79533, #a166ab, #183553) !important; 
    border-width: 2px;
    border-image-slice: 1;
}

.mandatory-input-div-hover
{
    background: linear-gradient(90deg, #f79533, #a166ab, #183553) !important;
    padding: 2px;
}

/** -------- 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 only screen and (max-width: 1700px) and (min-width: 1401px) 
{
    #gradient-border-square, #gradient-square
    {
        width: 270px; 
        height: 270px;
    }
}
@media only screen and (max-width: 1400px) 
{
    #gradient-border-square, #gradient-square
    {
        width: 250px; 
        height: 250px;
    }

    #searchbar-container
    {
        width: 40%;
    }
}
@media (hover: none)
/*@media only screen and (max-width: 1000px) */
{
    .quick-filter
    {
        display: grid;
        grid-template-areas: 
            "waylf   waylf   waylf"
            "waylf   waylf   waylf"
            "reset   fusa    cyber"   
            "assr    aspice  other";
            /**"select  select  select  select  select  select";**/
        grid-template-rows: repeat(4, min-content);
        grid-template-columns: repeat(3, 1fr);
        grid-row-gap: 10px;
        margin-right: 20px;
    }
    
    .filter-element select
    {
        background-color: transparent;
        color: var(--main-blue)
    }

    .cyber-element { border-right: 2px solid var(--main-blue);  } 

    #nav-container
    {   
        grid-template-columns: repeat(10, 1fr);
    }
    #nav-logo
    {
        padding: 0 0 0 25px;
    }
    .nav-element
    {
        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%);
    }

    #searchbar-container
    {
        width: 90%;
    }

    #grid-split-span, #grid-triple-span
    {
        grid-column: span 1;
    }

    .grid-alignment-left{ text-align: center; }
    .grid-alignment-right{ text-align: center; }

    #creditcard-info, #banktransfer-info, #offer-info
    {
        grid-template-columns: 1fr;
    }

    .hide-on-mobile
    {
        display: none;
    }

    .extra-mobile-padding
    {
        padding-top: 5px;
        padding-bottom: 40px;
    }
}