/*
	Theme Name: OrderNow - Responsive Order Form
	Description: This css file is for template layout alignments
	Version: 1.0
	Author: Responsive Expert
	Author URI: http://www.responsiveexpert.com
	Tags:
	
	---------------------------
	TEMPLATE STYLES
	---------------------------
	
	TABLE OF CONTENTS
	---------------------------
	 01. Global Styles
	 02. Preloader Content Styles
	 03. Header Area Styles
	 04. Order Form Styles
	 05. Service Buttons Styles
	 06. Footer Area Styles
	 07. Media Query
*/


/* ==================================================== */
/* 01. Global Content Styles                            */
/* ==================================================== */

html, body {
	font-family:'Open Sans', sans-serif;
    font-weight:400;
    height: 100%;
    width: 100%;
	line-height:24px;
	font-size:14px;
	color:#666666;
	background-color:#ffffff;
}

/* Text Styling */

a, a:hover, a:active, a:visited, a:link {
    outline:none;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
}
.medium-txt {
	font-size:16px;
	line-height:30px;
	text-transform:uppercase;
	padding-bottom:15px;
}

/* Headings */

h1 {
	font-family: 'Arvo', serif;
	font-weight:700;
	font-size:48px;
	color:#333333;
	margin-bottom:30px;
}
h2 {
	font-family: 'Arvo', serif;
	font-weight:700;
	font-size:36px;
	color:#333333;
	margin-bottom:20px;
}
h3 {
	font-family: 'Arvo', serif;
	font-weight:400;
	font-size:30px;
	color:#333333;
	margin-bottom:20px;
}
h4 {
	font-family: 'Arvo', serif;
	font-weight:700;
	font-size:28px;
	color:#0f9ccc;
	margin-bottom:20px;
	line-height:42px;
}
h5 {
	font-family: 'Arvo', serif;
	font-size:16px;
	color:#333333;
	margin-bottom:20px;
}
h6 {
	font-family: 'Arvo', serif;
	font-size:18px;
	color:#333333;
	margin-bottom:10px;
}

/* Button Styles */

.btn-small, .btn-small:focus {
	padding:7px 20px;
	margin:0 0 0 0;
	font-family: 'Arvo', serif;
	display:inline-table;
	font-size:14px;
	color:#ffffff;
	text-transform:uppercase;
	background:#0f9ccc;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	text-decoration:none;
	border:0;
}
.btn-small:hover {
	color:#ffffff;
	background:#333333;
	text-decoration:none;
}
.btn-large {
	padding:20px 50px 18px 50px;
	margin:20px 0 0 0;
	font-family: 'Arvo', serif;
	font-weight:700;
	display:inline-table;
	font-size:24px;
	color:#ffffff;
	background:#0f9ccc;
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-ms-border-radius:8px;
	text-decoration:none;
}
.btn-large:hover {
	color:#ffffff;
	background:#333333;
	text-decoration:none;
}
.btn-large-ban, .btn-large-ban:focus {
	padding:20px 50px 18px 50px;
	margin:20px 0 0 0;
	font-family: 'Arvo', serif;
	font-weight:700;
	display:inline-table;
	font-size:24px;
	color:#ffffff;
	background:#0b85af;
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-ms-border-radius:8px;
	text-decoration:none;
}
.btn-large-ban:hover {
	color:#ffffff;
	background:#333333;
	text-decoration:none;
}
.order-form hr {
	margin:20px 0;
	padding:0 0 0 0;
	border:0;
	background:none;
	border-top:1px solid #cccccc;
}

/* ==================================================== */
/* 02. Preloader Content Styles                         */
/* ==================================================== */

#mask {
    background-color: #0d9ccb;
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10000;
}
#loader {
    background-image:url(../img/loader.gif);
    background-position: center center;
    background-repeat: no-repeat;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    position: absolute;
    top: 50%;
    width: 200px;
}


/* ==================================================== */
/* 03. Header Area Styles                               */
/* ==================================================== */

.inner-banner-area {
	padding:0 0 0 0;
	margin:0 0 0 0;
	background:none;
	min-height:100px;
}
.inner-logo {
	padding-bottom:10px;
	display:inline-table;
}
.inner-banner-area .top-area {
	padding:10px 0;
	background:#0f9ccc;
	text-align:center;
	color:#ffffff;
}
.inner-banner-area .top-area p {
	width:80%;
	display:inline-table;
}
.inner-banner-area .top-area h1 {
	color:#ffffff;
	/*text-transform:uppercase;*/
}
.inner-banner-area .top-area h5 {
	color:#ffffff;
	font-size:24px;
}


