*{box-sizing:border-box;}
html, body{margin:0; padding:0;font-family:sans-serif;}
div{position:relative;box-sizing:border-box;}
.container{margin:0 auto;width:958px;}
img{margin:0; padding:0;max-width:100%;border:none;}
a{text-decoration:none;color:#0090c2;}
a:hover{color:#e01117;}
a img{border:none;}
.big{font-size: 150%;}
.underline{text-decoration:underline;}
figure{margin:0; padding:0;}
.clearfix:before,.clearfix:after, .container:before, .container:after, .grid:before, .grid:after{content: " ";display: table;}
.clearfix:after, .container:after, .grid:after{clear: both;}
nav ul{margin:0; padding:25px 0 21px 0;text-align:center;line-height:30px;}
nav ul li{display:inline-block;}
nav.main ul li{display:inline-block;padding:0 17px;}
nav.main ul{font: 700 24px 'museo-slab', serif;text-transform:uppercase;}
nav.language{text-align:left;position:absolute;top:50%;margin:-9px 0 0 0;right:14.9%;font:700 18px/24px 'museo-slab', sans-serif; text-transform: uppercase;}
nav.language, nav.language a, nav.main ul li.active a{color:#e01117;}
.hero{position:absolute;top:0;left:0;right:0; height:518px;background:#8ec8d6}
.content{margin: 0 0 58px 0;}
.grid-wrapper{padding:0 0 21px 0}
.half{width:50%;float:left; text-align:center;}
.half:last-child{float:right;}
.half .trigger{display:block;cursor:pointer;}
.half .trigger figure{padding:77px 0 20px 0;}
.half .trigger.active{color:#e01117;}
.half .trigger figure img{margin:0 0 32px 0;}
.half .trigger figcaption{text-align:center;font: 900 24px/28px 'museo-slab', serif;}
.grid{display:none;}
.grid ul{margin:0 0 0 0;padding: 0 13% 6px 13%;list-style:none;}
.grid > ul > li{float:left; width:50%; text-align:center;margin:0 0 0 0; cursor:pointer;display:none;}
.grid > ul > li.sub{display:block;}
.half .grid > ul > li .description{display:none;}
.half .grid .specials{display:none;}
.grid-wrapper .half:first-child{}
button{border:2px solid #fb8d00;padding: 10px 62px;font-size:16px;font-weight:700;line-height:20px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,1);border-radius:12px;background:#e01117;outline:none;}

.modal{background:#c7e3ea;display:none;}
.modal .half{padding:0;height:100%;}
.modal .half{text-align:left; font:700 18px 'museo-sans', sans-serif;text-transform:uppercase;}
.modal .half:first-of-type{position:absolute;top:0; left:0;right:50%;bottom:0;background:#fff;padding:12% 0 0 0;}
.modal .half:last-of-type{padding:47px 0 0 14px;float:right;}
.modal p{margin:0 0 20px 0;}
.modal p.intro{text-align:center;}
footer{background:#e01117;border-top:4px solid #fb8d00;text-align:center;}
footer .logo{display:block;position:relative;margin:-62px 0 0 0; padding:0 0 66px 0}
.close{position:absolute;top:0;right:0;width: 36px;height:36px;margin:-18px 0 0 0;background: url(../assets/sprite.png) -32px -32px;}
.close:hover{background-position: -132px -32px;}
.test{opacity: 0.5;background: #f00;}

.hero {height: 528px; background: url(http://filip.go.ro/MyWeb/work/ciaravolo/assets/bg-hero.png) #8fc6d4 no-repeat;  background-size:cover;overflow:hidden;}

.cloud-one {background: url("http://filip.go.ro/MyWeb/work/ciaravolo/assets/clouds-02.png") bottom left repeat-x;  position: absolute;  right: 0;  bottom: -20%;  height: 100%;  width: 300%;  -webkit-animation: cloud_one 100s linear infinite;  -moz-animation: cloud_one 100s linear infinite;  -o-animation: cloud_one 100s linear infinite;  -webkit-transform: translate3d(0, 0, 0);  -moz-transform: translate3d(0, 0, 0);  -o-transform: translate3d(0, 0, 0)}
.cloud-two {background: url("http://filip.go.ro/MyWeb/work/ciaravolo/assets/clouds-01.png") bottom left repeat-x;  position: absolute;  left: 0;  bottom:-20%;  height: 100%;  width: 300%;  -webkit-animation: cloud_two 150s linear infinite;  -moz-animation: cloud_two 150s linear infinite;  -o-animation: cloud_two 150s linear infinite;  -webkit-transform: translate3d(0, 0, 0);  -moz-transform: translate3d(0, 0, 0);  -o-transform: translate3d(0, 0, 0)}
@-webkit-keyframes sky_background { 
  0% {background: #007fd5; color: #007fd5 }  
  50% {background: #000; color: #a3d9ff }
  100% {background: #007fd5;color: #007fd5}
}
@-webkit-keyframes cloud_one {
  0% {right: 0}
  100% {right: -200%}
}
@-webkit-keyframes cloud_two {
  0% {left: 0}
  100% {left: -200%}
}
@-moz-keyframes cloud_one {
  0% {left: 0}
  100% {left: -200%}
}
@-moz-keyframes cloud_two {
  0% {left: 0}
  100% {left: -200%}
}

/* * * * * * * * * * * * * * * * * * * * *\  
  CSShake :: shake-slow
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
.shake-slow {
  display: inline-block;
  transform-origin: center center; }

.shake-freeze,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover {
  animation-play-state: paused; }

.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, .shake-slow:hover,
.shake-trigger:hover .shake-slow {
  animation-play-state: running; }

@keyframes shake-slow {
  2% {
    transform: translate(4px, 4px) rotate(-2.5deg); }
  4% {
    transform: translate(-2px, -1px) rotate(1.5deg); }
  6% {
    transform: translate(-1px, 3px) rotate(3.5deg); }
  8% {
    transform: translate(-4px, -1px) rotate(-2.5deg); }
  10% {
    transform: translate(-2px, 6px) rotate(-0.5deg); }
  12% {
    transform: translate(-8px, 5px) rotate(0.5deg); }
  14% {
    transform: translate(3px, 5px) rotate(2.5deg); }
  16% {
    transform: translate(0px, 8px) rotate(0.5deg); }
  18% {
    transform: translate(4px, -2px) rotate(-1.5deg); }
  20% {
    transform: translate(7px, -4px) rotate(2.5deg); }
  22% {
    transform: translate(6px, 3px) rotate(-2.5deg); }
  24% {
    transform: translate(-3px, -3px) rotate(-2.5deg); }
  26% {
    transform: translate(-3px, -8px) rotate(3.5deg); }
  28% {
    transform: translate(-5px, 6px) rotate(3.5deg); }
  30% {
    transform: translate(-1px, 10px) rotate(3.5deg); }
  32% {
    transform: translate(-7px, 0px) rotate(-2.5deg); }
  34% {
    transform: translate(-1px, 4px) rotate(2.5deg); }
  36% {
    transform: translate(8px, -7px) rotate(0.5deg); }
  38% {
    transform: translate(10px, 2px) rotate(-1.5deg); }
  40% {
    transform: translate(0px, -1px) rotate(0.5deg); }
  42% {
    transform: translate(-3px, 8px) rotate(-2.5deg); }
  44% {
    transform: translate(5px, 0px) rotate(3.5deg); }
  46% {
    transform: translate(-5px, 2px) rotate(2.5deg); }
  48% {
    transform: translate(2px, 1px) rotate(-1.5deg); }
  50% {
    transform: translate(2px, -9px) rotate(-1.5deg); }
  52% {
    transform: translate(-8px, 1px) rotate(-0.5deg); }
  54% {
    transform: translate(0px, 2px) rotate(2.5deg); }
  56% {
    transform: translate(-3px, 4px) rotate(-2.5deg); }
  58% {
    transform: translate(8px, 5px) rotate(3.5deg); }
  60% {
    transform: translate(-1px, -6px) rotate(3.5deg); }
  62% {
    transform: translate(8px, -2px) rotate(-0.5deg); }
  64% {
    transform: translate(3px, -7px) rotate(-1.5deg); }
  66% {
    transform: translate(-6px, -7px) rotate(-1.5deg); }
  68% {
    transform: translate(3px, -1px) rotate(2.5deg); }
  70% {
    transform: translate(-2px, 1px) rotate(3.5deg); }
  72% {
    transform: translate(-4px, -4px) rotate(1.5deg); }
  74% {
    transform: translate(10px, 2px) rotate(1.5deg); }
  76% {
    transform: translate(-2px, -5px) rotate(-1.5deg); }
  78% {
    transform: translate(4px, -3px) rotate(0.5deg); }
  80% {
    transform: translate(-4px, -9px) rotate(3.5deg); }
  82% {
    transform: translate(-1px, 6px) rotate(0.5deg); }
  84% {
    transform: translate(10px, 3px) rotate(-0.5deg); }
  86% {
    transform: translate(3px, -9px) rotate(-0.5deg); }
  88% {
    transform: translate(7px, -6px) rotate(-1.5deg); }
  90% {
    transform: translate(-9px, -6px) rotate(3.5deg); }
  92% {
    transform: translate(-7px, -9px) rotate(1.5deg); }
  94% {
    transform: translate(-7px, 4px) rotate(-1.5deg); }
  96% {
    transform: translate(6px, 2px) rotate(1.5deg); }
  98% {
    transform: translate(-8px, -8px) rotate(1.5deg); }
  0%, 100% {
    transform: translate(0, 0) rotate(0); } }

.shake-slow:hover,
.shake-trigger:hover .shake-slow,
.shake-slow.shake-freeze,
.shake-slow.shake-constant {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: shake-slow;
  animation-timing-function: ease-in-out; }
  @media screen and (max-width:960px){
    .container{width:100%;}
    .modal p br{display:none;}
    .modal p{padding:0}
    .modal .half:last-of-type{padding:15px;}
  }
  @media screen and (max-width:767px){
    header, content, footer{position:static;}
    nav ul{margin:0; padding:15px 0 15px 5px;text-align:left;line-height:30px;}
    nav ul li{display:inline-block;}
    nav.main ul li{display:inline-block;padding:0 5px;}
    nav.main ul{font: 700 16px 'museo-slab', serif;text-transform:uppercase;}
    nav.language{text-align:right;position:absolute;top:50%;margin:-12px 0 0 0;right:10px;font:700 14px/24px 'museo-slab', sans-serif; text-transform: uppercase;}
    nav.language, nav.language a, nav.main ul li.active a{color:#e01117;}
    .hero{height:400px;}
    
    .grid-wrapper > .half{float:none; width:auto;padding:0 0 20px 0}
    .modal{position:fixed;top:0; left:0;width:100%; height:100%;overflow:scroll;z-index:999;}
    .modal .half{float:none; width:100%;overflow:auto;padding:15px;}
    .modal .half:first-of-type{position:relative;padding:40px;height:auto;}
    .modal .half:last-of-type{padding:15px;}
    .modal .half br{display:none;}
    .modal .half p{padding:0;}
    .close{position:absolute;top:15px;right:15px;width: 36px;height:36px;margin:0;}
    .trigger{display:block; width:65%;margin:0 auto;}
    .half .trigger figure{padding:20px 0 0 0;}
    .half .trigger figcaption{font-size:100%; line-height:100%}
    .grid{padding:40px 0 0 0}
    footer .logo{margin:-40px 0  0; padding:0 0 20px;}
    footer .logo img{width:80px;}
  }