@charset "UTF-8";
/* CSS Document */

/************************************************************** viewport >1201 **************************************************************/
@media only screen and (min-width: 1201px) {
.wrapper {width:1180px; margin:0 auto; }
.container {width:100%;}


#carouselJCMS .bn-spec {height:600px;}
#carouselJCMS .bnContent {width:700px;}
#carouselJCMS p {width:70%; padding:10px; margin:0 auto; text-shadow: 1px 1px 1px #222;}
	
.home-products {width:250px; height: auto}

}



/************************************************************** viewport 980 to 1200 **************************************************************/
@media only screen and (min-width: 980px) and (max-width:1200px) {
.wrapper {width:980px; margin:0 auto;}
.container {width:100%}

.logo {width:240px; height: auto}
#carouselJCMS .bn1 {background-position: 20% top}
#carouselJCMS .bn-spec {height:600px;}
#carouselJCMS .bnContent {width:500px;}
#carouselJCMS p {width:70%; padding:10px; margin:0 auto; text-shadow: 1px 1px 1px #222}



}



/************************************************************** viewport 980 to 992 - ac **************************************************************/
@media only screen and (min-width: 980px) and (max-width:992px) {



}



/************************************************************** viewport 941 to 979 **************************************************************/
@media only screen and (min-width: 941px) and (max-width: 979px) {
.wrapper {width:100%;}
.container {width:100%}

.logo {width:200px; height: auto}
#carouselJCMS .bn1 {background-position: 40% top}
#carouselJCMS .bn-spec {height:500px;}
#carouselJCMS .bnContent {width:450px;}
#carouselJCMS h1 {font-size:2.2em}
#carouselJCMS p {width:90%; padding:10px; margin:0 auto; text-shadow: 1px 1px 1px #222}
	

	
}



/************************************************************** viewport 768 to 940 **************************************************************/
@media only screen and (min-width: 768px) and (max-width: 940px) {
.wrapper {width:100%;}
.container {width:100%}


.logo {width:200px; height: auto}
#carouselJCMS .bn1 {background-position: 30% top}
#carouselJCMS .bn2 {background-position: 55% top}
#carouselJCMS .bn-spec {height:500px;}
#carouselJCMS .bnContent {width:430px;}
#carouselJCMS h1 {font-size:2em}
#carouselJCMS p {width:90%; padding:10px; margin:0 auto; text-shadow: 1px 1px 1px #222}
	


}
	
	

/************************************************************** viewport 480 to 767 **************************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.wrapper {width:100%;}
.xs-padding {margin-top:10px}

.logo {width:180px; height: auto}
#carouselJCMS .bn1 {background-position: 30% top}
#carouselJCMS .bn2 {background-position: 45% top}
#carouselJCMS .bn-spec {height:400px;}
#carouselJCMS .bnContent {width:350px; margin-right:-30px;}
#carouselJCMS h1 {font-size:1.5em}
#carouselJCMS p {width:100%; padding:6px; margin:0 auto; text-shadow: 1px 1px 1px #222; font-size:1em}
#carouselJCMS .carousel-caption {transform: translateY(0%);  top:0%;}
}



/************************************************************** viewport 321 to 479 **************************************************************/
@media only screen and (min-width: 321px) and (max-width: 479px) {
.wrapper {width:100%;}
.xs-padding {margin-top:10px}

.logo {width:140px; height: auto;}
#carouselJCMS .bn1 {background-position: 30% top}
#carouselJCMS .bn2 {background-position: 40% top}
#carouselJCMS .bn-spec {height:400px;}
#carouselJCMS .bnContent {width:250px; margin-right:-40px; }
#carouselJCMS h1 {font-size:1.3em}
#carouselJCMS p {width:100%; padding:10px; margin:0 auto; text-shadow: 1px 1px 1px #222; font-size:.9em}
#carouselJCMS .carousel-caption {transform: translateY(0%);  top:0%;}

	
}


/************************************************************** viewport <320 **************************************************************/

@media only screen and (max-width: 320px) {
.wrapper {width:100%}
.xs-padding {margin-top:10px}
	
.logo {width:140px; height: auto;}
#carouselJCMS .bn1 {background-position: 30% top}
#carouselJCMS .bn2 {background-position: 40% top}
#carouselJCMS .bn-spec {height:400px;}
#carouselJCMS .bnContent {width:210px; margin-right:-40px; }
#carouselJCMS h1 {font-size:1.2em}
#carouselJCMS p {width:100%; padding:10px; margin:0 auto; text-shadow: 1px 1px 1px #222; font-size:.8em}
#carouselJCMS .carousel-caption {transform: translateY(0%);  top:0%;}



}