
body {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  cursor: default;
  background: url(http://128.199.49.84/codepen/fullScreen/bg.jpg) center center repeat;
}

.fullScreenExpand .phoneFrame 			{ background:url(http://128.199.49.84/codepen/fullScreen/phoneFrame.png) no-repeat; background-size:100%; width: 382px; height: 701px; position: relative; margin:50px auto; padding-top:97px;}
.fullScreenExpand .screenRap 			{ width: 335px; height: 595px; background:#EEE; overflow: hidden; position: relative; margin-left: 24px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none;}
.fullScreenExpand .screenRap div 		{ width: 100%; height: 150px; position: relative; color: #fff; transition: all .5s cubic-bezier(0.59, 0, 0, 1.01); -moz-transition: all .5s cubic-bezier(0.59, 0, 0, 1.01); -webkit-transition: all .5s cubic-bezier(0.59, 0, 0, 1.01); transform: scale(.95, .95); cursor:pointer;}
.fullScreenExpand .screenRap div span 				{ width: 156px; font-size: 16px; font-weight: 700; letter-spacing: 5px; display: block; padding:65px 0 56px 115px; position: absolute; top: 0; opacity: 0; transition: all .5s, opacity .1s cubic-bezier(1, -0.02, 0, 1.01); -moz-transition: all .5s, opacity .1s cubic-bezier(1, -0.02, 0, 1.01); -webkit-transition: all .5s, opacity .1s cubic-bezier(1, -0.02, 0, 1.01);}
.fullScreenExpand .screenRap div.active 			{ height: 100%;}
.fullScreenExpand .screenRap div.active span, .fullScreenExpand .screenRap div.active svg 		{ position: absolute; top: 60px; opacity: 0 !important; transform: scale(0, 0);}
	.fullScreenExpand .screenRap div.active svg 	{ top:70px; margin-left:80px;}

.fullScreenExpand .screenRap div a 					{ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAaCAYAAACHD21cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVFNUM2OEIxMEE5QzExRTVBMTNGOEZENzFFQ0FFNzk0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVFNUM2OEIyMEE5QzExRTVBMTNGOEZENzFFQ0FFNzk0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RUU1QzY4QUYwQTlDMTFFNUExM0Y4RkQ3MUVDQUU3OTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RUU1QzY4QjAwQTlDMTFFNUExM0Y4RkQ3MUVDQUU3OTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5UYRYGAAABK0lEQVR42pTUz0oCURSAcfUFfIIiKCGMDIIgCFv0EC6iRbQoSFe1iBYGvYXQy7Ro06LCxMQooohcBC6K0P5ev1vn0mGw6cyFn4wzft65M8OknXOpBKOAAzRSPjQqoO1+xpM1mkJLog+ULdGkit5R+V6eIWq437EdjsVFOZyr09vSx+NmqquZdqK/GRZN4FSCT+wO+/PojnGcqZn2/lqK/jKGYwm+UI27cGFjBCdqpup/t8l/jOJIRfvIWMJDCV7j1hSV4YHNqoe4a37cqadxoW70pmXGsJHHlcRvWLeG3gwurXF0xyxu1MXasIbeHK4l7mHNGnrzuFWnvWoNQ3wn8QuWraG3gHuJ+1ixhmHmED+jZA29RXTUaZeSvB6LeJD4MZ3whbyEGpoDAQYAdfUaMZDNVnEAAAAASUVORK5CYII=') no-repeat; width: 14px; height: 26px; position: absolute; top: 15px; left: -50px; opacity: 0; transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; cursor: pointer; padding: 5px;}
.fullScreenExpand .screenRap div.active a 			{ opacity: 1; left: 18px;}
.fullScreenExpand .screenRap div p img 				{ margin: 55px 0 100px 0; display:inline !important; transition: margin .7s; -webkit-transition: margin .7s; -moz-transition: margin .7s;}
.fullScreenExpand .screenRap div.active p img 		{ margin: 25px 0;}
.fullScreenExpand .screenRap div p 					{ position: absolute; top: 150px; left: 0; height: 100%; width: 100%; text-align: center; opacity: 0; transition: top .4s, opacity .8s, filter .5s; -moz-transition: top .4s, opacity .8s, -moz-filter .5s; -webkit-transition: top .4s, opacity .8s, -webkit-filter .5s; -webkit-filter: blur(10px); font-size: 15px; line-height: 1.8; font-family: 'Roboto', sans-serif;}
.fullScreenExpand .screenRap div.active p 			{ opacity: 1; top: 0; -webkit-filter: blur(0px); -moz-filter: blur(0px); filter: blur(0px);}
.fullScreenExpand .screenRap div p b 				{ font-weight: 400; padding: 0 20px; display: block; text-align: left !important;}
.fullScreenExpand .screenRap div i 					{ display: block; text-align: center; margin-bottom: 20px; font-size: 18px; font-style: normal; font-weight: 300; line-height: 1.3; font-family: 'Roboto', sans-serif; font-weight: 700;}

.fullScreenExpand .burger 							{ background: #f3bb72; top: 510px; position: relative; z-index: 1; animation: containerSlideUp .8s 1s forwards; -moz-animation: containerSlideUp .8s 1s forwards; -webkit-animation: containerSlideUp .8s 1s forwards;}
.fullScreenExpand .burger span 						{  animation: btnsSlide .6s 2s forwards; -moz-animation: btnsSlide .6s 2s forwards; -webkit-animation: btnsSlide .6s 2s forwards;}
.fullScreenExpand .burger svg						{ animation: btnsSlide .6s 2.1s forwards; -moz-animation: btnsSlide .6s 2.1s forwards; -webkit-animation: btnsSlide .6s 2.1s forwards; margin:-32px 0 0 9px; width: 72px !important;}

.fullScreenExpand .pizza 					{ background:#ff85a7; top: 380px; position: relative; z-index: 2; animation: containerSlideUp .8s 1s forwards; -moz-animation: containerSlideUp .8s 1s forwards; -webkit-animation: containerSlideUp .8s 1s forwards;}
.pizza span { animation: btnsSlide .6s 1.9s forwards; -moz-animation: btnsSlide .6s 1.9s forwards; -webkitanimation: btnsSlide .6s 1.9s forwards;}
.fullScreenExpand .pizza.active 			{ margin-top: -150px;}
.fullScreenExpand .pizza svg					{ animation: btnsSlide .6s 2s forwards; -moz-animation: btnsSlide .6s 2s forwards; -webkit-animation: btnsSlide .6s 2s forwards; margin:-32px 0 0 9px; width: 72px !important;}

.fullScreenExpand .soup { background: #61e5e6; top: 250px; position: relative; z-index: 3; animation: containerSlideUp .8s 1s forwards; -moz-animation: containerSlideUp .8s 1s forwards; -webkit-animation: containerSlideUp .8s 1s forwards;}
.fullScreenExpand .soup span 				{ animation: btnsSlide .6s 2.1s forwards; -moz-animation: btnsSlide .6s 2.1s forwards; -webkit-animation: btnsSlide .6s 2.1s forwards;}
.fullScreenExpand .soup.active 				{ margin-top: -300px;}
.fullScreenExpand .soup svg					{ animation: btnsSlide .6s 2.2s forwards; -moz-animation: btnsSlide .6s 2.2s forwards; -webkit-animation: btnsSlide .6s 2.2s forwards; margin:-26px 0 0 9px; width: 72px !important;}

.fullScreenExpand .hotDog 					{ background:#b1db73; top: 120px; position: relative; z-index: 4; animation: containerSlideUp .8s 1s forwards; -moz-animation: containerSlideUp .8s 1s forwards; -webkit-animation: containerSlideUp .8s 1s forwards;}

.fullScreenExpand .screenRap svg				{ position: absolute; top: 50%; opacity: 0; transition: all .5s, opacity .1s cubic-bezier(1, -0.02, 0, 1.01); -moz-transition: all .5s, opacity .1s cubic-bezier(1, -0.02, 0, 1.01); -webkit-transition: all .5s, opacity .1s cubic-bezier(1, -0.02, 0, 1.01); fill:#fff; width:90px;}

.fullScreenExpand .hotDog svg				{ animation: btnsSlide .6s 2.3s forwards; -webkit-animation: btnsSlide .6s 2.3s forwards; -moz-animation: btnsSlide .6s 2.3s forwards; margin-top:-18.5px;}
.fullScreenExpand .hotDog span 				{ animation: btnsSlide .6s 2.2s forwards; -webkit-animation: btnsSlide .6s 2.2s forwards; -moz-animation: btnsSlide .6s 2.2s forwards;}
.fullScreenExpand .hotDog.active 			{ margin-top: -450px;}

@keyframes containerSlideUp {
  0% {
    transform: scale(.95, .95);
  }
  50% {
    top: -7px;
    transform: scale(1, 1);
  }
  100% {
    top: 0;
    transform: scale(1, 1);
  }
}

@-moz-keyframes containerSlideUp {
  0% {
    -moz-transform: scale(.95, .95);
  }
  50% {
    top: -7px;
    -moz-transform: scale(1, 1);
  }
  100% {
    top: 0;
    -moz-transform: scale(1, 1);
  }
}

@-webkit-keyframes containerSlideUp {
  0% {
    -webkit-transform: scale(.95, .95);
  }
  50% {
    top: -7px;
    -webkit-transform: scale(1, 1);
  }
  100% {
    top: 0;
    -webkit-transform: scale(1, 1);
  }
}

@keyframes btnsSlide {
  0% {
    left: -100px;
  }
  100% {
    left: 40px;
    opacity: 1;
  }
}

@-moz-keyframes btnsSlide {
  0% {
    left: -100px;
  }
  100% {
    left: 40px;
    opacity: 1;
  }
}

@k-webkit-eyframes btnsSlide {
  0% {
    left: -100px;
  }
  100% {
    left: 40px;
    opacity: 1;
  }
}

