@charset "UTF-8";
@import url("fonts/walkway/walkway.css");
@import url(http://fonts.googleapis.com/css?family=Lato:400,900italic);

html {height: 100%;}

body {
margin: 0;
text-align: left;	
font-family: 'Lato', Futura, Helvetica, Arial, sans-serif;
line-height: 1.65em;
color: #BAC8CD;
background-color:#3d4246;
background-image: url('images/background.jpg');
background-repeat: repeat;
background-position: center center;
background-attachment: fixed;
height: 100%;
}

div#preload {display: none;}

img {border: 0;}



#about ul {
font-style: normal;
line-height: 1.7em;
font-size: 0.7em;
letter-spacing: 0.3em;
text-transform: uppercase;
list-style-type:none;
margin:0;
padding:0;
}

#about li {
float:left;
list-style:none;
padding: 0 1.6em 0 0;
line-height: 1em;
margin-bottom: 1em;
}

#about li div {
margin: 0 !important;
}

#about li > div {
padding: 0;
}

#about a {
text-decoration: none;
font-weight: 900;
font-style: italic;
padding: 0;
color: #DBE5E8;
line-height: 22px;
}

#about a:hover {
color:#fff;
}

h1 {
font-size: 3.5em; 
margin: 48px 24px 0px 24px;
font-style: normal;
font-weight: normal;
letter-spacing: 0.2em;
line-height: 1em;
text-transform: uppercase;
font-family: 'walkway', Helvetica, Arial, sans-serif;;
float: left; 
width: 40%; 
max-width:600px;
}

h2 {		
font-style: normal;
font-weight: normal;
font-size:2em;
letter-spacing: 0.2em;
line-height: 1.3em;
text-transform: uppercase;
font-family: 'walkway', Helvetica, Arial, sans-serif;
}

h3 {
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 900;
font-style: italic;
font-size: 0.8em;
line-height: 1.5em;
text-transform: uppercase;
margin: 2.5em 0 1.5em 0;
}

#tips { 
background-image: url('images/.png');
background-repeat: none;
background-position: center center;
background-size: 288px 166px;
width: 288px;
height: 146px;
padding-top: 20px !important;
margin:auto;	
float:left;
text-align: center;
text-transform: uppercase;
font-weight: 900;
font-style: italic;
line-height: 1.5em;
font-size: 0.7em;
letter-spacing: 0.3em;
/*
-webkit-animation: fadeOut 3s forwards;
animation: fadeOut 3s forwards;
-webkit-animation-delay: 8s;
animation-delay: 8s;
*/
}

/*
@-webkit-keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0; display:none;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0; display:none;}
}
*/

/* duration delay repeat */
#demo {
-webkit-animation: demo_move 2s ease-in-out 0s 5 alternate-reverse;
animation: demo_move 2s ease-in-out 0s 5 alternate-reverse;
position:relative;
}

@-webkit-keyframes demo_move {
	0% {left:0px;}
	25% {left:0px;}
	75% {left:192px;}
	100% {left:192px;}
}

@keyframes demo_move {
    0% {left:0px;}
	25% {left:0px;}
	75% {left:192px;}
    100% {left:192px;}
}

/* Draggable styles */

.draggable { float: left; background: transparent; cursor: move; position: relative; background-color: #5C646A;}
.ui-widget-header p, .ui-widget-content p {  }
#snaptarget { height: 140px; }
#set div {padding: 0px; margin: 0  84px 60px 0; overflow:hidden;}
#set {min-height: 100%; margin: 0; padding: 48px 0px 12px 60px;} /* padding: 3em 7% 5em 7%; */

/* Clearfix */

#set:before,
#set:after {
content:".";
display:table;
height: 0;
font-size:0;
line-height:0;
visibility:hidden;
}
#set:after {
clear:both;
}
#set {
*zoom:1;
}

