﻿/* Home Page style */
/*overrite skin.css*/



.msrphome_slider{
    margin-left:0;
    margin-right:0;
    padding:0px 0px;
    width: 100%;
}
#hero1, #hero2, #hero3,#hero4,#hero5 {
    
max-width: 100%;
    
background-color: #FFF;
    
background-position: center center;
    
background-repeat: no-repeat;
    
background-size: cover;
    
display: block;
    
min-height: 370px;
    
position: relative;
    
box-shadow: inset 0 0 0 1000px rgb(0 0 0 / 25%);
}

#hero1 {
    
    background-image: url('/Portals/0/Images/Coming-Soon---SS-2022.jpg');
   /* background-image: url('/Portals/0/Images/masthead-bg-full-fluid-1920x1020.jpg');*/
}

#hero2 {
    background-image: url("/Portals/0/images/experience-education.jpg");
    
}

#hero3 {
    background-image: url("/Portals/0/images/experience-government.jpg");
    /*background-image: url("/Portals/0/Images/Background_3_1200.png?ver=whRoBB191fZEnj40juWdXA%3d%3d");*/
}
#hero4 {
    background-image: url("/Portals/0/images/experience-jobs.jpg");
    /*background-image: url("/Portals/0/Images/Background_3_1200.png?ver=whRoBB191fZEnj40juWdXA%3d%3d");*/
}
#hero5 {
    background-image: url("/Portals/0/images/experience-winter-2019.jpg");
    /*background-image: url("/Portals/0/Images/Background_3_1200.png?ver=whRoBB191fZEnj40juWdXA%3d%3d");*/
}
#dnn_ctr355_HtmlModule_lblContent .slick-slide{
    margin: 0px 0px;
}
/*home page carusel
*/
.slide-wrapper {
    padding: 0;
    display: inline;
}

/*carousel*/

.carousel-inner, .carousel, .carousel-item, .fill {
    max-height: 450px;
    background-position: center center;
    background-size: cover;
   /* height: 80em;*/
}


.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .carousel-item {
        transition: none;
    }
}

.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
    display: block;
}

    /*carousel sliding from bottom stop top*/
    /*.carousel-inner > .carousel-item.carousel-item-next,
.carousel-inner > .carousel-item.active.carousel-item-right {
    transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    top: 0;
}

.carousel-inner > .carousel-item.carousel-item-prev,
.carousel-inner > .carousel-item.active.carousel-item-left {
    transform: translate3d(0,-100%, 0);
    -webkit-transform: translate3d(0,-1%, 0);
    -moz-transform: translate3d(0,-1%, 0);
    -ms-transform: translate3d(0,-100%, 0);
    -o-transform: translate3d(0,-100%, 0);
    top: 0;
}
.carousel-inner > .carousel-item.next.carousel-item-left,
.carousel-inner > .carousel-item.carousel-item-prev.carousel-item-right,
.carousel-inner > .carousel-item.active {
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        top: 0;
}
*/

    .active.carousel-item-right,
    .carousel-item-next:not(.carousel-item-left) {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    .active.carousel-item-left,
    .carousel-item-prev:not(.carousel-item-right) {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

#myCarousel .carousel-indicators {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: -1290px;
    height: 0;
    width: auto;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: 30em;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}

.carousel-indicators > li {
        opacity: 0.5;
        margin-right: 3px;
        margin-left: 3px;
        background-color: #fff;
}
.carousel-indicators .active {
        width: 10px;
        height: 10px;
        opacity: 1;
        margin: 1px 3px;
}

.hero2-image, .hero3-image, .hero1-image,.hero4-image,.hero5-image {
    /* background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    background-position: top right;*/
    height: 64em;
    float: right;
    margin-right: -120px;
}

.hero-content h1 {
    padding-bottom: 10px;
    color: #fff;
}

.hero-content h3 {
    color: #fff;
    padding-bottom: 30px;
}
.hero-content h1 span, .hero-content h3 span {
        display: block;
}

.hero-content p {
    margin: 50px 0px 0px 0px;
}
.home-content h2 {
    line-height: 38px;
}
.hero-content button,
.hero-content a.button {
    border-radius: 20px;
    padding: 1% 3%;
    border: 2px solid #fff;
    background-color: transparent;
    color: #fff;
    font-size: 16px;
}
.hero-content button:hover,
.hero-content a.button:hover {
        background-color: #fff;
        color: #232a3d;
}

@media only screen and (max-width: 600px) {
    #hero1, #hero2, #hero3, #hero4, #hero5 {
        min-height: 150px;
    }
}