*{
    /* transition: 0.1s ease-in-out; */
    color: #313131;
}

img { 
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    }

html, body{
    min-width: 480px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Lora', serif;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html{
    overflow-y: scroll;
    overflow-x: hidden;
}

body{
    /* background-image: url("../img/backLightGrey.png"); */
    background-color: #EEEEEE; /* in case page can't load image */
    
    /* full page background for all screens */
    background-image: url("../img/background-with-mascout.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/* new */
.page-title-wrapper{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    height: 70px;
    padding: 5px;
    border-radius: 12px;
}

.page-title{
    position: relative;
    float: left;
    width: 100%;
    text-align: left;
    line-height: 70px;
    font-size: 120%;
    border-bottom: 1px solid #bbb;
}

.page-title img{
    position: relative;
    float: left;
    height: 64px;
    margin-top: 3px;
    margin-right: 5px;
}
/* new -end */

.divider1{
    position: relative;
    float: left;
    width: 100%;
}

.divider2{
    position: relative;
    float: left;
    width: 50%;
}

.divider3{
    position: relative;
    float: left;
    width: 33.33%;
}

.divider4{
    position: relative;
    float: left;
    width: 25%;
}

/* main container for content for all pages */

.content-wrapper-holder{
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 50px 0 0 0;
}

.content-wrapper{
    position: relative;
    margin: auto;
    margin-bottom: 30px;
    width: auto;
    min-width: 420px;
    max-width: 960px;
    border-radius: 12px;
    box-shadow: 0 0 2px 1px #666;
    padding-bottom: 5px;
    background-color: rgba(255, 255, 255, 0.2);
}

.content{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    height: calc(100% - 10px);
    margin: 5px 0 0 5px;
    background-color: #eee;
    border-radius: 12px;
    box-shadow: 1px 1px 2px 0 #333;
    padding: 5px;
}

.go-top-wrapper{
    position: relative;
    margin: 30px auto;
    width: 150px;
    height: 60px;
    box-shadow: 1px 1px 2px 0 #333;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 5px;
}

.go-top-wrapper a{
    display: block;
    position: relative;
    width: calc(100% - 10px);
    height: 100%;
    margin: 0;
    box-shadow: 1px 1px 2px 0 #333;
    border-radius: 12px;
    cursor: pointer;
    background-color: #fff;
    line-height: 60px;
    text-align: center;
    padding: 0 5px 0 5px;
}

.go-top-wrapper a:hover{
    box-shadow: -1px -1px 2px 0 #333;
    margin-top: 1px;
}

.info-text{
    position: relative;
    float: left;
    width: calc(100%);
    min-height: 45px;
    background-color: #fff;
    margin: 5px 0 5px 0;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    line-height: 45px;
    font-size: 100%;
}

.info-text-neutral{
    box-shadow: 0 0 2px 0#2c415d;
    color: #2c415d;
}

.info-text-success{
    box-shadow: 0 0 2px 0 #677458;
    color: #677458;
}

.info-text-fail{
    box-shadow: 0 0 2px 0 #b05555;
    color: #b05555;
}

/* hover effects */

a:hover, .quitYes a:hover, .quitNo a:hover, .menuQuestionMark:hover, button:hover, .hover:hover, .accountMenuEach:hover, .content-menu-each:hover, .size-menu-each:hover, .shape-unlock-yes-after-cancel:hover, .shape-unlock-button-after-cancel:hover, .keyboardFirstRow div:hover, .keyboardSecondRow div:hover, .keyboardThirdRow div:hover, .menuPause:hover, .menuExit:hover, .menuLeft:hover, .menuRight:hover, .menuSwitch:hover, .showErrors:hover, .showLetter:hover, .showWord:hover, .menuMute:hover, .menuKeyboard:hover, .menuRanksUnselected:hover, .ranksUnselected:hover, .ranksUnselected2:hover, .listEach:hover, .listHolderClose:hover{
    /* box-shadow: 0 0 1px 2px #2c415d; */
    /* box-shadow: -1px -1px 2px 0px #666666;
    margin-top: 2px;
    transition: 0.1s ease-in-out; */
    /* border-bottom: 5px solid #2c415d; */
}

/* h1 - h5 */

h1, h2, h3, h4, h5{
    position: relative;
    /* margin: 20px auto 20px; */
    /* color: #2c415d; */
    text-align: left;
    font-weight: normal;
}

h1{
    font-size: 160%;
    width: 200px;
    height: 30px;
    line-height: 30px;
}

h2{
    font-size: 120%;
    width: 200px;
    height: 25px;
    line-height: 25px;
}

h3{
    font-size: 120%;
}

h4{
    font-size: 110%;
}

h5{
    font-size: 80%;
    font-style: oblique;
    color: #222;
}

/* focus effect */

select:focus, input:focus, textarea:focus{
    /* box-shadow: -1px -1px 2px 0 #666666; */
}

input:focus, select, select:focus, textarea:focus, button:focus{
    outline: none;
    outline: 0;
}

/* ----- */

a{
    color: #222;
    text-decoration: none;
    font-size: 90%;
    cursor: pointer;
    outline: 0;
}

.pageTitle{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    margin-left: 10px;
    height: 27px;
    line-height: 27px;
    font-size: 160%;
    font-weight: normal;
    text-align: center;
    color: #2c415d;
    /* border-bottom: 1px solid #bbb; */
}

p{
    font-size: 100%;
}

/* check below */



.title-index{
    position: relative;
    width: 480px;
    height: auto;
    margin: 20px auto 60px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.title-index img{
    width: 480px;
    height: auto;
    max-height: 300px;
}

/* used for terms of use and privacy policy only */

/* .privacyContent{
    position: relative;
    width: calc(100% - 20px);
    height: auto;
    margin: auto;
    background-color: #fff;
    border-radius: 12px;
    max-width: 960px;
    box-shadow: 1px 1px 2px 0 #666666;
} */

.privacyContent h1{
    position: relative;
    margin: auto;
    width: calc(100% - 20px);
    height: 45px;
    line-height: 45px;
    padding: 0 10px 0 10px;
    font-weight: normal;
    text-align: left;
    font-size: 120%;

    background-image: url(../img/backLightGrey.png);
    border-radius: 12px 12px 0 0;
    background-color: #2c415d;
    color: #fff;
}

.privacyContent{
    position: relative;
    float: left;
    width: 100%;
    /* width: calc(100% - 20px);
    background-color: #fff;
    margin: 10px auto 5px;
    padding: 10px;
    border-radius: 12px; */
    font-size: 90%;
}

/* hover effect for all <a> on hover*/

/* a:hover{
    border-top: 3px solid #2c415d;
    border-bottom: 3px solid #2c415d;
    margin-top: -2px;
} */




/* PREGLEJ TOLE SPODI */

/* tip */

/* .tipWrapper{
    position: relative;
    float: left;
    width: calc(100% - 32px);
    padding: 5px;
    margin: 10px 0 10px 10px;
    border-radius: 5px;
    border: 1px solid #bbb;
    background-color: #fff;font-size: 100%;
    /* background-color: #2c415d; 
    
} */

.tipText{
    position: relative;
    float: left;
    width: calc(100% - 14px);
    margin: 0 0 0 2px;
    padding: 5px;
    border-radius: 12px;
    background-color: #e6dfd3;
    font-size: 90%;
    box-shadow: 0 0 2px 0 #666;
}

.tipText i{
    display: block;
    position: relative;
    width: 100%;
    font-size: 85%;
    text-align: center;
    font-style: normal;
}

.contentTitle{
    position: relative;
    margin: auto;
    margin-bottom: 20px;
    padding-top: 10px;
    width: 200px;
    height: 40px;
    border-bottom: 1px solid #bbb;
    font-weight: normal;
    text-align: center;
    color: #2c415d;
    font-size: 140%;
    line-height: 40px;
}