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

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,body {height:100%;/*background:#9fb6cf url(/content/dam/aircanada/portal/Legacy/foundation/images/bg.png);*/ background-color: #efefef; font-family:Verdana, Arial, Helvetica, sans-serif;}
html,button,input,select,textarea {color: #333;}
body {font-size: 1em;line-height: 1.4; margin:0; padding:0;}
a, a:visited { color:#CC0000;}
a:hover { color:#FF0000;}
::-moz-selection {background: #b3d4fc;text-shadow: none;}
::selection {background: #b3d4fc;text-shadow: none;}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}
img {vertical-align: middle; width: 100%;}
fieldset {border: 0;margin: 0;padding: 0;}
textarea {resize: vertical;}
.chromeframe {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}

/* ==========================================================================
   CSS Buttons
   ========================================================================== */
.button {display: inline-block;zoom: 1;  /* zoom and *display = ie7 hack for display:inline-block*/*display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;line-height:100%;font-weight:bold;padding: .15em .15em;text-shadow: 0 0 2px rgba(0,0,0,.4);-webkit-border-radius: .3em;-moz-border-radius: .3em;border-radius: .3em;
-webkit-box-shadow: 0 0 2px rgba(51,51,51,.4);-moz-box-shadow: 0 0 2px rgba(51,51,51,.4);box-shadow: 0 0 2px rgba(51,51,51,.4);}
.button:hover {text-decoration: none;}
.button:active {position: relative;top: 1px;}
.bigBtn span {font-size: 22px;font-weight: normal;padding: .48em 1em .56em;display:block;}
.mediumBtn span {font-size: 14px;padding: .4em 1em .44em;display:block;}
.redBtn {color: #fff !important;border: solid 1px #333;background: #f7645a;background: -webkit-gradient(linear, left top, left bottom, from(#fe7f6e), to(#ea0000));background: -moz-linear-gradient(top,  #fe7f6e,  #ea0000);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe7f6e', endColorstr='#ea0000');}
.redBtn span {background: #d30a00;background: -webkit-gradient(linear, left top, left bottom, from(#f21100), to(#b10100));background: -moz-linear-gradient(top,  #f21100,  #b10100);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f21100', endColorstr='#b10100');}
.redBtn:hover {background: #fc8173;background: -webkit-gradient(linear, left top, left bottom, from(#ff9b90), to(#ffa59b));background: -moz-linear-gradient(top,  #ff9b90,  #ffa59b);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b90', endColorstr='#ffa59b');}
.redBtn:hover span {background: #ff0000;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ff0000');}
.redBtn:active {background: -webkit-gradient(linear, left top, left bottom, from(#ffa59b), to(#ff9b90));background: -moz-linear-gradient(top,  #ffa59b,  #ff9b90);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa59b', endColorstr='#ff9b90');}

/* ==========================================================================
   Custom styles
   ========================================================================== */

/* Color Letters */
/*
.rouge { color:#ed1c24;}
.vinRouge { color:#7d0021;}
.blue { color:#3599d4;}
.vert { color:#00aca0;}
*/

#stage {margin:0 auto; width:960px; min-height: 100%; height: auto !important; height: 100%; border-left:1px solid #606972; border-right:1px solid #606972;
background: url(/content/dam/aircanada/portal/Legacy/foundation/images/h/plane_traces_bottom.jpg) left bottom no-repeat #fff;
-moz-box-shadow: 0 0 5px 5px rgba(0,0,0,0.4);-webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,0.4);box-shadow: 0 0 5px 5px #rgba(0,0,0,0.4); padding-bottom:260px; position:relative;}

header { width:100%; position:relative;}
#logo { width:auto; margin:10px;}
#language-nav { position:absolute; font-weight:bold; top:10px; right:20px;}
#announce {border:1px solid #003d68; background-color:#fff; overflow:hidden;-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;-moz-box-shadow:inset 0 0 5px 5px rgba(134,181,213,0.4);-webkit-box-shadow:inset 0 0 5px 5px rgba(134,181,213,0.4);box-shadow:inset 0 0 5px 5px #rgba(134,181,213,0.4); position:absolute; top:50px; right:20px; padding:10px; font-size:0.8em;}

/*Donate*/

#counter{
   margin:20px; /*border:1px solid #003d68;*/border:1px solid #666666; background-color:#fff; overflow:hidden;
   box-shadow: 0 0 5px 5px #rgba(134,181,213,0.4);
   border-radius: 8px;
   font-size: 1em;
   height: 85px;
}
#slogan, #nbMiles, #donate, #donateCash, #donateIntro{
   float: left;
   margin: 0;
   padding: 0;
   height: 200px;
}
#slogan p, #nbMiles p, #donate p, #donateCash p{
   margin: 0;
   padding: 0;
   word-wrap: break-word;
   vertical-align: middle;
}
#slogan { width: 25%; background: url(/content/dam/aircanada/portal/Legacy/foundation/images/h/bg_blue_gradient.png) 0 0 repeat-x #2663a5; color: #fff; padding: 10px 5px; }

#donateCash { border-right: 1px dashed #000; margin: 0 10px 0 0; padding: 10px 15px; }
#donateIntro { width: 25%; padding: 10px 0;}
#donateIntro h3 { font-size: 0.9em; margin: 0; padding: 0; }
#donateIntro p { font-size: 0.7em; margin: 0; padding: 0; }
#donateCash .smallType{ font-size: 0.7em; display: block;}

#nbMiles { width:13%; margin-right:10px; font-size:0.7em; padding: 10px 0;}
#nbMiles span { display: block; color:#c00; font-size: 1.3em; font-weight: bold;}
#donate { float: right; padding: 10px 5px 10px 0;}

#counter.french #slogan p { font-size:0.8em;}

#main { margin:0 20px; /*border:1px solid #86b5d5;*/border:1px solid #666666; background-color:#fff;
/*-moz-box-shadow: 0 0 5px 5px rgba(134,181,213,0.4);-webkit-box-shadow: 0 0 5px 5px rgba(134,181,213,0.4);box-shadow: 0 0 5px 5px #rgba(134,181,213,0.4);*/-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;}

/*Menu*/
nav { width:30%; float:left;}
a.menu-trigger,
a.menu-trigger:hover { display:none;}
#menu { margin:0; padding:10px; list-style:none}
#menu ul { margin:0 0 0 20px; padding-left:0; list-style-type:none;}
#menu li { margin:0; padding:0 10px 0 0;position: relative; zoom: 1;}
#menu a, #menu a:visited { font-size:0.875em; color:#333; font-weight:bold; text-decoration:none; padding:2px 5px; display:inline-block; }
#menu a:hover {background-color:#3599d4; color:#fff;}
#menu ul li:before {padding-right: 5px; content: url(/content/dam/aircanada/portal/Legacy/foundation/images/l/bullet_red_square.gif); position: absolute; top: -1px;}
#menu ul a { font-weight:normal; margin-left:10px;}
#menu ul a:hover {background-color:#00aca0;}
#language-side { display:none;}


#content  { width:70%; float:left; padding:10px 20px; box-sizing: border-box;}
#content p { font-size:0.9em;}
#content ul li { font-size:0.9em;}
h1 { font-family:"Comic Sans MS","Marker Felt", cursive; margin-top:5px; padding-top:0; color: #464b4f;}
h2 { font-size:1.250em; margin:5px 0;}
h2.comic{ font-family:"Comic Sans MS","Marker Felt", cursive; }
h3 { font-size:1.125em;}

.video-container { position:relative; padding-bottom:56.25%; /*padding-top:30px;*/ overflow:hidden; margin:20px auto; width:90%;}
.video-container iframe,
.video-container object,
.video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}

.photoContainer { width:90%; text-align:center; overflow: hidden;}
.photoContainer img { width:auto; max-width:100%; height:auto;}

.logoLeft { width:200px; float:left; margin-right:20px; margin-bottom:20px;}

img.polaroid { border:5px solid #fff;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
img.polaroid.tiltLeft { float:left; margin:25px;
transform:rotate(-5deg);
-ms-transform:rotate(-5deg); /* IE 9 */
-webkit-transform:rotate(-5deg); /* Safari and Chrome */
}
img.polaroid.tiltRight { float:right; margin:25px;
transform:rotate(5deg);
-ms-transform:rotate(5deg); /* IE 9 */
-webkit-transform:rotate(5deg); /* Safari and Chrome */
}

figcaption { clear:both; margin:15px; padding:5px; font-style:italic; font-size:0.8em;display:inline-block; color:#444;}
figcaption.noCSS { }

.gallery { margin:0 0 20px 0; padding:0; list-style:none; overflow: hidden;}
.gallery li { width:140px; height:87px; float:left; margin:0 8px 8px 0; padding:0; position:relative; overflow: hidden;}
.gallery.spotlight li{ height: 212px; }
.gallery li img { width:140px; position:absolute; }

#addThis { padding-left:15px;}
.youtubeVideo{
   height: 315px;
   width: 420px;
}
.youtubeBlock{
   float: left;
}
.youtubeBlock>.youtubeVideo{
   height: 260px;
   margin-right: 10px;
   width: 311px;
}

.golfEventSkyscrapper{
   overflow: hidden;
}
.golfEventSkyscrapper img{
   float: left;
   margin-right: 3px;
}

/* ==========================================================================
   Media Queries for Screen Sizes
   ========================================================================== */

@media only screen and (min-width: 845px) and (max-width: 920px) {
   #slogan p { font-size:0.95em;}
   #counter.french #slogan p { font-size:0.75em;}
}
@media only screen and (min-width: 769px) and (max-width: 844px) {
   #slogan p { font-size:0.8em;}
   #counter.french #slogan p { font-size:0.6em;}
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
   #stage { width:auto; margin:0 32px;}
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
   #stage { width:768px; margin:0;}
   header { margin-top:30px;}
   #language-nav { display:none;}
   a.menu-trigger,
   a.menu-trigger:hover { display:block;}
   nav #menu { display:none;}
   #content { width:748px; padding:0 10px;}
   #slogan p { font-size:0.9em;}
   #counter.french #slogan p { font-size:0.7em;}

   .jPanelMenu-panel { margin:0; padding:0;}
   #jPanelMenu-menu,
   #jPanelMenu-menu ul { margin:0; padding:0; list-style:none; background-color:#363636; }
   #jPanelMenu-menu li { font-size:1em; cursor:pointer;background-color:#363636; border-top:1px solid #424242; border-bottom:1px solid #2c2c2c; margin:0; padding:0;}
   #jPanelMenu-menu ul li { padding-left:10px;}
   #jPanelMenu-menu li:hover,
   #jPanelMenu-menu li.active { background-color:#252525; border-top:1px solid #161616; border-bottom:1px solid #222222;}
   #jPanelMenu-menu li a { color:#8d8d8d; text-decoration:none; display:block; padding:2px 5px; font-size:0.95em;}
   #jPanelMenu-menu li a:hover,
   #jPanelMenu-menu li.active a {color:#e2e2e2;}
   #language-side { display:block;}

   .logoLeft { width:auto; float:none; margin-right:0; margin-bottom:20px;}
}
@media only screen and (min-width: 321px) and (max-width: 480px) {
   #stage { /*width:480px;*/width:100%; margin:0;}
   header { margin-top:30px;}

   #counter { margin:0; border:1px solid #003d68; background-color:#fff; overflow:hidden; height:auto;box-shadow:none;/*width: 450px;*/ width:auto;position: absolute;left: 15px;bottom: 15px;}
   #slogan, #miles, #donate {clear:both; height:auto;position: relative;margin: 0; padding:0; width:auto; color:#fff;}
   #slogan p, #miles p, #donate p { margin:0 auto; padding:0; word-wrap: normal; height:auto; text-align:center; width:450px; font-size:0.9em;}
   #slogan { width:100%; background-image:none; background-color:rgb(55, 135, 201);}
   #slogan h3 { padding:0; font-weight:900; margin:0; text-align:center;}
   #miles { width:100%; margin-right:10px; background-image:none; background-color:rgb(55, 135, 201);}
   #miles span { display:block; color:#c00; background-color:#fff; border:1px solid #000; font-weight:bold; padding:2px 7px; margin:3px auto; width:150px;}
   #donate { width:auto; padding:10px 0; display:inline-block; margin:0 auto;}
   #counter.french #slogan p { font-size:0.7em;}

   #language-nav, #announce { display:none;}
   a.menu-trigger,
   a.menu-trigger:hover { display:block; position: absolute;z-index: 10; padding: 10px;}
   nav #menu { display:none;}

   #main { margin:0; border:none; background-color:transparent; /*width:480px;*/width:100%;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-border-radius:none;-webkit-border-radius:none;border-radius:none;}

   #content { /*width:460px;*/width:auto; padding:0 10px; margin:}

   img.polaroid.tiltLeft,
   img.polaroid.tiltRight { float:none; margin:5px;
   transform:rotate(0);
   -ms-transform:rotate(0); /* IE 9 */
   -webkit-transform:rotate(0); /* Safari and Chrome */
   }

   .jPanelMenu-panel { margin:0; padding:0;}
   #jPanelMenu-menu,
   #jPanelMenu-menu ul { margin:0; padding:0; list-style:none; background-color:#363636; }
   #jPanelMenu-menu li { font-size:1em; cursor:pointer;background-color:#363636; border-top:1px solid #424242; border-bottom:1px solid #2c2c2c; margin:0; padding:0;}
   #jPanelMenu-menu ul li { padding-left:10px;}
   #jPanelMenu-menu li:hover,
   #jPanelMenu-menu li.active { background-color:#252525; border-top:1px solid #161616; border-bottom:1px solid #222222;}
   #jPanelMenu-menu li a { color:#8d8d8d; text-decoration:none; display:block; padding:2px 5px; font-size:0.750em;}
   #jPanelMenu-menu li a:hover,
   #jPanelMenu-menu li.active a {color:#e2e2e2;}
   #language-side { display:block;}

   .logoLeft { width:auto; float:none; margin-right:0; margin-bottom:20px;}
   #addThis { display:none;}
}
@media only screen and (max-width: 320px) {
   #stage { /*width:320px;*/width:100%; margin:0;}
   header { margin-top:30px;}

   #counter { margin:0; border:1px solid #003d68; background-color:#fff; overflow:hidden; height:auto;box-shadow:none;/*width:300px;*/width:auto;position: absolute;left: 10px;bottom: 10px;}
   #slogan, #miles, #donate {clear:both; height:auto;position: relative;margin: 0; padding:0; width:auto; color:#fff;}
   #slogan p, #miles p, #donate p { margin:0 auto; padding:0; word-wrap: normal; height:auto; text-align:center; width:300px; font-size:0.9em;}
   #slogan { width:100%; background-image:none; background-color:rgb(55, 135, 201);}
   #slogan h3 { padding:0; font-weight:900; margin:0; text-align:center;}
   #miles { width:100%; margin-right:10px; background-image:none; background-color:rgb(55, 135, 201);}
   #miles span { display:block; color:#c00; background-color:#fff; border:1px solid #000; font-weight:bold; padding:2px 7px; margin:3px auto; width:150px;}
   #donate { width:auto; padding:10px 0; display:inline-block; margin:0 auto;}
   #counter.french #slogan p { font-size:0.7em;}

   #language-nav, #announce { display:none;}
   a.menu-trigger,
   a.menu-trigger:hover { display:block; position: absolute;z-index: 10; padding: 10px;}
   nav #menu { display:none;}

   #main { margin:0; border:none; background-color:transparent; /*width:320px;*/width:100%;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-border-radius:none;-webkit-border-radius:none;border-radius:none;}

   #content { /*width:300px;*/width:auto; padding:0 10px; margin:}

   img.polaroid.tiltLeft,
   img.polaroid.tiltRight { float:none; margin:5px;
   transform:rotate(0);
   -ms-transform:rotate(0); /* IE 9 */
   -webkit-transform:rotate(0); /* Safari and Chrome */
   }

   .jPanelMenu-panel { margin:0; padding:0;}
   #jPanelMenu-menu,
   #jPanelMenu-menu ul { margin:0; padding:0; list-style:none; background-color:#363636; }
   #jPanelMenu-menu li { font-size:1em; cursor:pointer;background-color:#363636; border-top:1px solid #424242; border-bottom:1px solid #2c2c2c; margin:0; padding:0;}
   #jPanelMenu-menu ul li { padding-left:10px;}
   #jPanelMenu-menu li:hover,
   #jPanelMenu-menu li.active { background-color:#252525; border-top:1px solid #161616; border-bottom:1px solid #222222;}
   #jPanelMenu-menu li a { color:#8d8d8d; text-decoration:none; display:block; padding:2px 5px; font-size:0.750em;}
   #jPanelMenu-menu li a:hover,
   #jPanelMenu-menu li.active a {color:#e2e2e2;}
   #language-side { display:block;}

   .logoLeft { width:auto; float:none; margin-right:0; margin-bottom:20px;}
   #addThis { display:none;}
}

/* ==========================================================================
   Media Queries for Devices
   ========================================================================== */

/* Content 1024 px and Up ipad landscape*/
@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {

}
/* Content 768 px and Up ipad portrait (including mini)
@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait)*/
@media screen and (device-aspect-ratio: 3/4) and (orientation: portrait) {
   #stage { width:768px; margin:0;}
   header { margin-top:30px;}
   #language-nav { display:none;}
   a.menu-trigger,
   a.menu-trigger:hover { display:block; cursor:pointer; width:100%; background-color:#252525;color:#e2e2e2; position:fixed; z-index:800; padding:5px 10px 0; height:30px; color:#fff; text-decoration:none;}
   nav #menu { display:none;}
   #content { width:748px; padding:0 10px;}
   #slogan p { font-size:0.9em;}
   #counter.french #slogan p { font-size:0.7em;}

   .jPanelMenu-panel { margin:0; padding:0;}
   #jPanelMenu-menu,
   #jPanelMenu-menu ul { margin:0; padding:0; list-style:none; background-color:#363636; }
   #jPanelMenu-menu li { font-size:1em; cursor:pointer;background-color:#363636; border-top:1px solid #424242; border-bottom:1px solid #2c2c2c; margin:0; padding:0;}
   #jPanelMenu-menu ul li { padding-left:10px;}
   #jPanelMenu-menu li:hover,
   #jPanelMenu-menu li.active { background-color:#252525; border-top:1px solid #161616; border-bottom:1px solid #222222;}
   #jPanelMenu-menu li a { color:#8d8d8d; text-decoration:none; display:block; padding:2px 5px; font-size:0.95em;}
   #jPanelMenu-menu li a:hover,
   #jPanelMenu-menu li.active a {color:#e2e2e2;}
   #language-side { display:block;}
   #addThis { display:none;}
}
/* Content 480 px and Up iphone landscape
@media screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) */
@media screen and (device-aspect-ratio: 40/71) and (orientation: landscape) {
   #stage { width:480px; margin:0;}
   header { margin-top:30px;}

   #counter { margin:0; border:1px solid #003d68; background-color:#fff; overflow:hidden; height:auto;box-shadow:none;width: 450px;position: absolute;left: 15px;bottom: 15px;}
   #slogan, #miles, #donate {clear:both; height:auto;position: relative;margin: 0; padding:0; width:auto; color:#fff;}
   #slogan p, #miles p, #donate p { margin:0 auto; padding:0; word-wrap: normal; height:auto; text-align:center; width:450px; font-size:0.9em;}
   #slogan { width:100%; background-image:none; background-color:rgb(55, 135, 201);}
   #slogan h3 { padding:0; font-weight:900; margin:0; text-align:center;}
   #miles { width:100%; margin-right:10px; background-image:none; background-color:rgb(55, 135, 201);}
   #miles span { display:block; color:#c00; background-color:#fff; border:1px solid #000; font-weight:bold; padding:2px 7px; margin:3px auto; width:150px;}
   #donate { width:auto; padding:10px 0; display:inline-block; margin:0 auto;}
   #counter.french #slogan p { font-size:0.7em;}

   #language-nav, #announce { display:none;}
   a.menu-trigger,
   a.menu-trigger:hover { display:block; cursor:pointer; width:100%; background-color:#252525;color:#e2e2e2; position:fixed; z-index:800; padding:5px 10px 0; height:30px; color:#fff; text-decoration:none;}
   nav #menu { display:none;}

   #main { margin:0; border:none; background-color:transparent; width:480px;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-border-radius:none;-webkit-border-radius:none;border-radius:none;}

   #content { width:460px; padding:0 10px; margin:}

   img.polaroid.tiltLeft,
   img.polaroid.tiltRight { float:none; margin:5px;
   transform:rotate(0);
   -ms-transform:rotate(0); /* IE 9 */
   -webkit-transform:rotate(0); /* Safari and Chrome */
   }
   .logoLeft { width:auto; float:none; margin-right:0; margin-bottom:20px;}

   .jPanelMenu-panel { margin:0; padding:0;}
   #jPanelMenu-menu,
   #jPanelMenu-menu ul { margin:0; padding:0; list-style:none; background-color:#363636; }
   #jPanelMenu-menu li { font-size:1em; cursor:pointer;background-color:#363636; border-top:1px solid #424242; border-bottom:1px solid #2c2c2c; margin:0; padding:0;}
   #jPanelMenu-menu ul li { padding-left:10px;}
   #jPanelMenu-menu li:hover,
   #jPanelMenu-menu li.active { background-color:#252525; border-top:1px solid #161616; border-bottom:1px solid #222222;}
   #jPanelMenu-menu li a { color:#8d8d8d; text-decoration:none; display:block; padding:2px 5px; font-size:0.750em;}
   #jPanelMenu-menu li a:hover,
   #jPanelMenu-menu li.active a {color:#e2e2e2;}
   #language-side { display:block;}
   #addThis { display:none;}
   }

   @media screen and (device-aspect-ratio: 2/3) and (orientation: landscape) {
   #stage { width:480px; margin:0;}
   header { margin-top:30px;}

   #counter { margin:0; border:1px solid #003d68; background-color:#fff; overflow:hidden; height:auto;box-shadow:none;width: 450px;position: absolute;left: 15px;bottom: 15px;}
   #slogan, #miles, #donate {clear:both; height:auto;position: relative;margin: 0; padding:0; width:auto; color:#fff;}
   #slogan p, #miles p, #donate p { margin:0 auto; padding:0; word-wrap: normal; height:auto; text-align:center; width:450px; font-size:0.9em;}
   #slogan { width:100%; background-image:none; background-color:rgb(55, 135, 201);}
   #slogan h3 { padding:0; font-weight:900; margin:0; text-align:center;}
   #miles { width:100%; margin-right:10px; background-image:none; background-color:rgb(55, 135, 201);}
   #miles span { display:block; color:#c00; background-color:#fff; border:1px solid #000; font-weight:bold; padding:2px 7px; margin:3px auto; width:150px;}
   #donate { width:auto; padding:10px 0; display:inline-block; margin:0 auto;}
   #counter.french #slogan p { font-size:0.7em;}

   #language-nav, #announce { display:none;}
   a.menu-trigger,
   a.menu-trigger:hover { display:block; cursor:pointer; width:100%; background-color:#252525;color:#e2e2e2; position:fixed; z-index:800; padding:5px 10px 0; height:30px; color:#fff; text-decoration:none;}
   nav #menu { display:none;}

   #main { margin:0; border:none; background-color:transparent; width:480px;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-border-radius:none;-webkit-border-radius:none;border-radius:none;}

   #content { width:460px; padding:0 10px; margin:}

   img.polaroid.tiltLeft,
   img.polaroid.tiltRight { float:none; margin:5px;
   transform:rotate(0);
   -ms-transform:rotate(0); /* IE 9 */
   -webkit-transform:rotate(0); /* Safari and Chrome */
   }
   .logoLeft { width:auto; float:none; margin-right:0; margin-bottom:20px;}

   .jPanelMenu-panel { margin:0; padding:0;}
   #jPanelMenu-menu,
   #jPanelMenu-menu ul { margin:0; padding:0; list-style:none; background-color:#363636; }
   #jPanelMenu-menu li { font-size:1em; cursor:pointer;background-color:#363636; border-top:1px solid #424242; border-bottom:1px solid #2c2c2c; margin:0; padding:0;}
   #jPanelMenu-menu ul li { padding-left:10px;}
   #jPanelMenu-menu li:hover,
   #jPanelMenu-menu li.active { background-color:#252525; border-top:1px solid #161616; border-bottom:1px solid #222222;}
   #jPanelMenu-menu li a { color:#8d8d8d; text-decoration:none; display:block; padding:2px 5px; font-size:0.750em;}
   #jPanelMenu-menu li a:hover,
   #jPanelMenu-menu li.active a {color:#e2e2e2;}
   #language-side { display:block;}
   #addThis { display:none;}
}
/* Content 320 px and Up iphone portrait
@media screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait)*/
@media screen and (device-aspect-ratio: 40/71) and (orientation: portrait) {
   #stage { width:320px; margin:0;}
   header { margin-top:30px;}

   #slogan, #nbMiles, #donateIntro, #donateCash {clear:both; height:auto;position: relative;margin: 0; padding:0; width:auto; color:#fff;}
   #slogan p, #miles p, #donate p { margin:0 auto; padding:0; word-wrap: normal; height:auto; text-align:center; width:300px; font-size:0.9em;}
   #slogan { width:100%; background-image:none; background-color:rgb(55, 135, 201);}
   #slogan h3 { padding:0; font-weight:900; margin:0; text-align:center;}
   #donateCash { display: none; }
   #donateIntro { width:100%; margin-right:10px; background-image:none; background-color:rgb(55, 135, 201);} { width:100%; margin-right:10px; background-image:none; background-color:rgb(55, 135, 201);}
   #nbMiles { width:100%; margin-right:10px; background-image:none; background-color:rgb(55, 135, 201);}
   #nbMiles span { display:block; color:#c00; background-color:#fff; border:1px solid #000; font-weight:bold; padding:2px 7px; margin:3px auto; width:150px;}
   #donateCash { border: 0 solid transparent; }

   #donate { width:auto; padding:10px 0; display:inline-block; margin:0 auto; float: none;}
   #counter.french #slogan p { font-size:0.7em;}

   #language-nav, #announce { display:none;}
   a.menu-trigger,
   a.menu-trigger:hover { display:block; cursor:pointer; width:100%; background-color:#252525;color:#e2e2e2; position:fixed; z-index:800; padding:5px 10px 0; height:30px; color:#fff; text-decoration:none;}
   nav #menu { display:none;}

   #main { margin:0; border:none; background-color:transparent; width:320px;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-border-radius:none;-webkit-border-radius:none;border-radius:none;}

   #content { width:300px; padding:0 10px; margin:}

   img.polaroid.tiltLeft,
   img.polaroid.tiltRight { float:none; margin:5px;
   transform:rotate(0);
   -ms-transform:rotate(0); /* IE 9 */
   -webkit-transform:rotate(0); /* Safari and Chrome */
   }
   .logoLeft { width:auto; float:none; margin-right:0; margin-bottom:20px;}

   .jPanelMenu-panel { margin:0; padding:0;}
   #jPanelMenu-menu,
   #jPanelMenu-menu ul { margin:0; padding:0; list-style:none; background-color:#363636; }
   #jPanelMenu-menu li { font-size:1em; cursor:pointer;background-color:#363636; border-top:1px solid #424242; border-bottom:1px solid #2c2c2c; margin:0; padding:0;}
   #jPanelMenu-menu ul li { padding-left:10px;}
   #jPanelMenu-menu li:hover,
   #jPanelMenu-menu li.active { background-color:#252525; border-top:1px solid #161616; border-bottom:1px solid #222222;}
   #jPanelMenu-menu li a { color:#8d8d8d; text-decoration:none; display:block; padding:2px 5px; font-size:0.750em;}
   #jPanelMenu-menu li a:hover,
   #jPanelMenu-menu li.active a {color:#e2e2e2;}
   #language-side { display:block;}
   #addThis { display:none;}
   .youtubeBlock{ float: none; }
   .youtubeBlock>.youtubeVideo{ height: 188px; width: 250px; }
   .youtubeVideo{ text-align: center; height: 188px; width: 250px;}
}

@media screen and (device-aspect-ratio: 2/3) and (orientation: portrait) {
   #stage { width:320px; margin:0;}
   header { margin-top:30px;}

   #counter { margin:0; border:1px solid #003d68; background-color:#fff; overflow:hidden; height:auto;box-shadow:none;width: 300px;position: absolute;left: 10px;bottom: 10px;}
   #slogan, #miles, #donate {clear:both; height:auto;position: relative;margin: 0; padding:0; width:auto; color:#fff;}
   #slogan p, #miles p, #donate p { margin:0 auto; padding:0; word-wrap: normal; height:auto; text-align:center; width:300px; font-size:0.9em;}
   #slogan { width:100%; background-image:none; background-color:rgb(55, 135, 201);}
   #slogan h3 { padding:0; font-weight:900; margin:0; text-align:center;}
   #miles { width:100%; margin-right:10px; background-image:none; background-color:rgb(55, 135, 201);}
   #miles span { display:block; color:#c00; background-color:#fff; border:1px solid #000; font-weight:bold; padding:2px 7px; margin:3px auto; width:150px;}
   #donate { width:auto; padding:10px 0; display:inline-block; margin:0 auto;}
   #counter.french #slogan p { font-size:0.7em;}

   #language-nav, #announce { display:none;}
   a.menu-trigger,
   a.menu-trigger:hover { display:block; cursor:pointer; width:100%; background-color:#252525;color:#e2e2e2; position:fixed; z-index:800; padding:5px 10px 0; height:30px; color:#fff; text-decoration:none;}
   nav #menu { display:none;}

   #main { margin:0; border:none; background-color:transparent; width:320px;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-border-radius:none;-webkit-border-radius:none;border-radius:none;}

   #content { width:300px; padding:0 10px; margin:}

   img.polaroid.tiltLeft,
   img.polaroid.tiltRight { float:none; margin:5px;
   transform:rotate(0);
   -ms-transform:rotate(0); /* IE 9 */
   -webkit-transform:rotate(0); /* Safari and Chrome */
   }
   .logoLeft { width:auto; float:none; margin-right:0; margin-bottom:20px;}

   .jPanelMenu-panel { margin:0; padding:0;}
   #jPanelMenu-menu,
   #jPanelMenu-menu ul { margin:0; padding:0; list-style:none; background-color:#363636; }
   #jPanelMenu-menu li { font-size:1em; cursor:pointer;background-color:#363636; border-top:1px solid #424242; border-bottom:1px solid #2c2c2c; margin:0; padding:0;}
   #jPanelMenu-menu ul li { padding-left:10px;}
   #jPanelMenu-menu li:hover,
   #jPanelMenu-menu li.active { background-color:#252525; border-top:1px solid #161616; border-bottom:1px solid #222222;}
   #jPanelMenu-menu li a { color:#8d8d8d; text-decoration:none; display:block; padding:2px 5px; font-size:0.750em;}
   #jPanelMenu-menu li a:hover,
   #jPanelMenu-menu li.active a {color:#e2e2e2;}
   #language-side { display:block;}
   #addThis { display:none;}
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {background-color: transparent;border: 0;overflow: hidden;/* IE 6/7 fallback */*text-indent: -9999px;}
.ir:before {content: "";display: block;width: 0;height: 150%;}
.hidden {display: none !important;visibility: hidden;}
.visuallyhidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {clip: auto;height: auto;margin: 0;overflow: visible;position: static;width: auto;}
.invisible {visibility: hidden;}
.clearfix:before,
.clearfix:after {content: " "; /* 1 */display: table; /* 2 */}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
   * {background: transparent !important;color: #000 !important; /* Black prints faster: h5bp.com/s */box-shadow: none !important;text-shadow: none !important;}
   a,a:visited {text-decoration: underline;}
   a[href]:after {content: " (" attr(href) ")";}
   abbr[title]:after {content: " (" attr(title) ")";}
   /*
    * Don't show links for images, or javascript/internal links
    */
   .ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {content: "";}
   pre,blockquote {border: 1px solid #999;page-break-inside: avoid;}
   thead {display: table-header-group; /* h5bp.com/t */}
   tr,img {page-break-inside: avoid;}
   img {max-width: 100% !important;}
   @page {margin: 0.5cm;}
   p,h2,h3 {orphans: 3;widows: 3;}
   h2,h3 {page-break-after: avoid;}
}