/* ============================================
   BLAGOL STOCK TRANSITIONS — SECTION-BASED
   Works with <section> elements, no manual
   view-outgoing/view-incoming classes needed
   ============================================ */

/* ---- Base Setup ---- */

:root {
  /* Force consistent sRGB rendering */
  color-profile: sRGB;
  rendering-intent: auto;
  
  /* Crisp text */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Prevent OS dark mode from altering your colors */
  color-scheme: only light;
  text-rendering: geometricPrecision;
  image-rendering: optimizeQuality;

  /*PAGE SCROLL INDICATOR*/
	--indicator-color: #3D5DAA;
	--indicator-size: 6px;           /* Much thinner & modern */
	--indicator-speed: 0.12s;

  /* 2. Advanced Micro-Typography */
  text-rendering: optimizeLegibility; /* Enables high-quality kerning and ligatures */
  -webkit-font-smoothing: antialiased; /* Smoother font rendering on macOS */
  -moz-osx-font-smoothing: grayscale;
}

svg, img {
  shape-rendering: crispEdges;        /* pixel-aligned, sharper */
  text-rendering: optimizeLegibility; /* thicker, clearer text */
  image-rendering: -webkit-optimize-contrast; /* prevent softening */  
  image-rendering: optimizeQuality;
  /* Force GPU acceleration for crisp compositing */
  transform: translateZ(0);  
  /* Prevent subpixel positioning blur */
  will-change: transform;
}









.section-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.section-container > section2 {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* Active/visible section */
.section-container > section2 .active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* Transition states — assigned via JS */
.section-container > section2 .is-outgoing {
  z-index: 1;
}

.section-container > section2 .is-incoming {
  z-index: 2;
  opacity: 1; /* ensure visible during transition */
}

/* ============================================
   1. FLIP
   ============================================ */
@keyframes flipOutLeft {
  from { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
  to   { transform: perspective(1000px) rotateY(-90deg); opacity: 0; }
}

@keyframes flipInRight {
  from { transform: perspective(1000px) rotateY(90deg); opacity: 0; }
  to   { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
}

/* Push: flip from left */
.section-container.flip-left .is-outgoing {
  animation: flipOutLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-origin: left center;
}

.section-container.flip-left .is-incoming {
  animation: flipInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s forwards;
  transform-origin: right center;
}

/* Pop: flip from right */
.section-container.flip-right .is-outgoing {
  animation: flipInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) reverse forwards;
  transform-origin: right center;
}

.section-container.flip-right .is-incoming {
  animation: flipOutLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s reverse forwards;
  transform-origin: left center;
}

/* ============================================
   2. CURL
   ============================================ */
@keyframes curlUp {
  from { transform: perspective(1200px) rotateX(0deg); opacity: 1; }
  to   { transform: perspective(1200px) rotateX(-90deg) translateY(-50%); opacity: 0; }
}

@keyframes curlDown {
  from { transform: perspective(1200px) rotateX(90deg) translateY(50%); opacity: 0; }
  to   { transform: perspective(1200px) rotateX(0deg); opacity: 1; }
}

/* Present: curl up */
.section-container.curl-up .is-outgoing {
  animation: curlUp 0.5s cubic-bezier(0.32, 0, 0.67, 0) forwards;
  transform-origin: bottom center;
}

.section-container.curl-up .is-incoming {
  animation: curlDown 0.5s cubic-bezier(0.33, 1, 0.68, 1) 0.08s forwards;
  transform-origin: top center;
}

/* Dismiss: curl down */
.section-container.curl-down .is-outgoing {
  animation: curlDown 0.5s cubic-bezier(0.33, 1, 0.68, 1) reverse forwards;
  transform-origin: top center;
}

.section-container.curl-down .is-incoming {
  animation: curlUp 0.5s cubic-bezier(0.32, 0, 0.67, 0) 0.08s reverse forwards;
  transform-origin: bottom center;
}

/* ============================================
   3. CROSS DISSOLVE
   ============================================ */
@keyframes dissolveOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes dissolveIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.section-container.dissolve .is-outgoing {
  animation: dissolveOut 0.35s ease-in forwards;
}

.section-container.dissolve .is-incoming {
  animation: dissolveIn 0.35s ease-out 0.15s forwards;
}

/* ============================================
   4. SLIDE
   ============================================ */
@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-30%); opacity: 0.7; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Push: slide from right */
.section-container.slide-right .is-outgoing {
  animation: slideOutLeft 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.section-container.slide-right .is-incoming {
  animation: slideInRight 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Pop: slide from left */
.section-container.slide-left .is-outgoing {
  animation: slideInRight 0.35s cubic-bezier(0.4, 0, 0.2, 1) reverse forwards;
}

.section-container.slide-left .is-incoming {
  animation: slideOutLeft 0.35s cubic-bezier(0.4, 0, 0.2, 1) reverse forwards;
}

/* ============================================
   TRANSITION COMPLETE — CLEANUP
   ============================================ */
.section-container.transition-complete .is-outgoing {
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: none !important;
  transform: none !important;
}

.section-container.transition-complete .is-incoming {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.section-container.transition-complete .is-outgoing,
.section-container.transition-complete .is-incoming {
  transition: none;
}




/* Hide default scrollbars */
.main_container_1 {
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge */
}

.main_container_1::-webkit-scrollbar {
    display: none;                   /* Chrome, Safari, Edge */
}

/* Button styling */
#prevBtn, #nextBtn {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#prevBtn.hidden, #nextBtn.hidden {
    opacity: 0.15;           /* Faint */
    pointer-events: none;
}





#scrollIndicator {
    position: fixed;
    z-index: 99999;
    background: var(--indicator-color);
    transition: width var(--indicator-speed) ease-out,
                height var(--indicator-speed) ease-out;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(61, 93, 170, 0.4);
}

/* Horizontal */
#scrollIndicator.horizontal {
    top: 0;
    right: 0;
    width: 0%;
    height: var(--indicator-size);
}

/* Vertical */
#scrollIndicator.vertical {
    top: 0;
    right: 0;
    width: var(--indicator-size);
    height: 0%;
}

/* Toggle Button */
#toggleIndicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    padding: 10px 16px;
    background: #222;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}


/* Base state: Hidden */
.reveal {
    opacity: 0;
    /* Use 'will-change' only on the property being animated for better performance */
    will-change: transform, opacity; 
}

.reveal.active {
    animation-duration: 1.1s;
    animation-fill-mode: forwards;
    /* This timing function helps the bounce feel snappier */
    animation-timing-function: cubic-bezier(0.25, 1.1, 0.5, 1);
}

/* Hide default checkbox in WebKit/Blink browsers */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent; /* or your preferred default styling */
  margin: 0;
  border: none;
}

/* 1. Hide the calendar icon in Chrome, Safari, and Edge */
.modal-input::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* 2. Optional: Hide the up/down arrows (spin buttons) */
.modal-input::-webkit-inner-spin-button,
.modal-input::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

/* 3. Ensure the input-group container handles the absolute positioning */
.input-group {
    position: relative;
}

/* 🚀 More Aggressive Keyframes (Increase the 'overshoot' from 10px to 25px) */
@keyframes slideBounceUp {
    0% { opacity: 0; transform: translateY(-100px); }
    45% { opacity: 1; transform: translateY(25px); }  /* Aggressive overshoot */
    70% { transform: translateY(-12px); }             /* Bounce 1 */
    85% { transform: translateY(5px); }               /* Bounce 2 */
    100% { opacity: 1; transform: translateY(0); }    /* Settle */
}

/* Apply similar logic to from-down, from-left, and from-right... */
@keyframes slideBounceDown {
    0% { opacity: 0; transform: translateY(100px); }
    45% { opacity: 1; transform: translateY(-25px); } 
    70% { transform: translateY(12px); }               
    85% { transform: translateY(-5px); }              
    100% { opacity: 1; transform: translateY(0); }
}

/* Directional Logic */
.from-up { animation-name: slideBounceUp; }
.from-down { animation-name: slideBounceDown; }
.from-left { animation-name: slideBounceLeft; }
.from-right { animation-name: slideBounceRight; }

/* 🚀 KEYFRAMES: The Double Bounce Logic 
   Logic: Slide In (0-50%) -> Bounce 1 (70%) -> Bounce 2 (90%) -> Settle (100%)
*/

@keyframes slideBounceLeft {
    0% { opacity: 0; transform: translateX(-100px); }
    50% { opacity: 1; transform: translateX(10px); } 
    70% { transform: translateX(-5px); }               
    90% { transform: translateX(2px); }              
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideBounceRight {
    0% { opacity: 0; transform: translateX(100px); }
    50% { opacity: 1; transform: translateX(-10px); } 
    70% { transform: translateX(5px); }               
    90% { transform: translateX(-2px); }              
    100% { opacity: 1; transform: translateX(0); }
}



/* Bouncing animation */
@keyframes bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -10px); }
}

.bounce-element {
    /* Your element's initial styles */
    /* Ensure it's positioned for the translate to work (e.g., relative, absolute) */
    position: relative;
    /*left: 50%; /* Center horizontally if needed */
}

.bounce-element.animate-once {
    animation: bounce 0.5s ease-in-out; /* Adjust duration and easing as needed */
}


hr{
	height: 1px;
	width: 100%;
	margin: 10px 0;
	border: none; 
	box-sizing: border-box;
	/*background-color: #333 !important;*/
}

