body{border:0;margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;}
@font-face{
    font-family:'brownstd-regular';
    src:url('fonts/brownstd-regular.eot');
    src:url('fonts/brownstd-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/brownstd-regular.woff') format('woff'),
         url('fonts/brownstd-regular.ttf') format('truetype'),
         url('fonts/brownstd-regular.svg#brownstd-regular') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:'brownstd-bold';
    src:url('fonts/brownstd-bold.eot');
    src:url('fonts/brownstd-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/brownstd-bold.woff') format('woff'),
         url('fonts/brownstd-bold.ttf') format('truetype'),
         url('fonts/brownstd-bold.svg#brownstd-bold') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:'roboto-italic';
    src:url('fonts/roboto-italic.eot');
    src:url('fonts/roboto-italic.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-italic.woff') format('woff'),
         url('fonts/roboto-italic.ttf') format('truetype'),
         url('fonts/roboto-italic.svg#roboto-italic') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:'roboto-mediumitalic';
    src:url('fonts/roboto-mediumitalic.eot');
    src:url('fonts/roboto-mediumitalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-mediumitalic.woff') format('woff'),
         url('fonts/roboto-mediumitalic.ttf') format('truetype'),
         url('fonts/roboto-mediumitalic.svg#roboto-mediumitalic') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:'roboto-bolditalic';
    src:url('fonts/roboto-bolditalic.eot');
    src:url('fonts/roboto-bolditalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-bolditalic.woff') format('woff'),
         url('fonts/roboto-bolditalic.ttf') format('truetype'),
         url('fonts/roboto-bolditalic.svg#roboto-bolditalic') format('svg');
    font-weight:normal;
    font-style:normal;
}
/* CODI CONTROLS */
.codiControls{display:block;margin:50px auto;max-width:1080px;padding:0;box-sizing:border-box;text-align:center;clear:both;}
.codiControls h2,.codi h2{color:#f3665f;font:normal 28px/33px 'brownstd-regular', Arial, Helvetica, sans-serif;}
.codiControls p,.codi p{font:normal 21px/25px 'brownstd-regular', Arial, Helvetica, sans-serif;}
.codiControls p strong,.codi p strong{font-family:'brownstd-bold', Arial, Helvetica, sans-serif;font-weight:normal;}
.codiControls .italic,.codi .italic,.codiControls em,.codi em{font-family:'roboto-italic', Arial, Helvetica, sans-serif;font-weight:normal;margin-left:1px;}
.codiControls strong .italic,.codi strong .italic,.codiControls strong em,.codi strong em{font-family:'roboto-mediumitalic', Arial, Helvetica, sans-serif;font-weight:normal;}
.codiControls img{width:100%;height:auto;box-sizing:border-box;}

.codiControls .contentBlock,.codi .contentBlock{position:relative;height:auto;padding:0;outline:none;}
.codiControls .contentBlock hr,.codi .contentBlock hr{border-style:none;border-width:0;height:1px;margin:14px 0 34px;color:#f3665f;background-color:#f3665f;}

.codiControls .next{text-indent:-9999px;height:40px;width:40px;position:relative;border-color:#f3665f;margin:0 auto;cursor:pointer;display:none;}
.codiControls .next:after{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;border-right:3px solid #f3665f;border-bottom:3px solid #f3665f;width:20px;height:20px;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);transition:all 0.1s ease-in;}
.codiControls .next:hover:after{border-color:black;}

.codiControls .selectedOption{display:none;margin:0 auto 30px;width:50%;border:2px solid #f3665f;box-sizing:border-box;}
.codiControls .selectedOption p{margin:10px 0;}

.codiControls .surface_finish{display:none;float:left;padding-bottom:20px;}
.codiControls .base_colour{display:none;float:left;padding-bottom:20px;}
.codiControls .aggregate_colour{display:none;float:left;padding-bottom:30px;}

.codiControls .aggregate_colour .next{margin-bottom:14px;}

/* CODI SAMPLE */
.codi{display:block;margin:0 auto;max-width:1080px;padding:0 0 30px;box-sizing:border-box;text-align:center;clear:both;}
.codi #printHeader, .codi #printFooter{display:none;width:100%;}
.codi #printHeader img{width:100%;}
.codi .contentBlock{display:none;}
.codi .contentBlock.disclaimer{display:block;}

.codi .button{border:2px solid #f3665f;background:#FFF;color:#f3665f;z-index:4;font:normal 20px/40px 'brownstd-regular', Arial, Helvetica, sans-serif;letter-spacing:1px;padding:0 50px;box-sizing:border-box;cursor:pointer;transition:all 0.1s ease-in;display:block;clear:both;width:50%;margin:0 auto 30px;}
.codi .button:hover{background:#f3665f;color:#FFF;}

.codi .button.print{background:#f3665f;color:#FFF;}
.codi .button.print:hover{background:#030500;border-color:#030500;}

.codi .concrete_overlay_sample{float:left;width:100%;position:relative;}
.codi .concrete_overlay_sample .thumbnail{margin:0 0 30px 0;float:left;position:relative;box-sizing:border-box;background-color:#c9ced7;}
.codi .concrete_overlay_sample .concrete_overlay{position:absolute;z-index:3;top:0;left:0;width:100%;height:auto;}
.codi .concrete_overlay_sample .baseColour{float:left;width:100%;height:auto;background-position:bottom left;}
.codi .concrete_overlay_sample .surfaceFinish{position:absolute;z-index:2;top:0;left:0;width:100%;height:auto;box-sizing:border-box;background-position:bottom left;background-size:contain;}
.codi .concrete_overlay_sample .button{position:absolute;bottom:12%;left:50%;font-size:24px;line-height:50px;margin:0;width:auto;box-sizing:border-box;cursor:pointer;-webkit-transform:translateX(-50%);transform:translateX(-50%);}

.codi .contentBlock.disclaimer{float:left;width:100%;bottom:0;z-index:5;text-align:center;box-sizing:border-box;}
.codi .contentBlock.disclaimer p{font:normal 16px/20px 'brownstd-regular', Arial, Helvetica, sans-serif;padding:0 3%;}

.codi .codi2Col{display:table;width:100%;margin-bottom:60px;padding:0;box-sizing:border-box;}

.codi .codi2Col .surface_sample{width:50%;display:table-cell;padding:0 26px 0px 0;box-sizing:border-box;height:auto;display:none;}
.codi .codi2Col .surface_sample .thumbnail{position:relative;}
.codi .codi2Col .surface_sample .baseColour{z-index:1;top:0;left:0;width:100%;height:auto;float:left;}
.codi .codi2Col .surface_sample .surfaceFinish{position:absolute;z-index:2;top:0;left:0;width:100%;height:auto;box-sizing:border-box;}

.codi .codi2Col .sample_specs{text-align:left;width:47%;display:table-cell;border:1px solid #cacccd;box-sizing:border-box;vertical-align:top;display:none;}
.codi .codi2Col .sample_specs .thumbnail{padding:30px;}
.codi .codi2Col .sample_specs .thumbnail p{font-size:26px;margin:0 0 30px;}
.codi .codi2Col .sample_specs .thumbnail p.small{color:#666;font-size:15px;line-height:18px;margin:0;}
.codi .codi2Col .sample_specs .thumbnail p.small.sampleSpecs{margin-bottom:57px;}
.codi .codi2Col .sample_specs .thumbnail p.small.carnation{color:#f3665f;margin-bottom:10px;}
.codi .codi2Col .sample_specs .thumbnail p.disclaimer{padding-top:10px; display:block !important;}

ul.thumbnails.image_picker_selector li.group_title{float:none;}
ul.thumbnails.image_picker_selector,ul.thumbnails.image_picker_selector ul{overflow:auto;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;}
.codiControls .surface_finish ul.thumbnails.image_picker_selector li{float:left;width:31.33%;margin:0 3% 3% 0;}
.codiControls .surface_finish ul.thumbnails.image_picker_selector li:nth-child(3n){margin-right:0;}
.codiControls .base_colour ul.thumbnails.image_picker_selector li,.codiControls .aggregate_colour ul.thumbnails.image_picker_selector li{width:16.66%;float:left;}
.codiControls .base_colour ul.thumbnails.image_picker_selector li, .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li{width:14.16%;margin:0 3% 3% 0;}
/*
.codiControls .base_colour ul.thumbnails.image_picker_selector,.codiControls .aggregate_colour ul.thumbnails.image_picker_selector ul,
.codiControls .aggregate_colour ul.thumbnails.image_picker_selector,.codiControls .aggregate_colour ul.thumbnails.image_picker_selector ul{margin-bottom:30px;}
*/
.codiControls .base_colour ul.thumbnails.image_picker_selector li:nth-child(6n),.codiControls .aggregate_colour ul.thumbnails.image_picker_selector li:nth-child(6n){margin-right:0;}
ul.thumbnails.image_picker_selector li .thumbnail{float:left;margin:0;position:relative;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}

.codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail:hover,
.codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail:hover{background-color:#f3665f;}


ul.thumbnails.image_picker_selector li .thumbnail img{float:left;-webkit-user-drag:none;transition:all .2s ease-in;}

.codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail:hover img,
.codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail:hover img{opacity:0;}
.codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail.selected:hover img,
.codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail.selected:hover img{opacity:1;}

ul.thumbnails.image_picker_selector li .thumbnail p{text-align:center;font-weight:bold;margin:15px auto;padding:0 0 5px;float:left;width:100%;box-sizing:border-box;}
.codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail p,
.codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail p{position:absolute;z-index: -1;opacity: 0;}

.codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail:hover p,
.codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail:hover p{color:#FFF;z-index:1;width:100%;height:100%;box-sizing:border-box;padding:5%;opacity:1;}
.codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail.selected:hover p,
.codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail.selected:hover p{z-index: -1;opacity: 0;}

ul.thumbnails.image_picker_selector li .thumbnail.selected::after{content:'';background:url(../images/checkmark.png) 0 0 no-repeat;background-size:86px;box-sizing:border-box;border:2px solid #f3665f;color:#FFF;width:100%;height:100%;position:absolute;left:0;top:0;text-align:left;}

ul.thumbnails.image_picker_selector li .thumbnail.selected.fancybox a.fancybox-button{position:absolute;width: 36px;height: 36px;bottom: 0px;right: 0px;background: #f3665f url(../images/fullscreen.png) 8px 8px no-repeat;background-size: 20px;z-index:100;/*opacity:0.7;transition:all 0.1s ease-in;*/border-radius: 4px 0px 0 0px;}
@media screen and (max-width:1024px){
  .codi .contentBlock.disclaimer p{font-size:14px;}
  .codi .codi2Col .sample_specs .thumbnail p.small.sampleSpecs{margin-bottom:45px;}
  .codiControls .selectedOption{width:100%;}
}
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
  .codiControls{margin-bottom:30px;}
  .codiControls .contentBlock, .codi .contentBlock{padding:0;}
  .codi .concrete_overlay_sample .thumbnail{margin-right:0;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail:hover{background:#FFF;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail p,
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail.selected p,
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail.selected:hover p{opacity:1;position:relative;z-index:1;color:#000 !important;font-size:12px;margin:0 auto;padding:4% 5% !important;height:30px;line-height:16px;width:100%;box-sizing:border-box;}
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail:hover{background:#FFF;}
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail p,
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail.selected p,
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail.selected:hover p{opacity:1;position:relative;z-index:1;color:#000 !important;font-size:12px;margin:0 auto;padding:4% 5% !important;height:40px;line-height:16px;width:100%;box-sizing:border-box;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail:hover img,
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail:hover img{opacity:1 !important;}
  ul.thumbnails.image_picker_selector li .thumbnail.selected::after{background-size:56px;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail.selected.fancybox a.fancybox-button{bottom:30px;width:25px;height:25px;background-position:5px 5px;background-size:16px;}
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail.selected.fancybox a.fancybox-button{bottom:40px;width:25px;height:25px;background-position:5px 5px;background-size:16px;}
}
@media screen and (max-width:1023px){
  .codi .button{width:100%;}
  .codi .codi2Col{margin-bottom:40px;}
  .codi .codi2Col .sample_specs .thumbnail{padding:25px;}
  .codi .codi2Col .sample_specs .thumbnail p{font-size:21px;margin:0 0 20px;}
  .codi .codi2Col .sample_specs .thumbnail p.small{font-size:16px;line-height:18px;}
  .codi .codi2Col .sample_specs .thumbnail p.small.carnation{margin-bottom:4px;}
  .codi .codi2Col .sample_specs .thumbnail p.small.sampleSpecs{display:none;}
  .codi .codi2Col .sample_specs .thumbnail p.disclaimer{font-size:12px;line-height:15px;}
  ul.thumbnails.image_picker_selector li .thumbnail p{margin:8px auto;font-size:16px;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail:hover{background:#FFF;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail p,
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail.selected p,
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail.selected:hover p{opacity:1;position:relative;z-index:1;color:#000 !important;font-size:12px;margin:0 auto;padding:4% 5% !important;height:30px;line-height:16px;width:100%;box-sizing:border-box;}
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail:hover{background:#FFF;}
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail p,
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail.selected p,
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail.selected:hover p{opacity:1;position:relative;z-index:1;color:#000 !important;font-size:12px;margin:0 auto;padding:4% 5% !important;height:40px;line-height:16px;width:100%;box-sizing:border-box;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail:hover img,
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail:hover img{opacity:1 !important;}
  ul.thumbnails.image_picker_selector li .thumbnail.selected::after{background-size:56px;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail.selected.fancybox a.fancybox-button{bottom:30px;width:25px;height:25px;background-position:5px 5px;background-size:16px;}
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail.selected.fancybox a.fancybox-button{bottom:40px;width:25px;height:25px;background-position:5px 5px;background-size:16px;}
}
@media screen and (max-width: 767px){
  .codiControls, .codi{padding-right:17px;padding-left:17px;margin:30px auto 20px;}
  .codiControls h2, .codi h2{font-size:20px;line-height:1.2;}
  .codiControls p, .codi p{font-size:16px;line-height:1.4em;}
  .codiControls .contentBlock, .codi .contentBlock{padding:0;}
  .codiControls .contentBlock hr, .codi .contentBlock hr{margin:4px 0 18px;}
  .codiControls .surface_finish{padding-bottom:10px;}
  .codiControls .base_colour, .codiControls .aggregate_colour{padding-bottom:0;}
  .codi .button{font:normal 16px/32px 'brownstd-regular', Arial, Helvetica, sans-serif;margin: 0 auto 20px;}
  .codi .concrete_overlay_sample .button{font-size: 16px;line-height: 32px;}
  .codi .concrete_overlay_sample .thumbnail{margin-right:0;margin-bottom:10px;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector, .codiControls .aggregate_colour ul.thumbnails.image_picker_selector ul, .codiControls .aggregate_colour ul.thumbnails.image_picker_selector, .codiControls .aggregate_colour ul.thumbnails.image_picker_selector ul{margin-bottom:20px;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector li, .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li,
  .codiControls .base_colour ul.thumbnails.image_picker_selector li:nth-child(6n),.codiControls .aggregate_colour ul.thumbnails.image_picker_selector li:nth-child(6n){width:22.75%;margin-right:3%;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector li:nth-child(4n),.codiControls .aggregate_colour ul.thumbnails.image_picker_selector li:nth-child(4n){margin-right:0;}
	ul.thumbnails.image_picker_selector li .thumbnail.selected::after{background-size:43px;}
  .codi .codi2Col{display:block;float:left;margin-bottom:20px;padding:0;}
  .codi .codi2Col .surface_sample,
  .codi .codi2Col .sample_specs{display:block;float:left;padding:0;width:100%;text-align:center;display:none;}
  .codi .codi2Col .sample_specs .thumbnail{padding:20px;}
  .codi .codi2Col .sample_specs .thumbnail p.disclaimer{padding:0;}
  ul.thumbnails.image_picker_selector li .thumbnail p{font-size:10px;margin: 2px auto;padding: 4% 5%;height: 24px;line-height:12px;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail p,
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail.selected p,
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail.selected:hover p{opacity:1;position:relative;z-index:1;color:#000;font-size:10px;margin:0 auto;padding:4% 5%;height:20px;line-height:12px;width:100%;box-sizing:border-box;}
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail:hover{background:#FFF;}
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail p,
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail.selected p,
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail.selected:hover p{opacity:1;position:relative;z-index:1;color:#000;font-size:10px;margin:0 auto;padding:4% 5%;height:44px;line-height:12px;width:100%;box-sizing:border-box;}
  ul.thumbnails.image_picker_selector li .thumbnail.selected::after{background-size:56px;}
  .codiControls .base_colour ul.thumbnails.image_picker_selector li .thumbnail.selected.fancybox a.fancybox-button{bottom:20px;width:25px;height:25px;background-position:5px 5px;background-size:16px;}
  .codiControls .aggregate_colour ul.thumbnails.image_picker_selector li .thumbnail.selected.fancybox a.fancybox-button{bottom:44px;width:25px;height:25px;background-position:5px 5px;background-size:16px;}
}
@page{
    size:21cm 29.7cm;
    margin:7mm 15mm 0mm;
}
@media print{
  .codiControls, #step4 h2, #step4 p, .codi .button, #note{display:none;}
  .codi{display:block;margin:0;width:18cm;max-width:18cm;padding:0;box-sizing:border-box;text-align:center;clear:both;}
  .codi #printHeader{display:block;width:100%;}
  .codi #printHeader img{width:100%;}
  .codi #printHeader h1{color:#666;font:normal 21pt/25pt 'brownstd-regular', Arial, Helvetica, sans-serif;margin:0;padding:0;text-align:left;}
  .codi #printHeader h1 em{font:normal 21pt/25pt 'brownstd-regular', Arial, Helvetica, sans-serif;margin-left:0;font-style:italic;}
  .codi #printHeader h1 span.carnation{color:#f3665f;}
  .codi .contentBlock, .codi .codi2Col{padding:0;}
  .codi .contentBlock hr{margin:3mm 0 5mm;height:.5pt;}
  .codi .concrete_overlay_sample .thumbnail{margin-right:0;margin-bottom:6mm;}
  .codi .codi2Col{display:table;margin-bottom:7mm;}
  .codi .codi2Col .surface_sample{display:table-cell;width:87mm;padding-right:6mm;}
  .codi .codi2Col .sample_specs{text-align:left;width:87mm;display:table-cell;border:.5pt solid #cacccd;box-sizing:border-box;vertical-align:top;}
  .codi .codi2Col .sample_specs .thumbnail{padding:4mm 6mm 5mm;}
  .codi .codi2Col .sample_specs .thumbnail p{font-size:14pt;margin:0 0 15pt;}
  .codi .codi2Col .sample_specs .thumbnail p.small{color:#666;font-size:8pt;line-height:10pt;margin:0;}
  .codi .codi2Col .sample_specs .thumbnail p.small.sampleSpecs{margin-bottom:10mm;}
  .codi .codi2Col .sample_specs .thumbnail p.small.carnation{color:#f3665f;margin-bottom:3pt;}
  .codi .codi2Col .sample_specs .thumbnail p.disclaimer{padding-top:3pt; display:block !important;}

  .codi #printFooter{display:block;width:100%;text-align:center;}
  .codi #printFooter p{color:#f3665f;font:normal 11pt/13pt 'brownstd-bold', Arial, Helvetica, sans-serif;margin:0;padding:0;}
  .codi #printFooter ul{color:#666;font:normal 10pt/12pt 'brownstd-regular', Arial, Helvetica, sans-serif;list-style:none;margin:1mm auto 0;padding:0;display:table;}
  .codi #printFooter ul li{display:table-cell;margin:0;padding:0 3mm;}

}