@media screen and (orientation: portrait) {

#bkvideo video {
	position:absolute;
	top:0;
	left:50%;
	min-width:100%!important;
	width:auto!important;
	height:100vh!important;
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	transform:translateX(-50%);	
}
}
@media (max-width: 1200px) {
#word-holder {
	bottom:40px;
	left:10%;
	width:80%;
	}
#logo-holder,
#top-logo {
	top:60px;
}
#welcome .half ul li {
	line-height:120%;
	margin:0 0 2px 0;
}
#welcome .half h2 { 
	margin:5px 0 0 0;
}
.tale {
	padding:10px;
    gap: 5px 0px;
}
.lm {
	letter-spacing:1px;
	padding:5px;
}
#mainlogo {
	width:75px;
	top:20px
}
}
@media (max-width: 1024px) {
#word-holder {
	bottom:40px;
	left:1%;
	width:98%;
	}
#logo-holder,
#top-logo {
	top:100px;
	width:auto;
	height:60vh;
}
#clients.open,
#examiner.popped {
	border-width:20px;	
}
#skills div,
#innerclients div {
	padding:5px;
	margin-right:5px;
	margin-bottom:5px;
	border-radius:5px;
}
}
@media (max-width: 800px) {
#word-holder {
	bottom:10%;
	}
#logo-holder {
	position:absolute;
	top:auto;
	bottom:25%;
	left:50%;
	width:46vw;
	height:auto;
	text-align:left;
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	transform:translateX(-50%);	
	transition: all 300ms  ease-in;
	z-index:3;
	
}
#top-logo{
	position:absolute;
	top:auto;
	bottom:25%;
	left:50%;
	width:46vw;
	height:auto;
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	transform:translateX(-50%);	
	
}	
.mask {
	background-image:url(../img/mask-640.png);
	background-size:cover;
	background-repeat:no-repeat;
}
}
@media (max-width: 768px) {
#mainlogo {
	width:60px;
	top:20px
}
#word-holder {
	bottom:12%;
	}
#word-holder .st1 {
	fill:rgb(var(--white-white));
	}
.mask {
	background-image:url(../img/mask-640.png);
	background-size:cover;
	background-repeat:no-repeat;
}
#site0 .descrip{
	background:url('../img/aobw-small.jpg');
	  background-size:auto 100%;
	  background-position:center center;
	  background-repeat:no-repeat;	  
	  }
#site0 .descrip-inner {
	background:url('../img/aocolor-small.jpg');
	background-size:auto 100%;
	background-position:center center;
	background-repeat:no-repeat;
}
#site1 .descrip{
	background:url('../img/gccbkg-small.jpg');
	  background-size:auto 100%;
	  background-position:60% center;
	  background-repeat:no-repeat;	  
	  }
#site1 .descrip-inner {
	background:url('../img/gccbkg2-small.jpg');
	background-size:auto 100%;
	background-position:60% center;
	background-repeat:no-repeat;
}	
#site2 .descrip{
	background:url('../img/iimsambkg-small.jpg');
	  background-size:auto 100%;
	  background-position:center center;
	  background-repeat:no-repeat;	
}
#site2  .descrip-inner {	
	background:url('../img/iimsambkg2-small.jpg');
	background-size:auto 100%;
	background-position:center center;
	background-repeat:no-repeat;
}
#site3 .descrip{
	background:url('../img/csrcbkg-small.jpg');
	  background-size:auto 100%;
	  background-position:60% center;
	  background-repeat:no-repeat;	
		}
#site3  .descrip-inner {	
	background:url('../img/csrcbkg2-small.jpg');
	background-size:auto 100%;
	background-position:60% center;
	background-repeat:no-repeat;
}
#site4 .descrip{
	background:url('../img/mmbkg-small.jpg');
	  background-size:auto 100%;
	  background-position:center center;
	  background-repeat:no-repeat;
		}
#site4  .descrip-inner {	
	background:url('../img/mmbkg2-small.jpg');
	background-size:auto 100%;
	background-position:center center;
	background-repeat:no-repeat;
}

#site6 .descrip{
	background:url('../img/bluelinebkg-small.jpg');
	 background-size:auto 100%;
	  background-position:center center;
	  background-repeat:no-repeat;	
		}
