@charset "utf-8";


/* fonts */
@font-face {
    font-family: osifont;
    src: url(fonts/osifont.ttf);
}

/* content */
html, body, div {
	margin: 0;
	padding: 0;	
}

body {
	background: #ddd;
	color: #666;
	
	font-family: 'Titillium Web', sans-serif;	
	font-style: normal;
	font-weight: 300;	
	
	text-align: justify;
	letter-spacing: 0.1em;
	
	line-height: 22.5px;
	font-size: 12px;
}

h1 {
	font-family: 'osifont', sans-serif;
	font-style: normal;
	font-weight: 400;	
	
	text-align: left;
	letter-spacing: 0.2em;
	
	line-height: 1.25em;
	font-size: 40px;
	
	hyphens: manual;	
	margin: 0 0 1em 0;
}

h2 {
	font-family: 'Titillium Web', sans-serif;
	font-style: normal;
	font-weight: 400;	
	
	text-align: left;
	letter-spacing: 0.2em;
	
	line-height: 1.25em;
	font-size: 19px;
	
	hyphens: manual;	
	margin: 0 0 1.6em 0;
}

.section-homepage h1{
	margin: 0 0 0.6em 0;
}

h1, h2, p {
	padding-right: 12%;
}

p.right {
	text-align: right;
	padding: 0 0 0 12%;
}

b {
	font-weight: 600;
}

small {
	font-size: 0.8em;
	color: #999;
}

a {
	text-decoration: none;
	font-weight: 600;
	color: #666;
}

a:hover {
	text-decoration: underline;
}

img.full {
	display: block;
	width: 100%;
	margin-bottom: 1em;
}

.button {
	margin-right: 0.6em;
	padding: 0.6em 1em;
	line-height: 4em;
	
	border-radius: 0.6em;
	
	font-weight: 600;
	letter-spacing: 0.1em;
	
	text-transform: uppercase;
	text-decoration: none;	
	border: 3px solid;
}

.button:hover {
	text-decoration: none;
}

[class*="header"] {
	position: fixed;
	display: none;
	width: 100%;
	z-index: 200;
	left: 0;
	top: 0;	
}

[class*="header"] [class*="menu"]{
	position: absolute;
	width: 100%;
}

.header-desktop [class*="menu"], .menu-desktop-spacer {
	min-height: 100px;
}

.header-mobile [class*="menu"], .menu-mobile-spacer {
	height: 50px;	
}

[class*="menu"] .row {	
	height: 100%;
}

[class*="menu"] a img{
	border: none;
}

.header-desktop [class*="menu"] .item{
	height: 40px;
	box-sizing: border-box;
	
	padding: 0.6em 0;
	margin-left: 3em;
	
	font-weight: 600;
	line-height: 4em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: none;
	text-decoration: none;
}

.header-desktop [class*="menu"] .item:hover, .header-desktop [class*="menu"] .selected{
	border-bottom: 3px solid;
}

.header-mobile [class*="menu"] a{
	height: 40px;
	margin-top: 5px;
}

.header-mobile [class*="menu"] a img{
	height: 40px;
}

.menu-bright, .menu-bright a {
	color: #fff;
	border-color: #fff;
}

.menu-dark, .menu-dark a {
	color: #666;
	border-color: #666;
}

.menu-dark{
	/*background: #ddd;*/
	background-image: linear-gradient(rgba(221, 221, 221, 1.0), rgba(221, 221, 221, 1.0), rgba(221, 221, 221, 1.0), rgba(221, 221, 221, 1.0), rgba(221, 221, 221, 0.0));
	/*background: url(img/bg-menu-dark-desktop.png) top repeat-x;*/
}

.header-mobile .menu-bright .row{
	background: url(img/menu-title-phone-bright.png) no-repeat center;
	background-size: 70px 40px;
}

.header-mobile .menu-dark .row{
	background: url(img/menu-title-phone-dark.png) no-repeat center;
	background-size: 70px 40px;
}

[class*="section-"] {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-width: 320px;
	z-index: 100;
}

.section-homepage {
	color: #fff;
}

.section-footer .row{
	border-top: 2px solid #ccc;
	padding: 2em 0;
	justify-content: flex-start;
}

.row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	
	position: relative;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	clear: both;	
}

[class*="col-"] {
    box-sizing: border-box;
	display: block;
	position: relative;
	width: 100%;
	min-height: 1px;
	float: left;
}

.homepage-background{
	background-image: url(img/bg-homepage.jpg);
	background-size: cover;
	background-position: left;
	
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 0;
}

.board-item{
	margin-bottom: 10em;
}

