/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* The Mist v1.3 || ex nihilo || July 2013 */


/* Media Queries */


/* Smaller than standard 960 (devices and browsers) */
   @media only screen and (max-width: 959px) {
   }

/* Smaller than 770 */
   @media only screen and (max-width: 770px) {

.middle{
   display: none;
}

.middle-mobile{
   display: block
}

   }

/* Tablet Portrait size to standard 960 (devices and browsers) */
   @media only screen and (min-width: 768px) and (max-width: 959px) {
   
h1 {
font-size: 55px;
letter-spacing: 3px;
}

h2 {
font-size: 35px;
letter-spacing: 1px;
}

.intro h1 {
font-size: 70px;
letter-spacing: 10px;
}

.intro h2 {
font-size: 35px;
letter-spacing: 10px;
}

.container.center,
.container .sixteen.columns,
.half-column,
.carte{
   width: 700px;
}

#curtains{
   background: url('../images/mobile-bg.jpg') no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   z-index: -1;
}

#play{
   display: block !important;
   z-index: 999;
}

.contact{
   width: 450px;
   left: -27px;
}

#play a{
   display: none;
}

#play iframe.ipad{
   display: block;
   margin: auto;
}

   }

/* rules for iPad in landscape orientation */
@media only screen and (device-width: 768px) and (orientation: landscape) {

#controls{
   display: none;
}

#curtains{
   background: url('../images/mobile-bg.jpg') no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   z-index: -1;
}

.left-bottom{
   top: 0px;
}

.contact{
   width: 450px;
   height: auto;
   left: -30px;
   bottom: 5px;
}

#play{
   display: block !important;
   z-index: 999;
}

#play a{
   display: none;
}

#play iframe.ipad{
   display: block;
   margin: auto;
}

.intro{
   margin-bottom: 50px;
}

#mist{
   pointer-events: none;
}

   }

/* Iphone portrait orientation */
@media only screen and (max-device-width: 480px){

#controls{
   display: none;
}

   }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){

#controls{
   display: none;
}

   }


/* All Mobile Sizes (devices and browser) */
   @media only screen and (max-width: 767px) {

#curtains{
   background: url('../images/mobile-bg.jpg') no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   z-index: -1;
}

#play{
   display: block !important;
   z-index: 999;
}

.popup{
   display: none !important;
}

   }


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
   @media only screen and (min-width: 480px) and (max-width: 767px) {

h1 {
font-size: 40px;
letter-spacing: 3px;
}

h2 {
font-size: 25px;
letter-spacing: 1px;
}

.intro h1 {
font-size: 40px;
letter-spacing: 5px;
}

.intro h2 {
font-size: 25px;
letter-spacing: 5px;
}

.intro p {
font-size: 15px;
line-height: 1.5;
letter-spacing: 1px;
}

.intro-pages p {
font-size: 15px;
line-height: 1.5;
letter-spacing: 1px;
}

#countdown {
width: 400px;
height: auto;
}

div#clock p {
font-size: 25px;
}

div#clock p span {
font-size: 35px;
}

div#clock div.space {
font-size: 25px;
}

.left-bottom a.menu-trigger {
position: relative;
background: url(../images/menu-trigger.png) no-repeat;
width: 30px;
height: 31px;
text-indent: -10000px;
float: left;
top: -10px;
}

.left-bottom a.menu-trigger:hover {
background: url(../images/menu-trigger.png) no-repeat;
width: 30px;
height: 31px;
text-indent: -10000px;
}

#footer{
   height: 40px;
}

.footer-bg{
   background-image: none;
}

.contact {
left: 25px;
bottom: 5px;
width: 450px;
}

.continuer{
   z-index: 999;
}

.container,
.container .sixteen.columns,
.half-column,
.carte{
   width: 450px;
}

.half-column>div{
   width: 100%;
}

.half-column>div:first-child{
   margin: 0;
}

form div{
   float: none;
}

#play{
   display: block !important;
   z-index: 999;
}

#mist{
   bottom: 40px;
   pointer-events: none;
}

p.menu-trigger{
   padding-top: 0;
   margin-top: 0;
}

.left-bottom{
   margin-left: 0;
}

.left-bottom li{
   margin-top: 0;
}

.contact{
   font-size: 8px;
   bottom: -3px;
}

.intro{
   margin-top: 85px;
   margin-bottom: 30px;
}

.upper-page{
   margin-bottom: 20px;
}

div.continuer{
   bottom: -20px;
}

.half-column,
.carte{
   width: 100%;
   margin: 0;
}

.half-column > div:first-child,
.half-column > div:last-child{
   padding: 0;
}

#play a{
   display: block;
}
	
   }


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
   @media only screen and (max-width: 479px) {

h1 {
font-size: 30px;
letter-spacing: 3px;
}

h2 {
font-size: 25px;
letter-spacing: 1px;
}

.intro h1 {
font-size: 30px;
letter-spacing: 5px;
}

.intro h2 {
font-size: 25px;
letter-spacing: 5px;
}

.intro p {
font-size: 15px;
line-height: 1.5;
letter-spacing: 1px;
}

.intro-pages p {
font-size: 15px;
line-height: 1.5;
letter-spacing: 1px;
}

#countdown {
width: 260px;
height: auto;
}

div#clock p {
font-size: 25px;
}

div#clock p span {
font-size: 35px;
}

div#clock div.space {
font-size: 25px;
}

.left-bottom {
top: 0px;
left: 4px;
}

.left-bottom a.menu-trigger {
background: url(../images/menu-trigger.png) no-repeat;
width: 30px;
height: 31px;
text-indent: -10000px;
}

.left-bottom a.menu-trigger:hover {
background: url(../images/menu-trigger.png) no-repeat;
width: 30px;
height: 31px;
text-indent: -10000px;
}

.contact {
left: 25px;
top: 10px;
height: auto;
}

a.envelope:link, a.envelope:visited {
display: block;
width: 25px;
height: 17px;
background: url(../images/email-us-320.png) no-repeat left top;
}

a.envelope:hover {
background-position: left bottom;
}

.upper-page{
   width: 100%;
}

.container,
.container .sixteen.columns,
.half-column,
.carte{
   width: 100%;
}

.half-column>div{
   width: 100%;
}

.half-column>div:first-child{
   margin: 0;
}

form div{
   float: none;
}

#footer{
   width: 100%;
   height: 55px;
}

#mist{
   bottom: 55px;
   pointer-events: none;
}

#play{
   display: block !important;
   z-index: 999;
   margin-top: 30px;
}

#scroll{
   width: 100%;
}

.half-column,
.carte{
   margin-left: 1%;
   width: 98%;
}

.half-column > div:first-child{
   padding-right: 0;
}

.half-column > div:last-child{
   padding-left: 0;
}

.left-bottom{
   z-index: 999;
   margin-left: 15px;
}

.contact{
   left: 0px;
   top: 40px;
   font-size: 9px;
}

.address {
   padding: 0 0 0 20px;
}

p.menu-trigger{
   margin-top: 0;
   padding-top: 0;
}

div.continuer{
   bottom: 10px;
}

.intro{
   margin-bottom: 0;
   margin-top: 70px;
}

.upper-page{
   margin-bottom: 5px;
}

#play iframe.iphone{
   display: block;
   margin: auto;
}