* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}

body {
font-size: 16px;
color: #000000;
font-family: Open-Sans, "Helvetica Neue", Helvetica, "Gill Sans", Arial, sans-serif;
margin: 0;
background: #000000;
}

a, a:visited {
text-decoration: none;
}

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


/* ===== HEADER ===== */

#header {
background-color: #000000;
width: 100%;
height:100vh;
}

#header_slideshow_container {
width: 100%;
height:100vh;
z-index: 0;
filter: sepia(0.5);
-webkit-filter: sepia(0.5);
-moz-filter: sepia(0.5);
-ms-filter: sepia(0.5);
}

#logo_container {
position: absolute;
top:0;
width: 100%;
height:100vh;
background-color: rgba(0 ,0 ,0 , 0.85);
overflow: hidden;
}

#ringCommLogoHeader {
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  opacity: 0.2;
  }

#fullscreenNav {
display: none;
position: fixed;
font-family: Montserrat, "Helvetica Neue", Helvetica, "Gill Sans", Arial, sans-serif;
font-size: 1.8em;
font-weight: 300;
background: rgba(0, 0, 0, 0.91);
width: 100%;
z-index: 50;
padding: 0;
margin: 0;
overflow: hidden;
}

.grid {
width: 100%;
height: 100%;
overflow: hidden;
}

.row {
overflow: hidden;
}

.row:before, .row:after {
    content:"";
    display: table;
    clear:both;
}

.col-1 {
position: relative;
    float: left;
    min-height: 1px;
    width: 33.3%;
    height: 47vh;
    padding: 0;
    margin: 0;
}

.col-1:not(#icons):hover, .col:hover {
font-size: 1.2em;
}

.col-1 > a {
display: none;
position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  color: #ffffff;
  padding: 0;
margin: 0;
transition: all 0.7s;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;

}

.col-1 > a > div {
position: relative;
width: 100%;
  height: 100%;
}

.col-1 > a > div > p  {
position: absolute;
  top: 50%;
  width: 100%;
  padding: 0;
margin: 0;
  text-align: center;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}


#home_fullscreen,
#events_fullscreen,
#design_fullscreen {
border-bottom: 1px solid rgba(68, 68, 68, 0.9);
padding: 0;
margin: 0;
}

#home_fullscreen,
#events_fullscreen,
#ringinfo_fullscreen, 
#queries_fullscreen {
border-right: 1px solid rgba(68, 68, 68, 0.9);
padding: 0;
margin: 0;
}

#home_fullscreen, #queries_fullscreen, #design_fullscreen {
background: rgba(0, 0, 0, 0.93);
}

#home_fullscreen:hover,
#events_fullscreen:hover, 
#design_fullscreen:hover,
#ringinfo_fullscreen:hover,
#queries_fullscreen:hover {
background: rgba(202, 179, 64, 0.91);
} 




.col-2, .col {
position: relative;
    float: left;
    min-height: 1px;
    width: 50%;
    height: 47vh;
    padding: 0;
    margin: 0;
    transition: all 0.7s;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
}

.col {
clear: left;
width: 100%;
}

.col > a {
text-align: center;
color: #ffffff;
  padding: 0;
margin: 0;
position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.col-2 > i, .col > div {
display: none;
position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  color: #ffffff;
  padding: 0;
margin: 0;
text-align: center;

}

#mail_fullscreen {
border-left: 1px solid rgba(68, 68, 68, 0.9);
background: rgba(0, 0, 0, 0.93);
}

#mail_fullscreen:hover {
background: rgba(202, 179, 64, 0.91);
font-size: 1.2em;
}

#facebook_fullscreen:hover {
background: rgba(59, 89, 152, 0.91);
font-size: 1.2em;
}



/* FIXED NAVIGATION */

#fixedbar {
position: relative;
display: block;
width: 100%;
height: 60px;
margin: 0;
padding: 0;
background: rgba(0, 0, 0, 0.9);
border-top: 1px solid rgba(68, 68, 68, 0.9);
z-index: 10;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
}

#nav_icons {
list-style-type: none;
display: block;
margin: 0;
margin-right: 20px;
padding: 0px;
}

#navbar {
list-style-type: none;
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: 1000px;
left: 50%;
transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-38%);
  -ms-transform: translateX(-38%);
  margin: 0;
  padding: 0px;
}

#navbar > li {
float: left;
}

