
.wtgn-container {
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    background-color: #656565;
}
.wtgn-item {
    width: 50%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
	padding: 8px;
}

.wtgn-container .font9 {
    padding-top: 80px;
    margin-bottom: 25px;
}
.wtgn-button a {
    border: solid #fff 1px;
    border-radius: 4px;
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 10px;
    color: #fff;
}
.wtgn-button a:hover {
    border: solid #fff 1px;
    border-radius: 4px;
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 10px;
    color: #404040;
    background-color: #fff;
}
.wtgn-button {
    width: 21rem;
    font-size: 22px;
}

@media all and (max-width: 767px) {
	.wtgn-container .font9 {
		font-size: 18px;
	}
	.wtgn-button {
		width: 8rem;
		font-size: 14px;
	}
}

@media all and (max-width: 768px) {
	.wtgn-container .font9 {
		padding-top: 30px;
		margin-bottom: 20px;
	}
}

@media all and (min-width: 769px) and (max-width: 1024px) {
	.wtgn-container .font9 {
		padding-top: 50px;
	}
}



/*------------------- START STYLES FOR WTGN-start -------------------*/

#wtgn-packages {
    background: url(/images/wtgn-packages-img.jpg) no-repeat top right;
    height: 280px;
}
@media all and (max-width: 767px) {
	#wtgn-packages {
		background-size: cover;
		background-position: 0% 44%;
	}
}
@media all and (max-width: 768px) {
	#wtgn-packages {
		height: 168px;
		background-size: contain;
	}
}
@media all and (min-width: 769px) and (max-width: 1024px) {
	#wtgn-packages {
		height: 210px;
		background-size: contain;
	}
}

/*------------------- START STYLES FOR WTGN-DANY -------------------*/

#wtgn-dany {
    background: url(/images/wtgn-dany-img.jpg) no-repeat top right;
    height: 280px !important;
    border-right: 1px solid #fff;
}

@media all and (max-width: 767px) {
	#wtgn-dany {
		background-size: cover;
		border-right: 1px solid #fff;
	}
}
@media all and (max-width: 768px) {
	#wtgn-dany {
		height: 168px;
		background-size: cover;
	}
}
@media all and (min-width: 769px) and (max-width: 1024px) {

	wtgn-dany {
		height: 210px;
		background-size: contain;
	}
}

/*------------------- START STYLES FOR WTGN-HOPPER3 -------------------*/

#wtgn-hopper3 {
    background: url(/images/wtgn-hopper3-img.jpg) no-repeat top center;
    height: 280px;
    border-right: 1px solid #fff;
}
@media all and (max-width: 767px) {
	#wtgn-hopper3 {
		background-size: cover;
		border-right: 1px solid #fff;
	}
}
@media all and (max-width: 768px) {
	#wtgn-hopper3 {
		height: 168px;
		background-size: cover;
	}
}
@media all and (min-width: 769px) and (max-width: 1024px) {
	#wtgn-hopper3 {
		height: 210px;
		background-size: cover;
	}
}

/*------------------- START STYLES FOR WTGN-COMPARE -------------------*/

#wtgn-compare {
    background: url(/images/wtgn-compare-img.jpg) no-repeat top center;
    height: 280px;
    border-right: 1px solid #fff;
}
@media all and (max-width: 767px) {
	#wtgn-compare {
		background-size: cover;
	}
}
@media all and (max-width: 768px) {
	#wtgn-compare {
		height: 168px;
		background-size: cover;
	}
}
@media all and (min-width: 769px) and (max-width: 1024px) {
	#wtgn-compare {
		height: 210px;
		background-size: contain;
	}
}

/*------------------- START STYLES FOR WTGN-INSTALL -------------------*/

#wtgn-install {
    background: url(/images/wtgn-install-img.jpg) no-repeat top right;
    height: 280px;
    border-right: 1px solid #fff;
}
@media all and (max-width: 767px) {
	#wtgn-install {
		background-size: cover;
		border-right: 1px solid #fff;
	}
}
@media all and (max-width: 768px) {
	#wtgn-install {
		height: 168px;
		background-size: cover;
	}
}
@media all and (min-width: 769px) and (max-width: 1024px) {
	#wtgn-install {
		height: 210px;
		background-size: contain;
	}
}

/*------------------- START STYLES FOR WTGN-HOPPERGO -------------------*/

#wtgn-hopperGO {
    background: url(/images/wtgn-dany-img.jpg) no-repeat top right;
    height: 280px;
    border-right: 1px solid #fff;
}
@media all and (max-width: 767px) {
	#wtgn-hopperGO {
		background-size: cover;
		border-right: 1px solid #fff;
	}
}
@media all and (max-width: 768px) {
	#wtgn-hopperGO {
		height: 168px;
		background-size: contain;
	}
}
@media all and (min-width: 769px) and (max-width: 1024px) {
	#wtgn-hopperGO {
		height: 210px;
		background-size: contain;
	}
}

/*------------------- START STYLES FOR WTGN-VOICE-REMOTE -------------------*/

#wtgn-voice-remote {
    background: url(/images/wtgn-voice-remote-img.jpg) no-repeat top right;
    height: 280px;
    border-right: 1px solid #fff;
}
@media all and (max-width: 767px) {
	#wtgn-voice-remote {
		background-size: cover;
		border-right: 1px solid #fff;
	}
}
@media all and (max-width: 768px) {
	#wtgn-voice-remote {
		height: 168px;
		background-size: contain;
	}
}
@media all and (min-width: 769px) and (max-width: 1024px) {
	#wtgn-voice-remote {
		height: 210px;
		background-size: contain;
	}
}