@charset "utf-8";
/*
 * CSS Document
 */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/* Variables */
:root {
	--color-success: #13ce66;
	--color-error: #dc4c64;
	--color-warning: #e6ad00;
	--color-confirm: #1FB6FF;
	--color-title: #3a408a;
	--color-text: #6d7587;
	--font-satisfy: 'Satisfy';
}

/* CSS Reset */
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	text-decoration: none;
}

body {
	flex-wrap: wrap;
	width: 100vw;
	line-height: 1;
	overflow-x: hidden;
}

ol,
ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Styles Here */
.background {
	background-image: url("../img/back.png");
	height: 740px;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.logo {
	position: relative;
	text-align: center;
	width: 1160px;
	margin: -308px auto;
}

.backleft {
	width: 427px;
	height: 380px;
	background-image: url("../img/back-left.png");
	position: relative;
}

.backright {
	width: 448px;
	height: 332px;
	background-image: url("../img/back-right.png");
	position: relative;
	float: right;
	margin: 27px auto;
}

.circle {
	background-color: #3a408a;
	color: #ffffff;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	position: relative;
	text-align: center;
	margin: -46px auto;
	float: right;
}

#year {
	text-align: center;
	width: 1160px;
	margin: 216px auto;
	position: relative;
	color: #f8853e;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 55px;
	font-weight: 900;
}

#title {
	left: 300px;
	top: 420px;
	font-size: 50px;
	font-family: 'Roboto', Verdana, Tahoma, sans-serif;
	color: #3d81ce;
	width: 500px;
	position: relative;
	text-align: center;
}

#date {
	padding-top: 80px;
	height: 69px;
	font-family: "Anton", sans-serif;
	font-size: 60px;
	font-weight: bold;
}

.division {
	width: auto;
	margin: 10px 35px;
	display: block;
	border: 2px solid #FFF;
	border-radius: 2px;
}

#month {
	padding-top: 10px;
	height: 159px;
	font-family: "Anton", sans-serif;
	font-size: 60px;
	font-weight: bold;
	color: #f8853e;
}

.ticket {
	display: grid;
	grid-template-columns: 304px 1fr;
	grid-gap: 15px;
	margin: 70px auto;
	width: 1160px;
}

#paranapetro {
	margin-top: 32px;
}

.edition {
	font-weight: bold;
	font-family: "Roboto", sans-serif;
	text-align: center;
	padding: 7px;
	font-size: 25px;
	margin: 0px auto;
}

.address {
	font-family: "Afacad Flux";
	text-align: center;
	font-size: 25px;
	margin: 0 auto;
}

.div_button {
	margin: 0 auto;
	text-align: center;
	padding: 20px 0 0 0;
}

.button {
	width: 590px;
	height: 70px;
	margin: 0 auto;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	background-color: #3d81ce;
	color: #ffffff;
	font-size: 16px;
	cursor: pointer;
	border-radius: 10px;
}

.button:hover {
	background-color: #5798e3;
	color: #ffffff;
	transition: 0.6s;
}

.range {
	background-color: #3d81ce;
	height: 450px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	background-size: cover;
}

/* #contador {
	left: 300px;
	position: relative;
	color: #000000;
	font-size: 40px;
	font-weight: bold; 
} */

.contador {
	color: #FFF;
}

.container_range {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 55px;
	margin: 15px auto;
	width: 1160px;
}

.item_range {
	width: 180px;
	height: 180px;
	border: 15px #3a408a;
	border-radius: 50%;
	border: 1px solid #3a408a;
	position: relative;
	margin: 0 auto;
}

.circle_item_range {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	border: 1px solid #3a408a;
	background-color: transparent;
}

