/* • UI and UX Design
	------------------------------------------------------------------------- */
	.ui-sect { background-color:#e6e5e2; overflow:hidden }
		.ui-inner-wrapper { height:600px; max-width: 1280px; margin:0 auto; left:0; z-index:10; top:0; overflow:hidden}

			.ui-content-wrapper { width:700px; height:200px; padding:20px 0 0 20px; top:100px; left:50px;
			                      position:absolute;
			                      background:url(images/bg-bk-opacity-80.png) repeat; overflow: hidden;}
			.ui-content-blk, .ui-triangle-blk  { right:0; top:0; position:absolute}

			.ui-content-blk  { padding:20px 20px 0 20px; z-index:10; left:0}
			.ui-content-blk .ui-content { color:#fff; float:left; width:87%}
			.ui-content-blk .ui-content .ui-content-pos { padding-right:20px;
			                                            -webkit-animation-delay: 0.3s;
			                                                    animation-delay: 0.3s;}

			.ui-triangle-blk { width:170px; z-index:5;
			                  -webkit-animation-delay: 0.4s;
			                          animation-delay: 0.4s;}
			.ui-triangle-blk .ui-triangle { width:0; height:0;
								            border-style: solid;
								            border-width: 0 170px 170px 0;
								            border-color: transparent #eac074 transparent transparent; }

			.ui-content-blk h1 { -webkit-animation-delay: 0.5s; 
			                           animation-delay: 0.5s; }


	.bg-ui { background:url(images/bg-ui.gif)no-repeat center top;}
        
        
		    .ui-blk { display:none; }
		    .ui-ux-gif-outer { text-align:center; width:100%; }

		    .ui-ux-gif, .ui-ux-gif-mobile { margin: 0 auto;}

		    .ui-ux-gif-mobile{ display:none; }


    .bg-animation-pos { position:absolute; height:600px; top:0; left:0; z-index:2;}
    .opacity { opacity:0.5}

	/* ==========================================================================
		Media Styles
	============================================================================= */

  	@media only screen and (max-width:1024px) {
		.ui-inner-wrapper { max-width:inherit; width:100%;}
		.ui-content-wrapper { width:480px; right:50px; left:auto; }
  	}


    @media only screen and (max-device-width : 1024px){
        .ui-blk { display:block; }
        .ui-ux-gif-mobile { display:block;}
        .ui-ux-gif { display:none; }
    }

    @media only screen and (max-width: 745px) {
		.ui-content-wrapper { width:80%; height:180px; left:auto; right:auto; position:relative; margin:0 auto;}
		.ui-content-blk .ui-content { width:95% }

    }

	@media only screen and (max-width: 479px) {
			.ui-content-wrapper { width:calc(100% - 60px);}

		.ui-content-wrapper { height:250px; }
		.ui-content-blk .ui-content .ui-content-pos { padding-right:0;}
		.ui-content-blk .ui-content { width:100% }


    }