#navbar > li > a {
font-size: 1em;
font-family: Montserrat, "Helvetica Neue", Helvetica, "Gill Sans", Arial, sans-serif;
font-weight: 300;
display: inline-block;
padding: 20px 40px;
margin: 0 auto;
text-align: center;
width: 200px;
}

#navbar > li > a:not(.current_page) {
color: #C0C0C0;
}


#fixedbar li #logo {
float:left;
position: absolute;
top: 0;
left: 0;
margin: 0;
margin-left: 20px;
padding: 11px;
}

#ringCommLogo {
height: 36px;
width: 36px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;

}

#fixedbar li a:hover, .current_page:hover {
color: #c9b76b;
}

.current_page {
color: #AB874D;
}


/* COLLAPSABLE RESPONSIVE NAVBAR */

#res_bars {
display: none;
z-index: 35;
float: right;
padding: 14px;
margin: 0;
color: #ededed;
}

.fullscreen {
display: inline-block !important;
}

label[for="bars"] {
z-index: 40;
color: #cab340;
float: right;
transition: color 0.3s; 
-webkit-transition: color 0.3s; 
-moz-transition: color 0.3s; 
-ms-transition: color 0.3s;  
 
}

#res_bars label:hover {
cursor: pointer;
}

#res_bars input {
display: none;
/* Hides the checkbox */
}

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

/* GENERAL */

#content {
padding: 0;
margin: 0;
}

.section {
margin: 0;
padding: 50px;
width: 100%;
height: auto;
overflow: hidden;
}

.heading {
text-align: center;

}

.title {
font-family: Montserrat, "Helvetica Neue", Helvetica, "Gill Sans", Arial, sans-serif;
font-size: 4em;
font-weight: 400;
letter-spacing: 2px;
padding: 50px 0px 30px 0px;
margin: 0;
}

.underline {
width: 162px;
height: 3px;
background: rgba(202, 179, 64, 1);
margin: 0px auto 50px;
}

.long {
width: 300px;
}

.center {
margin: 0 auto;
}

.writing {
width: 582px;
line-height: 1.5em;
font-weight: 300;
}

.flow_writing {
font-weight: 300;
}

.writing a {
color: #9147b3;
}

.italics {
font-family: Open-Sans-Italic, "Helvetica Neue", Helvetica, "Gill Sans", Arial, sans-serif;
}

.black_background {
background-color: #000000;
color: #ffffff;
}

.white_background {
background-color: #ffffff;
}

.cream_background {
background-color: #f3f3f3;
}

.mini_title {
color: #cab340;
font-family: Montserrat, 'Helvetica Neue', Helvetica, 'Gill Sans', Arial, sans-serif;
}

.secondary_title {
font-family: Montserrat, "Helvetica Neue", Helvetica, "Gill Sans", Arial, sans-serif;
font-size: 2em;
font-weight: 400;
line-height: 1.5em;
letter-spacing: 1px;
padding: 25px 0px 30px 0px;
margin: 0;
}

.tertiary_title {
font-family: Montserrat, "Helvetica Neue", Helvetica, "Gill Sans", Arial, sans-serif;
font-size: 1em;
font-weight: 400;
padding: 0px 0px 30px 0px;
margin: 0;
}

.gold {
color: #cab340;
}

.block {
margin-bottom: 100px;
}

/* FOOTER */

footer {
background-color: #000000;
padding: 0;
margin: 0;
}

#logo_div {
padding: 50px 0px 40px 0px;
}

#footer_logo {
display: block;
height: 40px;
width: 31.6px;
margin: 0 auto;
}

#declaration {
background-color: #000000;
margin: 0 5%;
border-bottom: solid 2px #333333;

}

#design_declaration {
color: #ab874d;
width: 100vw;
height: 50px;
font-size: 1.5em;
letter-spacing: 2px;
width: 100%;
padding: 0;
margin: 0;
text-align: center;
overflow: hidden;
}

.icons_footer {
padding: 15px 0 10px 0;
text-align: center;
}

.icon {
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
text-align: center;
display: inline-block;
color:  #C0C0C0;
margin: 1% 2%;
padding: 5px;
}

.twitter_footer:hover {
color: #33CCFF;
}

.facebook_footer:hover {
color: #3B5998;
}

.instagram_footer:hover {
color: #7C4F33;
}

.email_footer:hover {
color: #CAB340;
}


/* HOME PAGE */

#welcome_section {
position: relative;
border-bottom: 1px solid rgb(208, 208, 208);
}

#welcome_heading {
position: absolute;
top: 50%;
transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
display: inline-block;
width: 50%;
height: auto;
vertical-align: top;
text-align: center;
}

