/* USING CUSTOM FONTS */

@font-face { font-family: "brownstdlight"; src: url("../fonts/brown.std.light.otf"); }
@font-face { font-family: "brownstdreg"; src: url("../fonts/brown.std.regular.otf"); }
@font-face { font-family: "brownstdbold"; src: url("../fonts/brown.std.bold.otf"); }

h1 { font: normal 36px "brownstdbold"; }
h2 { font: normal 26px "brownstdreg"; }
h3 { font: normal 16px "brownstdlight"; }


/* defaults so we can see what we're doing */
/* #foreground { background: rgba(0,255,0,0.2); }*/
/* #background { background: rgba(0,0,255,0.2); }*/



/* elegantly fade in our content once everything has loaded */
body { background: black; 
 overflow: hidden;}

/*.overlapper { display: none; }*/


/* ----------------------------------------
	Global Styles
---------------------------------------- */

.circle { border-radius: 50%; }


/* ----------------------------------------
	Page 01
---------------------------------------- */

/*#page-01 #background {
	background: url('../assets/demo-poster.png');
	background-size: cover;
	background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}*/

#page-01 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchange 10s infinite; 
    -webkit-animation: colorchange 10s infinite;

}

 @keyframes colorchange
    {
      0%   {background: blue;}
      25%  {background: #76D7C4;}
      50%  {background: blue ;}
      75%  {background: #1F618D;}
      100% {background: #1A5276;}
    }

    @-webkit-keyframes 
    {
      0%   {background: blue ;}
      25%  {background: #76D7C4;}
      50%  {background: blue;}
      75%  {background: #1F618D;}
      100% {background: #1A5276;}
    }

#page-01 .tl {
	position: relative;
	float: left;
	width: 35%;
	height: 50%;
	margin-left: 15%;
}

#page-01 .tr {
	position: relative;
	float: left;
	margin-right: 15%;
	width: 35%;
	height: 50%;
}

#page-01 .bl {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
}

#page-01 .bc {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
}

#page-01 .br {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
}


#page-01 .rectangle {
	width: 50px;
	height: 150px;
	background: blue;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	animation: shake 0.5s infinite cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

#page-01 .circle {
	width: 300px;
	height: 300px;
	background: yellow;
	position: absolute;
	bottom: 10%;
	right: 10%;
}

#page-01 .text {
	position: absolute;
	font-family: sans-serif;
	color: blue;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
}


#page-02 .half-circle {
    width: 1000px;
    height: 350px; /* as the half of the width */
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border: 10px solid white;
    border-bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    animation: 1s linear infinite rotate;
  position: relative;
  top:45 * -1;
  transform-origin: 50% 100%;
  z-index: 5;
  margin: auto;
  overflow: hidden;
}

#page-02 #small .half-circle {
    width: 1000px;
    height: 500px; /* as the half of the width */
    border-top-left-radius: 400px;
    border-top-right-radius: 400px;
    border: 10px solid white;
    border-bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    animation: 1s linear infinite rotate;
  position: relative;
  top: 45 * -1;
  transform-origin: 50% 100%;
  z-index: 4;
  margin: auto;
  overflow: hidden;
}

#page-02 #big .half-circle {
    width: 1000px;
    height: 500px; /* as the half of the width */
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border: 10px solid white;
    border-bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    animation: 1s linear infinite rotate;
  position: absolute;
  transform-origin: 50% 100%;
  z-index: 10;
  margin: auto;
  overflow:hidden;
 
}

@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}


#page-02 .text {
	position: absolute;
	font-family: sans-serif;
	color: black;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
}


#page-02 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchangetwo 1s infinite; 
    -webkit-animation: colorchangetwo 1s infinite;
}

 @keyframes colorchangetwo
    {
   
      0%  {background: white;}
      30% {background: black;}
      60% {background: white;}
      100% {background: black;}
    }

    @-webkit-keyframes colorchangetwo
    {
      0%  {background: white;}
      30% {background: black;}
      60% {background: white;}
      100% {background: black;}
}
   

#page-03 .text {
	position: absolute;
	font-family: sans-serif;
	color: white;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
}


#page-03 .party {
	 width: 700px;
    height: 350px;
    position: absolute;
     border-top-left-radius: 700px;
    border-top-right-radius: 700px;
    margin: auto;
    top: 4;
    bottom: 0;
    right: 0;
    left: 0;
    background: orange;
}


#page-03 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchangethree 5s infinite; 
    -webkit-animation: colorchangethree 5s infinite;

}

 @keyframes colorchangethree
    {
      0%   {background: red;}
      25%  {background: orange;}
      50%  {background: red;}
      75%  {background: yellow;}
      100% {background: pink;}
    }

    @-webkit-keyframes colorchangethree
    {
      0%   {background: red ;}
      25%  {background: orange;}
      50%  {background: red;}
      75%  {background: yellow;}
      100% {background: pink;}
    }