/* ==================================================== */
/* 0X. Order Info Styles                                */
/* ==================================================== */

.order-info {
	padding:80px 0;
	margin:0 0 0 0;
	background:#EEE;
}

/* ==================================================== */
/* 04. Order Form Styles                                */
/* ==================================================== */

.order-form {
	padding:30px 0;
	margin:0 0 0 0;
	background:#ededed;
}
.order-btns {
	padding:80px 0 0 0;
}
.order-opt-link, .order-opt-link:focus {
	padding:40px 0 15px 0;
	margin:0 0 30px 0;
	display:inline-table;
	background:#ffffff;
	font-family: 'Arvo', serif;
	color:#0f9ccc;
	font-size:17px;
	text-transform:uppercase;
	text-align:center;
	width:100%;
	text-transform:uppercase;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	position:relative;
	text-decoration:none;
	cursor:pointer;
}
.order-opt-link .icon {
	left:0;
	width:100%;
	position:absolute;
	top:-30px;
	text-align:center;
	color:#0f9ccc;
	font-size:58px;
	-webkit-text-shadow:-3px -3px 0 #ededed, 3px -3px 0 #ededed, -3px 3px 0 #ededed, 3px 3px 0 #ededed;
	-moz-text-shadow:-3px -3px 0 #ededed, 3px -3px 0 #ededed, -3px 3px 0 #ededed, 3px 3px 0 #ededed;
	-ms-text-shadow:-3px -3px 0 #ededed, 3px -3px 0 #ededed, -3px 3px 0 #ededed, 3px 3px 0 #ededed;
	text-shadow:-3px -3px 0 #ededed, 3px -3px 0 #ededed, -3px 3px 0 #ededed, 3px 3px 0 #ededed;
}
.order-opt-link:hover, .order-opt-link.active {
	background:#0f9ccc;
	color:#ffffff;
	text-decoration:none;
}
.html5-web {
	padding:0 0 0 0;
	margin:0 0 0 0;
}
.normal-pk {
	padding:30px;
	padding-top:30px;
	padding-bottom:20px;
	margin-bottom:30px;
	color:#888888;
	background:url(../img/basic01.png) no-repeat 15px 15px #ffffff;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	cursor:pointer;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
}
.normal-pk:hover, .normal-pk.active {
	color:#ffffff;
	background:url(../img/basic02.png) no-repeat 15px 15px #0f9ccc;
	cursor:pointer;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
}
.normal-pk h3 {
	padding:0 0 0 0;
	margin:0 0 15px 0;
	font-size:24px;
	color:#333333;
	text-transform:uppercase;
}
.normal-pk p {
	font-size:13px;
}
.normal-pk:hover h3, .normal-pk.active h3 {
	color:#ffffff;
}
.normal-pk .price {
	padding:10px 0 0 0;
	margin:0 0 0 0;
	color:#0f9ccc;
	font-size:36px;
	font-weight:700;
}
.normal-pk:hover .price, .normal-pk.active .price {
	color:#ffffff;
}
.normal-pk .price span {
	font-size:30px;
}
.normal-pk .high-cont {
	font-size:18px;
	font-weight:700;
	color:#333333;
}
.normal-pk:hover .high-cont, .normal-pk.active .high-cont {
	font-size:18px;
	font-weight:700;
	color:#ffffff;
}
.addi-opts {
	padding:0 0 0 0;
	padding-top:30px;
	padding-left:30px;
	padding-right:30px;
	padding-bottom:10px;
	color:#888888;
	background:#ffffff;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	text-align:left;
}
.addi-opts .list-opt {
	padding:0 0 0 0;
	margin:0 0 0 0;
	list-style:none;
}
.addi-opts .list-opt li {
	padding:3px 0 3px 30px;
	margin:0 0 0 0;
	width:50%;
	float:left;
}
.addi-opts .list-opt li span {
	color:#0f9ccc;
}
.addi-opts .list-opt li .check-opt {
	margin-right:5px;
}
.addi-opts .list-opt li .check-opt:focus {
	outline:none;
}
.cms-category {
}
.cms-cont {
	padding-top:20px;
	padding-bottom:10px;
	margin-bottom:30px;
	background:#ffffff;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	text-align:center;
	color:#0f9ccc;
	font-size:28px;
	font-weight:700;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
	cursor:pointer;
}
.cms-cont:hover, .cms-cont.active {
	background:#0f9ccc;
	text-align:center;
	color:#ffffff;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
}
.cms-cont span {
	font-size:24px;
}
.cms-cont i {
	color:#0f9ccc;
	font-size:42px;
}
.cms-cont:hover i, .cms-cont.active i {
	color:#ffffff;
}
.cms-cont h5 {
	padding:10px 0;
	margin:0 0 0 0;
	color:#0f9ccc;
	font-size:16px;
}
.cms-cont:hover h5, .cms-cont.active h5 {
	color:#ffffff;
}
.submit-opts-form {
	padding:30px 30px;
	margin-bottom:30px;
	color:#888888;
	background:#ffffff;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	text-align:left;
}
.first-field, .second-field, .third-field, .forth-field {
	padding:5px 15px;
	margin:0 0 15px 0;
	border:0;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-ms-border-radius:3px;
	background:#ededed;
	font-family:'Open Sans', sans-serif;
	color:#888888;
	font-size:14px;
	height:35px;
	width:32%;
	-webkit-box-shadow: inset 3px 3px 1px 0px #cccccc;
	-moz-box-shadow: inset 3px 3px 1px 0px #cccccc;
	-ms-box-shadow: inset 3px 3px 1px 0px #cccccc;
	box-shadow: inset 3px 3px 1px 0px #cccccc;
	float:left;
}
.second-field {
	margin-left:2%;
	margin-right:2%;
}
.forth-field {
	width:100%;
	height:80px;
}
.file-upload-area {
	padding:0 0 0 0;
	margin:0 0 0 0;
	color:#0f9ccc;
	font-weight:bold;
}
.file-upload-area span {
	padding:0 15px;
}
.file-upload-area .draganddrop {
	padding:7px 15px;
	margin:0 0 10px 0;
	background:#0f9ccc;
	color:#ffffff;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	text-decoration:none;
	font-weight:normal;
	display:inline-table;
	text-align:center;
}
.file-upload-area .link-field {
	padding:5px 15px;
	margin:0 0 10px 0;
	border:0;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-ms-border-radius:3px;
	background:#ededed;
	font-family:'Open Sans', sans-serif;
	color:#888888;
	font-size:14px;
	height:35px;
	width:40%;
	-webkit-box-shadow: inset 3px 3px 1px 0px #cccccc;
	-moz-box-shadow: inset 3px 3px 1px 0px #cccccc;
	-ms-box-shadow: inset 3px 3px 1px 0px #cccccc;
	box-shadow: inset 3px 3px 1px 0px #cccccc;
}
.order-catogories {
	padding:0 0 0 0;
	margin:0 0 0 0;
}
.summary-box {
	padding:25px 20px;
	margin:0 0 0 0;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	background:#ffffff;
	width:100%;
	text-align:left;
	color:#999999;
}
.summary-box .heading-total {
	padding:0 0 25px 0;
	margin:0 0 0 0;
	text-align:center;
	font-size:20px;
	color:#999999;
	font-weight:700;
	text-transform:uppercase;
	border-bottom:1px solid #d8d8d8;
}
.summary-box .heading-total .color-txt {
	font-size:30px;
	color:#0f9ccc;
}
.summary-box .heading-total .color-txt span {
	font-size:22px;
}
.summary-basic-pack {
	padding:10px 20px;
	margin:0 0 0 0;
	width:100%;
	text-align:left;
	border-bottom:1px solid #d8d8d8;
}
.summary-box h5 {
	padding:5px 0 10px 0;
	margin:0 0 0 0;
	font-family:'Open Sans', sans-serif;
	color:#0f9ccc;
	font-size:14px;
	text-transform:uppercase;
	font-weight:700;
}
.summary-box h5 span {
	font-size:18px;
	padding-right:5px;
}
.summary-basic-pack .pack-in {
	padding:0 0 0 0;
	margin:0 0 0 0;
	list-style:none;
}
.summary-basic-pack .pack-in li {
	padding:0 0 2px 0;
	font-weight:bold;
}
.summary-basic-pack .pack-in li span {
	display:inline-table;
	text-align:left;
	width:25px;
	color:#0f9ccc;
	font-weight:normal;
}
.summary-basic-pack .pack-add {
	padding:0 0 0 0;
	margin:0 0 0 0;
	list-style:none;
}
.summary-basic-pack .pack-add li {
	padding:0 0 2px 0;
}
.summary-basic-pack .pack-add li span {
	color:#0f9ccc;
}
.pages-area-cal {
	padding:10px 0;
	margin:0 0 0 0;
	width:100%;
	text-align:left;
	border-bottom:1px solid #d8d8d8;
}
.pages-area-cal .page-ul {
	padding:0 0 0 20px;
	margin:0 0 0 0;
	list-style:none;
	text-align:left;
}
.pages-area-cal .page-ul li {
	padding:5px 5px 5px 0;
	margin:0 0 0 0;
	display:inline-table;
	font-weight:bold;
}
.pages-txtbx {
	padding:5px 15px;
	margin:0 0 0 0;
	border:0;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	background:#ededed;
	font-family:'Open Sans', sans-serif;
	color:#888888;
	font-size:14px;
	width:50px;
	height:30px;
	text-align:center;
	-webkit-box-shadow: inset 3px 3px 1px 0px #cccccc;
	-moz-box-shadow: inset 3px 3px 1px 0px #cccccc;
	-ms-box-shadow: inset 3px 3px 1px 0px #cccccc;
	box-shadow: inset 3px 3px 1px 0px #cccccc;
}
.pages-selbx {
	padding:5px 10px;
	margin:0 0 0 0;
	border:0;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	background:#ededed;
	font-family:'Open Sans', sans-serif;
	color:#888888;
	font-size:14px;
	width:80px;
	height:30px;
	text-align:left;
	-webkit-box-shadow: inset 3px 3px 1px 0px #cccccc;
	-moz-box-shadow: inset 3px 3px 1px 0px #cccccc;
	-ms-box-shadow: inset 3px 3px 1px 0px #cccccc;
	box-shadow: inset 3px 3px 1px 0px #cccccc;
}
.coupon-box {
	padding:10px 0 15px 0;
	margin:0 0 0 0;
	width:100%;
	text-align:left;
	border-bottom:1px solid #d8d8d8;
}
.coupon-txtbx {
	padding:5px 15px;
	margin:0 0 0 0;
	border:0;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	background:#ededed;
	font-family:'Open Sans', sans-serif;
	color:#888888;
	font-size:14px;
	width:68%;
	-webkit-box-shadow: inset 3px 3px 1px 0px #cccccc;
	-moz-box-shadow: inset 3px 3px 1px 0px #cccccc;
	-ms-box-shadow: inset 3px 3px 1px 0px #cccccc;
	box-shadow: inset 3px 3px 1px 0px #cccccc;
}
#discnt_btn_id, #discnt_btn_id:hover, #discnt_btn_id:focus {
	padding:5px 10px;
	margin:0 0 0 0;
	border:0;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	background:#ededed;
	font-family:'Open Sans', sans-serif;
	color:#ffffff;
	font-size:14px;
	width:30%;
	background:#0f9ccc;
	display:inline-table;
	text-align:center;
	text-decoration:none;
}
.orderbtn-area {
	padding:15px 0 5px 0;
	margin:0 0 0 0;
	text-align:center;
	font-size:12px;
	position:relative;
}
.order-btn-cont {
	padding:0 0 0 0;
	margin:0 0 0 0;
	bottom:-46px;
	left:0;
	width:100%;
	position:absolute;
}
.order-btn-cont form {
	padding:0 10px;
	display:inline-table;
}
.order-btn-cont.pay-page {
	position:inherit;
	bottom:inherit;
}
.order-btn-cont .button, .order-btn-cont .button:focus {
	padding:12px 0 0 32px;
	margin:0 0 0 0;
	display:inline-table;
	width:185px;
	height:45px;
	color:#ffffff;
	background:url(../img/tick.png) no-repeat 10px center #0f9ccc;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	font-family: 'Arvo', serif;
	font-size:18px;
	text-transform:uppercase;
	text-decoration:none;
	border:0;
}
.order-btn-cont .button:hover {
	background:url(../img/tick.png) no-repeat 10px center #0987b2;
	text-decoration:none;
}
.order-btn-cont input.button, .order-btn-cont input.button:focus {
	padding:0 0 0 32px;
}
.price-final {
	padding-top:5px;
	text-align:center;
}
.price-final h3 {
	color:#0f9ccc;
}
#error_order {
	padding-bottom:10px;
	text-align:center;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
}