#welcome_writing {
float: right;
display: inline-block;
width: 50%;
}

#countdown_container {
width: 100%;
background: #000000;
}

#countdown {
z-index: 3;
position: absolute;
top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  -webkit-transform: translate(-50%, 100%);
  -moz-transform: translate(-50%, 100%);
  -ms-transform: translate(-50%, 100%);
}

#countdown_caption {
font-family: Montserrat, 'Helvetica Neue', Helvetica, 'Gill Sans', Arial, sans-serif;
font-size: 2em;
font-weight: 400;
position: absolute;
top: 50%;
  left: 50%;
  transform: translate(-50%, 170%);
  -webkit-transform: translate(-50%, 170%);
  -moz-transform: translate(-50%, 170%);
  -ms-transform: translate(-50%, 170%);
  color: #7d7053;
  z-index: 3;
}

#delivery_day {
z-index: 3;
font-family: Montserrat, 'Helvetica Neue', Helvetica, 'Gill Sans', Arial, sans-serif;
font-size: 3em;
color: #AB874D;
width: 455px;
position: absolute;
top: 50%;
  left: 50%;
  transform: translate(-50%, 170%);
  -webkit-transform: translate(-50%, 170%);
  -moz-transform: translate(-50%, 170%);
  -ms-transform: translate(-50%, 170%);

}


#note, #note_1 {
color: #cab340;
}


.countdownHolder{
width: 100%;
margin:0 auto;
font-family: Digital, sans-serif;
font-size: 4.5em;
line-height: 1.5;
text-align:center;
letter-spacing:-3px;
color: #ab874d;
}

.position{
display: inline-block;
height: 1.6em;
overflow: hidden;
position: relative;
width: 1.05em;
}

.digit{
padding-top: 4px;
position:absolute;
display:block;
width:1em;
background-color: transparent;
border-radius:0.2em;
text-align:center;
color: #666666;
letter-spacing:-1px;
}

.digit.static{
background: transparent;
}

/**
 * You can use these classes to hide parts
 * of the countdown that you don't need.
 */

.countDays{ /* display:none !important;*/ }
.countDiv0{ /* display:none !important;*/ }
.countHours{}
.countDiv1{}
.countMinutes{}
.countDiv2{}
.countSeconds{}


.countDiv{
display:inline-block;
width:16px;
height: 1.6em;
position:relative;
}

.countDiv:before,
.countDiv:after{
position:absolute;
width:5px;
height:5px;
background-color: #4f452e;
border-radius:50%;
left:50%;
margin-left:-3px;
top:0.5em;
content:'';
}

.countDiv:after{
top:0.9em;
}

#history_slideshow_container {
display: block;
width: 93.33vh;
height: 70vh;
margin: 100px auto;
}

#committee_section {
padding: 50px 0px 50px 0px;
text-align: center;
}

#portraits {
margin-top: 100px;
}

.portrait {
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
display: inline-block;
width: 17vw;
height: 18.05vw;
margin: 15px;
padding: 0;
transition: all 0.7s; 
-webkit-transition: all 0.5s; 
-moz-transition: all 0.5s; 
-ms-transition: all 0.5s; 
}

.committee_lightbox {
width: 90vw;
height: 90vh;
padding: 50px;

}

.lightbox_portrait {
position: relative;
display: inline-block;
width: 50%;
height: 100%;
padding: 50px;
}

.lightbox_image {
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 37vw;
  height: 39.3vw;
transition: all 0.5s; 
-webkit-transition: all 0.5s; 
-moz-transition: all 0.5s; 
-ms-transition: all 0.5s;
padding: 0;
margin: 0 auto;
}

.lightbox_info {
position: relative;
float: right;
display: inline-block;
width: 50%;
height: 100%;
padding: 50px;
}

.lightbox_writing {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 80%;

}

.lightbox_name {
font-family: Montserrat, 'Helvetica Neue', Helvetica, 'Gill Sans', Arial, sans-serif;
font-size: 2em;
text-align: center;
font-weight: 600;
}

.lightbox_blurb {
font-family: Open-Sans-Italic, "Helvetica Neue", Helvetica, "Gill Sans", Arial, sans-serif;
font-weight: 300;
font-size: 0.8em;
text-align: center;
margin-bottom: 50px;
}

.lightbox_particulars h3 {
text-align: center;
font-size: 1em;
font-weight: 300;
}

