:root { background:#fff; }
body { height:auto; font-family: 'Gotham SSm A', 'Gotham SSm B', 'Arial'; font-size: 82%; font-weight: initial; line-height: inherit; }
.breadcrumb { display:block; background-color:transparent; }
a { color:#2ebbfe; }

.row { margin-left:0; margin-right:0; }

img.mlogo { background: #000; padding: 10px; margin: 0px 0px 20px 0 }

div.featureoptions { position: relative; width:30%; max-width: 520px; margin: 0; padding: 0 50px; box-sizing: border-box; }

div.configurationwrapper { width: 65%; z-index: 1; }

#canvasContainer { position: relative; top: 0; left: 0; z-index: 100; float: left; padding: 0; }
#canvasRowContainer { position: absolute; /*height: 70vh; width: 70vw;*/ height: 100%; width: 100%; z-index: -1; }
#featuresContainer { position: relative; margin: 0; padding: 10px 0; width: 100%; border-bottom: 5px solid rgb(210,210,210); z-index: 10;}
#optionsContainer { position: relative; margin: 0; padding: 10px 0; width: 100%; top: 0; right: 0; } 
#buttonsContainer { position: relative; margin: 0; padding: 10px 0; width: 100%; border-top: 5px solid rgb(210,210,210);}
#summaryContainer { position: relative; margin: 0; padding: 10px 0; width: 100%; border-top: 5px solid rgb(210,210,210); border-bottom: 5px solid rgb(210,210,210);  border-top: 0; border-bottom: 0; }

div.configuration h1 { font-size: 18px; padding-bottom:10px; text-transform:uppercase; }
div.configuration div.selection { width:100%; padding:0; margin:0; padding-bottom:5px; }
div.configuration div.selection p { font-size: 11px; padding-right:5px; display:inline-block; width:80px; text-align:left; }
div.configuration div.selection p.copy { font-size: 11px; padding: 0 5px; display:inline-block; width:auto; min-width: 110px; text-align:left; }
div.configuration div.selection img { max-width: 45px; display: inline-block; padding: 5px; margin-left:5px; border: solid 1px rgb(210,210,210); background: #fff; vertical-align:middle; }

#featuresList { width: 100%; }
#geometryChoice { border-radius: 0px; width: 100%; margin: 0px; }
#materialList { padding-left: 0; display: block; }
#colorList { display: block; }
#colorChoice { border-radius: 0px; padding-top: 10px; }

div.options { }
div.options div.option { display: inline-block; padding: 7px; margin: 0; cursor: pointer; vertical-align: top; }
div.options div.option div.image { display: inline-block; padding: 5px; border: solid 1px rgb(210,210,210); background: #fff; }
div.options div.option div.image img { width:50px; vertical-align: top; }
div.options div.option div.text { text-align:center; padding: 5px 0; width:68px; font-size: 11px; line-height: 15px; }

.receptacleSelector { background-color: rgb(210,210,210); border-radius: 0; margin-right: 10px; color: white; text-align: center; cursor: pointer; position: inherit; top: 0; width: 100%; padding: 10px; margin-bottom: 10px; }

a.download { color: rgb(255,255,255); font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-weight: 500; font-size: 9px; line-height: 60px; text-align: center; text-decoration: none; text-transform: uppercase; background-color: rgb(122,210,231); padding: 10px; padding-left:15px; background-image: url('https://magnuson.blob.core.windows.net/sitedocs/imagegallery/arrow-white.png'); background-repeat: no-repeat; background-position: right center; padding-right: 35px; clear: both; -webkit-transition: all 400ms; /*safari and chrome */ -moz-transition: all 400ms ease; /* firefox */ -o-transition: all 400ms ease; /* opera */ transition: all 400ms ease; border-radius:3px; white-space: nowrap; }
a.download:hover { color: rgb(255,255,255); font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-weight: 500; font-size: 9px; line-height: 60px; text-align: center; text-decoration: none; text-transform: uppercase; background-color: rgb(60,60,60); padding: 10px; padding-left:15px; background-image: url('https://magnuson.blob.core.windows.net/sitedocs/imagegallery/arrow-white.png'); background-repeat: no-repeat; background-position: right center; padding-right: 35px; clear: both; -webkit-transition: all 400ms; /*safari and chrome */ -moz-transition: all 400ms ease; /* firefox */ -o-transition: all 400ms ease; /* opera */ transition: all 400ms ease; border-radius:3px; white-space: nowrap; }

img.vr { max-width: 120px; padding-top: 20px; opacity: .5; }
div.featureoptions.print { width:30%; }
div.configurationwrapper.print { width:65%; }
div.featureoptions.print div.configuration div.selection p { font-size: 11px; width: 74px; }
div.featureoptions.print div.configuration div.selection p.copy { font-size: 11px; min-width: 110px; padding: 0 5px; }
div.featureoptions.print div.options div.option div.text { font-size: 11px; width: 58px; }

.col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; padding: 0 7px; margin: 5px 0; }

@media only screen and (max-width: 1080px) and (min-width: 768px) {
    /*div.configurationwrapper { width: 45%; }
    div.featureoptions { width: 50%; }
    #featuresContainer { padding: 10px 0; }
    div.featureoptions { padding: 0 20px; }
    div.options div.option { padding:3px; }
    div.options div.option div.image img { width: 50px; }
    div.options div.option div.text { font-size: 11px; width: 48px;}
    #summaryContainer { width: 200%; border-top: 0; border-bottom: 0; }*/
    div .configurationwrapper { width: 90%; }
    div.featureoptions { width: 90%; }
    #featuresContainer { padding: 10px 0; }
    div.featureoptions { padding: 0 20px; padding:0; }
    div.options div.option { padding:3px; }
    div.options div.option div.image img { width: 50px; }
    div.options div.option div.text { font-size: 11px; width: 48px;}
    #summaryContainer { width: 100%; border-top: 0; border-bottom: 0; }
}

@media only screen and (max-width: 767px) and (min-width: 140px) {
    div.configurationwrapper { width: 90%; }
    div.featureoptions { width: 90%; }
    #featuresContainer { padding: 10px 0; }
    div.featureoptions { padding: 0 20px;  padding:0; }
    div.options div.option { padding:3px; }
    div.options div.option div.image img { width: 45px; }
    div.configuration div.selection p { font-size: 8px; width: 44px; }
    div.configuration div.selection p.copy { font-size: 8px; min-width: 80px; padding: 0 3px; }
    div.options div.option div.text { font-size: 8px; width: 48px; }
    #summaryContainer { width: 200%; border-top: 0; border-bottom: 0; }
    img.vr { max-width: 20%; margin-left: 40%; padding-top: 10px; opacity: .5; }

}