.mouse{
  margin: 20px auto;
  width: 30px;
}.mouse-icon{
   width: 25px;
   height: 45px;
   border: 2px solid white;
   border-radius: 15px;
   cursor: pointer;
   position: relative;
   text-align: center;
}.mouse-wheel{
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: white;
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}@-moz-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}@keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}

hr {
	border-style: solid;
	border-color: transparent;
	border-width: 1px;
	margin: 0px;
	border-top: 1px solid #efefef;
}

a {
	color: rgb(41, 148, 214);
	text-decoration: none;
}
a.link{
	//display: block;
	white-space: nowrap;
    padding: 10px;
}
a.link:after{
	content: '  \27E9  ';// 203A
}
a:hover {
	text-decoration: underline;
}

.hide {
	display: none;
}
.center{
	text-align: center;
}

.header-center,
.hero-center,
.main-center,
.footer-center {
	max-width: 1024px;
	margin: auto;
	position: relative;
	//padding: 5px;
}

.hero-wrapper,
.main-wrapper,
.footer-wrapper {
	padding: 0px 5px;
	box-sizing: border-box;
}

html {
	height: 100%;
	width: 100%;
	font-family: 'Myriad Pro', 'Open Sans', Arial sans-serif;
	letter-spacing: .5px;
	font-size: 16px;
	color: #444;
}

body {
	\\height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
    font-weight: lighter;
	margin-top: 43px;
}

h1 {
	margin: 10px 0px;
	text-align: center;
	font-size: 3.5em;
	font-weight: lighter;
}


h2 {
	margin: 0;
	text-align: center;
	font-size: 3em;
    font-weight: lighter;
	line-height: 1.2em;
}

h3 {
	margin: 0;
	text-align: center;
	font-size: 1.7em;
    font-weight: lighter;
	
}

		
		/* ======== Header ======== */

.header-wrapper {
	width: 100%;
	padding: 5px;
	position: fixed;
	overflow: hidden;
	box-sizing: border-box;
	z-index: 100000;
	top:0;
}

.header-center {
	overflow: hidden;
}

.header-center .logo-wrapper {
	display: none;
}

ul.main-menu {
	list-style: none;
	margin: 0px;
	padding: 0px;
	display: inline-block;
	border-radius: 5px;
	overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .4);
	background-color: rgba(255, 255, 255, .95);
    font-size: 1.1em;
}

ul.main-menu>li {
	display: inline-block;
	margin: 0 -2px;

	padding: 0px;
	background-color: rgba(255, 255, 255, .1);
	
}
ul.main-menu>li>a{
	margin: 0px;
    color: #333;
	cursor: pointer;
}

ul.main-menu .menu-btn {
	display: inline-block;
	padding: 5px 10px;
    border-right: 1px solid rgba(0, 0, 0, .2);
	box-sizing: border-box;
}

ul.main-menu .menu-btn:hover {
	background-color: rgba(0, 0, 0, .7);
	color: #fff;
	cursor: pointer;
}

ul.main-menu .menu-header {
	font-weight: bold;
}

ul.main-menu .logo-wrapper {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	margin: 0 -4px -4px 0;
}

ul.main-menu .menu-btn:hover .logo-wrapper .logo-blue,
ul.main-menu .menu-btn:hover .logo-wrapper .logo-green {
	background-color: #fff;
}
ul.main-menu-light{
    border: 1px solid rgba(255, 255, 255, .9);
    background-color: transparent;
}
ul.main-menu-light>li>a{
	color: #fff;
}
ul.main-menu-light .menu-btn {
    border-right: 1px solid rgba(255, 255, 255, .5);
}
.logo-wrapper {
    height: 20px;
    width: 18px;
}

.logo-wrapper>.logo-component {
	//position: absolute;
}

.logo-blue {
	background-color: rgb(41, 148, 214);
}

.logo-green {
	background-color: rgb(165, 206, 57);
}
.logo-component{
    height: 27%;
    width: 27%;
    margin-right: 6%;
    margin-bottom: 6%;
    float: left;
    border-radius: 30%;
}
.small-menu-logo{
    float: left;
    height: 33px;
    width: 33px;
}

