html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /*No flash when tap*/
    -webkit-tap-highlight-color: transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



/*-----------------------Desktop Styles ---------------------*/

body {
    line-height:1;
    margin: 0;
    padding: 0;
    font-family: Helvetica, sans-serif;
/*    background-color: rgba(0,0,0,1);*/
    background-color: rgba(0,0,0,0.07);
    /*background-image: url("../Pictures/LogoAndBackgrounds/mainPic.jpeg");*/
    /*background-attachment: fixed;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    /*-o-background-size: cover;*/
    /*-moz-background-size: cover;*/
    /*-webkit-background-size: cover;*/
    /*object-position: 30% 0%;*/
/*    background-position: auto;*/
    height: 100%;
    /*max-width: 100%;*/
	 /*overflow: hidden;*/

    display: grid;
    grid-template-areas: 
        "menu_section"
        "banner_section"
        "mainPicture_section"
        "about_section"
        "superTitle"
        "product_section"
        "media_section"
        "teams_section"
        "contact_section"
        "footer_section";
    	grid-row-gap: 0px;
/*    max-width: 1920px;*/
/*    margin-right: auto;*/
/*    margin-left: auto;*/
}


.infoBanner{
    grid-area: banner_section;
    cursor: pointer; 
    background-color: #48aab5;/*#fcb000;*/
    min-height: 2em;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    line-height: 35px;

    position: sticky;
    top: 90px;
    z-index: 98;
    overflow: hidden;

    -webkit-transition: top 0.4s ease-in-out;
    -moz-transition: top 0.4s ease-in-out;
    -o-transition: top 0.4s ease-in-out;
    transition: top 0.4s ease-in-out;
}

.nodisplay{
	 color: white;
    float: right;
    position: absolute;
    right: 20px;
    z-index: 101;
    cursor: pointer;
    transition: transform .2s;
}

.nodisplay:hover{
    transform: scale(1.5);
}

#toNews{
    color: white;
    font-size: medium;
    font-weight: 500;

}

/*MAIN PIC--------------------------------------------------------*/
.frontPicture{
    grid-area: mainPicture_section;
    background-image: url("../Pictures/LogoAndBackgrounds/mainPic.jpeg");
    background-size: cover;
    padding-top: 90px;
    padding-bottom: 0px;
    min-height: 400px;
    display: grid;
}
.mainPicText{
    text-align: center;
    /*align-self: center;*/
    justify-self: left;
	/*margin-top: -10%;*/
    background-color: rgba(255,255,255,0.6);
    padding: 3%;
    margin: 10%;
    color: rgba(50,120,131,0.9);
    font-size: 2.6em;
    font-weight: 500;
    border-radius: 10px;
    /*border: 2px solid rgba(255,255,255,0.6);*/
    /*box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4), -4px -4px 4px rgba(0, 0, 0, 0.4);*/
    letter-spacing: 0.1em;
    min-width: 400px;
}



/*SUPER CLASSES---------------------------------------------------*/
/*Content of website (Cards)*/
.card{
    display: grid;
    grid-template-areas: 
        "bar title"
        "bar rule"
        "bar content";
    background-color: white; 
}
/*Section bar (colored bar on side)*/
.sectionBar{
    grid-area: bar;
    width: 12px;
}
/*Section title*/
.sectionTitle{
    padding-top: 2%;
    grid-area: title;
    font-size: 3em;
    font-weight: 600;
    justify-self: stretch;
    text-align: left;
    padding-left: 1%;
    align-self: center;
    color: #48aab5; /*added 9/5/21*/
}
/*Horizontal Line Under Titles*/
.titleDivide{
    margin-top: 0;
    margin-right: 1%;
    margin-left: 1%;
    grid-area: rule;
    max-height: 10px;
    opacity: 0.85;
}
/*Text Box for About, Media, and Contact sections*/
.textBox{
    display: grid;
    grid-template-areas:
        "title"
        "content";
    margin: 2%;
    grid-row-gap: 5%;
    /*align-self: stretch;*/
}
/*Used in About, Product, and Media sections*/
.titles{
    opacity: 0.9;
    justify-self: center;
    align-self: stretch;
    text-align: center;
    font-weight: 500;   
    font-size: 2.2em;
}
/*Used in About, Product, Media, and Contact sections*/
.subtext{
    opacity: 0.85;
    line-height: 1.5;
    padding-right: 5%;
    padding-left: 5%;
    text-align: center;
    padding-bottom: 20px;
}
/*Used in Product, Media, and Team sections*/
.bottomline{
    opacity: 0.75;
    line-height: 1.5;
    padding-right: 5%;
    padding-left: 5%;
    text-align: center;
    padding-top:10px;
    padding-bottom: 20px;
    font-size: 1.2em;
    font-weight:bold;
}




