/* Reset */
*{margin:0; padding:0;}
img, img a{outline:none; border:none;}
body{background-color:#fff; color:#575757; font:16px  'Open Sans Condensed', sans-serif; margin:0; padding:0;}
a, a:visited{outline:none; color:#dcab99; text-decoration:none;}
a:hover{color: #917b77;}

/* Modern Clear Floating Fix */

.clear:before, .clear:after{content:""; display:table;}
.clear:after{clear:both;}
.clear{zoom:1; /* For IE 6/7 (trigger hasLayout) */}

/* HTML5 Fix */

header, section, footer, aside, nav, article{display:block;}

/* Base Structure */

.width{width:1200px; margin:0 auto; clear:both;}

/* General Type */

h1, h2, h3, h4, h5, h6{color:#2f2f2f; font-family: 'Open Sans Condensed', sans-serif;}
.bold{font-weight:bold;}
.blue{color:#dcab99;}

/* Header */

#topwrp{width:100%; background:url("../images/headerbg.jpg") repeat-x 0 0; height:117px;}
#maintop{padding:20px 70px 5px 70px; color:#000;  background: #fff; height: 50px; box-shadow: 0px 3px 5px 3px rgba(0,0,0,0.1);}
.name{float:left; margin:0 10px 0 0; -webkit-transition:-webkit-transform 0.4s ease-out; -moz-transition:-moz-transform 0.4s ease-out; transition:transform 0.4s ease-out;}
.name:hover{cursor:pointer; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg);}
#blogname{text-align: center; margin:0px 0 0 0;  color: #000; height: 100px; padding: 70px 0px 70px;}
#blogname h1{font-size:5em; font-weight:normal; text-transform: capitalize; color: #000; font-family:  'Dancing Script', cursive; font-weight: 700; }
#blogname h2{font:1.462em  'Open Sans Condensed', sans-serif;;  font-weight:normal; margin:0px 0 0 0; color: #dcab99;}
#maintop nav{float:left; font:1.415em  'Open Sans Condensed', sans-serif; margin:8px 0 0 0; }
#maintop nav li{list-style-type:none; display:inline; margin:0 0 0 35px;}
#maintop a, #mainheader:visited{color:#7c7c7c;}
#maintop a:hover, #maintop a.active{text-decoration:none; color:#dcab99;}

#banner { height: 400px; background: url(../images/banner.jpg) center; background-size: cover; width:100%; margin:0 auto; clear:both;}
ul.social {float: right;}
ul.social li {display: inline-block; margin: 0px 5px;}

/* Intro */

#intro{background: #fff; padding: 25px 0px 20px 0px; text-align: center;}
#intro h2{font-size:4em;  margin:0 0 15px 0; font-family:  'Dancing Script', cursive; }
#intro p{font-size:1.154em; line-height:150%;}
#ilft{ width:1140px; margin:0 0px 0px 0px; padding: 20px 0px;}
#iquote{font-style:italic; font-size:1.65em; width:1140px; background:url("../images/leftquotemark.png") no-repeat 0 0; padding:28px 0px 20px 0px; margin:100px 0 105px 0;}
#main .quotename{float:right; height:27px; background:url("../images/rightquotemark.png") no-repeat right top; margin:10px 0 0 0; padding:0 50px 0 0; font:0.9em  'Open Sans Condensed', sans-serif; color:#dcab99;}
a.more, a.more:visited{padding:10px 15px; font:0.9em  'Open Sans Condensed', sans-serif; font-weight:bold; color:#000;  background: #fff; margin:13px 0 0 0; display: inline-block; text-transform: uppercase; margin-top: 20px;  outline:  3px double #000;}
a.more:hover{background-color:#000; color: #fff;  outline:  3px double #000; background-image:none; text-decoration:none;}

/* Main Content */

#main{border-top: 3px double #b0b0b0; padding:45px 0px 25px; overflow:hidden; background: #fff; margin-top: 30px;}
#aboutlft{float:right; width:740px; }
#aboutlft h3{font-size:1.5em; font-weight:bold; margin:0 0 15px 0; text-align: center;}
#aboutlft h4{font-size:1.3em; font-weight:bold; margin:0 0 15px 0; text-align: center;}
#aboutlft p{line-height:135%; margin:0 0 15px 0;}
#article{float:left; width:350px; background: #ebcdc2; padding: 50px 30px; margin-right: 30px;}
#article article{clear:both; margin:0 0 20px 0; overflow:hidden;}
#article figure{padding:5px; border:1px #dbdbdb solid; float:left; width:119px; height:119px; margin:0 15px 0 0;}
#article p{line-height:135%;}
#article h5{font-size:1.3em; margin:0 0 6px 0; color:#fff;}
#side h1, #side h2, #side h3, #side h4 {color: #fff; }
#side {padding-left: 20px;}
#side ul {margin: 20px 0px 20px 0px; list-style: none;}
#side ul li {margin: 5px 0px; padding: 5px 0px; }
#side ul li a {color: rgba(255,255,255,1);}
#side ul li a:hover {text-decoration: underline;}
a.readmore, a.readmore:visited{padding:4px; font:0.9em  'Open Sans Condensed', sans-serif;; text-transform: uppercase; padding: 10px; color:#000; background: #fff;  margin:10px 0 0 0; float:left;}
a.readmore:hover{background-color:#2f2f2f; color: #fff; background-image:none;  text-decoration:none;}

.post {padding-bottom: 20px; margin-bottom: 20px; border-bottom: 3px double #b0b0b0;}
/* Footer */

#bottom{width:100%; margin:0px 0 0 0;  background:#232323;  padding:50px 20px; outline:  4px double #000;}
#mainbottom{text-shadow:0 0 1px #000; }
#mainbottom nav{float:left; font-size:1.1em;}
#mainbottom nav ul{margin:0; padding:0; list-style:none;}
#mainbottom li{list-style-type:none; float:left; margin:0 35px 0 0;}
#mainbottom li:last-child{margin-right:0;}
#mainbottom a, #mainbottom a:visited{color:#cecece;}
#mainbottom a:hover {color: #fff}
.credentials{float:right; color:#b8b8b8;}

/* MEDIA QUERIES */

/* Under 960px */
@media only screen and (max-width: 980px) and (min-width: 821px) {
.width{width:800px;}
#maintop nav{font-size:1.4em;}
#maintop nav li{margin:0 0 0 50px;}
#ilft{width:470px;}
#iquote{width:270px;}
#iquote h2{font-size:2.85em;}
#aboutlft{width:450px;}
#article{width:324px;}
#article article{font-size:0.95em;}
#mainbottom{font-size:0.9em;}
#mainbottom li{margin:0 25px 0 0;}
#mainbottom li:last-child{margin-right:0;}
}

/* Under 800px */
@media only screen and (max-width: 820px) and (min-width: 621px) {
.width{width:600px;}
#maintop{padding:40px 0 0 0;}
#maintop nav{font-size:1.1em; margin:12px 0 0 0;}
#maintop nav li{margin:0 0 0 25px;}
.name{width:40px; height:40px;}
#blogname h1{font-size:2.3em;}
#blogname h2{font-size:1.2em;}
#ilft{width:600px;}
#iquote{display:none;}
#aboutlft{width:400px;}
#article{width:170px;}
#article figure{display:none;}
#mainbottom{font-size:0.9em;}
#mainbottom nav, .credentials{display:block; float:none; width:100%; margin-bottom:15px;}
#mainbottom li{margin:0 15px 0 0;}
#mainbottom li:last-child{margin-right:0;}
.credentials{color:#b8b8b8; margin-bottom:0;}
}

/* Under 600px */
@media only screen and (max-width: 620px) and (min-width: 501px) {
.width{width:480px;}
#maintop{padding:25px 0 0 0;}
#maintop nav{float:left; font-size:1.1em; margin:18px 0 0 0;}
#maintop nav li{margin:0 30px 0 0;}
.name{width:40px; height:40px;}
#blogname h1{font-size:2.3em;}
#blogname h2{font-size:1.2em;}
#ilft{width:480px;}
#intro h2{font-size:2.7em;}
#iquote{display:none;}
#aboutlft{width:310px; font-size:0.9em;}
#article{width:150px;}
#article article{font-size:0.9em;}
#article figure{display:none;}
#mainbottom{font-size:0.9em;}
#mainbottom nav, .copyright{display:block; float:none; width:100%; margin-bottom:15px;}
#mainbottom li{margin:0 15px 0 0;}
#mainbottom li:last-child{margin-right:0;}
.credentials{color:#b8b8b8; margin-bottom:0;}
}

/* Under 480px */
@media only screen and (max-width: 500px) and (min-width: 341px) {
.width{width:320px;}
#maintop{padding:25px 0 0 0;}
#maintop nav{float:left; font-size:1.1em; margin:18px 0 0 0;}
#maintop nav li{margin:0 30px 0 0;}
.name{width:40px; height:40px;}
#blogname h1{font-size:2.3em;}
#blogname h2{font-size:1.2em;}
#ilft{width:320px; font-size:0.8em;}
#introh2{font-size:2.3em;}
#iquote{display:none;}
#aboutlft{width:320px; font-size:0.9em;}
#article{width:320px; float:left; border-top:1px #dbdbdb solid; padding:20px 0 0 0; margin:10px 0 0 0;}
#article article{font-size:0.9em;}
#article figure{display:none;}
#mainbottom{font-size:0.8em;}
#mainbottom nav, .credentials{display:block; float:none; width:100%; margin-bottom:15px;}
#mainbottom li{margin:0 6px 0 0;}
#mainbottom li:last-child{margin-right:0;}
.credentials{color:#b8b8b8; margin-bottom:0;}
}

/* Under 320px */
@media only screen and (max-width: 340px) and (min-width: 5px)  {
.width{width:300px;}
#maintop{padding:27px 0 0 0;}
#maintop nav{float:left; font-size:0.9em; margin:15px 0 0 0;}
#maintop nav li{margin:0 30px 0 0;}
.name{width:40px; height:40px;}
#blogname h1{font-size:2.3em;}
#blogname h2{font-size:1.2em;}
#ilft{width:300px; font-size:0.8em;}
#intro h2{font-size:2.3em;}
#iquote{display:none;}
#aboutleft{width:300px; font-size:0.9em;}
#article{width:300px; float:left; border-top:1px #dbdbdb solid; padding:20px 0 0 0; margin:10px 0 0 0;}
#article article{font-size:0.9em;}
#article figure{display:none;}
#mainbottom{font-size:0.7em;}
#mainbottom nav, .credentials{display:block; float:none; width:100%; margin-bottom:15px;}
#mainbottom li{margin:0 6px 0 0;}
#mainbottom li:last-child{margin-right:0;}
.credentials{color:#b8b8b8; margin-bottom:0;}
}



.popup { width:auto; display:none;  position:absolute; margin:0px 0px 0px 35px; padding-top: 31px;}
.popup ul { margin:0!important; padding: 10px!important; float: none!important; background:#fff; outline: 3px double #595959;}
.popup ul li { margin: 5px 0px!important; padding: 0px!important; float: none!important; display:block!important;}
.popup ul li a {color: #7c7c7c!important; text-shadow: none!important; font-size: 14px!important; text-transform: uppercase; }
.popup ul li a:hover {color: #dcab99!important; }


.popup2 { width:auto; display:none;  position:absolute; margin:0px 0px 0px 135px; padding-top: 31px;}
.popup2 ul { margin:0!important; padding: 10px!important; float: none!important; background:#fff; outline: 3px double #595959;}
.popup2 ul li { margin: 5px 0px!important; padding: 0px!important; float: none!important; display:block!important;}
.popup2 ul li a {color: #7c7c7c!important; text-shadow: none!important; font-size: 14px!important; text-transform: uppercase; }
.popup2 ul li a:hover {color: #dcab99!important; }

.popup3 { width:auto; display:none;  position:absolute; margin:0px 0px 0px 155px; padding-top: 31px;}
.popup3 ul { margin:0!important; padding: 10px!important; float: none!important; background:#fff; outline: 3px double #595959;}
.popup3 ul li { margin: 5px 0px!important; padding: 0px!important; float: none!important; display:block!important;}
.popup3 ul li a {color: #7c7c7c!important; text-shadow: none!important; font-size: 14px!important; text-transform: uppercase; }
.popup3 ul li a:hover {color: #dcab99!important; }