/************************

-- Base Code --

*************************/

html {
    height:100%;
    overflow-x:hidden;
    width:100%;
}
body {
    padding:0px;
    margin:0px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    font-family:'proxima-nova', Open Sans, Helvetica, Arial, sans-serif;
    background-color:#024169;
    height:100%;
    width:100%;
}
.main-container {
    overflow-x:hidden;
}
img {
    width:100%;
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:  -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
}

/*** TYPE ***/

h1 {
    font-family:'proxima-nova', Open Sans, Helvetica, Arial, sans-serif;
    font-size:7.361em;
    font-weight:400;
}
h2 {
    font-family:'proxima-nova', Open Sans, Helvetica, Arial, sans-serif;
    font-size:4.209em;
    font-weight:600;
}
h3 {
    font-family:'proxima-nova', Open Sans, Helvetica, Arial, sans-serif;
    font-size:3.157em;
    font-weight:600;
    margin-bottom:20px;
}
h5 {
    font-family:'proxima-nova', Open Sans, Helvetica, Arial, sans-serif;
    font-size:2.353em;
    font-weight:600;
}
p.large {
    font-size:1.769em;
    line-height:1.3em;
}
p {
    font-family:'proxima-nova', Open Sans, Helvetica, Arial, sans-serif;
    font-size:1.33em;
    line-height:1.66em;
}
.spaced {
    letter-spacing:2px;
}

/*** COLOURS ***/

.white {
    color:#fff;
}
.black {
    color:#000;
}
.orange {
    color:#ef7f12;
}
.midnight-blue {
    color:#041c2c;
}
.dk-blue {
    color:#00263e;
}
.blue {
    color:#024169;
}
.ffltblue {
    color:#2c97de;
}
.ffblue {
    color:#212e39;
}
.cloudy {
    color:#96acba;
}
.dk-grey {
    color:#3d4a52;
}
.grey {
    color:#d8dadc;
}
.lt-grey {
    color:#f5f6f7;
}

/*** LINKS AND BUTTONS ***/

a {
    transition:all 0.3s ease-in-out;
    cursor:pointer;
    font-family:'proxima-nova', Open Sans, Helvetica, Arial, sans-serif;
    text-decoration:none;
}
a.text {
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2;
    font-size:1.15em;
    display:inline-block;
}
a.text:hover {
    text-decoration:none;
    transform:translateY(-2px);
}
a.text .dk-blue:hover {
    color: ;
}
a:visited {
    text-decoration:none;
}
a:after {

}
a:hover {
}
.buttn {
    border-radius:3px;
    display:inline-block;
    text-align:center;
    cursor:pointer;
    transition:all 0.3s ease-in-out;
}
.buttn-rt {
    margin-left:15px;
}
.buttn.large h5 {
    padding:25px;
    font-size:1.33em;
}
.buttn.ltblue {
    background-color:#2c97de;
}
.buttn.blue {
    background-color:#024169;
}
.buttn.dkblue {
    background-color:#00263e;
}
.buttn.ghost-ltbl {
    border:2px solid #2c97de;
}
.buttn.ghost-dkblue {
    background:none;
    border:3px solid #00263e;
    border-radius:5px;
}
.buttn.ghost h5 {
    padding:18px;
}
.buttn.ghost.large h5 {
    padding:22px;
}
.buttn.ghost-dkblue:hover {
    border-color:#024169;
    background-color: rgba(2,65,105,0.6);
}
.buttn h5 {
    padding:20px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:1em;
    color:#fff;
    margin:0px;
    line-height:0px;
    transition:all 0.5s ease-in-out;
}
.buttn:hover {
    transform:translateY(-3px);
}
.buttn.dkblue:hover {
    background-color:#024169;
}
.buttn.blue:hover {
    background-color:#2c97de;
}
.buttn.ltblue:hover {
    background-color:#78c9ff;
}

/*** SPACING ELEMENTS ***/

.v-space-lg {
    margin-top:10%;
    margin-bottom:10%;
}
.v-space {
    margin-top:5%;
    margin-bottom:5%;
}
.v-space-sm {
    margin-top:2.5%;
    margin-bottom:2.5%;
}
.v-space-510 {
    margin-top:5%;
    margin-bottom:10%;
}
.no-marg {
    margin-top:0px !important;
    margin-bottom:0px !important;
}
.no-marg-top {
    margin-top:0px !important;
}
.no-marg-bot {
    margin-bottom:0px !important;
}
.margtop-16 {
    margin-top:16%;
}
.margtop-10 {
    margin-top:10%;
}
.margtop-5 {
    margin-top:5%;
}
.margtop-4 {
    margin-top:4%;
}
.margtop-3 {
    margin-top:3%;
}

