/*
Theme Name: Iconica.ca
Description: Theme for Iconica.ca
Version: 1.0
Author: Iconica Communications
Theme URI: iconica.ca
*/

/* ========================== Header ========================== */
header .headers {
    text-align: center;
    width: 80%;
    margin: 0 auto;
	padding: 60px 0;
}
header .headers img {
	height:auto;
	width:200px;
	max-width:100%;
	}

/*Content blocks*/
.content-block .content-column img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
	header img {
		width: 100%;
	}
}

/* ========================== General Items ========================== */
.content-block {
    padding: 50px 0;
}
.btn {
    background-color: #ccc;
}
.btn.submit {
	background-color:#0099FF;
}
.row img {
    max-width: 100%;
    height: auto;
}

/* ========================== For Video Order Form ========================== */

.form_nav {
    overflow: hidden;
    background-color: #ddd;
}
.order-form #errorMsg {
	color:red;
}
.formitem {
    overflow: hidden;
}
.formitem label {
    float: left;
    width: 50%;
}
.formitem.required label::after {
    content: "*";
}
.formitem input,
.formitem select {
  box-shadow:none;
	float:right;
  width: 50%;
}
.formitem input[type="checkbox"] {
	float:left;
  width: auto;
}
.vanish{
	display:none;
}
.error_message {
  background-color: #ffb1b1;
  border: solid 1px #fff;
  color: red;
	overflow: hidden;
  padding:5px;
}

/*For Stripe*/
.StripeElement {
	background-color: white;
	height: 40px;
	padding: 10px 12px;
	border-radius: 4px;
	border: 1px solid transparent;
	box-shadow: 0 1px 3px 0 #e6ebf1;
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
}
.StripeElement--focus {
  	box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
  	border-color: #fa755a;
}
.StripeElement--webkit-autofill {
  	background-color: #fefde5 !important;
}

/*Progress marker*/
#stages {
 	position: relative;
 	margin-top: 20px;
	margin-bottom: 32px;
  	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
}
#stages > div {
	background-color: #bbb;
	transition:  1s;
	transition-timing-function: linear;
	-moz-transition:  1s;
	-moz-transition-timing-function: linear;
	-o-transition:  1s;
	-o-transition-timing-function: linear;
	-webkit-transition:  1s;
	-webkit-transition-timing-function: linear;
	-ms-transition:  1s;
	-ms-transition-timing-function: linear;
	border: 1px solid #ccc;
	text-align:center;
  	position:static;
  	padding:10px 5px;
  	line-height: 1em;
	display: flex;
  	flex-direction: column;
}
#stages > div > strong {
	display: block;
	width: 30px;
	height: 30px;
	background-color: #ccc;
	border-radius: 15px;
	margin: 0 auto;
	line-height: 30px;
	font-weight: bold;
}
#stages > div.current {
  	background-color:#fff;
}
#stages > div.done {
  	background-color:#777;
}

/*"Continue" or "Back" buttons*/
.btn.back#back1 {
	background-color:#666;
	float:left;
}
.btn.next#continue1{
	background-color:#999;
	float: right;
}

/*Order details chart for page 5 of the form*/
.order-form .order-list h4 {
    overflow: hidden;
    padding-top: 20px;
    clear: both;
}
.order-form .order-list span {
    padding: 10px;
    background-color: #eee;
    margin-bottom: 1px;
}
.order-form .order-list span.head {
    text-transform: capitalize;
	clear:left;
}
.order-form .order-list span.info {
    background-color: #ccc;
	text-transform: capitalize;
}

/*Display area for Price/Total charges*/
#price > span {
    background-color: #eee;
    padding: 10px;
    text-align: left;
    font-size: inherit;
    line-height: inherit;
    border-radius: 0;
    color:inherit;
}
#price > span.info {
    clear: right;
    background-color: #ccc;
}
#price > span.total {
    font-weight: bold;
    border-top: solid 2px #fff;
}

/*Other items*/
.shots {
    padding: 10px;
    background-color: #eee;
}

@media (max-width: 767px) {
	.formitem input,
	.formitem select {
    	width: 100%;
	}
	.formitem label {
		width: 90%;
	}
}