/* Showme captions for project diamonds */
.showme{ 
display: none;
position: relative;
top: -173px;
left:0%;
width: 288px;
height: 166px;
margin: 0 0 0 0;
text-align: center;
color: #3d4246;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 900;
font-style: italic;
font-size: 0.8em;
line-height: 1.5em;
padding: 0 40px;
opacity: 1;
cursor: initial;
background-color: rgba(186, 200, 205, 0.8);
vertical-align:middle;
}

/* Teaser diamond */
#teaser { 
width: 288px;
height: 166px;
margin:auto;	
letter-spacing: 0.2em;
float:left;
text-align: center;
background-image: url('images/diamond.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 288px 166px;
cursor: initial;
}




/* Shake animation */

#teaser {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: 2;
-moz-animation-iteration-count: 2;
-webkit-animation-iteration-count: 2;
-o-animation-iteration-count: 2;
  }
  @-webkit-keyframes shake {
  25%, 65% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  }
  30%, 40%  {
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
  }
  35%, 45% {
  -webkit-transform: translate3d(10px, 0, 0);
  transform: translate3d(10px, 0, 0);
  }
  }
  @keyframes shake {
  25%, 55% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  }
  30%, 40% {
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
  }
  35%, 45% {
  -webkit-transform: translate3d(10px, 0, 0);
  transform: translate3d(10px, 0, 0);
  }
  } 







#teaser p {
display:table-cell;
position: relative;
left:0%;
width: 288px;
height: 166px;
margin: 0 0 0 0;
text-align: center;
color: #BAC8CD;
line-height: 1.7em;
font-size: 0.7em;
letter-spacing: 0.3em;
text-transform: uppercase;
font-weight: 900;
font-style: italic;
padding: 0 40px;
opacity: 1;
cursor: initial;
vertical-align:middle;
}

/* HACKS TO FIX IE DISPLAY ISSUES */
/* Target IE10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.showme{ 
background-color: transparent;
background-image: url('images/diamond2.png');
background-repeat: none;
background-position: center center;
background-size: 288px 166px;
}
.draggable 
{background-color: transparent;}
}


.showhim:hover .showme, .showhim:active .showme, .showhim:focus .showme{
display:table-cell;
cursor: move; 
}

#about {

font-weight: 400;
float: left;
width:40%;
margin: 48px 24px 64px 24px;
max-width:600px;
font-size: 1em;
line-height: 1.5em;
}

#about p {
	margin: 0 auto 1.3em auto;
}

a.links {
color: #DBE5E8; 
text-decoration: none;
font-size: 0.8em;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 900;
font-style:italic;
}

a.links:hover {color: #fff;}

#about .fineprint {
font-size: 0.5em;
line-height: 1.5em;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 900;
font-style:italic;
color: #7C868E; 
}

$about .fineprint a {
color: #7C868E; 
text-decoration: none;
}

#about .fineprint a:hover {color: #fff;}



@media only screen and (max-width: 600px)  {
	#about {
	font-size: 1em;
	line-height: 1.6em;
	}

	#about .links a {
	font-size: 0.8em;
	}

	#about .fineprint {
	font-size: 0.6em;
	}
}



.footer {

padding: 24px;
text-align: left;
width: 75%;
max-width: 700px;
}

/* Page overlay */

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9998;
  background-color: #1E2022;
   opacity: 0.8;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

#boxes .window {
  position:absolute;
  left:0;
  top:0;
  display:none;
  z-index:9999;
  text-align: center;
}

#boxes p {
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 900;
font-style: italic;
font-size: 0.8em;
line-height: 1.5em;
text-transform: uppercase;
margin: 2.5em 0 1.5em 0;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#boxes img {
margin: 1em 0;
animation: animation 4500ms linear infinite both;
}

