/* Base Styles
––––––––––––––––––––––––––––––––––––––––––––––-------------------------–––– */
/* STRUCTURING 
Based on 960px wide */

#odrive{ 
  width:100%;
  position: relative;
  background-size: cover;
}

#webservice{
  margin:0 auto;
  content: "";
  display: table;
  clear: both;
}

#content{
  margin:0 auto;
  content: "";
  display: table;
  clear: both;
}
.content-min-height { min-height: 550px; }


#welcome{

}


#footer{
  margin:0 auto;
  content: "";
  display: table;
  clear: both;
  width:100%;
}
#footer-holder { width:100%; text-align:left; border-top:solid 1px #ccc; padding-left:10px; padding-top:20px; padding-bottom:40px; }
#footer .footer-item { font-size:1rem; font-weight:400; list-style-type:none; text-transform:uppercase; }
#footer .footer-item-header { font-size:1.2rem; font-weight:400; list-style-type:none; }
#footer .row { display:inline-block; vertical-align:top; margin-right:5%; }

#pagetitle {
  font-size:3rem;
  font-weight: 300;
  padding-left:9px;
  padding-right:10px;
  padding-top:20px;
}
.nocrumb { padding-bottom:20px; }
.crumb { padding-bottom:10px; }




#small-breadcrumb { padding-left:9px; width:15px; padding-right:5px; display:inline; }
#small-breadcrumb .bc-icon-arrow { width:10px; padding:0 1px; display:inline-block; }

/*---Breadcrumb individual css ---*/
.breadcrumb-icon-home
    {
      display: inline-block;
      width: 12px;
      height: 13px;
      background: url("/images/breadcrumb-icons/breadcrumb-home.png") no-repeat 100% 0;
      background-size:cover;
      overflow:hidden;
    }
    .breadcrumb-icon-home:hover { background-position: 0% 0px; }
    .breadcrumb-icon-home span { visibility: hidden; }

.breadcrumb-icon-org
    {
      display: inline-block;
      width: 12px;
      height: 13px;
      background: url("/images/breadcrumb-icons/breadcrumb-org.png") no-repeat 100% 0;
      background-size:cover;
      overflow:hidden;
    }
    .breadcrumb-icon-org:hover { background-position: 0% 0px; }
    .breadcrumb-icon-org span { visibility: hidden; }

.breadcrumb-icon-group
    {
      display: inline-block;
      width: 12px;
      height: 13px;
      background: url("/images/breadcrumb-icons/breadcrumb-group.png") no-repeat 100% 0;
      background-size:cover;
      overflow:hidden;
    }
    .breadcrumb-icon-group:hover { background-position: 0% 0px; }
    .breadcrumb-icon-group span { visibility: hidden; }

.breadcrumb-icon-browser
    {
      display: inline-block;
      width: 14px;
      height: 15px;
      background: url("/images/breadcrumb-icons/breadcrumb-browser.png") no-repeat 100% 0;
      background-size:cover;
      overflow:hidden;
    }
    .breadcrumb-icon-browser:hover { background-position: 0% 0px; }
    .breadcrumb-icon-browser span { visibility: hidden; }

.breadcrumb-icon-member
    {
      display: inline-block;
      width: 12px;
      height: 13px;
      background: url("/images/breadcrumb-icons/breadcrumb-member.png") no-repeat 100% 0;
      background-size:cover;
      overflow:hidden;
    }
    .breadcrumb-icon-member:hover { background-position: 0% 0px; }
    .breadcrumb-icon-member span { visibility: hidden; }

.breadcrumb-black-home { display:inline-block; width:12px; }
.breadcrumb-black-org { display:inline-block; width:12px; }
.breadcrumb-black-group { display:inline-block; width:12px; }
.breadcrumb-black-browser { display:inline-block; width:12px; }
.breadcrumb-black-member { display:inline-block; width:12px; }


#gallery{
  width:100%;
  padding-bottom:40px;
}

#bottomspace {
  width:100%; 
  height:160px; 
  clear:both;
}


/* Media tags for Structure only */
@media (min-width: 320px) {
  #content { width: 300px;}
}

@media (min-width: 370px) {
  #content, #footer { width: 350px;}
}

