/*@import url(https://fonts.googleapis.com/css?family=Oleo+Script);*/

@import url(https://fonts.googleapis.com/css?family=Acme);
@import url(https://fonts.googleapis.com/css?family=Boogaloo);

/*@import url(https://fonts.googleapis.com/css?family=Baloo);*/

/*@import url(https://fonts.googleapis.com/css?family=Concert+One);*/

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

html {
    /*gradient*/
    background: #73bab5; /* Old browsers */
    background: -moz-linear-gradient(top, #73bab5 34%, #ffffff 56%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #73bab5 34%,#ffffff 56%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #73bab5 34%,#ffffff 56%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73bab5', endColorstr='#ffffff',GradientType=0 );
    
    background-attachment: fixed;
}

.linkar{
    text-decoration: underline;
    color: #fff;
}

body {
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    color: #fff;
    
    /*font-family: 'Oleo Script', cursive;*/
    font-family: 'Acme', sans-serif; 
    /*font-family: 'Baloo', cursive;*/
    /*font-family: 'Concert One', cursive;*/
    
    margin: 0 !important;
    font-weight: 400;
}

.logo{
    width: auto;
    height: 70px;
    background: url('../imgs/logo.png') no-repeat center top;
}

.icones{
    position: fixed;
    top: 0;
    right: 0;
    width: auto;
}
.icones_off{
    position: fixed;
    top: 0;
    right: 0;
    width: auto;
    display: none;
}
.ico_ms{
    float: right;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    margin-top: 10px;
    background: url(../imgs/ico_ms.png);
    background-size: 50px 50px;
    cursor: pointer;
}

.ico_ms_off{
    float: right;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    margin-top: 10px;
    background: url(../imgs/ico_ms_off.png);
    background-size: 50px 50px;
    cursor: pointer;
}

.ico_fb{
    float: right;
    width: 50px;
    height: 50px;
    margin-right: 20px;
    margin-top: 10px;
    background: url(../imgs/ico_fb.png);
    background-size: 50px 50px;
    cursor: pointer;
}

h1 {
  margin:0;
  font-size:75px;
  line-height: 75px;
  text-align: center;
  font-weight: 400;
}

h2 {
  margin:0;
  font-size:40px;
  line-height: 42px;
  text-align: center;
  font-weight: 400;
  color: #fff;
}


.countdown{
    top:0;
    left:0;
    width: 100%;
    height: 350px;
    text-align: center;

    background: url(../imgs/pai_natal.svg), url(../imgs/casa_topo.svg);
    background-repeat: no-repeat;
    background-size: auto 210px, auto;
    background-position: bottom, bottom;
}

#demo{
    color: #fff;
    font-size: 90px; 
    text-shadow: 5px 5px #2e6c69b3;  
}

.janelas{
    height: auto;
    background: url('../imgs/bg_red.jpg') repeat;
}

.pordata{
    font-size: 70px;   
}

.bt_fundo{
    position: relative;
    top: -68px;
    
    width: 100%;
    height: 100px;
    background: url('../imgs/neve_bottom.svg') no-repeat center top;
    background-size: cover;
}

.button{
    /*font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";*/
}

ul {
  margin:0 auto 0 auto;
  list-style-type:none;
  /*max-width:900px;*/
  max-width:1100px;
  width: 100%;
  text-align: center;
  user-select: none;
  background-color: #faebbe;
  padding-bottom: 40px;
}

li {
  font-weight: 400;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 6px;
  display: inline-block;
  /*color:#111;*/
  cursor:pointer;
  /*font-size: 26px;*/
  /*padding:15px;*/
  margin:20px 20px;
  width: 130px;
  height:130px;
  /*line-height: 100px;*/
  text-align:center;
  position: relative;
  vertical-align:top;
  user-select: none;
  perspective: 800px;
  transition: all 0.4s ease-in-out;
}

ul li:last-child {
  background-position: center top;
  background-size:cover;  
  display:block;
  clear:both;
  margin: 20px auto 0 auto;
  width: 200px;
  height: 275px;
    
}

ul li:last-child .door {
  font-size: 100px;
  width: 200px;
  height: 275px;
  line-height: 240px;
  /*padding-bottom:40px;*/
}

ul li:last-child .revealed {
  line-height: 123px;
}

p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}

.acento{
    font-family: 'Boogaloo', cursive;
}

.door {
  user-select: none;
  color:#fff;
  font-size: 70px;
  position: absolute;
  top:0;
  left:0;
  background-color: #75bab5;
  width: 130px;
  height:130px;
  transform-origin: 0 40%; 
  transition: all 0.4s ease-in-out;
  transform-style: preserve-3d;
}

.d1{
  background: url("../imgs/pf1.jpg") center top;  
}
.d2{
  background: url("../imgs/pf2.jpg") center top;  
}
.d3{
  background: url("../imgs/pf3.jpg") center top;  
}
.d4{
  background: url("../imgs/pf4.jpg") center top;  
}
.d5{
  background: url("../imgs/pf5.jpg") center top;  
}
.d6{
  background: url("../imgs/pf6.jpg") center top;  
}
.d7{
  background: url("../imgs/pf7.jpg") center top;  
}
.d8{
  background: url("../imgs/pf8.jpg") center top;  
}
.d9{
  background: url("../imgs/pf9.jpg") center top;  
}
.d10{
  background: url("../imgs/pf10.jpg") center top;  
}
.d11{
  background: url("../imgs/pf11.jpg") center top;  
}
.d12{
  background: url("../imgs/pf12.jpg") center top;  
}
.d13{
  background: url("../imgs/pf13.jpg") center top;  
}
.d14{
  background: url("../imgs/pf14.jpg") center top;  
}
.d15{
  background: url("../imgs/pf15.jpg") center top;  
}
.d16{
  background: url("../imgs/pf16.jpg") center top;  
}
.d17{
  background: url("../imgs/pf17.jpg") center top;  
}
.d18{
  background: url("../imgs/pf18.jpg") center top;  
}
.d19{
  background: url("../imgs/pf19.jpg") center top;  
}
.d20{
  background: url("../imgs/pf20.jpg") center top;  
}
.d21{
  background: url("../imgs/pf21.jpg") center top;  
}
.d22{
  background: url("../imgs/pf22.jpg") center top;  
}
.d23{
  background: url("../imgs/pf23.jpg") center top;  
}
.d24{
  background: url("../imgs/pf24.jpg") center top;  
}
.d25{
  background: url("../imgs/pf25.jpg") center top;  
}

.current .door {
  /*background-color: #7EAD44;*/
    /*background:rgba(102,162,158,0.5);*/
}

.current .door.open{
  /*color: #7EAD44;*/
}


.revealed {
  user-select: none;
}

#message {
  box-sizing: border-box;
  color: #222;
  display: none;
  font-size: 24px;
  padding: 20px;
  background: #eddecb;
  max-width: 500px;
  width: 100%;
  border-radius: 15px;
  margin: 0 auto;
}

