/*.boxes {

	width: 100%;
	overflow-x: hidden; overflow-y: scroll;

}
          old hidden    */                 
/* Dan way 
.boxes ol {
list-style-type: none;
-webkit-padding-start: 0px;
text-align: center;
}
.boxes ol li{
display:inline-block;
list-style: none;
margin: 10px;

}


.rollover {
  position: relative;
  width: 200px;
  height: 200px;
  display: block;
}
.front1 {
	
	width: 200px;
height: 200px;
  z-index: 2;
  position: absolute;

}
.front1 p {
	text-align: center;
	color:#FFF;
	font-family:'Lato';
	font-size:20px;
position: relative;
  top: 40%;
 
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  line-height: 1.2;
  text-transform:uppercase;
}

.back1 {
	width: 200px;
height: 200px;
  z-index: 1;
  position: absolute;

}

.back1 p {
	text-align: center;
	color:#FFF;
	font-family:'Lato';
	font-size:20px;
position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  line-height: 1.2;
  text-transform:uppercase;
}


.rollover:hover .back1, 
.rollover:focus .back1 {
  z-index: 2;
}
.rollover:hover .front1, 
.rollover:focus .front1 {
  z-index: 1;
}
.fade .rollover .front1 {
  opacity: 1;
  -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.fade .rollover .back1 {
  opacity: 0;
  -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.fade .rollover:hover .front1, 
.fade .rollover:focus .front1 {
  opacity: 0;
}
.fade .rollover:hover .back1, 
.fade .rollover:focus .back1 {
  opacity: 1;
}

.flip .rollover {
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
      -ms-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}
.flip .cube {
  height: 200px;
  width: 200px;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
     -moz-transform: rotateX(0) rotateY(0) rotateZ(0);
      -ms-transform: rotateX(0) rotateY(0) rotateZ(0);
       -o-transform: rotateX(0) rotateY(0) rotateZ(0);
          transform: rotateX(0) rotateY(0) rotateZ(0);
  -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.flip .front1 {
  -webkit-transform: translate3d(0,0,1px);
     -moz-transform: translate3d(0,0,1px);
      -ms-transform: translate3d(0,0,1px);
       -o-transform: translate3d(0,0,1px);
          transform: translate3d(0,0,1px);
}
.flip .back1 {
  -webkit-transform: rotateY(180deg) translate3d(0,0,0);
     -moz-transform: rotateY(180deg) translate3d(0,0,0);
      -ms-transform: rotateY(180deg) translate3d(0,0,0);
       -o-transform: rotateY(180deg) translate3d(0,0,0);
          transform: rotateY(180deg) translate3d(0,0,0);
}
.flip .rollover:hover .cube, 
.flip .rollover:focus .cube {
  -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg); 
      -ms-transform: rotateY(180deg);
       -o-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.up .front1 {
  -webkit-transform: translate3d(0,0,1px);
     -moz-transform: translate3d(0,0,1px);
      -ms-transform: translate3d(0,0,1px);
       -o-transform: translate3d(0,0,1px);
          transform: translate3d(0,0,1px);
}
.up .back1 {
  -webkit-transform: rotateX(180deg) translate3d(0,0,0);
     -moz-transform: rotateX(180deg) translate3d(0,0,0);
      -ms-transform: rotateX(180deg) translate3d(0,0,0);
       -o-transform: rotateX(180deg) translate3d(0,0,0);
          transform: rotateX(180deg) translate3d(0,0,0);
}
.up .rollover:hover .cube, 
.up .rollover:focus .cube {
  -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
       -o-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.box .front1 {
  -webkit-transform: translate3d(0,0,100px) scale(0.9,0.9);
     -moz-transform: translate3d(0,0,100px) scale(0.85,0.85);
      -ms-transform: translate3d(0,0,100px) scale(0.85,0.85);
       -o-transform: translate3d(0,0,100px) scale(0.85,0.85);
          transform: translate3d(0,0,100px) scale(0.85,0.85);
}
.box .back1 {
  -webkit-transform: rotateY(180deg) translate3d(0,0,100px)  scale(0.9,0.9);
     -moz-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);
      -ms-transform: rotateY(180deg) translate3d(0,0,100px)  scale(0.85,0.85);
       -o-transform: rotateY(180deg) translate3d(0,0,100px)  scale(0.85,0.85);
          transform: rotateY(180deg) translate3d(0,0,100px)  scale(0.85,0.85);
}
.box.up .back1 {
  -webkit-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.9,0.9);
     -moz-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
      -ms-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
       -o-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
          transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
}

.hideback .front1, .hideback .back1 {
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}
.nananana .rollover {
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
      -ms-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
          
}
.nananana .rollover:hover .front1, 
.nananana .rollover:focus .front1 {
  background: transparent;
  z-index: 10;
  -webkit-animation: batman 1s 2 alternate linear;
     -moz-animation: batman 1s 2 alternate linear;
      -ms-animation: batman 1s 2 alternate linear;
       -o-animation: batman 1s 2 alternate linear;
       animation: batman 1s 2 alternate linear;
}
@-moz-keyframes batman {
  0% { -moz-transform: scale(1,1) rotateZ(0); }
  100% { 
    -moz-transform: scale(0,0) rotateZ(720deg);
    opacity: 0;
  }
}
@-webkit-keyframes batman {
  0% { -webkit-transform: scale(1,1) rotateZ(0); }
  100% { 
    -webkit-transform: scale(0,0) rotateZ(720deg);
    opacity: 0;
  }
}
@-ms-keyframes batman {
  0% { -ms-transform: scale(1,1) rotateZ(0); }
  100% { 
    -ms-transform: scale(0,0) rotateZ(720deg); 
    opacity: 0;
  }
}
@-o-keyframes batman {
  0% { -o-transform: scale(1,1) rotateZ(0); }
  100% { 
    -o-transform: scale(0,0) rotateZ(720deg); 
    opacity: 0;
  }
}
@keyframes batman {
  0% { transform: scale(1,1) rotateZ(0); }
  100% { 
    transform: scale(0,0) rotateZ(720deg); 
    opacity: 0;
  }
}
*/

