@charset "utf-8";
@font-face {
    font-family: 'MyFonts';
    src: url('../fonts/HelveticaNeue.otf');
}

.fonts {
    font-family: 'Roboto Slab', serif;
    color: #666;
}

.fonts2 {
    font-family: 'Roboto Slab', serif;
    color: #FFFFFF;
}

.fonts_wide {
    font-family: 'Roboto Slab', serif;
    color: #666;
}

.fonts_recred {
    font-family: 'Roboto Slab', serif;
    color: #BA1F30;
}

body {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin: 0px;
    /*background-color: #0073b2;*/
}


/* Cookie warning design */

#cookie_warning {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 38px;
    background-color: #BA1F30;
    border-bottom: 1px solid #BA1F30;
    box-shadow: 0px 1px 5px #CCC;
    z-index: 1000;
}

#cookie_warning_content {
    text-align: center;
    display: block;
    margin: auto;
}

.cookie_warning_label {
    position: relative;
    /*	left:3%;*/
    font-size: 17px;
    top: 5px;
    display: inline-block;
}

.cookie_warning_gotIt {
    position: relative;
    left: 2%;
    display: inline-block;
    top: 5px;
    border: 1px solid #CCC;
    border-radius: 4px;
    background-color: white;
    text-decoration: none;
    font-size: 16px;
    padding-bottom: 4px;
    padding-top: 4px;
    width: 60px;
    text-align: center;
}

.cookie_warning_gotIt:active {
    top: 4px;
}


/* End of cookie warning design */

#first_section {
    width: 100%;
    background-color: #FFFFFF;
    z-index: 1000;
}

#second_section {
    width: 100%;
    background-color: #FFFFFF;
    z-index: 1000;
}


/*Alternative toolbar design*/

#toolbarBox {
    position: relative;
    text-align: center;
}

#toolbar {
    position: relative;
    left: 30%;
    width: 70%;
    /*height:100px;*/
    height: 0px;
}

#logo_lbl {
    position: relative;
    /*	top:20px;
	left:5%;*/
    left: 0;
    margin: 0 auto;
    z-index: 10;
}

#logo_img {
    position: relative;
    text-align: center;
    width: 220px;
    height: 60px;
    margin-top: 30px;
    margin-bottom: 30px;
}

#toolbar_tabs_box {
    position: relative;
    float: right;
    right: 3%;
    top: 55px;
}

.toolbar_tabs {
    float: right;
    font-size: 19px;
    padding-right: 30px;
    padding-left: 30px;
    text-decoration: none;
    border-left: 1px solid #CCC;
}

.toolbar_tabs_left {
    float: right;
    font-size: 19px;
    padding-right: 30px;
    padding-left: 30px;
    text-decoration: none;
}

#short_desc_box {
    position: relative;
    text-align: center;
    width: 100%;
    background-color: #EEE;
    /*#E6E6FF;*/
    /*border-bottom: 1px solid #CCC;*/
    min-height: 360px;
    display: inline-block;
    z-index: 10;
}

#tagline_title {
    position: relative;
    margin: 0 auto;
    width: 60%;
    font-size: 32px;
    font-weight: bold;
    display: block;
    color: #BA1F30;
    text-align: center;
}

#tagline_subtitle {
    position: relative;
    margin: 0 auto;
    width: 90%;
    font-size: 24px;
    font-weight: bold;
    display: block;
    color: #666;
    text-align: center;
}

#platform_desc {
    position: relative;
    left: 20%;
    width: 60%;
    display: block;
    font-size: 17px;
    text-align: justify;
}

#login_register_box {
    width: auto;
    text-align: center;
    display: block;

    margin-bottom: 30px;
}

#login_button {
    position: relative;
    text-align: center;
    display: block;
    text-decoration: none;
    width: 140px;
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    height: 50px;
    line-height: 50px;
    font-size: 17px;
    border: 1px solid #BA1F30;
    border-radius: 4px;
    background: #BA1F30;
    color: #ffffff;
    margin: 0 auto;
    opacity: 0.8;
    box-shadow: 0 5px 10px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23);
}
#login_button:hover {
    opacity: 1.0;
}

#failover_button {
    position: relative;
    text-align: center;
    display: block;
    text-decoration: none;
    width: 250px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 17px;
    border: 1px solid #333;
    border-radius: 0px;
    background: #666666;
    color: #ffffff;
    margin: 0 auto;
}

