/* @import url("https://examplewebsite.com"); */
/* Styles url bootstrap & fontawesome can be imported here instead of in html */

/* bootstrap comes with several fonts "Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"*/

/* classes form bootstrap are used as is without change
   .fw-bold
   .lead   
   .nav  */

/* Note for responsive design, except html and body do not put font-seze for others*/
/* simple sections tags, section ids, section classes */
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 14pt;
    font-family: 'Helvetica', 'Open Sans', 'Arial', 'Roboto', 'Droid Serif', 'sans-serif';
    /* inherit will use default browser font and font properties like size */
    /*font: inherit;*/
    /* vertical-align: baseline; */
    display: block;
}

body {
    font-family: 'Helvetica', 'Open Sans', 'Arial', 'Roboto', 'Droid Serif', 'sans-serif';
    line-height: 1.85em;
    color: #5c5470;
    font-weight: 300;
    font-size: 14pt;
    padding-top: 3.5em;
    line-height: 1;
    margin: 0;
    padding: 0;
    border: 0;
    /* inherit will use default browser font and font properties like size */
    /*font: inherit;*/
    vertical-align: baseline;
}

div {
    margin: 0;
    padding: 0;
    border: 0;
    /*font-size: 100%;*/
    /*font: inherit;*/
    /* vertical-align: baseline; */
    display: block;
    /*overflow of words was being handled using scroll, to avoid having to scroll used hyphen & break-word*/
    overflow-wrap: break-word;
    hyphens: auto;
}

span {
    margin: 0;
    padding: 0;
    border: 0;
    /*font-size: 100%;*/
    /*font: inherit;*/
    vertical-align: baseline;
}

#top {
    /* more white space
    padding: 10em 0 10em 0;
    padding-top: 10em;
    padding-right: 0px;
    padding-bottom: 10em;
    padding-left: 0px; */
    /*less white space */
    padding: 2em 0 2em 0;
    text-align: left;
}

#navboot {
    /* more white space
    padding: 10em 0 10em 0;
    padding-top: 10em;
    padding-right: 0px;
    padding-bottom: 10em;
    padding-left: 0px; */
    /*less white space */
    padding: 4em 0 4em 0;
}

.navboot {
    background: #dbd8e3;
}

#introduction {
    font-weight: bold;
}

#mid {
    /* more white space
    padding: 10em 0 10em 0;
    padding-top: 10em;
    padding-right: 0px;
    padding-bottom: 10em;
    padding-left: 0px; */
    /*less white space */
    padding: 2em 0 2em 0;
    text-align: left;
}

#bottom {
    /* more white space
    padding: 10em 0 10em 0;
    padding-top: 10em;
    padding-right: 0px;
    padding-bottom: 10em;
    padding-left: 0px; */
    /*less white space */
    padding: 2em 0 2em 0;
    text-align: center;
}

#education, #job, #teaching, #standardexams, #publications, #projects, #contact, #acknowledgement, #footer {
    font-weight: bold;
}

.wrapper {
    /* background-image: url(images/image.png);*/
    box-shadow: none;
    padding: 8em 0 8em 0; /*id padding prioritized over class */
    text-align: center;
}

.section-wrapper {
    /* background-image: url(images/image.png);*/
    box-shadow: none;
    padding: 4em 0 4em 0; /*id padding prioritized over class */
    text-align: center;
}

.section-title {
    background: #dbd8e3;
    padding-left: 50px;
    position: relative;
    text-align: center!important;
}

.section-title-red {
    background: #ca6262;
    padding-left: 50px;
    position: relative;
    text-align: center!important;
}

.section-title-blue {
    background: #5d5dbf;
    padding-left: 50px;
    position: relative;
    text-align: center!important;
}

.container {
    margin: 0 auto;
    max-width: calc(100% - 50px);
    width: 1200px;
}

.row {
    margin-top: -25px;
    margin-left: 5px;
    margin-right: 5px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
}

.col-4 {
    width: 33.33333%;
    padding: 25px 0 0 25px;
    box-sizing: border-box;
    }

.col-5 {
    width: 40.0%;
    padding: 25px 0 0 25px;
    box-sizing: border-box;
}

.col-6 {
    width: 60.0%;
    padding: 25px 0 0 25px;
    box-sizing: border-box;
}

.col-8 {
    width: 66.66667%;
    padding: 25px 0 0 25px;
    box-sizing: border-box;
}

.col-12 {
    width: 100%;
    padding: 25px 0 0 25px;
    box-sizing: border-box;
}

.icon {
    display: inline-block;
    width: 25px; height: 25px;
    background: url("iconbackground.jpg");
  }

