@font-face {
	font-family: "ATTAleckSans_W_Rg";
	src: url("../fonts/ATTAleckSans/EOT/ATTAleckSans_W_Rg.eot");
	src: url("../fonts/ATTAleckSans/WOFF/ATTAleckSans_W_Rg.woff") format("woff"), url("../fonts/ATTAleckSans/WOFF2/ATTAleckSans_W_Rg.woff2") format("woff2"), url("../fonts/ATTAleckSans/TTF/ATTAleckSans_W_Rg.ttf") format("truetype"), url("../fonts/ATTAleckSans/SVG/ATTAleckSans_W_Rg.svg#filename") format("svg");
}
@font-face {
	font-family: "ATTAleckSans_W_Md";
	src: url("../fonts/ATTAleckSans/EOT/ATTAleckSans_W_Md.eot");
	src: url("../fonts/ATTAleckSans/WOFF/ATTAleckSans_W_Md.woff") format("woff"), url("../fonts/ATTAleckSans/WOFF2/ATTAleckSans_W_Md.woff2") format("woff2"), url("../fonts/ATTAleckSans/TTF/ATTAleckSans_W_Md.ttf") format("truetype"), url("../fonts/ATTAleckSans/SVG/ATTAleckSans_W_Md.svg#filename") format("svg");
}
@font-face {
	font-family: "ATTAleckSans_W_Bd";
	src: url("../fonts/ATTAleckSans/EOT/ATTAleckSans_W_Bd.eot");
	src: url("../fonts/ATTAleckSans/WOFF/ATTAleckSans_W_Bd.woff") format("woff"), url("../fonts/ATTAleckSans/WOFF2/ATTAleckSans_W_Bd.woff2") format("woff2"), url("../fonts/ATTAleckSans/TTF/ATTAleckSans_W_Bd.ttf") format("truetype"), url("../fonts/ATTAleckSans/SVG/ATTAleckSans_W_Bd.svg#filename") format("svg");
}
:root {
	--black: #000000;
	--cod-gray: #0b0b0b;
	--roti: #bfa244;
	--white: #ffffff;
	--att-lt-blue: #51A8F9;
	--att-dk-blue: #004ab8 /*#002452*/ ;
	--att-md-blue: #0c86dc ;
	--font-size-xxs: calc(6px + 6 * ((100vw - 320px) / 1920));
	--font-size-xs: calc(8px + 6 * ((100vw - 320px) / 1920));
	--font-size-s: calc(14px + 6 * ((100vw - 320px) / 1920));
	--font-size-m: calc(18px + 6 * ((100vw - 320px) / 1920));
	--font-size-l: calc(30px + 6 * ((100vw - 320px) / 1600));
	--font-size-xl: calc(38px + 6 * ((100vw - 320px) / 1600));
	--font-size-xxl: calc(46px + 6 * ((100vw - 320px) / 1600));
	--font-size-xxxl: calc(58px + 6 * ((100vw - 320px) / 1600));
	--font-size-xxxxl: calc(66px + 6 * ((100vw - 320px) / 1600));
	--font-family-att-aleck-sans-reg: "ATTAleckSans_W_Rg", Helvetica;
	--font-family-att-aleck-sans-md: "ATTAleckSans_W_Md", Helvetica;
	--font-family-att-aleck-sans-bd: "ATTAleckSans_W_Bd", Helvetica;
	--font-family-copperplate-bold: "Copperplate-Bold", Helvetica;
	--app-width: 3840px;
	--app-height: 2160px;
}
html {
	scroll-behavior: smooth;
	position: relative;
	min-height: 100%;
	margin: 0;
	padding: 0;
	/*background-color: rgba(148,4,225,1.00);*/
	/*background-color: rgba(123, 144, 160, 0.67);*/
	/*background-color: rgba(234, 162, 16, 0.59);*/
	/*background-color: rgba(151, 25, 27, 0.48);*/
}
html {
	font-size: 32px;
	-webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 320px) {
	html {
		font-size: calc(16px + 6 * ((100vw - 320px) / 1600));
	}
}
@media screen and (min-width: 3840px) {
	html {
		font-size: 44px;
	}
}
body {
	position: relative;
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	font-family: var(--font-family-att-aleck-sans-reg);

	/* background-color: rgb(130,130,130); */
}
* {
	box-sizing: border-box;
}
.attalecksans-bold {
	font-family: var(--font-family-att-aleck-sans-bd);
	font-style: normal;
	font-weight: 700;
}
.attalecksans-medium {
	font-family: var(--font-family-att-aleck-sans-md);
	font-style: normal;
	font-weight: 700;
}
.attalecksans-regular {
	font-family: var(--font-family-att-aleck-sans-reg);
	font-style: normal;
	font-weight: 700;
}
.clwhite {
	color: var(--white);
}
.clblack {
	color: var(--black);
}
.clgray {
	color: var(--cod-gray);
}
.clatt-ltblue {
	color: var(--att-lt-blue) !important;
}
.clatt-dkblue {
	color: var(--att-dk-blue) !important;
}
.fs-xxxl {
	font-size: var(--font-size-xxxl);
}
.fs-xxl {
	font-size: var(--font-size-xxl);
}
.fs-xl {
	font-size: var(--font-size-xl);
}
.fs-l {
	font-size: var(--font-size-l);
	letter-spacing: 0.02rem;
}
.fs-l sup {
	font-size: var(--font-size-xs);
}
.fs-m {
	font-size: var(--font-size-m);
}
.fs-m sup {
	font-size: var(--font-size-xxs);
}
.fs-m em {
	font-size: var(--font-size-xs);
	font-style: italic;
	display: block;
	margin-top: 8px;
}
.fs-s {
	font-size: var(--font-size-s);
}
sup {
    vertical-align: super;
}
.page {
	width: var(--app-width);
	height: var(--app-height);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/*margin: 50px;*/
	position: relative;
}
#background-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -100;
}
#background-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	/* background-image: url("/assets/images/bg.png");
	background-size: cover; */
}
.main-container {
	width: calc(var(--app-width)/2);
	height: var(--app-height);
	z-index: 9;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: all 1s ease;
	position: absolute;
	left: 0;
	top: 0;
}
.tag-container {
	width: 100%;
	height: 360px !important;
	z-index: 9;
	display: flex;
}
.bgc1 {
	background-color: rgba(35, 54, 215, 0.70);
}
.bgc2 {
	background-color: rgba(177, 9, 11, 0.70);
}
.bgc3 {
	background-color: rgba(157, 92, 11, 0.70);
}
.bgc4 {
	background-color: rgba(17, 92, 11, 0.70);
}
.bgc5 {
	background-color: rgba(180, 54, 201, 0.70);
}
.bgc6 {
	background-color: rgba(217, 169, 67, 0.25);
}
.device {
	display: flex;
	justify-content: flex-start;
	flex-flow: row nowrap;
	width: 50%;
	position: relative;
}
.device-prices {
	align-items: flex-start;
	width: 72%;
	overflow: hidden;
	margin-right: 12px;
	margin-top: 24px;
}
.device-images {
	align-items: flex-start;
	width: 25%;
	overflow: hidden;
	/* margin-right: 12px;
	margin-top: 12px; 
	background-color: #51A8F9;*/
}
.samsung {
	background-color: black;
}
.apple  {
	background-color: white;
}
.smaller {
	margin-right: 0px;
}
.device-prices-outer th {
	text-align: left;
	padding-bottom: 20px;
	border-width: 3px;
	border-style: solid;
	border-color: transparent;
	border-bottom-color: var(--att-lt-blue);
}
.samsung .device-prices-outer th {
	color: var(--white);
}
.device-prices-outer {
	width: 100%;
	opacity: 1;
}
.show-it{	
	/*transform: translateX(-5em);*/
	opacity: 1;
}
.device-prices-inner {
	width: 100%;
}
.device-prices-outer td {
	padding: 4px 10px 10px 0;
}
.samsung .device-prices-outer td {
	color: var(--white);
}
.device-prices-outer td.separator {
	border-bottom: var(--att-lt-blue) solid 0.05rem;
}
.device-prices-outer td.separator.noborder {
	padding: 20px 0 30px;
	border-bottom: none;
}
.device-prices-outer td.btn-holder {
	padding: 10px 0 30px;
	text-align: right;
}
.device-prices-inner th {
	padding-bottom: 20px;
	border-bottom: none;
	text-align: center;
}
.samsung .device-prices-inner th {
	color: var(--white);
}
.device-prices-inner td {
	white-space: nowrap;
	padding: 4px 4px;
}
.samsung .device-prices-inner td {
	color: var(--white);
}
.clatt-special-price {
	color: var(--att-dk-blue) !important;
}
.samsung .clatt-special-price {
	color: var(--att-lt-blue) !important;
}
/*.device-prices-inner strong {
		display: inline-block;
	font-size: var(--font-size-s);
	vertical-align: bottom;
	line-height: 5px;
	background-color: aqua;
}*/
.plan-title {
	display: flex;
	flex-wrap: wrap !important;
	align-content: center;
	height: 100%;
}
.product-price {
	display: flex;
	justify-content: center;
}
.decimal-price {
	display: flex;
	flex-direction: column;
	font-size: var(--font-size-xs);
}
.decimal-price dt {
	font-size: var(--font-size-xxs);
}
.hidden{
	visibility: hidden;
}
.nodisplay{
	display: none;
}
.qr-code {
	margin: 20px 115px;
}
.qr-code img{
	width: 140px;
}

