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

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

BY EMILY OF INDIE SHOPOGRAPHY (/)

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

body {
    font-size: 15px;
    font-family: Helvetica, Arial, Sans-serif;
    background: #ffffff;
    color: #252525;
    margin: 0;
	font-weight: lighter;
	line-height: 22px;
}

/* ------------------
RESETS
-------------------- */

article, aside, figure, footer, header, hgroup, nav, section {
    display: block;
    padding: 0;
    margin: 0;
}

p, h1, h2, h3, h4 {
    padding: 0;
    margin: 0;
    text-align: left;
}

img {
    border: none;
}

img a {
    border: none;
}

input {
    padding: 0;
    margin: 0;
}

* {
    -webkit-text-size-adjust:none;
}


/* ------------------
UNIVERSAL
-------------------- */

hr {
    background: #252525;
    border: none;
    height: 1px;
    clear: both;
    margin: 15px 0;
    padding: 0;
}

p {
    padding: 8px 0 8px 0;
    text-align: left;
    margin: 0;
}

ul {
    padding: 8px 0 8px 20px;
    list-style-type: disc;
    margin: 0;
    text-align: left;
}

li {
    padding: 0 0 8px 0;
}

ol {
}

ol p {
}

::selection {
    background: #e9e9e9;
    color: #252525;
}

::-moz-selection {
    background: #e9e9e9;
    color: #252525;
}

.clear {
    clear: both;
    padding: 10px 0;
}

.hidden {
    display: none !important;
}

.center {
    text-align: center;
}

.content {
    text-align: left;
}

.right {
    text-align: right;
}

.left {
	text-align: left;
}

.button {
    background: #69c8c6;
    color: #fff;
    padding: 10px 20px;
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
	border: 1px solid #69c8c6;
    border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
}

.button:hover {
    text-decoration: none;
    background: #252525;
	border: 1px solid #252525;
	color: #fff;
}




/* --------------------
TYPOGRAPHY
-------------------- */

h1 {
    color: #252525;
    font-size: 18px;
    font-weight: lighter;
    font-family: Times, Times New Roman, serif;
    padding: 0 0 15px 0;
    font-variant: small-caps;
    letter-spacing: 6px;
    text-transform: lowercase;
}

.rockvideo h1, .rockbundle h2 {
    font-family: 'Dual W00_300', sans-serif;
    font-size: 36px;
    line-height: 46px;
    font-style: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.rockbundle h2 {
    margin-top: 90px;
}

h2 {
    color: #252525;
    font-size: 50px;
    font-weight: lighter;
    font-family: Times, Times New Roman, serif;
    padding: 0 0 35px 0;
    text-transform: uppercase;
	font-style: italic;
	line-height: 60px;
}

h2.workshop {
 	text-transform: none;
    color: #fff;
    text-align: center; 
}


h3 {
    color: #252525;
    font-size: 18px;
	font-family: 'Dual W00_300', sans-serif;
    text-transform: uppercase;
    text-align: left;
	padding: 0 0 15px 0;
    font-weight: 400;
}

h4, .rockbundle h4 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 0 8px 0;
    text-transform: uppercase;
    color: #252525;
}

.rockbundle h4 {
    font-size: 16px;
}

h5 {
    color: #252525;
    font-size: 27px;
    font-weight: lighter;
    font-family: Times, Times New Roman, serif;
    padding: 0 0 15px 0;
    font-style: italic;
    line-height: 35px;
    text-align: left;
    margin: 0;
}

strong {
    font-weight: bold;
}

b {
    font-weight: bolder;
}

a {
    color: #63CECA;
    text-decoration: none;
}

a:hover {
    color: #252525;
    text-decoration: none;
}


.rocklinks a:hover {
    color: #d0a86a;
}

.small {
	font-size: 10px !important;
	line-height: 15px !important;
}

.smallx {
    font-size: 14px !important;
    line-height: 20px !important;
}

.mediumsmall {
    font-size: 24px !important;
    line-height: 34px !important;
}

.medium {
 	font-size: 31px !important;
    line-height: 40px !important;
}

.large {
    font-size: 50px !important;
	line-height: 60px !important;
}

.largeitalic {
    font-size: 50px !important;
    font-style: italic !important;
	line-height: 60px !important;
}

