/*-------------------------------------------------------
[Table of contents]

1. Header
	+ logo
	+ top navigation
	+ search
	
2. Content
	+ feature sections
	+ page title
	+ parallax backgrounds
	+ video backgrounds
	
3. Sidebar
	+ site search
	+ tabs
	+ portfolio widgets
	+ advertisements

3. Typography
	+ lists
	+ buttons
	+ styled boxes
	+ dropcaps
	+ highlight colors
	+ tables
	+ pricing tables
	+ framed boxes
	+ pagination
	
4. Footer
	+ copyrights
	+ google map
	
--------------------------------------------------------*/


/*----------------------------------------------------
	SITE MAIN STRUCTURE
------------------------------------------------------*/

.site_wrapper {
	width: 100%;
	margin: 0 auto 0 auto;
}
.container_full {
	width: 100%;
	float: left;
	margin: auto;
}
.container_fhstyle {
	width: 100%;
	margin: 0 auto;
}
.container_fhstyle2 {
	width: 100%;
	margin: 0 auto;
}

.container {
	width: 1280px;
	margin: auto;
}

.content_fullwidth {
	float: left;
	width: 100%;
	padding: 120px 0px 0px 0px;
}

.content_fullwidth.less {
	padding: 0px 0px 0px 0px;
}
.content_fullwidth.less2 {
	padding: 100px 0px 0px 0px;
}

.content_left {
	float: left;
	width: 71%;
	padding: 0px 0px 0px 0px;
}
.left_sidebar {
	float: left;
	width: 25%;
	padding: 0px 0px 0px 0px;
}
.content_right {
	float: right;
	width: 71%;
	padding: 0px 0px 0px 0px;
}
.right_sidebar {
	float: right;
	width: 25%;
	padding: 0px 0px 0px 0px;
}
.content_halfsite {
	float: left;
	width: 47.5%;
	margin-right: 5%;
	padding: 0px 0px 0px 0px;
}
.content_halfsite.last {
	margin-right: 0;
}


/* columns */
.one_half, .one_third, .one_fourth, .two_third, .three_fourth, .one_fifth, .onecol_forty, .onecol_sixty, .onecol_thirtyfive {
	position: relative;
	margin-right: 4%;
	float: left;
}
.one_full {
	width: 100%;
}
.one_half {
	width: 48%;
}
.one_third {
	width: 30.650%;
}
.one_fourth {
	width: 22%;
}
.one_fifth {
	width: 16.800%;
}
.two_third {
	width: 65.350%;
}
.three_fourth {
	width: 74%;
}
.onecol_forty {
	width: 40%;
}
.onecol_sixty {
	width: 56%;
}
.onecol_thirtyfive {
	width: 35%;
}

/* Less Space Bitween Columns */
.one_half_less, .one_third_less, .one_fourth_less, .two_third_less, .three_fourth_less, .one_fifth_less, .onecol_forty_less, .onecol_sixty_less, .onecol_thirtyfive_less {
	position: relative;
	margin-right: 2%;
	float: left;
}
.one_full_less {
	width: 100%;
}
.one_half_less {
	width: 49%;
}
.one_third_less {
	width: 32%;
}
.one_fourth_less {
	width: 23.500%;
}
.one_fifth_less {
	width: 18.400%;
}
.two_third_less {
	width: 66%;
}
.three_fourth_less {
	width: 74.500%;
}
.onecol_forty_less {
	width: 40%;
}
.onecol_sixty_less {
	width: 58%;
}
.onecol_thirtyfive_less {
	width: 36.250%;
}

.last {
	margin-right: 0 !important;
	clear: right;
}



.slidermar {
	margin-top: 100px;
}
.slidermar1 {
	margin-top: 0px;
}


.header-left{width: 32%; float: left; margin-right: 2%}

.header-center{width: 32%; float: left; margin-right: 2%}

.header-right{width: 32%; float: left; margin-right: 0%}

.left-menu ul li{float: left; padding-right: 20px; list-style: none;}

.left-menu ul{ margin-bottom: 0; margin-top: 53px;}

.left-menu ul li a{color: #fff; font-size: 15px;text-transform: uppercase;
    letter-spacing: 0.5px;}

