/*

NEW Frontpage starts here

*/

#int-header {
    margin-bottom: 25px;
}

#int-menu-q {
    transition: none;
}

#int-menu-q.startOpen {
    transition: height 0.3s linear;
}

#all-footer {
    height: auto;
}

#int-all {
    padding-bottom: 25px;
}

#start-container {
    position: relative;
    padding-bottom: 60px;
}

#start-video-container {
    text-align: center;
    position: relative;

    width:100%;
    /*max-width: 1200px;*/
    margin: 0 auto;
    /*padding: 0 10px;*/
}

#start-video-container video {
    max-width: 100%;
    /*object-fit: cover;*/
    /*min-height: 610px;*/

}

#start-video-container:after {
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
    right:0;
    //background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 5%, rgba(255,255,255,0) 95%, rgba(255,255,255,1) 100%);
}

#start-video-container #start-video-pause {
    position: absolute;
    top: 20px;
    right: 20px;
    background-image: url('/https/www.tugraz.at/typo3conf/ext/tugraztemplateinternal/Resources/Public/Icons/button-pause.svg');
    height: 25px;
    width: 25px;
    background-repeat: no-repeat;
    filter: invert(80%);
    z-index: 100;
}

#start-video-container #start-video-pause.paused {
    background-image: url('/https/www.tugraz.at/typo3conf/ext/tugraztemplateinternal/Resources/Public/Icons/button-play.svg');
}

#start-video-container .video-wrap {
    display: inline-block;
    position: relative;
}

#start-video-container .start-video-arrow {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-image: url('/https/www.tugraz.at/typo3conf/ext/tugraztemplateinternal/Resources/Public/Icons/Pfeil-mit-Linie.svg');
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    filter: invert(50%);
    transform: rotate(90deg);
}

#start-container #start-link-container {
    max-width: 950px;
    margin: 0px auto 0px auto;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    width: 100%;

    position: fixed;

    bottom: 30px;
    left: 0px;
    right: 0px;
}
#int-start-news-teaser-container {
    filter:url(#round);
    display: inline-block;
    margin: 0 auto;

    position: fixed;
    bottom: -110px;
    left: 0px;
    right: 0px;

    color: #e4154b;
    font-size: 22px;

    height: auto;
    width: 200px;

    background-image: url('/https/www.tugraz.at/typo3conf/ext/tugraztemplateinternal/Resources/Public/Icons/icon-news-start.svg');
    background-repeat: no-repeat;
    background-position: calc(50% + 5px) bottom;
    background-size: 40px 40px;

    padding-bottom: 50px;
    margin-bottom: 30px;

    font-size: 22px;
    letter-spacing: 0.1em;
}

#int-start-news-teaser {    
    clip-path: polygon(80% 0%, 80% 0%, 100% 100%, 0 100%, 0 0);
    
    padding-right: 20px;

    margin-left: 50px;
    margin-right: 30px;
    text-align: center;

    height: 30px;
    width: 100px;
    display: block;
    background-color: white;
}

html {
    scroll-behavior: smooth;
}

a.start-anchor {
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
}

@media screen and (prefers-reduced-motion: reduce) {
    html  {
        scroll-behavior: auto;
    }
}

#int-start.noScroll-news #int-start-news-teaser-container {
    position: relative;

    margin-top: 36px;
    display:block;
    height: auto;

    background-color: white;
    bottom: 0px;
    top: 0px;
    text-align: center;
}

#int-start.noScroll {
    padding-bottom: 0px;
}

#int-start.noScroll #start-link-container {
    position: relative;
    bottom: 55px;
    margin-bottom: -80px;
}

#int-start.bannerVisible #start-link-container {
    bottom: 130px;
}

#int-start.bannerVisible.noScroll #start-link-container {
    bottom: 100px;
}

#start-link-container a {
    display: block;
    /*height: 170px; */
    background-color: #0c5a77;
    margin-right: 12px;
    margin-bottom: 24px;

    color: #ffffff;
    text-align: center;

    /*line-height: 170px;*/
    vertical-align: middle;

    font-size: 22px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 170px;

    transition: all  0.15s linear;
    position:relative;

    max-width: 190px;
    flex-grow: 1;

    align-self: center;
}

#start-link-container a:nth-child(6) {
    margin-right: 0px;
}

#start-link-container a span:after,
.int-start-news a span:after{
    content: "\00a0\00a0\00a0";
       
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 0 0 0.75%;
    /* padding: 0 0 0.25% 0; */
    animation: 0.15s linkIconOut;
    font-size: 103%;
    vertical-align: middle;
}