/*ABOUT-----------------------------------------------------------*/
.aboutCard{ 
    grid-area: about_section;
}
.aboutBar{background-color: #48aab5;}/*#fcb000*/
.aboutSection{
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin-left: 6%; /*1%;*/
    margin-right: 6%; /*1%;*/
    margin-top: 2%; /*1%;*/
    margin-bottom: 2%; /*1%;*/
    border: 1px solid rgba(0,0,0,0.2);
    min-height: 600px;
    grid-template-areas:
    	"companyPic companyTxt missionPic"
    	"missionTxt motivationPic motivationTxt";
}

#companyPic {grid-area: companyPic}
#companyTxt {grid-area: companyTxt}
#missionPic {grid-area: missionPic}
#missionTxt {grid-area: missionTxt}
#motivationPic {grid-area: motivationPic}
#motivationTxt {grid-area: motivationTxt}
.aboutText{
    display: grid;
    /*grid-template-rows: 1fr 5fr;*/
	 /*height: 100%;*/
    /*grid-row-gap: 20px;*/
    padding: 0;
    margin: 0;
    /*justify-self: cover;*/
    padding-top: 20px;
}
.aboutSubText {
    font-size: 1.2em;
/*    align-self: center;*/
}
.aboutTitles {
}
.Pictures{
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-height: 320px;
	 /*align-self: center; /*center;*/
    /*justify-self: center; /*center;*/
    /*max-height: 100%;*/
}
#companyTxt {
	background-color: #747474;
	color: #fff;
	object-fit: fill;
}
#missionTxt{
	background-color: #48aab5;
	color: #fff;
	object-fit: fill;
}
#motivationTxt{
	background-color: #48aab5;
	color: #fff;
	object-fit: fill;
}
/*.doctorPic{ object-position: 90% 0%;}*/
/*.ambPic{ border: none; object-position: 0% 70%;}*/
/*.toolPic{ border: none; object-position: 20% 30%;}*/





/*MID TITLE-------------------------------------------------------*/
.midTitle{
    background: rgba(0,180,200,0.7);
    grid-area: superTitle;
    color: white;
    font-size: 2.5em;
    font-weight: 500;
    padding: 3%;
    padding-top: 5%;
    padding-bottom: 5%;
    align-self: center;
    justify-self: stretch;
    text-align: center;
    line-height: 1.5;
}




/*PRODUCTS--------------------------------------------------------*/
.productCard{
    grid-area:product_section;
    background-color: #EEE;
    grid-template-areas: 
        "bar title"
        "bar rule"
        "bar content"
        "bar note";
}

.productBar{background-color: #48aab5;}/*#f15300*/
.productSection {
    grid-area: content;
    display: grid;
    grid-column-gap: 2%;
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 1%;
    margin-bottom: 10px;
    grid-template-columns: 10fr 1fr 10fr;
    grid-template-areas:
        "nav nav nav"
        "title1 fill title2"
        "pic1 fill pic2"
        "desc1 fill desc2"
        "title3 fill title4"
        "pic3 fill pic4"
        "desc3 fill desc4";
    grid-row-gap: 20px;
    padding-bottom: 10px;
    justify-content: space-between;
}

.prodTitles{
    width: 100%;
    <!-- text-align: center; -->
	 object-fit: fill;
    align-self: center;
    justify-self: center;
    <!-- font-size: 1.7em; -->
}
#AKITitle {
    grid-area: title1;
    padding-bottom: 20px;
}
#DAQTitle {
    grid-area: title2;
    padding-bottom: 20px;
}
#CoVentTitle {
    grid-area: title3;
    padding-bottom: 20px;
}
#VenTestTitle {
    grid-area: title4;
    padding-bottom: 20px;
}
.prodDesc{
    font-size: 1em;
    line-height: 1.5;
    padding-right: 10px;
    padding-left: 10px;
    text-align: left;
    padding-bottom: 5px;
    align-self: stretch;
    justify-self:stretch;
    opacity: 0.6;
    grid-template-areas:
        "mainDesc"
        "features";
}

