#banner { overflow:hidden; padding: 0; border: 7px solid #8c8c8c; border-width: 7px 0; background: #8daed6; background: repeating-linear-gradient( to right, #92b1d9, #92b1d9 10px, #8daed6 10px, #8daed6 20px); color: white; padding-bottom:-25px; }
.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-device { float:right; background: url(../../img/desktop.png) no-repeat; width: 50%; height: auto; 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 { background:#1d84c7 ; width: 100%; display: inline-block; position: relative; overflow: hidden; margin: 162px 0 0 0px; }
.ac-device a img { display: block; position: absolute; min-width:100%; }
#banner header { padding:75px 75px 0;  }
#banner header { position:relative; width:100%; }
#banner header h2 { font-size: 2.5em; right: 100%; width: 100%; top: 25px; font-weight: 300; color:white }
#banner header p { font-size: 1.2em; right: 105%; width: 95%; top: 85px; font-weight: 300; color:white }
.ac-device h3 {padding-left:75px; padding-right:50px;  position: absolute; font-size: 2.5em; right: 120%; width: 80%; font-weight: 300; color:white }
.ac-device nav { padding-left:75px; position: absolute; top: 300px; right: 100%;  width: 100%; }
.ac-device h3 { right:100%; top:180px; width:100%;  }
.ac-device nav span { display: block; font-size: 1em; font-weight: 300; cursor: pointer; color: #fff; background: #92b1d9; margin: 2px; float: left; width: 40px; height:40px; line-height:36px; text-align: center; border:2px solid white; border-radius:50%; }

.ac-grid { position: absolute; width: 660px; left: 50%; margin-left: -320px; height: 100%; z-index: 1000; top: 75px; 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: 200px; 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; line-height:1.3em; text-align:center; padding: 1em 1em 0; z-index: 100; color: #ddd; background: rgba(0,0,0,0.8); 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: .2; }

.ac-wrapper.ac-gridview .ac-grid { -webkit-transform: translateZ(0px); -moz-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; pointer-events: auto; }


@media only screen and (max-width : 1100px) {
.ac-device h3 { top:140px; }
}
@media only screen and (max-width : 900px) {
.ac-device h3 { font-size: 2em; }	
.ac-device nav { top:250px; }
}
@media only screen and (max-width : 800px) {
.ac-device h3 { top:100px; padding-right: 25px;}	
}
@media only screen and (max-width : 700px) {
.ac-device h3 { font-size: 1.5em; }	
.ac-device nav { top:200px; }
}
@media only screen and (max-width : 600px) {
.ac-device { width:90%; margin-top:160px;  }
#banner header p { width:100%; }
#banner header h2 { font-size:2em; }
.ac-device h3 { right:0; top:-45%; z-index:9999; font-size: 2.5em; padding:25px; }
.ac-device nav { padding:0;  right:0; left:35%; z-index:9999; top:auto; bottom:20px; }
.ac-device a { padding-bottom:250px; }
.ac-grid a { width: 150px;  }
.ac-grid { width:500px; margin-left: -250px;}
.ac-grid a span { font-size:.8em; padding: .5em .5em 0;}
}
@media only screen and (max-width : 500px) {
.ac-grid a { width: 200px; margin:0 0 2px; }
.ac-grid { width:200px; margin-left: -100px; top:0;}
.ac-grid a span { font-size:1em; padding: 1em 1em 0;}
}
@media only screen and (max-width : 400px) {
#banner header { padding: 75px 35px 0; }
.ac-device h3 { right:0; top:-40%; z-index:9999; font-size: 1.8em; padding:25px; }
}