body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/** {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}*/

nav {
    width: 100%;
    position: relative;
    /*    display: -ms-flexbox;*/
    display: flex;
    /*    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;*/
    align-items: center;
    /*    -ms-flex-pack: justify;*/
    justify-content: space-between;
    padding: 0px;
    display: flex;
    margin: 0px 8px;
    padding: 0px;
}

    nav ul {
        width: 100%;
        display: flex;
        padding: 0px;
        margin: auto;
    }

ul li {
    list-style: none;
    display: flex;
}

nav ul li a {
    text-decoration: none !important;
    text-align: center;
    display: block;
    width: 100%;
    padding: 18px 35px;
    margin: auto;
    /*    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);*/
   /* background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    background:#fff;
    text-transform: uppercase;
    font-weight: bold;
    color: #1d1160;
    font-size: 15px;
    transform: rotate(0deg)skewX(0deg)translate(0,0);
    transition: 0.5s;
    /*    box-shadow: 5px 5px 5px rgba(0,0,0,0.2);*/
    border-radius: 40px 40px;
}


    nav ul li a:before {
        content: '';
        position: absolute;
        top: 10px;
        left: -10px;
        /* height: 100%;*/
        width: 20px;
        /*background: #fff;*/
        transition: 0.5s;
        transform: rotate(0deg) skewX(-45deg);
    }

    nav ul li a:after {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 5px;
        /* height: 20px;*/
        width: 100%;
        /* background: #fff;*/
        /*        background-color: rgba(255, 255, 255, 0.7);*/
        transition: 0.5s;
        transform: rotate(0deg) skewX(-45deg);
    }

    nav ul li a:hover {
        transform: rotate(-30deg) skew(25deg)translate(-20px, -15px);
        /*box-shadow: -2px 2px 2px rgba(0,0,0,0.5);*/
        background: #180c25;
        color: #fff;
    }

nav ul li:hover a:before {
    background: #180c25;
}

nav ul li:hover a:after {
    background: #180c25;
}




/* For mobile phones: */
/*[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 768px) {*/
    /* For desktop: */
    /*.col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}*/

/*Another Breakpoint
You can add as many breakpoints as you like.

We will also insert a breakpoint between tablets and mobile phones.


Desktop
Tablet
Phone
We do this by adding one more media query (at 600px), and a set of new classes for devices larger than 600px (but smaller than 768px):

Example
Note that the two sets of classes are almost identical, the only difference is the name (col- and col-s-):
*/ /* For mobile phones: */
/*[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px) {*/
    /* For tablets: */
    /*.col-s-1 {
        width: 8.33%;
    }

    .col-s-2 {
        width: 16.66%;
    }

    .col-s-3 {
        width: 25%;
    }

    .col-s-4 {
        width: 33.33%;
    }

    .col-s-5 {
        width: 41.66%;
    }

    .col-s-6 {
        width: 50%;
    }

    .col-s-7 {
        width: 58.33%;
    }

    .col-s-8 {
        width: 66.66%;
    }

    .col-s-9 {
        width: 75%;
    }

    .col-s-10 {
        width: 83.33%;
    }

    .col-s-11 {
        width: 91.66%;
    }

    .col-s-12 {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {*/
    /* For desktop: */
    /*.col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}*/




@media (min-width:320px) {

    .info {
        visibility: visible;
  -webkit-animation: easing 2s ease-out infinite;
   animation: easing 2s ease-out infinite;
    }

    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        object-fit: contain;
        float: none !important;
        right: auto !important;
        text-align: center;
        flex-wrap: wrap;
        left: 20px;
        top: 20px;
    }
	    .BUTN {
        visibility: hidden;
  -webkit-animation: easing 2s ease-out infinite;
   animation: easing 2s ease-out infinite;
			top:20px;
			 left: 60px;
    }

    .social-buttons {
        visibility: hidden;
  -webkit-animation: easing 2s ease-out infinite;
   animation: easing 2s ease-out infinite;
		top:120px;
		 left: 80px;
		
    }
}

@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */
    .BUTN {
        visibility: hidden;
		top:20px;
    }

    .social-buttons {
        visibility: hidden;
		top:10px;
    }

    .info {
        visibility: visible;
    }

    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        object-fit: contain;
        float: none !important;
        right: auto !important;
        text-align: center;
        flex-wrap: wrap;
        left: -40px;
        top: 0px;
    }
}


@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
    .social-buttons {
        visibility: visible;
		top:15px;
    }

    .BUTN {
        visibility: visible;
		top:15px;
		
			
		
    }

    .info {
        visibility: visible;
    }

    .logo {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        object-fit: contain;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        z-index: 999;
    }

    .contact {
        visibility: visible;
        display: block;
    }
}


@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */

}

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
}

@media (min-width:1281px) { /* hi-res laptops and desktops */
}