.jumbotron{
    background-color: #33ccff;

	font-family: 'Bubbler One', sans-serif;	
    color: #fff;   
    text-align: center;

    margin-bottom: 0px;
    padding-top: 20px;
    padding-bottom: 0px;
}

.navbar{
    background-color: #33ccff;
}

nav a{
    font-family: Montserrat, sans-serif;
    color: #fff !important;
}

nav a:hover{
    color: #3366ff !important;
}

.dropdown-menu a{
    color: #555555 !important;
}

.card a:not(#id_email){
    color: #555555 !important;
}

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


.class_border_custom{
    border-bottom: 1px solid #dddddd;
    margin: 50px 15% 20px 15%;
    padding: 0px;

    clear: both;
}

.class_border_custom_not_clear{
    /* border-bottom: 1px solid #dddddd; */
    margin: 50px 15% 20px 15%;
    padding: 0px;

}

.class_gap{
    margin: 40px;
}



body{
	font-family: Montserrat, sans-serif;
    color: #555555;
    /* color: orange; */
    /* color: #555555 !important; */
}

body h1{
    margin-top: 40px;
}

footer{
	/* background-color: #CEE6E7; */
	background-color: #33ccff;
	color: #fff;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #C9E1E2;
    margin-top:20px;
    clear: both;
}

.bg_simulation{
    background: LightCoral !important;
}

.class_container_canvas{
    overflow-x: auto;
    overflow-y: hidden;    
    /* overflow-y: Chrome sometimes thinks the canvas sticks out slightly and prevents user from scrolling vertically on the page becuase it makes a overflow scroll bar in the vertical direction in the class_container_canvas. This means content is clipped in the class_container_canvas (hopefully only slightly) to prevent the useless vertical scrolling. Setting it to visible does not work, vertical scroll bar still appears. */
}


.class_animation_shake{
    animation-name: animation_shake;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.class_animation_shake_once{
    animation-name: animation_shake;
    animation-duration: 2s;
    animation-iteration-count: 1;
}

@keyframes animation_shake{
    0% {
        transform: rotateZ(0.4deg);
    }
    10% {
        transform: rotateZ(-0.4deg);
    }
    20% {
        transform: rotateZ(0.4deg);
    }
    25% {
        transform: rotateZ(-0.4deg);
    }
    30% {
        transform: rotateZ(0.4deg);
    }
    33% {
        transform: rotateZ(-0.4deg);
    }
    36% {
        transform: rotateZ(0.4deg);
    }
    
    100% {
        transform: rotateZ(0deg);
    }
    
}


.class_animation_color{
    animation-name: animation_color;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@keyframes animation_color{
    0% {
        color: black;
    }

    30% {
        color: red;
    }
    63% {
        color: blue;
    }
    
    100% {
        color: black;
    }
    
}




/* Assessibility Related */

/* .btn.accessible {
    font-family: "Times New Roman", Times, serif;
    color: black;
    font-size: 24px;
    border-color: black;

} */

.accessible{
	font-family: "Times New Roman", Times, serif;
    color: black !important;
    font-size: 24px;
    border-color: black;
}

/* .jumbotron.accessible, .navbar.accessible{
    background-color: wheat;

} */