/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/



* {
  box-sizing: border-box; 
  transition-duration: .5s;
}

img {
  display: block;
}

body {
  background: black;
  overflow-x: hidden;
  font-family: nimbus-sans, sans-serif;
}

.rightborder, .leftborder {

  width: 1vw;
  right: 0;
  height: 100vh;
  z-index: 100;
  position: fixed;
  background: black;
}

.leftborder {
  left: 0;
}


h1{
  color: black;
  font-family: azo-sans-uber, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
}


h2 {
  color: black;
  font-family: azo-sans-uber, sans-serif;
  font-weight: 400;
  font-style: normal
}

h3 {
  color: black;
  font-family: source-sans-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2em;
  text-align: center;
}

h4 {
  color: violet;
  font-family: nimbus-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.7em;
  text-align: center;
}

p {
  font-family: nimbus-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 2em;
  font-size: 1.1em;
  margin-bottom: 1.5em;
}

a {
  color: black;
  text-decoration: underline;
  font-weight: 600;
}


a:hover {
  cursor: pointer;
  color: violet;
}

.sub{
  font-size: .95em;
  line-height: 1.2em;
  margin-bottom: 1.2em;
  margin-top: 1.2em;
  padding: 1% 2%;
  color: black;
}

.sub2{
  font-size: .97em;
  margin-bottom: .2em;
  margin-top: 30px;
  padding: 0% 0%;
  color: violet;
  text-align: center;
}

.sub2 a{
  color: violet;
}

.sub3{
  font-size: .97em;
  line-height: 1.5em;
  margin-bottom: 1em;
  margin-top: .2em;
  padding: 0% 0%;
  text-align: center;
}


:root {
  --arm1color: violet;
  --arm2color: deepskyblue;
  --arm3color: #ccc86e;
  --arm4color: coral;
  --arm5color: #6ecc77;
}




/****************** backers ***********************/

.backing {
  width: 100vw;
  height: 100vh;
  top: 0;
  z-index: -100;
  overflow: hidden;
  background-color: black;
}

.bgpic {
  background-image: url('../img/bg.png');
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  z-index: -100;
  height: 200vh;
  opacity: 0;
}

.bgimages {
  background: black;
}

.bgimages img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: right center;
  position: fixed;
  top: 0;
  right: 0;
  filter: brightness(90%);
}

.scrolldown {
  width: 10%;
  height: 50px;
  position: fixed;
  bottom: 0;
  margin: 0 45%;
  opacity: 0;
  z-index: 99;
  cursor: pointer;
}

.scrolldown img {
  max-height: 100%;
  margin: auto;
  filter: hue-rotate(-50deg) brightness(200%);
}

#infovideo, #quarantinecat, #angrycat, #shelterbuilding, #attnparents, #aspcamobile, #catfood, #cawcat, #cawbg {
  opacity: 0;
}




/****************** divider ***********************/

.divider {
  width: 100vw;
  position: relative;
  z-index: 99;
}

.divider.infofilm, .divider.sheltervlog {
  height: 100vh;
  margin: 10vh 0;
}

.infofilm video{
  width: 100%;
  max-height: 100%;
  margin: auto;
}

.divider.crumbsvideo {
  width: 100vw;
  height: 90vh;
  text-align: center;
}

.crumbsvideoembed {
  opacity: 0;
}





/****************** opener text ***********************/

.openertext {
  top: 0;
  width: 64vw;
  padding: 5% 0% 0% 17%;
  position: fixed;
  opacity: 0;
  z-index: 97;
}

.openertext h1, .openertext h2{
  font-size: 3.5em;
  margin: 1%;
  color: violet;
  text-shadow: 1px 1px 0px black;
  text-align: left;
}

.openertext h2 {
  font-size: 1.5em;
  font-family: nimbus-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
}





/****************** main chonks and inside text ***********************/

