/** Font face **/
@font-face {
	font-family: 'Bariol';
	font-weight: normal;
	font-style: normal;
	src: url('assets/fonts/bariol_regular-webfont.eot');
    src: url('assets/fonts/bariol_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_regular-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_regular-webfont.woff') format('woff'),
         url('assets/fonts/bariol_regular-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_regular-webfont.svg#bariolregular') format('svg');
}
@font-face {
	font-family: 'Bariol';
	font-weight: bold;
	font-style: normal;
    src: url('assets/fonts/bariol_bold-webfont.eot');
    src: url('assets/fonts/bariol_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_bold-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_bold-webfont.woff') format('woff'),
         url('assets/fonts/bariol_bold-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_bold-webfont.svg#bariolbold') format('svg');
}

/** General **/
* {
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
*, body, *:before, *:after{
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
}
body{
	font-family:'Bariol',sans-serif;
    margin: 0;
    background: -o-linear-gradient(315deg, #373467, #f2638e, #15b7ce);
    background: linear-gradient(135deg, #373467, #f2638e, #15b7ce);
    background-size: 600% 600%;
    -webkit-animation: gradientBg 45s ease-in-out infinite;
    animation: gradientBg 45s ease-in-out infinite;
}
::-moz-selection {
    color: #fff;
    background: #f2638e;
}
::selection {
    color: #fff;
    background: #f2638e;
}
.container{
    min-width:100vw;
    min-height:100vh;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    padding:5vw;
}

/** Branding **/
.brand{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
        -ms-flex-direction:row;
            flex-direction:row;
    max-width:800px;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    margin:auto;
}
.brand-logo{
    max-width:240px;
    height:auto;
    width:100%;
}
.brand-title{
    font-size:24px;
    font-weight:400;
    margin-left:48px;
    padding-left:36px;
    padding-bottom:4px;
    color:#fff;
    line-height:1.5;
    border-left:1px solid rgba(255,255,255,.25);
}

/** Footer **/
.footer{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
        -ms-flex-direction:row;
            flex-direction:row;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.footer-link{
    display:inline-block;
    margin:0 12px;
}
.footer-icon {
    color: #ffffff;
    width: 36px;
    height: 36px;
    stroke-width: 1.5;
}

/** Animation **/
@-webkit-keyframes gradientBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradientBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@media screen and (max-width:552px){
    .container{
        padding:24px 18px;
    }
    .brand{
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
    }
    .brand-logo{
        max-width:180px;
    }
    .brand-title{
        margin-left:0;
        border-left:0;
        padding-left:0;
        font-size:18px;
        margin-top:18px;
    }
    .footer-link{
        margin:0 8px;
    }
    .footer-icon{
        width:27px;
        height:27px;
    }
}