/*
*   
*   Version: 1.0
*   Theme Name: Beetle HTML
*   Theme URI: http://themes.mokaine.com/beetle-html
*   Author: Mokaine Lab
*   Author URI: http://mokaine.com/
*   Written by Pasquale Vitiello (pasqualevitiello@gmail.com) and Daniele Cascone
*   
*/

/*.ipadrakka {display: none;}*/

#movie_area {
	margin: 0 auto;
	padding: 0;
	height: 500px;
    max-height: 450px;
	overflow: hidden;
}


#movie {
	position: relative;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}


.mil_ipad_mark {
    width: 245px;
    display: inline;
}
.mil_mark {
    float: left;
    width: 84px;
    margin: 10px 0 0 11px;
}
.g_mark {
    margin-top: 30px !important;
    margin-left: 0px;
    float: left;
}
.mil_ipad_mark_sp  {
	display: none;
}

/*---item---*/
.ipaditem img { width: 200px!important;}

.ipadmini_wrapper {
	max-width: 90em!important;
	padding-top: 30px;
	margin: 0 auto;
	}
	
.ipadmini_wrapper	.caption-left {
	margin:0 3% 0 7%;
	clear: none;
    float: left;
    min-height: 1px;
	z-index: 2;
	width: 22%;
}

.ipadmini_wrapper	.caption-left .palmo_logo { width: 90%;}
	
.ipadmini {
	margin-left: -7.5em!important;
    width: 35em!important;
	margin-right: 0!important;
}
.ipadmini img {margin-right:0!important; margin-left: 0!important;}
.ipadmini_wrapper .ipad_title02 { text-align: center;}
.ipadmini_caption {
    width: 19%!important;
    margin-left: 10%!important;
    clear: none;
    float: left;
    min-height: 1px;
    z-index: 2;
}

.ipad_intro {
    width: 120%;
    text-align: left;
}

