/*! normalize.css v3.0.2 | MIT License | git.io/normalize */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}
@font-face {
    font-family: 'Museo Sans';
    src: url("https://simplaio.github.io/rucksack/fonts/museo/MuseoSans_500.eot");
    src: url("https://simplaio.github.io/rucksack/fonts/museo/MuseoSans_500.eot?#iefix") format('embedded-opentype'),
    url("https://simplaio.github.io/rucksack/fonts/museo/MuseoSans_500.woff") format('woff'),
    url("https://simplaio.github.io/rucksack/fonts/museo/MuseoSans_500.ttf") format('truetype'),
    url("https://simplaio.github.io/rucksack/fonts/museo/MuseoSans_500.svg") format('svg');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'Museo Sans';
    src: url("https://simplaio.github.io/rucksack/fonts/museo/MuseoSans_500_Italic.eot");
    src: url("https://simplaio.github.io/rucksack/fonts/museo/MuseoSans_500_Italic.eot?#iefix") format('embedded-opentype'),
    url("https://simplaio.github.io/rucksack/fonts/museo/MuseoSans_500_Italic.woff") format('woff'),
    url("https://simplaio.github.io/rucksack/fonts/museo/MuseoSans_500_Italic.ttf") format('truetype'),
    url("https://simplaio.github.io/rucksack/fonts/museo/MuseoSans_500_Italic.svg") format('svg');
    font-weight: normal;
    font-style: italic
}

body {
	font-family: 'Museo Sans';
	font-size: 16px;
}

a, a:hover, a:active, a:visited, a:focus {
    color: #1AA8D0;
    text-decoration: none;
}

a:hover, a:active {
    font-weight: bold;
}

.header {
    background-color: #1AA8D0;
    color: white;
    height: auto;
    min-height: 510px;
    text-align: center;
}

.header-title {
    font-weight: 600;
    font-size: 4em;
    margin-bottom: 20px;
}

.header-subtitle {
    font-weight: 600;
    font-size: 1.5em;
}

.header-social {
    list-style: none;
    margin: 0 auto;
    padding-top: 20px;
}

.header-icon {
    display: inline-block;
    padding: 10px;
}

.header-icon a {
    color: white;
    display: block;
    font-size: 0.8em;
    text-align: center;
}

.header-icon a::before{
    display: block;
    font-size: 2.5em;
    padding-bottom: 0.2em;
}

.header-icon a::after {
    content: attr(title);
}

.logo-bg, .logo-android, .logo-apple, .logo-windows {
    height: 200px;
    left: 0;
    position: absolute;
    top: 30px;
    width: 200px;
}

.logo {
    height: 200px;
    margin: 0 auto;
    padding-top: 50px;
    position: relative;
    width: 200px;
}

@keyframes logo-android {
    50% {
        transform: rotate(0deg);
        opacity: 1;
    }
    
    75% {
        transform: rotate(-180deg);
        opacity: 0;
    }
    
    80% {
        opacity: 0;
    }
    
    100% {
        transform: rotate(-360deg);
        opacity: 1;
    }
}

.logo-android {
    animation: logo-android 5s linear infinite;
}

@keyframes logo-windows {
    55% {
        transform: rotate(0deg);
        opacity: 1;
    }
    
    80% {
        transform: rotate(-180deg);
        opacity: 0;
    }
    
    85% {
        opacity: 0;
    }
    
    100% {
        transform: rotate(-360deg);
        opacity: 1;
    }
}

.logo-windows {
    animation: logo-windows 5s linear infinite;
}

@keyframes logo-apple {
    60% {
        transform: rotate(0deg);
        opacity: 1;
    }
    
    85% {
        transform: rotate(-180deg);
        opacity: 0;
    }
    
    90% {
        opacity: 0;
    }
    
    100% {
        transform: rotate(-360deg);
        opacity: 1;
    }
}

.logo-apple {
    animation: logo-apple 5s linear infinite;
}

.content {
    background: #F5F5F5;
    border-top: 4px solid white;
    padding-top: 20px;
}

.card {
    display: block;
    margin: 0 auto;
    max-width: 1260px;
    width: 100%;
}

.card-title {
    font-size: 2.4em;
    margin-bottom: 20px;
}

.card-title::before {
    content: '- ';
}