/*** BACKGROUNDS ***/

.white-bg {
    background-color:#fff;
}
.grey-bg {
    background-color:#f5f6f7;
}
.midnight-bg {
    background-color:#041c2c;
}
.dkblue-bg {
    background-color:#00263e;
}
.blue-bg {
    background-color:#024169;
}
.white-bg {
    background-color:#fff;
}
.orange-bg {
    background-color:#ef7f12;
}
.angled {
    transform:skewY(8deg);
    transform-origin:0;
    margin-bottom:10%;
}
.angled.top {
    margin-top:-20%;
}
.angled.top .container {
    margin-top:15%;
}
.angled .container {
    transform:skewY(-8deg);
}

/*** NAV BAR ***/

.nav-bar {
    height:80px;
    background-color:none;
    z-index:100;
    width:100%;
    position:fixed;
    top:0px;
    transition:all 0.5s ease-in-out;
}
.logo img {
    image-rendering:optimizeQuality;
}
.nav-bar .row {
    margin-top:19px;
}
.nav-bar a.text {
    color:#fff;
    margin-top:10px;
    padding-right:20px;
}
.nav-bar a.text:hover {
    color:#2c97de;
}
.nav-bar.active {
    background-color:#00263e;
    -webkit-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    transition:all 0.5s ease-in-out;
}
.nav-bar .buttn.resp-show {
    display:none;
}
.footer {
    width:100%;
    background-color:#00263e;
}
.footer .container {
    margin-top:2%;
    margin-bottom:2%;
}
.footer-info {
    color:#fff;
    border-top:1px solid #606567;
    padding-top:20px;
    margin-top:4%;
}
.footer-info a.text {
    color:#2c97de;
    padding-left:8px;
    padding-right:8px;
}
.footer-info a.text:hover {
    color:#fff;
}
.footer-info p{
    font-size:1em;
    margin-top:10px;
}
.footer-logo img{
    image-rendering:optimizeQuality;
}

/************************

-- Animations --

*************************/

@keyframes fade-in {
    from {opacity:0;}
    to {opacity:1;}
}
@keyframes slide-left {
    from {width:0px;}
    to {width:117px;}
}
@keyframes slide-down {
    from {height:0px;}
    to {height:495px;}
}
@keyframes lightpulse {
    0% {transform:scale(1);}
    50% {transform:scale(1.25);}
    100% {transform:scale(1);}
}
@keyframes top-move {
    from {top:0;}
    to {top:20%;}
}
@keyframes wifi-fade {
    0% {opacity:0.2;}
    50% {opacity:1.0;}
    100% {opacity:0.2;}
}

/************************

-- Homepage --

*************************/

