Team:NAIT Edmonton/IA

.ia-container { width: 685px; margin: 20px auto; overflow: hidden; box-shadow: 1px 1px 4px rgba(0,0,0,0.08); border: 7px solid rgba(255,255,255,0.6); }

.ia-container figure {

   position: absolute;

top: 0; left: 50px; /* width of visible piece */ width: 335px;

   box-shadow: 0 0 0 1px rgba(255,255,255,0.6);

-webkit-transition: all 0.3s ease-in-out;

   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

}

.ia-container > figure {

   position: relative;

left: 0 !important; }

.ia-container img { display: block; width: 100%; }

.ia-container input { position: absolute; top: 0; left: 0; width: 50px; /* just cover visible part */ height: 100%; cursor: pointer; border: 0; padding: 0;

   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;

z-index: 100; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .ia-container input:checked{ width: 5px; left: auto; right: 0px; } .ia-container input:checked ~ figure { -webkit-transition: all 0.7s ease-in-out;

   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;

left: 335px; }

.ia-container figcaption { width: 100%; height: 100%; background: rgba(87, 73, 81, 0.1); position: absolute; top: 0px; -webkit-transition: all 0.2s linear;

   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;

}

.ia-container figcaption span { position: absolute; top: 40%; margin-top: -30px; right: 20px; left: 20px; overflow: hidden; text-align: center; background: rgba(87, 73, 81, 0.3); line-height: 20px; font-size: 18px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

   filter: alpha(opacity=0);
   opacity: 0;

text-transform: uppercase; letter-spacing: 4px; font-weight: 700; padding: 20px; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); }

.ia-container input:checked + figcaption, .ia-container input:checked:hover + figcaption{ background: rgba(87, 73, 81, 0); }

.ia-container input:checked + figcaption span { -webkit-transition: all 0.4s ease-in-out 0.5s;

   -moz-transition: all 0.4s ease-in-out 0.5s;
   -o-transition: all 0.4s ease-in-out 0.5s;
   -ms-transition: all 0.4s ease-in-out 0.5s;
   transition: all 0.4s ease-in-out 0.5s;

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";

   filter: alpha(opacity=99);

opacity: 1;

top: 50%; }

.ia-container #ia-selector-last:checked + figcaption span { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; }

.ia-container input:hover + figcaption { background: rgba(87, 73, 81, 0.03); }

.ia-container input:checked ~ figure input{

   z-index: 1;

}

@media screen and (max-width: 720px) {

   .ia-container { 

width: 540px; }

.ia-container figure { left: 40px; width: 260px; }

.ia-container input { width: 40px; }

.ia-container input:checked ~ figure { left: 260px; }

.ia-container figcaption span { font-size: 16px; } }

@media screen and (max-width: 520px) {

   .ia-container { 

width: 320px; }

.ia-container figure { left: 20px; width: 180px; }

.ia-container input { width: 20px; }

.ia-container input:checked ~ figure { left: 180px; }

.ia-container figcaption span { font-size: 12px; letter-spacing: 2px; padding: 10px; margin-top: -20px; }

}