<style type="text/css">
body {background-image: url();color:red;height:100%;overflow:hidden;}
header {
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding: 0px 0;
position: fixed;
top:-4px;
width: 100%;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
border-bottom: 3px solid #333;
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size: 11px;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
}
h2 {
padding:15px;
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%);
background: linear-gradient(transparent 10%, #333 50%, transparent 90%);
-webkit-animation: shadow 1s ease-in-out infinite;
animation: shadow 1s ease-in-out infinite;
}
/*Text Bawah1*/
M-2010, #teks, #posisi, #dibawah, span {
font: 11 15vw Raleway;
position: relative;
display: inline-block;
}
#M-2010, #teks, #posisi, #dibawah {
position: absolute;
font-size: 11px;
margin: 2px
}
#M-2010, #teks div {
text-decoration: underline;
cursor: pointer
}
#teks, #posisi {
text-align: right;
right: 50px;
}
#teks, #dibawah {
text-align: left;
left: 50px;
}
#dibawah, #posisi {
bottom:28px;
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
0% {
text-shadow: 0 0 2px #B0E0E6 ,
0 0 8px #B0E0E6 , 0 0 10px #B0E0E6 ,
0 0 20px #B0E0E6 , 0 0 30px #B0E0E6 ,
0 0 40px #B0E0E6, 0 0 50px #B0E0E6 ,
0 0 80px #B0E0E6;
}
50% {
text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8),
0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
0 -10px 2px rgba(255, 0, 0, 0.8);
}
100% {
text-shadow: 0 0 2px #800080 ,
0 0 8px #800080 , 0 0 10px #800080 ,
0 0 20px #800080 , 0 0 30px #800080 ,
0 0 40px #800080 , 0 0 50px #800080 ,
0 0 80px #800080 ;
}
}
/*end*/
.shadow-top:after {
content: " ";
box-shadow: 0 0 200px 80px #EABFFE;
}
.shadow-top:before {
content: " ";
box-shadow: 0 0 200px 250px #FFE500;
}
#M2010-shadow {
margin:-110px;
box-shadow: 0 0 150px 80px #990099;
}
.shadow1:before,.shadow1:after {
z-index:-1;
position:absolute;
content: " ";
bottom:25px;
left:10px;
width:50%;
max-width:110px;
box-shadow: 0 0 200px 90px #8E006B;
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-o-transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
transform:rotate(-8deg);
}
.shadow1:after {
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
-o-transform:rotate(8deg);
-ms-transform:rotate(8deg);
transform:rotate(8deg);
right:10px;
left:auto;
}
/*Perahu*/
.user_box {
background:
rgba(0, 0, 0, 0.16);
height: 45px;
position: absolute;
width: 200px;
left: 10px;
top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 0 0
rgba(255, 255, 255, 0.2), -1px -1px 0 0
rgba(0, 0, 0, 0.3), inset 0 0 5px 0
rgba(0, 0, 0, 0.1);
}
.user_img {
height: 34px;
overflow: hidden;
position: absolute;
top: 5px;
width: 34px;
left: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 0 0
rgba(255, 255, 255, 0.2), -1px -1px 0 0
rgba(0, 0, 0, 0.3), inset 0 0 5px 0
rgba(0, 0, 0, 0.1);
z-index: 999;
}
.user_img img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
}
.notif {
position: absolute;
right: 17px;
top: 5px;
height: 12px;
width: 9px;
background:
rgba(255, 255, 255, 0.1);
padding: 9px 12px 9px 16px;
font-weight: 800;
color:
white;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
box-shadow: 1px 1px 0 0
rgba(255, 255, 255, 0.2), -1px -1px 0 0
rgba(0, 0, 0, 0.3), inset 0 0 5px 0
rgba(0, 0, 0, 0.2);
text-shadow: 1px 1px 1px
rgba(0, 0, 0, 0.5);
}
.user_button {
position: absolute;
font-size: 10px;
color:#111;
background: rgb(0,115,0);
text-decoration:none;
padding: 1px 15px 3px 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: inset 1px 1px 0 0
rgba(255, 255, 255, 0.3), inset -1px -1px 0 0
rgba(0, 0, 0, 0.3), 0 0 3px 0
rgba(0, 0, 0, 0.5);
top: 23px;
left: 45px;
text-shadow: 1px 1px 0
yellow;
}
.quicknavi {
position: absolute;
left: 220px;
top: 10px;
}
.quicknavi li {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 0 0
rgba(255, 255, 255, 0.2), -1px -1px 0 0
rgba(0, 0, 0, 0.3), inset 0 0 5px 0
rgba(0, 0, 0, 0.1);
float: left;
background:
rgba(0, 0, 0, 0.16);
margin-right: 10px;
}
.quicknavi li a {
padding: 16px 15px 16px 14px;
display: inline-block;
color:
#A7C4E2;
text-decoration: none;
font-size: 13px;
text-shadow: 1px 1px 0px
rgba(0, 0, 0, 0.4);
}
.quicknavi select {
border: 1px solid
#2E5F8F;
padding: 6px;
margin-right: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 0 0
rgba(255, 255, 255, 0.2), -1px -1px 0 0
rgba(0, 0, 0, 0.3), inset 0 0 5px 0
rgba(0, 0, 0, 0.1);
}
/*PERAHU*/
#instructions {
position: absolute;
width: 100%;
top: 50%;
margin: auto;
margin-top: 80px;
font-family: 'Open Sans', sans-serif;
color: #B0E0E6;
font-size: 1.0em;
text-align: center;
line-height: 130%;
}
#bgr {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(#000, #111, #222, #000);
background: linear-gradient(#000, #111, #222, #000);
}
#raftHolder {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
height: 50px;
overflow: hidden;
}
#raft {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
-webkit-animation-name: raftFloat;
animation-name: raftFloat;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
#raftBottom {
position: absolute;
margin: auto;
top: 34px;
bottom: 0;
left: 0;
right: 0;
width: 0px;
height: 0px;
border-bottom: 20px solid #555;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#raftBottom::before {
content: "";
position: absolute;
margin: auto;
width: 0px;
height: 0px;
left: -40px;
border-top: 20px solid #2A2A2A;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#raftBottom::after {
content: "";
position: absolute;
margin: auto;
width: 0px;
height: 0px;
border-top: 20px solid #888;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#raftTop {
position: absolute;
margin: auto;
top: -7px;
left: 20px;
right: 0;
bottom: 0;
width: 0px;
height: 0px;
border-bottom: 20px solid #fff;
border-right: 20px solid transparent;
}
#raftTop::before {
content: "";
position: absolute;
margin: auto;
width: 0px;
height: 0px;
left: -20px;
border-bottom: 20px solid #333;
border-left: 20px solid transparent;
}
#raftRipples {
position: absolute;
margin: auto;
top: 50px;
bottom: 0;
left: 0;
right: 100px;
width: 200px;
height: 50px;
}
.raftRipple {
position: absolute;
margin: auto;
width: 0px;
height: 4px;
border-radius: 2px;
opacity: .1;
background: #fff;
-webkit-animation-name: raftRippleMove;
animation-name: raftRippleMove;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.raftRipple:nth-child(1) {
top: 30px;
left: 120px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.raftRipple:nth-child(2) {
top: 24px;
left: 120px;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#raftReflection {
position: absolute;
margin: auto;
top: 90px;
bottom: 0;
right: 0;
left: 10px;
width: 100px;
height: 50px;
}
.raftReflectionSegment {
position: absolute;
margin: auto;
height: 4px;
border-radius: 2px;
bottom: 0;
left: 0;
right: 0;
background: #fff;
-webkit-animation-name: raftReflectionMove;
animation-name: raftReflectionMove;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.raftReflectionSegment:nth-child(1) {
top: -30px;
width: 35px;
opacity: .1;
}
.raftReflectionSegment:nth-child(2) {
top: -16px;
width: 45px;
-webkit-animation-delay: .2s;
animation-delay: .2s;
opacity: .05;
}
.raftReflectionSegment:nth-child(3) {
top: -2px;
width: 60px;
-webkit-animation-delay: .4s;
animation-delay: .4s;
opacity: .02;
}
@-webkit-keyframes raftReflectionMove {
0% {
-webkit-transform: scale(1.2, 1) translate(5px);
transform: scale(1.2, 1) translate(5px);
}
100% {
-webkit-transform: scale(1, 1) translate(-10px);
transform: scale(1, 1) translate(-10px);
}
}
@keyframes raftReflectionMove {
0% {
-webkit-transform: scale(1.2, 1) translate(5px);
transform: scale(1.2, 1) translate(5px);
}
100% {
-webkit-transform: scale(1, 1) translate(-10px);
transform: scale(1, 1) translate(-10px);
}
}
@-webkit-keyframes raftRippleMove {
0% {
width: 0px;
}
70% {
width: 50px;
}
100% {
-webkit-transform: translate(-100px);
transform: translate(-100px);
width: 0px;
opacity: 0;
}
}
@keyframes raftRippleMove {
0% {
width: 0px;
}
70% {
width: 50px;
}
100% {
-webkit-transform: translate(-100px);
transform: translate(-100px);
width: 0px;
opacity: 0;
}
}
@-webkit-keyframes raftFloat {
0% {
-webkit-transform: rotate(3deg) translate(10px, -2px);
transform: rotate(3deg) translate(10px, -2px);
}
100% {
-webkit-transform: rotate(-3deg) translate(-5px);
transform: rotate(-3deg) translate(-5px);
}
}
@keyframes raftFloat {
0% {
-webkit-transform: rotate(3deg) translate(10px, -2px);
transform: rotate(3deg) translate(10px, -2px);
}
100% {
-webkit-transform: rotate(-3deg) translate(-5px);
transform: rotate(-3deg) translate(-5px);
}
}
#sploutch {
position: absolute;
width: 300px;
height: 300px;
-webkit-animation-name: panSploutch;
animation-name: panSploutch;
-webkit-animation-duration: 6s;
animation-duration: 6s;
}
@-webkit-keyframes panSploutch {
to {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
}
}
@keyframes panSploutch {
to {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
}
}
.drop {
position: absolute;
background: #fff;
width: 2px;
height: 40px;
opacity: 0;
left: 150px;
-webkit-animation-name: fall;
animation-name: fall;
-webkit-animation-duration: .2s;
animation-duration: .2s;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes fall {
0% {
top: -100px;
opacity: 0;
height: 100px;
}
99% {
opacity: 1;
}
100% {
top: 150px;
opacity: 0s;
height: 5px;
}
}
@keyframes fall {
0% {
top: -100px;
opacity: 0;
height: 100px;
}
99% {
opacity: 1;
}
100% {
top: 150px;
opacity: 0s;
height: 5px;
}
}
#ripples {
position: absolute;
width: 300px;
height: 300px;
-webkit-transform: rotateX(75deg);
transform: rotateX(75deg);
}
.ripple {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 1px;
height: 1px;
opacity: 0;
border-radius: 50%;
border-style: solid;
border-width: 6px;
border-color: rgba(255, 255, 255, 0.2);
-webkit-animation-name: grow;
animation-name: grow;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.ripple:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.ripple:nth-child(2) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.ripple:nth-child(3) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes grow {
0% {
width: 1px;
height: 1px;
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
25% {
opacity: .5;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
width: 250px;
height: 250px;
opacity: 0;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes grow {
0% {
width: 1px;
height: 1px;
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
25% {
opacity: .5;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
width: 250px;
height: 250px;
opacity: 0;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.splash {
position: absolute;
margin: auto;
width: 4px;
height: 4px;
border-radius: 2px;
opacity: 0;
background: #fff;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.splash:nth-child(1) {
-webkit-animation-name: bounce1;
animation-name: bounce1;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.splash:nth-child(2) {
-webkit-animation-name: bounce2;
animation-name: bounce2;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.splash:nth-child(3) {
-webkit-animation-name: bounce3;
animation-name: bounce3;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@-webkit-keyframes bounce1 {
0% {
left: 150px;
top: 150px;
opacity: 0;
}
5% {
opacity: .5;
}
50% {
top: 101px;
}
100% {
left: 140px;
top: 150px;
opacity: 0;
}
}
@keyframes bounce1 {
0% {
left: 150px;
top: 150px;
opacity: 0;
}
5% {
opacity: .5;
}
50% {
top: 101px;
}
100% {
left: 140px;
top: 150px;
opacity: 0;
}
}
@-webkit-keyframes bounce2 {
0% {
left: 150px;
top: 150px;
opacity: 0;
}
5% {
opacity: .5;
}
50% {
top: 116px;
}
100% {
left: 200px;
top: 150px;
opacity: 0;
}
}
@keyframes bounce2 {
0% {
left: 150px;
top: 150px;
opacity: 0;
}
5% {
opacity: .5;
}
50% {
top: 116px;
}
100% {
left: 200px;
top: 150px;
opacity: 0;
}
}
@-webkit-keyframes bounce3 {
0% {
left: 150px;
top: 150px;
opacity: 0;
}
5% {
opacity: .5;
}
50% {
top: 107px;
}
100% {
left: 155px;
top: 150px;
opacity: 0;
}
}
@keyframes bounce3 {
0% {
left: 150px;
top: 150px;
opacity: 0;
}
5% {
opacity: .5;
}
50% {
top: 107px;
}
100% {
left: 155px;
top: 150px;
opacity: 0;
}
}
#forest {
position: absolute;
margin: auto;
width: 100%;
height: 100%;
left: 100vw;
-webkit-animation-name: panForest;
animation-name: panForest;
-webkit-animation-duration: 12s;
animation-duration: 12s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes panForest {
to {
-webkit-transform: translateX(-300vw);
transform: translateX(-300vw);
}
}
@keyframes panForest {
to {
-webkit-transform: translateX(-300vw);
transform: translateX(-300vw);
}
}
/*Menu*/
.b-nav, body:after {
position: absolute;
right: 0;
}
.b-brand, .b-link {
font-size: 18px;
font-weight: 700;
margin-left: 0;
text-decoration: none;
font-family: "Roboto Slab", serif;
text-transform: capitalize;
;
}
@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translate3d(345px, 0, 0);
transform: translate3d(345px, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
@keyframes slideInLeft {
0% {
-webkit-transform: translate3d(345px, 0, 0);
transform: translate3d(345px, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
* {
box-sizing: border-box
}
body:after {
background: #000;
content: '';
height: 100%;
left: 0;
opacity: 0;
padding: 0;
top: 0;
visibility: hidden;
-webkit-transition: all .6s ease;
transition: all .6s ease;
width: 100%;
}
body.open:after {
z-index: 10;
opacity: 0.65;
height: 100000%;
visibility: visible
}
.b-nav {
background: #000 none repeat scroll 0 0;
position: absolute;
top: 0;
width: 320px;
z-index: 12;
}
.b-nav:not(.open) {
animation-duration: 0.4s;
animation-fill-mode: both;
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft
}
.b-nav {
animation-duration: .4s;
animation-fill-mode: both;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft
}
.b-nav ul {
padding-left: 0px;
}
.b-nav li {
color: #fff;
list-style-type: none;
padding: 10px 10px 10px 0;
text-align: left;
-webkit-transform: translateX(345px);
-ms-transform: translateX(345px);
transform: translateX(345px)
}
.b-nav li:not(.open) {
animation-duration: 0.4s;
animation-fill-mode: both;
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft
}
.b-nav li:not(.open), .b-nav.open li {
-webkit-animation-duration: 0.4s;
-webkit-animation-fill-mode: both
}
.b-nav li:first-child {
margin-top: 0px
}
.b-nav.open {
visibility: visible;
animation-duration: 0.4s;
animation-fill-mode: both;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
.b-nav:not(.open) {
visibility: hidden;
animation-duration: 0.4s;
animation-fill-mode: backwards;
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft
}
.b-nav.open li {
padding-left: 30px;
animation-duration: 0.2s;
animation-fill-mode: both;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft
}
.b-link {
background: 0 0;
border-left: rgba(255, 255, 255, 0)solid 2px;
color: #fff;
transition: all .4s ease;
width: auto
}
.b-link, .b-menu {
-webkit-transition: all .4s ease;
}
.b-nav li {
border-left: 5px solid #e00a12;
}
/*.b-link--active,
.b-link:hover {
border-left: #e00a12 solid 5px;
padding-left: 30px
}*/
.b-menu {
cursor: pointer;
display: block;
height: 66px;
padding-top: 20px;
position: relative;
top: -20px;
transition: all 0.4s ease 0s;
width: 43px;
z-index: 12;
right: 10px;
}
.b-bun--bottom, .b-bun--mid, .b-bun--top {
height: 2px;
width: 25px
}
.b-container.open .b-main, .b-menu:hover {}
.b-bun {
background: #fff;
transition: all .4s ease
}
.b-brand, .b-bun {
position: relative;
-webkit-transition: all .4s ease
}
.b-bun--top {
top: 0
}
.b-bun--mid {
top: 8px
}
.b-bun--bottom {
top: 16px
}
.b-brand {
color: #2196f3;
top: -21.43px;
transition: all .4s ease;
z-index: 13
}
.b-container {
position: absolute;
right: 0;
top: 20px;
}
.b-container:hover:not(.open) .bun-bottom, .b-container:hover:not(.open) .bun-mid, .b-container:hover:not(.open) .bun-top {
background: #2196f3
}
.b-container.open .b-bun--top {
background: #e00a12;
top: 9px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.b-container.open .b-bun--mid {
opacity: 0
}
.b-container.open .b-bun--bottom {
background: #e00a12;
top: 5px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.b-container.open .b-brand {
color: #fff
}
.mobile-search-btn {
background-color: #e00a12;
border-radius: 4px;
color: #fff;
margin-bottom: 25px;
margin-left: 30px;
padding: 10px 20px;
text-transform: uppercase;
border:none;
}
.mobile-search {
background: transparent none repeat scroll 0 0;
border: 1px solid #fff;
color: #949494;
font-size: 14px;
margin-bottom: 20px;
margin-left: 30px;
padding: 10px;
width: 80%;
}
</style>
