html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}    
body { 
    font-family: Enigmatic;
}
img{
    max-width: 100%;
}
a{
    text-decoration: none;
}
/*HOMEPAGE BG IMAGE MOVING*/
#home{
    position: relative;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
	font-size:18px;
    background-image: url(img/BackgroundHome.jpg);
    /*background: #121212 url('https://64.media.tumblr.com/d43861d2c33ea3de9ccee60c8fdb6c2c/e4b6ceb29c39fc5b-6d/s640x960/3839edfc02bc556c2d3142ea2c33051bb3cee496.gifv') repeat 0 0;
	-webkit-animation: 10s linear 0s normal none infinite animate;
	-moz-animation: 10s linear 0s normal none infinite animate;
	-ms-animation: 10s linear 0s normal none infinite animate;
	-o-animation: 10s linear 0s normal none infinite animate;
	animation: 25s linear 0s normal none infinite animate;*/
 
}
 
@-webkit-keyframes animate {
	from {background-position:0 0;}
	to {background-position: 500px 0;}
}
 
@-moz-keyframes animate {
	from {background-position:0 0;}
	to {background-position: 500px 0;}
}
 
@-ms-keyframes animate {
	from {background-position:0 0;}
	to {background-position: 500px 0;}
}
 
@-o-keyframes animate {
	from {background-position:0 0;}
	to {background-position: 500px 0;}
}
 
@keyframes animate {
	from {background-position:0 0;}
	to {background-position: 500px 0;}
}
/*animated letters*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

html, body{
  height: 100%;
  font-weight: 800;
}

svg {
    display: block;
    font: 7.5em 'Montserrat';
    width: 960px;
    height: 1200px;
    margin: 0 auto;
}

.text-copy {
    fill: none;
    stroke: #006666;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 6.5s infinite linear;
}

.text-copy:nth-child(1){
    stroke:  #006666;
    animation-delay: -1s;
}

.text-copy:nth-child(2){
    stroke: #003300  ;
    animation-delay: -2s;
}

.text-copy:nth-child(3){
    stroke: #5F9EA0;
    animation-delay: -3s;
}

.text-copy:nth-child(4){
    stroke: #006666;
    animation-delay: -4s;
}

.text-copy:nth-child(5){
    stroke: #003300;
    animation-delay: -5s;
}

@keyframes stroke-offset{
    100% {stroke-dashoffset: -35%;}
}

/*Back to top button*/
.cd-top.cd-is-visible {
/* the button becomes visible */
    visibility: visible;
    opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
    opacity: .5;
}
.menu{
    position: fixed;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 15%;
    opacity: .99;
    z-index: 2000;
}
.logo{
    position: absolute;
    height: 60%;
    width: 20%;
    
    background-image: url(img/favicon.png);
    background-size:25%;
    background-position: left;
    background-repeat: no-repeat;
}
.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.topnav li {
    float:right;
    padding: 2em;
    padding-top: 8px;
}

.topnav li a {
    display: inline-block;
    color: #3d702e;
    text-align: center;
    padding: -13px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 1.3rem;
}
.topnav li a:hover{
    color: #CCFF99;
}
.topnav li.icon {
    display: none;
}
/*menu responsiveness*/
.topnav.responsive {
    position: relative;
    background-color: black;
    height: 700%;
    width: 100%;
    opacity: 0.89;
    }
.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
    }
.topnav.responsive li {
    float: none;
    display: inline;
    }
.topnav.responsive li a {
    text-align:center;
    display: block;
    font-size: 50px;
    padding:15px;
    }
.homeheader{
    position: absolute;
    width: 50%;
    height: 70%;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 4.5rem;
}
.homeheader h1{
    padding: 2px;
    font-size: 4.3em;
    color: #EEEFF7;
}
.homeheader span{
    font-size: 1.5rem;
}

#gallery{
    position: relative;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    background-color: #1C1D21;
}
.grid {
	position: relative;
	clear: both;
	margin: 0 auto;
	padding: 0;
	width: 100%;
    height: 100%;
	list-style: none;
	text-align: center;
}
/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 0;
	width: 25%;
    height: 33.3%;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	opacity:1;
}

figure.effect-jazz {
    background: rgba(0,0,0,1);
}
figure.effect-jazz img{
}
figure.effect-jazz figcaption::after,
figure.effect-jazz img,
figure.effect-jazz p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}
figure.effect-jazz h2,
figure.effect-jazz p {
	opacity: 1;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
}