#site6  .descrip-inner {	
	background:url('../img/bluelinebkg2-small.jpg');
	background-size:auto 100%;
	background-position:center center;
	background-repeat:no-repeat;
}
#site5 .descrip{
	background:url('../img/confbkg-small.jpg');
	  background-size:auto 100%;
	  background-position:center center;
	  background-repeat:no-repeat;	
		}
#site5  .descrip-inner {	
	background:url('../img/confbkg2-small.jpg');
	background-size:auto 100%;
	background-position:center center;
	background-repeat:no-repeat;
}
#site7 .descrip{
	background:url('../img/meltzerbkg-small.jpg');
	  background-size:auto 100%;
	  background-position:center center;
	  background-repeat:no-repeat;	
		}
#site7  .descrip-inner {	
	background:url('../img/meltzerbkg2-small.jpg');
	background-size:auto 100%;
	background-position:center center;
	background-repeat:no-repeat;
}
#site8 .descrip{
	background:url('../img/rootsbkg-small.jpg');
	  background-size:auto 100%;
	  background-position:center center;
	  background-repeat:no-repeat;	
		}
#site8  .descrip-inner {	
	background:url('../img/rootsbkg2-small.jpg');
	background-size:auto 100%;
	background-position:center center;
	background-repeat:no-repeat;
}
#site9 .descrip{
	background:url('../img/fourbkg-small.jpg');
	  background-size:auto 100%;
	  background-position:35% center;
	  background-repeat:no-repeat;	
		}
#site9  .descrip-inner {	
	background:url('../img/fourbkg2-small.jpg');
	background-size:auto 100%;
	background-position:35% center;
	background-repeat:no-repeat;
}

}
@media (max-width: 600px) {
#word-holder {
	bottom:15%;
	}
#mainlogo {
	width:45px;
	top:14px;
	left:20px;
}
.titlebox {
	left:20px;
	top:15%;
	bottom:15%;
	width:calc(100% - 40px);
	height:auto;
}
#toggle-menu {
	position:fixed;
	right:20px;
	top:28px;
	width:40px;
	height:7px;
	background:rgb(var(--blackish));
	display:block;
	z-index:80001;
	cursor:pointer;
	visibility:visible;
	transition: all .5s ease-in;
	border:0px solid #000;
	outline:0px solid #000;
	margin:0;
	padding:0;
	opacity:0;	
	}
body.sticky #toggle-menu {
	opacity:1;	
	transition: all .5s  ease-in;
	}
body.sticky #toggle-menu:before {
	content:"";
	position:absolute;
	top:-14px;
	left:0;
	width:40px;
	height:7px;
	background:rgb(var(--blackish));
	display:block;
	z-index:3;
	-webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
	transition: all .5s ease-in;
	}
body.sticky #toggle-menu:after {
	content:"";
	position:absolute;
	top:14px;
	width:40px;
	height:7px;
	background:rgb(var(--blackish));
	display:block;
	z-index:3;
	-webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
	transition: all .5s ease-in;
	}
body.sticky #toggle-menu.exed { 
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
	-webkit-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	transform-origin:50% 50%;
	transition: all .5s ease-in;
	
	}
body.sticky #toggle-menu.exed:before {
	content:"";
	position:absolute;
	top:0px;
	left:0;
	width:40px;
	height:7px;
	background:rgb(var(--blackish));
	display:block;
	z-index:3;
	-webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
	-webkit-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	transform-origin:50% 50%;
	transition: all .5s ease-in;
	
	}
body.sticky #toggle-menu.exed:after {
	content:"";
	position:absolute;
	top:0px;
	width:40px;
	height:7px;
	background:rgb(var(--blackish));
	display:block;
	z-index:3;
	-webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	transform:rotate(-90deg);
	-webkit-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	transform-origin:50% 50%;
	transition: all .5s ease-in;
	
	}
nav,
body.sticky nav {
  display:none;	
	}
#mobilemenu {
	position:fixed;
	top:0;
	right:0;
	width:0;
	height:0;
	padding-top:0;
	background:rgb(var(--coral));
	display:block;
	z-index:2;
	border:0px solid rgb(var(--white-white));
    border-radius: 100% 0 100% 100%;
	visibility:hidden;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
	transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	-webkit-transform-origin:100% 0%;
	-moz-transform-origin:100% 0%;
	-ms-transform-origin:100% 0%;
	transform-origin:100% 0%;
	}
