@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
ul.main-nav {
 list-style-type: none;
 display: block;
 padding: 0px;
 max-width: 1275px;
 margin: 0 auto;
}

ul.main-nav>li {
 display: inline-block;
 padding: auto;
}

ul.main-nav>li>a {
 display: block;
 padding: 10px 20px;
 position: relative;
 color: #000;
 font-size: 16px;
 font-weight: 400;
 box-sizing: border-box;
 cursor: pointer;
}

ul.main-nav>li ul.sub-menu-lists {
 margin: auto 0;
 padding: 1px 0;
 list-style-type: none;
 display: block;
}

ul.main-nav>li ul.sub-menu-lists>li {
 padding: auto;
 width: 100%;
 margin-top: 2px;
}

ul.main-nav>li ul.sub-menu-lists>li>a {
 font-size: 1em;
 font-weight: 500;

}

@media only screen and (max-width: 768px) {
 /* Main Menu for Handheld Devices  */

 ul.main-nav {
     z-index: 2;
     padding: 50px 0;
     position: fixed;
     right: 0px;
     top: 0px;
     width: 0px;
     background-color: rgba(0, 0, 0, 1);
     height: 100%;
     overflow: auto;
     
 }

 .ic.menu:focus~.main-nav {
     width: 85%;
     background-color: #fff;
 }


 .ic.menu:focus~.main-nav>* {
     opacity: 1;
 }

 ul.main-nav>li>a:after {
     display: none;
 }

 ul.main-nav>li:first-child {
     border-radius: 0px;
 }

 ul.main-nav>li {
     display: block;
     border-bottom: 1px solid #444;
 }

 ul.main-nav>li>a {
     font-weight: 600;
 }


 .sub-menu-head {
     font-size: 16px;
 }

 ul.main-nav>li:hover {
     background-color: transparent;
 }
}

@media only screen and (min-width: 769px) {

 /* Main Menu for Desktop Devices  */

 ul.main-nav {
     display: block;
     /*         position: relative; */
 }

 .sub-menu-block {
     padding: 15px;

 }

 /* Sub Menu */

 ul.main-nav>li>div.sub-menu-block {
     top: 100%;
     visibility: hidden;
     box-shadow: inset 0px 11px 8px -10px #CCC, inset 0px -11px 8px -10px #CCC;
     background-color: #fff;
     position: absolute;
     margin-top: 0px;
     min-width: 48.8%;
     max-width: 100%;
     color: #333;
     left: 0px;
     box-sizing: border-box;
     z-index: 3;
     font-size: 16px;
     border-left: 1px solid #ccc;
     border-right: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
     opacity: 0;

     /*CSS animation applied for sub menu : Slide from Top */

     -webkit-transition: all 0.4s ease 0s;
     -o-transition: all 0.4s ease 0s;
     transition: all 0.4s ease 0s;
     -webkit-transform: rotateX(90deg);
     -moz-transform: rotateX(90deg);
     -ms-transform: rotateX(90deg);
     transform: rotateX(90deg);
     -webkit-transform-origin: top center;
     -ms-transform-origin: top center;
     transform-origin: top center;
 }

 #five-block {
     width: 97%;
     margin: 0px 20px;
     height: 430px;
 }

 ul.main-nav>li:hover>div.sub-menu-block {
   /*  background-color: #f9f9f9;*/

     visibility: visible;
     opacity: 1;
     -webkit-transform: rotateX(0deg);
     -moz-transform: rotateX(0deg);
     -ms-transform: rotateX(0deg);
     transform: rotateX(0deg);
 }

 ul.main-nav>li>div.sub-menu-block>* {
     -webkit-transition-property: opacity;
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
     transition-property: opacity;
     -webkit-transition-duration: 0.4s;
     -moz-transition-duration: 0.4s;
     -o-transition-duration: 0.4s;
     transition-duration: 0.4s;
     opacity: 0;

 }

 ul.main-nav>li:hover>div.sub-menu-block>* {
     opacity: 1;
 }

 .sub-menu-head {
     font-size: 20px;

 }

 ul.cr-pgp li {
     color: #000;
     margin-left: 40px;
     padding-top: 10px;
     list-style-type: disc;
     font-size:14px;
 }
}