.number_range {
	color: white;
	font-weight: bold;
	font-family: "Anton";
	text-align: center;
	position: relative;
	margin: -22px auto;
	font-size: 46px;
	white-space: nowrap;
	font-style: italic;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.text_range {
	color: white;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	text-transform: uppercase;
	text-align: center;
	position: relative;
	margin: 22px auto;
	white-space: nowrap;
	font-style: italic;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.schedule {
	position: relative;
	background-image: url("../img/fuel-pump.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}

#title_2 {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 40px;
	text-align: center;
	padding-top: 30px;
	color: #f8853e;
}

.timeline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
	margin: 80px auto;
	width: 1160px;
	align-items: center;
}

.hour {
	text-align: right;
	width: 95px;
	color: #f8853e;
	font-family: "Anton";
	font-size: 24px;
	position: relative;
	left: 270px;
}

.point {
	background-color: #3a408a;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	position: relative;
	right: -148px;
	top: 2px;
}

.line {
	font-weight: bold;
	font-size: 18px;
	width: 1160px;
	font-family: "Roboto", sans-serif;
	color: #3a408a;
	max-width: 680px;
	position: relative;
	right: 65px;
}

.sponsors {
	width: 1160px;
	margin: 0 auto;
	position: relative;
}

.container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 30px;
	margin: 20px auto;
	width: 1160px;
}

.item {
	text-align: center;
	border-radius: 50%;
	margin: 0 auto;
}

.division_2 {
	width: auto;
	margin: 10px 35px;
	border: 1px solid #cdc6c665;
	border-radius: 2px;
	position: relative;
}

.title_3 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 30px;
	position: relative;
	margin: 40px auto 10px auto;
	text-align: center;
}

.box_register {
	margin: 0 auto -185px auto;
	width: 1160px;
	height: 350px;
	position: relative;
	background-color: #f8853e;
	border-radius: 10px;
	box-shadow: 0 3px 3px;
	z-index: 2;
}

.label-input {
	font-size: 18px;
	font-family: 'Roboto', Verdana, Tahoma, sans-serif;
	color: #222;
	position: relative;
	font-weight: bold;
}

#title_box {
	left: 50px;
	top: 40px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 50px;
	color: #222;
	position: absolute;
	letter-spacing: -4px;
}

#mini_text {
	left: 56px;
	top: 92px;
	position: absolute;
	width: 840px;
	color: #222;
	font-family: "Roboto";
	margin-right: 10px;
	font-size: 18px;
}

#input_container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	position: relative;
	top: 170px;
	gap: 15px;
	margin: -12px 30px 0;
}

#name,
#e-mail {
	width: 100%;
	height: 50px;
	border-radius: 10px;
	box-shadow: 1px 1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	padding: 0 15px;
	box-sizing: border-box;
	margin-top: 6px;
}

.button_box {
	width: 100%;
	height: 50px;
	position: relative;
	background-color: #3a408a;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	margin: 25px 2px 4px 2px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	border-radius: 10px;
	box-sizing: border-box;
}

.button_box:hover {
	background-color: #464ca5;
	color: #ffffff;
	transition: 0.6s;
}

#text_box_register {
	top: 194px;
	position: relative;
	width: auto;
	color: #222;
	font-family: 'Roboto';
	margin-right: 10px;
	font-size: 16px;
	padding: 0 40px;
	line-height: 20px;
}

#box_credits {
	width: 100%;
	background-size: cover;
	background-color: #3a408a;
	height: 350px;
	z-index: 1;
}

#credits {
	width: 1160px;
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 0.7fr 0.8fr;
	column-gap: 10px;
	padding-top: 50px
}

#logo_position {
	margin: 0 auto;
	text-align: center;
	position: relative;
}

#logo_credits {
	width: 275px;
	margin: 0 auto;
}

#date_credits {
	margin: 0 auto;
	color: white;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 36px;
	position: relative;
	font-weight: 900;
	text-align: center;
}

#links a,
#links b {
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	width: 250px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	white-space: nowrap;
	padding-top: 8px;
}

.contact {
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#social_network_logo {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 20px;
	margin: 60px auto;
	text-align: center;
	width: 190px;
}

#social_network_logo img {
	width: 46px;
	transition: all 0.5s ease-in-out;
}

#social_network_logo img:hover {
	cursor: pointer;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}