.ipad_tagline { color: #333!important;}

.ipadbtn { color: #333!important; background: #fff!important;}


.ipad_btn {
	width: 90%;
    text-align: center;
    font-weight: 900;
    margin: 5% auto!important;
    position: relative;
    display: inline-block;
    margin-right: 1em;
    margin-bottom: 1.34em;
    padding: 0.667em 2em;
	box-sizing: border-box;
    -webkit-border-radius: 0.333em;
    -moz-border-radius: 0.333em;
    border-radius: 0.333em;
    background-color: #fff;
    color: #333 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    font-size: 0.778em !important;
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1.714em !important;
    cursor: pointer;
	border: 1px solid #333;
}

.ipad_title {
	width: 100%;
	text-align: center;
	margin: 0;
}

.ipad_right {
	width: 38%;
	float: right;
	padding-left: 10px;
	box-sizing: border-box;
	margin-top: 50px
}

.ipad_iphone {
    width: 65%;
    float: left;
    padding: 10px 120px 10px 0;
    box-sizing: border-box;
}
.ipad_iphone img { width: 100%;}

.bgpink {
    color: #fff;
    min-height: 600px;
    overflow: hidden;
    background: #d70051 url(../custom/img/iphoneandipad.png) no-repeat;
    background-size: 52%;
    background-position:10% 130px;
}
.ipad_right p { color: #fff; font-size: .9em; line-height: 1.6;}
.ipad_title { font-size: 30px; color: #fff;}

.gmark_area { width: 100%; padding: 10px; box-sizing: border-box; background: #cc0037;}
.ipad_text { width: 70%; float: left; margin-right:10px}
.gmark_area h2 { font-size: .9em; margin:0; color:#fff; font-weight: bold;}
.gmark_area img { width: 25%;}
.ipad_text p { font-size: .8em; margin: 10px 0;}


/*-----3-----*/
.ipadstory_01 {
    width: 50%;
    height: 420px;
    float: left;
    clear: none;
    background: url(../custom/img/ipad_img02.png) center left;
    background-size: cover;
}

.ipadstory_02 {
    width: 50%;
    height: 420px;
    float: right;
    clear: none;
    background:  url(../custom/img/ipad_img01.png) center left;
    background-size: cover;
	background-position: center 90% !important;
}

.ipadstory_01 h3,
.ipadstory_02 h3 {
	width: auto;
	min-width: 100px;
	padding: 0 10px;
	background: #000;
	padding: 2px;
	box-sizing: border-box;
	text-align: center;
    font-size: 1.4em;
	display: inline- block;
    margin: 1em 25px 1em;
    color: #fff;
	float: left;
	font-weight: 400;
}
.ipadstory_01 p,
.ipadstory_02 p {
    text-align: left;
    font-size: 0.8em;
    margin: -60px 25px;
    width: 40%;
	float: right;
	color: #1f1f1f;
	text-shadow: 10px 0 10px #fff; font-weight: 500;
	
}

/*--4---*/


.ipadstory03 {
	width: 100%;
	height: auto;
	position: relative;
}


.ipad_03 {
	width: 50%;
    background-image: url(../custom/img/ipad_img03.png);
    background-repeat: no-repeat;
    background-size: 85%;
	box-sizing: border-box;
	position: relative;
	padding-top: 25%!important;
	padding-bottom: 30px!important;
	margin: 40px 0 0!important;
	float: left;
}

.ipad_03 h3 {
	width: 60%;
	font-size: 2em;
	bottom: 0;
	padding: .3% 0 0 15%;
	margin: 0;
}
.subipad {
	font-size: 1.4em !important;
	margin: 0!important;
	line-height:1.3!important;
}
.ipad_03 p {
	padding: 0 15% 0 15%;
	font-size: 1em;
	margin: 15px 0 0;
}


.ipad_right_img {
    width: 60%;
    background-image: url(../custom/img/ipad_img04.png);
    background-repeat: no-repeat;
    background-size: 80%;
    box-sizing: border-box;
    position: relative;
    padding-top: 45%!important;
    margin: 0!important;
    float: right;
    position: absolute;
    background-position: 100% bottom;
    text-align: left;
    bottom: 0;
    right: 0;
}


/*-----5-----*/
.ipadstory_03 {
    width: 50%;
    height: 420px;
    float: left;
    clear: none;
    background: url(../custom/img/ipad_img05.png) center left;
    background-size: cover;
}

.ipadstory_04 {
    width: 50%;
    height: 420px;
    float: right;
    clear: none;
    background: url(../custom/img/ipad_img06.png) center left;
    background-size: 110%;
    background-position: 100% 20%;
}
.ipadstory_03 h3,
.ipadstory_04 h3 {
	width: auto;
	min-width: 100px;
	padding: 0 10px;
	background: #000;
	padding: 2px;
	box-sizing: border-box;
	text-align: center;
    font-size: 1.4em;
	display: inline- block;
    margin: 1em 25px 1em;
    color: #fff;
	float: left;
	font-weight: 400;
}
.ipadstory_03 p,
.ipadstory_04 p {
    text-align: left;
    font-size: 0.8em;
    margin: -60px 25px;
    width: 40%;
	float: right;
	color: #1f1f1f;
	text-shadow: 10px 0 10px #fff;
	font-weight: 500;
}


/*---6---*/
h3.ipad_title02 {
	color: #ffbfbf;
	font-size: 1.2em;
	font-weight: bold;
	margin: 5px 0!important;
}
.ipad_6_inner {
	padding: 2% 8%;
	box-sizing: border-box;
}
.ipad06_wrapp {
	width: 100%;
	text-align: center;
	position: relative;
} 

.ipad06_wrapp img {
	    position: absolute;
    left: 0;
    width: 13%;
}
.ipad_6 { background: #d9004f;}
.ipad06_wrapp h2 {margin: 0!important;}

.p_box {
	width: 70%;
	margin: 0 auto;
}
.p_box p {
	color: #fff;
	font-size: .9em;
	text-align: left;
}

.ipadnone { display: none;}


/*---7---*/


.ipad_mini_open { margin-bottom: 30px!important;}
.ipad_mini_open {
    background-image: url(../custom/img/ipad_img07_2.png);
    background-position: 140% 40% !important;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size:110% !important;
	height: 600px;
}

.ipad_mini_open_column {
	padding: 30px 20px;
	box-sizing: border-box;
	width: 45%;
	float: right;
}

.ipad_up {
    background-color: #fff;
    background-image:  url(../custom/img/ipad_img08_2.png),url(../custom/img/ipad_img08_3.png),url(../custom/img/ipad_img08.png);
    background-repeat: no-repeat,no-repeat,no-repeat;
    background-position: 0 top,0 bottom,right bottom;
    background-size: 29% auto,25% auto,28% auto;
    height: 30em;
	border-top: 1px solid #999;
}
.ipad_up .row-content {
    width: 50%;
    margin: 30px 30% 0 25%;
}


/*---8---*/

.ipad_new {
    background: #000 url(../custom/img/ipad_img09.png) center top no-repeat;
    background-position: -55% 60%;
    background-size: 80%;
    height: 480px;
    color: #eee;
    text-align: left;
}

.ipad_new h3 {
	width: 100%;
	margin: 0 auto;
	color: #fff;
	text-align: center;
	margin: 50px 0 0;
	font-size: 2em;
}

.ipad_new .row-content {
	padding: 2% 20px 0!important;
	margin-right: 20px!important;
}

.newminiarea h3,
.newminiarea p { color: #fefefe;}

.ipad_new .newminiarea {
	width: 60%;
	float: right;
	padding-left: 20%;
}

.ipadcart {
	width: 100%!important;
	padding: 5%!important;
	box-sizing: border-box;
	margin: 0!important;
	max-width: 1550px!important;
}

.ipadcart .palmo_purchase {
	margin-bottom: 0!important;
	padding: 0 !important;
}


.ipadrakka{
background:#000 url(../custom/img/ipad_img10-1.jpg) center center !important;
background-size:cover;
color:#fff;
text-align:left;
}

.ipadname { margin-top: -30px!important;}



@media handheld, only screen and (max-width:1200px) {
.ipadmini {
    width: 50%!important;
    margin-top: -20px;
    margin-left: -8em!important;
}
.ipadmini_wrapper	.caption-left {
    margin: 0 2% 0 3%;
}

.ipad_intro {
    width: 120%;
    text-align: left;
}

.ipad_tagline { font-size: 1.3em!important;}

p.ipad_tagline { font-size: .9em!important;}

.ipad_03 {
	width: 100%;
	padding-top: 50%!important;
	padding-bottom:30px!important;
	 background-size: 60%;
}

.ipad_right_img {
    background-position: 300% 100%;
    background-color: none!important;
    background-size: 95%;
    width: 60%;
    padding-top: 50%!important;
}

.ipad_txt_wrap {
    width: 50%;
    margin-top: -110px;
}

.ipad_03 h3 {
    width: 100%;
}
.bgpink {
    min-height: 580px;
    overflow: hidden;
    background: #d70051 url(../custom/img/iphoneandipad.png) no-repeat;
    background-size: 56%;
    background-position-y: 115px;
	background-position-x: 10%;
}
.ipad_right p { font-size: .8em!important;}

.ipad_up {
    background-position: 0 top,-5% bottom,right bottom;
    background-size: 30% auto,30% auto,28% auto;
    height: 30em;
	border-top: 1px solid #999;
}


}


@media handheld, only screen and (max-width:800px) {
	
	.ipadstory_01 p, .ipadstory_02 p { margin: -60px 15px;}
#movie_area {display: none;}
	.ipadrakka {display: block;}
		
.mil_ipad_mark {
    width: 125px;
}    
}
@media handheld, only screen and (max-width:768px) {
.mil_ipad_mark_sp {
    display: block !important;
    text-align: right !important;
    position: absolute !important;
    /* width: 100% !important; */
    bottom: 323px !important;
    width: 96px;
    right: 10px;
}

.mil_ipad_mark {
	display: none !important;
}
		
.ipadmini img {
  margin-right: 27%!important;
}

.ipadmini_caption {
	width: 100%!important;
	margin: 0 auto!important;
}
	
.ipadmini_caption p { text-align: left!important;}	

.bgpink {
    min-height: 200px;
    background-size: 68%;
    background-position-y: 145px;
    max-height: 520px;
    background-position-x: 0;
}

.ipad_iphone { 
widht: 70%!important;
padding: 10px 0px 10px 0;}
.ipad_right {
    width: 30%!important;
	margin-top: 0!important;
}

.ipad_right p { font-size: .8em!important;}

.ipad_text {width: 100%;}
.gmark_area h2,
.gmark_area p { font-size: .8em;}
.gmark_area p { margin-bottom: 0!important; float: left;}
.gmark_area img {width: 50%!important; margin: 5px 0!important; }


/*--3---*/
.ipadstory_02 {
	background-position: 60% -10%;
}

/*--4---*/

.ipad_03 {
	width: 100%;
	padding-top: 50%!important;
	padding-bottom:30px!important;
	 background-size: 65%;
}

.ipad_right_img {
    background-position: 300% 100%;
    background-color: none!important;
    background-size: 95%;
    width: 65%;
    height: 400px!important;
}

.ipad_txt_wrap {
	width: 45%;
	margin-top: -50px!important;
}
.ipad_03 h3 { font-size: 1.5em; padding: 0!important}
.subipad { font-size:1em!important;padding: 0!important}
.ipad_txt_wrap p { font-size:0.9em;padding: 0!important}


/*--5---*/
.ipadstory_03 {
	background-position: 60% 0;
	background-size: 200%;
}
.ipadstory_04 {
    background-size: 180%;
    background-position: 75% 0px;
}

/*---6--*/
.ipad_6_inner {
	padding: 3% 3%;
}
.p_box {
	width: 95%;
	margin: 15px auto 0;
}
.ipad_title02 {
	font-size: .9em!important;
}



/*---7---*/

.ipad_mini_open {
	background-position: 185% 40%!important; height: 400px;
	background-size: 110%!important;}
.ipad_mini_open_column {
	width: 50% !important ;
	float: right;
}


/*---8---*/
.ipad_up {
	background-image:  url(../custom/img/ipad_img08_2.png),none,url(../custom/img/ipad_img08.png);
    background-position: 0 top,0 bottom,right bottom;
    background-size: 55% auto,35% auto,42% auto;
    height: 45em;
	border-top: 1px solid #999;
	padding-top: 30px;
}
.ipad_up .row-content {
    width: 100%;
    margin: 170px auto 0!important;
	padding: 0 10px!important;
}


/*---9---*/

.ipad_new {
	height: 400px;
}
.ipad_new h3 {
    width: 100%;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    margin: 30px 0 30px;
    font-size: 1.6em;
}

.newminiarea p {
	font-size: .8em;}
	
.ipad_new .newminiarea {
	width: 40%;
	float: right;
	padding-left: 10%;
}

.mini_hito {
	font-size: .9em;
	margin-top: 50px!important;
}

/*---top---*/

.ipadmini_wrapper .caption-left { margin: 15px 0!important;}
.ipad_btn {
    width: 70%!important;
    background-color: #C6174F;
    border: 2px solid #fff;
    color: #fff !important;
    text-decoration: none !important;
    text-transform: uppercase;
    font-size: 0.778em !important;
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1.714em !important;
    margin: 10px auto 20px!important;
}

/*.ipadmini {
    overflow: hidden;
    height: 35.5em!important;
	margin-top: 40px!important;
}
*/
.ipadmini_wrapper .sp-only {
	width: 45%!important;
}


	
	.ipadmini {
	height: 600px;
}
.ipadmini img {margin-right:0!important; margin-left: 0!important; width: 80em!important;}
	
	.palmo_logo img {
		width: 70%!important;
		margin: 0 auto;
	}
	
	
	.ipadmini_wrapper .pc-only,
	.ipad_pc { display: none!important;}
	.ipadmini_wrapper .sp-only,
	.ipad_sp { display: block!important;}
	.ipadmini_wrapper .caption-left {
		width: 100%;
		margin-bottom: 0!important}
	
	
	.ipad_intro {
		width: 100%!important;
		text-align:center!important;}
	
	.ipad_intro h3,
	.ipad_intro p { color: #fff!important;}
	
	
.ipad06_wrapp img {
    position: relative;
	margin: 0 auto;
	width: 15%;
}

.ipadrakka p {
	font-size: .9rem!important;
}
	
	
	
}

@media handheld, only screen and (min-width:481px) and ( max-width:767px) {

.ipadmini img {
    margin-right: 0!important;
    margin-left: 0!important;
    width: 80em!important;
    position: absolute;
    right: 15%;
}
.mil_ipad_mark {
	display: none;
}
.mil_ipad_mark_sp {
    display: block;
    text-align: right;
    position: absolute;
    bottom: 20px;
}
}
@media handheld, only screen and (max-width:480px) {
	
.mil_ipad_mark_sp {
    display: block !important;
    text-align: right !important;
    position: absolute !important;
    width: 33% !important;
    bottom: 381px !important;
    right: -27px;
}
	/*---cart---*/
.ipadname {
	margin: 0 0 20px!important;
	padding: 0!important;
}

.ipadmini {
	overflow:hidden;
	margin-top: 25px!important;
	height: 360px;
}

.ipadmini img {
    width: 115%!important;
    overflow: hidden;
    padding-right: 20%!important;
    box-sizing: border-box;
    padding-top: 0!important;
    position: absolute;
    right: -13px;
}


.ipadmini_wrapper {
    max-width: 100%!important;
    padding-top: 30px;
	padding: 0!important;
	
}

.ipadmini_wrapper .caption-mockup.caption-left {
	width: 100%!important;
	margin: 0 auto!important;
	
}

.ipadmini_wrapper .caption-mockup.caption-left img {
	width: 45%!important;
	margin: 0 auto 5px!important;
}
.ipadmini_caption h3 { font-size: 1.3em!important;}
.ipadmini_caption h3,
.ipadmini_caption p { color: #fff!important;}

.ipad_sp {
	margin: 3px auto!important;
}
.ipad_sp img {
    width: 60%!important;
    padding: 5px 0!important;
	margin:0 auto!important;
}

.ipad_btn {
    width: 70%!important;
    background-color: #C6174F;
    border: 2px solid #fff;
    color: #fff !important;
    text-decoration: none !important;
    text-transform: uppercase;
    font-size: 0.778em !important;
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1.714em !important;
    margin: 10px auto 20px!important;
}

.ipadmini_wrapper .sp-only {
	width: 100%!important;
}


.ipad_intro {
	background: ##C6174F !important;
}

.ipad_right {
	width: 100%!important;
	float: right;
	padding-left: 0!important;
	box-sizing: border-box;
	padding-top: 290px;
}

.ipad_iphone {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.bgpink {
    background-size: 85%;
   background-position: center 25%;
   max-height: 650px;
   padding-top: 10px!important;
   padding-left: 0!important;
   padding-right: 0!important;
}
.ipad_right p { color: #fff;width: 95%; margin: 0 auto;}
.ipad_title { font-size: 1.3em; color: #fff;}

.gmark_area { width: 100%; padding: 10px 10px 3px; box-sizing: border-box; background: #cc0037; margin: 10px 0}

.gmark_area img { width: 25%!important; margin: 0 auto!important}

.ipad_text { width: 70%; float: left; margin-right:10px}
.ipad_text p {font-size: .8em!important; margin:5px 0!important}
.gmark_area h2 { font-size: 0.9em; margin:0; color:#fff; font-weight: bold;}


/*---3---*/
/*---5---*/
.ipadstory_04,
.ipadstory_03,
.ipadstory_02,
.ipadstory_01 { width: 100%;}
.ipadstory_01 {
    background-position: 30% 0;
    background-size: 190%;
}
.ipadstory_04 h3,
.ipadstory_03 h3,
.ipadstory_02 h3,
.ipadstory_01 h3 {
	margin: 0;}
.ipadstory_02 {
    background-size: 220%;
    background-position: 30% 100%!important;
}

.ipadstory_03 {
    background-size: 230%;
    background-position: 51% 30%;
}

.ipadstory_04 {
    background-size: 150%;
    background-position: 80% 0;
}
.ipadstory_01 p,.ipadstory_02 p,.ipadstory_03 p,.ipadstory_04 p {
	width: 50%;
	margin: -20px 10px 0;
	font-size: .8em;
	line-height: 1.6;
}


.ipad_03 {
    width: 100%;
    background-size: 85%;
    box-sizing: border-box;
    position: relative;
    padding-top: 25%!important;
    padding-bottom: 10px!important;
    margin: 40px 0 0!important;
    float: left;
}

.ipad_txt_wrap {
	width: 100%;
	margin-top: 90px!important;
}
.ipad_txt_wrap h3 { font-weight: bold; font-size: 1.3em;}
.ipad_txt_wrap .subipad { font-size: .9em;}
.ipad_txt_wrap h3,
.ipad_txt_wrap .subipad { margin: 0 auto; text-align: center;}
.ipad_right_img {
    position: relative;
    width: 100%;
    height: 320px!important;
    background-position: 130% bottom;
}


/*---6--*/

.ipadnone { display: block;}
.ipad_6_inner {
	padding: 2% 5%;
}
.p_box {
	width: 100%;
	margin: 15px auto 0;
}
.p_box p { font-size: .8em;}

.ipad_title {
	
}
.ipad_title02 {
	font-size: .8em!important;
	line-height: .9;
}

.ipad06_wrapp img {
	width: 25%;
	position: relative;
	margin: 5px auto 0;
	left: 0;
	
}

.ipad_tagline { font-size: .8em!important;}


.ipad_mini_open_column h3 { width: 100%; margin: 0 auto; text-align:center;}

/*---7---*/

.ipad_mini_open {
	background-size: 190%!important;
	background-position: 28% 160%!important;
	height: 600px!important;
	margin-bottom: 0!important;
}
.ipad_mini_open_column {
	width: 100% !important ;
}
.ipad_mini_open_column h3 
 {
    font-size: 1.1em!important;
    font-weight: 900!important;
}
.ipad_mini_open p { font-size: .8em;}

.ipad_new .row-content {
    padding: 2% 10px 0!important;
}

.mini_hito {
    font-size: .8em!important;
	padding: 5px;
	box-sizing: border-box;
	margin-top: 0!important;
}
/*---8---*/

/*---8---*/
.ipad_up {
	background-image:  url(../custom/img/ipad_img08_2.png),url(../custom/img/ipad_img08_3.png),url(../custom/img/ipad_img08.png);
    background-position: 0 top,-20px bottom,right bottom;
    background-size: 80% auto,50% auto,55% auto;
    height: 39em;
	border-top: 1px solid #999;
	padding-top: 30px;
}
.ipad_up .row-content {
    width: 100%;
    margin: 140px auto 0!important;
	padding: 0 10px!important;
}

.ipad_up p {
	font-size: .8em!important;}
	
.ipad_up h3:first-child {
    font-size: 1.1em!important;
    font-weight: 900!important;
    padding-bottom: 0px!important;
    margin-right: 0%!important;
    margin-top: 0%!important;
    padding-top: 0%!important;
}

/*---9---*/
.ipad_new {
    background-position: center 20%!important;
    background-size: 150%!important;
    height: 430px!important;
}

.ipad_new .row-content {
	margin-right: 0!important;
}
.ipad_new .newminiarea {
    width: 57%!important;
	padding-left: 0!important;
	margin-bottom: 0px!important;
}

.ipad_new h3 {
    margin: 30px 0 130px;
    font-size: 1.4em;
}



.ipadrakka{
background:#111 url(../custom/img/ipad_img10-1.jpg) bottom right no-repeat!important;
background-size:100% auto!important;
color:#fff!important;
text-align:left!important;
padding-bottom:50%!important;
}

.ipadrakka h3{
font-size:1.1em!important;
font-weight:900!important;
margin:0.4em 0 0.6em!important;
color:#fff!important;
}

.ipadrakka p{
width:100%!important;
text-align:left!important;
font-size:0.85em!important;
margin:0.8em 0 2.5em!important;
color:#dddddd!important;
}
}


@media handheld, only screen and (max-width:380px) {
.mil_ipad_mark_sp {
    width: 37% !important;
    bottom: 384px !important;
}

.story_03 .mil-banner img {
    width: 179px!important;
    vertical-align: bottom;
}

.ipad_new h3 { font-size: 1.2rem;}

.ipadstory_04 {
    background-size: 180%;
    background-position: 70% 0;
}
.ipad_right_img {
    height: 260px;
    background-position: 130% bottom;
}
}