.hero {
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
    background-color:#2c97de;
}
.hero .container {
    position:relative;
    z-index:3;
}
.hero .container .row {
    margin-top:10%;
    margin-bottom:15%;
}
.hero-content {
    animation: fade-in 0.8s;
}
.hero-content .buttn {
    margin-top:2%;
}
.hero-video {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0.1;
    z-index:1;
    overflow:hidden;
}
.hero-video video {
    min-width:100%;
    min-height:100%;
    
    width:auto;
    height:auto;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.content-logo {
    width:20%;
}
.neg-marg {
    margin-top:-12%; 
}
.oshkosh-text {
    margin-top:10%;
    font-weight:500;
}
.scout {
    text-align:center;
    position:absolute;
    right:0;
    top:9%;
    right:10%;
    z-index:1;
    width:24%;
}
.scout img {
    width:100%;
}
.pointer-line {
    width:200px;
    height:3px;
    transform:skewY(20deg);
    position:absolute;
    z-index:3;
}
.pointer-line.pos-1 {
    right:-18%;
    top:29%;
}
.pointer-line.pos-2 {
    top:70%;
    left:-35%;
    transform:skewY(-35deg);
}
.pointer-line.pos-2 .circle-border {
    left:-12%;
    right:0px;
    transform:skewY(35deg);
}
.pointer-line .circle-border {
    transform:skewY(-20deg);
    position:absolute;
    right:-12%;
    top:-11px;
}
.pointer-line.orange {
    background-color:#ef7f12;
}
.pointer-line.ffblue {
    background-color:#2c97de;
}
.circle-border {
    width:25px;
    height:25px;
    border-radius:50%;
    
}
.pointer-line.orange .circle-border {
    border:3px solid #ef7f12;
}
.pointer-line.ffblue .circle-border {
    border:3px solid #2c97de;
}
.circle-inner {
    background-color:#fff;
    width:50%;
    height:50%;
    border-radius:50%;
    margin-left:23.5%;
    margin-top:25%;
}
.spacer {
    width:100%;
    height:500px;
}
.spacer-sm {
    width:100%;
    height:250px;
}
.spacer-xs {
    width:100%;
    height:100px;
}
.text-fades {
    opacity:1;
}
.text-fades p {
    width:90%;
}
.off {
    opacity:0;
}
.on {
    transition:opacity 1s ease-in-out;
    opacity:1;
}
.active {
    display:block !important;
    opacity:1 !important;
    transition:opacity 1s ease-in-out;
}

/** Situational Awareness **/


.dimensions-height {
    opacity:0;
    display:none;
    position:absolute;
    right:33%;
    top:18%;
    width:30px;
}
.dimensions-height h5 {
    position:absolute;
    top:40%;
    left:-22px;
    padding:5px;
    background-color:#024169;
}
.height-lines {
    width:3px;
    height:497px;
    background-color:#2c97de;
    animation:slide-down 2s;
}
.height-lines:before {
    content:'';
    display:block;
    width:20px;
    height:3px;
    background-color:#2c97de;
    position:absolute;
    left:-9px;
}
.height-lines:after {
    content:'';
    display:block;
    width:20px;
    height:3px;
    background-color:#2c97de;
    position:absolute;
    left:-9px;
    bottom:0px;
}
.dimensions-width {
    display:none;
    opacity:0;
    position:absolute;
    right:42%;
    bottom:10%;
}
.dimensions-width h5 {
    position:absolute;
    padding-left:14px;
    padding-right:7px;
    top:5px;
    left:7%;
    background-color:#024169;
}
.width-lines {
    width:121px;
    height:3px;
    background-color:#2c97de;
    animation:slide-left 2s;
}
.width-lines:before {
    content:'';
    width:3px;
    height:20px;
    background-color:#2c97de;
    position:absolute;
    left:0px;
    bottom:-9px;
}
.width-lines:after {
    content:'';
    width:3px;
    height:20px;
    background-color:#2c97de;
    position:absolute;
    right:0px;
    bottom:-9px;
}
.pen {
    max-width:205px;
    float:right;
    position:absolute;
    top:13%;
    right:16%;
    opacity:0;
    transition:opacity 1s ease-in-out;
    transition-delay:1.5s;
}

/** Just Add Power **/

.power-cable {
    width:220px;
    bottom:-44%;
    left:23px;
    position:absolute;
    opacity:1;
    transition:all 1.5s ease-in-out;
    z-index:2;
}
.power-cable.active {
    transform:translateY(-22%);
}
.power-cable img {
}
.scout-max {
    max-width:292px;
}
.cable-scout {
    position:relative;
}
.cable-scout.active {
    margin-bottom:25px;
}
.cable-scout .scout-max {
    z-index:3;
    position:relative;
}

/** Access FIS-B Weather **/

.green-light {
    width:20px;
    height:20px;
    background-color:#2be232;
    -webkit-box-shadow: 0px 0px 15px 2px rgba(27,194,32,1);
    -moz-box-shadow: 0px 0px 15px 2px rgba(27,194,32,1);
    box-shadow: 0px 0px 15px 2px rgba(27,194,32,1);
    border-radius:50%;
    -webkit-filter:blur(5px);
    filter:blur(5px);
    animation:lightpulse 2s infinite;
    opacity:0;
    z-index:2;
}
.green-light.active {
    position:absolute;
    top:35.5%;
    left:46%;
    opacity:1;
}
.green-light.active-2 {
    position:absolute;
    top:41%;
    left:44%;
    transition:opacity 0.5s ease-in-out;
    transition-delay:1s;
    opacity:1;
    z-index:4;
}

/** Dynamic Traffic Display **/

.textmarg-right {
    margin-left:10%;
}
.adsb-active {
    position:absolute;
    width:35%;
    z-index:3;
}
.adsb-ipad {
    position:absolute;
    width:36%;
    top:28%;
    left:19%;
    opacity:0;
    transition:opacity 0.5s ease-in-out;
    transition-delay:1s;
}

/** Made for ForeFlight **/

.video-container {
    position:absolute;
    background-color:#000;
    width:651px;
    height:489px;
    top:33px;
    left:68px;
    bottom:56px;
    z-index:4;
    opacity:1;
    border-radius:3px;
    border:2px solid #000;
}
.video-container video::-webkit-media-controls-start-playback-button {
  display: none!important;
}
.ipad-holder {
    width:786.5px;
    height:556px;
    margin:auto;
    text-align:center;
    position:relative;
}
.marg-offset {
    margin-top:-30%;
}

/** Perfect for Any Cockpit **/

.cockpit-holder {
    width:100%;
    position:relative;
    overflow:hidden;
}
.citation {
    background-image:url('../images/citationcockpit-full.jpg');
    background-size:cover;
    background-repeat:no-repeat;
    width:50%;
    height:800px;
    position:absolute;
    z-index:2;
    overflow:hidden;
    background-color:#024169;
    border-bottom-left-radius:inherit;
    border-top-left-radius:inherit;
}
.one-seven {
    background-image:url('../images/172cockpit-full.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    width:100%;
    height:800px;
    background-color:#024169;
    border-top-right-radius:inherit;
    border-bottom-right-radius:inherit;
}
.slider-divider {
    z-index:3;
    position:absolute;
    left:50%;
    width:5px;
    height:800px;
    background-color:#fff;
    cursor:all-scroll;
    -webkit-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.55);
}
.text-overlay {
    width:100%;
    background-color:rgba(0,0,0,0.8z);
    z-index:3;
    position:absolute;
    text-align:center;
    bottom:0px;
}
.overlay-content {
    width:50%;
    margin:auto;
    padding-top:15px;
    padding-bottom:15px;
}

/** Easy Cockpit Sharing **/

.wifi-symbols {
    position:absolute;
    top:50%;
    margin-top:-100px;
    left:50%;
    margin-left:-70px;
    width:140px;
    height:200px;
    z-index:3;
}
.wifi-symbols .symbol {
    background-image:url('../images/wifi-transp.png');
    background-size:100%;
    width:45px;
    height:45px;
    position:absolute;
    animation:wifi-fade 2s infinite;
    animation-delay:1s;
    opacity:0.2;
}
.symbol.A {
    top:0;
    left:0;
    transform:rotate(-65deg);
}
.symbol.B {
    top:0;
    right:0;
    transform:rotate(65deg);
}
.symbol.C {
    bottom:0;
    left:0;
    transform:rotate(245deg);
}
.symbol.D {
    bottom:0;
    right:0;
    transform:rotate(115deg);
}
.cockpit-sharing {
    float:right;
}

/** Flexible Power Options **/

.power-icons img{
    width:40%;
}

/** Lightbox **/

.lightbox {
    display:none;
    background-color:rgba(0,0,0,0.8);
    position:fixed;
    width:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:15;
}
.lightbox.active {
    display:block;
}
.lightbox-video {
    position:absolute;
    width:800px;
    height:488px;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    border:4px solid #2c97de;
    border-radius:5px;
}
.lightbox-close {
    position:absolute;
    width:800px;
    bottom:-17%;
    text-align:center;
}
.lightbox-video iframe {
    width:100%;
    height:100%;
}

/** Stratus vs Scout Comparison Table **/

table.stratus-comparison {
    border:2px solid #193c52;
    background-color:none;
}
table.stratus-comparison thead {
    background-color:#2c97de;
}
table.stratus-comparison thead td {
    text-transform:uppercase;
    font-weight:600;

}
table.stratus-comparison tr {
    text-align:center;
    vertical-align:middle;
}
table.stratus-comparison td {
    color:#fff;
    font-size:1.15em;
    width:17.5%;
    padding:15px;
}
table.stratus-comparison tr:nth-child(even) {
    background-color:#193c52;
}
table.stratus-comparison td:nth-child(1){
    width:30%;
    font-weight:500;
    text-align:left;
}
table.stratus-comparison tbody tr:last-of-type{
    height:115px;
}
table.stratus-comparison .checked {
    border-radius:50%;
    height:25px;
    width:25px;
    background-color:#39af48;
    text-align:center;
    margin:auto;
    position:relative;
}
table.stratus-comparison .checked:before {
    content:url('../images/checkmark.png');
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:30%;
    height:auto;
    z-index:3;
}
.stratus-scout {
    overflow-x:scroll;
}
.stratus-scout img {
    display:none;
}



/************************

-- Media Queries --

*************************/

@media all and (min-width:991px){
    .footer-logo img{width:70%;}
}

@media all and (max-width:1200px){
    .pen {max-width:165px; right:12%;}
    .pointer-line {width:184px;}
    .dimensions-height {top:16%; right:32%;}
    .height-lines {height:402px;}
    .dimensions-width {bottom:21%;}
    .dimensions-width h5 {padding-left:3px; left:0%;}
    .width-lines {width:100px;}
    .power-cable {width:185px; left:18px;}
    .power-cable.active {transform:translateY(-18%);}
    .wifi-symbols {width:120px; height:185px; margin-left:-60px;}
    .marg-offset {margin-top:-24%;}
    .buttn.v-space {margin-top:3%; margin-bottom:3%;}
    .hero-content .buttn-rt {margin-left:15px;}
    .buttn-rt {margin-left:0px;}
    
    @keyframes slide-down {from {height:0;} to {height:402px;}}
    @keyframes slide-left {from {width:0;} to {width:100px;}}
}
@media all and (max-width:991px){
    .pen {right:-20px; max-width:120px;}
    .dimensions-height {right:15%; top:15%;}
    .height-lines {height:300px;}
    .dimensions-height h5 {font-size:2em;}
    .dimensions-width h5 {font-size:2em;}
    .dimensions-width {bottom:29%; right:25%;}
    .width-lines {width:77px;}
    .margtop-16 {margin-top:8%;}
    .cable-scout {margin-bottom:16%;}
    .cable-scout.active {margin-bottom:18%;}
    .power-cable {width:145px; left:14px; bottom:-53%;}
    .power-cable.active {transform:translateY(-27%);}
    .green-light {width:12px; height:12px; -webkit-filter: blur(3px);}
    .pos-1 {display:none;}
    .wifi-symbols {height:175px; width:100px; margin-left:-50px; margin-top:-96px;}
    .wifi-symbols .symbol {width:35px; height:35px;}
    .margtop-10 {margin-top:0;}
    .ipad-holder {width:625px; height:auto;}
    .video-container {width:520px; left:53px; top:26px; height:391px;}
    .lightbox-video {width:750px;}
    .scout {right:3%; top:15%;}
    
    @keyframes slide-down {from {height:0;} to {height:300px;}}
    @keyframes slide-left {from {width:0;} to {width:77px;}}
}
@media all and (max-width:767px){
    .logo img {margin-top:5px; max-width:140px;}
    .dimensions-height {right:43%; top:55%;}
    .height-lines {height:340px;}
    .dimensions-width {right:61%; bottom:-9%;}
    .width-lines {width:85px;}
    .scout-dimensions {height:300px;}
    .scout-dimensions img {position:absolute; right:6%; top:-11%;}
    .pen {max-width:140px; right:0; top:49%;}
    .easy-setup {margin-top:22%; margin-bottom:0px;}
    h2 {font-size:3.129em;}
    h3 {font-size:2.353em;}
    h5 {font-size:1.769em;}
    .hero .container .row {margin-top:15%;}
    .scout-size {width:180px;}
    .cable-scout .scout-max {max-width:180px; left:50%; transform:translateX(-50%); margin-top:-19%;}
    .power-cable {left:48.5%; bottom:-70%; transform:translateX(-50%); width:190px;}
    .power-cable.active {transform:translateX(-50%) translateY(-19%);}
    .green-light.active-2 {top:28%; left:48%;}
    .easy-setup .row {margin-bottom:60px;}
    .v-space-510 {margin-top:0;}
    .row {padding-left:15px; padding-right:15px;}
    .cockpit-sharing {float:none; margin-top:20px;}
    .ipad-holder {width:400px;}
    .margtop-16 {margin-top:25%;}
    .video-container {width:331px; left:34px; top:18px; height:250px; overflow:hidden;}
    .video-container video {width:170%; height:200%; position:absolute; left:-30%; top:-70%;}
    .resp-sm {width:70%;}
    .power-icons img {width:25%; float:none !important; margin-left:20px;}
    .scout {display:none;}
    .buttn.v-space {margin-top:10px; margin-bottom:20px;}
    .buttn.large h5 {font-size:1em; padding:22px;}
    .buttn.ghost.large h5 {font-size:1em; padding:19px;}
    .hero-content .buttn-rt {margin-left:0px;}
    .nav-bar .buttn h5 {font-size:0.8em;}
    .lightbox-video {width:480px; height:390px;}
    .lightbox-close {width:480px; bottom:-30%;}
    .cockpit-sharing {max-width:385px;}
    
    @keyframes slide-down {from {height:0;} to {height:340px;}}
    @keyframes slide-left {from {width:0;} to {width:85px;}}
}
@media all and (max-width:500px){
    .dimensions-width {right:64%;}
    .dimensions-height {top:57%;}
}
@media all and (max-width:480px){
    .nav-bar .row {padding-left:0px; padding-right:0px;}
    .nav-bar .buttn.resp-hide {display:none;}
    .nav-bar .buttn.resp-show {display:inline-block;}
    .hero .container .row {margin-top:25%;}
    .logo img {margin-top:0px;}
    p.large {font-size:1.45em;}
    .oshkosh-text {margin-top:5%;}
    .angled .row {padding:0px;}
    .scout-dimensions {height:350px;}
    .scout-dimensions img {right:-13%; top:-7%;}
    .pen {right:-25px;}
    .dimensions-width {right:66%;}
    .dimensions-width h5 {padding-left:8px;}
    .dimensions-height {right:32%;}
    .height-lines {height:337px;}
    .dimensions-width {right:60%; bottom:-2%;}
    .width-lines {width:85px;}
    .cable-scout {margin-bottom:25%; width:100%; height:370px;}
    .power-cable {}
    .power-cable.active {transform:translateX(-50%) translateY(-27%);}
    .green-light.active-2 {}
    .wifi-symbols {width:90px; height:150px; margin-left:-45px; margin-top:-80px;}
    .ipad-holder {width:340px;}
    .video-container {left:29px; width:282px; border:1px solid #000; top:14px; height:213px;}
    .buttn.v-space {margin-top:0px;}
    .spacer-xs {height:30px;}
    .lightbox-video {width:320px; height:210px;}
    .lightbox-close {width:320px;}
    .footer-info {color:#00263e;}
    .footer-info a.text {padding-bottom:8px; padding-left:0px; padding-right:0px;}
    
    @keyframes slide-down {from {height:0;} to {height:337px;}}
    @keyframes slide-left {from {width:0;} to {width:85px;}}
}
@media all and (max-width:320px){
    .margtop-16 {margin-top:30%;}
    .ipad-holder {width:280px;}
    .video-container {left:24px; width:232px; top:12px; height:175px;}
}

.eu-banner {
    display: none;
    position: fixed;
    background: #008CBA;
    width: 100%;
    color: #fff;
    z-index: 99999999;
    padding: 20px;
    box-sizing: border-box;
    line-height: 1.4;
    font-size: 13px;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
    bottom: 0;
    opacity: 1;
}
.eu-banner .banner-item {
    width:100%;
    max-width:1260px;
    margin:auto;
    text-align:left;
    padding:5px;
    vertical-align:middle;
    overflow:hidden;
}
.eu-banner .banner-item a {
    color: #ffffff !important;
    text-decoration: underline;
}
.eu-banner .banner-item span {
    width:85%;
    float:left;
    display:inline-block;
    line-height:1.8;
    font-size:14px;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    font-weight:500;
}
.eu-banner .banner-item .banner-logo {
    float:left;
    width:5%;
    margin-right:2%;
}
.banner-logo img {
    width:100%;
    max-width:50px;
    vertical-align:middle;
}
.eu-banner button {
    color: #ffffff;
    border: 2px solid #ffffff;
    background: transparent;
    display:inline-block;
    border-radius: 4px;
    padding:10px;
    float:right;
    font-weight:bold;
    -webkit-font-smoothing:antialiased;
    letter-spacing:0.6px;
}
.eu-banner button:hover {
    background:#fff;
    color:#008cba;
}

/* Portrait */
@media all and (max-width:1070px){
    .eu-banner .banner-item .banner-logo {display:none;}
}
@media all and (max-width:768px){
    .eu-banner .banner-item span {width:100%; float:none;}
    .eu-banner button {float:left; margin-top:15px; margin-bottom:0px;}
}