#start-link-container a.int-link-internal span:after,
.int-start-news a.int-link-internal span:after {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.6836mm%22%20width%3D%225.2043mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2018.440707%2030.768605%22%3E%3Cg%20transform%3D%22translate(-382.21%20-336.98)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23fff%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2%3Bfill%3Anone%22%20d%3D%22m383.22%20366.74%2016.43-14.38-16.43-14.37%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-size: 73%;
    margin: 0 0 0 2%;
}

#start-link-container a.int-link-mail span:after {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%225.3617mm%22%20width%3D%227.3284mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2025.966746%2018.998221%22%3E%3Cg%20style%3D%22stroke%3A%23FFF%22%20transform%3D%22matrix(.93745%200%200%201.0025%20-249.5%20-369.53)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23FFF%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A1.2%3Bfill%3Anone%22%20d%3D%22m293.12%20384.95c0%201.0341-0.84028%201.8747-1.8747%201.8747h-22.5c-1.0345%200-1.8747-0.84067-1.8747-1.8747v-13.751c0-1.0341%200.84028-1.8747%201.8747-1.8747h22.5c1.0345%200%201.8747%200.84067%201.8747%201.8747v13.751z%22%2F%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23FFF%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A1.2%3Bfill%3Anone%22%20d%3D%22m292.5%20369.95-12.5%2010.01-12.5-10.01%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    margin: 0 0 0 2%;
}
#start-link-container a.int-link-external span:after,
.int-start-news a.int-link-external span:after{
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%225.6842mm%22%20width%3D%225.6873mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2020.151879%2020.141083%22%3E%3Cg%20transform%3D%22translate(-258.5%20-425.15)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23FFF%3Bstroke-linecap%3Around%3Bstroke-width%3A1.2%3Bfill%3Anone%22%20d%3D%22m266.7%20429.59h-7.5029v15.002h15.002v-7.4634%22%2F%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23FFF%3Bstroke-linecap%3Around%3Bstroke-width%3A1.2%3Bfill%3Anone%22%20d%3D%22m262.94%20440.86%2015.002-15.002%22%2F%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23FFF%3Bstroke-linecap%3Around%3Bstroke-width%3A1.2%3Bfill%3Anone%22%20d%3D%22m270.44%20425.86h7.499v7.499%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    margin: 0 0 0 2%;
}

#start-link-container a.int-link-media span:after {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.3021mm%22%20width%3D%228.2977mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2029.401607%2029.41681%22%3E%3Cg%20style%3D%22stroke-width%3A2.1%22%20transform%3D%22translate(-271.68%20-367.92)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23fff%3Bstroke-linecap%3Around%3Bstroke-width%3A2.1%3Bfill%3Anone%22%20d%3D%22m300.13%20390.41v2.3918c0%201.9813-1.6064%203.5877-3.5877%203.5877h-20.326c-1.9813%200-3.5877-1.6064-3.5877-3.5877v-2.3918%22%2F%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23fff%3Bstroke-linecap%3Around%3Bstroke-width%3A2.1%3Bfill%3Anone%22%20d%3D%22m286.38%20390.27v-21.384%22%2F%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23fff%3Bstroke-linecap%3Around%3Bstroke-width%3A2.1%3Bfill%3Anone%22%20d%3D%22m295.13%20381.52-8.7501%208.7462-8.7501-8.7462%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    margin: 0 0 0 2%;
 }

#start-link-container a:last-of-type {
    /*margin-right: 0px;*/
    transition: all 0.5s;
}

#start-link-container a span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;

    margin-top: -5px;
    transition: transform 0.15s linear;

    margin: 0 12px;
}

#start-link-container a:hover {
    background-color: #e4154b;
}

#start-link-container.jump a:hover {
    animation: jump .2s linear;
    animation-iteration-count: 1;

    //transform: scale(1.2);
}

#start-link-container.threed a:hover {
    animation: threed 1s linear;
    animation-iteration-count: 1;



    //transform: scale(1.05);
}

#start-link-container a:hover {

    animation-fill-mode: forwards;
    transform: scale(1.06);
    z-index:10;
}

#start-link-container.turn a:hover {
    #animation: turn .2s linear;
    #animation-iteration-count: 1;
    #animation-fill-mode: forwards;
    transform: rotate(5deg);

    //transform: scale(1.2);
}