@keyframes animation { 
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, 0, 0, 1); }
  3.83% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.427, 0, 0, 1); }
  7.65% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 37.859, 0, 0, 1); }
  11.01% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 53.969, 0, 0, 1); }
  11.11% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 54.256, 0, 0, 1); }
  11.48% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.161, 0, 0, 1); }
  14.94% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.881, 0, 0, 1); }
  15.3% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.568, 0, 0, 1); }
  18.76% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -30.307, 0, 0, 1); }

  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, 0, 0, 1); } 
}

.agree {
background-color: #BAC8CD;
font-style: normal;
font-size: 1.3em;
letter-spacing: 0.3em;
text-transform: uppercase;
text-align:center;
color:#3d4246;
text-decoration: none;
padding: 1em 1.3em;
font-weight: 900;
font-style: italic;
}

.agree:hover{
color:#000;
background-color: #fff;
}





/* DIAMOND GRID LAYOUT */
/* 8n+6: first number is skip interval; second number is first offset */
 
@media only screen and (min-width: 1516px)  {
    
    .ui-draggable:nth-child(7n+6) {margin-left: 168px !important;}
    .ui-draggable:nth-child(n+6) {top: -60px;}
    .ui-draggable:nth-child(n+9) {top: -120px;}
    .ui-draggable:nth-child(n+13) {top: -180px;}
    .ui-draggable:nth-child(n+16) {top: -240px;}
    .ui-draggable:nth-child(n+20) {top: -300px;}
    .ui-draggable:nth-child(n+23) {top: -360px;}
    .ui-draggable:nth-child(n+27) {top: -420px;}
    .ui-draggable:nth-child(n+30) {top: -480px;}
    .ui-draggable:nth-child(n+34) {top: -540px;}
    .ui-draggable:nth-child(n+37) {top: -600px;}
    .ui-draggable:nth-child(n+48) {top: -660px;}
    .ui-draggable:nth-child(n+51) {top: -720px;}
    .ui-draggable:nth-child(n+55) {top: -780px;}
    .ui-draggable:nth-child(n+58) {top: -840px;}
    .ui-draggable:nth-child(n+62) {top: -900px;}
    .ui-draggable:nth-child(n+65) {top: -960px;}
    .ui-draggable:nth-child(n+69) {top: -1020px;}
    .ui-draggable:nth-child(n+72) {top: -1080px;}
    .ui-draggable:nth-child(n+76) {top: -1140px;}
    
	#set {width: 1488px; /*border: 1px solid white;*/}
}

@media only screen and (min-width: 1360px) and (max-width: 1515px) {
    
    .ui-draggable:nth-child(6n+5) {margin-left: 168px !important;}
    .ui-draggable:nth-child(n+5) {top: -60px;}
    .ui-draggable:nth-child(n+8) {top: -120px;}
    .ui-draggable:nth-child(n+11) {top: -180px;}
    .ui-draggable:nth-child(n+14) {top: -240px;}
    .ui-draggable:nth-child(n+17) {top: -300px;}
    .ui-draggable:nth-child(n+20) {top: -360px;}
    .ui-draggable:nth-child(n+23) {top: -420px;}
    .ui-draggable:nth-child(n+26) {top: -480px;}
    .ui-draggable:nth-child(n+29) {top: -540px;}
    .ui-draggable:nth-child(n+32) {top: -600px;}
    .ui-draggable:nth-child(n+35) {top: -660px;}
    .ui-draggable:nth-child(n+38) {top: -720px;}
    .ui-draggable:nth-child(n+41) {top: -780px;}
    .ui-draggable:nth-child(n+44) {top: -840px;}
    .ui-draggable:nth-child(n+47) {top: -900px;}
    .ui-draggable:nth-child(n+50) {top: -960px;}
    .ui-draggable:nth-child(n+53) {top: -1020px;}
    .ui-draggable:nth-child(n+56) {top: -1080px;}
    .ui-draggable:nth-child(n+59) {top: -1140px;}
    .ui-draggable:nth-child(n+62) {top: -1200px;}
    .ui-draggable:nth-child(n+65) {top: -1260px;}
    .ui-draggable:nth-child(n+68) {top: -1320px;}
    
	#set {max-width: 1320px; /*border: 1px solid blue;*/}
}