.board-info, .board-sizes{
	margin-bottom: 1.5em;
}

.board-info{
	display: block;
	line-height: 1.5;
}

.board-tags{
	display: none;
}

.board-size {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	cursor: pointer;
}

.board-size div{
	display: none;
	margin-right: 3em;
	line-height: 1.5;
	font-weight: 600;
}

.board-sizes .selected div{
	display: block;
}

.board-sizes .selected .price{
	display: none;
}

.board-size small{
	display: block;
	border-top: 2px solid #777;
	padding-top: 0.5em;
	font-weight: 400;
}

.board-price small{
	display: none;
}

.flex{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.fl{
	float: left;
}

.fr{
	float: right;
}

.ml{
	margin-left: 1em;
}

.mr{
	margin-right: 1em;
}

.overlay-background, .overlay-content{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.overlay-background{
	background: #111;
	z-index: 400;
}

.overlay-content{
	z-index: 401;
}

.overlay-content .row{
	height: 100%;
}

.overlay-content, .overlay-content a {
	color: #fff;
	border-color: #fff;
}

.overlay-content a.button:hover, .overlay-content .selected{
	background: #fff;
	color: #111;
}

.overlay-content .disabled{
	color: #333;
	border-color: #333;
}

.overlaycontent-boardsizes .board-sizes-title {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.overlaycontent-boardsizes .board-size div, .overlaycontent-boardsizes .board-sizes-title small{
	width: 20%;
	margin-right: 5%;
}

.overlaycontent-boardsizes .board-sizes-title, .overlaycontent-boardsizes .board-size {
	padding: 1% 5%;
	box-sizing: border-box;
	border-bottom: #333 1px solid;	
}

.overlaycontent-boardsizes .board-size {	
	cursor: pointer;
}

.overlaycontent-boardsizes .board-size div{	
	display: block;
}

.overlaycontent-boardsizes .board-size:hover {	
	background: #ddd;
	color: #333;
}

.overlaycontent-boardsizes .board-size small{
	display: none;
}

.overlaycontent-boardsizes .selected {
	background: #333;
	color: #ddd;
}

.overlaycontent-boardsizes .board-size .price {
	display: block;
}

[class*="social"] {
	/*display: block;*/
	display: inline-block;
	
	margin: 0 2em 0 0;
	padding: 0;
	
	
	width: 2em;
	height: 2em;
	background-position: center;
	background-size: cover;
}

.social-facebook {			background-image: url(img/icon-facebook.png);			}
.social-facebook:hover {	background-image: url(img/icon-facebook-hover.png);		}
.social-instagram {			background-image: url(img/icon-instagram.png);			}
.social-instagram:hover {	background-image: url(img/icon-instagram-hover.png);	}
.social-youtube {			background-image: url(img/icon-youtube.png);			}
.social-youtube:hover {		background-image: url(img/icon-youtube-hover.png);		}



	
/*@media only screen and (min-width: 600px) {
    
	
}*/

@media only screen and (min-width: 760px) { /* tablet */
	body{
		line-height: 26.25px;
		font-size: 14px;
	}
	
	h1 {
		font-size: 48px;
	}
	
	h2 {
		font-size: 22px;
	}
	
	[class*="col-"] {
		width: 47%;
	}
	
	.col-12 {	width: 100%;	}
}
	
@media only screen and (min-width: 1080px) { /* tablet */
	
    .col-1  {	width: 8.33%;	}
    .col-2  {	width: 16.66%;	}
    .col-3  {	width: 25%;		}
    .col-4  {	width: 33.33%;	}
    .col-5  {	width: 41.66%;	}
    .col-6  {	width: 50%;		}
    .col-7  {	width: 58.33%;	}
    .col-8  {	width: 66.66%;	}
    .col-9  {	width: 75%;		}
    .col-10 {	width: 83.33%;	}
    .col-11 {	width: 91.66%;	}
    .col-12 {	width: 100%;	}
	
	.row{
		width: 90%;
	}
}

@media only screen and (min-width: 1440px) { /* desktop */
	body{
		line-height: 30px;
		font-size: 16px;
	}
	
	h1 {
		font-size: 56px;
	}
	
	h2 {
		font-size: 25px;
	}
		
	.row{
		width: 85%;
	}	
}

@media only screen and (min-width: 2000px) { /* widescreen */
	body {
		line-height: 33.75px;
		font-size: 18px;
	}
	
	h1 {
		font-size: 64px;
	}
	
	h2 {
		font-size: 28px;
	}
	
	.row{
		width: 80%;
	}	
}