figure.effect-jazz h2 {
	padding-top: 80%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-jazz p {
	padding: 0.5em 2em;
	text-transform: none;
	font-size: 0.85em;
	opacity: 0;
}

figure.effect-jazz:hover img {
	opacity: 0.7;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}
.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width: 50%;
	min-width: 50%;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.md-show {
	visibility: visible;
}
.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(0,0,0,0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.md-show ~ .md-overlay {
	opacity: 1;
}
.md-content {
	color: #1C1D21;
	background: rgb(255,255,255,0.9);
	position: relative;
	margin: 0 auto;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    padding: 25px;
}
.md-content p {
    position: relative;
    text-align: center;
    line-height: 28px;
    font-size: 18px;
}
.md-content p a{
    color: #008B8B;
}
.mid-content p a:hover{
    color:aquamarine;
}
.md-content img {
    max-width: 100%;
    max-height: 50%;
}
.md-close{
    position: fixed;
    cursor: pointer;
    top: 1%;
    right: 2%;
    width: 10%;
    height: 10%;
    font-weight: 800;
    background-image: url(img/close.png);
    background-size: cover;
}
/* Effect */
.md-effect-1 .md-content {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-1 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.choosedev,.choosemot{
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size:100%;
    background-position: center;
    /*background-image: url(img/choosebg.jpg);*/
    background-repeat: no-repeat;
    
}

/* GLOWING UNDERLINED TEXT*/
@import url(https://fonts.googleapis.com/css?family=Quando);
*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
* {margin:0;padding:0;border:0 none;position: relative; outline: none;
}
html, body {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 300;
  width: 100%;
}
h2, h3 {
  width: 100%;
  line-height: 110px;
  font-size: 3rem;
  font-weight: normal;
  text-align: center;
  color: rgba(0,0,0,.4);
  margin: 9.5rem auto 0;
}

h2 > a, h3 > a {
  text-decoration: none;
  color: lightslategrey;
  z-index: 1;
}

h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .20s linear;
}
h2 > a:hover:before,
h2 > a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}
.dos > a:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  border: 1px solid #fff;
  bottom: -2px;
  left: 0;
  background: #fff;
  border-radius: 5px;
  opacity: 0;
  transform: scalex(0);
  transition: .5s;
}
.dos.bis > a:after {
  opacity: .05;
  transform: scalex(1);
}
.dos:hover > a:after {
  opacity: .15;
  transform: scalex(1);
}
.dos.bis > a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #FADD40;
}
.dos > a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #008B8B;
}


@keyframes hover-v {
  0% {
      transform: scaleX(0);
      height: 5px;
     }
  45% {   
      transform: scaleX(1.05);
      height: 5px;
     }
  55% {height: 5px;}
  100% {
      transform: scaleX(1.05);
      height: 3.8rem;
     }
}
@keyframes no-hover-v {
  0% {
      transform: scaleX(1.05);
      height: 3.8rem;
     }
  45% {height: 5px;}
  55% {   
      transform: scaleX(1.05);
      height: 5px;
      opacity: 1;
     }
  
  100% {
      transform: scaleX(0);
      height: 5px;
      opacity: .02;
     }
}

p {padding: .5rem;}
p a {color: rgba(255,255,255,.5)}
/**/

#development{
    position: relative;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
	font-size:12px;
    background-image: url(img/DevelopmentBackground.jpg);
    background-size: cover;
}

.img1, .img2, .img3, .img4 {
    position:relative;
    text-align:center;
}

.img4{
    width:100%;
    height:100%;
}
.txt1, .txt2, .txt3, .txt4{
     position:relative;
} 
.txt1 h1, .txt2 h1, .txt3 h1, .txt4 h1{
    font-size: 30px;
    text-align: center;
    margin-top: 1rem;
    color: lightslategrey;
}
.button{
    background-color: ghostwhite; 
    border: 1px grey; 
    color: #151515; 
    margin: 0;
    padding: 20px 30px; 
    position:relative;
    cursor: pointer; 
    font-size: 30px;
    border-radius: 18px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    top:50%; 
    left:50%;
    bottom:50%;
    right:50%;
    margin:-90px;
    margin-top:1px;
}
.button:hover{
    background-color: lightgrey;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
#game{
    width: 100%;
    height: 100%;
    top: 3rem;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100%;
    background-position:center;
}
.game h1{
    text-align: center;
    color: lightslategrey;
    margin-top: 1rem;
}
#app{
    width: 100%;
    height: 100%;
     top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100%;
    background-position:center;
}
.app h1{
    text-align: center;
    margin-top: 1rem;
    color: lightslategrey;
}
.img11, .img22, .img33, .img44 {
    position:relative;
    text-align:center;
}

