/* ================================================================================================================================ */
/* ================================================================================================================================ */
/* ================================================================================================================================ */

@media screen {
	
	body {
		font-family:proxima-nova,sans-serif;
	}
	
	/* ---- 2020 buttons ---- */
	
	.box_button {
		display:inline-block;
		padding:12px 16px;
		line-height:105%;
		background-color:#222;
		color:#fff;
		text-decoration:none;
		font-weight:600;
		border:none;
		cursor:pointer;
	}
	
	.box_button.small {
		padding:8px 12px;
	}
	
	.box_button.large {
		padding:16px 20px;
	}
	
	.box_button.arrow:after {
		display:inline-block;
		content:'›';
		margin:0 0 0 8px;
	}
	
	.box_button.red {
		background-color:#c42e2f;
	}
	
	.line_button_group {
		display:flex;
		flex-direction:column;
		max-width:256px;
	}
	
	.line_button {
		position:relative;
		display:inline-block;
		text-decoration:none;
		padding:8px 2px;
		color:#222;
		font-weight:600;
	}
	
	.line_button:before {
		position:absolute;
		display:block;
		content:'';
		right:0;
		bottom:0;
		left:0;
		height:2px;
		background-color:#222;
	}
	
	.line_button.lightblue {
		color:#3bbedc;
	}
	
	.line_button.lightblue:before {
		background-color:#3bbedc;
	}
	
	.line_button.darkblue {
		color:#223a54;
	}
	
	.line_button.darkblue:before {
		background-color:#223a54;
	}
	
	.line_button.white {
		color:#fff;
	}
	
	.line_button.white:before {
		background-color:#fff;
	}
	
	.line_button.inline {
		
	}
	
	.line_button.block {
		display:block;
	}
	
	.line_button.block.arrow {
		display:flex;
		justify-content:space-between;
	}
	
	.line_button.inline.arrow {
		
	}
	
	.line_button.arrow:after {
		display:inline-block;
		content:'›';
		margin:0 0 0 16px;
	}
	
	/* ---- */
		
	#header {
		background-color:#223a54;
		color:#fff;
		padding:16px 0;
	}
	
	#header .logo img {
		width:96px;
		height:auto;
	}
	
	.panel_page_feature {
		color:#fff;
		padding:32px 0;
	}
	
	.panel_page_feature h1 {
		margin:0;
	}
	
	.form .req {
		color:#c00;
		font-weight:500;
	}
	
	.panel_maxwidth {
		max-width:768px;
	}
	
	.panel_interface {
		background-color:#f5f5f5;
	}
	
	.loading:after {
		position:absolute;
		display:block;
		content:'';
		top:0;
		right:0;
		bottom:0;
		left:0;
		background-color:#fff;
		opacity:0.9;
		animation-name:bgPulsate;
		animation-duration:0.5s;
		animation-iteration-count:infinite;
	}
	
	.panel_interface .intro {
		margin:0 0 32px 0;
		font-weight:300;
	}
	
	.panel_interface .intro h2 {
		color:#223a54;
		color:#c42e2f;
	}
	
	.panel_interface .intro h2 br {
		display:none;
	}
	
	.panel_interface .intro h4 {
		font-weight:700;
		color:#223a54;
	}
	
	.panel_interface .intro strong {
		font-weight:700;
	}
	
	.panel_interface .intro a {
		font-weight:500;
	}
	
	.panel_interface .intro table td {
		border-bottom:1px dotted #ccc;
		padding:8px;
		font-size:0.9em;
		line-height:110%;
		font-weight:500;
	}
	
	#interface {
		position:relative;
	}
	
	#interface .interface_input {
		padding:16px;
		background-color:#fcfcfc;
		margin-bottom:4px;
	}
	
	#interface .interface_input.has_error {
		background-color:#f2c5c5;
	}
		
	#interface .label {
		font-weight:700;
		font-size:1.1em;
		margin:0 0 8px 0;
	}
	
	#interface .description {
		font-size:0.9em;
		color:#666;
		margin:-4px 0 8px 0;
	}
	
	#interface .interface_input.select_popup .new_product {
		display:flex;
		align-items:center;
		box-sizing:border-box;
		border:1px dashed #999;
		background-color:#fcfcfc;
		height:64px;
		padding:16px;
		font-weight:500;
		text-decoration:none;
		color:#999;
	}
	
	#interface .interface_input.select_popup.product_selected .new_product {
		display:none;
	}
	
	#interface .interface_input.select_popup .current_product {
		display:none;
		box-sizing:border-box;
		height:64px;
		background-color:#fff;
		box-shadow:1px 1px 4px rgba(0,0,0,0.1);
	}
	
	#interface .interface_input.select_popup.product_selected .current_product {
		display:flex;
	}
	
	#interface .interface_input.select_popup .current_product .image {
		display:block;
		flex:0 0 64px;
		background-color:#eee;
		background-size:cover;
		background-position:center center;
		background-repeat:no-repeat;
		text-decoration:none;
	}
	
	#interface .interface_input.select_popup .current_product .text {
		display:flex;
		align-items:center;
		flex:1 1 auto;
		padding:16px;
		line-height:115%;
		text-decoration:none;
	}
	
	#interface .interface_input.select_popup .current_product .clear {
		display:flex;
		align-items:center;
		justify-content:center;
		flex:0 0 32px;
		background-color:#fff;
		text-decoration:none;
		font-weight:700;
		font-size:1.6em;
		color:#999;
	}
	
	#job_details {
		position:relative;
		padding:16px;
		background-color:#fcfcfc;
	}
	
	#job_details .row.has_error {
		background-color:#f2c5c5;
	}
	
	#job_details .checkbox_confirm {
		display:inline-block;
		padding:16px;
		background-color:#f5f5f5;
		cursor:pointer;
	}
	
	#popup {
		position:fixed;
		display:block;
		visibility:hidden;
		opacity:0;
		top:0;
		right:0;
		bottom:0;
		left:0;
		transition:opacity 0s 0.4s, visibility 0s 0.4s;
	}
	
	#popup.show {
		visibility:visible;
		opacity:1;
		transition:opacity 0s 0s, visibility 0s 0s;
	}
	
	#popup .bg {
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		background-color:#223a54;
		background-color:#ddd;
		opacity:0;
		z-index:10;
		transition:opacity 0.2s 0.2s;
	}
	
	#popup.show .bg {
		opacity:0.95;
		transition:opacity 0.2s 0s;
	}
	
	#popup .box {
		box-sizing:border-box;
		position:absolute;
		display:flex;
		flex-direction:column;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		width:90vw;
		max-width:768px;
		height:90vh;
		max-height:768px;
		background-color:#f5f5f5;
		z-index:20;
		opacity:0;
		transition:opacity 0.2s 0s;
	}
	
	#popup.show .box {
		opacity:1;
		transition:opacity 0.2s 0.2s;
	}
	
	#popup .box .popup_top {
		position:relative;
		z-index:20;
		box-shadow:0 0 8px rgba(0,0,0,0.15);
		padding:16px;
	}
	
	#popup .box .headline {
		
	}
		
	#popup .box .headline .label {
		font-weight:500;
		font-size:0.8em;
		color:#999;
	}
	
	#popup .box .headline .part {
		font-size:1.4em;
		font-weight:700;
		color:#223a54;
	}
	
	#popup .box .popup_mid {
		position:relative;
		z-index:10;
		overflow:hidden;
		overflow-y:scroll;
		height:100%;
		background-color:#fff;
	}
	
	#popup .box .list_groups {
		background-color:#fff;
		padding:16px 0;
	}
	
	#popup .box .group {
		padding:16px;
		border-bottom:1px solid #eee;
	}
	
	#popup .box .group:last-child {
		border:none;
	}
	
	#popup .box .group_headline {
		font-weight:500;
		font-size:1.2em;
		margin:0 0 12px 0;
		color:#223a54;
	}
	
	#popup .box .group_items {
		
	}
	
	#popup .box .product {
		display:flex;
		align-items:center;
		padding:8px 0;
		border-bottom:1px solid #eee;
		text-decoration:none;
	}
	
	#popup .box .product:last-child {
		border:none;
	}
	
	#popup .box .product .image {
		display:flex;
		justify-content:center;
		align-items:center;
		flex:0 0 32px;
		margin:0 12px 0 0;
		min-height:32px;
	}
	
	#popup .box .product .image img {
		width:auto;
		height:auto;
		max-width:32px;
		max-height:32px;
	}
	
	#popup .box .product .text {
		font-weight:500;
		line-height:120%;
		padding:8px 0;
	}
	
	#popup .box .product .text .brand {
		display:inline-block;
	}
	
	#popup .box .product .text .subbrand {
		display:inline-block;
	}
	
	#popup .box .product .text .name {
		display:inline-block;
		font-weight:700;
	}
	
	#popup .box .product .text .subrange {
		display:inline-block;
		font-size:0.8em;
		color:#999;
	}
	
	#popup .box .product .text .price_info {
		display:inline-block;
		margin:0 0 0 16px;
		font-size:0.8em;
		color:#c42e2f;
		color:#1ba5c4;
	}
	
	#popup .box:after {
		position:absolute;
		display:block;
		content:'';
		z-index:30;
		right:0;
		bottom:0;
		left:0;
		height:32px;
		background:linear-gradient(to bottom, rgba(240,240,240,0) 0%, rgba(240,240,240,1) 100%); 
	}
	
	.form .freeform-form-has-errors {
		padding:16px;
		margin:0 0 16px 0;
		font-weight:700;
		color:#fff;
		background-color:#c42e2f;
	}
	
	ul.errors {
		color:#c42e2f;
	}
	
	.disclaimer {
		margin:16px 0 0 0;
		font-size:0.8em;
		color:#666;
		line-height:110%;
	}
  
  /*
  [data-selection-key="roofTile"] .image:after{
    content: ".";
    background-size: cover;
    width: 100%;
    background-position: 50% 50%;
    height: auto;
    padding-bottom: 100%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
  }
  */
	
	/*-- notes section --*/
			.select_popup{
				position: relative;
			}

			.note_icon{
				position: absolute;
				top: 40px;
				right: 30px;
				margin: 0;		
			}

			.note_icon img{
				width: 15px;
				height: 15px;
				transition-duration: .1s;
			}

			.note_icon img:hover{
				transform: scale(1.3);
			}
			/**/

			.note_text{
				margin: 10px 0 0 0;		
				display: flex;
				align-items: center;
				font-size: 0.9em;
				color: #666;
				text-decoration: none;
			}


			.note_text img{
				width: 15px;
				height: 15px;
				transition-duration: .1s;
				margin-right: 5px;
			}
	
			/**/
			.fancybox-bg{
				background-color: #ddd;
			}

			.notes_section{
				width: 600px;
				max-width: 90%;
				min-height: 300px;
			}

			.notes_section h3{
				margin-bottom: 5px;	
			}

			.notes_section p{
				margin: 0;	
			}

			.notes_section textarea{
				width: 100%;
				min-height: 150px;
				margin: 10px 0 0;
				padding: 10px;
				resize: vertical;
				outline: none;
			}

			textarea#field_notes{
				border: none;
				background: whitesmoke;
				outline: none;
			}

	/*-- end of 'notes section' --*/
}

