/* shapes */
@font-face {
	font-family: circleI;
  src: url(f/social.ttf);
}

@font-face {
	font-family: mixI;
  src: url(f/social2.ttf);
}

@font-face {
	font-family: sblank;
  src: url(f/social3.ttf);
}

@font-face {
  font-family: 'Icons';  
src: url('f/webhostinghub-glyphs.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


.cf
{
	border-radius: 50%;
	background-color: #191919;
	color: #F4F4F4;
	font-family: sblank;
	padding: 5px;
	height: 30px;
	width: 30px;
	text-align: center;
	vertical-align: middle;
}

.cb
{
	border-radius: 50%;
	font-family: sblank;
	padding: 5px;
	border: 2px solid #191919;
}

.sf
{
	border-radius: 3px;
	background-color: #191919;
	color: #F4F4F4;
	font-family: sblank;
	padding: 5px;
}

.sb
{
	border-radius: 3px;
	font-family: sblank;
	padding: 5px;
	border: 2px solid #191919;
}


.eshape, .epd
{
	display: inline-block;
	font-size: 18px;
	position: relative;
	font-style: normal;
}

.epd-user:before
{
	content: "\f133";
	font-family: 'Icons';
}

.epd-user-add:before
{
	content: "\f3da";
	font-family: 'Icons';
}

.epd-user-less:before
{
	content: "\f3db";
	font-family: 'Icons';
}

.epd-user-group:before
{
	content: "\f134";
	font-family: 'Icons';
}

.epd-logoff:before
{
	content: "\f11d";
	font-family: 'Icons';
}

.epd-lock:before
{
	content: "\f0be";
	font-family: 'Icons';
}


.epd-inr:before
{
	content: "₹";
}
.epd-copy:before
{
content: "\00A9";
}

.epd-reg:before
{
content: "\00ae";
}

.epd-deg-celsius:before
{
content: "\25B6";
}

.epd-deg-fahrenheit:before
{
content: "\2109";
}

.epd-infinity:before
{
content: "\221E";
}

.epd-tel:before
{
content: "\260E";
}

.epd-tel-b:before
{
content: "\260F";
}

.epd-recycle:before
{
content: "\267B";
}

.epd-recycle-b:before
{
content: "\2672";
}

.epd-recycle-paper:before
{
content: "\267C";
}

.epd-recycle-paper-b:before
{
content: "\267D";
}

.epd-edit:before
{
content: "\270E";
}

.epd-star-s:before
{
content: "\2721";
}

.epd-star:before
{
content: "\272D";
}

.epd-star-b:before
{
content: "\2729";
}

.epd-cur-cent:before
{
content: "\00A2";
}

.epd-cur-pound:before
{
content: "\00A3";
}

.epd-cur-yen:before
{
content: "\00A5";
}

.epd-2left-angle:before
{
content: "\00AB";
}

.epd-2right-angle:before
{
content: "\00BB";
}

.epd-triangle-bullet:before
{
content: "\2023";
}

.epd-left-arrow:before
{
content: "\2190";
}

.epd-up-arrow:before
{
content: "\2191";
}

.epd-right-arrow:before
{
content: "\2192";
}

.epd-down-arrow:before
{
content: "\2193";
}

.epd-nw-arrow:before
{
content: "\2196";
}

.epd-ne-arrow:before
{
content: "\2197";
}

.epd-se-arrow:before
{
content: "\2198";
}

.epd-sw-arrow:before
{
content: "\2199";
}

.epd-down-arrow:before
{
content: "\2193";
}

.epd-lr-arrow:before
{
content: "\2194";
}

.epd-ud-arrow:before
{
content: "\2195";
}

.epd-wvl-arrow:before
{
content: "\219C";
}

.epd-wvr-arrow:before
{
content: "\219D";
}

.epd-tlr-arrow:before
{
content: "\21A2";
}

.epd-tll-arrow:before
{
content: "\21A3";
}

.epd-undo-arrow:before
{
content: "\21B6";
}

.epd-redo-arrow:before
{
content: "\21B7";
}

.epd-dbll-arrow:before
{
content: "\21D0";
}

.epd-dblr-arrow:before
{
content: "\21D2";
}

.epd-triangle:before
{
content: "\25B6";
}

.epd-triangle-b:before
{
content: "\25B7";
}

.epd-sun:before
{
content: "\2600";
}

.epd-cloud:before
{
content: "\2601";
}

.epd-umbrella:before
{
content: "\2602";
}

.epd-pointing-hand:before
{
content: "\261B";
}

.epd-heart:before
{
content: "\2764";
}

.epd-truck:before
{
content: "\26DF";
}

.epd-check-mark-boxed:before
{
content: "\2705";
}

.epd-plane:before
{
content: "\2708";
}

.epd-envelope:before
{
content: "\2709";
}

.epd-write:before
{
content: "\270D";
}

.epd-check:before
{
content: "\2713";
}


.epd-cross:before
{
content: "\2715";
}

.epd-cross-boxed:before
{
content: "\274E";
}

.epd-ballot:before
{
content: "\2717";
}

.epd-earphone:before
{
content: "\260A";
}

.epd-smile:before
{
content: "\263B";
}

.epd-smile-b:before
{
content: "\263A";
}

.epd-tool:before
{
content: "\2692";
}

.epd-settings:before
{
content: "\2699";
}

.epd-fb-cb:before
{
content: "f";
font-family: circleI;
}

.epd-twt-cb:before
{
content: "t";
font-family: circleI;
}

.epd-in-cb:before
{
content: "i";
font-family: circleI;
}

.epd-yt-cb:before
{
content: "y";
font-family: circleI;
}

.epd-pintrest-cb:before
{
content: "p";
font-family: circleI;
}

.epd-android-cb:before
{
content: "i";
font-family: circleI;
}

.epd-blogger-cb:before
{
content: "b";
font-family: circleI;
}

.epd-insta-cb:before
{
content: "c";
font-family: circleI;
}

.epd-wp-cb:before
{
content: "e";
font-family: circleI;
}

.epd-apple-cb:before
{
content: "h";
font-family: circleI;
}

.epd-tumbler-cb:before
{
content: "h";
font-family: circleI;
}

.epd-master-card-cb:before
{
content: "n";
font-family: circleI;
}

.epd-vk-cb:before
{
content: "q";
font-family: circleI;
}

.epd-feed-cb:before
{
content: "r";
font-family: circleI;
}

.epd-g-chrome-cb:before
{
content: "u";
font-family: circleI;
}

.epd-calling-cb:before
{
content: "v";
font-family: circleI;
}

.epd-window-cb:before
{
content: "w";
font-family: circleI;
}

.epd-redit-cb:before
{
content: "x";
font-family: circleI;
}

.epd-messenger-cb:before
{
content: "z";
font-family: circleI;
}

.epd-visa-cb:before
{
content: "B";
font-family: circleI;
}

.epd-send-cb:before
{
content: "D";
font-family: circleI;
}

.epd-paypal-cb:before
{
content: "C";
font-family: circleI;
}

.epd-gmail-cb:before
{
content: "E";
font-family: circleI;
}

.epd-camera-cb:before
{
content: "M";
font-family: circleI;
}

.epd-drupal-cb:before
{
content: "S";
font-family: circleI;
}

.epd-html5-cb:before
{
content: "W";
font-family: circleI;
}

.epd-location-cb:before
{
content: "#";
font-family: circleI;
}

.epd-music-cb:before
{
content: "*";
font-family: circleI;
}

.epd-thumb-up-cb:before
{
content: "_";
font-family: circleI;
}

.epd-download-cb:before
{
content: "[";
font-family: circleI;
}

.epd-shopify-cb:before
{
content: ";";
font-family: circleI;
}

.epd-amazon-cb:before
{
content: ",";
font-family: circleI;
}

.epd-www-cb:before
{
content: "?";
font-family: circleI;
}

.epd-twt:before
{
content: "b";
font-family: mixI;
}

.epd-envelope-opn:before
{
content: "h";
font-family: mixI;
}

.epd-www:before
{
content: "i";
font-family: mixI;
}

.epd-yt:before
{
content: "y";
font-family: sblank;
}

.epd-skype:before
{
content: "k";
font-family: mixI;
}

.epd-blogger-sf:before
{
content: "l";
font-family: mixI;
}

.epd-feed:before
{
content: "r";
font-family: mixI;
}

.epd-tumbler:before
{
content: "t";
font-family: mixI;
}

.epd-fb-sf:before
{
content: "w";
font-family: mixI;
}

.epd-fb:before
{
content: "F";
font-family: sblank;
}

.epd-paypal:before
{
content: "P";
font-family: sblank;
}

.epd-redit:before
{
content: "R";
font-family: sblank;
}

.epd-wp:before
{
content: "W";
font-family: sblank;
}

.epd-yahoo:before
{
content: "Y";
font-family: sblank;
}

.epd-blogger:before
{
content: "b";
font-family: sblank;
}

.epd-music:before
{
content: "i";
font-family: sblank;
}

.epd-in:before
{
content: "l";
font-family: sblank;
}

.epd-twt:before
{
content: "t";
font-family: sblank;
}

.epd-w3:before
{
content: "x";
font-family: sblank;
}

.epd-apple:before
{
content: "2";
font-family: sblank;
}
.epd-location:before
{
content: "$";
font-family: sblank;
}

.hrt {
      position: relative;
      width: 100px;
      height: 90px;
    }
    .hrt:before,
    .hrt:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    .hrt:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }
    
  .tri-dn {
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-top: 50px solid var(--color-def-light);
    }

.tri-up {
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 50px solid var(--color-def-light);
    }

.tri-left {
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 50px solid transparent;
      border-top: 30px solid var(--color-def-light);
    }

.tri-right {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 30px solid transparent;
      border-top: 30px solid var(--color-def-light);
    }

.tri-tl {
      width: 0;
      height: 0;
      border-right: 50px solid transparent;
      border-top: 50px solid var(--color-def-light);
    }

.tri-tr {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-top: 50px solid var(--color-def-light);
    }

.tri-bl {
      width: 0;
      height: 0;
      border-right: 50px solid transparent;
      border-bottom: 50px solid var(--color-def-light);
    }

.tri-br {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-top: 50px solid var(--color-def-light);
    }
  
.cur-ar {
      position: relative;
      width: 0;
      height: 0;
      border-top: 9px solid transparent;
      border-right: 9px solid var(--color-def-dark);
      transform: rotate(10deg);
    }
    .cur-ar:after {
      content: "";
      position: absolute;
      border: 0 solid transparent;
      border-top: 3px solid var(--color-def-dark);
      border-radius: 20px 0 0 0;
      top: -12px;
      left: -9px;
      width: 12px;
      height: 12px;
      transform: rotate(45deg);
    }

.star6 {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid var(--color-def-dark);
      position: relative;
    }
    .star6:after {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 100px solid var(--color-def-dark);
      position: absolute;
      content: "";
      top: 30px;
      left: -50px;
    }

.star5 {
      margin: 50px 0;
      position: relative;
      display: block;
      color: var(--color-danger-red);
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid var(--color-danger-red);
      border-left: 100px solid transparent;
      transform: rotate(35deg);
    }
    .star5:before {
      border-bottom: 80px solid var(--color-danger-red);
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -45px;
      left: -65px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }
    .star5:after {
      position: absolute;
      display: block;
      color: var(--color-danger-red);
      top: 3px;
      left: -105px;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid var(--color-danger-red);
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

.penta {
      position: relative;
      width: 54px;
      box-sizing: content-box;
      border-width: 50px 18px 0;
      border-style: solid;
      border-color: var(--color-forest-green) transparent;
    }
    .penta:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: -85px;
      left: -18px;
      border-width: 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent var(--color-forest-green);
    }

.hex {
  width: 100px;
  height: 57.735px;
  background: var(--color-forest-green);
  position: relative;
}
.hex::before {
  content: "";
  position: absolute;
  top: -28.8675px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 28.8675px solid var(--color-forest-green);
}
.hex::after {
  content: "";
  position: absolute;
  bottom: -28.8675px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 28.8675px solid var(--color-forest-green);
}

 .octa {
      width: 100px;
      height: 100px;
      background: var(--color-forest-green);
      position: relative;
    }
    .octa:before {
      content: "";
      width: 100px;
      height: 0;
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 29px solid var(--color-forest-green);
      border-left: 29px solid #eee;
      border-right: 29px solid #eee;
    }
    .octa:after {
      content: "";
      width: 100px;
      height: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 29px solid var(--color-forest-green);
      border-left: 29px solid #eee;
      border-right: 29px solid #eee;
    }

 
  
 .circle-semi-lc {
    width: 100px;
    height: 200px;
    background-color: #CCC;
    border-bottom-right-radius: 100px;
    border-top-right-radius: 100px;
    border-left: 0;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.circle-semi-rc {
    width: 100px;
    height: 200px;
    background-color: #CCC;
    border-bottom-left-radius: 100px;
    border-top-left-radius: 100px;
    border-right: 0;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sqr {
  width: 100px;
  height: 100px;
  background: var(--color-def-light);
}

.rect {
  width: 300px;
  height: 180px;
  background: var(--color-def-light);
}

.circ {
  width: 150px;
  height: 150px;
  background: var(--color-def-light);
  border-radius: 50%
}

.ovl {
      width: 200px;
      height: 100px;
      background: var(--color-def-light);
      border-radius: 100px / 50px;
    }

:root
{
	--color-def-dark:#1D1D1D;
	--color-def-light:#E8E8E8;
	--color-def-mid-light:#8B8A8A;
	--color-sky:#00CCFF;	
	--color-sky-dark:#00b8e6;	
	--def-font-size:16;
	--color-forest-green:forestgreen;
	--color-green:#2DAD00;
	--color-dark-red:darkred;
	--color-danger-red:#C40307;
	--color-gold:gold;
	--color-black90:#0F0F0F;
	--color-black60:#404040;
}