#page-04 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchangefour 0.3s infinite; 
    -webkit-animation: colorchangefour 0.3s infinite;
}

 @keyframes colorchangefour
    {
   
      0%  {background: white;}
      30% {background: pink;}
      60% {background: white;}
      100% {background: pink;}
    }

    @-webkit-keyframes colorchangefour
    {
      0%  {background: white;}
      30% {background: pink;}
      60% {background: white;}
      100% {background: pink;}
}

#page-04 .text {
	position: absolute;
	font-family: sans-serif;
	color: white;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
	z-index: 20;
}


.square-spin {
	width: 100px;
	height: 100px;
	color: red:;
	position: absolute;
}

#page-04 .tl {
	width: 500px;
	height: 500px; 
	color: orange;
	position: absolute; 
	float: left;
}

#page-04 .tr {
	width: 500px;
	height: 500px; 
	color: red;
	position: absolute; 
	float: left;
}

#page-04 .bl {
	width: 500px;
	height: 500px; 
	color: blue;
	position: absolute; 
	float: left;
}
   
#page-04 .br {
	width: 500px;
	height: 500px; 
	color: pink;
	position: absolute; 
	float: left;
}


    #page-05 .text {
	position: absolute;
	font-family: sans-serif;
	color: white;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
	z-index: 20;
}

    #page-06 .text {
	position: absolute;
	font-family: sans-serif;
	color: white;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
	z-index: 20;
}

#page-06 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchangesix 0.1s infinite; 
    -webkit-animation: colorchangesix 0.1s infinite;

}

 @keyframes colorchangesix
    { 0%   {background: black;}
      25%  {background: red;}
      50%  {background: black;}
      75%  {background: red;}
      100% {background: black;}
    }

    @-webkit-keyframes colorchangesix
   { 0%   {background: black;}
      25%  {background: red;}
      50%  {background: black;}
      75%  {background: red;}
      100% {background: black;}
    }

#page-07 .text {
	position: absolute;
	font-family: sans-serif;
	color: white;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
	z-index: 20;
}

#page-07 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchangeseven 0.1s infinite; 
    -webkit-animation: colorchangeseven 0.1s infinite;

}

 @keyframes colorchangeseven
    { 0%   {background: black;}
      25%  {background: red;}
      50%  {background: black;}
      75%  {background: red;}
      100% {background: black;}
    }

    @-webkit-keyframes colorchangeseven
   { 0%   {background: black;}
      25%  {background: red;}
      50%  {background: black;}
      75%  {background: red;}
      100% {background: black;}
    }


#page-08 .text {
	position: absolute;
	font-family: sans-serif;
	color: white;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
	z-index: 20;
}

#page-08 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchangeeight 0.1s infinite; 
    -webkit-animation: colorchangeeight 0.1s infinite;

}

 @keyframes colorchangeeight
    { 0%   {background: black;}
      25%  {background: red;}
      50%  {background: black;}
      75%  {background: red;}
      100% {background: black;}
    }

    @-webkit-keyframes colorchangeeight
   { 0%   {background: black;}
      25%  {background: red;}
      50%  {background: black;}
      75%  {background: red;}
      100% {background: black;}
    }

#page-08 .tl {
	position: relative;
	float: left;
	width: 35%;
	height: 50%;
	margin-left: 15%;
}

#page-08 .tr {
	position: relative;
	float: left;
	margin-right: 15%;
	width: 35%;
	height: 50%;
}

#page-08 .bl {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
}

#page-08 .bc {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
}

#page-08 .br {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
}


#page-08 .rectangle {
	width: 150px;
	height: 150px;
	background: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	animation: shake 0.5s infinite cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

#page-09 .tl {
	position: relative;
	float: left;
	width: 35%;
	height: 50%;
	margin-left: 15%;

}

#page-09 .tr {
	position: relative;
	float: left;
	margin-right: 15%;
	width: 35%;
	height: 50%;

}

#page-09 .bl {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
	visibility: hidden;
	
}

#page-09 .bc {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
	
}

#page-09 .br {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
	visibility: hidden;
}


#page-09 .rectangle {
	width: 150px;
	height: 150px;
	background: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	animation: shake 0.5s infinite cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

#page-09 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchangenine 1s infinite; 
    -webkit-animation: colorchangeeight 1s infinite;

}

 @keyframes colorchangenine
    { 0%   {background: black;}
      25%  {background: red;}
      50%  {background: black;}
      75%  {background: red;}
      100% {background: black;}
    }

    @-webkit-keyframes colorchangenine
   { 0%   {background: black;}
      25%  {background: red;}
      50%  {background: black;}
      75%  {background: red;}
      100% {background: black;}
    }

    #page-09 .text {
	position: absolute;
	font-family: sans-serif;
	color: white;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
	z-index: 20;
}

/*-----------------------------------------
page 10 
-------------------------------------------*/

#page-10 .tl {
	position: relative;
	float: left;
	width: 35%;
	height: 50%;
	margin-left: 15%;
visibility: hidden;

}

#page-10 .tr {
	position: relative;
	float: left;
	margin-right: 15%;
	width: 35%;
	height: 50%;
	visibility: hidden;

}

#page-10 .bl {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
	visibility: hidden;
	
}

