/* RESPONSIVE CSS
-------------------------------------------------- */

/* 
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap
*/

@media (max-width: 575px) {

	#top-nav {
		background: none;
		top: 0px;
		height: 40px;
	}
	
	.fixed-top {
		top: 0 !important;
		position: relative;
		height: 80px;
	}

	.navbar-brand {
		margin: 0 auto;
	}
	
	.roar_logo {
		height: 60px;
	}

     .logo-large {
        display:none!important;
    }

    .logo-small {
        display:block!important;
    }
	
	#bottomNav .sub-nav li .sub-nav-link {
		font-size: 2.8rem;
	}
	
	.carousel {
		max-height: 96px;
	}
	.carousel-inner {
		max-height: 218px;
	}
	.carousel-caption {
		width: 50%;
        top:228px;
	}
    .carousel-inner .container{
        top:-175px;
    }
	.carousel-item {
		height: 96px;
	}
	.carousel-item > img {
		left: 0%;
        padding-top: 0px;
		/*/max-height: 300px;*/
	}
	.carousel-item h1 {
		font-size: 1.6rem;
	}
	.carousel-spirit-icons li img {
		max-height: 50px;
	}	
	.carousel-spirit-icons li {
		margin: 10px 0 10px 0px;
	}
	.carousel-item .btn-primary {
		 font-size: 1.25rem; 
	}

    .banner {
		height: 300px;
	}
	.banner-inner {
		max-height: 97px;
	}
	.banner-caption {
		width: 100%;
		text-align: center !important;
		margin: 0 auto;
        left: -55%;
        top: 195px;
	}
	.banner-item {
		height: 97px;
	}
	.banner-item > img {
		left: 0%;
		max-height: 300px;
        padding-top:0px;
	}

    .banner-item h1 {
        font-size: 3.2rem;
    }

	.footer-slope-a, .footer-slope-b {
		width: 120%;
	}

	.page-header {
		height: 200px;
	}

	.ecard-text {
		position: relative;
		top: 20px;
		left: 0;
		color: #fff;
		width: 100%;
	}
      .carousel-control-next, .carousel-control-prev {
        top:0%;
    }
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
	.fixed-top {
		top: 0 !important;
		position: relative;
		height: 80px;
	}

	.navbar-brand {
		margin: 0 auto;
	}
	
	.roar_logo {
		height: 60px;
	}

     .logo-large {
        display:none!important;
    }

    .logo-small {
        display:block!important;
    }

	.carousel {
		max-height: 196px;
	}
	.carousel-inner {
		max-height: 196px;
	}
	.carousel-caption {
		width: 50%;
        top:228px;
	}
    .carousel-inner .container{
        top:-175px;
    }
	.carousel-item {
		height: 196px;
	}
	.carousel-item > img {
		left: 0%;
        padding-top: 0px;
		/*/max-height: 300px;*/
	}
	.carousel-item h1 {
		font-size: 1.6rem;
	}
	.carousel-spirit-icons li img {
		max-height: 50px;
	}	
	.carousel-spirit-icons li {
		margin: 10px 0 10px 0px;
	}
	.carousel-item .btn-primary {
		 font-size: 1.25rem; 
	}

    .banner {
		max-height: 218px;
	}
	.banner-inner {
		max-height: 218px;
	}
	.banner-caption {
		width: 90%;
        top:228px;
	}
    .banner-inner .container{
        top:-175px;
    }
	.banner-item {
		height: 218px;
	}
	.banner-item > img {
		left: 0%;
        padding-top: 0px;
		/*/max-height: 300px;*/
	}

	.page-header {
		height: 300px;
	}

	.ecard-text {
		width: 64%;
	}

    .carousel-control-next, .carousel-control-prev {
        top:0%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {

    .carousel-inner {
        max-height:381px;
    }
    .carousel {
		max-height: 381px;
	}
    .banner-inner {
        max-height:443px;
    }
    .banner {
		max-height: 373px;
	}
	.roar_logo {
		height: 60px;
	}
	
	 .logo-large {
        display:none!important;
    }

    .logo-small {
        display:block!important;
    }
	.nav-item {
		margin: 0 0 0 0.8rem;
	}

	.carousel-caption {
		width: 50%;
        top:133px;
	}
	
	.carousel-item > img {
		left: 0%;
		/*max-height: 450px;*/
	}

    .carousel-item{
        height:373px;
    }

    .carousel-control-next, .carousel-control-prev {
        top:57%;
    }

    .banner-caption {
		width: 66%;
        top:133px;
	}
	
	.banner-item > img {
		left: 0%;
		/*max-height: 450px;*/
	}

    .banner-item{
        height:373px;
    }

	.filter-checkbox {
		position: relative;
		display: inline-block;
		width: 25px;
		height: 25px;
		margin: 15px 10px 0 5px;
		vertical-align: middle;
		cursor: pointer;
	}

	.filter-spirit {
		width: auto;
		font-size: 1.15rem;
		margin: 10px 0 0 15px;
	}	
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
	.carousel-caption {
		width: 40%;
	}
	.carousel-item > img {
		left: 0%;
		/*max-height: 506px;*/
	}

    .banner-caption {
		width: 66%;
	}
	.banner-item > img {
		left: 0%;
		/*max-height: 506px;*/
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	
}