.menu-active{color: #ffb400 !important;font-weight: 600}

.enquiry-now a {
    position: relative;
    display: inline-block;
    padding: 15px 19px;
    color: #fff;
    font-size: 18px; 
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    font-family: 'Poppins', sans-serif; 
    font-style: normal;
    font-weight: 400; 
	letter-spacing: 0.2px;margin-top: 45px;
	/*background-color: #eabf27;*/
  }

  
  .enquiry-now a:hover {
    background: #ffb400;
    color: #fff;
  }
  
  .enquiry-now a span {
    position: absolute;
    display: block;
  }
  
  .enquiry-now a span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #eabf27);
    animation: btn-anim1 1s linear infinite;
  }
  
  @keyframes btn-anim1 {
    0% {
      left: -100%;
    }
    50%,100% {
      left: 100%;
    }
  }
  
  .enquiry-now a span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #eabf27);
    animation: btn-anim2 1s linear infinite;
    animation-delay: .25s
  }
  
  @keyframes btn-anim2 {
    0% {
      top: -100%;
    }
    50%,100% {
      top: 100%;
    }
  }
  
  .enquiry-now a span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #eabf27);
    animation: btn-anim3 1s linear infinite;
    animation-delay: .5s
  }
  
  @keyframes btn-anim3 {
    0% {
      right: -100%;
    }
    50%,100% {
      right: 100%;
    }
  }
  
  .enquiry-now a span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #eabf27);
    animation: btn-anim4 1s linear infinite;
    animation-delay: .75s
  }
  
  @keyframes btn-anim4 {
    0% {
      bottom: -100%;
    }
    50%,100% {
      bottom: 100%;
    }
  }
.excellence-text h1{ 
	    font-family: 'Playfair Display', serif;
	color: #000; 
	font-size: 38px; 
	font-weight: 400; 
	text-align: center; 
	margin-bottom: 30px;
	letter-spacing: 0.5px;
}
.excellence-text h3{ 
	font-family: "Great Vibes", cursive; 
	color: #ff4e00; 
	font-size: 36px; 
	font-weight: 400; 
	text-align: center; 
	margin-bottom: 30px;
	letter-spacing: 0.5px;
}

.excellence-text p{
	font-family: "Poppins", sans-serif; 
	color: #000; 
	font-size: 15px; 
	font-weight: 400; 
	text-align: center; 
	margin-bottom: 30px;
	letter-spacing: 0.5px;
	line-height: 30px;
}

.loved-sweets{width: 23%; float: left; margin-right: 2.666%; height: 400px}

.loved-sweets:last-child{margin-right: 0%}

.loved-sweets img{    height: inherit;
    object-fit: cover;
    width: 100%;
    border-radius: 20px;}

.loved-sweets h4{
	font-family: 'Playfair Display', serif;
    color: #000;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    margin-top: 11px;
    letter-spacing : 0.5px;
}

.add-image img{width: 100%; border-radius: 15px;}

.tradition-collections{ margin-top: 130px; margin-bottom: 70px }

.tradition-collections h2{ 
	    font-family: 'Playfair Display', serif;
	color: #000; 
	font-size: 38px; 
	font-weight: 400; 
	text-align: center; 
	margin-bottom: 30px;
	letter-spacing: 0.5px;
}
.tradition-collections h3{ 
	font-family: "Great Vibes", cursive; 
	color: #ff4e00; 
	font-size: 36px; 
	font-weight: 400; 
	text-align: center; 
	margin-bottom: 30px;
	letter-spacing: 0.5px;
}

.tradition-collections p{
	font-family: "Roboto", sans-serif; 
	color: #000; 
	font-size: 16px; 
	font-weight: 400; 
	text-align: center; 
	letter-spacing: 0.5px;
	line-height: 30px;
	padding-top: 15px;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 40px;
}

.tradition-collections-box{width: 21%; float: left; margin-right:5.333%;   }

.tradition-collections-box:last-child{margin-right: 0%}

.tradition-collections-box img{    height: inherit;
    object-fit: cover;
    width: 100%;
    border-radius: 20px;}

.tradition-collections-box h6{font-family: 'Playfair Display', serif;
	color: #000; 
	font-size: 20px; 
	font-weight: 400; 
	text-align: center; 
	letter-spacing: 0.5px;
padding-top: 10px;}

.about-section{background-image: url(../images/background-bg.jpg); padding: 0px 0 49px;   margin-top: 0px}

.about-left{width: 55%; float: left; margin-right: 5%; margin-top: 163px; margin-bottom: 110px;}

.about-right{width: 40%; float: left;     margin-top: 110px;}

