/** Top Menu **/
[id^=topMenu] {display:inline-block; height:50px; font-size:1.3em; vertical-align: top; padding:0 20px 0 20px;}
[id^=topMenu] div {height:100%; width:100%; display:flex; align-items: center; justify-content: center; }
[id^=topMenu] a {color:black !important;}
 #topLeftLogoDiv {display:inline-block;}
 #topLeftLogoDiv div {width:100%; height:100%; display:flex}

 #header {position:absolute; width:100%;  background-color:white; padding:5px 20px 5px 20px;}
 #headerDiv {width:100%; max-width:1170px; height:50px;  margin:auto; vertical-align: top;}
  #topMenuMobile {float:right}
  @media (min-width: 768px) { 
   #topMenuMobile {display:none;}
  }
  @media (max-width: 767px) { 
   [id^=topMenu]:not(#topMenuMobile) {display:none;}
  }
  
 
 /** Footer **/
 #footer {font-size:1.1em !important; padding-top:60px; padding-bottom:60px;}
 #footer li {font-size:1.1em !important; line-height:26px;}
 #footer img { width:100%;}
 
 /** misc **/
 body {font-family: 'Arimo', sans-serif;}
 
 /** mobile menu **/
 #mobileMenu ul {border-top:1px solid #e8ebf1;}
 #mobileMenu li {border-bottom:1px solid #e8ebf1; padding-left:20px; line-height:60px; font-size:1.3em}
 #mobileMenu a {color:black;}
 #mobileMenuBlack {position:fixed; top:0; bottom:0; left:0; right:0; z-index:1000; background-color:rgba(0,0,0,0.3);}
 #mobileMenu { position:fixed; top:0; left:0; bottom:0; background-color:white; z-index:1001}
 #mobileMenu img {height:60px; padding:5px 20px 5px 20px}

 
 /** HOME Page, above fold **/
 #HPH1 { color:white; margin-bottom:30px; }
 @media (max-width: 767px) { 
#HPH1 { margin-top:100px;};
 }
 
[id^=HPp] {color:white; font-size:1.3em; margin-bottom:30px;}
 #HPkw {font-weight:700}
 #HPGsn {padding:15px 25px 15px 25px; font-weight:700; background-color:#478aff; color:white; border:0; margin-right:10px;}
 #HPLm {padding:15px 25px 15px 25px; font-weight:700; background-color:#fff; color:#478aff; border:0; margin-right:10px;}
  @media (max-width: 767px) { 
	#HPLm,#HPGsn  {margin-bottom:20px; };
 }
 #HPContainer1  {width:100%; max-width:1170px;  margin:auto;  }
 @media (min-width: 768px) { 
	 #HPContainer1 {
		 display:flex;
	 }
 }
 #HPContainer2 {width:50%; height:100%; padding-right:30px;}
 @media (max-width: 767px) { 
	 #HPContainer2 {
		width:100%;
	 }
 }
 #HPContainer2 span:nth-child(2) {
		color:rgba(38, 214, 155, 1);
 }
  #HPContainer2 span:nth-child(3) {
		color:rgba(252,192,3, 1);
 }
  #HPContainer2 span:nth-child(6) {
		color:rgba(255,81,101, 1);
 }
  #HPContainer2 span:nth-child(7) {
		color:rgba(141,92,227, 1);
 }
 
 #HPContainer10 {width:50%; height:100%;}
  @media (max-width: 767px) { 
	 #HPContainer10 {
		width:100%;
	 }
 }
 #HPContainer11 {width:100%; padding-top:57%; position:relative; margin-top:50px;}
 #HPContainer11 > div { position:absolute; top:0; bottom:0; left:0; right:0; }
 #HPContainer11 > div > video {width:100%; height:100%;}
 
 
 
 /** HP below **/
div.HPArticle {text-align:center; padding-top:120px; padding-bottom:120px; }
 @media (max-width: 767px) { 
 div.HPArticle {padding-top:30px; padding-bottom:30px; }
 }
h2 {margin-top:30px; margin-bottom:30px}
p {font-size:1.3em;margin-top:15px; margin-bottom:15px;}
div.HPCircle {position:relative; padding-top:100%; width:100%;}
div.HPCirlcein {font-size:3vw; display:flex;  align-items: center; justify-content: center; position:absolute; top:0; bottom:0; left:0; right:0; border-radius:50%;}
 @media (max-width: 767px) { 
	div.HPCirlcein {font-size:15vw; };
 }
div.HPCircleComment {margin-top:20px; margin-bottom:30px; font-size:1.3em; font-weight:700}
.HPBlue {background-color:#1d2534; }
.HPBlue h2 {color:white;}
.HPBlue p {color:#a2b5d6;}
#HPOpenSource img {width:100%}
@media (max-width: 767px) { 
	#HPOpenSource video {margin-top:30px}

}

/**General**/
div.HPArticleLeft {text-align:left;}
.BlueButton {padding:15px 25px 15px 25px; font-weight:700; background-color:#478aff; color:white; border:0; margin-right:10px;}
.GreyButton {padding:15px 25px 15px 25px; font-weight:700; background-color:#f1f4f8; color:#478aff; border:0; margin-right:10px;}
 @media (max-width: 767px) { 
	.GreyButton,.BlueButton  {margin-bottom:20px; };
 }
.separator {width:100%; height:1px; background-color:#e8ebf1;}


/** Documentation and stuff **/

[id^=category-menu-title] { font-size:1.3em;}
[id^=category-menu-entry] { font-size:1.3em; color:#a9a9a9; padding-left:20px}
#cmsAligner { width:100%; height:73px; }
#cmsTopImage { background-size: cover; height:170px; width:100% }
ul li {font-size:1.3em;}
h4 {font-size:1.8em; font-weight:700; margin-top:30px;}
.durianaBlueSquare { color:#16aace; font-size:0.8em; padding-right:10px;}
.course-image { text-align:center; }


.HPul {  list-style-type: none; text-align:left;}
.HPul li {margin-top:20px; margin-bottom:20px; }

.teamMember {text-align:center}
.teamMember p:nth-child(2) {font-weight:bold; margin-bottom:0;}
.teamMember p:nth-child(3) {margin-top:0;}
.article li {margin-top:10px; margin-bottom:10px;}

h3 {font-size:30px; }
h3:not(:first-child) { margin-top: 70px;}