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

:root {
  --colour1: #323385;
  --colour2: #575759;
  --colour3: #fff;
  --colour4: #222;
}

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

img
{
	max-width: 100%;
}

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

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

h1, h2, h3, h4
{
	
  font-family: "Righteous";
  font-weight: 900;
	color: #323385;
	text-transform: uppercase;
	
	/*font-family: 'Nanum Gothic', sans-serif;*/
}

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

.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;
}

h1, h2
{
	color: #323385;
}

h3
{
	/* color: #252525; */
}

a, a h3
{
	color: #252525;
	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: #323385;
	
	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:#323385;
	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: #fff;
	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: #fff;
	border-color: #fff;
	/*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( --colour1 );
        z-index: 10;
}

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

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

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

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


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

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

.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: #fff;
}

.cta h3
{
        font-size: 15px;
        color: #fff;
        font-weight: 500;
}

.cta p
{
        font-size: 11px;
        color: #fff;
        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;
}

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