body {background-color:#fff;font-family:calibri;color:#333;}
@font-face {
    font-family: action_man;
    src: url(custom-fonts/action_man.woff);
}

.logo {color:#fff;width:200px;float:left;height: 75px;margin: 0;padding: 0;}
.logo h3 {margin:0;padding:0;}
.navigation {color:#fff;width:900px;border:1px solid #333;margin:auto;padding:0;position:relative;}
.navigation li{color:#fff;float:left;padding:10px;width:120px;list-style:none;background-color:#09f;}
.navigation li a{color:#fff;display:block;width:120px;font-size:18px;}



.symbol-logo {}
.social {width:300px;float:right;padding:5px;}
.page-icons {width:300px;float:left;padding:5px;}
.fa-facebook-square {
	background:;

	
} 
.fa-linkedin {
	background:#007bb6
}
.fa-twitter {
	background:#00aced
}
.google-plus {
	background:#dd4b39
}
.getquote {}
.home-contact {margin:0;padding:0;width:30%;display:block;top:10em;left:50em;background-color:#fff;;height:30em;width:40%;
               position:fixed;background-image:url(tranbg.png);z-index: 999999;border:2px solid green;border-radius:10%;}
.home-contact h2 {text-align:center;padding-left:0px;color:#000;} .home-contact
form fieldset {color:green;margin-left:-1em;} .home-contact form fieldset div
{margin-left:-2em;margin-top:0.1em;} .home-contact form fieldset div input
{background-color: rgba(250,250,250, 0.8);color:#ff0000;} .home-contact form
fieldset div input::-webkit-input-placeholder { color: red; } .home-contact form
fieldset div textarea {background-color: rgba(250,250,250, 0.8);color:#ff0000;height:4em;}
.home-contact form fieldset div textarea::-webkit-input-placeholder { color:
red; } .home-contact form fieldset div button[type=submit]{background-color:#09f;border:none;}
/*<div class="symbol-logo"><img src="<?php echo WEB_URL;?>media/images/symbol-logo.png" width="35" height="35" /></div>*/
.topnav {background-color:#fff;position:absolute;top:0;width:100%;height:2.5em;color:#fff;z-index:9999;border-bottom:1px solid #8dba05;}
.topnav i{color:;font-size:24px;}
.getquote {display:none;}
.fa-times {cursor: pointer;color:green;float:right;font-size:18px;position:absolute;top:2em;right:2em;}
.fa-times:hover {color:#09f;}
.qte {cursor: pointer;}
.qte:hover {color:#09f;}
.topnav ul li {float:left;list-style:none;}
.footnav ul li {float:left;list-style:none;}
.cuswrap {width:1150px; margin: auto; position: relative;}

.footnav {background-color:#8dba05;border-top:2px solid #fff;margin:0;padding:0;width:100%;height:3em;color:#fff}
.footnav p {width:900px;margin: auto;position:realtive;padding:10px;}
.fixed {box-shadow: 1px 2px 3px #8dba05;}
.navmenu {background-color:#fff;position:absolute;width:100%;height:6em;left:0;z-index:9999;top:2.5em;}
.navmenu div.logo {width:300px;float:left;}
.navmenu div.logo h3{width:250px;text-align:center;color:#8dba05;}
.navmenu div.logo h1 a {color:#8dba05;}
.navmenu div.logo span{width:250px;text-align:center;padding-left:50px;}
.navmenu div.menu {width:700px;float:right;color:#fff;position:relative;z-index:9999;}
.navmenu div.menu ul{list-style:none;margin-top:1em;}
.navmenu div.menu ul li{width:120px;float:left;color:#666;height:50px;line-height:3em;background-color:;margin-top:10px;text-align:center;margin-left:5px;cursor:pointer;
 font-size:20px; text-transform: uppercase;position: relative;}
 .navmenu div.menu ul li ul {display: none;background-color:#fff;margin:0;padding:0;width:150px;height:auto;position:absolute;z-index:9999;}
 .navmenu div.menu ul li ul li {margin:0;padding:0;width:150px;line-height: 2em;height:30px;text-align:left;padding-left:10px;font-size:13px;}
.navmenu div.menu ul li ul li ul {top:0em;left:100%;display: none;height:auto;}
.navmenu div.menu ul li:hover {border-top:3px solid #8dba05;}
.navmenu div.menu ul li:hover > a {}
.navmenu div.menu ul li:hover > ul {display: block;}
.navmenu div.menu ul li ul li:hover > ul {display:block;}
.navmenu div.menu ul li ul li:hover {border-left:solid 4px #8dba05;border-top:none; -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;}
ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

ul:after { clear: both; }
.navmenu div.menu ul li a:hover {color:#8dba05;}
.navmenu div.menu ul li a {text-decoration: none;color: #333;display:block;}

.content-div-home {width: 100%;height:40em;background-color:#fff;margin: 0;padding:0;}

.flexslider {width: 100%;height: 35em;overflow: hidden;}
.flexslider img {height:50em;}

.latest-arrivals {width: 1100px;position:relative;margin: auto;padding:20px;color: #fff;border:1px solid #ff;height:auto;}
.latest-arrivals h2 {color:#333;}
.latest-arrivals-slider div {width:300px;height: auto;float:left;margin:2px;border:1px solid #fff;padding:5px;bottom:2px;}
.latest-arrivals-slider div img {width:100%;height:80%;}
.latest-arrivals-slider div p {width:auto;border:1px solid #fff;margin-top:3px;text-align: center;}
.latest-arrivals-slider div span.dollar {margin:0px;padding:10px;font-size:11px;text-align: left;border: 1px solid #fff;}
.latest-arrivals-slider div span.available {margin:0px;padding:10px;font-size:11px;text-align: left;border: 1px solid #fff}

.about {width: ;position:relative;margin: auto;padding:20px;color: #666;border:1px solid #ff;height:30em;}
.about .about-cont {width:;}
.about .about-cont p {width:auto;padding:10px;height:250px;text-align: justify;font-size: 18px;}
 .about-button {border-radius: 30px;background-color:#09f;width:100px;height: auto;padding:10px;color: #fff;text-decoration:none;cursor: pointer;}
 .about-button:hover {color:#ff;text-decoration:none;}
.about h3 {text-align: center;border-left:3px solid #8dba05;}
.about h2 {text-align: center;border-left:3px solid #8dba05;width:10%;}
.about div {float:left;}

.aboutc {position:relative;margin: auto;padding:20px;color: #666;height:auto;}
.aboutc .about-cont img {width:100%;}
.aboutc .about-cont p {width:auto;padding:10px;height:;text-align: justify;font-size: 18px;}
.aboutc .about-cont h4 {border-bottom:3px solid #8dba05;padding:10px;font-size:24px;}
.about-contp h4 {border-bottom:3px solid #8dba05;padding:10px;font-size:24px;}
 .about-buttonc {border-radius: 30px;background-color:#09f;width:100px;height: auto;padding:10px;color: #fff;text-decoration:none;cursor: pointer;}
 .about-buttonc:hover {color:#ff;text-decoration:none;}
.aboutc h2 {text-align:;border-left:3px solid #8dba05;padding-left:10px;position: relative;z-index:999;}
.aboutc form {position:relative;z-index:999;padding:10px;}
.aboutc form select {width:100%;padding:10px;font-size:20px;}
.img-box {width:340px;height:300px;background-color:#09f;float:left;margin:2px;position:relative;overflow:hidden;}
.img-box-sqr {width:340px;height:385px;background-color:;float:left;margin:2px;}
.img-box-sqr img {width: 100%;height: 100%;}
.img-box img {width: 100%;height: 100%;position:absolute;z-index:99;cursor:pointer;}
.square {background-color:#333;width:150px;height:100px;float:left;margin:10px;}
.square img {width:100%;height:100%;display:;}
div.square p {position:absolute;z-index:5;}
.video-box {width:685px;height:300px;background-color:#09f;float:left;margin:2px;}
.video-box video {}
.about-oth div {float:left;}
.about-contp p {width:auto;padding:10px;height:;text-align: justify;font-size: 18px;}
.about-oth img {width:100%;background-color:#8dba05;padding:10px; }
.about-oth .about-sqr-one {width:300px;height:150px;background-color:#CC919A;background-image: url('fashion-arts.jpg');}
.about-oth .about-sqr-one h3 {margin-top:3em;background-image:url('nav-bg.png');}
.about-oth .about-sqr-two {width:300px;height:150px;background-color:#008080;background-image: url('samp1.jpg');}
.about-oth .about-sqr-two h3 {margin-top:3em;background-image:url('nav-bg.png');}
.about-oth .about-rect {width:250px;height:300px;background-image:url('fashion-philosphy-three.jpg');background-size: cover;}
.about-oth .about-rect h3 {margin-top:5em;background-image:url('nav-bg.png');}
.content {height:40em;width: 100%;}
.sqr {width:300px;}
.slider {margin-top:5em;}

.gallery {width: 1100px;position:relative;margin:auto;padding:20px;color: #fff;border:1px solid #ff;height:auto;}
.gallery h3 {padding:10px;background-color: #006400;width: 1030px;}
.clear {clear:both;}

 .gap {height:4em;width:100%;border:1px solid #ff;}

.portfolio {width: 1100px;position:relative;margin: auto;padding:20px;color: #fff;border:1px solid #ff;height:auto;}
.portfolio h3 {padding:10px;background-color:#2F4F4F;width: 180px;padding-top:80px;text-align: center;}
.port-box img {width: 100%;height: 100%;cursor: pointer;}
.port-box img:hover {opacity: 0.6;}
 .port-box {float:left;width:200px;height:200px;margin:2px;background-color:green;}

.list-products {width:1000px;}
.list-products { list-style: none;display: inline-block;width:100%;display: block;}

.list-products input[type=checkbox] {padding:10px;top:1em;}
.list-products label {padding: 20px;line-height: 0em;}
.list-products input[type=checkbox] {
    
      text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 15px;
  color: #f3f3f3;
    
}
.list-products input[type=checkbox] + label {
  color: #333;
  font-style: italic;
} 
.list-product li input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
} 
.results div {text-align: center;padding:10px;float:left;}
.results div img {height:120px;width:80%;}
.social-media {width: 1050px;position:relative;margin: auto;padding:20px;color: #fff;border:1px solid #ff;height:auto;}
.social-media h3 {padding:10px;background-color:#2F4F4F;width: 180px;padding-top:80px;text-align: center;}
.facebook-box {width:500px;height:400px;background-color:;float:left;}
.facebook-box img {width:90%;height:90%;}
.twitter-box {width:500px;height:400px;background-color:;float:left;}
.twitter-box img {width:90%;height:90%;}
.contact {}
.product-img {background:url('sagainfotech-one.jpg') fixed;background-size:100%;height:10em;}
.product-img h2 {color:#fff;background:url('nav-bg.png');padding:10px;text-transform: capitalize;width:50%;margin-top:1em;}

.about-img {background:url('aboutus.jpg') fixed;background-size:100%;height:20em;}
.about-img h2 {color:#fff;background:url('nav-bg.png');padding:20px;text-transform: capitalize;width:50%;margin-top:4em;}

.service-img {background:url('services.jpg') fixed;background-size:100%;height:20em;}
.service-img h2 {color:#fff;background:url('nav-bg.png');padding:20px;text-transform: capitalize;width:50%;margin-top:4em;}

.contact-img {background:url('contactus.jpg') fixed;background-size:100%;height:20em;}
.contact-img h2 {color:#fff;background:url('nav-bg.png');padding:20px;text-transform: capitalize;width:50%;margin-top:4em;}

.banner{	
	background:url(banner.jpg) bottom no-repeat;
	width: 100%;
	min-height: 425px;
	background-size:cover;
	display:block;
	position:relative;
}
.banner-matter {
	position: absolute;
	top: 9em;
	left: 5em;
}
.banner-matter label {
	font-size: 1.5em;
	color: #2d2d2d;
	margin: 0 0 0 6em;
	height: 14px;
	display: block;
	font-family: 'Libre Baskerville', serif;
}
.banner-matter h2 {
	font-size: 3.3em;
	color: #fff;
	font-family: 'Libre Baskerville', serif;
	font-weight: 600;
}
.banner-matter p {
	font-size:1.4em;
	color:#000;
	font-weight: 600;
}

.in-left{	
	background:url(p111.jpg) 0px 0px;
	width: 100%;
	min-height: 425px;
	background-size:cover;
	display:block;
	position:relative;
}
.cool{
	background:url(get.png) 0px 0px no-repeat;
	width: 175px;
	height: 183px;
	text-align: center;
	position:absolute;
	bottom:-2px;
	right: 0em;
}
p.code{
	font-size: 1.5em;
	color: #c4c4c4;
	text-transform: uppercase;
	font-weight: 700;
	position: absolute;
	top: 46px;
	left: 10px;
	font-family: 'Oswald', sans-serif;
}
.discount{
	position:relative;
	padding:1.8em 0 0;
}
p.no-more {
	font-size: 1.2em;
	color: #636563;
	line-height: 22px;
	position:absolute;
	top: 37px;
	right: 27px;
}
p.no-more  b{
	font-size:1.4em;
	display:block;
	font-weight: 400;
}
p.no-more  span{
	color:#bc3726;
}
p.no-get b{
	color:#fff;
}
p.no-get{
	color:#c3c3c3;
	font-size:1.3em;
}
a.know-more{
	text-decoration: none;
	font-size: 1.3em;
	color: #fff;
	background: #bc3726;
	padding: 0.5em 1em 0.5em 0.5em;
	position: absolute;
	bottom: 33px;
	right: 0;
}
a.know-more:hover{
	background:#FD1E01;
}

.you{
	background:#2d2d2d;
	border-radius:100px;
	-webkit-border-radius:100px;
	-o-border-radius:100px;
	-moz-border-radius:100px;
	-ms-border-radius:100px;
	width: 90px;
	height: 90px;
	text-align: center;
	position: absolute;
	top: 15em;
	left: 20em;
}
.you span{
	font-size: 3.4em;
	color: #fff;
	display: block;
	height: 53px;
}
.you  small{
	font-size: 1.2em;
	color: #bc3726;
	font-weight: 700;
	font-family: 'Libre Baskerville', serif;
}

.pages {

	float: left;
	padding:10px;
	margin-top:1em;border:1px solid #ff;
}
ul.dc_pagination.dc_paginationA.dc_paginationA06 {
	padding: 0;
	list-style: none;
	float: left;
}
ul.dc_pagination li:first-child {
	margin-left: 0px;
	text-transform: uppercase;
}
ul.dc_pagination li {
	float: left;
	margin: 0px;
	margin-left: 5px;
	padding: 0px;
	background: #DCDCDC;
}
ul.dc_pagination li a {
	color: #000;
	display: block;
	padding: 7px 12px;
	text-decoration: none;
	font-size: 0.9em;
}
ul.dc_pagination li a:hover{
	color:#fd926d;
}
ul.dc_paginationA06 li a.current {
	background: url(../images/pr_arrow.png) no-repeat 9px 5px;
	display: inline-block;
	width: 31px;
	height: 27px;
}
.limiter.visible-desktop {
	float: left;
	margin: 3px 20px 0;
}
.limiter.visible-desktop label{
	font-size:1em;
	color:#fff;
	font-weight: 500;
}

.contact-in h3{
	margin:0.5em 0;
	font-size:3em;
	color:#fff;
	text-transform:uppercase;
	font-weight:700;
	font-family: 'Oswald', sans-serif;
}
.contact-right  h5 {
	color:#fff;
	margin-bottom:0.5em;
	font-size:1.7em;
	margin-top: 0px;
}
.contact-left input[type="text"],.contact-left textarea{
	padding:14px;
	display:block;
	width:98%;
	background:#fcfcfc;
	border: 1px solid #E0E0E0;
	outline:none;
	color:#464646;
	font-size:0.8125em;	
}
.contact-left textarea{
	resize:none;
	height:100px;		
}
.contact-left input[type="submit"]{
	outline:none;
	padding:7px 20px;
	color:#FFF;
	cursor:pointer;
	background:#bc3726;
	border:none;
   margin:0.5em 0 ;
   transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-ms-transition: 0.5s all;
}
.contact-left input[type="submit"]:hover{
	background-color:#FD1E01;
}
.contact-right p{
	font-size:1em;
	color:#fff;
	line-height: 1.8em;
}
.contact-right p span{
	text-decoration:underline;
	color:#fff;
	cursor:pointer;
}
.contact-right p a{
	text-decoration:underline;
	color:#fff;
	cursor:pointer;
}
.contact-right p span:hover,.contact-right p a:hover{
	text-decoration:none;
}
.map iframe{
	border:0;
	margin-bottom:15px;
	width: 100%;
	height: 175px;
}
.contact-left span{
	font-size:1.3em;
	display: block;
	padding: 0.5em 0;
	color:#09f;
}
.contact-in{
	padding: 0em 0 3em;
}
.contact {
	padding: 2em 0 3em;
}
.contact-left {
	padding: 0 2em 0 0;
}
.contact-right {
	padding: 0;
}

.scrollup{
    position:fixed;
	width:32px;
	height:32px;
    bottom:0px;
    right:20px;
	display:none;
	border-radius:;
    background: #009ACD;
	
}

a.scrollup {
	outline:0;
	text-align: center;
}

a.scrollup:hover,a.scrollup:active,a.scrollup:focus {
	opacity:1;
	text-decoration:none;
}
a.scrollup i {
	margin-top: 10px;
	color: #fff;
}
a.scrollup i:hover {
	text-decoration:none;
}

.bannerr{
	position: absolute;
	width: 120px;
	height: 300px;
	background:url(ads.gif);
	top: 55em;
}
#banner_l{
	left: 5px;
}
#banner_r{
	right: 5px;
}

.zindex{
	z-index: -999;
}

.bannerr a{
	display: block;
	width: 100%;
	height: 100%;
	border:0;
	text-indent: -9999px
}
.portfolio-theme {width:100%;height:40em;position:relative;border:1px solid #333;}

.portfolio-images img {width:100%;height:40em;position:absolute;left:0;right:0;z-index:1;}
.portfolio-images img:hover {opacity:0.8;}
.portfolio-caption {background-color:#333;color:#fff;position:absolute;z-index:999;top:1em;left:10em;width:400px;height:200px;font-size:3em;}

.portfolio-theme-two {width:100%;height:40em;position:relative;border:1px solid #333;}

.portfolio-images-two img {width:100%;height:40em;position:absolute;left:0;right:0;z-index:1;}
.portfolio-images-two img:hover {opacity:0.8;}
.portfolio-caption-two {background-color:#333;color:#fff;position:absolute;z-index:999;top:1em;left:10em;width:400px;height:200px;font-size:3em;}

/*cap*/

.img-box:hover .caption{
		opacity: 1;
		transform: translateY(-100px);
		-webkit-transform:translateY(-100px);
		-moz-transform:translateY(-100px);
		-ms-transform:translateY(-100px);
		-o-transform:translateY(-100px);

	}
	.port-box:hover .caption{
		opacity: 1;
		transform: translateY(300px);
		-webkit-transform:translateY(-100px);
		-moz-transform:translateY(-100px);
		-ms-transform:translateY(-100px);
		-o-transform:translateY(-100px);

	}
	
	.caption-text h3{
		text-transform: uppercase;
		font-size: 18px;padding:0px;
		
	}

	 .caption{
		cursor: pointer;
		position: absolute;
		opacity: 0;
		top:300px;
		z-index:999;
		background-color:#333;
		-webkit-transition:all 0.15s ease-in-out;
		-moz-transition:all 0.15s ease-in-out;
		-o-transition:all 0.15s ease-in-out;
		-ms-transition:all 0.15s ease-in-out;
		transition:all 0.15s ease-in-out;

	}
	


	
	
	.pic {
  height: 300px;
  width: 300px;
  overflow: hidden;
  margin: 20px;
  border: 10px solid white;

  -webkit-box-shadow: 5px 5px 5px #111;
  box-shadow: 5px 5px 5px #111;
  float: left;
}

.pic:hover {
  cursor: pointer;
}

/*GROW*/
.grow img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.grow img:hover {
  width: 400px;
  height: 400px;
}

/*SHRINK*/
.shrink img {
  height: 400px;
  width: 400px;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.shrink img:hover {
  width: 300px;
  height: 300px;
}

/*BLUR*/
.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.blur img:hover {
  -webkit-filter: blur(5px);
}

/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

/*SIDEPAN*/
.sidepan img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.sidepan img:hover {
  margin-left: -200px;
}

/*VERTPAN*/
.vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.vertpan img:hover {
  margin-top: -200px;
}

/*FOCUS*/
.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

/*B&W*/
.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.bw:hover {
  -webkit-filter: grayscale(100%);
}

/*DARKEN*/
.brighten img {
  -webkit-filter: brightness(-65%);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.brighten img:hover {
  -webkit-filter: brightness(0%);
}
.octa {
  height: 250px;
  overflow: hidden;
  position: absolute;
   -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  width: 250px;
}
.octa:after {
   background-image:url(samp3.jpg);
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
   -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hexagon {
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: #64C7CC;
  background-image:url(samp3.jpg);
  background-size:cover;
  margin: 86.60px 0;
  float:left;
}


.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 86.60px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 86.60px solid #64C7CC;
}