/* ====================================================================================================================
@brief ONTRAPORT's skeleton extension file
===================================================================================================================== */

/* =====================================================================================================================
Skeleton Grid Size Extension
	1) Adds new column sizes for rows with 7, 8, or 9 columns.
	2) Adds a tablet responsive size for screens 850px - 550px wide.
		a) For Multi-Item the tablet is as follows:
		
				12 colums -> 4 columns -> 1 column
				11 colums -> 4 columns -> 1 column
				10 colums -> 4 columns -> 1 column
				9 colums -> 3 columns -> 1 column
				8 colums -> 3 columns -> 1 column
				7 colums -> 3 columns -> 1 column
				6 colums -> 2 columns -> 1 column
				5 colums -> 2 columns -> 1 column
				4 colums -> 2 columns -> 1 column
				3 columns -> 3 columns -> 1 column
				2 columns -> 2 columns -> 1 column
				1 column -> 1 column -> 1 column
				
===================================================================================================================== */
@media (min-width: 550px) {
	.column.first-visible,
	.columns.first-visible {
		margin-left: 0; 
	}
	/* For rows 7 columns accross */
	.one-and-half.columns {
		width: 10.6666667%;
	}
	/* For rows 8 columns accross */
	.one-and-third.columns {
		width: 8.6666667%;
	}
	/* For rows 9 columns accross */
	.one-and-fourth.columns {
		width: 7.3333333%;
	}
	
	.offset-by-one.column.first-visible, 
	.offset-by-one.columns.first-visible {
		margin-left: 8.66666666667%;
	}
}
/* For devices smaller than 768px */
@media (min-width: 550px) and (max-width: 850px) {
	.u-cf {
		text-align: center;
	}
	[class*="tablet-"].columns {
		float: none;
		display: inline-block;
	}
	
	.tablet-three.columns {
		width: 21.2333333%;
	}
	.tablet-three.first-in-row.columns {
		margin-left: 0;
	}
	.tablet-four.columns {
		width: 30.111112%
	}
	.tablet-four.first-in-row.columns {
		margin-left: 0;
	}
	.tablet-six.columns {
		width: 47.56666667%;
	}
	.tablet-six.first-in-row.columns {
		margin-left: 0;
	}
	
	.offset-by-one.column.first-visible, 
	.offset-by-one.columns.first-visible {
		margin-left: 0;
	}
}
/* =====================================================================================================================
blocks
===================================================================================================================== */
.block-wrapper {
    padding-top: 3em;
    padding-bottom: 3em;
    width: 100%;
    background-size: cover;
    background-position: center center;
}

/* =====================================================================================================================
buttons
===================================================================================================================== */
.button {
	height: auto;
	max-width: 100%;
	padding: 0;
	white-space: normal;
	border: 0;
	color: inherit;
	text-transform: none;
	border-radius: 0;
	cursor: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	background-color: inherit;
    margin-bottom: 0;
}
.button:hover {
	color: inherit;
	border-color: inherit;
}
.button--round,
.button-style.button--round {
    border-radius: 500px;  
}
.button-style {
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
    cursor: pointer;
}
.button-style:hover {
    opacity: .9;
}

/* =====================================================================================================================
Images
===================================================================================================================== */

.opt-circle {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 500px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 500px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 500px;  
} 

/* =====================================================================================================================
Fonts 
===================================================================================================================== */

.opt-center {
    text-align: center;
}

.opt-bold.opt-bold.opt-bold {
    font-weight: bold;
}

.opt-italic.opt-italic.opt-italic {
	font-style: italic;
}

.opt-underline.opt-underline.opt-underline {
	text-decoration: underline;
}

.opt-big {
    font-size: 1.2em;
}

.opt-medium {
    font-size: 1em;
}

.opt-small {
    font-size: .8em;
}

.opt-red {
    color: red;  
}

/* =====================================================================================================================
Container
===================================================================================================================== */

.container.container {
    max-width: 1200px;
}

/* =====================================================================================================================
Forms
===================================================================================================================== */

a[data-opf-trigger] {
    cursor: pointer;
}

textarea {
    max-width: 100%;

    resize: none;
}

select[multiple] {
    height: auto;
}

b, strong {
    font-weight: bold;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="password"],
textarea,
select {
  font-size: 15px; 
  color: #222;
 }
 
input[type="date"] {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; 
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

}
input[type="date"]:focus {
  border: 1px solid #33C3F0;
  outline: 0; 
}

/* Hide the up/down spinner control for Chrome. You can still use the keyboard to edit the values */
input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

/* =====================================================================================================================
	CUSTOM WIDTH FAKED MEDIA QUERIES
===================================================================================================================== */

.opt-page-size-mobile.opt-page-size-mobile .column,
.opt-page-size-mobile.opt-page-size-mobile .columns {
  width: 100%;
}

.opt-page-size-tablet.opt-page-size-tablet .u-cf {
	text-align: center;
}

.opt-page-size-tablet.opt-page-size-tablet [class*="tablet-"].columns {
	float: none;
	display: inline-block;
}

