/**************************/
/********* Header *********/
/**************************/
header {
	z-index: 10;
}

header .bg-color {
	background-color: rgba(255,255,255,.5);
	backdrop-filter: blur(3px);
}

header .left-col {
	padding-right: 30px;
}

header img {
	vertical-align: bottom;
}

header .right-col li a {
	display: block;
	padding: 5px 10px;
	color: #313bac;
}

/*******************************/
/********* Mobile Menu *********/
/*******************************/
.mobile-menu-btn {
	padding-right: 10px;
}

.mobile-menu-btn .mobile-menu-btn-inner {
	background-color: #313bac;
    color: #FFF;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin-left: auto;
    cursor: pointer;
    font-size: 1.7rem;
}

.mobile-menu {
	top: 0;
    right: -100%;
    background-color: #FFF;
    box-shadow: 0 0 10px 10px rgb(0 0 0 / 30%);
    padding: 30px;
    height: 100%;
    z-index: 20;
    width: 70%;
    transition: all .3s;
}

.mobile-menu .mobile-menu-close-container {
	padding-bottom: 20px;
	font-size: 2rem;
	cursor: pointer;
	color: #313bac;
}

.mobile-menu ul.no-list > li {
	display: block;
	padding-bottom: 30px;
}

.mobile-menu li a {
	display: block;
	font-size: 1.2rem;
}

@media(max-width: 768px) {
	body.mobile-open .mobile-menu {
		right: 0;
	}
}

/**************************/
/********* Banner *********/
/**************************/
.banner {
	padding-top: 200px;
	padding-bottom: 200px;
}

.banner .left-col {
	padding: 20px;
}

.banner .right-col {
	padding: 20px;
}

.banner .right-col-inner {
	padding: 40px;
	background-color: rgba(255,255,255,.5);
	border-radius: 20px;
}

.banner .social-icons {
	bottom: 40px;
	left: 25px;
}

.banner .social-icons .icon {
	padding: 5px;
}

.banner .social-icons svg {
	color: #FFF;
	font-size: 20px;
}

@media(max-width: 768px) {
	.banner {
		padding-top: 150px;
		padding-bottom: 150px;
	}

	.banner .left-col {
		padding-bottom: 50px;
	}
}

/**************************/
/****** Banner Logos ******/
/**************************/
.banner .left-col-inner {
	padding: 20vw;
    display: inline-block;
}

.banner .left-col .icon {
	position: absolute;
	width: 80px;
	height: 80px;
	background-color: rgba(100, 100, 100, .9);
	border-radius: 50%;
	padding: 5px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.banner .left-col .icon.icon-pos-1 {
	animation: iconpos1 2s forwards;
}

.banner .left-col .icon.icon-pos-2 {
	animation: iconpos2 2s forwards;
}

.banner .left-col .icon.icon-pos-3 {
	animation: iconpos3 2s forwards;
}

.banner .left-col .icon.icon-pos-4 {
	animation: iconpos4 2s forwards;
}

.banner .left-col .icon.icon-pos-5 {
	animation: iconpos5 2s forwards;
}

@-webkit-keyframes iconpos1 {
	0% {
		opacity: 0;
		top: 50%;
		left: 50%;
	}
	20% {
		opacity: 0.7;
		top: 50%;
		left: 50%;
	}
	50% {
		opacity: 0.7;
		top: 30%;
		left: 30%;
	}
	100% {
		opacity: 1.0;
		top: 10%;
		left: 50%;
	}
}

@-webkit-keyframes iconpos2 {
	0% {
		opacity: 0;
		top: 50%;
		left: 50%;
	}
	20% {
		opacity: 0.7;
		top: 50%;
		left: 50%;
	}
	50% {
		opacity: 0.7;
		top: 27%;
		left: 67%;
	}
	100% {
		opacity: 1.0;
		top: 40%;
		left: 90%;
	}
}

@-webkit-keyframes iconpos3 {
	0% {
		opacity: 0;
		top: 50%;
		left: 50%;
	}
	20% {
		opacity: 0.7;
		top: 50%;
		left: 50%;
	}
	50% {
		opacity: 0.7;
		top: 60%;
		left: 76%;
	}
	100% {
		opacity: 1.0;
		top: 88%;
		left: 77%;
	}
}

@-webkit-keyframes iconpos4 {
	0% {
		opacity: 0;
		top: 50%;
		left: 50%;
	}
	20% {
		opacity: 0.7;
		top: 50%;
		left: 50%;
	}
	50% {
		opacity: 0.7;
		top: 78%;
		left: 50%;
	}
	100% {
		opacity: 1.0;
		top: 88%;
		left: 25%;
	}
}

@-webkit-keyframes iconpos5 {
	0% {
		opacity: 0;
		top: 50%;
		left: 50%;
	}
	20% {
		opacity: 0.7;
		top: 50%;
		left: 50%;
	}
	50% {
		opacity: 0.7;
		top: 60%;
		left: 23%;
	}
	100% {
		opacity: 1.0;
		top: 40%;
		left: 10%;
	}
}


@media(max-width: 768px) {

}

/*************************/
/********* About *********/
/*************************/
.about-section {
	padding-top: 100px;
	padding-bottom: 100px;
}

.about-section .top-section {
	max-width: 500px;
	margin: auto;
	padding-bottom: 50px;
}

.about-section .top-section span {
	color: #313bac;
}

.about-section .bottom-section {
	max-width: 1000px;
    margin: auto;
}

.about-section .person {
	padding: 10px;
}

.about-section .person:hover {
	transform: scale(1.1);
    transition: all .3s ease-in-out;
}

.about-section .person .image {
	padding-bottom: 15px;
}

.about-section .person .name {
	font-weight: 700;
	font-size: 1.2rem;
	padding-bottom: 10px;
}

@media(max-width: 768px) {
	.about-section .bottom-section {
		padding-left: 15px;
		padding-right: 15px;
	}

	.about-section .person {
		padding: 15px;
	}
}