/* PLAY AROUND */

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky+.classpage {
    padding-top: 60px;
}


/* START HERE */


/* roboto-300 - latin */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../assets/fonts/roboto-v20-latin-300.eot');
    /* IE9 Compat Modes */
    src: local('Roboto Light'), local('Roboto-Light'), url('../assets/fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../assets/fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/roboto-v20-latin-300.svg#Roboto') format('svg');
    /* Legacy iOS */
}

body {
    font-family: Roboto;
    font-weight: 300;
    font-size: 1.2em;
    background-color: var(--white);
    width: 100%;
}

h1,
h2,
h3 {
    font-weight: 300;
    margin-right: 1em;
    margin-top: 0.5em;
    width: 100%;
}

h1 {
    font-size: 1.6em;
    align-self: space-around;
}

h2 {
    font-size: 1.3em;
    color: #4A90E2;
}

h3 {
    font-size: 1.0em;
}

.wrapper {
    width: 100%;
    max-widtH: 768px;
    padding: 15px;
}

p {
    margin-block-start: 0em;
    margin-block-end: 0em;
    width: auto;
    font-size: 1.0em;
    line-height: 1.5em;
}

#header {
    height: 120px;
}

#header p {
    margin-bottom: 0px;
}

#header p.name {
    font-size: 1.6em;
    line-height: 1.3em;
    font-weight: 400;
}

#header p.company {
    font-size: 1.0em;
    line-height: 1.1em;
    color: #4A90E2;
}

#header p.role {
    font-size: 1.0em;
    line-height: 1.1em;
}

.button {
    position: absolute;
    color: black;
    top: 15px;
    right: 20px;
    font-size: 0.7em;
}

.button a,
a:hover,
a:visited {
    color: black;
    text-decoration: none;
}

#content {
    width: 100%;
    background-color: white;
    color: black;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: stretch;
}

#content img {
    border: 1px solid #ccc;
    border-radius: 8px;
    max-width: 345px;
    margin-right: 1em;
    margin-bottom: 1em;
    align-self: auto;
    flex: 1 1 auto;
}

#content p {
    /* max-width: 50%; */
    /* max-width: 345px; */
    margin-right: 1em;
    margin-bottom: 1em;
    align-self: auto;
    flex: 3 1 auto;
}

#content a,
a:hover,
a:visited {
    color: black;
    text-decoration: none;
}

#contact p {
    margin-top: 0.5em;
}

#contact a,
a:hover,
a:visited {
    color: black;
    text-decoration: none;
}

#contact span {
    margin-left: 1em;
}

.footer {
    margin-top: 5em;
    padding: 1em;
    font-size: 0.7em;
    background-color: rgb(35, 52, 65);
    color: white;
}

.footer a,
a:hover,
a:visited {
    color: white;
    text-decoration: none;
}

.footer p {
    margin-top: 1em;
}


/* old ############################################################################ */


/* MODIFY BOOTSTRAP.CSS  ORIGINAL*/

 :root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --milkyway-dark: #104563;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@media (min-width: 768px) {
    .wrapper {
        width: 80%;
        margin-left: 10%;
    }
    .flex-container {
        flex-wrap: nowrap;
    }
    #content p,
    img {
        width: 30%;
    }
    #header p {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .wrapper {
        width: 70%;
        margin-left: 15%;
    }
    .flex-container {
        flex-wrap: nowrap;
    }
    #content p,
    img {
        width: 30%;
    }
    #header p {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .wrapper {
        width: 50%;
        margin-left: 25%;
    }
    .flex-container {
        flex-wrap: nowrap;
    }
    #conten p,
    img {
        width: 30%;
    }
    #header p {
        width: 100%;
    }
}


/* glyphicons */

.btn .glyphicons,
.btn .halflings,
.btn .filetypes,
.btn .social {
    margin-right: .3em;
}

.dropdown-menu li .glyphicons,
.dropdown-menu li .halflings,
.dropdown-menu li .filetypes,
.dropdown-menu li .social {
    margin-right: .3em;
}

.list-group .list-group-item .glyphicons,
.list-group .list-group-item .halflings,
.list-group .list-group-item .filetypes,
.list-group .list-group-item .social {
    margin-right: .5em;
}

a.btn {
    line-height: 1.28;
}

* {
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}