body {color:#555;font-family:'Open Sans', sans-serif;font-size: 14px}
html, body {
  margin: 0;
  padding: 0;
  height: 100%; 
}
div#container {
  position: relative; 
  height: auto !important; 
  min-height: 100%; 
}
h1,h2,h3,h4{font-family: 'Raleway', sans-serif;margin-bottom:10px;color:#333}
h1{font-size: 32px;margin:2px 0 15px;font-weight:300}
h2{font-size: 22px;font-weight:300}
h3{font-size: 18px}
p{margin-top:0}
sup{vertical-align:6px;font-size: 11px;}
sub{vertical-align:0;font-size: 11px;}
a{color:#056fc1;text-decoration: none}
a:hover{text-decoration: underline}
a.splitURL{    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 90%;}
#logo{text-align:left;padding:5px 0 5px 10px;width:214px;height:45px;float:left}
@media screen and (min-width:1100px) {#logo{padding-left:0}}
header{width:99%;height:55px;box-shadow: 0 1px 2px 0 #dfdfdf;background-color:#fff;padding-left: 1%;}
.pageWidth{max-width: 1100px;clear: both; margin: auto; }
/*#dashboard .pageWidth{max-width:none} */
#content{padding:30px 1% 170px 3%;margin-top:5px}
#profile #content{padding:0 0 170px 0;margin:0;max-width: none}
#profileInfo{font-size:20px}  
#logoBig, #profile h1, #tagline{color: #fff;
    text-align: center; margin:0; position: absolute; left:50%;
}
#logoBig{z-index: 4000;width:80px;height:80px;border-radius: 40px; top: 200px; margin-left:-40px  }
#profile h1{z-index: 4001;min-width:600px; top: 286px; margin-left:-300px}
#tagline{z-index: 4002;width:600px; top: 325px;margin-left:-300px }
#profile #portfolio{max-width:1100px;padding: 0 0 0 3%;margin:auto}
        #contactInfo{width: 600px;max-width: 90%;text-align: center;margin: auto}
        #contactInfo div{width:200px;float: left}
        #contactInfo div#phone {
            width: auto;
            min-width: 200px; 
        }
        #contactInfo .myIcon {margin:0 6px}
        #contactInfo div#blurb{width:100%;margin:20px 0 20px}
        #profileInfo{height: 360px}
        #profSocial:hover a{ color: #aaa;}
        #profSocial a:hover{ color: #056fc1;}
#instructions{width:545px;float:left}
.spacedList li{margin:14px 0}
.paypalBtn:focus{outline:none;}
#payTop{float:left;width:505px;margin-bottom:25px}
#payBottom{clear:both;padding-top:35px;margin-left:-34px;}
#tinyHolder{min-height:500px;float:left;margin-bottom:20px}
#previewExpired{width:100%;max-width:505px;clear:both;padding-top:15px;margin: 20px 0 50px;}
.fsBtn{margin:10px 0 30px}
form{text-align:center}
.topnav {
overflow: hidden;
float: right;    padding-right:35px;
}
#navHolder{
height: 55px;
}
.topnav a {
  float: left;
  display: block;
  color: #777;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
height: 33px;
    margin: 0;
    padding: 18px 16px 0 17px
}
.topnav a:hover {
  color: black;
  border-bottom: 3px solid #ddd
}
.active {
  border-bottom: 3px solid #ddd
}
.topnav .burger {
  display: none;
}
.loading{margin:30px auto;font-size:16px;width:200px}
.loading div{float:left}
.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;    
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; 
  width: 0px; float: left
}