.paralelogramo1 {
	width: 76px;
	height: 3px;
	background-color: #ffffff;
	transform: skew(60deg);
	margin: 0 auto;
}

.paralelogramo2 {
	width: 80px;
	height: 6px;
	background-color: #3d81ce;
	transform: skew(60deg);
	position: relative;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

/* For app */

.background_app {
	background-image: url("../img/back.png");
	height: 200px;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.logo_app {
	position: relative;
	text-align: center;
	width: 1160px;
	margin: 0 auto;
}

#logo_size {
	width: 400px;
	height: auto;
	padding-top: 30px;
}

#date_app {
	width: auto;
	color: #3a408a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	position: relative;
	text-align: center;
	margin: 0 auto;
	padding-top: 30px;
	left: -200px;
}

.div-date {
	width: auto;
	color: #3a408a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-weight: bold;
	margin: 60px auto -60px auto;
	text-align: center;
}

.div-date i {
	font-size: 32px;
	vertical-align: -3px;
	margin-right: 6px;
}

.edition_app {
	font-weight: bold;
	font-family: "Roboto", sans-serif;
	text-align: center;
	padding: 7px;
	font-size: 25px;
	margin: 0px auto;
}

.address_app {
	font-family: "Afacad Flux";
	text-align: center;
	font-size: 25px;
	margin: 0 auto;
}

.division_2_app {
	width: 1160px;
	margin: 10px 35px;
	border: 1px solid #cdc6c665;
	border-radius: 2px;
	position: relative;
	margin: 50px auto;
}

.schedule_app {
	position: relative;
}

.timeline_app {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
	margin: 50px auto;
	width: 1160px;
	align-items: center;
}

#title_2_app,
#person {
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 40px;
	text-align: center;
	padding-top: 30px;
	color: #f8853e;
	padding-bottom: 20px;
	width: 100%;
	margin: 0 auto;
}

#box_credits_app {
	width: 100%;
	background-size: cover;
	background-color: #3a408a;
	height: 350px;
	z-index: 1;
}

#credits_app {
	width: 1160px;
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0px;
	padding-top: 120px;
	text-align: center;
}

#logo_credits_app {
	width: 330px;
	margin: 0 auto;
}

