@charset "utf-8";
/* CSS Document */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4,h6, pre, code, form, fieldset, figure, legend, input, button, p, blockquote, th, td{margin:0;padding:0; font-family:'Open Sans', sans-serif; font-size:13px; font-weight:normal}

*{box-sizing:border-box;-moz-box-sizing:border-box;}
/* structure */   

.special-header{height:97px; margin:0px; padding:0px;}

p{ margin: 20px 3px 0px 3px;}

figure{ padding:0; margin:10px 0 10px 10px;}

H1.content_hdr, H2.content_hdr, H4.content_hdr, H5.content_hdr, DIV.content_hdr{margin-bottom:2px;font-weight:500; padding-top:10px;}

H1, H2, H3, H4, .heading {font-family:'Open Sans', sans-serif;font-weight: 200;}

H1.content_hdr,H4.content_hdr, H5.content_hdr, DIV.content_hdr
{background-color:transparent; margin-bottom:2px; padding-top:10px; padding-left:0px;}

H1.content_hdr
{background-color:transparent;color:#1d4c7b;margin-bottom:2px;padding-top:10px; font-size:25px;}

H2.content_hdr
{background-color:transparent;color:#1d4c7b;margin-bottom:2px;padding-top:10px; font-size:20px;}

H3.content_hdr
{background-color:transparent;color:#1d4c7b;margin-bottom:2px;font-weight:200; padding-top:10px; padding-left:10px; font-size:16px;}

H2.content_hdr{color:#1d4c7b;margin-bottom:2px; padding-top:10px; padding-left:10px;}

H4.content_hdr{color:#1d4c7b;margin-bottom:2px;padding-top:10px; padding-left:10px;}

.fluid-img{ max-width:100%; height:auto;}

.wrapper{padding:1.5%; margin-left:auto;margin-right:auto;left:0;background-color:#fff; max-width:1280px;overflow:hidden;position:relative; padding:30px;}
.inner-wrapper{padding:0px; background-color:#fff; width:100%;overflow:hidden;position:relative;}

.border{ border:1px solid #afbfce;}
.border-left{ border-left:1px dashed #afbfce;}
.outer{ border-bottom:1px dashed #afbfce;}
.nomargin{ margin:0; padding:0px;}
.margin-top{ margin-top:25px;}
.margin-auto{ margin:0 auto;}
.padding{ padding:10px;}
.padding1{ padding-right:10px; padding-left:100px; padding-bottom:0px; padding-top:0px;}
.paddingtop{ padding-top:20px;}
.margin-left{ margin-left:100px;}
.clearBoth, .cb, .clear{clear:both;margin:0;padding:0; display: block; overflow: hidden; visibility: hidden;}
.content_hdr p
{background-color:transparent;color:#1d4c7b;margin-bottom:2px;font-weight:200; padding-top:10px; padding-left:10px;}

.grid li span.price {
  display: block;
  margin: 0px 0 20px 0;
}

.price {
  display: inline-block;
  color: #8F264E;
  font-family: 'Open Sans', sans-serif;
  font-weight:bold%;
  font-size: 18px;
  line-height: 24px;
}

.wrapp-special-order{max-width:100%; margin: .75em auto; margin:25px;}

#content,aside,.vertical-padding{ padding:0px;}

.title{
	font-size: 3vmin;
	position: absolute;
	float: none;
	padding: 0px 0px 0px 0px;
	left: 41px;
	top: 22px;
}


/* RESPONSIVE IMAGES  */

img{ max-width:100%; height:auto;}
.pad{ padding:10px;}

#col .grid_1,
#col .grid_2,
#col .grid_3,
#col .grid_4,
#col .grid_5,
#col .grid_6,
#col .grid_7,
#col .grid_8,
#col .grid_9,
#col .grid_10,
#col .grid_11,
#col .grid_12,{

margin-top:10px;
padding:5px;
background:#fff;}



@media all and (max-width: 480px) and (min-width: 320px) { .padding{ padding:10px;} H2.content_hdr{font-weight:200; padding-top:10px; font-size:22px;}}

@media all and (max-width: 640px) and (min-width: 360px) {.grid_3{ margin:0 auto; width:200px;} .example-1{ width:100%;}}

@media only screen and (min-width: 320px) {.border-right{ border:none;} #CJ_form{ width:100%; padding:-6px;} .example-1{ width:100%;} .grid_3{ margin:0 auto; width:200px;} }

@media only screen and (min-width: 640px) {  }

@media only screen and (min-width: 480px) { .content-wrapper{ width:100%;} .example-1{ width:100%;} .grid_3{ margin:0 auto; width:200px;}  }

@media all and (max-width: 1024px) and (min-width: 768px) { }

@media only screen and (min-width: 1024px) {}

@media only screen and (min-width: 920px) {

.wrapp-customjewelry{max-width: 1200px; margin: .75em auto; margin:30px;}

#content { float:left;width:65%;}
#content.wide-content{float:none;width:100%;}
aside { float:right;width:30%;}


/*GRID*/
/*
 & Columns : 12 

 */
.grid_1 { width: 5%; }
.grid_2 { width: 14.333333333333%; }
.grid_3 { width: 21.666666666667%;}
.grid_4 { width: 30%; }
.grid_5 { width: 38.333333333333%; }
.grid_6 { width: 46.666666666667%; }
.grid_7 { width: 55%; }
.grid_8 { width: 63.333333333333%; }
.grid_9 { width: 71.666666666667%; }
.grid_10 { width: 80%; }
.grid_11 { width: 88.333333333333%; }
.grid_12 { width: 96.667%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-left: 1.6666666666667%;
	margin-right: 1.6666666666667%;
	margin-top:10px;
	float: left;
	margin-bottom:10px;
	
}}


/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1024px) {
#hero .grid_4 { width: 30%; }
#hero h1{ font-size:1.4em;}
#hero .grid_8 { width: 63.333333333333%; margin:0 1.6666666666667%; }

} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
#hero h1{ font-size:2em;}} 

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { }

/****Product_View***/


/*HaveaQuestion*/

.question-form, .checkout-guest {
    margin-top: 10px;
    padding: 15px 25px 0px;
    
}
.question-form {
    float: none;
    clear: left;
    width: auto;
    padding-bottom: 30px;
	margin-top: 20px;
}

.question-form h4 {
    color: #000;
    font-size: 18px;
    padding-bottom: 10px;
}

.question-form p.instructions {
    font-size: 11px;
    margin: 0px;
	padding-top:8px;
}
.question-form p {
    margin: 10px 0px 0px;
}

fieldset.form_list input {
    display: inline;
    float: none;
}


/*.form_list input {
    width: 350px;
}*/

.form_list textarea {
    /*width: 350px;*/
	margin: 0px;
    padding: 0px;
	font-family: "Open Sans",sans-serif;
	font-size: 13px;
	font-weight: normal;
}

fieldset label {
    font-size: 10.6px;
    color: #888;
    width: 111px;
    vertical-align: top;
    padding: 0px;
    font-weight: bold;
    display: block;
}
label {
    font-size: 14px;
    line-height: 1.8em;
}






.wrapper-dropdown-1 {
    /* Size and position */
    position: relative; /* Enable absolute positionning for children and pseudo elements */
    width: 200px;
    padding: 10px;
    margin: 0 auto;

    /* Styles */
    background: #9bc7de;
    color: #fff;
    outline: none;
    cursor: pointer;

    /* Font settings */
    font-weight: bold;
}

.wrapper-dropdown-1:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -6px;
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent #fff;    
}

.wrapper-dropdown-1 .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Styles */
    background: #fff;
    list-style: none;
    font-weight: normal; /* Cancels previous font-weight: bold; */

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

.wrapper-dropdown-1 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #9e9e9e;
    padding: 10px 20px;
}

/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover a {
    background: #f3f8f8;
}

/* Active state */
.wrapper-dropdown-1.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

.wrapper-dropdown-1.active:after {
    border-color: #9bc7de transparent;
    border-width: 6px 6px 0 6px ;
    margin-top: -3px;
}

.wrapper-dropdown-1.active {
  background: #9bc7de;
  background: -moz-linear-gradient(left,  #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9bc7de), color-stop(78%,#9bc7de), color-stop(78%,#ffffff), color-stop(100%,#ffffff));
  background: -webkit-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
  background: -o-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
  background: -ms-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
  background: linear-gradient(to right,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bc7de', endColorstr='#ffffff',GradientType=1 );
}

/* No CSS3 support */

.no-opacity       .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .wrapper-dropdown-1.active .dropdown,
.no-pointerevents .wrapper-dropdown-1.active .dropdown {
    display: block;
}

/* DEMO 2 */

.wrapper-dropdown-2 {
    /* Size and position */
    position: relative; /* Enable absolute positionning for children and pseudo elements */
    width: 200px;
    margin: 0 auto;
    padding: 10px 15px;

    /* Styles */
    background: #fff;
    border-left: 5px solid grey;
    cursor: pointer;
    outline: none;
}

.wrapper-dropdown-2:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: grey transparent;
}

.wrapper-dropdown-2 .dropdown {
  /* Size & position */
    position: absolute;
    top: 100%;
    left: -5px;
    right: 0px;

    /* Styles */
    background: white;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    list-style: none;

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

.wrapper-dropdown-2 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #333;
    border-left: 5px solid;
    padding: 10px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-2 .dropdown li:nth-child(1) a { 
    border-left-color: #00ACED;
}

.wrapper-dropdown-2 .dropdown li:nth-child(2) a {
    border-left-color: #4183C4;
}

.wrapper-dropdown-2 .dropdown li:nth-child(3) a {
    border-left-color: #3B5998;
}

.wrapper-dropdown-2 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-2 .dropdown li:hover a {
    color: grey;
}

/* Active state */

.wrapper-dropdown-2.active:after {
    border-width: 0 6px 6px 6px;
}

.wrapper-dropdown-2.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

/* No CSS3 support */

.no-opacity       .wrapper-dropdown-2 .dropdown,
.no-pointerevents .wrapper-dropdown-2 .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .wrapper-dropdown-2.active .dropdown,
.no-pointerevents .wrapper-dropdown-2.active .dropdown {
    display: block;
}


.tablist, ul {list-style-position:inside; margin:0px; padding-top:0px;}

.tablist, ul li{
    /*padding-top: 3px; */
	padding-bottom: 3px;
	padding-left:10px; 

}

.tablist, ol {list-style-position:inside; margin:0px; padding-top:0px;}

.tablist, ol li{
    padding-top: 3px; 
	padding-bottom: 3px;
	padding-left:10px; 

}