/* new way my way */

/* entire container, keeps perspective */



.flip-container {
	perspective: 1000;
	transform-style: preserve-3d;
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container:hover .back {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
	    transform: rotateY(180deg);
	}
	.flip-container:hover .back-purple {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front-purple {
	    transform: rotateY(180deg);
	}
	.flip-container:hover .back-blue {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front-blue {
	    transform: rotateY(180deg);
	}
	.flip-container:hover .back-orange {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front-orange {
	    transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 200px;
	height: 200px;
}
.flip-container, .front-purple, .back-purple {
	width: 200px;
	height: 200px;
}
.flip-container, .front-blue, .back-blue {
	width: 200px;
	height: 200px;
}
.flip-container, .front-orange, .back-orange {
	width: 200px;
	height: 200px;
	margin: 0px 15px 15px 0px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}
/* hide back of pane during swap */
.front-purple, .back-purple {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}
/* hide back of pane during swap */
.front-blue, .back-blue {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}
/* hide back of pane during swap */
.front-orange, .back-orange {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}
/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
	background-color:#BDBDBD;
	  width: 200px;
  height: 200px;
  color:#FFF;
  text-align:center;
 	padding:40% 0 0 0;
	text-transform:uppercase;
	margin: 0;
	   cursor:pointer;
}
.front-purple {
	z-index: 2;
	transform: rotateY(0deg);
	background-color:#BDBDBD;
	  width: 200px;
  height: 200px;
  color:#FFF;
  text-align:center;
 	padding:45% 0 0 0;
	text-transform:uppercase;
	   cursor:pointer;
}
.front-blue {
	z-index: 2;
	transform: rotateY(0deg);
	background-color:#BDBDBD;
	  width: 200px;
  height: 200px;
  color:#FFF;
  text-align:center;
 	padding:45% 0 0 0;
	text-transform:uppercase;
	   cursor:pointer;
}
.front-orange {
	z-index: 2;
	transform: rotateY(0deg);
	background-color:#BDBDBD;
	  width: 200px;
  height: 200px;
  color:#FFF;
  text-align:center;
 	padding:45% 0 0 0;
	text-transform:uppercase;
	   cursor:pointer;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
	background-color:#9ac942;
	  width: 200px;
  height: 200px;
   color:#FFF!Important;
   text-transform:uppercase;
   text-align:center;
   padding:40% 0 0 0;
   margin: 0;
   cursor:pointer;
}

/* back, initially hidden pane */
.back-purple {
	transform: rotateY(-180deg);
	background-color:#8413b9;
	  width: 200px;
  height: 200px;
   color:#FFF!Important;
   text-transform:uppercase;
   text-align:center;
   padding:45% 0 0 0;
}

/* back, initially hidden pane */
.back-blue {
	transform: rotateY(-180deg);
	background-color:#42acff;
	  width: 200px;
  height: 200px;
   color:#FFF!Important;
   text-transform:uppercase;
   text-align:center;
   padding:45% 0 0 0;
}
/* back, initially hidden pane */
.back-orange {
	transform: rotateY(-180deg);
	background-color:#ffb108;
	  width: 200px;
  height: 200px;
   color:#FFF!Important;
   text-transform:uppercase;
   text-align:center;
   padding:45% 0 0 0;
}
.boxes {
		/*width: 100%; ipad makes it move arround */
		padding: 60px;
}
.boxik-resource  .container {     padding: 0px 0 0 0; max-width: 860px;  margin-bottom:100px; font-family:Arial, Helvetica, sans-serif!Important;	} 
/*.reso-container { width: 1024px;padding-top: 50px; } changing container to this did not help */
/* 
	Some vertical flip updates 
*/
.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}
	/* doesnt make it turn on ipad */
	.vertical .back-purple {
		transform: rotateX(180deg);
	}

	.vertical.flip-container:hover .back {
	    transform: rotateX(0deg);
	}
	/* doesnt make it turn on ipad */
	.vertical.flip-container:hover .back-purple {
	    transform: rotateX(0deg);
	}

	.vertical.flip-container:hover .front {
	    transform: rotateX(180deg);
	}
	/* doesnt make it turn on ipad */
	.vertical.flip-container:hover .front-purple {
	    transform: rotateX(180deg);
	}
/* iPad */
@media screen and (max-width: 992px) {
.boxik-resource .container {
    width: 440px;
}	
}

@media screen and (max-width:592px){
/* iphone horizontal and vertical */
	.boxik-resource .container { width:200px; }
}


/* iphone and samsung */
@media screen and (max-width:320px) {
	.boxik-resource .container { width:250px; }
}