Bootstrap Snippet resume2-header-shrinks using HTML CSS Bootstrap jQuery

/*-------------------------------*/ /* Code snippet by */ /* @maridlcrmn */ /*-------------------------------*/ .quote { color: rgba(0,0,0,.1); text-align: center; margin-bottom: 0px;} /*-------------------------------*/ /* Carousel Fade Transition */ /*-------------------------------*/ #fade-quote-carousel.carousel { padding-bottom: 15px;} #fade-quote-carousel.carousel .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity;} #fade-quote-carousel.carousel .carousel-inner .active {opacity: 1; -webkit-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity;} #fade-quote-carousel.carousel .carousel-indicators { bottom: 0px;} #fade-quote-carousel.carousel .carousel-indicators > li { background-color: #e84a64; border: none;} #fade-quote-carousel blockquote { text-align: center; border: none;} /* Font Definitions */ @font-face {font-family:Helvetica; panose-1:2 11 6 4 2 2 2 2 2 4;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4;} @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4;} @font-face {font-family:"Calibri Light"; panose-1:2 15 3 2 2 2 4 3 2 4;} @font-face {font-family:"Baskerville Old Face"; panose-1:2 2 6 2 8 5 5 2 3 3;} @font-face {font-family:"Adobe Garamond Pro Bold"; panose-1:2 2 7 2 6 5 6 2 4 3;} @font-face {font-family:Georgia; panose-1:2 4 5 2 5 4 5 2 3 3;} @font-face {font-family:David; panose-1:2 14 5 2 6 4 1 1 1 1;} /* @media all and (min-width:576px) .col-sm-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.33%;}*/ /* @media all and (min-width:992px) .col-lg-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.66%;}*/ /* @media all and (min-width:992px) .col-lg-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.33%;} .col-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}*/ /* @media all and (min-width:576px) .col-sm-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.66%;}*/ #main { background-color: #fff; padding-top: 150px;} .row { margin-right: -15px; margin-left: -15px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;} /* @media all and (min-width:576px) */ .container { max-width: 740px;} /* @media all and (min-width:768px) */ .container { max-width: 920px;} /* @media all and (min-width:992px) */ .container { max-width:1260px;} .container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} .h-100 { height: 100% !important;} .clearfix::after { visibility: hidden; display: block; content: ""; clear: both; height: 0px;} /* @media all and (min-width:992px) */ .col-md-7 { width: 58.33%;} /* @media all and (min-width:992px) */ .col-md-5 { width: 41.66%;} .col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;} .col-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;} .col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;} .d-flex { display: -ms-flexbox !important; display: flex !important;} .justify-content-between { -ms-flex-pack: justify !important; justify-content: space-between !important;} .justify-content-around { -ms-flex-pack: distribute !important; justify-content: space-around !important;} .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} /* @media all and (min-width:768px) */ .container { width: 750px;} /* @media all and (min-width:992px) */ .container { width: 88%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} .container-fluid { max-width:1450px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} .clearfix::after { visibility: hidden; display: block; content: ""; clear: both; height: 0px;} .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;} /* @media all and (min-width:768px) */ .col-md-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.33%;} .col-md-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.66%;} /* @media all and (max-width: 600px)*/ .container {width:100%;} .container-fluid { max-width: 1450px; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} .clearfix::after { visibility: hidden; display: block; content: ""; clear: both; height: 0px;} .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;} .btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .modal-header::after, .modal-header::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before { display: table; content: " ";clear: both;} .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px;} section#container {background-image: url(../assets/img/0); background-size: cover; height: 150px;} nav#container-fluid ul{width:100%; color:white; height: 80px; background: #648DA0; margin-right: 15px;} nav#container-fluid ul a{padding:20px; text-decoration: none; color: white;} nav#container-fluid ul li {list-style-type: none; display: inline-block;} nav#container-fluid ul li:hover{background: #8fb0bf; transition: all 0.40s;} nav#container-fluid h1{width: 300px; float:left; cursor: pointer; margin-left: 15px;} h1, h2, h3, h4, h5, h6 { margin-top: 5px; margin-bottom: 5px; line-height: 1; font-weight: 300;} .h1, .h2, .h3, h1, h2, h3 { margin-top: 5px; margin-bottom: 5px;} .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit;} h1, h2, h3, h4, h5, h6 { font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif; font-style: normal; font-weight: bold;} h2 { font-size: 16pt; color: #000000;} h1, h2, h3, h4, h5, h6 { margin-top:5px; margin-bottom:5px; line-height: 1; font-weight: 300;} .h1, .h2, .h3, h1, h2, h3 { margin-top: 5px; margin-bottom: 5px;} .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit;} .h2, h2 { font-size: 1.8rem;} .h1, h1 { font-size: 36px;} h2 { mso-style-link: "Heading 2 Char"; margin: 2pt 0in 2pt 0in; line-height: 120%; page-break-after: avoid; font-size: 10pt; font-family: "Calibri Light","sans-serif"; color: #3f3f3f; text-transform: uppercase;} h1 { mso-style-link: "Heading 1 Char"; margin: 12pt 0in 0in 0in; line-height: 107%; page-break-after: avoid; font-size: 16pt; font-family: "Calibri Light","sans-serif"; color: #2d73b3; font-weight: normal;} h2.skills-dt { text-align: right;} article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block;} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline;} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: middle;} html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; font-size: 11px;} header { width: 100%; height: auto; overflow: hidden; position: fixed; top: 0px; left: 0px; z-index: 999; background-color: rgba(0, 39, 194, 0.53); -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s;} body { margin: 0; font-size: 1em; line-height: 1.4;} body {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; color: black; background-color: #fff; font-weight: 300; text-align: left; line-height: 1.4285;} /* came with dreamweaver sidebar non-bootstrap template */ * { -moz-box-sizing: border-box; box-sizing: border-box;} html, button, input, select, textarea { font-family: serif; color: #222;} ul, ol { margin: 1em 0; padding: 0 0 0 40px;} h2 { mso-style-link: "Heading 2 Char"; margin: 2pt 0in 2pt 0in; line-height: 120%; page-break-after: avoid; font-size: 10pt; font-family: "Calibri Light","sans-serif"; color: #3f3f3f; text-transform: uppercase;} *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} *, ::after, ::before { box-sizing: border-box;} * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} a { color: #007bff; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; text-decoration: none; color: #3cb5f9;} [role=button], a, area, button, input:not([type=range]), label, select, summary, textarea { -ms-touch-action: manipulation; touch-action: manipulation;} hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;} a { text-decoration: none; color: #3cb5f9;} a { color: #00e;} dl, ol, ul { margin-top: 0px; margin-bottom: 0in;} .h2, h2 { font-size: 1.8rem;} body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; color: black; background-color: #fff; font-weight: 300; text-align: left; line-height: 1.4285;} html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; font-size: 11px;} section { padding-top: 2px; padding-bottom: 2px;} ::after, ::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #content .sidebar { font-family: "Montserrat", sans-serif; color: rgba(146, 146, 146, 1); float: left; width: 100%; padding-left: 3%; padding-right: 3%; text-align: center; background-color: rgba(246,246,246,1.00); padding-top: 17px; max-height: 1700px;} #content { clear: both; overflow: auto; padding-top: 29px;} body, td, th { font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;} body { margin-left: 5px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; background-color: rgba(255,255,255,0.0);} html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} #content .sidebar #menubar { text-align: left; color: rgba(146, 146, 146, 1); position: relative; left: 0%;} .sidebar #menubar .menu { margin-bottom: 5px;} #menubar .menu h2 { font-size: 14px;} nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0;} .menu ul li { list-style-type: none; font-size: x-large; position: relative; left: -35px; padding-top: 12px;} a:link, span.MsoHyperlink { color: #0563c1; text-decoration: underline;} #menubar .menu ul li a { font-size: 14px;} .sidebar #menubar .menu ul li a { color: rgba(146, 146, 146, 1); text-decoration: none;} /* start of shrinking-header.css */ /* Headings */ #logo {width:100%; height:auto; background-image: url();background-size:contain; background-repeat: no-repeat;} /* =Header -------------------------------------------------------------- */ header {width: 100%; height: 150px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #0683c9; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; } header logo {background-image: url("http://sangampatel.com/assets/img/SP/condensed/sp-logo1-vintage-big.jpg"); /* assets/img/SP/sp-logo2-big.png */ display: inline-block; height: 150px; line-height: 150px; float: left; font-family: 'Oswald', sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } header.smaller {height: 75px; } header.smaller #logo {background-image: url("http://sangampatel.com/assets/img/SP/condensed/sp-logo1-vintage-small.jpg" ); /* assets/img/SP/sp-logo2-small.png OG is width:125px height:75px i think */ width: 100%; height: auto; line-height: 75px; } .clearfix:after { visibility: hidden; display: block; content: ''; clear: both; height: 0; } @media all and (max-width: 660px) { header h1#logo { display: block; float: left; padding:5px 0px 5px 8px; margin: 0 auto; height: 100px; line-height: 100px; text-align: center; } header.smaller { background-attachment: height: 75px; } header.smaller #logo { height: 40px; line-height: 40px; font-size: 30px; } } @media only screen and (min-width: 840px) { .site-header { position: fixed; width: 100%; z-index: 999;} .title-area { padding-top: 16px; padding-bottom: 0;} .site-header .wrap, .bumper { min-height: 100px;} .site-header, .site-header .wrap, .site-description, .site-header .wrap .title-area, .header-image .site-title, .header-image .site-title a .widget-area.header-widget-area {-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .site-header.shrink {border-bottom: 1px solid #E8DEDA; min-height: 50px;} .shrink .wrap {background-color: rgba(255, 255, 255, 0.1); min-height: 60px; padding: 0;} .shrink .site-title {font-size: 20px; padding-top: 3px;} .header-image .shrink .site-title {padding: 0;} .header-image .shrink .site-title >a {min-height: 50px; } /* Use a smaller logo in the header after shrinking */ .site-header.shrink .wrap .title-area {background: url("/logo-mini2.png") no-repeat scroll left top rgba(0, 0, 0, 0); height: 85px; margin: 8px 0 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .site-header.shrink .widget-area {padding-top: 5px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} } /* end of shrinking-header.css */ /* word-resume.css */ a {color: #007bff; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; text-decoration: none; color: #3cb5f9; } a:hover { color: #0793e2; } a:link, span.MsoHyperlink { color: #0563c1; text-decoration: underline;} a:visited, span.MsoHyperlinkFollowed { color: purple; text-decoration: underline;} /* List Definitions */ b, strong { font-weight: 700;} dl, ol, ul { margin-top: 0px; margin-bottom: 0in;} .table-responsive { display: block; min-height: 1%; overflow-x: auto; -webkit-overflow-scrolling: touch; ms-overflow-style: -ms-autohiding-scrollbar; margin-left: auto; margin-right: auto; width:100%; max-width:650px;} .table { width: 100%; max-width: 100%; margin-bottom: 1rem; background-color: transparent;} table { background-color: transparent; border-collapse: collapse; border-spacing: 0; } td, th { padding: 2px; text-align: center; vertical-align:center;} th.col2 {min-height:1rem;} td.col2 {min-width: 125px; width:100%;} td.text-right {white-space: nowrap; min-width: 85px; column-width: 29%} td.text-center {width:23%; min-width:85px; max-width:125px;} p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0in 0in 0in 0in; line-height: 107%; font-size: 11pt; font-family: "Calibri","sans-serif";} p.company {margin: 4pt 0in 4pt; line-height: normal; vertical-align: baseline;} p.job {text-align: justify; line-height: normal; margin-bottom: 0pt; vertical-align: baseline; -ms-text-justify: inter-ideograph;} p.job.d-flex.justify-content-between {text-align: justify; line-height: normal; margin-bottom: 0pt; -ms-text-justify: inter-ideograph;} p.main-top {margin: 6pt 56.45pt 4pt 6.65pt; line-height: 125%;} p.main-middle {margin: 2pt 56.45pt 4pt 6.65pt; line-height: 125%;} p.main-bottom {margin: 2pt 56.45pt 6pt 6.65pt; line-height: 125%} p.main-solo {margin: 6pt 56pt 6pt 6.65pt; line-height:125%;} p.subheading {margin: 2pt 0in 0in; line-height: normal;} p.summary-top { padding: 5px 10px 5px 10px; margin: 6pt 5.35pt 6pt 2.55pt; text-align: justify; line-height: 115%; -ms-text-justify: inter-ideograph;} p.summary-middle {padding: 5px 10px 5px 10px; margin: 0in 5.35pt 6pt 2.55pt; text-align: justify; line-height: 115%; -ms-text-justify: inter-ideograph;} p.summary-bottom {padding: 5px 10px 5px 10px; margin: 0in 5.35pt 6pt 2.55pt; text-align: justify; line-height: 115%; -ms-text-justify: inter-ideograph;} .summary { line-height: 125%; font-family: Calibri,sans-serif; font-size: 14pt;} .summary-top { padding: 6pt 0pt 2pt 0pt;} .summary-middle { padding: 4pt 0pt 4pt 0pt;} .summary-bottom { padding: 2pt 0pt 6pt 0pt; line-height: 100%;} span.summary {line-height: 115%; font-family: Calibri,sans-serif; font-size: 14pt;} span.summaryb {line-height: 115%; font-family: Calibri,sans-serif; font-size: 14pt;} span.subheading {font-family: Georgia,serif; font-size: 15pt;} span.company {font-weight:bold; color: rgb(29, 29, 255); font-family: Georgia,serif; font-size: 13.5pt;} span.job {color: black; font-size:11pt; font-family: Georgia,serif; font-weight: bold; text-align:left;} span.date {font-family:Georgia,serif; text-align:right;} span.quote {font-style: italic;font-family: cursive; font-size: 13pt; color: darkred;} span.years {font-family: Georgia,serif; font-size: 10pt;} small.pull-right {text-align: right; font-family: georgia; font-style:normal; font-size: 11pt;} span.acc {font-family: Calibri,sans-serif; font-size: 12pt;} span.table {color: black; line-height: 115%; font-size: 11.5pt;} span.edu-left { color: black; text-transform: none; line-height: 115%; font-family: Arial,sans-serif;font-size: 10.5pt;font-weight: normal;text-align:right;} span.edu-dt {color: black; text-transform: none; font-family: Arial,sans-serif; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-style: italic;} span.edu-dd {color: black; text-transform: none; font-family: Arial,sans-serif; font-size: 10pt; font-weight: normal; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-style: italic; mso-bidi-font-weight: bold;} span.skills-dt {color: black; font-family: Arial,sans-serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-style: italic;} span.skills-dd {color: black; font-family: Arial,sans-serif; font-size: 10.5pt; font-weight: normal; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-style: italic;} span.skills-right {color: black; line-height: 115%; font-family: Arial,sans-serif; font-size: 11.5pt; font-weight: normal;} .skills-left { text-align: right;} span.text-left { color: black; line-height: 115%; font-family: Arial,sans-serif; font-size: 11.5pt; font-weight: normal;} span.text-right { color: black; line-height: 115%; font-style: bold; font-family: Arial,sans-serif; font-size: 11.5pt; font-weight: normal;} .row-skills-first {padding: 6pt 0pt 2pt 0pt;} .row-skills-middle {padding: 4pt 0pt 2pt 0pt;} .row-skills-last {padding: 4pt 0pt 6pt 0pt;} .company {text-align: left; border-width: medium 1pt; padding: 0in 5.75pt; height: auto;} .heading {overflow:hidden; background: rgb(51 51, 255); padding: 5pt; } span.heading {font-family: Baskerville Old Face; font-weight:bold; font-size:16pt;} .main { border-top: 1.5px solid blue; border-right: 1.5px solid blue;} .col-12.summary {background: white; border-width: 1pt medium medium; border-style: solid none none; border-color: rgb(7, 8, 221) currentColor currentColor; padding: 0in 5.75pt; border-image: none; height: auto;} .col-12.subheading {background: rgb(221, 221, 255); padding: 0in 5.75pt; border: 1pt solid rgb(51, 51, 255); border-image: none; width: 534.1pt; height: 16.85pt;} .col-12.skills {background: white; border-width: 1pt; border-style: solid; border-color: rgb(7, 8, 221) rgb(51, 51, 255) rgb(7, 8, 221) rgb(7, 8, 221); padding: 0in 5.75pt; border-image: none; width: 534.1pt; height: 95.55pt;} .col-12.company {padding: 0in 5.75pt; height: auto;} .col-12.main { margin-top: 15px; border-width: 1pt 1pt medium medium; border-style: solid solid none none; border-color: rgb(7, 8, 221) rgb(7, 8, 221) currentColor currentColor; padding: 0in 5.75pt; height: auto;} .col-12.job { padding: 0in 5.75pt;} .row-main {height:auto; border-top: 1.5px line rgb(29, 29, 255); border-right: 1.5px line rgb(29, 29, 255);} .row-heading, .heading.col-12 { text-align: justify; line-height: 108.33%; margin-top: 2px; font-family: Georgia; font-size: 18px; background-color: blue; font-weight: bold; color: white; border-top: 1px double white; border-bottom: 1px double white; padding: 0px 2px 2px 20px;} .col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;} .Accordion { border-left: solid 1px gray; border-right: solid 1px white; border-bottom: solid 1px white; overflow: hidden;} .AccordionPanel { margin: 0px; padding: 0px;} .AccordionPanelTab { color:white; background-color: blue; border: solid 1px white; margin: 0px; padding: 2px; padding:2px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none;} .AccordionPanelContent { overflow: auto; margin: 0px; padding: 0px; height: 200px;} .AccordionPanelOpen .AccordionPanelTab { background-color: #EEEEEE;} .summary-acc {font-size:14pt; padding:5px; font-style: bold; } .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;} .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} img { max-width: 100%; height: auto;} #wrapper #main section article .row .col-xl-6.col-5 .row .table-responsive.col-12 .MsoNormalTable tbody tr td .MsoNormal b span { color: black; font-family: Arial,sans-serif; font-size: 10pt;} .carousel { position: relative; margin-bottom: 5px;} .carousel-indicators { position: relative; top: 137px; z-index: 15; display: flex; bottom: 10px; justify-content: center; padding-left: 0px; margin-right: 5%; margin-left: 5%; list-style: none; text-align: center; display: -webkit-box; } .carousel-control { position: absolute; top: 0px; bottom: 0px; left: 0px; width: 15%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0px 1px 2px rgba(0,0,0,0.6); background-color: rgba(0,0,0,0); filter: alpha(opacity=50); opacity: 0.5;} .carousel-item blockquote.blockquote-responsive { border-left: none; margin: 0;} .carousel-item { position: relative; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; transition: -webkit-transform .6s ease; transition: transform .6s ease; transition: transform .6s ease, -webkit-transform .6s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; height: auto; background-color: rgba(212, 237, 218, 0.2);} .carousel-item-next, .carousel-item-prev, .active.carousel-item { display: block;} .carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { display: block;} .carousel-inner > .active { left: 0px;} .carousel-inner { position: relative; width: 100%; overflow: hidden;} .carousel-indicators li { position: relative; -ms-flex: 0 1 auto; flex: 0 1 auto; width: 10px; height: 3px; margin-right: 3px; margin-left: 3px; text-indent: -999px; background-color: rgba(255,255,255,.5);} .carousel-indicators li::before { position: absolute; top: -10px; left: 0px; display: inline-block; width: 100%; height: 10px; content: "";} .carousel-indicators li::after { position: absolute; bottom: -10px; left: 0px; display: inline-block; width: 100%; height: 10px; content: "";} .carousel-indicators .active { width: 12px; height: 12px; margin: 0; background-color: #fff;} .carousel-control.left { background-image: -webkit-linear-gradient(left, rgba(0,0,0,.5) 0%, rgba(0,0,0,.0001) 100%) filter: progid:DXImageTransform.Microsoft.gradient} (startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-image: -o-linear-gradient(left, rgba(0,0,0,.5) 0%, rgba(0,0,0,.0001) 100%) filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-image: linear-gradient(to right, rgba(0,0,0,.5) 0%, rgba (0,0,0,.0001) 100%) filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x;} .carousel-control.right { right: 66px; : auto:: ; left: auto; background-image: -webkit-linear-gradient(left, rgba(0,0,0,.0001) 0%, rgba(0,0,0,.5) 100%); background-image: -o-linear-gradient(left, rgba(0,0,0,.0001) 0%, rgba(0,0,0,.5) 100%); background-image: linear-gradient(to right, rgba(0,0,0,.0001) 0%, rgba(0,0,0,.5) 100%); filter: rogid:DXImageTransform.Microsoft.gradient (startColorstr='#00000000', endColorstr='#80000000', GradientType=1); background-repeat: repeat-x;} .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0;} small.pull-right { text-align: center; font-family: georgia; font-style: normal;font-size: 11pt;float: right;} .small, small, small.pull-right { font-size: 80%; font-weight: 400; margin-right: 128px; padding-top: 13px; font-size: 14pt; color: white;} .small, small { font-size: 80%; font-weight: 400;} img { vertical-align: baseline; border-style: none;} blockquote { font-style: italic; padding-left: 5px; padding-right: 0px; line-height: 1.4rem; padding-top: 0px; color: ghostwhite;} blockquote .small, blockquote footer, blockquote small { display: block; font-style: italic; font-size: 80%; line-height: normal; color: red-brown;} * { -moz-box-sizing: border-box; box-sizing: border-box;} /* duped probably with some summary changes */ [role=button], a, area, button, input:not([type=range]), label, select, summary, textarea { -ms-touch-action: manipulation; touch-action: manipulation;} *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} *, ::after, ::before { box-sizing: border-box;} ::after, ::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} * { -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} .d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;} /* xl */ @media only screen and (min-width:1469){ } /* lg */ @media only screen and (max-width:1468){ } /* md */ @media only screen and (max-width:1100){ } /* sm */ @media only screen and (max-width:768){ } /* xs */ @media only screen and (max-width:540){ }

