@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: black;
}

:-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/reefy_header_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/reefy_header_bg@2x.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/bcg.jpg);
    height:90%;
	background-attachment:fixed;
}

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
#backend_bg {
    background: url(../images/bcg.jpg);
    /*background-size: 1920px auto;*/
	background-attachment:fixed;
}
}

#backend_login_box {
    background: #f7f5f4;
    padding: 2em;
    margin-top: 10px;
    border: 1px solid lightgray;
    border-radius: 3px;
    width: 400px;
    margin-left: 500px;
	box-shadow:10px 10px 15px black;
}

.wrapper::after {
    clear: both;
}
.wrapper::before, .wrapper::after {
    content: " ";
    display: table;
}
*::after, *::before {
    box-sizing: border-box;
}
.dark-header {
    background: #f2f0f1 none repeat scroll 0 0;
}
.wrapper {
    min-height: 100%;
    overflow: hidden;
    position: relative;
}

a, a:hover {text-decoration: none;color: #E2615C;
	transition: all 0.2s ease-in-out 0s;
	-webkit-transition: all 0.2s ease-in-out 0s;
}
input,
button {
	transition: all 0.2s ease-in-out 0s;
	-webkit-transition: all 0.2s ease-in-out 0s;
}
.btn-grps .pink-btn:hover {
    background: #fff none repeat scroll 0 0 !important;
    color: #303030 !important;
}
.btn-grps {
    margin-right: 15px;
    margin-top: 19px;
}
.pink-btn {
    background: #e2615c none repeat scroll 0 0;
    border: medium none;
    border-radius: 2px;
    box-shadow: 0 2px 0 #b2534f;
    color: #fff;
    font-size: 18px;
    height: 48px;
    padding: 0 35px;
}
.btn-grps .dark-btn {
    background: #565656 none repeat scroll 0 0;
    box-shadow: 0 2px 0 #4b4b4b;
}
.btn-grps .pink-btn {
    display: inline-block;
    height: 51px;
    line-height: 51px;
    margin-left: 17px;
}
.logo {
    float: left;
    font-size: 25px;
    font-weight: 600;
    margin:10px;
}

.logo a 
{
		color:white;
}



/* Login Page */
.dark-header {background: #f2f0f1;}
.dark-header header{background: #303030; position: absolute; width: 100%;	}
.btn-grps .pink-btn {height: 51px;display: inline-block;line-height: 51px;margin-left: 17px;}
.btn-grps .pink-btn:hover{background: #fff !important; color: #303030 !important;}
.btn-grps .dark-btn{background: #565656; box-shadow:0 2px 0 #4b4b4b; }
.btn-grps {margin-top: 13px;margin-right: 15px;}
.login-middle {vertical-align: middle;display: table-cell;height: 100vh;}
.login-details label {width: 100%;margin-bottom: 20px;}
input:focus, input:hover{outline: none;}
.login-details input[type="text"], .login-details input[type="password"] {width: 100%;padding-left: 10px;background: #f4f4f4;height: 40px;border: 1px solid #d5d5d5;border-radius: 5px;font-weight: 600;}
.login-details h2 {font-size: 25px;margin: 0;padding-bottom: 30px;}
.login-details span {margin-left: 15px;vertical-align: top;font-weight: 400;font-size: 14px;}
.btn-sub span a, .btn-sub span a:hover{color: #000; font-size: 15px;}
.btn-sub button {border-bottom: 2px solid #b2534f;box-shadow: none;border-radius: 3px; width: 145px;}
.btn-sub button:hover{background:#b2534f; border-radius: 3px; box-shadow: none;}
.login-details {max-width: 666px;margin: 0 auto;background: #fff;padding: 35px;border-radius: 7px; box-shadow: 0 0 7px rgba(0,0,0,0.1);}
.login-inner {height: 100%;display: table;width: 100%;background:url("../images/hatter.jpg");background-size:cover;background-position:center center}
.btn-sub span{margin-left: 25px;}


 @media (max-width:767px) {
/*KK*/
.login-middle {display: block;height: auto;padding: 15px;}
.dark-header header {position: relative;}
.btn-grps .pink-btn {height: 35px;display: inline-block;line-height: 35px;margin-left: 15px;max-width: 200px;display: block;text-align: center;margin:0px auto 13px}
.btn-grps {float: left !Important;width: 100%;}
.btn-sub span {text-align: left;display: block;margin-left: 0;margin-top: 15px;}
}