/* • Data Modeling (dm)
	------------------------------------------------------------------------- */
	.dm-bg { overflow:hidden; background-color: #ccc}	

        .dm-m-bg    {display:none;}
	.dm-content-blk, .dm-triangle-blk	 { right:50px; top:200px; position:absolute}
        .dm-content-blk {display:none;}

    .dm-content-blk	 { width:50%; z-index:10;}
    .dm-content-blk h1 {color:#666; font-family: 'Raleway-Thin',sans-serif;}
    .dm-content-blk .dm-content { color:#666; float:left; width:87% }
    .dm-content-blk .dm-content .dm-title-delay { }
    .dm-triangle-blk { width:170px; z-index:5;}
    .dm-triangle-blk .dm-triangle { width:0; height:0;
									border-style: solid;
									border-width: 0 170px 170px 0;
									border-color: transparent #15948b transparent transparent; }


    #large-header.dm-pos { position:absolute; top:0; left:0; height:600px;}
    #demo-canvas.demo-canva-pos { position:absolute;top:0;}


	div.dm-animation-bg { position: absolute; width: .001vmin; height: .001vmin; border-radius: 50%; opacity: .25;}

	div.dm-animation-bg:nth-child(2) {
	  -webkit-box-shadow: 0 0 45vmax 45vmax #cccccc;
	  box-shadow: 0 0 45vmax 45vmax #cccccc;
	  -webkit-animation: hue 10s 0s linear infinite, move1 19s 0s linear infinite;
	  animation: hue 10s 0s linear infinite, move1 19s 0s linear infinite;
	}

	div.dm-animation-bg:nth-child(3) {
	  -webkit-box-shadow: 0 0 45vmax 45vmax #ffffff;
	  box-shadow: 0 0 45vmax 45vmax #ffffff;
	  -webkit-animation: hue 15s 0s linear infinite, move2 25s 0s linear infinite;
	  animation: hue 15s 0s linear infinite, move2 25s 0s linear infinite;
	}

	div.dm-animation-bg:nth-child(4) {
	  -webkit-box-shadow: 0 0 45vmax 45vmax #ffffff;
	  box-shadow: 0 0 45vmax 45vmax #ffffff;
	  -webkit-animation: hue 20s 0s linear infinite, move3 15s 0s linear infinite;
	  animation: hue 20s 0s linear infinite, move3 15s 0s linear infinite;
	  opacity: .2;
	}
	@-webkit-keyframes 
	hue { 0% {
	 -webkit-filter: hue-rotate(0deg);
	 filter: hue-rotate(0deg);
	}
	 100% {
	 -webkit-filter: hue-rotate(360deg);
	 filter: hue-rotate(360deg);
	}
	}
	@keyframes 
	hue { 0% {
	 -webkit-filter: hue-rotate(0deg);
	 filter: hue-rotate(0deg);
	}
	 100% {
	 -webkit-filter: hue-rotate(360deg);
	 filter: hue-rotate(360deg);
	}
	}
	@-webkit-keyframes 
	move1 { 0% {
	 top: 0vh;
	 left: 50vw;
	}
	 25% {
	 left: 0vw;
	}
	 50% {
	 top: 100vh;
	}
	 75% {
	 left: 100vw;
	}
	 100% {
	 top: 0vh;
	 left: 50vw;
	}
	}
	@keyframes 
	move1 { 0% {
	 top: 0vh;
	 left: 50vw;
	}
	 25% {
	 left: 0vw;
	}
	 50% {
	 top: 100vh;
	}
	 75% {
	 left: 100vw;
	}
	 100% {
	 top: 0vh;
	 left: 50vw;
	}
	}
	@-webkit-keyframes 
	move2 { 0% {
	 top: 50vh;
	 left: 100vw;
	}
	 25% {
	 top: 100vh;
	}
	 50% {
	 left: 0vw;
	}
	 75% {
	 top: 0vh;
	}
	 100% {
	 top: 50vh;
	 left: 100vw;
	}
	}
	@keyframes 
	move2 { 0% {
	 top: 50vh;
	 left: 100vw;
	}
	 25% {
	 top: 100vh;
	}
	 50% {
	 left: 0vw;
	}
	 75% {
	 top: 0vh;
	}
	 100% {
	 top: 50vh;
	 left: 100vw;
	}
	}
	@-webkit-keyframes 
	move3 { 0% {
	 top: 100vh;
	 left: 50vw;
	}
	 25% {
	 left: 100vw;
	}
	 50% {
	 top: 0vh;
	}
	 75% {
	 left: 0vw;
	}
	 100% {
	 top: 100vh;
	 left: 50vw;
	}
	}
	@keyframes 
	move3 { 0% {
	 top: 100vh;
	 left: 50vw;
	}
	 25% {
	 left: 100vw;
	}
	 50% {
	 top: 0vh;
	}
	 75% {
	 left: 0vw;
	}
	 100% {
	 top: 100vh;
	 left: 50vw;
	}
	}


	/* ==========================================================================
       Media Styles
  	============================================================================= */
    @media only screen and (max-device-width:1024px){
		.dm-content-blk	 { width:62%; z-index:10;}

	    .dm-animation-bg { display:none; }
	    #large-header 	 { display:none; }
	    .dm-content-blk  { display:block; }
	    .dm-bg 			 { background:none; }
	    .dm-m-bg 		 { position:absolute; top:0; left:0; width:100%; height:100%; display:block; }
	    .dm-m-bg img     { width:auto; height:auto; }


    .dm-triangle-blk { width:150px;}
    .dm-triangle-blk .dm-triangle { border-width: 0 150px 150px 0;}
    }
  	
  	@media only screen and (max-width:1024px) {
	   	.dm-content-blk, .dm-triangle-blk	 { top:90px;}
  	}

    @media only screen and (max-width: 745px) {
	    .dm-content-blk	 { width:80%; z-index:10;}
    }

  	@media only screen and (max-width: 479px) {
	  	.dm-content-blk	 { right:auto; left:30px; top:80px;}
	  	.dm-triangle-blk { right:20px; top:120px;}
	    .dm-content-blk	 { width:100%; z-index:10;}
    	.dm-content-blk .dm-content { width:85% }
		.dm-content-blk, .dm-triangle-blk	 { top:80px; }
		 .dm-content-blk h1 { margin-top:20px}
	}