@media (min-width: 400px) {
  #content { width: 380px;}
}

@media (min-width: 550px) {
  #content { width: 530px;}
}

@media (min-width: 650px) {
  #content { width: 630px; }
}

@media (min-width: 750px) {
  #content { width: 710px; padding:0 20px 0 20px; }
}

@media (min-width: 1000px) {
  #content { width: 960px; padding:0 20px 0 20px; }
}

@media (min-width: 1200px) {
  #content { width: 1120px; padding:0 40px 0 40px;  }
}

/* FONTS STYLING 
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */

html {
  font-size: 62.5%;
  text-rendering: optimizeLegibility;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0;
    -ms-font-feature-settings:"liga", 0;
    -o-font-feature-settings:"liga", 0;
    -webkit-font-feature-settings:"liga", 0;
    font-feature-settings:"liga", 0;
   }
body {
  font-size: 1.4em; /* currently ems cause chrome bug misinterpreting rems on body element */
  font-weight: 400;
  font-family: "Lato", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  -webkit-font-smoothing: antialiased;

  
}
bodynl {
  font-size: 1.4em; /* currently ems cause chrome bug misinterpreting rems on body element */
  font-weight: 400;
  font-family: "Lato", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  -webkit-font-smoothing: antialiased;
  white-space: pre-wrap;
  text-align: left;

}


/* Universal Text Classes Styled Here */
p { margin:0px; padding:0px; }
a { color:#51b7e0;
    text-decoration: none; 
  	cursor:pointer; }
a:hover{
  color: #0FA0CE; 
  text-decoration:none; 
  cursor:pointer; }

 .special a { color: rgba (0, 0, 0, 0); }
 .special a:hover { color: rgba (0, 0, 0, 0); }
 .linky { color:#51b7e0; }
 .linky:hover { color: #0FA0CE; }

.element-title { 
  font-size:1.1rem;
  text-transform:uppercase; 
  color:#999;
  clear:both;
  width:100%;
  display:block;
  padding-bottom:5px;
  margin:0px;
}

.maintitle { font-size: 3rem; font-weight: 300; }

.main-title { font-size:4rem; font-weight:900; line-height:4.2rem; text-align:center; padding-bottom:20px; padding-top:60px; }
.main-subtitle { font-size:2rem; text-align:center; padding-bottom:20px; }
.main-sectiontitle { font-size:2rem; font-weight:900; padding-bottom:20px; }
.main-sectiontitle-left { font-size:2rem; font-weight:900; padding-bottom:20px; text-align: left; }
.main-subtext { font-size: 1.4rem; text-align:left; padding-bottom:20px; }

.bigholder {  }
.main-holder { margin:0 auto; width:100%; max-width:700px; text-align:left; }
.main-holder-wide { margin:0 auto; width:100%; max-width:900px; text-align:left; }
.main-usage-holder { width:100%; max-width:700px; text-align:left; }
.main-first { margin-top:-60px; }
.extraspace { padding-top:40px; }

ul{ padding:0px 0px 0px 20px; margin:0px; }

/* Media tags for Fonts only */
/* for safari only */
@media (min-width: 300px) {

}

@media (min-width: 400px) {

}

@media (min-width: 550px) {

}

@media (min-width: 750px) {

}

@media (min-width: 1000px) {

}

@media (min-width: 1200px) {

}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 40px;
  padding: 0 18px;
  border-radius: 5px;
  border: none;
  color: #FFFFFF;
  background-color: #51b7e0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  /*line-height: 4rem;*/
  letter-spacing: .1rem;
  text-transform: uppercase;
  overflow:hidden; 
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  height: 55px;

   }
  
  /* Needs to be styled for all buttons */
  /* height: 40px; font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; */
  
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #ffffff;
  background-color: #4FC3EF;
  outline: 0; }
.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
  color: #dddddd;
  background-color: #0C8DBE;
  outline: 0; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 0px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }
  

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table, tr, td
{
   border:none;
   outline:none;
   border-collapse: collapse;
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle outside; }
  
ol {
  list-style: decimal outside; }
ol, ul {
  padding: 0px;
  margin: 0px; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 0px; }
li {
  margin: 0px;
  padding-bottom:8px; }
