/* Space out content a bit */
body {
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: "Open Sans", arial, helvetica, tahoma, sans-serif;
  background: #3997d7 url(../images/bg.jpg) no-repeat scroll top center;
  font-size: 14px;
  color: #22292f;
}
  
@media (min-width: 768px) {
  .container {
    max-width: 1200px;
  }
}
/* Responsive phones */
@media (max-width: 768px) {
  body {padding-top: 0 !important; padding-bottom:0 !important;}
  .subhero .col {height: 100px !important;font-size: 14px;}
  .subhero .col img {margin-top: 27px !important; width: 30px;}
  .subhero .cena {padding-top: 20px !important;}
  .marketing .icon {float:none !important; }
  .marketing .col {min-height: 140px !important; text-align: center !important; margin-top:30px !important; font-size:13px !important;}
  .marketing .col h4 {margin-top: 18px !important;}
  .marketing {padding-left: 0 !important; padding-right: 0 !important;}
  .type1 {padding-left: 0 !important; padding-right: 0 !important;}
  h2 {margin:-10px 0 25px 0 !important; font-size: 21px !important; font-weight: 600 !important;}
  .jumbotron .logo {height: 60px !important; margin-left: -15px !important;}
  
  .container .jumbotron {text-align:center !important; height:600px !important;}
  .jumbotron h1 {font-size:22px!important;}
  .jumbotron .lead {font-size: 17px !important;}
  
  
  
  
}


/* global */
.container {
  /*background:yellow;*/ /*debug*/
  padding:0;
  max-width: 1200px;
}
#page {
  box-shadow: 0 0px 8px 0 rgba(0,0,0,0.3);
}
.btn {
  -webkit-transition: background-color 0.1s linear 0s;
  -moz-transition: background-color 0.1s linear 0s;
  -o-transition: background-color 0.1s linear 0s;
  -ms-transition: background-color 0.1s linear 0s;
  transition: background-color 0.1s linear 0s;
}
h2 {
  text-align:center;
  text-transform: uppercase;
  color: #3a3a3a;
  font-weight: 400;
  font-size: 27px;
  margin: 0 0 45px 0;
  padding: 0 0 10px 0;
  position:relative;
  display: block;
}
h2:before{
    border-bottom: 1px solid #3a3a3a;
    bottom: 0;
    content: "";
    height: 1px;
    left: 45%;
    position: absolute;
    width: 10%;
}
.vertical-center {
  min-height: 100%; 
  display: flex;
  align-items: center;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}