.about-left h2{ 
	    font-family: 'Playfair Display', serif;
	color: #000; 
	font-size: 34px; 
	font-weight: 400; 
	text-align: left; 
	margin-bottom: 9px;
    letter-spacing: 0.5px;
    line-height: 46px;
}
.about-left h6{ 
	font-family: "Great Vibes", cursive; 
	color: #fff; 
	font-size: 40px; 
	font-weight: 400; 
	text-align: left; 
	margin-bottom: 30px;
	letter-spacing: 0.5px;
}

.about-left p{
	font-family: "Roboto", sans-serif; 
	color: #000; 
	font-size: 16px; 
	font-weight: 400; 
	text-align: justify; 
	letter-spacing: 0.5px;
	line-height: 34px;
	padding-top: 15px;	
}

.text-bg{width: 50%; float: left; background-color: #fff; height: 50px; border-bottom-right-radius: 50px;}

.text-bg1{width: 50%; float: left; background-color: #fff; height: 50px; border-bottom-left-radius: 50px;}

.text-bg2{width: 50%; float: left; background-color: #fff; height: 50px; border-top-right-radius: 50px;}

.text-bg3{width: 50%; float: left; background-color: #fff; height: 50px; border-top-left-radius: 50px;}

.whychoose-section{padding: 120px 0px 60px; position: relative; width: 100%; float: left;}

.whychoose-section:before{
	position: absolute;
	content: "";
	left: 20px;
	top: 50px;
	background: url(../images/why-left-bg.jpg) no-repeat left;
	width: 114px;
	height: 104px;
}
.whychoose-section:after{
	position: absolute;
	content: "";
	right: -5px;
	top: 30px;
	background: url(../images/why-right-bg.jpg) no-repeat left;
	width: 195px;
	height: 131px;
}


.whychoose-section h6{
	font-size: 36px; 
	color: #ff4e00;
	text-align: center;
	font-weight: 400;
	margin-bottom: 25px;
	font-family: 'Great Vibes', cursive; letter-spacing: 0.5px
 }
.whychoose-section h1{
	font-size: 42px; 
	color: #000;
	text-align: center;
	font-weight: 400;
	margin-bottom: 20px;
	/*font-family: 'Bellefair', serif;*/
	font-family: 'Playfair Display', serif;
 }

.why-left{width: 33%; float: left; margin-right: 5%;}

.why-center{width: 24%; float: left;}

.why-right{width: 33%; float: left; margin-left: 5%; }

.why-left-text{width: 75%; float: left; margin-right:10%;}

.why-left-text h4{
	font-family: 'Playfair Display', serif;
    font-size: 24px; 
	color: #000;
	text-align: right;
	font-weight: 500;
	margin-bottom: 10px;}

.why-left-text p{
	    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #000;
    text-align: right;
    font-weight: 400;
    margin-bottom: 50px;
    /* letter-spacing: 0.5px; */
    line-height: 27px;
}
.why-left-img{width: 15%; float: left; margin-right: 0%;}


.why-right-img{width: 15%; float: left; margin-right: 10%;}

.why-right-text{width: 75%; float: left; margin-right:0%;}

.why-right-text h4{
	font-family: 'Playfair Display', serif;
    font-size: 24px; 
	color: #000;
	text-align: left;
	font-weight: 500;
	margin-bottom: 10px;}

.why-right-text p{
	    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #000;
    text-align: left;
    font-weight: 400;
    margin-bottom: 50px;
    /* letter-spacing: 0.5px; */
    line-height: 27px;
}


.signature-collections{ margin-top: 80px; margin-bottom: 40px }

.signature-collections h2{ 
	    font-family: 'Playfair Display', serif;
	color: #000; 
	font-size: 38px; 
	font-weight: 400; 
	text-align: center; 
	margin-bottom: 30px;
	letter-spacing: 0.5px;
}
.signature-collections h3{ 
	font-family: "Great Vibes", cursive; 
	color: #ff4e00; 
	font-size: 36px; 
	font-weight: 400; 
	text-align: center; 
	margin-bottom: 30px;
	letter-spacing: 0.5px;
}

.signature-collections p{
	font-family: "Roboto", sans-serif; 
	color: #000; 
	font-size: 16px; 
	font-weight: 400; 
	text-align: center; 
	letter-spacing: 0.5px;
	line-height: 30px;
	padding-top: 15px;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 40px;
}

.signature-collections-box{width: 29%; float: left; margin-right:6.5%; height: 500px }

.signature-collections-box:last-child{margin-right: 0%}

.signature-collections-box img{    height: inherit;
    object-fit: cover;
    width: 100%;
    border-radius: 10px;}

.signature-collections-box h6{font-family: 'Playfair Display', serif;
	color: #000; 
	font-size: 20px; 
	font-weight: 400; 
	text-align: center; 
	letter-spacing: 0.5px;
    padding-top: 10px;
}

.secret-ingredient{margin-bottom: 80px;margin-top: 80px;}


.secret-ingredient h2{ 
	    font-family: 'Playfair Display', serif;
	color: #000; 
	font-size: 38px; 
	font-weight: 400; 
	text-align: center; 
	margin-bottom: 30px;
	letter-spacing: 0.5px;
}

.secret-ingredient h2 span{font-family: "Great Vibes", cursive; color: #ff4e00; font-size: 52px; }

.secret-ingredient p{
	font-family: "Roboto", sans-serif; 
	color: #000; 
	font-size: 16px; 
	font-weight: 400; 
	text-align: center; 
	line-height: 30px;
	padding-top: 15px;	
}

.secret-ingredient-box{width: 29%; float: left; margin-right:6.5%;   }

.secret-ingredient-box:last-child{margin-right: 0%}



.secret-ingredient-box h6{font-family: 'Playfair Display', serif;
	color: #000; 
	font-size: 20px; 
	font-weight: 400; 
	text-align: center; 
	letter-spacing: 0.5px;
    padding-top: 10px;
}

.footer { background-color: #0e1317; padding: 80px 0px 40px; background-image: url(../images/background-bg1.jpg); }

 .footer-1 { width: 28%; float: left; margin-right: 2%}

 .footer-2 { width: 17%; float: left; margin-right: 3%}

 .footer-3 { width: 22%; float: left; margin-right: 3%}

 .footer-4 { width: 25%; float: left; margin-right: 0%}

 .footer h4{
 	font-family: 'Playfair Display', serif;
 	color: #e9c545;
 	font-size: 20px; 
 	font-weight: 400;
	margin-bottom: 20px; 
	letter-spacing: 0.8px;
 }

 .footer p{
 	font-family: 'Poppins', serif;
 	color: #fff;
 	font-size: 15px; 
 	font-weight: 400;
	letter-spacing: 0.5px; line-height: 28px;
 }

  .footer-2 ul li{width: 100%; float: left; font-family: 'Poppins', serif;
 	color: #fff;
 	font-size: 15px; 
 	font-weight: 400;
	letter-spacing: 0.5px; line-height: 28px;margin-bottom: 10px; }

   .footer-2 ul li a{ font-family: 'Poppins', serif;
 	color: #fff;
 	font-size: 15px; 
 	font-weight: 400;
	letter-spacing: 0.5px; line-height: 28px;  }

/*.footer-2 ul li:nth-child(2n+2){width: 60%; }*/

.footer-4 i{margin-left: -18px; padding-right: 5px; color: #ffd115; }

.footer-4 p{margin-left: 18px; padding-bottom: 10px; }

.copyrights{margin-top: 60px; padding-top: 25px; border-top: 1px solid #047178}

.copyrights-left{width: 50%; float: left}

.copyrights-right{width: 50%; float: left}

ul.footer_social_links {
    float: left;
    padding: 0px;
    margin: 0px 0px 0px 0px;
}

.footer_social_links li {
    float: left;
    padding: 0px;
    margin: 20px 20px 0px 0px;
}

.footer_social_links li a i {
    width: 35px;
    height: 35px;
    text-align: center;
    border-radius: 100%;
    line-height: 35px;
    vertical-align: middle;
    background-color: #e9c545;
    color: #000;
    transition: all 0.3s ease; font-size: 16px;
}

.inner-top { 
	background-color: #0e1317; 
	padding: 80px 0px 40px; 
	background-image: url(../images/background-bg1.jpg);
	height: 145px !important;
}
.innerpage{margin-top: 200px}



.innerpage h2{ 
	    font-family: 'Playfair Display', serif;
	color: #000; 
	font-size: 38px; 
	font-weight: 400; 
	text-align: center; 
	margin-bottom: 30px;
	letter-spacing: 0.5px;
}
.innerpage h3{ 
	font-family: "Great Vibes", cursive; 
	color: #ff4e00; 
	font-size: 36px; 
	font-weight: 400; 
	text-align: center; 
	margin-bottom: 30px;
	letter-spacing: 0.5px;
}

.innerpage p{
	font-family: "Roboto", sans-serif; 
	color: #000; 
	font-size: 16px; 
	font-weight: 400; 
	text-align: center; 
	letter-spacing: 0.5px;
	line-height: 30px;
	padding-top: 15px;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 40px;
}

.product-collections-box{width: 21%; float: left; margin-right:5.333%;   margin-bottom: 35px }

.product-collections-box:nth-child(4n+4){margin-right: 0%}

.product-collections-box img{    height: inherit;
    object-fit: cover;
    width: 100%;
    border-radius: 20px;}

.product-collections-box h6{font-family: 'Playfair Display', serif;
	color: #000; 
	font-size: 20px; 
	font-weight: 400; 
	text-align: center; 
	letter-spacing: 0.5px;
padding-top: 10px;}



.contactus-box{
	background-color: #ffffff;
    box-shadow: 0 5px 24px 6px rgba(0,0,0,0.1); margin-top: 80px
}

.contactus-box-left{width: 34%; margin-right: 1%; float: left; background: #011b32; padding: 30px; color: #fff;}

.contactus-box-left h4{font-size: 24px; font-weight: 400;  font-family: 'roboto'; margin-bottom: 10px;color: #fff;}

.contactus-box-left span{ float: left; padding-bottom: 40px; padding-right: 15px; font-size: 42px; padding-top: 8px; color: #efc203;}

.contactus-box-left h6{ margin-bottom: 8px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'roboto';
    color: #fff;}

.contactus-box-left p{  font-size: 16px; font-weight: 400;  font-family: 'roboto'; line-height: 28px; text-align: left; color: #fff;margin-bottom: 0px;
    padding-top: 0px;
    width: 100%;}

.section-divied{border-bottom: 1px solid #2f3b56; padding: 30px 0px;}

.section-divied:nth-child(4n+0){border-bottom: 0px solid #2f3b56; padding: 30px 0px 20px;}

.contactus-box-right{width: 65%; float: left; padding: 45px; color: #fff;}

.contactus-box-right h3{font-size: 26px; font-weight: 500;  font-family: 'roboto'; margin-bottom: 30px; color: #000;}

.contact-from{width: 47%; float: left; margin-right: 6%}

.contact-from input{    
	border: 1px solid #dddddd;
    color: #222222;
    padding: 10px 10px;
    width: 100%;
    margin-bottom: 30px;
}

.contact-from-textarea{width: 100%; float: left; }

.contact-from-textarea textarea{    
	border: 1px solid #dddddd;
    color: #222222;
    padding: 10px 10px;
    width: 100%;
    height: 100px;
    margin-bottom: 30px;
}

.contact-from-submit{    
	background: #45922a;
	padding: 12px 25px;
	color: #fff;
	font-size: 16px;
	display: inline-block;
	font-family: 'roboto';
	font-weight: 500;
	border: 0;
}

.google-map{box-shadow: 0 5px 24px 6px rgba(0,0,0,0.1); border:1px solid #ddd;}

.google-map-text h4{font-size: 24px; font-weight: 500;  font-family: 'roboto';  color: #000;  margin-top: 70px; margin-bottom: 25px;}

/* scroll up */
.scrollup{
    width:40px;
    height:40px;
    opacity:1;
    position:fixed;
    bottom:22px;
    right:20px;
    display:none;
    text-indent:-9999px;
    background: url(../images/scroll-top-arrow.png) no-repeat left top;
	z-index: 9001;
}

.header-mobilemenu {
    width: 5%;
    float: left;
   display: none;
}


.cd-panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.6s;
  transition: visibility 0s 0.6s;
  z-index: 9999;
}

.cd-panel::after {
  /* overlay layer */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  -webkit-transition: background 0.3s 0.3s;
  transition: background 0.3s 0.3s;
}

.cd-panel.cd-panel--is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
      z-index: 9999;
}

.cd-panel.cd-panel--is-visible::after {
  background: rgba(0, 0, 0, 0.8);
  -webkit-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
}

.cd-panel__header {
  position: fixed;
  width: 90%;
  height: 50px;
  line-height: 50px;
  background: #011b32;
  z-index: 2;
  -webkit-box-shadow: 0 1px 1px #454545;
          box-shadow: 0 1px 1px #454545;
  -webkit-transition: -webkit-transform 0.3s 0s;
  transition: -webkit-transform 0.3s 0s;
  transition: transform 0.3s 0s;
  transition: transform 0.3s 0s, -webkit-transform 0.3s 0s;
  -webkit-transform: translateY(-50px);
      -ms-transform: translateY(-50px);
          transform: translateY(-50px);
}

.cd-panel__header h1 {
 padding-left: 7%;
  font-size: 18px; 
  margin:10px 0px 0px 0px; 
  color:  #fff; 
  letter-spacing: 0.8px;
  font-weight: 400;font-family: "Roboto", sans-serif;
}

.cd-panel--from-right .cd-panel__header {
  right: 0;
}

.cd-panel--from-left .cd-panel__header {
  left: 0;
}

.cd-panel--is-visible .cd-panel__header {
  -webkit-transition: -webkit-transform 0.3s 0.3s;
  transition: -webkit-transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
  -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px);
}

@media only screen and (min-width: 768px) {
  .cd-panel__header {
    width: 70%;
  }
}

@media only screen and (min-width: 1170px) {
  .cd-panel__header {
    width: 28%;
  }
}

.cd-panel__close {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 60px;
  /* image replacement */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.cd-panel__close::before, .cd-panel__close::after {
  /* close icon created in CSS */
  content: '';
  position: absolute;
  top: 22px;
  left: 20px;
  height: 3px;
  width: 20px;
  background-color: #fff;
  /* this fixes a bug where pseudo elements are slighty off position */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.cd-panel__close::before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.cd-panel__close::after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.cd-panel__close:hover {
  background-color: #fff;
}

.cd-panel__close:hover::before, .cd-panel__close:hover::after {
  background-color: #ffffff;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.cd-panel__close:hover::before {
  -webkit-transform: rotate(220deg);
      -ms-transform: rotate(220deg);
          transform: rotate(220deg);
}

.cd-panel__close:hover::after {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}

.cd-panel--is-visible .cd-panel__close::before {
  -webkit-animation: cd-close-1 0.6s 0.3s;
          animation: cd-close-1 0.6s 0.3s;
}

.cd-panel--is-visible .cd-panel__close::after {
  -webkit-animation: cd-close-2 0.6s 0.3s;
          animation: cd-close-2 0.6s 0.3s;
}

@-webkit-keyframes cd-close-1 {
  0%, 50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}

@keyframes cd-close-1 {
  0%, 50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}

@-webkit-keyframes cd-close-2 {
  0%, 50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}

@keyframes cd-close-2 {
  0%, 50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}

.cd-panel__container {
  position: fixed;
  width: 90%;
  height: 100%;
  top: 0;
  background: #ffffff;
  z-index: 1;
  -webkit-transition: -webkit-transform 0.3s 0.3s;
  transition: -webkit-transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
}

.cd-panel--from-right .cd-panel__container {
  right: 0;
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}

.cd-panel--from-left .cd-panel__container {
  left: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}

.cd-panel--is-visible .cd-panel__container {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

@media only screen and (min-width: 768px) {
  .cd-panel__container {
    width: 70%;
  }
}

@media only screen and (min-width: 1170px) {
  .cd-panel__container {
    width: 28%;
  }
}

.cd-panel__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 70px 7%;
  overflow: auto;
  /* smooth scrolling on touch devices */
  -webkit-overflow-scrolling: touch;background: #011b32;
}

.cd-panel__content p {
  font-size: 1.4rem;
  color: #424f5c;
  line-height: 1.4;
  margin: 2em 0;
}

.cd-panel__content p:first-of-type {
  margin-top: 0;
}

@media only screen and (min-width: 768px) {
  .cd-panel__content p {
    font-size: 1.6rem;
    line-height: 1.6;
  }
}



.cd-panel__content ul {padding:5px ;}

.cd-panel__content ul li{padding-bottom:12px; margin-bottom: 12px; border-bottom: 1px solid #1b2f40}

.cd-panel__content ul li a{ font-family: "Roboto", serif;
    color: #fff;
    font-size: 18px;
    letter-spacing: 0.5px;}

.cd-panel__content ul li ul {padding:15px ;}

.cd-panel__content ul li ul li{padding-bottom:10px; margin-bottom: 0px; border-bottom: 0px solid #1b2f40}

.cd-panel__content ul li ul li a{ font-family: "Roboto", serif;
    color: #fff;
    font-size: 18px;
    letter-spacing: 0.5px;}

.cd-panel__content ul li ul li a i{ 
        color: #fff;
    font-size: 6px;
    float: left;
    padding-right: 10px;
    padding-top: 8px;
  }