/* ==================================================== */
/* 05. Service Buttons Styles                           */
/* ==================================================== */

.cms-cont .fa-opencart {
	width:43px;
	height:43px;
	display:inline-table;
	background:url(../img/opencart-blue.png) no-repeat center top;
}
.cms-cont:hover .fa-opencart {
	background:url(../img/opencart-blue.png) no-repeat center -42px;
}
.cms-cont .fa-prestashop {
	width:43px;
	height:43px;
	display:inline-table;
	background:url(../img/presta-blue.png) no-repeat center top;
}
.cms-cont:hover .fa-prestashop {
	background:url(../img/presta-blue.png) no-repeat center -42px;
}
.cms-cont .fa-shopify {
	width:43px;
	height:43px;
	display:inline-table;
	background:url(../img/shopify-blue.png) no-repeat center top;
}
.cms-cont:hover .fa-shopify {
	background:url(../img/shopify-blue.png) no-repeat center -42px;
}
.cms-cont .fa-magento {
	width:43px;
	height:43px;
	display:inline-table;
	background:url(../img/magento-blue.png) no-repeat center top;
}
.cms-cont:hover .fa-magento {
	background:url(../img/magento-blue.png) no-repeat center -42px;
}
.cms-cont .fa-virtuemart {
	width:43px;
	height:43px;
	display:inline-table;
	background:url(../img/virtuemart-blue.png) no-repeat center top;
}
.cms-cont:hover .fa-virtuemart {
	background:url(../img/virtuemart-blue.png) no-repeat center -42px;
}

