#purchase-code-status {
    margin-top: 5px;
}

#purchase-code-status .section {
    background: #d8d8d8;
    padding: 12px 12px;
}

#purchase-code-status h3 {
    margin: 0 3px -4px 3px;
}


#purchase-code-status p {
	margin: 12px 3px 30px 3px;
}

#purchase-code-status .input-hold {
    display: block;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
}

#purchase-code-status .input-hold input {
    flex: 3;
    margin: 3px;
}

#purchase-code-status .input-hold input:last-child {
    flex: 0.3;
    text-align: center;
}

.demos-grid {}

.demos-grid .demo-item {
    position: relative;
}

.demos-grid .demo-item img {
    max-width: 100%;
}

.demos-grid .demo-item .demo-title h4 {
    font-size: 1em;
    margin: 3px 0 4px;
    padding: 2px;
    font-weight: normal;
}

.demos-grid .demo-item .demo-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
	margin:0 auto;
    padding-top: 10px;
}

.demos-grid .demo-item .demo-actions button.not-verified, .demos-grid .demo-item .demo-actions button[disabled]{
	background-color: #d6dbe8 !important;
    background-image: none !important;
    color: #ffffff !important;
    text-shadow: none !important;
	line-height:26px;
	
}

.demos-grid .demo-item .demo-actions button.not-verified:hover, .demos-grid .demo-item .demo-actions button[disabled] {
    background-color: #d6dbe8 !important;
    background-image: none !important;
    color: #ffffff !important;
    text-shadow: none !important;
	-webkit-transition: none;
    -o-transition: none;
    transition: none;
	box-shadow: none !important;
	line-height:26px;

}

.demos-grid .demo-item .demo-actions .button {
    flex: 1;
    margin: 3px;
    text-align: center;
    text-shadow: none;
    border: none;
    height: 40px;
    border-radius: 0px;
    font-size: 14px;
    -webkit-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
    box-shadow: none;
	line-height:26px;
}



.demos-grid .demo-item .demo-actions a.button {
    padding: 6px 14px;
    background-color: #f2f4f9;
}

.demos-grid .demo-item .demo-actions a:before {
    content: "\f179";
    color: #e8326e;
    font-family: dashicons;
    font-size: 20px;
}


.demos-grid .demo-item .demo-actions a.button:hover:not(.not-verified), .demos-grid .demo-item .demo-actions a.button:hover:not([disabled]) {
    background-color: #f2f4f9;
    box-shadow: 1px 4px 10px rgba(187, 186, 208, 0.35) !important;
	line-height:26px;
}


.demos-grid .demo-item .demo-actions .button:hover:not(.not-verified), .demos-grid .demo-item .demo-actions a.button:hover:not([disabled]) {
    -webkit-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
    margin-top:0px;
    margin-bottom:6px;
}

.demos-grid .demo-item .demo-actions button {
    background-image: linear-gradient(to right,rgba(228,42,104,1) 0%,rgba(244,66,123,1) 100%) !important;
}

.demos-grid .demo-item .demo-actions button:hover {
    box-shadow: 1px 4px 10px rgba(236,49,112,0.35) !important;
}


#purchase-code-status input.button {
    background-image: linear-gradient(to right,rgba(228,42,104,1) 0%,rgba(244,66,123,1) 100%) !important;
    flex: 1;
    margin: 3px;
    text-align: center;
    text-shadow: none;
    border: none;
    height: 40px;
    border-radius: 0px;
    font-size: 14px;
    -webkit-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
    box-shadow: none;
	width:27%;
	float:right;
}

#purchase-code-status input.button:hover {
    box-shadow: 1px 4px 10px rgba(236,49,112,0.35) !important;
    -webkit-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
    margin-top:0px;
}




#purchase-code-status input:first-child {
	width:70%;
	height:40px;
}



.demos-grid h3 {margin:60px 20px 20px;}

p.demo-title-hold {
display:none;
}

.verified-status p {
    position: relative;
    padding-left: 19px;
}
.verified-status p:before {
    content: "\f160";
    left: -3px;
    color: #0ea004;
    font-family: dashicons;
    position: absolute;
    top: -4px;
    font-size: 19px;
}

.verified-status p strong {
    color: #0ea004;
}

.gusta-import-notice {
	margin-top: 33px !important;
    font-size: 12px;
    background-color: #fff6d9;
    padding: 23px 30px 23px 60px;
    border: 1px solid #ffc800;
    border-radius: 7px;
    position: relative;
}

.gusta-import-notice:before {
	content: "\f534";
    left: 20px;
    color: #FF9800;
    font-family: dashicons;
    position: absolute;
    top: 19px;
    font-size: 25px;
}

/*
  ======================
  12 Columns Grid System
  ======================
  by Kaíque Zimerer

  This is a simple 12 Columns Grid System
  made with pure CSS.

  Enjoy it!
*/

