@charset "utf-8";
/* CSS Document version 1 */
body { width: 100%; margin: 0 auto; font-size: 0.87 em; line-height: 1.2 em; }
.container { width:100%; max-width: inherit;}
.clear { clear:both; }
p { font-size: 15px; line-height: 22px; padding-bottom: 2px}
dt {font-size: 1.15em; line-height: normal; display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;}
section { margin: 0px auto 15px auto;}
/* How do I set section ids to have link destination 40px higher, so the nav doesn't cover up the heading? */
/* Re-order links; set up new about section; make cases break into articles; have about link to each case */
.jumbotron {overflow-x: hidden; margin: auto; padding: 0px; background-color: white}
.jumbtron h1 {font-family: arial,helvetica,san-serif; font-size: 48px; line-height: 51px; font-weight: bold;};
.jumbotron p {font-size: 18px};
.jumbotron .container {  }
.jumbotron .container .slides1 { display: block; width: auto; height: 390px; overflow-y: hidden; width:500px}
.slides1 img {height: 420px;}
.slides2 {display: flex; padding: 5px; margin: 20px -10px; background-repeat: no-repeat; background-position: .2em 2em;}
.slides2 p:nth-child(1) { position: absolute; left: 15; top: 15}
.slides2 p:nth-child(2) { font-weight: bold; width: 86%; background-color: aliceblue; font-size: 1.1em; clear:both; position: relative; align-self:flex-end; margin-bottom: -5px; padding: 5px 9px;}
.slides2 p:nth-child(2) span {font-weight: normal;}

/* Carousel Changes - Home Page */

.carousel-caption { }
.carousel-caption .bd-highlight { text-shadow: none; padding: 1em auto; }
.title1 h3 { display: block; padding: 20px 0px; margin:0 }

/* Media Adjustments */
/* xtra large desktop and retina */

@media (min-width:1490.1px) {
  
  }
  .carousel-caption { clear: left; right:0; padding: 1rem; background-color: aliceblue; color: #2e2e1f; min-width: 340px; max-width: 400px; box-shadow:7px 7px 5px rgba(61, 61, 41, 0.5)}
  
  .card-img-top { max-width: 18rem; height: auto; }
    
  } 

/* Home Tabs Panels */

.topheadTwo { margin: 10px auto 10px 10px }
.weLead { margin-left: .5em; margin-right: -10px; margin-top: auto }
.icon-sm { min-width: 64px }
.media { margin-top: 10px }
.tabpanel { border-left-width: thin; border-right-width: thin; border-bottom-width: thin; border-style: groove; border-left-color: #ddd; border-top-color: transparent; border-radius: 0 0px 4px 4px; background-color: #fff }

#afaqs dd { margin: 3px 10px 5px 10px }
#afaqs dt { margin-left: 10px }

#homeTabs .panel-body{ background-color: antiquewhite; border-width: thick; border-style: groove; border-color: darkred}

.faqTitle { background-color: aquamarine; padding: 3px 5px 5px 10px; margin-top: 0 }

.branding { display: inline-block; height: 1.8em }

figure { margin-bottom: 5px; margin-top: 10px }

h5 { line-height: 1.25em }

/* navigation collapse changes */


/* Web Design Timeline Page */

#webdes {background-image: url(../content/images/owc_ux/08_ehop-ipod-girl.png); background-attachment:fixed; background-size: cover; background-position: top; background-repeat: no-repeat;}
#webdes .title {background-color: cornflowerblue; color: aliceblue; margin: auto; padding: 0 0px 0 20px;}
.title1 {background-color: cornflowerblue; color: aliceblue; margin: -5px 0 0 0; padding: 0 0 0 20px; line-height: 1.2em}
.title1 small {color: aliceblue;}}
#webdes small {color: aliceblue}
#webdes .title div:nth-child(2) {margin: 5px auto 5px auto;}
#webdes .panel {background-color: rgba(255,255,255,0.8); margin: 10px 30px; padding: 0; max-width: 400px}
#subt p {background-color: rgba(255,255,255,0.7); margin: auto -20px; padding: 10px 0 10px 15px;}

