/*-----------------------------------------------------------------------------------*/
/*	0.	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
{
  border:0;
  font:inherit;
  font-size:100%;
  margin:0;
  padding:0;
  vertical-align:baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
{
  display:block
}

/*-----------------------------------------------------------------------------------*/
/*	1.	Document Setup
/*-----------------------------------------------------------------------------------*/

body 
{
	background: transparent url(assets/img/body_bg.png) repeat-x;
	color: #000;
	font-family: 'Segoe UI', sans-serif;
	font-size: 13px;
	font-weight:300;
	line-height: 20px;
}

ol,ul
{
  list-style:none
}

a:focus
{
 	 outline: 0; 
}

img {
    max-width: 100%;
}
.wrap {
  	width: 100%;
	background-color:#FFF;
	position:relative;
	min-width:940px;/* chang in responsive */
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.container {
	margin:0 auto; 
  	margin-right: auto;
 	margin-left: auto;
  	*zoom: 1;
}
.container:before,
.container:after {
  display: table;
  content: "";
}
.container:after {
  clear: both;
}
.container {
  width:980px;
}




/*-----------------------------------------------------------------------------------*/
/*	1.	presentation
/*----------------------------------------------------------------------------------*/

.p_head{
	/*margin:0 0 58px 40px;
	margin: 30px auto 20px;
	display:block;*/
}

.p_head .title {
	color:#000;
	font-size:60px;
	line-height:95px;
	font-weight:bold;
	display:block;
	float: left;
	margin:30px 0 20px;
}

.p_btn {
	color:#fff;
	background-color:#000;
	font-size:20px;
	line-height:20px;
	padding:2px 20px 7px 20px;
	text-decoration:none;
	border:2px solid #000;
	display:block;
	float:left;
	
	-moz-transition:all 100ms ease 0s;
  	-o-transition:all 100ms ease 0s;
  	-webkit-transition:all 100ms ease 0s;
  	transition:all 100ms ease 0s;
}

.p_btn:hover {
	color:#000;
	background-color:transparent;
	border:2px solid #000;
	
	-moz-transition:all 300ms ease 0s;
  	-o-transition:all 100ms ease 0s;
  	-webkit-transition:all 100ms ease 0s;
  	transition:all 100ms ease 0s;
}

.skip_link {
	font-size:30px;
	color:#000;
	padding:5px 30px 15px 10px;
	margin:70px 0 0 10px;
	background: transparent url(assets/img/skip.png) no-repeat center right;
	text-decoration:none;
	display:block;
	float:left;
	
	
	-moz-transition:all 300ms ease 0s;
  	-o-transition:all 300ms ease 0s;
  	-webkit-transition:all 300ms ease 0s;
  	transition:all 300ms ease 0s;
}
.skip_link:hover {
	color:#9c9c9c;
}
.color_panel {
	float:right;
	margin-top:30px;
}
.color_panel .title {
	font-size:67px;
	margin-bottom:22px;
	line-height:67px;
	display:block;
}
.color_panel .color_btn{
	display:block;
	padding:0 0 10px 35px;
	font-size:17px;
	color:#000;
	text-transform:capitalize;
	text-decoration:none;
	margin-bottom:7px;
}
.color_panel .color_btn:hover {
	color:#7d7d7d;
}
.blue{
	background: transparent url(assets/img/blue.png) no-repeat center left;
}
.red{
	background: transparent url(assets/img/red.png) no-repeat center left;
}
.yellow{
	background: transparent url(assets/img/yellow.png) no-repeat center left;
}
.orange{
	background: transparent url(assets/img/orange.png) no-repeat center left;
}
.green{
	background: transparent url(assets/img/green.png) no-repeat center left;
}
.green_blue{
	background: transparent url(assets/img/green_blue.png) no-repeat center left;
}
.purple{
	background: transparent url(assets/img/purple.png) no-repeat center left;
}

.active .blue {
	color:#00589b !important;
}
.active .red {
	color:#b5001d !important;
}
.active .yellow {
	color:#ff9c00 !important;
}
.active .orange {
	color:#ff4326 !important;
}
.active .green {
	color:#759b00 !important;
}
.active .green_blue {
	color:#2cb9b4 !important;
}
.active .purple {
	color:#6b2cb9 !important;
}

.color_panel .p_btn {
	display:block;
}

.imac {
	margin-left:215px;
	background: transparent url(assets/img/imac940.png) no-repeat;
	/*width:843px;*/
	height:505px;
	float:left;
	position:relative;
}


.imac_white {
	position:absolute;
	height:500px;
	width:100%;
	top:0px;
	right:0px;
	background: transparent url(assets/img/imacwhite940.png) no-repeat;
}

.imac .imac_frame {
	overflow:hidden;
	width:533px;
	height:318px;
	margin:25px;
	position:relative;
}
.imac .imac_frame .theme_color{
	position:absolute;
	top:0;
	right:0;
	height:740px;
	width:100%;

	-moz-transition:top 4500ms ease 0s;
  	-o-transition:top 4500ms ease 0s;
  	-webkit-transition:top 4500ms ease 0s;
  	transition:top 4500ms ease 0s;
}

.imac .imac_frame .theme_color a{
    display:block;
    width:100%;
    height:100%;
    position:relative;
    z-index:1000;
}

.imac .imac_frame:hover  .theme_animate{
	top:-130%;
	right:0;
}

/* imac background */

.orenge_light{
	background: transparent url(assets/content/img/imac_orange940.jpg) no-repeat;
	display:none;
}
.blue_light{
	background: transparent url(assets/content/img/imac_blue940.jpg) no-repeat center left;
	display:none;
}
.red_light{
	background: transparent url(assets/content/img/imac_red940.jpg) no-repeat center left;
	display:none;
}
.yellow_light{
	background: transparent url(assets/content/img/imac_yellow940.jpg) no-repeat center left;
	display:none;
}
.green_light{
	background: transparent url(assets/content/img/imac_green940.jpg) no-repeat center left;
	display:none;
}
.purple_light{
	background: transparent url(assets/content/img/imac_purple940.jpg) no-repeat center left;
	display:none;
}
.green_blue_light{
	background: transparent url(assets/content/img/imac_green_blue940.jpg) no-repeat center left;
	display:none;
}
.current_color{
	display:block !important;
}

.imac .imac_frame .imac_reflection {
	position:absolute;
	background: transparent url(assets/img/imac_reflection940.png) center right no-repeat;
	z-index:500;
	width:100%;
	height:100%;
}

.ipad {
	position:absolute;
	background: transparent url(assets/img/ipad940.png) no-repeat;
	bottom:0px;
	left:-216px;
	height:432px;
	width:292px;
	z-index:999;
}

.ipad_white {
	position:absolute;
	height:423px;
	width:100%;
	top:0px;
	right:0px;
	background: transparent url(assets/img/ipadwhite940.png) no-repeat;
	z-index:700;
}


.ipad .ipad_frame {
	overflow:hidden;
	width:233px;
	height:311px;
	/*margin:39px;*/
	margin:31px 0 0 29px;
	position:relative;
	z-index:600;
	background-color:#fff;
}

.ipad .ipad_frame .theme_color{
	position:absolute;
	top:0;
	right:0;
	height:454px;
	width:100%;

	-moz-transition:top 2000ms ease 0s;
  	-o-transition:top 2000ms ease 0s;
  	-webkit-transition:top 2000ms ease 0s;
  	transition:top 2000ms ease 0s;
}

.ipad .ipad_frame .theme_color a{
    display:block;
    width:100%;
    height:100%;
    position:relative;
    z-index:1000;
}

.ipad:hover .ipad_frame .ipad_animate {
	top:-43%;
	right:0;
}

/* ipad background */

.orenge_dark {
	background: transparent url(assets/content/img/ipad_orange940.jpg) no-repeat;
	display:none;
}

.orenge_dark{
	background: transparent url(assets/content/img/ipad_orange940.jpg) no-repeat;	
	display:none;
}
.blue_dark{
	background: transparent url(assets/content/img/ipad_blue940.jpg) no-repeat center left;
	display:none;
}
.red_dark{
	background: transparent url(assets/content/img/ipad_red940.jpg) no-repeat center left;
	display:none;
}
.yellow_dark{
	background: transparent url(assets/content/img/ipad_yellow940.jpg) no-repeat center left;
	display:none;
}
.green_dark{
	background: transparent url(assets/content/img/ipad_green940.jpg) no-repeat center left;
	display:none;
}
.green_blue_dark{
	background: transparent url(assets/content/img/ipad_green_blue940.jpg) no-repeat center left;
	display:none;
}
.purple_dark{
	background: transparent url(assets/content/img/ipad_purple940.jpg) no-repeat center left;
	display:none;
}


.ipad .ipad_frame .ipad_reflection {
	position:absolute;
	background: transparent url(assets/img/ipad_reflection940.png) center right no-repeat;
	z-index:500;
	width:100%;
	height:100%;
}
.opacity0{
	-moz-transition:all 500ms ease 0s;
	-o-transition:all 500ms ease 0s;
	-webkit-transition:all 500ms ease 0s;
	transition:all 500ms ease 0s
	
	-moz-opacity: 0.0;
	-khtml-opacity: 0.0;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.0)";
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.0);
	filter:alpha(opacity=0.0);
}