#mobilemenu.sprung {	
	width:80%;
	/*padding-top:70%;*/
	height:auto;
	visibility:visible;
	z-index:80000;
	border:3px solid rgb(var(--white-white));
	border-radius:0;
	transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	-webkit-transform-origin:100% 0%;
	-moz-transform-origin:100% 0%;
	-ms-transform-origin:100% 0%;
	transform-origin:100% 0%;
	}

#links {
	position:relative;
	margin-left:10%;
	margin-top:20px;
	width:auto;
	height:auto;
	text-align:left;
	}
#links a {
	font-family: 'Raleway', 'Helvetica', sans-serif;	
	font-size:var(--smallest);
	font-weight:600;
	line-height:100%;
	text-transform:uppercase;
	letter-spacing:2px;
	color:rgba(var(--blackish));
	display:block;
	cursor:pointer;	
	padding:8px;
	margin-bottom:15px;
	border-left:4px solid rgb(var(--teal));
	}
#links a:hover {
	border-left:4px solid rgb(var(--white-white));
	}
header, #footer, section, .site {
	position:relative;
	float:left;
	clear:both;
	width:100vw;
	height: auto;
	min-height:100%;
	padding:0px;
	margin:0px;	
	display:block;	
	overflow-x:hidden;
	z-index:1;
	}
#footer {
    -webkit-box-pack:  space-around;
      -ms-flex-pack: space-around;
          justify-content:  space-around;
    -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;	
	 -ms-flex-line-pack:center;	
	     align-content:center;
	 -ms-flex-wrap: wrap;
	     flex-wrap: wrap;
	padding:90px 20px;
}

#testimonials  {
    -webkit-box-pack:  space-around;
      -ms-flex-pack:  space-around;
          justify-content:  space-around;
    -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;	
	 -ms-flex-line-pack:center;	
	     align-content:center;
	 -ms-flex-wrap: wrap;
	     flex-wrap: wrap;
	padding:70px 5%;
}
#bubble {
	margin:0% 10%;
	width:80%;
	
}
#copy {
	text-align:left;
	right:auto;
	left:20px;
	bottom:20px;
	line-height:110%;
	}
#copy span {
	display:block;
	height:1px;
	width:1px;
	background:transparent;
	color:transparent;
	clear:right;
	}
#copy a {
	display:inline-block;
	margin-top:10px;
	margin-left:0px;
}
#testimonials .half:first-of-type
.foot-left {
	padding-right:0;
	padding-bottom:20px;
	flex: 1 0 100%;
	width:100%;
	
}
.foot-left {
	padding-left:30px;
	padding-right:30px;	
	}


#testimonials .half:last-of-type,
.foot-right {
	flex: 1 0 100%;
	width:100%;
}
#testimonials .half:first-of-type {
	text-align:center;
	margin:0;
	padding:0;
	}
#testimonials h1 {
	margin-bottom:15px;
	}
#nay {
	display:none;
}
#nay2 {
	display:inline-block;
	filter:saturate(0);
	transition:all 1s ease-in;
	position:relative;
	float:left;
	max-width:25%;
	margin:0 10px 10px 0;
}
#testimonials.bounced #nay2 {
	filter:saturate(.9);
	transition:all .5s ease-in 1.5s;
}
#testimonials p {	
	font-size:var(--tiny);
}

#innerclients div {
	padding:0;
	margin-right:3px;
	margin-bottom:3px;
	border-radius:0;
	border:none;
}
#footer h1 {
	font-size:var(--md-title);
}

}
@media (max-width: 480px) {
#open {
		display:none;
	}
#worktitle {	
	background:rgba(var(--blackish),.4);
	padding:8px;
	border-left:3px solid rgb(var(--coral));
	color:rgb(var(--white-white));
}

#worktitle::before {
	display:none;
}

#sitetitle,
#casetitle {
	color:rgb(var(--white-white));
	background:rgba(var(--blackish),.4);
	padding:8px;
	}
#sitetitle {
	border-left:3px solid rgb(var(--coral));
	bottom:calc(1.2rem + 12px);
	}
#mast {
	width:100vw;
	height:100vh;
	position: absolute;
	top: 0;
	bottom:0;
	left:0;	
	right:0;
	background:rgb(var(--teal));	
	border-color:rgb(var(--white-white));
	border-width:10px;	
}
#mast.flipped {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100vw;
	height:100vh;
	background:rgb(var(--teal));
	border-color:rgb(var(--white-white));
	border-width:10px;	
}
#word-holder {
	bottom:25%;
	}
