body {
|
font-family: "Lato", Helvetica, Arial;
|
font-size : 16px;
|
}
|
|
.text-center {
|
text-align: center;
|
}
|
|
*,
|
*:before,
|
*:after {
|
-webkit-border-sizing: border-box;
|
-moz-border-sizing : border-box;
|
border-sizing : border-box;
|
}
|
|
.menucontainer {
|
width : 99%;
|
/* width : 350px;
|
margin : 50px auto; */
|
}
|
|
.menucontainer>ul {
|
list-style: none;
|
padding : 0;
|
margin : 0 0 20px 0;
|
}
|
|
.title {
|
font-family: 'Pacifico';
|
font-weight: norma;
|
font-size : 40px;
|
text-align : center;
|
line-height: 1.4;
|
color : #2980b9;
|
}
|
|
.dropdown a {
|
text-decoration: none;
|
}
|
|
.dropdown [data-toggle="dropdown"] {
|
position : relative;
|
display : block;
|
color : white;
|
background : #2980b9;
|
-moz-box-shadow : 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
|
-webkit-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
|
box-shadow : 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
|
text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.3);
|
padding : 10px;
|
}
|
|
.dropdown [data-toggle="dropdown"]:hover {
|
background: #2c89c6;
|
}
|
|
.dropdown .icon-arrow {
|
position : absolute;
|
display : block;
|
font-size: 0.7em;
|
color : #fff;
|
top : 14px;
|
right : 10px;
|
}
|
|
.dropdown .icon-arrow.open {
|
-moz-transform : rotate(-180deg);
|
-ms-transform : rotate(-180deg);
|
-o-transform : rotate(-180deg);
|
-webkit-transform : rotate(-180deg);
|
transform : rotate(-180deg);
|
-moz-transition : -moz-transform 0.6s;
|
-o-transition : -o-transform 0.6s;
|
-webkit-transition: -webkit-transform 0.6s;
|
transition : transform 0.6s;
|
}
|
|
.dropdown .icon-arrow.close {
|
-moz-transform : rotate(0deg);
|
-ms-transform : rotate(0deg);
|
-o-transform : rotate(0deg);
|
-webkit-transform : rotate(0deg);
|
transform : rotate(0deg);
|
-moz-transition : -moz-transform 0.6s;
|
-o-transition : -o-transform 0.6s;
|
-webkit-transition: -webkit-transform 0.6s;
|
transition : transform 0.6s;
|
}
|
|
.dropdown .icon-arrow:before {
|
content: '\25BC';
|
}
|
|
.dropdown .dropdown-menu {
|
max-height: 0;
|
overflow : hidden;
|
list-style: none;
|
padding : 0;
|
margin : 0;
|
}
|
|
.dropdown .dropdown-menu li {
|
padding: 0;
|
}
|
|
.dropdown .dropdown-menu li a {
|
display : block;
|
color : #6e6e6e;
|
background : #eeeeee;
|
-moz-box-shadow : 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
|
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
|
box-shadow : 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
|
text-shadow : 0 -1px 0 rgba(255, 255, 255, 0.3);
|
padding : 10px 10px;
|
}
|
|
.dropdown .dropdown-menu li a:hover {
|
background: #f6f6f6;
|
}
|
|
.dropdown .show,
|
.dropdown .hide {
|
-moz-transform-origin : 50% 0%;
|
-ms-transform-origin : 50% 0%;
|
-o-transform-origin : 50% 0%;
|
-webkit-transform-origin: 50% 0%;
|
transform-origin : 50% 0%;
|
}
|
|
.dropdown .show {
|
display : block;
|
max-height : 9999px;
|
-moz-transform : scaleY(1);
|
-ms-transform : scaleY(1);
|
-o-transform : scaleY(1);
|
-webkit-transform : scaleY(1);
|
transform : scaleY(1);
|
animation : showAnimation 0.5s ease-in-out;
|
-moz-animation : showAnimation 0.5s ease-in-out;
|
-webkit-animation : showAnimation 0.5s ease-in-out;
|
-moz-transition : max-height 1s ease-in-out;
|
-o-transition : max-height 1s ease-in-out;
|
-webkit-transition: max-height 1s ease-in-out;
|
transition : max-height 1s ease-in-out;
|
}
|
|
.dropdown .hide {
|
max-height : 0;
|
-moz-transform : scaleY(0);
|
-ms-transform : scaleY(0);
|
-o-transform : scaleY(0);
|
-webkit-transform : scaleY(0);
|
transform : scaleY(0);
|
animation : hideAnimation 0.4s ease-out;
|
-moz-animation : hideAnimation 0.4s ease-out;
|
-webkit-animation : hideAnimation 0.4s ease-out;
|
-moz-transition : max-height 0.6s ease-out;
|
-o-transition : max-height 0.6s ease-out;
|
-webkit-transition: max-height 0.6s ease-out;
|
transition : max-height 0.6s ease-out;
|
}
|
|
@keyframes showAnimation {
|
0% {
|
-moz-transform : scaleY(0.1);
|
-ms-transform : scaleY(0.1);
|
-o-transform : scaleY(0.1);
|
-webkit-transform: scaleY(0.1);
|
transform : scaleY(0.1);
|
}
|
|
40% {
|
-moz-transform : scaleY(1.04);
|
-ms-transform : scaleY(1.04);
|
-o-transform : scaleY(1.04);
|
-webkit-transform: scaleY(1.04);
|
transform : scaleY(1.04);
|
}
|
|
60% {
|
-moz-transform : scaleY(0.98);
|
-ms-transform : scaleY(0.98);
|
-o-transform : scaleY(0.98);
|
-webkit-transform: scaleY(0.98);
|
transform : scaleY(0.98);
|
}
|
|
80% {
|
-moz-transform : scaleY(1.04);
|
-ms-transform : scaleY(1.04);
|
-o-transform : scaleY(1.04);
|
-webkit-transform: scaleY(1.04);
|
transform : scaleY(1.04);
|
}
|
|
100% {
|
-moz-transform : scaleY(0.98);
|
-ms-transform : scaleY(0.98);
|
-o-transform : scaleY(0.98);
|
-webkit-transform: scaleY(0.98);
|
transform : scaleY(0.98);
|
}
|
|
80% {
|
-moz-transform : scaleY(1.02);
|
-ms-transform : scaleY(1.02);
|
-o-transform : scaleY(1.02);
|
-webkit-transform: scaleY(1.02);
|
transform : scaleY(1.02);
|
}
|
|
100% {
|
-moz-transform : scaleY(1);
|
-ms-transform : scaleY(1);
|
-o-transform : scaleY(1);
|
-webkit-transform: scaleY(1);
|
transform : scaleY(1);
|
}
|
}
|
|
@-moz-keyframes showAnimation {
|
0% {
|
-moz-transform : scaleY(0.1);
|
-ms-transform : scaleY(0.1);
|
-o-transform : scaleY(0.1);
|
-webkit-transform: scaleY(0.1);
|
transform : scaleY(0.1);
|
}
|
|
40% {
|
-moz-transform : scaleY(1.04);
|
-ms-transform : scaleY(1.04);
|
-o-transform : scaleY(1.04);
|
-webkit-transform: scaleY(1.04);
|
transform : scaleY(1.04);
|
}
|
|
60% {
|
-moz-transform : scaleY(0.98);
|
-ms-transform : scaleY(0.98);
|
-o-transform : scaleY(0.98);
|
-webkit-transform: scaleY(0.98);
|
transform : scaleY(0.98);
|
}
|
|
80% {
|
-moz-transform : scaleY(1.04);
|
-ms-transform : scaleY(1.04);
|
-o-transform : scaleY(1.04);
|
-webkit-transform: scaleY(1.04);
|
transform : scaleY(1.04);
|
}
|
|
100% {
|
-moz-transform : scaleY(0.98);
|
-ms-transform : scaleY(0.98);
|
-o-transform : scaleY(0.98);
|
-webkit-transform: scaleY(0.98);
|
transform : scaleY(0.98);
|
}
|
|
80% {
|
-moz-transform : scaleY(1.02);
|
-ms-transform : scaleY(1.02);
|
-o-transform : scaleY(1.02);
|
-webkit-transform: scaleY(1.02);
|
transform : scaleY(1.02);
|
}
|
|
100% {
|
-moz-transform : scaleY(1);
|
-ms-transform : scaleY(1);
|
-o-transform : scaleY(1);
|
-webkit-transform: scaleY(1);
|
transform : scaleY(1);
|
}
|
}
|
|
@-webkit-keyframes showAnimation {
|
0% {
|
-moz-transform : scaleY(0.1);
|
-ms-transform : scaleY(0.1);
|
-o-transform : scaleY(0.1);
|
-webkit-transform: scaleY(0.1);
|
transform : scaleY(0.1);
|
}
|
|
40% {
|
-moz-transform : scaleY(1.04);
|
-ms-transform : scaleY(1.04);
|
-o-transform : scaleY(1.04);
|
-webkit-transform: scaleY(1.04);
|
transform : scaleY(1.04);
|
}
|
|
60% {
|
-moz-transform : scaleY(0.98);
|
-ms-transform : scaleY(0.98);
|
-o-transform : scaleY(0.98);
|
-webkit-transform: scaleY(0.98);
|
transform : scaleY(0.98);
|
}
|
|
80% {
|
-moz-transform : scaleY(1.04);
|
-ms-transform : scaleY(1.04);
|
-o-transform : scaleY(1.04);
|
-webkit-transform: scaleY(1.04);
|
transform : scaleY(1.04);
|
}
|
|
100% {
|
-moz-transform : scaleY(0.98);
|
-ms-transform : scaleY(0.98);
|
-o-transform : scaleY(0.98);
|
-webkit-transform: scaleY(0.98);
|
transform : scaleY(0.98);
|
}
|
|
80% {
|
-moz-transform : scaleY(1.02);
|
-ms-transform : scaleY(1.02);
|
-o-transform : scaleY(1.02);
|
-webkit-transform: scaleY(1.02);
|
transform : scaleY(1.02);
|
}
|
|
100% {
|
-moz-transform : scaleY(1);
|
-ms-transform : scaleY(1);
|
-o-transform : scaleY(1);
|
-webkit-transform: scaleY(1);
|
transform : scaleY(1);
|
}
|
}
|
|
@keyframes hideAnimation {
|
0% {
|
-moz-transform : scaleY(1);
|
-ms-transform : scaleY(1);
|
-o-transform : scaleY(1);
|
-webkit-transform: scaleY(1);
|
transform : scaleY(1);
|
}
|
|
60% {
|
-moz-transform : scaleY(0.98);
|
-ms-transform : scaleY(0.98);
|
-o-transform : scaleY(0.98);
|
-webkit-transform: scaleY(0.98);
|
transform : scaleY(0.98);
|
}
|
|
80% {
|
-moz-transform : scaleY(1.02);
|
-ms-transform : scaleY(1.02);
|
-o-transform : scaleY(1.02);
|
-webkit-transform: scaleY(1.02);
|
transform : scaleY(1.02);
|
}
|
|
100% {
|
-moz-transform : scaleY(0);
|
-ms-transform : scaleY(0);
|
-o-transform : scaleY(0);
|
-webkit-transform: scaleY(0);
|
transform : scaleY(0);
|
}
|
}
|
|
@-moz-keyframes hideAnimation {
|
0% {
|
-moz-transform : scaleY(1);
|
-ms-transform : scaleY(1);
|
-o-transform : scaleY(1);
|
-webkit-transform: scaleY(1);
|
transform : scaleY(1);
|
}
|
|
60% {
|
-moz-transform : scaleY(0.98);
|
-ms-transform : scaleY(0.98);
|
-o-transform : scaleY(0.98);
|
-webkit-transform: scaleY(0.98);
|
transform : scaleY(0.98);
|
}
|
|
80% {
|
-moz-transform : scaleY(1.02);
|
-ms-transform : scaleY(1.02);
|
-o-transform : scaleY(1.02);
|
-webkit-transform: scaleY(1.02);
|
transform : scaleY(1.02);
|
}
|
|
100% {
|
-moz-transform : scaleY(0);
|
-ms-transform : scaleY(0);
|
-o-transform : scaleY(0);
|
-webkit-transform: scaleY(0);
|
transform : scaleY(0);
|
}
|
}
|
|
@-webkit-keyframes hideAnimation {
|
0% {
|
-moz-transform : scaleY(1);
|
-ms-transform : scaleY(1);
|
-o-transform : scaleY(1);
|
-webkit-transform: scaleY(1);
|
transform : scaleY(1);
|
}
|
|
60% {
|
-moz-transform : scaleY(0.98);
|
-ms-transform : scaleY(0.98);
|
-o-transform : scaleY(0.98);
|
-webkit-transform: scaleY(0.98);
|
transform : scaleY(0.98);
|
}
|
|
80% {
|
-moz-transform : scaleY(1.02);
|
-ms-transform : scaleY(1.02);
|
-o-transform : scaleY(1.02);
|
-webkit-transform: scaleY(1.02);
|
transform : scaleY(1.02);
|
}
|
|
100% {
|
-moz-transform : scaleY(0);
|
-ms-transform : scaleY(0);
|
-o-transform : scaleY(0);
|
-webkit-transform: scaleY(0);
|
transform : scaleY(0);
|
}
|
}
|