.largebold {
	font-size: 36px !important;
	font-weight: bold !important;
	line-height: 40px !important;
}

p.large, p.largeitalic, p.largebold {
	padding: 30px 0;
}

p.dual.large {
    font-size: 45px !important;
    line-height: 60px !important;
    padding: 10px 0 !important;
}

.serif {
    font-family: Times, Times New Roman, serif;
    font-style: italic;
    letter-spacing: normal;
}

.helvetica {
        font-family: Helvetica, Arial, Sans-serif;
}

.lato {
    color: #252525;
    font-size: 24px;
	font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
	letter-spacing: 2px;
	line-height: 40px;
}

.dual {
    font-family: 'Dual W00_300', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
	letter-spacing: 2px;
	line-height: 40px;
    color: #252525;
    font-size: 24px;
}

.quote {
    font-size: 27px;
	line-height: 32px;
    font-style: italic;
    font-family: Times, Times New Roman, serif;
	text-align: center;
}

.quoteby {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	text-align: center;
}

.blue {
    color: #63CECA;
}

.white {
	color: #fff;
}

.justify {
	text-align: justify;
}

.responsive-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    margin-bottom: 25px;
}

.responsive-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

.workshopbutton, .workshoplightbutton, .rubybutton {
    background: #252525;
    color: #fff;
    border: 3px solid #fff;
    font-size: 14px;
    text-transform: uppercase;
    font-family: 'Dual W00_300', sans-serif;
    width: 350px;
    max-width: 90%;
    display: table;
    margin: 0 auto 15px;
    text-align: center;
    clear: both;
    padding: 15px 0;
}

.workshopbutton:hover {
    background: #d0a86a;
    color: #fff;
    border: 3px solid #fff;
}

.workshoplightbutton {
    background: #eaeaea;
    border: 3px solid #252525;
    color: #252525;
    margin: 50px auto;
    letter-spacing: 2px;
}

.workshoplightbutton:hover {
    background: #d0a86a;
}

.rubybutton {
    background: #853856;
    color: #fff;
    border: 3px solid #252525;
    width: 500px;
    letter-spacing: 2px;
    margin: 50px auto;
}

.rubybutton:hover {
    background: #d0a86a;
}


h3.large {
    line-height: 65px;
    padding-bottom: 25px;
}

.largequote {
    font-size: 48px;
    line-height: 55px;
    font-style: italic;
    font-family: Times, Times New Roman, serif;
    color: #252525;
    text-align: center;
}

.quoteauthor {
 	text-align: center;
    font-family: Helvetica, Arial, Sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #252525;
    display: table;
    margin: 25px auto 0;
}


/* --------------------
STRUCTURE
-------------------- */

#bodywrapper {
    width: 100%;
    background: #fff;
    display: table;
    min-height: 400px;
    margin-top: -2px;
}

#bodywrapper.workshop {
    background-image: url('/img/skin/2017/HeaderImage2.jpg');
    background-size: cover;
}
    

.pagesection, .pagesection50, .pagesection2575 {
	width: 980px;
	margin: 0 auto;
	text-align: center;
	padding: 100px 0 0 0;
	clear: both;
	display: table;
}

.pagesectionbottom, .pagesection50bottom {
	width: 980px;
	margin: 0 auto;
	text-align: center;
	padding: 100px 0;
	clear: both;
	display: table;
}

.pagesection50 {
    padding: 50px 0 0 0;
}

.pagesection50bottom {
    padding: 50px 0;
}

.pagesection2575 {
    padding: 25px 0 75px;
}

.contentwrapper {
    width: 950px;
    display: table;
    margin: 0px auto;
}

.paddingbottom50 {
    padding-bottom: 50px !important;
}

.columnleft {
	float: left;
	text-align: left;
	width: 460px;
}

.columnright {
	float: right;
	text-align: right;
	width: 460px;
}

.columncenter {
    float: none;
	text-align: left;
	width: 600px;
    display: table;
    margin: 0 auto;
}

.buttonright {
	text-align: left;
}

.buttonleft {
	text-align: right;
}

#headerbarwrapper {
	width: 100%;
	height: 50px;
	background: #252525;
}

