/* ----------------------- reset ------------------------- */
* { margin: 0em; padding: 0em; }
fieldset, img, a img { border: none; }
header, footer, nav, section, article, aside, hgroup { display: block; margin: 0em; padding: 0em; }
li { list-style:none; }

/* ------------------------------ html ------------------------------ */
html#gray { background: rgb(211,211,211); }
html#profithacks { background: url(http://cpl3-profithacks.s3.amazonaws.com/launch/assets-phase-2/_images/css-linenbkgd.jpg) fixed repeat 0em 0em; }

/* ----------------------- tags ------------------------- */
body {  }

p { margin: 1em 0em; }

.lucida { font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Helvetica, sans-serif; }

/* ------------------------------ typography ------------------------------ */
h1, h2, h3, h4 { font-weight: bold; margin: .5em 0em; text-align: center; }
h1 { font-family: Impact, Arial, Helvetica, Verdana; font-weight: normal; /*font-size: 2.25em;*/ font-size: 1.5em; letter-spacing: 0px; text-transform: capitalize; margin: .25em 0em; }
h2 { font-size: 1em; font-style: italic; text-transform: capitalize; }
h3 { font-size: 1.25em; letter-spacing: -1px; font-weight: bold; }
h4 { font-size: 1.25em; color: rgb(204,0,0); letter-spacing: -1px; text-transform: capitalize; }
h4 big { letter-spacing: -2px; font-size: 1.25em; }