.portrait:hover {
transition: all 0.5s; 
-webkit-transition: all 0.5s; 
-moz-transition: all 0.5s; 
-ms-transition: all 0.5s; 
}

.elizabeth, .elizabeth .normal {
background: url(../images/ringcomm/elizabeth-formal.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.elizabeth:hover, .elizabeth .hover {
background: url(../images/ringcomm/elizabeth-crazy.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.delerme, .delerme .normal {
background: url(../images/ringcomm/delerme-formal.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.delerme:hover, .delerme .hover {
background: url(../images/ringcomm/delerme-crazy.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.afika, .afika .normal {
background: url(../images/ringcomm/afika-formal.jpg);
background-size: contain;
background-repeat: no-repeat;
}

.afika:hover, .afika .hover {
background: url(../images/ringcomm/afika-crazy.jpg);
background-size: contain;
background-repeat: no-repeat;
}

.amber, .amber .normal {
background: url(../images/ringcomm/amber-formal.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.amber:hover, .amber .hover {
background: url(../images/ringcomm/amber-crazy.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.amir, .amir .normal {
background: url(../images/ringcomm/amir-formal.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.amir:hover, .amir .hover {
background: url(../images/ringcomm/amir-crazy.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.andreea, .andreea .normal {
background: url(../images/ringcomm/andreea-formal.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.andreea:hover, .andreea .hover {
background: url(../images/ringcomm/andreea-crazy.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.billy, .billy .normal {
background: url(../images/ringcomm/billy-formal.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.billy:hover, .billy .hover {
background: url(../images/ringcomm/billy-crazy.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.brandon, .brandon .normal {
background: url(../images/ringcomm/brandon-formal.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.brandon:hover, .brandon .hover {
background: url(../images/ringcomm/brandon-crazy.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.daniela, .daniela .normal {
background: url(../images/ringcomm/daniela-formal.jpg);
background-size: contain;
background-repeat: no-repeat;
}

.daniela:hover, .daniela .hover {
background: url(../images/ringcomm/daniela-crazy.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.eva, .eva .normal {
background: url(../images/ringcomm/eva-formal.jpg);
background-size: contain;
background-repeat: no-repeat;  
}

.eva:hover, .eva .hover {
background: url(../images/ringcomm/eva-crazy.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.henry, .henry .normal {
background: url(../images/ringcomm/henry-formal.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.henry:hover, .henry .hover {
background: url(../images/ringcomm/henry-crazy.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.rima, .rima .normal {
background: url(../images/ringcomm/rima-formal.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.rima:hover, .rima .hover {
background: url(../images/ringcomm/rima-crazy.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.vickie, .vickie .normal {
background: url(../images/ringcomm/vickie-formal.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

.vickie:hover, .vickie .hover {
background: url(../images/ringcomm/vickie-crazy.jpg);
background-size: contain;
background-repeat: no-repeat; 
}

#twitter {
border-radius: 5px;
text-align: center;
margin-top: 100px;
margin-bottom: 50px;
}

.twitter-timeline {
display: inline !important;
}

#facebook {
border-radius: 5px;
text-align: center;
margin-top: 100px;
margin-bottom: 50px;
}


/* EVENTS PAGE */

#ring_premiere_slideshow_container {
display: block;
width: 90.1vh;
height: 60vh;
margin: 100px auto;
}

#ring_delivery_slideshow_container {
display: block;
width: 90vh;
height: 60vh;
margin: 100px auto;
}

.explanation {
font-weight: 300;
margin-bottom: 50px;
}

.explain {
font-size: 1em;
font-weight: 300;
}

#ring_delivery {
border-bottom: 1px solid rgb(208, 208, 208);
}

/* DESIGN PAGE */

#general_info {
  border-bottom: 1px solid rgb(208, 208, 208);
}

#bezel, #class_shank, #seal_shank,
#skylines, #hackers_map {
padding-left: 0;
padding-right: 0;
}

.container_large {
margin-top: 150px;
width: 100vw;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
}

.ring_image_container {
display: inline-block;
flex: 1 1 60%;
-webkit-flex: 1 1 60%;
-moz-flex: 1 1 60%;
-ms-flex: 1 1 60%;
height: 100%;
text-align: center;
padding: 50px;
padding-top: 0px;
padding-bottom: 0px;

}

.ring_image_width {
width: 100%;
}
.ring_image_width-2 {
width: 50%;
}

.ring_container {
display: inline-block;
flex: 1 1 40%;
-webkit-flex: 1 1 40%;
-moz-flex: 1 1 40%;
-ms-flex: 1 1 40%;
height: 100%;
}

.ring_writing {
vertical-align: text-top;
width: 100%;
padding-right: 50px;
}

.r-writing {
  margin: 0 auto;
  margin-bottom: 10px;
  width: 400px;
  line-height: 1.5em;
  font-weight: 300;
}

.r-writing-full {
  width: 80%;
  margin: 10px auto;
  padding-left: 50px;
  padding-right: 50px;
  line-height: 1.5em;
  font-weight: 300;
}


.design-writing-full-width {
  display: block;
  margin-top: 50px;
  margin-bottom: 50px;
}

#class_shank, #seal_shank,
#hackers_map, #skylines {
border-top: 1px solid rgb(208, 208, 208);
}


/* RING INFO PAGE */
#sizing_heading, #pricing_heading {
margin-top: 150px;
}

#purchase {
padding-left: 0;
padding-right: 0;
}

table {
display: table;
    max-width: 60%;
    background-color: transparent;
    border-spacing: 0;
    margin: 0 auto;
    margin-top: 80px;
    padding: 0;
}

th {
text-align: left;
  font-weight: 700;
  border: 0;
  border-right: 1px solid #dddddd;
}

th:last-child, td:last-child {
border-right: 0;
}

td {
font-weight: 300;
border: 0;
border-top:  1px solid #dddddd;
border-right: 1px solid #dddddd;
}

.table-bordered {
    border: 1px solid #dddddd;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
}

.table {
    width: 100%;
    margin-bottom: 50px;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td {
  padding: 8px;
  border-collapse: collapse;
  border-style: solid;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.container_small {
height: 60vh;
width: 100vw;
}

.payment_container {
display: inline-block;
vertical-align: top;
width: 33.1%;
height: 100%;
}

.payment_writing {
width: 100%;
  padding: 30px;
}

.break {
padding-top: 1.1em;
}

#finishes_container, #band_container,
#engraving_container, #accessories_container {
height: 26vh;
width: 100%;
margin-bottom: 50px;
}

.finish, .engraving {
display: inline-block;
width: 32.5%;
height: 100%;
text-align: center;
}

.finish_image_container, .band_image_container, 
.engraving_image_container, .accessory_image_container {
width: 100%;
height: 75%;
}

.finish_image, .band_image,
.engraving_image, .accessory_image {
height: 100%;
}

.finish_info, .band_info,
.engraving_info, .accessory_info {
height: 25%;
margin-bottom: 0;
font-weight: 600;
color: #888888;
}

.band {
display: inline-block;
width: 49%;
height: 100%;
text-align: center;
}

#accessories_container {
height: auto;
width: 100%;
margin-bottom: 50px;
}

.accessory {
display: inline-block;
width: 24.5%;
height: auto;
text-align: center;
padding: 10px;
}

.accessory_image_container {
width: 100%;
height: 20vh;
}

.accessory_image {
height: 100%;
}

.accessory_info {
height: auto;
margin-bottom: 0;
font-weight: 600;
color: #888888;
}


/* QUERIES PAGE */

.flow_container {
height: auto;
width: 100%;
}

.faqs_container {
display: inline-block;
vertical-align: top;
width: 33%;
height: auto;
}

.faqs_writing {
width: 100%;
  padding: 30px;
}

#ring_comm_email:hover {
color: #C0C0C0;
}

#email_heading,
#message_heading {
margin-top: 100px;
}

.form {
overflow: visible;
width: 550px;
text-align: center;
padding: 50px;
padding-top: 10px;
margin: 0 auto;
}

label[for="name"], label[for="email"],
label[for="residence"], label[for="message"] {
letter-spacing: 0.1em;
font-weight: 400;
font-family: Montserrat, "Helvetica Neue", Helvetica, "Gill Sans", Arial, sans-serif;
font-size: 1.2em;
display: block;
margin-top: 40px;
padding: 0;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
}

input, textarea {
font-family: Open-Sans, "Helvetica Neue", Helvetica, "Gill Sans", Arial, sans-serif;
font-size: 1em;
outline: 0;
background: 0;
border: none;
padding: 0;

}


#name, #email, #residence {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
width: 100%;
height: 50px;
display: inline-block;
color: #555555;
border-bottom: solid 2px #565656;
text-align: center;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
}

#message {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
margin: 0;
margin-top: 30px;
padding: 15px;
width: 100%;
height: 200px;
color: #555555;
border: solid 2px #565656;
resize: none;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
}

.button {
position: relative;
width: 180px;
height: 60px;
border: solid 3px #efefef;
background-color: none;
margin: 40px auto;
text-align: center;
}

.button_writing {
font-family: Montserrat, "Helvetica Neue", Helvetica, "Gill Sans", Arial, sans-serif;
font-size: 1em;
font-weight: 600;
color: #000000;
width: 100%;
height: 100%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
outline: 0;
background: 0;
border: none;
padding: 0;
cursor: pointer;
}

.button:hover {
cursor: pointer;
}

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

/* @MEDIA RESPONSIVE DESIGN */

@media screen and (max-height: 566px) {
#fullscreenNav {
font-size: 1.2em;
}
}

@media screen and (max-width: 1218px) {
#welcome_heading {
width: 40%;
}
#welcome_writing {
width: 60%;
}
}

@media screen and (max-width: 1187px) {
.portrait {
width: 21vw;
height: 23.6vw;
}

.payment_container,
.faqs_container {
width: 32.8%;
}
}

@media screen and (max-width: 1104px) {
  #navbar, #navbar > li > a {
display: none !important;
}

#res_bars {
display: inline-block;
}
}

@media screen and (max-width: 1069px) {
.section {
padding: 20px;
}

.container_small {
height: 120vh;
}

.payment_container,
.faqs_container {
width: 49%;
height: 45%;
}

.r-writing {
  width: auto;
}

.break {
padding-top: 0;
}
}

@media screen and (max-width: 1001px) {
#welcome_heading {
position: static;
top: 0;
transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
width: 100%;
display: block;
margin: 0 auto;
}

#welcome_writing {
width: 100%;
float: center;
display: block;
margin: 0 auto;
}

.committee_lightbox {
width: 90vw;
height: 90vh;
padding: 40px;

}

}

@media screen and (max-width: 961px) {
.portrait {
width: 29vw;
height: 32.56vw;
margin: 10px;
}

}

@media (max-width: 891px) {

.container_large {
  display: block;
  margin-top: 100px;
}

.ring_image_width {
width: 80%;
}
.ring_image_width-2 {
width: 40%;
}

.ring_writing {
  padding: 0;
}

.r-writing {
  width: 70%;
}

.r-writing-full {
  padding: 0;
  width: 70%;
}

.ring_image_container {
  padding-bottom: 50px;
}

#bezel, #class_shank, #seal_shank,
#skylines, #hackers_map {
  padding-bottom: 50px;
}

.design-writing-full-width {
  margin-top: 0;
}

.countdownHolder {
font-size: 4em;
}

#countdown_caption {
font-size: 1.8em;
 
transform: translate(-50%, 130%);
 
-webkit-transform: translate(-50%, 130%);
 
-moz-transform: translate(-50%, 130%);
 
-ms-transform: translate(-50%, 130%);
}

#countdown {
 
transform: translate(-50%, 90%);
 
-webkit-transform: translate(-50%, 90%);
 
-moz-transform: translate(-50%, 90%);
 
-ms-transform: translate(-50%, 90%);
}

.countDiv:before,
.countDiv:after{
  width: 4px;
  height: 4px;
}
}

@media screen and (max-width: 822px) {
.break {
padding-top: 1.1em;
}
}

@media screen and (max-width: 789px) {
#history_slideshow_container {
width: 90vw;
height: 67.5vw;
}

#ring_premiere_slideshow_container {
width: 90.1vw;
height: 60vw;
}

#ring_delivery_slideshow_container {
width: 90vw;
height: 60vw;
}
}

@media screen and (max-width: 756px) {
.portrait {
width: 43vw;
height: 48.3vw;
margin: 10px;
}
}

@media screen and (max-width: 730px) {
.title {
font-size: 2.5em;
}
.accessory {
width: 32.5%;
}

.countdownHolder {
font-size: 3.5em;
}

#countdown_caption {
font-size: 1.8em;
 
transform: translate(-50%, 130%);
 
-webkit-transform: translate(-50%, 130%);
 
-moz-transform: translate(-50%, 130%);
 
-ms-transform: translate(-50%, 130%);
}

#countdown {
 
transform: translate(-50%, 110%);
 
-webkit-transform: translate(-50%, 110%);
 
-moz-transform: translate(-50%, 110%);
 
-ms-transform: translate(-50%, 110%);
}

.countDiv:before,
.countDiv:after{
width: 3px;
height: 3px;
}
}

@media screen and (max-width: 700px) {
#fullscreenNav {
font-size: 1.2em;
}
}

@media screen and (max-width: 639px) {
.committee_lightbox {
padding: 20px;
}

.lightbox_portrait {
display: block;
width: 100%;
height: 40%;
padding: 0px;
}

.lightbox_image {
 
width: 216.7px;
 
height: 230px;
}

.lightbox_info {
float: center;
display: block;
width: 100%;
height: 60%;
padding: 30px;
padding-top: 0px;
}

.lightbox_name {
margin-bottom: 10px; 
}

.lightbox_blurb {
margin-bottom: 30px;
}

.countdownHolder {
font-size: 3em;
}

#countdown_caption {
font-size: 1.6em;
 
transform: translate(-50%, 170%);
 
-webkit-transform: translate(-50%, 170%);
 
-moz-transform: translate(-50%, 170%);
 
-ms-transform: translate(-50%, 170%);
}

#countdown {
 
transform: translate(-50%, 130%);
 
-webkit-transform: translate(-50%, 130%);
 
-moz-transform: translate(-50%, 130%);
 
-ms-transform: translate(-50%, 130%);
}
}

@media screen and (max-width: 613px) {
.writing {
width: auto;
}

#purchase .explanation {
padding: 20px;
}
}

@media screen and (max-width: 613px) {
.form {
width: 450px;
}

.button {
width: 140px;
}
}

@media screen and (max-width: 560px) {
#delivery_day {

width: 200px;
text-align: center;
font-size: 2em;

}
}

@media screen and (max-width: 557px) {
body {
font-size: 14px;
}

.finish_image_container,
.engraving_image_container,
.band_image_container {
height: 60%;
}


.finish, .engraving, .band {
height: 70%;
}

.accessory {
width: 49.5%;
}
}

@media screen and (max-width: 481px) {
.portrait {
margin: 5px;
}
}

@media screen and (max-width: 477px) {

.payment_container,
.faqs_container {
width: 100%;
height: 25%;
}

.payment_methods {
height: 150vh;
}

.form {
width: 350px;
}

.button {
width: 120px;
}

.countdownHolder {
font-size: 2.5em;
}

#countdown_caption {
font-size: 1.4em;
 
transform: translate(-50%, 170%);
 
-webkit-transform: translate(-50%, 170%);
 
-moz-transform: translate(-50%, 170%);
 
-ms-transform: translate(-50%, 170%);
}

#countdown {
 
transform: translate(-50%, 150%);
 
-webkit-transform: translate(-50%, 150%);
 
-moz-transform: translate(-50%, 150%);
 
-ms-transform: translate(-50%, 150%);
}
}

@media screen and (max-width: 437px) {

.lightbox_portrait {
display: none;
}

.lightbox_info {
height: 100%;
}

.lightbox_name {
font-size: 2.3em;
margin-bottom: 20px;
}

.lightbox_blurb {
font-size: 0.9em;
margin-bottom: 50px;
}

.lightbox_particulars {
font-size: 1.1em;
}
}

@media screen and (max-width: 414px) {
.countdownHolder{
font-size: 1.8em;
}

#countdown_caption {
font-size: 1.5em;
 
transform: translate(-50%, 170%);
 
-webkit-transform: translate(-50%, 170%);
 
-moz-transform: translate(-50%, 170%);
 
-ms-transform: translate(-50%, 170%);
}

#countdown {
 
transform: translate(-50%, 210%);
 
-webkit-transform: translate(-50%, 210%);
 
-moz-transform: translate(-50%, 210%);
 
-ms-transform: translate(-50%, 210%);
}

#fixedbar ul {
margin-right: 0;
}
#fixedbar li #logo {
margin-left: 0;
}

#customization {
padding-left: 0;
padding-right: 0;
}

#customization .title {
font-size: 2.3em;
}

#customization .writing {
padding: 20px;
}