.AKIdesc{
    grid-area: desc1;
}
.DAQdesc{
    grid-area: desc2;
}
.CoVentdesc{
    grid-area: desc3;
}
.VenTestdesc{
    grid-area: desc4;
}
.subProdDesc {
    text-align: justify;
}
.prodImage{    
    align-self: center;
    justify-self: center;
    grid-area: pic;
    box-shadow:2px 2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    max-width: 560px;
    max-height: 420px;
    width: 80%;
    align-self: start;
}
.akiImg {
    grid-area: pic1;
}
.daqImg {
    grid-area: pic2;
}
.CoVentImg {
    grid-area: pic3;
}
.VenTestImg {
    grid-area: pic4;
}
/*Show and hide more of product descriptions*/
.toggleFeatures {
    color: blue;
    font-style: italic;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /*No flash when tap*/
    -webkit-tap-highlight-color: transparent;
}
.DAQFeature, .AKIFeature, .CoVentFeature, .VenTestFeature {
    display: none;
}
.futureVen{
    grid-area: note;
    font-size: 1em;
    line-height: 1.5;
    padding-top: 20px;
    padding-right: 5%;
    padding-left: 5%;
    text-align: center;
    padding-bottom: 20px;
    
    display: grid;
    grid-template-areas: 
        "logo"
        "HL7"
        "future";
    grid-row-gap: 5px;
}
ul{
    margin-left: 1em;
}
.productArrows {
    cursor: pointer;
    justify-self: stretch;
    width: 100%;
    text-align: center;
    font-style: italic;
}
.productRight {
    opacity: 0.7;
}
.productLeft {
    opacity: 0.2;
}
.navSwiper {
    grid-area: nav;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    display: none;
    padding-bottom: 20px;
    cursor: pointer;
}
.navCircles{
	align-self: center;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;

}
.productCycle {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /*No flash when tap*/
    -webkit-tap-highlight-color: transparent;
}
.circle {
	justify-self: center;
	 align-self: center;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background: rgba(0,0,0,0.15);
}

#firstCircle {
}
#secondCircle {
}
#thirdCircle {
}
#fourthCircle {
}
.gutter {
    grid-area: fill;
    background: #cccccc;
    opacity: 0.85;
    width: 1px;
    justify-self:center;
}


.futureVenText {
    opacity: 0.6;
}
.HL7 {
    height: 60px;
    justify-self: center;
    align-self: center;
}

/*MEDIA-----------------------------------------------------------*/
.mediaCard{ 
    grid-area: media_section;
}
.mediaBar{background-color: #48aab5;}
.mediaSection{
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 1%;
    border: 1px solid rgba(0,0,0,0.2);
    margin-bottom: 3%;
    min-height: 600px;
    
    grid-template-areas: 
        "mediaPic2 mediaTxt1 mediaPic3"
        "mediaTxt2 mediaPic1 mediaTxt3"
        "mediaLink mediaLink mediaLink";
}
#mediaPic1 {grid-area: mediaPic1}
#mediaTxt1 {grid-area: mediaTxt1}
#mediaPic2 {grid-area: mediaPic2}
#mediaTxt2 {grid-area: mediaTxt2}
#mediaPic3 {grid-area: mediaPic3}
#mediaTxt3 {grid-area: mediaTxt3}
#mediaLink {grid-area: mediaLink}
.mediaText{
    display: grid;
    grid-template-rows: 1fr 2fr;
/*    height: 100%;*/
    grid-row-gap: 20px;
    padding: 0;
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}
.mediaSubText {
    font-size: 1.2em;
/*    align-self: center;*/
}
.mediaTitles {
    
}
.mediaPics{
   /*align-self: center;*/
   /*justify-self: center;*/
	width: 100%;
	height: 100%;
	object-fit: fill;
	/*width: 100%;*/
	/*max-height: 270px;*/
	/*object-fit: fill;*/
	border:#6e7878;
	padding-left: 5%;
	padding-right: 5%;
}
#mediaPic1, #mediaPic2{
	padding-left: 0%;
	padding-right: 0%;
}
#mediaTxt1{background-color:#54aab5; color: #fff;}
#mediaTxt2{background-color:#747474; color: #fff;}
#mediaTxt3{background-color:#747474; color: #fff;}
/*.mediaPic1{ object-position: -40% 0%;}
.mediaPic2{ border: none; object-position: 0% 0%;}
.mediaPic3{ border: none; object-position: 0% 0%;}
*/
#mediaLink{
	padding:10px;
}


