html,body{
    background: #525B63;
    margin:0;
    padding:0;
}

/*The container that holds the dropdown items*/
.mcs-container{
        width:100%;
    overflow:hidden;
        background:#222;
        box-sizing: border-box;
        display:none;
        position: relative;
        padding:10px;
        clear:both;
}

/*The menu items (options)*/
.mcs-open,
.mcs-item{
    box-sizing: border-box;
    background:#293b47;
    color:#FFF;    
    text-decoration: none;
    width:25%;
    float:left;
    height: 50px;
    line-height: 50px;
    text-align: center;
        border:1px solid #111;
        
}

.mcs-open{
    border: 0;
        text-align: left;
        padding: 0 10px 0 40px;
    width:100%;
        margin-top:20px;
}

.mcs-open.open{
    background:#ffffff;
    color:#111;
}
.mcs-open.open:hover{
    background:#00ada9;
    color:#FFF;
}

.mcs-item.active{
    background:#e8e8e8;
    color:#222;
    border:1px solid #222;
}

input[type=submit]{
    border:0;
    display: block;
    width:100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #00ada9;
    color: #FFF;
    clear:both;

    
}

.mcs-item:hover,
.mcs-open:hover{
background:#00ada9;
cursor:pointer;
}
input[type=submit]:hover{
cursor:pointer;
background:#293b47;
}

/*Hide Select Form Control*/
.hidden{
    visibility: hidden;
    height: 0px;
    width:0px;
    position:absolute;
}

/*Clear class used to push float- can just point to an exsisting clear class*/
.clear{
    display:block;
    clear:both;
}


.wrapper{
    width:580px;
    padding:20px;
    margin: 0 auto;
    text-align: center;
}

header h1{
    font-size:3em;
    color:#ffffff;
    font-family: 'Ubuntu Condensed', sans-serif;
}
h2{
       font-size:2em;
    color:#ffffff;
    font-family: 'Ubuntu Condensed', sans-serif;
}

.mcs-open{
        font-family: 'Ubuntu Condensed', sans-serif;
        font-size:1em;
}           

.mcs-item{
    font-family: 'Ubuntu', sans-serif;
    font-size:0.8em;
        -moz-transform: scale(0.95) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -webkit-transform: scale(0.95) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -o-transform: scale(0.95) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -ms-transform: scale(0.95) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        transform: scale(0.95) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -webkit-transition: all 300ms ease;
        -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        transition: all 300ms ease;
        -webkit-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px;
        text-shadow: -1px 1px 1px #141314;
        -webkit-box-shadow: 0 0 4px 1px rgba(0,0,0,0.4);
        box-shadow: 0 0 4px 1px rgba(0,0,0,0.4);
}
.mcs-item:hover{
        -moz-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -webkit-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -o-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -ms-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.mcs-item.active{
    text-shadow: 0 0 0 #FFF;
}
.mcs-item.active:hover{
    background:#FFF;
    text-shadow: 0 0 0 #FFF;
}

input[type=submit]{
        font-family: 'Ubuntu Condensed', sans-serif;
        font-size:1em;
}