@font-face {
	font-family: "Ostrich";
	src: url("fonts/OstrichSans-Heavy.otf");
}
@font-face {
	font-family: "Balooda";
	src: url("fonts/BalooDa-Regular.ttf");
}
@font-face {
	font-family: "Corbel";
	src: url("fonts/corbel.ttf");
}
@font-face {
	font-family: "CorbelBold";
	src: url("fonts/corbelb.ttf");
}
@media screen and (orientation:landscape) {
   html,
body {
    margin: 0;
    font-size: 100%;
    background: url('images/bg.png') no-repeat center fixed;
    /* background: url('images/bg.png') no-repeat center fixed; */
    background-color: #ffcd38;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;

    width: 100%;
    height: 100%;
    border: 0;

    /* Disable scrollbars */
    /* overflow: hidden; */
    /* No floating content on sides */
    /* display: block; */
}

.container {
    max-width: 100%;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
}

.hometext {
    margin-top: 20px;
    text-align: center;
    font-family: Corbel;
}

.outliner {
   /* margin-top: 3px; */
   margin-bottom: 50px;
   /* outline: 3px solid white; */
}

#result-layer {
  background: url(images/bg.png);
  background-repeat: no-repeat;
  background-size: auto;

  vertical-align: middle;
}
.full-height {
    height: 100%;
}
#result-layer h2 {
    color: #410f00;
    font-family: Ostrich;
    font-size: 50px;
}
#result-layer h3 {
    color: #bd3823;
    font-family: Balooda;
    font-size: 30px;
    padding-left: 45px;
}
#result-layer h4 {
    color: #410f00;
    font-family: Balooda;
    font-size: 20px;
}
.btn-primary{
    color: #fff;
    background-color: #413160;
    border-color: #413160;
}
.btn-primary:hover{
    color: #fff;
    background-color: #413160;
    border-color: #413160;
}
.mobile-main-image{
    display: none;
    width: 100%
}
.main-image{
    display: inline;
    width: 100%
}
.full-strech{
    padding: 0;
    margin: 0 auto;
}
.fb-share-button a{
    color: #fff;
    padding: 4px 10px;
    background-color: #007bff;
    border-radius: 8px;
}
.special-grid{
    margin-top: 213px;
}
@media (mix-width: 1199px) {
    /* Rules for laptops, small desktop screens, and smaller viewports */
        .headerrow {
            max-height: 80px;
        }
    }
@media (max-width: 1199px) {
/* Rules for laptops, small desktop screens, and smaller viewports */
    .headerrow {
        max-height: 80px;
    }
}

@media (max-width: 991px) {
/* Rules for tablets and smaller viewports */
}

@media (max-width: 767px) {
/* Rules for smartphones only */
.mobile-main-image{
    display: inline;
    width: 100%
}
.main-image{
    display: none;
    width: 100%
}
#socials{
    padding-bottom: 5px;
    display: inline-block;
}
.your-score h3{
    text-align: center;
}
.special-grid{
    margin-top: 0px;
}
}
}
html,
body {
    margin: 0;
    font-size: 100%;
    background: url('images/bg.png') no-repeat center fixed;
    /* background: url('images/bg.png') no-repeat center fixed; */
    background-color: #ffcd38;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;

    width: 100%;
    height: 100%;
    border: 0;

    /* Disable scrollbars */
    /* overflow: hidden; */
    /* No floating content on sides */
    /* display: block; */
}

.container {
    max-width: 100%;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
}

.hometext {
    margin-top: 20px;
    text-align: center;
    font-family: Corbel;
}

.outliner {
   /* margin-top: 3px; */
   margin-bottom: 50px;
   /* outline: 3px solid white; */
}

#result-layer {
  background: url(images/bg.png);
  background-repeat: no-repeat;
  background-size: auto;

  vertical-align: middle;
}
.full-height {
    height: 100%;
}
#result-layer h2 {
    color: #410f00;
    font-family: Ostrich;
    font-size: 50px;
}
#result-layer h3 {
    color: #bd3823;
    font-family: Balooda;
    font-size: 30px;
    padding-left: 45px;
}
#result-layer h4 {
    color: #410f00;
    font-family: Balooda;
    font-size: 20px;
}
.btn-primary{
    color: #fff;
    background-color: #413160;
    border-color: #413160;
}
.btn-primary:hover{
    color: #fff;
    background-color: #413160;
    border-color: #413160;
}
.mobile-main-image{
    display: none;
    width: 100%
}
.main-image{
    display: inline;
    width: 100%
}
.full-strech{
    padding: 0;
    margin: 0 auto;
}
.fb-share-button a{
    color: #fff;
    padding: 4px 10px;
    background-color: #007bff;
    border-radius: 8px;
}
.special-grid{
    margin-top: 213px;
}
@media (mix-width: 1199px) {
    /* Rules for laptops, small desktop screens, and smaller viewports */
        .headerrow {
            max-height: 80px;
        }
    }
@media (max-width: 1199px) {
/* Rules for laptops, small desktop screens, and smaller viewports */
    .headerrow {
        max-height: 80px;
    }
}

@media (max-width: 991px) {
/* Rules for tablets and smaller viewports */
}

@media (max-width: 767px) {
/* Rules for smartphones only */
.mobile-main-image{
    display: inline;
    width: 100%
}
.main-image{
    display: none;
    width: 100%
}
#socials{
    padding-bottom: 5px;
    display: inline-block;
}
.your-score h3{
    text-align: center;
}
.special-grid{
    margin-top: 0px;
}
}