.hero{
    width:100%;
    height:100vh;

}
.carousel-inner{
    height:100%;
    display: block;
}
.carousel-item{
    height:100vh;
    width:100%;
    background-size: cover;

}
.carousel-item img{
width: 100%;
position:absolute;
object-fit: cover;
    height:100%;
}
.carousel-fade .carousel-item {
	opacity: 0;
	transition-duration: .6s;
	transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
	opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
	opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
	transform: translateX(0);
	transform: translate3d(0, 0, 0);
}

.hero .container{
position: absolute;
width:50%;
left:50%;
margin-left:-25%;
top:40%;
}
.hero .container .large{
    visibility: inherit;
    transition: none 0s ease 0s;
    text-align: inherit;
    line-height: 75px;
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    letter-spacing: 0px;
    font-weight: 700;
    font-size: 60px;
    text-align: center;
    text-overflow: ellipsis;
    color: rgb(255, 255, 255);
    opacity: 1;
}
.hero .container .small{
    visibility: inherit;
    transition: none 0s ease 0s;
    text-align: center;
    line-height: 14px;
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    letter-spacing: 0px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    color: rgb(255, 255, 255);
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    transform-origin: 50% 50% 0px;
}
.hero .container a{
    visibility: inherit;
    transition: none 0s ease 0s;
    text-align: inherit;
    line-height: 13px;
    border-width: 0px;
    margin: 0px;
    padding: 15px 35px;
    letter-spacing: 0px;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    opacity: 1;
    color:#ffffff;
    transform: translate3d(0px, 0px, 0px);
    transform-origin: 50% 50% 0px;
    margin-top:40px;
    display: inline-block;

}
.hero .container a.reg{
background-color: #205AAC;
border-style: solid;
border-width: 2px;
color: rgb(255, 255, 255);
font-style: normal;
border-color:#205AAC;

}
.hero .container a.reg:hover{
    background-color:black;
    border-color:black;
}
.carousel-control-prev-icon{
background-color:rgb(0,0,0,0.6);
padding:20px;
background-size: 28%;
}
.carousel-control-next-icon{
    background-color:rgb(0,0,0,0.6);
    background-size: 28%;
    padding:20px;
}

.carousel-inner .active .container .large,
.carousel-inner .carousel-item-next.carousel-item-left .container .large,
.carousel-inner .carousel-item-prev.carousel-item-right .container .large
{
    animation:fadeInUp 1.3s linear;
}

.carousel-inner .active .container .small,
.carousel-inner .carousel-item-next.carousel-item-left .container .small,
.carousel-inner .carousel-item-prev.carousel-item-right .container .small{
    animation:fadeInUp 1.1s linear;
}
.carousel-inner .active .container a,
.carousel-inner .carousel-item-next.carousel-item-left .container a,
.carousel-inner .carousel-item-prev.carousel-item-right .container a{
    animation:fadeInUp 1.7s linear ;
}

@media screen and (max-width:820px){
    .hero{
        width:100%;
        height:max-content;
    
    }

    .carousel-item{
        height:35vh;
        background-size: cover;

    }
    .hero .container{
        width:95%;
        top:20%;
        left:0;
        margin:0;
        top:25%;
    }
    .hero .container .large{
   
        font-size:28px;
        line-height:1;
    
}
.hero .container .small{
    display: none;
}
.hero .container a{
    font-size:8px;
    padding:3px 4px 3px 4px;
    
}
.hero .container a.reg{
    padding:3.5px 9px 3.5px 9px;
    font-size: 8px;
}

}