@media screen and (min-width: 0px) and (max-width: 767px) {

/* INDEX MIDDLE STYLES*/
.section2 .index_middle{	
	box-sizing: border-box;	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	overflow: hidden;
	align-content:flex-end;
	align-items: flex-end;
	height: 100vh;
	width: 100vw;
	/*background-image: url("images/gifs/blagol_index_bg.gif");*/
	background-position-x: 100px;
	background-position-y:120px;
	background-repeat: no-repeat;
	background-size: 380px;
}

.section2 .index_middle middle_wrap{
	display: flex;
	box-sizing: border-box;
	flex-wrap: wrap;
	flex-direction: row;
	align-content:flex-end;
	justify-content:flex-end;
	align-items: center;
	justify-items: flex-end;
	overflow: visible;
	width: 100%;
	height: 100vh;
}	

.section2 .index_middle middle_wrap wrap{
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items:flex-start;
	height: 100vh;
	padding: 20px;
}

.section2 .index_middle middle_wrap wrap left{	
	position: relative;	
	display: flex;
	flex-wrap: wrap;	
	box-sizing: border-box;
	overflow: visible;	
	width: 100%;;
	padding: 0;
	margin: 0 0 40px 0 !important;
	order: 2;
}

.section2 .index_middle middle_wrap wrap left .introText{	
	display: flex;
	flex-wrap: wrap;	
	box-sizing: border-box;
	overflow: visible;	
	width: 100%;
	padding: 0;
	margin: 0;		
	justify-content: right;
	text-align: right;
}

.section2 .index_middle middle_wrap wrap left .introText .block{	
	background-color: var(--body-bg);
}

.section2 .index_middle middle_wrap wrap left .introText #introText1,
.section2 .index_middle middle_wrap wrap left .introText #introText2,
.section2 .index_middle middle_wrap wrap left .introText #introText3,
.section2 .index_middle middle_wrap wrap left .introText #introText4,
.section2 .index_middle middle_wrap wrap left .introText #introText5{	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;	
	box-sizing: border-box;
	overflow: visible;	
	width: 100%;
	padding: 0;
	margin: 0;	
	font-family: 'SpaceGrotesk-Lite' !important;
    text-transform: uppercase;
    font-size: 36px;
	font-weight: 300;
	letter-spacing: 0.72px;
	line-height: 39.6px;
}

.section2 .index_middle middle_wrap wrap left .introText #introText1{
	display:grid;
	text-align: right;
	justify-self: right;	
}

.section2 .index_middle middle_wrap wrap left .introText #introText2 {
	/*background: linear-gradient(to right, red 0%, red 100%);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: left 50%;*/
  }


/* Container for animated text blocks */
.section2 .index_middle middle_wrap wrap left .introText #introText2 p {
	display: flex;
	flex-direction: row;
	flex-direction: column;
  	gap: 0.5em;
	flex-wrap: nowrap;	
	box-sizing: border-box;
    width: auto;
	background-color: var(--body-bg) !important;
	color: var(--body-color);
	margin: 0;
	padding: 0;
	position: relative;
  	min-height: 2em; /* Prevent collapse when blocks are hidden */
}

/* ============================================
   INTRO TEXT ANIMATION STYLES
   ============================================ */
   .section2 .index_middle middle_wrap wrap left #introText2_wrap, .section2 .index_middle middle_wrap wrap left #introText3_wrap{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	/*width: 100%;*/
	font-family: 'SpaceGrotesk-Lite' !important;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 0.72px;
    line-height: 39.6px;
	justify-content: right;
	text-align: right;
   }

   .section2 .index_middle middle_wrap wrap left #introText2_wrap #introText2{
	margin: 0 0 0 12px;
   }

   .section2 .index_middle middle_wrap wrap left #introText3_wrap #introText3{
	margin: 0 0 0 12px;
   }

	.section2 .index_middle middle_wrap wrap left #introText2, .section2 .index_middle middle_wrap wrap left #introText3{
    display:inline-flex;
    align-items:center;
    justify-content:right;
    overflow:hidden;
	user-select:none;
	text-align: right;
	display:grid;
	text-align: right !important;
}

.scramble-char{
    display:inline-block;
}

.scramble-red{
    color:#BA0B0B;
}

.scramble-black{
    color: var(--body-color);
}

.locked{
    color:#BA0B0B;
}

.section2 .index_middle middle_wrap wrap left .introText #introText4,
.section2 .index_middle middle_wrap wrap left .introText #introText5{
	display:grid;
	text-align: right !important;
}

