@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) {

  .squareHolderAGENCY {
    font-size: .5em;
  }

}

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

  body .squareHolderAGENCY {

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

  }

  .squareHolderAGENCY {
    font-size: 1.6em;
  }


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

  body .squareHolderAGENCY {

    max-width: 50%;
    width:45vw;
    height:67vw;
    float:left;

  }

  .squareHolderAGENCY {
    font-size: 1.6em;
  }

}

@media (min-width: 720px) {

  .squareHolderAGENCY {
    font-size: 1.6em;
  }
}

/*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 .outsideBoxAGENCY{

  /* margin: 40px auto 0px auto;
  width: 1200px; */


  display:block;

  padding: 0px;
  margin: 0px;

  /*border: 1px solid blue;*/

  position: relative;

  width: 90vw;

  margin: 20px auto 0px auto;

}

body .squareHolderAGENCY {

  /* width: 400px;
  height:560px; */

  width: 30vw;
  height:45vw;

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

  }

  .squareHolderAGENCY {
    font-size: 1.6em;
  }

}

body{
  /*position: static;*/
  /*border: 2px solid blue;*/
  /*padding: 0px;
  margin-top:0%;*/
  background-color: #ffffff;
  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: 5px 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: #111;

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

}


.outsideBoxAGENCY{
  position: relative;
  /*box-sizing: border-box;*/
  /* border: 5px solid yellow; */

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

  max-width: 100%;

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

  /*left:5%;*/

  margin: 20px auto 0px auto;


}

.outsideBoxAGENCY 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: center;
 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-family: "Lato";
 font-weight: 900;

}

.outsideBoxAGENCY 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: #111;
 text-align: center;
 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-family: "Lato";
 font-weight: 400;

}

.squareHolderAGENCY{


  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: 5px solid blue; */

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

    margin: 0px auto 15px auto;

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

}

p{
margin:0;
padding: 0;
  position:relative;
  color:#000000;
  top:97%;
  border: 0px solid blue;
  z-index: 1;

  /* text-shadow: -1px 0px 1px #333; */

}

/*centre image in div*/
  .projectImageCentreAGENCY {

        position: absolute;

        border: 0px solid blue;

        /*transforms scale to 300% of parent;
        keeping aspect ratio*/
        width: 95%;
        height:95%;
        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;
    }

    .projectText1AGENCY  {


      /*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: 5%;
        margin-left: 0%;
        margin-right: 5%;
        padding: 0px;

        text-align: center;

        /*left: 50%;*/
        top:0px;


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

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

           /* text-transform:uppercase; */

        font-size: 2.3em;
         font-weight: bold;

         /* line-height: 1;
         letter-spacing: .15rem; */
         color: #C04000;
         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;
      }