@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');

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

body .titleText {

  font-size: .8em;
}


}

/*dont let images grow any bigger after 1200px
screen as opposed to print*/

@media only screen and (min-width: 800px) {

  /*body .videosOutline{
    width:800px;
    height:135.59px;

    padding: 0;
    float:none;

  }*/

  body .videos{

    /*30 percent of miin-width*/
    /*width: 240px;*/
    /*width/1.777*/
    /*height:135.59px;*/


  }


body .screen{

/*
  width: 800px;
  height: 450.19px;
  margin: 10px auto 0px auto;
  float:none;*/

}

/*end of media queire 1*/
}



/*media query for lanscape and hold width above certain value*/
/*@media only screen and (orientation:landscape) and (min-width:1200px){*/
@media only screen and (orientation:landscape) {

body .videosOutline {
    background-color: rgba(0,0,155,0);
    float:left;
    padding:0;
      margin: 0px 0px 0px 2.5%;
      /*width: 240px;
      height:auto;*/

      height:auto;
      width:11%;

}

body .connection{

  position: absolute;
  color: black;
  background-color: rgba(0,0,0,1);
  width:100%;
  height: 10%;
  border: 0px solid black;

}

body #connection1 {

  /*connections starts at bottom of image moved margin -55 to start at centre*/
  margin:-60% 0% 0% 99%;
  opacity: 1;

}

body #connection2 {
 margin:-60% 0% 0 99%;
 opacity: .5;

}

body #connection3 {
 margin:-60% 0% 0 99%;
 opacity: .5;
}

body .videos {

  /*needs to be float left: at float none whole website wont resize after certain width*/
  float: left;
  padding: 0;
  /*width/1.777*/
  /*height:20%;*/
  margin:0% 0% 3px 0%;
  height:auto;

  width: 100%;

}

body .screenOutline {


    float:right;
    margin: 0px 2.5% auto 0%;
    top:0px;


    padding: 0;

    box-sizing: border-box;
    border: 0px solid blue;
    height: auto;
    width:80%;

    padding-bottom: 44.936%;


}

body .screenOutline img {

    box-sizing: border-box;
    border: 0px solid red;




}

/*body .screen{

  float: right;
  margin: 0px 2.5% auto 0%;
  top:0px;



  width: 100%;

}*/



/*end of media query for landscape*/
}


body{
    /*box-sizing: border-box;*/


  background: #fff;

  padding:0px;
  margin:0px;

}

.allOutline{
  position: relative;

  box-sizing: border-box;
  border: 0px solid black;

  display: inline-block;
  padding: 3%;

  margin: 0% 0px auto 0px;


}

.videosOutline{

  /*box-sizing: border-box;*/
  border: 0px solid blue;

  display: block;

  position: relative;
  float:left;

  width:95%;
  padding: 0;

  margin:0% 0% 0% 2.5%;
  height:auto;

  background-color: rgba(255,0,0,0);



}

.titleText {

padding:0;
margin: 0px 0px 0px 0px;

/*have border inside div*/
box-sizing: border-box;
border: 0px solid black;

font: normal 1.5em 'Helvetica Neue', Roboto, 'Open Sans', Helvetica, Arial, sans-serif;
text-align: right;
color: black;

}

.titleText p{

  padding:0;
  margin: 0px 0px 5px 0px;


}

.connection{

  position: absolute;
  color: black;
  background-color: rgba(0,0,0,1);
  width:10%;
  height: 200%;
  border: 0px solid black;

  /*A transition works by animating the change in
  CSS property values. To do that, it needs to know
  what CSS property to listen for changes on.
  In our case, the CSS property that is changing
  is the opactity property. That's why the
  first argument to our transition declaration
  is opacity. The next two arguments specify
  how long we want the transition to run and what
  easing function to use to give some
  extra life to the transition*/
  -webkit-transition: opacity .5s ease-in-out;

  -moz-transition: opacity .5s ease-in-out;

  -o-transition: opacity .5s ease-in-out;

  transition: opacity .5s ease-in-out;


}

#connection1 {

  margin: 0px 0 0 45%;
  opacity: 1;

}

#connection2 {

  margin: 0px 0 0 45%;
  opacity: .5;

}

#connection3 {

  margin: 0px 0 0 45%;
  opacity: .5;

}

