/* ==========================================================================
   Font
   ========================================================================== */

@font-face {
	font-family: CiscoSans;
	src: url(/content/dam/global/en_sg/solutions/small-business/wi-fi-refresh-selector/assets/fonts/CiscoSansTTRegular.woff2) format("woff2") , url(/content/dam/global/en_sg/solutions/small-business/wi-fi-refresh-selector/assets/fonts/CiscoSansTTRegular.woff) format("woff");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: CiscoSans;
	src: url(/content/dam/global/en_sg/solutions/small-business/wi-fi-refresh-selector/assets/fonts/CiscoSansTTRegularOblique.woff2) format("woff2") , url(/content/dam/global/en_sg/solutions/small-business/wi-fi-refresh-selector/assets/fonts/CiscoSansTTRegularOblique.woff) format("woff");
	font-display: swap;
	font-style: oblique;
	font-weight: 400;
}

@font-face {
	font-family: CiscoSans;
	src: url(/content/dam/global/en_sg/solutions/small-business/wi-fi-refresh-selector/assets/fonts/CiscoSansTTBold.woff2) format("woff2") , url(/content/dam/global/en_sg/solutions/small-business/wi-fi-refresh-selector/assets/fonts/CiscoSansTTBold.woff) format("woff")
	font-display: swap;
	font-style: normal;
	font-weight: 700;
}

@font-face {
	font-family: CiscoSans;
	src: url(/content/dam/global/en_sg/solutions/small-business/wi-fi-refresh-selector/assets/fonts/CiscoSansTTExtraLight.woff2) format("woff2") , url(/content/dam/global/en_sg/solutions/small-business/wi-fi-refresh-selector/assets/fonts/CiscoSansTTExtraLight.woff) format("woff");
	font-display: swap;
	font-style: normal;
	font-weight: 100;
}


/* ==========================================================================
   Common
   ========================================================================== */

body {
	font: 13px/1.231 CiscoSans,Arial,sans-serif;
	background-color: #e8ebf1;
	margin: 0;
}

@media ( max-width : 480px) {
	body {
		background-color: #fff;
	}
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
}

.clearfix:after {
	visibility: hidden;
	height: 0;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
}

.contents_wrapper {
	max-width: 800px;
	margin: 0 auto;
	background-color: #fff;
}

@media ( max-width : 480px) {
	.contents_wrapper {
		margin: 0 10px;
	}
}


/* ==========================================================================
   Header
   ========================================================================== */

.head_logo {
	padding: 19px 0;
	text-align: center;
}

@media ( max-width : 480px) {
	.head_logo {
		padding: 8px 0;
	}
}

.head_logo img{
	width: 57px;
	height: 30px;
}

.head_title {
	position: relative;
	margin: 0 0 45px;
}

@media ( max-width : 480px) {
	.head_title {
		margin: 0 -10px 20px;
	}
}

.head_title .head_title_txt_main {
	width: 100%;
	color: #fff; 
	font-size: 246%;
	font-weight: lighter;
	text-shadow: 2px 2px 5px #000;
	text-align: center;
	position: absolute;
	top: 15%;
	left: 0;
}

@media ( max-width : 660px) {
	.head_title .head_title_txt_main {
		font-size: 197%;
	}
}

@media ( max-width : 530px) {
	.head_title .head_title_txt_main {
		font-size: 182%;
	}
}

@media ( max-width : 480px) {
	.head_title .head_title_txt_main {
		font-size: 138.5%;
		top: 10%;
	}
}

@media ( max-width : 374px) {
	.head_title .head_title_txt_main {
		font-size: 116%;
	}
}

.head_title .head_title_txt_sub {
	width: 100%;
	color: #39393b;; 
	font-size: 123.1%;
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: 32.8%;
	left: 0;
}

@media ( max-width : 660px) {
	.head_title .head_title_txt_sub {
		font-size: 100%;
	}
}

@media ( max-width : 530px) {
	.head_title .head_title_txt_sub {
		font-size: 85%;
		top: 33%;
	}
}

@media ( max-width : 480px) {
	.head_title .head_title_txt_sub {
		font-size: 77%;
		top: 30%;
	}
}

@media ( max-width : 374px) {
	.head_title .head_title_txt_sub {
		font-size: 69%;
	}
}


/* ==========================================================================
   Footer
   ========================================================================== */

.foot_btn {
	min-height: 25px;
	margin: 50px 40px 0;
	padding: 0;
	position: relative;
}

@media ( max-width : 480px) {
	.foot_btn {
		margin: 70px 0 0;
	}
}

.foot_btn .btn_back {	
	color: #000;
	font-size: 100%;
	font-weight: lighter;
	background: url(/content/dam/global/en_sg/solutions/small-business/wi-fi-refresh-selector/assets/img/ico_back.png) center left no-repeat;
	background-size: 25px 25px;
	padding: 9px 0 6px 35px;
	float:left;
	cursor: pointer;
}

@media ( max-width : 480px) {
	.foot_btn .btn_back {	
		padding-left: 30px;
	}
}

.btn_back:hover, 
.btn_back:active {	
	opacity: 0.6;
}

.foot_copy {
	color: #fff;
	font-size: 100%;
	font-weight: bold;
	background-color: #39393b;
	margin-top: 25px;
	padding: 15px 0 13px;
	text-align:center;
}

@media ( max-width : 480px) {
	.foot_copy {
		margin: 25px -10px 0;
	}
}