#page-10 .bc {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
	
}

#page-10 .br {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
	visibility: hidden;
}


#page-10 .rectangle {
	width: 150px;
	height: 150px;
	background: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	animation: shake 0.5s infinite cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

#page-10 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchangenine 3s infinite; 
    -webkit-animation: colorchangeeight 3s infinite;

}

 @keyframes colorchangenine
    { 0%   {background: black;}
      25%  {background: red;}
      50%  {background: black;}
      75%  {background: red;}
      100% {background: black;}
    }

    @-webkit-keyframes colorchangenine
   { 0%   {background: black;}
      25%  {background: red;}
      50%  {background: black;}
      75%  {background: red;}
      100% {background: black;}
    }

    #page-10 .text {
	position: absolute;
	font-family: sans-serif;
	color: white;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
	z-index: 20;
}

/*-------------
page 11
-------------*/


    #page-11 .text {
	position: absolute;
	font-family: sans-serif;
	color: white;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
	z-index: 20;
}


#page-11 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchangeeleven 10s infinite; 
    -webkit-animation: colorchangeeleven 10s infinite;

}

 @keyframes colorchangeeleven
    { 0%   {background: red;}
    25%  {background: white;}
      50%  {background: white;}
      75%  {background: white;}
      100% {background: white;}
    }

    @-webkit-keyframes colorchangeeleven
    { 0%   {background: red;}
    25%  {background: white;}
      50%  {background: white;}
      75%  {background: white;}
      100% {background: white;}
    }


#page-12 .text {
	position: absolute;
	font-family: sans-serif;
	color: white;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
}

#page-13 .text {
	position: absolute;
	font-family: sans-serif;
	color: white;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
}

#page-13 .party {
	 width: 700px;
    height: 350px;
    position: absolute;
     border-top-left-radius: 700px;
    border-top-right-radius: 700px;
    margin: auto;
    top: 4;
    bottom: 0;
    right: 0;
    left: 0;
    background: purple;
}


#page-13 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchangeteen 5s infinite; 
    -webkit-animation: colorchangeteen5s infinite;
}


 @keyframes colorchangeteen
    { 0%   {background: blue;}
    25%  {background: purple;}
      50%  {background: #117A65;}
      75%  {background: #884EA0;}
      100% {background: purple;}
    }

    @-webkit-keyframes colorchangeteen
    { 0%   {background: blue;}
    25%  {background: purple;}
      50%  {background: #117A65;}
      75%  {background: #884EA0;}
      100% {background: purple;}
    }

#page-14 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchange 10s infinite; 
    -webkit-animation: colorchange 10s infinite;

}

 @keyframes colorchange
    {
      0%   {background: blue;}
      25%  {background: #76D7C4;}
      50%  {background: blue ;}
      75%  {background: #1F618D;}
      100% {background: #1A5276;}
    }

    @-webkit-keyframes 
    {
      0%   {background: blue ;}
      25%  {background: #76D7C4;}
      50%  {background: blue;}
      75%  {background: #1F618D;}
      100% {background: #1A5276;}
    }

#page-14 .tl {
	position: relative;
	float: left;
	width: 35%;
	height: 50%;
	margin-left: 15%;
}

#page-14 .tr {
	position: relative;
	float: left;
	margin-right: 15%;
	width: 35%;
	height: 50%;
}

#page-14 .bl {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
}

#page-14 .bc {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
}

#page-14 .br {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
}


#page-14 .rectangle {
	width: 50px;
	height: 150px;
	background: blue;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	animation: shake 0.5s infinite cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

#page-14 .text {
	position: absolute;
	font-family: sans-serif;
	color: blue;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
}

#page-15 .text {
	position: absolute;
	font-family: sans-serif;
	color: #7D6608;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
}

#page-15 #background {
	background-size: cover;
	background-size: contain;
    background-position: center;
    animation: colorchange 10s infinite; 
    -webkit-animation: colorchange 10s infinite;

}

 @keyframes colorchange
    {
      0%   {background: green;}
      25%  {background: #1B4F72;}
      50%  {background: #512E5F;}
      75%  {background: #0B5345;}
      100% {background: #7D6608;}
    }

    @-webkit-keyframes 
    {
      0%   {background: green;}
      25%  {background: #1B4F72;}
      50%  {background: #512E5F;}
      75%  {background: #0B5345;}
      100% {background: #7D6608;}
    }

#page-15 .tl {
	position: relative;
	float: left;
	width: 35%;
	height: 50%;
	margin-left: 15%;
}

#page-15 .tr {
	position: relative;
	float: left;
	margin-right: 15%;
	width: 35%;
	height: 50%;
}

#page-15 .bl {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
}

#page-15 .bc {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
}

#page-15 .br {
	position: relative;
	float: left;
	width: 33.3%;
	height: 50%;
}


#page-15 .rectangle {
	width: 50px;
	height: 150px;
	background: #7D6608;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	animation: shake 0.5s infinite cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

#page-16 .text {
	position: absolute;
	font-family: sans-serif;
	color: #7D6608;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
}