/* CSS */
.polaroid {
		width: 65%;
		background: #fff;
		box-shadow: 1px 1px 20px #89898966;
		padding: 0.6em;
		margin: 0 auto 2em;
	}.polaroid .polaroid-picture {
		width: 100%;
		background: #000;
		margin-bottom: 1em;
		content: "";
	}.polaroid .polaroid-picture img {
		width: 100%;
		height: auto;
	}.custom-file{
		margin-bottom: 1em;
	}
	
	.userlocation {
		display: none;
	}
	
	.polariod-caption {
		
		text-align: center;
		
	}
	
	.polaroid-location::after{
		content: ' - ';
		font-family: 'Annie Use Your Telescope', cursive;
	}
	
	.main-notebook .title{
		font-size: 2em;
		text-align: center;
		margin: 1em 0;
		padding-bottom: 1em;
		/*
		border-bottom: 2px solid #000;
		*/
		font-weight: bold;
	}
	
	.main-notebook .user{
		max-width: 100%;
		margin: 0 auto;
	}
	
	.signature{
		font-size: 3em;
		margin-top: 1em;
		font-family:'Italianno', cursive;
	}
	
	.section-title {
		margin-bottom: 2em;
	}
	
	.ct-sig {
		max-width: 150px;
		margin-top: 2em;
	}
	
