#sp-main-body {
    padding: 0px 0 !important;
}

#offcanvas-toggler >i {
    color: #424242 !important;
    font-size: 4vw;
	float: right;
	padding: 1vw;
	position: absolute;
	right: 2vw;
	top: 0vw;
	display:none;

}

#offcanvas-toggler {
  position: fixed; right: 0vw; top: 0vw;
  z-index:9999;
}

#maximenuck104 li:hover > ul {
	height: 100%;
	transition: 1.5s ease;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li ul {
	height: 0px;
	opacity: 0.6;
}


.slide-top-menu .offcanvas-menu {
  	right: 0;
 	background-color: rgba(0, 0, 0, 0.5) !important;
  	visibility: visible;
  	height: 100%;
}

.maximenuckv ul > li >a:before {
	/*font-family: FontAwesome;*/
	content: none !important;
	/*margin-right: 8px;*/
}

a {
  color: white !important;
}

/*@font-face {
    font-family: "sitka";
    src: url('/fonts/sitkasmall.ttf');
    font-family: "yugothic";
    src: url('/fonts/yugothib.ttf');*/
 }


<style type="text/css">
.picColor:hover {
	width:320px;
	height:240px;
	background: red;
	border:5px solid #000000;
}

.grad1 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
    width: 100%;
    opacity: 0.6;
    background: linear-gradient(to top right, #0091ff, #c2c1c2); 
}

.image-container {
	left: 0;
	position: relative;
	width: 100%;
	}

.image-container img {
	display: block;
	width: 100%;
	height: auto;
}


.image-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0.7;
	transition: .5s ease;
	background-color: #008CBA;
}

.image-filter {
	background-color: rgba(0,0,0,1);
	opacity: 0.7;
	transition: 1.5s ease;
	z-index: 500;
	width: 100%;
	height:600px;
	min-height: 200px;
}

.image-tile {
	
}


.overlay-text {
	color: white;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.image-container:hover .image-overlay {
  opacity: 0.7;
}


.rotater{
	float: center;
}

.icons {
	display: -webkit-box;
	display: -ms-webkit-box;
	position: absolute; top:-5vw; left:8vw;
}

.icons .btn {
	position: relative;
	font-size: 12vw;
	top:15vw;
	transition:0.2s;
	color: white !important;
	font-family: Segoe UI;
	text-transform: lowercase;
	z-index: 9999;
}
.icons .unbtn {
	position: relative;
	font-size: 12vw;
	top:24vw;
	left: 3.5vw;
	transition:0.2s;
	color: white !important;
	font-family: corbel;
	text-transform: uppercase;
}

/*.icons .btn .vertical-text {
	font-family: Segoe UI;
	color: white;
	position: absolute;
	font-size: 2vw;
	font-weight: bold;
	word-spacing: 7vw;
	opacity: 0.1;
	transition: 0s;
    top: 5px;
    left: 1vw;
		text-orientation: upright;
		-webkit-writing-mode: vertical-lr;
}*/

.icons .horizontal-text {
	font-family: Segoe UI;
	color: white;
	position: absolute;
	font-size: 2.5vw;
	font-weight: lighter;
	word-spacing: 3vw;
	opacity: 0.0;
	transition: 0.5s;
    /*top: 10vw;*/
    top: 25vw;
    text-transform: lowercase;
    /*left: 2vw;*/
}

.icons .btn:hover {
	font-size: 12vw;
	transition: .5s ease;
	transform:translate(0,5vw);
}

/*.icons .btn .vertical-text:hover {
transition: .5s ease;
	opacity: 1;

}*/

/*.icons .btn:hover > .vertical-text {
  transition: .5s ease;
  opacity: 1;
}*/

.icons .btn:hover ~.horizontal-text {
  transition: .5s ease;
  transition-delay: 0.1s;
  opacity: 1;
  transform:translate(0,5vw);
}


.icons .null {
	position: relative;
	height: 30vw;
	
	border: 2px solid red;
	
}

/*.icons .btn:hover {
	font-size: 12vw;
	transition: .5s ease;
	transform:translate(0,5vw);*/
}
/*.icons .btn .vertical-text:hover {
transition: .5s ease;
	opacity: 1;

}*/

/*.icons .btn:hover > .vertical-text {
  transition: .5s ease;
  opacity: 1;*/
}

.null:hover .btn {
	font-size: 12vw;
	transition: .5s ease;
	transform:translate(0,5vw);
}


.null:hover > .horizontal-text {
  transition: .5s ease;
  transition-delay: 0.1s;
  opacity: 1;
}


.test-para-bg01 {
	position: relative;
	/*min-height: 200px;*/
	min-height: 50vh;
	height: 600px;
	width: 100%;
	background: transparent;
	filter:sepia(80%);
	-webkit-filter: sepia(80%);
	/*background-image: url("/iconic3d2017/images/Iconic3d_GEO01.jpg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-attachment: fixed;
	background-size: cover;*/
}

/*test-para-bg01 a {
  width: 100%;
  display: block;
  min-height: 400px;
}*/

#sp-title .sp-module {
  margin-top: 0 !important;
}

video {
  display: block;
}

.test-para-bg02 {
	position: relative;
	min-height: 200px;
	height: 600px;
	width: 100%;
	background: transparent;
}

.test-para-bg03 {
	position: relative;
	min-height: 200px;
	height: 600px;
	width: 100%;
	background: transparent;
}

.test-para-bg04 {
	position: relative;
	min-height: 200px;
	height: 600px;
	width: 100%;
	background: transparent;
}

.test-para-bg05 {
	position: relative;
	min-height: 200px;
	height: 600px;
	width: 100%;
	background: transparent;
}


