/* Magnify Styling */

/* When creating your Cover and Hidden background assets, make sure that
they are identical in size and are the size of the slide, and if it does not already have one, your cover asset should
have a solid color background like white to make sure the background isn't visible.  
Make sure that the background colors match if you choose something other than white. */

/* Do your best not to alter the z-indexes as it can cause many issues.
The container and the Hidden background must be position:relative in order for the
magnify function to be able to calculate cursor position. The cover and hidden objects
must be position:absolute to appear on top of the hidden background */

/* The border and other border properties of the glass can be altered without affecting the functionality */

.magnifyingGlass{
	position: absolute !important;
	border: 6px solid #000 !important;
	border-radius: 50% !important;
	cursor: none;
	/* pointer-events: none; */
	/*Set the size of the magnifier glass:*/
	width: 10%;
	height: 15%;
	z-index: 3!important;
	box-sizing: border-box !important;
	
}

.magnifyContainer{
    position: relative!important;
}

.magnifyCover{
    position: absolute!important;
    height: 100%!important;
    width: 100%!important;
    z-index: 1!important;
    top: 0%!important;
    left: 0%!important;
}

.magnifyHiddenBackground{
    position: relative!important;
    height: 100%!important;
    width: 100%;
}

.hiddenObject{
    position: absolute!important;
    z-index: 2!important;
}


/*/////////////////////////// Sortable Styling ///////////////////////////////////// */

/* Important! A sortable must be a parent div which has the sortable method called on it
and the list items, the sortables' direct children must be divs as well.  The children divs
can contain img tags but be sure to style those img tags with position:relative to ensure
that they sit properly within the list item div*/

/* Important! The sortable parent must be given the class: sortable in order for certain features to work properly*/


/* //////styling for a sortable parent with horizontal rows ////////*/

/* width and min-height can be adjusted. However, min-height when horizontal or
min-width when vertical should be kept to prevent the list from 'disappearing' 
when it is empty if you are using connected lists */

/* change flex direction for columns. */

/* flex-wrap makes it create new rows when it reaches the width/height and maintains sorted object size
remove flex-wrap to restrain sortable to single row/column but realize that it will resize 
the sorted items as more are added/removed */

.sortFlexParent{
	display: flex;
	width: 40%;
	min-height: 33%;
    flex-wrap: wrap;
    /* turn this on to see your parent container. not necessary
    background-color: cyan; */
}


/* ////an example of a child class that will pair with the above parent ////*/

/* the position: relative is necessary to ensure that list items do not stack on top
of each other and instead each have their own space */
/* make sure when creating list item assets that they are all placed on artboards of
equal size or are equally sized objects to avoid issues  */
/* when flex-wrap is turned on the width of the child determines how many items per row
and height would determine how many per column if this was vertical.  In this example
the width is 33% so there are three items per row */
/* this class would be attached to the direct child div and if the div contained an img
the img would just be height: 100% and width: 100% */

.sortFlexChild{
	width: 33%;
	position:relative;
}


/* //// Alternative to flex-box ///// */


/* These two examples are different classes that can be applied to the list items
with no styling necessary for the parent besides height, width, etc.  */

/* This first example is a class that can be used to create a tile/grid effect
the position:relative and float:left are necessary while the height and width can be adjusted
to control the number of items per row.  Both height and width must be given */
.sortFloatTile{
	height: 33%;
	width:20%;
	position: relative;
	float: left;
}

/* This is a class that can be applied to all list items to create a horizontal list
with one row. position:relative and float:left are necessary.  Height must be 100% while 
width can be adjusted.  */
.sortFloatRow{
	height: 100%;
	width:11%;
	position: relative;
	float: left;
}


/* basic */
.sortList{
	height: 67%;
	width: 6%;
	
}


.sortItem{
	height: 14%;
	/* width: 100%; */
	position: relative;
	text-align: center;
	font-size: 0.7rem!important;
	box-shadow: .06rem .06rem .06rem  black;
	/* border: 5px solid black!important; */
	margin-bottom: 6%!important;
	/* border-radius: 40%; */
	box-sizing: border-box;	
	
}

.sortItem2{
	height: 33%;
	width: 20%;
	border: 2px solid black;
	box-sizing: border-box;
	position: relative;
	float: left;
	text-align: center;
	font-size: 0.7rem!important;
}

.block{
	height: 24%;
	width: 16%;
	border-width: 15px!important;
	border-style: solid!important;
	border-color: black!important;
	background-clip: padding-box;
	border-radius: 10%;
	cursor:pointer;
}

.handle{
	position: relative;
	
}

/* ///// example of placeholder //// */

/* This is an example of a placeholder for a sortable list.  
To designate a placeholder you must initiate your sortable with an options hash 
containing a key, placeholder, pointing to a value, a class name of your choice written
as a string with no period.  In this case it would be {placeholder: "placeholder"} but
the class name can be anything  */

/* This placeholder is for the list items with the above class .sortItem 
It has the required position:relative and its height and width match the styling of the
list item it is replacing.  Besides that it can be freely styled and will appear as 
you drag an item along a list*/
.placeholder{
	height: 14%;
	width: 100%;
	position: relative;
	border: .1rem dotted rgba(0, 0, 0, 0.5)!important;
	/* margin: 10px!important; */
	box-sizing: border-box;	
}

.sortable{
	cursor: pointer;
}
.sortable div{
	transition: transform .2s ease-in-out;
}
.sortable > div:hover, .sortable > div:focus {
	transform: scale(.96);
	
}




/* Styling for flippable cards in memory game.
to have flippable objects you need a container for all of them with a
perspective property set.  Smaller perspective = Larger 3d distortion
Each flippable item(card) in the container needs to also be a container for the front and back
The flippable item itself needs to have transform:preserve-3d and the front and back need to
have backface-visibility set to none and then the back needs to have an initial Y rotation   */
.memory-container{
	display: grid;
	width: 50%;
	height: 80%;
	position: absolute;
	top: 10%;
	left: 25%;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: .3rem;
	perspective: 2000px;
}


.card{
	height: 100%;
	width: 100%;
	position: relative;
	transform-style: preserve-3d;
	-webkit-transition: transform 0.5s;
	transition: transform 1s;
	cursor: pointer;
}

.front{
	background-color: black;
	height: 100%;
	width: 100%;
	position: absolute;
	backface-visibility: hidden;
}
.back{
	background-color: darkred;
	height: 100%;
	width: 100%;
	position: absolute;
	backface-visibility: hidden;
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
}

.flipped{
	transform:  rotateY(-180deg);
	-webkit-transform:  rotateY(-180deg);
	-ms-transform:  rotateY(-180deg);
}

.back > img, .front > img{
	position: relative;
}

.front > img{
	top: 10%;
}