/*Custom Styles*/

/*** GENERAL ***/

:root {
  --hm-blue: #002a44;
}

html {
  height: 100vh; /* set viewport constraint */
  min-height: 100%; /* enforce height */
  }

body{background-color: #e5e5e5;}
/* safe area in ios and android handled */
body {

  --ion-safe-area-top: env(safe-area-inset-top);
  --ion-safe-area-bottom: env(safe-area-inset-bottom);
}

.border-radius-15{border-radius: 15px;}
.border-radius-5{border-radius: 5px;}
.px-lg-5 {padding-right: 1.8rem !important; padding-left: 1.8rem !important;}
.bg {background-image: url("../assets/background.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; /* safari may need this */}
.pt-hm{padding-top: 115px;}
.col-12{padding: 0 !important;}

/*** TOP ***/

.navbar{padding-top: 65px; padding-bottom: 1.2rem; background-color: #2F2A64 !important;}
.navbar-dark .navbar-brand {margin: 0; padding: 0;}
.navbar-brand img{    width: 90px; height: auto;}
header{margin-top: 30px; position: relative; }
header .hm-title{line-height: 37px; color: #ffffff; font-size: calc(1.675rem + 1.5vw); font-weight: 600;}

/*** SECTION DETAIL ***/

.subitem{height: 55px; margin-bottom: 10px;}
.hm-title{color: var(--hm-blue); font-family: 'Montserrat', sans-serif; text-align: left; font-weight: 500;}
h1.hm-title, h2.hm-title, p.hm-title{margin-bottom: 0;}
.subitem .hm-title{padding-top: 8px; font-size: calc(0.65rem + 1.5vw); float: left; padding-left: 0px; line-height: 18px;}
.subitem .row-icon{padding: 10px 0 0 0;}
.hm-title-small{margin-left: 5px; font-size: 0.8rem; font-weight: 400;}
.hm-subtitle{font-size: 1rem;}

/*** ICONS ***/

.feather {width: 35px; height: 35px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;}
.feather.main-icon {width: 50px; height: 50px; margin-bottom: 10px;}

.feather.secondary-icon{float: left; margin-right: 10px;}

.icon-link{font-size: 2.5rem;}

.subitem .ph-light{font-size: 22px; padding-top: 0px;}

/*** DEBUG ***/
.development{color: red; font-size: 18px; text-align: left; margin: 0;}

/*** FORM ***/
form label.hm-title{color: white; font-weight: normal; font-size: calc(0.7rem + 1.5vw);}
#input_event{height: 55px; width: 65%; font-weight: normal; padding-left: 15px; display: inline;}
#input_submit{display: inline; width: 32%; height: 55px; font-family: Montserrat; background-color: #5CECC0 !important; border-color: #5CECC0; font-weight: bold; float: right;}
.line-separator{width: 50%; height: 0px; border-bottom: 2px solid #ffffff; margin: 21px auto 21px auto;}

/*** FOOTER ***/
footer {font-family: 'Montserrat', sans-serif; font-size: 12px;}
footer a, footer a:hover{ color: #ffffff; text-decoration: none; float: left;}
footer p{float:left; color: #ffffff;}
footer span{float:left; color: #ffffff; margin: 0 5px 0 5px;}


/* iPad 12.9 Portrait */
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {

  .pt-hm {padding-top: 300px;}
}


@media only screen and (min-device-width: 320px)  and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .hm-title-small{font-size: 0.7rem;}
  .hm-subtitle{font-size: 1rem;}

 }

 /* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .hm-title-small{font-size: 0.7rem;}
  .hm-subtitle{font-size: 1rem;}
}

/* iphone 8 plus */
@media only screen and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : 3) {
  .navbar {padding-top: 40px;}
  .pt-hm{padding-top: 90px;}

}

/* iphone 15 pro max */
@media only screen and (width: 430px) and (height: 932px) and (-webkit-device-pixel-ratio: 3) {
  header .hm-title {line-height: 49px;}
  .pt-hm {padding-top: 400px;}

}

@media (min-width: 768px) and (max-width: 1024px){
  .subitem .hm-title {padding-top: 8px;}
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
  header .hm-title {line-height: 56px;}
  .subitem .hm-title {padding-top: 3px; font-size: calc(0.2rem + 1.5vw); padding-left: 20px;}
  .subitem .row-icon {padding: 10px 0 0 0;}
}