ul.s-main-menu {
	display: none;
	position: fixed;
	width: 100%;
	list-style: none;
	margin: 1px 0 0 0 ;
	padding: 0px;
	border-top: 1px solid rgba(0, 0, 0, .2);
	border-bottom: 1px solid rgba(0, 0, 0, .4);
	background-color: rgba(255, 255, 255, .9);
	z-index: 20000;
}

.blackout {
	display: none;
	position: fixed;
	top: 0px;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, .7);
	z-index: 15000;
}

ul.s-main-menu>li {
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	padding: 10px;
	//font-size: 1em;
	text-align: center;
}

.s-menu-btn {
	display: none;
	position: relative;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 5px;
	width: 25px;
	padding: 3px;
	float: right;
	cursor: pointer;
	background-color: rgba(255, 255, 255, .9);
	z-index: 20000;
}

.s-menu-btn:hover .s-menu-btn-bar {
	background-color: rgba(0, 0, 0, .2);
}

.s-menu-btn-bar {
	height: 2px;
	margin: 3px;
	border-radius: 100px;
	border: 1px solid rgba(0, 0, 0, .2);
}
.view-gallery-btn{
	float: right;
	padding: 8px;
	border-radius: 5px;
	color: #fff;
	border-bottom:1px solid #ccc;
}
.cart-wrapper{
    float: right;
    height: 30px;
    width: 30px;
    //background-color: #ddd;
    margin: 2px 10px;
    position: relative;
    font-family: inherit;
    color: #fff;
    font-size: 25px;
    color:#555;
}
.cart-item-counter{
    position: absolute;
    top:2px;
    right:-10px;
    padding: 3px;
    height: 15px;
    width: 15px;
    text-align: center;
    border-radius: 1000px;
    background-color: red;
    display: inline-block;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
}

.login-wrapper{
	float: right;
	margin: 10px;
}



/* ======= / Header ======= */


/* ======== Hero ======== */

.hero-wrapper {
    background-size:cover;
    color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/hero-desk1-compressed.jpg);
    padding: 5px;
    text-align: center;
    position: relative;
    height: 100vh;
	margin-top: -43px;
}
.hero-center {
    height: 100%; 
    
    display: table;
    //position: absolute;
    width: 100%;
    //top:0px;
    //left:0px;
    //right:0px;
}
.hero-img-wrapper{
    max-width: 700px;
    margin: 0 auto;
    box-sizing: border-box;
}
.vertical-center{
    display: table-cell;
    vertical-align: middle;
}
.hero-text-wrapper{
	color: #fff;
    font-size: 1.5em;
    //margin-bottom: 60px;
	background-color: rgba(0,0,0,.3);
	padding: 20px;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
.bg-blur {
	position: absolute;
	top:-10%;
	left: -10%;
	width: 120%;
	height:120%;
	background-image: url(../images/hero-desk1-compressed.jpg);
	z-index: 1;
	
	filter: blur(20px); /* Someday, sigh ... */ 
	-webkit-filter: blur(20px); /* Prefixed CSS3 blur filters */
	-moz-filter: blur(20px); 
	-o-filter: blur(20px); 
	-ms-filter: blur(20px); 
	//filter: url(#blur); /* Firefox needs SVG */
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='20'); /* IE lte 9 */
	
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; // IE8
	filter: alpha(opacity=90); // IE 5-7
	opacity: 0.9;
}
.hero-content{
	position: relative;
	z-index: 2;
}
.hero-content > h1{
	font-size:  1.7em;
	line-height: 1.7em;
	margin: 50px;
}
.ghost-link{
    display: inline-block;
    margin: 20px;
    //margin-top: 13vh;
    padding: 10px;
    border:2px solid rgba(255,255,255,.7);
    border-radius: 8px;
    color: inherit;
    background: rgba(255,255,255,.34);
}
.ghost-link:hover{
    background-color: rgba(255,255,255,.1);
    text-decoration: none;
}

/* ======= / Hero ======= */


/* ======== Main Context ======== */

