/* my-typography.css */

@font-face {
  font-family: 'DroidSans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/DroidSans.woff2') format('woff2'),
       url('../fonts/DroidSans.woff') format('woff'),
       url("../fonts/DroidSans.ttf") format("truetype");
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Ubuntu-R.woff2') format('woff2'),
       url('../fonts/Ubuntu-R.woff') format('woff'),
       url("../fonts/Ubuntu-R.ttf") format("truetype");
}

@font-face {
  font-family: 'IntroBold';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Intro-Bold.ttf");
}

@font-face {
  font-family: 'IntroRegular';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Intro-Regular.ttf");
}


@font-face {
  font-family: 'SourceSansBold';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/SourceSansPro-Black.ttf");
}

@font-face {
  font-family: 'SourceSansRegular';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/SourceSansPro-Regular.ttf");
}

@font-face {
  font-family: 'SourceSansLight';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/SourceSansPro-Light.ttf");
}


@font-face {
  font-family: 'Framework7 Icons';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Framework7Icons-Regular.eot");
  src: local('Framework7 Icons'),
     local('Framework7Icons-Regular'),
     url("../fonts/Framework7Icons-Regular.woff2") format("woff2"),
     url("../fonts/Framework7Icons-Regular.woff") format("woff"),
     url("../fonts/Framework7Icons-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'MonserratLight';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Monserrat-Light.ttf") format("truetype");
}

@font-face {
  font-family: 'MonserratRegular';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Monserrat-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'MonserratSemi';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Monserrat-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: 'Smoolthan';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Smoolthan-Medium.otf");
}


.f7-icons, .framework7-icons {
  font-family: 'Framework7 Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 28px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  font-feature-settings: "liga";
}

/* ======================== */

/* == text sizes == */

.size-8 { font-size: 8px !important }
.size-9 { font-size: 9px !important }
.size-10 { font-size: 10px !important }
.size-11 { font-size: 11px !important }
.size-12 { font-size: 12px !important }
.size-13 { font-size: 13px !important }
.size-14 { font-size: 14px !important }
.size-16 { font-size: 16px !important }
.size-18 { font-size: 18px !important }
.size-20 { font-size: 20px !important }
.size-22 { font-size: 22px !important }
.size-24 { font-size: 24px !important }
.size-23 { font-size: 23px !important }
.size-25 { font-size: 25px !important }
.size-28 { font-size: 28px !important }
.size-29 { font-size: 29px !important }
.size-30 { font-size: 30px !important }
.size-32 { font-size: 32px !important }
.size-36 { font-size: 36px !important }
.size-38 { font-size: 38px !important }
.size-40 { font-size: 40px !important }
.size-48 { font-size: 48px !important }
.size-50 { font-size: 50px !important }
.size-64 { font-size: 64px !important }
.size-72 { font-size: 72px !important }

/* == font-weight == */

.lighter{
	font-weight: 300 !important;
}

.bolder{
	font-weight: 700 !important;
}

.kepribadian-text{
	color: #333333 !important;
	font-family: MonserratRegular;
}


/* ======================== */

.droid{
	font-family: DroidSans;
}

.sourcesans{
	font-family: SourceSansRegular;
}

.ubuntu{
	font-family: Ubuntu;
}

.intro{
	font-family: IntroRegular;
}

.intro-bold{
	font-family: IntroBold;
}

.monserrat{
	font-family: MonserratRegular;
	font-size: .9em;
}

.monserrat-light{
	font-family: MonserratLight;
}

.monserrat-semi{
	font-family: MonserratSemi;
}

.smoolthan{
	font-family: Smoolthan;
}

/* ======================== */

.dead-center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  text-align: center;
  width: 80vw;
  height: 50vh;
}

/* ======================== */

.spacer{
  width: 100%;
  height: 2vh;
}

/* ======================== */

.my-input{
  background: transparent !important;
  color: #333 !important;
  border: 0 !important;
  font-size: 1em !important;
}

/* ======================== */

.my-title{
	font-size: 1.3em;
	font-family: IntroBold;
}

/* ======================== */

h1,h2,h3,h4{
	font-family: DroidSans;
}

/* ===== text colors ===== */

.my-yellow{
	color: #FFCC29;
}

.my-green{
	color: #008C50;
}

.my-blue{
	color: #0187CB;
}

.my-red{
	color: #BA3737;
}

.my-dark{
	color: #293134;
}

.my-dark-grey{
	color: #37433E;
}

.my-medium-grey{
	color: #818E94;
}

.my-light-grey{
	color: #E7E8E9;
}

/* === bg colors === */

.my-bg-yellow{
	background-color: #FFCC29 !important;
}

.my-bg-green{
	background-color: #008C50 !important;
}

.my-bg-blue{
	background-color: #0187CB !important;
}

.my-bg-red{
	background-color: #BA3737 !important;
}

.my-bg-dark{
	background-color: #293134 !important;
}

.my-bg-dark-grey{
	background-color: #37433E !important;
}

.my-bg-medium-grey{
	background-color: #818E94 !important;
}

.my-bg-light-grey{
	background-color: #E7E8E9 !important;
}

/* ============== */