/* ==========================================================================
   Cristiano Acosta
   ========================================================================== */
/* fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600);
@import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);

/* ajustes */
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -moz-background-clip: padding-box !important; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; }
body { font-family: 'Open Sans', sans-serif; position: relative; margin: 0 !important; padding: 0 !important; }
body.landing { background: url("img/body.jpg") top no-repeat; background-size: 100% auto; }
body.modal-open {margin-right: 0px; padding-right: 0; overflow-y: auto; }

/* ico-sprite */
.ico{ background:url("img/ico-sprite.png") top left no-repeat; }
.ico_impressora{ width:50px; height:50px; background-position:-10px -10px; display: block; }
.ico_formatacao{ width:50px; height:50px; background-position:-10px -70px; }
.ico_notebook{ width:50px; height:50px; background-position:-10px -130px; }
.ico_backup{ width:50px; height:50px; background-position:-10px -190px; }
.ico_instalacao-perifericos{ width:50px; height:50px; background-position:-10px -250px; }
.ico_instalacao-drivers{ width:50px; height:50px; background-position:-10px -310px; }
.ico_instalacao-anti-virus{ width:50px; height:50px; background-position:-10px -370px; }
.ico_instalacao-windows{ width:100px; height:50px; background-position:-10px -430px; }
.ico_instalacao-programas{ width:50px; height:50px; background-position:-10px -490px; }
.navbar-inverse .navbar-nav > li > a { color: #ffffff; }
/* .casses */
.navbar-brand { position: absolute; width: 100%; left: 0; top: -75px; text-align: center; margin: auto; }
.navbar-brand img { margin: 0 auto; position: relative; }
.navbar-btn { position: absolute; right: 0; }
.navbar-btn a {  text-transform: uppercase; background: #447a10; border: none; width:205px; font-size:13px; font-weight:bold; line-height:100%; color:rgb(255,255,255) !important; text-align:center ;  z-index: 99;  }
.navbar-btn:hover a, .navbar-btn:focus a, {  background: #447a10 !important; opacity: 1; filter: none;  }
.navbar-inverse .navbar-btn > li > a:hover, .navbar-inverse .navbar-btn > li > a:focus { background: #447a10 !important; color: #fff;  }
.rotate {  -moz-transform:matrix(1,-0.05,0.05,1,0,0); -moz-transform-origin:center; -webkit-transform:matrix(1,-0.05,0.05,1,0,0); -webkit-transform-origin:center; -o-transform:matrix(1,-0.05,0.05,1,0,0); -o-transform-origin:center; -ms-transform:matrix(1,-0.05,0.05,1,0,0); -ms-transform-origin:center; transform:matrix(1,-0.05,0.05,1,0,0); transform-origin:center; -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=1,M21=-0.05,M12=0.05,M22=1,SizingMethod='auto expand')";zoom:1; filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M21=-0.05,M12=0.05,M22=1,SizingMethod='auto expand'); }
.center { margin: 0 auto; position: relative; display: block;  }
label.bg-warning { padding: 10px; font-size: 12px; position: absolute; text-align: center; width: 90%; z-index: 99; margin: -28px 0 0 15px; }

.container { position: relative; }
@media (min-width:1200px) {.container{width: 1000px;}}
@media (min-width:1024px) {.container{width: 1000px;}}

/* <header> */
#navbar-main { background:#08305d; border-top:8px solid #7ec737; border-bottom: 8px solid #7ec737; margin-top: 70px; height: 100px; position: relative; z-index: 999;   }
#navbar-main a.phone { text-transform: uppercase; font-size:29px; font-weight:bold; line-height:120%; color:rgb(255,255,255); text-align:left; }
#navbar-main h1 { text-transform: uppercase; font-size:22px; font-weight:bold; line-height:120%; color:rgb(255,255,255); text-align:left; margin: 0; }

/* <main> */
#main { position: relative; padding: 100px 0 0 0; }
   .line-title { text-align: center; color: #002F5D; font-weight: bold; text-transform: uppercase; font-size: 22px; margin: 0; line-height: 1; border-top: 1px solid #08305d; position: relative; height: 40px; }
   .title { text-align: center; color: #002F5D; font-weight: bold; text-transform: uppercase; font-size: 22px; margin: 0; line-height: 1;  position: relative; height: 40px; }
   .line-title span { display:inline-block; background: #ffffff; font-weight: bold; padding: 10px 20px; color: #08305d; position: relative; top: -50%; z-index: 9; }

   ul#services { }
   ul#services li { text-align: center; border: 1px solid #7ec737; width: 193px; height: 134px; z-index: 76; display: inline-block; float: left; margin: 10px; }
   ul#services li h3 { font-size: 13px; font-weight:bold; color:#08305d; text-align:center; line-height: 1.2; margin: 18px 0; text-transform: uppercase; }
   ul#services li i { display: inline-block; float: none; clear: both; margin: 0px 0 0 0; position: relative; }

   ul#links { margin: 0; padding: 0; list-style: none; clear: both; float: none; }
   ul#links li { margin:27px 0 0 0; padding: 0; text-align: center; width: 100%; display: inline-block; }
   .btn-verde { background: #7ec737; text-align: center; text-transform: uppercase; color: #ffffff; width:290px; height:40px;  font-size:16px; font-weight:bold; line-height: 28px; }
   .btn-verde:hover, .btn-verde:focus, .btn-verde.focus { background: #7ec737;  color: #ffffff; border: none; }
   .btn-azul { background: #08305d; text-align: center; text-transform: uppercase; color: #ffffff; width:420px; height:60px; font-size:24px; font-weight:bold; line-height: 40px; margin-bottom: 40px; }
   .btn-azul:hover, .btn-azul:focus, .btn-azul.focus,  { background: #08305d; color: #ffffff;  border: none; }

   aside p { font-size: 15px; line-height: 1.5; color:#08305d; text-align:center; margin-bottom: 50px; }
   .call_to_order { font-family: 'Amatic SC', cursive; color: #000000; font-size:30px; font-weight:bold; line-height:124%; text-align:center; display: block; }
   aside a:hover { text-decoration: none; outline: 0; border: 0; }
   .call_to_order h2 { font-family: 'Amatic SC', cursive;  }




.cashMachine { background: url("img/cashMachine.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); bottom: 0; clear: both; background-position: center 0; }
.formBox { padding: 20px 0 0 47px; padding-left: 70px; }
.inputText { background-color:transparent; -moz-border-radius:5px ; -webkit-border-radius:5px ; border-radius:5px ; border: 1px solid rgb(14, 63, 91); color: #124461;    font-size: 10px; height: 25px; letter-spacing: 2px; margin: 0 0 15px; padding: 0 0 0 5px; text-transform: uppercase; width: 100px; }
.formTax {    height: 25px;     margin: 85px 0 0 50px;     text-align: center;     width: 100px; margin-left: 69px; }
.inputTaxa { background: none repeat scroll 0 0 transparent; border: medium none; color: #072d43; font-family: "Orbitron", sans-serif; font-size: 16px; height: 25px; text-align: center; width: 110px; }
.buttom { height: 30px; margin: 21px 0 0 37px; width: 133px; margin-left: 61px; }
.InputButton { background: none repeat scroll 0 0 transparent; border: medium none; cursor: pointer; height: 30px; width: 133px; text-indent: -9999px; }
.dialogueBox { font-size: 12px; line-height: 16px; position: absolute; }
.dialogueBox span { color: #167a0b; }

.modal-dialog { width: 617px; }
.modal-header { border: none; }
.form-horizontal .control-label { padding: 0;}

.modal-title { font-size:24px; font-weight:bold; line-height:120%; color: #27cb69; text-align:center;  }
.modal-header .close { margin-top: -40px; background-color: #dcdcdc; border: 1px solid rgba(0, 0, 1, 0.27); color: #000000; height: 50px; width: 50px; opacity: 1; position: absolute; right: 0; z-index: 999; margin-right: -40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius:50%; display: block; line-height: 0; }
.modal-phone { font-size:28px; font-weight:bold; line-height:120%; color:rgb(7,47,93); text-align:center;  }

form#contato {  }
form#contato .row { width: 500px; margin: 0 auto; }
form#contato input, form#contato select, form#contato textarea  { height:46px; border: 1px solid #050506; font-size:15px; font-style:italic; line-height: 1; color: #585858; text-align: left; width: 100%;  }
form#contato textarea  { height:70px; }
form#contato input[type='submit'], form#contato button { font-size:20px; font-style:italic; font-weight:bold; line-height:120%; color: #ffffff; text-align:center; margin: 0 auto; position: relative; border: none; width: 165px; height: 44px; display: block; }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .navbar-toggle { margin-bottom: 8px; margin-right: 4px; margin-top: 22px; padding: 15px; border: none; }
  .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background: rgb(255, 255, 255); background: transparent; background: rgba(255, 255, 255, 0.3);/* FF3+,Saf3+,Opera 10.10+,Chrome,IE9*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFFFFFF,endColorstr=#4cFFFFFF);/*IE 5.5-7*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFFFFFF,endColorstr=#4cFFFFFF)";/*IE8*/ zoom: 1; }
  .modal-dialog { width: 90%; }
  .navbar-nav { margin: 0px -15px; }
  ul#services li { margin: 10px 55px; }
  .navbar-collapse.in { background: #08305D; margin-top: 17px; padding-top: 76px; }
  .navbar-collapse { background: #08305D; }
  #navbar-main h1 { font-size: 16px; }
  #navbar-main a.phone { font-size: 19px; }
  form#contato .row { width: 90%; }
  .btn-verde { width: 100%; }
  .btn-azul { width: 100%;  }
  .modal-title { width: 100%; }
  .modal-phone { width: 100%; }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1020px) {
  #navbar-main h1 { font-size: 15px; }
  #navbar-main a.phone { font-size: 19px; }
  .formBox { padding: 20px 0 0 285px; }
  .formTax { margin: 85px 0 0 282px; }
  .buttom { margin: 21px 0 0 274px; }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
  * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; }
  a,  a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after,  a[href^="javascript:"]:after,  a[href^="#"]:after { content: ""; }
  pre,  blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; /* h5bp.com/t */ }
  tr,  img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p,  h2,  h3 { orphans: 3; widows: 3; }
  h2,  h3 { page-break-after: avoid; }
}