/* ------------------------------ links ------------------------------ */
a  {text-decoration: none; color: #36C; }
a:hover { text-decoration: underline; }
a:active { color: #666666; text-decoration: none; }

/* ------------------------------ header#profithacks ------------------------------ */
header#profithacks { }
header#profithacks h1#logo { text-align: center; margin: .5em auto .5em auto; background: url(http://cpl3-profithacks.s3.amazonaws.com/launch/assets-phase-2/_images/css-logo.png) no-repeat 0em 0em; display: block; width: 432px; height: 90px; text-indent: -9999px; }
header#profithacks p#sub-headline { text-align: center; margin: .25em auto; width: 960px; color: rgb(150,150,150); font-size: 1.2em; padding: .15em .25em; font-style:italic;  }
header#profithacks p#sub-headline small { font-size: .8em;  }
header#profithacks p#sub-headline cite { font-style: normal;  }
header#profithacks p#sub-headline strong { font-weight: bold; }
header#profithacks p#sub-headline em {  border-bottom: 1px dotted rgb(230,230,230); }

/* ------------------------------ header#profithacks ------------------------------ */
header#label-ph { position: absolute; top: -1em;width: 225px; padding: .75em 0em .5em 0em; background: rgb(0,0,0); border: 1px solid rgb(0,0,0); border-top: none; border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }
header#label-ph h1 { background: url(http://cpl3-profithacks.s3.amazonaws.com/launch/assets-phase-2/_images/logo-ph-label.png) no-repeat 0em 0em; display: block; width: 205px; margin: 0em auto; height: 45px; text-indent: -9999px; }

/* ------------------------------ footer ------------------------------ */
footer { clear: both; padding: 1em 1em; margin: .5em auto; text-align: right; border-top: 1px dotted rgb(230,230,230); }
footer h5#logo a { float: left; width: 253px; height: 58px; display: block; text-indent: -2000em; background: url(http://cpl3-profithacks.s3.amazonaws.com/launch/assets-phase-2/_images/logo-strategic_profits.png) no-repeat top left; }
footer h5#logo span { text-indent: -2000em; }
footer a { color: rgb(0,0,0); }

/*
-----------------------
LAYOUT SPECIFIC
-----------------------
*/

/* ------------------ div#control ------------------ */
div#control { position: relative; width: 960px; margin: .5em auto; }

div#control div#contain { width: 100%; float: right; margin-left: -175px; }
div#control div#main { margin-left: 175px; }
div#control div#sidebar { width: 175px; float: left; }
div#control div#sidebar ul { margin: 0em 0em 0em 0em; }
div#control div#sidebar ul li { padding: .25em .5em; list-style: none; margin: 0em 0em; margin: .25em 0em }
div#control div#sidebar ul li.focus { margin-top: 75px; background: rgb(255,255,255); border-top: 5px solid rgb(255,255,255); border-left: 5px solid rgb(255,255,255); border-bottom: 5px solid rgb(255,255,255); border-top-left-radius: 5px; -moz-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-bottom-left-radius:5px; -moz-border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
div#control div#sidebar ul li.focus img { background: rgb(240,240,240); border: 1px solid rgb(200,200,200); border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -webkit-border-radius: 2px; padding: .15em; }
div#control div#sidebar ul li p { margin: 0em 0em; }

div#control div#main article { background: rgb(255,255,255); border: 5px solid rgb(255,255,255); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;  }
div#control div#main article aside.letter { margin: 2em 2em; }

ul#social { position: absolute; top: 1em; right: 0em; }
ul#social li { display: block; float: right; width: 100px; }

/*
-----------------------
VIDEO
-----------------------
*/

/* ----------------------- section#video ------------------------- */
section#video { ; }

.videocontainer { width: 95%; 
min-width: 640px; max-width: 1280px; width:expression(document.body.clientWidth < 640? "640px" : document.body.clientWidth > 1280? "1280px" : "auto"); margin: .5em auto .5em auto; padding: .25em .25em; background: rgb(0,0,0); border: 1px solid rgb(0,0,0); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; /*box-shadow: rgba(0,0,0,0.6) 0 0 4px, rgba(0,0,0,0.6) 0 3px 4px;*/ }
.videowrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
.videowrapper aside { background: rgb(0,0,0); }
.videowrapper aside a, .videowrapper aside iframe { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

section#video p { margin: 0em 0em; }

/* ----------------------- div.urgent ------------------------- */
div.urgent { width: 96%; 
min-width: 640px; max-width: 1280px; width:expression(document.body.clientWidth < 640? "640px" : document.body.clientWidth > 1280? "1280px" : "auto"); margin: .5em auto; }

div.urgent aside { background: rgb(255,255,255); border: 2px solid rgb(230,230,230); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0px 0px 16px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 16px rgba(0,0,0,0.3); -khtml-box-shadow: 0px 0px 16px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 16px rgba(0,0,0,0.3); margin: 0em 0em; overflow: auto; }

div.urgent div { margin: 1em 1em; font-size: 1.25em; }

/*
-----------------------
GENERIC
-----------------------
*/

/* ----------------------- classes ------------------------- */
.centre { text-align:center; }
.destra { text-align: right; }
.sinistra { text-align: left; }
.float { float: left; width: 49%; }
.float-right { float: right; margin-left: 1em; }
.float-left { float: left; margin-right: 1em; }
.clearing { clear: both; height: 0em; }
.invisible { display: none; visibility: hidden; }
.white { background: rgb(255,255,255); }
.red { color: rgb(204,0,0); }

.content { width: 960px; margin: 0em auto; }

img.cc-icons { width: 171px; height: 25px; }

a.btn { font-size: 1.5em; padding: .5em 2em; margin: .5em 0em; font-size: 1.5em; padding: .5em 2em; font-family: Vegur, "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Helvetica, sans-serif; font-weight: bold; }

#hide { display: none; }

/*
-----------------------
ADDONS
-----------------------
*/

/* Animation
------------------------------------------------------------ */

@-webkit-keyframes bounce-left {
	0% { opacity: 0; -webkit-transform: translateX(-2000px); }
	60% { opacity: 1; -webkit-transform: translateX(30px); }
	80% { -webkit-transform: translateX(-10px); }
	100% { -webkit-transform: translateX(0); }
}

@-moz-keyframes bounce-left {
	0% { opacity: 0; -moz-transform: translateX(-2000px); }
	60% { opacity: 1; -moz-transform: translateX(30px); }
	80% { -moz-transform: translateX(-10px); }
	100% { -moz-transform: translateX(0); }
}

@-ms-keyframes bounce-left {
	0% { opacity: 0; -ms-transform: translateX(-2000px); }
	60% { opacity: 1; -ms-transform: translateX(30px); }
	80% { -ms-transform: translateX(-10px); }
	100% { -ms-transform: translateX(0); }
}

@-o-keyframes bounce-left {
	0% { opacity: 0; -o-transform: translateX(-2000px); }
	60% { opacity: 1; -o-transform: translateX(30px); }
	80% { -o-transform: translateX(-10px); }
	100% { -o-transform: translateX(0); }
}


@keyframes bounce-right {
	0% { opacity: 0; transform: translateX(2000px); }
	60% { opacity: 1; transform: translateX(-30px); }
	80% { transform: translateX(10px); }
	100% { transform: translateX(0); }
}

@-webkit-keyframes bounce-right {
	0% { opacity: 0; -webkit-transform: translateX(2000px); }
	60% { opacity: 1; -webkit-transform: translateX(-30px); }
	80% { -webkit-transform: translateX(10px); }
	100% { -webkit-transform: translateX(0); }
}

@-moz-keyframes bounce-right {
	0% { opacity: 0; -moz-transform: translateX(2000px); }
	60% { opacity: 1; -moz-transform: translateX(-30px); }
	80% { -moz-transform: translateX(10px); }
	100% { -moz-transform: translateX(0); }
}

@-ms-keyframes bounce-right {
	0% { opacity: 0; -ms-transform: translateX(2000px); }
	60% { opacity: 1; -ms-transform: translateX(-30px); }
	80% { -ms-transform: translateX(10px); }
	100% { -ms-transform: translateX(0); }
}

@-o-keyframes bounce-right {
	0% { opacity: 0; -o-transform: translateX(2000px); }
	60% { opacity: 1; -o-transform: translateX(-30px); }
	80% { -o-transform: translateX(10px); }
	100% { -o-transform: translateX(0); }
}

@keyframes bounce-right {
	0% { opacity: 0; transform: translateX(2000px); }
	60% { opacity: 1; transform: translateX(-30px); }
	80% { transform: translateX(10px); }
	100% { transform: translateX(0); }
}


@-webkit-keyframes bounce-top {
	0% { opacity: 0; -webkit-transform: translateY(-2000px); }
	60% { opacity: 1; -webkit-transform: translateY(30px); }
	80% { -webkit-transform: translateY(-10px); }
	100% { -webkit-transform: translateY(0); }
}

@-moz-keyframes bounce-top {
	0% { opacity: 0; -moz-transform: translateY(-2000px); }
	60% { opacity: 1; -moz-transform: translateY(30px); }
	80% { -moz-transform: translateY(-10px); }
	100% { -moz-transform: translateY(0); }
}

@-ms-keyframes bounce-top {
	0% { opacity: 0; -ms-transform: translateY(-2000px); }
	60% { opacity: 1; -ms-transform: translateY(30px); }
	80% { -ms-transform: translateY(-10px); }
	100% { -ms-transform: translateY(0); }
}

@-o-keyframes bounce-top {
	0% { opacity: 0; -o-transform: translateY(-2000px); }
	60% { opacity: 1; -o-transform: translateY(30px); }
	80% { -o-transform: translateY(-10px); }
	100% { -o-transform: translateY(0); }
}

@keyframes bounce-top {
	0% { opacity: 0; transform: translateY(-2000px); }
	60% { opacity: 1; transform: translateY(30px); }
	80% { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}

.bounce-left {
	-webkit-animation: bounce-left 1s;
	-moz-animation: bounce-left 1s;
	-ms-animation: bounce-left 1s;
	-o-animation: bounce-left 1s;
	animation: bounce-left 1s;
}

.bounce-right {
	-webkit-animation: bounce-right 1s;
	-moz-animation: bounce-right 1s;
	-ms-animation: bounce-right 1s;
	-o-animation: bounce-right 1s;
	animation: bounce-right 1s;
}

.bounce-top {
	-webkit-animation: bounce-top 1.5s;
	-moz-animation: bounce-top 1.5s;
	-ms-animation: bounce-top 1.5s;
	-o-animation: bounce-top 1.5s;
	animation: bounce-top 1.5s;
}

.red-grad { background-color: #fe0002;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(254, 0, 2)), to(rgb(220, 0, 0)));
background-image: -webkit-linear-gradient(top, rgb(254, 0, 2), rgb(220, 0, 0));
background-image: -moz-linear-gradient(top, rgb(254, 0, 2), rgb(220, 0, 0));
background-image: -o-linear-gradient(top, rgb(254, 0, 2), rgb(220, 0, 0));
background-image: -ms-linear-gradient(top, rgb(254, 0, 2), rgb(220, 0, 0));
background-image: linear-gradient(top, rgb(254, 0, 2), rgb(220, 0, 0));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fe0002', EndColorStr='#dc0000');
 }

.blue-grad { background-color: #3b5a97;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(59, 90, 151)), to(rgb(3, 47, 100)));
background-image: -webkit-linear-gradient(top, rgb(59, 90, 151), rgb(3, 47, 100));
background-image: -moz-linear-gradient(top, rgb(59, 90, 151), rgb(3, 47, 100));
background-image: -o-linear-gradient(top, rgb(59, 90, 151), rgb(3, 47, 100));
background-image: -ms-linear-gradient(top, rgb(59, 90, 151), rgb(3, 47, 100));
background-image: linear-gradient(top, rgb(59, 90, 151), rgb(3, 47, 100));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#3b5a97', EndColorStr='#032f64');

 }

.green-grad { background-color: #377723;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(55, 119, 35)), to(rgb(116, 173, 94)));
background-image: -webkit-linear-gradient(top, rgb(55, 119, 35), rgb(116, 173, 94));
background-image: -moz-linear-gradient(top, rgb(55, 119, 35), rgb(116, 173, 94));
background-image: -o-linear-gradient(top, rgb(55, 119, 35), rgb(116, 173, 94));
background-image: -ms-linear-gradient(top, rgb(55, 119, 35), rgb(116, 173, 94));
background-image: linear-gradient(top, rgb(55, 119, 35), rgb(116, 173, 94));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#377723', EndColorStr='#74ad5e');
 }

.drop-shadow { position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
.drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; }

/* ------------------------------ aside.cta ------------------------------ */
aside.cta { clear:both; background: /*rgb(223,228,238)*/rgb(255,255,204); border: 2px solid /*rgb(240,240,240)*/rgb(250,230,100);  -moz-border-radius:0 0 120px 120px / 0 0 6px 6px; border-radius:0 0 120px 120px / 0 0 6px 6px; margin: .5em auto; padding: 1em 0em 1em 0em;  }
aside.cta:before, aside.cta:after { bottom:12px; left:10px; width:50%; height:55%; max-width:200px; -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); -webkit-transform:skew(-8deg) rotate(-3deg); -moz-transform:skew(-8deg) rotate(-3deg); -ms-transform:skew(-8deg) rotate(-3deg); -o-transform:skew(-8deg) rotate(-3deg); transform:skew(-8deg) rotate(-3deg); } 
aside.cta:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); 
-ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); }
aside.cta h3 { text-transform: capitalize; font-size: 1.25em; }
aside.cta h3 span { color: rgb(204,0,0); }
aside.cta a.btn { text-decoration: none; font-weight: bold; }
aside.cta a.large { width: 255px; font-size: 1.5em }