/* CSS reset */
body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td, { 
    margin:0;
    padding:0;
}
*{font-family: 'Raleway', sans-serif;backface-visibility: hidden;}
a {text-decoration:none !important;}
div > a, div > a:link, div > a:visited, div > a:hover {text-decoration: none;}

html,body {
    height: 100%;
    margin:0;
    padding:0;
    position: relative;
    font-family: 'Raleway', sans-serif;
    background-color:#ececec; /*#ececec*/
    text-align: center;    
}

body{
    
    font-size: 1.3vw;
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
}
div p,ul li {font-size: 1.3vw;}

a.coblue, a.coblue.active {color: #0099cc;}
a.orange, a.orange.active {color: #cc9933;}
a.green, a.green.active, .green {color: #6ebe44;}
a.grey, a.grey.active {color: #999999;}

.w8{ width:8vw;}
.w18{ width:18vw;}
.w15{ width:15vw;}
.font600{font-weight: 600;}
.PNoGap{margin-top:-15px;}
#app {
  position: static;    
  height: 100%;
  width:80vw;
  margin:0 auto;
  background-color:white;
  /*border: 2px solid red;*/
}

.logoWrap{
    position: fixed;
    width:12vw;
    height:12vw;
    float: left;
    /*border:2px solid blue;*/
    }
.logoWrap img, .catImgWrap img{width:12vw;}    

.navWrap{
    /*position: fixed;*/
    width:80vw;
    height:5vw;
    float: left;
    /*border:2px solid purple;*/
}

nav {
    left:27vw;
    top:5vw;
    width: 60vw;
    list-style:none;
    margin:0;
    padding:0;
    font-size: 0.8vw;
    text-align:left;
    position: fixed;
    z-index: 10;
    /*order: 2px solid red;*/
}

nav.main{padding-top:5vw;}
nav.sol{padding-top:4vw;}
nav.sub{padding-top:8vw;}

nav ul {
    margin:0;
    padding: 0;
    
    /*border: 2px solid yellow;*/
    
}
nav.main ul li, nav.sol ul li{
  display:inline;
    padding-left: 2vw;
    padding-right: 0.5vw;
    padding-bottom: 0;
    
}
nav.sub ul li {
  display:inline;
    padding-left: 2vw;
    padding-right: 0.5vw;
    padding-top: 0;
    /*border: 2px solid yellow;*/
    
}

nav ul li a, nav ul li a:hover, nav ul li a:visited {
  font-size: 0.9vw;
  font-weight: 600;
  color: #001c63;
  text-align:left;
  text-decoration:none;
  display:inline-block;
  padding:0px;
   /* border: 2px solid green;*/
}

nav ul li a:hover{
    color: cornflowerblue;
    
}


.wrapper {
  /*height: calc(100% - 42vh);*/
  height: auto;
  width: 80vw;
  position: fixed;
  top: 12vw;
  overflow: hidden;
  /*border: 2px solid pink;*/
}

.catImgWrap{
    float: left;
    margin-left: 4vw;
    position: static; /*fixed  static prevents shifting in safari    */
    width:12vw;
    height:100vh;
    /*border:2px solid orange;*/
}    
.catImgBorder{
        margin-left:4vw;
        height:4px;
        z-index: -2;
        width:76vw;
        position: static;  /*fixed  static prevents shifting in safari    */
        /*overflow: hidden;  */
}

.element, .outer-container {
    text-align: left;
}
.element{
    width: 50vw;
    height: 53vh;
    padding-right: 1vw;
    overflow-y: auto; 
    overflow-x: hidden;
    /*border: 2px solid purple;*/
}    
.outer-container {
    width: 80vw;
    height: 66vh ;                   /* 66vh for 1280 */
    position: relative;
    /*overflow: hidden;    original : overflow: hidden; */
    /*border:2px solid BLUE;*/
}
.inner-container {
    /*margin-left: 275px;*/
    margin-left:19vw;
    margin-top: 10vh;
    position: absolute;
    left: 0;
    height:54vh;                    /* 54vh for 1280 */
    /*overflow-x: hidden;  original : overflow-x: hidden; */
    overflow: hidden; /* original : overflow-y: scroll;*/
    /*border: 2px solid orange;*/
}
 /*   .inner-container::-webkit-scrollbar {  
 display: none;
}*/

#text{font-size:1em;}
.title{font-size:2vw;}
.subtitle{font-size:1.5vw;}
.leftMenu a, .leftMenu p{
    display: block;
    font-size: 0.9vw;
    font-weight: 600;
    color: #000;
    text-decoration:none;
    padding-left:2vw;
    /*border: 2px solid orange;*/
}
.leftMenu a:hover{
    color: cornflowerblue;
    font-weight: 800;
}

.coLarge{
    font-size: 2.8vw;
    font-weight: 200;
    line-height: 110%;
    color:#0099cc;
}

ul {
    padding-left: 20px;
    list-style-position: outside;
}

.icons {
    display:table;
    /*border:2px solid blue;*/
}

.icons img {
    vertical-align: top;
}
.iconsText {
    display:table-cell;
    vertical-align:middle; 
    padding-left:10px;
    /*border:2px solid green;*/
}

.superscript {font-size: 1.5vw;}



footer {
    width:80vw;     /*width:1280px;*/
    margin: 0 auto;
    position:fixed;
    /*width: 100%;*/
    background-color: black;
    text-align: center;
    bottom: 0; 
    height: 13.5vh;             /* 13.5vh; for 1280 */
    color: white;
    padding-top:1vh;
    font-size: 0.7vw;
    z-index: 10;
}
footer p{
    font-size: 0.9vw;
    color: white;
    line-height: 110%;
}
footer a,footer a:visited {
    color: white;
    text-decoration: none;
}
footer a:hover{
    color: cornflowerblue;
    text-decoration: none;
}


@media only screen and (min-width: 1500px) {
    .outer-container {
        height: 60vh ;
        /*border:2px solid red;*/
    }

    .element, .inner-container {
        height:49vh; 
    }
    
    footer {
        height: 14.5vh;
    }
}


/*========================================== ipad portrait ============================*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
html, body{background-color:#ffffff; }
#app, footer, .navWrap, .wrapper, .outer-container {width:100vw;}
div p,ul li {font-size: 3vw;}
.leftMenu a, .leftMenu p{font-size: 2vw}
.catImgBorder{width:100vw;}    
.inner-container {margin-top: 5vh;height: 60vh;}
.element{width: 80vw;height: 60vh;}
nav.main{padding-top:2vw;}
nav.sol{padding-top:1vw;}    
nav {width:90vw;left:17vw;}
nav ul li a, nav ul li a:hover, nav ul li a:visited {font-size: 1.5vw;}
nav.sub ul li,nav.main ul li, nav.sol ul li {padding-right: 1vw; padding-left:0;}
#text{font-size:2.2em;}
.title{font-size:4.4vw;}
.subtitle{font-size:4.1vw;}
.coLarge{font-size: 5.8vw;}
footer{height: 17vh;}
footer p{font-size: 2vw;}    
}

/* MOBILE */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
#app, footer, .navWrap, .wrapper, .outer-container {width:100vw;}
body{background-color:#FFFFFF;  }
div p,ul li {font-size: 2.5vw;}
.leftMenu a, .leftMenu p{font-size: 1vw}
.catImgBorder{width:100vw;}    
.inner-container {margin-top: 5vh;height: 60vh;}
.PNoGap{margin-top:-10px;}
br.hideMobile {display: none;}
.element{width: 75vw;height: 60vh;}
nav.main{padding-top:3vw;}
nav.sol{padding-top:2vw;}    
nav {width:90vw;left:18vw}
nav ul li a, nav ul li a:hover, nav ul li a:visited {font-size: 1.5vw;}
nav.sub ul li,nav.main ul li, nav.sol ul li {padding-right: 1vw; padding-left:0;}
#text{font-size:1.2em;}
.title{font-size:3.4vw;}
.subtitle{font-size:3.1vw;}
.coLarge{font-size: 4.8vw;}
footer{height: 17vh;}
footer p{font-size: 1.5vw;}