html,
body
{
  height: 100%;
  font-family: 'Cardiff', sans-serif;
}

body
{
  align-items: center;
  padding-top: 40px;
  padding-bottom: 140px;
  background-color: #f5f5f5;
}

.btn-asi
{
	color: #fff;
	background-color: #536611;
	border-color: #474A0E;
	height: 140px;
	font-size: 2.3rem;
}

.btn-asi:hover
{
	background-color: #474A0E;
	border-color: #474A0E;
	color: #f1f1f1;
	text-decoration: none;
}

.btn-czca
{
	color: #fff;
	background-color: #191FA3;
	border-color: #151A8B;
	height: 140px;
	font-size: 2.3rem;
}

.btn-czca:hover
{
	background-color: #151A8B;
	border-color: #151A8B;
	color: #f1f1f1;
	text-decoration: none;
}


.btn-asi-dark
{
	color: #fff;
	background-color: #2b2b2b;
	border-color: #222;
	height: 140px;
	font-size: 2.3rem;
}

.btn-asi-dark:hover
{
	background-color: #111;
	border-color: #222;
	color: #f1f1f1;
	text-decoration: none;
}

/* form-control-lg bug with checkboxs workaround */
.checkbox-1x
{
	transform: scale(1.2);
    -webkit-transform: scale(1.2);
}

.checkbox-2x
{
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
}

/*Radio box*/

input[type="radio"] + .label-text:before{
	content: "\f111";
	font-family: "Font Awesome 5 Free";
	speak: none;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing:antialiased;
	width: 1em;
	display: inline-block;
	margin-right: 5px;
}

input[type="radio"]:checked + .label-text:before{
	content: "\f192";
	color: #8e44ad;
	animation: effect 250ms ease-in;
}

input[type="radio"]:disabled + .label-text{
	color: #aaa;
}

input[type="radio"]:disabled + .label-text:before{
	content: "\f111";
	color: #ccc;
}

/*Radio Toggle*/

.toggle input[type="radio"] + .label-text:before{
	content: "\f204";
	font-family: "Font Awesome 5 Free";
	speak: none;
	font-style: normal;
	font-weight: 900;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing:antialiased;
	width: 1em;
	display: inline-block;
	margin-right: 10px;
}

.toggle input[type="radio"]:checked + .label-text:before{
	content: "\f205";
	color: #16a085;
	animation: effect 250ms ease-in;
}

.toggle input[type="radio"]:disabled + .label-text{
	color: #aaa;
}

.toggle input[type="radio"]:disabled + .label-text:before{
	content: "\f204";
	color: #ccc;
}


@keyframes effect{
	0%{transform: scale(0);}
	25%{transform: scale(1.3);}
	75%{transform: scale(1.4);}
	100%{transform: scale(1);}
}

@keyframes check
{
	0% {height: 0;width: 0;}
    25% {height: 0;width: 10px;}
    50% {height: 20px;width: 10px;}
}

/* Checkbox anim */
.checkbox{background-color:#fff;display:inline-block;height:28px;margin:0 .25em;width:28px;border-radius:4px;border:1px solid #ccc;float:left}
.checkbox span{display:block;height:28px;position:relative;width:28px;padding:0}
.checkbox span:after{-moz-transform:scaleX(-1) rotate(135deg);-ms-transform:scaleX(-1) rotate(135deg);-webkit-transform:scaleX(-1) rotate(135deg);transform:scaleX(-1) rotate(135deg);-moz-transform-origin:left top;-ms-transform-origin:left top;-webkit-transform-origin:left top;transform-origin:left top;border-right:4px solid #fff;border-top:4px solid #fff;content:'';display:block;height:20px;left:3px;position:absolute;top:15px;width:10px}
.checkbox span:hover:after{border-color:#999}
.checkbox input{display:none}
.checkbox input:checked + span:after{-webkit-animation:check .8s;-moz-animation:check .8s;-o-animation:check .8s;animation:check .8s;border-color:#555}
.checkbox input:checked + .default:after{border-color:#444}
.checkbox input:checked + .primary:after{border-color:#2196F3}
.checkbox input:checked + .success:after{border-color:#8bc34a}
.checkbox input:checked + .info:after{border-color:#3de0f5}
.checkbox input:checked + .warning:after{border-color:#FFC107}
.checkbox input:checked + .danger:after{border-color:#f44336}

/* More radiobox */
.checkbox label:after, 
.radio label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr,
.radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.radio .cr {
    border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}

.radio .cr .cr-icon {
    margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
    opacity: .5;
}

@media all and (max-width: 500px)
{ /* screen size until 500px */
	body
	{
    	font-size: 0.8em; /* 0.8x default size */
    }
}

@media (min-width: 768px)
{
	.bd-placeholder-img-lg
	{
		font-size: 3.5rem;
	}
}