/* ================================================================================================================================ */
/* ================================================================================================================================ */
/* ================================================================================================================================ */

@media only screen and (min-width: 480px) {
	
	#header {
		padding:24px 0;
	}
	
	#header .logo img {
		width:128px;
	}
	
	.panel_page_feature {
		padding:48px 0;
	}
	
	#interface .interface_input {
		padding:24px;
	}
	
	#job_details {
		padding:24px;
	}
	
	#popup .box .popup_top {
		padding:24px;
	}
	
	#popup .box .group {
		padding:24px;
	}
	
	#popup .box .product .image {
    position: relative;
		flex-basis:48px;
		min-height:48px;
		margin-right:16px;
	}
	
	#popup .box .product .image img {
		max-width:48px;
		max-height:48px;
	}
		
}

/* ================================================================================================================================ */
/* ================================================================================================================================ */
/* ================================================================================================================================ */

@media only screen and (min-width: 768px) {
	
	/* ---- 2020 buttons ---- */
	
	.box_button {
		padding:16px 20px;
		
	}
	
	.box_button.small {
		padding:12px 16px;
	}
	
	.box_button.large {
		padding:20px 24px;
	}
    
	.box_button.arrow:after {
		margin-left:12px;
	}
	
	.line_button {
		padding:12px 4px;
	}
	
	#header {
		padding:32x 0;
	}
	
	#header .logo img {
		width:160px;
	}
	
	.panel_page_feature {
		padding:64px 0;
	}
	
	.panel_interface .intro h2 br {
		display:inline;
	}
	
	#interface .interface_input {
		padding:32px;
	}
	
	#interface .interface_input.select_popup .current_product .text {
		font-size:1.1em;
	}
	
	#interface .interface_input.select_popup .current_product .clear {
		flex-basis:64px;
	}
	
	#job_details {
		padding:32px;
	}
	
	#popup .box .popup_top {
		padding:32px;
	}
	
	#popup .box .headline .part {
		font-size:1.8em;
	}
	
	#popup .box .group {
		padding:32px;
	}
	
	#popup .box .group_headline {
		font-size:1.4em;
	}
	
	#popup .box .product .image {
		flex-basis:64px;
		min-height:64px;
		margin-right:24px;
	}
	
	#popup .box .product .image img {
		max-width:64px;
		max-height:64px;
	}
	
	#popup .box .product .text {
		font-size:1.1em;
	}
	
	#popup .box .product .text .brand {
		margin-right:4px;
	}
	
	#popup .box .product .text .subbrand {
		margin-right:4px;
	}
	
	#popup .box .product .text .name {
		margin-right:4px;
	}
	
	#popup .box .product .text .subrange {
		
	}
		
}