.para-text {
	font-family: Segoe UI;
	font-weight: 400; 
	padding: 0rem;
	color: white;
	font-size: 10vw;
	position: absolute;
	top: 40%;
	left: 15%;
	right: 5%;
	max-width: 100%;
	text-transform: lowercase;
}

.image-filter:hover {
	/*filter: sepia(10%);*/
	opacity: 0;
	transition: 0.5s ease;
}

.test-para-bg02 .para-text:hover > .image-filter {
	/*filter: sepia(10%);*/
	opacity: 0;
	transition: 0.5s ease;
}

.hexagon {
	width: 15%;
	display: inline-block;
	transition: 0.5s;
	filter: grayscale(50%);
}
.hexagon2 {
	width: 15%;
	
	transition: 0.5s;
	filter: grayscale(50%);
}

.hexagon:hover {
	width:15.2%;
	transition: 0.5s;
	filter: grayscale(0%);
}

.playbtn {
	position:absolute;
	bottom: 4vw;
	right: 2vw;
	z-index: 500;
}

.singleletter {
	position: relative;
	font-size: 5vw;
	font-family: Segoe UI;
	}


.circletab {
	position:relative;
}

.banner {
	color: white;
	font-family: Segoe UI;
	font-size: 2vw;
    padding: 1vw;
    text-align: left;
    width: 100%;
    min-height: 20px;
    background: #53a4da;
    border: 2px solid black;
}

.circlesbg {
  position: relative;
    z-index: 0;
    min-height: 200px;
	height: 600px;
	width: 100%;
 }

/*@media (max-width: 767px) {
.icons .btn {
	font-size: 5rem;
}
}*/

.jarallax {
    position: relative;
    min-height: 200px;
	height: 35vw;
	width: 100%;
	background: transparent;
}

.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    /* support for plugin https://github.com/bfred-it/object-fit-images*/
    font-family: 'object-fit: cover;';
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
}

.jarallaxiconic {
    position: relative;
    z-index: 0;
    min-height: 200px;
	height: auto;
	width: 100%;
}

.jarallax-container {
	width: 100%;
	height: 1400px;
}

.demo-gap-half {
    display: table;
    width: 100%;
}

.demo-gap-half > div {
    display: table-cell;
    width: 50%;
}

.demo-tabs .jarallax {
    position: relative;
    min-height: 50vw;
	height: auto;
	width: 100%;
	background: transparent;
}

.dj-simple-contact-form {
    padding: 2vw 10vw 5vw 10vw;
   height: 100vh;
}
.sp-module:first-child {
    margin-top: 0;
     background-image: url("/iconic3d2017/images/TechBG05b.jpg");
     background-repeat: no-repeat;
     background-size: 100%;
}

.dj-simple-contact-form-introtext {
	color: white;
	font-family: Segoe UI;
	font-weight: bold;
	font-size: 2vw !important;
}

.testtabs1 {
	display: grid;
	grid-template-columns: 340px 10px minmax(35vw,400px);
	grid-gap: 2px;
    padding: 5px;
    border: 2px solid rgba(255, 2, 0, 0.8);
    align-items: center;

        
}

.testtabs2 {
	display: grid;
	grid-template-columns: 440px 10px 500px 10px;
	grid-gap: 2px;
    padding: 5px;
    border:2px solid rgba(10, 30, 108, 0.8);
    align-items: center;
    /*margin-top: -150px*/
    position: relative;

}

.testtabs3 {
	display: grid;
	grid-template-columns: 60px 10px 600px;
	grid-gap: 2px;
    padding: 5px;
    border: 1px solid rgba(130, 220, 10, 0.8);
    align-items: center;    
    margin-top: -300px

}


.myletter {
	font-size: 55px;
	font-family: Segoe UI;
}

.mycircle1 {
	width: auto;
	z-index: 1000;

}

.mycircle2 {
	width: auto;
	z-index: 100;

}

.mycircle3 {
	width: auto;
	z-index: 10;

}

.gridcontainer{
	width: 100%;
}

.wrapper {
  height: 130vh;
  min-height: 1600px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 30px 180px 140px 370px 90px 160px 60px;
  grid-auto-rows: 220px 180px 60px 320px 340px;
  /*grid-auto-rows: 19.6% 16.1% 5.4% 28.6% 30.4%;
  grid-template-columns: 2.9% 17.5% 13.6% 35.9% 8.7% 15.5% 5.8%;*/
  border: 0px solid rgba(130, 220, 10, 0.8);
  transform-origin: top left;
  transform: scale (30%);
}
.one {
  grid-column: 2;
  grid-row: 2;
  text-align: right;
  vertical-align: bottom;
}
.two { 
  grid-column: 3 / 6;
  grid-row: 1 / 3;
  z-index: 100;
}
.three {
  grid-column: 4 / 7;
  grid-row: 2 / 5;  
  z-index: 400;
}
.four {
  grid-column: 7;
  grid-row: 4;
}
.five {
  grid-column: 1;
  grid-row: 5;
}
.six {
  grid-column: 2 / 5;
  grid-row: 4 / 6;
  z-index: 100;
}

.wrapper div {
	font-size: 50px;
	color: red;
}

@media (max-width: 768px) {
  .wrapper {
  grid-template-columns: 10px 60px 47px 123px 30px 53px 20px;
  grid-auto-rows: 73px 60px 20px 73px 113px;
}
.wrapper div {
	font-size: 25px;
	
}
/*.testtabs1 {
	grid-template-columns: 50px 10px 166px;
}
.testtabs2 {
	grid-template-columns: 90px 10px 175px 10px;
	margin-top: -60px
}
.testtabs3 {
	grid-template-columns: 0px 10px 200px;;
	margin-top: -120px
}
.myletter {
	font-size: 25px;
}*/
}