.opt-page-size-tablet.opt-page-size-tablet .tablet-three.columns {
	width: 21.2333333%;
}

.opt-page-size-tablet.opt-page-size-tablet .tablet-four.columns {
	width: 30.111112%
}

.opt-page-size-tablet.opt-page-size-tablet .tablet-six.columns {
	width: 47.56666667%;
}

.opt-page-size-tablet.opt-page-size-tablet .tablet-three.first-in-row.columns,
.opt-page-size-tablet.opt-page-size-tablet .tablet-four.first-in-row.columns,
.opt-page-size-tablet.opt-page-size-tablet .tablet-six.first-in-row.columns,
.opt-page-size-tablet.opt-page-size-tablet .offset-by-one.column.first-visible, 
.opt-page-size-tablet.opt-page-size-tablet .offset-by-one.columns.first-visible,
.opt-page-size-mobile.opt-page-size-mobile .column,
.opt-page-size-mobile.opt-page-size-mobile .columns  {
	margin-left: 0;
}


@media (max-width: 549px) {
	.opt-page-size-tablet.opt-page-size-tablet .column,
	.opt-page-size-tablet.opt-page-size-tablet .columns,
	.opt-page-size-mobile.opt-page-size-mobile .column,
	.opt-page-size-mobile.opt-page-size-mobile .columns,
	.opt-page-size-tablet.opt-page-size-tablet .tablet-three.columns,
	.opt-page-size-tablet.opt-page-size-tablet .tablet-three.first-in-row.columns,
	.opt-page-size-tablet.opt-page-size-tablet .tablet-four.columns,
	.opt-page-size-tablet.opt-page-size-tablet .tablet-four.first-in-row.columns,
	.opt-page-size-tablet.opt-page-size-tablet .tablet-six.columns {
		width: 100%;
	}
	
}

/* =====================================================================================================================
    Orderform Styles
===================================================================================================================== */

.moonray-form-paymentplandisplay-wrapper tr,
.moonray-form-paymentplandisplay-wrapper td {
    width: 50%;
}

/* for payment plans the radios are wrapped in a label, which defaults to bold, normalize it */
ontraport-product-grid table label {
    font-weight: inherit;
}

ontraport-product-grid .position-relative {
    position: relative;
}

ontraport-product-grid .position-absolute {
    position: absolute;
}

ontraport-product-grid input[type=number] {
    -moz-appearance:textfield;
    padding-right: 23px;
}

ontraport-product-grid .ussr-component-grid-row input.grid-cell__edit-quantity {
    min-width: 4em;
    margin-bottom: 0;
}

/* hides the spin-button for chrome*/
ontraport-product-grid input[type=number]::-webkit-outer-spin-button,
ontraport-product-grid input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

ontraport-product-grid .ussr-component-grid-row.product .ussr-component-gridcell-input-number-spinner-wrapper {
    top: 0;
    right: 0;
    margin-top: 0;
    /* have to unset potential block level border styles that are now deprecated */
    border: 0;
    border-left: 1px solid #D1D1D1;
}

ontraport-product-grid .ussr-component-grid-row .ussr-component-gridcell-input-number-spinner-wrapper a {
    display: block;
    height: auto;
    width: auto;
}

ontraport-product-grid .ussr-component-gridcell-input-number-spinner-wrapper .ussr-component-gridcell-input-number-spinner-btn-down {
    border-top: 1px solid #D1D1D1;
}

ontraport-product-grid .ussr-component-gridcell-input-number-spinner-wrapper .carat {
    display: inline-block;
    width: 18px;
    height: 18px;
    overflow: hidden;
    text-indent: -99999px;
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: center;
}

ontraport-product-grid .ussr-component-gridcell-input-number-spinner-btn-up .carat {
    background-image: url('//optassets.ontraport.com/opt_assets/blocks/common/stockPhoto/orderform/ussr-icon-triangle-1-n.png');
}

ontraport-product-grid .ussr-component-gridcell-input-number-spinner-btn-down .carat {
    background-image: url('//optassets.ontraport.com/opt_assets/blocks/common/stockPhoto/orderform/ussr-icon-triangle-1-s.png');
}

.gshack .table {
    margin-bottom: 0;
}

ontraport-product-grid th,
.ontraport_gridrow td,
.gshack td {
    border-style: solid;
    border-width: 1px;
}

.grid-summary-subtotal td,
.grid-summary-grandtotal td,
.gshack td.no-border,
.no-border {
    border: 0;
}

ontraport-product-grid .grid-summary .grid-summary-shipping-selector select {
    margin-bottom: 0;
}

.gshack .grid-summary-shipping-selector .label,
.gshack .grid-summary-tax-item .label {
    border-left: 0;
}

/* =====================================================================================================================
	CROSS-BROWSER LIST NORMALIZATION
===================================================================================================================== */
li {
    list-style-position: inside;
}
ul ul,
ul ol,
ol ol,
ol ul {
  font-size: inherit; 
 }