.polaroid-images a
{
    background: white;
    display: inline;
    float: left;
    margin: 0 15px 30px;
    padding: 10px 10px 25px;
    text-align: center;
    text-decoration: none;
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
    box-shadow: 0 4px 6px rgba(0,0,0,.3);
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    transition: all .15s linear;
    z-index:0;
        position:relative;
}.polaroid-images a:after {
    color: #333;
    font-size: 12px;
    content: attr(title);
	font-family: 'Annie Use Your Telescope', cursive;
    position: relative;
    top:15px;
}.polaroid-images img { 
    display: block; 
    width: inherit; 
}.polaroid-images a:nth-child(2n)
{
    -webkit-transform: rotate(4deg);  
    -moz-transform: rotate(4deg); 
    transform: rotate(4deg); 
}
.polaroid-images a:nth-child(3n) { 
    -webkit-transform: rotate(-24deg);  
    -moz-transform: rotate(-24deg); 
    transform: rotate(-24deg); 
}
.polaroid-images a:nth-child(4n)
{
    -webkit-transform: rotate(14deg);  
    -moz-transform: rotate(14deg); 
    transform: rotate(14deg); 
}
.polaroid-images a:nth-child(5n)
{
    -webkit-transform: rotate(-18deg);  
    -moz-transform: rotate(-18deg); 
    transform: rotate(-18deg); 
}.polaroid-images a:hover{
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2);
        transform: scale(1.2);
    z-index:10;
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
        box-shadow: 0 10px 20px rgba(0,0,0,.7);
}
	
	.main-notebook {
		background: #f2eee2;
		background: url('https://apps.tiso.com/bothystories/images/page-bg.jpg');
		width: 100%;
		min-height: 100vh;
		color: #000;
		font-family: 'Annie Use Your Telescope', cursive;
		text-transform: none;
		text-align: justify;
		font-size: 1.2em;
	}.main-notebook .col{
		padding: 1em;
	}.main-about {
		width: 100%;
		padding: 5em 0;
		background: #1B1B1B;
		text-transform: none;
	}.main-about .description{
		text-align: left;
	}.main-about .info{
		text-align: justify;
	}
	
	#user-story.main-notebook{
		background: url('https://apps.tiso.com/bothystories/images/story-bg.jpg') no-repeat;
		background-size: cover;
	}#user-story.main-notebook .container{
		margin: 10% auto;
	}#user-story.main-notebook .title{
		text-align: left;
		margin: 0 0;
		padding-bottom: 0;
	}.line{
		height: 2px;
		background: #000;
		content: " ";
		width: 100%;
		margin-bottom: 2em;
	}
	
	.datestamp {
		float: right;
		text-align: right;
		margin-left: 1.5em;
	}
	
	.bothyimage{
		margin-bottom: 1em;
	}
	
	#user-submission{
		/*
		background: #fff;
		border-radius: 0;
		border-radius: 0 1.6em 1.6em 0;
		padding: 2em;
		box-shadow: 1px 1px 20px #000;
		background: url('lined-page.jpg');
		*/
	}
	
	.main-notebook.single .user-post-title{
		font-size: 1.6em;
		font-size: 1.4em;
		font-weight: bold;
		border-bottom: 2px solid #000;
		padding-bottom: 0.5em;		
	}
	
	.main-notebook .col{
		padding: 1em;
	}
	
	.chris-story {
		padding: 2em;
	}.chris-story {
		
	}
	
	.post-img-wrap {
		float: left;
		padding-right: 1em;
		margin: 0 auto;
	}.post-img-wrap.right {
		float: right;
	}.post-img-wrap.right .img-max-200, .post-img-wrap.right .img-max-300, .post-img-wrap.right .img-max-400 {
		margin-right: 0;
		margin-left: 2em;
	}.post-img-wrap.right {
		float: right;
	}.post-img-wrap.right {
		float: right;
	}
	
	
	
	.post-img-wrap.single {
		float: none;
		padding-right: 1em;
		margin: 0 auto;
	}.post-img-wrap.single .post-img{
		width: 100%;
	}
	
	.paper {
		padding: 37px 55px 27px;
		position: relative;
		border: 1px solid #B5B5B5;
		background: #f7f5e9;
		background: -webkit-linear-gradient(top, #DFE8EC 0%, #f7f5e9 8%) 0 57px;
		background: -moz-linear-gradient(top, #DFE8EC 0%, #f7f5e9 8%) 0 57px;
		background: linear-gradient(top, #DFE8EC 0%, #f7f5e9 8%) 0 57px;
		-webkit-background-size: 100% 30px;
		-moz-background-size: 100% 30px;
		-ms-background-size: 100% 30px;
		background-size: 100% 30px;
		border-radius: 0 1.6em 1.6em 0;
		padding: 2em;
		box-shadow: 1px 1px 20px #000;		
	}
	.paper::before {content:""; z-index:-1; margin:0 1px; width:100%; height:10px; position:absolute; bottom:-3px; left:0; background:#f7f5e9; border:1px solid #B5B5B5;}
	.paper::after {content:''; position:absolute; width:0px; top:0; left:40px; bottom:0; border-left:1px solid #F8D3D3;}	
	

    .tape{
    position: relative; /*lets us later position the tape relative to the box*/
    width:100%;
    margin:20px; /*you need enough margin to accomodate the tape*/
    background:#000;
	margin: 0 auto;
    padding:0px;
    /*add a small drop shadow to the box*/
    -webkit-box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
    }
	

    .tape:before, .tape:after{
    content: ''; /*create a blank psuedo element, if you wanted something written on the tape, place it between the ' '*/
    display: block;
    position: absolute; /*positions the tape relative to the box created above rather than the whole page*/
    background-color: rgba(220,212,176,0.85); /*using rgba for the colour lets us make the tape a little transparent*/
    height: 25px; /*height of the tape*/
    }	

    .tape:before { /*using :before places the tape on the left of the box*/
    left:-26px; /*position from the left edge of the #tape div - a negative value moves the tape 5px to the left of the box's edge*/
    bottom: 4px; /*position from the top edge of the #tape div - a negative value moves the tape 15px above of the box's edge*/
    width: 85px; /*width of the tape*/
    /*rotate the tape 12 degrees anti-clockwise*/
	-webkit-transform: rotate(-145deg);
	-moz-transform: rotate(-145deg);
	-o-transform: rotate(-145deg);
	-ms-transform: rotate(-145deg);
    }
	
	.tape:after { /*using :after places the tape on the right of the box*/
	right:-20px; /*position from the left edge of the #tape div*/
	top: 0px; /*position from the top edge of the #tape div - a negative value moves the tape 10px above of the box's edge*/
	width: 85px; /*width of the tape*/
	/*rotate the tape 20 degrees clockwise*/
	-webkit-transform: rotate(-145deg);
	-moz-transform: rotate(-145deg);
	-o-transform: rotate(-145deg);
	-ms-transform: rotate(-145deg);
	}	
	
	
	
	.img-ct {
		/*float: left;*/
		max-height: 300px;
	}
	
	.main-area {
		background: url('https://apps.tiso.com/bothystories/images/bothy-bg.jpg') no-repeat;
		background-size: cover;
		width: 100%;
		padding: 10% auto;
		min-height: 100vh;
	}
	
	
	.main-blogs	{
		background: url('https://apps.tiso.com/bothystories/images/iron-bg.jpg') no-repeat;
		background-size: cover;
		width: 100%;
		padding: 10% auto;
		min-height: 50vh;
		box-shadow: 1px 1px 40px #000 inset;
	}
	
	
	.main-stories {
		background: url('https://apps.tiso.com/bothystories/images/wooden-floor.jpg');
		/*
		background-size: cover;
		*/
		width: 100%;
		padding: 6% 0;
		box-shadow: 1px 1px 40px #000 inset;
	}	
	
	.logo {
		clear: both;
		width: 100%;
		margin-top: 10%;
	}.logo img{
		margin: 0 auto;
	}
	
	.main-stories .logo {
		clear: both;
		width: 100%;
		margin-top: 0;
	}.main-stories .logo img{
		margin-bottom: 8%;
	}
	
	.stone-right {
		position: fixed;
		right: 0;
		bottom: 0;
	}.stone-left {
		position: fixed;
		left: 0;
		bottom: 0;
	}
	
	.create-story-cta{
		margin-top: 1em;
	}
	
	
	.thankyou h2 {
		color: green;
	}
	
	#bothybook .modal-content .input-name {
		margin-top: 1em;
	}
	
	#bothybook .modal-content .bothyimage{
		
		margin-bottom: 1em;
		
	}
	
	#bothybook .modal-content {
		background: #fbfae8;
		border-radius: 0 1em 1em 0;
		color: #000;
		font-family: 'Reenie Beanie', cursive;
		font-family: 'Annie Use Your Telescope', cursive;

		
	}#bothybook .modal-content textarea:focus{
		color: #000;
		font-size: 1em;
	}
	
	#user-submission input, #user-submission textarea, #user-submission .custom-file-label {
		background: rgba(255,255,255,0.25);
		color: #000;
	}	
	
	#bothybook .modal-header {
		border-bottom: none;
	}
	
	@media screen and (max-width: 600px) {
		.stone-right {
			display: none;
		}.stone-left {
			display: none;
		}
	}

	button.disable {
		background-color: #fef206;
		border-color: #726c00;
	}button.disable:active {
		background-color: #fef206;
		border-color: #726c00;
	}
	
	
	body {
  background: #222;
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-size: 18px;
}