.section2 .index_middle middle_wrap wrap left .introText #introText5{	
	align-self: flex-start;
	justify-self: right;
	text-align: right !important;
	background: linear-gradient(135deg, #BA0B0B 0%, #BA0B0B 50%, #F00000 100%);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}


.section2 .index_middle middle_wrap wrap left h2{	
	flex-direction: row;
	flex-wrap: wrap;
	text-align: right;	
	box-sizing: border-box;
	font-family: 'SpaceGrotesk-Lite' !important;
    text-transform: uppercase;
    font-size: 36px;
	font-weight: 300;
	letter-spacing: 0.72px;
	line-height: 39.6px;
	margin:0px;	
	color: var(--icon-fill);
}

	
	/* Center */
.section2 .index_middle centre{
	display: flex;
	position: relative;
	box-sizing: border-box;
	overflow: visible;	
	justify-content: center;
	flex-wrap: nowrap;
	margin: auto;
	width: 200px;
	height: 10px;
	bottom: -50px;
	border-radius: 8px;
	/*background-color: #D7DBD6;
	background-image: url(images/svg/scroll_up.svg);
	background-repeat: no-repeat;
	background-position-x: center;
	background-size:contain;
	animation: fade-in-main-content 4s .2s ease-in forwards;
	-webkit-animation: fade-in-main-content 4s .2s ease-in forwards;
	-moz-animation: fade-in-main-content 4s .2s ease-in forwards;*/
}	

.section2 .index_middle centre p{
	display: flex;
	box-sizing: border-box;
	overflow: hidden;
	justify-content: center;	
	align-self: center;
	font-family: 'SpaceGrotesk-Lite' !important;font-size: 14px;	
	font-weight: 200;
}	

	/* */
.section2 .index_middle wrap right{	
	/*margin: 0 0 40px 0;
	position: relative;
	top: 30px;*/
	display: flex !important;
	box-sizing: border-box;
	overflow: visible;
	flex-wrap: nowrap;
	width: 100%;
	order: 1;
}

.section2 .index_middle wrap right img{
	display: flex;
	box-sizing: border-box;
	width: 42%;
	padding: 20px 20px 0 20px;
	height: auto;
	overflow: hidden;
	background-image: url();
	animation: burgerPop 0.4s ease forwards;
}

.section2 .index_middle wrap right img.big{
	display: none;
	box-sizing: border-box;
	width: 100% !important;
	padding: 0 !important;
	height: auto;
	overflow: hidden;
	background-image: url();
	animation: burgerPop 0.4s ease forwards;
}

.section2 .index_middle wrap right svg.big{
	box-sizing: border-box;
	width: 100% !important;
	padding: 0 !important;
	height: auto;
	overflow: hidden;
	background-image: url();
	animation: burgerPop 0.4s ease forwards;
}

.index_middle middle_wrap wrap right #StretchedLogo{ 
	display: flex;
	flex-direction: row;
	flex-wrap:wrap;
	width: 100%;
}

.index_middle middle_wrap wrap right #StretchedLogo svg{ 
	width: 42px;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.index_middle middle_wrap wrap right #StretchedLogo est_2010{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
}

.index_middle middle_wrap wrap right #StretchedLogo est_2010 p{
	font-family: 'SpaceGrotesk-Lite' !important;
    font-size: 10px;
    font-weight: 300;
    margin: 0;
    padding: 0;
    color: var(--icon-fill-2);
	text-transform: uppercase;
}


.section2 .index_middle wrap right span{
	position: absolute;
	height: 175px;
	width: 218px;
	box-sizing: border-box;		
	overflow: hidden;
	margin: 16px 0 0 0;
	/*background-repeat: no-repeat;
	background-image: url(images/gifs/blagol_index_bg.gif);
	background-size: 320px 100px;
	background-position:  center center;*/
}

	.section2 .index_middle wrap right span img{	
	position: absolute;
	box-sizing: border-box;	
	width: 100%;
	margin: auto;
	/*border: solid 1px #BA0B0B;*/}
	/**/
}