/* Main marketing message and sign up button */
.container .jumbotron {
  height: 792px;
  /*background: url(../images/hero.jpg) #000 no-repeat top left;*/
  background: url(../images/hero.png) rgba(255, 255, 255, 0.8) no-repeat top left;
  /*background-color: rgba(255, 255, 255, 0.8);*/
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.jumbotron .container {
  background: transparent;
  width: 46em;
  margin: 0 8%;
}
.jumbotron .logo {
  margin-left: -40px;
}
.jumbotron .btn {
  padding: 21px 32px;
  margin-right: 6px;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  border: 0;
  border-radius: 0; 
}
.jumbotron .btn-success {
  background-color: #307fbc;
  color: #fff;
}
.jumbotron .btn-success:hover {
  background-color: #62bc46;
}
.jumbotron .btn-info {
  background-color: #fff;
  color: #307fbc;
}
.jumbotron .btn-info:hover {
  background-color: #eee;
}
.jumbotron .btn span {
  display: block;
  font-size: 13px;
  margin-top: -4px;
  opacity: 0.6;
  text-transform: none;
  font-weight: 400;
}

.jumbotron h1 {
  font-size: 26px;
  font-weight: 400;
}
.jumbotron .lead {
  font-size: 10pt;
  font-weight: 300;
  font-size: 20px;
  font-weight: 300;
}

/* sub hero */
.subhero {
  margin: 0;
}
.subhero .col {
  height: 160px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  text-align:center;
}
.subhero .col img{
  display: block;
  margin: 50px auto 5px auto;
}
.subhero .web {
  background-color: #3687c6;
}
.subhero .email {
  background-color: #307fbc;
}
.subhero .hosting {
  background-color: #2976b2;
}
.subhero .domena {
  background-color: #236da7;
}
.subhero .cena {
  font-size: 16px;
  font-weight:400;
  background-color: #175f98;
  padding-top: 53px;
}
.subhero .cena strong {
  font-size: 25px;
  font-weight:500;
}
.subhero .cena span {
  font-size: 14px;
  opacity: 0.7;
  font-weight:400;
}



.row div { 
}

/* Supporting marketing content */
.marketing {
  margin: 0;
  padding: 70px 62px 70px 62px;
  background: #fff;
}
.marketing .col {
  min-height: 140px;
}
.marketing p + h4 {
  margin-top: 28px;
}
.marketing p {
  color: #22292f;
  font-weight: 400;
}
.marketing h4 {
  margin-bottom: 5px;
  font-size: 15px;
  color: #22292f;
  font-weight: 600;
}
.marketing .icon {
  font-size: 35px;
  color: #3387c6;
  float: left;
  margin: 8px 10px 0 0;
  padding: 12px;
  border: 1px solid #3387c6;
  border-radius: 100px;
}

/*type1*/
.type1 {
  margin: 0;
  padding: 70px 71px 70px 71px;
  background: #fff;
}
.type1 .col {
  padding:0;
  margin:0;
}

/* boxy */
.box {
  padding: 30px 25px 30px 35px;
  margin: 5px;
  background: #fff;
  line-height: 1.6em;
  font-size: 13px;
  position: relative;
}
.box h4 {
  padding: 0;
  margin: 0 0 20px 0;
  font-weight: 600;
  text-transform: uppercase;
  display: block;
  font-size: 15px;
}
.box ul {
  list-style: none;
  padding:0;
  margin:0;
}
.box ul li { 
    padding-left: 1em; 
    text-indent: -.7em;
}
.box ul li:before {
  content: "+ ";
  font-size: 21px;
  line-height: 1em;
  position: relative;
  top: 1px;
}
.box strong {
  font-weight: 500;
}

/* programy a ceny */
.programy { 
  background-color: #307fbc;
}
.programy h2 {
  color: #fff;
}
.programy h2:before{
    border-bottom-color: #fff;
} 
.alfa-box {
  min-height: 480px;
}
  .alfa-box h4 {
    background: #e6ab16;
    color: #fff;
    display: inline-block;
    margin-left: -35px;
    padding: 7px 12px 7px 34px;
    font-size: 14px;
    font-weight: 700;
  }
  .alfa-box strong {
    color: #e6ab16;
  }
  .alfa-box ul li:before {
    color: #e6ab16;
  }
.beta-box {
  min-height: 480px;
}
  .beta-box h4 {
    background: #62bc46;
    color: #fff;
    display: inline-block;
    margin-left: -35px;
    padding: 7px 12px 7px 34px;
    font-size: 14px;
    font-weight: 700;
  }
  .beta-box strong {
    color: #62bc46;
  }
  .beta-box ul li:before {
    color: #62bc46;
  }
.program-cena {
    font-size: 14px;
    font-weight: 600;
    position: absolute;
    right: 25px;
    top: 33px;
}

/* doporucene produkty */
.produkty .box {
  border: 1px solid #307fbc;
  min-height: 410px;
}
.produkty .box strong {
  color: #307fbc;
}
.produkty .box h4 {
  color: #307fbc;
}
.produkty .box table {
  width: 100%;
  font-size: 13px;
}
.produkty .box th  {
  font-weight: normal;
  background: #eee;
  padding: 4px 5px 3px 5px;
}
.produkty .box th:last-child  {
  text-align: right;
}
.produkty .box td  {
  padding: 2px 0px 2px 5px;
  border-top: 1px dotted  #ddd;
}
.produkty .box td:last-child {
  text-align: right;
  padding-right: 5px;
}

/* kontakty */
.kontakty { 
  background-color: #323232;
}
.kontakty h2 {
  color: #d4d4d4;
}
.kontakty h2:before{
    border-bottom-color: #d4d4d4;
}
.kontakty .box {
  min-height: 410px;
  color: #a2a2a2;
  font-size: 13px;
  background: rgba(255,255,255,0.04);
}
.kontakty .box strong {
  color: #307fbc;
}
.kontakty .box h4 {
  color: #c5c5c5;
}
.kontakty .contact-box {
  background: #282828;
  padding: 30px 25px 30px 25px
}

/* kontaktny formular */
.form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    color: #ccc;
    font-size: 13px;
    margin-bottom: 10px;
    -webkit-transition: background-color 0.1s linear 0s;
    -moz-transition: background-color 0.1s linear 0s;
    -o-transition: background-color 0.1s linear 0s;
    -ms-transition: background-color 0.1s linear 0s;
    transition: background-color 0.1s linear 0s;
}
.form-control:focus {
    border: 0;
    box-shadow: none;
    outline: 0 none;
    background: rgba(255,255,255,0.5);
    color: #222;
}
.btn.btn-send {
    background: #3997d7 none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0;
    font-size: 13px;
    padding: 7px 17px;
}
#InputMessage {
    height: 188px;
}