#sizing_heading, #pricing_heading {
margin-top: 100px;
}

.payment_methods {
height: 100vh;
}

.payment_container {
  vertical-align: baseline;
}

.form {
width: 320px;
padding: 20px;
}

#contact_section .writing:not(#send_message), #suggestions_section .writing:not(#send_message) {
padding: 20px;
}

#contact_section, #suggestions_section, #send_message {
padding-left: 0;
padding-right: 0;
}

.underline {
width: 162px;
}

table {
font-size: 0.8em;
}

.finish, .engraving {
   width: 31.5%;
}

.accessory {
width: 90%;
}
}

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

/* FONTS - MONTSERRAT */

@font-face {
font-family: Montserrat;
src: url(../fonts/montserrat/Montserrat-Black.otf);
font-weight: 900;
}

@font-face {
font-family: Montserrat;
src: url(../fonts/montserrat/Montserrat-ExtraBold.otf);
font-weight: 800;
}

@font-face {
font-family: Montserrat;
src: url(../fonts/montserrat/Montserrat-Bold.otf);
font-weight: 700;
}

@font-face {
font-family: Montserrat;
src: url(../fonts/montserrat/Montserrat-SemiBold.otf);
font-weight: 600;
}

@font-face {
font-family: Montserrat;
src: url(../fonts/montserrat/Montserrat-Regular.otf);
font-weight: 400;
}

