@import url('https://fonts.googleapis.com/css2?family=Hind&family=Oswald:wght@400;500;700&display=swap');

:root {
	/*GRID*/
	--grid-width: 1200px !important;
	--grid-gutter: 20px;
	
	/*TEXT*/
	--text-family: 'Oswald', sans-serif;
	
    --text-fsize: 18px;
	--text-md-fsize: 17px;
	--text-sm-fsize: 15px;

	--text-lheight: 1.79rem;
	--text-md-lheight: 1.69rem;
	--text-sm-lheight: 1.59rem;

	/*BASE BUTTON*/
	--btn-text-family: 'Oswald', sans-serif;
	--btn-padding: 0.75rem 1.6rem;
	--btn-fsize: 0.65rem;
	--btn-lheight: 1rem;

	/*COLORS*/
	--color-primary: #3e4876;
	--color-secondary: #373f65;
	--color-black: #373435;
	--color-white: #fff;
	--color-gray: #e9ecf6;
	--color-light-gray: #f5f5f5;


    /*CUSTOM VARS*/
    --gallery-img-height: 1;
}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -10000px -10000px;
    }
}

@keyframes rotateY {
	0% {
		transform: rotateY(0deg);
	}

	100% {
		transform: rotateY(360deg);
	}
}

@keyframes rotateX {
	0% {
		transform: rotateX(0deg);
	}

	100% {
		transform: rotateX(360deg);
	}
}

@keyframes rotateZ {
	0% {
		transform: rotateZ(0deg);
	}

	100% {
		transform: rotateZ(360deg);
	}
}


[data-animation]{
    transition-property: opacity;
    transition-duration: 0.8s;
    opacity: 0;
}
[data-animation].animated {
    opacity: 1;
}

.anime-rotateY {
	animation: rotateY 2s linear 1;
}
.anime-rotateX {
	animation: rotateX 2s linear 2;
}
.anime-rotateZ {
	animation: rotateZ 2s linear 2;
}

.logo-layers {position: relative;min-height: 60px;}
.logo-layers img{
    position: absolute;
    top: 0;
    left: 0
}

html, body{
    font-family: var(--text-family);
    font-size: var(--text-fsize);
    line-height: var(--text-lheight);
    color: var(--color-black);
}
    
body{overflow-x: hidden;}
  
.row{ max-width: var(--grid-width); margin: auto;}
.row.plus{ max-width: 65% }
.row.wide{ max-width: 85% }
.row.fullwidth{ max-width: 100% }

a{
    text-decoration: none;
    color: var(--color-primary);
    transition: 0.25s;
}

a:hover{
    color: var(--color-gray);
}

a img{transition: 0.25s;}

h1, h2, h3, h4, h5, h6{
    font-family: var(--text-family);
    margin-bottom: 20px;
    color: var(--color-primary)
}

h1{font-size: 3rem;margin-top:30px;}
h2 strong{font-size: 2.57rem;}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong{
    font-family: var(--text-family);
    font-weight: 700;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
    color: var(--color-primary)
}
h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a{
    color: var(--color-secondary)
}

.h5, h5 {
    font-size: 1.19rem;
    color: var(--color-black)
}


