/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

:root {

  --colour1: #2463C7;
  --colour2: #2496C7;
  --colour3: #ffffff;
  --colour4: #222222;


  --nav-bg: var( --colour3 );
  --nav-links: var(--colour1);

  --cheveron-col: var( --colour1 );
  --cheveron-col2: var(--colour3);
  --cheveron-col3: var(--colour3);


}

body
{
	/*font-family: 'Lato', sans-serif;*/
	font-family: "Poppins", sans-serif;
}

img
{
	max-width: 100%;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

p, li
{
	font-size: 16px;
	line-height: 36px;
	letter-spacing: .5px;
	color: #111;
	font-weight: 300;
	
}

h1, h2, h3, h4
{
	
	font-weight: 400;
	color: var(--colour1);
	
	/*font-family: 'Nanum Gothic', sans-serif;*/
}

.heading {
	font-size: 60px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.btn, .alt-btn
{
	display: grid;
	justify-self: start;	
	
	transition: all .2s ease;
}

.btn h3, .alt-btn h3
{
	
  	padding: 8px 12px 6px;
	
	border-bottom: solid 1px #666;
	border-top: solid 1px #666;
	
	transition: all .2s ease;
}

.alt-btn h3
{	
	color: #ccc;
	border-bottom: solid 1px #ccc;
	border-top: solid 1px #ccc;
}

.btn h3:hover, .alt-btn h3:hover
{
	cursor: pointer;
	
	color: #ccc;
	
	border-bottom: solid 1px #ccc;
	border-top: solid 1px #ccc;
}

.alt-btn h3:hover
{
	color: #fff;
	
	border-bottom: solid 1px #fff;
	border-top: solid 1px #fff;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#page-content
{
	display: grid;
	background-color: #fff;
	padding: 64px 0;
	grid-gap: 32px;
}

.workspace
{
	grid-gap: 32px;
}

a, a h3
{
	color: var(--colour1);
	text-decoration: none;
}

hr
{
	width: 100%;
  	color: #252525;
  	height: 64px;
  	background-color: #252525;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.no-pb
{
    padding-bottom: 0!important;
}

.alt
{
    background-color: var( --colour1 );
    padding: 64px 0;
}

.alt h1
{
    color: #fff!important;
}

.alt .header-block
{
    border-left: solid 8px #fff!important;
}

.alt h3
{
    color: #e2e2e2!important;
}

.alt p
{
	color: #fff;	
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.type-a
{
	margin: 32px 0;
}

.type-a::before
{
	content: "";
	
	grid-row: 1;
	grid-column: 1 / span 3;
	
	width: 100%;
	height: calc(100% - 32px);
	
	z-index: 1;
	
	background-color: #2463C7;
	
	align-self: end;
		
}

.type-a .workspace
{
	grid-row: 1;
	z-index: 5;
	
	background-color: #fff;
	
	margin: 0 0 16px;
	
	padding: 32px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.type-b::before
{
	content: "";
	
	grid-row: 1;
	grid-column: 1 / span 3;
	
	width: 100%;
	height: calc(100% - 32px);
	
	z-index: 1;
	
	background-color: var( --colour1 );
	
	align-self: end;
		
}

.type-b .workspace
{
	grid-row: 1;
	z-index: 5;	
	margin: 0;
}

.type-b .copy
{
	align-self: start;
	margin-top: 32px;
	padding: 32px;
	color: #fff;
}

.type-b .copy p
{
	color: #fff;
}

.type-b .feature
{
	background-color: #fff;
	padding: 32px;
	align-self: start;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.type-c::before
{
	content: "";
	
	grid-row: 1;
	grid-column: 1 / span 3;
	
	width: 100%;
	height: calc(100% - 32px);
	
	z-index: 1;
	
	background-color: var( --colour1 );
	
	align-self: end;
		
}

.type-c .workspace
{
	grid-row: 1;
	z-index: 5;	
	margin: 0;
}

.type-c .copy
{
	align-self: start;
	margin-top: 32px;
	padding: 32px;
	color: #fff;
}

.type-c .copy p
{
	color: #fff;
}

.type-c .feature
{
	background-color: #fff;
	padding: 32px;
	border: solid 2px var( --colour1 );
	align-self: start;
	margin-bottom: 32px;
}

.type-c .feature p
{
	justify-self: center;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

th, tr, td 
{
	border: 1px solid #ddd;
	padding: 8px;
	text-align: center;	
}
	
th 
{
	background-color: #f2f2f2;
	color: #333;	
}
	
tr:nth-child(even) 
{
	background-color: #f9f9f9;	
}

tr:hover 
{
	background-color: #f1f1f1;
}

/* - Header block  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.header-block, .header-block-alt
{
	position: relative;
	display: grid;
	justify-content: start;
	grid-gap: 0;
	border-left: solid 8px var( --colour1 );
  	padding-left: 24px;	
}

.header-block h1, .header-block-alt h1
{
	justify-self: start;
	font-size: 30px; 
	font-weight:600;
  	text-transform: uppercase;
	letter-spacing:2px;
	color:#2463C7;
	margin: 0;
}

.header-block-alt h1
{
	color:#fff;
}

.header-block h3, .header-block-alt h3
{
	font-style: italic;
	color: #666;
	justify-self: center;
	margin: 0 0 16px;
}

.header-block h3, .header-block-alt h3
{
	color: #ccc;
}

#page-content section
{
	padding: 20px 0;
}

/* Testimonials - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.testimonial-container
{
	display: grid;
	width: 100%;
	background-image: url('../img/testimonial-bg.jpg');
	background-attachment: fixed;
	background-position: center center;
	background-color: #111;
	background-repeat: no-repeat;
	background-size: cover;
	
	min-height: 300px;
	
	padding: 32px 0 64px;
}

.testimonial
{
	display: grid;
	align-self: center;
	justify-self: center;
	
	grid-row: 1;
	grid-column: 1;
	
	grid-gap: 16px;
	
	width: 512px;
	max-width: 80vw;
	
	opacity: 1;
	
	transition: opacity ease .5s;
	
	z-index: 3;
}

.opacity-0
{
	opacity: 0!important;
}

.testimonial h3
{
	color: #fff;
	justify-self: center;
	font-size: 32px;
}

.testimonial p
{
	color: #fff;
	justify-self: center;
	text-align: center;
}

.star-container
{
	display: grid;
	align-content: center;
	justify-content: center;
}

.star
{
	color: #252525;
	grid-row: 1;
}


.testimonial-controls
{
	display: grid;
	z-index: 1;
	grid-row: 2;
	grid-column: 1;
	align-content: center;
	padding: 0 32px;
}

@media( min-width: 992px )
{
	.testimonial-controls
	{
		grid-row: 1;
		grid-column: 1;
	}
}


.testimonial-arrow
{
	color: #fff;
	font-size: 32px;
	grid-row: 1;
	grid-column: 1;
	
	transition: opacity .5s ease;
}

.testimonial-arrow:hover
{
	cursor: pointer;
	opacity: 0.5;
}

.testimonial-left
{
	justify-self: start;
}

.testimonial-right
{
	justify-self: end;
}

.testimonial-dots
{
	display: grid;
	grid-gap: 8px;
	justify-content: center;
	justify-self: center;
	align-self: center;
	z-index: 3;
	
	grid-row: 2;
	grid-column: 1;
}

.testimonial-dot
{
	grid-row: 1;
	width: 8px;
	height: 8px;
	border-radius: 16px;
	border: #fff solid 1px;
	align-self: center;
}

.testimonial-dot:hover
{
	cursor: pointer;
	border-color: #252525;
}

.active-testimonial-dot
{
	background-color: #2463C7;
	border-color: #2463C7;
	/*border: none;*/
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*

88888888888                                                  
88                                                           
88                                                           
88aaaaa 8b,dPPYba, ,adPPYYba, 88,dPYba,,adPYba,   ,adPPYba,  
88""""" 88P'   "Y8 ""     `Y8 88P'   "88"    "8a a8P_____88  
88      88         ,adPPPPP88 88      88      88 8PP"""""""  
88      88         88,    ,88 88      88      88 "8b,   ,aa  
88      88         `"8bbdP"Y8 88      88      88  `"Ybbd8"'  

*/

.frame 
{  
        width: 100%;
        height: 200px;	
} 

.frame::before 
{
        content: "";
        position: absolute;
        left: 0;
        width: 0;
        height: 0;
        border-top: 200px solid transparent; 
        border-left: 50vw solid var( --cheveron-col );
        z-index: 10;
}

.frame::after
{
        content: "";
        position: absolute;
        right: 0;
        width: 0;
        height: 0;
        border-top: 200px solid transparent; 
        border-right: 50vw solid var( --cheveron-col );
        z-index: 10;
}

.frame2
{  
        width: 100%;
        height: 200px;	
        background-color: var( --cheveron-col );
} 

.frame2::before 
{
        content: "";
        position: absolute;
        left: 0;
        width: 0;
        height: 0;
        border-top: 200px solid transparent; 
        border-left: 50vw solid var( --cheveron-col2 ); 
        z-index: 10;
}

.frame2::after
{
        content: "";
        position: absolute;
        right: 0;
        width: 0;
        height: 0;
        border-top: 200px solid transparent; 
        border-right: 50vw solid var( --cheveron-col2 ); 
        z-index: 10;
}


.frame-container
{
        display: grid;
        height: 200px;
        margin-top: 600px;
        margin-bottom: 200px;					
}

.frame-sub-variant
{
        margin-top: 200px;
        z-index: 25;
}

.cta
{
        align-self: center;
        align-content: center;
        grid-gap: 0;
        width: max-content;
     /*   grid-template-columns: 33% auto; */
}

.cta i, .cta svg
{
        align-self: center;
        justify-self: center;
        font-size: 20px;
        color: var( --cheveron-col3 );
}

.cta h3
{
        font-size: 15px;
        color: var( --cheveron-col3 );
        font-weight: 500;
}

.cta p
{
        font-size: 11px;
        color: var( --cheveron-col3 );
        font-weight: 500;
}

@media( min-width: 768px )
{
        .cta i, .cta svg
        {
                font-size: 40px;
        }

        .cta h3
        {
                font-size: 24px;
        }
                
        .cta p
        {
                font-size: 15px;
        }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.cta-details 
{
        grid-gap: 0;
        margin-left: 8px;
        width: max-content;
}

.frame-cta-container
{
        transform: scale(1.3);
        transition: all ease .5s;
}

.frame-cta-container:hover
{
        cursor: pointer;
        transform: scale(1.25);
}

/*

88888888ba  88                        88                   
88      "8b 88                        88                   
88      ,8P 88                        88                   
88aaaaaa8P' 88  ,adPPYba,   ,adPPYba, 88   ,d8  ,adPPYba,  
88""""""8b, 88 a8"     "8a a8"     "" 88 ,a8"   I8[    ""  
88      `8b 88 8b       d8 8b         8888[      `"Y8ba,   
88      a8P 88 "8a,   ,a8" "8a,   ,aa 88`"Yba,  aa    ]8I  
88888888P"  88  `"YbbdP"'   `"Ybbd8"' 88   `Y8a `"YbbdP"'

*/

.feature-block-normal
{
        background-color: var( --colour1 );
}

.feature-block-light::before 
{
        content: "";
        z-index: 1;
        grid-row: 1;
        grid-column: 1;
        background-color: color-mix(in hsl shorter hue, var( --colour1 ), #fff 25%);
        filter: saturate(133%);
}

.feature-block-dark::before 
{
        content: "";
        z-index: 1;
        grid-row: 1;
        grid-column: 1;
        background-color: color-mix(in hsl shorter hue, var( --colour1 ), #000 50%);
        filter: saturate(133%);
}

.feature-block-inner
{
        display: grid;
        grid-row: 1;
        grid-column: 1;
        z-index: 2;

        padding: 32px 64px;
}

.feature-block-inner i
{
        text-align: center;
        color: #fff;
        font-size: 75px;
}

.feature-block-inner h2
{
        justify-self: center;
        text-align: center;
        color: #fff;
        font-size: 30px;
        font-weight: 500;

}

.feature-block-inner p
{
        text-align: center;
        font-size: 16px;
        color: #fff;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*

88888888ba                                                            
88      "8b                                                           
88      ,8P                                                           
88aaaaaa8P' ,adPPYYba, 8b,dPPYba,  8b,dPPYba,   ,adPPYba, 8b,dPPYba,  
88""""""8b, ""     `Y8 88P'   `"8a 88P'   `"8a a8P_____88 88P'   "Y8  
88      `8b ,adPPPPP88 88       88 88       88 8PP""""""" 88          
88      a8P 88,    ,88 88       88 88       88 "8b,   ,aa 88          
88888888P"  `"8bbdP"Y8 88       88 88       88  `"Ybbd8"' 88 

*/

.cta2-frame 
{  
        width: 100vw;
        height: 75px;	
        grid-row: 1;
        grid-column: 1;
} 

.cta2-frame::before 
{
        content: "";
        position: absolute;
        left: 0;
        width: 0;
        height: 0;
        border-bottom: 75px solid transparent; 
        border-right: calc( 50vw + 1px) solid #fff;
        z-index: 10;
}

.cta2-frame::after
{
        content: "";
        position: absolute;
        right: 0;
        width: 0;
        height: 0;
        border-bottom: 75px solid transparent; 
        border-left: 50vw solid #fff; 
        z-index: 10;
}

.cta2-frame2
{  
        width: 100vw;
        height: 75px;	
        grid-column: 1;
        margin-top: -75px;
} 

.cta2-frame2::before 
{
        content: "";
        position: absolute;
        left: 0;
        width: 0;
        height: 0;
        border-top: 75px solid transparent; 
        border-left: 50vw solid #fff; 
        z-index: 10;
}

.cta2-frame2::after
{
        content: "";
        position: absolute;
        right: 0;
        width: 0;
        height: 0;
        border-top: 75px solid transparent; 
        border-right: 50vw solid #ffff; 
        z-index: 10;
}

.cta2-container
{
        display: grid;

        width: 100vw;
                                                        
        background-image: url('assets/img/hero-bg-1.jpg');
        background-size: cover;
        background-position: center center;

        grid-column: 1 / span 3;
}

.cta2-container::before
{
        content: "";
        grid-row: 1;
        grid-column: 1;
        background-color: var( --colour1 );
        opacity: .8;		
        filter: saturate(150%);			
}

.cta2-inner
{
        display: grid;
        justify-content: center;
        grid-row: 1;
        grid-column: 1;
        z-index: 4;
        padding: 150px 0 75px;
        grid-gap: 16px;
}

.cta2-inner .abtn
{
        justify-self: center;
}

.cta2-inner h2
{
        color: #fff; 
        font-size: 32px;
        font-weight: 500;
        text-align: center;
        justify-self: center;
}

.cta2-inner p
{
        color: #fff;
        text-align: center;
        max-width: 50vw;
}

.card
{
	padding: 32px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	transition : all ease .25s;
	cursor: pointer;
}

.card:hover
{
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.cent
{
	text-align: center;
	justify-self; center;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.contact-item 
{
	grid-template-columns: max-content auto;
	align-content: center;
	overflow-wrap: anywhere;
}

.contact-item .element
{
	background-color: var( --colour1 );
	padding: 2px;
	border-radius: 64px;
}
			
.contact-item i, .contact-item svg
{
	align-self: center;
	color: #fff;
	background-color: var( --colour1 );
	padding: 16px;
	border-radius: 64px;
	justify-self: center;
	font-size: 24px;
	border: solid 4px #fff;				
}

.contact-item a
{
	align-self: center;
}

.contact-item p
{
	align-self: center;
}

@media( max-width: 767px )
{
	.long-txt
	{
		font-size: 12px;
	}				
}			



.cntr
{
	text-align: center;
}

:root {
  --line-width: 95%;
  --line-colour: var( --colour2 );
}
.line
{
  width: 100%;
  display: grid;
  grid-gap: 32px;
  grid-template-columns: auto max-content auto;
  opacity: 0.5;
}

.line i,
.line svg
{
  align-self: center;
  font-size: 24px;
  color: #444;
}

.line::before
{
  content: "";
  height: 1px;
  align-self: center;
  justify-self: end;
  width: var(--line-width);
  background-color: var(--line-colour);
}
.line::after
{
  content: "";
  height: 1px;
  align-self: center;
  justify-self: start;
  width: var(--line-width);
  background-color: var(--line-colour);
}    	

.alt .line i, .alt .line svg
{
  color: #fff;
}

.alt .line::before
{
  background-color: #fff;
}

.alt .line::after
{
  background-color: #fff;
}    	
	

@media( min-width: 992px )
{
	.page-img
	{
		grid-row: 1;
		grid-column: 2;
	}

	.img-left
	{
		grid-column: 1;
	}

	.page-content
	{
		grid-row: 1;
	}
}

.center
{
	text-align: center;
}

.list
{
	display: grid;
	align-content: center;
}

.list p
{
	align-content: center;
	display: grid;
	grid-template-columns: max-content auto;
	margin-left: 32px;
}

.list p:before
{
	font-family: "Font Awesome 5 Pro";
    font-weight: 300;
 	color: var( --colour1 );
 	align-self: start;
 	content: "\f054";
 	margin-right: 8px;
 	font-size: 16px;
 	padding-right: 8px;
}		

/* - - - - - - - - - - - - - - - - - - - - - - - - */

.alt
{
	background-color: var(--colour3);
	padding: 64px 0!important;
}	

.alt p
{
	color: var( --colour4 );
}

.alt b
{
	color: #fff;
}

.alt :is( h1, h2, h3, h4, .header-block )
{
	color: #fff;
}

.alt .list p:before
{
	color: #fff;
}

.sub-heading 
{
	font-size: 28px;
}

.sub-heading 
{
	font-size: 28px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - */

.btn-fancy 
{
	background-color: transparent;
	border: 2px solid var(--colour2);
	border-radius: 0;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	float: right;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0;
	outline: none;
	overflow: visible;
	padding: 1.25em 2em;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: all 0.3s ease-in-out;
	user-select: none;
	font-size: 13px;
	margin-top:16px;

	 justify-self: start;

}

.btn-fancy::before 
{
	content: " ";
	width: 1.5625rem;
	height: 2px;
	background: var(--colour2);
	top: 50%;
	left: 1.5em;
	position: absolute;
	transform: translateY(-50%);
	transform-origin: center;
	transition: background 0.3s linear, width 0.3s linear;
}

.btn-fancy .text 
{
	font-size: 1.125em;
	line-height: 1.33333em;
	padding-left: 2em;
	display: block;
	text-align: left;
	transition: all 0.3s ease-in-out;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--colour2);
}

.btn-fancy .top-key 
{
	height: 2px;
	width: 1.5625rem;
	top: -2px;
	left: 0.625rem;
	position: absolute;
	background: #e8e8e8;
	transition: width 0.5s ease-out, left 0.3s ease-out;
}

.btn-fancy .bottom-key-1 
{
	height: 2px;
	width: 1.5625rem;
	right: 1.875rem;
	bottom: -2px;
	position: absolute;
	background: #e8e8e8;
	transition: width 0.5s ease-out, right 0.3s ease-out;
}

.btn-fancy .bottom-key-2 
{
	height: 2px;	
	width: 0.625rem;
	right: 0.625rem;
	bottom: -2px;
	position: absolute;
	background: #e8e8e8;
	transition: width 0.5s ease-out, right 0.3s ease-out;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.alt .btn-fancy 
{
	border: 2px solid var( --colour4 );
}

.alt .btn-fancy::before 
{
	background: var( --colour4 );
}

.alt .btn-fancy .text 
{
	color: var( --colour4 );
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.alt .btn-fancy .top-key 
{
	background: var( --colour3 );
}

.alt .btn-fancy .bottom-key-1 
{
	background: var( --colour3 );
}

.alt .btn-fancy .bottom-key-2 
{
	background: var( --colour3 );
}



.btn-fancy:hover 
{
	color: white;
	background: var(--colour2);
}


.alt .btn-fancy:hover 
{
	color: white;
	background: var(--colour2);
}

.alt .btn-fancy:hover 
{
	color: var(--colour4);
  background: var(--colour4);
}





.btn-fancy:hover::before {
 width: 0.9375rem;
 background: white;
}

.btn-fancy:hover .text {
 color: white;
 padding-left: 1.5em;
}



.alt .btn-fancy:hover::before 
{
	background: var( --colour3 );
}

.alt .btn-fancy:hover .text 
{
	color: var( --colour3 );
}



.btn-fancy:hover .top-key {
 left: -2px;
 width: 0px;
}

.btn-fancy:hover .bottom-key-1, .btn-fancy:hover .bottom-key-2 
{
	right: 0;
	width: 0;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - */

.btn-chameleon {

    background-color: var( --colour2 );
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    transition: 0.3s;

    justify-self: start;

    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05),
        0 2px 2px rgba(0, 0, 0, 0.05),
        0 4px 4px rgba(0, 0, 0, 0.05),
        0 8px 8px rgba(0, 0, 0, 0.05),
        0 16px 16px rgba(0, 0, 0, 0.05);

}

.btn-chameleon:hover {

    background-color: var( --colour1 );
    color: var( --colour2 );
    cursor: pointer;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - */

.alt .btn-chameleon 
{
    background-color: var( --colour4 );
    color: var( --colour3 );
}

.alt .btn-chameleon:hover 
{
    background-color: var( --colour2 );
    color: #fff;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - */

.btn-thai 
{
	padding: 20px 60px;
	border: none;
	outline: none;
	position: relative;
	z-index: 1;
	border-radius: 5px;
	background: linear-gradient(to right, var( --colour1 ), var(--colour2));
	cursor: pointer;  
	text-align: center;
	color: #fff;
	justify-self: start;
}

.btn-thai::before 
{
	content: "";
  	position: absolute;
  	left: 1px;
  	right: 1px;
  	top: 1px;
  	bottom: 1px;
  	border-radius: 4px;
  	background-color: #111;
  	z-index: -1;
  	transition: 200ms
}

.btn-thai::after 
{
  	content: attr(data);
  	font-size: 16px;
  	background: linear-gradient(to left, var(--colour1), var(--colour2));
  	-webkit-background-clip: text;
  	color: transparent;
  	transition: 200ms
}

.btn-thai:hover::before 
{
  	opacity: 50%;
  	top: 0px;
  	right: 0px;
  	bottom: 0px;
  	left: 0px;
}

.btn-thai:hover::after
{
  	color: white;
}

.btn-speech 
{
	justify-self: start;
	padding: 12px 16px;
	border: 1px solid #ffffff;
	border-radius: 16px 16px 16px 0;
	position: relative;
	overflow: hidden;
	background-color: transparent;
	text-align: center;
	text-transform: uppercase;
	font-size: 16px;
	transition: all ease .2s;
	z-index: 1;
	color: var( --colour1 );

	border: solid 2px var( --colour1 );

	background-color: #fff;
}

.alt .btn-speech
{
	border: solid 2px var( --colour4 );
	background-color: #fff0;
}

.btn-speech::before 
{
	content: '';
	width: 0;
	height: 350%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var( --colour1 );
	transition: .2s ease;
	display: block;
	z-index: -1;
}

.alt .btn-speech::before 
{
	background: var( --colour4 );
}

.btn-speech:hover::before 
{
	width: 110%;
}

.btn-speech:hover
{
	transform: translate( 0px, 2px) scale(0.99);
	border: solid 2px #fff;
}

.alt .btn-speech:hover
{
	border: solid 2px var( --colour3 );
}

.btn-speech h3 
{
	color: var( --colour1 );
	transition: all ease .2s;
}

.alt .btn-speech h3 
{
	color: var( --colour4 );
}

.btn-speech:hover h3 
{
	color: var( --colour4 );
}

.alt .btn-speech:hover h3 
{
	color: var( --colour3 );
}

/* - - - - - - - - - - - - - - - - - - - - - - - - */

.minus-32
{
	margin-bottom: -32px;
}

.minus-64
{
	margin-bottom: -64px;
}