@font-face {
    font-family: nunito-light;
    src: url(../fonts/Nunito-Light.ttf);
    font-display: swap
}

@font-face {
    font-family: nunito-bold;
    src: url(../fonts/Nunito-Bold.ttf);
    font-display: swap
}

@font-face {
    font-family: nunito-regular;
    src: url(../fonts/Nunito-Regular.ttf);
    font-display: swap
}

@font-face {
    font-family: nunito-semibold;
    src: url(../fonts/Nunito-SemiBold.ttf);
    font-display: swap
}

@font-face {
    font-family: nunito-extralight;
    src: url(../fonts/Nunito-ExtraLight.ttf);
    font-display: swap
}

@font-face {
    font-family: nunito-extrabold;
    src: url(../fonts/Nunito-ExtraBold.ttf);
    font-display: swap
}

@font-face {
    font-family: roboto-light;
    src: url(../fonts/Roboto-Light.ttf);
    font-display: swap
}

@font-face {
    font-family: roboto-regular;
    src: url(../fonts/Roboto-Regular.ttf);
    font-display: swap
}

@font-face {
    font-family: roboto-bold;
    src: url(../fonts/Roboto-Bold.ttf);
    font-display: swap
}

@font-face {
    font-family: roboto-thin;
    src: url(../fonts/Roboto-Thin.ttf);
    font-display: swap
}

@font-face {
    font-family: roboto-medium;
    src: url(../fonts/Roboto-Medium.ttf);
    font-display: swap
}

@font-face {
    font-family: montserrat-medium;
    src: url(../fonts/Montserrat-Medium.ttf);
    font-display: swap
}

@font-face {
    font-family: montserrat-light;
    src: url(../fonts/Montserrat-Light.ttf);
    font-display: swap
}

@font-face {
    font-family: montserrat-bold;
    src: url(../fonts/Montserrat-Bold.ttf);
    font-display: swap
}

html,body {
  height: 100%;
}
body {
        font-family: nunito-regular;
	font-size: 14px;
}
a {
	color:#0056b3;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a.trial {
	display: block;
	float: right;
	background-color: #990002;
	text-decoration: none;
	color: #fff;
	font-size: 20px;
	text-align: center;
	margin: 20px;
	border: 2px solid #fff;
	border-radius: 20px;
	padding: 10px;
	width: 190px;
}
a.trial:hover {
	background-color: #850002;
	text-decoration: none;
}
a.trial div {
	border-bottom: 1px solid #b84f51;
	font-size: 10px;
	padding-bottom: 3px;
	margin-bottom: 3px;
}
h1 {
	font-weight: 100;
	font-size: 2.4em;
	color: #314253;
}
h2 {
	font-weight: 100;
	margin-top: 20px;
	padding-left: 5px;
	margin-bottom: 15px;
}
.bg-dark, .btn-dark{
	background-color: #243d4a !important;
}
.btn-dark:hover{
	background-color: #216a7a !important;
}
.credit{
	position: absolute;
	bottom: 10px;
}
.img-container{
	background: url(../..//images/bck.jpg) 0 10%/cover no-repeat;
	height: 100vh;
}
.keys{
	padding-bottom: 20px;
	font-size: 18px;
	color: #ccc;
}
.keys li{
	background: url(../..//images/icon.png) no-repeat left 3px;
	list-style: none;
	padding-left: 25px;
	margin-bottom: 5px;
}
.main-img h2{
	font-size: 25px;
}
.main-img{
	position: absolute;
	bottom: 0px;
	padding: 10px;
        background:rgba(0,113,188,.3) url(../..//images/dots.png);
        width: 100%;
}
.subtitle{
	font-style: italic;
	padding-left: 55px;
	font-size: 13px;
}
@media (max-width: 1200px){
	.img-container{
		background-image: url(../..//images/bck.jpg);
		background-size: 100% auto;
		background-position: top;
		max-height: 600px;
		min-height: 300px;
	}
	.main-img{
            background:rgba(0,113,188,.3);
        }
}
@media (max-height: 650px){
	.credit{
		position: static;
		margin-bottom: 10px;
	}
}
@media (max-width: 576px){
	a.trial {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	.h-100{
		height: auto !important;
	}
}
@media (max-width: 1200px){
	.img-container{
		min-height: 700px;
	}
	.keys{
		font-size: 16px;
	}
}