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

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


#carouselask .bn-spec {height:450px;}
#carouselask .contentBanner {position: absolute; top:0; left:50%;transform: translate(-50%, 0); width: 1180px; z-index:99; height: 450px}
#carouselask .home-people {width:400px; height: auto; position: absolute; bottom:0;  left:100px;}	
#carouselask .txtBanner {position: absolute; right:20%; width:400px;  top: 50%;  transform: translateY(-50%); text-align: right}
#carouselask h1 {font-size:2.4em; font-weight: bold;  text-shadow: 1px 1px 1px #fff; margin:0; line-height: 1em}



}



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

#carouselask .bn-spec {height:450px;}
#carouselask .contentBanner {position: absolute; top:0; left:50%;transform: translate(-50%, 0); width: 980px; z-index:99; height: 450px}
#carouselask .home-people {width:400px; height: auto; position: absolute; bottom:0;  left:50px;}	
#carouselask .txtBanner {position: absolute; right:15%; width:400px;  top: 50%;  transform: translateY(-50%); text-align: right}
#carouselask h1 {font-size:2.4em; font-weight: bold;  text-shadow: 1px 1px 1px #fff; margin:0; line-height: 1em}

	
.home-products {width:250px; height: auto}


}



/************************************************************** 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) {
body {margin-bottom: 330px;}
.footer {height:330px;}
.wrapper {width:100%;}
.container {width:100%}



#carouselask .bn-spec {height:450px}
#carouselask .contentBanner {position: absolute; top:0; left:50%;transform: translate(-50%, 0); width: 940px; z-index:99; height: 450px}
#carouselask .home-people {width:400px; height: auto; position: absolute; bottom:0; left:5%;}	
#carouselask .txtBanner {position: absolute; right:10%; width:400px;  top: 50%;  transform: translateY(-50%); text-align: right}
#carouselask h1 {font-size:2.4em; font-weight: bold;  text-shadow: 1px 1px 1px #fff; margin:0; line-height: 1em}
	

	
}



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


#carouselask .bn-spec {height:450px;}
#carouselask .contentBanner {position: absolute; top:0; left:50%;transform: translate(-50%, 0); width: 768px; z-index:99; height: 450px}
#carouselask .home-people {width:400px; height: auto; position: absolute; bottom:0;  left:0;}	
#carouselask .txtBanner {position: absolute; right:10px; width:400px;  top: 50%;  transform: translateY(-50%); text-align: right}
#carouselask h1 {font-size:2.4em; font-weight: bold;  text-shadow: 1px 1px 1px #fff; margin:0; line-height: 1em}
	
.txtHeader {font-size:1.8em;}

}
	
	

/************************************************************** viewport 480 to 767 **************************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
body {margin-bottom: 500px;}
.footer {height:500px;}

.wrapper {width:100%;}
.xs-padding {margin-top:10px}

.logo {width:160px; height: auto}
	
#carouselask .bn-spec {height:350px;}
#carouselask .contentBanner {position: absolute; top:0; left:50%;transform: translate(-50%, 0); width: 480px; z-index:99; height: 350px}
#carouselask .home-people {width:320px; height: auto; position: absolute; bottom:0;  left:-50px;}	
#carouselask .txtBanner {position: absolute; right:10px; width:60%;  bottom:10%; text-align: right}
#carouselask p {font-size:1em; line-height: 1.2em}
#carouselask h1 {font-size:1.8em; font-weight: bold;  text-shadow: 1px 1px 1px #fff; margin:0; line-height: 1em}
	
.txtHeader {font-size:1.8em;}
}



/************************************************************** viewport 321 to 479 **************************************************************/
@media only screen and (min-width: 321px) and (max-width: 479px) {
body {margin-bottom: 600px;}
.footer {height:600px;}

.wrapper {width:100%;}
.xs-padding {margin-top:10px}

.logo {width:160px; height: auto}
	
#carouselask .bn-spec {height:350px;}
#carouselask .contentBanner {position: absolute; top:0; left:50%; transform: translate(-50%, 0); width: 320px; z-index:99; height: 350px}
#carouselask .home-people {width:320px; height: auto; position: absolute; bottom:0;left:50%; transform: translate(-50%, 0); display: none  }
#carouselask .txtBanner {position: absolute; right:10px; width:90%;   top: 50%;  transform: translateY(-50%); text-align: center}
#carouselask p {font-size:1em; line-height: 1.2em; text-shadow: 1px 1px 1px #fff!important}
#carouselask h1 {font-size:1.8em; font-weight: bold;  text-shadow: 2px 2px 2px #fff; margin:0; line-height: 1em}
	
.txtHeader {font-size:1.6em;}
}


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

@media only screen and (max-width: 320px) {
body {margin-bottom: 650px;}
.footer {height:650px;}
.wrapper {width:100%}
.xs-padding {margin-top:10px}
	
.logo {width:160px; height: auto}
	
#carouselask .bn-spec {height:350px;}
#carouselask .contentBanner {position: absolute; top:0; left:50%; transform: translate(-50%, 0); width: 320px; z-index:99; height: 350px}
#carouselask .home-people {width:320px; height: auto; position: absolute; bottom:0;left:50%; transform: translate(-50%, 0); display: none  }
#carouselask .txtBanner {position: absolute; right:10px; width:90%;   top: 50%;  transform: translateY(-50%); text-align: center}
#carouselask p {font-size:1em; line-height: 1.2em; text-shadow: 1px 1px 1px #fff!important}
#carouselask h1 {font-size:1.8em; font-weight: bold;  text-shadow: 2px 2px 2px #fff; margin:0; line-height: 1em}

.txtHeader {font-size:1.6em;}



}