/* simple content tags, ids, classes */
h1 {
    margin-top: 0.35em;
    margin: 0 0 0.75em 0;
    /*font-size: 3.25em;*/
    letter-spacing: -0.025em;
    font-weight: 300;
    color: #352f44;
    padding: 0;
    border: 0;
    /* vertical-align: baseline; */
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

h2 {
    margin: 0 0 0.75em 0;
    /*font-size: 2em;*/
    letter-spacing: -0.015em;
    font-weight: 700;
    color: #352f44;
    padding: 0;
    border: 0;
    /* vertical-align: baseline; */
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}


h3 {
    margin: 0 0 0.75em 0;
    /*font-size: 1.5em;*/
    letter-spacing: -0.015em;
    font-weight: 700;
    color: #352f44;
    padding: 0;
    border: 0;
    /* vertical-align: baseline; */
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

h4 {
    margin: 0 0 0.75em 0;
    /*font-size: __;*/
    /*font-weight: __;*/
    font-weight: 700;
    color: #352f44;
    padding: 0;
    border: 0;
    /* vertical-align: baseline; */
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

a {
    /*vertical-align: baseline;*/
    /* color: #0d0cb5;*/
    color: inherit;
    text-decoration: underline;
    transition: color .2s ease-in-out;
    overflow:hidden;
    }

a:hover {
    color: #0d0cb5;
    }

a.pop:hover {
    color: #0d0cb5;
    background-color:#dbd8e3;
    /* #for long links this creates a bad moving link effect
    font-size:larger; 
    font-weight: bold;*/
}

p {
    /*font-size: 1.5em;*/
    line-height: 1.75em;
    margin-bottom: 2em;
    padding: 0;
    border: 0;
    /* vertical-align: baseline; */
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

ul {
    /*font-size: 1.5em;*/
    line-height: 1.75em;
    list-style: disc;
    padding-left: 1em;
    margin: 0;
    margin-bottom: 2em;
    padding: 0;
    border: 0;
    /* font-size: 100%;*/
    /* font-size: inherit;*/
    /*font: inherit;*/
    /* vertical-align: baseline;*/
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    /*reduced padding before bullet point to reduce white space*/
    /*padding-inline-start: 40px;*/
    padding-inline-start: 4px;
}

ol {
    /*font-size: 1.5em;*/
    line-height: 1.75em;
    /*list-style: disc;*/
    padding-left: 1em;
    margin: 0;
    margin-bottom: 2em;
    padding: 0;
    border: 0;
    /* font-size: 100%;*/
    /* font-size: inherit;*/
    /*font: inherit;*/
    /* vertical-align: baseline;*/
    display: block;
    /*list-style-type: disc;*/
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    /*reduced padding before bullet point to reduce white space*/
    /*padding-inline-start: 40px;*/
    padding-inline-start: 4px;
}

.social {
    cursor: default;
    margin: 0;
    list-style: none;
    padding-left: 0;
    /*display: flex;*/
    display: inline-block;
}

img {
    overflow-clip-margin: content-box;
    overflow: clip;
}

.image {
    margin: 0;
    padding: 0;
    border: 0;
}

.liststylein {
    /*list-style: none;*/
    list-style: inherit;
    list-style: inside;
}

.button {
    /*text properties*/
    /*font-size: 1.5em;*/
    letter-spacing: -0.025em;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    text-shadow: none;
    white-space: nowrap;
    /*button appearance wrt color*/
    color: #fff !important;
    background-color:#989898; /*background-color: #b0e080;*/
    /*box-shadow: none;*/
    box-shadow: inset 0px 0px 0px 1px #5d5d5d;
    /*button appearanc wrt border*/
    /*border: 0;*/
    border: 5px solid #fff; 
    border-radius: 8px; /*border: 1px solid #ca6262;*/
    /*button appearance wrt spacing*/
    margin: 0;
    padding: 1em 2.35em 1em 2.35em;
    outline: 0;
    /*button appearance wrt alignment in overall document*/
    vertical-align: baseline;
    display: inline-block;
    position: relative;
    max-width: 24em;
    /* transition */
    transition: background-color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out;
    cursor: pointer;
    overflow: hidden;
} 

.button:hover {
    background-color: #5d5d5d;
    color: #fff !important;
    /*button appearanc wrt border*/
    border: 2.5px solid #fff; /*increasing border px above .button creates bad moving link pop out effect but reducing creates better pop in effect*/
    border-radius: 8px;
}

/* combined tags, ids, classes*/
h1 strong {
    font-weight: 700;
}

#top .image, #mid .image {
    border-radius: 100%;
    display: block;
    width: 100%;
}

#top .imageSq, .videoSq, #mid .imageSq {
    display: block;
    width: 100%;
}