.ac-wrapper {
width: 100%;
position: relative;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 25%;
-moz-perspective-origin: 50% 25%;
perspective-origin: 50% 25%;
}
.ac-wrapper h2 {
top: 20%;
width: 50%;
position: absolute;
font-weight: 300;
font-size: 4em;
text-align: right;
padding: 0 180px 0 50px;
}
.ac-wrapper h2 span {
display: block;
font-size: 60%;
color: #c0c0c0;
}
.ac-device {
background: url(../images/iPhone.png) no-repeat;
width: 288px;
height: 611px;
margin: 0 auto;
position: relative;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ac-device a {
height: 440px;
width: 249px;
display: inline-block;
margin: 85px 0 0 20px;
}
.ac-device a img {
display: block;
}
.ac-device h3 {
position: absolute;
font-size: 2.5em;
left: 100%;
width: 100%;
top: 60%;
margin-left: 30px;
font-weight: 300;
color: #888;
}
.ac-grid {
position: absolute;
width: 620px;
left: 50%;
margin-left: -310px;
height: 100%;
z-index: 1000;
top: 0;
opacity: 0;
pointer-events: none;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: translateZ(-350px);
-moz-transform: translateZ(-350px);
transform: translateZ(-350px);
}
.ac-grid a {
width: 145px;
display: block;
position: relative;
float: left;
margin: 10px 5px;
cursor: pointer;
}
.ac-grid a img {
display: block;
width: 100%;
}
.ac-grid a span {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
text-transform: uppercase;
padding: 3em 1em 0;
z-index: 100;
color: #ddd;
background: rgba(0,0,0,0.4);
font-weight: 700;
opacity: 0;
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
transform: translateY(-5px);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.ac-grid a:hover span {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
.ac-wrapper.ac-gridview .ac-device {
-webkit-transform: translateZ(-350px);
-moz-transform: translateZ(-350px);
transform: translateZ(-350px);
opacity: .6;
}
.ac-wrapper.ac-gridview .ac-grid {
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);
transform: translateZ(0px);
opacity: 1;
pointer-events: auto;
}
 @media screen and (max-width: 63.875em) {
.ac-wrapper {
font-size: 60%;
width: 100%;
padding: 0 20px;
}
.ac-device {
margin: 0;
width: 100%;
}
.ac-device h3 {
width: 50%;
left: 290px;
}
.ac-wrapper h2 {
left: 308px;
padding: 0;
text-align: left;
margin-left: 30px;
}
}
 @media screen and (max-width: 39.8125em) {
.ac-grid {
width: 90%;
left: 5%;
margin-left: 0;
padding-top: 150px;
}
.ac-grid a {
width: 22%;
}
}
 @media screen and (max-width: 35.6875em) {
.ac-wrapper {
padding: 0 20px 100px;
}
.ac-wrapper h2 {
width: 100%;
text-align: center;
margin: 0 0 1em;
top: 0;
left: auto;
position: relative;
}
.ac-device {
margin: 0 auto;
width: 288px;
}
.ac-device h3 {
position: relative;
margin: 0;
left: auto;
width: 100%;
top: 100px;
display: block;
text-align: center;
}
}