.main-wrapper {
	border-top: 1px solid #efefef;
}
/*.main-wrapper:nth-child(even){
	background-color: #efefef;
	//color: #efefef;
}*/
body .main-wrapper:first-child {
	border-top: 0px!important;
}
.bc-slide{
    //padding: 30px 30px 0 30px;
}
.bc-slide ul{
    list-style: none;
}
.bc-slide li{
   padding: 30px;box-sizing: border-box;
}
.bc-slide  img{
	-ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Safari */
	transform: rotate(-5deg) ;
	border-radius:1px;
    border: 1px solid rgba(0,0,0,.1);
}
.product-speel {
	margin: 50px 0;
    padding: 0 30px;
	text-align: center;
	line-height: 1.7em;
	font-size: 1.4em;
}
ul.product-option-choices{
    list-style: none;
    margin: 0px;
    padding: 0px;
    color: #777;
}
ul.product-option-choices>li {
    padding: 0px;
	margin: 0px;
    margin-left: 10px;
    display: inline-block;
    border-right:1px solid #ccc;
    padding-right: 10px;
    word-break: keep-all;
}
.nobullet{
    border-right: none!important;
}
.section {
	width: 100%;
	overflow: hidden;
	border-bottom: 1px solid rgba(0, 0, 0, .04);
	margin: 10px 0;
	padding: 10px 0;
	box-sizing: border-box;
}

.section:last-of-type {
	border-bottom: none;
}

.main-product-image {
	width: 100%;
	margin-bottom: -15px;
}
table{
	width: 100%;
	border-collapse:collapse;
	margin:20px 0;
	table-layout: fixed;
}
table tr{
	
}
table tr th,table tr td{
	text-align: center; 
}
table tr th{
	
}
table tr td{
	padding: 3px;
    position: relative;
    z-index: 5;
}
.selectable{
	box-sizing: border-box;
	padding: 10px;
	border:1px solid #efefef;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: 5px;
    font-size: 1.15em;
	text-align: center;
    position: relative;
    z-index: 1000;
    cursor: pointer;
}
.selectable:hover{
	border:1px solid #ccc;
	
}
.selected{
	//background-color: #ccc!important;
    background-color: rgb(165, 206, 57);
	//background-color: rgb(41, 148, 214);
	color: #fff;
}
.table-group{
	height:10px;
	width: 100%;
	box-sizing: border-box;
	border:1px solid #555;
	border-bottom:none; 
	
}

ul.product-options-wrapper{
	overflow: hidden;
	margin: 10px -5;
	list-style: none;
	padding: 0px;
    //float: right;
}
ul.product-options-wrapper > li{
	box-sizing: border-box;
	width: 100%;
	padding:0 5px;
	
    margin: 5px 0;
}
.option-info{
    padding: 0 10px;
    font-size: 1.3em;
    line-height: 2em;
    text-align:center;
    box-sizing: border-box;
}
.extra-cost{
   float: right;
}

.totals-wrapper{
	
}
.total-price-wrapper{
    float: right;
	font-size: 1.5em;
	text-align: right;
}
.total-price{
    display: inline-block;
	font-size: 1.3em;
	font-weight: bold;
    //width: 3em;
}

.a4-paper{
    margin: 20px auto;
    width: 210mm;
    height: 297mm;
    padding: 1.5cm;
    padding-top: 2cm;
    box-sizing: border-box;
    background-color: #fff;
    //box-shadow: 1px 1px 5px 1px rgba(0,0,0,.2);
    border: 1px solid #ccc;
    position: relative;
    font-size: 11pt;
}
.quote-no-wrapper{
    float: right;
}
.quote-detail-wrapper{
    float: left;
}
.a4-paper>.letterhead-header{
    width: 100%;
    position: absolute;
    height: 2cm;
    top:0px;
    left: 0px;
    text-align: center;
    background: url(../images/logo-cc-40x233.png) center center no-repeat;
}
.a4-paper>.letterhead-header>img{
    margin: .5cm;
}
.a4-paper>.letterhead-footer{
    width: 100%;
    position: absolute;
    height: 1.2cm;
    bottom:0px;
    left: 0px;
    text-align: center;
    background:url(/../images/footer-url.png) center center no-repeat;
}
.a4-paper>.letterhead-footer>img{
    margin: .5cm;
}
.bank-account-details{
    width: 50%;
}
.bank-account-details td{
    text-align: left;
}
.quote-client-autho{
    border-collapse:separate;
    border-spacing: 0px 16px;
}
.quote-client-autho td{
    padding:0px 5px 0 0;
}
.td-underline{
    border-bottom: 1px solid #ccc;
}
.crossout{
    padding: 40px;
}
.item-price-wrapper{
    float: right;
}
ul.item-list{
    padding: 0px;
}
ul.item-list > li{
    border-bottom: 1px solid #efefef;
    position: relative;
    list-style: none;
    margin-left: 20px;
}
ul.item-list > li:before{
    content: "";
    margin-right:4px;
    position: absolute;
    right:100%;
    display: block;
    width: 14px;
    height:14px;
    border: 1px solid #ccc;
}
ul.item-list > li:last-child{
    border-bottom: 0;
}
ul.item-details{
    padding: 0px;
    padding-left: 20px;
    list-style:disc;
    list-style-position: inside;
    
}
ul.item-details .item-detail{
    overflow: hidden;
    
}
ul.item-details li{
    width: 90%;
    float: left;
}
ul.gallery-list{
	list-style: none;
	margin: 0px;
    margin-top: 30px;
	padding: 0px;
}

