@charset "utf-8";
/* Table of Content
==================================================
	1.0 - Hexagon Images
	2.0 - Default Colors
	3.0 - Responsive
	4.0 - Skin Colors*/

	/*--------------------------------------------------------------
	1.0 - Hexagon Images
	--------------------------------------------------------------*/
	.dt-sc-hexagon-shape { position:relative; float:left; clear:both; width:100%; margin:110px 0px; }
	
	.dt-sc-hexagon-image { position:relative; width:48%; padding-bottom: 55.3%; margin:0 auto; overflow:hidden; /*visibility:hidden;*/ -webkit-transform: rotate(-60deg) skewY(30deg); -ms-transform: rotate(-60deg) skewY(30deg); transform: rotate(-60deg) skewY(30deg); }
	.dt-sc-hexagon-image span, .dt-sc-hexagon-image img { position:absolute; visibility:visible; }
	.dt-sc-hexagon-image span { width:100%; height:100%; text-align:center; overflow:hidden; -webkit-transform: skewY(-30deg) rotate(60deg); -ms-transform: skewY(-30deg) rotate(60deg); transform: skewY(-30deg) rotate(60deg); -webkit-backface-visibility:hidden; }
	.dt-sc-hexagon-image img { left:-100%; right:-100%; width: auto; height:100%; margin:0 auto; }
	
	.dt-sc-hexagon-image span:before { content:""; position:absolute; left:0px; right:0px; top:0px; margin:auto; width:100%; height:100%; z-index:1; }
	
	.dt-sc-hexagon-image-overlay { position:absolute; left:0px; right:0px; top:0px; bottom:0px; margin:auto; -webkit-transform: skewY(-30deg) rotate(60deg); -ms-transform: skewY(-30deg) rotate(60deg); transform: skewY(-30deg) rotate(60deg); -webkit-backface-visibility:hidden; z-index:1; text-align:center; width:100%; height:170px; }
	
	.dt-sc-hexagon-image-overlay h3 { font-size:25px; font-weight:300; }
	.dt-sc-hexagon-image-overlay h2 { font-size:38px; font-weight:normal; text-transform:uppercase; position:relative; }
	.dt-sc-hexagon-image-overlay h2:before { content:""; position:absolute; left:0px; right:0px; top:-5px; margin:auto; width:54%; height:65px; border-top:1px solid; border-bottom:1px solid; }
	
	.dt-sc-hexagons { float:left; width:100%; height:100%; margin:0px; padding:0px; position:absolute; top:0px; left:0px; text-align:center; }
	.dt-sc-hexagons li { position: absolute; width:180px; height:180px; margin: 86.60px 0; border:3px solid; display:inline-block; left:0px; right:0px; margin:auto; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%; }
	/*.dt-sc-hexagons li:before, .dt-sc-hexagons li:after, .dt-sc-hexagons li .dt-sc-hexagon-overlay:before, .dt-sc-hexagons li .dt-sc-hexagon-overlay:after { content: ""; position: absolute; z-index: 1; width:123px; height:123px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg); -ms-transform: scaleY(0.5774) rotate(-45deg); transform: scaleY(0.5774) rotate(-45deg); background-color: inherit; left: 23.9340px; }*/
	.dt-sc-hexagons li:before, .dt-sc-hexagons li .dt-sc-hexagon-overlay:before { top: -64.0660px; border-top:4.2426px solid; border-right:4.2426px solid; border-bottom:0px; border-left:0px; }
	.dt-sc-hexagons li:after, .dt-sc-hexagons li .dt-sc-hexagon-overlay:after { bottom: -64.0660px; border-bottom:4.2426px solid; border-left:4.2426px solid; border-top:0px; border-right:0px; }
	.dt-sc-hexagons li:hover, .dt-sc-hexagons li:hover:before, .dt-sc-hexagons li:hover:after { border-style:dashed; }
	
	.dt-sc-hexagons li span { position:absolute; left:0px; right:0px; top:0px; bottom:0px; margin:auto; font-size:68px; height:68px; text-align:center; z-index:9; }
	
	.dt-sc-hexagons li .dt-sc-hexagon-overlay { position:absolute; left:0px; right:0px; width:100%; height:100%; z-index:9; opacity:0; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%;}
	.dt-sc-hexagons li:hover .dt-sc-hexagon-overlay { opacity:1; }
	.dt-sc-hexagons li .dt-sc-hexagon-overlay:before, .dt-sc-hexagons li .dt-sc-hexagon-overlay:after { border:0px; }
	.dt-sc-hexagons li .dt-sc-hexagon-overlay p { position:absolute; left:0px; right:0px; top:0px; bottom:0px; margin:auto; z-index:9; font-size:18px; font-weight:bold; width:83%; text-align:center; height:50px; line-height:24px; }
	
	.dt-sc-hexagons li .dt-sc-hexagon-overlay:before { top: -62.0660px; left:27.934px; height:127px; }
	.dt-sc-hexagons li .dt-sc-hexagon-overlay:after { bottom: -62.0660px; left:24.934px; height:127px; width:122px; }
	
	.dt-sc-hexagons li:first-child { top:-58px; }
	.dt-sc-hexagons li:last-child { bottom:-58px; }
	.dt-sc-hexagons li:nth-child(2) { top:110px; left:-48%; }
	.dt-sc-hexagons li:nth-child(3) { top:110px; left:48%; }
	.dt-sc-hexagons li:nth-child(4) { top:426px; left:-48%; }
	.dt-sc-hexagons li:nth-child(5) { top:426px; left:48%; }
	
	.dt-sc-content-with-hexagon-shape { position:relative; width:490px; height:282.90px; margin:141.77px 0; display:inline-block; text-align:center; padding:0px 60px; }
	.dt-sc-content-with-hexagon-shape:before, .dt-sc-content-with-hexagon-shape:after { content:""; position:absolute; width:0; border-left:245px solid transparent; border-right:245px solid transparent; left:0px; }
	.dt-sc-content-with-hexagon-shape:before { bottom:100%; border-bottom:141.45px solid; }
	.dt-sc-content-with-hexagon-shape:after { top:100%; width:0; border-top:141.45px solid; }
	.dt-sc-content-with-hexagon-shape p, .dt-sc-content-with-hexagon-shape a { position:relative; z-index:9; }
	
	.dt-sc-content-with-hexagon-shape .hexagon-border { position:absolute; width:450px; height:259.81px; margin:144.34px 0; border-left:solid 1.8px; border-right:solid 1.8px; top:-134px; left:18px; }
	.dt-sc-content-with-hexagon-shape .hexagon-border:before, .dt-sc-content-with-hexagon-shape .hexagon-border:after { content:""; position:absolute; z-index:1; width:318.20px; height:318.20px; -webkit-transform:scaleY(0.5774) rotate(-45deg); -ms-transform:scaleY(0.5774) rotate(-45deg); transform:scaleY(0.5774) rotate(-45deg); background-color:inherit; left:65.2233px; }
	.dt-sc-content-with-hexagon-shape .hexagon-border:before { top:-161.0990px; border-top:solid 2.8284px; border-right:solid 2.8284px; }
	.dt-sc-content-with-hexagon-shape .hexagon-border:after { bottom:-161.0990px; border-bottom:solid 2.8284px; border-left:solid 2.8284px; }
	.dt-sc-content-with-hexagon-shape .dt-sc-button { font-size:20px; }	

	.dt-sc-single-hexagon { width: 181px; height: 100px; margin: 86.60px 0; border-left:3px solid; border-right:3px solid; background:#ffffff; display:inline-block; position:relative; }
	.dt-sc-single-hexagon:before, .dt-sc-single-hexagon:after, .dt-sc-single-hexagon .dt-sc-single-hexagon-overlay:before, .dt-sc-single-hexagon .dt-sc-single-hexagon-overlay:after { content: ""; position: absolute; z-index: 1; width:128px; height:128px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg); -ms-transform: scaleY(0.5774) rotate(-45deg); transform: scaleY(0.5774) rotate(-45deg); background-color: inherit; left: 23.9340px; }
	.dt-sc-single-hexagon:before, .dt-sc-single-hexagon .dt-sc-single-hexagon-overlay:before { top: -64.0660px; border-top:4.2426px solid; border-right:4.2426px solid; border-bottom:0px; border-left:0px; }
	.dt-sc-single-hexagon:after, .dt-sc-single-hexagon .dt-sc-single-hexagon-overlay:after { bottom: -64.0660px; border-bottom:4.2426px solid; border-left:4.2426px solid; border-top:0px; border-right:0px; }
	.dt-sc-single-hexagon:hover, .dt-sc-single-hexagon:hover:before, .dt-sc-single-hexagon:hover:after { border-style:dashed; }
	
	.dt-sc-single-hexagon span { position:absolute; left:0px; right:0px; top:0px; bottom:0px; margin:auto; font-size:68px; height:68px; text-align:center; z-index:9; color:rgba(0, 0, 0, 0.4); }
	
	.dt-sc-single-hexagon .dt-sc-single-hexagon-overlay { position:absolute; left:0px; right:0px; width:100%; height:100%; z-index:9; opacity:0; color:#ffffff; }
	.dt-sc-single-hexagon:hover .dt-sc-single-hexagon-overlay { opacity:1; }
	.dt-sc-single-hexagon .dt-sc-single-hexagon-overlay:before, .dt-sc-single-hexagon .dt-sc-single-hexagon-overlay:after { border:0px; }
	.dt-sc-single-hexagon .dt-sc-single-hexagon-overlay p { position:absolute; left:0px; right:0px; top:0px; bottom:0px; margin:auto; z-index:9; font-size:18px; font-weight:bold; width:83%; text-align:center; height:50px; line-height:24px; }
	
	.dt-sc-single-hexagon .dt-sc-single-hexagon-overlay:before { top: -61.0660px; left:23.934px; height:127px; }
	.dt-sc-single-hexagon .dt-sc-single-hexagon-overlay:after { bottom: -62.0660px; left:24.934px; height:127px; width:122px; }
	
	.dt-sc-single-hexagon.hexagon-left-margin { margin-left:13px; }
	
	.dt-sc-hexagon-title h3 { font-size:25px; font-weight:300; color:#000000; }
	.dt-sc-hexagon-title h2 { font-size:38px; font-weight:normal; text-transform:uppercase; position:relative; }
	.dt-sc-hexagon-title h2:before { content:""; position:absolute; left:0px; right:0px; top:-5px; margin:auto; width:25%; height:65px; border-top:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8; }	
	
	
	
	/*--------------------------------------------------------------
	2.0 - Default Colors
	--------------------------------------------------------------*/
	.dt-sc-hexagon-image span, .dt-sc-hexagon-image-overlay h3, .dt-sc-hexagon-image-overlay h2, .dt-sc-hexagons li .dt-sc-hexagon-overlay, .dt-sc-content-with-hexagon-shape { color:#ffffff; }	
	.dt-sc-hexagons li span { color:rgba(0, 0, 0, 0.4); }
	
	.dt-sc-hexagon-image-overlay h2:before, .dt-sc-content-with-hexagon-shape .hexagon-border, .dt-sc-content-with-hexagon-shape .hexagon-border:before, .dt-sc-content-with-hexagon-shape .hexagon-border:after { border-color:#ffffff; }
	
	.dt-sc-hexagons li { background-color:#ffffff; }
	
	
	/*--------------------------------------------------------------
	4.0 - Skin Colors
	--------------------------------------------------------------*/
	.dt-sc-hexagon-title h2 span { color:#624dd6; }
	
	.dt-sc-hexagon-image span:before { background:rgba(103, 58, 183, 0.9); }
	
	.dt-sc-hexagons li .dt-sc-hexagon-overlay, .dt-sc-content-with-hexagon-shape, .dt-sc-single-hexagon .dt-sc-single-hexagon-overlay { background:#624dd6; }
	
	.dt-sc-hexagons li:hover, .dt-sc-hexagons li:hover:before, .dt-sc-hexagons li:hover:after, .dt-sc-hexagons li, .dt-sc-hexagons li:before, .dt-sc-hexagons li .dt-sc-hexagon-overlay:before, .dt-sc-hexagons li:after, .dt-sc-hexagons li .dt-sc-hexagon-overlay:after, .dt-sc-single-hexagon:hover, .dt-sc-single-hexagon:hover:before, .dt-sc-single-hexagon:hover:after, .dt-sc-single-hexagon, .dt-sc-single-hexagon:before, .dt-sc-single-hexagon .dt-sc-single-hexagon-overlay:before, .dt-sc-single-hexagon:after, .dt-sc-single-hexagon .dt-sc-single-hexagon-overlay:after { border-color:#624dd6; }
	
	.dt-sc-content-with-hexagon-shape:after { border-top-color:#624dd6; }
	.dt-sc-content-with-hexagon-shape:before { border-bottom-color:#624dd6; }