.open {
  box-shadow: 14px 0px 15px -1px rgba(0,0,0,0.2);
  transform: rotate3d(0, 1, 0, -98deg);
    
  background-color: #64a29e;
  background-blend-mode: screen;
}


.jiggle {
  animation: jiggle 0.2s infinite;
  transform: rotate(-1deg);

  box-shadow: 0 0 20px 10px #fff;
}

@keyframes jiggle {
  0% {
        transform: rotate(-1deg);
  }
  50% {
      transform: rotate(1deg);
  }
}

/*@media screen and (min-width: 480px) {*/
@media screen and (min-width: 320px) and (max-width: 480px) {
    .logo{
        background: url('../imgs/logo.png') no-repeat;
    }    
    
    li {
        margin:15px 8px;
    }
    
    #demo{
        font-size: 40px;
        text-shadow: 3px 3px #2e6c69b3;
    }

    .pordata{
        font-size: 30px;    
    }
    .countdown{
        height: 150px;
        background: url(../imgs/pai_natal.svg), url(../imgs/br_verm.svg);
        background-repeat: no-repeat;
        background-size: auto 150px, auto 16px;
        background-position: bottom, bottom;
    }
    .pordata{
        font-size: 30px;    
    }
}

@media screen and (orientation:portrait) {
  /* ... */
}
@media screen and (orientation: landscape) {
  /* ... */
} 

@media screen and (min-width: 768px) {
	body {
		background-size:150px;
	}
    .countdown{
        height: 250px;
        background: url(../imgs/pai_natal.svg), url(../imgs/casa_topo.svg);
        background-repeat: no-repeat, repeat-x;
        background-size: auto 210px, auto 210px;
        background-position: bottom, bottom;
    }
}