@media only screen and (min-width: 1224px) and (max-width: 1359px)  {
    
    .ui-draggable:nth-child(5n+5) {margin-left: 168px !important; }
    .ui-draggable:nth-child(n+5) {top: -60px;}
    .ui-draggable:nth-child(n+7) {top: -120px;}
    .ui-draggable:nth-child(n+10) {top: -180px;}
    .ui-draggable:nth-child(n+12) {top: -240px;}
    .ui-draggable:nth-child(n+15) {top: -300px;}
    .ui-draggable:nth-child(n+17) {top: -360px;}
    .ui-draggable:nth-child(n+20) {top: -420px;}
    .ui-draggable:nth-child(n+22) {top: -480px;}
    .ui-draggable:nth-child(n+25) {top: -540px;}
    .ui-draggable:nth-child(n+27) {top: -600px;}
    .ui-draggable:nth-child(n+30) {top: -660px;}
    .ui-draggable:nth-child(n+32) {top: -720px;}
    .ui-draggable:nth-child(n+35) {top: -780px;}
    .ui-draggable:nth-child(n+37) {top: -840px;}
    .ui-draggable:nth-child(n+40) {top: -900px;}
    .ui-draggable:nth-child(n+42) {top: -960px;}
    .ui-draggable:nth-child(n+45) {top: -1020px;}
    .ui-draggable:nth-child(n+47) {top: -1080px;}
    .ui-draggable:nth-child(n+50) {top: -1140px;}
    .ui-draggable:nth-child(n+52) {top: -1200px;}
    .ui-draggable:nth-child(n+55) {top: -1260px;}
    .ui-draggable:nth-child(n+57) {top: -1320px;}
    .ui-draggable:nth-child(n+60) {top: -1380px;}
    .ui-draggable:nth-child(n+62) {top: -1440px;}
    .ui-draggable:nth-child(n+65) {top: -1500px;}
    .ui-draggable:nth-child(n+67) {top: -1560px;}
    
	#set {max-width: 1164px; /*border: 1px solid red;*/}
}

@media only screen and (min-width: 1026px) and (max-width: 1223px)  {
    .ui-draggable:nth-child(4n+4) {margin-left: 168px !important;}
    .ui-draggable:nth-child(n+4) {top: -60px;}
    .ui-draggable:nth-child(n+6) {top: -120px;}
    .ui-draggable:nth-child(n+8) {top: -180px;}
    .ui-draggable:nth-child(n+10) {top: -240px;}
    .ui-draggable:nth-child(n+12) {top: -300px;}
    .ui-draggable:nth-child(n+14) {top: -360px;}
    .ui-draggable:nth-child(n+16) {top: -420px;}
    .ui-draggable:nth-child(n+18) {top: -480px;}
    .ui-draggable:nth-child(n+20) {top: -540px;}
    .ui-draggable:nth-child(n+22) {top: -600px;}
    .ui-draggable:nth-child(n+24) {top: -660px;}
    .ui-draggable:nth-child(n+26) {top: -720px;}
    .ui-draggable:nth-child(n+28) {top: -780px;}
    .ui-draggable:nth-child(n+30) {top: -840px;}
    .ui-draggable:nth-child(n+32) {top: -900px;}
    .ui-draggable:nth-child(n+34) {top: -960px;}
    .ui-draggable:nth-child(n+36) {top: -1020px;}
    .ui-draggable:nth-child(n+38) {top: -1080px;}
    .ui-draggable:nth-child(n+40) {top: -1140px;}
    .ui-draggable:nth-child(n+42) {top: -1200px;}
    .ui-draggable:nth-child(n+44) {top: -1260px;}
    .ui-draggable:nth-child(n+46) {top: -1320px;}
    .ui-draggable:nth-child(n+48) {top: -1380px;}
    .ui-draggable:nth-child(n+50) {top: -1440px;}
    .ui-draggable:nth-child(n+52) {top: -1500px;}
    .ui-draggable:nth-child(n+54) {top: -1560px;}
    .ui-draggable:nth-child(n+56) {top: -1620px;}
    .ui-draggable:nth-child(n+58) {top: -1680px;}
    .ui-draggable:nth-child(n+60) {top: -1740px;}
    .ui-draggable:nth-child(n+62) {top: -1800px;}
    .ui-draggable:nth-child(n+64) {top: -1860px;}

    #set {max-width: 996px; /*border: 1px solid yellow;*/}
}