@font-face {
font-family: Montserrat;
src: url(../fonts/montserrat/Montserrat-Light.otf);
font-weight: 300;
}

@font-face {
font-family: Montserrat;
src: url(../fonts/montserrat/Montserrat-UltraLight.otf);
font-weight: 100;
}

/* FONTS - OPEN SANS */

@font-face {
font-family: Open-Sans;
src: url(../fonts/open-sans/OpenSans-ExtraBold.ttf);
font-weight: 800;
}

@font-face {
font-family: Open-Sans-Italic;
src: url(../fonts/open-sans/OpenSans-ExtraBoldItalic.ttf);
font-weight: 800;
}

@font-face {
font-family: Open-Sans;
src: url(../fonts/open-sans/OpenSans-Bold.ttf);
font-weight: 700;
}

@font-face {
font-family: Open-Sans-Italic;
src: url(../fonts/open-sans/OpenSans-BoldItalic.ttf);
font-weight: 700;
}

@font-face {
font-family: Open-Sans;
src: url(../fonts/open-sans/OpenSans-Semibold.ttf);
font-weight: 600;
}

@font-face {
font-family: Open-Sans-Italic;
src: url(../fonts/open-sans/OpenSans-SemiboldItalic.ttf);
font-weight: 600;
}

@font-face {
font-family: Open-Sans;
src: url(../fonts/open-sans/OpenSans-Regular.ttf);
font-weight: 400;
}

