body {margin:0; padding:0; background: #000;}
.content {position: absolute; left:0; top:50px; right:0; bottom:0; width:100vw; height: calc(100% - 50px); overflow: hidden; }
.logo {background:url(../img/colafry.png) no-repeat; position:relative; left:50%; top:20px; width:135px; height:100px; 
  transform: translate(-50%, 0%); background-size: contain; opacity: .3;}
/*thumbs*/
.text.info .logo{    width: 135px;
    height: 100px;
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: inline-block;
    transform: translateX(0);}
.thumbs {width: 100vw; min-height:50px; position:fixed; bottom:0px; background: #000; }
.thumbs ul {display: inline-block; width: 100vw; text-align: center; margin:0; padding:0; min-height: 50px;}
.thumbs ul li{display: inline-block; margin:0; width:50px; height: 50px; }
.thumbs ul li a{ width:50px; height: 50px; /*background:#d00;*/ text-decoration: none; display: block; opacity: .8;
transition: all .3s ease; border-radius: 50%;}
.thumbs ul li a:hover{opacity: 1;}
.thumbs ul li #telescope {background: url(../img/telescope-thumb.jpg) no-repeat; background-size: cover;}
.thumbs .thumbs-tips {width: 100vw; height: 30px;  background: #000; 
	position: absolute; top:-30px; opacity: 0; transition:opacity .6s ease;}
.thumbs .thumbs-tips.active {opacity:.8;}
.thumbs .thumbs-tips p {font-family: 'Barlow Condensed', sans-serif; color:#fff; font-size:16px; text-align: center; margin:0; line-height: 30px; }
/*menu*/
.menu {width: 100vw; height:50px; position:fixed; top:0; background: #000; transform: translateY(0px); transition: all .3s ease; z-index:100;}
.menu.active {transform: translateY(0px); }
.menu ul {display: inline-block; width: 100vw; text-align: center; margin:0; padding:0; }
.menu ul li{display: inline-block; margin:0 10px; width:32px; }
.menu ul li:nth-child(1){background: url(../img/weird-gif-1.gif) no-repeat center center; background-size: contain;}
.menu ul li:nth-child(2){background: url(../img/weird-gif-2.gif) no-repeat center center; background-size: contain;}
.menu ul li:nth-child(3){background: url(../img/weird-gif-3.gif) no-repeat center center; background-size: contain;}
.menu ul li a{color:#fff; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; line-height: 50px; font-weight: 700; text-transform: uppercase; text-decoration: none; opacity: 0;
transition: opacity .3s ease; width:32px; height: 50px; display: inline-block;}
.menu ul li a:hover{opacity: 1;}
.menu ul li a.active {text-decoration: underline;}
.mobile-btn {width:20px; height:20px; position: fixed; right:15px; top:15px; display:none;}
.mobile-btn {background:url(../img/mobile-menu-open.png) no-repeat; background-size: cover;}
.mobile-btn.active {background-image:url(../img/mobile-menu-close.png);}

/**/
.page {position:relative; width: 100vw; height:calc(100% - 50px); box-sizing: border-box; overflow-x: hidden; overflow-y: auto;
 /*opacity: 0; pointer-events: none; */ display: none;}

.page.active {/*opacity: 1;  pointer-events: inherit;*/ display:block; }
.page article {-webkit-overflow-scrolling: touch; }
.page article:before {content:""; position:fixed; left:0; top:0; right:0; bottom: 0; width: 100%; height:auto; /*background: url(../img/bg.jpg) repeat; background-size: 300px;*/
background: url(../img/bg.gif) repeat; background-size: 240px;
    opacity: .3;}

.embed-wrapper, .img-wrapper {width: 100%; max-width: 800px; margin:0 auto;
    box-sizing: border-box;
    padding: 20px 0 0 0px; text-align: center;}
.img-wrapper img {width: 100%; position: relative;}
.video-embed {width:100%; height: 0; padding-bottom: 56.25%; position: relative;}
.video-embed iframe {position: absolute;left:0; top:0 ;right:0; bottom:0; width: 100%; height:100%;}
.text {width: 100%; max-width: 800px; margin:0 auto;
    box-sizing: border-box;
    padding: 10px;
font-family: 'Barlow Condensed', sans-serif; position: relative; color:#fff;
  }
.text.center {text-align: center;}
.text.info {padding-top: 20px;}
  .text p {font-size:24px; font-weight: 700;}
  .text p a{color:#ccc; transition: all .3s ease;}
  .text p a:hover{color:#fff;}
  .text h3 {font-size:32px;}
  .text .small {font-size: 18px; font-weight: 400; color:#999;}
  .text .at:after{content:"@"; width:20px; height:20px; display:inline-block;}
  .text .dot:after{content: "o";
    font-size: 4px;
    width: 8px;
    height: 20px;
    display: inline-block;}
  ul.contacts {display: inline-block; text-align: center; margin:0; padding:0; }
  ul.contacts li{display: inline-block; margin:0 4px; width:50px; }  
  ul.contacts li a {display: block; height:50px; width:50px; opacity: .7; transition: opacity .3s ease;}  
  ul.contacts li a:hover {opacity:.9;}
  ul.contacts li:nth-child(1) a{background: url(../img/icon-email.png) no-repeat center center; background-size: contain;}
  ul.contacts li:nth-child(2) a{background: url(../img/icon-facebook.png) no-repeat center center; background-size: contain;}
  ul.contacts li:nth-child(3) a{background: url(../img/icon-messenger.png) no-repeat center center; background-size: contain;}
  .text .rudi-logo {background: url(../img/rudimentol-wht100x100.png) no-repeat center top;
    background-size: 40px;
    width: 70px;
    height: 30px;
    font-family: serif;
    font-size: 11px;
    line-height: 10px;
    color: #fff;
    padding-top: 40px; text-decoration: none;
    display: inline-block; opacity: .3; transition: opacity .3s ease;}
    .text .rudi-logo:hover {opacity: .7;}
  @keyframes skewinA {
    0% {transform: skew(-10deg) rotate(2deg) translateY(-50%);}
    50% {transform: skew(10deg) rotate(-2deg) translateY(-50%);}
    100% {transform: skew(-10deg) rotate(2deg) translateY(-50%);}
}
@keyframes skewinB {
    0% {transform: skew(10deg) rotate(-2deg);}
    50% {transform: skew(-10deg) rotate(2deg);}
    100% {transform: skew(10deg) rotate(-2deg);}
}
.page-home {/*background-color: darkmagenta;*/ background-color: darkgreen;}
.page-home article{/*transform: translateY(-50%);
    top: 50%;*/ height: 100%;
    position: relative;  }
.page-home article:before {content:""; /*position:fixed; left:0; top:0; right:0; bottom: 0; width: 100%;*/ height:100%;
background: url(../img/anim-riscas.gif); background-size: cover;
    opacity: .1;}
    .page-tshirt {background-color: darkgreen;}
    .page-tshirt article:before {content:""; height:100%;
background: url(../img/anim-riscas.gif); background-size: cover;
    opacity: .1;}

.page-home .special  { cursor:pointer;
  background:#060;
  /*height: 140px;*/
  transform: skew(-10deg) rotate(2deg) translateY(-50%);
  -webkit-transform: skew(-10deg) rotate(2deg) translateY(-50%);
  -moz-transform: skew(-10deg) rotate(2deg) translateY(-50%);
   animation: skewinA 12s ease infinite;
  position: relative; left:0; top:50%;

}
.page-home .special:before {content:""; position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%;
background-image:url(../img/solids.gif); background-size: cover; opacity: .3; z-index:1; transition:opacity .6s ease;} 
.page-home .special:hover:before {opacity: .1;}
.page-home .special:after {content:""; position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%;
    background: url(../img/colafry.png) no-repeat;
    background-size: contain;
    opacity: .5;
    background-position-y: center; z-index:1; animation: skewinB 12s ease infinite;} 
.page-home .special p{
  transform: skew(10deg) rotate(-2deg);
  -webkit-transform: skew(10deg) rotate(-2deg);
  -moz-transform: skew(10deg) rotate(-2deg);
  position:relative; z-index:2; animation: skewinB 12s ease infinite;
}
.spacer {width:100vw; height:100px;}
/**/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
  	/*.content {top:0; height:100%;}
  	.menu {transform: translateY(-50px); }
  	
  	.mobile-btn {display:block;}*/
  	.embed-wrapper {padding:0;}
}