@import url('https://fonts.googleapis.com/css?family=Kanit');

body,html{
	font-family: 'Kanit', sans-serif;
  font-size: 16px;
}
header{
	background: url('../img/cover.png')top center no-repeat;
	min-height: 200px;
}

.navbar {
    background-color: transparent;
}

.navbar .navbar-brand {
    color: white !important;
}

.navbar .nav-link {
    color: white !important;
}

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
}

.navbar .navbar-toggler {
    border-color: white
}

@media (max-width: 576px) {
    .input-sub, .btn-sign-up {
        width: 100%
    }
}

@media (max-width: 1200px) {
    .input-sub, .btn-sign-up {
        width: 100%
    }
}

.input-sub{
	background: transparent;
	width:100%;
	border-radius: 15px;
	border: 1px solid #fff;
	padding: 5px 10px;
	color: #fff;
}
.input-sub::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: white;
}
.input-sub::-moz-placeholder { /* Firefox 19+ */
  color: white;
}
.input-sub:-ms-input-placeholder { /* IE 10+ */
  color: white;
}
.input-sub:-moz-placeholder { /* Firefox 18- */
  color: white;
}
.icon-top{
	width: 150px;
	height: 150px;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border:1px solid #6d8df3;
	color: #6d8df3;
	font-size: 60px;
	margin-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
}
.bg-gray{
	background: #fafafa;
}
.bg-puple{
	background: #6d8df3;
}
.btn-sign-up{
	background: transparent;
	border: 1px solid #fff;
	padding: 5px 18px;
	border-radius: 15px;
	color: #fff;
}
.btn-sign-up:hover{
	background: #fff;
	color:#000;
}
.social-footer{
	width: 50px;
	height: 50px;
	border-radius: 100%;
	border: 1px solid #ccc;
	color: #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
	margin-left: 20px;
	transition: all 0.3s;
	-webkit-transition:all 0.3s;
}

.social-footer a{
	color: #ccc;
	transition: all 0.3s;
	-webkit-transition:all 0.3s;
}
.social-footer:hover a{
	color:#fff;
}

.social-footer:hover{
	color:#fff;
	background: #ccc;
}

.text-green-light{
	color: #00a79d;
}

.btn-learn{
	color: #fff;
	padding:10px 25px;
	background: #6d8df3;
	border:1px solid #6d8df3;
	border-radius: 25px;
}