* {
	box-sizing: border-box;
}

::selection {
	background-color: rgba(255, 255, 255, .93);
  color: rgba(27, 7, 244, .93);
  opacity: 1;
}

body {
	background-color: #1B07F4;
	font-family: "ABC-Diatype-Regular", Helvetica, sans-serif;
	margin: auto auto;
}

.update-blink {
		animation: blinker 4.5s linear infinite;
        }

        @keyframes blinker {
            50% {
                opacity: .1;
            }
}

.sidebar-container {
	padding-top: 0vw;
	padding-left: 1vw;
}

.updates-container {
	padding-top: 0vw;
}

.sidebar {
  position: fixed;
  width: 16vw;
  height: 100vh;
  overflow-y: auto; /* Enable scrolling if content exceeds height */
  padding-top: 6vw;
}

.sidebar-link, .sidebar-nolink {
	font-size: 1.5vw;
	font-family: "ABC-Mono-Light", Helvetica, sans-serif;
	display: flex;
	text-align: left;
	padding-bottom: .05vw;
	margin-right: 2vw;
	text-decoration: none;
	letter-spacing: .1vw;
	line-height: .5vw;
	color: #eee;
	opacity: .5;
	transition: opacity 0.25s ease;
	transition: padding-top 0.25s ease;
}

.sidebar-nolink {
	opacity: 1;
}

.sidebar-link:hover {
  opacity: 1;
}

.spotlight-title, .spotlight-dek {
	color: #eee;
	padding-left: 16.2vw;
}

.sidebar-link.focused {
  opacity: 1;
  padding-top: .5vw;
  padding-bottom: .5vw;
}

.main-border {
	border-bottom: .2vw solid #eee;
	margin-bottom: 3vw;
}

.main-content {
	font-family: "ABC-Diatype-Light", Helvetica, sans-serif;	
	font-size: 1vw;
	display: block;
	text-align: left;
	padding-bottom: .1vw;
	margin-top: 2vw;
	margin-bottom: .5vw;
	text-decoration: none;
	letter-spacing: .08vw;
	color: #EEEEEE;
  margin-left: 16vw;
  width: 60vw;
}

.leader-updates {
	font-family: "ABC-Diatype-Regular", Helvetica, sans-serif;	
	font-size: 2.85vw;
	letter-spacing: .04vw;
	line-height: 2.85vw;
	text-transform: uppercase;
}

.leader-updates a, .leader-updates a:visited {
	border-bottom: .2vw solid #08030D;
	padding-bottom: .01vw;
	padding-right: .25vw;
	padding-left: .25vw;
	color: #08030D;
	text-decoration: none;
}

.leader-updates a:hover, .leader-updates a:hover:visited {
	background-color: #08030D;
	color: #fff;
}

.paragraph-text-wrapper-updates, .paragraph-text-wrapper-updates-last {
	width: 45vw;
	margin-bottom: 0vw;
}

.paragraph-text-updates {
	font-size: 1.3vw;
}

.paragraph-text-updates a, .paragraph-text-updates a visited {
	color: #eee;
	border-bottom: .1vw solid rgba(255,255,255,1);
	text-decoration: none;
	padding-left: .1vw;
	padding-right: .1vw;
}

.paragraph-text-updates a:hover, .paragraph-text-updates a:hover visited {
	color: #1B07F4;
	border-bottom: .13vw solid #eee;
	text-decoration: none;
	background-color: #eee;
}

.section-details {
	width: 45vw;
	padding-top: 4.75vw;
}

.main-container-launch {
	margin: auto auto;
	padding-left: 2vw;
}

.navigation-container {
	position: fixed;
	background-color: rgba(27, 7, 244, .93);
	padding-left: 2vw;
	width: 100%;
	z-index: 1;
}

.main-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: none;
}

.main-li {
  float: left;
}

.main-li a {
	font-family: "ABC-Diatype-Regular", Helvetica, sans-serif;	
	font-size: 1vw;
	display: block;
	text-align: center;
	padding-bottom: .05vw;
	margin-right: 2vw;
	margin-top: 1vw;
	margin-bottom: .5vw;
	text-decoration: none;
	letter-spacing: .08vw;
	border-bottom: .2vw solid rgba(27, 7, 244, .93);
	color: #EEEEEE;
}

