#app {
	width: 100%;
}
.exampleTxt {
	display: none;
}
canvas {

}
div {

}


#portfolio-details {

}
#portfolio-details > .container {
	max-width: 950px;
}
body.full #portfolio-details > .container {
	max-width: 100%;
}
.linkageText {
	max-width: 698px;
	max-height: 600px;
	min-height: 250px;
	font-size: 15px;
	background: transparent url('../images/derby_covers/chrome.png') center 0 no-repeat;
	background-size: contain;
	margin: 0 auto;
	text-align: center;
	position: relative;

}

div.topText, div.bottomText {
	height: auto;
	color: #333;
	text-shadow: 0px -3px 0px rgba(255,255,255,.5); /* 50% white from top */
	text-transform: uppercase;
	width: 100%;
}
div.topText {
	/*padding-top: 40px;*/
}

div.bottomText {
	position: absolute;
}

.atrsvg {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 250px;
	top: 0;
	bottom: 0;
	margin: auto 0;
	/*transform: translateY(-20px);*/
}

.atrsvg object {
	max-height: 260px;
	max-width: 260px;
	width: auto;
	height: 100%;
	margin: 0 auto;
	/* filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);*/
}


div.topText.DarkKnight {
    font-size: 55px;
    font-family: DarkKnight, serif;
    /*padding-top: 75px;*/
}



.interactiveTxt-cont {
    padding: 0!important;
}
.inputCont {
    background: #e6e6e6;
    border-top: 1px solid #c3c3c3;
    margin: 0!important;
}
.inputCont input {
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #c9c9c9;
    font-size: 14px;
    text-transform: uppercase;
	height: calc(2.25rem + 2px);
}
.inputCont select, .inputCont ul.form-select {
    background: #fcfcfc;
    border: 1px solid #c9c9c9;
    border-radius: 10px;
    font-size: 14px;
}
.inputCont > div {
    box-sizing: border-box;
}

div.swipeAlerter {
    position: absolute;
    margin: 0;
    left: 50%;
    z-index: 1;
}

div.swipeAlerter > span {
    position: absolute;
    display: none;
    background: transparent url("../images/hand_swipe_bw_64.png") 0 0;
    width: 60px;
    height: 60px;
    background-size: contain;
    animation-name:swipe;
    animation-duration:3s;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    animation-iteration-count: infinite;

}

.buildDesignMsg {
    min-height: 55px;
    display: block;
}

@keyframes swipe {
    0% {
        left: 0;
        transform: rotate(0);
    }

    25% {
        left: 100px;
        transform: rotate(25deg);

    }

    50% {
        left: 0;
        transform: rotate(0);
    }

    75% {
        left: -100px;
        transform: rotate(-25deg);

    }

    100% {
        left: 0;
        transform: rotate(0);
    }
}

.sendDesignLink, .buildDesign {
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.sendDesignLinkSubmit {
    border-radius: 0 10px 10px 0 !important;
}



div.buildDesign input {
    border-radius: 10px;
    padding: 8px;
    border: 1px	solid #c9c9c9;
    font-size: 14px;
}


.z-text {
    transform: rotateX(-7deg) rotateY(0deg);
    transition: transform 1s;
}
.cta-cont {
    padding: 0;
    text-align: center;
    border-left: 1px dotted #aaa;
    background: #eee;
}
#portfolio-details {
    overflow: visible;
}
.portfolio-details .portfolio-info {
    padding: 15px;
    box-shadow: none;
    overflow: visible;
}
.portfolio-details .portfolio-info h2 {
    margin-top: 10px;
}


#s-37a4ee17-b491-485d-aae2-e5e3cffca766 {
    padding-bottom: 0 !important;
}

.panel-info>.panel-heading {
    color: #FFF;
    background-color: #000;
}


ul.finishSelector {
    margin-top: 45px;
}
ul.finishSelector.open {
    /*
    overflow-y: scroll;
    height: 125px;
    position: absolute;
    width: 94%;
    top: -35px;
    */
	height: auto;
	position: absolute;
	width: 85%;
	top: 12px;
	z-index: 10;
}
ul.finishSelector li {
	z-index: 2;
	padding: 10px;
	position: relative;
}
ul.finishSelector li:not(.init) {
	float: left;
	width: 100%;
	display: none;
	background: #ddd;
}
ul.finishSelector.open li {
	border-bottom: 1px solid #ccc;
}
ul.finishSelector.open li:not(.init) {
	display: block;
}
ul.finishSelector li:not(.init):hover, ul.finishSelector li.selected:not(.init) {
	background: #09f;
}
ul.finishSelector li.init {
	cursor: pointer;
}

ul.finishSelector li span.swatch {
	display: inline-block;
	height: 25px;
	width: 25px;
	top: 8px;
	border: 1px #000 solid;
	right: 10px;
	position: absolute;
}
a#submit {
	z-index: 1;
}



.form-input {
	border: 1px solid #ced4da;

}

.form-select {
	display: block;
	width: 100%;
	padding: .375rem 2.25rem .375rem .75rem;
	line-height: 1.5;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: .25rem;
}

.expiryMonth, .expiryYear {
	padding: 0 10px 0 0;
}

.form-control {
	height: auto;
	font-size: 1.2rem;
}


