/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);*/

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400,700,300);

html,
body {
	background-color: black;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
}

:focus {
	outline: none;
}

#imgLogo {
	/*-this is what i've tried to move the rp logo with but nothing works*/
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-items: center;
	align-items: center;
	z-index: 99;
	/*transform: translateZ(5px) scale(1)!important;*/
	margin-top: 100px;
	margin-right: auto;
	/*-webkit-margin-bottom: 300px;*/
	margin-bottom: -150px;
	margin-left: auto;
	/*-webkit-padding: 400px auto 10px;*/
	/*padding: 10px auto;*/
	width: 35%;
}

.container {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	height: 100%;
	-webkit-justify-content: space-around;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	position: relative;
}

.container section {
	width: 100%;
	height: 100vh;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	text-align: center;
	position: relative;
	overflow: hidden;
	background-color: #000;
}

.container section #images {
	background-image: url(../images/rP_Logo_white.png);
}

.container section:nth-child(2) .image {
	background-image: url(../images/clockBg-4Web.jpg);
}

.container section:nth-child(3) .image {
	background-image: url(../images/cloudsBandW.jpg);
}

.container section:nth-child(4) .image {
	background-image: url(../images/waterfallBandW.jpg);
}

.container section:nth-child(5) .image {
	background-image: url(../images/LeafBandW_web.jpg);
}

.container section:nth-child(6) .image {
	background-image: url(../images/newSkyForParallaxWP_ClientBandW.jpg);
}

.container section:nth-child(7) .image {
	background-image: url(../images/watch.jpg);
}

.container section .image {
	/*this contains the opacity overlay*/
	background-attachment: fixed;
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 3;
	opacity: 0.6;/*background-image:*/
}

.container section .stuff {
	/*this contains the text*/
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	height: 100%;
	width: 100%;
	max-width: 70%;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
	z-index: 5;
	color: #f599cc;
	margin: 0 auto;
	font-size: 26px;
	position: relative;
}

.container section.stuff.mytime {
	margin-top: -100px;
}

.stuff h2 {
	/*font-family: 'Abril Fatface', normal;*/
	/*font-family: 'Ubuntu', sans-serif;*/
	/*font-family: 'Marcellus SC', serif*/
	font-weight: bold;
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
}

.stuff .closing h2 {
	font-style: oblique;
	font-size: 36px;
	justify-content: center;
}

.container section .closing {
	margin-top: -55px;
}

.container section .stuff h2 {
	margin: 0px;
}

.container section .stuff:before,
.container section .stuff.myTime:after,
.container .buttonClass:before {
	/*this is the rule lines*/
	width: 100%;
	height: 3px;
	display: block;
	background-color: #95005e;
	content: "";
	margin: 30px 0;
}

.buttonClass {
	width: 100%;
}

button {
	margin-top: 10px;
}

