@import url(http://fonts.googleapis.com/css?family=Segoe UI);
@import url(http://fonts.googleapis.com/css?family=Segoe UI);

@font-face {
	font-family:segoeui_2;
	src:url('../fonts/segoeui_2.ttf');
}


img {
  vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}







/*@font-face{
	font-family:'Lato';
	font-style:normal;font-weight:100;
	src:local('Lato Hairline'),local('Lato-Hairline'),url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff')
	}
	
	@font-face{
		font-family:'Lato';
		font-style:normal;font-weight:300;
		src:local('Lato Light'),local('Lato-Light'),url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff')
		}
		
		@font-face{
			font-family:'Lato';
			font-style:normal;
			font-weight:400;
			src:local('Lato Regular'),local('Lato-Regular'),url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff')
			}
			
			@font-face{
				font-family:'icomoon';
				src:url('http://sarasoueidan.com/demos/windows8-animations/fonts/icomoon.eot');
				src:url('http://sarasoueidan.com/demos/windows8-animations/fonts/icomoon.eot?#iefix') format('embedded-opentype'),url('http://sarasoueidan.com/demos/windows8-animations/fonts/icomoon.woff') format('woff'),url('http://sarasoueidan.com/demos/windows8-animations/fonts/icomoon.ttf') format('truetype'),url('http://sarasoueidan.com/demos/windows8-animations/fonts/icomoon.svg#icomoon') format('svg');font-weight:normal;font-style:normal;}*/

[data-icon]:before{
	/*font-family:'icomoon';*/
	content:attr(data-icon);
	speak:none;
	font-weight:normal;
	font-variant:normal;
	text-transform:none;
	line-height:1;
	-webkit-font-smoothing:antialiased;
	}
	
.icon-arrow-right,.icon-calendar-alt-fill,.icon-chrome,.icon-picassa,.icon-skype,.icon-cloud,.icon-cloudy,.icon-dropbox,.icon-instagram{
	font-family:'icomoon';
	speak:none;font-style:normal;
	font-weight:normal;font-variant:normal;
	font-size:1.1em;
	text-transform:none;
	line-height:1;
	-webkit-font-smoothing:antialiased;
	}
	
.icon-arrow-right:before{content:"\e000";}.icon-calendar-alt-fill:before{content:"\e001";}.icon-chrome:before{content:"\e002";}.icon-picassa:before{content:"\e003";}.icon-skype:before{content:"\e004";}.icon-cloud:before{content:"\e005";}.icon-cloudy:before{content:"\e006";}.icon-dropbox:before{content:"\e007";}.icon-instagram:before{content:"\f16d";}.slidePageInFromLeft{-webkit-animation:slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;animation:slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;}.openpage{-webkit-animation:rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;animation:rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;}
.slidePageBackLeft{opacity:1;left:0;-webkit-animation:slidePageBackLeft .8s ease-out 1 normal forwards;animation:slidePageBackLeft .8s ease-out 1 normal forwards;}

.slidePageLeft{opacity:1;-webkit-transform:rotateY(0) translateZ(0);-ms-transform:rotateY(0) translateZ(0);transform:rotateY(0) translateZ(0);-webkit-animation:slidePageLeft .8s ease-out 1 normal forwards;animation:slidePageLeft .8s ease-out 1 normal forwards;}
.fadeOutback{-webkit-animation:fadeOutBack 0.3s ease-out 1 normal forwards;animation:fadeOutBack 0.3s ease-out 1 normal forwards;}
.fadeInForward-1,.fadeInForward-2,.fadeInForward-3{opacity:0;-webkit-transform:translateZ(-5em) scale(0.75);-ms-transform:translateZ(-5em) scale(0.75);transform:translateZ(-5em) scale(0.75);-webkit-animation:fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;animation:fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;}.fadeInForward-2{-webkit-animation-delay:.55s;animation-delay:.55s;}.fadeInForward-3{-webkit-animation-delay:.7s;animation-delay:.7s;}@keyframes fadeOutBack{0%{-webkit-transform:translateX(-2em) scale(1);-ms-transform:translateX(-2em) scale(1);transform:translateX(-2em) scale(1);opacity:1;}70%{-webkit-transform:translateZ(-5em) scale(0.6);-ms-transform:translateZ(-5em) scale(0.6);transform:translateZ(-5em) scale(0.6);opacity:0.5;}95%{-webkit-transform:translateZ(-5em) scale(0.6);-ms-transform:translateZ(-5em) scale(0.6);transform:translateZ(-5em) scale(0.6);opacity:0.5;}100%{-webkit-transform:translateZ(-5em) scale(0);-ms-transform:translateZ(-5em) scale(0);transform:translateZ(-5em) scale(0);opacity:0;}}

@keyframes fadeInForward{0%{-webkit-transform:translateZ(-5em) scale(0);-ms-transform:translateZ(-5em) scale(0);transform:translateZ(-5em) scale(0);opacity:0;}100%{-webkit-transform:translateZ(0) scale(1);-ms-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1);opacity:1;}}@keyframes rotatePageInFromRight{0%{-webkit-transform:rotateY(-90deg) translateZ(5em);-ms-transform:rotateY(-90deg) translateZ(5em);transform:rotateY(-90deg) translateZ(5em);opacity:0;}30%{opacity:1;}100%{-webkit-transform:rotateY(0deg) translateZ(0);-ms-transform:rotateY(0deg) translateZ(0);transform:rotateY(0deg) translateZ(0);opacity:1;}}@keyframes slidePageLeft{0%{left:0;-webkit-transform:rotateY(0deg) translateZ(0);-ms-transform:rotateY(0deg) translateZ(0);transform:rotateY(0deg) translateZ(0);opacity:1;}70%{opacity:1;}100%{opacity:0;left:-150%;-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);}}
@keyframes slidePageInFromLeft{0%{opacity:0;}30%{opacity:1;}100%{opacity:1;left:0}}
@keyframes slidePageBackLeft{0%{opacity:1;left:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}10%{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);}70%{opacity:1;}100%{opacity:0;left:-150%;}}*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both;}.clearfix{*zoom:1;}




