@import "https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,400,900";
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,200,400,900');

/*define start position in relation to finish position: start key frame then end keyframe*/
@keyframes dropHeader {
  0% {
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    opacity(0);
  }
  100% {
    transform: translateX(0%);
    -ms-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    opacity(1);
  }
}

@-webkit-keyframes dropHeader  {
    0%   {
      -webkit-transform: translateX(-50%);
      opacity: 0; }
    100% {
      -webkit-transform: translateX(0%);
      opacity: 1; }
}

@-moz-keyframes dropHeader  {
    0%   { opacity: 0;
             -moz-transform: translateX(-50%);
     }
    100% { opacity: 1;
            -moz-transform: translateX(0%);
    }
}

@-o-keyframes dropHeader  {
    0%   { opacity: 0;
             -o-transform: translateX(-50%);
     }
    100% { opacity: 1;
            -o-transform: translateX(0%);
    }
}



@-ms-keyframes dropHeader  {
    0%   { opacity: 0;
             -ms-transform: translateX(-50%);
     }
    100% { opacity: 1;
            -ms-transform: translateX(0%);
    }
}



body{

  background: #fff;
  color: #444;
  padding:0px;
  margin:0px;
}

/*change color when element is tapped default light blue on phone*/
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}


/* ideal column should contain 70 to 80
characters per line (about 8 to 10 words in English)

min-width
Rules applied for any browser width greater than
the value defined in the query.
*/
@media (min-width: 575px) {
  p {
    width: 575px;
    margin-left: auto;
    margin-right: auto;

  }

}

/*need to call both enclosing div's*/
/*any screen larger than this is fixed at ÷*/
  @media (min-width: 1000px) {
    .fullPage .fullWidth  {

      width: 900px;
      margin-left: auto;
      margin-right: auto;

    }
  }
/*APP NAME TEXT CHANGE*/
@media (max-width: 750px) {
 .appTitle h2{

    font-size: 100%;

  }
  .appTitle h3{

     font-size: 100%;

   }


}

@media (max-width: 550px) {
 .appTitle h2{

    font-size: 100%;

  }
  .appTitle h3{

     font-size: 100%;

   }
}


/*TEXT ON TOP OF IMAGES CHANGE*/
@media (max-width: 850px) {
 .screenshotTextDisplay, .screenshotDoubleDisplay {

    font-size: .8em;

  }
}

@media (max-width: 550px) {
 .screenshotTextDisplay, .screenshotDoubleDisplay {

    font-size: .8em;


  }
}

@media (max-width: 400px) {
 .screenshotTextDisplay, .screenshotDoubleDisplay {

    font-size: .30em;

  }
}



/*any viewPort/window less than ***px wil revert to this*/
@media (max-width: 550px) {
  .fullPage p.text2, .fullPage p.text1, .appTitle  {


    font-size: 90%;

      margin-left: auto;
      margin-right: auto;
  }
}


/*any viewPort/window greater than ***px wil revert to this*/
@media (min-width: 750px) {
   .fullPage .appTitle h3  {

    font-size: 80%;

      margin-left: auto;
      margin-right: auto;
  }
}

/*area at top of page to drop menu header to align with open button menuslidein.css*/
.blankTop{
width: 100vw;
height:20px;
background-color: #111;
padding:0;
margin: 0px 0px 0 0%;

}
/*interactive title + menu icon block css*/
h1{

width: 90vw;
position:relative;
padding: 0px;
margin: 0px;
border: 0px solid blue;

}


h1.pageHead {


  border: 0px solid blue;

display:block;

padding: 0px;

/*border: 1px solid blue;*/

position: relative;

width: 90vw;

margin: 0px 0px 0 5%;


font-size: 2em;
background-color: #111;
color: rgba(0,0, 0, 1);
/*text align only works on inline elements*/
text-align: right;

height: 50px;

}

/*f.interactive text: menu icon in menuslidein.css*/
span.pageHeadName{
  width 200%;

  margin: 0px 10px 0 0;



  /*display is different in different browsers if this isn't in*/
  display: block;

  /*font-family: Helvetica Neue, Helvetica, fantasy;*/
  /*font-family: "Gill Sans",Bold;*/
  /*font-family: Trebuchet MS;*/
  /*font-family: "verdana",sans-serif, Bold;*/
  /*font-family:"Montserrat",sans-serif, Bold;*/
  /*font-family: Futura;*/
  /*font-family: Arial Black,Arial Bold,Gadget,sans-serif;*/

  font-family: 'NotCourierSans';
 /*@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,400,900');*/

  font-family:"Montserrat",sans-serif;

  /*some weigths dont work on some browsers 100 , 200 dont show on firefox*/
  font-weight: 100;

  text-transform:none ;

       color: #fff;

       border: 0px solid blue;
       font-size: 1em;

}

div.fullPage {
  position: absolute;
  padding:0px;

  width: 90vw;

  margin-left: 5%;
  border: 0px solid blue;
}


div.fullWidth {
  position: relative;
  width: 82vw;
  padding: 0px;
  margin: auto;
  border: 0px solid blue;
}