button.browsesite {
	background-color: #ca6da7;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ca6da7), color-stop(50%, #c45a9c), color-stop(50%, #bd4891), color-stop(100%, #aa4182));
	background-image: -webkit-linear-gradient(top, #ca6da7 0%, #c45a9c 50%, #bd4891 50%, #aa4182 100%);
	background-image: -moz-linear-gradient(top, #ca6da7 0%, #c45a9c 50%, #bd4891 50%, #aa4182 100%);
	background-image: -ms-linear-gradient(top, #ca6da7 0%, #c45a9c 50%, #bd4891 50%, #aa4182 100%);
	background-image: -o-linear-gradient(top, #ca6da7 0%, #c45a9c 50%, #bd4891 50%, #aa4182 100%);
	background-image: linear-gradient(top, #ca6da7 0%, #c45a9c 50%, #bd4891 50%, #aa4182 100%);
	border: 1px solid #5e2448;
	border-bottom: 1px solid #260E1D;
	border-radius: 5px;
	box-shadow: inset 0 1px 0 0 #F8EDF4;
	color: #fff;
	font-family: 'Roboto Condensed', sans-serif;
	padding: 7px 0 8px 0;
	text-decoration: none;
	text-align: center;
	text-shadow: 0 -1px 1px #a5317f;
	margin-left: 60%;
	width: 40%; /*adjust length of button here*/
}

button.browsesite:hover {
	background-color: #c9839f;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9839f), color-stop(50%, #b75a7f), color-stop(50%, #a5315f), color-stop(100%, #84274c));
	background-image: linear-gradient(top, #c9839f 0%, #b75a7f 50%, #a5315f 50%, #84274c 100%);
	cursor: pointer;
}

button.browsesite:active {
	box-shadow: inset 0 0 20px 0 #bd4891, 0 1px 0 white;
}

.closing button.browsesite {
	margin-left: -60%;
}

#buttonClassTop a#top2 button.browsesite { 
	display: inline;
	float: left;
	/*background-position: center top;*/
	position: relative;
	text-align: center;
	color: white;
	text-decoration: none !important;
	z-index: 999;
	/*display: inline;*/
	background-color: #ca6da7;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ca6da7), color-stop(50%, #c45a9c), color-stop(50%, #bd4891), color-stop(100%, #aa4182));
	background-image: -webkit-linear-gradient(top, #ca6da7 0%, #c45a9c 50%, #bd4891 50%, #aa4182 100%);
	background-image: -moz-linear-gradient(top, #ca6da7 0%, #c45a9c 50%, #bd4891 50%, #aa4182 100%);
	background-image: -ms-linear-gradient(top, #ca6da7 0%, #c45a9c 50%, #bd4891 50%, #aa4182 100%);
	background-image: -o-linear-gradient(top, #ca6da7 0%, #c45a9c 50%, #bd4891 50%, #aa4182 100%);
	background-image: linear-gradient(top, #ca6da7 0%, #c45a9c 50%, #bd4891 50%, #aa4182 100%);
	border: 1px solid #5e2448;
	border-bottom: 1px solid #260E1D;
	border-radius: 5px;
	box-shadow: inset 0 1px 0 0 #F8EDF4;
	color: #fff;
	font-family: 'Roboto Condensed', sans-serif;
	vertical-align: middle;
	padding: 7px 20px 8px 20px;
	text-shadow: 0 -1px 1px #a5317f;
	
	width: 100%; /*adjust length of button here*/
	.transition(~"all 0.3s ease-in-out");
	.transform(~"scale(0.5)");
    .transition(~"all 0.3s ease-in-out");
	fixed:bottom;
	margin-top: 5px;
	margin-bottom: 5px; 
	margin-left:650%;
  }
  
/*#top.browsesite:hover {
	background-color: #c9839f;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9839f), color-stop(50%, #b75a7f), color-stop(50%, #a5315f), color-stop(100%, #84274c));
	background-image: linear-gradient(top, #c9839f 0%, #b75a7f 50%, #a5315f 50%, #84274c 100%);
	cursor: pointer;
}

#top.browsesite:active {
	box-shadow: inset 0 0 20px 0 #bd4891, 0 1px 0 white;
}

.closing #top.browsesite {
	margin-left: -60%;
}*/
  /*&:hover{
    box-shadow: 0 0 10px 2px @shadow-hcolor, inset 0 0 10px 2px @shadow-hcolor;
    div.triangle{
      text-shadow: 0 0 30px @shadow-hcolor;
    }*/


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

#imgLogo {
	width: 60%;
	margin-top: 125px;
	margin-bottom: 0;
}
}
/*.container section .stuff content p {
	margin-top: -40;
	margin-right: 0;
	margin-bottom: 40px;
	margin-left: 0;
	padding-top: -40px;
	padding-right: 0px;
	padding-bottom: 100px;
	padding-left: 0px;
	!important	
	
	}*/

/*.at-twitter {
  position: fixed;
  right: 20px;
  bottom: 20px;
  color: #f1c40f;
  z-index: 5000;
}
.at-twitter:visited {
  color: #f1c40f;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover, a:focus {
  color: inherit;
  text-decoration: underline;
}*/