.img-max-200{
	max-width: 200px;
	margin-bottom: 1em;
	margin-right: 1em;
}.img-max-300{
	max-width: 300px;
	margin-bottom: 1em;
	margin-right: 1em;	
}.img-max-400{
	max-width: 400px;
	margin-bottom: 1em;
	margin-right: 1em;	
}

.main-content {
  /*margin: 5em auto;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
}


#message {
	margin-top: 1em;
	clear: both;
	color: red;
}



h1 {
  width: 100%;
  margin: 0 auto 1.5em;
  font-size: 30px;
}
h1 small {
  text-transform: none;
  display: block;
  margin: 20px 0;
  font: 300 20px 'QuickSand', sans-serif;
  color: #999;
}

.moleskine-wrapper {
  max-width: calc(100% / 4);
  min-width: 10em;
}

.moleskine-notebook {
  height: 250px;
  width: 175px;
  position: relative;
  transition: .4s ease-in-out;
  border-radius: 5px 15px 15px 5px;
  transform-origin: left center 0px;
  display: inline-block;
  margin: 30px;
  perspective: 800px;
  cursor: pointer;
}
.moleskine-notebook:hover {
  transform: rotateZ(-10deg);
}
.moleskine-notebook:hover .notebook-cover {
  transform: rotateY(-50deg);
  z-index: 999;
  box-shadow: 20px 10px 50px rgba(0, 0, 0, 0.2);
}

.notebook-cover {
  background: #cc4b48;
  height: 250px;
  width: 175px;
  position: absolute;
  border-radius: 5px 15px 15px 5px;
  z-index: 10;
  transition: .5s linear;
  transform-style: preserve-3d;
  transform-origin: left center 0px;
}
.notebook-cover:before {
  content: "";
  position: absolute;
  width: 10px;
  height: calc(100% + 2px);
  top: -1px;
  z-index: 100;
  border-radius: 2px;
  right: 25px;
  transition: 2s ease;
  background: linear-gradient(to right, #9c2e2b 0%, #cc4b48 12%, #9c2e2b 25%, #cc4b48 37%, #9c2e2b 50%, #cc4b48 62%, #9c2e2b 75%, #cc4b48 87%, #9c2e2b 100%);
}

.notebook-cover.blue {
  background: #2e95aa;
}
.notebook-cover.blue:before {
  background: linear-gradient(to right, #1e606e 0%, #2e95aa 12%, #1e606e 25%, #2e95aa 37%, #1e606e 50%, #2e95aa 62%, #1e606e 75%, #2e95aa 87%, #1e606e 100%);
}
.notebook-cover.green {
  background: #abc3b5;
}
.notebook-cover.green:before {
  background: linear-gradient(to right, #7ea38e 0%, #abc3b5 12%, #7ea38e 25%, #abc3b5 37%, #7ea38e 50%, #abc3b5 62%, #7ea38e 75%, #abc3b5 87%, #7ea38e 100%);
}
.notebook-cover.yellow {
  background: #fed754;
}
.notebook-cover.yellow:before {
  background: linear-gradient(to right, #ebb501 0%, #fed754 12%, #ebb501 25%, #fed754 37%, #ebb501 50%, #fed754 62%, #ebb501 75%, #fed754 87%, #ebb501 100%);
}

.notebook-skin {
  height: 50px;
  background: #e8e8e0;
  margin-top: 80px;
  padding: 15px;
  font-size: 12px;
  position: relative;
  z-index: 10;
  color: #222;
  text-align: left;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.notebook-skin:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 15px;
  left: 0;
  bottom: 0;
  background: #cddc39;
}

.notebook-page {
  height: 100%;
  width: 175px;
  position: absolute;
  background-color: #fbfae8;
  z-index: 0;
  border-radius: 5px 16px 16px 5px;
  overflow: hidden;
}
.notebook-page.ruled {
  background: linear-gradient(to bottom, #fbfae8 9px, #e4e4e4 1px);
  background-size: 100% 10px;
}
.notebook-page.squared {
  background-image: linear-gradient(#e4e4e4 1px, transparent 1px), linear-gradient(90deg, #e4e4e4 1px, transparent 1px);
  background-size: 10px 10px, 10px 10px, 2px 2px, 2px 2px;
}
.notebook-page.dotted {
  background: linear-gradient(90deg, #fbfae8 10px, transparent 1%) center, linear-gradient(#fbfae8 10px, transparent 1%) center, #999;
  background-size: 11px 11px;
}

footer {
  text-align: center;
  margin: 8em auto;
  width: 100%;
}
footer a {
  text-decoration: none;
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: transparent;
  border: 1px dashed #fff;
  color: #fff;
  margin: 5px;
}
footer a:hover {
  background: rgba(255, 255, 255, 0.1);
}
footer a .icons {
  margin-top: 12px;
  display: inline-block;
  font-size: 20px;
}

.loadingdots:after {
  content: '.';
  animation: dotts 1s steps(5, end) infinite;
 }

@keyframes dotts {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: #000;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 #000,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 #000,
      .5em 0 0 #000;}
}


.btn-lined{
	align-self: center;
	background: transparent;
	padding: 1rem 1rem;
	margin: 1rem 1rem;
	transition: all .5s ease;
	color: #41403E;
	font-size: 2rem;
	letter-spacing: 1px;
	outline: none;
	box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
	 border: solid 2px #41403E;
}


.squiggle1 {
	align-self: center;
	background: transparent;
	padding: 1rem 1rem;
	margin: 1rem 1rem;
	transition: all .5s ease;
	letter-spacing: 1px;
	outline: none;
	box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
	border-radius: 10px 15px 125px 15px/15px 225px 15px 155px;
	border: solid 2px #41403E;	
}

.chris-story .post-img-wrap.mobile-img{
		display: none;
	}


.blogs {
	margin: 3% auto;
	padding: 5% 0;
	width: 100%;
	border-top: 2px dashed #ded9c1;
}

	
.blogs .blog{
	color: #000;
}.blogs .blog a{
	text-decoration: none;
}.blogs .blog .blog-wrap{
	color: #000;
	background: transparent;
	padding:0.5em;
	margin: 1em;
}.blogs .blog .blog-wrap img{
	width: 100%;
	height: auto;	
}.blogs .blog .blog-wrap:hover{
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg);
     transform: rotate(0deg);
    -webkit-transform: scale(1.03); 
    -moz-transform: scale(1.03);
    transform: scale(1.03);
}.blogs .blog .blog-wrap h3{
	font-size: 1.2em;
	margin: 1em 0;
	font-family: 'Annie Use Your Telescope', cursive;	
	text-transform: none;
	font-weight: bold;
	text-align: center;
}.blogs .blog .blog-wrap p{
	font-size: 0.8em;
	text-transform: none;
	text-align: justify;
	font-family: 'Annie Use Your Telescope', cursive;
	padding: 0 1em;
}		


@media only screen and (max-width: 576px) {  

	.main-notebook .title {
		font-size: 1em;
	}
	
	.main-area{
		min-height: 65vh;
	}
	
	.main-about{
		padding: 5em 1em;
	}.main-about .description{
		margin-bottom: 2em;
		border-bottom: 1px dashed #4a4a4a;
		padding-bottom: 1em;
	}
	
	.logo{
		padding: 8%;
	}
	
	.logo {
		padding: 8%;
	}.logo img {
		max-height: 200px;
	}	
	
	.chris-story .description{
		text-align: center;
	}
	
	.chris-story .description h2{
		font-weight: bold;
	}

	.chris-story .post-img-wrap{
		float: none;
		width: 100%;
	}.chris-story .post-img-wrap .tape{
		margin: 1em auto;
	}.chris-story .post-img-wrap{
		display: none;
	}.chris-story .post-img-wrap.mobile-img{
		display: block;
		margin-bottom: 2em;
	}	

}

@media only screen and (max-width: 768px) {
	
		.stone-right {
			display: none;
		}.stone-left {
			display: none;
		}
	
}

@media only screen and (max-width: 992px) {
	
		.stone-right {
			display: none;
		}.stone-left {
			display: none;
		}
	
}