/*!
Custom styles for Barnstorm
*/

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: 'Hind', sans-serif;
  font-weight: 700;
  font-size: 1em;
  margin:0px;
  padding:0px;
  background-color: #000000;
  background: url(/images/bg-tile.jpg) repeat;
  /*-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
  max-width: 100%;
}

h1 {font-size: 1.2em; text-transform: uppercase; letter-spacing: -0.04em; color: #fff; margin-left: 20px; margin-right: 20px; margin-top: 0px; padding:10px 10px 10px 15px; float: left;}
h2 {font-weight: 700; font-size: 1.2em; text-transform: uppercase; color: #fff; margin: 10px 0px 18px 0px;}
h2.alt {font-size: 1.2em; text-transform: uppercase; letter-spacing: -0.04em; color: #000;}
h3 {font-size: 1.2em; letter-spacing: -0.04em; color: #ffffff; margin-top: 0px;}
h3.alt {font-size: 1.2em; letter-spacing: -0.04em; color: #014cbc; margin-top: 0px;}

p {color: #ffffff; padding:10px;}
p.flat {color: #ffffff; padding:10px 10px 0px 10px; margin-top: -45px; line-height: 1em;}
p.first {color: #014cbc;}
p.contentbreak {clear:both;}
p.hspace {min-height:100px;}
p.copyright {color: #ffffff; padding:0px; font-size: 0.75em; margin-top:-10px;}
p.appstoreslogan {color: #ffffff; padding:0px; margin:0px; clear:both; font-size: 0.9em; text-align: right;}

span.fundamount {color: #ffffff; font-weight: 700; font-size: 1.09em; margin-left: -5px;}

a { color: #4d90ff; text-decoration: none;}
a:visited { color: #4d90ff; text-decoration: none;}
a:hover { color: #bfd7ff; text-decoration: none;}

a.upper { color: #ff2a00; text-decoration: none; text-transform: uppercase;}
a.upper:visited { color: #ff2a00; text-decoration: none; text-transform: uppercase;}
a.upper:hover { color: #f6775f; text-decoration: none; text-transform: uppercase;}

.side li a { padding: 7px 10px 7px 10px; color: #003e83; text-decoration: none;}
.side li a:visited { padding: 7px 10px 7px 10px; color: #003e83; text-decoration: none;}
.side li a:hover { padding: 7px 10px 7px 10px; color: #3d3d3d; text-decoration: none;}
.side li a.active { padding: 7px 10px 7px 10px;color: #3d3d3d; text-decoration: none;}

footer li a { padding: 7px 10px 7px 10px; color: #fff; text-decoration: none; text-transform: none; font-size: 0.8em;}
footer li a:visited { padding: 7px 10px 7px 10px; color: #fff; text-decoration: none; text-transform: none; font-size: 0.8em;}
footer li a:hover { padding: 7px 10px 7px 10px; color: #cacaca; text-decoration: none; text-transform: none; font-size: 0.8em;}
footer li a.active { padding: 7px 10px 7px 10px; color: #cacaca; text-decoration: none; text-transform: none; font-size: 0.8em;}

ol {list-style-type:square; color: #ffffff; padding:0px; margin:0px;}
ul {list-style-type:square; color: #ffffff; padding-top:0px; margin-top:-20px; padding-bottom:0px; margin-bottom:0px;}
footer ul {margin-left: -45px; list-style: none;}
footer ul li {display: inline;}

    .flex {width: 100%; height: auto;}
    .floatleft {float: left;}

div.container {
   width: 100%;
   max-width: 1080px;
   margin: 0 auto;
   overflow: hidden; /* Contains floats */
  }

.cp {
  width: 100%;
  max-width: 1080px;
  height:100%;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  }