.main-li a:hover  {
	background-color: none;
	border-bottom: .15vw solid #EEEEEE;
}

.main-launch {
	font-family: "ABC-Diatype-Regular", Helvetica, sans-serif;
	font-size: 1vw;
	margin-left: 0vw;
	padding-top: 10vw;
	margin-right: 20vw;
	letter-spacing: .08vw;
	color: #EEEEEE;
}

.launch-headline {
	font-family: "ABC-Diatype-Regular", Helvetica, sans-serif;	
	font-size: 4vw;
	letter-spacing: .1vw;
	line-height: 4vw;
	text-transform: uppercase;
}

.launch-dek-wrapper {
	padding-top: 4vw;
	margin-right: 30vw;
}

.launch-dek {
	font-size: 2vw;
	letter-spacing: .04vw;
	line-height: 2.75vw;
	color: #EEEEEE;
}

.launch-dek a, .launch-dek a:visited {
	border-bottom: .2vw solid #EEEEEE;
	padding-bottom: .01vw;
	padding-right: .25vw;
	padding-left: .25vw;
	color: #EEEEEE;
	text-decoration: none;
}

.launch-dek a:hover, .launch-dek a:hover:visited {
	background-color: #EEEEEE;
	color: #08030D;
}

.fodder-wrapper {
	padding-left: 16vw;
	padding-top: 2vw;
	position: relative;
	margin-bottom: 1vw;
}

.fodder {
	font-family: "ABC-Diatype-Regular", Helvetica, sans-serif;	
	font-size: 1vw;
	color: #EEEEEE;
	letter-spacing: .08vw;
}

#yes-mobeel, .yes-mobeel {
	display: none;
}

#no-mobeel, .no-mobeel {
	display: block;
}

.date-01 {
	float: left;
	width: 45vw;
	margin-top: .75vw;
	margin-bottom: .75vw;
	color: #eee;
	opacity: 1;
	font-family: "ABC-Mono-Light", Helvetica, sans-serif;
	font-size: 1.5vw;
	line-height: 1.3em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.leader-updates, .paragraph-text-wrapper-updates, .paragraph-text-wrapper-updates-last, .spotlight-lockup-wrapper {
	padding-left: .6vw;
}

.date-01 {
	padding-left: .75vw;
}

#grid-1 {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	counter-reset: grid;
	width: 45vw;
}

.item-1 {
	aspect-ratio: 20 / 13;
	background: none;
  border-radius: 0vw;
	background-color: #ebebeb;
}

.item-2 {
	aspect-ratio: 20 / 16;
	background: none;
  border-radius: 0vw;
	background-color: #ebebeb;
}

#grid-2 {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	counter-reset: grid;
	width: 59vw;
}

.item-3 {
	aspect-ratio: 1 / 1;
	background: none;
  border-radius: 0vw;
	background-color: #ebebeb;
	margin-right: 1vw;
}

#grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 3fr);
	counter-reset: grid;
	width: 90vw;
}

.item-4 {
	aspect-ratio: 3 / 4.1;
	background: none;
  border-radius: 2vw;
	background-color: #ebebeb;
	margin-right: 1vw;
}

#grid-4 {
	display: grid;
	grid-template-columns: repeat(3, 3fr);
	counter-reset: grid;
	width: 90vw;
}

#img001-updates {
	background: url(https://clakka.s3.us-west-2.amazonaws.com/assets/updates/clakka-testflight-02.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
}

#img002-updates {
	background: url(https://clakka.s3.us-west-2.amazonaws.com/assets/updates/clakka-behind-the-scenes-01.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
}


#img003-updates {
	background: url(https://clakka.s3.us-west-2.amazonaws.com/assets/updates/saville.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
}

#img004-updates {
	background: url(https://clakka.s3.us-west-2.amazonaws.com/assets/spotlight/ss24-01-wyatt/ss24-wyatt-08.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
}

#img005-updates {
	background: url(https://clakka.s3.us-west-2.amazonaws.com/assets/updates/sr-4-01.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
}

#img006-updates {
	background: url(https://clakka.s3.us-west-2.amazonaws.com/assets/updates/clakka-community-01.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
}

