@charset "UTF-8";
/* Responsive Layout */

@media only screen and (min-width: 1024px) and (max-width:1280px) {
.header .logo{max-width:300px; margin-top:22px;}
#nav ul li{margin-left:20px;}
#homeSlider{height:auto !important}
#homeSlider #videoContainer{position:relative}
.panel2{padding-bottom:50px;}
.panel2 .text{padding-top:4em}
.panel3 .text ul li{font-size:16px;}
.panel3 .text{padding:25px 0 0}
.panel3 .text.left ul li{padding-right:80px;}
.panel3 .text.right ul li{padding-left:80px;}
.swim-penguin{background-size:300px auto; height:145px;}
.panel4 .text-box .text{}
}

@media only screen and (min-width: 768px) and (max-width:1023px) {
h1, .h1 { font-size:50px;}
h2, .h2 { font-size:30px;}
h3, .h3 { font-size:22px }
h1, h2, h3, h4, h5, h6 {letter-spacing:1px;}
p{font-size:16px;}
.header .logo{width:77px; height:60px;margin:20px 0 0}
.header .logo a{width:77px; height:60px; background:url(../images/logo-icon-hi.png); background-repeat:no-repeat; background-size:77px 60px; display:block;}
.header .logo img{display:none}
#nav ul li{margin-left:20px;}
#homeSlider{height:auto !important}
#homeSlider #videoContainer{position:relative}
.panel1 .text{padding:0px 0 0}
.panel1 .text .btn{margin:0}
.panel2 {padding-bottom:50px;}
.panel2 .desktop-pic{width:100%; margin:40px 0 0}
.panel2 .text{padding:3em 0 0}
.panel3 .text ul li{font-size:16px; padding:40px 0 30px}
.panel3 .text{padding:0}
.panel3 .text.left ul li{padding-right:80px;}
.panel3 .text.right ul li{padding-left:80px;}
.swim-penguin{background-size:300px auto; height:145px;}
.title p br{display:none}
.panel6 .text-box{padding-top:30px;}
.panel6 h2{font-size:22px; margin-bottom:10px;}
.panel6 .favorite-apps li{width:50%; margin:0 0 15px;}
.panel6 .favorite-apps h5{padding-left:80px; text-align:left}
.panel6 .penguin-img{margin-top:0; width:70%}
.panel7 .casestudy .detail p{min-height:160px;}
.panel8 .start-form{padding:0}
}

@media only screen and (max-width:767px) {
body{font-size:16px;}
p{font-size:16px; line-height:24px;}
h1{font-size:26px;}
h2{font-size:22px;}
.top-nav {margin-top:25px;}
.top-nav ul li{ display:none}
.top-nav ul li.last{ display:block}
.top-nav ul li.last a{ font-size:14px; font-weight:500; padding:0 15px;}
.header{min-height:80px;}
.header .logo{width:77px; height:60px;margin:10px 0}
.header .logo a{width:77px; height:60px; background:url(../images/logo-icon-hi.png); background-repeat:no-repeat; background-size:77px 60px; display:block;}
.header .logo img{display:none}
#nav{ display:none}
#homeSlider{height:auto !important}
#homeSlider #videoContainer{position:relative}
.banner-intro h1{font-size:20px; line-height:22px; margin:10px 0}
.banner-intro p{font-size:13px; line-height:20px;}
.banner-intro .action{margin-top:10px;}
.banner-intro .action a.try-btn{width:auto; height:30px; line-height:30px; font-size:13px; padding:0 15px; margin:0 5px; border-radius:3px;}
.banner-intro .action a.play-btn{background-position:0 0; padding:0 0 0 35px; font-size:13px;height:30px; line-height:30px; margin:0 5px; }
.banner-intro .action a.play-btn:hover{background-position:0 0}
.panel1{background-size:100% auto; background-position:left bottom; background-color:#cee4ec; padding-top:30px;}
.panel1 .text{padding:0 0 30px;}
.panel1 .slide-in-left{}
.panel2 .text{ width:100%; float:left; padding:40px 0 0px}
.panel2 .desktop-pic{width:100%; margin-top:40px}
.panel3{padding:50px 0 30px;}
.panel3 .title{margin-bottom:20px}
.panel3 .modules{width: 100%; max-width: 470px; overflow: hidden; margin: auto}
.panel3 .col-sm-4{width:100%; float:left;}
.panel3 .col-sm-4.col{width:50%;}
.panel3 .text ul li{font-size:14px; padding:15px 0 30px; display:block; min-height:80px;}
.panel3 .text ul li .fa{width:50px; height:50px; line-height:50px; font-size:20px;}
.panel3 .text ul li.icon7 .fa{font-size:18px;}
.panel3 .text ul li.icon8 .fa{font-size:26px;}
.panel3 .text.left ul li .fa{left:0}
.panel3 .text{padding:0}
.panel3 .text.left ul li{ padding-right:0; padding-left:60px; text-align:left}
.panel3 .text.right ul li{ padding-right:0; padding-left:60px; text-align:left;}
.swim-penguin{background-size:150px auto; height:75px;}
.panel4 { background:none; }
/*.panel4 .text-box{background: url(../images/logo-bg.jpg) no-repeat 0 0 #cb4329; background-size:cover; width:100%; float:left; position:relative; top:0%; transform:none; -webkit-transform:none; -moz-transform:none; text-align:center; padding:30px 15px;} <-- Original*/
.panel4 .text-box{background: url(../images/logo-bg.jpg) no-repeat 0 0 #cb4329; background-size:cover; width:100%; float:left; position:relative; top:0%; transform:none; -webkit-transform:none; -moz-transform:none; text-align:center; padding:30px 15px; height:100%; top:0% !important;} /*No Video*/
.panel4 .text-box .text{padding:0}
.panel4 .video{width:100%; float:left;}
.panel5 {}
.title p br{display:none}
.panel5 .action{margin-top:15px}
.panel6 .col-md-9.col-sm-8{width:100%; float:left;}
.panel6 .col-md-3.col-sm-4{width:100%; float:left;}
.panel6 .favorite-apps{	margin:15px 0 0;}
.panel6 .favorite-apps li{width:100%; margin:0 0 20px;}
.panel6 .favorite-apps h5{text-align:left; padding-left:70px; font-size:15px;}
.panel6 .penguin-img{margin-top:0; padding:0; text-align:center}
.panel6 .penguin-img img{max-width:150px;}
.panel7{padding-bottom:0}
.panel8{padding:30px 0;}
.panel8 .start-form input[type="text"]{margin-bottom:20px;}
.panel8 .submit-btn{text-align:center}
.panel8 .start-form input[type="submit"]{width:auto; padding:0 30px;}
.footer .footer-col{ margin:15px 0; float:left; width:100%}
.copyright{margin-top:2em}
}
@media only screen and (min-width:480px) and (max-width:767px) {
h1{font-size:28px;}
h2{font-size:24px;}
.banner-intro h1{font-size:30px; line-height:36px; margin:10px 0}
.banner-intro p{font-size:18px; line-height:24px;}
.banner-intro .action{margin-top:20px;}
.panel3 .text ul li{padding:20px 0 20px;}
.panel6 .col-md-9.col-sm-8{width:75%;}
.panel6 .col-md-3.col-sm-4{width:25%; }
.panel6 .favorite-apps{	margin:15px 0 0;}
.panel6 .favorite-apps li{width:50%; margin:0 0 20px;}
.panel6 .penguin-img{margin-top:0;}
.panel6 .penguin-img img{max-width:100%;}
}