/* ==================================================== */
/* 06. Footer Area Styles                               */
/* ==================================================== */

.footer-area {
	padding:30px 0;
	background:#1f1f1f;
	color:#999999;
}
.footer-area p {
	padding:0 0 0 0;
	margin:0 0 0 0;
}
.foot-social {
	padding:10px 0 0 0;
	margin:0 0 0 0;
	list-style:none;
	text-align:center;
	font-size:22px;
}
.foot-social li {
	padding:0 5px;
	margin:0 0 0 0;
	display:inline-table;
}
.foot-social li a, .foot-social li a:focus {
	color:#0f9ccc;
	text-decoration:none;
}
.foot-social li a:hover {
	color:#ffffff;
	text-decoration:none;
}



/* ==================================================== */
/* 07. Media Query                                      */
/* ==================================================== */


@media (max-width: 991px) { /* This media query is written for Tab only */

.order-opt-link, .order-opt-link:focus {
	margin:0 0 50px 0;
}

}

@media (max-width: 480px) { /* This media query is written for Mobile only */

.inner-banner-area .top-area h1 {
	font-size:36px;
}
.order-opt-link, .order-opt-link:focus {
	margin:0 0 50px 0;
}
.normal-pk {
	padding-top:80px;
	background:url(../img/basic01.png) no-repeat center 15px #ffffff;
}
.normal-pk:hover, .normal-pk.active {
	background:url(../img/basic02.png) no-repeat center 15px #0f9ccc;
}
.normal-pk h3 {
	font-size:18px;
}
.addi-opts .list-opt li {
	padding:3px 0 3px 20px;
	width:100%;
}
.first-field, .second-field, .third-field, .forth-field {
	width:100%;
}
.second-field {
	margin-left:0;
	margin-right:0;
}
.file-upload-area {
	text-align:center;
}
.file-upload-area .draganddrop {
	width:100%;
}
.file-upload-area .link-field {
	margin-top:10px;
	width:100%;
}
.pages-area-cal .page-ul {
	text-align:center;
}
.pages-txtbx {
	width:120px;
}
.pages-selbx {
	width:120px;
}

}

/* CSS for Credit Card Payment form */
.credit-card-box .panel-title {
    display: inline;
    font-weight: bold;
}
.credit-card-box .form-control.error {
    border-color: red;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6);
}
.credit-card-box label.error {
  font-weight: bold;
  color: red;
  padding: 2px 8px;
  margin-top: 2px;
}
.credit-card-box .payment-errors {
  font-weight: bold;
  color: red;
  padding: 2px 8px;
  margin-top: 2px;
}
.credit-card-box label {
    display: block;
}
/* The old "center div vertically" hack */
.credit-card-box .display-table {
    display: table;
}
.credit-card-box .display-tr {
    display: table-row;
}
.credit-card-box .display-td {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}
/* Just looks nicer */
.credit-card-box .panel-heading img {
    min-width: 180px;
}