.button{
    font-family: var(--btn-text-family);
    background: var(--color-primary);
    padding: var(--btn-padding); 
    font-size: var(--btn-fsize); 
    line-height: var(--btn-lheight); 
    color: var(--color-white);
    font-weight: 500;
    text-align: center;
    box-shadow: none;
    border: 1px solid var(--color-black);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.button, button{transition: 0.25s;}
.button:hover{background: var(--color-secondary);border-color: var(--color-secondary);color: var(--color-white);}

.button.pill{border-radius: 500px;}

.button.transparent{
    border-color: transparent;
    background: var(--color-secondary);
    color: var(--color-primary);    
    padding: 0.6rem 1.8rem;
    font-size: 0.7rem !important;
    min-width: 50px;
}

.button.transparent:hover, .card:hover a.button.transparent{
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.button.btn-white{
    background: var(--color-white);
    color: var(--color-primary);
}
.button.btn-white:hover{
    background: var(--color-gray);
}


.cta .button.transparent{
    font-size: 0.9rem  !important;
    padding: 1rem 2.6rem;
    border-color: var(--color-white);
    color: var(--color-white);
    background: transparent;
}
.cta .button.transparent:hover{
    background: var(--color-white);
    color: var(--color-black);
}

.card:hover a.button.transparent{
    min-width: 100%;
}

.card a.button.transparent{transition-delay: 0.25s;}
.card:hover a.button.transparent{transition: 0s;}


.btn-social{
    color: inherit;
    font-size: 1.7rem;
    margin: 0.25rem;
}



label{
    display: block;
    margin-bottom: 5px;
    color: var(--color-primary)
}
input, textarea, select{
    border: 1px solid var(--color-black);
    border-radius: 0px;
    transition: 0.35s;
    padding-left: 15px;
}
input:focus, textarea:focus, select:focus{
    box-shadow: 0 0 2px var(--color-secondary) !important;
    border-color: var(--color-secondary);
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-family: var(--text-family);
}
  


[class^="flex-list-"]{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    width: calc(100% + (2 * var(--grid-gutter)));
    max-width: 100%;
}

[class^="flex-list-"] li{
    padding: 0 var(--grid-gutter) 20px;
}

.flex-list-4 li{width: 25%;}
.flex-list-3 li{width: 33.33333333%;}


.filter-grayscale{filter: grayscale(100%);transition: 0.35s;}
.filter-grayscale:hover, .filter-grayscale:hover img{filter: grayscale(0);opacity: 1;}

.hoverZoom{
    overflow: hidden;
    height: var(--img-height);
    width: 100%;
}
.hoverZoom img{transition: transform 1.5s, filter 1s ease-in-out;}
.hoverZoom:hover img{
    transform: scale(1.5);
    filter: grayscale(100%);
}

/* ----- Bootstrap fixs ------- */

img{max-width: 100%;}
a{display: inline-block;}

ul.il-list{padding-left: 0;}

.text-left{text-align: left !important;}
.text-right{text-align: right !important;}

.c-primary{color: var(--color-primary) !important}
.c-secondary{color: var(--color-secondary) !important}
.c-gray{color: var(--color-gray) !important}
.c-white{color: var(--color-white) !important}
.c-black{color: var(--color-black) !important}

.bg-primary{background: var(--color-primary) !important}
.bg-secondary{background: var(--color-secondary) !important}
.bg-black{background: var(--color-black) !important;}
.bg-white{background: var(--color-white) !important;}
.bg-gray{background: var(--color-gray) !important;}
.bg-light-gray{background: var(--color-light-gray) !important;}

.row .row{margin: 0 -0.75rem;}

.modal-footer {display: block;}
input, textarea, select{width: 100%;outline: 0 !important;}

.d-flex.text-left{justify-content: start;}
.d-flex.text-center{justify-content: center;}
.d-flex.text-right{justify-content: end;}

/* ---------------- WEBSITE STYLES --------------------- */

.logo{
    height: 60px;
}

header{
    padding: 25px 0;
}

nav a{color: var(--color-black);}
nav a:not(:last-of-type){margin-right: 20px;}

.cta{
    background-color: var(--color-gray);
    padding: 2.5rem 2rem;
}

.card{
    background: var(--color-white);
    border: 1px solid transparent;
    transition: 0.25s;
    transition-delay: 0.15s;
}

.card:hover{
    border: 1px solid var(--color-primary);
}

.card:hover img{
    content: var(--src);
}


footer{
    background-color: var(--color-light-gray);
    padding: 3.5rem 0 2rem;
    color: var(--color-black);
    margin-top: 100px;
}

footer *:not(h3){color: inherit;}
footer h3{margin-bottom: 30px;}


/* ----------------- RESPONSIVE -------------------- */

/* Mobile only */
@media (max-width: 575.98px) {
    :root{
        --gallery-img-height: 0.3;
    }

    html, body{
        font-size: var(--text-sm-fsize);
        line-height: var(--text-sm-lheight);
    }
    
    .row.wide{max-width: 95%;margin-left: auto;margin-right: auto;}
    
    .flex-list-4 li{width: 100%;}

}

/* Tablet only */
@media (min-width: 576px) and (max-width: 991.98px) { 
    html, body{
        font-size: var(--text-md-fsize);
        line-height: var(--text-md-lheight);
    }
    
    .flex-list-4 li{width: 50%;}
    
}

/* Desktop only */
@media (min-width: 992px) { 

}