@charset "UTF-8";

html,body{
    margin:0;
    padding:10px;
    width:auto;
    height:100vh;
    transition:all .5s linear;
    position:relative;
    font-family:'Poppins',Arial,sans-serif;
    -webkit-hyphens:auto;
    -moz-hyphens:auto;
    -ms-hyphens:auto;
    hyphens:auto;
    -webkit-text-size-adjust:100%;
    -webkit-font-smoothing:subpixel-antialiased;
}
.container-wrapper {
width:100%;
margin:0;
padding:0px;
}
.container {
width:100%;
margin:0;
padding:0px;
}
.container-boxed {
width:100%;
max-width:1600px;
margin:0;
padding:0;
margin:auto;
}
#header-wrapper {
width:100%;
margin:0;
padding:10px;
display:flex;
justify-content:space-between;
gap:0;
padding-bottom:20px;
border-bottom:1px solid rgba(125,175,255,1.0)!important;
margin-bottom:20px;
}
.column {
width:50%;
margin:0;
padding:0px;
}
.column .btn-wrapper {
display:flex;
justify-content: right;
width:100%;
margin:0;
padding:0;
}
.column .btn-wrapper a {
display:inline-block;
margin:20px;
padding:0;
padding:15px 25px 15px 25px;
background-color:rgba(125,175,255,1.0);
border:none;
border-radius:25px;
font-family:Poppins,Arial;
font-size:16px;
color:#FFFFFF;
text-decoration:none;
}
.column .btn-wrapper a:hover {
background-color:#254267;
}
.column .logo-wrapper {
width:100%;
max-width:450px;
margin:0;
}
.column .logo-wrapper a img {
width:100%;
margin:0;
padding:0;
}
#image-introduction-wrapper {
width:100%;
margin:0;
padding:10px;
display:flex;
justify-content:space-between;
gap:30px;
}

.column .introduction {
background-color:#254267;
padding:30px;
}

.column .introduction p {
font-family:Poppins,Arial;
font-size:16px;
font-weight:400;
line-height:2em;
color:#FFFFFF;
}

.column .introduction p strong {
font-family:Poppins,Arial;
font-weight:600;
}

#resultsWrapper {
    margin:0;
    padding:10px;
    margin-top:20px;
    display:flex;
    justify-content: space-between;
    flex-wrap:no-wrap;
    overflow: auto;
    gap:10px;
}
#resultsWrapper .results {
width:100%;
max-width:200px;
}
#resultsWrapper input {
font-family:Poppins,Arial;
font-size:16px;
font-weight:400;
line-height: 2em;
colour:#424242;
border:solid 1px #f2f2f2;
}
#RALchart-wrapper {
margin-top:30px;
}
#colourPickerBlock {
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
    overflow: auto;
    gap:10px;
}
#colourPickerBlock .colourBlock::placeholder {
opacity:1;
color:#000000!important;
}
#colourPickerBlock .colourBlock {
font-family:Poppins,Arial;
font-size:12px;
font-weight:400;
width:110px;
height:50px;
display:inline-block;
padding:3px;
margin:1px;
text-decoration: none;
cursor: pointer;
color:transparent!important;
border:none;
-webkit-box-shadow: 2px 8px 19px -11px rgba(66, 66, 66, 1);
-moz-box-shadow: 2px 8px 19px -11px rgba(66, 66, 66, 1);
box-shadow: 2px 8px 19px -11px rgba(66, 66, 66, 1);
border-radius:5px;
}
#colourPickerBlock input[type=text] {
  box-sizing: border-box;
  border: 3px solid transparent;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

