@charset "UTF-8";
/* 
=================================================================================================================
DOCK OF THE BAY
-----------------------------------------------------------------------------------------------------------------
Diego Besné / www.diegobesne.com
=================================================================================================================
*/

/* ===========================================================
FONT-FACE 
============================================================== */

@font-face {
	font-family: 'Franklin Gothic Condensed';
	src: url('fonts/Franklin Gothic Std Extra Condensed.eot');
	src: local('☺'), url('fonts/Franklin Gothic Std Extra Condensed.woff') format('woff'), url('fonts/Franklin Gothic Std Extra Condensed.ttf') format('truetype'), url('fonts/Franklin Gothic Std Extra Condensed.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* ===========================================================
RESET 
============================================================== */
*{ box-sizing: border-box;}
html, body{ height:100%;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
body { line-height:1;}
ol, ul { list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}

img, a img, embed, iframe{ border:none; vertical-align:bottom;}
a, button{ color:#000; outline:none; text-decoration:none;
/* Webkit */ -webkit-transition:.2s ease-in-out;
/* Firefox */ -moz-transition:.2s ease-in-out;
/* Opera */ -o-transition:.2s ease-in-out; 
/* Standard */ transition:.2s ease-in-out;}
a:hover, a:focus{ color:#000; outline:none;}
form, fieldset{ border:none;}
ol, ul{ list-style:none;}
abbr{ border:none;}
hr{ display:none;}
h1, h2, h3, h4, h5, h6{ font-weight:700;}

::selection { background:#EBEAE9; color:#000; text-shadow:none;}
::-webkit-selection { background:#EBEAE9; color:#000; text-shadow:none;}
::-moz-selection { background:#EBEAE9; color:#000; text-shadow:none;}

/* GENERIC STYLES */
body{ background:#fff; color:#000; font:400 1em/1.5em 'Libre Franklin', sans-serif; text-align:center;}

#container{ margin:0 auto; padding-top:calc(20px + (40 - 20) * (100vw - 400px) / (1920 - 400)); padding-bottom:calc(40px + (80 - 40) * (100vw - 400px) / (1920 - 400)); text-align:left; overflow:hidden; width: 90%; max-width:1200px;}

#container #pre_nav{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; align-content: flex-start; flex-wrap:wrap; padding: 0 0 0 50%;}

#container #pre_nav ul.lang{ width: 50%; font-size:16px;}
#container #pre_nav ul.lang li{ display:inline-block;}
#container #pre_nav ul.lang li:before{ content:" / "}
#container #pre_nav ul.lang li:first-child:before{ content:""}
#container #pre_nav ul.lang li a{ text-transform:lowercase;}

#container #pre_nav ul.net{ width: 50%; font-size:16px; text-align: right;}
#container #pre_nav ul.net li{ display:inline-block; margin:0 0 0 2px;}

#content{ display: flex; flex-direction: row; justify-content:space-between; align-items: top; align-content: flex-start; flex-wrap:wrap;}

#content #logo{ padding-top:calc(25px + (50 - 25) * (100vw - 400px) / (1920 - 400)); width:45%;}
#content #logo img{ height: auto; width: auto; max-width: 90%;}

#content #text{ padding-top:calc(25px + (50 - 25) * (100vw - 400px) / (1920 - 400)); width:50%;}
#content #text h2{ color: #000; font-family:'Franklin Gothic Condensed', sans-serif; font-size:calc(36px + (48 - 36) * (100vw - 400px) / (1920 - 400)); line-height:1em; text-transform: uppercase; letter-spacing: .0625em;}

#content #text .block{ padding-top:calc(25px + (50 - 25) * (100vw - 400px) / (1920 - 400));}
#content #text h3{ border-bottom:thin solid #000; font-size:calc(24px + (36 - 24) * (100vw - 400px) / (1920 - 400)); font-weight: 400; line-height: 1.125em; padding:0 0 .375em; text-transform: uppercase;}
#content #text h3 sup{ font-size: 50%; vertical-align:text-top; display: inline-block; padding: 0; line-height: 1.5em;}
#content #text h3 em{ font-size:calc(18px + (24 - 18) * (100vw - 400px) / (1920 - 400)); font-weight: 400; line-height: 1.5em; font-style: normal; text-transform: none;}
#content #text h3 em strong{ font-weight: 700;}

#content #text .banner{ display: flex; flex-direction: row; justify-content:space-between; align-items: center; align-content: flex-start; flex-wrap:wrap; padding: 2em 0 0;}
#content #text .banner a{ font-family:'Franklin Gothic Condensed', sans-serif; text-transform: uppercase; font-size:calc(18px + (24 - 18) * (100vw - 400px) / (1920 - 400)); letter-spacing: .0625em; line-height: 1.5em; display: inline-block; border: 3px solid #000; padding: .5em 1em; text-align: center; width: 100%;}
#content #text .banner a:hover{ border-color:#000; background: #000; color: #fff;}

#content #text ul{ font-size:calc(18px + (24 - 18) * (100vw - 400px) / (1920 - 400)); line-height: 1.125em; margin: 1em 0 0;}

#content #text ul li a{ display: inline-block; border-bottom: thin solid #000; padding: 0 0 .125em;}
#content #text ul li a:hover{ border-color:#EBEAE9;}

#content #text ul.anteriores{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; align-content: flex-start; flex-wrap:wrap; margin:1em 0 0;}
#content #text ul.anteriores li{ font-weight: 700; line-height: 1.5em; width: 16.666%;}

#content #text ul.anteriores li a{ border-bottom:none; padding: 0;}
#content #text ul.anteriores li a:hover{ color: #777;}

.contacto p{ font-size:calc(18px + (24 - 18) * (100vw - 400px) / (1920 - 400)); line-height: 1.5em; margin: 1em 0 0;}
.contacto p a.mail{ display: inline-block; border-bottom: thin solid #000; padding: 0 0 .125em;}
.contacto p a.mail:hover{ border-color:#EBEAE9;}

.financiacion p { font-size: .875em; line-height: 1.5em; font-style: italic;}
.financiacion img { margin: 1em 0 0; height: auto; width: 200px;}

@media only screen and (min-width:0) and (max-width:600px) {
#container #pre_nav{ padding: 0;}
#content #logo{ width:100%;}
#content #logo img{ max-width:75%;}
#content #text{ width:100%;}
#content #text ul.anteriores li{ width: 20%;}
}