.gusta-demo-grid-wrap * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.gusta-demo-grid-wrap .container {
    width: 100%;
}

.gusta-demo-grid-wrap .row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
}


/* content */

.gusta-demo-grid-wrap .row .inside {
    background-color: #ffffff;
    padding: 3%;
    margin: 7px;
}

.gusta-demo-grid-wrap .row .inside-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.9;
    -webkit-opacity: 0.9;
}

.gusta-demo-grid-wrap.row div:nth-child(2n):hover {
    background-color: #42A5F5;
}

.gusta-demo-grid-wrap.row div:nth-child(2n+1):hover {
    background-color: #66BB6A;
}


/* 1/12 */

.gusta-demo-grid-wrap .col-1 {
    width: 8.33%;
}


/* 2/12 */

.gusta-demo-grid-wrap .col-2 {
    width: 16.66%;
}


/* 3/12 */

.gusta-demo-grid-wrap .col-3 {
    width: 25%;
}


/* 4/12 */

.gusta-demo-grid-wrap .col-4 {
    width: 33.33%
}


/* 5/12 */

.gusta-demo-grid-wrap .col-5 {
    width: 41.66%;
}


/* 6/12 */

.gusta-demo-grid-wrap .col-6 {
    width: 50%;
}


/* 7/12 */

.gusta-demo-grid-wrap .col-7 {
    width: 58.33%;
}


/* 8/12 */

.gusta-demo-grid-wrap .col-8 {
    width: 66.66%;
}


/* 9/12 */

.gusta-demo-grid-wrap .col-9 {
    width: 75%;
}


/* 10/12 */

.gusta-demo-grid-wrap .col-10 {
    width: 83.33%;
}


/* 11/12 */

.gusta-demo-grid-wrap .col-11 {
    width: 91.66%;
}


/* 12/12 */

.gusta-demo-grid-wrap .col-12 {
    width: 100%;
}


/* viewport <= 1000px */

@media screen and (max-width: 1000px) {
    .gusta-demo-grid-wrap * {
    }
    .demo-item.col-4 {
        width: 50%;
    }
    .demo-item.col-3 {
        width: 33.333333%;
    }
}


/* viewport <= 630px */

@media screen and (max-width: 400px) {

	.demo-item.col-3 {width:100%;}
}

@media screen and (max-width: 690px) {
	.gusta-import-window {
		width:70% !important;
	}
	.gusta-import-window .modal-content {
		width:100%;
	}
	
}

@media screen and (max-width: 630px) {
    .gusta-demo-grid-wrap .row div {
        padding: 1.5%;
    }
    .demo-item.col-4, .demo-item.col-6 {
        width: 100% !important;
    }
    #purchase-code-status .input-hold {
        display: block;
    }
    #purchase-code-status .input-hold input {
        width: 100% !important;
        display: block !important;
		float:none !important;
    }
    .gusta-demo-grid-wrap .row .inside {
        margin: 2px;
    }
	#purchase-code-status input.button:hover  {margin-bottom:3px;}
    .demo-item.col-3 {
        width: 50%;
    }
}

@media screen and (min-width: 630px) {
		#purchase-code-status input.button:hover  {margin-bottom:6px;}

}

@media screen and (min-width:500px) and (max-width: 630px) {
	.demo-item.col-3 {width:50%;}
}

/* viewport <= 500px */



@media screen and (max-width: 500px) {
	.demo-item.col-3, .demo-item.col-3 img {
		width:100%;
	}
}

.gusta-demo-grid-wrap .demos-grid.row {
    padding: 40px;
    background-color: #fff;
    margin-top: 15px;
}

#purchase-code-status .section {
    background: #ffffff;
    padding: 40px 60px;
    margin-top: 15px;
    margin-bottom: 30px;
}

.gusta-demo-grid-wrap .row .inside {
    padding: 0;
    margin: 20px;
}


.gusta-demo-grid-wrap .demo-title {
	display:none !important;
    margin:0px;
    line-height: 23px;
    font-size: 18px;
}


.gusta-hide {
	display:none !important;
}



.gusta-import-window {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 8px 62px rgba(0,0,0,0.15) !important;
}

.gusta-import-window .modal-content {
    height: inherit !important;
    top: inherit !important;
    left: inherit !important;
}

.gusta-import-window .gdem-ds {
    font-size: 30px;
    position: absolute;
    right: 30px;
    z-index: 99;
    top: 20px;
    cursor:pointer;
	display:none !important;
}


.gusta-import-window .updated.notice, .gusta-import-window .updated.notice p {
    box-shadow: none !important;
	border-left: none !important;
	padding:0 !important;
	margin:0 !important;
}

.gusta-import-error {
	margin:0 !important;
}