/* ==== Google font ==== */
@import url('http://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900');
@import url('http://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700');


.float-right {float:right;}
.float-left {float:left;}

h3.call {margin:0;}

body {overflow-x:hidden;}

.row {margin:0;}

.call-box-01 {display:block; height:auto; background-color:rgb(230,230,232); color:#666; margin: 0 0 20px; padding: 5px 0; text-align: center;}

.header {margin:0 0 20px;}
.header .branding h1{display:block; margin:0 auto; text-align:center;}
.header .branding h1 img{width:auto; max-width:294px; height:auto;}
.header .call-box-02 {display:none;}
.header .call-box-02 h3{font-size:20px;}

.entry-title {display:none;}

button.consult {display:block; background:#00b7f1; color:#fff; margin-top:10px;}
button.consult:hover {background:#333 !important; color:#fff!important;}
button:focus {outline:none;}

nav {display:block; height:auto; background-color:#333;}
nav div {display:block; max-width:1200px; margin:0 auto;}
nav ul {text-align:center; padding:0 !important; margin:0 !important;}
nav ul li {display:inline-block;}
nav ul li a {display:block; padding:0 10px; line-height:50px; color:#fff; font-family:'Titillium Web', sans-serif; font-size:14px; text-decoration:none !important;}
nav ul li a:hover { background:#00b7f1; color:#fff; text-decoration:none;}
nav ul li a:visited {color:#fff !important;}
nav ul li a:active {color:#fff !important;}
nav ul li.active a{ background:#00b7f1; color:#fff; font-weight:400;}


#myCarousel aside {display:block; margin:0 auto; padding:20px 0;}
#myCarousel aside h2 {color:#00b7f1; text-align:center; text-transform:uppercase; margin:10px 0; font-size:26px;}
#myCarousel aside h2.special {color:#00b7f1;}
#myCarousel aside h2 span{color:#666; font-weight:400; text-transform:lowercase; font-size:24px;}
#myCarousel aside button {float:none; display:block; margin:0 auto;}

.carousel img {
  width: 100%;
}

#carousel-02 {margin-top:40px; clear:both;}
#carousel-02 img {top:0 !important;}
img.carousel-center {margin-top:-40px;}

hr.bullets-01 {border-top:solid 1px #ccc; width:100%; max-width:960px; margin-top:400px;}
.bullets-01 {margin-bottom:40px;}
.bullets-01 img {float:left; margin:0 5px 20px 0;}

h2 {font-size:30px; font-family:'Titillium Web', sans-serif; text-align:center; color:#666; margin:60px 0 40px 0;  font-weight:700;}
.content p {font-size:16px; font-family:'Open Sans', sans-serif; text-align:justify; color:#888; font-weight:400;}
.what-we-do p {width:96%; padding:0 2%; margin:0 auto 15px;}

.marketing {background:#eee; display:block; padding-bottom:40px;}
.marketing ul {margin-top:70px; margin-left:10%;}
.marketing li{font-family:'Titillium Web', sans-serif; font-size:20px; list-style:url(../images/list.jpg); line-height:46px;}
.marketing img {width: 80%; *width:auto; *height:auto; max-width: 575px; height:auto; display:block; margin:0 auto;}

.funnel {display:block; padding:40px 0;}
.funnel img{display:block; margin:0 auto;}

.software {background:#1e8bc3;padding-bottom:40px; display:block;}
.software h2{color:#fff;}
.software img {display:block; float:none; width:90%; *width:inherit; max-width:654px; height:inherit; }
.software ul {margin-left:10%; clear:both;}
.software li {list-style:none; color:#fff; font-family:'Titillium Web', sans-serif; margin:20px 0; font-size:16px; font-weight:500;}
.software li img {padding:0px; margin-top:-5px; margin-right:10px; width:inherit; float:left;}

.team {display:block; text-align:center; background-color:#555555;}
.team p {color:#fff; padding:30px 0; font-family:'Titillium Web', sans-serif; font-size:18px; line-height:30px; width:90%; margin:auto;}

.clients a {opacity:0.3; margin-bottom:40px;}
.clients a img {display:block; margin:0 auto;}
.clients a:hover {opacity:1;}
.clients .container {margin:40px auto;}

button.form-request {display:block; height:50px; width:300px; background-color:#00b7f1 !important; border-radius:8px; color:#fff; border:none; font-size:18px; font-family:'Open Sans', sans-serif; margin:0 auto 40px;}


#footer {display:block; padding:40px 0; background-color:#333; color:#fff; font-family:'Titillium Web', sans-serif; clear:both;}
#footer h4 {font-weight:bold; margin-bottom:20px;}
#footer p {font-size:16px;}
#footer .hr {border-top:solid 1px #ccc !important;}
#footer a{color:#eee;}
#footer a:hover{color:#fff;}

.social li {list-style:none; display:inline-block;}
.social li a {display:block; padding:0 2px; opacity:0.6;}
.social li a:hover {opacity:1;}

.copyright {display:block; height:40px; background-color:#222222; color:#fff; text-align:center; font-size:16px; line-height:40px;}

.modal-body ul {margin-right:100px;}
.modal-body li{text-align:right; list-style:none;}
.modal-body input {width:300px; height:40px; margin:10px 0; border:#ccc solid 1px; padding-left:10px;}
.modal-body textarea {width:300px; height:150px; margin-bottom:40px; padding-left:10px;}

@media screen and (min-width:500px) and (max-width:767px){
.call-box-01 {display:block;}
.header {margin:0 0 20px;}
.header .call-box-02 {display:none;}
nav ul li a {padding:0 20px; font-size:16px;}

}

@media screen and (min-width:768px){
.call-box-01 {display:none;}
.header {margin:20px 0 0 0;}
.header .call-box-02 {display:block;}
nav ul li a {padding:0 20px; font-size:16px;}
#myCarousel aside h2{font-size:22px; text-align:left;}
#myCarousel aside h2.special {color:#fff;}
#myCarousel aside h2 span{font-size:20px;}
#myCarousel aside {position:absolute; top:25%; left:8%; width:48%; padding:0;}
#myCarousel aside button {float:left;}
.marketing ul {margin-left:25%;}
.software ul {margin-left:5%;}
.software img {float:left; width:50%;}
#footer .hr {border-top:none !important;}
}

@media screen and (min-width:992px){
.call-box-01 {display:none;}
.header {margin:20px 0 0 0;}
.header .call-box-01 {display:none;}
.header .call-box-02 {display:block;}
nav ul {display:block; margin:0; text-align:right; float:right; width:100%; padding:0 30px;}
nav ul li a {padding:0 20px; font-size:16px;}
#myCarousel aside {position:absolute; top:25%; left:8%; width:48%; padding:0;}
#myCarousel aside h2{font-size:28px; text-align:left;}
#myCarousel aside h2.special {color:#fff;}
#myCarousel aside h2 span{ font-size:24px;}
#myCarousel aside button {float:left;}
.marketing img {width: 50%; *width:auto; *height:auto; max-width: 575px; display:block; margin:0 30px 0 4%; float:left;}
.marketing li{line-height:56px;}
.software ul {margin-left:5%;}
.software img {float:left; width:50%;}
#footer .hr {border-top:none !important;}

}

@media screen and (min-width:1200px){
.call-box-01 {display:none;}
.header {margin:20px 0 0 0;}
.header .call-box-01 {display:none;}
.header .call-box-02 {display:block; float:right;}
nav ul {display:block; margin:0; text-align:right; float:right; width:100%; padding:0 30px;}
nav ul li a {padding:0 20px; font-size:16px;}
#myCarousel aside {position:absolute; top:32%; left:16%; width:40%; padding:0;}
#myCarousel aside h2{text-align:left; font-size:32px;}
#myCarousel aside h2 span{ font-size:32px;}
#myCarousel aside h2.special {color:#fff;}
#myCarousel aside button {float:left;}
.marketing li{line-height:56px;}
.software ul {margin-left:25%;}
.software img {float:left;}
#footer .hr {border-top:none !important;}

}