.appTitle{
  /*  If we set relative positioning on parent div, any elements
    within parent will be positioned relative to it*/
  position: relative;
  /*used top: margin top didn't have any effect in browser*/
  top: 0px;

  margin:0%;

  /*text+image+(img margin-left)+*/
  width: 100%;
  /*238 +border if needs to be visible*/

  font-size: 2em;


  opacity: 1;
  /*ensure no elements overflow parent div*/
  display:block;
  overflow:visible;
  border: 0px solid black;

  /*Animation for title of projects

  animation: 1s ease-out 0s 1 dropHeader;
  -webkit-animation: 1s ease-out 0s 1 dropHeader;
   -moz-animation: 1s ease-out 0s 1 dropHeader;*/

}


   .appTitle h2 {

   /*an em is equal to the size of the font that applies to the parent of the element in question.
   If you haven't set the font size anywhere on the page,
   then it is the browser default, which is often 16px*/

    position: relative;
    color: #111;
    text-align:right;
    margin: 2% 0% 0% 0%;

   /*@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,400,900');*/

    font-family:"Montserrat",sans-serif;
    font-weight: 100;

   }

   .appTitle h3 {

   /*an em is equal to the size of the font that applies to the parent of the element in question.
   If you haven't set the font size anywhere on the page,
   then it is the browser default, which is often 16px*/

    position: relative;
    color: #888;
    text-align:right;
    margin: 0% 0% 5% 0%;
    font-size: 50%;

   /*@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,400,900');*/

    font-family:"Montserrat",sans-serif;
    font-weight: 400;

   }

.videoWrapper {
	position: relative;
  padding: 0;
  margin: 0;
	padding-bottom: 56.25%; /* 16:9 */
	/*padding-top: 25px;*/
	height: 0;

}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.screenshotTextDisplay {
  /* An element that has the float left
  desires that the next element draws up beside it
  default float is none
  clear is used to null float in the next following element*/
   margin-top: 20px;
   position: relative;
   float:none;
   margin-left: auto;
   margin-right: auto;

   width: 100%;
   /*keeps aspect ratio of div constant-
   depending on width changes height
   % - specifies a padding in % of the width of the containing element*/
   height:auto;
   /*width: 30%;*/

   border: 0px solid blue;
   /*The element generates a block element box.*/
   display:block;

   overflow: hidden;

   /*background-image: url('images/markOSheaIcon.png');*/
}


/*img elements are sized to fit div*/
 .screenshotTextDisplay img{
  /*margins are not covered by either the background or border
  because they are the space outside of the actual element.*/
  display: block;
  width: 100%;
  height: auto;
 /*ensure no elements overflow parent div*/

}

/*Text div block attributes*/
.screenshotTextDisplay p {

  /* position: absolute; */

  color: black;
  font-size: 100%;
  font-family:"Gotham HTF",Helvetica;

  top:0%;
  left: 0%;

  /* background-color: Black; */

  opacity: 1;
  width: 100%;
  padding:0px;

  /* box-shadow: 1px 0px 10px #222; */

  text-align: right;

}

.containerTest {
  /* width: fit-content; /* keeps text aligned to image width */ */
/*
  margin-top: 10px;
  position: relative;
  float:none;
  margin-left: auto;
  margin-right: auto; */

  /* width: 100%;
  /*keeps aspect ratio of div constant-
  depending on width changes height
  % - specifies a padding in % of the width of the containing element*/
  /* height:auto; */ */
  /*width: 30%;*/

  border: 20px solid blue;
  /*The element generates a block element box.*/
  display:inline-block;

  /* overflow: hidden; */

  /*background-image: url('images/markOSheaIcon.png');*/
}

/*img elements are sized to fit div*/
 .containerTest img{

  width: 100%;
  height: auto;
    /* display:inline-block; */


}

.captionTest {
  text-align: right;
  margin: 0;
}

/*code for vertical portrait images*/
.screenshotDoubleDisplay{

  /*  If we set relative positioning on parent div, any elements
    within parent will be positioned relative to it*/
  position: relative;
  /*used top: margin top didn't have any effect in browser*/
  top: 10px;
  margin-left: 1;
  margin-bottom: 40px;


  padding-top: : 1px;
  /*text+image+(img margin-left)+*/
  width: 100%;
  /*238 +border if needs to be visible */

/*defines height in relation to width*/
  padding-bottom: 55%;

  opacity: 1;
  /*changed to block to have constant single image
  inline-block moves images side by side*/
  display:block;

   overflow:hidden;
   border: 0px solid black;

}

.screenshotDoubleDisplay img {

  /*margins are not covered by either the background or border
  because they are the space outside of the actual element.*/
  margin: 0px;

/*Padding is the inner space of an element,*/
  padding: 0px;

/*default positioning for all elements is
position:static, which means the element is not positioned
If we set relative positioning on parent div, any elements
within parent will be positioned relative to it*/
  position: absolute;

  margin-left: auto;
  margin-right: auto;

  width: 90%;

  border: 0px solid black;


  visibility:visible;


}

/*Text div block attributes*/
.textDouble {

  position: absolute;

  top:15%;
  left: 60%;

  background-color: Black;

  opacity: .8;
  width: 40%;
  padding:5px;

  box-shadow: 1px 0px 10px #222;

}

p.textDouble {

  color: white;
  font-size: 250%;
  font-family:"Gotham HTF",Helvetica;

}

p.text2{

  width: 100%;
  font-size: 140%;
  font-family:"Lato";
  margin-bottom: 20px;
  padding: 0px 0px 0px 0px;

  border: 0px solid black;


   line-height: 1.7;
   letter-spacing: .2rem;
   color: #333333;
   -webkit-text-size-adjust: none;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

/* play sound for fables of reconstruction page */
button  {
    background-color: #ffffff; /* orange #f28500, #ff8c00*/
border: none;
color: #f28500;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
width:250px;
border:0.1em solid #f28500;

  }

.button1:hover {
background-color: #f28500;
color: #ffffff;
}

/* .button1:hover {
background-color: #f28500;
color: white;
} */

.button2{
background-color: #ff8c00;

}

.soundDiv{
  /* border-width: 2px;
  border-style:solid; */
  /* border-color:black; */
  display: inline-block;


}

.soundSideBySide{
  float: left;
}

.textPlaySound{
  color: #f28500;
  padding-left: 50px;
  padding-top: 0px;
  font-size: 30px;

}