/* new menu-based styles */

.menubkg {background-color: rgba(255,255,255,0.7); margin: auto; padding: 10px 0 0 15px;}
.menubkg h2 { margin-left: 15px; margin-top:0 }
.nav-tabs li a { font-size: 18px; background-color: #eee }
.nav-tabs .active { font-weight: 600; }

/* Timeline changes 2019 */

.cntl-content a { font-size: 0.92em; line-height: 0.8em;}
.cntl-animate .cntl-image :nth-child(1) { display: block; margin: 5px;}
.cntl-content img { display:inline-flex; margin-bottom: 5px;}
a .morebtn { display: block; margin: 10px;}
em { font-size: 0.8 em; line-height: 1 em; }
h5 { font-size: 1.3 em;  }

/* UX Page images only */
#ux1 {background-image: url(../images/review/tims-red-blk-2.png); margin-right: 20px;background-position:50px 40px; width: auto; height: 256px;}
#ux2 {background-image: url(/content/images/art1/ux-mycat-wf-3r1-export.jpg); margin-right: 10px; background-position:-20px 30px; width: auto; height: 256px; background-size: auto 400px; background-repeat: no-repeat;}
#ux3 {background-image: url(../images/owc_ux/ux-show-_0000_xmas-2004-home.png); background-position:-35px 30px; width: auto; height: 256px; background-size: auto 400px; background-repeat: no-repeat;}

/* Timeline Popup images markup */
.cntl-content {border-top: solid 3px #009ABB;}
.cntl-content .collapse li { list-style: none }
.ctnl-image {margin: 20px auto; padding: 0px 10px 15px 5px;}
.ctnl-icon .cntl-center {margin-left: 30px;}
.cbtnails .thumbnail { font-size: 11px; height: 120px; width: auto; border-color: coral; margin: 5px; background-color: #fff; background-clip: border-box; overflow-y: hidden}
.fb-like.likebtn1 { position: absolute; top:104px; right:20px; }
/* a.likebtn { position: absolute; top:102px; right:20px; } Temporary comp */
.caption {padding: 5px;}
.caption strong { font-weight: bold; font-size: 14px; line-height: 14px;}
.caption a {display:inline; line-height: inherit;}
footer {background: beige; margin: 10px 0px 0px 0px; padding: 10px 30px 20px 30px; display: block }
footer strong {line-height: 14px; margin: 4px 0px;}
footer p {font-size: 11px; padding: 0px; margin: 4px 0px; line-height: 14px;}
footer p span { font-weight: bold }
/* Table Styles */

/* Contact Us Page */

.icon { margin-right: 10px; }

/* Color Panels */
.panel1 {display: block; width: 540px; height: 380px; margin: 10px; padding: 10px; background-image: url("../images/art1/arc_archrsDrm1.jpg"); background-repeat: no-repeat; background-origin: padding-box; background-position: bottom;}

/* phones */

@media (max-width: 481px) {
  .weLead .panel .nav-tabs li a { font-size: 14px; padding: 10px }
  .carousel-caption { margin: auto 0; padding: 10px; left: 5px; right: 5px }
  .title1 h3 { padding: 5px 0px 20px 0px; margin:0 }
  .carousel-inner .item { width: 220%; min-height:280px; margin: 0; padding: 0px; overflow-x: hidden }
  .nav-tabs li a { font-size: 13px; padding: 10px 7px; font-stretch: condensed; background-color: #eee }
  } 

/* tablets */

@media (min-width:481.1px) and (max-width: 768.8px) {
  
  .nav-tabs li a { font-size: 14px; padding: 10px; font-stretch: condensed; background-color: #eee }
  
  .carousel-caption { margin: auto 0;}
  .carousel-inner { display: block; margin-top: 60px;}
  .carousel-inner .container { padding-top: 50px }
  .title1 h3 { display: block; padding: 10px 0px 15px 0px; margin: 0 }
  .carousel-inner .item { width: 230%; min-height:640px; margin: 0; overflow-x: hidden }
  }