#headerbar {
	width: 980px;
	margin: 0 auto;
	text-align: center;
	font-family: 'Dual W00_300', sans-serif;
	color: #fff;
	text-transform: uppercase;
	font-size: 18px;
}

#headerbarcontent {
	text-align: left;
	width: 500px;
}

#headerbarlogo {
	float: left;
}

#headerbarlogo img {
    padding-top: 8px;
}

#headerbarname {
	float: right;
	text-align: right;
	padding: 14px 0 0 15px;
}

#intro {
	width: 100%;
	height: 600px;
	background-image: url("/img/skin/RYWDB_LaptopBack.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: top center;
}

#introcontent {
	width: 980px;
	padding-top: 300px;
	margin: 0 auto;
	text-align: center;
    color: #fff;
}

#introband {
	position: absolute;
	top: 585px;
	left: 50%;
	margin-left: -490px;
	width: 980px;
	height: 130px;
	background: #252525;
	color: #fff;
    font-family: Times, Times New Roman, serif;
	font-size: 50px;
	font-style: italic;
	text-align: center;
}

#introband div {
	padding-top: 50px;
}

#meetleft {
	width: 575px;
	float: left;
	text-align: left;
	font-size: 14px;
}

#meetright {
	width: 315px;
	float: right;
	text-align: right;
}

#meetright img {
    padding-top: 75px;
}

.whitegeo {
	width: 100%;
	background-image: url("/img/skin/Rock_GeoBlackOnWhite.png");
	background-position: top center;
	background-repeat: no-repeat;
	clear: both;
}


.tangeo {
	width: 100%;
	background-image: url("/img/skin/Rock_GeoWhite.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #e9e6dd;
	clear: both;
}

.greengeo {
	width: 100%;
	background-image: url("/img/skin/Rock_GeoWhite.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #e6ebe6;
	clear: both;
}

.orangegeo {
    width: 100%;
	background-image: url("/img/skin/Rock_GeoWhite.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #D1A96A;
	clear: both;
}

.blackgeo {
    width: 100%;
	background-image: url("/img/skin/Rock_GeoWhite.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #252525;
	clear: both;
    color: #fff;
}

.greengeo .pagesectionbottom {
	padding-top: 140px;
}

.blackgeo .pagesectionbottom {
	padding-top: 140px;
}

.succulent {
	width: 100%;
	background-image: url("/img/skin/Rock_BackSucc.jpg");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	background-position: top center;
}

.bluebackground {
    width: 100%;
    background: #43959F;
    background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	background-position: top center;
    color: #fff;
}

.laptop {
	width: 100%;
	background-image: url("/img/skin/Rock_Macbook.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top left;
}

.ipad {
    width: 85%;
    margin: 0 auto;
	background-image: url("/img/rywdb/iPadMockup.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: bottom left;
    background-size: 400px 500px;
}

.marblewrapper {
	width: 100%;
	background-image: url("/img/skin/RYWDB_Plant.jpeg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	clear: both;
	padding: 100px 0;
}

.marblewhite {
	width: 980px;
	margin: 0 auto;
	text-align: center;
	background: #fff;
	display: table;
}

.marblecontent {
	margin: 50px 0;
	width: 880px;
	margin: 50px auto;
	text-align: center;
	display: table;
}

.marblesection {
	clear: both;
	padding: 25px 0 50px;
}

.marbleleft {
	width: 50px;
	float: left;
	text-align: left;
}

.marbleright {
	float: right;
	width: 775px;
	text-align: right;
}


.whitearrowontan {
	width: 100%;
	background-image: url("/img/skin/Rock_ArrowWhite.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #e9e6dd;
	clear: both;
}

.whitearrowoncamelot {
    width: 100%;
	background-image: url("/img/skin/Rock_ArrowWhite.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #863856;
	clear: both;
    color: #fff;
}

.whitearrowoncamelot h2, .whitearrowoncamelot h3 {
    color: #fff;
}

.greenarrowblack {
	width: 100%;
	background-image: url("/img/skin/Rock_ArrowGreen.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #252525;
	clear: both;
}

.whitearrowblack {
  	width: 100%;
	background-image: url("/img/skin/Rock_ArrowWhite.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #252525;
	clear: both;
}

.tanwrapper {
	width: 100%;
	background-color: #e9e6dd;
	clear: both;
}

.tanwrapper .pagesection {
	padding: 30px 0 0 0;
	clear: both;
	display: table;
}

.camelotwrapper {
    width: 100%;
	background-color: #863856;
	clear: both;
}

.camelotwrapper .pagesection {
	padding: 30px 0 0 0;
	clear: both;
	display: table;
}

.camelotwrapper .pagesection2 {
    padding: 25px 0;
    clear: both;
    display: table;
    margin: 0px auto;
}

.camelotwrapper h2 {
    color: #fff;
}

#footerwrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 25px;
    background: #252525;
    margin-top: -1px;
}

#footerwrapper a {
    color: #fff;
}

#footerwrapper a:hover {
    color: #853755;
}

#footercopyright {
    float: none;
    width: 100%;
    display: table;
    padding: 25px 0;
    text-align: center !important;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 30px;
}


#rywdbleftlogo {
    display: table;
    width: 100%;
}

#rywdbleftlogo img {
    text-align: left;
    float: left;
    max-width: 555px;
    padding-bottom: 25px;
}

#rywdbleftlogo .subtitle {
    display: table;
 	text-align: left;
    clear: both;
    background: #fff;
    padding: 3px 30px 3px 10px;
    margin-bottom: 10px;
    font-family: 'Dual W00_300', sans-serif;
	font-size: 20px;
    letter-spacing: 2px;
}

#rywdbcenterlogo {
    display: table;
    width: 100%;
    text-align: center;
}

#rywdbcenterlogo img {
    text-align: center;
    float: none;
    max-width: 400px;
    padding-bottom: 25px;
}

.rockvideo #rywdbcenterlogo img {
    padding-bottom: 0px;
}

.workshop .pagesection {
    padding: 50px 0 0;
}












/* --------------------
VERSION 2 UPDATE
-------------------- */

.rocksaleshome p, .rocksaleshome ul li {
    font-size: 18px;
}

.rockbundlelogo {
    max-width: 400px;
}

#salesheader {
    width: 100%;
    background: #fff;
    display: table;
    min-height: 450px;
    margin-top: -2px;
    background-image: url('/img/skin/2017/HeaderImage2.jpg');
    background-size: cover;
    background-attachment: fixed;
    padding-top: 50px;
}

