@import "http://webfonts.ru/import/notcourier.css";
/*@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import "https://fonts.googleapis.com/css?family=Montserrat";*/
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,200,400,900');
/*@import url('https://fonts.googleapis.com/css?family=Montserrat:100,400');*/
/*@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,400,900');*/
@import "https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,400,900";
/*Rules applied for any browser width greater than
the value defined in the query.
iphone
and (min-device-width : 320px)
and (max-device-width : 568px) */
@media (min-width: 400px) {

  .squareHolder {
    font-size: 1em;
  }

}

/*when width is greater than this display 2 images*/
@media (min-width: 360px) {

  body .squareHolder {

    max-width: 50%;
    /*outside box is 90% of view width 90/2 = 45*/
    /*45%of window=2 images*/
    width:45vw;
    height:45vw;

  }

  .squareHolder {
    font-size: 1em;
  }


}
@media (min-width: 700px) {

  body .squareHolder {

    max-width: 33.3%;
    width:30vw;
    height:30vw;
    float:left;

  }

  .squareHolder {
    font-size: 1em;
  }

}

@media (min-width: 720px) {

  .squareHolder {
    font-size: 1em;
  }
}

/*min-width
Rules applied for any browser width greater than
the value defined in the query.
*/

/*dont let images grow any bigger after 1200px*/
@media only screen and (min-width: 1200px) {

body .outsideBox{

  margin: 10px auto 0px auto;
  width: 1200px;

}

body .squareHolder {

  width: 400px;
  height:400px;

  /*The value auto in the margin property sets the
  left and right margins to the available space within the page.
  0=top and bottom margins */

  }

  .squareHolder {
    font-size: 1.6em;
  }

}

body{
  /*position: static;*/
  /*border: 2px solid blue;*/
  /*padding: 0px;
  margin-top:0%;*/
  background-color: #111;
  padding: 0px;
  margin: 0px;

/*background-image: url("../images/background/paperGreen.jpeg");*/
}

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


position:relative;
padding: 0px;
margin: 0px;

}

/*h are block elements*/
h1.pageHead {


  border: 0px solid blue;

display:block;

padding: 0px;
margin: 0px;

/*border: 1px solid blue;*/

position: relative;

width: 90vw;

margin: 20px auto 0px auto;


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

height: auto;

}

/*text in header*/
span.pageHeadName{
  width 200%;

  margin-right: 20px;

  /*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:"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;

}



.outsideBox{
  position: relative;
  /*box-sizing: border-box;*/
  border: 0px solid yellow;

/*fit height to content*/
  display:block;
  overflow:auto;

  max-width: 100%;

  /*float: left;*/
  width: 90vw;

  /*left:5%;*/

  margin: 20px auto 0px auto;

}

.squareHolder{


  position: relative;

  padding: 0px;

    /*background-color: lightblue;*/

    /*ensures border is on inside doesn't add px to div-not for ie8*/
    box-sizing: border-box;
    border: 0px solid blue;

    /*max-width: 100%;*/
    float: left;
    width: 100%;
    /*left:5%;*/

    margin: 0px auto 0px auto;

    /*outsidebox is 90% of view*/
    height:90vw;

}

p{
margin:0;
padding: 0;
  position:absolute;
  color:white;
  top:50%;
  border: 0px solid blue;
  z-index: 1;

}

