/****************************************/
/*
 * AppSfide Prototipo Theme Styling
 * 
 * Desc: Styling for the website and responsive/adaptive fix. 
 * Author: Rob maggi@blacktrend.com
 * */
/****************************************/

/*
Colours:
- grey: f1f1f1
- border grey: cccccc
- red texts : c31821
- black text over grey: 3f4040
- paragrahps: 5c5c5c
- header bg: 1564b5
- dark blue (btn, etc.) : 0e3f71
- dark grey (footer): 3d3d3d	
- green text: 59b622
- light-blue (youtube border, top-menu separator): 539de9 
- yellow (promo): f6be14

Social
- fb 3a5b95
- tw 1ea7e0
- pin c52a27
- ln 3d93cc
*/

/*// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.*/
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.clearfix:after {
    clear: both;
}


body, html{ width: auto; margin:0; padding:0; font-size: 14px; font-family: 'Lato', sans-serif; }

body.nav-drawer-active{ height: 100%; overflow: hidden; }

/* Btn styling*/

/* Block Colours: standard website blocks are already here */

/* Generic margin and padding */
.m-v-sm{ margin: 5px 0; }
.m-v-m{ margin: 10px 0; }
.m-v-lg{ margin: 20px 0; }

/* Header / Footer styling*/
.header{}
	.header-container{ position: relative; }
	.header a, .header a:link, .header a:visited, .header a:focus, .header a:active{ 
		color: #fff; text-decoration: none; 
	}
	.header a:hover{ text-decoration: underline; }
		
.logo{ float: left; }
	.logo img{ width: 120px; }
	
.header-menu ul{ list-style:none; margin:0; padding:0;}
	.header-menu ul li{ display: inline-block; margin:0 5px; padding:0;}
		.header-menu ul li a{ font-weight: bold; line-height: 26px; display: block; text-transform: uppercase; }
		