.portfolio-details .portfolio-info ul li + li {
	margin-top: 0;
}

.tab-content {
	display: block;
}

.panel-body {
	background: transparent;
}
.panel-info {
	border: 0;
	margin-bottom: 0;
}

.linkage-summary {
	border-bottom: 2px solid #e9ebef;
	padding-bottom: 25px;
	margin-bottom: 35px;
}
.linkage-summary h6 {
	border-bottom: 1px dotted #ddd;
	padding: 10px 0!important;
	font-weight: bold;
}
.linkage-summary h6 .text-right {
	color: #007bff;

}

label.error {
	color: red;
}
.error {
	border-color: red;
	color: red;
}

label.error.valid {
	display: none!important;
}

article.card {
	margin-bottom: 0;
	min-height: 470px;
}

form[name='ccPaymentFrm'] button {
	margin-top: 30px;
	font-size: 1.2rem;
}

.interactiveTxt-cont .panel-body {
	margin-bottom: 0;
	padding: 1rem 2rem 0;
}


.shg-box > .shg-box-content {
	z-index: 0;
}

.shg-box > .appCont.shg-box-content {
	z-index: 10;
}

.secureCards img, .secureSeal img {
	width: auto !important;
	margin: 0 auto;
	display: block;
}

.secureSeal img {
	max-height: 65px;
}

.bugNotice {
	color: #898989;
}
.bugNotice p {
	margin: 0 auto;
}
.nbLinkageDevVer {
	position: absolute;
	bottom: 5px;
	right: 5px;
	color: #898989;
}



@media (min-width: 1200px) {
	.container {
		max-width: 1500px;
	}
}

@media (max-width: 10240px) {
	.container {
		padding: 0;
	}
	.linkageText {
		/*max-height: 300px;*/
	}
	div.swipeAlerter > span {
		width: 45px;
		height: 45px;
	}
}

@media only screen and  (max-width: 912px) {
	.container {
		max-width: 100%;
	}

	.finishSelectorCont {
		padding-top: 0;
	}

	.finishSelectorCont ul.finishSelector {
		margin-top: 0;
	}
}

@media only screen and  (max-width: 820px) {
	.bottomText {
		/*margin-top: 85px;*/
	}

	ul.form-select {
		margin-top: 0;
	}
}

@media (min-width: 801px) {
	.page-content--centered {
		width: 100%;
	}
}

@media only screen and  (max-width: 767px) {
	.container {
		max-width:100%;
	}
	canvas {
		max-width: 100%;
	}

}

@media only screen and  (max-width: 630px) {
	.atrsvg object {
		width:35%;
	}

	.topText, .bottomText {
		/*font-size: 6vw!important;*/
	}

	.bottomText {
		/*margin-top: 110px !important;*/
	}

	.atrsvg {
		/*top: calc(17vw / 3 * 1px);*/
	}
}

@media only screen and  (max-width: 550px) {
	.linkageText {
		/*height: 490px !important;*/
	}
	.atrsvg {
		/*top: 90px;*/
	}

	.topText, .bottomText {
		/*font-size: 6vw!important;*/
	}

	.topText {

	}

	.bottomText {
		/*margin-top: 125px !important;*/
		/*height: 135px !important;*/
	}
}

@media only screen and  (max-width: 500px) {
	.bottomText {
		/*margin-top: 90px !important;*/
	}
}

@media only screen and  (max-width: 480px) {
	canvas {
		max-width: 100%;
	}
	#main-content {
		margin-top: 53px;
	}

	.topText {
		/*padding-top: 30px;*/
	}

	.bottomText {
		/*margin-top: 65px !important;*/
	}

	.atrsvg {
		/*top: 70px;*/
	}

	div.swipeAlerter > span {
		width: 35px;
		height: 35px;
	}

	.portfolio-details {
		padding: 0;
	}
	.inputCont input {
		margin: 0;
	}
	h1.page-heading {
		margin: 0;
	}
	ul.finishSelector {
		margin-top: 0px;
	}
}

@media only screen and  (max-width: 414px) {
	.linkageText {
		/*max-height: 375px;*/
	}

	.topText, .bottomText {
		/*font-size: 7vw!important;*/
	}

	.topText {
		/*padding-top: 40px !important;*/
		/*height: 135px !important;*/
	}

	.bottomText {
		/*margin-top: 130px !important;*/
		/*height: 135px !important;*/
	}

	.atrsvg {
		/*top: 45px !important;*/
	}
}


@media only screen and  (max-width: 375px) {
	.linkageText {
		/*max-height: 375px;*/
	}

	.topText, .bottomText {
		/*font-size: 1.5em!important;*/
	}

	.topText {
		/*padding-top: 30px !important;*/
		/*height: 135px !important;*/
	}

	.bottomText {
		/*margin-top: 105px !important;*/
		/*height: 135px !important;*/
	}

	.atrsvg {
		/*top: 30px !important;*/
	}
}


@media only screen and  (max-width: 280px) {
	.linkageText {
		/*max-height: 267px;*/
	}

	.topText {
		/*padding-top: 20px !important;*/
		/*height: 85px !important;*/
	}

	.bottomText {
		/*margin-top: 95px !important;*/
		/*height: 85px !important;*/
	}

	.atrsvg {
		/*top: -13px !important;*/
	}
}