#learn_more {
    position: relative;
    margin: 0 auto;
    /*width: 240px;*/
    width:350px;
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    height: 50px;
    line-height: 50px;
    font-size: 17px;
    /*border: 1px solid #BA1F30;*/
    border-radius: 4px;
    cursor: pointer;
    /*color: #BA1F30;*/
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    display: block;
    /*background-color: white;*/
    background-color: #323437;
    opacity: 0.8;
    box-shadow: 0 5px 10px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23);
    margin-bottom: 30px;
}

#learn_more:hover {
    opacity: 1.0;
}


#or_label {
    font-size:17px;
    font-weight:bolder;
    color:#323437;
    font-family: 'Roboto Slab', serif;

    margin: 0px 30px;
}

/* Login box design */

#login_box {
    position: absolute;
    top: 120px;
    left: 70%;
    width: 25%;
    /*	background-color:#0073b2;
	border:1px solid #314179;*/
    background-color: #BA1F30;
    /*#42A5F5;*/
    border: 1px solid #7F7F7F;
    /*#2196F3;*/
    display: block;
    min-height: 450px;
    z-index: 1000;
    border-radius: 6px;
    box-shadow: 0 0 8px #7F7F7F;
    /*#0073b2;*/
}

#login_lbl {
    position: relative;
    left: 5%;
    top: 5px;
    font-size: 25px;
}

.separator {
    position: relative;
    left: 0px;
    width: 96%;
    border-bottom: 1px solid #CCC;
    border-style: none none solid;
}

#warning_box {
    display: none;
}

#dont_have_label {
    font-size: 20px;
    display: block;
    margin: auto;
    text-align: center;
}

.texts {
    border: 1px solid #666;
    font-size: 16px;
    color: #666;
    position: relative;
    height: 40px;
    width: 70%;
    text-indent: 30px;
    position: relative;
    left: 15%;
    margin: auto;
}

#username {
    background: url(../img/faceIcon.png) center left 10px no-repeat white;
}

#password {
    background: url(../img/keyIcon.png) center left 10px no-repeat white;
}

input[type=text]:focus,
input[type=password]:focus {
    box-shadow: 0 0 8px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

#keep_me {
    position: relative;
    left: 15%;
    font-size: 16px;
    border-radius: 50%;
}

#forgotPassword {
    position: relative;
    left: 15%;
    font-size: 16px;
    text-decoration: none;
}

#forgotPassword:hover {
    text-decoration: underline;
}

.login_button {
    position: relative;
    left: 15%;
    width: 70%;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 17px;
    background-color: #7F7F7F;
    border: 1px solid #333;
    display: block;
    cursor: pointer;
    color: white;
    text-decoration: none;
    text-align: center;
}

.login_button:active {
    top: 2px;
}

#loading_img {
    position: relative;
    left: 45%;
}

#message {
    position: relative;
    left: 15%;
    width: 70%;
    display: block;
    font-size: 18px;
    color: white;
}

#message2 {
    position: relative;
    left: 10%;
    width: 50%;
    font-size: 18px;
    color: red;
}


/* View profile box design */

#view_profile_box {
    position: relative;
    left: 0%;
    border-top: 1px solid #EEEEEE;
    /*#EDEFED;*/
    border-bottom: 1px solid #EEEEEE;
    background-color: #EEEEEE;
    width: 100%;
    max-width: 100%;
    height: 250px;
    display: block;
}

#description {
    font-size: 17px;
    position: relative;
    left: 10%;
    width: 60%;
    display: block;
}

#url {
    background: url(../img/link_icon.png) 12px 11px no-repeat;
    background-color: white;
    border: 1px solid #999;
    padding-left: 3%;
    font-size: 17px;
    color: #4f4f4f;
    height: 40px;
    width: 35%;
    position: relative;
    left: 10%;
}

#proceed_button {
    position: absolute;
    left: 48%;
    width: 10%;
    height: 22px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 17px;
    display: block;
    cursor: pointer;
    color: white;
    text-decoration: none;
    text-align: center;
}

.custom_button_style {
    background-color: #BA1F30;
    border: 1px solid #BA1F30;
}


/* Overlay card design */

.background_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    /*#000*/
    filter: alpha(opacity=50);
    opacity: 0.6;
    -moz-opacity: 0.6;
    z-index: 14000;
    display: none;
}