.rocksoldout #salesheader {
    min-height: auto;
    height: 250px;
}

#salesheader img {
    text-align: center;
    max-width: 550px;
    margin: 0 auto;
    display: table;
    padding-bottom: 50px;
}

#subtitlewrapper {
    width: 550px;
    margin:  0 auto;
    display: table;
}

#salesheader .subtitle {
    display: table;
    text-align: right;
    clear: both;
    background: #fff;
    padding: 3px 30px 3px 10px;
    margin-bottom: 10px;
    font-family: 'Dual W00_300', sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
}

#salesheader .subtitle:nth-of-type(1) {
    margin-left: 49px;
}

#salesheader .subtitle:nth-of-type(2) {
    float: right;
}

#salesheader .subtitle:nth-of-type(3) {
    float: right;
    margin-right: 24px;
}

.scrolldown {
    margin-top: -60px;
}

#graybar {
    background: #eaeaea;
    height: 102px;
    width: 100%;
    display: table;
    text-align: center;
    box-shadow: 0px 0px 15px #555555;
}

#graybarwrapper {
    display: table;
    width: 600px;
    float: none;
    height: 100px;
    margin: -33px auto 0;
}

#graybarcontent {
    display: table-cell;
    vertical-align: middle;
    font-family: Times, Times New Roman, serif;
    font-style: italic;
    font-size: 27px;
}

#rocktimer {
    float: left;
    text-align: left;
}

#rockcountdown {
    float: right;
    text-align: right;
}


.plantwrapper, .plantwrapper2 {
	width: 100%;
	background-image: url("/img/skin/RYWDB_Plant.jpeg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	clear: both;
	padding: 75px 0;
}

.lightgraywrapper {
    
}

.graywrapper {
    width: 100%;
    background: #e1e1e1;
    clear: both;
    color: #252525;
}

.grayplantwrapper {
    width: 100%;
    background: #fff;
    display: table;
    background-image: url('/img/skin/2017/HeaderImage2.jpg');
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
}

.whitewrapper {
    width: 100%;
	background: #fff;
	clear: both;
	padding: 50px 0;
}

.ipad .columnright {
    width: 550px;
}

.ipad h3 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 3px;
}