@media only screen and (min-width: 868px) and (max-width: 1025px)  {
    .ui-draggable:nth-child(3n+4) {margin-left: 168px !important;}
    .ui-draggable:nth-child(n+4) {top: -60px;}
    .ui-draggable:nth-child(n+5) {top: -120px;}
    .ui-draggable:nth-child(n+7) {top: -180px;}
    .ui-draggable:nth-child(n+8) {top: -240px;}
    .ui-draggable:nth-child(n+10) {top: -300px;}
    .ui-draggable:nth-child(n+11) {top: -360px;}
    .ui-draggable:nth-child(n+13) {top: -420px;}
    .ui-draggable:nth-child(n+14) {top: -480px;}
    .ui-draggable:nth-child(n+16) {top: -540px;}
    .ui-draggable:nth-child(n+17) {top: -600px;}
    .ui-draggable:nth-child(n+19) {top: -660px;}
    .ui-draggable:nth-child(n+20) {top: -720px;}
    .ui-draggable:nth-child(n+22) {top: -780px;}
    .ui-draggable:nth-child(n+23) {top: -840px;}
    .ui-draggable:nth-child(n+25) {top: -900px;}
    .ui-draggable:nth-child(n+26) {top: -960px;}
    .ui-draggable:nth-child(n+28) {top: -1020px;}
    .ui-draggable:nth-child(n+29) {top: -1080px;}
    .ui-draggable:nth-child(n+31) {top: -1140px;}
    .ui-draggable:nth-child(n+32) {top: -1200px;}
    .ui-draggable:nth-child(n+34) {top: -1260px;}
    .ui-draggable:nth-child(n+35) {top: -1320px;}
    .ui-draggable:nth-child(n+37) {top: -1380px;}
    .ui-draggable:nth-child(n+38) {top: -1440px;}
    .ui-draggable:nth-child(n+40) {top: -1500px;}
    .ui-draggable:nth-child(n+41) {top: -1560px;}
    .ui-draggable:nth-child(n+43) {top: -1620px;}
    .ui-draggable:nth-child(n+44) {top: -1680px;}
    .ui-draggable:nth-child(n+46) {top: -1740px;}
    .ui-draggable:nth-child(n+47) {top: -1800px;}
    .ui-draggable:nth-child(n+49) {top: -1860px;}
    .ui-draggable:nth-child(n+50) {top: -1920px;}
    .ui-draggable:nth-child(n+52) {top: -1980px;}
    .ui-draggable:nth-child(n+53) {top: -2040px;}
    .ui-draggable:nth-child(n+55) {top: -2100px;}
    .ui-draggable:nth-child(n+56) {top: -2160px;}
    .ui-draggable:nth-child(n+58) {top: -2220px;}
    .ui-draggable:nth-child(n+59) {top: -2280px;}
    .ui-draggable:nth-child(n+61) {top: -2340px;}
    
	#set {max-width: 828px; /*border: 1px solid white;*/}
}

