@font-face {
    font-family: 'Chivo';
    font-style: italic;
    font-weight: 300;
    src: local('Chivo Light Italic'), local('Chivo-LightItalic'), url(https://fonts.gstatic.com/s/chivo/v11/va9D4kzIxd1KFrBteUp9gK_uQQ.ttf) format('truetype');
}

@font-face {
    font-family: 'Chivo';
    font-style: italic;
    font-weight: 400;
    src: local('Chivo Italic'), local('Chivo-Italic'), url(https://fonts.gstatic.com/s/chivo/v11/va9G4kzIxd1KFrBtceFfkA.ttf) format('truetype');
}

@font-face {
    font-family: 'Chivo';
    font-style: italic;
    font-weight: 700;
    src: local('Chivo Bold Italic'), local('Chivo-BoldItalic'), url(https://fonts.gstatic.com/s/chivo/v11/va9D4kzIxd1KFrBteVp6gK_uQQ.ttf) format('truetype');
}

@font-face {
    font-family: 'Chivo';
    font-style: italic;
    font-weight: 900;
    src: local('Chivo Black Italic'), local('Chivo-BlackItalic'), url(https://fonts.gstatic.com/s/chivo/v11/va9D4kzIxd1KFrBteWJ4gK_uQQ.ttf) format('truetype');
}

@font-face {
    font-family: 'Chivo';
    font-style: normal;
    font-weight: 300;
    src: local('Chivo Light'), local('Chivo-Light'), url(https://fonts.gstatic.com/s/chivo/v11/va9F4kzIxd1KFrjDY_Z4sKg.ttf) format('truetype');
}

@font-face {
    font-family: 'Chivo';
    font-style: normal;
    font-weight: 400;
    src: local('Chivo Regular'), local('Chivo-Regular'), url(https://fonts.gstatic.com/s/chivo/v11/va9I4kzIxd1KFrBoQeY.ttf) format('truetype');
}

@font-face {
    font-family: 'Chivo';
    font-style: normal;
    font-weight: 700;
    src: local('Chivo Bold'), local('Chivo-Bold'), url(https://fonts.gstatic.com/s/chivo/v11/va9F4kzIxd1KFrjTZPZ4sKg.ttf) format('truetype');
}

@font-face {
    font-family: 'Chivo';
    font-style: normal;
    font-weight: 900;
    src: local('Chivo Black'), local('Chivo-Black'), url(https://fonts.gstatic.com/s/chivo/v11/va9F4kzIxd1KFrjrZvZ4sKg.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 100;
    src: local('Saira Thin'), local('Saira-Thin'), url(https://fonts.gstatic.com/s/saira/v4/mem-Ya2wxmKQyNFEfZE1Ug.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 200;
    src: local('Saira ExtraLight'), local('Saira-ExtraLight'), url(https://fonts.gstatic.com/s/saira/v4/mem9Ya2wxmKQyNHobIYScr0.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 300;
    src: local('Saira Light'), local('Saira-Light'), url(https://fonts.gstatic.com/s/saira/v4/mem9Ya2wxmKQyNGMb4YScr0.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 400;
    src: local('Saira Regular'), local('Saira-Regular'), url(https://fonts.gstatic.com/s/saira/v4/memwYa2wxmKQyNknTZY.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 500;
    src: local('Saira Medium'), local('Saira-Medium'), url(https://fonts.gstatic.com/s/saira/v4/mem9Ya2wxmKQyNHUboYScr0.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 600;
    src: local('Saira SemiBold'), local('Saira-SemiBold'), url(https://fonts.gstatic.com/s/saira/v4/mem9Ya2wxmKQyNH4aYYScr0.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 700;
    src: local('Saira Bold'), local('Saira-Bold'), url(https://fonts.gstatic.com/s/saira/v4/mem9Ya2wxmKQyNGcaIYScr0.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 800;
    src: local('Saira ExtraBold'), local('Saira-ExtraBold'), url(https://fonts.gstatic.com/s/saira/v4/mem9Ya2wxmKQyNGAa4YScr0.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira Extra Condensed';
    font-style: normal;
    font-weight: 100;
    src: local('Saira ExtraCondensed Thin'), local('SairaExtraCondensed-Thin'), url(https://fonts.gstatic.com/s/sairaextracondensed/v5/-nFsOHYr-vcC7h8MklGBkrvmUG9rbpkisrTri3j2_Co.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira Extra Condensed';
    font-style: normal;
    font-weight: 200;
    src: local('Saira ExtraCondensed ExtraLight'), local('SairaExtraCondensed-ExtraLight'), url(https://fonts.gstatic.com/s/sairaextracondensed/v5/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrJ2nh2wpk.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira Extra Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Saira ExtraCondensed Light'), local('SairaExtraCondensed-Light'), url(https://fonts.gstatic.com/s/sairaextracondensed/v5/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrQ2rh2wpk.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira Extra Condensed';
    font-style: normal;
    font-weight: 400;
    src: local('Saira ExtraCondensed Regular'), local('SairaExtraCondensed-Regular'), url(https://fonts.gstatic.com/s/sairaextracondensed/v5/-nFiOHYr-vcC7h8MklGBkrvmUG9rbpkisrTj6Ejx.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira Extra Condensed';
    font-style: normal;
    font-weight: 500;
    src: local('Saira ExtraCondensed Medium'), local('SairaExtraCondensed-Medium'), url(https://fonts.gstatic.com/s/sairaextracondensed/v5/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrG2vh2wpk.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira Extra Condensed';
    font-style: normal;
    font-weight: 600;
    src: local('Saira ExtraCondensed SemiBold'), local('SairaExtraCondensed-SemiBold'), url(https://fonts.gstatic.com/s/sairaextracondensed/v5/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrN2zh2wpk.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira Extra Condensed';
    font-style: normal;
    font-weight: 700;
    src: local('Saira ExtraCondensed Bold'), local('SairaExtraCondensed-Bold'), url(https://fonts.gstatic.com/s/sairaextracondensed/v5/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrU23h2wpk.ttf) format('truetype');
}

@font-face {
    font-family: 'Saira Extra Condensed';
    font-style: normal;
    font-weight: 800;
    src: local('Saira ExtraCondensed ExtraBold'), local('SairaExtraCondensed-ExtraBold'), url(https://fonts.gstatic.com/s/sairaextracondensed/v5/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrT27h2wpk.ttf) format('truetype');
}

.body-content {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

body {
    margin: 0;
    background-color: #333;
    font: 15px sans-serif;
}

.app-body-container {
    max-width: 1500px;
    min-height: calc(100% - 60px);
    margin: auto;
    border-left: 4px solid #FF8000;    
    background-color: #232528;
}

.app-body-content {
    padding: 2vw;
}

.title-block {
    position: relative;
    height: 500px;
    background-position: center;
    background-size: cover;
}

.title-block-text {
    width: 100%;
    position: absolute;
    bottom: 0;
    text-shadow: 0 0 10px black;
    padding-left: 20px;
    margin: 0;
}

h1 {
    font-family: 'Saira', sans-serif;
    text-align: center;
    color: white;
    font-weight: 400;
    font-size: 2.4em;
    padding: 50px;
    margin: 0;
}

h2 {
    font: bold 5vh 'Saira', Helvetica, Arial, Verdana;
    color: #fff;
    vertical-align: middle;
    border-bottom: 2px #FF8000 solid;
    text-transform: uppercase;
}

h3 {
    font: bold 3vh 'Saira', Helvetica, Arial, Verdana;
    color: #fff;
    border-bottom: 2px #FF8000 solid;
    text-transform: uppercase;
}

h4 {
    font: bold 2vh 'Saira', Helvetica, Arial, Verdana;
    color: #fff;
    margin-bottom: 0.2em;
    text-transform: uppercase;
}

h5 {
    text-align: center;
    color: white;
    margin: 25px 0 0 0;
}

p, label {
    font: 15px sans-serif;
    color: #acb2b8;
}

p:empty:after {
    content: "";
    display: inline-block;
    width: 0px;
}

a {
    color: #fff;
}

ul {
    list-style-type: none;
    padding: 0px;
}

.app-body li {
    margin-top: 20px;
}

li p {
    margin: 0;
}

.nav {
    margin-bottom: 30px;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color : #FF8000;
}

.nav-item {
    background-color: white;
}

.nav-link {
    
    color: #232528;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.img-circle {
    width: 90%;
    max-width: 400px;
    float: right;
    shape-outside: circle();
    border: solid 5px #ff8000;
    border-radius: 50%;
    margin: 20px;
}

button, .btn-primary {
    background-color: #FF8000;
    border: none;
    border-radius: 5px;
    font: 1em 'Saira';
    padding: 0vw 2vw;
}

.twitter-widget {
    width: fit-content;
    margin: auto;
}

.twitter-follow-button{
    display: block;
    margin: 50px auto 5px;
}

.media-card {
    padding: 10px;
    border-radius: 5px;
    margin: 5px 0;
    background-color: white;
}

.media-card img {
    box-shadow: 0 0 5px;
    margin-bottom: 5px;
}

.media-card p {
    margin: 0;
}

.toggle-button {
    margin: 5px;
    background: #e3a00040;
    padding: 6px 10px;
    border-radius: 6px;
    color: white;
}

    .toggle-button.checked {
        background: #e3a000;
    }

    .toggle-button input {
        display: none;
    }

@media screen and (orientation: portrait) {
    h1 {
        border-left: solid 4px #FF8000;
    }

    .app-body-container {
        margin: 0;        
    }

    .app-body-content {
        padding-left: 10vw;
        padding-right: 10vw;
    }

    /*button, .btn-primary {
        font: 1em 'Saira';
    }*/
}