.ipad p {
    font-family: Helvetica, Arial, Sans-serif;
    font-size: 18px;
}

.modulewrapper {
 	width: 100%;
    margin: 0 auto 50px;
    display: table;
    box-shadow: 0px 0px 15px #555555;
}

.moduleheader {
    width: 100%;
    padding: 25px 0;
    text-align: center;
    color: #fff;
    background: #428b95;
    font-size: 24px;
    font-family: 'Dual W00_300', sans-serif;
	font-weight: 300;
    letter-spacing: 3px;
}

.modulecontent {
    width: 90%;
    margin: 0 auto;
    display: table;
    padding: 35px 0 50px;
}

.moduleleft {
    float: left;
    width: 45%;
    font-family: Times, Times New Roman, serif;
    font-style: italic;
    font-size: 26px;
    line-height: 32px;
    text-align: left;
    color: #252525;
    font-weight: lighter;
}

.moduleright {
    float: right;
    width: 46%;
    text-align: left;
    font-size: 18px;
}

.boxheader {
    background-color: #fff;
    color: #252525;
    text-align: left;
    margin: 0 0 40px;
    padding: 8px 15px;
    display: table;
    font-family: 'Dual W00_300', sans-serif;
    font-size: 20px;
    width: 175px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.salesheader {
    background-color: #fff;
    color: #252525;
    text-align: center;
    margin: 0 auto;
    padding: 8px 25px;
    display: table;
    font-family: 'Dual W00_300', sans-serif;
    font-size: 20px;
    width: 300px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.salesboxes {
    width: 675px;
    margin: 50px auto 0;
    display: table;
}

.salescol {
    width: 285px;
    float: none;
    background: #eaeaea;
    display: table;
    margin: 0 auto;
}

.salescol1 {
    width: 285px;
    float: left;
    background: #eaeaea;
    display: table;
}

.salescol2 {
    width: 285px;
    float: right;
    background: #eaeaea;
    display: table;
}

.salesboxtop {
    padding: 50px 0;
    background: #fff;
    font-size: 18px;
    color: #252525;
    text-align: center;
    font-family: Helvetica, Arial, Sans-serif;
    box-shadow: 0px 0px 15px #555555;
    margin-bottom: 10px;
}

.salesboxbot {
    background: #eaeaea;
    color: #252525;
}

.salesboxtop .inside, .salesboxbot .inside {
    width: 80%;
    margin: 0 auto;
    padding: 25px 0;
}

.salesbuy {
    background-color: #853755;
    color: #fff;
    text-align: center;
    height: 40px;
    margin: 15px auto 5px;
    display: table;
    font-family: 'Dual W00_300';
    font-size: 24px;
    padding: 20px 25px 0;
    border-radius: 5px;
}

.salesbuy:hover {
    background-color: #D1A96A;
    color: #fff;
}

.salesprice {
    font-size: 63px;
    font-family: 'Dual W00_300';
    line-height: 70px;
    padding: 0;
    color: #803856;
    text-align: center;
}


.getititem {
    width: 100%;
    display: table;
    margin: 15px auto;
    min-height: 150px;
}

.getitleft {
    width: 15%;
    float: left;
    display: table;
}

.getitleft img {
    max-width: 100%;
}

.getitright {
    width: 80%;
    float: right;
    display: table;
}

.getitheader {
    font-family: 'Dual W00_500';
    font-size: 22px;
    line-height: 28px;
    text-align: left;
    padding-bottom: 15px;
    color: #252525;
    display: table;
    letter-spacing: 3px;
    font-weight: 500;
}

.quoteitem {
    display: table;
    width: 100%;
    height: 510px;
    border-bottom: 1px solid #252525;
}

.columncenter .quoteitem {
    margin-top: 75px;
}

.quoteimage {
    display: table;
    width: 100%;
    margin: 0 auto 15px;
    text-align: center;
}

.quoteitemlarge {
    font-family: Times, Times New Roman, serif;
    font-size: 27px;
    font-style: italic;
    line-height: 35px;
    margin: 15px 0;
    display: table;
    text-align: left;
}

.pageleft70 {
    float: left;
    width: 70%;
    display: table;
}

.pageright25 {
    float: right;
    width: 25%;
    display: table;
}


#interestform {
	width: 100%;
    padding: 0;
    margin: 15px auto;
    text-align: center;
    display: table;
    float: none;
}

#interestform .item {
    text-align: left;
    padding: 0;
    position: relative;
    display: table;
    margin-bottom: 15px;
    float: none;
    width: 100%;
    background: #fff;
    height: 40px;
}