@keyframes fade-in-header {
	0%   { opacity: 0; }
	30%  { opacity: .3; }
	50%  { opacity: .5; }
	70%  { opacity: .7; }
	100% { opacity: 1; } 
  }
  
  
  @keyframes fade-in-element {
	0%   { display: block; opacity: .0; }
	30% { display: block; opacity: .3; }
	60% { display: block; opacity: .5; }
	80% { display: block; opacity: .7; }
	100% { display: block; opacity: 1; } 
  }
  
  
  @keyframes fade-in-main-content {
	0%   { display: block; opacity: .0; }
	30% { display: block; opacity: .3; }
	60% { display: block; opacity: .5; }
	80% { display: block; opacity: .7; }
	100% { display: block; opacity: 1; } 
	
  }

  @keyframes 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;}	
  }

	img{
	display: block;
	object-position: center;
 	image-rendering: crisp-edges;}

	@keyframes pulse{
		0%{background-color: rgba(255, 255, 255, 0);
		}
		50%{background-color: rgba(255, 255, 255, 0.1);
		}
		100%{background-color: rgba(255, 255, 255, 0);
		}
	}
  
	.blur-load::before{
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(images/gifs/blank.gif);
	background-size: 100px;
	background-position: center center;
	background-repeat: no-repeat;}

	.blur-load{
	position: relative;
	background-size: cover;
	background-position: center;}

	.blur-load.loaded > img {
		opacity:1;
	}

	.blur-load > img {
		opacity:0;
		transition: opacity 200ms ease-in-out;
	}


	.arrow {
		display: flex;
		flex-wrap:wrap;
		flex-direction: row;
		box-sizing:border-box;
		width: 300px;	
		position: relative;
		right: 0;
		margin: 0 auto 20px auto ;	
		justify-content: center;
		align-content: center;
		text-align: center;
	}
	
	.arrow a{
	text-decoration: none; #FFF;
	width: 300px;
	display: flex;
	justify-content: center;
	align-content: center;
	text-align: center;
	}

	.bounce {
	-moz-animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;
	}
	
	@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-30px);
	}
	60% {
		transform: translateY(-15px);
	}
	}



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

		.add-margin{
			margin: 5px 0 0 0;
		}

		/*==========================
		LOGO CONTAINER
		==========================*/        

        /* Overlay & Form Styling */
        .form-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(10px);
            /*background: rgba(0,0,0,0.7);*/
            display: none; /* Hidden by default */
            justify-content: center;
            align-items: center;
            z-index: 777777;
        }

        .form-card {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
            padding: 20px;
            border-radius: 14px;
            width: 100%;
            max-width: 400px;
            position: relative;
            animation: slideUp 0.3s ease;
			row-gap: 20px;
        }

		.form-card svg, .form-card img{			
			width: 40px;
    		height: auto;
		}

        .form-card h2{
			display: flex;
			width: 100%;
			flex-direction: row;
			font-family: 'SpaceGrotesk-Bold' !important;
			margin: 40px 0 0 0;
			padding: 0;
		}

        .form-card p{
			display: flex;
			width: 100%;
			flex-direction: row;
			font-family: 'SpaceGrotesk-Lite' !important;
			margin: 0;
			line-height: 1.5;
        }

		.close-modal {			
			background: none;
			border: none;
			color: #b70101;
			font-size: 30px;
			cursor: pointer;
		}

        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

		.close-call-back{
			display: flex;
			position: absolute;
            top: 15px;
            right: 10px;
			margin: 0;
		}

        .close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 30px;
            background: none;
            border: none;
            cursor: pointer;
            color: #b70101;
            animation: burgerPop 0.4s ease forwards;
        }

		#contactForm, .form-group{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			width: 100%;
			row-gap: 20px;
		}

        /* Form Elements */
        .form-group input[type="tel"], 
		.form-group input[type="text"], 
		.form-group input[type="number"],
		.form-group textarea {
			display: flex;
			width: 100%;
			margin: 0;
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-sizing: border-box;
            font-family: 'SpaceGrotesk-Lite' !important;
            animation: burgerPop 0.4s ease forwards;
			background-color: transparent !important;
			color: #FFF;
        }

        .form-actions {
            display: flex;
            gap: 10px;
            margin: 0;
            width: 100%;
            justify-content: space-between;
            align-content: space-between;
            align-items: center;
            justify-items: center;
        }

        .btn-submit { 
            background: var(--close-btn); 
            color: white; 
            border: none; 
            padding: 10px 20px; 
            border-radius: 50px; 
            cursor: pointer; 
            flex: 2; 
            font-family: 'SpaceGrotesk-Bold', sans-serif !important;
            animation: burgerPop 0.4s ease forwards;            
        }

		.btn-submit:hover {
			padding: 8px 16px;
			background: linear-gradient(135deg, #012957 0%, #0c4a9c 50%, #196cdf 100%);
			/*border: 2px solid rgba(200, 155, 60, 0.3);*/
			border-radius: 50px;
			transition: transform 0.2s, background 0.3s;
		}
				
        .btn-reset { 
            background: #f0f0f0; 
            border: none; 
            padding: 10px 20px; 
            border-radius: 5px; 
            cursor: pointer; 
            /*flex: 1;*/ 
            color: #666; 
            border-radius: 50px;
            animation: burgerPop 0.4s ease forwards;
			font-family: 'SpaceGrotesk-Bold', sans-serif !important;
        }


	.sm{
		display: block !important;
	}
	
	.lg{
		display: none !important;
	}

	.scroll-btn {
		position: fixed;
		bottom: 160px;
		right: 12px;
		width: 20px;
		height: auto;
		cursor: pointer;
		display: none; /* Hidden by default */
		z-index: 2;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	.scroll-btn img {
		width: 100%;
		height: auto;
		/* Optional: Add a CSS bounce if the image isn't already animated */
		animation: bounce 2s infinite;
		transform: rotate(90deg);
		transform-origin: left;
	}

	.scroll-btn:hover {
		transform: scale(1.1);
	}

	/* Optional CSS Animation */
	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
		40% {transform: translateY(-10px);}
		60% {transform: translateY(-5px);}
	}

	/* DATE AND TIME */
	.datetime-container {
		display: none;
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		text-align: center;
	}

	.datetime-container p {
		margin: 8px 0;
		font-size: 1.1em;
		color: #333;
	}

	.datetime-container p#region {
		font-style: italic;
		color: #777;
	}

	main-services{
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
	}

	half-1{display: flex;
		flex-direction: row;
		flex-wrap:wrap;}

	half-2{display: flex;
		flex-direction: row;
		flex-wrap:wrap;}

	.btn-container{
		text-align: center;
		display: none;
		flex-direction: column;
		row-gap:10px;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		position: absolute;
		bottom: 80px;
		right: 16px;
		width: 40px;		
		overflow: hidden;
		box-sizing: border-box;	
		z-index: 99999999999999999999999999999999999999999999;
		background-color: transparent;
	}
	
		.btn-container p {
		text-align: center;
		display: flex;
		flex-direction: row;
		margin: 0;
		font-size: 8px;
		letter-spacing: 1px;
		text-transform: uppercase;	
		text-align: center;
		align-self: center;
		font-family: 'FFDINWebCondensedBold';
		box-sizing: border-box;}
	
		.btn-container button {
		display: flex;
		flex-direction: row;
		outline: none;
		padding: 12px;
		width: 40px;		
		height: 40px;
		border: none;
		background-color: transparent;
		text-decoration: none;
		cursor: pointer;
		box-sizing: border-box;	}
	
		.pre{
		display: block;
		box-sizing: border-box;
		width: 40px;	
		height: 40px;		
		background-image: url("../images/svg/down_arrow_2.svg");
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;}
	
		.pre:hover{
		display: block;
		box-sizing: border-box;
		width: 40px;	
		height: 40px;
		
		background-image: url("../images/svg/down_arrow.svg");
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;}
	
		.next{
		display: block;
		box-sizing: border-box;
		width: 40px;	
		height: 40px;
		
		background-image: url("../images/svg/up_arrow_2.svg");
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;}
	
		.next:hover{
		display: block;
		box-sizing: border-box;
		width: 40px;	
		height: 40px;		
		background-image: url("../images/svg/up_arrow.svg");
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;}

	

	.next.disable,
	.pre.disable{
		cursor: none;
		opacity: .5;
	}

	.effects{
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-self: center;
		height: 1px;
		width: 70%;
	}
	

	.main_control{
		display: none;
		flex-direction: row;
		flex-wrap: nowrap;
	}	

	.main_control.active{
		display: flex;
		position: fixed;
		bottom: 20px;
		left: 20px;
		right: 25%;
		z-index: 77777;
	}

	#main_control_button{
		display: flex;
		box-sizing: border-box;	
		position: absolute;
		flex-direction: row;
		justify-content: center;
		bottom: 10px;
		z-index: 9999;
		width: 100%;}

	#main_control_button button{
		display: flex;
		box-sizing: border-box;
		border: none;	
		box-shadow: inset 0 0 10px #CCCCCC;
		flex-direction: row;
		justify-content: center;
		align-content: center;
		align-self: center;
		cursor: pointer;
		background: linear-gradient(to right, #3D5DAA, #BA0B0B);
		background-clip: border-box;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 100;
		text-align: center;
		width: 50%;}

	wrapper{
		display: flex;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content:space-between;
		align-items: center;		
		overflow: visible;
		box-sizing: border-box;
		border-radius: 6px;
		/*background: rgba(255, 255, 255, 0.14);
		border: 1px solid rgba(255, 255, 255, 0.35);
		backdrop-filter: blur(10px);
  		-webkit-backdrop-filter: blur(10px);*/
	}

	themeControl {
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		overflow: visible;
		z-index: 99999999;
		animation: burgerPop 0.4s ease forwards;
	}

	themeControl .theme-switch{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: 40px;
		box-sizing: border-box;
		justify-content: space-between;
		align-content: center;
		align-self: center;
		margin: 0 20px;
	}

	themeControl .switch{
		position: relative;
		display: inline-block;
		width: 42px;
		height: 26px;
		border-radius: 6px;
		border: solid 3.4px;		
	}
	
	themeControl .switch .theme-switch{
		position: relative;
		display: inline-block;
		width: 42px;
		height: 26px;
		border-radius: 10px;		
	}
	
	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}
	
	themeControl .switch .slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 1px;
		right: 0;
		bottom: 0;
		transition: .4s;	
		/*background-color: #444;
		border: solid 3px #FFF;*/
		background-image: url("../images/svg/lite-theme-indecator.svg");
		background-size: 20px 20px;
		background-position: center right;
		background-repeat: no-repeat;
		/*border: 2px solid #FFF;*/
	}
	
	themeControl .switch .slider::before {
		position: absolute;
		top: 3px;
		left: 1.5px;
		content: "";
		height: 12px;
		width: 14px;
		background-color: #BA0B0B;
		transition: .5s;
		border-radius: 3px;
		/*border: 2px solid #FFF;*/
	}
	
	input:checked + .slider {
		background-color: transparent;
		background-image: url("../images/svg/dark-theme-indecator.svg");
		background-size: 20px 20px;
		background-position: center left;
		background-repeat: no-repeat;
	}
	
	input:focus + .slider {	}
	
	input:checked + .slider:before {
		transform: translateX(17px);
	}

	
	.emailAddress {
		position: fixed;
		right: 10px;
		bottom: 305px;
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		overflow: visible;
		text-decoration: none;
		animation: burgerPop 0.4s ease forwards;
		cursor: pointer;		
	}

	.emailAddress a{
		text-decoration: none !important;
	}
	
	.emailAddress p {
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 14px;
		font-weight: 300;
		margin: 0;
		padding: 0;
		transform: rotate(-90deg);
		color: var(--body-color);
	}

	emailAddress a{		
		box-sizing: border-box;	
		overflow: hidden;
		z-index: 8000;
		border: none;
		text-decoration: none;
	}

	.emailAddress a:hover{
		animation: fade-in-main-content .3 ease-in forwards;
		-webkit-animation: fade-in-main-content .3s ease-in forwards;
		-moz-animation: fade-in-main-content .3s ease-in forwards;
		opacity: 1;
		text-transform: underline;
	}


	.switcher .here {
		background-color:red;
		text-decoration: none;}

	.side {            
        display: flex;
        /*position: absolute;
        bottom: 50px;
        right: 20px;
        flex-wrap: wrap;*/}

        .btn {
        width: 10px;
		height: 10px;       
        display: inline-block;
        cursor: pointer;margin: 10px 0 0 0;
		border-radius: 2px;         
        transition: all ease-in 0.15s;}

		.bth #btn-a{
		margin:0 !important;}

		.bth #btn{
		margin:0 !important;}

		.bth #btn:nth-child(1){
		margin:0 !important;}

        .btn:hover {
       }

        .btns {
        flex: 0.5 0;
        /*max-width: 100px;*/
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-self: flex-end;} 

	.show-xs {display:flex;}	
	.hidden-sm {display:none;}
	.hidden-md {display:none;}
	.hidden-lg {display:none;}	

	.loading{
		background-image: url(blank.gif);
		background-position: center;
		background-origin: content-box;
		background-repeat: no-repeat;
		background-size: contain;
		height: auto;}

	.stick-to-right{
	display: block;	
	overflow: hidden;
	box-sizing: border-box;}

	.stick-to-right .thin{
	font-family: 'SpaceGrotesk-Bold' !important; 
	font-size:36px;text-align: left;
	margin: 0 20px;
	line-height: 36px;}

	.learn-more-button-white{
	display: block;
	margin: 20px 0 0 0;}

	.learn-more-button-white a {	
	display: block;
	line-height: 50px;
	min-height: 50px;	
	margin-right: 20px;
	margin-left: 20px;
	text-decoration: none;/*background-image: linear-gradient(to right, #3D5DAA , #BA0B0B);
	border: 1px solid*/
	text-align: center;	
	border-radius: 4px;
	box-sizing: border-box;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-size: 14px;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.6px;}

	.learn-more-button-white a:hover {
	display: block;
	text-decoration: none;
	background-color:}

	.our-contact-white{
	display: block;
	margin: 12px 0 0 0;}

	.our-contact-white a {
	display: block;	
	margin-right: 20px;
	margin-left: 20px;
	text-decoration: none;text-align: center;	
	line-height: 50px;
	min-height: 50px;	
	border-radius: 4px;
	box-sizing: border-box;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-size: 14px;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	background-color: #BA0B0B;}

	.our-contact-white a:hover {
	display: block;
	text-decoration: none;
	border: 1px solid}

 	/*top nav*/
	.header .topnav {
		box-sizing: border-box;
		display: flex;		
		flex-direction: row;
		flex-wrap:nowrap;
		justify-content: space-between;
		align-content: space-between;
		justify-items: center;
		align-items: center;
		overflow: visible;  
		padding: 40px 0;
	}

  	#myLinks {
	display: none;
	overflow: scroll;
	border-bottom: #edebeb solid 20px;	
	height: 100%;
	position: fixed;
	top: 60px;	
	z-index: 999999999;
	margin: 0;
	padding: 20px;
	width: 100%;
	box-sizing: border-box;}

	#myLinks .menu_item{
	display: flex;
	flex-direction: row;
	width: 100%;
	overflow: hidden;
	margin: 10px 0;
	cursor: pointer;
	text-decoration: none;
	}

		.hide {
		display: none;
	  }
	
	  .division-map {
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	  }
	  
	  .division-map ul {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		list-style: none;
		overflow: hidden;
		width: 100%;
		padding:0px
	  }
	
	  #myLinks .division-map ul li{
		text-decoration: none;
		cursor: pointer;
		width: 100%;
		display: flex;
	  }

	#myLinks .menu_item img{
		display: flex;
		flex-direction: column;
		width: 22px;
		animation: fade-in-main-content 2s ease-in forwards;
		-webkit-animation: fade-in-main-content 2s ease-in forwards;
		-moz-animation: fade-in-main-content 2s ease-in forwards;
	}

	#myLinks .menu_item span{
		display: flex;
		flex-direction: column;
		font-family: 'SpaceGrotesk-Lite' !important;
		letter-spacing: 0.4px;	
		margin: 0 0 0 20px; #000000;
		text-decoration: none;
	}

	#myLinks .menu_item .switcher .here span{
	}

	
	
	.jump-nav-bg{
	background-image: url("../images/jump.png");
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 40px;
	padding-bottom: 40px;}
		
	.top-padded{
	padding-top:100px;}

	.switched{
	display:none;}			
	
	.switch_mode{
	display: none;}

	.switch_mode img, .switch_mode svg{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		width: 40px;
		height: 40px;		
		box-sizing: border-box;	
		overflow: hidden;
		z-index: 8000;
		border: none;	
		text-decoration: none;
		animation: fade-in-main-content .3 ease-in forwards;
		-webkit-animation: fade-in-main-content .3s ease-in forwards;
		-moz-animation: fade-in-main-content .3s ease-in forwards;
	}	

	.switch_mode span{	
	box-sizing: border-box;
	overflow: hidden;}

	.switch_mode span img{
	width: 100%;}

	.more_button{
		width: 40px;
		height: 40px;
		display: block;
		position:fixed;		
		right: 20px;
		bottom: 20px;
		box-sizing: border-box;	
		overflow: hidden;
		border: none;
		text-decoration: none;	
		cursor: pointer;
		transition: transform 0.2s ease-in-out;
		z-index: 999999999;
	}	

	.more_button img, .more_button svg{	
		width: 40px;
		height: 40px;
		box-sizing: border-box;	
		overflow: hidden;
		border: none;
		text-decoration: none;
		animation: burgerPop 0.4s ease forwards;
		/*animation: fade-in-main-content 6s  ease-in forwards;
		-webkit-animation: fade-in-main-content 6s ease-in forwards;
		-moz-animation: fade-in-main-content 6s  ease-in forwards;*/
	}	
		
	.more_button:hover{
	position:fixed;
	width: 40px;
	height: 40px;
	box-sizing: border-box;	
	overflow: hidden;
	z-index: 99999999999999999999999999999999999999999999999999999;
	border: none;
	text-decoration: none;
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;}

	.more_button span{	
	box-sizing: border-box;
	overflow: hidden;}

	.more_button span img{
	width: 100%;}

	#myBtn {
		display: none; /* Hidden by default */
		position: absolute; /* Fixed/sticky position */
		bottom: 10px; /* Place the button at the bottom of the page */
		right: 30px; /* Place the button 30px from the right */
		z-index: 999999999999; /* Make sure it does not overlap */
		border: none; /* Remove borders */
		outline: none; /* Remove outline */
		background-color: red; /* Set a background color */ white; /* Text color */
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: 15px; /* Some padding */
		border-radius: 10px; /* Rounded corners */
		font-size: 18px; /* Increase font size */
	  }
	  
	  #myBtn:hover {
		background-color: #555; /* Add a dark-grey background on hover */
	  }

	user_dash{
	background-image: url("../images/svg/gray.svg");
	background-repeat: no-repeat;
	background-position-x:-470px;
	background-position-y:-10px;
	font-family: 'SpaceGrotesk-Lite' !important;
	display: flex;
	flex-direction:row;
	flex-wrap: nowrap;
	justify-content:flex-end;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 50px;
	border: none;
	margin:0 0 10px 0;
	gap: 10px;}

	.shopping_cart{
	background-color: #BA0B0B;
	border-radius: 50px;
	padding: 5px;}

	.acc_login {
	box-sizing: border-box;border-radius: 50px;
	padding: 5px;}	

	.blagol_search {
	box-sizing: border-box;border-radius: 50px;
	padding: 5px;}

	#searchBar {
	display: none;
	}
	
	.acc_login, .shopping_cart, .blagol_search{
	display: flex;
	box-sizing: border-box;	
	overflow: hidden;
	font-size: 12px;
	z-index: 9999999;
	border: none;
	text-decoration: none;}

	.shopping_cart a span{
	display: flex;
	box-sizing: border-box;
	flex-direction: row;
	align-items: center;
	border-radius: 50px;
	justify-content: center;
	text-align: center;
	width: 22px;
	height: 22px;
	font-size: 10px;	
	text-decoration: none;
	z-index: 999999999;}

	.acc_login a span{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	overflow: hidden;
	justify-self: center;
	align-self: center;
	text-align: left;
	box-sizing: border-box;
	max-width: 36px !important;
	height: 22px;
	text-overflow: ellipsis;
	margin: 0 5px;}

	.acc_login a{
	justify-content: center;
	align-content: center;}

  	.acc_login a, .shopping_cart a, .blagol_search a{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	text-decoration: none;
	box-sizing: border-box;
	overflow: hidden;
	padding: 0 !important;
	margin: 0 !important;}

	.acc_login img, .shopping_cart img, .blagol_search img{
	display: flex;
	width: 22px;
	height: auto;
	box-sizing: border-box;
	transition: all ease-in 0.15s;}	

	.acc_login img span{
	position: relative;
	right:3px;
	top:3px;}	

	.search_blagol{
	display: flex;
	width: 100%;
	padding: 5px;
	margin: 0 0 20px 0;
	box-sizing: border-box;	
	overflow: hidden;
	font-size: 12px;
	letter-spacing: 3px;
	z-index: 9999999;
	border: none;
	border-radius: 50px;
	background-color: #F8F8F9;
	border: 1px solid #BA0B0B;
	/*box-shadow: inset 0 0 10px #CCCCCC;*/
	text-decoration: none;}

	.search_blagol form {
	display: flex;
	flex-wrap: nowrap;
	align-content: space-around;
	flex-direction: row;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;	}

	.search_blagol form input[type="text"] {
	display: flex;
	width: 90%;
	flex-direction: row;
	overflow: hidden;
	box-sizing: border-box;
	border: none;
	padding: 0 0 0 10px;
	font-size: 16px;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-weight: 100;
	background-color: transparent;}

	.search_blagol form input[type="text"]:focus {
	border-radius: 20px;
	border: none;
	width: 90%;	margin: 0 5% 0 0;		
	}	

	.search_blagol form input[type="submit"] {
	display: flex;
	content: "";
	width: 100%;
	justify-content: flex-end;
	flex-direction: row;
	background-color: transparent;
	color: transparent;
	cursor: pointer;
	overflow: hidden;
	box-sizing: border-box;	
	border: none;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-size: 16px;}		

	.search_blagol form button {
	display: flex;
	content: "";
	width: 10%;
	flex-direction: row;
	background-image: url("../images/svg/search.svg");
	background-size: 28px 28px;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	box-sizing: border-box;	
	border: none;
	border-radius: 50px;
	}

	.search_blagol form button:hover{
	display: flex;
	content: "";
	width: 10%;
	flex-direction: row;
	background-image: url("../images/svg/search.svg");
	background-size: 28px 28px;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	box-sizing: border-box;	
	border: none;
	border-radius: 50px;	
	box-shadow: inset 0 0 10px #CCCCCC;}

	
	.search_blagol a{
	padding: 0 !important;
	margin: 0 !important;}

	.search_blagol img{
	float: right;
	display: block;
	position: relative;
	width: 20px;
	margin: 4px;}

	.whatsapp-chat, #openForm{
		display: flex;
		flex-direction:row;
		justify-content: center;
		align-content: center;
		width: 40px;
		height: 40px;		
		box-sizing: border-box;	
		overflow: hidden;
		z-index: 8000;
		border: none;	
		text-decoration: none;
		animation: fade-in-main-content .3 ease-in forwards;
		-webkit-animation: fade-in-main-content .3s ease-in forwards;
		-moz-animation: fade-in-main-content .3s ease-in forwards;
	}

	#openForm{
		display: flex;
		flex-direction:row;
		justify-content: center;
		align-content: center;
		align-items: center;		
		justify-items: center;		
		width: 40px;
		height: 40px;		
		box-sizing: border-box;	
		overflow: hidden;
		z-index: 8000;
		border: none;	
		text-decoration: none;
		animation: fade-in-main-content .3 ease-in forwards;
		-webkit-animation: fade-in-main-content .3s ease-in forwards;
		-moz-animation: fade-in-main-content .3s ease-in forwards;
	}


	.whatsapp-chat img, .whatsapp-chat svg{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		width: 40px;
		height: 40px;		
		box-sizing: border-box;	
		overflow: hidden;
		z-index: 8000;
		border: none;	
		text-decoration: none;
		animation: burgerPop 0.4s ease forwards;
	}

	.whatsapp-chat svg.close-more_button:hover{}

	#openForm img, #openForm svg{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		width: auto;
		height: 26px;		
		box-sizing: border-box;	
		overflow: hidden;
		z-index: 8000;
		border: none;	
		text-decoration: none;
		animation: burgerPop 0.4s ease forwards;
	}

	.mail_to a, .whatsapp-chat a, #openForm a{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	text-decoration: none;}


	.closeMainControl_button {
	display: none;
	position: fixed;
	left: 16px;
	bottom: 250px;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	overflow: hidden;
	z-index: 8000;
	background-color: #000000;
	font-family: 'FFDINWebRegular' !important;
	border: none;
	border-radius: 4px;
	text-decoration: none;}

	.acc_login:hover{	
	opacity: 1;
	text-decoration: none;}	

	.mail_to{
		display: flex;
        flex-direction: column;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        overflow: hidden;
        font-size: 12px;
        letter-spacing: 3px;
        z-index: 1000;
        border: none;
        text-decoration: none;
        /*animation: fade-in-main-content .7s ease-in forwards;
        -webkit-animation: fade-in-main-content .7s ease-in forwards;
        -moz-animation: fade-in-main-content .7s ease-in forwards;*/
		transition: all 0.2s ease-in-out;
    	animation: burgerPop 0.4s ease forwards;		
    }

	#goBackBtn{	
        width:40px;
        height: 40px;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 1000;
        border: none;
        text-decoration: none;
		transition: all 0.2s ease-in-out;
    	animation: burgerPop 0.4s ease forwards;
		position: absolute;
		left: 20px;
		top: 70px;	
		cursor: pointer;	
    }	
	
	#goForwardBtn{
		width:40px;
        height: 40px;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 1000;
        border: none;
        text-decoration: none;
		transition: all 0.2s ease-in-out;
    	animation: burgerPop 0.4s ease forwards;
		position: absolute;
		right: 20px;
		top: 70px;	
		cursor: pointer;
    }

	#goBackBtn:hover, #goForwardBtn:hover{		
    	cursor: pointer;
	}		

	.mail_to img, .mail_to svg, #goBackBtn svg, #goBackBtn img, #goForwardBtn img, #goForwardBtn svg{	
	width: 40px;
	height: 40px;
	box-sizing: border-box;	
	overflow: hidden;
	border: none;
	text-decoration: none;
	/*animation: fade-in-main-content 6s  ease-in forwards;
	-webkit-animation: fade-in-main-content 6s ease-in forwards;
	-moz-animation: fade-in-main-content 6s  ease-in forwards;*/
}	

	
	.mail_to img:hover, #goBackBtn:hover, #goForwardBtn:hover{
		box-sizing: border-box;
	}

	.mail_to a{
	color: #808080;
	text-decoration: none;}

	.mail_to a:hover{
	color: #323232;
	text-decoration: none;}

	.scroll_indicator{
	position: fixed;	
	right: 10px;	
	padding: 0 5px;
	bottom: 80px;	
	border-radius: 20px;
	z-index: 99999999;
	/*background-color: #F2F2F2;*/
	
	overflow: hidden;
	animation: fade-in-main-content .5s ease-in forwards;
	-webkit-animation: fade-in-main-content .5s ease-in forwards;
	-moz-animation: fade-in-main-content .5s ease-in forwards;}

	.progress{
	width: 20px;
	background: #3D5DAA;
	height: 0%;}
		
	

		
	/* ABOUT MIDDLE STYLES*/
	.about_middle, .web_dev{
	box-sizing: border-box;	
	display: flex;
	width: 100vw;
	height: 100vh;
	flex-wrap: wrap;
	flex-direction: row;
		
	background-repeat: no-repeat;
	background-size: cover;	}

	.about_middle middle_wrap, .web_dev middle_wrap{
	width: 100%;
	display: flex;}

	.about_middle middle_wrap wrap, .web_dev middle_wrap wrap{
	display: flex;
	width: 100vw;
	height: 100vh;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	overflow: hidden;
	padding: 20px;
	justify-content: center;
	align-content: center;}

	.about_middle middle_wrap wrap left, .web_dev middle_wrap wrap left{
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	overflow: visible;
	justify-content: left;
	order: 1;
	/*background-image: url("../images/svg/all_we_do.svg");
	background-repeat: no-repeat;
	background-position:  right center;
	background-position-x: 112px;
	background-position-y: 13px;
	background-size: contain;*/}

	.about_middle middle_wrap wrap left a, .web_dev middle_wrap wrap left a{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	text-decoration: none;
	font-size: 20px;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-weight: 700;
	margin:10px 0 0 0;}

	.about_middle middle_wrap wrap left a:hover, .web_dev middle_wrap wrap left a:hover{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	text-decoration: none;
	font-size: 20px;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-weight: 700;
	margin:10px 0 0 0;}

	.about_middle middle_wrap wrap left a p, .web_dev middle_wrap wrap left a p{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.about_middle middle_wrap wrap left a p span, .web_dev middle_wrap wrap left a p span{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		padding: 0 0 0 40px;
	}

	.about_middle middle_wrap wrap left h2, .web_dev middle_wrap wrap left h2{
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		margin: 20px 0 0 0 !important;
		flex-direction: row;
		align-self: left;
		text-align: right;
		flex-wrap: wrap;
		text-transform: normal;
		box-sizing: border-box;
		overflow: visible;
		font-family: 'SpaceGrotesk-Lite' !important;
		text-transform: uppercase;
		font-size: 36px;
		font-weight: 300;
		letter-spacing: 0.72px;
		line-height: 39.6px
	}

	.about_middle middle_wrap wrap left h2 span, .web_dev middle_wrap wrap left h2 span{
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;	
		font-family: 'SpaceGrotesk-Lite' !important;
		text-transform: uppercase;
		font-size: 36px;
		font-weight: 300;
		letter-spacing: 0.72px;
		line-height: 39.6px;	
		margin: 0;
		text-align: right;	
		justify-self: right;
		justify-content: right;
	}

	.about_middle middle_wrap wrap left h2 span strong, .web_dev middle_wrap wrap left h2 span strong{
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap;
		font-family: 'SpaceGrotesk-Lite' !important;
		margin: 0;
		color:#0c4a9c !important;
		text-align: right;
		justify-self: right;
	}

	.about_middle middle_wrap wrap right, .web_dev middle_wrap wrap right{
	display: flex;
	box-sizing: border-box;
	overflow: hidden;
	/*justify-content: center;*/
	flex-wrap: wrap;
	width: 100%;
	margin: 0;}

	.about_middle middle_wrap wrap right get_started_bg, .web_dev middle_wrap wrap right get_started_bg{
	overflow: hidden;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100vw;
	/*border: solid 2px;*/
	border-radius: 10px;
	margin: 0;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url();
	animation: burgerPop 0.4s ease forwards;
	/*animation: fade-in-main-content 1s .2s ease-in forwards;*/
	}		

	.about_middle middle_wrap wrap right img, .web_dev middle_wrap wrap right{
	display: flex;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 0 !important;
	height: auto;
	overflow: hidden;
	background-image: url();	
	border-radius: 4px;
	}

	.about_middle middle_wrap wrap right span, .web_dev middle_wrap wrap right span{
	position: relative;
	width: 232px;
	box-sizing: border-box;		
	overflow: hidden;
	margin: 16px 0 0 0;}

	.about_middle middle_wrap wrap right span img, .web_dev middle_wrap wrap right span img{	
	box-sizing: border-box;	
	width: 100%;
	margin: auto;
	/*border: solid 1px #BA0B0B;*/}

	.middle_red, .middle_blue, .middle_white, .middle_black{	
	display: flex;
	width: 100vw;
	height: 100vh;}

	.middle_red{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.middle_blue{	
	background-color: #FFF}

	.middle_white{
	
	width: 100vw;
	height: 100vh;}

	.middle_black{
	padding: 20px;
	background-color:#323131;}

	/* the blues starts*/

	.middle_blue wrap{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: center;}
	
	.middle_blue wrap left{
	display: flex;
	margin: 0 0 40px 0;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;}

	.middle_blue wrap left h2{
	display: block;
	width: 100%;	
	text-transform: capitalize;	
	font-family: 'SpaceGrotesk-Lite' !important;
	font-size: 26px;
	font-weight: 600;
	text-align: center;
	margin: 20px 0 0 0;
	line-height: 26px;}

	.middle_blue wrap left h2 span{
	margin: 0;
	display: block;	
	box-sizing: border-box;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-weight: 100;
	text-align: center;
	text-transform: capitalize;}

	.middle_blue wrap left p{
	display: block;
	margin: 0;
	width: 100%;
	text-align: left;
	padding: 10px 0px;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-size:16px;
	font-weight: 100;
	color:#6d6e70;}

	.middle_blue wrap left p.centered{
		display: block;
		margin: 0;
		width: 100%;
		text-align: center;
		padding: 20px 30px;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size:16px;
		font-weight: 100;#6d6e70;}

	.middle_blue wrap left a{
	display: block;
	margin: 0;
	width: 100%;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-size:16px; 
	font-weight: 700;
	background: linear-gradient(to right, #BA0B0B, #3D5DAA);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	text-decoration: none;}

	.middle_blue wrap left a:hover{	
	text-decoration: none;
	background: linear-gradient(to right, #3D5DAA, #CC9933);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}

	.middle_blue wrap left links{
	box-sizing: border-box;
	display: flex;
	overflow: hidden;
	flex-direction: row;
	width: 70%;	
	flex-wrap: nowrap;	
	justify-content: space-between;}

	.middle_blue wrap right img{
	display: flex;
	position: relative;
	box-sizing: border-box;
	width: 80%;
	height: auto;
	overflow: hidden;
	animation: fade-in-main-content 1s .2s ease-in forwards}

	.middle_blue  wrap right web_dev_bg{
	overflow: hidden;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;	
	width: 100vw;
	height: 200px;
	margin:0;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("../images/svg/blagol_web_dev_bg.svg");
	animation: fade-in-main-content 1s .2s ease-in forwards;}

	
	.middle_blue  wrap right graphics_des_bg{
	overflow: hidden;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;	
	width: 100vw;
	height: 200px;
	margin:0;
	/*background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("../images/svg/blagol_graphics_des_bg.svg");*/
	animation: fade-in-main-content 1s .2s ease-in forwards;}

	.middle_red  wrap right blagol_craft_store_bg{
	overflow: hidden;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;	
	width: 100vw;
	height: 200px;
	margin:0;
	/*background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("../images/svg/blagol_craft_store.svg");*/
	animation: fade-in-main-content 1s .2s ease-in forwards;}

	

	 .middle_blue wrap right,  .middle_red wrap right{
	display: flex;
	box-sizing: border-box;
	overflow: hidden;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;}

	 .middle_blue wrap right graphics_des_bg img{
	display: flex;
	position:relative;
	left:84px;
	top: 120px !important;
	box-sizing: border-box;
	width: 60px;
	height: 60px;
	overflow: hidden;}	

	 .middle_blue wrap right img{
	display: flex;
	position:relative;
	top: 150px;
	left: 150px;
	box-sizing: border-box;
	width: 70px;
	height: 70px;
	overflow: hidden;}

	 .middle_blue wrap right span{
	position: absolute;
	box-sizing: border-box;		
	overflow: hidden;
	margin: 40px 0 0 0;}

	 .middle_blue wrap right span img{	
	box-sizing: border-box;	
	width: 482px;
	margin: auto;
	animation: fade-in-main-content 1s .2s ease-in forwards
	/*border: solid 1px #BA0B0B;*/}

	/* the blues ends*/

	


	/* the orange starts */
	 .middle_red wrap{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: center;
		row-gap: 40px;
	}
	
	 .middle_red wrap left{
	display: flex;
	margin: 0 0 40px 0;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;}

	.middle_red wrap left h2{
	margin:  0;
	display: block;
	width: 100%;	
	text-transform: capitalize;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-size: 26px;
	font-weight: 600;	
	text-align: center;
	line-height: 26px;}

	.middle_red wrap left h2 span{
	margin: 0;
	display: block;	
	box-sizing: border-box;
	font-family: 'SpaceGrotesk-Lite' !important;	
	font-weight: 100;
	text-align: center;
	text-transform: capitalize;}

	.middle_red wrap left p{
		display: block;
		margin: 0;
		width: 100%;
		text-align: left;
		padding: 20px 30px;
		font-family: 'SpaceGrotesk-lite' !important;
		font-size: 14px;
		line-height: 24px;
		font-weight: 300;
	}

	blagol-effect-1{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-content: center;
		align-items: center;
		justify-items: center;
		width: 100%;
		order: 3;
	}

	blagol-effect-1 img, blagol-effect-1 svg{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 32px;
		height: auto;
		margin: 0 auto;
		align-self:flex-start;
		justify-self:flex-start;
		animation: burgerPop 0.4s ease forwards;
	}

	.middle_red wrap left a{
	display: block;
	margin: 0;
	width: 100%;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-size:16px;
	font-weight: 700;
	background: linear-gradient(to right, #3D5DAA, #BA0B0B);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	text-decoration: none;
}

	.middle_red wrap left a:hover{	
		text-decoration: none;
		background: linear-gradient(to right, #BA0B0B, #24408F);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.middle_blue wrap left links{
		box-sizing: border-box;
		display: flex;
		overflow: hidden;
		flex-direction: row;
		width: 70%;	
		flex-wrap: nowrap;	
		justify-content: space-between;
	}

	.middle_red wrap centre{
		display: flex;
		margin: 20px 0 0 0;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		row-gap: 20px;
	}

	.middle_red wrap centre h2{
		display: block;
		margin: 0;
		width: 100%;
		text-align: left;
		text-transform: uppercase;
		padding: 0px 0px 0px;
		font-family: 'SpaceGrotesk-lite' !important;
		font-size: 26px;
		font-weight: 300;
		letter-spacing: 0.05px;
		line-height: 35.1px;
		background: linear-gradient(to right, rgb(61, 93, 170), rgb(186, 11, 11)) padding-box text;
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: transparent;
	}

	.middle_red wrap centre p{
		display: block;
		margin: 0;
		width: 100%;
		text-align: left;
		padding: 0px 0px 0px;
		font-family: 'SpaceGrotesk-lite' !important;
		font-size: 14px;
		line-height: 24px;
		font-weight: 300;
	}

	.middle_red wrap centre p svg{
		display:inline;
		width: 20px;
		height: auto;
		margin: 0 5px;
	}

	.middle_red wrap right img{
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 80%;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}


	.middle_red wrap right web_dev_bg, 
	.middle_red wrap right gif_anime,
	.middle_red wrap right graphics_des_bg,
	.middle_red wrap right graphics_des_bg,
	.middle_red wrap right ui_d,
	.middle_red wrap right email_temp_d,
	.middle_red wrap right vir_ass, 
	.middle_red wrap right copy_writing, 
	.middle_red wrap right gif_anime, 
	.middle_blue wrap right copy_writing, 
	.middle_red wrap right blagol_blog_bg, 	
	.middle_red wrap right product_branding_bg,
	.middle_red wrap right signage_bg, 
	.middle_red wrap right seo_bg 
	{
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;	
		width:80vw;
		margin:0;		
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}	

	.middle_red wrap right web_dev_bg img, .middle_red wrap right web_dev_bg svg, 
	.middle_red wrap right ui_d img, .middle_red wrap right ui_d svg, 
	.middle_red wrap right graphics_des_bg img, .middle_red wrap right graphics_des_bg svg, 
	.middle_red wrap right vir_ass img, .middle_red wrap right vir_ass svg, 
	.middle_red wrap right copy_writing img, .middle_red wrap right copy_writing svg, 
	.middle_red wrap right signage_bg img, .middle_red wrap right signage_bg svg, 
	.middle_red wrap right product_branding_bg img, .middle_red wrap right product_branding_bg svg, 
	.middle_red wrap right blagol_product_branding_bg img, .middle_red wrap right blagol_product_branding_bg svg, 
	.middle_red wrap right seo_bg img, .middle_red wrap right seo_bg svg, 
	.middle_red wrap right blagol_craft_store_bg img, .middle_red wrap right blagol_craft_store_bg svg {
		display: flex;
		width: 100%;
		padding: 0 !important;
		height: auto;
		flex-direction: row;
		position: relative;
		box-sizing: border-box;
		margin: 0 auto 0 0;
		overflow: hidden;
		animation: burgerPop 0.4s ease forwards;
	}
	
	.middle_red wrap right{
	display: flex;
	box-sizing: border-box;
	overflow: hidden;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;}

	.middle_red wrap right img{
	display: flex;
	position:relative;
	/*top: 110px;
	left: 30px;*/
	box-sizing: border-box;
	width: 70px;
	height: 70px;
	overflow: hidden;}

	 .middle_red wrap right span{
	position: absolute;
	box-sizing: border-box;		
	overflow: hidden;
	margin: 40px 0 0 0;}

	 .middle_red wrap right span img{	
	box-sizing: border-box;	
	width: 482px;
	margin: auto;
	animation: fade-in-main-content 1s .2s ease-in forwards
	/*border: solid 1px #BA0B0B;*/}
	/* the orange ends */

	
	/* SECTION 2 WRAP*/
	.section2 .index_wrap{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;}		

	.section2 wrap{
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		/*align-content: center;*/
		padding: 20px}

	.section2 wrap left{		
		display: flex;
		flex-wrap: wrap;	
		box-sizing: border-box;
		overflow: visible;	
		width: 100%;
		margin: 0;
		padding: 0;
		order: 2;		
	}

	.middle_blue wrap centre {
		display: flex;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		margin: 0;
	}

	.middle_blue wrap centre p {
		margin:40px 0 0 0;
		display: block;
		width: 100%;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size:16px;
		line-height: 30px;	
		margin: 0 0 20px 0;
		padding: 0;	
	}

	.middle_blue wrap centre p span {
		margin: 0;
		display: block;
		box-sizing: border-box;
		overflow: hidden;
		font-family: 'SpaceGrotesk-Lite' !important;
		text-transform: capitalize;
		font-size: 16px;
		line-height: 30px;
	}
	
	.middle_blue wrap left h2 {
		margin: 0;
		display: block;
		width: 100%;
		letter-spacing: -3px;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 60px;
		line-height: 60px;
	}
	
	.middle_blue wrap left h2 span {
		margin: 0;
		display: block;
		box-sizing: border-box;
		overflow: hidden;
		font-family: 'SpaceGrotesk-Lite' !important;
		text-transform: capitalize;
		font-size: 60px;
		line-height: 60px;
	}
	
	.middle_blue wrap left p {
		margin:40px 0 0 0;
		display: block;
		width: 100%;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 16px;
		line-height: 30px;	
		margin: 0;
		padding: 0;	
	}

	/*.section2 wrap left div{
	flex-direction: row;
	width: 100%;
	box-sizing: border-box;
	margin:0 0 10px 0;}

	.section2 wrap left h2{
	text-align: center;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-size:24px; 
	font-weight: 100;
	color:#3D5DAA;}

	.section2 wrap left h2 span{
	box-sizing: border-box;
	overflow: hidden;
	font-family: 'SpaceGrotesk-Lite' !important; 
	font-weight: 100;
	color:#808080;}*/

	.section2 .index_middle middle_wrap wrap left h2{
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		font-family: 'SpaceGrotesk-Bold' !important; 
		font-size: 44px;
		margin:0px 0 10px 0;	
		line-height: 44px;
		letter-spacing: 0.2px;
	}

	.section2 .index_middle middle_wrap wrap left h2 strong{
		display: inline-flex;	
		flex-direction: row;
		flex-wrap: wrap;
		background: linear-gradient(135deg,#BA0B0B 0%, #012957 0%, #0c4a9c 50%, #196cdf 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: transparent; /* Fallback */
		font-family: 'SpaceGrotesk-Lite' !important;
		text-transform: uppercase;
		font-size: 36px;
		font-weight: 300;
	}

	.section2 .index_middle middle_wrap wrap left a{
		display: flex;
		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 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 20px;
	}
	

	.blueText{
	color:#96B3FF;
	}
	/**/

	wrap left links{
	box-sizing: border-box;
	display: flex;
	overflow: hidden;
	flex-direction: row;
	width: 70%;	
	flex-wrap: nowrap;	
	justify-content: space-between;}	

	.black, .gray, .blue, .yellow{
	display: flex;	
	justify-content: center;
	font-family: 'FFDINWebRegular' !important;
	box-sizing: border-box;
	width: 150px;	
	border-radius: 8px;
	padding: 10px;}

	.black:hover, .gray:hover, .blue:hover, .yellow:hover{
	text-decoration: none;
	border-bottom: #3D5DAA solid 2px;
	cursor: pointer;}

	.black{
	background-color: #000000;}

	.gray{
	background-color: #808080;}

	.blue{
	background-}

	.yellow{
	background-color: #BA0B0B;}

	.black a, .gray a, .blue a, .yellow a{
	display: flex;
	align-self: center;
	box-sizing: border-box;
	text-align: center !important;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-size:16px;
	font-weight: 700;	
	text-decoration: none;}

	.black a:hover, .gray a:hover, .blue a:hover, .yellow a:hover{
	text-decoration: none;
	cursor: pointer;}

	/* INDEX MIDDLE STYLES*/
	.index_middle{
	box-sizing: border-box;	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	overflow: hidden;
	align-content: center;	
	height: 100vh;
	width: 100vw;
	/*background-image: url("../images/svg/aliens_bg.svg");
	background-position:center;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, 550px;*/

	/*background-position-x: 50px;
	background-position-y:175px;
	background-repeat: no-repeat;
	background-size: 550px;*/

	}

	.section2 .index_middle middle_wrap{
	display: flex;
	box-sizing: border-box;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: center;
	align-self: center;	
	overflow: hidden;
	width: 100%;}		
	
	/* 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: 300;}
	

	/* */
	.section2 wrap right{
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		margin:0;
		flex-wrap: nowrap;
		width: 100%;
		order: 1;
		animation: burgerPop 0.4s ease forwards;
	}

	.section2 wrap right img{		
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		overflow: hidden;
		background-image: url();		
	}

	.section2 wrap right img.big{
		top: 0 !important;
		left: 0 !important;
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 100% !important;
		padding: 0 !important;
		margin: 100px 0 0 0;
		height: auto;
		overflow: hidden;
		background-image: url();}

	.section2 wrap right span{
		position: absolute;
		height: 175px;
		width: 218px;
		box-sizing: border-box;		
		overflow: hidden;
		margin: 16px 0 0 0;	
	}

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

	.services_col{
	width: 100vw;
	height: 100vh;		
	margin: 0 20px;	
	display: flex;
	flex-direction: column;
	flex-wrap:nowrap;
	box-sizing: border-box;
	overflow: hidden;
	justify-content:center;
	align-content: center;}

	.services_col h2{
	width: 100%;
	margin: 0;
	border-radius: 2vmin/2vmin;		
	font-family: 'SpaceGrotesk-Lite' !important;
    font-weight: 100;
    font-size: 20px;
	/*line-height:40px;*/
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	overflow: hidden;
	text-align: center;
	justify-content: center;
	overflow: hidden;}

	.services_col .hanger Containers .Info h2 span{
	display: inline-flex;
	height: 41px;
	width: 40px;
	overflow: hidden;
	background-image: url(images/svg/smiley.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	animation: fade-in-main-content 3s ease-in forwards;
	-webkit-animation: fade-in-main-content 3s ease-in forwards;
	-moz-animation: fade-in-main-content 3s ease-in forwards;
	}

	.services_col .first{
	width: 100%;	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 30px 20px;
	gap: 30px 0px;
	box-sizing: border-box;
	overflow: hidden;
	justify-content:space-between;
	/*background-image: url(images/gifs/service_bg.gif);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;*/}

	.services_col .second {
	display: flex;
	width: 100%;
	height: 100vh;
	flex-direction: row;
	flex-wrap:wrap;
	box-sizing: border-box;
	overflow: hidden;
	justify-content:flex-start;
	align-content: space-between;
	animation: fade-in-main-content 1s .2s ease-in forwards;}

	.services_col .third{
	display: flex;
	flex-direction: row;
	margin: 0;
	width: 100%;
	flex-wrap: wrap;
	align-content: space-between;}

	.hanger{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;}

	.hanger img{
	/*position:absolute;
	right: -250px;
	top:170px;*/
	margin:0 auto;
	width: 100px;
	float: right;
	height: 90px;
	display: flex;
	z-index: 9999;
	overflow: hidden;}
	
	.services_item{
	/*background-color: #E7ECF0;*/
	align-items:flex-start;
	display: flex;
	overflow: hidden;
	width: 33.33%;
	clear: both;
	justify-content:space-between;
	transition: background-color 0.5s ease;}

	.services_item img{
	display: flex;
	width:60%;
	margin: auto;
	animation: fade-in-main-content 1s .2s ease-in forwards}
		
	.header-image{
	box-sizing: border-box;
	text-align: center;
	padding: 18px 0 30px 0;
	/**/
	background-image: url(images/png/blagol_hero.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 280px;
	display: block;
	z-index: 888;
	overflow: hidden;}

	.header-image img{
	display: inline-block;
	width: 61%;
	margin: auto;}

	.--coded{
	background-position: center 95px;
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 30px;
	padding-bottom: 10px;
	background-image: url(images/svg/blagol_home_bg.svg);}

	.scroll-down{
	width: 5%;
	margin-right: auto;
	margin-left: auto;}

	.banner-pos{
	padding-top: 150px;
	background-attachment: fixed;
	background-image: url();
	background-repeat: no-repeat;
	background-position: center center;}

	.img-padder{
	padding-top: 180px;
	width: 80%;}

	.slogan-p{
	padding-top:50px;
	font-size: 14px;
	font-weight: 300;
	text-align: center;}

	.flow-padder-top{
	padding-top: 300px;
	display: block;}

	.flow-padder-social{
	padding-top: 100px;
	display: block;
	padding-bottom: 100px;}

	.flow-padder-contact {
	padding-top: 100px;
	display: block;}

	.uiux-design-pad-left-sm{
	padding-left: 60px;}

	.graphics-design-pad-right-sm{
	padding-right: 60px;}

	.mobile-padder-100{
	padding-top: 100px;
	padding-bottom:50px;}

	.mobile-padder-top{
	padding-top: 50px;
	padding-bottom:50px;}

	.text-align-center-xs{
	text-align: center;}

	.magic-line{
	width: 0%;
	height: 150px;
	margin-left:auto;
	margin-right:auto;
	background-color:
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFF;}

	.service-batch-link-button a {
	font-size: 14px;
	font-weight: 300;
	padding-right: 5px;
	padding-left: 5px;
	width: 100px;
	margin-right: auto;
	margin-left: auto;
	text-decoration: none;}

	.service-batch-link-button a:hover {
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	width: 100px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	margin-bottom: 50px;
	border: 1px solid #FFF;}


	.service-batch-link-button-white a {
	font-size: 14px;
	font-weight: 300;
	padding-right: 5px;
	padding-left: 5px;
	width: 100px;
	margin-right: auto;
	margin-left: auto;
	text-decoration: none;text-transform: lowercase;}

	.service-batch-link-button-white a:hover {
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	width: 100px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	margin-bottom: 50px;
	background-color:;
	border: 1px solid;}

	.image--adjuster{
	padding-top: 0;}


	/* FOOTER STYES */	
	.footer{
	display: flex;
	box-sizing: border-box;
	overflow: scroll;
	flex-direction: row;
	width: 100vw;
	height: 100vh;
	scroll-snap-align: start;
	flex-wrap: wrap;
	align-content: space-between;	
	background-size: cover;}

	.footer top{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;	
	width: 100%;
	/*gap: 20px;*/
	padding: 80px 20px 20px 20px;		
	overflow: hidden;}

	.footer top container{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	overflow: hidden;
	padding: 10px 0;
	border-radius: 8px;
	/*background-color: #242424;*/	
	/*background-image:url(images/jpg/594600.jpg);*/}

	.footer top container p{
	display: flex;
	margin: 0 0 20px 0;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-weight: 300;
	font-size: 14px;
	overflow: hidden;}
	
	.footer top container h2{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-size: 16px;
	font-weight: 400;
	margin: 0 0 10px 0;}

	.footer top container a{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	text-decoration: none;
	font-family: 'SpaceGrotesk-Lite' !important;
	font-weight: 300;
	font-size: 14px;
	line-height: 28px;
	color: #808080;}

	.footer top container a img{
	width: 20px;
	height: 20px;
	margin: 0 10px 0 0;	}

	.footer top container a:hover{
	text-decoration: underline;}

	.footer top container wrap_contact{
	display: flex;
	box-sizing: border-box;
	width: 100%;
	flex-wrap: wrap;}

	.footer top container wrap_add{
	display: flex;
	box-sizing: border-box;
	width: 100%;
	flex-wrap: wrap;}

	.footer top container wrap_map{
	display: flex;
	box-sizing: border-box;
	width: 100%;
	flex-wrap: wrap;
	margin: 20px 0 0 0;
	overflow: hidden;	
	border-radius: 8px;
	border: solid 6px #BA0B0B;
	box-shadow: inset 0 0 10px #CCCCCC;
	background-color: #FFF;
	}

	.footer bottom{
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 0 20px 40px 20px;	
	overflow: hidden;}

	.footer bottom container{
	display: flex;
	box-sizing: border-box;
	justify-content: space-between;
	align-content: center;
	justify-content: center;
	overflow: hidden;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 100%;
	margin: 0 0 80px 0;
	overflow: hidden;}

	.footer bottom container p{
		display: flex;
		font-family: 'SpaceGrotesk-Lite' !important;
		text-align: center;
		align-self: center;
		font-weight: 100;
		font-size: 12px;
	}

	.footer bottom container img, .footer bottom container svg{
		display: flex;
		align-content: center;
		justify-content: center;
		width: 40px;
		height: auto;
		margin: auto;
	}

	/* 1. LAYOUT & POSITIONING */
    .cookie-notice-wrapper {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        z-index: 999999999999999999; /* Ensure it stays above everything */
        /* max-width: 450px;  */
        background: rgb(26, 26, 26);
        /* backdrop-filter: blur(10px);*/
        border: 1px solid rgba(186, 11, 11, 0.3); /* Soft Gold Border */
        border-radius: 20px;
        padding: 20px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
        display: none; /* Hidden by default, shown via JS */
        /*animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);*/
		animation: burgerPop 0.4s ease forwards;
    }

    /* 2. TYPOGRAPHY */
    .cookie-text h2 {
        color: #FFFFFF;
        font-size: 14.6px;
        line-height: 1.6;
        margin: 0 0 20px 0;
        font-weight: 300;
        font-family: 'SpaceGrotesk-Bold', sans-serif;
    }

    .cookie-text p {
        color: #FFFFFF;
        font-size: 13px;
		word-spacing: 3px;
        margin-bottom: 20px;
        font-family: 'SpaceGrotesk-Lite', sans-serif;
		font-weight: 300;
    }    

    .gold-link {
        color: #3D5DAA;
        text-decoration: underline;
        transition: opacity 0.3s;
		font-family: 'SpaceGrotesk-Bold', sans-serif;
    }
	
    .gold-link:hover { opacity: 0.8; }

    /* 3. BUTTONS */
    .cookie-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

	.cookie-actions .settings-wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}

	.cookie-actions .settings-wrap img, .cookie-actions .settings-wrap svg {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 20px;
		height: auto;
	}

    .btn-sharing {
        font-size: 12px;
		color: #3D5DAA;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 500;
		transition: color 0.3s;
		font-family: "SpaceGrotesk-Bold", sans-serif;
		text-decoration: underline #3D5DAA;
		text-underline-offset: 7px;
		animation: burgerPop 0.7s ease forwards;
    }

    .btn-sharing:hover { 
        color: #fff; 
        text-decoration-style: solid;
        text-decoration-thickness: 1px;
        text-decoration: underline;
        text-underline-offset: 7px;
        text-decoration-color: var(--gold);
        /*text-decoration-color: rgba(200, 155, 60, 0.3);*/
    }

    .btn-agree {
        background: #BA0B0B;
        color: #fff;
        border: none;
        padding: 8px 16px;
        border-radius: 50px;
        font-weight: 400;
        letter-spacing: 1.2px;
        font-size: 13px;
        cursor: pointer;
		animation: burgerPop 0.7s ease forwards;
        /*transition: transform 0.2s, background 0.3s;*/
        font-family: 'Inter', sans-serif;
        text-transform: uppercase;
    }

    .btn-agree:hover {
        padding: 8px 16px;
        background: linear-gradient(135deg, #012957 0%, #0c4a9c 50%, #196cdf 100%);     
        /*border: 2px solid rgba(200, 155, 60, 0.3); */       
        border-radius: 50px;
        transition: transform 0.2s, background 0.3s;
		cursor: pointer;
    }

    /* COOKIE SHARING SETTING - RESTORED & FIXED */
    .settings-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
        z-index: 9999999999; /* Restored your z-index */
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .modal-content {
        background: #19191B;
        width: 100%;
        max-width: 500px;
        border: 1px solid #BA0B0B;
        border-radius: 12px;
        color: #fff;
        overflow: hidden;
        padding: 0 0 20px 0;
        margin: 160px 0 0 0;
    }

    .modal-header {
        padding: 20px;
        border-bottom: 1px solid #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-header h3 { 
		color: #BA0B0B; 
		margin: 0; 
		font-size: 1.2rem; 
		font-family: "SpaceGrotesk-Bold" !important;
	}

    .close-modal { 
        background: none; 
        border: none; 
        color: #b70101;
        cursor: pointer; 
        line-height: 1;
        padding: 0;
    }

    .modal-body { padding: 20px; }

    .modal-footer { padding: 0 20px; }

    .setting-item {
        display: flex;
		align-items: center;
		justify-items: center;
        justify-content: space-between;
        align-items: flex-start;
        padding: 15px 0;
        border-bottom: 1px solid #333;
    }

	.setting-info{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.toggle-container{
		display: flex;
	}

	.setting-label { font-weight: 300; font-size: 14px; letter-spacing: .9px; }

    .setting-info p { 
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		font-size: 12px; 
		color: #aaa; 
		margin: 5px 0 0; 
		font-family: 'SpaceGrotesk-Lite' !important;
	}

    .setting-label { 
		display: flex;
		color: #FFF;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		font-weight: 300; 
		font-size: 14px; 
		letter-spacing: .9px; 
		font-family: 'SpaceGrotesk-Lite' !important;
	}

    /* FIXED SLIDER LOGIC */
    .setting-item .switch { 
		position: relative; 
		display: inline-block; 
		width: 70px; 
		height: 20px; }

    .switch input { 
		opacity: 0; 
		width: 0; 
		height: 0; }

    .setting-item .switch .slider {
        position: absolute; 
        cursor: pointer; 
        inset: 0;
        background-color: #444;
		background-image: none !important; 
        transition: .4s; 
        border-radius: 34px;
		width: 38px; 
    }

    .setting-item .switch  .slider::before {
        position: absolute; 
        content: ""; 
        height: 14px; 
        width: 16px; /* Your original wide knob */
        bottom: 3px;
        background-color: white; 
        transition: .4s; 
        border-radius: 15px; /* Adjusted to fit the wider shape */		
    }
	

    input:checked + .setting-item .switch .slider { 
		background-color: #BA0B0B !important;    
        display: flex;
        align-items: center;
        justify-items: center;
		background-image:none !important;		
	}

    /* THE FIX: Translation calculated for a 60px track with a 28px knob */
    input:checked + .setting-item .switch .slider::before { 
        transform: translateX(20px) !important; 
        background-color: #fff; 
    }

    /* #tinSider */
    .toggle-switch input:checked + .switch .slider::before { 
        transform: translateX(20px); 
        background-color: #fff; 
    }


    .btn-save {
        width: 100%; padding: 15px; border: none; background: #BA0B0B;
        color: white; font-weight: bold; cursor: pointer; border-radius: 50px;
    }

    .nav .active-page{
    color: var(--gold) !important;
    }

    .visible-sm{display: block !important;}

    .visible-lg{display: none;}

    /* Initial Form Styling */
    .main-form-wrapper { max-width: 400px; margin: 50px auto; }
    .btn-submit-main {
        width: 100%; padding: 15px; background: var(--gold);
        border: none; border-radius: 50px; color: #fff; font-weight: 700; cursor: pointer;
    }

    /* Modal Overlay */
    /* CRITICAL: High Z-Index to ensure it's on top */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #061023;
        backdrop-filter: blur(10px);
        z-index: 999999 !important; /* Force to front */
        display: none; /* JS will change this to flex */
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
    }

    .modal-content {
        /*background: var(--background--light);*/
        /*padding: 40px 0 0 0;*/
        box-sizing: border-box;
        width: 100%;
        /*height: 100%;*/
        position: relative;
        color: var(--white);
        overflow: scroll;
		animation: burgerPop 0.4s ease forwards;
    }

    .modal-content form{
        display: flex;
        flex-direction: row;
        flex-wrap:wrap;
        /*background: var(--background--light);*/
        box-sizing: border-box;        
        height: 100%;
        padding: 0;        
        margin:0 20px 10px 20px;
        overflow: scroll;
    }

    .modal-content h2{
        font-family: 'playfair_display', sans-serif;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        color: var(--white);
        font-size: 22px;
        padding: 0;
        margin: 50px 0 5px 0;
        text-align: center;

    }

    .modal-input, input, input[type="date"] {
        width: 100%;
        padding: 12px;
        margin: 10px 0;
        background: transparent;
        border: 1px solid #444;
        color: var(--charcoal);
        border-radius: 50px;
        box-sizing: border-box;
    }

    @keyframes slideUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Custom Styled Checkbox */
    /**/

    input[type="checkbox"]{
        transition: all 0.2s ease-in-out;
        animation: burgerPop 0.4s ease forwards;
    }    

    /* Specific override for disabled*/
    #disabled{
        border-color: var(--white); /* A bright blue for analytics */
    }

    #disabled:checked::before {
        box-shadow: inset 1em 1em #BA0B0B; /* Blue checkmark instead of Gold */
    }

    /* Specific override for Analytics and pref-marketing*/
    #pref-analytics, #pref-marketing, #form-toggle {
        transition: all 0.2s ease-in-out;
        animation: burgerPop 0.4s ease forwards;
        border-color:transparent; /* A bright blue for analytics */
    }

    #pref-analytics:checked::before, #pref-marketing:checked::before, #form-toggle:checked::before  {
        box-shadow: inset 1em 1em transparent; /* Blue checkmark instead of Gold */
    }

    /* The Checkmark (using a pseudo-element) */
    input[type="checkbox"]::before {
        content: "";
        width: 10px;
        height: 10px;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em #BA0B0B;
        transform-origin: bottom left;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    /* Display checkmark when checked */
    input[type="checkbox"]:checked::before {
        transform: scale(1);
    }

    /* Subtle 'Locked' effect for disabled state */
    input[type="checkbox"]:disabled {       
        background-color: #001a38 !important; /* Deeper Navy */
        opacity: 0.9;
        filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.2));
        width: 38px;
        height: 20px;
        border-radius: 4px;
        transition: all 0.2s ease-in-out;
        appearance: none !important;        
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-content: center !important;
    }

    /* The Checkmark (using a pseudo-element) */
    input[type="checkbox"]::before {
        content: "";
        width: 10px;
        height: 10px;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em #BA0B0B;
        transform-origin: bottom left;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    /* Display checkmark when checked */
    input[type="checkbox"]:checked::before {
        transform: scale(1);
    }    

/**/
}

@media screen and (min-width: 768px) and (max-width: 970px) {
	
/*==========================
  LOGO CONTAINER
==========================*/


        /* Overlay & Form Styling */
        .form-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: none; /* Hidden by default */
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .form-card {
            background: white;
            padding: 40px;
            border-radius: 30px;
            width: 100%;
            max-width: 400px;
            position: relative;
            animation: slideUp 0.3s ease;
            border-top: solid 6px var(--gold);
            border-bottom: solid 6px var(--gold);
        }

        .form-card h2{}

        .form-card p{
            color: #666 !important;
        }

        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 30px;
            background: none;
            border: none;
            cursor: pointer;
            color: #b70101;
            animation: burgerPop 0.4s ease forwards;
        }

        /* Form Elements */
        .form-group { margin-bottom: 15px; }
        input, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 50px;
            box-sizing: border-box;
            font-family: "SpaceGrotesk-Lite", sans-serif;
            animation: burgerPop 0.4s ease forwards;
        }

        .form-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            width: 100%;
            justify-content: space-between;
            align-content: space-between;
            align-items: center;
            justify-items: center;
        }

        .btn-submit { 
            background: var(--primary); 
            color: white; 
            border: none; 
            padding: 10px 20px; 
            border-radius: 50px; 
            cursor: pointer; 
            flex: 2; 
            font-family: 'Inter', sans-serif;
            animation: burgerPop 0.4s ease forwards;
            /*background-image: url("../images/stratfin_advisory_group_logo.svg");
            background-position: center right;
            background-position-x: ;
            background-position-y: ;
            background-size: 1000px;
            background-repeat: no-repeat;*/
        }
        
        .btn-reset { 
            background: #f0f0f0; 
            border: none; 
            padding: 10px 20px; 
            border-radius: 5px; 
            cursor: pointer; 
            /*flex: 1;*/ 
            color: #666; 
            border-radius: 50px;
            animation: burgerPop 0.4s ease forwards;
        }


	.sm{
		display: block;
	}
	
	.lg{
		display: none;
	}

	.scroll-btn {
		position: fixed;
		bottom: 160px;
		right: 12px;
		width: 20px;
		height: auto;
		cursor: pointer;
		display: none; /* Hidden by default */
		z-index: 2;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	.scroll-btn img {
		width: 100%;
		height: auto;
		/* Optional: Add a CSS bounce if the image isn't already animated */
		animation: bounce 2s infinite;
		transform: rotate(90deg);
		transform-origin: left;
	}

	.scroll-btn:hover {
		transform: scale(1.1);
	}

	/* Optional CSS Animation */
	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
		40% {transform: translateY(-10px);}
		60% {transform: translateY(-5px);}
	}


	/* DATE AND TIME */
	.datetime-container {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		text-align: center;
	}

	.datetime-container p {
		margin: 8px 0;
		font-size: 1.1em;
		color: #333;
	}

	.datetime-container p#region {
		font-style: italic;
		color: #777;
	}
	

	main-services{
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
	}

	half-1{display: flex;
		flex-direction: row;
		flex-wrap:wrap;}

	half-2{display: flex;
		flex-direction: row;
		flex-wrap:wrap;}

	.hide {
		display: none;
	}
	
	.switcher .here {
		background-color: red;
		text-decoration: none;
	}
	
	.side {
		display: flex;
		/*position: absolute;
		bottom: 50px;
		right: 20px;
		flex-wrap: wrap;*/
	}
	
	.btn {
		padding: 2px 4px;
		border-radius: 2px;
		display: inline-block;
		cursor: pointer;
		background: #808080;
		margin: 10px 0 0 0;
		transition: all ease-in 0.15s;
	}
	
	.btn:hover {
		background: #BA0B0B;
	}
	
	.btns {
		flex: 0.5 0;
		max-width: 100px;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		align-self: flex-end;
	}
	
	.hidden-xs {
		display: none;
	}
	
	.hidden-sm {
		display: none;
	}
	
	.hidden-md {
		display: none;
	}
	
	.show-lg {
		display: flex;
	}
	
	.loading {
		background-image: url("../images/gifs/blank.gif");
		background-position: center;
		background-origin: content-box;
		background-repeat: no-repeat;
		background-size: contain;
		height: auto;
	}
	
	.switch_mode {
		display: block;
		position: fixed;
		width: 40px;
		height: 40px;
		right: 30px;
		bottom: 250px;
		box-sizing: border-box;
		overflow: hidden;
		z-index: 800;
		border: none;
		text-decoration: none;
		background-repeat: no-repeat;
		background-image: url("../images/svg/full-screen-mode.svg");
		background-size: contain;
	}
	
	.switch_mode:hover {
		display: block;
		position: fixed;
		cursor: pointer;
		width: 40px;
		height: 40px;
		right: 30px;
		bottom: 250px;
		box-sizing: border-box;
		overflow: hidden;
		z-index: 800;
		border: none;
		text-decoration: none;
		background-repeat: no-repeat;
		background-image: url("../images/svg/full-screen-mode_2.svg");
		background-size: contain;
	}
	
	.switch_mode span {
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.switch_mode span img {
		width: 100%;
	}
	
	.more_button {
		display: block;
		position: absolute;
		width: 40px;
		height: 55px;
		right: 30px;
		bottom: 30px;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 12px;
		letter-spacing: 3px;
		z-index: 1000;
		border: none;
		text-decoration: none;
		background-image: url("../images/svg/blagol_more_button.svg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	
	.more_button:hover {
		display: block;
		cursor: pointer;
		position: absolute;
		width: 40px;
		height: 55px;
		right: 30px;
		bottom: 30px;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 12px;
		letter-spacing: 3px;
		z-index: 1000;
		border: none;
		text-decoration: none;
		background-image: url("../images/svg/blagol_more_button_2.svg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	
	.more_button span {
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.more_button span img {
		width: 100%;
	}
	
	.scroll_indicator {
		display: flex;
		position: fixed;
		z-index: 99999999999999999999999999999999999999999999999999999999999;
		bottom: 100px;
		right: 30px;
		padding: 15px;
		height: auto;
		background-color: #F2F2F2;
		border-radius: 8px;
		/*transform: rotate(360deg);*/
	}
	
	
	t_wrap {
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	user_dash {
		font-family: 'SpaceGrotesk-Lite' !important;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		box-sizing: border-box;
		border-radius: 50px;
		background-image: url("../images/svg/gray.svg");
		background-repeat: no-repeat;
		background-position-x: -400px;
		background-position-y: -10px;
		overflow: hidden;
		justify-content: right;
		align-content: right;
		gap: 10px;
		margin: 0 0 10px 0;
	}
	
	.acc_login {
		display: flex;
		box-sizing: border-box;
		padding: 5px;
		overflow: hidden;
		font-size: 12px;
		letter-spacing: 3px;
		z-index: 8000;
		border: none;
		background-
		border-radius: 50px;
		text-decoration: none;
	}
	
	.blagol_search {
		display: flex;
		box-sizing: border-box;
		padding: 5px;
		overflow: hidden;
		font-size: 12px;
		letter-spacing: 3px;
		z-index: 8000;
		border: none;
		background-
		border-radius: 50px;
		text-decoration: none;
	}
	
	.acc_login a span,
	.blagol_search a span {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		overflow: hidden;
		justify-self: center;
		align-self: center;
		text-align: left;
		box-sizing: border-box; #FFF;
		max-width: 36px !important;
		height: 22px;
		text-overflow: ellipsis;
		margin: 0 5px;
		letter-spacing: 0;
	}
	
	.acc_login a,
	.shopping_cart a,
	.blagol_search a {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		text-decoration: none;
		box-sizing: border-box;
		overflow: hidden;
		padding: 0 !important;
		margin: 0 !important;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	
	.acc_login img,
	.shopping_cart img,
	.blagol_search img {
		display: flex;
		width: 22px;
		height: 22px;
		box-sizing: border-box;
	}
	
	.shopping_cart {
		background-color: #BA0B0B;
		display: flex;
		box-sizing: border-box;
		padding: 0 5px;
		overflow: hidden;
		font-size: 12px;
		z-index: 99999999;
		border: none;
		border-radius: 50px;
		text-decoration: none;
		justify-content: center;
		align-content: center;
	}
	
	.shopping_cart a span {
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		border-radius: 50px;
		background-
		justify-content: center;
		text-align: center;
		width: 22px;
		height: 22px;
		font-size: 10px; #FFF;
		text-decoration: none;
		z-index: 999999999;
	}
	
	#searchBar {
		display: none;
	}
	
	.search_blagol {
		display: flex;
		width: 100%;
		padding: 5px;
		margin: 0 0 10px 0;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 12px;
		letter-spacing: 3px;
		z-index: 9999999;
		border: none;
		border-radius: 50px;
		background-color: #F8F8F9;
		box-shadow: inset 0 0 10px #CCCCCC;
		text-decoration: none;
	}
	
	.search_blagol form {
		display: flex;
		flex-wrap: nowrap;
		align-content: space-around;
		flex-direction: row;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	.search_blagol form input[type="text"] {
		display: flex;
		width: 80%;
		flex-direction: row;
		overflow: hidden;
		box-sizing: border-box;
		border: none;
		padding: 0 0 0 10px;
		font-size: 16px;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 100;
		background-color: transparent;
	}
	
	.search_blagol form input[type="text"]:focus {
		border-radius: 20px;
		border: solid 2px #BA0B0B;
		width: 70%;
		margin: 0 5% 0 0;
		
		user-select: none;
	}
	
	.search_blagol form input[type="submit"] {
		display: flex;
		content: "";
		width: 100%;
		justify-content: flex-end;
		flex-direction: row;
		background-color: transparent; transparent;
		cursor: pointer;
		overflow: hidden;
		box-sizing: border-box;
		border: none;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 16px;
	}
	
	.search_blagol form button {
		display: flex;
		content: "";
		width: 20%;
		flex-direction: row;
		background-image: url("../images/svg/search.svg");
		background-size: 28px 28px;
		background-position: center center;
		background-repeat: no-repeat;
		overflow: hidden;
		box-sizing: border-box;
		border: none;
		border-radius: 50px;
		
	}
	
	.search_blagol form button:hover {
		display: flex;
		content: "";
		width: 20%;
		flex-direction: row;
		background-image: url("../images/svg/search.svg");
		background-size: 28px 28px;
		background-position: center center;
		background-repeat: no-repeat;
		overflow: hidden;
		box-sizing: border-box;
		border: none;
		border-radius: 50px;
		
		box-shadow: inset 0 0 10px #CCCCCC;
	}
	
	.search_blagol a {
		padding: 0 !important;
		margin: 0 !important;
	}
	
	.search_blagol img {
		width: 30px;
	}
	
	.whatsapp-chat {
		position: fixed;
		left: 30px;
		bottom: 30px;
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		background-image: url("../images/svg/chat_us.svg");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		text-decoration: none;
	}
	
	.whatsapp-chat:hover {
		position: fixed;
		cursor: pointer;
		left: 30px;
		bottom: 30px;
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		background-image: url("../images/svg/chat_us_2.svg");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		text-decoration: none;
	}
	
	aside {
		position: fixed;
		left: 30px;
		bottom: 500px;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 12px;
		letter-spacing: 3px;
		z-index: 9000000000000000000;
		/*font-family: 'FFDINWebRegular' !important;*/
		border: none;
		border-radius: 4px;
		text-decoration: none;
	}
	
	.selected {
		display: flex;
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	
	.btn-container {
		text-align: center;
		display: flex;
		flex-direction: column;
		row-gap: 10px;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		position: absolute;
		bottom: 100px;
		right: 30px;
		width: 40px;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	.btn-container p {
		text-align: center;
		display: flex;
		flex-direction: row;
		margin: 0;
		font-size: 8px;
		letter-spacing: 1px;
		text-transform: uppercase;
		text-align: center;
		align-self: center;
		font-family: 'FFDINWebCondensedBold';
		box-sizing: border-box;
	}
	
	.btn-container button {
		display: flex;
		flex-direction: row;
		outline: none;
		padding: 12px;
		width: 40px;
		height: 40px;
		border: none;
		text-decoration: none;
		border-radius: 8px;
		cursor: pointer;
		box-sizing: border-box;
	}
	
	.pre {
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		background-image: url("../images/svg/down_arrow_2.svg");
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}
	
	.pre:hover {
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		background-image: url("../images/svg/down_arrow.svg");
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}
	
	.next {
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		background-image: url("../images/svg/up_arrow_2.svg");
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}
	
	.next:hover {
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		background-image: url("../images/svg/up_arrow.svg");
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}
	
	
	.acc_login:hover {
		opacity: 1;
		text-decoration: none;
	}
	
	.whatsapp-chat img {
		width: 40px;
	}
	
	themeControl {
		position: fixed;
		right: 30px;
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 25px;
		bottom: 320px;
		overflow: hidden;
	}
	
	.emailAddress {
		position: fixed;
		overflow: hidden;
		display: block;
		background-color: #BA0B0B;
		border-radius: 20px 10px 0 0;
		width: 434px;
		height: 86px;
		left: -180px;
		bottom: 205px;
		padding: 20px;
		transform: rotate(90deg);
	}

	.emailAddress a{
		text-decoration: none !important;
	}
	
	.emailAddress p {
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 18px;
		margin: 0;
		padding: 0;
		transform: rotate(-90deg);
		color: var(--body-color);
	}
	
	.emailAddress a {
		box-sizing: border-box;
		overflow: hidden;
		z-index: 8000;
		border: none;
		text-decoration: none;
	}
	
	.emailAddress a:hover {
		animation: fade-in-main-content .3 ease-in forwards;
		-webkit-animation: fade-in-main-content .3s ease-in forwards;
		-moz-animation: fade-in-main-content .3s ease-in forwards;
		opacity: 1;
		text-transform: underline;
	}
	
	.mail_to {
		position: fixed;
		left: 30px;
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		background-image: url("../images/svg/email_us.svg");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		bottom: 100px;
		overflow: hidden;
	}
	
	.mail_to:hover {
		position: fixed;
		cursor: pointer;
		left: 30px;
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		background-image: url("../images/svg/email_us_2.svg");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		bottom: 100px;
	}
	
	.mail_to a,
	.whatsapp-chat a {
		box-sizing: border-box;
		display: block;
		width: 100%;
		height: 100%;
		text-decoration: none;
	}
	
	.mail_to img {
		width: 50px;
	}
	
	/* FOOTER STYES */
	.footer {
		display: flex;
		width: 100vw;
		height: 100vh;
		padding: 0 30px;
		box-sizing: border-box;
		overflow: hidden;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: center;
		background-color: black;
		padding: 100px 0 0 0;
	}
	
	.footer top {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-content: center;
		gap: 10px;
		overflow: hidden;
		padding:0 40px;
	}
	
	.footer top container {
		display: flex;
		box-sizing: border-box;
		flex-wrap: wrap;
		overflow: hidden;
	}
	
	.footer top container:nth-child(1),
	.footer top container:nth-child(2),
	.footer top container:nth-child(3) {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 33.3%;
		box-sizing: border-box;
	}
	
	.footer top container:nth-child(4) {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		box-sizing: border-box;
	}
	
	.footer top container p {
		display: flex;
		margin: 0 0 20px 0;
		font-family: 'SpaceGrotesk-Lite' !important; #FFF;
		font-size: 14px;
		overflow: hidden;
	}
	
	.footer top container h2 {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 16px;
		font-weight: 400; #FFF;
		margin: 0 0 20px 0;
	}
	
	.footer top container a {
		display: flex;
		width: 100%;
		text-decoration: none;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 14px;
		font-weight: 300;
	}
	
	.footer top container a img {
		width: 20px;
		height: 20px;
		margin: 0 10px 0 0;
	}
	
	.footer top container a:hover {
		text-decoration: none; #3D5DAA;
	}
	
	.footer top container wrap_contact {
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
	}
	
	.footer top container wrap_add {
		display: flex;
		width: 70%;
		flex-wrap: wrap;
	}
	
	.footer top container wrap_map {
		width: 30%;
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		flex-wrap: nowrap;
		border-radius: 8px;
	}
	
	.footer bottom {
		display: flex;
		flex-direction: row;
		width: 80%;
		padding: 0 20px;
		overflow: hidden;
	}
	
	.footer bottom container {
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: column;
		align-content: center;
		justify-content: center;
		width: 100%;
		overflow: hidden;
	}
	
	.footer bottom container p {
		display: flex;
		text-align: center;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 300;
		letter-spacing: 0.4px;
		font-size: 14px;
	}
	
	.footer bottom container img {
		display: flex;
		align-content: center;
		justify-content: center;
		width: 64px;
		height: auto;
		margin: 20px auto;
	}
	
	/* INDEX STYLES*/
	.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/gifs/blagol_index_bg.gif");
		/*background-image: url(images/png/blagol_hero3.png);*/
		/*background-position: center;*/
		background-position-y: 180px;
		background-position-x: 300px;
		background-repeat: no-repeat;
		background-size: 800px;
	}
	
	.about_middle {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: space-between;
		height: 100vh;
		width: 100vw;
		box-sizing: border-box;
		padding: 120px;
		
		overflow: hidden;
		background-image: url();
		background-position-x: center;
		background-position-y: 170px;
		background-repeat: no-repeat;
		background-size: 500px;
	}
	
	.about_middle middle_wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: auto;
		align-items: center;
		padding: 0 0 20px 0;
		height: 100vh;
		width: 100vw;
	}
	
	.index_middle middle_wrap wrap {
		display: flex;
		/*width: 100%;
		height: 100vh;*/
		flex-wrap: wrap;
		flex-direction: row;
	}
	
	.index_middle middle_wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		height: 100vh;
		width: 100%;
		overflow: hidden;
	}
	
	.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;*/
	}
	
	#scrollme {
		position: absolute;
		left: 50%;
		bottom: 15px;
		width: 30px;
		height: 20px;
		margin: 0 0 0 -15px;
		animation: bouncey 3s infinite;
		-webkit-animation: bouncey 3s infinite;
		animation-name: bouncey;
	}
	
	#wrapper #scrollme svg {
		stroke: #fff;
		fill: transparent;
	}
	
	svg:not(:root) {
		overflow: hidden;
	}
	
	.index_middle centre p {
		display: flex;
		margin: auto;
		content: 'scroll Down';
		box-sizing: border-box;
		overflow: hidden;
		justify-content: center;
		align-content: center;
		font-family: 'SpaceGrotesk-Lite' !important; #6d6e70;
		font-size: 14px;
		font-weight: 300;
	}
	
	.middle_red,
	.middle_blue,
	.middle_white,
	.middle_black {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 140px;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}
	
	.middle_red {
		
	}
	
	.middle_blue {
		background-repeat: no-repeat;
		background-position: 400px 120px;
		background-image: url();
		
	}
		
	.middle_blue wrap {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
	}
	
	.middle_blue wrap left {
		display: flex;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		order: 2;
	}
	
	.middle_blue wrap left h2 {
		margin: 0;
		display: block;
		width: 100%;
		letter-spacing: -3px;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 50px;
		line-height: 60px;
		font-weight: 600; #3D5DAA;
	}
	
	.middle_blue wrap left h2 span {
		margin: 0;
		display: block;
		box-sizing: border-box;
		overflow: hidden;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 600;
		text-transform: capitalize;
		font-size: 50px;
	}
	
	.middle_blue wrap left p {
		display: block;
		margin: 40px 0 0 0;
		width: 100%;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 24px;
		font-weight: 100;
	}
	
	.middle_blue wrap left a {
		display: flex;
		flex-direction: row;
		margin: 40px auto 0 0;
		width: auto;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 20px;
		font-weight: 100;
		background: linear-gradient(to right, #BA0B0B, #3D5DAA);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: left;
		text-decoration: none;
	}
	
	.middle_blue wrap left a:hover {
		text-decoration: none;
		background: linear-gradient(to right, #3D5DAA, #CC9933);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.middle_blue wrap left links {
		box-sizing: border-box;
		display: flex;
		overflow: hidden;
		flex-direction: row;
		width: 70%;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	.middle_blue wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 80%;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_blue wrap right web_dev_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 400px;
		background-repeat: no-repeat;
		background-image: url("../images/svg/blagol_web_dev_bg.svg");
		align-items: center;
		margin: 20px 0 0 0;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.middle_blue wrap right web_dev_bg img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 150px;
		height: auto;
		margin: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_red wrap right ui_d {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: 400px;
		width: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_ui_d.svg");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
		margin: 0 0 50px 0;
	}
	
	.middle_red wrap right ui_d img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 150px;
		height: auto;
		margin: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_red wrap right email_temp_d {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 400px;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_html_email_temp.svg");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.middle_red wrap right email_temp_d img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 150px;
		height: auto;
		margin: 0;
		left: 50px;
		bottom: -100px;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_blue wrap right graphics_des_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: 400px;
		width: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_graphics_des_bg.svg");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.middle_blue wrap right graphics_des_bg img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 130px;
		height: auto;
		margin: 0;
		left: 110px;
		bottom: -72px;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}
	
	.middle_red wrap right vir_ass {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 400px;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_virtual_assistant.svg");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.middle_red wrap right vir_ass img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 150px;
		height: auto;
		margin: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_blue wrap right gif_anime {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 400px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_gif_anime_bg.svg");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.middle_blue wrap right gif_anime img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 150px;
		height: auto;
		margin: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_red wrap right signage_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 400px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_signage_bg.svg");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.middle_red wrap right signage_bg img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 150px;
		height: auto;
		margin: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_blue wrap right copy_writing {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 400px;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_copywriting_bg.svg");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.middle_blue wrap right copy_writing img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 150px;
		height: auto;
		margin: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_red wrap right product_branding_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 400px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_product_branding_bg.svg");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.middle_red wrap right product_branding_bg img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 150px;
		height: auto;
		margin: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_red wrap right seo_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 400px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_seo_bg.svg");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.middle_red wrap right seo_bg img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 150px;
		height: auto;
		margin: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}
	
	.middle_red wrap right blagol_craft_store_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 400px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_craft_store.svg");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.middle_red wrap right blagol_craft_store_bg img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 150px;
		height: auto;
		margin: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}
	
	.middle_red wrap right blagol_blog_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 400px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_blog_bg.svg");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.about_middle middle_wrap wrap right get_started_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow: hidden;
		width: 100%;
		height: 400px;
		border-radius: 20px;
		background-repeat: no-repeat;
		background-position: right;
		background-image: url("../images/svg/blagol-img-bg.svg");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.about_middle middle_wrap wrap right get_started_bg img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 276px;
		margin: 0 auto 0 0;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}
	
	.middle_red wrap right blagol_blog_bg img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 150px;
		height: auto;
		margin: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}
	
	.middle_red wrap left p {
		display: block;
		margin: 40px 0 0 0;
		width: 100%;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 24px;
		font-weight: 200;
	}
	
	.middle_red wrap left a {
		display: flex;
		margin: 40px auto 0 0;
		width: auto;
		flex-direction: row;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 20px;
		font-weight: 100;
		background: linear-gradient(to right, #3D5DAA, #BA0B0B);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: left;
		text-decoration: none;
	}
	
	.middle_red wrap left a:hover {
		text-decoration: none;
		background: linear-gradient(#BA0B0B, #24408F);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.middle_blue wrap right {
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.middle_blue wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 25%;
		float: right;
		margin: 0 31% 0 auto;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_blue wrap right span {
		position: absolute;
		box-sizing: border-box;
		overflow: hidden;
		margin: 40px 0 0 0;
	}
	
	.middle_blue wrap right span img {
		box-sizing: border-box;
		width: 482px;
		margin: auto;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	
	.middle_red wrap {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
	}
	
	.middle_red wrap left {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		order: 2;
	}
	
	.middle_red wrap left h2 {
		display: block;
		margin: 0;
		letter-spacing: -3px;
		text-transform: normal;
		box-sizing: border-box;
		overflow: hidden;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 600;
		font-size: 50px;
		line-height: 60px; #000000;
	}
	
	.middle_red wrap left h2 span {
		display: block;
		width: 100%;
		text-transform: normal;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 50px;
		font-weight: 600; #3D5DAA;
	}
	
	.middle_red wrap left links {
		box-sizing: border-box;
		display: flex;
		overflow: hidden;
		flex-direction: row;
		width: 70%;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	.middle_red wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 80%;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_red wrap right web_dev_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	
		background-image: url("../images/svg/blagol_cool.svg");
		align-items: center;
	}
	
	.middle_red wrap right {
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.middle_red wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 30%;
		margin: 20px auto;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_red wrap right span {
		position: absolute;
		box-sizing: border-box;
		overflow: hidden;
		margin: 40px 0 0 0;
	}
	
	.middle_red wrap right span img {
		box-sizing: border-box;
		width: 482px;
		margin: auto;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.about_middle wrap left {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
	}
	
	.section2 .about_middle middle_wrap wrap left a {
		display: flex;
		width: auto;
		flex-direction: row;
		box-sizing: border-box;
		background: linear-gradient(to right, #BA0B0B, #3D5DAA);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-decoration: none;
		font-size: 24px;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 700;
	}
	
	.section2 .about_middle middle_wrap wrap left a:hover {
		background: linear-gradient(to right, #3D5DAA, #BA0B0B);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.about_middle wrap left h2 {
		display: flex;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		text-transform: normal;
		box-sizing: border-box;
		overflow: hidden;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 100;
		font-size: 50px;
		line-height: 52px; #000000;
	}
	
	.about_middle wrap left h2 span {
		display: flex; #3D5DAA;
		flex-direction: row;
		width: 100%;
		text-transform: lowercase;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 60px;
		font-weight: normal;
		line-height: 60px;
	}
	
	.about_middle wrap left links {
		box-sizing: border-box;
		display: flex;
		overflow: hidden;
		flex-direction: row;
		width: 70%;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	.index_middle wrap left {
		display: flex;
		align-items: center;		
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		margin: 0 0 0 40px;
	}

	.index_middle middle_wrap wrap left{
		box-sizing: border-box;
		display: flex;
		overflow: hidden;
		flex-direction: row;
		position: fixed;
		bottom: 200px;
		left: 100px;
		right: 100px;
		margin: 0 !important;
	}

	.index_middle middle_wrap wrap left h2 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
		box-sizing: border-box;
		overflow: hidden;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 28px;
		margin: 30px 0 10px 0;
		line-height: 28px;	
	}
		
	.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;
	}
	
	.black,
	.gray,
	.blue,
	.yellow {
		display: flex;
		justify-content: center;
		font-family: 'FFDINWebRegular' !important;
		box-sizing: border-box;
		width: 150px;
		border-radius: 8px;
		padding: 10px;
	}
	
	.black:hover,
	.gray:hover,
	.blue:hover,
	.yellow:hover {
		text-decoration: none;
		border-bottom: #3D5DAA solid 2px;
		cursor: pointer;
	}
	
	.black {
		background-color: #000000;
	}
	
	.gray {
		background-color: #808080;
	}
	
	.blue {
		background-
	}
	
	.yellow {
		background-color: #BA0B0B;
	}
	
	.black a,
	.gray a,
	.blue a,
	.yellow a {
		display: flex;
		align-self: center;
		box-sizing: border-box; #FFF;
		text-align: center !important;
		font-size: 16px;
		text-decoration: none;
	}
	
	.black a:hover,
	.gray a:hover,
	.blue a:hover,
	.yellow a:hover {
		text-decoration: none;
		cursor: pointer;
	}
	
	.about_middle middle_wrap wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		height: 100vh;
		align-items: center;
		justify-content: center;
		align-content: flex-start;
	}
	
	.about_middle wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		padding: 0 0 20px 0;
	}
	
	.about_middle wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 80%;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}
	
	.about_middle wrap right {
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.about_middle wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.about_middle wrap right span {
		position: absolute;
		box-sizing: border-box;
		overflow: hidden;
		margin: 40px 0 0 0;
	}
	
	.about_middle wrap right span img {
		box-sizing: border-box;
		width: 482px;
		margin: auto;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.index_middle wrap right {
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.index_middle wrap right img {
		box-sizing: border-box;
		width: 100%;
		overflow: hidden;
		animation: fade-in-maincontent 1s .2s ease-in forwards
	}
	
	.index_middle wrap right span {
		position: absolute;
		box-sizing: border-box;
		overflow: hidden;
		margin: 40px 0 0 0;
	}
	
	.index_middle wrap right span img {
		box-sizing: border-box;
		width: 482px;
		margin: auto;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.services_col {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		align-items: center;
		row-gap: 30px;
	}
	
	.hanger {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		align-content: space-between;
	}
	
	.hanger img {
		position: relative;
		flex-direction: row;
		right: -770px;
		top: 50px;
		width: 80px;
		height: 80px;
		display: flex;
		overflow: hidden;
	}
	
	.hanger h2 {
		width: 100%;
		margin: 0 0 20px 0;
		border-radius: 2vmin/2vmin; #6d6e70;
		font-family: 'blagolCurly' !important;
		font-size: 30px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		align-self: center;
		justify-content: center
	}
	
	.services_col h2 {
		width: 100%;
		margin: 0 0 20px 0;
		border-radius: 2vmin/2vmin; #6d6e70;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 30px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		align-self: center;
		justify-content: center;
	}
	
	.services_col .first {
		width: 100%;
		margin: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 30px 0px;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: space-between;
	}
	
	.services_col .third {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 30px 0px;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: space-between;
	}
	
	.services_item {
		align-items: flex-start;
		display: flex;
		overflow: hidden;
		width: 33.3%;
		clear: both;
		justify-content: space-between;
		transition: background-color 0.5s ease;
	}
	
	.services_item img {
		width: 60%;
		display: flex;
		margin: auto;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.services_col .second {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: space-between;
	}
	
	.stick-to-right {
		display: block;
		float: right !important;
		overflow: hidden;
		box-sizing: border-box;
		margin: 50px 50px 0 0;
	}
	
	.stick-to-right .thin {
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 48px;
		text-align: right;
		line-height: 60px;
		margin: 0;
	}
	
	.learn-more-button-white {
		display: block;
		margin: 12px 0 0 0;
		width: 180px;
		float: right;
	}
	
	.learn-more-button-white a {
		display: block;
		line-height: 50px;
		min-height: 50px;
		text-decoration: none;
		text-align: center;
		border-radius: 4px;
		box-sizing: border-box;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 14px;
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: 0.6px;
	}
	
	.learn-more-button-white a:hover {
		display: block;
		text-decoration: none; #fff;
		background-color:
	}
	
	.our-contact-white {
		display: block;
		margin: 12px 20px 0 0;
		width: 180px;
		float: right;
	}
	
	.our-contact-white a {
		display: block;
		text-decoration: none;
		text-align: center;
		line-height: 50px;
		min-height: 50px;
		border-radius: 4px;
		box-sizing: border-box;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 0.6px;
		background-color: #BA0B0B;
	}
	
	.our-contact-white a:hover {
		display: block;
		text-decoration: none;
		
		border: 1px solid
	}
	
	.topnav {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		overflow: hidden;
		position: relative;
		margin: 30px;
	}
	
	#myLinks {
		display: none;
		overflow: hidden;
		background-color: #FFFFFF;
		position: absolute;
		top: 80px;
		right: 30px;
		left: 30px;
		border-radius: 8px;
		z-index: 999999999999999999999999999999;
		margin: 0;
		padding: 20px 20px 10px 20px;
		border: 1px solid #3D5DAA;
		border-radius: 8px;
		box-sizing: border-box;
		box-shadow: inset 0 0 10px #CCCCCC;
	}
	
	#myLinks .effect {
		box-sizing: border-box;
		display: block;
		position: relative;
		width: 20px;
		height: 20px;
		bottom: 0px;
		left: -20px;
		border-radius: 0 15px 0 0;
		background-
	}
	
	#myLinks .menu_item {
		display: block;
		overflow: hidden;
		cursor: pointer;
	}
	
	#myLinks .menu_item img {
		display: inline-block;
		width: 22px;
	}
	
	#myLinks .menu_item span {
		font-family: 'SpaceGrotesk-Lite' !important;
		padding: 0px 10px 5px 0;
		letter-spacing: 0.4px;
		display: inline-block;
		margin: 0 0 0 20px;
		position: relative;
		top: -5px; #000000;
	}
	
	.topnav a {
		padding: 10px 10px 10px 0;
		text-decoration: none;
		display: block;
	}
	
	.topnav a.icon {
		padding: 0;
		display: flex;
		z-index: 9999999999999999999999999999999999999999999999999;
		right: 0px;
		top: 0;
	}
	
	
	.logo {
		display: flex;
		overflow: hidden;
		text-decoration: none;
		font-weight: 800;
	}
	
	.logo img {
		display: flex;
		height: 30px;
	}
	
	.logo a {
		text-decoration: none;
		padding: 0;
	}
	
	.name {
		display: flex;
		margin: auto;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 18px;
		letter-spacing: 8px;
		text-align: center;
	}
	
	.name a {
		text-decoration: none;
		padding: 0;
	}
	
	.jump-nav-bg {
		background-image: url("../images/jump.png");
		background-position: center;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	
	.top-padded {
		padding-top: 100px;
	}
	
	.header-image {
		box-sizing: border-box;
		text-align: center;
		padding: 70px 0 50px 0;
		background-image: url("../images/png/blagol_hero.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 600px;
		display: block;
		overflow: hidden;
	}
	
	
	.header-image img {
		display: inline-block;
		width: 65%;
		margin: auto;
		position: relative;
		top: -20px;
	}
	
	.--coded {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url("../images/svg/blagol_home_bg2.svg");
		padding: 0px 100px 0px 100px;
	}
	
	.scroll-down {
		width: 2%;
		text-decoration: none;
		font-family: CoinBaseRegular !important;
		font-weight: 300;
		font-size: 14px;
		margin-right: auto;
		margin-left: auto;
	}
	
	.jump-nav-bg {
		background-image: url("../images/jump.png");
		background-position: center;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
		padding-top: 100px;
		padding-bottom: 100px;
	}
	
	.top-padded {
		padding-top: 20px;
	}
	
	.scroll-down {
		width: 20px;
		height: 20px;
		margin-right: auto;
		margin-left: auto;
	}
	
	.container {
		width: auto;
	}
	
	.img-padder {
		padding-top: 10px;
		width: 10%;
	}
	
	.flow-padder-top {
		display: block;
	}
	
	.flow-padder-social {
		padding-top: 60px;
		display: block;
		padding-bottom: 60px;
	}
	
	.flow-padder-contact {
		padding-top: 100px;
		padding-bottom: 100px;
		display: block;
	}
	
	.banner-pos {
		padding-top: 250px;
		background-attachment: fixed;
		background-image: url();
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	.uiux-design-pad-left-sm {
		padding: 0;
	}
	
	.graphics-design-pad-right-sm {
		padding: 0;
	}
	
	.mobile-padder-100 {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	
	.mobile-padder-top {
		padding-top: 0;
	}
	
	.text-align-center-lg {
		text-align: left;
	}
	
	.magic-line {
		width: 0%;
		height: 500px;
		margin-left: 0px;
		;
		background-color:
		border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #FFF;
	}
	
	.image--adjuster {
		padding-top: 70px;
	}
	
	.flow-padder-top {
		padding-top: 100px;
		display: block;
	}
	
	.flow-padder-bottom {
		display: block;
	}
	
		
	.case-study-button a {
		padding-top: 10px;
		padding-right: 20px;
		padding-bottom: 10px;
		padding-left: 20px;
		width: 100px;
		margin-right: auto;
		margin-left: auto;
		text-decoration: none; #FFF;
		background-color:
	}
	
	.case-study-button a:hover {
		padding-top: 10px;
		padding-right: 20px;
		padding-bottom: 10px;
		padding-left: 20px;
		width: 100px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 20px;
		margin-bottom: 50px;
		text-decoration: none;
		
		border: 1px solid
	}
	
	.case-study-button a span {
		padding-left: 20px;
	}
	
	
	.thin {
		font-family: "Montserrat Light";
		font-weight: 100;
	}
	
	.dotted {
		padding-left: 10px;
	}
	
	.contact-link a {
		text-decoration: underline;
	}
	
	.contact-link a:hover {
		text-decoration: underline;
	}
	
	.kill-underline {
		text-decoration: none !important;
	}
	
	.tester {
		border-top-width: 1px;
		border-right-width: 1px;
		border-top-style: solid;
		border-right-style: solid;
		border-top-color: #FFF;
		border-right-color: #FFF;
	}
	
	.title-quote {
		font-family: 'gotham-100'
	}

}

@media screen and (min-width:971px){
	
/*==========================
  LOGO CONTAINER
==========================*/


/* Overlay & Form Styling */
    @keyframes slideUp {
        from { transform: translateY(50px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .form-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        display: none; /* Hidden by default */
        justify-content: center;
        align-items: center;
        z-index: 999999999;
    }

    .form-card {
        
        padding: 30px;
        border-radius: 15px;
        width: 90%;
        max-width: 400px;
        position: relative;
        animation: slideUp 0.3s ease;
        font-family: "SpaceGrotesk-Lite", sans-serif;
		border: solid 2px;
    }

    .form-card p {
        
    }       
    
    .form-card #contactForm{
        
    }

    .form-card #contactForm .form-group{
        
    }

    .form-card #contactForm .form-actions .btn-reset {
        background: #f0f0f0;
        border: none;
        padding: 10px 20px;
        border-radius: 50px;
		font-weight: 500;
		font-size: 13px;
        cursor: pointer;
        flex: 1;
        color: #666;
        animation: burgerPop 0.4s ease forwards;
        font-family: "SpaceGrotesk-Bold", sans-serif; 
    }

    .form-card #contactForm .form-actions .btn-submit{ 
        animation: burgerPop 0.4s ease forwards;
		background: #BA0B0B;
		color: #fff;
		border: none;
		padding: 8px 16px;
		border-radius: 50px;
		font-weight: 500;
		font-size: 13px;
		cursor: pointer;
		transition: transform 0.2s, background 0.3s;
		font-family: "SpaceGrotesk-Bold", sans-serif;  
    }

    .form-card #contactForm .form-group input{
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 1px solid #ddd;
        border-radius: 50px;
        box-sizing: border-box;
        font-family: "SpaceGrotesk-Lite", sans-serif;
        animation: burgerPop 0.4s ease forwards; 
    }

    .form-card #contactForm .form-group textarea {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 1px solid #ddd;
        border-radius: 20px;
        box-sizing: border-box;
        font-family: "SpaceGrotesk-Lite", sans-serif;
        animation: burgerPop 0.4s ease forwards;
    }


    /* Form Elements */
        #tax-filing {
        display: flex;
        flex-direction: row;
        flex-wrap:wrap;
        justify-content: space-between;
        align-content: space-between;
        width:100%;
        height: auto;
        text-align: left;
        background: #DDC798;
        border-radius: 50%;
        margin: 80px auto 200px auto;
        padding: 0;

    }

    #tax-filing wrapper-inner {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        padding: 0;
        overflow: visible;
        align-self: center;
        align-items: center;
        justify-items: center;
        row-gap: 20px;
        margin: 0;
    }
    
    #tax-filing h2{
        display: flex;
        flex-direction: row;
        flex-wrap:nowrap; 
        width: 100%;
        margin: 0 ;
        padding: 0;
        line-height: 40px;
        font-family: 'Lato', sans-serif;
    }

    #tax-filing h2.quote {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        margin: 0;
        padding: 54px;
        border-left: #F4F5F7 solid 4px;
        overflow: hidden;
        align-self: center;
        align-items: center;
        justify-items: center;
        line-height: 40px;
        background-color: #0A1D3E;
        border-radius: 0 13px 13px 0;
    }

    #tax-filing h1 {
        font-family: 'playfair_display', sans-serif;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
        font-size: 36px;
        font-weight: 700;
        color: white;
        text-align: left;
        color: var(--black);
    }
    
    #tax-filing .tax-filing{
        display: flex;
        flex-direction: row;
        flex-wrap:nowrap;
        justify-content: space-between;
        align-content: space-between;
        width: 100%;
        row-gap: 40px;
        column-gap: 20px;
        padding: 0 0 10px 0;
        overflow: visible;
    }

    #tax-filing tax-filing{
        display: flex;
        position: relative;
        top: 120px;
        flex-direction: row;
        flex-wrap:nowrap;
        justify-content: space-between;
        align-content: space-between;
        width: 100%;
        height: auto;
        row-gap: 40px;
        column-gap: 20px;
        padding: 0 0 10px 0;
        overflow: visible;
        margin: 0;
    }

    #tax-filing tax-filing wrapper{ 
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap:nowrap;
    }

    #tax-filing new-tax-filing wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
    }

    #tax-filing new-tax-filing wrapper #tax-filing-form{
        display: flex;
        flex-direction: row;             
        flex-wrap: wrap;           
        width: 100%;
        font-family: "SpaceGrotesk-Lite", sans-serif;
    }

    #tax-filing new-tax-filing wrapper #tax-filing-form .form-group {
        display: flex;
        flex-direction: row;             
        flex-wrap: wrap;           
        width: 100%;
        margin: 0;
    }

    #tax-filing new-tax-filing wrapper #tax-filing-form .form-group input{
        border: solid 3px var(--black);
        border-radius: 50px 'Inter', sans-serif;
        letter-spacing: .36px;
        font-size: 24px;
        background-color: var(--white);
        
    }

    #tax-filing new-tax-filing wrapper #tax-filing-form .form-group textarea{
        border: solid 3px var(--black);
        border-radius: 20px;
        font-family: 'Inter', sans-serif;
        letter-spacing: .36px;
        font-size: 24px;
        background-color: var(--white);
        
    }

    #tax-filing new-tax-filing wrapper #tax-filing-form .form-actions {
        display: flex;
        flex-direction: row;             
        flex-wrap: wrap;           
        width: 100%;
    }

    #tax-filing new-tax-filing wrapper #tax-filing-form .form-actions .btn-submit{
        width: 100%;
        display: flex;
        flex-direction: row;             
        flex-wrap: wrap;     
        padding: 10px 20px;  
        animation: burgerPop 0.4s ease forwards;
        border-radius: 50px;
        cursor: pointer; 
        justify-items: center;
        align-items: center;
    }

    #tax-filing new-tax-filing wrapper #tax-filing-form .form-actions .btn-submit p{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-content: space-between;
        justify-items: center;
        padding: 0;
        margin: 0;
        width: 100%;
        box-sizing: border-box;                       
        font-size: 24px;
        letter-spacing: .36px;
        font-weight: 300;
        font-family: 'Inter', sans-serif;
        animation: burgerPop 0.4s ease forwards;            
        cursor: pointer;
    }

    .btn-submit{ 
        background: var(--gold);
        border: none; 
    }

        .btn-submit svg {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-content: space-between;
        padding: 0;
        margin: 0;
        width: 20px;
        height: 20px;
    }

    .btn-submit p{             
        color: var(--navy);      
    }

    .btn-submit p:hover{ 
        color: var(--gold) !important;      
    }

    .btn-submit:hover{ 
        background:var(--navy) !important;  
        color:var(--gold) !important;  
        fill:var(--gold);     
    }

    .btn-submit:hover .fil77{            
        fill:var(--gold);           
    }

    /* Optional: Make the arrow move slightly to the right */
    .btn-submit:hover .dynamic-link-arrow{
        transform: translateX(5px);
    }   

    .dynamic-link-arrow {
    transition: transform 0.3s ease; /* For the nudge effect */}  
    
    

    .btn-reset { 
        background: #f0f0f0; 
        border: none; 
        padding: 10px 20px; 
        border-radius: 5px; 
        cursor: pointer; 
        flex: 1; 
        color: #666; 
        animation: burgerPop 0.4s ease forwards;
        font-family: "SpaceGrotesk-Lite", sans-serif;
    }

    .close-btn {
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 30px;
        background: none;
        border: none;
        cursor: pointer;
        color: #b70101;
        animation: burgerPop 0.4s ease forwards;
    }

    /* Get TAX ID */
    .tax-filing-form {
        
        padding: 40px;
        border-radius: 50px 50px 50px 30px;
        border: 6px solid var(--gold);
        width: 90%;
        max-width: 400px;
        position: relative;
        animation: slideUp 0.3s ease;
        font-family: "SpaceGrotesk-Lite", sans-serif;
        margin: 0 0 0 -6px;
    }

    .form-card p {
        /**/
    }       
    

    /* Form Elements */
    .form-group { margin-bottom: 15px; }
    input, 
    textarea {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 2px solid;
        border-radius: 50px;
        box-sizing: border-box;
        font-family: "SpaceGrotesk-Lite", sans-serif;
        animation: burgerPop 0.4s ease forwards;
    }

    .form-actions {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }

    .tax-filing-form .btn-submit { 
        background: var(--primary); 
        color: var(--navy);
        border: none; 
        padding: 6px 20px;
        font-size: 24px; 
        font-weight: 400;
        line-height: 40px;
        letter-spacing: 0.36;
        border-radius: 50px; 
        cursor: pointer; 
        flex: 2;
        animation: burgerPop 0.4s ease forwards; 
        font-family: "SpaceGrotesk-Lite", sans-serif;
    }


	/* 1. LAYOUT & POSITIONING */
    .cookie-notice-wrapper {
        position: fixed;
        bottom: 30px;
		left: 140px;
		margin: 0 auto;
        z-index: 999999999999999999999999999; /* Ensure it stays above everything */
        max-width: 450px;
        background: rgba(26, 26, 26, 0.95);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(186, 11, 11, 0.4);
        border-radius: 20px;
        padding: 25px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
        display: none; /* Hidden by default, shown via JS */		
		animation: burgerPop 0.4s ease forwards;
        /*animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);*/
    }

    /* 2. TYPOGRAPHY */

    .cookie-text h2 {
        color: #e0e0e0;
        font-size: 14.6px;
        line-height: 1.6;
        letter-spacing: 1.2px;
        margin: 0 0 20px 0;
        font-family: 'SpaceGrotesk-Bold', sans-serif;
		font-weight: 300;
    }

    .cookie-text p {
        color: #e0e0e0;
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 20px;
        font-family: 'SpaceGrotesk-Lite', sans-serif;
		font-weight: 300;
    }
    

    .gold-link {
        color: #3D5DAA;
        text-decoration: underline;
        transition: opacity 0.3s;
		font-family: "SpaceGrotesk-Bold", sans-serif;
    }
    .gold-link:hover { 
		color: #FFF;
		/*opacity: 0.4; */
	}

    /* 3. BUTTONS */
    .cookie-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .btn-sharing {
        font-size: 12px;
        color: #3D5DAA;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
        font-family: "SpaceGrotesk-Lite", sans-serif;
        text-decoration-style: solid;
        text-decoration-thickness: 1px;
        text-decoration: underline;
        text-underline-offset: 7px;
        text-decoration-color: #3D5DAA;
		font-family: "SpaceGrotesk-Bold", sans-serif;
    }

    .btn-sharing:hover { 
        color: #fff; 
        text-decoration-style: solid;
        text-decoration-thickness: 1px;
        text-decoration: underline;
        text-underline-offset: 7px;
        text-decoration-color: #fff;
        /*text-decoration-color: rgba(200, 155, 60, 0.3);*/
    }

    .btn-agree {
        background: #BA0B0B;
        color: #fff;
        border: none;
        padding: 8px 16px;
        border-radius: 50px;
        font-weight: 500;
        font-size: 13px;
        letter-spacing: 1.2px;
        cursor: pointer;
        transition: transform 0.2s, background 0.3s;
        font-family: 'Inter', sans-serif;
    }

    .btn-agree:hover {
        padding: 8px 16px;
        background: linear-gradient(135deg, #012957 0%, #0c4a9c 50%, #196cdf 100%);      
        /*border: 2px solid rgba(200, 155, 60, 0.3); */       
        border-radius: 50px;
        transition: transform 0.2s, background 0.3s;
    }

	.cookie-actions .settings-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}

	.cookie-actions .settings-wrap img, .cookie-actions .settings-wrap svg {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 20px;
		height: auto;
	}

    /* COOKIE SHARING SETTING - RESTORED & FIXED */
    .settings-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
        z-index: 9999999999; /* Restored your z-index */
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .modal-content {
        background: #19191B;
        width: 100%;
        max-width: 500px;
        border: 1px solid #BA0B0B;
        border-radius: 12px;
        color: #fff;
        overflow: hidden;
    }

    .modal-header {
        padding: 20px;
        border-bottom: 1px solid #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-header h3 { 
		color: #BA0B0B;
		margin: 0; 
		font-size: 1.2rem; 
		font-family: 'SpaceGrotesk-Bold' !important;
	}

    .close-modal { 
        background: none; 
        border: none; 
        color: #b70101;
        font-size: 32px; /* Made slightly larger for easier clicking */
        cursor: pointer; 
        line-height: 1;
        padding: 0 5px;
        position: relative;
        z-index: 10; /* Ensures it stays on top of header text */
    }

    .modal-body { padding: 20px; }

    .setting-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 15px 0;
        border-bottom: 1px solid #333;
    }

    #form-toggle input[type="checkbox"]{
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }

    #form-toggle input[type="checkbox"]::before {
        display: none;
    }

    
    /**/

    /* Specific override for disabled*/
    #disabled{
        border-color: var(--white); /* A bright blue for analytics */
    }

    #disabled:checked::before {
        box-shadow: inset 1em 1em #BA0B0B; /* Blue checkmark instead of Gold */
    }

    /* Specific override for Analytics and pref-marketing*/
    #pref-analytics, #pref-marketing {
        border-color:transparent; /* A bright blue for analytics */
    }

    #pref-analytics:checked::before, #pref-marketing:checked::before {
        box-shadow: inset 1em 1em transparent; /* Blue checkmark instead of Gold */
    }

    /* The Checkmark (using a pseudo-element) */
    input[type="checkbox"]::before {
        content: "";
        width: 10px;
        height: 10px;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em #BA0B0B;
        
        /* Creating a sharp checkmark shape */
        transform-origin: bottom left;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    /* Display checkmark when checked */
    input[type="checkbox"]:checked::before {
        transform: scale(1);
    }

    /* Subtle 'Locked' effect for disabled state */
    input[type="checkbox"]:disabled {
        border: none !important; /* Slightly darker gold */
        background-color: #3D5DAA !important; /* Deeper Navy */
        opacity: 0.9;
        filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.2));
        width: 38px;
        height: 20px;
        border-radius: 8px;
        transition: all 0.2s ease-in-out;
        appearance: none !important;        
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-content: center !important;
    }

    /* The Checkmark (using a pseudo-element) */
    input[type="checkbox"]::before {
        content: "";
        width: 10px;
        height: 10px;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em #BA0B0B;
        transform-origin: bottom left;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    /* Display checkmark when checked */
    input[type="checkbox"]:checked::before {
        transform: scale(1);
    }    

/**/
    .setting-info p { 
		font-size: 12px; 
		color: #aaa; 
		margin: 5px 0 0; 
		font-family: 'SpaceGrotesk-Lite' !important;
	}

    .setting-label { 
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 300; 
		font-size: 14px; 
	}

    /* FIXED SLIDER LOGIC */
    .switch { 
        position: relative; 
        display: inline-block; 
        width: 50px; 
        height: 20px; 
    }

    

    .switch input { opacity: 0; width: 0; height: 0; }

    .slider {
        position: absolute; 
		cursor: pointer; 
		inset: 0;
        background-color: #444; 
		transition: .4s; 
		border-radius: 34px;
    }

    .slider:before {
        position: absolute; 
        content: ""; 
        height: 14px; 
        width: 28px; /* Your original wide knob */
        left: 3px; 
        bottom: 3px;
        background-color: white; 
        transition: .4s; 
        border-radius: 4px; /* Adjusted to fit the wider shape */
    }

    input:checked + .slider { 
		background-color: #BA0B0B; 
	}

    /* THE FIX: Translation calculated for a 60px track with a 28px knob */
    input:checked + .slider:before { 
        transform: translateX(26px); 
        background-color: #fff; 
    }

    .btn-save {
        width: 100%; padding: 15px; border: none; background: #BA0B0B;
        color: white; font-weight: bold; cursor: pointer; border-radius: 50px;
    }

    .nav .active-page{
    color: var(--gold) !important;
    }

    .visible-lg{display: block !important;}

    .visible-sm{display: none;}

    /* Initial Form Styling */
    .main-form-wrapper { max-width: 400px; margin: 50px auto; }
    .btn-submit-main {
        width: 100%; padding: 15px; background: var(--gold);
        border: none; border-radius: 50px; color: #fff; font-weight: 700; cursor: pointer;
    }

    /* Modal Overlay */
    /* CRITICAL: High Z-Index to ensure it's on top */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        z-index: 999999 !important; /* Force to front */
        display: none; /* JS will change this to flex */
        justify-content: center;
        align-items: center;
    }

    .modal-content h2{
        font-family: 'playfair_display', sans-serif;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        color: #FFF;
        font-size: 28px;
        padding: 20px 0;
        margin: 20px 0 0 0;
        line-height: 30px;
        text-align: center;
    }

    .modal-content {
        background: #222;
        padding: 40px;
        border-radius: 20px;
        width: 90%;
        max-width: 500px;
        position: relative;
        color: white;		
		animation: burgerPop 0.4s ease forwards;
    }

    .modal-content #tin-registration-form{display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 100%;
    }

    .modal-content #tin-registration-form #section-personal{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        width: 100%;
        column-gap: 20px;
        justify-content: space-around;
        align-content: space-between;
    }

    .modal-content #tin-registration-form #section-personal left{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 50%;
        justify-content: space-around;
        align-content: space-between;
    }

    .modal-content #tin-registration-form #section-personal right{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 50%;
        justify-content: space-around;
        align-content: space-between;
    }

    .modal-content #tin-registration-form #section-corporate{
        display: flex;
        flex-wrap:nowrap;
        flex-direction: row;
        width: 100%;
        column-gap: 40px;
        justify-content: space-around;
        align-content: space-between;
    }

    .modal-content #tin-registration-form #section-corporate left{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 50%;
        justify-content: space-around;
        align-content: space-between;
    }

    .modal-content #tin-registration-form #section-corporate right{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 50%;
        justify-content: space-around;
        align-content: space-between;
    }

    .modal-content #tin-registration-form .modal-input {
        width: 100%;
        padding: 12px;
        margin: 10px 0;
        background: transparent;
        border: 1px solid #444;
        border-radius: 50PX;
        color: white;
    }

    .modal-content #tin-registration-form .modal-input input[type="date"] {}

    @keyframes slideUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .btn-gold-final { 
        width: 100%; 
        padding: 15px; 
        background: var(--gold); 
        border: none; 
        border-radius: 50px; 
        color: #fff; 
        font-weight: 700; 
        cursor: pointer; 
        margin: 12px 0 0 0;
    }
    
    .close-modal { 
        /*position: absolute; 
        right: 40px;*/
        background: none; 
        border: none; 
        color: #b70101; 
        font-size: 60px; 
        cursor: pointer; 
		width: 40px;
		height: 40px;
    }


	.sm{
		display: none !important;
	}
	
	.lg{
		display: block !important;
	}

	

	.scroll-btn {
		position: fixed;
		bottom: 160px;
		right: 12px;
		width: 20px;
		height: auto;
		cursor: pointer;
		display: none; /* Hidden by default */
		z-index: 2;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	.scroll-btn img {
		width: 100%;
		height: auto;
		/* Optional: Add a CSS bounce if the image isn't already animated */
		animation: bounce 2s infinite;
		transform: rotate(90deg);
		transform-origin: left;
	}

	.scroll-btn:hover {
		transform: scale(1.1);
	}

	/* Optional CSS Animation */
	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
		40% {transform: translateY(-10px);}
		60% {transform: translateY(-5px);}
	}


	/* DATE AND TIME */
	.datetime-container {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		position: relative;
		top: 150px;
		text-align: center;
		font-family: 'FFDINWebLight';
		margin: 0 auto;
		row-gap: 0;
		text-transform: uppercase;
		z-index: 9999999999999999999999999999999999999999999999999999999;
		height: 100px;
		justify-content: center;
		align-content: center;
		width: auto;
	}

	.datetime-container p {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		font-size: 64px;
		margin: 0;
		padding: 10px;
	}

	.datetime-container p#region {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap;
		font-style: italic;
		margin: 0;
		padding: 10px;
	}
	

	main-services{
		display: flex;
		flex-direction: row;
		flex-wrap:nowrap;
		align-content: space-between;
		justify-content: space-between;
		column-gap: 20px;
		border: solid 2px #FFF;
		/*background-color: #E6E6E6;*/
		border-radius: 10px;
		padding: 20px;
		margin: 0 0 20px 0;
	}


	half-1{display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		column-gap: 20px;
		row-gap: 10px;
	}

	half-2{display: flex;
		flex-direction: row;
		flex-wrap:wrap;}

	.theme-switch{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: 40px;
		box-sizing: border-box;
		justify-content: space-between;
		align-content: center;
		align-self: center;
		margin: 0 20px;
	}
	
	.theme-switch .switch {
		position: relative;
		display: inline-block;
		width: 50px;
		height: 20px;
		border-radius: 10px;
		
	}
	
	.theme-switch .switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}
	
	.switch .slider {
		position: absolute;
		cursor: pointer;
		top: 0px;
		left: 0;
		right: -3px;
		bottom: 0;
		background-color: transparent;
		transition: .4s;
		background-image: url("../images/svg/lite-theme-indecator.svg");
		background-size: 20px 20px;
		background-position: center right;
		background-repeat: no-repeat;
	}
	
	.slider:before {
		top: 2px;
		position: absolute;
		content: "";
		height: 14px;
		width: 14px;
		background-color: #BA0B0B;
		transition: .5s;
		border-radius: 4px;
	}
	
	input:checked + .slider {
		background-color:  transparent;
		background-image: url("../images/svg/dark-theme-indecator.svg");
		background-size: 20px 20px;
		background-position: center left;
		background-repeat: no-repeat;
		/*box-shadow: 0 1px 6px 0 rgb(0 0 0 16%);*/
	}
	
	input:focus + .slider {
		box-shadow: 0 0 1px #000;
	}
	
	input:checked + .slider:before {
		transform: translateX(14px);
		background-color: #BA0B0B;
	}

	.hide {
		display: none;
	}
	
	.switcher .here {
		background-color: #BA0B0B;;
		text-decoration: none;
	}
	
	.side {
		display: flex;
		/*position: absolute;
		bottom: 50px;
		right: 20px;
		flex-wrap: wrap;*/
	}
	
	.btn {
		padding: 2px 4px;
		border-radius: 2px;
		display: inline-block;
		cursor: pointer;
		background: #808080;
		margin: 10px 0 0 0;
		transition: all ease-in 0.15s;
	}
	
	.btn:hover {
		background: #BA0B0B;
	}
	
	.btns {
		flex: 0.5 0;
		max-width: 100px;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		align-self: flex-end;
	}
	
	.hidden-xs {
		display: none;
	}
	
	.hidden-sm {
		display: none;
	}
	
	.hidden-md {
		display: none;
	}
	
	.show-lg {
		display: flex;
	}
	
	.loading {
		background-image: url("../images/gifs/blank.gif");
		background-position: center;
		background-origin: content-box;
		background-repeat: no-repeat;
		background-size: contain;
		height: auto;
	}
	
	.switch_mode {
		display: block;
		position: fixed;
		width: 40px;
		height: 40px;
		right: 30px;
		bottom: 300px;
		box-sizing: border-box;
		overflow: hidden;
		z-index: 800;
		border: none;
		text-decoration: none;				
		animation: burgerPop 0.4s ease forwards;		
	}

	.switch_mode img, .switch_mode svg{
		display: block;
		position: fixed;
		width: 40px;
		height: 40px;
		box-sizing: border-box;
		overflow: hidden;
		border: none;
		text-decoration: none;		
	}	
	
	.switch_mode span {
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.switch_mode span img {
		width: 100%;
	}

	.wrapper{
		display: block;
		box-sizing: border-box;
		overflow: hidden;
		background-repeat: no-repeat;
		/*background-image: url("../images/svg/blagol_art_bg.svg");*/
		background-size: contain
	}
	
	.more_button {
		display: block;
		position: absolute;
		width: 40px;
		height: 40px;
		right: 30px;
		bottom: 30px;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 12px;
		letter-spacing: 3px;
		z-index: 1000;
		border: none;
		text-decoration: none;	
		animation: burgerPop 0.4s ease forwards;
		cursor: pointer;
	}

	.more_button:hover {
		opacity: 0.10;
		background-color: rgba(232, 232, 232, 0.05);	
		border-radius: 4px;
	}
	
	.more_button img, .more_button svg{
		display: block;
		width: 40px;
		height: 40px;
		box-sizing: border-box;
		overflow: hidden;
		border: none;
		text-decoration: none;			
		cursor: pointer;	
	}
	
	/*
	.more_button:hover {
		display: block;
		cursor: pointer;
		position: absolute;
		width: 40px;
		height: 55px;
		right: 30px;
		bottom: 30px;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 12px;
		letter-spacing: 3px;
		z-index: 1000;
		border: none;
		text-decoration: none;
		background-image: url("../images/svg/blagol_more_button_2.svg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}*/
	
	
	.more_button span {
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.more_button span img {
		width: 100%;
	}
	
	.scroll_indicator {
		display: flex;
		position: fixed;
		z-index: 99999999999999999999999999999999999999999999999999999999999;
		bottom: 100px;
		right: 30px;
		padding: 15px;
		height: auto;
		background-color: #F2F2F2;
		border-radius: 8px;
		/*transform: rotate(360deg);*/
	}
	
	
	t_wrap {
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.division-map{
		display: block;
		box-sizing: border-box;
		overflow:scroll;
	}
	
	user_dash {
		font-family: 'SpaceGrotesk-Lite' !important;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		box-sizing: border-box;
		border-radius: 50px;
		background-image: url("../images/svg/gray.svg");
		background-repeat: no-repeat;
		background-position-x: -200px;
		background-position-y: -10px;
		overflow: hidden;
		justify-content: right;
		align-content: right;
		gap: 10px;
		margin: 0 0 10px 0;
	}
	
	.acc_login {
		display: flex;
		box-sizing: border-box;
		padding: 5px;
		overflow: hidden;
		font-size: 12px;
		letter-spacing: 3px;
		z-index: 8000;
		border: none;
		background-
		border-radius: 50px;
		text-decoration: none;
	}
	
	.blagol_search {
		display: flex;
		box-sizing: border-box;
		padding: 5px;
		overflow: hidden;
		font-size: 12px;
		letter-spacing: 3px;
		z-index: 8000;
		border: none;
		background-
		border-radius: 50px;
		text-decoration: none;
	}
	
	.acc_login a span,
	.blagol_search a span {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		overflow: hidden;
		justify-self: center;
		align-self: center;
		text-align: left;
		box-sizing: border-box; #FFF;
		max-width: 36px !important;
		height: 22px;
		text-overflow: ellipsis;
		margin: 0 5px;
		letter-spacing: 0;
	}
	
	.acc_login a,
	.shopping_cart a,
	.blagol_search a {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		text-decoration: none;
		box-sizing: border-box;
		overflow: hidden;
		padding: 0 !important;
		margin: 0 !important;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	
	.acc_login img,
	.shopping_cart img,
	.blagol_search img {
		display: flex;
		width: 22px;
		height: 22px;
		box-sizing: border-box;
	}
	
	.shopping_cart {
		background-color: #BA0B0B;
		display: flex;
		box-sizing: border-box;
		padding: 0 5px;
		overflow: hidden;
		font-size: 12px;
		z-index: 99999999;
		border: none;
		border-radius: 50px;
		text-decoration: none;
		justify-content: center;
		align-content: center;
	}
	
	.shopping_cart a span {
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		border-radius: 50px;
		background-
		justify-content: center;
		text-align: center;
		width: 22px;
		height: 22px;
		font-size: 10px; #FFF;
		text-decoration: none;
		z-index: 999999999;
	}
	
	#searchBar {
		display: none;
	}
	
	.search_blagol {
		display: flex;
		width: 100%;
		padding: 5px;
		margin: 0 0 10px 0;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 12px;
		letter-spacing: 3px;
		z-index: 9999999;
		border: none;
		border-radius: 50px;
		background-color: #F8F8F9;
		box-shadow: inset 0 0 10px #CCCCCC;
		text-decoration: none;
	}
	
	.search_blagol form {
		display: flex;
		flex-wrap: nowrap;
		align-content: space-around;
		flex-direction: row;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	.search_blagol form input[type="text"] {
		display: flex;
		width: 80%;
		flex-direction: row;
		overflow: hidden;
		box-sizing: border-box;
		border: none;
		padding: 0 0 0 10px;
		font-size: 16px;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 100;
		background-color: transparent;
	}
	
	.search_blagol form input[type="text"]:focus {
		border-radius: 20px;
		border: solid 2px #BA0B0B;
		width: 70%;
		margin: 0 5% 0 0;
		
		user-select: none;
	}
	
	.search_blagol form input[type="submit"] {
		display: flex;
		content: "";
		width: 100%;
		justify-content: flex-end;
		flex-direction: row;
		background-color: transparent;
		cursor: pointer;
		overflow: hidden;
		box-sizing: border-box;
		border: none;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 16px;
	}
	
	.search_blagol form button {
		display: flex;
		content: "";
		width: 20%;
		flex-direction: row;
		background-image: url("../images/svg/search.svg");
		background-size: 28px 28px;
		background-position: center center;
		background-repeat: no-repeat;
		overflow: hidden;
		box-sizing: border-box;
		border: none;
		border-radius: 50px;
		
	}
	
	.search_blagol form button:hover {
		display: flex;
		content: "";
		width: 20%;
		flex-direction: row;
		background-image: url("../images/svg/search.svg");
		background-size: 28px 28px;
		background-position: center center;
		background-repeat: no-repeat;
		overflow: hidden;
		box-sizing: border-box;
		border: none;
		border-radius: 50px;
		
		box-shadow: inset 0 0 10px #CCCCCC;
	}
	
	.search_blagol a {
		padding: 0 !important;
		margin: 0 !important;
	}
	
	.search_blagol img {
		width: 30px;
	}
	
	.whatsapp-chat{
		position: fixed;
		left: 30px;
		bottom: 30px;
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		text-decoration: none;		
		animation: burgerPop 0.4s ease forwards;
	}

	#openForm {
		position: fixed;
		left: 30px;
		bottom: 175px;
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		text-decoration: none;		
		animation: burgerPop 0.4s ease forwards;
		cursor: pointer;
	}

	.whatsapp-chat img, .whatsapp-chat svg, #openForm img, #openForm svg{		
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		text-decoration: none;
	}
	
	.whatsapp-chat:hover, #openForm:hover  {		
		text-decoration: none;
	}
	
	aside {
		position: fixed;
		left: 30px;
		bottom: 500px;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 12px;
		letter-spacing: 3px;
		z-index: 9000000000000000000;
		/*font-family: 'FFDINWebRegular' !important;*/
		border: none;
		border-radius: 4px;
		text-decoration: none;
	}
	
	.selected {
		display: flex;
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	
	.btn-container {
		text-align: center;
		display: flex;
		flex-direction: column;
		row-gap: 10px;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		position: fixed;
		bottom: 110px;
		right: 30px;
		width: 40px;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	.btn-container p {
		text-align: center;
		display: flex;
		flex-direction: row;
		margin: 0;
		font-size: 8px;
		letter-spacing: 1px;
		text-transform: uppercase;
		text-align: center;
		align-self: center;
		font-family: 'FFDINWebCondensedBold';
		box-sizing: border-box;
	}
	
	.btn-container button {
		display: flex;
		align-items: center;
		justify-items: center;
		flex-direction: row;
		outline: none;
		width: 40px;
		height: auto;
		border: none;
		text-decoration: none;
		border-radius: 8px;
		cursor: pointer;
		box-sizing: border-box;
		border: none;
		background-color: transparent;
		padding: 0;
		margin: 0;
	}
	
	.prev, .next, .home, .end {
		display: flex;
		box-sizing: border-box;
	}

	.prev:hover, .next:hover, .home:hover, .end:hover  {
		display: flex;
		box-sizing: border-box;
		background-color: rgba(232, 232, 232, 0.05);
	}
	
	.prev img, .prev svg, .next img, .next svg, .home img, .home svg, .end img, .end svg{
		display: flex;
		box-sizing: border-box;
		width: 40px;
		height: auto;		
		animation: burgerPop 0.4s ease forwards;
	}	
	
	.acc_login:hover {
		opacity: 1;
		text-decoration: none;
	}
	
	.whatsapp-chat img {
		width: 40px;
	}	

	.main_control {
		display: none;
	}

   .main_control.active {
		display: flex;
		position: fixed;
		bottom: 20px;
		z-index: 9999999999999999999999999999999;
	}
	
	themeControl {		
		position: fixed;
		right: 30px;
		bottom: 380px;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		width: 40px;
		height: 25px;
		overflow: visible;
		z-index: 99999999;
		border-radius: 10px;
		justify-content: center;
		align-content:center;				
		animation: burgerPop 0.4s ease forwards;
	}

	themeControl .switch {
		position: relative;
		display: inline-block;
		width: 42px;
		height: 26px;
		border-radius: 6px;
		border: solid 3.4px;
	}
	
	.emailAddress {
		position: fixed;
		left: 30px;
		bottom: 250px;
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		overflow: visible;
		text-decoration: none;
		animation: burgerPop 0.4s ease forwards;
		cursor: pointer;		
	}

	.emailAddress a{
		text-decoration: none !important;
	}
	
	.emailAddress p {
		font-family: 'SpaceGrotesk-Lite' !important;
    	font-size: 14.6px;
    	font-weight: 300;
		letter-spacing: 0.04px;
		margin: 0;
		padding: 0;
		transform: rotate(-90deg);
		color: var(--body-color);
	}
	
	.emailAddress a {
		box-sizing: border-box;
		overflow: hidden;
		z-index: 8000;
		border: none;
		text-decoration: none;
	}
	
	.emailAddress a:hover {
		animation: fade-in-main-content .3 ease-in forwards;
		-webkit-animation: fade-in-main-content .3s ease-in forwards;
		-moz-animation: fade-in-main-content .3s ease-in forwards;
		opacity: 1;
		text-transform: underline;
	}
	
	.mail_to {
		position: fixed;
		left: 30px;
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		bottom: 100px;
		overflow: hidden;		
		animation: burgerPop 0.4s ease forwards;		
	}

	.mail_to img, .mail_to svg {
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		overflow: hidden;
	}
	
	.mail_to:hover {
		position: fixed;
		cursor: pointer;
		left: 30px;
		display: block;
		box-sizing: border-box;
		width: 40px;
		height: 40px;		
		bottom: 100px;
	}
	
	.mail_to a,
	.whatsapp-chat a {
		box-sizing: border-box;
		display: block;
		width: 100%;
		height: 100%;
		text-decoration: none;
	}
	
	.mail_to img {
		width: 50px;
	}
	
	/* FOOTER STYES */
	.footer {
		display: flex;
		width: 100vw;
		height: 100vh;
		padding: 0 30px;
		box-sizing: border-box;
		overflow: hidden;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
	}
	
	.footer top {
		display: flex;
		width: 80%;
		box-sizing: border-box;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-content: center;
		gap: 20px;
		overflow: hidden;
	}
	
	.footer top container {
		display: flex;
		box-sizing: border-box;
		flex-wrap: wrap;
		overflow: hidden;
		padding: 30px;
		border-radius: 8px;
	}
	
	.footer top container:nth-child(1),
	.footer top container:nth-child(2),
	.footer top container:nth-child(3) {
		display: flex;
		width: 20%;
		box-sizing: border-box;
	}
	
	.footer top container:nth-child(4) {
		display: flex;
		width: 40%;
		box-sizing: border-box;
	}
	
	.footer top container p {
		display: flex;
		margin: 0 20px 20px 0;
		font-family: 'SpaceGrotesk-Lite' !important; #FFF;
		font-size: 14px;
		line-height: 20px;
		overflow: hidden;
		color: #808080;
	}
	
	.footer top container h2 {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		flex-wrap: wrap;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 16px;
		font-weight: 400; 
		
		margin: 0 0 20px 0;
	}
	
	.footer top container a {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		text-decoration: none;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 14px;
		font-weight: 300; 
		color: #808080;
	}
	
	.footer top container a img {
		width: 20px;
		height: 20px;
		margin: 0 10px 0 0;
	}
	
	.footer top container a:hover {
		text-decoration: none; 
	}
	
	.footer top container wrap_contact {
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
	}
	
	.footer top container wrap_add {
		display: flex;
		width: 70%;
		flex-wrap: wrap;
	}
	
	.footer top container wrap_map {
		width: 30%;
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		flex-wrap: nowrap;
		border-radius: 8px;
	}
	
	.footer bottom {
		display: flex;
		flex-direction: row;
		width: 100%;
		padding: 0 20px;
		overflow: hidden;
	}
	
	.footer bottom container {
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: column;
		align-content: center;
		justify-content: center;
		width: 100%;
		overflow: hidden;
	}
	
	.footer bottom container p {
		display: flex;
		text-align: center;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 300; 
		letter-spacing: 0.4px;
		font-size: 14px;
	}
	
	.footer bottom container img, .footer bottom container svg {
		display: flex;
		align-content: center;
		justify-content: center;
		width: 40px;
		height: auto;
		margin: 20px auto;
	}	
	
	
	.about_middle {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: space-between;
		height: 100vh;
		width: 100vw;
		box-sizing: border-box;
		padding: 120px;
		overflow: hidden;
		background-image: url();
		background-position-x: center;
		background-position-y: 170px;
		background-repeat: no-repeat;
		background-size: 500px;
		
		background: url("../images/svg/s_lite_bg.svg");
		background-position-x: 0%;
		background-position-y: 0%;
		background-size: auto;
		background-position: bottom left;
		background-size: cover;		
	}
	
	.about_middle middle_wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: auto;
		align-items: center;
		padding: 0 0 200px 0;
		height: 100vh;
		width: 100vw;
	}

	.web_dev {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: space-between;
		height: 100vh;
		width: 100vw;
		box-sizing: border-box;
		padding: 120px;
		overflow: hidden;
		background-image: url();
		background-position-x: center;
		background-position-y: 170px;
		background-repeat: no-repeat;
		background-size: 500px;
		
		/*background: url("../images/svg/s_lite_bg.svg");*/
		background-position-x: 0%;
		background-position-y: 0%;
		background-size: auto;
		background-position: bottom left;
		background-size: cover;		
	}
	
	.web_dev middle_wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: auto;
		align-items: center;
		padding: 0 0 200px 0;
		height: 100vh;
		width: 100vw;
	}
	
	

	.web_dev middle_wrap wrap {
		display: flex;
		width: 100%;
		/*height: 100vh;*/
		flex-wrap:nowrap;
		flex-direction: row;
	}

	/*.index_middle middle_wrap wrap {
		display: flex;
		width: 100%;
		
		flex-wrap:nowrap;
		flex-direction: row;
	}*/
	
	.index_middle middle_wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		height: 100vh;
		width: 100%;
		overflow: hidden;
	}
	
	.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;*/
	}
	
	#scrollme {
		position: absolute;
		left: 50%;
		bottom: 15px;
		width: 30px;
		height: 20px;
		margin: 0 0 0 -15px;
		animation: bouncey 3s infinite;
		-webkit-animation: bouncey 3s infinite;
		animation-name: bouncey;
	}
	
	#wrapper #scrollme svg {
		stroke: #fff;
		fill: transparent;
	}
	
	svg:not(:root) {
		overflow: hidden;
	}
	
	.index_middle centre p {
		display: flex;
		margin: auto;
		content: 'scroll Down';
		box-sizing: border-box;
		overflow: hidden;
		justify-content: center;
		align-content: center;
		font-family: 'SpaceGrotesk-Lite' !important; #6d6e70;
		font-size: 14px;
		font-weight: 300;
	}
	
	.middle_red,
	.middle_blue,
	.middle_white,
	.middle_black {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 140px;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}
	
	.middle_red {
	}
	
	.middle_blue {
		background-repeat: no-repeat;
		background-position: 400px 120px;
		background-image: url();
	}
		
	.middle_blue wrap {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
	}
	
	.middle_blue wrap left {
		display: flex;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		width: 40%;
		margin: 0 0 0 10%;
	}	

	.middle_blue wrap centre {
		display: flex;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		margin: 0;
	}

	.middle_blue wrap centre p {
		margin:40px 0 0 0;
		display: block;
		width: 100%;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 26px;
		line-height: 40px;	
		margin: 0 0 20px 0;
		padding: 0;	
	}

	.middle_blue wrap centre p span {
		margin: 0;
		display: block;
		box-sizing: border-box;
		overflow: hidden;
		font-family: 'SpaceGrotesk-Lite' !important;
		text-transform: capitalize;
		font-size: 60px;
		line-height: 60px;
	}
	
	.middle_blue wrap left h2 {
		margin: 0;
		display: block;
		width: 100%;
		letter-spacing: -3px;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 60px;
		line-height: 60px;
	}
	
	.middle_blue wrap left h2 span {
		margin: 0;
		display: block;
		box-sizing: border-box;
		overflow: hidden;
		font-family: 'SpaceGrotesk-Lite' !important;
		text-transform: capitalize;
		font-size: 60px;
		line-height: 60px;
	}
	
	.middle_blue wrap left p {
		margin:40px 0 0 0;
		display: block;
		width: 100%;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 26px;
		line-height: 40px;	
		margin: 0;
		padding: 0;	
	}
	
	.middle_blue wrap left a {
		display: flex;
		flex-direction: row;
		margin: 40px auto 0 0;
		width: auto;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 20px;
		font-weight: 100;
		background: linear-gradient(to right, #BA0B0B, #3D5DAA);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: left;
		text-decoration: none;
	}
	
	.middle_blue wrap left a:hover {
		text-decoration: none;
		background: linear-gradient(to right, #3D5DAA, #CC9933);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.middle_blue wrap left links {
		box-sizing: border-box;
		display: flex;
		overflow: hidden;
		flex-direction: row;
		width: 70%;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	.middle_blue wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 80%;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_blue wrap right web_dev_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-image: url("../images/svg/blagol_web_dev_bg.svg");*/
		background-position: center center;
		align-items: center;
		margin: 20px 0 0 0;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
		
	.middle_red wrap right ui_d {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-image: url("../images/svg/blagol_ui_d.svg");
		background-position: center center;*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
		/*margin: 20px 0 0 0;*/
	}
	
		
	.middle_red wrap right email_temp_d {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-image: url("../images/svg/blagol_html_email_temp.svg");*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}

	.middle_red wrap right gif_anime {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-image: url("../images/svg/blagol_gif_anime_bg.svg");*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	
	
	.middle_blue wrap right graphics_des_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-image: url("../images/svg/blagol_graphics_des_bg.svg");
		background-position: center center;*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
		
	.middle_red wrap right vir_ass {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-image: url("../images/svg/blagol_virtual_assistant.svg");
		background-position: center center;*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}	
	
	
	.middle_blue wrap right gif_anime {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-image: url("../images/svg/blagol_gif_anime_bg.svg");*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	
	.middle_red wrap right signage_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-image: url("../images/svg/blagol_signage_bg.svg");*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
		
	
	.middle_red wrap right copy_writing {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_copywriting_bg.svg");*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
		
	.middle_red wrap right product_branding_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_product_branding_bg.svg");*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	
	.middle_red wrap right seo_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_seo_bg.svg");*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.middle_red wrap right blagol_craft_store_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_craft_store.svg");*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.middle_red wrap right blagol_blog_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/svg/blagol_blog_bg.svg");*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.about_middle  middle_wrap wrap right get_started_bg {
		width: 90%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow: hidden;
		border-radius: 20px;
		border: solid 4px;
		box-shadow: 4px 4px #bcbec2dd;
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
		/*background: linear-gradient(to right, #012957, #BA0B0B);	
		margin: 40px 0;		
		height: auto;		
		background-color: #141042;
		background-size: contain;		
		background-repeat: no-repeat;
		background-position: right;
		background-image: url("");*/		
	}
	
	.about_middle middle_wrap wrap right get_started_bg img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		margin: 0 auto 0 0;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}

	.web_dev middle_wrap wrap right get_started_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow: hidden;
		width: 80%;
		height: auto;
		background-size: contain;
		border-radius: 20px;
		background-repeat: no-repeat;
		background-position: right;
		background-image: url("");
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
	
	.web_dev middle_wrap wrap right get_started_bg img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 90%;
		margin: 0 auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}
	
	.middle_red wrap right blagol_blog_bg img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 150px;
		height: auto;
		margin: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}
	
	.middle_red wrap left p {
		margin: 0;
		display: block;		
		width: 100%;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 26px;
		line-height: 40px;
	}
	
	.middle_red wrap left a {
		display: flex;
		margin: 0;
		width: auto;
		flex-direction: row;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 20px;
		font-weight: 100;
		background: linear-gradient(to right, #3D5DAA, #BA0B0B);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: left;
		text-decoration: none;
	}
	
	.middle_red wrap left a:hover {
		text-decoration: none;
		background: linear-gradient(to right, #BA0B0B, #24408F);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.middle_blue wrap right {
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: center;
		align-content: center;
		justify-items: center;
		align-items: center;
		flex-wrap: wrap;
		width: 50%;
	}
	
	.middle_blue wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 50%;
		float: right;
		margin: 0 31% 0 auto;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_blue wrap right span {
		position: absolute;
		box-sizing: border-box;
		overflow: hidden;
		margin: 40px 0 0 0;
	}
	
	.middle_blue wrap right span img {
		box-sizing: border-box;
		width: 482px;
		margin: auto;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}	
	
	.middle_red wrap {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
	}
	
	.middle_red wrap left {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;
		width: 50%;
		order: 2;
		row-gap: 40px;
	}
	
	.middle_red wrap left h2 {
		display: block;
		margin: 0;
		letter-spacing: -3px;
		text-transform: normal;
		box-sizing: border-box;
		overflow: visible;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 800;
		font-size: 60px;
		line-height: 60px;
	}
	
	.middle_red wrap left h2 span {
		display: block;
		width: 100%;
		text-transform: normal;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 800;
		font-size: 60px;
	}
	
	.middle_red wrap left links {
		box-sizing: border-box;
		display: flex;
		overflow: hidden;
		flex-direction: row;
		width: 70%;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.middle_red wrap centre{
		display: flex;
		margin: 0;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		row-gap: 20px;
	}

	.middle_red wrap centre h2{		
		font-size: 55.9833px;
		font-weight: 300;
		letter-spacing: 4.3667px;
		line-height: 71.4333px;

		display: block;
		margin: 0;
		width: 100%;
		text-align: left;
		padding: 0px 0px 0px;
		font-family: 'SpaceGrotesk-Lite' !important;	
		background: linear-gradient(to right, #3d5daa, #ba0b0b, #ba0b0b) padding-box text;
		background-clip: text;
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: transparent;
		text-transform: uppercase;
	}
	
	.middle_red wrap centre p{
		display: block;
		margin: 0;
		width: 100%;
		text-align: left;
		padding: 0px 0px 0px;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 18px;
		font-weight: 300;
		line-height: 28.7667px
	}

	.middle_red wrap centre p svg{
		display:inline;
		width: 20px;
		height: auto;
		margin: 0 5px;
	}
	
	.middle_red wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 80%;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_red wrap right web_dev_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-repeat: no-repeat;
		background-image: url("../images/svg/blagol_web_dev_bg.svg");
		background-position: center center;*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}

	.middle_red wrap right web_dev_bg img, .middle_red wrap right web_dev_bg svg, 
	.middle_red wrap right ui_d img, .middle_red wrap right ui_d svg,
	.middle_red wrap right graphics_des_bg img, .middle_red wrap right graphics_des_bg svg,
	.middle_red wrap right vir_ass img, .middle_red wrap right vir_ass svg,
	.middle_red wrap right copy_writing img, .middle_red wrap right copy_writing svg,
	.middle_red wrap right signage_bg img, .middle_red wrap right signage_bg svg,
	.middle_red wrap right product_branding_bg img, .middle_red wrap right product_branding_bg svg,
	.middle_red wrap right blagol_product_branding_bg img, .middle_red wrap right blagol_product_branding_bg svg,
	.middle_red wrap right seo_bg img, .middle_red wrap right seo_bg svg,
	.middle_red wrap right blagol_craft_store_bg img, .middle_red wrap right blagol_craft_store_bg svg{
		display: flex;
		width: 100%;
		flex-direction: row;
		position: relative;
		box-sizing: border-box;
		margin: 0 auto 0 0;
		overflow: hidden;
		animation: burgerPop 0.4s ease forwards;
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}

	.middle_red wrap right graphics_des_bg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 80%;
		height: auto;
		/*background-repeat: no-repeat;
		background-image: url("../images/svg/blagol_graphics_des_bg.svg");
		background-position: center center;*/
		align-items: center;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px);
		transition: all 50ms linear;
		animation: fade-in-element 3s .3s ease-in forwards;
	}
		
	.middle_red wrap right {
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: center;
		flex-wrap: wrap;
		width: 50%;
	}
	
	.middle_red wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 30%;
		margin: auto auto 0px auto;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.middle_red wrap right span {
		position: absolute;
		box-sizing: border-box;
		overflow: hidden;
		margin: 40px 0 0 0;
	}
	
	.middle_red wrap right span img {
		box-sizing: border-box;
		width: 482px;
		margin: auto;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}	

	blagol-effect-1 {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-content: center;
		align-items: center;
		justify-items: center;
		width: 100%;
		height: auto;
		overflow: visible;		
		padding: 40px 0;
	}

	blagol-effect-1 img, blagol-effect-1 svg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 32px;
		height: auto;
		margin: 0 auto;
		align-self: center;
		justify-self: center;
		animation: burgerPop 0.4s ease forwards;

	}
	
	.about_middle wrap left{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: visible;
		justify-content: center;
		width: 50%;
	}

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

	.section2 .web_dev middle_wrap wrap left a {
		display: flex;
		width: auto;
		flex-direction: row;
		box-sizing: border-box;
		background: linear-gradient(to right, #BA0B0B, #3D5DAA);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-decoration: none;
		font-size: 24px;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 700;
		margin: 0 auto 0 50px;
	}
	
	.section2 .about_middle middle_wrap wrap left a:hover{
		background: linear-gradient(to right, #3D5DAA, #BA0B0B);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.section2 .web_dev middle_wrap wrap left a:hover {
		background: linear-gradient(to right, #3D5DAA, #BA0B0B);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.about_middle wrap left h2{

		font-size: 55.9833px;
		font-weight: 300;
		letter-spacing: 4.3667px;
		line-height: 71.4333px;

		display: flex;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		text-transform: uppercase;
		box-sizing: border-box;
		overflow: visible;		
		font-family: 'SpaceGrotesk-Lite' !important;		
		margin: 0 0 0 30px;
	}

	.web_dev wrap left h2 {
		display: flex;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		text-transform: normal;
		box-sizing: border-box;
		overflow: visible;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-weight: 100;
		font-size: 60px;
		line-height: 60px;
		margin: 0 0 0 50px;
	}
	
	.about_middle wrap left h2 span{
		display: flex;
		flex-direction: row;
		width: 100%;
		text-transform: lowercase;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 60px;
		font-weight: normal;
		line-height: 60px;
		font-weight: 100;
	}

	.web_dev wrap left h2 span{
		display: flex;
		flex-direction: row;
		width: 100%;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 60px;
		font-weight: normal;
		line-height: 60px;
		font-weight: 100;
	}

	.about_middle middle_wrap wrap left h2 span strong, .web_dev middle_wrap wrap left h2 span strong {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap;
		font-family: 'SpaceGrotesk-Lite' !important;
		margin: 0;
		color: #0c4a9c !important;
		font-weight: 100;
		text-decoration: line-through;
	}
	
	.about_middle wrap left links{
		box-sizing: border-box;
		display: flex;
		overflow: hidden;
		flex-direction: row;
		width: 70%;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.web_dev wrap left links{
		box-sizing: border-box;
		display: flex;
		overflow: hidden;
		flex-direction: row;
		width: 70%;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	.index_middle wrap left {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		align-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
		width: 40%;
		margin: 0 0 0 40px;
	}
	
	.index_middle wrap left h2{
		margin: 0;
		display: block;
		letter-spacing: -2px;
		font-family: 'SpaceGrotesk-Bold' !important;
		font-size: 70px;
		line-height: 70px;
		font-weight: 600; #000000;
  	}
	
	.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;
	}
	
	.black,
	.gray,
	.blue,
	.yellow {
		display: flex;
		justify-content: center;
		font-family: 'FFDINWebRegular' !important;
		box-sizing: border-box;
		width: 150px;
		border-radius: 8px;
		padding: 10px;
	}
	
	.black:hover,
	.gray:hover,
	.blue:hover,
	.yellow:hover {
		text-decoration: none;
		border-bottom: #3D5DAA solid 2px;
		cursor: pointer;
	}
	
	.black {
		background-color: #000000;
	}
	
	.gray {
		background-color: #808080;
	}
	
	.blue {
		background-
	}
	
	.yellow {
		background-color: #BA0B0B;
	}
	
	.black a,
	.gray a,
	.blue a,
	.yellow a {
		display: flex;
		align-self: center;
		box-sizing: border-box;
		text-align: center !important;
		font-size: 16px;
		text-decoration: none;
		font-family: 'SpaceGrotesk-Bold' !important;
	}
	
	.black a:hover,
	.gray a:hover,
	.blue a:hover,
	.yellow a:hover {
		text-decoration: none;
		cursor: pointer;
	}
	
	.about_middle middle_wrap wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 100vh;
		align-items: center;
		justify-content: center;
		align-content: flex-start;
	}
	
	.about_middle wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		padding: 0 0 20px 0;
	}
	
	.about_middle wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 80%;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}
	
	.about_middle wrap right {
		display: flex;
		box-sizing: border-box;
		overflow: visible;
		justify-content: center;
		flex-wrap: wrap;
		width: 50%;
	}
	
	.about_middle wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.about_middle wrap right span {
		position: absolute;
		box-sizing: border-box;
		overflow: hidden;
		margin: 40px 0 0 0;
	}
	
	.about_middle wrap right span img {
		box-sizing: border-box;
		width: 482px;
		margin: auto;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}

		
	.web_dev middle_wrap wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: 100vh;
		align-items: center;
		justify-content: center;
		align-content: flex-start;
	}
	
	.web_dev wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		padding: 0 0 20px 0;
	}
	
	.web_dev wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 80%;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards;
	}
	
	.web_dev wrap right {
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: center;
		flex-wrap: wrap;
		width: 70%;
	}
	
	.web_dev wrap right img {
		display: flex;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		overflow: hidden;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.web_dev wrap right span {
		position: absolute;
		box-sizing: border-box;
		overflow: hidden;
		margin: 40px 0 0 0;
	}
	
	.web_dev wrap right span img {
		box-sizing: border-box;
		width: 482px;
		margin: auto;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.services_col {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		align-items: center;
		row-gap: 30px;
	}
	
	.hanger {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		align-content: space-between;
		margin: 150px 0 0 0;
	}
	
	.hanger img {
		position: relative;
		flex-direction: row;
		right: -770px;
		top: 50px;
		width: 80px;
		height: 80px;
		display: flex;
		overflow: hidden;
	}
	
	.hanger h2 {
		width: 100%;
		margin: 0 0 20px 0;
		border-radius: 2vmin/2vmin; #6d6e70;
		font-family: 'blagolCurly' !important;
		font-size: 30px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		align-self: center;
		justify-content: center
	}
	
	.services_col h2 {
		width: 100%;
		margin: 0 0 20px 0;
		border-radius: 2vmin/2vmin; #6d6e70;
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 30px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		overflow: hidden;
		align-self: center;
		justify-content: center;
	}
	
	.services_col .first {
		width: 90%;
		margin: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 30px 0px;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: space-between;
	}
	
	.services_col .third {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 30px 0px;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: space-between;
	}
	
	.services_item {
		align-items: flex-start;
		display: flex;
		overflow: hidden;
		width: 16%;
		clear: both;
		justify-content: space-between;
		transition: background-color 0.5s ease;
	}
	
	.services_item img {
		width: 60%;
		display: flex;
		margin: auto;
		animation: fade-in-main-content 1s .2s ease-in forwards
	}
	
	.services_col .second {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: space-between;
	}
	
	.stick-to-right {
		display: block;
		float: right !important;
		overflow: hidden;
		box-sizing: border-box;
		margin: 50px 50px 0 0;
	}
	
	.stick-to-right .thin {
		font-family: 'SpaceGrotesk-Lite' !important;
		font-size: 48px;
		text-align: right;
		line-height: 60px;
		margin: 0;
	}
	
	.learn-more-button-white {
		display: block;
		margin: 12px 0 0 0;
		width: 180px;
		float: right;
	}
	
	.learn-more-button-white a {
		display: block;
		line-height: 50px;
		min-height: 50px;
		text-decoration: none;
		text-align: center;
		border-radius: 4px;
		box-sizing: border-box;
		font-family: 'SpaceGrotesk-Bold' !important;
		font-size: 14px;
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: 0.6px;
	}
	
	.learn-more-button-white a:hover {
		display: block;
		text-decoration: none;
	}
	
	.our-contact-white {
		display: block;
		margin: 12px 20px 0 0;
		width: 180px;
		float: right;
	}
	
	.our-contact-white a {
		display: block;
		text-decoration: none;
		text-align: center;
		line-height: 50px;
		min-height: 50px;
		border-radius: 4px;
		box-sizing: border-box;
		font-family: 'SpaceGrotesk-Bold' !important;
		font-size: 14px;
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: 0.6px;
		background-color: #BA0B0B;
	}
	
	.our-contact-white a:hover {
		display: block;
		text-decoration: none;
		
		border: 1px solid
	}

	#goBackBtn{		
        
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        font-size: 12px;
        z-index: 1000;
        border: none;
        text-decoration: none;
		transition: all 0.2s ease-in-out;
    	animation: burgerPop 0.4s ease forwards;
		position: absolute;
		right: 30px;
		top: 100px;		
    }	
	
	#goForwardBtn{	        
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        font-size: 12px;
        z-index: 1000;
        border: none;
        text-decoration: none;
		transition: all 0.2s ease-in-out;
    	animation: burgerPop 0.4s ease forwards;
		position: absolute;
		right: 30px;
		top: 120px;		
    }	
	
	#goBackBtn:hover{
		cursor: pointer;
	}

	#goBackBtn svg, #goBackBtn img{	
		width: 40px;
		height: 40px;
		box-sizing: border-box;	
		overflow: hidden;
		border: none;
		text-decoration: none;
	}	
	
	 #goBackBtn:hover{
		box-sizing: border-box;
	}
	
	.topnav {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;		
		/*align-items: center;*/
		justify-items: center;
		overflow: visible;
		position: relative;
		padding: 60px;
	}
	
	#myLinks {
		display: none;
		overflow: scroll;
		background-color: #FFFFFF;
		position: absolute;
		width: 40%;
		top: 80px;
		right: 30px;
		border-radius: 8px;
		z-index: 999999999999999999999999999999;
		margin: 0;
		padding: 20px;
		border: 2px solid #FFF;
		border-radius: 8px;
		box-sizing: border-box;
		box-shadow: inset 0 0 10px #CCCCCC;		
	}
	
	#myLinks .effect {
		box-sizing: border-box;
		display: block;
		position: relative;
		width: 20px;
		height: 20px;
		bottom: 0px;
		left: -20px;
		border-radius: 0 15px 0 0;
	}
	
	#myLinks .menu_item {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow: hidden;
		cursor: pointer;
		align-content: center;
		margin: 0 0 10px 0;		
		text-decoration: none !important;	
	}
	
	#myLinks .menu_item img {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 22px;
		height: 22px;
		margin: 0 10px 0 0;
	}
	
	#myLinks .menu_item span {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		font-family: 'SpaceGrotesk-Lite' !important;
		padding:  0;
		letter-spacing: 0.4px;	
		text-decoration: none !important;	
	}
	
	.topnav a {
		padding: 10px 10px 10px 0;
		text-decoration: none;
		display: block;
	}
	
	.topnav a.icon {
		padding: 0;
		display: flex;
		z-index: 9999999999999999999999999999999999999999999999999;
		right: 0px;
		top: 0;
	}	
	
	
	
	.jump-nav-bg {
		background-image: url("../images/jump.png");
		background-position: center;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	
	.top-padded {
		padding-top: 100px;
	}
	
	.header-image {
		box-sizing: border-box;
		text-align: center;
		padding: 70px 0 50px 0;
		background-image: url("../images/png/blagol_hero.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 600px;
		display: block;
		overflow: hidden;
	}
	
	
	.header-image img {
		display: inline-block;
		width: 65%;
		margin: auto;
		position: relative;
		top: -20px;
	}
	
	.--coded {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url("../images/svg/blagol_home_bg2.svg");
		padding: 0px 100px 0px 100px;
	}
	
	.scroll-down {
		width: 2%;
		text-decoration: none;
		font-family: CoinBaseRegular !important;
		font-weight: 300;
		font-size: 14px;
		margin-right: auto;
		margin-left: auto;
	}
	
	.jump-nav-bg {
		background-image: url("../images/jump.png");
		background-position: center;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
		padding-top: 100px;
		padding-bottom: 100px;
	}
	
	.top-padded {
		padding-top: 20px;
	}
	
	.scroll-down {
		width: 20px;
		height: 20px;
		margin-right: auto;
		margin-left: auto;
	}
	
	.container {
		width: auto;
	}
	
	.img-padder {
		padding-top: 10px;
		width: 10%;
	}
	
	.flow-padder-top {
		display: block;
	}
	
	.flow-padder-social {
		padding-top: 60px;
		display: block;
		padding-bottom: 60px;
	}
	
	.flow-padder-contact {
		padding-top: 100px;
		padding-bottom: 100px;
		display: block;
	}
	
	.banner-pos {
		padding-top: 250px;
		background-attachment: fixed;
		background-image: url();
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	.uiux-design-pad-left-sm {
		padding: 0;
	}
	
	.graphics-design-pad-right-sm {
		padding: 0;
	}
	
	.mobile-padder-100 {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	
	.mobile-padder-top {
		padding-top: 0;
	}
	
	.text-align-center-lg {
		text-align: left;
	}
	
	.magic-line {
		width: 0%;
		height: 500px;
		margin-left: 0px;
		border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #FFF;
	}
	
	.image--adjuster {
		padding-top: 70px;
	}
	
	.flow-padder-top {
		padding-top: 100px;
		display: block;
	}
	
	.flow-padder-bottom {
		display: block;
	}
	
		
	.case-study-button a {
		padding-top: 10px;
		padding-right: 20px;
		padding-bottom: 10px;
		padding-left: 20px;
		width: 100px;
		margin-right: auto;
		margin-left: auto;
		text-decoration: none;
		font-family: 'SpaceGrotesk-Bold' !important;
	}
	
	.case-study-button a:hover {
		padding-top: 10px;
		padding-right: 20px;
		padding-bottom: 10px;
		padding-left: 20px;
		width: 100px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 20px;
		margin-bottom: 50px;
		text-decoration: none;
		
		border: 1px solid
	}
	
	.case-study-button a span {
		padding-left: 20px;
	}
	
	
	.thin {
		font-family: "Montserrat Light";
		font-weight: 100;
	}
	
	.dotted {
		padding-left: 10px;
	}
	
	.contact-link a {
		text-decoration: underline;
	}
	
	.contact-link a:hover {
		text-decoration: underline;
	}
	
	.kill-underline {
		text-decoration: none !important;
	}
	
	.tester {
		border-top-width: 1px;
		border-right-width: 1px;
		border-top-style: solid;
		border-right-style: solid;
		border-top-color: #FFF;
		border-right-color: #FFF;
	}
	
	.title-quote {
		font-family: 'gotham-100'
	}

}