@charset "utf-8";
/* CSS Document */

.mainMenu{ display: flex; list-style:none; }
.mainMenu li{ position:relative; }
.mainMenu a{ -webkit-transition:all ease-out 250ms; -moz-transition:all ease-out 250ms; -ms-transition:all ease-out 250ms; -o-transition:all ease-out 250ms; }
.mainMenu a{ padding: 15px; margin: 0 0.5px; color: white; text-transform: capitalize; font-variant: small-caps; font-size: 17px; }
.mainMenu a:hover{ color: white; background: #d1b24c; /* background: #BAAC38; */ border-radius: 2px; }

.control-nav{display: none;  }
.control-nav-close{display: none;}

@media screen and (max-width:860px) {
    .menu{position: fixed; z-index: 10000; top: 0; right: 0;  display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0, 0, 0, .9); -webkit-transform: translate(100%, 0); transform: translate(100%, 0);  -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
    .mainMenu{ height: 100%;  flex-direction: column; align-items: center; padding: 0; }
    .mainMenu li{border-right: 0; flex: 1; align-items: center; display: flex;}
    .mainMenu li a{color: rgb(255, 255, 255); display: block; align-items: center;}
    .mainMenu li a:after{display: none;}
    
    .control-nav { display: block; cursor: pointer; color: rgb(255, 255, 255); align-self: center; margin-bottom: 0 !important;}
    .control-nav-close {width: 100px; height: 100%; padding: 20px; text-align: center; position: fixed; right: 0; top: 0; bottom: 0; left: 0;  display: none; color: rgb(255, 255, 255); opacity: 0;  -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
    #control-nav:checked ~ .control-nav{-webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);}
    #control-nav:checked ~ .control-nav-close{opacity: 1; z-index: 100000; display: block;}
    #control-nav:checked ~ .menu{-webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);}
}