#interestform .item input {
    width: 100%;
    height: 40px;
    background-color: #fff;
    border: none;
    color: #252525;
}

#interestform .infieldlabel {
    font-size: 12px;
    font-style: italic;
    text-transform: lowercase;
    top: 9px;
    color: #252525;
}

#interestform .left {
    float: left;
    width: 88%;
}

#interestform .right {
    float: right;
    width: 10%;
    text-align: right;
    margin-top: 55px;
}

#interestform .right input {
    width: 20px;
    height: 40px;
}












/* --------------------
MODAL POPUP
-------------------- */

.modal1, .modal2, .modal3 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content1, .modal-content2, .modal-content3 {
    background-image: url('/img/rywdb/RYWDB_Plant.jpg');
    margin: auto;
    padding: 20px;
    width: 80%;
    max-width: 435px;
    position: relative;
}

.modal-wrapper {
    width: 99%;
    padding: 40px 0;
    border: 3px solid #fff;
}

.modal-inner {
    width: 70%;
    margin: 0 auto;
    display: table;
}

.modal-inner .modalsubtitle {
    padding-top: 50px;
}

/* The Close Button */
.modalclose1, .modalclose2, .modalclose3 {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 35px;
    top: 30px;
}

.modalclose1:hover,
.modalclose1:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modalclose2:hover,
.modalclose2:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modalclose3:hover,
.modalclose3:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-wrapper p {
    line-height: 24px;
}


#workshopform {
    width: 100%;
}

#workshopform .item input {
    width: 100%;
    height: 40px;
    background: none;
    border: 3px solid #fff;
    color: #fff;
    font-size: 18px;
    font-family: times, times new roman, serif;
    font-style: italic;
}

#workshopform .infieldlabel {
    color: #fff;
    top: 10px;
}




/* --------------------
FORM
-------------------- */

.formleft {
	float: left;
}

.item {
	padding-bottom: 10px;
	position: relative;
	text-align: left;
}

.item input {
	width: 375px;
	height: 50px;
	background: #fff;
	border: none;
}

.infieldlabel {
	position: absolute;
	top: 15px;
	left: 15px;
	font-size: 18px;
	font-family: times, times new roman, serif;
	font-style: italic;
	text-transform: lowercase;
}


/* --------------------
MOBILE
-------------------- */