canvas.panolens-canvas,.panolens-canvas:hover,.psv-container,div.psv-hud{background:#000 url('/tiny-planet/my360loader.gif') no-repeat 50% 50%;cursor:grab !important;cursor:-moz-grab !important; cursor:-webkit-grab !important;}

.panolens-container.panolens-canvas:active,
.panolens-container:active,
#tinyHolder:active,
#firstScene:active,
.psv-container:active,
div.psv-hud:active{background:#000 url('/tiny-planet/my360loader.gif') no-repeat 50% 50%;cursor:grabbing !important;cursor:-moz-grabbing !important; cursor:-webkit-grabbing !important;}
div.psv-hud{z-index:auto}
#tinyBtns{width:380px;text-align:center;float:left;margin-top:180px}

@keyframes ellipsis {
  to {width: 1.25em; }
}
#messageBox{max-width:520px;border:1px solid #ccc;border-radius:6px;
padding:25px 40px 40px;margin:auto;text-align:center;line-height:48px;min-height:500px;background-color:#fff}
#messageBox h1{line-height:32px;margin:20px 0 20px 0; font-size:28px}
#messageBox p{line-height:24px}
::placeholder{color:#aaa}
input,button,textarea,select{height:30px;width:250px;padding:2px 15px;border-radius:3px;}
.tooltip{width:250px}
input[type='checkbox'],input[type='radio']{width:1.5em;}
select{padding-left:11px;width:254px;height:27px;padding-top: 11px}
textarea{height:80px;}
input,textarea,select{border:1px solid #ccc; display:block;margin:10px auto;box-sizing: content-box;}
button{border:0 none;transition: all 0.2s ease-in-out;}
.g-recaptcha{
	transform: scale(0.935);
    -webkit-transform: scale(0.935);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    margin: 10px auto;
    width: 282px;
}
figure{margin:20px 0}
figcaption{font-size: 11px}
#footnote{
    line-height: 14px;
    font-size: 12px;
    margin: 15px auto 0;
    font-style: italic;
    max-width: 380px;
}
#messageBox p#agreeTerms,p#denoteReqd{font-size: 12px; width: 282px;line-height: 20px;
    margin: 20px auto 0;
    padding: 0;}
p#denoteReqd{
    margin-bottom:-10px;
    text-align: left;color:#aaa;
}
#messageBox p#yourURL, #messageBox p#noCigar{font-size: 12px; width: 282px;line-height: 20px;
    margin: 0px auto 0;
    padding: 0;}	
#messageBox p#noCigar{color:red;margin-bottom:-10px;text-align:left;padding-left:25px;}
button{color:#fff;background-color:#ff6d02;width: 282px;
    height: 36px;
    font-size: 14px;
    font-weight: bold;cursor:pointer;margin-top:20px;}
#signUpBtn	{margin: 0}
button:hover{background-color:#F76500;}
#row5 button:hover{box-shadow:0px -2px 38px -5px rgba(247,101,0,0.5);}	
#banner button:hover{background-color:#ff6d02;box-shadow: 0px -2px 38px -5px rgba(255,255,255,0.9);}
.paging{clear: both;text-align:center;width: 1050px;margin-top:20px}
.paging a{background-color: #056fc1;
    border-radius: 3px;
    margin: 3px;
    color: white;
    text-decoration:none;
    border:1px solid #056fc1;
    padding: 3px 7px;
    vertical-align: -1px;
}
.paging a:hover{color: #056fc1;
    border:1px solid #056fc1;
    background-color: white;
    border-radius: 3px;
}
.paging a.nolink{background-color: #fff;
    border-radius: 3px;
    margin: 2px;
    padding: 3px 7px;
    vertical-align: -1px;
    color: #999;
    text-decoration:none;
    border:1px solid #999;
    cursor:default
}

ul.shareaholic-share-buttons li.shareaholic-share-button i.shareaholic-service-icon, ul li.shareaholic-share-button i.shareaholic-service-icon, ul.shareaholic-share-buttons li i.shareaholic-service-icon, ul li i.shareaholic-service-icon {
    font-size: 18px !important;
    height: 34px !important;
    width: 34px !important;
}
.shareaholic-share-buttons-heading-text {
    font-size: 22px !important;
}
.shareaholic-canvas {
    max-width: 650px !important;margin: auto !important
}
.shareaholic-canvas svg{
    height:50px !important;
}

@media screen and (min-width: 1020px) and (max-width: 1160px) {
    .paging{width: 952px;}
    footer ul:nth-child(2){border-left: 1px solid #888}
}
@media screen and (min-width: 1120px) {
    footer ul{border-left: 1px solid #888}
}
.paging a#prevLink, .paging a#nextLink{
    vertical-align: 0px;
    padding: 2px 7px 4px 7px;
}
#photoCopyright{font-size:12px;font-style:italic;clear:both;width:97%;max-width:1100px}
p#tags{text-align: right;margin-right: 32px;font-style: normal}
footer{background-color:#2F2F2F;
	height:134px;
	width:100%;
    position:absolute;bottom:0; 
	font-size: 11px;
	color: #ddd;
    padding-top:20px;
}
footer ul{float:left;max-width:450px;width:34%;list-style:none;padding:0;line-height:16px;padding-left:3%;margin-top:11px}
#socialLinks{width:25%;margin-top:20px;float:right;border-left:1px solid #888;
    text-align: center;
    line-height: 1px;}
#socialLinks p{
    line-height: 1px;}