.platforms-row {
    list-style: none;
}

.platforms-title {
    text-align: center;
    font-size: 2.1em;
}

.platforms-item {
    border-radius: 15px;
    color: #616161;
    cursor: pointer;
    padding: 15px;
}

.platforms-item--selected {
    color: #3E3E3E;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.8);
}

.platforms-feature {
    font-size: 1.3em;
}

.loading {
    color: transparent;
    position: relative;
    width: 400px;
}

.loading--active::before {
    color: #616161;
    font-size: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    top: 50%;
    animation: rotate 2s infinite linear;
}

@keyframes rotate {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

.platforms-image {
    display: none;
    height: 760px;
    overflow: hidden;
    position: relative;
    width: 400px;
}

.platforms-image::before, .platforms-image::after {
    background-position: center 0;
    background-repeat: no-repeat;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    opacity: 0.35;
    top: 0;
    width: 100%;
}

.platforms-image::after {
    opacity: 1;
}

.platforms-image:hover:after {
    background-position: center 0 !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    transition: height 0.4s;
}

.platforms-image--selected {
    display: block;
}

.platforms-image--tabsAndroid::before, .platforms-image--tabsAndroid::after {
    background-image: url('../images/samples/home_android.png');
}

.platforms-image--tabsAndroid::after {
    background-position-y: -90px;
    height: 100px;
    top: 90px;
}

.platforms-image--tabsIos::before, .platforms-image--tabsIos::after {
    background-image: url('../images/samples/home_ios.png');
}

.platforms-image--tabsIos::after {
    background-position-y: -610px;
    height: 90px;
    top: 610px;
}

.platforms-image--tabsWindows::before, .platforms-image--tabsWindows::after {
    background-image: url('../images/samples/home_windows.png');
}

.platforms-image--tabsWindows::after {
    background-position-y: -90px;
    height: 100px;
    top: 90px;
}

.platforms-image--slideAndroid::before, .platforms-image--slideAndroid::after {
    background-image: url('../images/samples/slide_android.png');
}

.platforms-image--slideAndroid::after {
    background-position-x: 100px;
    left: -100px;
}

.platforms-image--slideIos::before, .platforms-image--slideIos::after {
    background-image: url('../images/samples/slide_ios.png');
}

.platforms-image--slideIos::after {
    background-position-x: 100px;
    left: -100px;
}

.platforms-image--slideWindows::before, .platforms-image--slideWindows::after {
    background-image: url('../images/samples/slide_windows.png');
}

.platforms-image--slideWindows::after {
    background-position-y: -90px;
    height: 500px;
    top: 90px;
}

.platforms-image--backAndroid::before, .platforms-image--backAndroid::after {
    background-image: url('../images/samples/back_android.png');
}

.platforms-image--backAndroid::after {
    background-position-y: -90px;
    background-position-x: 300px;
    height: 70px;
    top: 90px;
    left: -300px;
}

.platforms-image--backIos::before, .platforms-image--backIos::after {
    background-image: url('../images/samples/back_ios.png');
}

.platforms-image--backIos::after {
    background-position-y: -90px;
    background-position-x: 300px;
    height: 70px;
    top: 90px;
    left: -300px;
}

.platforms-image--backWindows::before, .platforms-image--backWindows::after {
    background-image: url('../images/samples/back_windows.png');
}

.platforms-image--backWindows::after {
    background-position-y: -670px;
    background-position-x: 280px;
    height: 70px;
    top: 670px;
    left: -280px;
}

.platforms-image--actionAndroid::before, .platforms-image--actionAndroid::after {
    background-image: url('../images/samples/actions_android.png');
}

.platforms-image--actionAndroid::after {
    background-position-y: -90px;
    height: 60px;
    top: 90px;
}

.platforms-image--actionIos::before, .platforms-image--actionIos::after {
    background-image: url('../images/samples/actions_ios.png');
}

.platforms-image--actionIos::after {
    background-position-y: -90px;
    height: 60px;
    top: 90px;
}

.platforms-image--actionWindows::before, .platforms-image--actionWindows::after {
    background-image: url('../images/samples/actions_windows.png');
}

.platforms-image--actionWindows::after {
    background-position-y: -610px;
    height: 70px;
    top: 610px;
}