#top-menu{ float: right; width: 161px; text-align: left; }
	.top-menu-nav{ text-align: right; }
	.top-menu-nav ul li{ margin:0 0 0 10px; }
	.top-menu-nav ul li a{ font-size: 0.95em; padding: 0 0 0 10px; border-left: 1px solid #fff; }
	.top-menu-nav ul li:first-child a{ border:none; }



.header h1{ text-align: center; margin-top: 0; }

/* Drawer */	
#nav-drawer{ font-size: 1em; position: absolute; top:0; left:0; height: 100%; width:100%; overflow-y: auto; width:0px; z-index: 9999;}
	.close-drawer{ display: block; width: 42px; height: 42px; float: right; margin: 0; background: url('../img/ico_left-arrow.png') no-repeat scroll center;  }
	#nav-drawer .tria{ width: 0; height: 0; border-style: solid; border-width: 0 50px 20px 50px; border-color: transparent transparent #0e3f71 transparent; }
	.overlay{ background: rgba(0,0,0,.8);}
	.nav-drawer-content{ background: #0e3f71; padding: 15px; float: left; }
		.nav-block{ margin: 15px 0 0; padding: 15px 0 0; border-top: 1px solid #539de9; }
		.close-drawer + .nav-block{ border: none; margin-top:0; padding-top:0; }
			.nav-block .nav-block-name{ padding:0; margin: 0 0 5px; font-weight: 800; font-size: 1.2em;  color: #fff; }
			.nav-block ul{ padding:0; margin:0; list-style:none; }
				.nav-block ul li{ display: block; margin:0 0 5px;  }
					.nav-block ul li a, .nav-block ul li a:link, .nav-block ul li a:visited{ color: #fff;}
body.nav-drawer-active #nav-drawer{ width: 100%; }

	
/* Footer */
.footer{ text-align: center; }
	.footer-top{}
	.footer-middle{ }
	.footer-bottom{  }
	
	
/* Typography */
h1{ font-size: 1.55em; font-weight: 800;}
h2{ font-size: 1.45em; font-weight: bold; margin-top: 0; }
	
.h-default-case{ text-transform: none !important; }

/* Hamburger */
.hamburger{ display: block; position: absolute; bottom:10px; right:0; cursor: pointer; width: 48px; }
	.hamburger span{ display: block; width: 48px; height: 6px; margin:8px 0 0 0; background-color: #fff; }
	.hamburger span:first-child{ margin:0; }

/* Index, Page and Article's blocks*/


/* Swiper fixes */
.swiper-entry{ position: relative; }
	.swiper-container{ position: relative; }
		ul.swiper-wrapper{ margin:0; padding:0; list-style:none; }
			ul.swiper-wrapper li.swiper-slide{ display: block; margin:0; padding:0; text-align:center; }
			/*ul.swiper-wrapper li.swiper-slide img{ height: 100%; width: 100%;}*/
		.swiper-container .pagination{ position: absolute; bottom: 0; height: 20px; width: 100%; text-align: center;}
			.swiper-pagination-switch{
				display: inline-block;
				width: 15px;
				height: 15px;
				border-radius: 15px;
				background: #1564B5;
				margin: 0 5px 5px;
				opacity: 0.8;
				border: 1px solid #1564B5;
				cursor: pointer;
			}
			.swiper-active-switch {
				background: #fff;
			}
	.swiper-entry .nav{}
		.swiper-entry .nav a{ 
				position: absolute;
				top: 50%;
				margin-top: -15px;
				width: 17px;
				height: 30px;
				font-size: 1.8em;
		}
		.swiper-entry .nav .next{ right: -40px; background: url('../img/arrow-right.png') no-repeat scroll center; }
		.swiper-entry .nav .prev{ left: -40px; background: url('../img/arrow-left.png') no-repeat scroll center; }

/* Accordion */
.accordion-title{ margin:0; padding: 15px 10px; font-weight: 600; font-size: 1.2em; cursor: pointer; }
.accordion-title.active, .accordion-title:hover{ }
.accordion-content{ margin:0; padding: 15px 10px; font-size: 1em; }
	
	
.gradient-bottom-to-top{ overflow-y:hidden; }	
.gradient-bottom-to-top .gradient{ 
	height: 0px; width: auto; border-top: 1px solid #ddd; 
	-webkit-box-shadow: 0 0px 220px 22px #aaa;
}
  
  
/* Featured */
.featured{}

/* PRESIDENTIZER*/

.presidentizer-head{ background: url('../img/sx-head.png') no-repeat scroll left top; margin:0 auto;}
	.presidentizer-head > div{ background: url('../img/dx-head.png') no-repeat scroll right top;}
		.presidentizer-head > div > div{ background: url('../img/head.png') no-repeat scroll center top;}
.presidentizer-head > div > div,
.presidentizer-head > div,
.presidentizer-head{ width: 100%; height: 150px; }

.presidentizer-head > div > div{ width: 490px; margin:0 auto;}
.btn .btn-primary{}

.header{ padding: 5px 0 0px;  }
	.header h1{  text-transform: uppercase; font-size: 3.7em; padding-top: 15px;}
	.header p{ font-size: 1.5em; margin: 0 auto; text-align: center; }

html{ position: relative; height: 100%; }
body{ position: relative; height: 100%; font-family: 'Times new roman','Droid Serif', serif; background-color: #f1f2f1}
#whole-site{ position: relative; z-index: 2; }
#italy-flag{ position: absolute; z-index:1; width: 100%; height: 480px; top: 0px; left:0; }
	#italy-flag > *{ height: 100%; z-index:1; position: relative;}
	#italy-flag .italy-green{ background-color: #009246; width: 50%; float: left; }
	#italy-flag .italy-red{ background-color: #CE2B37; width: 50%; float: right;}
	#italy-flag .italy-white{ background-color:#F1F2F1; margin: 0 auto; width: 33%; z-index:2;}

#italy-flag .opacity{ display: none; }
.phase-4 #italy-flag .opacity{ display: block; background-color: rgba(0,0,0,.5); z-index: 4; width: 100%; height:100%; top: -100%; transition: background .2s;}

.phase-3 #italy-flag{ background: #5264ae url('../img/quir.jpeg') no-repeat scroll center; background-size: 100% auto; }
	.phase-3 #italy-flag .italy-green, 
	.phase-3 #italy-flag .italy-red, 
	.phase-3 #italy-flag .italy-white{ background: transparent; }

/* PRESIDENTIZER PHASES*/
#phase-container{ position: relative; width: 33%; margin: 0 auto; height: 100%; }
	#phase-1, #phase-2, #phase-3{ position: absolute; top: 0; left:0; width:100%; height: 100%; z-index:1;}
	#phase-2{z-index:2; }
	#phase-3{z-index:3; }
	
.presidentizer-body{ position: relative; width: 100%; margin: 0 auto;  }
	.presidentizer-body .labels{ width: 200px; position: absolute; left: -230px; top:0;}
	.presidentizer-body .names{ width: 200px; position: absolute; right: -230px; top:0;}
	.presidentizer-body .labels .piece-label,
	.presidentizer-body .names .name{ position: relative; }
		.presidentizer-body .labels .piece-label .value, 
		.presidentizer-body .names .name .value{ position: absolute; width: 100%; color:#fff; font-size: 1.5em; font-weight: bold; /* Vertical centering */ 
			top: 50%; margin-top:0; padding-top:0;
			-webkit-transform: translateY(-50%);
			-moz-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			transform: translateY(-50%);
		}
		
.presidentizer-body h2{ text-align: center; margin: 40px 0; }

.presidentizer-body .labels{ text-align: right; }
	.presidentizer-body .piece-label{ padding-top: 0px; }
		.presidentizer-body .labels h3{ font-size: 1em; margin:0 0 5px; }
		.presidentizer-body .labels .name{ font-weight: bold; font-size: 1.2em; }

.presidentizer-body .names{  text-align: left; }
	.presidentizer-body .name .name{ font-weight: bold; font-size: 1.2em; }
				
.presidentizer-body .image-parts{}
	.presidentizer-body .image-parts .swiper-entry{ border-top: 1px solid #ddd; width:260px; margin:-1px auto 0;}
		.presidentizer-body .image-parts .swiper-entry:first-child{ border-top: 1px solid transparent; }
		.presidentizer-body .image-parts .swiper-container{ }
			.presidentizer-body .image-parts .swiper-container{    
				cursor: move; /* fallback if grab cursor is unsupported */
			    cursor: grab;
			    cursor: -moz-grab;
			    cursor: -webkit-grab;
			}
			

.cta-block{ margin: 0px 0 50px 0;  text-align: center; position: relative; z-index: 4;}
	.cta-block a{ display: inline-block; margin: 5px 0; }

#audio-ctr{ margin: 5px auto 0px auto; text-align: center; }
	#audio-ctr .pause, #audio-ctr .play{ display: inline-block; padding-left: 20px;  line-height: 18px;  color:#000; } 
	#audio-ctr .play{ background: url('../img/play.png') no-repeat scroll left; }
	#audio-ctr .pause{ background: url('../img/pause.png') no-repeat scroll left; }
	
	.audio-loading #audio-ctr .play, .loading #audio-ctr .pause{ display: none; }
	#audio-ctr .loading{ display: none; }
	.audio-loading #audio-ctr .loading{ display: inline-block; }
	.playing #audio-ctr .play{ display: none; }
	.playing #audio-ctr .pause{ display: inline-block; }
	#audio-ctr .play{ display: inline-block; }
	#audio-ctr .pause{ display: none; }

	#audio-ctr .loading .total {width: 180px; margin-bottom: 5px; display: inline-block;}
		#audio-ctr .loading .total span{ height: 2px; margin:0 1px; background-color: #ddd; display: inline-block;}
		#audio-ctr .loading .total span.loaded{ background-color: #245580; height: 3px;}
		
	#audio-ctr .track{ width: 180px; margin: 0 auto 5px;  height: 1px; background-color: #ddd; text-align: left; display:none; }
		#audio-ctr .track .prg{ display: block; background-color: #245580; height: 1px;}
		
		
		
.phase-1 .toph1,
.phase-1 .toph3,
.phase-1 .toph4,
.phase-1 .toph5{ display: none;}
			
.phase-2 #phase-1 .labels, 
.phase-2 #phase-1 .names,
.phase-2 #phase-1 .swiper-entry .nav,
.phase-2 .toph2,
.phase-2 .toph4,
.phase-2 .toph5{ display: none; }

.phase-2 #phase-1 .swiper-entry{ border-color: transparent; }
	.phase-2 #phase-1 .swiper-entry ul li { cursor: default; }
	
.phase-2 #phase-2 .swiper-entry{ border-top:1px solid transparent; }

.phase-2 .toph1{ display: block; }
.phase-2 .toph3{ display: inline-block;}
.phase-2 .toph2{ display: none; }


.phase-3 #phase-2 .labels, 
.phase-3 #phase-2 .names,
.phase-3 #phase-2 .swiper-entry .nav,
.phase-3 .toph1,
.phase-3 .toph3{ display: none; }


.phase-3 .toph4{ display: inline-block; }

.phase-4 .toph5{ display: inline-block; margin: 0 15px;  }

.only-landing{ display: none !important; }
.landing .only-landing.inline{ display: inline-block !important; }
.landing .only-landing.block{ display: block !important;}

.phase-4.landing .toph4, .phase-4 .toph4{ display: none !important; }



#phase-3 .pack-label{  font-weight: bold; background-color: #009246;  width: 270px; margin: 270px auto 0;  }
#phase-3 .pack-label .green{ background-color: #009246; height: 16px;}
#phase-3 .pack-label .red{ background-color: #CE2B37; height: 16px;}
#phase-3 .pack-label .white {font-size: 1.2em; padding: 0px; background: #F1F2F1; text-align: center; }
#phase-3 .pack-label > div{ height: 22px;  }


.creating-end{ display: none; }
.phase-3 .creating-end{ display: inline-block; }
.phase-3 .creating-end.share-tip{ display: block; }
.landing.phase-3 .creating-end{ display:none; }
.phase-3.landing .pack-label{ cursor: pointer; }

#monster-share{ /*background: url('../img/bt.jpg') no-repeat scroll center; color: #fff; padding-left: 50px; line-height: 60px;  */ width: 300px;  }
	/*#monster-share:hover{ color:#fff; }*/

.old-browser-unsupported{ display: none; }


/* Responsive */
.viewport{ min-width: 320px; width: 100%; margin:0 auto; }
.layoutwrap{ margin: 0 5px; }

.presidentizer-head { width: 95%;  }
.presidentizer-head,
.presidentizer-head > div{ background-size:  auto 100%; }
.presidentizer-head > div > div{ height: 30px; background-size:  100%; }

@media only screen and (min-width: 360px){
	/*.viewport{ width: 360px; }*/
	.layoutwrap{ margin: 0 8px; }
}


@media only screen and (min-width: 480px){
	/*.viewport{ width: 480px; }*/
	.layoutwrap{ margin: 0 8px; }
}


@media only screen and (max-width: 767px){ /* Smartphone and below */	
	.only-web{ display: none !important; }
	
	.page-body{ overflow: hidden; width: 100%; }
		
	.scroll-top{
		font-weight: 800; font-size: 1.5em; padding: 10px 0 10px 45px; background: url('../img/ico_scrollup.png') no-repeat scroll left; 
	}
	
	#nav-drawer .nav-drawer-content .close-drawer + .nav-block{ margin-top: 10px; }
	
	
	#italy-flag{ height: 715px; }
	#italy-flag .italy-white{ width: 38%; min-width: 220px;} 
	
	.header{ width: 100%; padding-top: 0;  height: 110px; }
		.presidentizer-head{ width: 100%; height: 50px; }

		.presidentizer-head,
		.presidentizer-head > div,
		.presidentizer-head > div > div{ background-size: 100% auto; }

	.presidentizer-head, .presidentizer-head > div, .presidentizer-head > div > div{ width: 100%; height: 80px; margin: 0; }
		.presidentizer-head > div > div{ height: 104px; }
		.presidentizer-head > div > div { font-size: 0.7em; }	
			
	.phase-3 #italy-flag{background-size: auto 100%;}

	#phase-container{ width: 320px; }
	
	.footer-block{ float: none !important; margin: 0 0 10px; text-align: center !important; }
}

@media only screen and (max-width: 360px){
	.presidentizer-head > div > div { font-size: 0.6em; }
}


@media only screen and (max-width: 480px){
	
	#phase-container{ width: 310px; }
	.swiper-entry .nav .prev{ left: -25px; }
	.swiper-entry .nav .next{ right: -25px; }
	.presidentizer-body .labels{ width: 180px; position: absolute; left: -190px; top:0;}
	.presidentizer-body .names{ width: 180px; position: absolute; right: -190px; top:0;}
}

@media only screen and (max-width: 440px){
	
	.presidentizer-body .names, .presidentizer-body .labels{ display: none !important; }
}



@media only screen and (min-width: 768px){ /* Tablet and above */	
	/*.viewport{ width: 768px; }*/
	.only-smartphone{ display: none !important; }
	.layoutwrap{ margin: 0 10px; }
	
	.m-v-sm{ margin: 10px 0; }
	.m-v-m{ margin: 15px 0; }
	.m-v-lg{ margin: 30px 0; }
	
	/* Header */
	.header{ margin-bottom: 0px; }
		.logo img{ width: auto; }
		#top-menu{ width: auto; margin: 10px 0;}
		
		.presidentizer-head > div > div { font-size: 0.8em; }
	
	#italy-flag{ height: 730px; }

	.presidentizer-head, .presidentizer-head > div{ width: 740px; }
	.presidentizer-head, .presidentizer-head > div{ height: 120px; }
		.presidentizer-head > div > div{ height: 104px; }
		.presidentizer-head > div > div { font-size: 0.8em; }	

	
	#phase-container{ width: 40%; }
	
	.phase-3 #italy-flag{ background-size: auto 100%;}
		
	/* Nav drawer */
	.submenu-container{  }
	#nav-drawer{ width: 748px; position: rleative; float: left; left: 50%; margin-left: -374px; top: 134px;  display: none; }
		#nav-drawer .tria{ margin-left: 28%;}
		#nav-drawer .nav-drawer-content{ width: auto; float: none; }	
			#nav-drawer .nav-drawer-content .nav-block{ border: none; float: left;  width: 32%; margin:0 0.5% 10px;; padding: 0}
	
	
	/* Footer */
	.footer-middle .accepted-cards li { display: inline-block; }
	
	.fb-like-box,
	.fb-like-box > *,
	.fb-like-box iframe{ width: 100% !important;  }
		
}
@media only screen and (min-width: 960px){
/*	.viewport{ width: 960px; }*/
	#main-menu li a{ font-size: 1.285em; padding: 8px 0 10px 15px;}
	
	#nav-drawer{ width: 940px; position: rleative; float: left; left: 50%; margin-left: -474px; top: 134px;  display: none; height: auto;}
		#nav-drawer .tria{ margin-left: 30.5%;}
		#nav-drawer .nav-drawer-content .nav-block{ width: 23%; margin:0 1% 10px;;}

	#italy-flag{ height: 740px; }

	.presidentizer-head, .presidentizer-head > div{ width: 950px; }
	.presidentizer-head, .presidentizer-head > div{ height: 120px; }
		.presidentizer-head > div > div{ height: 104px; }
		.presidentizer-head > div > div { font-size: 0.8em; }	

}

@media only screen and (min-width: 768px) and (max-width: 770px){

}

@media only screen and (min-width: 1100px){
	.phase-3 #italy-flag{ background-size: auto  100% ;}
}
@media only screen and (min-width: 1050px){
	.viewport{}
	.presidentizer-head, .presidentizer-head > div{ width: 900px; height: 120px; }
		.presidentizer-head > div > div { font-size: 0.9em; height: 100px;  }
			.presidentizer-head > div > div h1{ margin-bottom: -3px;}
	#italy-flag{ height: 740px; }

}