.level1 { padding-left:20px; }
.level2 { padding-left:25px; }
.level3 { padding-left:25px; }


/* Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.clearfix:before, .clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}


/*--- FOOTER CSS ---*/

/* Media tags for Structure only */
@media (min-width: 320px) {
  #footer { width: 300px;}
  #footer .row { width:100%; vertical-align:top; margin-right:23%; }
  #footer .mobiletop { padding-top:20px; }
  #footer .footer-item { font-size:1.2rem; font-weight:400; list-style-type:none; text-transform:uppercase; }
  #footer .footer-item-header { font-size:1.4rem; font-weight:400; list-style-type:none; }
  #footer li {padding-bottom:15px;}
}

@media (min-width: 370px) {
  #footer { width: 350px;}
}

@media (min-width: 400px) {
  #footer { width: 380px;}
  #footer .row { display:inline-block; width:auto; vertical-align:top; margin-right:5%; }
  #footer .footer-item { font-size:1.1rem; font-weight:400; list-style-type:none; text-transform:uppercase; text-align:left; }
  #footer .footer-item-header { font-size:1.2rem; font-weight:400; list-style-type:none; text-align:left; }
  #footer .mobiletop { padding-top:0px; }
  #footer li {padding-bottom:10px;}
  #footer-holder { text-align:center; }
}

@media (min-width: 550px) {
  #footer { width: 530px;}
}

@media (min-width: 650px) {
  #footer { width: 630px; }
}

@media (min-width: 750px) {
  #footer { width: 710px;}
}

@media (min-width: 1000px) {
  #footer { width: 960px; }
}

@media (min-width: 1200px) {
  #footer { width: 1120px; }
}




/* Font: Cairo
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200;
  src: url('/fonts/cairo/cairo-v1-latin-200.eot'); /* IE9 Compat Modes */
  src: local('Cairo ExtraLight'), local('Cairo-ExtraLight'),
       url('/fonts/cairo/cairo-v1-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/cairo/cairo-v1-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/cairo/cairo-v1-latin-200.woff') format('woff'), /* Modern Browsers */
       url('/fonts/cairo/cairo-v1-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/cairo/cairo-v1-latin-200.svg#Cairo') format('svg'); /* Legacy iOS */
}
/* cairo-300 - latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/cairo/cairo-v1-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Cairo Light'), local('Cairo-Light'),
       url('/fonts/cairo/cairo-v1-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/cairo/cairo-v1-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/cairo/cairo-v1-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/cairo/cairo-v1-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/cairo/cairo-v1-latin-300.svg#Cairo') format('svg'); /* Legacy iOS */
}
/* cairo-regular - latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/cairo/cairo-v1-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Cairo'), local('Cairo-Regular'),
       url('/fonts/cairo/cairo-v1-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/cairo/cairo-v1-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/cairo/cairo-v1-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/cairo/cairo-v1-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/cairo/cairo-v1-latin-regular.svg#Cairo') format('svg'); /* Legacy iOS */
}
/* cairo-600 - latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/cairo/cairo-v1-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Cairo SemiBold'), local('Cairo-SemiBold'),
       url('/fonts/cairo/cairo-v1-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/cairo/cairo-v1-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/cairo/cairo-v1-latin-600.woff') format('woff'), /* Modern Browsers */
       url('/fonts/cairo/cairo-v1-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/cairo/cairo-v1-latin-600.svg#Cairo') format('svg'); /* Legacy iOS */
}
/* cairo-700 - latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/cairo/cairo-v1-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Cairo Bold'), local('Cairo-Bold'),
       url('/fonts/cairo/cairo-v1-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/cairo/cairo-v1-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/cairo/cairo-v1-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/cairo/cairo-v1-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/cairo/cairo-v1-latin-700.svg#Cairo') format('svg'); /* Legacy iOS */
}
/* cairo-900 - latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/cairo/cairo-v1-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Cairo Black'), local('Cairo-Black'),
       url('/fonts/cairo/cairo-v1-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/cairo/cairo-v1-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/cairo/cairo-v1-latin-900.woff') format('woff'), /* Modern Browsers */
       url('/fonts/cairo/cairo-v1-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/cairo/cairo-v1-latin-900.svg#Cairo') format('svg'); /* Legacy iOS */
}