.email {
	color: #FFF;
	text-decoration: none;
	}
a.email:hover {
	color: #01bce0;
	text-decoration: none;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #FFF;
	
}
.black {
	color: #CCC;
	background-color: #000000;
	text-decoration: none;
	padding: 2px;
	}
	.social-icons	{
		width:120px;
	}
a.black:hover {
	color: #01bce0;
	text-decoration: none;
	background-color: #333;
	font-weight: bold;
	padding: 2px;
	
}
	.blue {
	color: #01bce0;
	font-weight: bold;
		
		}
.margin {
margin-top: 25px;
	margin-bottom: 20px;}
	.box {
	margin-top: 25px;
	color: #FFF;
	background-color: #01bce0;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
.padding{
	padding-right: 5px;
	padding-left: 5px;
}
.boder {
	
	border-bottom-width: medium;
	border-bottom-style: double;
	border-bottom-color: #272c33;
	margin-bottom:10px;
}
.heading {
	font-size: large;
	color: #FFF;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
}
	
.nav-side-menu {
  overflow: auto;
  font-family: verdana;
  font-size: 12px;
  font-weight: 200;
  background-color: #2e353d;
  top: 0px;
  width: 300px;
  height: 100%;
  color: #e1ffff;
}
.nav-side-menu .brand {
  background-color: #23282e;
  line-height: 60px;
  display: block;
  text-align: left;
  font-size: 16px;
}
.nav-side-menu .toggle-btn {
  display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 45px;
  cursor: pointer;
  /*    
    .collapsed{
       .arrow:before{
                 font-family: FontAwesome;
                 content: "\f053";
                 display: inline-block;
                 padding-left:10px;
                 padding-right: 10px;
                 vertical-align: middle;
                 float:right;
            }
     }
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
  color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
  color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  background-color: #181c20;
  border: none;
  line-height: 28px;
  border-bottom: 1px solid #23282e;
  margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
  background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
  font-family: FontAwesome;
  content: "\f105";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}
.nav-side-menu li {
  padding-left: 0px;
  border-left: 3px solid #2e353d;
  border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
  text-decoration: none;
  color: #e1ffff;
}
.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}
.nav-side-menu li:hover {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
@media (max-width: 767px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }
  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10 !important;
    padding: 3px;
    background-color: #ffffff;
    color: #000;
    width: 40px;
    text-align: center;
  }
  .brand {
	text-align: left !important;
	font-size: 22px;
	padding-left: 20px;
	line-height: 50px !important;
	font-weight: bolder;
  }
}
@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
}
body {
  margin: 0px;
  padding: 0px;
}
/*------------------ freeshipping -----------------------*/

.free-sp-icon-box-inner {
    border-radius: 100%;
    color: #fff;
    height: 35px;
    margin: 0 auto;
    padding: 6px 9px;
    width: 35px;
}

.shipping-content {
    overflow: hidden;
    text-align: center;
}

.hadding-title {
    margin: 4px 0;
}

.shipping-content .hadding-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shipping-content > p {
    margin: 0;
}

.free-shipping .hadding-title > span {
    font-family: lato;
    font-size: 20px;
    font-weight: bold;
    text-transform: capitalize;
}

.free-shgipping-box.shipping-1 {
	border: 6px solid #7d7d80;
	
}

.free-shgipping-box.shipping-2 {
    border: 6px solid #7d7d80;
}

.free-shgipping-box.shipping-3 {
    border: 6px solid #7d7d80;
}

.free-shgipping-box.shipping-4 {
    border: 6px solid #7d7d80;
}

.free-shgipping-box {
    border-radius: 6px;
    padding: 10px 13px;
    transition: border-color 1s ease;
    -webkit-transition: border-color 1s ease;
    -moz-transition: border-color 1s ease;
    -o-transition: border-color 1s ease;
}

.free-shgipping-box:hover {
	border-color: #01bce0;
	background-color: #f5f5f5;
}

.free-shgipping-box:hover .free-sp-icon-box-inner {
    background-color: #272c33;
}

.free-shgipping-box:hover .shipping-content .hadding-title {
    color: #01bce0;
}

.shipping-2 .free-sp-icon-box-inner {
    padding: 7px 11px;
}

.shipping-4 .free-sp-icon-box-inner {
    padding: 6px 12px;
}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.free-shgipping-box:hover h2 {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* @group Blink */
.blink {
	-webkit-animation: blink .75s linear infinite;
	-moz-animation: blink .75s linear infinite;
	-ms-animation: blink .75s linear infinite;
	-o-animation: blink .75s linear infinite;
	 animation: blink .75s linear infinite;
}
@-webkit-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-moz-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-o-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
/* @end */

PORTFOLIO STYLES
------------------------------------------------------- */

	.single-portfolio .title h2 {
		font-size:24px;
		text-transform:none;
		margin-top:0;
		padding-top:0;	
	}
	.product_details ul li {
		list-style:none;
		padding-left:2px;
		padding-bottom:5px;
	}
	.pager li > a, .pager li > span {
		background-color: #FFFFFF;
		border: 1px solid #fff;
		border-radius: 0;
		color:#fff;
		margin:30px 0 0;
		display: inline-block;
		padding: 5px 14px;
	}
	.pager li > a:hover, .pager li > span:hover {
		background-color:#222;
		color:#fff;
	}
	.product_details ul li a {
		color:#666;
	}
	.masonry_wrapper {
		overflow:hidden;
		margin:30px 0;
	}
	.masonry_wrapper .item {
		margin: 0 2px 4px;
		padding:0;
	}
	.masonry_wrapper .item img {
		height: auto !important;
		height: 100% !important;
		width: 100%;
		position: relative;
		z-index: -2;
	}
	#boxed-portfolio .portfolio_item {
		width:100% !important;
		height:auto !important;
		margin:0 0 20px;
		overflow:hidden;
	}
	#boxed-portfolio {
		display: block !important;
		overflow: visible !important;
		position: relative;
		z-index: 10;
		margin-bottom:20px;
	}
	.portfolio-filter ul {
		list-style:none; 
		padding-left:10px
	}
	.portfolio-filter {
		text-align: center;
		overflow:hidden;
		margin: 40px 0 15px;
	}
	.portfolio-filter li {
		display: inline;
		margin-right: 5px;
		padding: 0;
	}
	.portfolio-filter li a {
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		border-radius:4px;
	}
	.team_member img,
	.portfolio_item img {
		width:100%;
	}
	.isotope-item {
	  z-index: 2;
	}
	.isotope-hidden.isotope-item {
	  pointer-events: none;
	  z-index: 1;
	}
	.isotope,
	.isotope .isotope-item {
	  -webkit-transition-duration: 0.8s;
		 -moz-transition-duration: 0.8s;
		  -ms-transition-duration: 0.8s;
		   -o-transition-duration: 0.8s;
			  transition-duration: 0.8s;
	}
	.isotope {
	  -webkit-transition-property: height, width;
		 -moz-transition-property: height, width;
		  -ms-transition-property: height, width;
		   -o-transition-property: height, width;
			  transition-property: height, width;
	}
	.isotope .isotope-item {
	  -webkit-transition-property: -webkit-transform, opacity;
		 -moz-transition-property:    -moz-transform, opacity;
		  -ms-transition-property:     -ms-transform, opacity;
		   -o-transition-property:      -o-transform, opacity;
			  transition-property:         transform, opacity;
	}
	.isotope.no-transition,
	.isotope.no-transition .isotope-item,
	.isotope .isotope-item.no-transition {
	  -webkit-transition-duration: 0s;
		 -moz-transition-duration: 0s;
		  -ms-transition-duration: 0s;
		   -o-transition-duration: 0s;
			  transition-duration: 0s;
	}
	.magnifier .btn-default {
		padding:0 20px !important;
		color:#222222 !important;
		width:auto !important;
	}
	.magnifier .sg,
	.magnifier .st,
	.magnifier .sf {
		border:1px solid #ffffff;
		color: #FFFFFF;
		display: block;
		display: inline-block !important;float: none !important;
		font-size: 16px;
		height: 40px;
		line-height: 38px;
		text-align: center;
		width: 40px;
		margin: -10px 2px 0 2px;
		text-align: center;
		width: 40px;
	}
	.magnifier h4 {
		color:#ffffff;
		text-align:center;
		font-size:16px;
		padding:10px 0;
		margin-bottom:20px;
		display:block;
		font-family: 'bariol_lightlight';
	}
	.magnifier h3 {
		color:#ffffff;
		text-align:center;
	}
	.portfolio_item .magnifier .buttons {
		top:44%;
	}
	.magnifier .buttons {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		text-align: center;
		width: 100%;
		top: 50%;
		margin-top: -20px;
		-webkit-transform: scale(0.2);
		-moz-transform: scale(0.2);
		-ms-transform: scale(0.2);
		-o-transform: scale(0.2);
		transform: scale(0.2);
		-webkit-transition: all 0.3s ease 0s;
		-moz-transition: all 0.3s ease 0s;
		-ms-transition: all 0.3s ease 0s;
		-o-transition: all 0.3s ease 0s;
		transition: all 0.3s ease 0s;
	}
	.magnifier:hover .buttons {
		opacity: 1;
		visibility: visible;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	.entry:hover .magnifier { 
		opacity: 1;
		visibility: visible;
	}
	.magnifier {
		background:#000000;
		background:rgba(0,0,0,0.8);
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		opacity:0;
		-webkit-transition:all .3s ease-in-out;
		-moz-transition:all .3s ease-in-out;
		-ms-transition:all .3s ease-in-out;
		-o-transition:all .3s ease-in-out;
		transition:all .3s ease-in-out;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
<!---contact-->
.product-heading {
    overflow: hidden;
}

.product-heading>h2 {
    font-family: lato;
    font-size: 22px;
    font-weight: 400;
    text-transform: capitalize;
    margin: 0;
}

.product-heading > h2 > span,
.page-title >span,
.title-box >span {
    background-color: #fff;
    padding: 5px;
}

.product-heading h2::before,
.page-title span:before,
.title-box span:before {
      content: "";
    height: 25px;
    left: 0;
    position: absolute;
    top: 0;
    width: 2px;
}

.page-title span:before,
.title-box >span:before {
    top: auto;
}

.page-title {
    text-align: left;
}

.product-heading h2,
.page-title span,
.title-box span {
    position: relative;
}
.comment-respond-inner input,.comment-respond-inner textarea {
  border: 1px solid #ccc;
}
.comment-respond-inner input{
height: 40px
}
.comment-form-comment {
  margin-top: 10px;
}
.comment-respond-inner button.submit-btn {
  background-color: #171717;
  color: #fff;
  padding: 9px 18px;
  text-transform: uppercase;
}
.comment-respond-inner button.submit-btn:hover {
  background-color: #ff623f;
  color: #fff;
}
.post-content a.read-more{
    border: 0;
}
.post-meta-inner .fa-calendar::before,.post-meta-inner .fa-pencil:before,.post-meta-inner .fa-comment:before {
  padding-right: 8px;
}
.btn:hover,.btn:focus{
    outline: none;
}
.ccs-cc-inline-section-title {
    display: none !important;
}
<!---end contact-->

/*---- HP Catalog Page -----*/
.border{
		border: 1px solid #dee2e6!important;
		padding:10px;
}

.padding{
	padding:20px;
}
/* HP A3 Products Styles*/
.product-name{
	padding-bottom:10px;
	border-bottom: 1px solid #eaecf5;
}
.ccs-cc-inline-section-title{
	display:none !important;
}
.page {
  display: none;
}
.page-active {
  display: block;
}