@media screen and (max-width:759px) {
  
  h2 {
	  color: #252525;
	  font-size: 40px;
	  font-weight: lighter;
	  font-family: Times, Times New Roman, serif;
	  padding: 0 0 35px 0;
	  text-transform: uppercase;
	  font-style: italic;
	  line-height: 50px;
  }
  
  .largeitalic {
	  font-size: 40px;
	  line-height: 50px;
  }
  
  p.large, p.largeitalic, p.largebold {
	  padding: 30px 0;
  }
  
  .lato {
	  font-size: 20px;
	  line-height: 37px;
  }

  .pagesection, .pagesection50, .pagesection2575 {
	  width: 80%;
	  padding: 70px 0 0 0;
  }
  
  .pagesectionbottom, .pagesection50bottom {
	  width: 80%;
	  padding: 70px 0;
  }

    .pagesection50 {
        padding: 50px 0 0 0;
    }

    .pagesection50bottom {
        padding: 50px 0;
    }

    .pagesection2575 {
        padding: 25px 0 75px;
    }
  
  .columnleft {
	  float: none;
	  width: 100%;
  }
  
  .columnright {
	  float: none;
	  width: 100%;
  }

  .ipad {
    background-image: none;
            width: 100%;
  }

  .ipad .columnright {
    width: 100%;
  }

  .columncenter {
    float: none;
    width: 100%;
  }
  
  .buttonright, .buttonleft {
	  text-align: center;
  }
  
  #headerbar {
	  width: 100%;
      font-size: 15px;
  }
  
  #headerbarcontent {
	  width: 95%;
    margin: 0px auto;
	}
  
  #intro {
	  width: 100%;
	  height: 300px;
      background-image: url("/img/rywdb/RYWDB_LaptopBack_mobile.jpg");
  }
  
  #introcontent {
	  width: 90%;
	  padding-top: 10%;
	  margin: 0 auto;
	  text-align: center;
  }
  
  #introband {
	  display: none;
  }
  
  #meetleft {
	  width: 100%;
	  float: none;
	  padding-bottom: 50px;
  }
  
  #meetright {
	  width: 100%;
	  float: none;
	  text-align: center;
  }
  
  .laptop {
	  background-image: none;
	  padding-top: 80px;
  }
    
  .marblewrapper {
        background-image: url("/img/rywdb/RYWDB_Plant_mobile.jpeg");
    }
  
  .marblewhite {
	  width: 90%;
	  margin: 0 auto;
	  text-align: center;
	  background: #fff;
	  display: table;
  }
  
  .marblecontent {
	  width: 80%;
  }
  
  .marblesection {
	  padding: 15px 0;
  }
  
  .marbleleft {
	  width: 100%;
	  float: none;
	  text-align: center;
  }
  
  .marbleright {
	  float: none;
	  width: 100%;
	  text-align: left;
  }
    
    .contentwrapper {
        width: 90%;
    }
    
    #rywdbcenterlogo img, #rywdbleftlogo img {
        max-width: 90%;
        margin: 0 auto;
    }

    .rubybutton { width: 300px; }

    #salesheader img {
        max-width: 100%;
    }

    #subtitlewrapper {
        width: 90%;
        margin: 0 auto;
    }

    #salesheader .subtitle:nth-of-type(3) {
        margin-right: 0;
    }

    #graybarwrapper {
        width: 90%;
        margin: 0 auto;
    }

    #graybarcontent {
        line-height: 40px;
        padding-bottom: 25px;
    }

    #rocktimer, #rockcountdown {
        float: none;
        text-align: center;
    }

    .salesboxes {
        width: 95%;
        margin: 0 auto;
    }

    .salesheader {
        width: auto;
    }
    
    .rocksoldout #salesheader {
        min-height: auto;
        height: 175px;
    }

    .salescol1, .salescol2 {
        float: none;
        margin: 15px auto;
        width: 90%;
    }

    .quoteitem {
        height: auto;
        padding: 50px 0;
    }
    
    .columncenter .quoteitem {
    	margin-top: 0;
	}

    .moduleleft {
        float: none;
        width: 100%;
        padding-bottom: 50px;
    }

    .moduleright {
        float: none;
        width: 100%;
    }
    
    .modulecontent {
        width: 85%;
    }
    
    .plantwrapper, .grayplantwrapper, #salesheader {
		 background-size: initial;
    }
    
    .plantwrapper2 {
        background-image: none;
        background-color: #252525;
    }
    
    
    .pageleft70, .pageright25 {
        width: 100%;
        margin: 0 auto;
        float: none;
    }
    
    .rockbundlelogo {
        max-width: 300px;
    }
    
}

@media screen and (min-width: 760px) and (max-width: 980px) { 
    
    .pagesection, .pagesection50, .pagesection2575 {
      width: 80%;
      padding: 70px 0 0 0;
      }
      
      .pagesectionbottom, .pagesection50bottom {
          width: 80%;
          padding: 70px 0;
      }

    .pagesection50 {
        padding: 50px 0 0 0;
    }

    .pagesection50bottom {
        padding: 50px 0;
    }

    .pagesection2575 {
        padding: 25px 0 75px;
    }

    .contentwrapper {
        width: 90%;
    }

    .ipad {
        background-image: none;
    }

    .columnleft, .columnright{
        width: 46%;
    }

    .columncenter {
        width: 60%;
    }

    .quoteitem {
        height: 650px;
    }

    #meetleft {
        width: 60%;
    }

    #meetright {
        width: 35%;
    }

    #meetright img {
        max-width: 100%;
    }

    .marblewhite {
        width: 95%;
        margin: 0 auto;
    }
}