#content {position: relative;margin: 10px auto; width: 95%;border-bottom:2px solid #f4f0d5;background:#f4f0d5;padding:15px 0 0}
#intro {float: left; width: 70%; text-align: center; margin-left: 20px;}
div#index1 {text-align: left;line-height:1.3em;background:#fefef6;margin: 12px auto;padding:5px 0;}
h1.introduce {margin:10px 24px 6px; padding: 6px 6px 0; text-align: left;font-size:1.8em;color:#952c29;;font-family:'Archivo Narrow', arial, sans-serif; line-height: 1.5em; }
h2.first {margin:0 24px; padding: 6px; font-size: 1.3em;color:#505f5a;font-weight:600;font-family:arial, sans-serif;}
p.presence{color:#505f5a;}

p.our-plan {margin-top: 0;}
.highlight {font-weight:700;color:#a7353d;}
#index1 .introText {font-weight:700;color:#1a2450; font-size:1.1em; margin: 6px 20px 5px 16px; padding: 0;}

/* Recent Web Projects */

#shadow-container {position: relative;margin: 5px auto 20px;
border: 1px solid #c7c4c4; background: #fefef6; padding: 2px;
-moz-box-shadow: 0 0 3px 3px #d5ded4;
-webkit-box-shadow: 0 0 3px 3px #d5ded4;
box-shadow: 0 0 6px 3px #d5ded4;}

.container {text-align: left;background: #fefef6; margin: 4px; border: 1px solid #eee;}
 
div.border {text-align: center; margin: 10px; background: #eee; padding: 10px 6px; position: relative;
 max-width: 630px; min-height: 100px;}

#content h3 {color:#1a2450;}

ul.reasons p {margin: 0; padding: 0 0 12px; border-bottom: 1px dotted #c7c4c4;}
ul.reasons .highlight2 {position: relative; top: -2px;}
ul.reasons p.simple {border-bottom: none;}
#content ul.reasons {margin:5px 22px; padding: 0;}


/* Right */

#rightDiv {float: right; width: 25%; margin:22px 1% 16px 0} 
 
#packageWrap {text-align: center;}
#packageWrap p {font-size: 1em;}

.boxround {font-family:Arial, sans-serif;text-align:center; padding: 2px; background: #fefef6;
margin: 0 auto 8px; text-transform: uppercase; font-size: .9em; max-width: 195px;
-moz-box-shadow: 0 0 1px 1px #bbb;
 -webkit-box-shadow: 0 0 1px 1px #bbb;
 box-shadow:  0 0 1px 1px #bbb;
}

#content .boxround a {padding: 8px 0; display: block;}
.boxround a:link, .boxround a:visited {text-decoration:none;  color:#fefef6;}
.boxround a:hover { color:#fff; background: #333;}
  
p#package {background:#3a4b41; color:#f4f8e4; margin: 0 auto; padding: 0;}
p#package2 {background: #a13129; color:#2c3757; margin: 0 auto; padding: 0;}
p#package3 { color:#2c3757; background: #71201f; margin: 0 auto; padding: 0;}

#blog-feed {text-align: left; max-width:195px;margin:10px auto 8px;word-wrap: break-word;padding: 15px 2px; background: #f3efd4 url(http://www.crimsondesigns.com/bg-images/bg-stripes.gif); clear: both;}
#blog-feed h3 { text-align: center;font-size: 1.1em;margin:6px 4px;padding:5px 0; color:#1a2450; text-transform: uppercase;}
#blog-feed p {text-align: center;color:#333;margin: 0 5px; padding: 5px; background: #ffffdf;}
#blog-feed a {padding: 3px; font-weight: normal;}
#blog-feed a:link, #blog-feed a:visited {color: #385042; word-wrap: break-word; display: block;}
#blog-feed a:hover, #blog-feed a:active {color: #22392c; background: #f2eed3;}
#blog-feed a.plain {padding: 0;}
#blog-feed a.plain:hover {background: none; color: #404575;}

div.social {padding: 4px 0; width: 195px;background: #f3efd4 url(http://www.crimsondesigns.com/bg-images/bg-stripes.gif);margin:16px auto;padding:6px 0 0;}
div.social p {margin: 0; padding: 0; text-align: center;}
div.social a:hover {background: none;}

/* miscellaneous */

.highlight2 {font-weight:800;color:#a7353d;}
.dropcap {float:left;display:block;font-size:1.6em;font-family:"times new roman", serif;font-weight:700;background:#f9f5df;margin:0;padding:0 .07em 0 .04em}

@media only screen and (max-width: 800px) {
#intro {float: none; width: 90%; margin: 10px auto;}
#rightDiv {float: none; width: 90%; clear: both; margin: 10px auto;}
div#packageWrap {float:left; width: 34%; margin: 0 0 0 2%; padding-top: 10px; tex-align: center;}
div#blogWrap {text-align: left;
word-wrap: break-word; margin: 0; float:left; width: 44%;}
div.social {float:left; width: 15%; margin: 0 0 0 4%; background: none;}
}

@media only screen and (max-width: 650px) {
.linkWrap{margin: 0 auto; padding: 0 10px; max-width: 195px;}
 div#packageWrap, div#blogWrap, #content div.social {text-align: center; float: none; width: 90%; margin: 10px auto;}
 div.social a {display: inline-block;}
 
}

@media only screen and (max-width: 500px) {
#content ul.reasons {margin:10px 5px 10px 5px;}	
 #content div.social {display: block; width: 100%; text-align: center;}
  #my-accordion {display: none;}
 h1.introduce {margin:6px;}
h2.first {margin:6px;}
p.presence{text-align: justify;margin:6px;}
}