#howItWorksDiagram {
    position: fixed;
    top: 5%;
    left: 25%;
    width: 50%;
    height: 90%;
    border: 1px solid #999;
    border-radius: 4px;
    background-color: white;
    z-index: 15000;
    box-shadow: 0px 1px 6px #999;
    display: none;
    overflow: auto;
}

#hidden_howItWorksDiagram {
    position: relative;
    display: block;
    margin: auto;
    width: 100%;
}

.centered_label {
    text-align: center;
    margin: auto;
    display: block;
    font-weight: bold;
    font-size: 20px;
}

.centered_label2 {
    position: relative;
    left: 30%;
    width: 50%;
    display: block;
    font-weight: bold;
    font-size: 28px;
    color: #BA1F30;
}

.button {
    position: relative;
    left: 15%;
    text-align: center;
    font-size: 17px;
    width: 70%;
    padding-top: 9px;
    padding-bottom: 9px;
    /*background-color:#F9A825;/*FFA000*/
    /*border:1px solid #F79C06;*/
    background-color: #CCC;
    border: 1px solid #333;
    display: block;
    cursor: pointer;
    color: #333;
    text-decoration: none;
}

.button:active {
    top: 2px;
}


/* How it Works Design */

.how_it_works_box {
    position: relative;
    min-height: 350px;
    width: 100%;
    display: block;
    background-color: #ffffff;
}

.how_it_works_box2 {
    position: relative;
    min-height: 350px;
    width: 100%;
    display: block;
    background-color: #ECEFF1;
}

.how_it_works_box3 {
    position: relative;
    height: 400px;
    width: 100%;
    display: block;
    background-color: #E6E6FF;
}


/*How it works title box design*/

.how_it_works_box1 {
    position: relative;
    min-height: 400px;
    width: 100%;
    display: block;
    background-color: #ffffff;
}

.howItWorks_short_desc {
    position: relative;
    left: 20%;
    width: 60%;
    font-size: 17px;
    display: block;
    text-align: justify;
}


/* Use cases Design */

.howItWorksSeparator {
    position: relative;
    left: 0px;
    width: 70%;
    border-bottom: 1px solid #CCC;
    border-style: none none solid;
}

.whyUseIDifierBoxLeft {
    position: absolute;
    left: 0%;
    width: 32%;
    height: 500px;
}

.whyUseIDifierBoxCenter {
    position: absolute;
    left: 33%;
    width: 32%;
    height: 500px;
}

.whyUseIDifierBoxRight {
    position: relative;
    left: 65%;
    width: 32%;
    height: 500px;
    margin-bottom: 40px;
}

.useCaseImgBox {
    display: block;
    margin: auto;
    text-align: center;
    border: 1px solid #333;
    border-radius: 50%;
    height: 250px;
    width: 250px;
}

.useCaseImg {
    border-radius: 50%;
}

.useCaseDescBox {
    display: block;
    margin: auto;
    width: 80%;
    min-height: 250px;
}

.useCaseDesc {
    display: block;
    text-align: justify;
    font-size: 17px;
}


/* How secure is it design */

.how_secure_is_it_list {
    position: relative;
    left: 0%;
    font-size: 17px;
    color: #333;
    display: block;
    width: 94%;
    text-align: justify;
}

.howItWorksImgBox {
    position: absolute;
    left: 0%;
    width: 49%;
    height: 350px;
}

.howItWorksDescBox {
    position: absolute;
    left: 49%;
    width: 50.8%;
    height: 350px;
}

.howItWorksCenteredBox {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 60%;
    left: 20%;
}

.howItWorksTitles {
    color: #BA1F30;
    font-size: 33px;
    font-weight: bold;
    display: block;
    margin: auto;
    text-align: center;
}

.howItWorksDescs {
    color: #666;
    font-size: 19px;
    display: block;
    text-align: justify;
}

.how_it_works_imgs {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    margin: auto;
    text-align: center;
    /*  	border:1px solid #666;
	border-radius:50%;*/
}


/* How secure is it design */

#howSecureIsItHiddenBox {
    display: none;
}

#howSecureIsItButton {
    text-decoration: none;
    font-size: 20px;
    display: block;
    width: 18%;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    position: relative;
    background-color: #fff;
    margin-bottom: 15px;
    border-radius: 0px;
    border: 1px solid #BA1F30;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

#howSecureIsItButton span {
    position: absolute;
    right: 0px;
    width: 50px;
    height: 50px;
    background-color: #BA1F30;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
}