@media only screen and (min-width: 712px) and (max-width: 867px)  {
    .ui-draggable:nth-child(2n+1) {margin-left: 168px !important;}
    .ui-draggable:nth-child(n+3) {top: -60px;}
    .ui-draggable:nth-child(n+4) {top: -120px;}
    .ui-draggable:nth-child(n+5) {top: -180px;}
    .ui-draggable:nth-child(n+6) {top: -240px;}
    .ui-draggable:nth-child(n+7) {top: -300px;}
    .ui-draggable:nth-child(n+8) {top: -360px;}
    .ui-draggable:nth-child(n+9) {top: -420px;}
    .ui-draggable:nth-child(n+10) {top: -480px;}
    .ui-draggable:nth-child(n+11) {top: -540px;}
    .ui-draggable:nth-child(n+12) {top: -600px;}
    .ui-draggable:nth-child(n+13) {top: -660px;}
    .ui-draggable:nth-child(n+14) {top: -720px;}
    .ui-draggable:nth-child(n+15) {top: -780px;}
    .ui-draggable:nth-child(n+16) {top: -840px;}
    .ui-draggable:nth-child(n+17) {top: -900px;}
    .ui-draggable:nth-child(n+18) {top: -960px;}
    .ui-draggable:nth-child(n+19) {top: -1020px;}
    .ui-draggable:nth-child(n+20) {top: -1080px;}
    .ui-draggable:nth-child(n+21) {top: -1140px;}
    .ui-draggable:nth-child(n+22) {top: -1200px;}
    .ui-draggable:nth-child(n+23) {top: -1260px;}
    .ui-draggable:nth-child(n+24) {top: -1320px;}
    .ui-draggable:nth-child(n+25) {top: -1380px;}
    .ui-draggable:nth-child(n+26) {top: -1440px;}
    .ui-draggable:nth-child(n+27) {top: -1500px;}
    .ui-draggable:nth-child(n+28) {top: -1560px;}
    .ui-draggable:nth-child(n+29) {top: -1620px;}
    .ui-draggable:nth-child(n+30) {top: -1680px;}
    .ui-draggable:nth-child(n+31) {top: -1740px;}
    .ui-draggable:nth-child(n+32) {top: -1800px;}
    .ui-draggable:nth-child(n+33) {top: -1860px;}
    .ui-draggable:nth-child(n+34) {top: -1920px;}
    .ui-draggable:nth-child(n+35) {top: -1980px;}
    .ui-draggable:nth-child(n+36) {top: -2040px;}
    .ui-draggable:nth-child(n+37) {top: -2100px;}
    .ui-draggable:nth-child(n+38) {top: -2160px;}
    .ui-draggable:nth-child(n+39) {top: -2220px;}
    .ui-draggable:nth-child(n+40) {top: -2280px;}
    .ui-draggable:nth-child(n+41) {top: -2340px;}
    .ui-draggable:nth-child(n+42) {top: -2400px;}
    .ui-draggable:nth-child(n+43) {top: -2460px;}
    .ui-draggable:nth-child(n+44) {top: -2520px;}
    .ui-draggable:nth-child(n+45) {top: -2580px;}
    .ui-draggable:nth-child(n+46) {top: -2640px;}
    .ui-draggable:nth-child(n+47) {top: -2700px;}
    .ui-draggable:nth-child(n+48) {top: -2760px;}
    .ui-draggable:nth-child(n+49) {top: -2820px;}
    .ui-draggable:nth-child(n+50) {top: -2880px;}
    .ui-draggable:nth-child(n+51) {top: -2940px;}
    .ui-draggable:nth-child(n+52) {top: -3000px;}
    .ui-draggable:nth-child(n+53) {top: -3060px;}
    .ui-draggable:nth-child(n+54) {top: -3120px;}
    .ui-draggable:nth-child(n+55) {top: -3180px;}
    .ui-draggable:nth-child(n+56) {top: -3240px;}
    .ui-draggable:nth-child(n+57) {top: -3300px;}
    .ui-draggable:nth-child(n+58) {top: -3360px;}
    .ui-draggable:nth-child(n+59) {top: -3420px;}
    .ui-draggable:nth-child(n+60) {top: -3480px;}
    .ui-draggable:nth-child(n+61) {top: -3540px;}
    .ui-draggable:nth-child(n+62) {top: -3600px;}
    .ui-draggable:nth-child(n+63) {top: -3660px;}
    .ui-draggable:nth-child(n+64) {top: -3720px;}
    .ui-draggable:nth-child(n+65) {top: -3780px;}
    .ui-draggable:nth-child(n+66) {top: -3840px;}
    .ui-draggable:nth-child(n+67) {top: -3900px;}
    .ui-draggable:nth-child(n+68) {top: -3960px;}
    .ui-draggable:nth-child(n+69) {top: -4020px;}
    .ui-draggable:nth-child(n+70) {top: -4080px;}
    .ui-draggable:nth-child(n+71) {top: -4140px;}
    .ui-draggable:nth-child(n+72) {top: -4200px;}
    .ui-draggable:nth-child(n+73) {top: -4260px;}
    .ui-draggable:nth-child(n+74) {top: -4320px;}
    .ui-draggable:nth-child(n+75) {top: -4380px;}
    .ui-draggable:nth-child(n+76) {top: -4440px;}
    .ui-draggable:nth-child(n+77) {top: -4500px;}
    .ui-draggable:nth-child(n+78) {top: -4560px;}
    .ui-draggable:nth-child(n+79) {top: -4620px;}
    
	#set {max-width: 672px; /*border: 1px solid blue;*/}
}

