/*@font-face {
    font-family: "SkolaSans_Bold";
    src: url("fonts/SkolaSans-Bold.eot");
    src:
    url("fonts/SkolaSans-Bold.woff") format("woff"),
    url("fonts/SkolaSans-Bold.otf") format("opentype"),
    url("fonts/SkolaSans-Bold.svg#filename") format("svg");
}
@font-face {
    font-family: "SkolaSans_Black";
    src: url("fonts/SkolaSans-Black.eot");
    src:
    url("fonts/SkolaSans-Black.woff") format("woff"),
    url("fonts/SkolaSans-Black.otf") format("opentype"),
    url("fonts/SkolaSans-Black.svg#filename") format("svg");
}
@font-face {
    font-family: "SkolaSans_Lght";
    src: url("fonts/SkolaSans.eot");
    src:
    url("fonts/SkolaSans.woff") format("woff"),
    url("fonts/SkolaSans.otf") format("opentype"),
    url("fonts/SkolaSans.svg#filename") format("svg");
}*/

@font-face {
    font-family: 'SkolaSans_Regular';
    src: url('fonts/skolasans-webfont.woff2') format('woff2'),
         url('fonts/skolasans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'SkolaSans_Medium';
    src: url('fonts/skolasans-medium-webfont.woff2') format('woff2'),
         url('fonts/skolasans-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'SkolaSans_Lght';
    src: url('fonts/skolasans-light-webfont.woff2') format('woff2'),
         url('fonts/skolasans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'SkolaSans_Bold';
    src: url('fonts/skolasans-bold-webfont.woff2') format('woff2'),
         url('fonts/skolasans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'SkolaSans_Black';
    src: url('fonts/skolasans-black-webfont.woff2') format('woff2'),
         url('fonts/skolasans-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body {
    margin:0;
    padding:0;
    background-color: #f9f9f9;
    font-weight: 900;
    font-family: "SkolaSans_Lght", sans-serif;
    font-size: 3.5vw;
}
#answer, #question {
    position: relative;
    padding-top: 0%;
}
#answer {
    display: block;
}
#profile-image-holder {
    margin:10px;
    border:2px solid #000;
    margin-top: 0%;
}
.text-conainer {
    padding:36px;
    text-align: center;
    font-size: 3vw;
    color: #fff;
    padding-top:10%;
    padding-bottom:10%;

}
.text-conainer p{
    margin-left: 10%;
    margin-right: 10%;
}
.skewed {
    position: relative;
    -webkit-transform: rotate(-5deg) skew(-5deg, 0);
       -moz-transform: rotate(-5deg) skew(-5deg, 0);
        -ms-transform: rotate(-5deg) skew(-5deg, 0);
         -o-transform: rotate(-5deg) skew(-5deg, 0);
            transform: rotate(-5deg) skew(-5deg, 0);
    /**/
}
#img-out {
    border:none;
    position: relative;
    width:100%;
    height:auto;
}
.content {
    margin-top:5%;
    text-transform: uppercase;
}
.blue .text-conainer, .blue canvas  {
    background-color: #70bfe9;
}
.green .text-conainer {
    background-color: #94dbb7;
}
.pink .text-conainer {
    background-color: #dcb6e3;
}
.orange .text-conainer {
    background-color: #f4d686;
}
.green2 .text-conainer{
    background-color: #c5d9a5;
}
.blue2 .text-conainer{
    background-color: #8ca4d4;
}
.orange2 .text-conainer{
    background-color: #fdcda7;
}
.red .text-conainer{
    background-color: #e26363;
}
.violet .text-conainer{
    background-color: #c397e3;
}
#footer {
    text-align: right;
    padding-top:50px;
    margin-left: 45%;
    padding-bottom: 10%;
}
#profile-image-holder {
    margin-top: 20%;
    border: none;
}
.profile-picture {
    left:5%;
    top:-10%;
    width: 20%;
    height: 20%;
    position: absolute;
    /* -webkit-transform: rotate(-5deg) skew(-5deg, 0);
       -moz-transform: rotate(-5deg) skew(-5deg, 0);
        -ms-transform: rotate(-5deg) skew(-5deg, 0);
         -o-transform: rotate(-5deg) skew(-5deg, 0);
            transform: rotate(-5deg) skew(-5deg, 0);
*/
    z-index: 10;
}
.fb-name {
    font-weight: 900;
    font-family: "SkolaSans_Bold", sans-serif;
}
p {
    font-weight: lighter;
}
p.bolder {

    font-family: "SkolaSans_Black", sans-serif;
    font-weight: 900;
    font-size: 3.5vw;
}

.buttons-holder {
    position: relative;
    width: 60%;
    height: auto;
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 5%;
    padding-bottom: 15%;
}
.buttons-holder input.btn {
    padding:20px;
    background-color: transparent;
    border:none;
    text-align: center;
    background-image: url('../images/Artboard 1.png');
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 25%;
    height: auto;
    min-width: 80px;
    min-height: 30px;
    text-transform: uppercase;
    display: block;
    font-family: "SkolaSans_Black", sans-serif;
    font-weight: 900;
    font-size: 4vw;
}
.buttons-holder .btn:hover {
    color: #2C2C2C;
    opacity: 0.6;
    cursor: pointer;
}
.btn.float-left  {
    float: left;
}
.btn.float-right  {
    float: right;
}


/* btn colors */
.blue .btn  {
    color: #70bfe9;
}
.green .btn {
    color: #94dbb7;
}
.pink .btn {
    color: #dcb6e3;
}
.orange .btn {
    color: #f4d686;
}
.green2 .btn {
    color: #c5d9a5;
}
.blue2 .btn {
    color: #8ca4d4;
}
.orange2 .btn {
    color: #fdcda7;
}
.red .btn {
    color: #e26363;
}
.violet .btn {
    color: #c397e3;
}


/* LOGIN SCreen */
#login-text p.bolder {
    text-align: left;
    font-size: 7vw;
}
#login-text .buttons-holder {
    position: absolute;
    top:0px;
    left:4%;
    width: 80%;
    margin-left:0%;
    margin-right:auto;
    margin-top:0px;
    padding-top:3%;
}
#login-text input.btn {
    width: auto;
    height: auto;
    padding:8%;
    padding-top:5%;
    background-image: url('../images/login_btn.png');
    background-position: top center;
    background-size: contain;
    font-size: 4vw !important;
}
#login-text img{
    position: absolute;
    right: 0px;
    bottom: 0px;
    width:50%;
    height:auto;
    z-index: 10;

}
#login-text .text-conainer {

    padding-top:0%;
    padding-bottom:0%;
    margin-left:0px;
    margin-top:15%;
    padding-left:5%;
}
#login-text .text-conainer p{
    padding-top:7%;
    padding-bottom:7%;
    margin-left:0px;

}

/* Portrait */
@media only screen
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait){
    #login-text .text-conainer p{
        padding-top:27%;
        padding-bottom:27%;
        margin-top: 40%;
        margin-left:0px;
    }
    #login-text img{
        bottom: 15%;
        width: 60%;
    }
    .text-conainer {
        margin-top:10%;
        padding:0px;
    }
    .text-conainer p{
        padding-top:5%;
        padding-bottom:5%;
        margin-top: 20%;
        font-size: 8vw;
    }
}
#img-out, #img-out canvas, #img-out img {
    width: 100%;
    height: auto;
}

#img-out p {
  padding: 0 2%;
  font-size: 35%;
}