.videos{

  position: relative;

  float:left;

  width:15%;
  height: auto;
  padding: 0% 0% 0% 0%;

  margin:0% 1% 0% 0%;


  /*height:16.88vw;*/
  /*border: 2px dashed white;*/
  /*overflow: visible;*/

/*
  background-color: rgba(255,255,255,0);*/

  /*have border inside div*/
  box-sizing: border-box;
  border: 0px solid red;




}

/*vignette is placed above image, drawn after image*/
 .videos .vignette {

      /*-webkit-transform: translateZ(0px);*/
      /*transform: translate3d(0px,0px,0px);*/

      position: absolute;
      width: 100%;
      height:100%;

      border: 0px solid blue;
      border-radius: 0%;
      color: red;


/*set opacity to 0 and set vignette value*/
      opacity: 0;


/*box shadow as a vignette defined opacity = 0 until hover*/
        -webkit-box-shadow:
        inset 0 0 40px #fff,
                inset 0 0 30px #fff,
                inset 0 0 10px #fff;

        -moz-box-shadow:
        inset 0 0 40px #fff,
                inset 0 0 30px #fff,
                inset 0 0 10px #fff;

        -o-box-shadow:
        inset 0 0 40px #fff,
                inset 0 0 30px #fff,
                inset 0 0 10px #fff;

         -ms-box-shadow:
         inset 0 0 40px #fff,
                 inset 0 0 30px #fff,
                 inset 0 0 10px #fff;

        box-shadow:
        inset 0 0 40px #fff,
                inset 0 0 30px #fff,
                inset 0 0 10px #fff;


                -webkit-transition: opacity .1s ease-in-out;

                -moz-transition: opacity .1s ease-in-out;

                -o-transition: opacity .1s ease-in-out;

                -ms-transition: opacity .1s ease-in-out;

                transition: opacity .1s ease-in-out;

    /*z-index:1001;*/


    }


                        /* '~''  this effects class once element/class is after hovered class in dom*/

                        /* ''>'' We'll apply a CSS properties to a child of the
                        parent when the parent is in the hover state. */

                        .videos:hover > .vignette {

                             display: block;
                             opacity: .6;

                             /*border: 4px solid blue;*/
                             -webkit-transition: opacity(0.6);
                             -moz-transform: opacity(0.6);
                             -o-transform: opacity(0.6);
                             -ms-transform: opacity(0.6);
                             transform: opacity(0.6);

                           }

.videos img{

  width:100%;
  box-sizing: border-box;
  border: 0px solid blue;
  border-style: dotted;

  display: block;

  transition:
     border-color 1s ease-out 0.5s;

     /*box shadow as a vignette defined opacity = 0 until hover*/


             /*box-shadow: 0 0 7px #000;*/
}

.screenOutline {

    position: relative;
    float:left;

    /*important to hide oferflow from black background image */
    overflow:hidden;


    padding: 0;

    background:rgba(0, 0, 0, 1);
    box-sizing: border-box;
    border: 0px solid blue;

    width:95%;
    margin:0px 0% 0% 2.5%;
    top:10px;
    /*95/1.77 aspect ratio*/

      padding-bottom: 53.67%;

    opacity: 1;


}

/*.screenOutline img{

  position: absolute;
  float:left;

  margin:0;
  padding: 0;

  background:rgba(0, 0, 0, 1);
  box-sizing: border-box;
  border: 0px solid red;

  width:100%;
  padding-bottom: 53.67%;

  opacity: 1;

}*/

.screen {

  visibility: visible;

    position: absolute;
    float:left;
    overflow:hidden;


    padding: 0;

    background:rgba(0, 0, 0, 1);
    box-sizing: border-box;
    border: 0px solid purple;

    width:100%;
    margin:0px 0% 0% 0%;
    top:0px;
    /*95/1.77 aspect ratio*/
    /*height:auto;*/

      padding-bottom: 53.67%;


    opacity: .9999;


}


 .screen video {

    position: relative;
    float:left;
    /*overflow: show;*/

    margin:0;
    padding: 0;

    background:transparent;

    box-sizing: border-box;
    border: 0px solid red;

    width:100%;
    height: auto;

    /*95/1.77 aspect ratio*/
    /*height:53.67vw;*/

    opacity: 1;
    /*overflow: scroll;*/



}

/*header for page info*/
/*area at top of page to drop menu header to align with open button menuslidein.css*/
.blankTop{
width: 100vw;
height:20px;
background-color: #fff;
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;

}