#colourPickerBlock input[type=text]:focus {
  border: 3px solid #3e307e;
}
#colourPickerBlock .colourBlock:hover {
text-decoration: none;
}
#copy-btn-wrapper {
margin-top:30px;
padding-bottom:40px;
}
#copy-btn-wrapper button {
padding:15px 25px 15px 25px;
background-color:rgba(125,175,255,1.0);
border:none;
border-radius:25px;
font-family:Poppins,Arial;
font-size:16px;
color:#FFFFFF;
cursor: pointer;
}
#copy-btn-wrapper button:hover {
background-color:#254267;
}
#thumbnails-wrapper {
margin-top:30px;
}
#mainImage-wrapper {
width:100%;
}
#mainImage-wrapper img {
width:100%;
}
#RALname {
font-family:Poppins,Arial;
font-size:16px;
font-weight:400;
}
.imageThumbs {
display:flex;
justify-content:center;
gap:10px;
}
#picker-wrapper {
margin-top:20px;
}
.preloader {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background-repeat: no-repeat; 
   background-color: #FFF;
   background-position: center;
}
.preloader .spinner {
	top: 50%;
    bottom: 50%;
    left: 50%;
    right: 50%;
    position: absolute;
}
.card {
	text-align: center;
	padding: 5px;
    padding-bottom:0px!important;
 margin-bottom:-2px!important;
	transition:all .25s linear;
}
.card img {
	margin: 0 auto;
	
}
.card:hover{
	background: #e2e2e2;
	cursor: pointer;
	border-color: #3e307e;
	transform: scale(0.95);
}
.card.active{
	background:#3e307e;
	transform: scale(0.95);

}

/* Colour Picker */
.farbtastic {
  position: relative;
}
.farbtastic * {
  position: absolute;
  cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
  width: 195px;
  height: 195px;
	margin: 0 auto;
}
.farbtastic .color, .farbtastic .overlay {
  top: 47px;
  left: 47px;
  width: 101px;
  height: 101px;
}
.farbtastic .wheel {
  background: url('https://galaxyglassandmirrors.co.uk/wp-content/uploads/2025/06/wheel.png') no-repeat;
  width: 195px;
  height: 195px;
}
.farbtastic .overlay {
  background: url('https://galaxyglassandmirrors.co.uk/wp-content/uploads/2025/06/mask.png') no-repeat;
}
.farbtastic .marker {
  width: 17px;
  height: 17px;
  margin: -8px 0 0 -8px;
  overflow: hidden; 
  background: url('https://galaxyglassandmirrors.co.uk/wp-content/uploads/2025/06/marker.png') no-repeat;
}

@media screen and (min-width: 200px) and (max-width: 640px) {
.column .introduction {
padding:10px;
}
.column .introduction p {
font-size:12px;
}
.column .btn-wrapper a {
display:inline-block;
padding:15px 15px 15px 15px;
font-size:12px;
}
#image-introduction-wrapper {
display:block!important;
gap:20px;
}
.column {
width:100%;
margin-bottom:20px;
}
#header-wrapper {
display:block;
flex-direction: column;
justify-content:space-between;
}
.column .btn-wrapper {
justify-content: center;
}
.column .logo-wrapper {
width:100%;
max-width:300px;
margin:0;
margin:auto;
}
#colourPickerBlock {
display:flex;
justify-content: center;
flex-wrap:wrap;
overflow: auto;
gap:5px;
}
#colourPickerBlock .colourBlock {
width:100px;
height:40px;
}
#header-wrapper .btn1 {
display:none;
}
}
@media screen and (min-width: 640px) and (max-width: 1024px) {
.column .introduction {
padding:10px;
}
.column .introduction p {
font-size:12px;
}
.column .btn-wrapper a {
display:inline-block;
padding:15px 15px 15px 15px;
font-size:12px;
}
#image-introduction-wrapper {
display:block!important;
gap:20px;
}
.column {
width:100%;
margin-bottom:20px;
}
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
.column .introduction {
padding:20px;
}
.column .introduction p {
font-size:14px;
}
.column .btn-wrapper a {
display:inline-block;
padding:15px 20px 15px 20px;
font-size:14px;
}
}
@media screen and (min-width: 1201px) and (max-width: 1366px) {
.column .introduction {
padding:20px;
}
.column .introduction p {
font-size:14px;
}
.column .btn-wrapper a {
display:inline-block;
padding:15px 20px 15px 20px;
font-size:14px;
}
}