.main {
  width: 45%;
  margin: 30vh 0 30vh 5%;
  padding: 2%;
  position: relative;
  background-color: rgba(255, 255, 255, 0.94);
  border: 1.2px solid black;
  box-shadow: 6px 6px black;
  text-align: left;
  z-index: 98;
  overflow: hidden;
}

.main h1{
   margin: auto;
   text-align: center;
   font-size: 2.5em;

}

#pp1, #pp2, #c1, #c2, #sh1, #sh2, #tn1, #tn2{
  opacity: 0;
}







/****************** map ***********************/


.main.mapy {
  padding: 1%;
  background-color: white;
  width: 50%;
  margin-left: 2%;
  opacity: 0;
}


.viewerbox {
   width: 45%;
   background: white;
   border: 1.2px solid black;
   margin-top: 15vh;
   margin-left: 54%;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 1;
   opacity: 0;
   padding: 2%;
   color: black;
}





/****************** calcucat ***********************/

.calcy {
  height: 120vh;
  padding: 0% 4%;
  opacity: 0;
  z-index: 99;
}

.calculator {
  width: 30%;
  margin-top: 7vh;
  margin-left: 5%;
  height: 75vh;
  position: relative;
}

#cattransp {
  margin: 5%;
  width: 350px;
  height: 350px;
  text-align: center;
  position: absolute;
}

#cattransp img {
  max-height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top;
  display: inline-block;
  margin-top: 10px;
}


.arm {
  width: 70px;
  height: 45px;
  position: absolute;
  z-index: -1;
}

#arm1 {
  top: 120px;
  left: 35px;
  border: 4px dotted var(--arm1color);
  border-top: none;
  border-right: none;
}

#arm2 {
  top: 100px;
  left: 180px;
  border: 4px dotted var(--arm2color);
  border-bottom: none;
  border-left: none;
}

#arm3 {
  top: 220px;
  left: 260px;
  border: 4px dotted var(--arm3color);
  border-top: none;
  border-left: none;
}

#arm4 {
  top: 300px;
  left: 50px;
  border: 4px dotted var(--arm4color);
  border-top: none;
  border-right: none;
}

#arm5 {
  top: 340px;
  left: 260px;
  border: 4px dotted var(--arm5color);
  border-top: none;
  border-left: none;
}

.calcbox {
  width: 65px;
  background-color: transparent;
  position: absolute;
  transition-duration: .5s;
}

.calcbox img {
  width: 100%;
  transition-duration: .5s;
  cursor: pointer;
}

#treatment {
  top: 80px;
  left: 0px;
}

#fix {
  top: 125px;
  left: 212px;
}

#comfort {
  top: 170px;
  left: 300px;
}

#food {
  top: 255px;
  left: 15px;
}

#sanitation {
  top: 350px;
  left: 220px;
}

#treatment img:hover, #treatment .clickedbox {
  -webkit-filter: drop-shadow(0px 0px 20px var(--arm1color));
  filter: drop-shadow(0px 0px 20px var(--arm1color));
  transform: scale(1.45);
}

#fix img:hover, #fix .clickedbox {
  -webkit-filter: drop-shadow(0px 0px 20px var(--arm2color));
  filter: drop-shadow(0px 0px 20px var(--arm2color));
  transform: scale(1.45);
}

#comfort img:hover, #comfort .clickedbox {
  -webkit-filter: drop-shadow(0px 0px 20px var(--arm3color));
  filter: drop-shadow(0px 0px 20px var(--arm3color));
  transform: scale(1.45);
}

#food img:hover, #food .clickedbox {
  -webkit-filter: drop-shadow(0px 0px 20px var(--arm4color));
  filter: drop-shadow(0px 0px 20px var(--arm4color));
  transform: scale(1.45);
}

#sanitation img:hover, #sanitation .clickedbox {
  -webkit-filter: drop-shadow(0px 0px 20px var(--arm5color));
  filter: drop-shadow(0px 0px 20px var(--arm5color));
  transform: scale(1.45);
}

.clickedbox {
  cursor: initial;
}





/****************** calcucat's friends ***********************/


