@charset "utf-8";
/* CSS Document */


/*iPad*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1280px) { 
h1 {margin:0 auto;}
h2 {font-size:1.6em;}
section#home {padding:0 25px 25px;}
section#info .inner {text-align:center;}
section#info .left {width:100%}
section#info .image {background-position:center center; width:100%; float:none;}
section#info .left .about { width:50%; float:none; margin:40px auto;}
section#info .right {border:none; float:none; margin:0 auto; width:50%; clear:both; padding:0;}
section#info .right .press {text-align:left;}
section#info .right .press h3 {text-align:center;}

section#products .inner {width:94%; padding:20px; text-align:center;}
ul.products-nav li a {padding:10px 12px; margin:0 2px;}
section#products .desc {width:60%; display:block; clear:both; text-align:center; margin:20px auto; float:none;}
section#products .img, section#products .img img {float:none; text-align:center; float:none; width:auto;}
section#products .img img {float:none;}

section#consulting .three {width:30%}
section#consulting .three img {top: -50px; width: 60%;}

section#gray .inner, section#gray {padding:0; text-align:center; margin:0 auto; float:none;}
section#gray .inner {padding-bottom:20px;}
section#gray p.left, section#gray p, section#gray b {text-align:center; width:auto; clear:both; float:none; margin-top:0;}
section#gray b {font-size:8em;}

section#monitoring .two .monitor {width:auto; background-size:95% auto !important;}
section#monitoring .two {margin:40px 0; width:40%;}
section#customers .three {width:45%;}
.odometer-inside {right: 45px; top: 118px;}
.odometer.odometer-auto-theme .odometer-digit, .odometer-digit {font-size: 6em; line-height: 82%;}
section#monitoring .two .monitor b {bottom: 65px; font-size: 1em; right: 48px;}
section#monitoring .two i {margin-top:0;}


section#intro .inner.about {padding:0;}
section#about .inner {width:70%;}
section#technology .inner {top:0; padding-top:40px;}
#sequence {max-height:400px; height:270px;}
.sequence-next {right:5%; top:15%;}
.sequence-prev {left:5%; top:15%;}
img.sequence-next, img.sequence-prev {height: 35px !important; width: 35px;}

.animate-in .title {width:35%; left:50%; top:0%;}
.animate-in .tech-image {left:18%; text-align:center; top:0%; height:auto; width:20%;}
.animate-in .subtitle {width:35%; left:50%; top:15%; font-size:1.8em;}

.animate-out .title {width:35%; left:50%; top:0%!important;}
.animate-out .tech-image {left:18%; text-align:center; top:0%;}
.animate-out .subtitle {width:35%; left:50%; top:15%; font-size:1.8em;}

.title {top:0;}
.subtitle {top:15%; font-size:1.8em;}
.tech-image {top:0; width:20%!important; height:auto;}

section#contact .inner {width:100%;}
section#contact .three {margin-right: 0 !important; margin-left: 0 !important; font-size:0.9em; padding: 0 20px; width: 28% !important;}
section#contact .left, section#contact .right {width:100%;}
section#contact .three.uptodate input[type="text"] {width:100%;}
section#contact .three.uptodate input[type="submit"] {width:auto;}

}

/*iPad Portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1280px) 
and (orientation : portrait) { 
section#consulting .three img {top: -50px; width: 92%;}
a.logo {margin-left:10px;}
}
/*iPad landscape*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
section#consulting .three img {top: -50px; width: 60%;}

.odometer-inside {right: 66px; top: 119px;}
.odometer.odometer-auto-theme .odometer-digit, .odometer-digit {font-size: 7.5em; line-height: 82%;}
section#monitoring .two .monitor b {bottom: 42px; font-size: 1.2em; right: 82px;}
section#monitoring .two .monitor {width:auto; background-size:85% auto !important;}

.animate-in .tech-image {left:18%; text-align:center; top:0%; height:auto; width:30%;}
}

/*iPhone*/

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 767px){ 

nav a.logo {background-size: 80% auto; height: 46px; margin: 0 10px 0 5px; padding: 0 10px; width: 100px;}

section#info .inner {padding-top:0;}
section#info .left {width:100%;}
section#info .image {background-position: center top; background-size: 100% auto; max-height: 210px; width: 100%;}
section#info .left .about {width:100%; text-align:center;}
section#info .right {width:100%; margin-top:35px;}
section#info .right .press h3 {text-align:center;}
section#products {padding-bottom:0;}
section#products .inner, section#products .img {width:100%; float:none; padding-top: 10px;}
section#products .img img {width:80%; float:none;}
section#products .desc {width:80%; float:none; margin:20px auto 0; text-align:center;}
section#products .desc h3 { line-height:100%;}
.coming-soon {display: block; float: none; margin: 20px auto 0; width: 50%;}

section#intro.products {width:100%; padding:0;}
section#intro.products .inner {width:80%; padding-top: 25px;}
.tinynav { display: block; }
#nav { display: none }

h1 {width:100%; font-size:2em; margin-top:0;}
h2{font-size:1.4em; width:100%;}
section#home {padding:0 25px 25px;}
section#customers .three {width:100%; padding:0;}
section#customers .three a.customer-logo img {max-width:50%;}
section#customers .three a.customer-logo {height:100px;}

section#intro .inner.about {padding:0;}
section#about .inner {padding-bottom:80px;}
section#about h4 {font-size:1.4em; padding:0 20px;}
section#technology .inner {max-width: 1380px; padding-bottom: 40px; padding-top:20px;}
.tech-image {max-width:50%; left:0;}
.title {text-align:center; left:0!important; right:0; top:58%; width:100%; margin-top:10px;}
.subtitle {left: 30px !important; right: 0; text-align: center !important; top: 71%; width: 80%; font-size:1.8em;}
section#technology p {text-align:center;}
img.sequence-next, img.sequence-prev {max-width: 25px; padding: 0; top: 42%;}
#sequence {overflow:visible; max-height:370px;}
.animate-out .tech-image, .animate-in .tech-image {left:0; right:0; margin:0 auto;}

section#contact .three {width:100%!important; margin:0!important; text-align:center;}
section#contact p, section#contact h3 {text-align:center; margin:0; padding:0 20px;}
section#contact .three.uptodate input[type="text"] {float:none; width:70%;}
section#contact .three.uptodate input[type="submit"] {float:none;}
section#contact .left, section#contact .right {float: none; margin: 0 auto; text-align: center; width: 90%;}
section#contact .form-buttons-wrapper {margin: 0 auto !important; text-align: center!important;}
section#contact .three.message iframe, section#contact .three.uptodate iframe {margin: 5px 0 0; width: 85%!important;} 
section#contact .three.message iframe {min-height: 100%; height:330px!important;}
section#contact .three.uptodate iframe {min-height: 100%; height:120px!important; padding-top:10px;} 
section#contact .three.address {margin-bottom:40px!important;}


section#footer .inner {padding:10px 0 0 0; width:100%;}
section#footer .left {width:100%; padding:0; text-align:center;}
section#footer .logo {background:url(../images/attentio-logo-footer.png) center center no-repeat; width:100%;}
section#footer .copyright {font-size: 0.8em; margin:5px 0 10px; text-align: center; width: 80%; float:none;}

section#footer ul {float: none; font-size: 0.8em; margin: 0; text-align: center; width: 100%; margin-bottom:5px; display:none;}
section#footer ul li {text-align:center; display:inline-block;}
section#footer ul li a {margin: 5px 5px 0 0; padding-right: 5px;}
section#footer .right {float: none; padding:0; text-align: center; margin-bottom:10px; }
section#footer .fa {font-size: 1.7em; margin-bottom: 5px; margin-right: 5px; margin-top:0;}

section#consulting .three {width:100%;}
section#consulting .inner {width:80%; padding: 35px 0 25px;}
section#consulting .three.left h2, section#consulting .three.left p, section#consulting .three.right h2, section#consulting .three.right p {text-align:center;}
section#consulting .three img {position:relative; margin:20px auto 10px; max-width:90%;}
section#gray .inner {padding:0; width:80%;}
section#gray h2 {margin:0; width:100%; font-size:1.4em;}
section#gray p, section#gray b {width:100%; text-align:center!important; font-size:1.7em;}
section#gray p {font-size:1.6em;}
section#gray b {font-size: 5em; line-height: 70%; margin-top: 10px;}
section#gray {padding:25px 0;}
section#monitoring .inner {width:80%;}
section#monitoring .two {width:100%; margin-top: 25px;}
section#monitoring h2 {font-size:2em;}
section#monitoring .two .monitor {width:100%; background-size:90% auto!important; max-height: 200px; margin-top:0;}
section#monitoring .two i {margin-top:0;}
section#monitoring .two .monitor b {bottom: 45px; right: 40px; font-size:0.9em;}
.odometer-inside {right: 40px; top: 88px;}
.odometer.odometer-auto-theme .odometer-digit, .odometer-digit {font-size: 5em; letter-spacing: -3px; line-height: 80%;}

a.logo {display:none!important;}
#pull img {width:25%;}

nav { height: auto;}
nav ul {width: 100%; display: block; height: auto; }
nav li { width: 100%; float: left; position: relative;}
nav li a {border-bottom: 1px solid #FFFFFF;}
nav a {text-align: left; width: 100%; padding:10px 20px;}




/*iphone landscape*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 640px) 
and (orientation : landscape) { 
section#monitoring .two .monitor {background-size: 60% auto !important;}
.odometer-inside {right: 103px;}
section#monitoring .two .monitor b {right:105px;}
nav {border-bottom: 0;}
nav ul {display: none; height: auto;}
nav a#pull {display: block; background-color: #FFFFFF; width: auto; position: relative;}
nav a#pull:after { content:""; background: url('../images/nav-icon.png') no-repeat center center; width: 30px; height: 30px; display: inline; position: absolute; right: 10px; top: 5px;}
#pull img {width:15%;}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
nav {border-bottom: 0;}
nav ul {display: none; height: auto;}
nav a#pull {display: block; background-color: #FFFFFF; width: auto; position: relative;}
nav a#pull:after { content:""; background: url('../images/nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 10px; top: 10px;}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
nav li {display: block; float: none; width: 100%;}
}