#img007-updates {
	background: url(https://clakka.s3.us-west-2.amazonaws.com/assets/updates/clakka-community-02.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
}

#img008-updates {
	background: url(https://clakka.s3.us-west-2.amazonaws.com/assets/updates/clakka-community-03.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
}


/* Mobeel
====================================================================================================== */


@media 
only screen and (max-width: 768px)

{	
	body {

  }

	.navigation-container {
			position: fixed;
			padding-left: 2vw;
			width: 100%;
			z-index: 1;
			border-bottom: .4vw solid #EEE;
	}

	.updates {
		margin-right: 3vw;
	}

	.spotlight-title, .spotlight-dek {
		color: #eee;
		padding-left: 0vw;
	}

	.leader-updates {
			font-size: 8vw;
			letter-spacing: .2vw;
			line-height: 7vw;
	}

	.paragraph-text-wrapper-updates {
      padding-top: 4vw;
      padding-bottom: 4vw;
  }

	.paragraph-text-updates {
		width: 86vw;
		font-size: 4vw;
		letter-spacing: .05vw;
		font-family: "ABC-Diatype-Regular", Helvetica, sans-serif;
	}

	.item-1 {
		border-radius: 0vw;
	}

	.main-content {
		margin-left: 0vw;
		width: 96vw;
		padding-top: 0vw;
		margin-top: 0vw;
		padding-bottom: 15vw;
	}

	.section-details {
		width: 96vw;
		padding-top: 5vw;
	}

	.main-border {
		border-bottom: .4vw solid #eee;
		padding-top: 8vw;
		margin-bottom: 10vw;
	}

	.paragraph-text-wrapper-updates {
	  width: 98vw;
	  margin-bottom: 0vw;
	  padding-top: 4vw;
	  padding-bottom: 0vw;
	}

	.paragraph-text-wrapper-updates-last {
	  width: 98vw;
	  margin-bottom: 0vw;
	  padding-top: 4vw;
	  padding-bottom: 20vw;
	}


	#grid-1{
		width: 96vw;
	}

	.main-ul {
		margin: 0;
		padding: 0;
	}

	.main-li {
	}

	.main-li a {
		font-size: 2.25vw;
		text-align: center;
		padding-bottom: .05vw;
		margin-right: 6vw;
		margin-top: 2vw;
		margin-bottom: 1.25vw;
		letter-spacing: .16vw;
		border-bottom: .2vw solid rgba(0, 0, 0, 0);
		text-transform: uppercase;
	}

	.main-li a:hover {
		background-color: none;
		border-bottom: .2vw solid rgba(0,0,0,0);
	}

	#socials {
		margin-right: -3.9vw;
	}

	.main-launch {
		padding-top: 10vw;
		margin-right: 10vw;
		letter-spacing: .08vw;
		color: #EEEEEE;
	}

	.date-01 {
		font-family: "ABC-Diatype-Regular", Helvetica, sans-serif;
		font-size: 4.25vw;
		letter-spacing: .04vw;
		padding-top: 4vw;
		padding-bottom: 4vw;
		width: 96vw;
	}

	.main-container-launch {
		margin: auto auto;
		padding-top: 10vw;
		padding-left: 2vw;
	}

	.images-wrapper {
		margin-bottom: 4vw;
	}

	.launch-headline {
		font-size: 8vw;
		letter-spacing: .2vw;
		line-height: 7vw;
	}

	#no-mobeel, .no-mobeel {
		display: none;
	}

	#yes-mobeel, .yes-mobeel {
		display: block;
	}

	.launch-dek-wrapper {
		padding-top: 8vw;
		margin-right: 0vw;
	}

	.launch-dek {
		font-size: 4.25vw;
		letter-spacing: .04vw;
		line-height: 5vw;
		color: #EEEEEE;
	}

	.launch-dek a, .launch-dek a:visited {
	}

	.launch-dek a:hover, .launch-dek a:hover:visited {
	}


	.fodder-wrapper {
		padding-left: 0vw;
		bottom: 0;
		position: relative;
		margin-bottom: 1vw;
	}

	.fodder {
		font-family: "ABC-Diatype-Regular", Helvetica, sans-serif;	
		font-size: 2.25vw;
		letter-spacing: .08vw;
	}

}