@media screen and (min-width: 768px) and (max-width: 5000px) {

	/* INDEX STYLES*/
	.section2  .index_middle {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: center;
		align-items: center;
		height: 100vh;
		width: 100vw;
		box-sizing: border-box;
		padding: 60px 100px;
		overflow: hidden;
		background-image: url("images/png/blagol_hero3.png");		
		/*background-image: url("images/gifs/blagol_index_bg.gif");
		background-position: center;*/
		background-position-x:800px ;
		background-position-y: 120px;
		background-repeat: no-repeat;
		background-size: 900px;
	}

	.section2 .index_middle wrap left {
		display: inline-flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		width: auto !important;
		margin: 0 0 0 40px;
		position: relative;
		bottom: -50px;
		justify-content: center;
		align-content: center;
		align-items: center;
		justify-items: center;
		height: auto;
		order: 2;
	}

	.section2 .index_middle middle_wrap wrap left .introText{	
	display: flex;
	flex-wrap: wrap;	
	box-sizing: border-box;
	overflow: visible;	
	width: 100%;
	padding: 0;
	margin: 0;		
	justify-content: right;
	text-align: right;
	}

.section2 .index_middle middle_wrap wrap left .introText .block{	
	background-color: var(--body-bg);
}

.section2 .index_middle middle_wrap wrap left .introText #introText1,
.section2 .index_middle middle_wrap wrap left .introText #introText2,
.section2 .index_middle middle_wrap wrap left .introText #introText3,
.section2 .index_middle middle_wrap wrap left .introText #introText4,
.section2 .index_middle middle_wrap wrap left .introText #introText5{	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;	
	box-sizing: border-box;
	overflow: visible;	
	width: 100%;
	padding: 0;
	margin: 0;	
	font-family: 'SpaceGrotesk-Lite' !important;
    text-transform: uppercase;
    font-size: 79.9833px;
	font-weight: 300;
	letter-spacing: 1.59967px;
	line-height: 84.6833px
}

.section2 .index_middle middle_wrap wrap left .introText #introText1{
	display:grid;
	text-align: right;
	justify-self: right;	
}

.section2 .index_middle middle_wrap wrap left .introText #introText2 {
	/*background: linear-gradient(to right, red 0%, red 100%);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: left 50%;*/
  }


/* Container for animated text blocks */
.section2 .index_middle middle_wrap wrap left .introText #introText2 p {
	display: flex;
	flex-direction: row;
	flex-direction: column;
  	gap: 0.5em;
	flex-wrap: nowrap;	
	box-sizing: border-box;
    width: auto;
	background-color: var(--body-bg) !important;
	color: var(--body-color);
	margin: 0;
	padding: 0;
	position: relative;
  	min-height: 2em; /* Prevent collapse when blocks are hidden */
}

/* ============================================
   INTRO TEXT ANIMATION STYLES
   ============================================ */
   .section2 .index_middle middle_wrap wrap left #introText2_wrap, 
   .section2 .index_middle middle_wrap wrap left #introText3_wrap{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	/*width: 100%;*/
	font-family: 'SpaceGrotesk-Lite' !important;
    text-transform: uppercase;
    font-size: 79.9833px;
	font-weight: 300;
	letter-spacing: 1.59967px;
	line-height: 84.6833px;
	justify-content: right;
	text-align: right;
	overflow: visible;
   }

   .section2 .index_middle middle_wrap wrap left #introText2_wrap #introText2{
	margin: 0 0 0 12px;
   }

   .section2 .index_middle middle_wrap wrap left #introText3_wrap #introText3{
	margin: 0 0 0 12px;
   }

	.section2 .index_middle middle_wrap wrap left #introText2, .section2 .index_middle middle_wrap wrap left #introText3{
    display:inline-flex;
    align-items:center;
    justify-content:right;
    overflow:hidden;
	user-select:none;
	text-align: right;
	display:grid;
	text-align: right !important;
}

.scramble-char{
    display:inline-block;
}

.scramble-red{
    color:#BA0B0B;
}

.scramble-black{
    color: var(--body-color);
}

