@font-face {
    font-family: 'Soleto W Medium';
    src: url('/fonts/SoletoTK/SoletoTK_W_Md.eot');
    src: url('/fonts/SoletoTK/SoletoTK_W_Md.eot?#iefix') format('embedded-opentype'),
        url('/fonts/SoletoTK/SoletoTK_W_Md.woff2') format('woff2'),
    	url('/fonts/SoletoTK/SoletoTK_W_Md.woff') format('woff'),
		url('/fonts/SoletoTK/SoletoTK_W_Md.ttf') format('truetype'),
		url('/fonts/SoletoTK/SoletoTK_W_Md.svg') format('svg');
}

@font-face {
    font-family: 'Soleto W Light';
    src: url('/fonts/SoletoTK/SoletoTK_W_Lt.eot');
    src: url('/fonts/SoletoTK/SoletoTK_W_Lt.eot?#iefix') format('embedded-opentype'),
        url('/fonts/SoletoTK/SoletoTK_W_Lt.woff2') format('woff2'),
        url('/fonts/SoletoTK/SoletoTK_W_Lt.woff') format('woff'),
        url('/fonts/SoletoTK/SoletoTK_W_Lt.ttf') format('truetype'),
        url('/fonts/SoletoTK/SoletoTK_W_Lt.svg') format('svg');
}

@font-face {
    font-family: 'Soleto TK Headline Bold';
    src: url('/fonts/SoletoTK/SoletoTKHeadline_W_Bd.eot');
    src: url('/fonts/SoletoTK/SoletoTKHeadline_W_Bd.eot?#iefix') format('embedded-opentype'),
        url('/fonts/SoletoTK/SoletoTKHeadline_W_Bd.woff2') format('woff2'),
        url('/fonts/SoletoTK/SoletoTKHeadline_W_Bd.woff') format('woff'),
        url('/fonts/SoletoTK/SoletoTKHeadline_W_Bd.ttf') format('truetype'),
        url('/fonts/SoletoTK/SoletoTKHeadline_W_Bd.svg') format('svg');
}

*
{
	box-sizing: border-box;
}

::selection
{
    color: #fff;
    background: #009fe4;
}

::-moz-selection
{
    color: #fff;
    background: #009fe4;
}

html,
body
{
	font-family: 'Soleto W Light', Helvetica, Arial, sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    color: #454543;
}

strong, b {
	font-weight: normal;
	font-family: 'Soleto W Medium', Helvetica, Arial, sans-serif;
}

.tk-container
{
    display: inline-block;
    vertical-align: top;
}

.tk-padding
{
    padding: 0 15px;
}

.tk-logo
{
	display: inline-block;
	width: 111px;
    vertical-align: top;
}

.tk-img
{
	width: 100%;
	height: auto;
    border: 0;
}

.tk-margin-bottom
{
	margin: 0 0 40px;
}

.tk-headline
{
	font-family: 'Soleto TK Headline Bold', Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.375rem;
}

.tk-copy
{
    font-size: .875rem;
    line-height: 1.25rem;
}

.tk-button
{
	font-family: 'Soleto W Medium', Helvetica, Arial, sans-serif;
    text-decoration: none;
    font-size: .875rem;
    line-height: .875rem;
    background-color: #454543;
    color: #f2f0ec;
    padding: 15px 40px 15px 15px;
    width: 100%;
    display: inline-block;
    position: relative;

}

.tk-button:after
{
    content: '';
    background-image: url('/images/arrow.png');
    background-size: 9px 16px;
    display: inline-block;
    width: 9px;
    height: 16px;
    position: absolute;
    right: 15px;
    top: 14px;
}

.tk-button:active,
.tk-button:focus
{
    color: #f5f5f3;
    background: #333332;
}

.tk-button:active:after,
.tk-button:focus:after
{
    background-image: url('/images/arrow-hover.png');
}

.tk-textlink
{
    color: #454543;
    text-decoration: none;
    border-bottom: 2px solid #454543;
}

.tk-textlink:hover,
.tk-textlink:active,
.tk-textlink:focus
{
    color: #333332;
    border-color: #333332;
}

.tk-link
{
	color: #454543;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    margin-right: 59px;
    margin-bottom: 15px;
    outline: none;
    position: relative;
}

.tk-link.tk-padding
{
    padding: 0 7px;
}

.tk-link span
{
    padding: 0 8px;
    display: inline-block;
    position: relative;
}

.tk-link span:hover:after
{
    position: absolute;
    content: attr(data-title);
    left: 6px;
    top: 0;
    background-color: #fff;
    color: #333332;
    font-family: 'Soleto W Medium', Helvetica, Arial, sans-serif;
}

.tk-link-referrer:before,
.tk-link-referrer:after
{
    position: absolute;
    right: -20px;
    top: -2px;
    height: 26px;
    width: 20px;
    margin: 0 3px;
    content: '';
    background-image: url('/images/reload-page.png');
    background-repeat: no-repeat;
    background-size: 20px 26px;
    display: inline-block;
}

.tk-link-referrer:before
{
    display: none;
}

.tk-link:hover:before,
.tk-link:hover:after
{
    transform-origin: 50% 50% 0;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

.tk-link:before,
.tk-link:after
{
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx)
{
    .tk-button:after
    {
        background-image: url('/images/arrow@2x.png');
    }

    .tk-button:focus:after,
    .tk-button:active:after
    {
        background-image: url('/images/arrow-hover@2x.png');
    }

    .tk-link-referrer:before,
    .tk-link-referrer:after
    {
        background-image: url('/images/reload-page@2x.png');
    }
}

@media screen and (min-width: 500px)
{
    .tk-button
    {
        width: auto;
    }

    .no-js .tk-button
    {
        margin: 0 15px;
    }

    .tk-mail
    {
        margin: 0 15px;
    }
}


@media screen and (min-width: 772px)
{
	body
    {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .tk-padding
    {
        padding: 0 40px;
    }

    .tk-link.tk-padding
    {
        padding: 0 32px;
    }

    .tk-logo
    {
        margin-top: 35px;
        width: 165px;
    }

    .tk-copy
    {
        font-size: 1rem;
    }

    .tk-headline
    {
        font-size: 1.75rem;
        line-height: 2.375rem;
    }

    .tk-link
    {
        margin-left: 32px;
        margin-right: 0;
    }

    .tk-link-referrer:before
    {
        left: 7px;
        display: inline-block;
    }

    .tk-link-referrer:after
    {
        display: none;
    }

    .no-js .tk-button
    {
        margin: 0 40px;
    }

    .tk-mail
    {
        margin: 0 40px;
    }
}

@media screen and (min-width: 1025px)
{
    .tk-container
    {
        width: 714px;
    }

    .tk-headline
    {
        margin-top: 75px;
    }
}

@media screen and (min-width: 1281px)
{
    body
    {
        width: 80em;
    }
}
