@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Cuprum:400,700|Open+Sans+Condensed:300,300i,700|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

/*GLOBAL*/

body,
html {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: 400;
    width: 100%;
    height: 100%;
    margin: 0;
    color: #374060;
}

h3 {
    margin: 8px 0;
}

a, a:link {
    color: #374060;
    text-decoration: none;
}

::-webkit-input-placeholder {
    font-style: italic;
    color: pink;
}

:-moz-placeholder {
    /* Firefox 18- */
    font-style: italic;
}

::-moz-placeholder {
    /* Firefox 19+ */
    font-style: italic;
}

:-ms-input-placeholder {
    font-style: italic;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: none;
}

/*HEADER*/

#header {
    height: 70px;
}

@media (max-width: 991px){ 
    #header {
        width: 100%;
    }
}

@media (max-width: 575px){ 
    h2 {font-size: 1.75em;}
}

.height-100 {
    height: 100%;
}

#reefy_logo {
    font-family: 'Cuprum', sans-serif;
    font-size: 2.5em;
    color: #707569;
    display: flex;
    align-self: center;
    letter-spacing: -1px;
}

#menu {
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 700;
    text-align: center;
    background: #fff0d4;
}

.registration {
    background: #ffe2aa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -1px;
    height: 70px;
}

.login {
    background: #fff0d4;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width:575px) {
    .registration, .login {
        height: 50px;
    }
}

.spacer {
    width: 1px;
    background: #363b5b;
    height: 75%;
}

.whiteline {
    border-bottom: 1px solid white;
    border-top: 1px solid white;
}

header::after, #line {
    content: "";
    clear: both;
    display: block;
    height: 4px;
    width: 100%;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FiZGQ2MyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjYWJkZDYzIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSI5NCUiIHN0b3AtY29sb3I9IiMyMWFmZjEiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMWFmZjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(right, #abdd63 0, #abdd63 10.16%, #21aff1 94.21%, #21aff1 100%);
    background: -o-linear-gradient(right, #abdd63 0, #abdd63 10.16%, #21aff1 94.21%, #21aff1 100%);
    background: -webkit-linear-gradient(right, #abdd63 0, #abdd63 10.16%, #21aff1 94.21%, #21aff1 100%);
    background: linear-gradient(right, #abdd63 0, #abdd63 10.16%, #21aff1 94.21%, #21aff1 100%)
}

@media (max-width: 575px) {
    #menu:before {
            content: "";
    clear: both;
    display: block;
    height: 4px;
    width: 100%;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FiZGQ2MyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjYWJkZDYzIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSI5NCUiIHN0b3AtY29sb3I9IiMyMWFmZjEiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMWFmZjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(right, #abdd63 0, #abdd63 10.16%, #21aff1 94.21%, #21aff1 100%);
    background: -o-linear-gradient(right, #abdd63 0, #abdd63 10.16%, #21aff1 94.21%, #21aff1 100%);
    background: -webkit-linear-gradient(right, #abdd63 0, #abdd63 10.16%, #21aff1 94.21%, #21aff1 100%);
    background: linear-gradient(right, #abdd63 0, #abdd63 10.16%, #21aff1 94.21%, #21aff1 100%)
    }
}

/*INTRODUCTION*/

#intro {
    background: url(../images/hrmenedzser_backend_bg.png) no-repeat center center;
    background-size: cover;
    height: 700px;
}

@media (max-width: 575px) {
    #intro {
        background-position: left center;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
#intro {
    background: url(../images/hrmenedzser_backend_bg.png) no-repeat center center;
    background-size: 1920px 700px;
}
}

.intro-text {
    font-size: 1.25em;
}

.miert_btn {
    width: 280px;
    background: #ffc85d;
    border-radius: 50px;
    padding: 10px;
    text-align: center;
    font-size: 1.35em;
        -webkit-box-shadow: inset 1px 1px 0px 0px rgba(55,64,96,0.5);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(55,64,96,0.5);
box-shadow: inset 1px 1px 0px 0px rgba(55,64,96,0.5);
}




/*WHY REEFY*/

#why_reefy {
    background: url(../images/why_bg.png) repeat center;
    padding-bottom: 2em;
}

@media (max-width: 767px) {
#why_reefy {
    background: #fff0d4;
}
    #why_left {
    background: #fff0d4;
    padding-bottom: 40px;
    border-bottom: 1px solid lightgray;
}
}

.reg_btn {
    background: #7f7155;
    border-bottom: 3px solid #4a4130;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1.25em;
    color: white;
    padding: 8px;
}

#why_right {
    background: #fff0d4;
}

/*REGISTRATION & LOGIN*/

.inline {
    display: inline-flex;
}

.reg_icon {
    background: #4fa8b3;
    padding: 12px 26px;
    border-radius: 50px;
    margin-right: 20px;
    font-size: 2em;
}

.modal-header {
    background: #363b5b;
    color: white;
}

.close, .close:hover {
    color: lightgray;
    opacity: 1;
    text-shadow: none;
    background: #e34b4b;
    border-radius: 50px;
    padding: 9px 12px;
    margin-top: -100px;
    margin-right: -38px;
}

.close:hover {
    color: white;
}

.modal-body, .modal-footer {
    background: #f7f5f4;
}

label {
    font-family: 'Open Sans Condensed';
    font-weight: 700;
    color: #85623e;
}

.form-control {
    border-radius: 0px;
}

.modal-footer {
    border-top: none;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 380px;
    margin: 30px auto;
  }
}
    
 .btn-primary, .btn-primary:hover {
     width: 100%;
     background: #ffc85d;
     border: none;
     border-bottom: 3px solid #e29500;
     color: #363b5b;
     font-family: 'Open Sans Condensed';
     font-size: 1.25em;
     font-weight: bold;
     cursor: pointer;
    }

.btn-primary:hover {
    background: #ecae35;
}

.btn-facebook, .btn-linkedin {
    width: 100%;
    color: white;
    font-family: 'Open Sans Condensed';
    font-weight: bold;
     cursor: pointer;
}

.btn-facebook {
    background: #45679f;
}

.btn-linkedin {
    background: #007bb6;
}

.forgot {
    color: #4fa8b3;
    text-decoration: underline;
    font-style: italic;
    font-size: 0.75em;
}

.create {
    background: #4fa8b3;
    color: white;
    font-weight: 500;
    font-size: 0.85em;
    padding: 15px;
    width: 100%;
}

.form-control-feedback {
    font-size: 0.75em;
}



/*BACKEND LOGIN*/

#backend_bg {
    background: url(../images/hrmenedzser_backend_bg.png) no-repeat center center;
    background-size: cover;
    height: calc(100% - 74px);
}

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
#backend_bg {
    background: url(../images/hrmenedzser_backend_bg.png) no-repeat center center;
    background-size: 1920px auto;
}
}

#backend_login_box {
    background: #f7f5f4;
    padding: 2em;
    margin-top: 2em;
    border: 1px solid lightgray;
    border-radius: 3px;
    width: 400px;
}

.szechenyi_2020 {
    display: none;
}

@media (min-width: 992px) {
    .szechenyi_2020 {
        display: block;
        height: 150px;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
    }
    
    .szechenyi_2020 img {
        height: 100%;
    }
}