#copyright{margin-top:15px;}
#socialLinks:hover a{color:#aaa}
#socialLinks a:hover{color:#fff;}
footer a{color:#ddd;}
footer a:hover{color:#fff;}
@font-face {
      font-family: 'fontello';
      src: url('/font/fontello.eot?27632368');
      src: url('/font/fontello.eot?27632368#iefix') format('embedded-opentype'),
           url('/font/fontello.woff?27632368') format('woff'),
           url('/font/fontello.ttf?27632368') format('truetype'),
           url('/font/fontello.svg?27632368#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
}
.myIcon {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: none;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
    line-height: 2em;
    font-size: 20px;
    transition: all 500ms;
}
@media screen and (max-width: 1018px) {#payBottom{float:left;width:460px;margin:auto} .paging{width: 460px;}}
@media screen and (max-width: 916px) {#tinyBtns{margin-top:0}}
@media screen and (max-width: 820px) {#tinyBtns{width:100%;height: 145px;}#tinyHolder{margin:auto;float:none}}
@media screen and (min-width: 600px) {
    #signup{ 
        box-shadow: inset 0 0 0 1px #ff7c1c;
        color: #ff5a00;    
        padding: 8px 18px 10px 20px;
        vertical-align: middle;
        margin-left: 15px;
        border-radius: 5px;
        height: 20px;
        margin: 10px 0 0 15px;
        font-weight: bold;    
        }
    #signup:hover{font-weight:bold;
    box-shadow: inset 0 0 0 1px #ff6d02;
        background: #ff6d02;
        color: #fff; border:none
        }  
    #content.tinyContent{height:620px}
    #photoCopyright{bottom: 166px;
        position: absolute;}
    footer li{margin-left: 30%}
    #home a.burger{padding-top:14px}
}
a.burger {display: none;}
@media screen and (max-width: 600px) {
	body{color:#020202}
    h1{color:#111;}
    #content p,#content li{font-size: 16px}
    .modalContent h1{font-size:26px;line-height:30px}
	#logo{text-align:center;margin:auto;width:90%}
	#logo img {text-align: center}
	#content{padding:3%;text-align: center;}
    #bannerHolder{min-height: none !important;margin:1px 0 0 0!important;max-width:100% !important;width:100% !important}
    #profile #banner{height:170px !important}    
    #profile h1,#profile #tagline{position: inherit;color: #000; width: 96%;text-align: center;margin: 0 2% 10px 2%;left:0}
    #profile h1{padding-top: 190px; min-width:auto}
    #tagline{margin: 0 2% 20px 2%}
    #logoBig{ top: 104px; margin-left:-40px;left:50%  }
    #profile #portfolio{max-width:1100px;padding: 0 0 0 0;}
    #profile #profileInfo{color:#000;height: auto}
    #contactInfo div{width:auto;float:none; margin-bottom: 20px; font-size: 16px}
    #contactInfo div#blurb {   float: left; margin:10px 0 20px}
    #phone .icon-phone, #phone a {font-size:16px !important}
    #contactInfo div#phone {line-height: 40px;}
    #contactInfo .myIcon {font-size: 24px;}
    #updateText {  top: 231px !important;}
    #about #content{padding:3% 5%}
    #content.tinyContent{padding:3% 0}
	#instructions{width:100%;font-size: 16px}
    #tinyHolder{min-height:100vw}
	#payTop,#payBottom{clear:both;float:none;width:100%;padding-bottom:10px}
	#messageBox{padding:12px 10px 40px;min-height:60vh}
    textarea{resize:none}
    #footnote{margin-bottom:20px}
    p#tags{text-align: center;margin-right:0}
    .paging{width: 100%; word-wrap: break-word; line-height: 40px}
	footer{position:relative;clear:both;height:192px}
    footer ul{line-height:24px;width:20vw;padding:0 0 0 20px}
    footer #you{
      width: 25vw;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #socialLinks{margin-top:21px;width:45vw;min-width:132px}
    #copyright{margin-top:58px;}
}

@media screen and (max-width: 720px) {
	.topnav a {display: none;}
	.topnav.responsive {background-color:#fff;background:rgb(256,256,256,0.9);display:block;width:100%;padding:12px 0;border: 2px solid #eee;	margin-bottom: 3%;
    position: absolute;
    top: 55px;
    right:0px; z-index:5000;
	}
	a.burger{
 	float: right;
	display: block;   
	position: absolute;
	right: 0;
	top: 0;
    padding: 16px 15px;
	text-decoration:none;
    color:#000;
    font-size:20px;
    font-weight:bold
    }
    .burger.expanded{color:#056fc1;     padding: 16px 10px;}
	.topnav.responsive a {
	float: none;
	display: block;
	color:#056fc1;/*blue*/
	height: 25px;
	padding: 5px 46px 5px 17px;
	font-size:20px;
	text-align: right;
	}
	.topnav.responsive a:hover,a.burger:hover,.topnav a.burger:hover{
	border:none
	}  
	.topnav.responsive a.active {
	border:none;color:#ff6d02 /*orange*/
	}
}