.calcy h4 {
  margin-top: 0;
  margin-bottom: 0;
}

.titleofcalc {
  width: 90vw;
  height: 10vh;
}

.titleofcalc h3 {
  padding: 0;
  margin-top: 2%;
  color: violet;
}

.bottomofcalc {
  width: 90vw;
  height: 10vh;
  position: absolute;
  bottom: 0;
}

.infobox, .information {
  width: 44vw;
  max-height: 100vh;
  padding: 10px;
  position: absolute;
  background-color: white;
  border: 1px solid black;
  box-shadow: 2px 2px 0px black;
  text-align: center;
  top: 12vh;
  right: 5vw;
  overflow: scroll;
  overflow-x: hidden;
  opacity: 0;
  z-index: 1;
}


.information {
  z-index: 2;
  opacity: 1;
  top: 20vh;
}


.infobox::-webkit-scrollbar {
  width: 6px;
}


.infobox::-webkit-scrollbar-track {
  background: white;
}

.infobox::-webkit-scrollbar-thumb {
  background: #555;

}

.infobox::-webkit-scrollbar-thumb:hover {
  background: #555;
}



.informbox {
  width: 100%;
  text-transform: capitalize; 
  border: solid 1px grey;
}



td {
  height: 1em;
  border-bottom: 1px solid grey;
  background: #fff0ff;
  text-align: left;
  vertical-align: bottom;
  transition-duration: .5s;
  padding: 3px;
  }

#widthmanage1, #widthmanage2, #widthmanage3, #widthmanage4, #widthmanage5 {
  width: 78%;
}

.treatment {
 background: #fff0ff;
 color: var(--arm1color);
}

.fix {
background: #f0f7ff;
color: var(--arm2color);
}

.comfort {
background: #fffaf0;
color: var(--arm3color);
}

.food {
background: #fff0f1;
color: var(--arm4color);
}

.sanitation {
background: #f0fff2;
color: var(--arm5color);
}



input {
  width: 50px;
  text-align: left;
  background: white;
  border: none;
  cursor: text;
  color: inherit;
  border: 1px solid grey;
  margin-left: 10px;
}



.startover, .calculate {
  min-width: 30px;
  background: white;
  border: 1px solid black;
  box-shadow: 2px 2px 0px black;
  cursor: pointer;
}



/****************** footer ***********************/




#sidecat1 {
  position: absolute;
  left: 0;
  margin-top: -330px;
  z-index: 9;
}

#sidecat2 {
  position: absolute;
  margin-top: -330px;
  right: 0;
  z-index: 9;
}

.toes img {
  width: 250px
}

.toes { 
   width: 100%;
   height: 70px;
   padding: 1%;
   background: black;
 }

 .toesies {
   color: violet;
   font-family: futura-pt, sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: .8em;
   text-align: center;

 }

 .borderbottom {
  width: 100vw;
  height: 1vh;
  background: black;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
 }






/****************** progressbar ***********************/

.header {
  position: fixed;
  top: 0;
  left:0;
  z-index: 100;
  width: 100%;
  background-color: black;
    transition-duration: 0s;
}


.progresscontaint {
  width: 100vw;
  height: 10px;
  background: black;
}


.progressbar {
  margin-top: 0px;
  height: 8px;
  background: violet;
  width: 0%;
}




/****************** keyframes ***********************/


body::-webkit-scrollbar {
  display: none;
}


body{
  -ms-overflow-style: none;
}



@keyframes wiggler {
   0% {
      transform: rotate(3deg);
   }

   50% {
      transform: rotate(-3deg);
   }

   100% {
      transform: rotate(3deg);
   }

}

@keyframes appear {
   0% {
      opacity: 0;
      transform: translate(-100%, 0%);

   }


   100% {
      opacity: 1;
      transform: translate(0%, 0%);

   }
}

@keyframes appearup {
   0% {
      opacity: 0;
      transform: translate(0%, 100%);

   }


   100% {
      opacity: 1;
      transform: translate(0%, 0%);

   }
}

