/* for icon font */
@font-face{font-family:'typicons';font-weight:lighter;font-style:normal;src:url('../font/typicons.eot');src:url('../font/typicons.eot?#iefix') format('embedded-opentype'),url('../font/typicons.woff') format('woff'),url('../font/typicons.ttf') format('truetype'),url('../font/typicons.svg#typicons') format('svg');font-smoothing:antialiased;text-rendering:optimizeLegibility}

#cssmenu ul li a {
    font-size: 0.8em !important;
}
/* start width: 1200px */
@media all and (min-width: 1200px){

    #cssmenu {
        position: absolute;
        z-index: 2000;
        color: rgba(0,0,0,1);
        font-size: 1.5em;
        margin: auto;
        top: 0;
        left: 50%;
    }

    #cssmenu ul ul {
        display: none;
        background: rgba(255,255,255,1);
        padding: 0;
    }

    #cssmenu ul li:hover > ul {
        display: block;
        border-top: solid 5px rgba(206,206,206,1);
    }


    #cssmenu ul {
        list-style: none;
        position: relative;
        display: inline-table;
    }
    #cssmenu ul:after {
        content: ""; clear: both; display: block;
    }

    #cssmenu ul li {
        float: left;
    }
    #cssmenu ul li a{
        text-decoration: none;
        padding: 3px;
        margin-left: 10px;
        margin-right: 10px;
        text-align: left;
        font-family: 'Arial','Verdana','Tahoma', sans-serif;
        white-space: nowrap;
        color: rgba(0,0,0,1);
    }
    #cssmenu ul li a:hover{
        border-bottom: solid 5px rgba(206,206,206,1);
    }
    #cssmenu ul li.has-sub a:hover{
        border: none;
    }
    #cssmenu ul li:hover {

    }
    #cssmenu ul li:hover a {

    }

    #cssmenu ul li a {
        display: block;
    }


    #cssmenu ul ul {

        position: absolute; top: 100%;
    }
    #cssmenu ul ul li {
        float: none;
        border: solid 1px rgba(234, 234, 234,1);
        border-top: none;
    }
    #cssmenu ul ul li a {
        text-decoration: none;
        padding: 3px;
        margin-left: 10px;
        margin-right: 10px;
        text-align: left;
        font-family: 'Arial', 'Verdana', sans-serif;
        font-size: 0.7em !important;
        color: rgba(0,0,0,1);
    }
    #cssmenu ul ul li a:hover {
        border: none;
        color: rgba(206, 206, 206,1);
    }

    #cssmenu ul ul ul {
        position: absolute; left: 100%; top:0;
    }


    .square-box{
        display: none;
    }
}
@media all and (max-width: 1199px) and (min-width: 800px){
    #cssmenu {
        position: absolute;
        z-index: 2000;
        color: rgba(0,0,0,1);
        font-size: 1.5em;
        margin: auto;
        top: 0;
        right: 0;
    }

    #cssmenu ul ul {
        display: none;
        background: rgba(255,255,255,1);
        padding: 0;
    }

    #cssmenu ul li:hover > ul {
        display: block;
        border-top: solid 5px rgba(149,149,149,1);
    }


    #cssmenu ul {
        list-style: none;
        position: relative;
        display: inline-table;
    }
    #cssmenu ul:after {
        content: ""; clear: both; display: block;
    }

    #cssmenu ul li {
        float: left;
    }
    #cssmenu ul li a{
        text-decoration: none;
        padding: 3px;
        margin-left: 10px;
        margin-right: 10px;
        text-align: left;
        font-family: 'Kaushan Script', 'Lobster', cursive;
        white-space: nowrap;
        color: rgba(0,0,0,1);
    }
    #cssmenu ul li a:hover{
        border-bottom: solid 5px rgba(149,149,149,1);
    }
    #cssmenu ul li.has-sub a:hover{
        border: none;
    }
    #cssmenu ul li:hover {

    }
    #cssmenu ul li:hover a {

    }

    #cssmenu ul li a {
        display: block;
    }


    #cssmenu ul ul {

        position: absolute; top: 100%;
    }
    #cssmenu ul ul li {
        float: none;
        border: solid 1px rgba(234, 234, 234,1);
        border-top: none;
    }
    #cssmenu ul ul li a {
        text-decoration: none;
        padding: 3px;
        margin-left: 10px;
        margin-right: 10px;
        text-align: left;
        font-family: 'Arial', 'Verdana', sans-serif;
        font-size: 0.7em;
        color: rgba(0,0,0,1);
    }
    #cssmenu ul ul li a:hover {
        border: none;
        color: rgba(206, 206, 206,1);
    }

    #cssmenu ul ul ul {
        position: absolute; left: 100%; top:0;
    }


    .square-box{
        display: none;
    }
}
/* end 800 - 1200 */
/* > 800px; */
@media all and (max-width: 799px){
    #cssmenu{
        position: absolute;
        z-index: 2002;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        left: 0;
        top: 0;
        padding: 0;
    }

    .square-box{
        position: relative;
        width: 46px;
        min-width: 46px;
        max-width: 46px;
        overflow: hidden;
        background-color: rgba(108, 104, 101,1);
        border-radius: 5px;
        cursor: pointer;
        margin: auto;
        margin-top: 2.5%;
        margin-right: 1%;
        margin-bottom: 2.9%;
    }

    .square-box-title{
        float: left;
        margin: auto;
        margin-left: 0.5%;
        margin-top: 7.5%;
        color: rgba(102, 102, 102,1);
        font-weight: bold;
        font-size: 1.4em;

    }
    .square-box:before{
        content: "";
        display: block;
        padding-top: 100%;
    }
    .square-content{
        position:  absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 8px;
        color: rgba(255,255,255,1);

    }
    .square-content div {
        display: table;
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
    .square-content span {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        background-color: rgba(108, 104, 101,1);
        color: rgba(255,255,255,1);
        font-weight: lighter;
    }
    .square-content span:before{
        font-size: 2em;
    }
    #caption_menu span{
        margin: auto;
    }
    #cssmenu ul{
        display: none;

        list-style-type: none;
        list-style-position: inside;
        background-color:  rgba(239, 239, 239,1);

        padding: 0;
        margin: 0;
        width:  100%;
        max-width: 100%;
        min-width: 100%;

    }
    #cssmenu ul li{
        margin: 0;
        border-bottom: solid 1px rgba(206,206,206,1);;
    }
    #cssmenu ul li > ul li{
        background-color: rgba(216,216,216,1);
    }
    #cssmenu ul li > ul li a{
        padding-left: 3%;
    }
    #cssmenu ul li > ul li a:before{
        content: '\e048';
        font-family: 'typicons';
        font-style: normal;
        font-weight:lighter;
        margin-right: 2%;

    }
    .has-sub a:not(.th-sub):after{
        content: '\e01d';
        font-family: 'typicons';
        font-style: normal;
        font-weight:lighter;
        margin-left: 2%;
    }
    #cssmenu ul a{
        display:block;
        padding: 5px;
        color: rgba(102,102,102,1);
        text-decoration: none;
        font-size: 1.2em;
        font-weight:lighter;
    }
    #cssmenu ul a:hover{
        background-color: rgba(255,255,255,1);
        color: rgba(0,0,0,1);
        text-decoration: none;
    }
}