@font-face {
font-family:"UniversLT Cn";
src: url("../../content/fonts/UniversLTStd-Cn.otf");
}

@font-face {
font-family:"UniversLT BoldCn";
src: url("../../content/fonts/UniversLTStd-BoldCn.otf");
}

@font-face {
font-family:"UniversLt CnObl";
src: url("../../content/fonts/UniversLTStd-CnObl.otf");
}

@media only screen{
.clear {clear:both;}
.floatl {float:left; margin-right:10px;}
.floatr {float:right; margin-left:10px;}
.wrap {width:100%; max-width:1000px; margin:0 auto;}
.nomarg {margin-bottom:0 !important;}
#pagewrap {width:100%; max-width:1000px; margin:0 auto; background:#fff;}
#pagewrap p {font-family:UniversLT Cn;}

#topbar {background:#47bae5; padding:10px 0;}
#topbar p {float:left; color:#fff; font-size:18px; font-family:UniversLT Cn; margin-bottom:0;}
#topbar p span.hide {display:inline-block; color:#fff;}
#socialmedia {float:right; margin-top:7px;}
#socialmedia a {display:inline-block; width:20px; padding:0 10px;}

#logobar {width:100%; background:#fff; padding:10px 0;}
#logobar img {display:block; margin:0 auto;}
.topshadow {width:100%; height:26px; background:url(http://www.thewisp.com/content/images/promo/top-shadow.png) no-repeat; margin-bottom:-26px; position:relative; z-index:10;}

#hero-new {
background:url(../../content/images/promo/hero-image.jpg) no-repeat center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
width:100%;
height:547px;
position:relative;
}

.hero-video {width:30%; position:absolute; top:5px; right:5px; cursor:pointer;}
.hero-video img {width:100%; height:auto;}
.hero-video iframe {width:100%; border:none;}


.mobile-video {width:90%; margin:15px auto; display:none;}
.mobile-video img {width:100%; height:auto;}
.mobile-video iframe {width:100%; border:none;}

.video2, .video3, .video4 {cursor:pointer;}


.ordernow {
cursor:pointer;
position:absolute;
top:80%;
left:76%;
width:225px;
padding:10px 0;
background:url(../../content/images/promo/minilogobutton.png) no-repeat, rgb(248,64,37);
background:url(../../content/images/promo/minilogobutton.png) no-repeat, -moz-linear-gradient(top,  rgba(248,64,37,1) 0%, rgba(222,39,12,1) 100%);
background:url(../../content/images/promo/minilogobutton.png) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,64,37,1)), color-stop(100%,rgba(222,39,12,1)));
background:url(../../content/images/promo/minilogobutton.png) no-repeat, -webkit-linear-gradient(top,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
background:url(../../content/images/promo/minilogobutton.png) no-repeat, -o-linear-gradient(top,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
background:url(../../content/images/promo/minilogobutton.png) no-repeat, -ms-linear-gradient(top,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
background:url(../../content/images/promo/minilogobutton.png) no-repeat, linear-gradient(to bottom,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f84025', endColorstr='#de270c',GradientType=0 );
background-position:10px;
}

.ordernow span {color:#fff; font-family:UniversLT BoldCn; font-size:22px; text-transform:uppercase; margin-left:85px;}

#pagewrap h1 {font-family:UniversLT BoldCn; color:#47bae5; font-size:52px; line-height:62px; text-align:center; margin:40px 0; text-transform:uppercase;}

.colright {width:40%; float:left;}
.colright img {display:block; width:100%; height:auto;}

.colleft {width:52%; padding:0 4%; float:left;}
.colleft h2 {font-family:UniversLT BoldCn; font-size:36px; line-height:42px; color:#f72b0d;}
.colleft h2 sup {font-size:24px !important;}
.colleft p {font-family:UniversLT CnObl; font-weight:bold; font-size:26px; line-height:32px; margin-bottom:25px; color:#090909;}
.colleft p.std {font-family:UniversLT Cn; font-weight:normal; color:#0d0d0e;}
.colleft p span {font-family:UniversLT BoldCn; color:#47bae5;}
.colleft p span sup {font-size:16px !important;}

.quotesection {width:90%; margin:5%; background:url(../../content/images/promo/quote-open.png) no-repeat left top, url(../../content/images/promo/quote-close.png) no-repeat right bottom;}
.quotesection img {display:block; margin:0 auto;}
.quotesection p {font-size:22px; line-height:36px; text-align:center; padding:0 8%;}
.highlight p {font-family:UniversLT BoldCn !important; text-align:center; color:#47bae5; font-size:36px; line-height:42px;}
.highlight p span {font-family:UniversLT Cn; text-align:center; color:#47bae5; font-size:36px; line-height:42px;}

#second-featured {
background:url(../../content/images/promo/second-hero.jpg) no-repeat center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
width:100%;
height:403px;
position:relative;
margin-bottom:50px;
}

#second-featured .ordernow {top:75%; left:60.5%;}

.break {width:100%; height:1px; background:#ccc; margin:40px 0;}

#videosection {background:#295982; padding:0 2% 2% 2%;}
#videosection h2 {font-family:UniversLT BoldCn; color:#47bae5; font-size:60px; line-height:66px; text-align:center; margin:0 0 50px 0; padding-top:50px;}
#videosection h2 sup {font-size:32px !important;}
.col-3 {width:31.33%; margin:1%;float:left;}
.col-3 img {width:100%; height:auto; display:block; margin-bottom:10px;}
.col-3 p {font-family:UniversLT BoldCn !important;}
.num {display:inline-block; font-size:46px; line-height:52px; color:#f72b0d; vertical-align:top; margin-left:15px;}
.videodesc {display:inline-block; font-size:22px; line-height:28px; color:#fff;vertical-align:bottom;}


#versus {}
#versus h3 {font-family:UniversLT BoldCn; color:#47bae5; font-size:48px; line-height:54px; padding:0 15px; margin:50px 0;}
#versus h3 span {width:32%; display:inline-block; color:#47bae5;}
#versus h3 span:nth-child(2) {text-align:center;}
#versus h3 span:nth-child(3) {text-align:right;}
#versus h3 sup {font-size:32px !important;}

.firstvs, .thirdvs {margin-top:100px; width:29%; padding:1%;}
.firstvs {border:1px solid #47bae5;}
.thirdvs {border:1px solid #ccc;}
.special-col img {max-width:201px; margin:0 auto;}
.special-col p {color:#47bae5; font-size:20px; text-align:center;}

#orangeheader {
background:rgb(248,64,37);
background:-moz-linear-gradient(top,  rgba(248,64,37,1) 0%, rgba(222,39,12,1) 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,64,37,1)), color-stop(100%,rgba(222,39,12,1)));
background:-webkit-linear-gradient(top,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
background:-o-linear-gradient(top,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
background:-ms-linear-gradient(top,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
background:linear-gradient(to bottom,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f84025', endColorstr='#de270c',GradientType=0 );
}

#orangeheader h2 {color:#fff; font-family:UniversLT BoldCn; font-size:38px; line-height:44px; padding:20px 0 !important; margin:0; text-transform:uppercase; text-align:center;}

#footernew {background:#47bae5; padding:20px 0;}
#footernew p {color:#fff; line-height:24px; width:86%; display:inline-block; vertical-align:middle; margin:0 !important; font-size:14px;}
#footernew p span {color:#fff;}
.footerlogo {width:13%; display:inline-block; vertical-align:middle;}

.hide {display:block;}

}


/****START RESPONSIVE****/
@media only screen and (max-width:1000px){
#pagewrap {max-width:767px;}
.wrap {max-width:767px;}

#hero-new {
background:url(http://www.thewisp.com/content/images/promo/hero-image-767.jpg) no-repeat center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
width:100%;
height:420px;
position:relative;
}

.ordernow {width:175px;}
.ordernow span {font-size:18px; margin-left:75px;}

#second-featured {
background:url(http://www.thewisp.com/content/images/promo/second-hero-767.jpg) no-repeat center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
width:100%;
height:309px;
position:relative;
margin-bottom:50px;
}

#second-featured .ordernow {left:64.5%;}

}

@media only screen and (max-width:767px){
#topbar p {font-size:16px;}

#pagewrap {max-width:480px;}
.wrap {max-width:480px;}

.hero-video {width:144px; height:81px; position:absolute; top:5px; right:5px; cursor:pointer;}
.hero-video iframe {width:144px; height:81px;}

#hero-new {
background:url(../../content/images/promo/hero-image-480.jpg) no-repeat center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
width:100%;
height:263px;
position:relative;
}

.ordernow {
cursor:pointer;
position:absolute;
top:80%;
left:76%;
width:110px;
padding:10px 0;
background:url(../../content/images/promo/minilogobutton-small.png) no-repeat, rgb(248,64,37);
background:url(../../content/images/promo/minilogobutton-small.png) no-repeat, -moz-linear-gradient(top,  rgba(248,64,37,1) 0%, rgba(222,39,12,1) 100%);
background:url(../../content/images/promo/minilogobutton-small.png) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,64,37,1)), color-stop(100%,rgba(222,39,12,1)));
background:url(../../content/images/promo/minilogobutton-small.png) no-repeat, -webkit-linear-gradient(top,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
background:url(../../content/images/promo/minilogobutton-small.png) no-repeat, -o-linear-gradient(top,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
background:url(../../content/images/promo/minilogobutton-small.png) no-repeat, -ms-linear-gradient(top,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
background:url(../../content/images/promo/minilogobutton-small.png) no-repeat, linear-gradient(to bottom,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f84025', endColorstr='#de270c',GradientType=0 );
background-position:5px;
}

.ordernow span {font-size:12px; margin-left:40px; font-family:UniversLT Cn;}

#second-featured {
background:url(../../content/images/promo/second-hero-480.jpg) no-repeat center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
width:100%;
height:193px;
position:relative;
margin-bottom:50px;
}

#pagewrap h1 {font-size:32px; line-height:42px;}

.colleft p {font-size:16px; line-height:24px;}
.colleft h2 {font-size:18px; line-height:26px;}
.colleft h2 sup {font-size:14px !important;}
.colleft .std {}
.colleft .std span {}

#videosection h2 {font-size:30px; line-height:36px; padding:20px 0; margin-bottom:20px;}
#videosection h2 sup {font-size:20px !important;}

#second-featured .ordernow {padding:5px 0; left:60%; top:72%;}

.quotesection img {max-width:150px; padding:10px 0;}
.quotesection p {font-size:16px; line-height:26px;}

.highlight p {width:96%; padding:0 2%; font-size:24px; line-height:30px;}
.highlight p span {font-size:20px; line-height:26px;}

.num {display:none;}
.videodesc {font-size:14px; line-height:20px; display:block; width:100%;}

#versus h3 {font-size:24px; margin:10px 0;}
#versus h3 sup {font-size:18px !important;}
#versus .col-3 {width:28%; margin:3%;}
.special-col {max-width:100px;}
.special-col p {font-size:12px;}

.firstvs, .thirdvs {margin-top:100px !important;}

#orangeheader h2 {font-size:20px; line-height:24px;}

#footernew {position:relative;}	
.footerlogo {position:absolute; width:126px; display:block; left:0; right:0; top:10px; margin:0 auto;}
#footernew p {position:relative; margin-top:60px !important; text-align:center; width:96%; padding:0 2%;}

#topbar p span.hide {display:none;}

}

@media only screen and (max-width:480px){
#topbar p {width:100%; margin-bottom:15px; text-align:center;}
#socialmedia {display:block; width:180px; margin:0 auto; float:none;}
.wrap {width:320px;}
#pagewrap {width:320px;}

.colright {width:80%; margin:0 auto; float:none;}
.colleft {width:90%; padding:5%; float:none; text-align:center;}

.quotesection {padding:50px 0;}

.highlight p {font-size:22px; line-height:28px;}

.col-3 {width:90% !important; padding:5% !important;}
.num {display:inline-block; font-size:32px;}
.videodesc {display:inline-block; font-size:20px; line-height:26px; width:80%;}

.firstvs, .thirdvs {margin-top:0;}
#versus .col-3 {width:88% !important; margin:3% !important; padding:3% !important;}
.special-col {max-width:88%;}
.special-col p {font-size:20px;}

#versus h3 span {display:block; text-align:center !important; width:100%; font-size:26px; line-height:34px;}

#footernew p span {display:block;}
.hide {display:none;}

#hero-new {
background:url(../../content/images/promo/hero-image-320.jpg) no-repeat center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
width:100%;
height:972px;
position:relative;
}

.ordernow {
width:90%;
top:30%;
left:0;
right:0;
margin:0 auto;
padding:10px 0;
background:url(../../content/images/promo/minilogobutton.png) no-repeat, rgb(248,64,37);
background:url(../../content/images/promo/minilogobutton.png) no-repeat, -moz-linear-gradient(top,  rgba(248,64,37,1) 0%, rgba(222,39,12,1) 100%);
background:url(../../content/images/promo/minilogobutton.png) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,64,37,1)), color-stop(100%,rgba(222,39,12,1)));
background:url(../../content/images/promo/minilogobutton.png) no-repeat, -webkit-linear-gradient(top,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
background:url(../../content/images/promo/minilogobutton.png) no-repeat, -o-linear-gradient(top,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
background:url(../../content/images/promo/minilogobutton.png) no-repeat, -ms-linear-gradient(top,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
background:url(../../content/images/promo/minilogobutton.png) no-repeat, linear-gradient(to bottom,  rgba(248,64,37,1) 0%,rgba(222,39,12,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f84025', endColorstr='#de270c',GradientType=0 );
background-position:10px;
}

.ordernow span {font-size:30px; margin-left:85px; font-family:UniversLT BoldCn;}

#second-featured {
background:url(../../content/images/promo/second-hero-320.jpg) no-repeat center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
width:100%;
height:625px;
position:relative;
margin-bottom:50px;
}

#second-featured .ordernow {
top:80%;
left:0;
right:0;
margin:0 auto;
padding:10px 0;
}

.hero-video {display:none;}
.mobile-video {display:block;}

}

@media only screen and (max-width:320px){
.wrap {width:100%; /*width:275px;*/}
#pagewrap {width:100%; /*width:275px;*/}

.ordernow span {font-size:24px;}

/*p {word-break:break-all;}*/
#footernew p {word-break:break-all; width:90%; margin:0 auto;}

}

@media only screen and (max-width:280px){
#hero-new {height:851px;}
#second-featured {height:547px;}
}

@media only screen and (max-width:275px){
#hero-new {height:835px;}
#second-featured {height:537px;}
}