.cp-image{
  width:32%;
  max-width:32%;
  margin:0px;
  float: left;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.cp-image-middle{
  width:32%;
  max-width:32%;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

header {
  width: 100%;
  max-width: 1080px;
  height:100%;
  margin-top: 10px;
  margin-bottom: 10px;
  }

.background {
    display: block;
    height: 0;
    padding-bottom: 42.96875%;
    background: url(../images/OPC_Header.png) no-repeat center top;
    background-size: contain;
    margin-top: 10px;
    border: 2px solid #ffffff;
    border-radius: 16px;
    overflow: hidden;
}

div.panel-reduced{
    display: none; /* Hidden on desktop */
        border: 2px solid #ffffff;
        border-radius: 16px;
        overflow: hidden;
        margin-top: 10px;
}

    div.appstorebuttons {
        text-align: right;
        padding-top: 5.5%;
        padding-right: 5%;
        color: #ffffff;
        float: right;
        display: block;
        line-height: 0; /* Prevents the <br /> from adding extra vertical space */
    }

    .appbutton {
        width: 160px !important;
        height: auto !important;
        display: inline-block;
        border: none;
        margin-bottom: 8px; /* Control the exact gap here */
    }

    /* Scaling buttons for tablet headers */
    @media only screen and (max-width: 850px) {
        div.appstorebuttons {
            padding-top: 4.5%; /* Keeps them vertically centered as header shrinks */
        }
        .appbutton {
            width: 130px !important;
            margin-bottom: 5px; /* Slightly smaller gap for smaller icons */
        }
    }

    /* Standard narrow screen adjustment */

    div.appstorebuttons-mid {
        display: none !important;
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        padding: 15px 0 0 0 !important; /* Top padding only */
        margin: 0 !important;
        clear: both;
        font-size: 0 !important;
        line-height: 0 !important;
        height: auto !important; /* Ensure it doesn't inherit a large height */
        min-height: 0 !important;
    }

    .appbutton {
        width: 160px !important;
        height: auto !important;
        display: inline-block;
        border: none;
        margin-bottom: 8px; /* Desktop vertical gap */
    }

    /* Scaling buttons for tablet headers */
    /* Handle narrow screens - Keep them side by side */
    @media only screen and (max-width: 620px) {
        div.appstorebuttons-mid {
            display: flex !important;
            padding: 15px 0 0 0 !important; /* Top padding only */
            margin: 0 !important;
        }
        div.appstorebuttons-mid a {
            flex: 0 1 auto;
            display: flex;
            justify-content: center;
        }
        .appbutton {
            width: 135px !important;
            height: auto !important;
            margin: 0 !important;
            display: block;
        }
        /* Use the margin here to create the perfectly balanced bottom gap */
        div.overview {
            margin-top: 15px !important;
            clear: both;
        }
        div.panel-reduced {
            margin-bottom: 0px !important;
        }
    }

    div.overview{

    width: 100%;
    max-width: 100%;
    margin-top: 15px;
    margin-top: 15px;
    background-image: linear-gradient(#01316a, #000c19);
    color: #ffffff;
    border: 2px solid #ffffff;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px; /* future proofing */
    height: 100%;
    line-height: 1.2em;
    overflow: hidden;
    text-align: center;
}

img.overview-icon{ width:8%; padding:0px;}
img.companylinks{border:none; max-height: 97px;}


div.overviewtext{
  width: 84%;
  max-width: 84%;
  float:left;
  text-align: center;
  padding-top: 14px;
  padding-bottom: 0px;
  padding-left: 0%;
  padding-right: 0%;
  line-height: 1.2em;
  font-size: 1.27em;
}

.clear {clear:top;}
.clear-header {clear:both;}

div.phone01{
    width: 49.5%;
    max-width: 537px;
    float: left;
    margin-top: 15px;
    border: 2px solid #ffffff;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    overflow: hidden;
}

div.phone02{
    width: 49.5%;
    max-width: 537px;
    float: right;
    margin-top: 15px;
    border: 2px solid #ffffff;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    overflow: hidden;
}

    div.features{
        width: 29%;
        height:568px;
        max-height: 568px;
        float: left;
        margin-top: 12px;
        background-image: linear-gradient(#01316a, #000c19);
        color: #ffffff;
        border: 2px solid #ffffff;
        -moz-border-radius: 16px;
        -webkit-border-radius: 16px;
        border-radius: 16px; /* future proofing */
        line-height: 1.15em;
        font-size: 1.25em;
        padding-top: 20px;
      	padding-bottom: 20px;
      	padding-left: 20px;
      	padding-right: 20px;
    }

    div.ipad01{
        width: 70%;
        max-width: 758px;
        float: right;
        margin-top: 12px;
        border: 2px solid #ffffff;
        -moz-border-radius: 16px;
        -webkit-border-radius: 16px;
        border-radius: 16px;
        overflow: hidden;
        height: auto;
    }

    div.ipad01 img {
        display: block;
        width: 100%;
        height: auto;
    }

    @media only screen and (min-width: 1078px) {
        div.ipad01 {
            height: 568px;
        }
        div.ipad01 img {
            height: 100%;
            object-fit: cover;
        }
    }

    /* Target the image specifically to prevent baseline gaps */
    div.ipad01 img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Fixed height for desktop only */
    @media only screen and (min-width: 1078px) {
        div.ipad01 {
            height: 568px;
        }
        div.ipad01 img {
            height: 100%;
            object-fit: cover;
        }
    }
    div.phone03{
    width: 49.5%;
    max-width: 537px;
    float: left;
    margin-top: 15px; /* Increased from 4px to match other gaps */
    clear: both;
    border: 2px solid #ffffff;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    overflow: hidden;
}

div.phone04{
    width: 49.5%;
    max-width: 537px;
    float: right;
    margin-top: 15px; /* Increased from 4px to match other gaps */
    border: 2px solid #ffffff;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    overflow: hidden;
}

footer{
  clear: both;
  text-align: center;
  font-size: 1.3em;
}


/*! Phone responsive specifications ---------------------------------------------------------- */
@media only screen and (min-width: 0px) and (max-width: 620px) {

div.container {
   width: 100%;
   max-width: 620px;
   height: 100%;
   margin: 0 auto;
  }

header {
  width: 100%;
  max-width: 620px;
  height:100%;
  margin-top: 10px;
  margin-bottom: 10px;
  }

.background {
display: none !important; /* Definitively hide desktop header */
}

div.panel-reduced{
  display: block !important; /* Show mobile header */
    width: 100%;
    height: auto;
    margin-top: 10px;
}

div.appstorebuttons{
    display: none;
    }

    div.appstorebuttons-mid{
    display: flex !important; /* Show flex buttons only on mobile/tablet */
    width: 100%;
    text-align: center;
    clear: both;
    color: #ffffff;
    font-size:2.0em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    }

    p.appstoreslogan {text-align: center;}

div.overview{
    width: 100%;
    background-image: linear-gradient(#01316a, #000c19);
    color: #ffffff;
    border: 2px solid #ffffff;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px; /* future proofing */
    text-align: center;
}

img.overview-icon{
    display: none;
  }

div.overviewtext{
  width: 95%;
  max-width: 95%;
  float: none;
  display: inline-block;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.2em;
}

div.phone01{
    width: 100%;
    max-width: 537px;
    float: none;
    margin-top:15px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #ffffff;
    border-radius: 16px;
    overflow: hidden;
}

div.phone02{
    width: 100%;
    max-width: 537px;
    float: none;
    margin-top:15px;
    margin-left: auto;
    margin-right: auto;
}

    div.features{
        width: 100%;
        max-width: 879px;
        margin-top: 15px !important;
        margin-bottom: 0px !important;
        float: none !important;
        height: auto !important;     /* Fix: Shrink box to fit text */
        max-height: none !important; /* Fix: Remove desktop constraint */
        padding-bottom: 20px;
        line-height: 1.2em;
    }

    div.ipad01{
        width: 100%;
        max-width: 879px;
        margin-top: 15px !important;  /* Gap above iPad */
        margin-bottom: 0px !important; /* Prevent doubling with phones below */
        float: none !important;
        clear: both !important;
        border: 2px solid #ffffff;
        border-radius: 16px;
        overflow: hidden;
        height: auto !important;
    }

    div.phone03{
        width: 100%;
        max-width: 537px;
        float: none !important;
        margin-top: 15px !important; /* Gap below iPad */
        margin-bottom: 0px !important;
        clear: both !important;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid #ffffff;
        border-radius: 16px;
        overflow: hidden;
    }

    div.phone04{
        width: 100%;
        max-width: 537px;
        float: none !important;
        margin-top: 15px !important;
        margin-bottom: 0px !important;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid #ffffff;
        border-radius: 16px;
        overflow: hidden;
    }

footer{
  clear: both;
  text-align: center;
  line-height: 1.2em;
}

} /* End of Phone Media Query */


/*! Tablet responsive specifications ---------------------------------------------------------- */
@media only screen and (min-width: 621px) and (max-width: 1023px) {

div.container {
width: 90%;
max-width: 879px;
height: 100%;
margin: 0 auto;
}

header {
  width: 100%;
  max-width: 879px;
  height:100%;
  margin-top: 10px;
  margin-bottom: 10px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  }

  .background {
    display: none !important; /* Hide desktop header in tablet mode too if you prefer the centered look */
  }

  div.panel-reduced {
    display: block !important;
    width: 100%;
    height: auto;
    margin-top: 10px;
  }

  div.appstorebuttons{
    display: none !important;
  }

  div.appstorebuttons-mid{
    display: flex !important; /* Show the centered buttons in tablet mode */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 0;
    clear: both;
  }

    /* REMOVE or comment out the old img.appbutton block here that had:
       width: auto;
       max-height: 50px;
    */

  .appbutton {
    height: 35px; /* Shrink buttons slightly to fit the smaller header */
    width: auto;
  }

img.appbutton{
  width: auto;
  max-height:50px;
  margin:5px;
}

    img.appbutton {
        height: 50px;
        width: auto;
        border: none;
        display: block; /* Helps with alignment inside anchors */
    }

    /* Target the mid container specifically to handle the wrapping */
    div.appstorebuttons-mid {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 0;
    }

    /* When stacked (flex-wrap occurs), ensure they are the same width */
    @media only screen and (max-width: 420px) {
        div.appstorebuttons-mid a {
            flex-basis: 100%;
            display: flex;
            justify-content: center;
        }
        img.appbutton {
            width: 160px; /* Reduced fixed width for stacked view */
            height: auto;
        }
    }

    div.appstoreslogan-panel {padding:0px; margin:10px 0px 0px 0px; clear:both; width: 210px;  float: right;}

    p.appstoreslogan {text-align: center;}

div.overview{
    width: 100%;
    background-image: linear-gradient(#01316a, #000c19);
    color: #ffffff;
    border: 2px solid #ffffff;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px; /* future proofing */
    text-align: center;
}

img.overview-icon{
    display: none;
  }

div.overviewtext{
  width: 95%;
  max-width: 95%;
  float: none;
  display: inline-block;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.2em;
}


div.phone01{
    width: 49%;
    max-width: 537px;
    float: left;
    margin-top: 10px;
    border: 2px solid #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 15px; /* Add bottom margin to push the clear:both element below */
}

div.phone02{
    width: 49%;
    max-width: 537px;
    float: right;
    margin-top: 10px;
    border: 2px solid #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 15px; /* Add bottom margin to push the clear:both element below */
}

    div.features{
        width: 100%;
        max-width: 879px;
        margin-top: 0px !important; /* Margin is now handled by the items above */
        margin-bottom: 0px !important;
        float: none !important;
        clear: both !important;
        height: auto !important;
        max-height: none !important;
        padding-bottom: 20px;
        display: block;
    }

    div.ipad01{
        width: 100%;
        max-width: 879px;
        margin-top: 15px !important;
        margin-bottom: 0px !important;
        float: none !important; /* Stack vertically */
        clear: both !important;
        height: auto !important;
    }

    div.phone03{
        width: 49%;
        max-width: 537px;
        float: left !important; /* Restore horizontal alignment */
        margin-top: 15px !important;
        margin-bottom: 0px !important;
        clear: both !important; /* Starts a new row below the iPad */
    }

    div.phone04{
        width: 49%;
        max-width: 537px;
        float: right !important; /* Restore horizontal alignment */
        margin-top: 15px !important;
        margin-bottom: 0px !important;
    }

    footer{
  clear: both;
  text-align: center;
  line-height: 1.2em;
}


} /* End of Tablet Media Query */

@media only screen and (min-width: 1024px) and (max-width: 1077px) {

  div.features{
    font-size: 1.17em;
    height:540px;
  }
}

/*! Frequent breakponits to handle feature text size ----------------------------------------------------------

  div.features
  {
    font-size: 1.25em;
  }

@media only screen and (min-width: 1090px) and (max-width: 1100px) {
  div.features
  {
    font-size: 1.25em;
  }
}

@media only screen and (min-width: 1035px) and (max-width: 1089px) {
  div.features
  {
    font-size: 1.20em;
  }
}

@media only screen and (min-width: 960px) and (max-width: 1034px) {
  div.features
  {
    font-size: 1.15em;
  }
}

@media only screen and (min-width: 880px) and (max-width: 959px) {
  div.features
  {
    font-size: 1.10em;
  }
}
*/