/*TEAM------------------------------------------------------------*/
.teamCard{
  grid-area: teams_section; 
  grid-template-areas: 
        "bar title"
        "bar rule"
        "bar content"
        "bar note";
}

.teamBar{background-color: #48aab5;}/*#2fc8b9*/
.teamSection{
    overflow: hidden;
    margin-bottom: 0%;
}
/*Swiper*/
.swiper-container{
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /*No flash when tap*/
    -webkit-tap-highlight-color: transparent;
}
.swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /*No flash when tap*/
    -webkit-tap-highlight-color: transparent;
}
.flip-card {
    background-color: transparent;
    float: left;
    padding-right: 25px;
    padding-left: 25px;
    margin-left: 2px;
    width: 300px;
    height: 300px;
    height: 370px;
}


.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform .6s;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform .6s;
  -o-transform-style: preserve-3d;
  -o-transition: -o-transform .6s;
  -moz-transform-style: preserve-3d;
  -moz-transition: -moz-transform .6s;
  -moz-backface-visibility: hidden;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
/*    box-shadow: -3px 0px 5px 0 rgba(0,0,0,0.2);*/
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%; 
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    box-shadow: 3px 0px 5px 0 rgba(0,0,0,0.2);
}

.flip-card-front {
  background-color: #bbb;
    background-color: #c3cbdc;
    background-image: linear-gradient(147deg, #c3cbdc 0%, #edf1f4 74%);
    z-index: 2;
    display: grid;
    grid-template-rows: 4fr 1fr;
}
.flip-card-front img {
  width: 250px;
  height: 300px;
  z-index: 2;
}
.infoBackground {
    background: rgba(0,0,0,0.75);
    color: rgba(255,255,255,0.75);
    display: grid;
}
.info {
    display: grid;
    grid-template-areas: 
        "name"
        "title";
    align-self: center;
    grid-row-gap: 5px;
}
.bioName {
    grid-area: name;
    font-size: 1.1em;    
}
.bioTitle{
    grid-area: title;
    font-size: 0.8em;
}


.flip-card-back {

  transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  z-index: 1;

    background: rgba(0,0,0,0.75);
    color: rgba(255,255,255,0.75);
    
    display: grid;
    grid-template-areas: "skills";
    padding-left: 10px;
    padding-right: 10px;
}
.bioSkills {
    grid-area: skills;
    font-size: 1em;
    line-height: 2;
    align-self: center;
}
.bioLong
{
    grid-area: skills;
    align-self: center;
    line-height: 1;
    font-size: 0.9em;
    text-align: left;
    display: grid;
    grid-template-rows: 1fr 10fr;
    grid-row-gap: 5px;
}
.bioLongTitle {
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    
}
.bioLongContent {
    text-align: center;
    font-size: 0.9em;
    line-height: 1.25;
}


.teamNotes{
    grid-area: note;
    text-align: center;
    padding-top: 3%;
}



/*CONTACT---------------------------------------------------------*/
.contactCard{
    grid-area: contact_section;
    background-color: #EEE;
}
.contactBar{background-color: #48aab5;}/*#fc8e00*/
.contactSection{
    grid-area: content;
    display: grid;
    grid-template-columns: 3fr auto 3fr;
    grid-template-areas: "collaboration social contactInfo";
    margin-bottom: 2%;
}
.collaborateText{
    text-align: center;
    margin: 0px;
    padding: 0px;
    padding-left: 5%;
    padding-right: 5%;
}
.contactInfo{
    text-align: center;
    display: grid;
    grid-template-areas:
        "name"
        "address"
        "email"
        "phone";
    margin: 0px;
    padding: 0px;
}
.contactGutter {
    grid-area: gutter;
}
/*Used in Team and Contact sections*/
.whitelink,.whitelinks{
  color: #46ffff;
  font-size: inherit;
  line-height: inherit;
}

#emailLinks{
  color: #1e737d;
  font-size: inherit;
  line-height: inherit;
}
#emailLinks:hover{
    text-decoration: underline;
}
.callLink {
    color: #1e737d;
}
.callLink:hover {
    text-decoration: underline;
}
.contactLinks{
	 color: #1e737d;
    font-size: inherit;
}
.contactLinks:hover{
    text-decoration: underline;
}
.contactText
{
    align-self: center;
}

.social{
    grid-area: social;
    align-self: center;

    /* margin: auto; */
    position: relative;    
}

.sociallogo{
    height: 40px;
    width: 40px;
    cursor: pointer;
}