@charset "UTF-8";

:root {
  --blauk: #0546c9; /*50,70,201*/
}

@font-face {
	font-family: 'Nautica';
	font-weight: 300;
	font-display: swap;
	font-fallback: Verdana, sans-serif;
	src: url('https://storage.googleapis.com/inscribirme.appspot.com/media/bcn_capital_nautica/Nautica-Light.woff') format('woff');
}

@font-face {
	font-family: 'Nautica';
	font-weight: 400;
	font-display: swap;
	font-fallback: Verdana, sans-serif;
	src: url('https://storage.googleapis.com/inscribirme.appspot.com/media/bcn_capital_nautica/Nautica-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Nautica';
	font-weight: 500;
	font-display: swap;
	font-fallback: Verdana, sans-serif;
	src: url('https://storage.googleapis.com/inscribirme.appspot.com/media/bcn_capital_nautica/Nautica-Medium.woff') format('woff');
}



.cap_nautica { background-position: top center; background-size: cover; background-repeat: no-repeat; width: 100vw; height: 100vh}

.cap_nautica .idiomes {position: absolute; top: 20px; right: 10%;  font-family: 'Nautica', sans-serif}

.cap_nautica .idiomes form {display: inline-block!important}
.cap_nautica .idiomes input {background: none!important; border: none; color: #fff; font-weight: 300; font-size: 0.9em}
.cap_nautica .idiomes .active {background: none!important; border: none; color: #fff; font-weight: 500!important;pointer-events: none}

.cap_nautica .login {position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);  width: 50%; border: 0px solid #f90; text-align: center; background: rgba(50,70,201, 0.8); padding: 50px; border-radius: 3px}

.cap_nautica .login .logo img {height: 90px; margin: 0px auto 30px; filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 0.2)); display: block}

.cap_nautica .login h1 {color: #fff; font-family: 'Nautica', sans-serif; font-weight: 400 ;text-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 2.5em ; margin: 30px 0px 50px}

.cap_nautica_int h2 {color: var(--blauk); font-family: 'Nautica', sans-serif; font-weight: 500; font-size: 1.3em ; margin: 20px 0px}

.cap_nautica label {color: #fff; font-family: 'Nautica', sans-serif; font-weight: 400 ;text-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 1.2em; display: block}
.cap_nautica p {color: #fff; font-family: 'Nautica', sans-serif; font-weight: 400 ;text-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 0.9em; display: block; width: 100%; margin: 20px 0px; line-height: 50px}
.cap_nautica a {color: #fff; font-family: 'Nautica', sans-serif; font-weight: 500 ;text-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 0.9em; display: inline-block}

.cap_nautica .text_input {background: #fff; font-size: 1.1em; font-family: 'Nautica', sans-serif; font-weight: 300; padding: 7px!important; border: none; margin: 10px auto; width: 30%; display: table}
.cap_nautica .text_input:focus {outline: none!important}

.cap_nautica .button {background: #fff; font-size: 1.0em; font-family: 'Nautica', sans-serif; font-weight: 500; padding: 7px 20px!important; border: none; margin: 10px auto; display: table; color: var(--blauk)} 

.popup_cap {width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; background: rgba(205,205,205, 0.7);}

.popup_cap .content {position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);  min-width: 50%; border: 0px solid var(--blauk); text-align: center; background: #ffffff; padding: 30px; border-radius: 3px}

.popup_cap select {border: none; border-radius: 0px; background: #efefef; padding: 4px 10px}

.modal-dialog {min-width: 70vw!important}

/* 4 responsive columns */

.column4sub {
  float: left;
  width: calc(25% - 10px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 10px 0px; 
}

.row4sub {margin: 0px 20px!important; padding: 0px!important; min-width: calc(100% + 0px); border: 0px solid #f09}

.row4sub:after, .row4margin:after {
  content: "";
  display: table;
  clear: both;
}

/* 3 responsive columns */

.column3sub {
  float: left;
  width: calc(33.3% - 10px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 10px 0px; 
}

.row3sub {margin: 0px 20px!important; padding: 0px!important; min-width: calc(100% + 0px); border: 0px solid #f09}

.row3sub:after, .row3margin:after {
  content: "";
  display: table;
  clear: both;
}

.sub_logout {background: #fff; text-align: center; padding: 5px 10px; ; border: 0px solid #f76; margin: 0px!important; color: var(--pink); text-decoration: none}
.sub_logout:hover {color: var(--pink); text-decoration: none}

.bookings_menu a {display: block; background: #bbb; text-align: center; padding: 5px 10px; ; border: 0px solid #f76; margin: 0px!important; color: #fff; text-decoration: none}
.bookings_menu .active {background: var(--pink);}

/**********************************************************/

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    
.cap_nautica .login {position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);  width: 90%; border: 0px solid #f90; text-align: center; background: rgba(50,70,201, 0.8); padding: 60px 10px; border-radius: 3px}  
.cap_nautica .login .logo img {height: 60px; margin: 0px auto 30px}
.cap_nautica .login h1 { font-size: 1.8em ; margin: 30px 0px 20px}
.cap_nautica label {font-size: 1.0em}
    
.modal-dialog {min-width: 95vw!important}

}