@charset "utf-8";
/* CSS Document */
/*=======================  box & shadows ======================== */
body {
    /*background:rgba(249,246,239, 0.5);*/
    background-image: linear-gradient(to left, #f0f0f0, #fffffe);
    padding: 5 0 25px 0px;
	font-family: 'Montserrat', sans-serif;
}
img {
    border: none;
}
.zoom {
    transition: transform .7s;
    text-align: center;
}
.zoom:hover {
    -ms-transform: scale(3, 3); /* IE 9 */
    -webkit-transform: scale(3, 3); /* Safari 3-8 */
    transform: scale(3, 3) translate(-50px, 5px);
    z-index: 99;
}
.x5.zoom:hover {
    -ms-transform: scale(5, 5); /* IE 9 */
    -webkit-transform: scale(5, 5); /* Safari 3-8 */
    transition: transform 1s;
    transform: scale(5, 5) translate(-50px, 1px);
    z-index: 99;
}
a.sr, a.collapsed {
    text-decoration-line: unset;
    border-bottom: thin inset #3a3a3a;
}
ul, li {
    font-size: 1em;
}
.sr ul {
    margin-left: 10px !important;
}
.sr li {
    margin-left: 20px !important;
}
h3, h4, h5, h6 {
    margin-top: 1em;
}


.maillink {
    cursor: pointer;
    text-decoration: underline;
    content: "<i class='fa fa-globe'> </i>";
}
.wrap {
    margin-left: 20px;
}
.box {
    width: 40% !important;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    background-color: white;
    text-align: center;
    vertical-align: middle;
    border: 6px solid #FDFDFF;
    border-radius: 20px !important;
    padding: 0px 15px 0px 15px !important;
    margin: 15px !important;
    font-size: calc(20px + (35 - 20) * ((100vw - 320px) / (1600 - 320)));
    background: linear-gradient(to right, #393939, #051515);
    color: #ffffff;
    font-weight: 550px !important;
}

.box h3 {
    font-weight: normal;
    text-align: center;
    color: #ffffff !important;
    font-size: calc(16px + (25 - 16) * ((100vw - 320px) / (1600 - 320)));
	padding:0px;
	margin:0px;
}
.box1 {
    background-image: -webkit-linear-gradient(left, #ffbf00, #FFDD21);
    background-image: -o-linear-gradient(left, #ffbf00, #FFDD21);
    background-image: linear-gradient(to right, #ffbf00, #FFDD21);
    color: #282895;
}
.box1c {
    background-image: -webkit-linear-gradient(left, rgba(255, 191, 0, 0.50), rgba(255, 221, 33, 0.01));
    background-image: -o-linear-gradient(left, rgba(255, 191, 0, 0.50), rgba(255, 221, 33, 0.01));
    background-image: linear-gradient(to right, rgba(255, 191, 0, 0.50), rgba(255, 221, 33, 0.01));
    color: #282895;
}
.box1d {
    background-image: -webkit-linear-gradient(left, #ffdd21, #ffbf00);
    background-image: -o-linear-gradient(left, #ffdd21, #Fffbf00);
    background-image: linear-gradient(to right, #ffdd21, #ffbf00);
    color: #282895;
}

.shortText {
    display: none;
}
.img-res {
    max-width: 100%;
    height: auto;
    text-align: center;
}
.img-res2 {
    width: 33%;
    height: auto;
    min-width: 150px;
    float: left;
    margin-right: 2rem;
    border-radius: 50%;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-bottom: 1.5em;
}

@media (min-width : 300px) and (max-width : 675px) {
  
	#abstract {
		display:none;
	}
	#wNotes {
        white-space: nowrap;
        text-overflow: ellipsis !important;
        display: inline-block;
    }
    .shortText {
        display: inline-flex;
		letter-spacing:-1px;
		 white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
	}
    .longText {
        display: none;
    }
    .distTeacher {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
	.btn1 {
		/*width:250px;*/
  		white-space: nowrap;
  		overflow: hidden;
  		text-overflow: ellipsis;
	}
	
}

.box2 {
    background: -webkit-linear-gradient(top left, #026da2 0%, #02eeff 100%);
    background: -o-linear-gradient(top left, #026da2 0%, #02eeff 100%);
    background: linear-gradient(to bottom right, #026da2 0%, #02eeff 100%);
}

.box2c {
    background: -webkit-linear-gradient(left, rgba(2, 109, 162, 0.50) 0%, rgba(2, 238, 255, 0.01) 100%);
    background: -o-linear-gradient(left, rgba(2, 109, 162, 0.50) 0%, rgba(2, 238, 255, 0.01) 100%);
    background: linear-gradient(to right, rgba(2, 109, 162, 0.50) 0%, rgba(2, 238, 255, 0.01) 100%);
    color: #011E78;
}
.box2d {
    background: -webkit-linear-gradient(top left, #02eeff 0%, #026da2 100%);
    background: -o-linear-gradient(top left, #02eeff 0%, #026da2 100%);
    background: linear-gradient(to bottom right, #02eeff 0%, #026da2 100%);
}
.box3 {
    background: -webkit-linear-gradient(top left, #0e9641 0%, #0eff41 100%);
    background: -o-linear-gradient(top left, #0e9641 0%, #0eff41 100%);
    background: linear-gradient(to bottom right, #0e9641 0%, #0eff41 100%);
}
.box4 {
    background: -webkit-linear-gradient(top left, #101010 0%, #5e5e5e 100%);
    background: -o-linear-gradient(top left, #101010 0%, #5e5e5e 100%);
    background: linear-gradient(to bottom right, #101010 0%, #5e5e5e 100%);
	color:#ffffff;
}

.box4c {
    background: -webkit-linear-gradient(left, rgba(225, 225, 225, 0.50) 0%, rgba(200, 200, 200, 0.01) 100%);
    background: -o-linear-gradient(left,  rgba(225, 225, 225, 0.50) 0%, rgba(200, 200, 200, 0.01) 100%);
    background: linear-gradient(to right,  rgba(225, 225, 225, 0.50) 0%, rgba(200, 200, 200, 0.01) 100%);
    color: #050505;
}

.box5 {
    background: -webkit-linear-gradient(top left, #d6ed17 0%, #ffff17 100%);
    background: -o-linear-gradient(top left, #d6ed17 0%, #ffff17 100%);
    background: linear-gradient(to bottom right, #d6ed17 0%, #ffff17 100%);
    color: #151585;
}
.box5c {
    background: -webkit-linear-gradient(left, rgba(214, 230, 33, 0.50) 0%, rgba(166, 223, 156, 0.50) 100%);
    background: -o-linear-gradient(left, rgba(214, 230, 33, 0.50) 0%, rgba(166, 223, 156, 0.01) 100%);
    background: linear-gradient(to right, rgba(214, 230, 33, 0.50) 0%, rgba(166, 223, 156, 0.01) 100%);
    color: #050505;
}
.box6 {
    background: -webkit-linear-gradient(top left, #9EB3EB 0%, #7D97DA 100%);
    background: -o-linear-gradient(top left, #9EB3EB 0%, #7D97DA 100%);
    background: linear-gradient(to bottom right, #9EB3EB 0%, #7D97DA 100%);
    color: #050505;
}
.box6c {
    background: -webkit-linear-gradient(left, rgba(30, 167, 21, 0.50) 0%, rgba(166, 223, 156, 0.50) 100%);
    background: -o-linear-gradient(left, rgba(30, 167, 21, 0.50) 0%, rgba(166, 223, 156, 0.01) 100%);
    background: linear-gradient(to right, rgba(30, 167, 21, 0.50) 0%, rgba(166, 223, 156, 0.01) 100%);
    color: #050505;
}

.box7 {
    background-color: #DB9EEB;
}
.box8 {
    background-color: #C49EEB;
}
/********************************* */
/********************************* */
.shadow {
    -webkit-box-shadow: -10px 0px 13px -7px #333333, 10px 0px 13px -7px #333333, 8px 7px 20px -4px rgba(0, 0, 0, 0);
    box-shadow: -10px 0px 13px -7px #333333, 10px 0px 13px -7px #333333, 8px 7px 20px -4px rgba(0, 0, 0, #333333);
	padding:5px;
}
/* *** expand
.shadow1:hover {

  transform: translate3D(0,-3px,0) scale(1.25); 
  box-shadow: 8px 28px 50px rgba(39,44,49,.07), 1px 6px 12px rgba(39,44,49,.04);
  transition: all .4s ease; 
  cursor: pointer;
}
*/
.shadow1:hover {
    -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 8px 7px 20px -4px rgba(0, 0, 0, 0);
    box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 8px 7px 20px -4px rgba(0, 0, 0, 0);
    transition: all .4s ease; /* zoom in */
	padding:2px;
}
.shadow1, .shadow2, .shadow3, .shadow4, .shadow5, .shadow6, .shadow7, .shadow8 {
    position: relative; 
}
.shadow1, .shadow2, .shadow3, .shadow4, .shadow5, .shadow6, .shadow7, .shadow8 {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
	padding:2px;
}
div.textbox {
    padding: 20px;
    margin: 30px;
    height: auto;
    background-color: rgba(231, 231, 231, .50);
    border-radius: 15px;
    min-width: 300px;
    display: none;
    vertical-align: middle;
    border: 1px solid #FDFDFF;
}
/********************** dashed border ****************************/
.shadow1 h3, .shadow2 h3, .shadow3 h3, .shadow4 h3, .shadow5 h3, .shadow6 h3, .shadow7 h3, .shadow8 h3 {
    border-radius: 5px;
    vertical-align: middle;
    /* font-size:calc(20px + 1.5vw);*/
    font-size: calc(16px + (25 - 16) * ((100vw - 320px) / (1600 - 320)));
    line-height: 1.4em;
}
/****************************************************************
*styling shadows
****************************************************************/
.shadow1:before, .shadow1:after {
    position: absolute;
    content: ""; /* tilted with rotate */
    bottom: 5px;
    top: 35%;
    left: 5px;
    right: 5px;
    width: 75%;
    background: rgba(130, 130, 130, 1);
    border: 0;
    z-index: -1;
    -webkit-box-shadow: 0px 20px 15px rgba(130, 127, 127.70);
    -moz-box-shadow: 0 20px 15px rgba(130, 127, 127, 0.7);
    box-shadow: 0 20px 20px rgba(130, 100, 100, 0.70);
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);
}
.shadow1:after {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    transform: rotate(4deg);
    right: 5px;
    left: auto;
}
.shadow2:before {
    position: absolute;
    content: "";
    width: 80%;
    top: 20%;
    bottom: 15px;
    left: 30px;
    background-color: #9F8641;
    z-index: -1;
    -webkit-box-shadow: 0 23px 17px 0 #9F8641;
    -moz-box-shadow: 0 23px 17px 0 #9F8641;
    box-shadow: 0 23px 17px 0 #9F8641;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);
}
.shadow3:before, .shadow3:after {
    content: "";
    position: absolute;
    bottom: 0;
    top: 2px;
    left: 15px;
    right: 15px;
    z-index: -1;
    border-radius: 100px/30px;
    -webkit-box-shadow: 0 0 30px 2px #479F41;
    -moz-box-shadow: 0 0 30px 2px #479F41;
    box-shadow: 0 0 30px 2px #479F41;
}
.shadow4:before, .shadow4:after {
    position: absolute;
    content: "";
    top: 14px;
    bottom: 14px;
    left: 0;
    right: 0;
    box-shadow: 0 0 25px 3px #548E7F;
    border-radius: 100px/10px;
    z-index: -1;
}
.shadow5:before, .shadow5:after {
    position: absolute;
    content: "";
    box-shadow: 0 10px 25px 20px #518C96;
    top: 25%;
    left: 10px;
    bottom: 50px;
    width: 15%;
    z-index: -1;
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    transform: rotate(-8deg);
}
.shadow5:after {
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    transform: rotate(8deg);
    right: 10px;
    left: auto;
}
.shadow6:before, .shadow6:after {
    position: absolute;
    content: "";
    top: 10%;
    bottom: 5px;
    left: 30px;
    right: 30px;
    z-index: -1;
    box-shadow: 0 0 40px 13px #486685;
    border-radius: 100px/20px;
}
.shadow7:before, .shadow7:after {
    position: absolute;
    content: "1";
    top: 25px;
    left: 20px;
    bottom: 150px;
    width: 80%;
    z-index: -1;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);
}
.shadow7:before {
    box-shadow: 10px -10px 30px 15px #984D8E;
}
.shadow7:after {
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    transform: rotate(7deg);
    bottom: 25px;
    top: auto;
    box-shadow: 10px 10px 30px 15px #984D8E;
}
.shadow8 {
    box-shadow:
        -6px -6px 8px -4px rgba(118, 194, 254, 0.75), 6px -6px 8px -4px rgba(49, 254, 187, 0.75), 6px 6px 8px -4px rgba(49, 254, 187, 0.75), 6px 6px 8px -4px rgba(0, 0, 255, 2.75);
}
/************* */
.shadow-right-down {
    border: 1px solid;
    box-shadow: 7px 5px 8px 2px #ccc;
	padding:7px;
}
.effect2 {
    position: relative;
    font-weight: 500;
    text-shadow: 2px 2px 8px #aaaaaa;
    transition: text-shadow .5s color .5s;
}
/* before = left 
   after  = right
*/
.effect2:before, .effect2:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 20%;
    /* top==10% of the block
 /* bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  */
    background: rgba(120, 120, 120, 0.95);
    -webkit-box-shadow: 0 15px 10px rgba(120, 120, 120, 0.95);
    -moz-box-shadow: 0 15px 10px rgba(120, 120, 120, 0.95);
    box-shadow: 0 15px 10px rgba(120, 120, 120, 0.95);
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
}
.effect2:after {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);
    right: 10px;
    left: auto;
}
.effect2:hover {
    text-shadow: 1px 1px 8px #C1930C;
    transition: text-shadow .5s color .5s;
}
/****************- Simple Shadow ********************* */

.shadowSimple {
    -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 8px 7px 20px -4px rgba(0, 0, 0, 0);
    box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 8px 7px 20px -4px rgba(0, 0, 0, 0);
}
/*=================== end of shadows =======================*/
.section-content {
    font-size: inherit !important;
}
/*=======================  fancy Collapse ======================== */
.fancy-collapse-panel .panel-default .panel-heading {
    padding: 0;
}
.fancy-collapse-panel .panel-heading a {
    padding: 12px 35px 12px 15px;
    display: inline-block;
    width: 90%;
    align-items: center;
    justify-content: center;
    background-color: #f2f1eb;
    color: #BA6F0A;
    position: relative;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2em;
    margin-top: 10px;
}
.fancy-collapse-panel .panel-heading a:after {
    font-family: "FontAwesome";
    content: "\f147"; /* fa-minus-square-o */
    position: absolute;
    float: right;
    padding-left: 20px;
    padding-top: 20px;
    font-size: 20px;
    font-weight: 400;
    top: 50%;
    line-height: 1;
    margin-top: -10px;
}
.fancy-collapse-panel .panel-heading a.collapsed:after {
    content: "\f196"; /* fa-plus-square-o*/
    float: right;
    padding-left: 20px;
    padding-top: 20px;
}
/*=================== collapse boxes =======================*/
.expandable {
    overflow: hidden;
}
.expandable:hover {
    overflow: hidden;
    transition-timing-function: ease-in-out;
    -webkit-transition: color .3s; /* Safari */
    transition: color .3s;
    /* -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 8px 7px 20px -4px rgba(0,0,0,0); 
  box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 8px 7px 20px -4px rgba(0,0,0,0);
  transition: all .4s ease; 
*/
}
.collapsible {
    background-color: #f2f1eb;
    color: #BA6F0A;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.5em;
}
/* Icon when the collapsible content is hidden */
.collapsible:after {
    content: '\002D';
    /*content: '\002B';*/
    color: #ffffff;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    font-size: 0.98em;
}
.active:after {
    content: "\2212";
    border: none;
    /*
	transition:box-shadow 0.2s ease-out;
  &:hover {
    box-shadow:0px 0px 15px lightgrey;
  }]
	*/
}
/*
.active, .collapsible:hover {
 	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #cecece), color-stop(25%, #dedede));
    background: -webkit-linear-gradient(#cecece 25%, #dedede 75%);
    background: linear-gradient(#cecece 25%, #dedede 75%);

	color:#ffffff;
	border:none;
}
*/
.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: max-height 0.8s ease-out;
    background-color: #f1f1f1;
    border: none;
}
.btnTab {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-right: 50px;
    margin-top: 15px;
	width:90%;
}
/* ******************- special about btn1 feature *************************** */
.btn1 {
    height: 25px;
    margin-right: 30px;
}
/* Icon when the collapsible content is shown */
.btn1:after {
    font-family: FontAwesome;
    content: '\f103';
    overflow: hidden;
    float: left;
    font-variant: small-caps;
    padding-right: 30px;
    margin-left: 15px;
}
.btn1:hover, .btn1:active {
    color: #F0BD27;
    transition-timing-function: ease-in-out;
    -webkit-transition: color .3s; /* Safari */
    transition: color .3s;
}
/* Icon when the collapsible content is hidden */
.btn1.collapsed:after {
    font-family: FontAwesome;
    content: '\f102';
}
/*======================  more on collapse & expandable ===============*/
.btn-md {
    padding: 10px 16px;
    text-align: left;
    font-size: 16px;
    line-height: 1.25em;
    border-radius: 6px;
    width: 60%;
}
.btn2 {
    font-size: 0.85em;
    margin-right: 60px;
}
/* Icon when the collapsible content is shown */
/* look up symbols : http://astronautweb.co/snippet/font-awesome/ */
/* Icon when the collapsible content is shown */
.btn2:after {
    max-width: 800px;
    /* font-family: "Glyphicons Halflings"; */
    /*  content: '\002D'; */
    /* font-family: "Glyphicons Halflings"; */
    font-family: FontAwesome;
    content: "\f147";
    margin-left: 25px;
}
/* Icon when the collapsible content is hidden */
.btn2.collapsed:after {
    content: '\002B';
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9em;
}
/* Icon when the collapsible content is hidden */
.btn2.collapsed:after {
    content: "\f196";
}
div.expandable h3 {
    font-size: 1.23em;
    background-color: #f2f1eb;
    padding: 5px;
    border: 1px solid 851515;
    border-radius: 5px;
}
/* Icon when the collapsible content is hidden */
.bs-example {
    margin: 20px;
}
/*
.panel-title .glyphicon{
        font-size: 14px;
		 color:#55C0f0
 }
*/
/*=================== table =======================*/
table {
    border: 2px solid #0092d7;
    border-radius: 10px;
    overflow-x: auto;
}
.tdgrad {
    background-image: linear-gradient(to bottom right, rgba(0, 204, 153, .8), rgba(0, 200, 200, .5));
}
.tdshade {
    -webkit-box-shadow: 8px 8px 6px -6px black;
    -moz-box-shadow: 8px 8px 6px -6px black;
    box-shadow: 8px 8px 6px -6px black;
    padding-left: 20px;
}
.orange {
    box-shadow: 10px 10px 20px 5px rgba(255, 200, 51, 0.75) inset;
}
.blue-title {
    box-shadow: 10px 10px 20px 5px rgba(8, 121, 216, 0.5) inset;
    border-radius: 17px;
    padding: 2px 15px 3px 15px;
    margin-bottom: 0px;
    font-size: 1.25em;
    font-weight: 650;
    font-family: 'Montserrat', sans-serif;
}
.yellow {
    box-shadow: 10px 10px 20px 5px rgba(255, 238, 0, .75) inset;
}
.grey {
    box-shadow: 10px 10px 20px 5px rgba(200, 200, 200, .75) inset;
}
tr:nth-child(n):hover {
    background-color: rgba(250, 250, 250, 1);
}
tr.none:nth-child(even), tr.none:nth-child(odd) {
    background: transparent;
}
tr:nth-child(even) {
    background: rgba(225, 225, 225, 0.5);
    border: 1px solid rgb(225, 225, 225, 1);
}
tr:nth-child(odd) {
    background: rgba(240, 240, 240, 0.5);
    border: 1px solid rgb(240, 240, 240, 1);
}
td {
    border-right: 1px solid #ffffff;
    padding: 1px 5px 1px 5px;
}
.high:nth-child(n):hover {
    background-color: rgba(0, 215, 215, .50);
}
/*================ floating buttons ==========================*/
#sr-button {
    background-color: rgba(0, 204, 153, 90);
    color: #FFF;
}
.myfloat {
    /*margin-top:22px;*/
    position: fixed;
    width: 250px;
    height: 35px;
    vertical-align: middle;
    background-color: rgba(0, 204, 153, 90);
    color: #FFF;
    border-radius: 50px;
    border-top-left-radius: 0;
    /*background-image:url("https://www.stormingrobots.com/prod/sr/img/dialogBox.png");
	 background-size:400px 120px;
	background-repeat: no-repeat; */
    padding: 4px;
    box-shadow: 2px 2px 3px #999;
    text-align: center;
}
.float1 {
    bottom: 40px;
    line-height: 1.1em;
    right: 40px;
}
.float2 {
    bottom: 125px;
    line-height: 1.1em;
    right: 40px;
}
.float3 {
    bottom: 210px;
    line-height: 1.1em;
    right: 40px;
}
/* =============================== special highlights ========================= */
.atime {
    display: inline-block;
    background-color: rgba(50, 62, 72, 0.6);
    text-align: center;
    color: #fff;
    border-radius: 4px;
    margin-bottom: 10px;
    width: 25%;
    vertical-align: top;
    padding: 3px;
}
.aRtn {
    display: inline-block;
    background-color: rgba(230, 230, 240, 0.75);
    text-align: center;
    border-radius: 4px;
    margin-bottom: 10px;
    width: 60%;
    color: #101010;
    padding: 3px;
}
.circleClip {
    float: left;
    margin: 10px;
    width: 20%;
    clip-path: circle();
    shape-outside: circle();
}
.ellipseClip {
    float: left;
    margin: 10px;
    width: 20%;
  border-radius:75px;
}



.courseDisc {
    min-width: 500px;
    display: inline-block;
    padding: 30px;
    background-color: #f7b733;
    overflow-x: auto;
    overflow-y: scroll;
}
.zone:hover {
    font-weight: 600;
    color: #851515;
    background-color: rgba(235, 235, 235, 0.50);
    border: thin solid #a0a0a0;
    border-radius: 8px;
    margin-bottom: -2px;
}
.smalla {
    border: 1px solid #cacaaa;
    border-radius: 10px;
    padding: 2px 10px 2px 10px;
    margin: 10px;
    font-style: italic;
    text-decoration: none;
    font-size: calc(10px + (20 - 10) * ((100vw - 480px) / (1600 - 480)));
}
.subtitle {
    border: 1px solid;
    border-radius: 15px;
    padding: 5px;
    margin: 10px;
    font-size: 0.95em;
}
/**********  varioius colors *********- */
.orange {
    background-color: #ff9900;
}
.brightGreen {
    background-color: #90ff00;
}
.skyBlue {
    background-color: #90ffff;
}
.cyan {
    background-color: #42b0e2;
}
.darkPastelBlue {
    background-color: #026da2;
}
.forrestGreen {
    background-color: #0e9641;
}
.darkYellow {
    background-color: #F1C614;
    color: #026da2;
}
.pastelLightGreen {
    background-color: #9EEBBF;
}
.pastelLightPurple {
    background-color: #9EB3EB;
}
.alert {
    background-color: #FBCB0B;
    border-color: #BC8F08;
    color: #ffffff;
    text-decoration: italic;
    padding: 0px 10px 0px 10px;
    margin: 0px 5px 0px 5px;
    display: inline-block;
    border-radius: 15px;
}
.boxcontent {
    border-left: 1px solid #19F708;
    font-weight: 500;
    text-align: left;
    padding-left: 5px;
    font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1600 - 320)));
    line-height: 1.4em;
    margin-left: 10px;
}
.boxcontent-small {
    border-left: 1px solid #19F708;
    font-weight: 600;
    font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
    text-align: left;
    padding-left: 5px;
    line-height: 1.4em;
    margin-left: 10px;
    display: table-cell;
    margin-top: 5px;
    vertical-align: middle;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}