/**********/
/* LAYOUT */
/**********/

/* Default font-sizes voor tekst en headers */
body
{
    font-size:16px;
}

.default-title,
h2
{
    font-size:20px;
    line-height:22px;
    margin:0;
    font-weight:normal;
}

h2
{
    margin-bottom:10px;
}

/* Medium and up */
@media screen and (min-width: 40em)
{
    body
    {
        font-size:20px;
    }

    .default-title,
    h2
    {
        font-size:26px;
        line-height:28px;
    }
}

/* Reset Foundation P naar defaults */
p
{
    line-height: normal;
}

[type="file"], [type="checkbox"], [type="radio"] {
    margin: 0;
}

.contentblock p:last-child
{
    margin-bottom:0;
}

body
{
    background:none;
}

/* Reset Foundation a:hover naar defaults */
a:hover
{
    color:white; /* Gaat dit goed met alle apps? */
}

/* Reset Foundation .button naar defaults */
.button,
.button:hover
{
    background-color:transparent;
    margin: 0;
    padding: 0;
    border:none;
    box-sizing:content-box;

    /* defaults */
    width:100%;
    height:42px;
	line-height:42px;
	text-align:center;
	text-transform:uppercase;
	box-shadow:0px 1px 3px 0px #000;
	text-shadow:0px -1px 1px rgba(0, 0, 0, .4);
	font-size:16px;
    font-weight: normal;
	border-radius:3px;
	cursor:pointer;

	border:1px solid rgba(255, 255, 255, .1);
	background-image:linear-gradient(top, #a9985c 0%, #756734 100%);
	background-image:-o-linear-gradient(top, #a9985c 0%, #756734 100%);
	background-image:-moz-linear-gradient(top, #a9985c 0%, #756734 100%);
	background-image:-webkit-linear-gradient(top, #a9985c 0%, #756734 100%);
	background-image:-ms-linear-gradient(top, #a9985c 0%, #756734 100%);
	background-position:-1px -1px;
	background-size: 101% 44px;

	background-repeat:no-repeat;
}

/* Reset Foundation tables naar defaults */
table tbody td 
{
    padding: 0px;
    font-size: 16px;
}

/* Medium and up */
@media screen and (min-width: 40em) 
{
    table tbody td 
    {
        font-size: 20px;
    }
}

.layout-row
{
    position:relative;
    display:block;
    z-index:50;
}

.layout-row .layout-column
{
    display:inline-block;
    vertical-align:top;
    width:35%;
}

.layout-row .layout-column:nth-child(1)
{
    width:15%;
}

.layout-row .layout-column:nth-child(2)
{
    width:100%;
    padding: 8px;
    background: rgba(255,255,255, 0.80);
}

.layout-row .layout-column:nth-child(3)
{
    width:100%;
    padding: 18px 18px;
}

header .layout-row .layout-column
{
    position:relative;
    height:100px;
}

header .layout-row .layout-column:nth-child(2)
{
    padding: 0px;
    background:transparent;
}

.layout-row.content .layout-column:nth-child(2)
{
    padding-top: 108px;
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) 
{
    .layout-row.content .layout-column:nth-child(2)
    {
        padding: 120px 18px 18px 18px;
    }
}

/* Large and up */
@media screen and (min-width: 64em) 
{
    .layout-row .layout-column:nth-child(2)
    {
        width:35%;
        min-width:520px;
    }
    
    .layout-row .layout-column:nth-child(3)
    {
        width:35%;
        min-width:300px;
        display: none;
    }
    
    .layout-row.content .layout-column:nth-child(2)
    {
        padding: 120px 18px 18px 18px;
    }
}

/**********/
/* HEADER */
/**********/
header
{
    position:fixed;
    width:100%;
    z-index:100;
}

a.logo
{
    width: 100%;
    height: 90px;
    margin:5px 0;
    display: block;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

.page-title {
    font-size: 40px;
    color: #343434;
    line-height: 110px;
    white-space: nowrap;
}

/* Small only */
@media screen and (max-width: 39.9375em) 
{
    a.logo
    {
        height:100px;
        width:55%;
        margin:auto;
    }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) 
{
    a.logo
    {
        height:100px;
        width:70%;
        margin:auto;
    }
}



/*******************/
/* Language switch */
/*******************/
.languageswitcher,
.backbutton
{
    display: block;
    position:absolute;
    top: calc(50% - 24px);

	width:48px;
	height:48px;
	border-radius:32px;

	background-image:linear-gradient(top, #ababac 0%, #f3f3f3 90%);
	background-image:-o-linear-gradient(top, #ababac 0%, #f3f3f3 90%);
	background-image:-moz-linear-gradient(top, #ababac 0%, #f3f3f3 90%);
	background-image:-webkit-linear-gradient(top, #ababac 0%, #f3f3f3 90%);
	background-image:-ms-linear-gradient(top, #ababac 0%, #f3f3f3 90%);
	background-color:#cdcdcd;

	box-shadow:inset 0px 2px 5px -3px #000;
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-size:33px;
	line-height:60px;
	text-shadow:0px 1px 1px rgba(0, 0, 0, .3);
	cursor:pointer;
	z-index:110;
}

.backbutton
{
    left: 15px;
}

.backbutton svg
{
    position:absolute;
    left:8px;
    top:10px;
}

.languageswitcher
{
	top: calc(50% - 24px);
	right:15px;
    line-height: 48px;
    font-size:24px;
}

.languageswitcher .language
{
	top:60px;
	margin-left:5px;
	margin-top: 5px;
	width:37px;
	height:36px;
	border-radius:26px;
	background-image:url('/guestcompass_engine_webapp/img/flags.svg');
	background-repeat:no-repeat;
	box-shadow:inset 0px 2px 5px -3px #000;
    background-size: cover;
    background-position:0px 0px;
}
.languageswitcher .de
{
	top:122px;
	background-position:-37px 0px;
}
.languageswitcher .en
{
	top:184px;
	background-position:-73px 0px;
}
.languageswitcher .fr
{
	top:246px;
	background-position:-110px 0px;
}
.languageswitcher .es
{
	top:308px;
	background-position:-147px 0px;
}
.languageswitcher .pt
{
	top:370px;
	background-position:-183px 0px;
}

.languageswitcher .no
{
        top:370px;
        background-position:-220px 0px;
}


.languageswitcher .language.selected
{
	margin-left:2px;
	width:37px;
	height:36px;
	border-radius:29px;
	border:4px solid #fff;
}

.languageswitcher .de.selected
{
	top:119px;
}
.languageswitcher .en.selected
{
	top:181px;
}

.languageswitcher .fr.selected
{
	top:243px;
}

/* Small */
@media only screen and (max-width: 40em) 
{ 
    .languageswitcher,
    .backbutton
    {
        top: calc(50% - 16px);
        
        width:32px;
        height:32px;
    }
    
    .languageswitcher
    {
        right:15px;
        line-height: 32px;
        font-size:16px;
    }
    
    .backbutton svg
    {
        top:10px;
        left:8px;
        width:40%;
        height:40%;
    }
    
    .languageswitcher .language
    {
        width: 25px;
        height: 25px;
        margin-left: 3px;
        margin-top: 3px;
    }

    .languageswitcher .de
    {
        top:122px;
        background-position:-26px 0px;
    }

    .languageswitcher .en
    {
        top:184px;
        background-position:-51px 0px;
    }

    .languageswitcher .fr
    {
        top:246px;
        background-position:-77px 0px;
    }

    .languageswitcher .pt
    {
        top:246px;
        background-position:-127px 0px;
    }

    .languageswitcher .es
    {
        top:246px;
        background-position:-102px 0px;
    }
    .languageswitcher .no
    {
        top:246px;
        background-position:-152px 0px;
    }

}

/* fonticon IE11 Fix HACK! */
.fonticon
{
    display:-ms-flexbox;
}