.contact_app {
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* For Gifts APP*/

.size-img {
	width: 180px;
}

.span_pontos {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 60px;
	font-weight: 900;
	color: #222;
	display: block;
}

.span_pontos_require {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-weight: 900;
	color: #222;
}

.span_stock {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 32px;
	font-weight: 900;
	color: #3a408a;
}

.gradient-box {
	width: 100px;
	height: 100px;
	background: linear-gradient(135deg, transparent, #f8853e);
}

.box_gifts {
	width: 1160px;
	margin: 60px auto 30px auto;
	padding: 10px 30px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.div-button {
	width: 100%;
	height: 50px;
	padding-right: 92px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.button-rescue, 
.button-done,
.button-cancel,
.button-out, 
.button-insufficient,
.button-delivered {
	height: 40px;
	text-align: right;
	line-height: 40px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: 900;
	text-transform: uppercase;
	float: right;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.button-rescue i, 
.button-done i,
.button-cancel i,
.button-out i, 
.button-insufficient i,
.button-delivered i {
	font-size: 32px;
	vertical-align: -6px;
}

.button-rescue { color: #3ba468; cursor: pointer; }
.button-done { color: #3a408a; cursor: pointer; }
.button-cancel { color: #c50202; cursor: pointer; margin-right: 45px; }
.button-out { color: #C0C0C0; }
.button-insufficient { color: #C0C0C0; }
.button-delivered { color: #c50202; }

.button-done .icon-qrcode {
	font-size: 36px;
	vertical-align: -6px;
	color: #1FB6FF !important;
	margin-left: 30px;
}

.container_gifts {
	width: auto;
	display: grid;
	grid-template-columns: 180px 1fr;
	grid-gap: 40px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#box_person {
	width: 1160px;
	margin: 0 auto;
	text-align: center;
}

#points, #mandatory_stands {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 18px;
	display: inline-block;
	width: 140px;
	margin: 0 auto;
	vertical-align: top;
	text-align: center;
}

.gifts {
	width: auto;
  	height: 166px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

#title_gift {
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 28px;
	font-weight: bold;
	color: #3a408a;
	white-space: nowrap;
	margin: 0 auto;
	height: 28px;
	line-height: 28px;
}

#description_gift {
	font-family: 'Roboto', Verdana, Tahoma, sans-serif;
	font-size: 18px;
	line-height: 24px;
	color: #222;
	padding: 15px 25px 10px 0;
	text-align: justify;
}

#point_require {
	width: 1160px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 180px 150px 220px 1fr;
	grid-gap: 40px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#point_gift, #stand_gift {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 14px;
	display: inline-block;
	padding-bottom: 10px;
	text-align: left;
}

#point_stock {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 18px;
	display: inline-block;
	padding-bottom: 10px;
	text-align: left;
}

#active {
	width: 600px;
	margin: 0 auto;
}

#active>div {
	text-align: center;
}

#active .icon {
	padding: 80px 10px 50px 10px;
}

#active .icon i {
	font-size: 120px;
	color: #13ce66;
}

#active .title {
	width: auto;
	text-align: center;
	font-size: 42px;
	font-family: Oswald;
	font-weight: bold;
	color: var(--color-title);
	padding: 0 20px 10px 20px;
}

#active .subtitle {
	width: auto;
	text-align: center;
	width: auto;
	text-align: center;
	font-size: 28px;
	list-style: 32px;
	font-family: Oswald;
	color: var(--color-text);
	padding: 80px 20px 120px 20px;
}

.text-load {
	font-family: var(--font-satisfy);
	text-align: center;
	font-size: 26px;
	color: var(--color-text);
	text-decoration: none;
	text-shadow: 1px 1px 0 #FFF;
	position: absolute;
	width: 100%;
	height: 40px;
	line-height: 40px;
	top: 50%;
	margin-top: -40px;
	transform: rotate(-6deg);
}

.text-load .point-one {
	margin-left: 5px;
	font-size: 32px;
	animation: text-point 1s infinite 0s ease-in-out;
}

.text-load .point-two {
	font-size: 32px;
	animation: text-point 2s infinite 0s ease-in-out;
}

.text-load .point-three {
	font-size: 32px;
	animation: text-point 3s infinite 0s ease-in-out;
}

.text-load i {
	font-size: 34px;
	vertical-align: -10px;
}

.delivery-qrcode-close {
	padding: 15px 20px 0 20px;
	text-align: right;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.delivery-qrcode-close i {
	font-size: 34px;
}

.delivery-qrcode-close i:hover {
	cursor: pointer;
}

.delivery-qrcode-img {
	width: auto;
	text-align: center;
	padding: 0 15px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.delivery-qrcode-img img {
	border: 0;
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/* For Desktop View */
@media screen and (max-width: 1280px) {

	#year {
		margin: 260px auto;
	}

	#title {
		width: auto;
		left: 0;
		top: 388px;
	}

	.circle {
		margin: -150px auto;
	}
}

/* For Tablet View */
@media screen and (min-device-width: 720px) and (max-device-width: 1024px) {}

/* For Mobile Portrait View */
@media screen and (max-device-width: 480px) and (orientation: portrait) {

	body {
		flex-direction: column;
	}

	.background {
		height: 900px;
	}

	.logo {
		margin: 0px auto;
		width: auto;
		padding-top: 40px;
	}

	#year {
		margin: -60px auto;
		width: auto;
	}

	#title {
		margin: 0px auto;
		padding-top: 10px;
		top: 120px;
		left: 0px;
	}

	.circle {
		margin: 280px auto;
		float: none;
	}

	.backleft {
		display: none;
	}

	.backright {
		display: none;
	}

	.ticket {
		grid-template-columns: 1fr;
		width: auto;
	}

	#paranapetro {
		margin: 0 auto;
		float: none;
	}

	.edition {
		width: auto;
		text-align: center;
		margin: 0 auto;
		left: 0;
		top: 0;
		padding: 20px;
	}

	.address {
		width: auto;
		text-align: center;
		margin: 0 auto;
		left: 0;
		top: 0;
		padding: 30px;
	}

	.button {
		float: none;
		margin: 40px auto;
	}

	.range {
		height: auto;
	}

	.paralelogramo1 {
		margin: 20px auto;
	}

	.container_range {
		grid-template-columns: 1fr 1fr;
		grid-gap: 55px;
		width: auto;
	}

	.container_range > div:last-child {
		grid-column-start: 1;
		grid-column-end: 3;
	}

	.timeline {
		width: auto;
	}

	.hour {
		left: 200px;
	}

	.point {
		right: -50px;
	}

	.line {
		right: 190px;
		max-width: 460px;
	}

	.sponsors {
		width: 100%;
	}

	.container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 10px;
		width: 80%;
		padding: 30px;
		margin: 0 auto;
	}

	.item {
		margin: 0 0;
	}

	.box_register {
		width: 80%;
		height: 430px;
	}

	#title_box {
		position: relative;
		left: 0;
		top: 18px;
		margin: 0 auto;
		text-align: center;
	}

	#mini_text {
		left: 0;
		top: 18px;
		margin: 0 auto;
		text-align: center;
		position: relative;
		width: auto;
	}

	#input_container {
		grid-template-columns: 1fr;
		top: 40px;
	}

	#text_box_register {
		left: 0;
		top: 50px;
		margin: 0 auto;
	}

	#box_credits {
		width: auto;
	}

	#credits {
		width: 80%;
		grid-template-columns: 1fr;
	}

	#links,
	.contact {
		display: none;
	}

	/* Foor Mobile APP*/

	.logo_app {
		width: auto;
	}

	.division_2_app {
		width: 80%;
	}

	#credits_app {
		width: 80%;
		grid-template-columns: 1fr;
		column-gap: 0px;
		padding-top: 50px;
	}

	.contact_app {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding-top: 40px;
	}

	/* For Mobile APP Gifts*/

	.background_app {
		display: none;
	}

	.box_gifts {
		width: auto;
	}

	#box_person {
		width: auto;
	}

	.division_2 {
		width: auto;
	}

	.container_gifts {
		width: 98%;
        grid-template-columns: 1fr;
        margin: 0 auto;
	}

	.gifts {
		width: 180px;
		height: 166px;
		margin: 0 auto;
	}

	#title_gift {
		text-align: center;
		font-size: 30px;
	}

	#description_gift {
		font-size: 12px;
		padding: 15px 25px 10px 25px;
	}

	#point_require {
		width: 92%;
		margin: 20px auto 0 auto;
		grid-template-columns: 1fr 1.6fr;
		grid-gap: 10px;
	}

	#point_require > div:first-child {
		display: none;
	}

	#point_require > div:last-child {
		grid-column-start: 1;
		grid-column-end: 3;
	}

	.div-button {
		width: 90%;
		height: 120px;
		margin: 0 auto;
		padding: 0;
	}

	#point_gift {
		text-align: left;
	}

	#stand_gift {
		text-align: right;
	}

	.button-rescue, .button-done, .button-cancel, .button-out, .button-insufficient, .button-delivered {
        text-align: center;
        font-size: 40px;
        float: none;
        padding-top: 50px;
	}

	.button-done {
		float: right;
	}

	.button-cancel {
		float: left;
	}

	.button-rescue i, .button-done i, .button-cancel i, .button-out i, .button-insufficient i, .button-delivered i {
		font-size: 46px;
	}

	.button-done .icon-qrcode {
		font-size: 50px;
	}
}

/* For Mobile Landscape View */
@media screen and (max-device-width: 640px) and (orientation: landscape) {}

/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 640px) {}