/* apply a natural box layout model to all elements */
/* http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.chromeframe {position: absolute; top: 0;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #ccc; color: #fff; text-shadow: none;}
::selection {background: #ccc; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #ccc;} 

ins {background-color: #ccc; color: #000; text-decoration: none;}
mark {background-color: #ccc; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

/* ======================================== Conde Nast promotion styles ======================================== */


.siteWidth {width: 100% !important;}
#main {margin-top: 0 !important;}

/* ========= OVERALL ========= */
.promoclear { clear:both}
.promowrapper a { text-decoration:none; color:#999;}
.promowrapper a:hover { color:#33b8db;}
.promowrapper { font-family: Arial, Helvetica, sans-serif; font-weight:300; color:#999; font-size:14px; width:100%; min-width:1024px; margin:auto; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 1s ease-in-out;}
.promowrapper p {font-size:14px; line-height:22px;}

.promowrapper h1 { font-size:35px; font-weight:300; text-transform:uppercase; letter-spacing:1px; margin:5px 0 10px 0;}
.promowrapper h3 { font-size:18px; font-weight:300; text-transform:uppercase; letter-spacing:1px; margin:5px 0 10px 0;}
.promowrapper h4 { font-size:20px; font-weight:500; text-transform:uppercase; letter-spacing:1px; margin:5px 0 10px 0; color:#ef2e25;}


/* ========= SHARE ========= */
.promosharegrey { margin:0 auto 15px auto; width:100%; border-bottom:10px solid #666; padding:10px 0 10px 0;}
.promoshareblack { margin:0 auto 15px auto; width:100%; border-bottom:1px solid #000; padding:10px 0 10px 0;}
.promosharewhite { margin:0 auto 15px auto; width:100%; background-color:000; padding:10px 0 10px 0;}
.promosharelinks { width:150px; float:right;}
.promosharelinks a { display:inline-block;}


/* ========= NAVIGATION ========= */
.promonav { font-size:13px; margin:10px 0 0 0; font-weight:300 !important; text-align:center;}
.promonav a { margin:0 10px 0 0; color:#33b8db; text-transform:uppercase; display:inline-block; font-weight:300 !important
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;}
.promonav a img { margin:0 2px -8px 0; display:inline-block;}
.promonav a.active { color:#ef2e25;}
.promonav a:hover { color:#ef2e25;}

/* ========= CONTENT ========= */
.promocontent { width:1024px; background-color:#fff;  margin:auto; padding:20px 0 10px 0;}
.promocontent p { margin:0 0 10px 0;}

.shellshare { font-size:12px; color:#CCC; text-align:center; margin:0 0 15px 0;}
.shellshare img { height:20px; margin:0px 0 -3px 0; display:inline-block;}

.promoheader { width:1024px; margin:20px auto 10px auto;}
.shellstripetop { width:100%; background-image:url(../img/shellstripe.png); background-repeat:repeat-x; height:28px;}
.shellstripebottom { width:100%; background-image: url(../img/stripebottom.png); background-repeat:repeat-x; height:30px;}
.shelllogo { margin:20px 0 20px 0; text-align:center;}
.shellkeys { margin:20px auto 50px auto; text-align:center;}
.shellkey { display:inline-block; width:200px; margin:0 20px 0 20px; text-align:center;}
.shellkey img { width:100%}
.shellthumbs { text-align:center; margin:10px auto 20px auto; max-width:1024px;}
.shellthumb { height:200px; width:200px; margin:auto; text-align:left; display:inline-block; overflow:hidden; background-size:100%;}
.shellthumb a h5 {font-size:16px; line-height:20px; font-weight:500; margin:0;}
.shellthumb a { background-color:#33b8db; display:block; height:120px; color:#fff; padding:5px; line-height:16px; margin:152px 0 0 0; text-transform:uppercase; letter-spacing:1px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;}
.shellthumb a span { font-size:12px; line-height:10px !important; text-transform:none; letter-spacing:0px; margin:5px 0 0 0;}
.shellthumb:hover a { margin:100px 0 0 0; color:#fff;}

.shellthumbslarge { text-align:center;}
.shellthumblarge { height:329px; width:329px; text-align:left; display:inline-block; overflow:hidden; background-size:100%;}
.shellthumblarge a h2 {font-size:26px; line-height:32px; font-weight:500; margin:0;}
.shellthumblarge a { background-color:#33b8db; display:block; height:140px; color:#fff; padding:5px; line-height:24px; margin:255px 0 0 0; text-transform:uppercase; letter-spacing:1px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;}
.shellthumblarge a span { font-size:16px; text-transform:none; letter-spacing:0px;}
.shellthumblarge:hover a { margin:200px 0 0 0; color:#fff;}

.shellslider { margin:20px 0 0px 0;}
.shellslidertitle { width:100%; vertical-align:bottom; height:100px; padding:0 20px 10px 20px; text-align:center; background-color:#33b8db; margin:0px 0 0 0;}
.shellslidertitle a { margin:auto;}
.shellslidertitle h2 { color:#fff; font-size:28px; letter-spacing:1px; font-weight:500; padding:5px 0 5px 0; text-transform:uppercase;}
.shellslidertitle span { color:#fff;}
.shellslidertitle h2 img { display:inline-block; margin:0 5px -6px 0;}
.hero { height:295px;}

.herolink {width:900px; height:200px; margin:auto; display:block;}

.shellarticle { width:700px; margin:10px auto 40px auto;}
.shellarticle p {text-align:left;}
.shellarticle img { margin:10px 0 20px 0;}

.iframe-container
{
   width:1024px;
   height:800px;
   z-index:1;
}

.drop { display:block; width:300px; background-color:#CCC; float:left; position: static; margin:200px 0 0 0;}

.shellsocial { background-color:#f1f1f1; padding:10px; width:260px; margin:20px auto 20px auto; text-align:center;}
.shellsocialbtn { display:inline-block;}

.promoarticle { text-align:center;}

.shellleft { float:left; width:60%; text-align:left; padding:0 0 0 5px}
.shellright { float:left; width:40%; text-align:right; z-index:-1;}
.shellright img { margin:-50px 0 0 0; z-index:-1;}

.shellarticle a { color:#666}



/* ========= CTA LINKS ========= */
.promoctalinksgrey { font-size:12px; margin:20px 0 0 0; padding:10px 0 10px 0;}
.promoctalinksgrey img { margin:0 0 -5px 0; display:inline-block;}
.promoctalinkgrey { width:33%; display:inline-block; color:#999; text-align:center;}
.promolinkswrap { width:70%; margin:0 auto 40px auto; max-width:800px;}


/* ========= COMPETITION ========= */
.cncompetition { width:100%; max-width:900px; height:auto; margin:0px auto 0 auto; background-color:#FFF; padding:20px;}
.cncompetition label { font-size:12px;}
.cncompetition .textinput input { padding:8px; border:1px solid #ccc; width:100%; color:#333; margin:5px 0 15px 0; background-color:#f9f9f9;-webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out;}
.cncompetition .textinput input:hover { border:1px solid #bbb; background-color:#fff;}
.cncompetition .compoptions { background-color:#f3f3f3; padding:20px 20px 30px 20px; border:1px solid #ccc; margin:10px 0 15px 0;}
.cncompetition .compoptions label { font-size:12px; line-height:18px; text-transform:none; color:#333; float:left; width:90%; margin:0 0 15px 0;}
.cncompetition .compoptions label:hover { color:#000;}
.cncompetition .compoptions input { width:4%; margin:0px 15px 10px 0; float:left}
.cncompetition .compoptions a { text-decoration:underline; font-weight:bold;}
.cncompetition .compleft { width:49%; float:left; margin-right:2%;}
.cncompetition .compright { width:49%; float:left;}
.cncompetition input.compsubmit { margin:0 0 0 0; width:100px; float:right; font-family:inherit; border:none; background-color:#000; font-size:18px; color:#fff; text-align:center; padding:10px 20px 10px 20px;}
.cncompetition .texterror { border:1px solid #F00 !important;} 
.cncompetition .compotionserror { color:#F00 !important;}
#terms {font-family:Arial, Helvetica, sans-serif;}

/* Media queries 1600px
-------------------------------------------------------------------------------*/
@media only screen and (max-width: 1600px) {


}


/* Media queries 1250px
-------------------------------------------------------------------------------*/
@media only screen and (max-width: 1250px) {

/* ========= CTA LINKS ========= */
.promolinkswrap { width:100%; margin:auto;}
.promoctalinksgrey img { display:block; margin:0 auto 10px auto;}
.promoctalinksblack img { display:block; margin:0 auto 10px auto;}

}


/* Media queries 768px
-------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {

/* ========= CTA LINKS ========= */
.promoctalinksgrey img { display:block; margin:0 auto 10px auto;}
.promoctalinksblack img { display:block; margin:0 auto 10px auto;}

}

/* Media queries 600px
-------------------------------------------------------------------------------*/
@media only screen and (max-width: 608px) {

/* ========= CTA LINKS ========= */
.promoctalinksgrey img { margin-bottom:-5px; display:inline-block}
.promoctalinksblack img { margin-bottom:-5px; display:inline-block}
.promoctalinkgrey { width:100%; display:block; color:#666; text-align:center; margin:10px 0 15px 0; font-size:16px;}
.promoctalinkblack { width:100%; display:block; color:#f1f1f1; text-align:center; margin:10px 0 15px 0; font-size:16px;}

}