/* === FONTS === */
.light h1,
.light h2 {color: #a38757; margin:0;}
.light h3,
.light h4 {color: #686868; margin: 5px 0;}
.light p, .light blockquote {color: #474747; width:97%;}
.dark h1,
.dark h2 {color: #eee; margin:0;}
.dark h3 {color: #a38757; margin: 5px 0;}
.dark h4 {color: #eee; margin: 5px 0;width:97%;}
.dark p, .dark blockquote {color: #cdcdcd; width:97%;}

h5 {font-family: 'Open Sans', sans-serif; font-size:16px; font-weight:300; color:#9d9d9d; line-height:1em; letter-spacing: 0em; text-transform:uppercase; margin:0 0 15px 0;border-bottom:1px solid #9d9d9d;width:97%;}
.light h5 {color: #a38757; border-bottom:1px solid #a38757;}

.team blockquote {font-size:13px; line-height: 1.8em;}
.dark.team h1,
.dark.team h2 {color: #eee; margin:0; width:97%}
.dark.team h3 {color: #a38757; margin: 5px 0; width:97%}
.dark.team h4 {color: #eee; margin: 5px 0; width:97%;}
.dark.team p, .dark blockquote {color: #cdcdcd; width:97%; padding-left:0px !important;}
.team img.context {margin-left:-10px !important;}

dt {color: #eee;}
dd {color: #cdcdcd;} 
.light dt {color: #474747;} 
.light dd {color: #686868;}
.dark dt {color: #eee;} 
.dark dd {color: #cdcdcd;} 

.light ol {color:#474747;}
.dark ol {color: #cdcdcd;} 

ul {color: #cdcdcd;} 
.light ul {color:#474747;}
.dark ul {color: #cdcdcd;} 


/* === ********* === */
/* === SELECTION === */
/* === ********* === */

ul.selection {list-style:none; margin:0 0 50px 0; padding:0; text-align:center;}
ul.selection li {margin:10px 15px 10px 0; padding:0; display:inline-block;}
ul.selection li a {display:block; width:auto; height:auto;
-moz-transition: all .4s ease;-webkit-transition: all .4s ease;-o-transition: all .4s ease;transition: all .4s ease;}
ul.selection li a:hover {opacity:.6;
-moz-transition: all .4s ease;-webkit-transition: all .4s ease;-o-transition: all .4s ease;transition: all .4s ease;}
ul.selection li a p	{font-family: 'Playfair Display', serif; font-size:10px; color:#3e3e3e; font-weight:400; line-height:1.2em; letter-spacing: .3em; text-transform:uppercase; text-align:center; margin-top:-25px; padding:0; display:block;}

.ie7 ul.selection li {float:left;}
.ie7 ul.selection li a:hover p,
.ie8 ul.selection li a:hover p {text-decoration:underline;}

/* === **************** === */
/* === PRODUCT OVERVIEW === */
/* === **************** === */

.product-overview .black h2,.product-overview .black h3 {text-shadow: #171415 0px 1px 0px; }
.product-overview .img-container {width:100%; background-repeat: no-repeat; padding-bottom:20px; min-height:425px; background-position:45% top;}

.product-overview .actn-btn {position:relative; height:95px; cursor:pointer; background:#393939;}

.product-overview .special ul {list-style:none; margin-left:10px;}
.product-overview .special ul li {margin: 10px 0 10px 0; font-size:13px;font-family: 'Open Sans', sans-serif;}
.product-overview .special ul li:before {content:'♦ '; color:#a38757; margin-left:-10px; font-size:14px;}

/* === ********* === */
/* === ACCESSORIES === */
/* === ********* === */
.accessories .news-btn {height:85px;}
.accessories .news-btn span {height:85px;}
.accessories .news-btn h2 {font-family: 'Open Sans', sans-serif; font-size:28px; font-weight:300; line-height:1em; letter-spacing: 0em; font-style:normal; text-transform:uppercase; color:#fff !important; position:absolute; left:0; top:0; z-index:1600; margin:12px 0 0 15px !important; padding:0 !important; background:none !important; text-align:left !important;text-shadow:none !important;}
.accessories .news-accordion a .news-btn {margin-top:30px !important; width:98% !important;}
.accessories .news-container {width:100%; background-repeat: no-repeat; padding-bottom:20px; min-height:325px; background-position:45% top;}

/* === **************** === */
/* === MISC === */
/* === **************** === */

.awards ul {list-style:none; margin:0 0 100px 0; padding:0; text-align:center;}
.awards ul li {margin:10px 20px; padding:0; display:inline-block;}
.awards ul li img {border:5px solid #535353;} 

.awards ul li a {margin:0; padding:0; position:relative; cursor:pointer; width:255px; height:130px; } 
.awards ul li a span {position:absolute; display:inline; width:0px; height:130px; background:#222 url(../_assets/_landingpage/_footer/icon-run.png) center center no-repeat; margin-top:5px; margin-left:5px; opacity:.9;
-moz-transition: width .4s ease, background .4s ease;-webkit-transition: width .4s ease, background .4s ease;-o-transition: width .4s ease, background .4s ease;transition: width .4s ease, background .4s ease;}
.awards ul li a:hover span {width:255px; height:130px; margin-top:5px; margin-left:5px;
-moz-transition: width .4s ease, background .4s ease;-webkit-transition: width .4s ease, background .4s ease;-o-transition: width .4s ease, background .4s ease;transition: width .4s ease, background .4s ease;}

.action ul {list-style:none; margin:0 0 80px -20px; padding:0; text-align:center;}
.action ul li {margin:10px 28px 10px 0; padding:0; display:inline-block;width:400px; height:200px;}
.action ul li img {border:5px solid #535353;} 
.action ul li a {margin:0; padding:0; position:relative; display:inline-block; cursor:pointer; width:400px; height:200px;} 
.action ul li a div.mask {position:absolute; width:392px; height:201px; overflow:hidden; top:0; right:-5px; margin:5px 0 0 0;}
.action ul li a div.mask span {position:absolute; top:0; right:0; width:250px; height:500px; background:#191919;margin:-100px -50px 0 0;
-moz-transition: width .4s ease;-webkit-transition: width .4s ease;-o-transition: width .4s ease;transition: width .4s ease;
-webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
        transform: rotate(45deg);}
.action ul li a:hover div.mask span {width:500px; height:500px;margin:-100px -50px 0 0; top:0; right:0; 
-moz-transition: width .4s ease;-webkit-transition: width .4s ease;-o-transition: width .4s ease;transition: width .4s ease;}

.action ul li a p {position:absolute; z-index:1; font-family: 'Playfair Display', serif; font-size:17px; text-transform: uppercase; right:20px; bottom:10px; width:200px; text-align:right; line-height:1.2em; letter-spacing:.1em; margin:0;}
.light.action ul li a p  {color:#fff;}
.action ul li a div.icon-arrow-right {position:absolute; display:block; z-index:1; left:25px; top:20px; margin:0; padding:0; background:url(../_assets/_layout/sprite-arrows.png) 0 0 no-repeat; width:20px; height:20px; opacity:0;
-moz-transition: all .2s ease;-webkit-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;}
.action ul li a:hover div.icon-arrow-right {opacity:1;
-moz-transition: all .4s ease;-webkit-transition: all .4s ease;-o-transition: all .4s ease;transition: all .4s ease;
-webkit-transition-delay:.4s;-moz-transition-delay:.4s;-o-transition-delay:.2s;transition-delay:.4s;}

	.ie7 .action ul {margin:0 0 80px 40px;}
	.ie7 .action ul li {float:left;}
	.ie7 .action ul li a p, 
	.ie8 .action ul li a p {width:180px; right:15px; bottom:10px;}
	

/* === **************** === */
/* === DEALER COLOR === */
/* === **************** === */

.CA-Experience h4, .CA-Experience p {color: #247ba8 !important;}
 .CA-Experience p {font-weight:600;}
.CA-Specialist h4, .CA-Specialist p {color: #a38757 !important;}
.CA-Specialist p {font-weight:600;}
.CA-Architect {}

@media screen and (min-width: 0px) and (max-width: 1500px) {  

/* === ********* === */
/* === SELECTION === */
/* === ********* === */
.img-container {min-height:0px !important; background-position:20% top;}
}


@media screen and (min-width: 0px) and (max-width: 979px) { 

/* === FONTS === */
.section h1,
.section h2 {margin:0 0 0 7px;}
.section h3,
.section h4 {margin:5px 0 5px 7px;}
.section p {margin:0 0 17px 7px;}
.light h1,
.light h2 {text-align:center; background:#FFF;background: rgba(255, 255, 255, 0.8); width:75%; margin:0 auto; padding:3px 7px;}
.light h3,
.light h4 {text-align:center; background:#FFF;background: rgba(255, 255, 255, 0.8); width:75%; margin:0 auto; margin-top:5px; margin-bottom:5px; padding:3px 7px;}
.light h6 {text-align:center; width:75%; margin:0 auto; margin-top:5px; margin-bottom:5px; padding:3px 7px;}
.light p {text-align:center; background:#FFF;background: rgba(255, 255, 255, 0.8); width:75%; margin:0 auto; margin-bottom:17px; padding:3px 7px;}
.dark h1,
.dark h2 {text-align:center; background:#202020;background: rgba(32, 32, 32, 0.8); width:75%; margin:0 auto; padding:3px 7px;}
.dark h3,
.dark h4 {text-align:center; background:#202020;background: rgba(32, 32, 32, 0.8); width:75%; margin:0 auto; margin-top:5px; margin-bottom:5px; padding:3px 7px;}
.dark h6 {text-align:center; width:75%; margin:0 auto; margin-top:5px; margin-bottom:5px; padding:3px 7px;}
.dark p {text-align:center; background:#202020;background: rgba(32, 32, 32, 0.8); width:75%; margin:0 auto; margin-bottom:17px; padding:3px 7px;}
p.norgb{background: none;}

.light.special ul li {background:#FFF;background: rgba(255, 255, 255, 0.8); padding:3px 7px;}
.dark.special ul li {background:#202020;background: rgba(32, 32, 32, 0.8); padding:3px 7px;}

h5 {text-align:center; border-bottom:none; margin:0 auto; margin-top:5px; margin-bottom:15px; padding:3px 7px;}

.dark blockquote, .light blockquote {width:75%; margin:0 auto; padding:3px 7px;}

dl {} 
dt {padding:0; float:none; clear:both; text-align:center;} 
dd {margin:0; text-align:center;} 

ol {text-align:center;}

/* === **************** === */
/* === PRODUCT OVERVIEW === */
/* === **************** === */
.product-overview .special h1,
.product-overview .special h2,
.product-overview .special h3,
.product-overview .special p {width:40%; float:right; clear:both; margin-right:25px; padding:2px 7px 2px 7px;}

.special ul li {width:40%; float:right; clear:both; margin-right:25px;}

.product-overview .special.products {text-align:center;}
.product-overview .special.products h1,
.product-overview .special.products h2 {width:auto; display:inline-block; float:none; margin:0 auto; padding:7px; margin-top:2px; margin-bottom:2px; text-align:center;}
.product-overview .special.products h3,
.product-overview .special.products p {width:auto; display:inline-block; float:none; clear:both; margin:0 auto; padding:7px; margin-top:2px; margin-bottom:2px; text-align:center;}


.product-overview .actn-btn {max-width:450px; margin:0 auto;}
.product-overview .actn-btn h1,
.product-overview .actn-btn h2,
.product-overview .actn-btn h3,
.product-overview .actn-btn p {width:75% !important;}

/* === ********* === */
/* === ACCESSORIES === */
/* === ********* === */
.accessories .light h6, .accessories .dark h6 {margin-left:10px; margin-bottom: -20px;}
.accessories .light blockquote, .accessories .dark blockquote {margin-left:10px;}
.accessories .news-accordion a .news-btn {margin-right:30px !important; width:100%;}

/* === **************** === */
/* === MISC === */
/* === **************** === */
.action ul { margin:0 0 20px 0;}
.action ul li {margin:10px 14px 10px 14px; width:300px; height:150px;}

.action ul li a {width:300px; height:150px;} 
.action ul li a div.mask {width:300px; height:150px; margin:5px 0 0 0;}
.action ul li a div.mask span {width:220px; height:500px;}
.action ul li a:hover div.mask span {width:430px; height:500px;}

.action ul li a p {font-size:13px;right:12px; bottom:10px; width:170px; background:none;}
.action ul li a div.icon-arrow-right {left:20px; top:12px;}

}


@media screen and (min-width: 0px) and (max-width: 767px) { 


/* === ********* === */
/* === SELECTION === */
/* === ********* === */

ul.selection li {width:22%;}

/* === **************** === */
/* === PRODUCT OVERVIEW === */
/* === **************** === */

.product-overview .actn-btn {height:75px;}
.product-overview .actn-btn span {height:75px;}

/* === ********* === */
/* === ACCESSORIES === */
/* === ********* === */
.accessories .news-btn {height:70px;}
.accessories .news-btn span {height:70px;}
.accessories .news-btn h2 {font-size:1.4em !important; line-height:1.0em !important; margin-top:12px !important;}
.accessories .news-container {min-height:275px;background-position: 35% top; background-size:120%;}

/* === **************** === */
/* === MISC === */
/* === **************** === */
.awards ul li {width:175px;}
.awards ul li a {width:175px; height:90px; } 
.awards ul li a span {height:90px;}
.awards ul li a:hover span {width:175px; height:90px;}

 }
 
 @media screen and (min-width: 0px) and (max-width: 640px) { 
 
 /* === FONTS === */
.section h1,
.section h2 {font-size:2em; width:97%;}
.section h3 {font-size:.9em; width:97%;}
.section h4 {font-size:1.2em; width:97%;}
.section p {font-size:.8em; width:97%;}
.light h1,
.light h2 {font-size:2em; width:97%; padding:3px;}
.light h3 {font-size:.9em; width:97%; padding:3px;}
.light h4 {font-size:1.2em; width:97%; padding:3px;}
.light h5 {padding:3px;}
.light h6 { width:97%; padding:3px;}
.light p {font-size:.8em; width:97%; padding:3px;}
.dark h1,
.dark h2 {font-size:2em; width:97%; padding:3px;}
.dark h3 {font-size:.9em; width:97%; padding:3px;}
.dark h4 {font-size:1.2em; width:97%; padding:3px;}
.dark h5 {padding:3px;}
.dark h6 { width:97%; padding:3px;}
.dark p {font-size:.8em; width:97%; padding:3px;}


.dark blockquote, .light blockquote {width:97%; padding:3px;}

dl {} 
dt {font-size:.8em;} 
dd {font-size:.8em;} 

ol {font-size:.8em;}

 
/* === ********* === */
/* === SELECTION === */
/* === ********* === */

ul.selection li {width:40%;}

/* === **************** === */
/* === PRODUCT OVERVIEW === */
/* === **************** === */
.product-overview .special h1,
.product-overview .special h2,
.product-overview .special h3,
.product-overview .special p {text-align:left;}

.product-overview .special ul {text-align:left; margin-left:-25px;}
.product-overview .special ul li {margin: 3px 0 3px 0; font-size:.8em;}

.product-overview .img-container {min-height:0px !important; background-position: 40% top;}

.product-overview .actn-btn {width:80%;}

/* === ********* === */
/* === ACCESSORIES === */
/* === ********* === */
.accessories .news-accordion a .news-btn {margin-right:0 !important; width:100%;}

/* === **************** === */
/* === MISC === */
/* === **************** === */

.awards ul {margin:0 0 60px 0;}
.awards ul li {margin:10px 10px;}

.action ul { margin:0 0 20px 0;}
.action ul li {width:250px; height:125px;}

.action ul li a {width:250px; height:125px;} 
.action ul li a div.mask {width:250px; height:125px; margin:5px 0 0 0;}
.action ul li a div.mask span {width:220px; height:500px;}
.action ul li a:hover div.mask span {width:400px; height:380px; margin:-50px -20px 0 0;
-webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
        transform: rotate(0deg);}

.action ul li a p {right:7px; bottom:7px; width:140px;}
.action ul li a div.icon-arrow-right {left:20px; top:12px;}

 }

	
  @media screen and (min-width: 0px) and (max-width: 320px) { 
	
/* === FONTS === */
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6,
.section p {width:auto; float:none; margin:0 auto;}
.light h1,
.light h2,
.light h3,
.light h4,
.light h5,
.light h6,
.light p {width:auto; float:none;}
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p {width:auto; float:none;}

/* === ********* === */
/* === SELECTION === */
/* === ********* === */
	ul.selection li {width:40%;}
	ul.selection li p {letter-spacing:.2em !important;}
	
/* === ********* === */
/* === ACCESSORIES === */
/* === ********* === */
.accessories .news-container {background-position: 35% top; background-size:170%;}

	
/* === ******************************** === */
/* === MISC === */
/* === ******************************** === */

.awards ul li {width:110px;}
.awards ul li a {width:110px; height:57px; } 
.awards ul li a span {height:57px;}
.awards ul li a:hover span {width:110px; height:57px;}
	}