body { background-color:#fdfdfd; font-family:"Trebuchet MS", Helvetica, sans-serif; margin:0;}
.logo {  line-height:0.8; display:inline-block; vertical-align:top; }
.logo .first { color:#333; font-weight:bold; text-transform:uppercase;  font-size:29px; }
.logo .last {  color:#1C75BC; font-weight:bold; font-size:60px; text-transform:uppercase; }
.header { max-width:1000px; margin:0 auto; padding:20px; position:relative;}
.navi {  display:inline-block; vertical-align:top; text-align:center; margin-left:40px; }
.navi-mobile { width:100%; }
.navi-mobile-sel { display:inline-block; right:10px; position:absolute; }
 .navi-mobile-sel img { height:30px; margin-top:-5px; margin-right:-10px; }
.navi ul { display:inline-block; margin-left:-30px; }
.navi ul li { display:inline-block; color:#333; margin:-5px; padding:10px 30px; font-size:30px; }
.navi ul li a { text-decoration:none; color:#333; }
.navi ul li  a:hover { color:#1C75BC; }
.toggler { width: 100%; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { position: relative; display:none; z-index:1000;}
#effect h3 { margin: 0; padding: 0.4em;  text-align: center; }
#effect ul { display:inline-block; margin-left:-40px; width:100%; }
#effect ul li { width:100%; display:block; border-top:1px solid #ccc; text-align:center; background-color:#1A74BB; color:#fff; padding:15px 0px; font-size:16px; font-weight:bold; }
#effect ul li:hover { background-color:#9DC4E2; color:#333; }
#effect ul a { text-decoration:none; }
.body-cont { max-width:1000px; margin:0 auto; padding:10px; position:relative; margin-top:-200px;}
.home-graphic {display:inline-block; max-width:100%; width:600px;  height:400px; margin-bottom:40px; background:#444; background-image:url(../img/katieandi.jpg); background-size:cover; background-position:center;}
#button2 { font-size:20px; color:#fff; max-width:600px; position:relative; top:20px; background-color:#1C75BC; padding:20px;}
#effect2 { display:none; max-width:600px; background:rgba(26,116,187,.6); color:#fff; padding:20px; }
#button3 { font-size:20px; color:#fff; max-width:600px; position:relative; top:20px; background-color:#330066; padding:20px;}
#effect3 { display:none; max-width:600px; background:rgba(51,0,102,.6); color:#fff; padding:20px; }
#button4 { font-size:20px; color:#fff; max-width:600px; position:relative; top:20px; background-color:#00997E; padding:20px;}
#effect4 { display:none; max-width:600px; background:rgba(0,153,126,.6); color:#fff; padding:20px; }
#button5 { font-size:20px; color:#fff; max-width:600px; position:relative; top:20px; background-color:#00997E; padding:20px;}
#effect5 { display:none; max-width:600px; background:rgba(0,153,126,.6); color:#fff; padding:20px; }

.skillsandhobbies {top:230px; background-image:url(../img/skillsandhobbies.jpg); background-size:cover; background-position:center; margin-left:40px; display:inline-block; position:absolute; width:350px; height:180px; }
.education { margin-left:40px; display:inline-block; position:absolute; width:350px; height:180px; background-position:bottom;  max-width:100%; background-image:url(../img/obu.jpg); background-size:cover; }
.colrightdark { vertical-align:top; height:auto; max-width:1000px; background:; color:#333; }
.colrightdark .cont { padding:20px; font-size:14px;}
.colrightdark .cont h1 { margin-top:0px; font-weight:100; border-bottom:2px solid #1C75BC; font-size:20px; }
.footer { background-color:#efefef; padding:50px; }
.footer .cont, .sitemap .cont { max-width:1000px; margin:0 auto; text-align:center; }
.sitemap { background-color:#222; color:#ccc; padding:50px 10px;}
.web-display { height:450px; vertical-align:top; width:600px; max-width:100%; background-size:cover; background-position:top; margin:20px; display:inline-block; }
.web-display-mobile { width:340px; height:450px; margin-top:20px; display:inline-block; max-width:100%; vertical-align:top;}
.web-display-mobile iframe { border:1px solid #ccc; width:100%; height:450px; }
.web-display-desc { border:1px solid #ccc; color:#333; width:340px; height:auto; margin-top:20px; display:inline-block; max-width:100%; vertical-align:top; }
.web-display-desc p { padding:10px; }
.web-display-desc a { color:#333; }
.web-display-desc a:hover { color:rgba(28,117,188,.8); }
.reachbeyond { background-image:url(../img/web-reachbeyond.jpg); }
.lonokebaptist { background-image:url(../img/web-lonokebaptist.jpg); }
.obu { background-image:url(../img/web-obu.jpg); }
.secondbaptist { background-image:url(../img/web-2bc.jpg); }
.kdsales { background-image:url(../img/web-kdsales.jpg); }
.jch { background-image:url(../img/web-jch.jpg); }
.carpetexpress { background-image:url(../img/web-carpetexpress.jpg); }
.web-display .title { position:absolute; margin-top:407px; font-size:20px; color:#fff; max-width:580px; width:100%; background-color:rgba(28,117,188,.8); padding:10px; }
.cont-full { position:relative; max-width:100%; width:1000px; margin:0 auto; margin-top:-160px; padding-bottom:80px; }
.cont-full a { color:#333; }
.cont-full a:hover { color:rgba(28,117,188,.8); }
.footer .cont a { text-decoration:none; }
.sitemap .cont a { color:#ccc; text-decoration:none; }
.sitemap .cont a:hover { color:rgba(28,117,188,.8); }
@media only screen and (max-width:999px) {
    .header { padding:10px; } 
    .logo .first { font-size:15px; }
    .logo .last { font-size:31px; }
    .navi { display:none; }
    .colrightdark { margin-left:0px; }
    .colrightdark { width:100%; }
    .home-graphic { margin-bottom:20px; }
    .colrightdark { margin-bottom:20px; height:auto; }
    .colrightdark .cont {padding:0px; }
    .home-graphic { width:100%; }
    #effect2, #effect3, #effect4 { max-width:979px; }
    .education, .skillsandhobbies { height:400px; width:100%; position:relative; margin-left:0px; margin-bottom:20px; top:0px; }
    .footer { padding:50px 10px; }
    .web-display { margin:0px; margin-bottom:40px; width:100%;}
    .web-display .title { max-width:calc(100% - 40px); }
    .web-display-mobile, .web-display-desc { display:none; }
}
@media only screen and (min-width:1000px) {
    .navi-mobile-sel { display:none; }
}