#test-text{
	position: absolute;
	top: 10px;
	left: 970px;
	color:cornsilk;
	background-color: var(--black);
}

.opacity-0 {
	opacity: 0;
}




@keyframes fadeout {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.fade-out {
	animation: fadeout 1s ease forwards;
}

.fade-in {
	animation: fadein 1s ease forwards;
}



/* slideshow */

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.slide{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.active{
    opacity: 1;
    z-index: 2;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/*Circle Animation for Legal*/
.legal-container{	
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
  }
  
  .circle {
	border-radius: 50%;
	background-color: deepskyblue;
	width: 150px;
	height: 150px;
	position: absolute;
	opacity: 0;
	animation: scaleIn 2s normal cubic-bezier(.36, .11, .89, .32);
  }
  @keyframes scaleIn {
  from {
    transform: scale(.5, .5);
    opacity: .5;
  }
  to {
    transform: scale(2.5, 2.5);
    opacity: 0;
  }
}

  .last-circle {
	border-radius: 50%;
	background-color: var(--att-lt-blue) !important;
	width: 150px;
	height: 150px;
	position: absolute;
	opacity: 0;
	animation: scaleInLast 1s normal cubic-bezier(.36, .11, .89, .32);
	animation-fill-mode: forwards;
  }
  @keyframes scaleInLast {
  from {
    transform: scale(.5, .5);
    opacity: 0;
  }
  to {
    transform: scale(100, 100);
    opacity: 1;
  }
}

  .item {
	z-index: 100;
	padding: 0px;
	display: flex;
	align-items: center;
	flex-direction: column;
	align-content: end;
	height: 180px;
  }

  .item img {
	padding-top: 25px;
	width: 280px;
	/* background-color: #bfa244; */
	animation: moveLogo 3s normal;
	opacity: 0;
	animation-fill-mode: forwards;
  } 
  @keyframes moveLogo {
	from {
		transform: scale(.1, .1);
		opacity: .5;
	}
	90% {
		transform: scale(1.5, 1.5);
		opacity: 1;
	} /* ignored */
	to {
		transform: scale(1, 1);
		opacity: 1;
	}
  }

  .item p {
	color: white;
	text-align: center;
	line-height: 0.6rem;
	font-size: var(--font-size-s);
	padding-top: 10px;
	animation: showText 4s normal;
	opacity: 0;
	animation-fill-mode: forwards;
  }
  @keyframes showText {
  from {
    opacity: .1;
  }
  to {
    opacity: 1;
  }
}

  .darker {	
	background-color: var(--att-md-blue) !important;
	z-index: 100;
	padding: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 180px;
	width: 1920px;
	animation: slideDarker 1s normal;
	opacity: 0;
	animation-fill-mode: forwards;
  }
  @keyframes slideDarker {
	from {
	  transform: scale(0);
	  opacity: 0;
	}
	to {
	  transform: scale(1);
	  opacity: 1;
	}
  }

  .darker img {
	width: 480px;
	animation: moveBigLogo 3s normal;
	opacity: 0;
	animation-fill-mode: forwards;
	position: absolute;
	right: 0px;
  } 
  @keyframes moveBigLogo {
	from {
		transform: translateX(0px);
		opacity: .5;
	}
	90% {
		transform: translateX(-310px);
		opacity: 1;
	} /* ignored */
	to {
		transform: translateX(-50%);
		opacity: 1;
	}
  }

  .darker p {
	color: white;
	text-align: center;
	line-height: 1.2rem;
	font-size: var(--font-size-xl);
	animation: showBigText 4s normal;
	opacity: 0;
	animation-fill-mode: forwards;
  }
  @keyframes showBigText {
	from {
		transform: translateX(-310px);
		opacity: 0;
	} 
	to {
		transform: translateX(0);
		opacity: 1;
	}
  }