.locked{
    color:#BA0B0B;
}
	
	.section2  .index_middle wrap left h2{
		margin: 0;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 55.9833px;
		font-weight: 300;
		letter-spacing: 4.3667px;
		line-height: 71.4333px;
		text-transform: uppercase;
  	}

	 .section2 .index_middle middle_wrap wrap left h2 strong {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap;
		background: linear-gradient(135deg, #012957 0%, #0c4a9c 50%, #196cdf 100%);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: transparent;
  	}

		.section2 .index_middle middle_wrap wrap left a{
		display: flex;
		width: 100%;
		flex-direction: row;
		flex-wrap: nowrap;
		color: #3D5DAA;
		background: linear-gradient(to right, #3D5DAA, #BA0B0B);
		background-clip: border-box;
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-decoration: none;
		font-size: 20px;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 700;
		margin: 0;
		justify-items: center;
		align-items: center;
	}	

	.section2 .index_middle middle_wrap wrap left a:hover{
		display: flex;
		width: 100%;
		flex-direction: row;
		flex-wrap: nowrap;
		color: #3D5DAA;
		background: linear-gradient(to right,  #BA0B0B, #3D5DAA);
		background-clip: border-box;
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-decoration: none;
		font-size: 20px;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 700;
		margin: 0;
		justify-items: center;
		align-items: center;
	}	


	.section2 .index_middle middle_wrap wrap left a p{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.section2 .index_middle middle_wrap wrap left a p span{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		padding: 0 0 0 40px;
	}
	
	.section2  .index_middle wrap left links {
		box-sizing: border-box;
		display: flex;
		overflow: hidden;
		flex-direction: row;
		width: 70%;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.section2 .index_middle wrap right {
		display: inline-flex;
		box-sizing: border-box;
		overflow:visible;
		justify-content: center;
		align-content: center;
		align-items: center;
		justify-items: center;
		flex-wrap: wrap;
		width: 60%;
		height: auto;	
		animation: burgerPop 0.4s ease forwards;
		order: 0;
	}

	#StretchedLogo {
		width: 50px;
		height: auto;
		align-self: flex-start;
		align-items: flex-start;
	}
	
	.section2 .index_middle wrap right img {
		display: none;		
		box-sizing: border-box;
		width: 100%;
		height: 480px;
		overflow: visible;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.section2 .index_middle wrap right svg.big{
	box-sizing: border-box;
	width: 100% !important;
	padding: 0 !important;
	height: auto;
	overflow: hidden;
	background-image: url();
	animation: burgerPop 0.4s ease forwards;
}


.index_middle middle_wrap wrap right #StretchedLogo{ 
	display: flex;
	flex-direction: row;
	flex-wrap:wrap;
	width: 100%;
	align-self: flex-start;
	align-items: flex-start;
}

.index_middle middle_wrap wrap right #StretchedLogo svg{ 
	width: 65px !important;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.index_middle middle_wrap wrap right #StretchedLogo est_2010{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
}

.index_middle middle_wrap wrap right #StretchedLogo est_2010 p{
	font-family: 'SpaceGrotesk-Lite' !important;
    font-size: 10px;
    font-weight: 300;
    margin: 0;
    padding: 0;
    color: var(--body-color);
	text-transform: uppercase;
	letter-spacing: 2px;
}


.section2 .index_middle wrap right span{
	position: absolute;
	height: 175px;
	width: 218px;
	box-sizing: border-box;		
	overflow: hidden;
	margin: 16px 0 0 0;
	/*background-repeat: no-repeat;
	background-image: url(images/gifs/blagol_index_bg.gif);
	background-size: 320px 100px;
	background-position:  center center;*/
}

	.section2 .index_middle wrap right span img{	
	position: absolute;
	box-sizing: border-box;	
	width: 100%;
	margin: auto;
	/*border: solid 1px #BA0B0B;*/}
	/**/

	.section2 .index_middle middle_wrap wrap {
		display: flex;
		width: 100%;
		height: 100vh;
		flex-wrap:nowrap;
		flex-direction: row;
	}
	
	.section2 .index_middle middle_wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		height: 100vh;
		width: 100%;
		overflow: hidden;
	}
	
	.section2 .index_middle centre {
		display: flex;
		margin: 0 auto;
		box-sizing: border-box;
		overflow: visible;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		/*width: 100px;
		height: 100px;
		background-image: url(images/svg/scroll_up.svg);
		background-position-x: center;
		background-size: contain;
		background-repeat: no-repeat;
		animation: fade-in-main-content 4s .2s ease-in forwards;
		-webkit-animation: fade-in-main-content 4s .2s ease-in forwards;
		-moz-animation: fade-in-main-content 4s .2s ease-in forwards;
		transform: rotate(180deg);
		animation: bouncey 3s infinite;
		  -webkit-animation: bouncey 3s infinite;
		animation-name: bouncey;
		animation-duration: 3s;
		animation-timing-function: ease;
		animation-delay: 0s;
		animation-iteration-count: infinite;
		animation-direction: normal;
		animation-fill-mode: none;
		animation-play-state: running;*/
	}

}