html,body{font-family: 'Roboto', sans-serif; font-weight: 400; font-style: normal; font-size: 12px; background:transparent}
body{padding:75px 5px 5px 5px}
.pure-menu,h1,h2,h3{font-family: 'Oswald', serif; font-weight: 300; margin: 0; padding:0; text-transform: uppercase}
h1{font-size: 22px; line-height:28px}
h2{font-size: 20px}
h3,h4{font-weight: 500}
.playbtn{position: absolute; width:12%; top:50%; left:50%; margin:-6% 0 0 -6%; z-index: 5; cursor:pointer}
h2 a, .textblock a{color:#004fa3; text-decoration: none}
.left,.right{font-size: 20px; line-height: 40px; height:40px; background: #CCC; color:#FFF; cursor: pointer; position: relative}
.left i,.right i{font-style: normal}
.left a,.right a{position: absolute; top:0; left:0; right:0; bottom:0; z-index: 30; color:#FFF; text-decoration: none; display: inline-block}
.left span,.right span{padding:0 10px 0 10px}
.left b,.right b{font-family: 'Oswald', serif; font-weight: 300; font-size: 15px; line-height: 40px; text-transform: uppercase; display: inline-block; height:40px}
.left{text-align: left}
.right{text-align: right}
.filmnav .active, .filmnav .active{background: #78a2ce}
.filmnav .active:hover, .filmnav .active:hover{background: #004fa3}
.pure-menu-horizontal ul{background:transparent}
.textblock{padding:20px 0 20px 0; font-family: 'Roboto', sans-serif; font-weight: 400; color:#111; line-height: 20px; font-size: 14px}
.textblock h1{color:#5590ce; margin-bottom: 10px }
.esa .textblock{padding:20px 15px 20px 15px;}
.esa{background: url(/images/bg.png); padding:20px 0 20px 0}
.box h1{background:#004fa3; color:#FFF; padding:10px 15px 10px 15px; font-size: 18px; position: absolute; bottom:0; left:0; width:auto; margin:0}
.box h2 a{text-decoration: none; color:inherit}
#jump{width:57px; height:98px; position: absolute; right:5px; bottom:5px; z-index: 3; cursor:pointer}
.box h2{color:#004fa3}
.box span{color:#000}
.moblink{display:inline-block; position: absolute; z-index: 10; top:0; left:0; right:0; bottom:0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.moblink img{width:100%; height:100%}
#map-canvas{width:100%; height:400px}
strong{font-weight: 500}

.telnum{display: none !important}

.pure-menu{font-size: 14px}
#page{position: absolute; left:10px; top:80px; right:10px; bottom:auto; padding:15px}
#vidtest{position: absolute; bottom:0; left:10px; right:10px; z-index: 0; padding:15px}
.vidwrapper{width:100%; max-width:900px; margin:0 auto 0 auto; padding:0; position:relative;}
#menu{background:transparent; margin-left:110px; width:auto}
#menu-right{position: absolute; right:5px; top:25px; width:auto; margin-right: 5px}
#menu-right .pure-menu li{background:#78a2ce}
#menu-right .pure-menu li:hover a{background:#004fa3}
#menu-right .pure-menu .telnum{background:#5c74b8}
.box{width:100%; position: relative}
.padright,.pad{position:absolute; top:0; left:0; height:100%; width:5px; z-index:5; background:#FFF}
.padright{left:auto; right:0}
.pure-u-1{overflow: hidden}
#menuLink,#menu{-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.box .content .banner{position:relative; width:90%; padding:5%}
.box .content .banner span{ font-size: 14px; font-family: 'Roboto', sans-serif; font-weight: 400; font-style: italic}
#logo{ height:50px; width:85px; position: absolute; top:15px; left: 15px}
#logo img{width:100%}
.center{text-align: center}
.blue{position:absolute; z-index: 15; left:0; top:0; background: url(/images/blue2-80.png); opacity: 0; height:100%; width:100%}
.blue:hover{opacity: 1}
.hide{opacity: 0}
.categories .blue{opacity: 1}
.pure-menu a{color:#78a2ce}
.pure-menu .pure-menu-selected a{color:#004fa3}
.box:before{
	content: "";
	display: block;
	padding-top: 50%; 	/* initial ratio of 16:9*/
}

.client:before{
	content: "";
	display: block;
	padding-top: 60%; 	/* initial ratio of 16:9*/
}

.vidset:before{
	content: "";
	display: block;
	padding-top: 56.282%; 	/* initial ratio of 16:9*/
}
#vidblock{position: absolute; top:-5; left:-5; width:5; height:5; z-index: 15;	-webkit-transform: translate3d(0, 0, 0)}
.vidset{width:100%; position: relative}
.tall:before{
	padding-top: 104%; 	/* initial ratio of 16:9*/
}
.header{position:absolute; height:50px; padding:25px 0 0 0; width:100%; top:0; left:0; -webkit-font-smoothing: subpixel-antialiased; font-smoothing: subpixel-antialiased; background: #FFF}
.dark .header{background:#2f333d}
.dark #menu-right .pure-menu li{background:#000}
.dark .pure-menu a{color:#999}
.dark .pure-menu .pure-menu-selected a{color:#FFF}

.vidset,.box{overflow: hidden}
.box img{
	width: 100%;
	height: auto;
}
#ifplayer{height:100%; width:100%; padding:0; margin:0; background: transparent}
.dark{background: #2f333d}
.vidset .content,.box .content{
	position:  absolute;
	z-index: 5;
	top: 5px;
	left: 5px;
	bottom: 5px;
	right: 5px;
	cursor: pointer;
	overflow: hidden;

}


.pure-menu-link {
        display: none; /* show this only on small screens */
        right: 500px;

         background:inherit;

        font-size: 10px; /* change this value to increase/decrease button size */
        z-index: 13;
        width: 2em;
        height: auto;
        padding: 2.0em 1.5em;
    }
.pure-menu-link.active{right:142px;}
#menu.active{margin-left: -140px}




        .pure-menu-link:hover,
        .pure-menu-link:focus {

        }

        .pure-menu-link span {
            position: relative;
            display: block;
        }

        .pure-menu-link span,
        .pure-menu-link span:before,
        .pure-menu-link span:after {
            background-color: #FFF;
            width: 100%;
            height: .3em;
            -webkit-transition: all 0.6s;
               -moz-transition: all 0.6s;
                -ms-transition: all 0.6s;
                 -o-transition: all 0.6s;
                    transition: all 0.6s;
        }

            .pure-menu-link span:before,
            .pure-menu-link span:after {
                position: absolute;
                margin-top: -.6em;
                content: " ";
            }

            .pure-menu-link span:after {
                margin-top: .6em;
            }

        .pure-menu-link.active span {
            background: transparent;
        }

            .pure-menu-link.active span:before {
                -webkit-transform: rotate(45deg) translate(.5em, .4em);
                   -moz-transform: rotate(45deg) translate(.5em, .4em);
                    -ms-transform: rotate(45deg) translate(.5em, .4em);
                     -o-transform: rotate(45deg) translate(.5em, .4em);
                        transform: rotate(45deg) translate(.5em, .4em);
            }

            .pure-menu-link.active span:after {
                -webkit-transform: rotate(-45deg) translate(.45em, -.35em);
                   -moz-transform: rotate(-45deg) translate(.45em, -.35em);
                    -ms-transform: rotate(-45deg) translate(.45em, -.35em);
                     -o-transform: rotate(-45deg) translate(.45em, -.35em);
                        transform: rotate(-45deg) translate(.45em, -.35em);
            }





.vidset .content{top:0; left:0; bottom:0; right:0}
.telnum,#menuLink,#menu,.blue{
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

body,.header,.pure-menu a,.slowanim{
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.client .content{background: no-repeat center center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  top:15px; right:15px; left:15px; bottom:15px; border:4px solid #e5e5e5}

#vidblock,.bgcover{
	background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover}

 .fixed{position: fixed}
 .top{z-index: 10}
 .bottom{z-index: -1}

 @media (max-width:768px) {
.box:before, .tall:before{
	padding-top: 62%;
}
.vidset:before{
	content: "";
	display: block;
	padding-top: 60.5%; 	/* initial ratio of 16:9*/
}

.pure-menu li a{padding:0 10px 0 10px}

#logo{height:40px; width:68px}
body{padding-top:60px}
.header{height:60px}
.box h1{font-size: 14px}

.box .content h1{padding:4px 11px 4px 11px}

}

@media (max-width:570px) {



}

/* pure-hidden-md */
@media screen and (min-width:768px) and (max-width:1023px) {
      .pure-hidden-md{display:none}
       .pure-menu .pure-hidden-md{display:none}
        .header{height:45px;}
 .categories .content h2{font-size: 14px;}
.projects .content h2{font-size: 15px; background:url(/images/white90.png); width:auto; display:inline-block; padding: 5px 10px 5px 10px; position: absolute; left:0; top:0}
.projects .blue{background:transparent; opacity: 1}
.esa .textblock{padding:20px 0 20px 0}
}

/* pure-hidden-sm */
@media screen and (max-width:767px) {

    .pure-hidden-sm{display:none}
    .pure-menu .pure-hidden-sm{display:none}
#page{top:65px}
    #menu{position:absolute; left:100%; right:auto; top:15px; z-index: 15; width:200px; background: #FFF }
#menu li{width:100%; height:43px; margin-bottom: 0; margin-bottom: 2px; color:#9a9a9a;}
.pure-menu-link {
        position: fixed;
        top:11px;
        right:15px;
        display: block;
        background: #004fa3;
        z-index: 15;
    }
    .header{height:40px; position: fixed; top:0; left:0}

.vidset:before{
	content: "";
	display: block;
	padding-top: 55.5%; 	/* initial ratio of 16:9*/
}
.esa .textblock{padding:20px 0 20px 0}
.blue{z-index: 5}
#menu-right{right:70px; top:18px}
.categories .content h2{font-size: 14px;}
.projects .content h2{font-size: 15px; background:url(/images/white90.png); width:auto; display:inline-block; padding: 5px 10px 5px 10px; position: absolute; left:0; top:0}
.projects .blue{background:transparent; opacity: 1}

}
/*

/* pure-hidden-lg */
@media screen and (min-width:1024px) and (max-width:1279px) {
      .pure-hidden-lg{display:none}
      .pure-menu .pure-hidden-lg{display:none}
}
/* pure-hidden-xl */
@media screen and (min-width:1280px) {
    .pure-hidden-xl{display:none}
    .pure-menu .pure-hidden-xl{display:none}
}