.opacity80{
	display:block !important;
	-moz-transition:all 500ms ease 0s;
	-o-transition:all 500ms ease 0s;
	-webkit-transition:all 500ms ease 0s;
	transition:all 500ms ease 0s
	
	-moz-opacity: 0.80;
	-khtml-opacity: 0.80;
	opacity: 0.80;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.80)";
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.80);
	filter:alpha(opacity=0.80);	
}

.ipad_frame_overlay {
	height:100%;
	width:100%;
	background: #fff;
	top:0;
	left:0;
	height:100%;
	position:absolute;
	
	-moz-opacity: 0.80;
	-khtml-opacity: 0.80;
	opacity: 0.80;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.80)";
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.80);
	filter:alpha(opacity=0.80);
	
	-moz-transition:all 500ms ease 0s;
	-o-transition:all 500ms ease 0s;
	-webkit-transition:all 500ms ease 0s;
	transition:all 500ms ease 0s;
}

@media (min-width: 1200px)  and (min-height: 700px) {
.container {
  width: 1230px;
}
.p_head{
	margin: 30px auto 20px;
	display:table;
}
.p_head .title { 
	margin:0;
}
.skip_link {
    float: right;
    padding: 5px 30px 15px;
	margin:40px 0 0 10px;
} 
.imac {
	margin-left:215px;
	background: transparent url(assets/img/imac.png) no-repeat;
	width:843px;
	height:762px;
	float:left;
	position:relative;
}
.imac .imac_frame {
	width:770px;
	height:460px;
	margin:35px;
}
.imac .imac_frame .theme_color{
	height:1069px;
}

.imac_white {
	position:absolute;
	height:762px;
	width:100%;
	top:0px;
	right:0px;
	background: transparent url(assets/img/imacwhite.png) no-repeat;
}

.ipad {
	background: transparent url(assets/img/ipad.png) no-repeat;
	bottom:0px;
	left:-216px;
	height:536px;
	width:369px;
}
.ipad .ipad_frame {
	overflow:hidden;
	width:294px;
	height:394px;
	margin:39px;
	position:relative;
	z-index:600;
	background-color:#fff;
	cursor:pointer;
}
.ipad .ipad_frame .theme_color{
	height:571px;
}
.ipad .ipad_frame .ipad_reflection {
	position:absolute;
	background: transparent url(assets/img/ipad_reflection.png) center right no-repeat;
	z-index:500;
	width:100%;
	height:100%;
}

.ipad_white {
	position:absolute;
	height:536px;
	width:100%;
	top:-2px;
	right:0px;
	background: transparent url(assets/img/ipadwhite.png) no-repeat;
	z-index:700;
	cursor:pointer;
}

.color_panel {
	margin-top:150px;
}



.orenge_light{
	background: transparent url(assets/content/img/imac_orange.jpg) no-repeat;	
}
.blue_light{
	background: transparent url(assets/content/img/imac_blue.jpg) no-repeat center left;
}
.red_light{
	background: transparent url(assets/content/img/imac_red.jpg) no-repeat center left;
}
.yellow_light{
	background: transparent url(assets/content/img/imac_yellow.jpg) no-repeat center left;
}
.green_light{
	background: transparent url(assets/content/img/imac_green.jpg) no-repeat center left;
}
.green_blue_light{
	background: transparent url(assets/content/img/imac_green_blue.jpg) no-repeat center left;
}
.purple_light{
	background: transparent url(assets/content/img/imac_purple.jpg) no-repeat center left;
}


.orenge_dark {
	background: transparent url(assets/content/img/ipad_orange.jpg) no-repeat;
}

.orenge_dark{
	background: transparent url(assets/content/img/ipad_orange.jpg) no-repeat;	
}
.blue_dark{
	background: transparent url(assets/content/img/ipad_blue.jpg) no-repeat center left;
}
.red_dark{
	background: transparent url(assets/content/img/ipad_red.jpg) no-repeat center left;
}
.yellow_dark{
	background: transparent url(assets/content/img/ipad_yellow.jpg) no-repeat center left;
}
.green_dark{
	background: transparent url(assets/content/img/ipad_green.jpg) no-repeat center left;
}
.green_blue_dark{
	background: transparent url(assets/content/img/ipad_green_blue.jpg) no-repeat center left;
}
.purple_dark{
	background: transparent url(assets/content/img/ipad_purple.jpg) no-repeat center left;
}



}