.demo-wrapper{padding:.5em;width:100%;height:100%;-webkit-perspective:3300px;-ms-perspective:3300px;perspective:3300px;position:relative; margin:0 auto;}
.dashboard{margin:0 auto;width:100%;padding:0em;/*-webkit-transform:translateX(200px);-ms-transform:translateX(200px);transform:translateX(200px);opacity:0;-webkit-animation:start 1s ease-out forwards;animation:start 1s ease-out forwards;*/}
@-webkit-keyframes start{0%{-webkit-transform:translateX(200px);opacity:0;}50%{opacity:1;}100%{-webkit-transform:translateX(0);opacity:1;}}
@keyframes start{0%{-webkit-transform:translateX(200px);-ms-transform:translateX(200px);transform:translateX(200px);opacity:0;}50%{opacity:1;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}.col1,.col2,.col3{width:99%;margin:1em auto;}::-webkit-scrollbar{width:20px;}::-webkit-scrollbar-thumb{background:#fff;}::-webkit-scrollbar-track{background:#ddd;}.r-page{width:100%;height:100%;text-align:center;font-size:1.1em;font-weight:300;position:absolute;right:0;top:0;left:0;bottom:0;opacity:0;color:white;z-index:10;padding:10px;-webkit-transform-origin:100% 0%;-ms-transform-origin:100% 0%;transform-origin:100% 0%;-webkit-transform:rotateY(-90deg) translateZ(5em);-ms-transform:rotateY(-90deg) translateZ(5em);transform:rotateY(-90deg) translateZ(5em);}
.s-page{color:white;z-index:10;text-align:center;font-size:1.1em;font-weight:300;}
.page-content{overflow-y:auto;max-height:100%;font-size:1.1em;padding:.6em;text-align:left;}
.s-page,.r-page{background-color:white;color:black;}
.page-title{margin:.25em 0;font-weight:100;font-size:1.1em;text-align:center;}
.close-button{font-size:1.1em;width:1em;height:1em;position:absolute;top:.75em;right:.75em;cursor:pointer;line-height:.8em;text-align:center;}
.tile{
	float:left;
	margin:0 auto 1%;
	color:white;
	font-size:1.5em;
	text-align:center;
	height:5em;
	font-weight:300;
	overflow:hidden;
	cursor:pointer;
	position:relative;
	/*background-color:#fff;*/
	position:relative;
	-webkit-transition:background-color 0.2s ease-out;
	transition:background-color 0.2s ease-out;
	}
	
.tile-2xbig{height:16.15em;width:100%;}.tile-big{width:100%;}.tile img{width:100%;height:70%;}
.tile-caption{position:absolute;z-index:1;/*background-color:#949599;*/color:#fff;font-size:1.1em;padding:1.5em 1em;text-align: center; vertical-align:middle;}
.tile-captionblue{position:absolute;z-index:1;/*background-color:#0c385d;*/color:#fff;font-size:1.1em;padding:1.5em 1em;text-align: center;vertical-align: margin: 0px auto 1%;}
.caption-bottom{left:0;bottom:0;right:0;height:40%;}

.caption-left{left:-100%;top:0;bottom:0;width:100%;-webkit-transition:left .3s linear;transition:left .3s linear;}

.tile:hover .caption-left{left:0;}.tile-small{width:49%;margin-right:2%;}
.tile-small.last{margin-right:0;}
.tile div{
	position:absolute;
	top:0;left:0;
	right:0;bottom:0;
	width:100%;height:100%;
	text-align:center;display:table;
	padding:0 1em;-webkit-transition:all .3s ease;
	transition:all .3s ease;}
	
.tile div p{display:table-cell;vertical-align:middle; padding:0.5em;font-size:.6em; font-family:segoeui_2;}

.tile-wds{background-color:#fcc120;color:white;}

.tile-waror{background-color:#3ec7f3;color:white;}

.tile-cut{background-color:#68312c;color:white;}

.tile-sp{background-color:#abcc37;color:white;}

.tile-1{background-color:#56d9c9;color:white;}
.tile-2{background-color:#455962;color:white;}
.tile-2:hover{background-color:white;color:#455962;}
.tile-3{background-color:#ddd;color:#455962;}
.tile-3:hover{background-color:white;color:#455962;}
.tile-4{background-color:#e5e5e5;color:white;}
.tile-5{background-color:#FCC120;color:white;}
.tile-5:hover{background-color:#fff;color:#FCC120;}
.tile-6{background-color:#3ec7f3;color:white;}
.tile-7,.tile-8{background-color:transparent;}
.tile-10{background-color:#0c385d;color:white;}
.tile-10:hover{background-color:#455962;color:#FFF;}
.tile-10 div{text-align: center;}
.tile-3 p{font-size:1.1em;margin-top:.5em;}
.tile-5 p,.tile-6 p{}
.tile-5 p span,.tile-6 p span{margin-right:.7em;position:relative;top:.15em;}
.tile-6 p span{margin-right:1em;}

.tile-7{background-color:#949599;color:white;}
.tile-7:hover .caption-left{left:0;  /*background-color:#0c385d;*/}

.tile-kbs{background-color:#455962;color:white;}

.slideText_Up div:nth-child(2){top:100%;}
.slideText_Up:hover div{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%); background: url(../img/icon_a.jpg) center top no-repeat;}

.slideText_Up_veenar div:nth-child(2){top:100%;}
.slideText_Up_veenar:hover div{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%); background: url(../img/icon_i.jpg) center top no-repeat;}

.slideText_Up_sand div:nth-child(2){top:100%;}
.slideText_Up_sand:hover div{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%); background: url(../img/icon_n.jpg) center top no-repeat;}

.slideText_Down div:nth-child(2){top:100%;}
.slideText_Down:hover div{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%); background: url(../img/icon_h.jpg) center top no-repeat;}

.slideText_Right div:first-child{left:-100%;}
.slideText_Right:hover div{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%); background:url(../img/icon_b.jpg) center top no-repeat;  background-size: 100% 100%;}


.slideText_Right_cut div:first-child{left:-100%;}
.slideText_Right_cut:hover div{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%); background:url(../img/icon_l.jpg) center top no-repeat;  background-size: 100% 100%;}

.slideTextRight_a div:first-child{left:-100%;}
.slideTextRight_a:hover div{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%); background: url(../img/icon_e.jpg) center top no-repeat;  background-size: 100% 100%;}

.slideTextRight_b div:first-child{left:-100%;}
.slideTextRight_b:hover div{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%); background: url(../img/h9.jpg) left top no-repeat;  background-size: 100% 100%;}


.slideText_Left_surface div:nth-child(2){left:100%;}
.slideText_Left_surface:hover div{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%); background: url(../img/icon_m.jpg) center top no-repeat;  background-size: 100% 100%;}

.slideText_Left div:nth-child(2){left:100%;}
.slideText_Left:hover div{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%); background: url(../img/icon_f.jpg) center top no-repeat;  background-size: 100% 100%;}

.slideText_Left_power div:nth-child(2){left:100%;}
.slideText_Left_power:hover div{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%); background: url(../img/icon_k.jpg) center top no-repeat;  background-size: 100% 100%;}

.slide_Text_Left div:nth-child(2){left:100%;}
.slide_Text_Left:hover div{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%); background: url(../img/h10.jpg) left top no-repeat;  background-size: 100% 100%;}

.slide_Text_Left_kcm div:nth-child(2){left:100%;}
.slide_Text_Left_kcm:hover div{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%); background: url(../img/icon_g.jpg) center top no-repeat;  background-size: 100% 100%;}

.slide_Text_Left_a div:nth-child(2){left:100%;}
.slide_Text_Left_a:hover div{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%); background: url(../img/icon_d.jpg) center top no-repeat;  background-size: 100% 100%;}

.slide_Text_Left_power div:nth-child(2){left:100%;}
.slide_Text_Left_power:hover div{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%); background: url(../img/icon_k.jpg) center top no-repeat;  background-size: 100% 100%;}

/*.slide_Text_Left_img div:nth-child(2){left:100%;}*/

.slide_Text_Left_img div:first-child{left:-100%;}
.slide_Text_Left_img:hover div{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%); background: url(../img/icon_image.jpg) center top no-repeat;  background-size: 100% 100%;}

/*.slide_Text_Left_kcm:hover div{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%); background: url(../img/icon_g.jpg) center top no-repeat;  background-size: 100% 100%;}
*/

.tile-image{background-color:#3ec7f3;color:white;}

.tile-gray{background-color:#a99e9a;color:white;}

.tile-sand{background-color:#ee3557;color:white;}

.tile-venar{background-color:#566956;color:white;}

.tile-8_power{background-color:#0c385d;color:white;}
.tile-8_power:hover .caption-left{right:0;  background: url(../img/icon_k.jpg) center top no-repeat;  background-size: 100% 100%;}

.tile-mural{background-color:#5b6870;color:white;}

.tile-powder{background-color:#939297;color:white;}

.tile-8{background-color:#f0514a;color:white;}
.tile-8:hover .caption-left{left:0;  background: url(../img/icon_c.jpg) center top no-repeat;}
.tile-small{width:49%;margin-right:2%;}

.tile-7cw{background-color:transparent;}
.tile-7cw .faces{-webkit-transform-style:preserve-3d;-webkit-transition:-webkit-transform 1s;-ms-transform-style:preserve-3d;transform-style:preserve-3d;transition:-webkit-transform 1s;transition:-ms-transform 1s;transition:transform 1s;}
.tile-7cw .faces div{display:block;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;}
.tile-7cw .faces .front{background-color:#949599;color:#fff;padding:1em;text-align: center;vertical-align: margin: 0px auto 1%;}}
.tile-7cw .faces .back{background:url(../img/h7.jpg)left top no-repeat;  background-size: 100% 100%;}

.tile-a{background-color:#455962;color:white;}
.tile-a:hover .caption-left{left:0;  background: url(../img/icon_j.jpg) center top no-repeat;  background-size: 100% 100%;}


.tile_10{background-color:#0c385d;color:white;}
/*.tile_10:hover{background: url(../img/icon_k.jpg) center top no-repeat;  background-size: 100% 100%; color:#FFF;}*/
.tile_10 div{text-align: center;}


.tile_10_a{background-color:#0c385d;color:white;}
.tile_10_a:hover{background: url(../img/icon_h.jpg) center top no-repeat;  background-size: 100% 100%; color:#FFF;}
.tile_10_a div{text-align: center;}

.tile_10_b{background-color:#0c385d;color:white;}
.tile_10_b:hover{background: url(../img/h4.jpg) left top no-repeat;  background-size: 100% 100%; color:#FFF;}
.tile_10_b div{text-align: center;}

.rotate_3d{-webkit-perspective:800px;-ms-perspective:800px;perspective:800px;overflow:visible;}
.rotate_3dX .front{background: url(../img/h3.jpg) left top no-repeat;  background-size: 100% 100%; color:#ddd;}
.rotate_3dX .back{-webkit-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg);}


.slideTextUp div:nth-child(2){top:100%;}
.slideTextUp:hover div{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);}
.tile-1 p{font-size:1.1em;}
.tile-4 p{font-size:1.1em;}
.slideTextRight div:first-child{left:-100%;}
.slideTextRight:hover div{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}
.slideTextLeft div:nth-child(2){left:100%;}
.slideTextLeft:hover div{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}
.rotate3d{-webkit-perspective:800px;-ms-perspective:800px;perspective:800px;overflow:visible;}
.faces{-webkit-transform-style:preserve-3d;-webkit-transition:-webkit-transform 1s;-ms-transform-style:preserve-3d;transform-style:preserve-3d;transition:-webkit-transform 1s;transition:-ms-transform 1s;transition:transform 1s;}
.faces div{display:block;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;}
.faces .front{background-color:#949599;color:#fff;font-size:1.1em;padding:1em;text-align: center;vertical-align: margin: 0px auto 1%;}
.rotate3dX .front{background-color:#0b385d;color:#ddd;}
.rotate3dY .front{background-color:#3ec7f3;color:#455962;}
.faces .back{/*background-color:#949599*/;color:#ddd;}
.front span{display:inline-block;font-size:1.1em;margin-top:.5em;}
.rotate3dY .back{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg);}
.rotate3dX .back{-webkit-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg); }
.back p{padding:2.5em 3em;}.rotate3dY:hover .faces:hover{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg);}
.rotate3dX:hover .faces:hover{-webkit-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg);}
.s-page{height:100%;width:100%;position:absolute;top:0;left:-150%;color:white;text-align:center;font-weight:300;z-index:1;}

.s-page p{font-size:1.1em;margin-top:2em;font-weight:100;
}.myform{margin:2em auto;width:300px;}
input{display:block;line-height:40px;padding:0 10px;width:260px;height:40px;float:left;}
#unlock-button{background:black;color:white;font-size:1.1em;float:left;border:0;height:2.5em;width:2.5em;padding:.3125em;text-align:center;cursor:pointer;border-radius:2px;}
.delete-button{font-size:1.1em;float:right;line-height:25px;}@media screen and (min-width: 43.75em) {.col1,.col2,.col3{float:left;margin-right:1%;width:49%;}.page-title{font-size:1.1em;}.page-content{font-size:1.1em;}.close-button{font-size:1.1em;}}@media screen and (min-width: 64em) {.col1,.col2,.col3{float:left;margin-right:.5%;width:31%;}.col3{margin-right:0;}.col1{margin-left:2em;}.page-title{font-size:1.1em;}}@-webkit-keyframes fadeOutBack{0%{-webkit-transform:translateX(-2em) scale(1);transform:translateX(-2em) scale(1);opacity:1}70%{-webkit-transform:translateZ(-5em) scale(0.6);transform:translateZ(-5em) scale(0.6);opacity:0.5}95%{-webkit-transform:translateZ(-5em) scale(0.6);transform:translateZ(-5em) scale(0.6);opacity:0.5}100%{-webkit-transform:translateZ(-5em) scale(0);transform:translateZ(-5em) scale(0);opacity:0}}@-webkit-keyframes fadeInForward{0%{-webkit-transform:translateZ(-5em) scale(0);transform:translateZ(-5em) scale(0);opacity:0}
100%{-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1);opacity:1;}}

@-webkit-keyframes rotatePageInFromRight{0%{-webkit-transform:rotateY(-90deg) translateZ(5em);transform:rotateY(-90deg) translateZ(5em);opacity:0;}30%{opacity:1;}100%{-webkit-transform:rotateY(0deg) translateZ(0);transform:rotateY(0deg) translateZ(0);opacity:1;}}@-webkit-keyframes slidePageLeft{0%{left:0;-webkit-transform:rotateY(0deg) translateZ(0);transform:rotateY(0deg) translateZ(0);opacity:1;}70%{opacity:1;}100%{opacity:0;left:-150%;-webkit-transform:rotateY(0deg);transform:rotateY(0deg);}}@-webkit-keyframes slidePageInFromLeft{0%{opacity:0;}30%{opacity:1;}100%{opacity:1;left:0;}}@-webkit-keyframes slidePageBackLeft{0%{opacity:1;left:0;-webkit-transform:scale(0.95);transform:scale(0.95);}10%{-webkit-transform:scale(0.9);transform:scale(0.9);}70%{opacity:1;}100%{opacity:0;left:-150%;}} 0% {
    -webkit-transform: translateX(-2em) scale(1);
    -ms-transform: translateX(-2em) scale(1);
    transform: translateX(-2em) scale(1);
    opacity: 1;
  }

  70% {
    -webkit-transform: translateZ(-5em) scale(0.6);
    -ms-transform: translateZ(-5em) scale(0.6);
    transform: translateZ(-5em) scale(0.6);
    opacity: 0.5;
  }

  95% {
    -webkit-transform: translateZ(-5em) scale(0.6);
    -ms-transform: translateZ(-5em) scale(0.6);
    transform: translateZ(-5em) scale(0.6);
    opacity: 0.5;
  }

  100% {
    -webkit-transform: translateZ(-5em) scale(0);
    -ms-transform: translateZ(-5em) scale(0);
    transform: translateZ(-5em) scale(0);
    opacity: 0;
  }
}

  0% {
    -webkit-transform: translateZ(-5em) scale(0);
    -ms-transform: translateZ(-5em) scale(0);
    transform: translateZ(-5em) scale(0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateZ(0) scale(1);
    -ms-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
    opacity: 1;
  }
}

  0% {
    -webkit-transform: rotateY(-90deg) translateZ(5em);
    -ms-transform: rotateY(-90deg) translateZ(5em);
    transform: rotateY(-90deg) translateZ(5em);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    -webkit-transform: rotateY(0deg) translateZ(0);
    -ms-transform: rotateY(0deg) translateZ(0);
    transform: rotateY(0deg) translateZ(0);
    opacity: 1;
  }
}

  0% {
    left: 0;
    -webkit-transform: rotateY(0deg) translateZ(0);
    -ms-transform: rotateY(0deg) translateZ(0);
    transform: rotateY(0deg) translateZ(0);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    left: -150%;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

  0% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    left: 0;
  }
}

  0% {
    opacity: 1;
    left: 0;
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
  }

  10% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    left: -150%;
  }
}

  0% {
    -webkit-transform: translateX(200px);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
  }
}
/*======================= media queries for animations =======================*/

@media screen and (min-width: 64em) {
  @keyframes fadeInForward {
      80% {
        opacity: 0.9;
      }

      100% {
        -webkit-transform: translateZ(0) scale(1) translateX(-2em);
        -ms-transform: translateZ(0) scale(1) translateX(-2em);
        transform: translateZ(0) scale(1) translateX(-2em);
        opacity: 1;
      }
  }
}

@media (min-width: 768px) and (max-width: 979px) {
	
	.demo-wrapper{padding:.5em;width:100%;height:100%;-webkit-perspective:3300px;-ms-perspective:3300px;perspective:3300px;position:relative; margin:0 auto;}
	
}

@media (min-width: 320px) and (max-width: 767px) {
	
	.demo-wrapper{padding:.5em;width:100%;height:100%;-webkit-perspective:3300px;-ms-perspective:3300px;perspective:3300px;position:relative; margin:0 auto;}
	.tile-small{width:100%;margin-right:2%;}
}