@import url("full-width-carousel.css");

.news-wrapper{
    background-color: var(--color-lightest-gray);
}
.news-wrapper .news{
    background-color: var(--color-white);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
}
.news-wrapper .news-img {
    display: flex;
}
.news-wrapper .news-img img {
    width: 100%;
    height: 300px;
}
.news-wrapper .news-top-bar{
    font-size:14px;
}
.news-wrapper .news-body h4{
    font-size:20px;
}
.news-wrapper .news-body p{
    font-size:14px;
}
.news-img{
    position: relative;
    overflow: hidden;
}
.news-img .over2,
.news-img .over{
    position: absolute;
    background-color: var(--color-black-80);
    width: 150%;
    height: 100%;
    top: 0;
    left: -170%;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    border-right: solid 2px whitesmoke;
    border-left: solid 2px whitesmoke;
}
.news-img .over2{
    right: -210%;
    left: unset;
}
.news:hover .over{
    left: -140%;
}
.news:hover .over2{
    right: -140%;
}



.multimedia-wrapper{
    background-color: var(--color-lighter-gray);
}



.register-wrapper{
    background-color: var(--color-lightest-gray);
}
.register-header,.news-header{
    width: 15%;
}
.news-header{
    width: 10%;
}
.header-line,.news-line{
    width: 90%;
    height: 2px;
    background: var(--color-main-gray);
}
.news-line{
    width: 93%;
}
.register-box,.intro-box{
    padding: 70px 0px;
    position: relative;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    transition: 0.6s;
}
.register-box .over{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.register-icon .layer-overlay{
    background-color: var(--color-black-50);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: 0.6s;
}
.first-box .register-icon{
    background: var(--color-carafe);
}
.second-box .register-icon{
    background-color: var(--color-seafoam);
}
.third-box .register-icon{
    background-color: var(--color-rose);
}
.fourth-box .register-icon{
    background-color: var(--color-turquoise);
}

.register-caption,.intro-caption{
    width: 100%;
    text-shadow: 0 1px 1px var(--color-black) , 0 -1px 1px var(--color-black) , 1px 0 1px var(--color-black) , -1px 0 1px var(--color-black);
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 1;
    color: var(--color-white);
    font-size:24px;
}
.intro-caption{
    color: var(--color-black);
    text-shadow: none;
    transition: 0.6s;
}
.intro-box:hover .intro-caption{
    color: var(--color-main);
}
.register-icon {
    position: absolute;
    background-color: var(--color-white);
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: var(--color-white);
}
.register-icon span{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    opacity:0.2;
}
.register-icon span::before{
    font-size: 90px;
    display: inline-block;
    -webkit-transform: translateX(-8px);
    -moz-transform: translateX(-8px);
    -ms-transform: translateX(-8px);
    -o-transform: translateX(-8px);
    transform: translateX(-8px);
}
.register-box:hover .layer-overlay{
    opacity: 0.4;
}
.register-box:hover{
    -webkit-transform: scale(1.02) translateY(-4px);
    -moz-transform: scale(1.02) translateY(-4px);
    -ms-transform: scale(1.02) translateY(-4px);
    -o-transform: scale(1.02) translateY(-4px);
    transform: scale(1.02) translateY(-4px);
}

.supporters .swiper-slide img{
    width: 100%;
}