/*

Many thanks to Immanuel

*/

#start-link-container.turn a:hover span {
      #animation: turnNeg 0.2s linear;
      transform: rotate(-5deg);

  /* When the animation is finished, start again */
    #animation-iteration-count: 1;
    #animation-fill-mode: forwards;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes turn {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(5deg); }
  //100% { transform: rotate(360deg); }
}

@keyframes turnNeg {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-5deg); }
  //100% { transform: rotate(-360deg); }
}

@keyframes wackeln {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(25deg); }
  75% { transform: rotate(-25deg); }
  100% { transform: rotate(0deg) }
}

@keyframes zoom {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(25deg); }
  75% { transform: rotate(-25deg); }
  100% { transform: rotate(0deg) }
}

@keyframes jump {
  0% { transform: translate(0px, 0px); }
  50% { transform: translate(0px, -50px); }
  100% { transform: translate(0px, 0px); }
}


@keyframes threed {
  0% { transform: rotateX(0deg); }
  50% { transform: perspective(250px) rotateX(80deg); }
  100% { transform: rotateX(0deg); }
}


.int-start-news {
    max-width: 950px;
    margin: 0 auto;
    position: relative;
    width: 96%;
    margin-top: -45px;
}

.int-start-news h2 {
    font-weight: 300;
    font-size: 23px;
    text-align: center;
    margin: 40px auto;
}

.int-start-news h2 .front-bold {
    font-size:60px;
    font-weight: 600;

    display: inline-block;
    margin-bottom: -10px;
}

html[lang=en] .int-start-news h2 .front-bold {
    font-size: 55px;
}

.int-start-morenews-container {
    display: block;
    text-align: center;
    margin-bottom: 100px;
}

.int-start-allnews-link {

    font-size: 24px;
}

.int-start-news .frontpage_news_image {
    width: 100%;
}

.int-start-news .frontpage_news_image img {
    max-width: 100%;
    height: auto;
}

.frontapge_news_big {
    position: relative;
    float: left;
}

.int-start-news-container {
    width: calc(100% + 30px);
    margin-top: 100px;
}

#int-start.noScroll-news .int-start-news-container {
    margin-top: 0px;
}

.frontapge_news_small {
    position: relative;
    width: calc(50% - 20px);
    float: left;

    margin-right: 20px;
}

.int-start-news h3 {
    display: block;
    min-height: 100px;
    background-color: #0c5a77;
    margin: 0 auto;
    color: #ffffff;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    font-size: 22px;
    position: relative;
    width: 75%;
    top: -55px;
}

.int-start-news h3 a {
    display: inline-block;
    vertical-align: middle;
    line-height: 100px;
    font-weight: 300;
    font-size: 22px;
    width: 100%;
    height: 100%;
    margin-top: -4px;
}

.int-start-news h3 a span{
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    width: 90%;
}

.int-start-news h3 a:hover {
    background-color: #000;
}

#start-link-container .flex-break {
    display: none;
}

#start-title-accessibility {
    height: 0px;
    overflow: hidden;
}

@media screen and (max-width: 950px) {
    .frontapge_news_small {
        width: 100%;
        margin-right: 0px;
    }

    .frontapge_news_small img {
        width: 100%;
    }

    #start-link-container .flex-break {
        display: block;
        flex-basis: 100%;
        width: 0;
    }

    #int-start.noScroll #start-link-container {
        top: 30px;
        margin-bottom: 0px;
        max-width: 560px;
        justify-content: left;
        width: calc(100% - 20px);;
    }     

    #int-start.noScroll #start-link-container a {
        max-width: 175px;
        margin-bottom: 10px;
    }

    .int-start-news-container {
        width: 100%;
    }

    .int-start-news {
        margin-top: 0px;
    }

    #start-container {
        padding-bottom: 20px;
    }

    #int-start.noScroll-news #int-start-news-teaser-container {
        margin-top: 60px;
    }
}

@media screen and (max-width:589.9px) {
    
    #int-header {
        margin-bottom: 0px;
    }

    #start-link-container {
        display: block;
        flex: none;

        padding: 0 10px;
    }

    #int-start.noScroll #start-link-container a {
        max-width: 100%;
        width: 100%;
        flex: none;

        margin-right: 0px;

    }

    #start-link-container a span {
        width: calc(100% - 30px);
        margin: 15px;
    }
    /*
    #start-link-container a {
        flex-basis: 115px;
    }

    #start-link-container a span {
        font-size: 16px;
    }*/
}