.img44{
    width:100%;
    height:100%;
}
.txt11, .txt22, .txt33, .txt44{
     position:relative;
} 
.txt1 h1, .txt2 h1, .txt3 h1, .txt4 h1{
    font-size: 30px;
}
#vid2{
    width: 100%;
    height: 100%;
}
.vid2 h1{
    text-align: center;
    text-decoration-color: dimgrey;
    margin-top: 18rem;
}
#motion{
    position: relative;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
	font-size:12px;
    background-size: cover;
    background-image: url(./img/MotionBackground.jpg);
    /*background: #1C1D21 url('https://64.media.tumblr.com/d82baf8c14e67b7e8847aaf78fc10b5a/596f53db08d38ca2-c2/s400x600/63dfe3cc933d695811f54645611267ecb643b91b.gifv') repeat 0 0 ;
	-webkit-animation: 10s linear 0s normal none infinite animate;
	-moz-animation: 10s linear 0s normal none infinite animate;
	-ms-animation: 10s linear 0s normal none infinite animate;
	-o-animation: 10s linear 0s normal none infinite animate;
	animation: 10s linear 0s normal none infinite animate;*/
}
#mot{
    width:100%;
    height:130%;
    background-color: #322D2D;
    background-repeat: repeat;
    padding-top: 10px;
}
#motiondiv{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    position: relative;
    background-color: #1C1D21;
}
.motionwrp{
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
}
.motionitem{
    width: 100%;
    height: 30%;
    padding-top: 40px;
}
.motionvideo{
    float: left;
    width: 50%;
    height: 100%;
}
.motiontxt{
    float: right;
    width: 50%;
    height: 100%;
}  
.motiontxt p{
    font-size: 1.5rem;
    text-align: justify;
    color: white;
}
.motionvideo p{
    font-size: 20px;
    text-align: justify;
    color: white;
}
.js-video {
    height: 0;
    padding-bottom: 40%;
    position: relative;
    overflow: hidden;
}
.js-video.widescreen {
    padding-bottom: 56.34%;
}
.js-video.vimeo {
    padding-top: 0;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
.date {
    display: block;
    width: 3%;
    height: 6%;
    padding: 5px 0;
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -16px;
    border-radius: 100%;
    background: #92CDCF;
    box-shadow: 0 0 0 7px #1C1D21;
}
#animation{
    position: relative;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
	font-size:12px;
    background-image: url(./img/AnimationBackground.jpg);
    background-size: cover;
}

.image1, .image2, .image3, .image4, .image5 {
    position:relative;
    text-align:center; }
.text1, .text2, .text3, .text4, .text5 {
    position:relative;
    top:30px;
    text-align: center;
    margin-top: 1rem;
    color: lightslategrey;
} 
.dmaxmodel{
    /*background-image:url(img/corkbg.jpg);*/
}
#about{
    position: relative;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
	font-size:12px;
    background-image: url(img/bg.jpg);
    background-size: cover;
}

#aboutt{
    width: 100%;
    height: 100%;
    background-image: url(img/AboutBackground.jpg);
    background-size: 100%;
    background-repeat: repeat;
    background-size: cover;
    
}
.abouttext{
    position: relative;
    width: 50%;
    height: auto;
    top: 25%;
    right: 0%;
    float: right;
    color: black;
    text-align: justify;
    background-color: rgba(255,255,255,0.5);
}
.abouttext p{
    padding: 4em;
    width: 80%;
    line-height: 1.5rem;
    font-size: 1rem;
}
#footer{
    float: left;
    width: 100%;
    height: 15%;
    background-color: #1C1D21;
}
/*back to top button*/
#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 2000;
    border: none;
    outline: none;
    background-color: pink;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
}

#myBtn:hover {
    background-color: #555;
}