@font-face {
font-family: Open-Sans-Italic;
src: url(../fonts/open-sans/OpenSans-Italic.ttf);
font-weight: 400;
}

@font-face {
font-family: Open-Sans;
src: url(../fonts/open-sans/OpenSans-Light.ttf);
font-weight: 300;
}

@font-face {
font-family: Open-Sans-Italic;
src: url(../fonts/open-sans/OpenSans-LightItalic.ttf);
font-weight: 300;
}

@font-face {
font-family: Digital;
src: url(../fonts/digital.ttf);
}

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

/* ANIMATION KEYFRAMES */

@keyframes rotateBar1 {
100% { transform: rotate(-45deg) translate(-2px, -5px); transform-origin: 100% 50%;}
}

@-webkit-keyframes rotateBar1 {
100% { -webkit-transform: rotate(-45deg) translate(-2px, -5px); -webkit-transform-origin: 100% 50%;}
}

/*----------------------------------------------- */

@keyframes derotateBar1 {
100% { transform: rotate(0deg); transform-origin: 100% 50%;}
}

@-webkit-keyframes derotateBar1 {
100% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 100% 50%;}
}

/*----------------------------------------------- */

@keyframes disappearBar2 {
100% {opacity: 0}
}

@-webkit-keyframes disappearBar2 {
100% {opacity: 0}
}

/*----------------------------------------------- */

@keyframes reappearBar2 {
100% {opacity: 1}
}

@-webkit-keyframes reappearBar2 {
100% {opacity: 1}
}

/*----------------------------------------------- */

@keyframes rotateBar3 {
100% { transform: rotate(45deg) translate(-2px, 4.2px); transform-origin: 100% 50%;}
}

@-webkit-keyframes rotateBar3 {
100% { -webkit-transform: rotate(45deg) translate(-2px, 4.2px); -webkit-transform-origin: 100% 50%;}
}

/*----------------------------------------------- */

@keyframes derotateBar3 {
100% { transform: rotate(0deg); transform-origin: 100% 50%;}
}

@-webkit-keyframes derotateBar3 {
100% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 100% 50%;}
}

@-moz-keyframes derotateBar3 {
100% { -moz-transform: rotate(0deg); -moz-transform-origin: 100% 50%;}
}

@-ms-keyframes derotateBar3 {
100% { -ms-transform: rotate(0deg); -ms-transform-origin: 100% 50%;}
}