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); } }