﻿@media (min-width : 768px) and (max-width: 991px) {
    .carousel .sm-shift {
        height: 60px;
         /*border:3px red dashed;*/
    }
}
@media (min-width : 992px) and (max-width: 1199px) {
     .carousel .sm-shift {
        height: 30px;
        /*border:3px blue dashed;*/
    }
}

@media (min-width : 1199px) {
     .carousel .sm-shift {
        height: 0px;
    }
}

.carousel .carousel-item.active h2,
.carousel .carousel-item.active h3 {
    font-family: 'Lato', sans-serif;
    color: white;
   /* text-shadow: 2px 2px 2px #000;*/
}

@media (min-width : 1199px) 
{
    .carousel .carousel-item.active h2 {
        font-size: 50px;
        /*line-height: 1.5em;*/
    }

    .carousel .carousel-item.active h3 {
        font-size: 36px;
        /*line-height: 1.2em;*/
    }

    .carousel .carousel-item.active .bg-img {
        height: 592px
    }

   
}

@media (min-width : 992px) and (max-width: 1199px) {

    .carousel .carousel-item.active h2 {
        font-size: 40px;
        line-height: 1.5em;
    }

    .carousel .carousel-item.active h3 {
        font-size: 24px;
        line-height: 1.2em;
    }



    .carousel .carousel-item.active .bg-img {
        height: 592px
    }



    .carousel .carousel-inner > .carousel-item > h2 {
        color: red;
        font-size: 62pt;
        line-height: 1.2em;
    }

    .carousel .carousel-inner > .carousel-item > h3 {
        font-size: 40pt;
        line-height: 1.2em;
    }

}

@media (min-width : 768px) and (max-width: 991px) {

    .carousel .carousel-inner > .carousel-item > h2 {
        font-size: 12px;
        line-height: 1.2em;
    }

    .carousel .carousel-inner > .carousel-item > h3 {
        font-size: 6px;
        line-height: 1.2em;
    }

    .carousel .carousel-item.active .bg-img {
        height: 300px
    }
}


@media (max-width : 767px) {
    .carousel .carousel-item.active h2 {
        font-size: 18px;
        line-height: 1.2em;
    }
    .carousel .carousel-item.active h3 {
        font-size: 18px;
        line-height: 1.2em;
    }
    .carousel .carousel-inner > carousel-item > h2 {
        font-size: 18px;
        line-height: 1.2em;
    }

    .carousel .carousel-inner > carousel-item > h3 {
        font-size: 9px;
        line-height: 1.2em;
    }
    
}



@media (max-width : 767px) {
	#main-slide .slider-content h2{
		font-size: 20px;
		line-height: normal;
		margin-bottom: 0;
	}
}

@media (max-width : 610px) {
    #main-slide .carousel-item img {
        width: auto;
        height: 250px;
        max-width: none;
    }
}

@media (max-width : 479px) {

    #main-slide .carousel-item .slider-content {
        /*display: none;*/
    }

	#main-slide .slider-content h2{
		font-size: 17px;
		line-height: normal;
		margin-bottom: 0;
	}
    
}


 /*-- Animation --*/
    .carousel .item.active .animated1 {
    }

.carousel .carousel-item.active .animated2 {
    -webkit-animation: lightSpeedIn 1s ease-in 200ms both;
    animation: lightSpeedIn 1s ease-in 200ms both;
}

.carousel .carousel-item.active .animated3 {
    -webkit-animation: bounceInLeft 1s ease-in-out 500ms both;
    animation: bounceInLeft 1s ease-in-out 500ms both;
}

.carousel .carousel-item.active .animated4 {
    -webkit-animation: flipInX 1s ease-in 500ms both;
    animation: flipInX 1s ease-in 500ms both;
    text-align: center;
}

.carousel .carousel-item.active .animated5 {
    -webkit-animation: bounceInLeft 1s ease-in-out 100ms both;
    animation: bounceInLeft 1s ease-in-out 100ms both;
}

.carousel .carousel-item.active .animated6 {
    -webkit-animation: bounceIn 1s ease-in 500ms both;
    animation: bounceIn 1s ease-in 500ms both;
    text-align: center;
}

.carousel .carousel-item.active .animated7 {
    -webkit-animation: bounceIn 1s ease-in 500ms both;
    animation: bounceIn 1s ease-in 500ms both;
}

.carousel .carousel-item.active .animated8 {
    -webkit-animation: fadeInDown 1s ease-in 1000ms both;
    animation: fadeInDown 1s ease-in 1000ms both;
}


.carousel .carousel-item .slider-content {
    z-index: 0;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

.carousel .carousel-item.active .slider-content {
    z-index: 0;
    opacity: 1;
    -webkit-transition: opacity 100ms;
    -moz-transition: opacity 100ms;
    -o-transition: opacity 100ms;
    transition: opacity 100ms;
}