@keyframes appearback {
   0% {
      opacity: 0;

   }


   100% {
      opacity: .9;

   }
}



@keyframes appearfull {
   0% {
      opacity: 0;

   }


   100% {
      opacity: 1;

   }
}
@keyframes disappear {
   0% {
      display:none;
      opacity: 1;

   }

   100% {
      opacity: 0;
   }
}


@keyframes slide1 {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, 10px);
  }
}

@keyframes pulse {

  0%, 20%, 40%{
    transform: scale(1, 1);
  }

  10%, 30% {
   transform: scale(1.2, 1.2);
  }

}

/***** loader css file ******/

.chromeframe {
    margin: 0.2em 0;
    background: black;
    color: violet;
    padding: 0.2em 0;
}

#loader {
    z-index: 1201; 
}

#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background: black;
    z-index: 1200;
}
 
#loader-wrapper .loader-section.section-left {
    left: 0;
}
 
#loader-wrapper .loader-section.section-right {
    right: 0;
}

.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(-100%);  /* IE 9 */
    transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
}
 
.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(100%);  /* IE 9 */
    transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
}

.loaded #loader {
    opacity: 0;
}

.loaded #loader-wrapper {
    visibility: hidden;
}

.loaded #loader {
    opacity: 0;
    -webkit-transition: all 0.7s ease-out; 
    transition: all 0.7s ease-out;
}

.loaded #loader-wrapper .loader-section.section-right,
.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transition: all 0.3s 0.3s ease-out; 
    transition: all 0.3s 0.3s ease-out;
}

.loaded #loader-wrapper {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all 0.3s 1s ease-out; 
    transition: all 0.3s 1s ease-out;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1200;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 5px solid violet;
    border-top-color: violet;
    -webkit-animation: rainbow 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: rainbow 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}


#loader img {
    width: 60%;
    height: 60%;
    margin: 20%;
}



@keyframes rainbow {
        0%   { 
            filter:hue-rotate(0deg);
        }
        100% {
        filter:hue-rotate(360deg);
        }
}


@-webkit-keyframes rainbow {
        0%{ 
            filter:hue-rotate(0deg);
        }
        100% {
        filter:hue-rotate(360deg);
        }
}





/********* media query for responsive design *********************/

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

.main h1 {
  font-size: 2em;
}

.main{
  width: 40%;
}


.openertext {
  width: 80vw;
  padding: 0%;
  margin: 15% 0% 0% 12vw;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 30px black;
}

.openertext h1{
  margin: 0% 4%;
  font-size: 3em;
  padding-right: 0px;
  text-shadow: 0px 0px 30px black;
}

.openertext h2 {
  margin: 0% 24% 0% 4%;

  text-align: left;
}

.main.mapy {
  width: 50%;
}

.calcy {
  height: 180vh;
}

.titleofcalc h3 {
  margin-top: 1%;
}

.infobox, .information {
  width: 80%;
  top: 0;
  left: 0;
  margin-left: 10%;
  margin-top: 76vh;
}

.information {
  height: auto;
}

.calculator {
  margin: auto;
  transform: translate(-80px, 0);
  height: auto;
}

.divider.crumbsvideo {
  width: 100vw;
  height: 90vh;
  text-align: center;
}

#sidecat1 {
  position: absolute;
  left: 0;
  margin-top: -310px;
}

#sidecat2 {
  position: absolute;
  margin-top: -310px;
  right: 0;
}

.toes img {
  width: 200px
}




}




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

.crumbsvideoembed {
  width: 80vw;
  margin-left: 8.5vw;
}

.divider.crumbsvideo {
  height: 100vh;
}

.main {
  margin-left: 5%;
  width: 90%;
  margin-bottom: 50vh;
}

.main.mapy {
  width: 90%;
  margin: 5%;
}

.viewerbox {
   width: 90%;
   margin-top: 10px;
   margin-left: 5%;
   margin-bottom: 100px;
   position: relative;
}

.sub2 {
  margin-top: 20px;
}





}