<meta name="viewport" content="width=device-width, initial-scale=1">


* {
    box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.columnss {
    float: left;
    width: 33.33%;
    padding: 10px;
}

/* Clear floats after the columns */
.rowss:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .columnss {
        width: 100%;
    }
}

* {
    box-sizing: border-box;
}

/* Create 4 equal columns that floats next to each other */
.columnsss {
    float: left;
    width: 25%;
    padding: 10px;
}

/* Clear floats after the columns */
.rowsss:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .columnsss {
        width: 100%;
    }
}


* {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.columnssss {
    vertical-align: middle;
	height: 100%;
	display:table-cell;
	float: left;
    width: 50%;
    padding: 50px;
	
	
}

/* Clear floats after the columns */
.rowssss:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .columnssss {
        width: 100%;
    }
}


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


.imgresponsive{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

.btn-gold {
	background: -webkit-linear-gradient(left, #8f6B29, #FDE08D, #DF9F28);
	background: linear-gradient(left, #8f6B29, #FDE08D, #DF9F28);
  padding:5px 0 0;
	
}

.btn-golddd {
	  color: white;
  
  
  &:after {
    
    content:'';
    display: inline-block;
    background: #FDE08D;
  	background: -webkit-linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	background: linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
    height: 50px;
    width: 372px;
    z-index: -1;
    transform: translateX(-280px);
    transition: transform 400ms ease-in;
  }
  
  &:hover {
    &:after {
      transform: translateX(-200px);
    }
  }
  span {
    position: relative;
    top: 16px;
  }
}
}