/* 
Andrea Diamantini
adjam site layout 5.0
Q1 2020
*/

@font-face {
    font-family: 'AndriCartoon';
    src: url('AndriCartoon.ttf');
    font-weight: normal;
    font-style: normal;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'AndriCartoon', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------------- */
/* generic styles */

h1,h2 {
    margin: 10px 0px;
    padding: 0;
    font-weight: 400;
}

h1{font-size:40px}
h2{font-size:28px}

h3{font-size:24px; font-weight: 400; margin: 5px 0px; }

p {margin: 0px;}

a, a:link, a:visited, a:hover, a:focus, a:active {
    font-weight: bold;
    text-decoration: none;
    color: #000088;
}

a:hover {
    text-decoration: underline;
}

.row {
    padding: 10px 0px 0px 0px;
}

.row:after,.row:before {
    content:"";
    display:table;
    clear:both
}

.section_title {
    color: white;
    background: linear-gradient(to right, #111111 0%, #444444 100%);
    padding: 50px;
}

.section_title h1 {
    max-width: 1000px;
    margin: 0 auto;
}

.contentblock {
    margin: 0px auto;
    padding: 50px 0px;
}

.contentblock::after {
    content: "";
    clear: both;
    display: table;
}

@media (min-width: 640px) { 
    .contentblock {max-width: 1000px}
}

.twothird {
    float: left;
    width: 67%;
}

.onethird {
    float: left;
    width: 33%;
}

.half {
    float: left;
    width: 45%;
}
/* ---------------------------------------------------------------------------------- */
/* header */

.whitecontainer {
    background-color: white /*linear-gradient(to bottom right, #dddddd 0%, #ffffff 100%); */
    min-height: 100vh;
}

/* ---------------------------------------------------------------------------------- */
/* handouts */

.doticon {
    float: left;
    width: 10%;
}

.topic_content {
    float: left;
    width: 90%;
}

/* ---------------------------------------------------------------------------------- */
/* footer */

#footer {
    width: 100%;
    clear:both;
    text-align:center;
    background: #bbb;
    padding: 32px 0px;
    color: black;
}

/* ---------------------------------------------------------------------------------- */
/* topmenu styles */

#navbar {
    width:100%;
    font-size: 1.05em;
    padding: 0px;
    border: 0px;
    z-index:1;
    top: 0px;
    overflow: hidden;
    position: fixed;
    background:linear-gradient(to right, #111111 0%, #444444 100%);
}

#navbar a {
    display: inline-block;    
    padding: 15px 24px;
    color: white;    
}


/* let things work different on small screen sizes... */
@media (max-width:639px) {
    
    .topmenu {
        display: none;
    }
    
    .menuItem {
        display: block;
        width: 100%;
    }
    
    .menuButton {
        display: inline-block;
    }
    
    .responsive {
        display: block;
    }
    
    #header h1 {
        font-size: 32px;
    }
}


/* ---------------------------------------------------------------------------------- */
/* card */

.card {
    float: left;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    max-width: 300px;
    margin: 15px;
    text-align:left
}

.card img {
    width: 100%;
    height: auto;
}

.card h4 {
    text-align: center;
}

.card:hover {
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.84),0 2px 10px 0 rgba(0,0,0,0.88);
}

.gray {
    background: #bbb;
}


/* ---------------------------------------------------------------------------------- */

.stickynote {
    float: left;
    max-width: 400px;
    text-align: left;
    margin: 20px;
    padding: 1em;
    box-shadow: 5px 5px 7px rgba(33,33,33,0.7);
/*    transform: rotate(-3deg); */
}

.trans_yellow {
    background:rgba(255, 206, 86, 0.5);    
}

.trans_blue {
    background:rgba(54, 162, 235, 0.5);        /* 54 162 235 */
}

.trans_red {
    background:rgba(255, 99, 132, 0.5);
}

.trans_green {
    background:rgba(99, 255, 99 , 0.5);
}