ul.gallery-list > li{
	margin: 0px;
    padding: 4vw;
}
.view-letterheads > .gallery-item > img, .view-flyers > .gallery-item > img{
	-ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Safari */
	transform: rotate(-5deg) ;
	border-radius:1px;
    border: 1px solid rgba(0,0,0,.1);
}
.view-letterheads > .gallery-item{
	height: 35vw;
}
.view-logos > .gallery-item{
	height: 25vw!important;
}

.view-flyers > .gallery-item {
	//height:35vw;
}
.view-business-card > .gallery-item {
	height: 20vw;
}
.view-business-card > .gallery-item > img{
	-ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Safari */
	transform: rotate(-5deg) ;
	border-radius:1px;
    border: 1px solid rgba(0,0,0,.1);
}
ul.gallery-list > li .bc-front,
ul.gallery-list > li .bc-back{
    height: 10vw;
}

.portrait > .bc-front,
.portrait > .bc-back{
    margin-top: -30px;
    margin-left: 60px;
    height: 15vw!important;
}
.portrait > .bc-shadow{
    margin-left: 65px;
}
ul.gallery-list > li .lh-front{

}
ul.gallery-list > li:hover .gallery-detail-wrapper{
	visibility:visible;
}
.gallery-detail-wrapper{
	margin-top: -20px;
	visibility:hidden;
	text-align: center;
}
.gallery-detail-wrapper h3{
    margin: 0px;
}

.rounded-corners{
	border-radius:4%/7%!important;
}

.bc-back,.bc-back-port{
	display: none;
}
.bc-shadow{
    transform: none!important;
    position: relative;
    z-index: -1;
    border:none!important;
    top:-15px;
    left:-12px;
}
.lh-shadow{
    transform: none!important;
    position: relative;
    z-index: -1;
    border:none!important;
    top:-15px;
}

ul.gallery-extras-list{
    color: #999;
    list-style: none;
    margin: 0px;
    padding:0px;
}
ul.gallery-extras-list > li{
    
    margin: 0px;
    padding:0px;
}

.quote-product-name{
	font-weight: bold;
    font-size: 1.25em;
}
.quote-product-details{
	margin-left: 10px;
}
.package-table > thead{
	font-size: 1.2em;
}
.package-table > thead > tr > th:first-child{
	//text-align: left;
}
.product-group{
	border-top: 1px solid #efefef;
}
.product-group> tr:first-child> td{
	padding-top: 10px;
}
.product-group> tr:last-child> td{
	padding-bottom: 10px;
    border-bottom: 1px solid #efefef;
}
.product-group> tr> td:first-child{
	text-align: left;
}
.remove-item-btn{
    color: #ddd;
    text-align: right;
    //width: 100%;
    margin: 0px 10px;
    //position: absolute;
    //left:0px;
    //float: right;
    
}
.remove-item-btn:hover,.minus-btn:hover,.plus-btn:hover{
    color: #333;
    cursor: pointer;
}
.item-qty{
    white-space: nowrap;
}
.item-sub-total{
    text-align: right;
    white-space: nowrap;
}
.minus-btn,.plus-btn{
    margin: 10px;
    color: #ddd;
}
.grand-total-wrapper{
    float: right;
    text-align: right;
    padding: 0 15px;
}
.grand-total-wrapper h3{
    padding: 5px;
    margin: 0px;
    font-size: 1.4em;
    overflow: hidden;
}
.totals-wrapper{
	text-align:right;
}
.extras-title{
    font-weight: bold;
    font-size: 1.1em;
}
.list-arrow{
    color:#ccc;
}
.package-table{
    border-bottom:1px solid #efefef;
    width: 100%;
}
/* ======= / Main Context ======= */