/*! * classie v1.0.0 * class helper functions * from bonzo https://github.com/ded/bonzo * MIT license * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */ /*jshint browser: true, strict: true, undef: true, unused: true */ /*global define: false */ // version 1 adds header.smaller function init() { window.addEventListener('scroll', function(e){ var distanceY = window.pageYOffset || document.documentElement.scrollTop, shrinkOn = 300, header = document.querySelector("header"); if (distanceY > shrinkOn) { classie.add(header,"smaller"); } else { if (classie.has(header,"smaller")) { classie.remove(header,"smaller"); } } }); } window.onload = init(); // version 2 .site-header.shrink jQuery(function( $ ){ $(".site-header").after('<div class="bumper"></div>'); $(window).scroll(function () { if ($(document).scrollTop() > 50 ) { $('.site-header').addClass('shrink'); } else { $('.site-header').removeClass('shrink'); } }); }); //Set the carousel $(document).ready(function() { $('#quote-carousel').carousel({ pause: true, interval: 7500, }); }); //carousel javascript $('.carousel.slide').carousel(); $('.carousel.slide').carousel({}); ( function( window ) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass; if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); }; } else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); }; } function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c ); } var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass }; // transport if ( typeof define === 'function' && define.amd ) { // AMD define( classie );} else { // browser global window.classie = classie;} })( window ); // all spry js below here var cp1 = new Spry.Widget.CollapsiblePanel("cp1"); var cp2 = new Spry.Widget.CollapsiblePanel("cp2"); var cp3 = new Spry.Widget.CollapsiblePanel("cp3"); var cp4 = new Spry.Widget.CollapsiblePanel("cp4"); var cp5 = new Spry.Widget.CollapsiblePanel("cp5"); // CollapsiblePanel.js // needs widgets/.js var Accordion1 = new Spry.Widget.Accordion("Accordion1"); // SpryAccordion.js - version 0.15 - Spry Pre-Release 1.6.1 var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {}; Spry.Widget.Accordion = function(element, opts) { this.element = this.getElement(element); this.defaultPanel = 0; this.hoverClass = "AccordionPanelTabHover"; this.openClass = "AccordionPanelOpen"; this.closedClass = "AccordionPanelClosed"; this.focusedClass = "AccordionFocused"; this.enableAnimation = true; this.enableKeyboardNavigation = true; this.currentPanel = null; this.animator = null; this.hasFocus = null; this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP; this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN; this.useFixedPanelHeights = true; this.fixedPanelHeight = 0; Spry.Widget.Accordion.setOptions(this, opts, true); this.attachBehaviors(); }; Spry.Widget.Accordion.prototype.getElement = function(ele) { if (ele && typeof ele == "string") return document.getElementById(ele); return ele; }; Spry.Widget.Accordion.prototype.addClassName = function(ele, className) { if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1)) return; ele.className += (ele.className ? " " : "") + className; }; Spry.Widget.Accordion.prototype.removeClassName = function(ele, className) { if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)) return; ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), ""); }; Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps) { if (!optionsObj) return; for (var optionName in optionsObj) { if (ignoreUndefinedProps && optionsObj[optionName] == undefined) continue; obj[optionName] = optionsObj[optionName]; } }; Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel) { if (panel) this.addClassName(this.getPanelTab(panel), this.hoverClass); return false; }; Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel) { if (panel) this.removeClassName(this.getPanelTab(panel), this.hoverClass); return false; }; Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex) { var panelA = this.currentPanel; var panelB; if (typeof elementOrIndex == "number") panelB = this.getPanels()[elementOrIndex]; else panelB = this.getElement(elementOrIndex); if (!panelB || panelA == panelB) return null; var contentA = panelA ? this.getPanelContent(panelA) : null; var contentB = this.getPanelContent(panelB); if (!contentB) return null; if (this.useFixedPanelHeights && !this.fixedPanelHeight) this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight; if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition }); this.animator.start(); } else { if(contentA) { contentA.style.display = "none"; contentA.style.height = "0px"; } contentB.style.display = "block"; contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto"; } if(panelA) { this.removeClassName(panelA, this.openClass); this.addClassName(panelA, this.closedClass); } this.removeClassName(panelB, this.closedClass); this.addClassName(panelB, this.openClass); this.currentPanel = panelB; return panelB; }; Spry.Widget.Accordion.prototype.closePanel = function() { // The accordion can only ever have one panel open at any // give time, so this method only closes the current panel. // If the accordion is in fixed panel heights mode, this // method does nothing. if (!this.useFixedPanelHeights && this.currentPanel) { var panel = this.currentPanel; var content = this.getPanelContent(panel); if (content) { if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition }); this.animator.start(); } else { content.style.display = "none"; content.style.height = "0px"; } } this.removeClassName(panel, this.openClass); this.addClassName(panel, this.closedClass); this.currentPanel = null; } }; Spry.Widget.Accordion.prototype.openNextPanel = function() { return this.openPanel(this.getCurrentPanelIndex() + 1); }; Spry.Widget.Accordion.prototype.openPreviousPanel = function() { return this.openPanel(this.getCurrentPanelIndex() - 1); }; Spry.Widget.Accordion.prototype.openFirstPanel = function() { return this.openPanel(0); }; Spry.Widget.Accordion.prototype.openLastPanel = function() { var panels = this.getPanels(); return this.openPanel(panels[panels.length - 1]); }; Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel) { if (panel != this.currentPanel) this.openPanel(panel); else this.closePanel(); if (this.enableKeyboardNavigation) this.focus(); if (e.preventDefault) e.preventDefault(); else e.returnValue = false; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; return false; }; Spry.Widget.Accordion.prototype.onFocus = function(e) { this.hasFocus = true; this.addClassName(this.element, this.focusedClass); return false; }; Spry.Widget.Accordion.prototype.onBlur = function(e) { this.hasFocus = false; this.removeClassName(this.element, this.focusedClass); return false; }; Spry.Widget.Accordion.KEY_UP = 38; Spry.Widget.Accordion.KEY_DOWN = 40; Spry.Widget.Accordion.prototype.onKeyDown = function(e) { var key = e.keyCode; if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode)) return true; var panels = this.getPanels(); if (!panels || panels.length < 1) return false; var currentPanel = this.currentPanel ? this.currentPanel : panels[0]; var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling; while (nextPanel) { if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */) break; nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling; } if (nextPanel && currentPanel != nextPanel) this.openPanel(nextPanel); if (e.preventDefault) e.preventDefault(); else e.returnValue = false; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; return false; }; Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel) { if (!panel) return; var tab = this.getPanelTab(panel); if (tab) { var self = this; Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false); Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false); Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false); } }; Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture) { try { if (element.addEventListener) element.addEventListener(eventType, handler, capture); else if (element.attachEvent) element.attachEvent("on" + eventType, handler); } catch (e) {} }; Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault) { var content = this.getPanelContent(panel); if (isDefault) { this.currentPanel = panel; this.removeClassName(panel, this.closedClass); this.addClassName(panel, this.openClass); // Attempt to set up the height of the default panel. We don't want to // do any dynamic panel height calculations here because our accordion // or one of its parent containers may be display:none. if (content) { if (this.useFixedPanelHeights) { // We are in fixed panel height mode and the user passed in // a panel height for us to use. if (this.fixedPanelHeight) content.style.height = this.fixedPanelHeight + "px"; } else { // We are in variable panel height mode, but since we can't // calculate the panel height here, we just set the height to // auto so that it expands to show all of its content. content.style.height = "auto"; } } } else { this.removeClassName(panel, this.openClass); this.addClassName(panel, this.closedClass); if (content) { content.style.height = "0px"; content.style.display = "none"; } } this.attachPanelHandlers(panel); }; Spry.Widget.Accordion.prototype.attachBehaviors = function() { var panels = this.getPanels(); for (var i = 0; i < panels.length; i++) this.initPanel(panels[i], i == this.defaultPanel); // Advanced keyboard navigation requires the tabindex attribute // on the top-level element. this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex")); if (this.enableKeyboardNavigation) { var self = this; Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false); Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false); Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false); } }; Spry.Widget.Accordion.prototype.getPanels = function() { return this.getElementChildren(this.element); }; Spry.Widget.Accordion.prototype.getCurrentPanel = function() { return this.currentPanel; }; Spry.Widget.Accordion.prototype.getPanelIndex = function(panel) { var panels = this.getPanels(); for( var i = 0 ; i < panels.length; i++ ) { if( panel == panels[i] ) return i; } return -1; }; Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function() { return this.getPanelIndex(this.currentPanel); }; Spry.Widget.Accordion.prototype.getPanelTab = function(panel) { if (!panel) return null; return this.getElementChildren(panel)[0]; }; Spry.Widget.Accordion.prototype.getPanelContent = function(panel) { if (!panel) return null; return this.getElementChildren(panel)[1]; }; Spry.Widget.Accordion.prototype.getElementChildren = function(element) { var children = []; var child = element.firstChild; while (child) { if (child.nodeType == 1 /* Node.ELEMENT_NODE */) children.push(child); child = child.nextSibling; } return children; }; Spry.Widget.Accordion.prototype.focus = function() { if (this.element && this.element.focus) this.element.focus(); }; Spry.Widget.Accordion.prototype.blur = function() { if (this.element && this.element.blur) this.element.blur(); }; ///////////////////////////////////////////////////// Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts) { this.timer = null; this.interval = 0; this.fps = 60; this.duration = 500; this.startTime = 0; this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition; this.onComplete = null; this.panel = panel; this.panelToOpen = accordion.getElement(panel); this.panelData = []; this.useFixedPanelHeights = accordion.useFixedPanelHeights; Spry.Widget.Accordion.setOptions(this, opts, true); this.interval = Math.floor(1000 / this.fps); // Set up the array of panels we want to animate. var panels = accordion.getPanels(); for (var i = 0; i < panels.length; i++) { var p = panels[i]; var c = accordion.getPanelContent(p); if (c) { var h = c.offsetHeight; if (h == undefined) h = 0; if (p == panel && h == 0) c.style.display = "block"; if (p == panel || h > 0) { var obj = new Object; obj.panel = p; obj.content = c; obj.fromHeight = h; obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0; obj.distance = obj.toHeight - obj.fromHeight; obj.overflow = c.style.overflow; this.panelData.push(obj); c.style.overflow = "hidden"; c.style.height = h + "px"; } } } }; Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); }; Spry.Widget.Accordion.PanelAnimator.prototype.start = function() { var self = this; this.startTime = (new Date).getTime(); this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); }; Spry.Widget.Accordion.PanelAnimator.prototype.stop = function() { if (this.timer) { clearTimeout(this.timer); // If we're killing the timer, restore the overflow // properties on the panels we were animating! for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; obj.content.style.overflow = obj.overflow; } } this.timer = null; }; Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function() { var curTime = (new Date).getTime(); var elapsedTime = curTime - this.startTime; var i, obj; if (elapsedTime >= this.duration) { for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; if (obj.panel != this.panel) { obj.content.style.display = "none"; obj.content.style.height = "0px"; } obj.content.style.overflow = obj.overflow; obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto"; } if (this.onComplete) this.onComplete(); return; } for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration); obj.content.style.height = ((ht < 0) ? 0 : ht) + "px"; } var self = this; this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); };