/*

@media only screen and (min-width: 556px) and (max-width: 711px)  {
    
    .ui-draggable:nth-child(2n+1) {margin-left: 168px !important;}
    .ui-draggable:nth-child(n+4) {top: -60px;}
    .ui-draggable:nth-child(n+5) {top: -120px;}
    .ui-draggable:nth-child(n+6) {top: -180px;}
    .ui-draggable:nth-child(n+7) {top: -240px;}    
    .ui-draggable:nth-child(n+8) {top: -300px;}
    .ui-draggable:nth-child(n+9) {top: -360px;}
    .ui-draggable:nth-child(n+10) {top: -420px;}
    .ui-draggable:nth-child(n+11) {top: -480px;}
    .ui-draggable:nth-child(n+12) {top: -540px;}
    .ui-draggable:nth-child(n+13) {top: -600px;}
    .ui-draggable:nth-child(n+14) {top: -660px;}
    .ui-draggable:nth-child(n+15) {top: -720px;}
    .ui-draggable:nth-child(n+16) {top: -780px;}
    .ui-draggable:nth-child(n+17) {top: -840px;}
    .ui-draggable:nth-child(n+18) {top: -900px;}
    .ui-draggable:nth-child(n+19) {top: -960px;}
    .ui-draggable:nth-child(n+20) {top: -1020px;}
    .ui-draggable:nth-child(n+21) {top: -1080px;}
    .ui-draggable:nth-child(n+22) {top: -1140px;}
    .ui-draggable:nth-child(n+23) {top: -1200px;}
    .ui-draggable:nth-child(n+24) {top: -1260px;}
    .ui-draggable:nth-child(n+25) {top: -1320px;}
    .ui-draggable:nth-child(n+26) {top: -1380px;}
    .ui-draggable:nth-child(n+27) {top: -1440px;}
    .ui-draggable:nth-child(n+28) {top: -1500px;}
    .ui-draggable:nth-child(n+29) {top: -1560px;}
    .ui-draggable:nth-child(n+30) {top: -1620px;}
    .ui-draggable:nth-child(n+31) {top: -1680px;}
    .ui-draggable:nth-child(n+32) {top: -1740px;}
    .ui-draggable:nth-child(n+33) {top: -1800px;}
    .ui-draggable:nth-child(n+34) {top: -1860px;}
    .ui-draggable:nth-child(n+35) {top: -1920px;}
    .ui-draggable:nth-child(n+36) {top: -1980px;}
    .ui-draggable:nth-child(n+37) {top: -2040px;}
    .ui-draggable:nth-child(n+38) {top: -2100px;}
    .ui-draggable:nth-child(n+39) {top: -2160px;}
    .ui-draggable:nth-child(n+40) {top: -2220px;}
    .ui-draggable:nth-child(n+41) {top: -2280px;}
    .ui-draggable:nth-child(n+42) {top: -2340px;}
    .ui-draggable:nth-child(n+43) {top: -2400px;}
    .ui-draggable:nth-child(n+44) {top: -2460px;}
    .ui-draggable:nth-child(n+45) {top: -2520px;}
    .ui-draggable:nth-child(n+46) {top: -2580px;}
    .ui-draggable:nth-child(n+47) {top: -2640px;}
    .ui-draggable:nth-child(n+48) {top: -2700px;}
    .ui-draggable:nth-child(n+49) {top: -2760px;}
    .ui-draggable:nth-child(n+50) {top: -2820px;}
    .ui-draggable:nth-child(n+51) {top: -2880px;}
    .ui-draggable:nth-child(n+52) {top: -2940px;}
    .ui-draggable:nth-child(n+53) {top: -3000px;}
    .ui-draggable:nth-child(n+54) {top: -3060px;}
    .ui-draggable:nth-child(n+55) {top: -3120px;}
    .ui-draggable:nth-child(n+56) {top: -3180px;}
    .ui-draggable:nth-child(n+57) {top: -3240px;}
    .ui-draggable:nth-child(n+58) {top: -3300px;}
    .ui-draggable:nth-child(n+59) {top: -3360px;}
    .ui-draggable:nth-child(n+60) {top: -3420px;}
    .ui-draggable:nth-child(n+61) {top: -3480px;}
    .ui-draggable:nth-child(n+62) {top: -3540px;}
    .ui-draggable:nth-child(n+63) {top: -3600px;}
    .ui-draggable:nth-child(n+64) {top: -3660px;}
    .ui-draggable:nth-child(n+65) {top: -3720px;}
    .ui-draggable:nth-child(n+66) {top: -3780px;}
    .ui-draggable:nth-child(n+67) {top: -3840px;}
    .ui-draggable:nth-child(n+68) {top: -3900px;}
    .ui-draggable:nth-child(n+69) {top: -3960px;}
    .ui-draggable:nth-child(n+70) {top: -4020px;}
    .ui-draggable:nth-child(n+71) {top: -4080px;}
    .ui-draggable:nth-child(n+72) {top: -4140px;}
    .ui-draggable:nth-child(n+73) {top: -4200px;}
    .ui-draggable:nth-child(n+74) {top: -4260px;}
    .ui-draggable:nth-child(n+75) {top: -4320px;}
    .ui-draggable:nth-child(n+76) {top: -4380px;}
    .ui-draggable:nth-child(n+77) {top: -4440px;}
    .ui-draggable:nth-child(n+78) {top: -4500px;}
    .ui-draggable:nth-child(n+79) {top: -4560px;}
    .ui-draggable:nth-child(n+80) {top: -4620px;}
    
	#set {max-width: 516px; border: 1px solid red;}
}
 
*/




	

/* Media queries
-------------------------------------------------------------------------------*/

/* Retina Displays */

/* Target any device with retina display (ie iPad 3 and MacBook Pro) */

@media 
only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

}

/* Tablet */
@media only screen and (min-width: 1088px) and (max-width: 1523px) {

h1 {font-size: 3em;}

}

/* Tablet */
@media only screen and (min-width: 888px) and (max-width: 1087px) {

h1 {font-size: 2.5em;}
#about {}

}

/* Mobile */
@media only screen and (max-width: 887px) {

h1 {font-size: 2em; float: none; width: 100%;}
#about {float: none; margin-top:24px; width: 100%; font-size: 0.9em; line-height: 1.4em; max-width: 75%;}

}