/* ======== Footer ======== */

.footer-wrapper {
	width: 100%;
	padding: 0px;
	overflow: hidden;
	box-sizing: border-box;
    background-color: #fff
}

.footer-center {
	overflow: hidden;
	padding: 5px 0
}

.sitemaps {
	padding: 10px 5px;
}

.sitemaps h3 {
	margin: 5px 0px;
}

.sitemaps > ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.sitemaps > ul > li {
	padding: 5px 0;
}
.sitemaps h3{
	text-align: left;
}

.legal {
	padding: 0px;
	color: #999;
	overflow: auto;
	font-size: .7em;
}

.legal p {
	margin: 0;
	float: left;
}

.legal ul{
	margin: 0;
	list-style: none;
	float: left;
}
.legal ul>li{
	float: left;
	border-right: 1px solid #ccc;
	padding: 0px 5px;
}
.legal ul>li:last-child{
	float: left;
	border-right:0px;
}

.brief-questions {
	font-size: 1.3em
}

.brief-answer {
	float: right;
}


/* ======= / Footer =====s== */

@media screen and (max-width: 700px) {
	ul.main-menu {
		display: none;
	}
	ul.s-main-menu .logo-wrapper {
		//display: none;
	}
	.s-menu-btn {
		display: block;
	}
	.header-center .logo-wrapper {
		display: block;
	}
    .header-wrapper {
        background-color: rgba(255, 255, 255, .9);
        border-bottom: 1px solid #efefef;
    }
    .sitemaps {
        font-size: 1.5em;
        text-align: center;
    }
    ul.gallery-list > li{
        height: 75vw;
        padding: 10vw 15vw;
    }
    .view-letterheads > .gallery-item {
	   height: 130vw;
    }
	.view-flyers > .gallery-item  {
	   height: 160vw;
    }
    .view-business-card > .gallery-item {
	   height: 60vw;
    }
	.view-logos > .gallery-item{
		height: 100vw!important;
		padding: 10vw;
	}
    
    .view-business-card > .gallery-item {
	   height: 70vw;
    }
    ul.gallery-list > li .bc-front,
    ul.gallery-list > li .bc-back{
        height: 40vw;
    }
    .portrait .bc-front,
    .portrait .bc-back{
        margin-left: 80px;
        height: 60vw!important;
    }
     .portrait > .bc-shadow{
        margin-left: 80px;
        margin-top: -10px;
    }
    h1{
        margin-top: 42px;
    }
    .hero-img-wrapper{
        width: 80vw;
    }
    .hero-text-wrapper{
        font-size: .8em;
        margin-bottom: 0;
    }
    .section{
        padding: 10px;
    }
	.view-gallery-btn{
		margin-right: 5px;
	}
    .package-table{
        font-size: .9em;
    }
    .cart-wrapper{
        color: #333!important;
    }
	.scroll-down{
		
		display: none;
	}
}

@media screen and (min-width: 700px) and (max-width: 1300px) {
    ul.gallery-list > li{
        padding: 8vw;
    }
    ul.gallery-list > li .bc-front,
    ul.gallery-list > li .bc-back{
        height: 20vw;
    }

    .portrait .bc-front,
    .portrait .bc-back{
        margin-top: -60px;
        margin-left: 80px;
        height: 30vw!important;
    }
    .portrait > .bc-shadow{
        margin-left: 80px;
        margin-top: -10px;
    }
    .view-business-card > .gallery-item {
	   height: 40vw;
}
    .view-letterheads > .gallery-item {
	   height: 70vw;
    }
	
	
	.view-flyers > .gallery-item {
		height: 90vw;
	}
	.view-logos > .gallery-item{
		height: 50vw!important;
		padding: 2vw;
	}
}

.hero-logo {
	//vertical-align: middle;
	margin-bottom: -12px;
	//margin:20px;
}



.main-menu-wrapper {
	float:left;
}

.scroll-down {
	position: absolute;
	width: 100%;
	bottom: 0px;
	padding: 10px;
	left: 0px;
	color:rgba(255,255,255,.8);
	
}