/*centre image in div*/
  .projectImageCentre {

        position: absolute;

        border: 0px solid blue;

        /*transforms scale to 300% of parent;
        keeping aspect ratio*/
        width: 100%;
        height:100%;
        text-align: center;
        top:  50%;

        /*down a % of parent element*/


        /*translate percentage is of element : 50% of text itself is moved left and up
        default text position is of top_left point of element*/
        transform: translateX(-0%) translateY(-50%) ;
        -ms-transform:  translateX(-0%) translateY(-50%); /* IE 9 */
        -webkit-transform:  translateX(-0%) translateY(-50%) scale(1); /* Safari */

        opacity:1;

        z-index: 0;
    }

    .projectText1  {


      /*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 .1s ease-in-out;

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

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

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

      position: absolute;
      display:inline-block;
      float: right;


      width:auto;
      border: 0px solid blue;

        margin-top: 5px;
        margin-left: 5px;
        padding: 0px;

        /*left: 50%;*/
        top:0px;
        /*down a % of parent element*/
        /*translate percentage is of element : 50% of text itself is moved left and up
        default text position is of top_left point of element*/
        /*transform: translateX(-50%) translateY(-50%);
        -ms-transform:  translateX(-50%) translateY(-50%); /* IE 9 */
        /*-webkit-transform:  translateX(-50%) translateY(0%); /* Safari */*/

        font-size: 2.3em;

        /*background-image: url("../images/background/background1.png");*/
        /*background-color: rgba(0,0,0,1);*/
          /*background-blend-mode:   exclusion;*/

         line-height: 1.5;
         letter-spacing: .15rem;
         color: #fff;
         text-shadow: -1px 0px 1px #333;

         -webkit-text-size-adjust: none;
         -webkit-font-smoothing: antialiased;
         text-rendering: optimizeLegibility;
         /*font opacity zero until hover*/
         opacity: 0;
      }

  /*seperate font type classes within .projectText1
  called two different ways (.projectType)*/
  span.projectName {

   width 200%;

   /*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: 200;

   text-transform:uppercase;

        color: #fff;

        border: 0px solid blue;
        font-size: 1em;
      }
  /*project type theatre dance etc font*/
  .projectText1 .projectType {
              position: relative;
              border: 0px solid purple;

              display:block;

              color: #fff ;
              font-family: "Lato";
              font-weight: 400;


              /*font-weight: bolder;*/

              font-size: 1em;

              text-align: left;
            }

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

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


        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        border: 0px solid blue;
        border-radius: 0%;
        transform: scale(1);
        -ms-transform:  scale(1);
        -webkit-transform:  scale(1);

  /*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 140px #000,
                     inset 0 0 100px #000,
                     inset 0 0 40px #000;

          -moz-box-shadow:
             inset 0 0 140px #000,
                     inset 0 0 100px #000,
                     inset 0 0 40px #000;

          -o-box-shadow:
           inset 0 0 140px #000,
                   inset 0 0 100px #000,
                   inset 0 0 40px #000;

           -ms-box-shadow:
                   inset 0 0 140px #000,
                           inset 0 0 100px #000,
                           inset 0 0 40px #000;

          box-shadow:
          inset 0 0 140px #000,
                  inset 0 0 100px #000,
                  inset 0 0 40px #000;


                  -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;*/


      }


    /*used as a mask over image and text so both can be hovered over*/
.projectImageMask {

            position: absolute;

            border: 0px solid blue;

            /*transforms scale to 300% of parent;
            keeping aspect ratio*/
            width: 100%;
            height:100%;
            text-align: center;
            top:  50%;

            /*down a % of parent element*/


            /*translate percentage is of element : 50% of text itself is moved left and up
            default text position is of top_left point of element*/
            transform: translateX(-0%) translateY(-50%) ;
            -ms-transform:  translateX(-0%) translateY(-50%); /* IE 9 */
            -webkit-transform:  translateX(-0%) translateY(-50%) scale(1); /* Safari */

            opacity:0;

            z-index: 2;
        }



        /*CASE SENSITIVE NAMES OF CLASS*/
              .squareHolder:hover  {
                 opacity: 0.7;
                 font-family: "futura-pt";


              }

              .squareHolder:hover img {
                 opacity: 1;
                 background-color: rgba(155, 1, 0, 0);
                 font-family: "futura-pt";

              }
              /*  >  when square is hovered effect another class
              that is child*/
                    .squareHolder:hover > .projectText1 {
                    opacity: 1;
                    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
                    filter: alpha(opacity=100);

                    -webkit-transform: opacity(1);
                    -moz-transform: opacity(1);
                    -o-transform: opacity(1);
                    -ms-transform: opacity(1);
                    transform: opacity(1);
                    /*color: rgba(280, 150, 10, 1);*/
                    }

                    /* '~''  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. */

                    .squareHolder:hover > .vignette {

                         display: block;
                         opacity: 0.6;

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

                       }