.socialmedia{
    margin: 0;
    padding: 0;
    top: 0%;
    float: right;
    width: 50%;
    height: 100%;
}
.socialmedia nav{
    position: relative;
    top: 15%;
}
.socialmedia nav ul{
    list-style: none; 
}
.socialmedia nav li{
    display: inline;
    color: white;
    margin-left: 4rem;
    font-size: 2.3rem;
}
.socialmedia nav li a{
    color: white;
}
.credits{
    margin: 0;
    padding: 0;
    top: 0%;
    float: right;
    width: 40%;
    height: 100%;
}
.credits p{
    padding: 0.8rem;
    color: white;
    font-size: 1.2rem;
}
.credits a{
    color: white;
}

/*Properties to be suitable for smaller screen layouts*/
@media screen and (max-width: 1400px){
svg {
    display: block;
    font: 9.5em 'Montserrat';
    width: 860px;
    height: 900px;
    margin: 0 auto;
}
}
@media screen and (max-width: 1080px) {
.logo{
    background-size:30%;
    }
.topnav.responsive li a {
    text-align:center;
    }
}
@media screen and (max-width: 1000px) {
.logo{
    background-size:30%;
    }
.topnav.responsive li a {
    text-align:center;
    }
svg {
    display: block;
    font: 9.5em 'Montserrat';
    width: 760px;
    height: 800px;
    margin: 0 auto;
}
.grid figure {
    width: 33.3%;
    height: 25%;
    }
.abouttext p{
    font-size: .9rem;
    }
.motionwrp{
    width: 100%;
    }
.motiontxt p{
    padding: 1.5em;
    font-size: 0.9rem;
    }
.motionvideo p{
    padding: 1.5em;
    font-size: 1rem;
    }
.abouttext{
    right:15%;
    width: 70%;
    }
.abouttext p{
    font-size: .9rem;
    }
}

.topnav li {
    display: none;
}
.topnav li.icon {
    float: right;
    display: inline-block;
}
.underline:before{
    display: none;
}


@media screen and (max-width:800px) {
.logo{
    background-size:30%;
    }
.topnav.responsive li a {
    text-align:center;
    display: block;
    font-size: 30px;
    padding: 15px;
    }
svg {
    display: block;
    font: 9.5em 'Montserrat';
    width: 660px;
    height: 800px;
    margin: 0 auto;
    }
.md-content p{
    font-size: 16px;
    }
}

@media screen and (max-width: 700px) {
.logo{
    display:none;
    }
.homeheader h1{
    font-size: 1.3em;
    color: #EEEFF7;
    }
.homeheader span{
    font-size: 0.8rem;
    }
svg {
    display: block;
    font: 8.5em 'Montserrat';
    width: 560px;
    height: 900px;
    margin: 0 auto;
}
.grid figure {
    width: 50%;
    height: 16.7%;
    }
.abouttext p{
    font-size: .3rem;
    }
.socialmedia{
    width: 45%;
    height: 100%;
    }
.socialmedia nav{
    top: 20%;
        
    }
.socialmedia nav li{
    margin-left: .8rem;
    font-size: 1.5rem;
    }
.credits p{
    font-size: .9rem;
    padding-left: 20px;
    }
#footer{
    width: 100%;
}
.motiontxt p{
    padding: 1em;
    font-size: 0.9rem;
    }
.motionvideo p{
    padding: 1em;
    font-size: 13px;
    }
.abouttext p{
    font-size: .9rem;
    }
.md-content p {
    font-size: 14px;
    }
.md-close{
    width: 17%;
    height: 17%;
    }
}
@media screen and (max-width: 550px) {
.topnav.responsive li a {
    text-align:center;
    display: block;
    font-size: 30px;
    padding: 15px;
    }
svg {
    display: block;
    font: 7.5em 'Montserrat';
    width: 360px;
    height: 800px;
    margin: 0 auto;
}
h2, h3 {
  font-size: 2rem;
}
.grid figure {
    width: 100%;
    height: 10%;
    }
#mot{
    height:100%;
    padding-top: 50px;
    }
.credits p{
    font-size: .7rem;
    }
.motionvideo{
    width: 100%;
    height: 50%;
    }
.motiontxt{
    width: 100%;
    height: 50%;
    }
.motiontxt p{
    display: none;
    }
.motionvideo p{
    display: none;
    }
.abouttext p{
    font-size: .7rem;
    padding: 10px;
    }
.txt1 h1, .txt2 h1, .txt3 h1, .txt4 h1{
    font-size: 15px;
    }
.app h1{
        font-size:15px;
    }
.md-close{
    width: 17%;
    height: 17%;
    }
}