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

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: "fave-script-pro", sans-serif;
	font-weight: 400;
	color: #045bce;
    font-size: 2.2em;
	}

strong {
    font-weight: 700;
}

a {
    font-weight: 600;
}

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













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

.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;
	z-index: 8;
}

.workspace
{
	grid-gap: 32px;
}

h1, h2
{
	color: #045bce;
}

h3
{
	color: #252525;
}

a, a h3
{
	color: #252525;
	text-decoration: none;
}

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







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

.alt p, .alt h4, .alt h3, .alt h2, .alt h1
{
	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: #045bce;
	
	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: #045bce;
	
	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: #045bce;
	
	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 #045bce;
	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 #045bce;
  	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:#045bce;
	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;
}



































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



/* 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: #045bce;
	border-color: #045bce;
	/*border: none;*/
}


























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



/* Custom CSS */




/*

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 #045bce; 
        z-index: 10;
}

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

.frame2
{  
        width: 100%;
        height: 200px;	
        background-color: #045bce;
} 

.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;
    font-family: "Poppins", sans-serif;
}

.cta p
{
        font-size: 11px;
        color: #fff;
        font-weight: 500;
    font-family: "Poppins", sans-serif;
}

@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: #3079FF;
}

.feature-block-normal .feature-block-inner a {
	color: #fff;
}

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

.feature-block-light .feature-block-inner h2, .feature-block-light .feature-block-inner p {
	color: #222;
}

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

.feature-block-dark .feature-block-inner a {
	color: #fff;
}

.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: #5ca0f8;
        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: #222; 
        font-size: 32px;
        font-weight: 500;
        text-align: center;
        justify-self: center;
}

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


/* Catch-all Centering Class */
.cent{
justify-self:center;
text-align:center;
}