#howSecureIsItButton span img {
    position: absolute;
    left: 5px;
    top: 5px;
    display: inline-block;
    margin: auto;
    text-align: center;
    width: 40px;
    height: 40px;
}

#showDiagramButton {
    position: relative;
    left: 41%;
    width: 18%;
    color: #fff;
    font-size: 18px;
    display: block;
    text-align: center;
    text-decoration: none;
    border: 1px solid #BA1F30;
    background-color: #BA1F30;
    padding-top: 8px;
    padding-bottom: 8px;
    opacity: 0.7;
}

#showDiagramButton:hover {
    opacity: 1;
}


/* Download google play design*/

#samsung_img {
    position: absolute;
    top: 66px;
    left: 15%;
    width: 500px;
    height: 334px;
}

.googlePlayBox {
    position: absolute;
    left: 49%;
    width: 50%;
    height: 400px;
}

.googlePlayCenteredBox {
    position: relative;
    top: 35%;
    width: 60%;
    left: 20%;
}

#google_play_icon {
    position: relative;
    display: block;
    margin: auto;
    text-align: center;
    width: 244px;
    height: 84px;
}


/* CheckBox Design */

input[type=checkbox].css-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

input[type=checkbox].css-checkbox+label.css-label {
    height: 15px;
    display: inline-block;
    line-height: 15px;
    background-repeat: no-repeat;
    background-position: 0 0;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    left: 15%;
    font-size: 17px;
    color: white;
}

input[type=checkbox].css-checkbox:checked+label.css-label {
    background-position: 0 -15px;
}


/*.css-label{ background-image:url(../img/dark-check-green.png); }*/

.klaus {
    background-image: url(../img/klaus.png);
}

input[type=checkbox].css-checkbox.lrg+label.css-label.lrg {
    padding-left: 30px;
    height: 20px;
    display: inline-block;
    line-height: 20px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 17px;
    vertical-align: middle;
    cursor: pointer;
}

input[type=checkbox].css-checkbox.lrg:checked+label.css-label.lrg {
    background-position: 0 -20px;
}

.readMoreButton {
    position: relative;
    top: 5px;
    color: #BA1F30;
    text-decoration: none;
}

.readMoreButton:hover {
    text-decoration: underline;
}

.no_link {
    color: #BA1F30;
    text-decoration: none;
}

.bold_strings2 {
    color: #BA1F30;
}

.help_header {
    background-color: #BA1F30;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    height: 40px;
}

.close_btn {
    position: relative;
    float: right;
    right: 10px;
    top: 10px;
    font-size: 19px;
    font-family: Arial;
    font-weight: bold;
    color: #E0E0E0;
    text-decoration: none;
}

.close_btn:hover {
    color: white;
}

#howItWorksDiagram_title {
    position: relative;
    top: 10px;
    left: 3%;
    color: white;
    font-size: 18px;
    font-family: 'MyFonts';
}


/* Design to fix bugs */

#howIDifierWorks {
    margin-top: 10px;
    display: block;
}

#onlinePersonalsText {
    /*	position:relative;
	top:6px;	
*/
}

.sublist {
    position: relative;
    left: 0%;
    display: inline;
}

.sublist li {
    position: relative;
    top: 5px;
    width: 95%;
    margin: auto;
}

.identity_secure_title {
    position: relative;
    width: 50%;
    font-size: 17px;
    display: block;
    margin: auto;
    text-align: justify;
}

.identity_secure_list {
    position: relative;
    left: 25%;
    font-size: 17px;
    color: #333;
    display: block;
    width: 45%;
    text-align: justify;
    list-style: square outside none;
}


/*Video design*/

.idifier_video_frame {
    position: relative;
    width: auto;
    height: 430px;
    display: block;
}

.idifier_video_image {
    position: relative;
    display: block;
    margin: auto;
    text-align: center;
    width: 740px;
    height: 420px;
}

#youtubeVideo {
    position: relative;
    top: -395px;
    margin: auto;
    display: block;
    width: 560px;
    height: 332px;
    border: 0;
    z-index: 10;
}

#pabac_button {
    position: relative;
    margin: 0 auto;
    width: 200px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 17px;
    border: 1px solid #2E8B57;
    border-radius: 0px;
    cursor: pointer;
    color: #3CB371;
    text-decoration: none;
    text-align: center;
    display: block;
    background-color: white;
    opacity: 0.7;
}

#pabac_button:hover {
    opacity: 0.9;
}