/*!
 * Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
/* dark: #5299CB;
/* normal: #56A2CC;
/* light: #91BDDD;

/* Global Styles */

html,
body {
  height: 100%;
	font-family: 'Open Sans', Open Sans, sans-serif;
	margin:0;
	padding: 0;
}
td {
}
.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}

.curved {
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}
strong {
	font-weight: bold;
}

body {
    padding-top: 60px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

#body {
	position: relative;
	padding-bottom: 105px;
}

#holder {
	min-height: 100%;
	position: relative;
	overflow: hidden;
	left: 0%;
	right: 100%;
}
a.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}
.page-header {
	margin: 25px 0 10px 0;
}
li ul {
	margin-left: -25px;
}
@media (max-width: 990px) {
	.hidesmall {
		display: none;
	}
}
/* footer styles */

footer {
	margin: 75px 0;
}
#footer {
	width: 100%;
	left: 0;
	bottom: 0;
	background-color: #C1D5E4;
	position: absolute;

}

#footer p {
	text-align: center;

}

#footer h3 {
	text-align: center;
	font-size: 1.1em;
	padding-top: 5px;
	margin-top: 5px;
	margin-bottom: 2px;
	margin-left: 5px;
	margin-right: 5px;
	color: #064990;
}

.instagram {
  background-color: #4c68d7;
  color: white;
  font-size: 12px;
  padding: 2px 3px 1px;
  top: -5px;
  position: relative;
  border-radius: 3px;
  display: inline-block;
  vertical-align: baseline;
}

.instagram:hover {
  color: white;
  text-decoration: none;
  background-color: #3762b2;
}

.copyright {
	text-align: center;
	font-size: .9em;
	padding-top: 10px;
}
footer div {
}
#footer table {
	border: 0;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 1em;
}
.ls {
	list-style-type: none;
}
.ls li a {
	color: black;
}
/* contact support styles */

#hours table {
	border: none;
	width: 100%;
	text-align: center;
	padding: .6em;
}

#hours table td {
}

/* system requirements styles */

.warning {
	font-size: 20px;
	color: red;
	text-align: center;
	padding: 10px 80px;
}

@media (max-width: 768px) {
	.warning {
		padding: 10px 10px;
	}
}

.requirements {
	border-collapse: collapse;
	width: 100%;
}

.requirements th {
	padding: 1em;
}

.requirements tr th {
	text-align: right;
	font-size: 1.2em;
}

.requirements thead th {
	text-align: center;
	font-size: 1.3em;
}

.requirements td table {
	border: none;
	width: 100%;
	text-align: center;
	padding: .6em;
}

.bordered {
	border: 1px solid black;
	padding: 5px 10px;
}

.subCell {
	font-size: .9em;
	font-style: italic;
}

.grayed {
	background: #dddddd;
}

.single {
	text-align: center;
	padding: .6em;
	font-size: 1.2em;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Products Page Styles */

.modules .row {
	padding: 25px 30px;
}
.modules .panel-title a:hover,
.modules .panel-title a:visited,
.modules .panel-title a:focus {
	text-decoration: none;
}
.modules .panel {
	margin: 5px 0;
}
.col-md-4 .panel-heading {
	padding: 15px 15px 0;
}
@media (max-width: 768px) {
	.oi-lite .panel-heading {
		padding: 5px;
	}
	.oi-lite .panel-heading h4 {
		margin: 2px 0;
	}
}

/* Responsive Styles */

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }
}

input.invisible, .invisible {
	display: none;
}

.sup {
	vertical-align: super;
}

/* Canvas Styles */

canvas {
  /*cursor: url('../img/orderform/paintbrush.cur'), auto;*/
}

#canvasDiv {
  display: inline-block;
  height: 400px;
}

#controls {
  position: absolute;
  display: inline-block;
  width: 300px;
  height: 400px;
  border: 1px solid #aaa;
  box-sizing: content-box;
  top: -1px;
  left: 600px;
  background-color: white;
  margin-bottom: 0px;
}

#controls .panel-footer {
  position: absolute;
  height: 55px;
  bottom: 0px;
  width: 100%
}

h4 + textarea {
  width: 100%;
}

#nextLink {
  float: right;
}

#previousLink {
  line-height: 34px;
  color: #999;
}

#canvasHolder {
  position: relative;
  display: inline-block;
  border: 1px solid #ccc;
  padding-right: 5px;
  height: 400px;
  box-sizing: content-box;
}

#step2 button {
  margin: 2px;
}

/* Slide styles */

.slide {
  color: white;
  position: relative;
  text-shadow: 0 0 5px black, 0 0 7px black, 0 0 8px black, 0 0 10px black;
}

.slide h1, .slide h2, .slide h3, .slide h4 {
  position: absolute;
}

.slide1 {
  top: 17%;
  left: 15%;
  font-size: 35px;
}

.slide2 {
  top: 28%;
  left: 8%;
  font-size: 68px;
}

.slide3 {
  top: 45%;
  left: 12%;
  font-size: 35px;
}

.slide4 {
  top: 62%;
  left: 13%;
}

.slide5 {
  top: 15%;
  left: 0%;
  font-size: 68px;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.slide6 {
  top: 65%;
  left: 0%;
  font-size: 30px;
  width: 100%;
  text-align: center;
}

@media(max-width:992px) {
  .slide1 {
    top: 17%;
    left: 15%;
    font-size: 18px;
  }

  .slide2 {
    top: 28%;
    left: 8%;
    font-size: 36px;
  }

  .slide3 {
    top: 45%;
    left: 12%;
    font-size: 18px;
  }

  .slide4 {
    top: 62%;
    left: 13%;
    font-size: 18px;
  }

  .slide5 {
    font-size: 45px;
    top: 12%;
  }

  .slide6 {
    font-size: 20px;
  }

  .slide img {
    min-height: 200px;
    min-width: 465px;
  }
}

@media(max-width:500px) {
  .slide1 {
    top: 17%;
    left: 15%;
    font-size: 14px;
  }

  .slide2 {
    top: 28%;
    left: 8%;
    font-size: 24px;
  }

  .slide3 {
    top: 45%;
    left: 12%;
    font-size: 14px;
  }

  .slide4 {
    top: 62%;
    left: 13%;
    font-size: 14px;
  }

  .slide5 {
    font-size: 36px;
  }

  .slide6 {
    font-size: 18px;
  }

  .slide img {
    min-height: 200px;
    min-width: 465px;
  }
}

.meeting {
  color: white;
  position: relative;
  text-shadow: 0 0 5px black, 0 0 7px black, 0 0 8px black, 0 0 10px black;
}

.meeting h1, .meeting h2, .meeting h3, .meeting h4 {
  position: absolute;
}

.meeting1 {
  top: 2%;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 86px;
}

.meeting2 {
  top: 70%;
  width: 100%;
  text-align: center;;
  font-size: 42px;
}

@media(max-width:992px) {
  .meeting1 {
    font-size: 48px;
  }

  .meeting2 {
    top: 60%;
    font-size: 24px;
  }

  .meeting img {
    min-height: 200px;
    min-width: 465px;
  }
}

@media(max-width:500px) {
  .meeting1 {
    font-size: 36px;
  }

  .meeting2 {
    top: 65%;
    font-size: 18px;
  }

  .meeting img {
    min-height: 200px;
    min-width: 465px;
  }
}