/* ================================================================================================================================ */
/* ================================================================================================================================ */
/* ================================================================================================================================ */

@media only screen and (min-width: 1024px) {
	
	.panel_page_feature {
		padding:96px 0;
	}
	
}

/* ================================================================================================================================ */
/* ================================================================================================================================ */
/* ================================================================================================================================ */

@media only screen and (min-width: 1280px) {
	
	/* ---- 2020 buttons ---- */
	
	.box_button {
		
	}
	
	.box_button:active {
		box-shadow:inset 2px 2px 8px rgba(0,0,0,0.25);
	}
	
	.box_button:hover {
		background-color:#333;
	}
	
	.box_button.red:hover {
		background-color:#d73e3f;
	}
	
	.line_button {
		
	}
		
	.line_button:hover:before {
		animation-name:line_button_hover;
		animation-iteration-count:1;
		animation-duration:0.3s;
		animation-timing-function:ease-out;
	}
	
	.panel_page_feature {
		padding:128px 0;
	}
	
	#interface .interface_input.select_popup .new_product:hover {
		border-color:#444;
		color:#222;
		background-color:#fff;
	}
	
	#interface .interface_input.select_popup .new_product:active {
		transform:scale(0.98);
	}
	
	#interface .interface_input.select_popup .current_product .clear:hover {
		background-color:#f5f5f5;
		color:#222;
	}
	
	#interface .interface_input.select_popup .current_product .clear:active {
		background-color:#eee;
	}
	
}

/* ================================================================================================================================ */
/* ================================================================================================================================ */
/* ================================================================================================================================ */

@media only screen and (min-width: 1366px) {
	
	.panel_page_feature {
		padding:160px 0;
	}
	
}

/* ================================================================================================================================ */
/* ================================================================================================================================ */
/* ================================================================================================================================ */

@media only screen and (min-width: 1600px) {
	
	.panel_page_feature {
		padding:192px 0;
	}
	
}

@keyframes bgPulsate {
	
	0% {
		opacity:0.9;
	}
	
	60% {
		opacity:0.7;
	}
	
	100% {
		opacity:0.9;
	}
	
}