/******** BROWSER CSS RESET *************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	/*** Include Padding/Borders in width for all elements ***/
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* Responsive images & embedded objects (remove for image cropping) */
img, object, embed { max-width: 100%; }

/****** GLOBAL ELEMENT CSS ******/
html * { max-height: 999999px; } /* Android mobile font sizing fix */


body { margin:0; background:url('../images/background-dots.png') repeat-x 0 100px #fff; font-family: 'Roboto', sans-serif; color:#666; font-size:20px; }

img { border:0; }
div.clear { clear:both; }

h1, h2, h3, h4, p { margin:0 0 20px 0; padding:0; }

h1 { font-size:40px; font-weight:300; text-align:center; }
h3 { font-size:20px; font-weight:400; }

a.btn { display:inline-block; width:329px; height:auto; color:#fff; font-weight:700; font-size:20px; text-align:center; text-decoration:none; padding:15px 0; }
a.btn::after { content:" >"; opacity:0.5; font-family: 'Roboto Condensed'; }
.ltblue { background:#0999e9; }
.drkblue { background:#253b4e; }
.midblue { background:#49759b; }

.fadeaway { background:red; }

#anim-container-mobile { display:block; width:100%; max-width:880px; margin:0 auto; position:relative; overflow:hidden; }
#acm-pad { margin:0 20px; }
#acm img { display:block; width:100%; cursor:pointer; }

a.recog-click { position:absolute; top:0; left:0; z-index:10; width:33%; height:100%; display:block; }
a.clients-click { position:absolute; top:0; left:33%; z-index:10; width:37%; height:100%; display:block; }
a.praise-click { position:absolute; top:0; left:70%; z-index:10; width:30%; height:100%; display:block; }


#mobile-r { width:382px; height:398px; position:absolute; top:76px; left:30px; z-index:30; opacity:0.9; cursor:pointer; }
#mobile-c { width:576px; height:414px; position:absolute; top:0px; left:322px; z-index:20; cursor:pointer; }
#mobile-p { width:353px; height:376px; position:absolute; top:65px; left:848px; z-index:10; cursor:pointer; }


#anim-container { display:none; width:1240px; margin:0 auto; position:relative; }

div.inner { width:100%; /*height:540px;*/ position:relative; }

#start-r { width:382px; height:398px; position:absolute; top:76px; left:30px; z-index:30; opacity:0.9; cursor:pointer; }
#start-c { width:576px; height:414px; position:absolute; top:0px; left:322px; z-index:20; cursor:pointer; }
#start-p { width:353px; height:376px; position:absolute; top:65px; left:848px; z-index:10; cursor:pointer; }

/*#icon-r img, #icon-c img, #icon-p img { width:100%; }
.sho { display:block; }
.nosho { display:none; }*/

/*.start-r { position:absolute; top:76px; left:30px; z-index:30; opacity:0.9; cursor:pointer; }
.start-c { position:absolute; top:0px; left:322px; z-index:20; cursor:pointer; }
.start-p { position:absolute; top:65px; right:38px; z-index:10; cursor:pointer; }*/


ul.squaresul { list-style-type:none; margin:0 0 40px 0; padding:0; }
ul.squaresul li { display:inline-block; width:100px; height:100px; background:#fff; padding:10px; text-align:center; margin:0 15px 0 0; vertical-align:top; }
ul.squaresul li img { width:100%; display:block; }
ul.squaresul li div { display:table-cell; width:80px; height:80px; vertical-align:middle; }


#screen-recognition { width:1240px; /*height:540px;*/ position:absolute; top:0; left:0; z-index:9; display:none; color:#24384a !important; }
div.recognition-guts { width:1070px; /*height:473px;*/ margin:70px auto 0 auto; /*background:rgba(9,153,233,0.35);*/ padding:100px 50px 0 50px; }
div.recognition-details { margin:130px 0 0 0; height:170px; }
div.recognition-details .slideshow-recog { height:170px; }
div.recognition-details .slideshow-recog .slide { width:970px !important; height:170px; text-align:center; }
div.recognition-details h2 { font-weight:300; font-size:30px; text-align:center; margin-bottom:10px; }
img.smallclients-r { position:absolute; z-index:20; top:12px; left:929px; width:179px; height:128px; cursor:pointer; }
img.smallpraise-r { position:absolute; z-index:10; top:32px; left:1091px; width:110px; height:117px; cursor:pointer; }
img.midsizer-r { position:absolute; z-index:30; top:36px; left:46px; width:299px; height:311px; opacity:1; cursor:default; }


#screen-clients { width:1240px; /*height:540px;*/ position:absolute; top:0; left:0; z-index:9; display:none; color:#24384a !important; }
div.clients-guts { width:1070px; /*height:473px;*/ margin:70px auto 0 auto; /*background:rgba(37,59,78,0.30);*/ padding:100px 50px 0 50px; }
div.clients-details { margin:130px 0 0 0; height:170px; }
div.clients-details .slideshow-clients { height:170px; }
div.clients-details .slideshow-clients .slide { width:970px !important; height:170px; }
div.clients-details h2 { font-weight:300; font-size:30px; text-align:center; margin-bottom:10px; }
img.smallrecognition-c { position:absolute; z-index:10; top:36px; left:841px; width:118px; height:123px; cursor:pointer; }
img.smallpraise-c { position:absolute; z-index:10; top:32px; left:1091px; width:110px; height:117px; cursor:pointer; }
img.midsizec-c { position:absolute; z-index:20; top:0px; left:0px; width:410px; height:295px; cursor:default; }


#screen-praise { width:1240px; /*height:540px;*/ position:absolute; top:0; left:0; z-index:9; display:none; color:#24384a !important; }
div.praise-guts { width:1070px; /*height:473px;*/ margin:70px auto 0 auto; /*background:rgba(73,117,155,0.30);*/ padding:100px 50px 0 50px; }
div.praise-details { margin:130px 0 0 0; height:170px; }
div.praise-details .slideshow-praise { height:170px; }
div.praise-details .slideshow-praise .slide { width:970px !important; height:170px; }
div.praise-details h2 { font-weight:300; font-size:30px; text-align:center; margin-bottom:10px; }
img.smallrecognition-p { position:absolute; z-index:10; top:36px; left:841px; width:118px; height:123px; cursor:pointer; }
img.smallclients-p { position:absolute; z-index:20; top:12px; left:929px; width:179px; height:128px; cursor:pointer; }
img.midsizep-p { position:absolute; z-index:10; top:15px; left:25px; width:276px; height:294px; cursor:default; }


/** Recognition large to mid **/
@keyframes r-largetomid {
    0% { position:absolute; z-index:30; top:76px; left:30px; width:382px; height:398px; opacity:0.9; }
    100% { position:absolute; z-index:30; top:36px; left:46px; width:299px; height:311px; opacity:1; cursor:default; }
}
.midsize-r { 
	animation-name:r-largetomid;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

/** Clients large to mid **/
@keyframes c-largetomid {
    0% { position:absolute; z-index:20; top:0px; left:322px; width:576px; height:414px; cursor:pointer; }
    100% { position:absolute; z-index:20; top:0px; left:0px; width:410px; height:295px; cursor:default; }
}
.midsize-c {
	animation-name:c-largetomid;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

/** Praise large to mid **/
@keyframes p-largetomid {
    0% { position:absolute; z-index:10; top:65px; left:848px; width:353px; height:376px; }
    100% { position:absolute; z-index:10; top:15px; left:25px; width:276px; height:294px; cursor:default; }
}
.midsize-p {
	animation-name:p-largetomid;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}


/** Recognition large to small **/
@keyframes r-largetosmall {
    0% { position:absolute; z-index:30; top:76px; left:30px; width:382px; height:398px; cursor:pointer; }
    100% { position:absolute; z-index:30; top:36px; left:841px; width:118px; height:123px; cursor:pointer; }
}
.small-r { 
	animation-name:r-largetosmall;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

/** Clients large to small **/
@keyframes c-largetosmall {
    0% { position:absolute; z-index:20; top:0px; left:322px; width:576px; height:414px; cursor:pointer; }
    100% { position:absolute; z-index:20; top:12px; left:929px; width:179px; height:128px; cursor:pointer; }
}
.small-c {
	animation-name:c-largetosmall;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

/** Praise large to small **/
@keyframes p-largetosmall {
    0% { position:absolute; z-index:10; top:65px; left:848px; width:353px; height:376px; cursor:pointer; }
    100% { position:absolute; z-index:10; top:32px; left:1091px; width:110px; height:117px; cursor:pointer; }
}
.small-p {
	animation-name:p-largetosmall;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}



/** Recogition small to mid **/
@keyframes r-smalltomid {
    0% { position:absolute; z-index:30; top:36px; left:841px; width:118px; height:123px; cursor:pointer; }
    100% { position:absolute; z-index:30; top:36px; left:46px; width:299px; height:311px; opacity:1; cursor:default; }
}
.small2mid-r { 
	animation-name:r-smalltomid;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

/** Recogition mid to small **/
@keyframes r-midtosmall {
    0% { position:absolute; z-index:30; top:36px; left:46px; width:299px; height:311px; opacity:1; cursor:default; }
    100% { position:absolute; z-index:30; top:36px; left:841px; width:118px; height:123px; cursor:pointer; }
}
.mid2small-r { 
	animation-name:r-midtosmall;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}


/** Clients small to mid **/
@keyframes c-smalltomid {
    0% { position:absolute; z-index:30; top:12px; left:929px; width:176px; height:126px; cursor:pointer; }
    100% { position:absolute; z-index:30; top:0px; left:0px; width:410px; height:295px; cursor:default; }
}
.small2mid-c { 
	animation-name:c-smalltomid;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

/** Clients mid to small **/
@keyframes c-midtosmall {
    0% { position:absolute; z-index:30; top:0px; left:0px; width:410px; height:295px; cursor:default; }
    100% { position:absolute; z-index:30; top:12px; left:929px; width:176px; height:126px; cursor:pointer; }
}
.mid2small-c { 
	animation-name:c-midtosmall;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}


/** Praise small to mid **/
@keyframes p-smalltomid {
    0% { position:absolute; z-index:30; top:32px; left:1091px; width:110px; height:117px; cursor:pointer; }
    100% { position:absolute; z-index:30; top:15px; left:25px; width:276px; height:294px; cursor:default; }
}
.small2mid-p { 
	animation-name:p-smalltomid;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

/** PRaise mid to small **/
@keyframes p-midtosmall {
    0% { position:absolute; z-index:30; top:15px; left:25px; width:276px; height:294px; cursor:default; }
    100% { position:absolute; z-index:30; top:32px; left:1091px; width:110px; height:117px; cursor:pointer; }
}
.mid2small-p { 
	animation-name:p-midtosmall;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}











/*** IF LRG PRAISE IS CLICKED ***/

@keyframes smr2 {
    0% { position:absolute; z-index:30; top:76px; left:30px; width:382px; height:398px; cursor:pointer; }
    100% { position:absolute; z-index:30; top:36px; left:901px; width:118px; height:123px; cursor:pointer; }
}
.small-r2 { 
	animation-name:smr2;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes smc2 {
    0% { position:absolute; z-index:20; top:0px; left:322px; width:576px; height:414px; cursor:pointer; }
    100% { position:absolute; z-index:20; top:0px; left:989px; width:179px; height:128px; cursor:pointer; }
}
.small-c2 {
	animation-name:smc2;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}



/*** PULSE ***/
@keyframes rpulse {
	0% { -webkit-filter: grayscale(0); filter: grayscale(0); opacity:0.9; }
	5% { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity:0.5; }
	10% { -webkit-filter: grayscale(0); filter: grayscale(0); opacity:0.9; }
	50% {  }
	100% {  }
}
@keyframes pulse {
	0% { -webkit-filter: grayscale(0); filter: grayscale(0); opacity:1; }
	5% { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity:0.5; }
	10% { -webkit-filter: grayscale(0); filter: grayscale(0); opacity:1; }
	50% {  }
	100% {  }
}


.large-r {
	animation-name: rpulse;
	animation-duration: 10s;
	animation-fill-mode: forwards;
	animation-delay:1s;
	animation-iteration-count: infinite;
}
.large-c {
	animation-name: rpulse;
	animation-duration: 10s;
	animation-fill-mode: forwards;
	animation-delay:1.5s;
	animation-iteration-count: infinite;
}
.large-p {
	animation-name: rpulse;
	animation-duration: 10s;
	animation-fill-mode: forwards;
	animation-delay:2s;
	animation-iteration-count: infinite;
}





/********** DESKTOP BREAKPOINT **********/

@media(min-width:880px) {
	#anim-container-mobile { display:none; }
	#anim-container { display:block; }
}