#logo-holder {
	position:absolute;
	top:auto;
	bottom:35%;
	left:50%;
	width:76vw;
	height:auto;
	text-align:left;
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	transform:translateX(-50%);	
	transition: all 300ms  ease-in;
	z-index:3;
}
#top-logo,
#mast.flipped #top-logo{
	position:absolute;
	top:auto;
	bottom:35%;
	left:50%;
	width:76vw;
	height:auto;
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	transform:translateX(-50%);	
	
}


button.shut {
	top:10px;
	right:10px;
}
#divider,
#indicator,
.dot {
		display:none;
	}
#welcome {
		background:rgb(var(--whitish));
	}
.mask {
	background-image:url(../img/mask-320.png);
	background-size:cover;
	background-repeat:no-repeat;
}
#content {
	position:absolute;
	width: 100%;
	top:0;	
    right:0;
}
#content-inner {
	padding:20px 31px 0px 15px;
}
.siteholder {
	position:absolute;
	top:0;
	left:0;
	width:200vw;
	height:100vh;
	height: calc(var(--vh, 1vh) * 100);
}
.descrip {
	left:0;
	width:100vw;
}
.siteholder.moved > .descrip {
	left:-100vw;
	
}
.pages {
	left:100vw;
	width:100vw;
}
.siteholder.moved > .pages {
	left:0;
}
.titlehalf {
	width:100vw;
	z-index:52999;
}
.titlebox {
	top:15%;
	bottom:90px;
	width:calc(100% - 80px);
}
.portmove {
	top:auto;
	bottom:20px;
	left:50%;
	width:50px;
	height:50px;
	margin-left:-25px;
	-webkit-transform:translateY(0%);
	-moz-transform:translateY(0%);
	-ms-transform:translateY(0%);
	transform:translateY(0%);	
}
.descrip > .closethis {
	display:none;
	visibility:hidden;
	opacity:0;
	}
.pages > .closethis {
	display:block;
	top:14px;
	bottom:auto;
	left:auto;
	right:50vw;
	width:50px;
	height:50px;
	margin-right:-25px;
	-webkit-transform:translateY(0%);
	-moz-transform:translateY(0%);
	-ms-transform:translateY(0%);
	transform:translateY(0%);	
}
.pagewrap {
	margin-top:75px;
	width:100vw;
	height:calc(100% - 75px);
	overflow:hidden;
}
.ss-content {
	padding:0px 58px 85px 20px;
}
#welcome {	
	height: auto;
	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
    -webkit-box-pack: space-between;
      -ms-flex-pack: space-between;
          justify-content: space-between;
    -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;	
	 -ms-flex-line-pack:center;	
	     align-content:center;
	 -ms-flex-wrap: wrap;
	     flex-wrap: wrap;
	padding:70px 5%;
}
#welcome .half {
	position:relative;
	width:100%;
	height:auto;
	flex: 1 0 100%;
	text-align:center;
	margin-top:0px;
	opacity:0;
}
#welcome .half:first-of-type {
	border-right:0px solid rgb(var(--blackish));
	padding:0px 15px;
}
#welcome .half:last-of-type {
	padding:0px 15px;
}
.servicon {
	width:20%;
	min-width:40px;
}
#welcome .half ul li {
	line-height:110%;
	margin:0 0 2px 0;
}
#welcome .half h2 { 
	margin:0 0 0 0;
}
#welcome p {
	margin-top:0;
	font-size:var(--tiny);
	}
#welcome h1 {
	margin-bottom:0;
	padding-bottom:0;
	} 
#kudos  {
    -webkit-box-pack:  space-around;
      -ms-flex-pack:  space-around;
          justify-content:  space-around;
    -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;	
	 -ms-flex-line-pack:center;	
	     align-content:center;
	 -ms-flex-wrap: wrap;
	     flex-wrap: wrap;
	padding:70px 5%;
}

#kudos .half:first-of-type {
	padding-right:0;
	padding-bottom:20px;
	flex: 1 0 100%;
	width:100%;
	
}

#kudos .half:last-of-type {
	flex: 1 0 100%;
	width:100%;
}
.foot-left {
	padding-left:15px;
	padding-right:15px;	
	}
#bubble {
	margin:0% 0%;
	width:100%;
	
}
#bubble-content {
	position:absolute;
	top:50%;
	left:50%;
	width:auto;
	height:auto;
	display:block;
	-webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
	line-height:100%;
	
}
}