Flat Like a Window

a:hover {transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s}

/*box lato destro*/
.lateralcontainer, .lateralcontainerfull {width: 20%;
height: 100%;
background: rgba(0, 0, 0, .5);
position: fixed;
top: 0;
left: 0; z-index: 0 !important;
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 1%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.5)), color-stop(1%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(0, 0, 0, 0.3))); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 1%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10+, Safari5.1+ */
background: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 1%, rgba(0, 0, 0, 0.3) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 1%, rgba(0, 0, 0, 0.3) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 1%, rgba(0, 0, 0, 0.3) 100%); /* W3C */
filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#80000000', endColorstr='#4D000000', GradientType=1)}
.lateralcontainerfull {width: 100%; z-index: 9 !important}
.lateralcontainerfull .lateralstart {opacity: 0}
#lateralcontainer a:hover {font-weight: 200 !important}

.additiveboxes, .additiveboxes2 {height: 100%; width: 20%; opacity: 0;
left: -100%; transition: all 1s ease-in-out 0s; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; -o-transition: all 1s ease-in-out 0s; -ms-transition: all 1s ease-in-out 0s}
.lateralcontainerfull .additiveboxes {opacity: 1; margin-left: 43%}
.lateralcontainerfull .additiveboxes2 {opacity: 1; margin-left: 30%}

.lateralcontainerfull .additiveboxes .lateralbox {margin-left: -12% !important}
.lateralcontainerfull .additiveboxes .lateralbox2 {margin-left: -1.5% !important}

.lateralcontainerfull .additiveboxes2 .lateralbox {margin-left: 10% !important; z-index: -1 !important}
.lateralcontainerfull .additiveboxes2 .lateralbox2 {margin-left: 20.5% !important; z-index: -1 !important}


.lateralstart {height: 100%;
width: 2%;
position: fixed;
padding: 10% 1%;
opacity: 1;
transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s}

.lateralstart img {padding-bottom: 200%; opacity:.6}

.lateralcontainer:hover .lateralstart {opacity: 0}

.backarrow {background:url(http://i.imgur.com/TTDIpld.png); width: 20%; height: 20%;
margin-left: 50%;
margin-top: 50%}

#backarrow1, #backarrow2, #backarrow3, #backarrow4, #backarrow5, #backarrow6, #backarrow7, #backarrow8, #backarrow9, #backarrow10, #backarrow11, #backarrow12 {opacity: 0; z-index: -1}

.backarrow:hover {background-image:url(http://i.imgur.com/Pi8tqBm.png)}
.fwarrow {background:url(http://i.imgur.com/Q6WLorZ.png); width: 20%; height: 20%}
.fwarrow:hover {background-image:url(http://i.imgur.com/pGyCkzk.png)}
.backarrow, .fwarrow {width: 100%; height: 100%; background-position:center; background-repeat:no-repeat; background-size: 60% auto}

.lateralbox, .lateralbox2 {/*border-radius: 2px 2px 2px 2px; */
height: 15%; background-position:center !important; background-repeat:no-repeat !important;
width: 15%; overflow:hidden;
position: fixed;
left: 50%; color:white; font-size: 85%;
top: 10%; background-size: 60% auto !important}
.lateralsuptitle {font-size: 15pt; text-align:left; font-weight: 100; opacity: 0}
.lateralcontainerfull .lateralsuptitle {opacity:.8}

.lateralcontainerfull #boxes3, .lateralcontainerfull #boxes3 .lateralbox, .lateralcontainerfull #boxes3 .lateralbox2 {top: 33% !important}
.lateralcontainerfull #boxes4 {top: 50% !important}
.lateralcontainerfull #boxes5, .lateralcontainerfull #boxes5 .lateralbox, .lateralcontainerfull #boxes5 .lateralbox2 {top: 70% !important}

.lateralcontainerfull .lateralbox, .lateralcontainerfull .lateralbox2 {opacity: 1; margin-left: -34% !important; width: 20% !important; top: 13%}
.lateralcontainerfull .lateralbox .lateralbox, .lateralcontainerfull .lateralbox .lateralbox2 {width: 9.5% !important}
.lateralcontainerfull .lateralbox2 {margin-left: -23.5% !important}

.lateralcontainer {width: 4%; transition: all .3s ease-in-out .2s; -webkit-transition: all 0.3s ease-in-out .2s; -moz-transition: all 0.3s ease-in-out .2s; -o-transition: all 0.3s ease-in-out .2s; -ms-transition: all 0.3s ease-in-out .2s; z-index: 9 !important}
.lateralcontainer:hover {width: 20%; z-index: 9 !important}
.lateralbox {opacity: 0; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s;
margin-left: -70% !important}
.lateralcontainer:hover .lateralbox {opacity: 1; margin-left: -47.5% !important}
.lateralbox2 {opacity: 0; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s;
margin-left: -70% !important}
.lateralcontainer:hover .lateralbox2 {opacity: 1; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s;
margin-left: -39.5% !important}


.lateralbox:hover #content1, .lateralbox:hover #content2, .lateralbox:hover #content5, .lateralbox:hover #content4 {width: 100%;
height: 85%; opacity: 1 !important;
top: 0; margin-left: 0% !important;
position: absolute}
.lateralbox:hover #row1, .lateralbox:hover #row2, .lateralbox:hover #row5, .lateralbox:hover #row4 {position:relative; color: #EEE;
height: 15%; margin-left: 0% !important; opacity: 1 !important;
position: absolute; font-size: 12pt; line-height: 145%;
top: 85%;
width: 100%}

.lateralgiorno {width: 30%;
font-size: 500%;
float: left;
margin-left: 5%; height: 100%; line-height: 270%; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s}

.lateralcontainerfull .lateralgiorno {font-size: 600%; line-height: 220%; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s}

.lateralgiornosett {position: absolute;
margin-top: 18%;
font-size: 14pt;
text-transform: uppercase;
width: 100%; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s}

.lateralmese {position: absolute;
margin-top: 25%;
font-size: 12pt;
width: 100%; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s}

.lateralanno {position: absolute;
margin-top: 31%;
font-size: 18pt;
text-transform: uppercase;
width: 100%; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s}

.lateralcontainerfull .lateralgiornosett {margin-top: 12%}
.lateralcontainerfull .lateralmese {margin-top: 19%}
.lateralcontainerfull .lateralanno {margin-top: 24%}

#content1, #content2, #content5, #content4 {width: 100%;
height: 85%; opacity: 0; margin-left: -100%;
top: 0; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s}
#row1, #row2, #row5, #row4 {position:relative; color: #EEE; height: 15%; position: absolute; font-size: 12pt; line-height: 145%; opacity: 0; margin-left: -100%;
top: 85%;
width: 100%}
#row1 img, #row2 img, #row5 img, #row4 img {height: 80%}

.lateralbox .floatingcontent,
.lateralbox .visiblecontent,
.lateralbox #zoomedcontent2,
.lateralbox .hidecontent {margin-left: -100% !important;
position: absolute; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s}

.lateralbox a {color: #EEE}
.lateralbox a:hover {color: #CCC}

.lateralbox .titlerow,
.lateralbox .visiblerow,
.lateralbox .hiderow {opacity: 0; margin-left: -100% !important;
transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s}

.lateralbox .hidecontent,
.lateralbox .hiderow {margin-left: 100% !important; opacity: 0 !important; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s}

.lateralbox .visiblecontent,
.lateralbox #zoomedcontent2,
.lateralbox .visiblerow {margin-left: 0 !important; opacity: 1 !important; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s}

#zoomedcontent2 {width: 150%; height: 250%; position:absolute; top: -130%; left: 30%}
.lateralbox #zoomedrow2 {opacity: 0 !important; margin-left: -100% !important}

.lateralcontainer:hover .lateralcredits, .lateralcontainer:hover .lateralopen {margin-left: -47%}
.lateralcredits, .lateralopen, .lateralclose {position:fixed; top: 90%; color:white; margin-left: -100%; left: 50%; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s; width: 15%; font-size: 60%}
.lateralopen {top: 93%; font-size: 80%; width: 3%; height: 5%}
.lateralcontainer:hover .lateralopen {margin-left: -36%}
.lateralclose {top: 2%; font-size: 80%; visibility:hidden; width: 3%; height: 5%}
.lateralcontainerfull .lateralclose {visibility:visible; margin-left: -50%}

.lateralcontainer:hover .lateralsocials {margin-left: -46%}

.lateralsocials {position:fixed; top: 85%; color:white; margin-left: -100%; left: 50%; transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s; width: 12%; height: 3.5%; overflow:hidden}
.sociald {margin-left: 1%; width: 15%; height: 100%; display:inline-block; background-size: 100% auto !important; background-position:center !important; background-repeat:no-repeat !important}

.listof {width: 99%; overflow:hidden;
border-bottom: 1px solid rgb(204, 204, 204);
padding: 2px;
color: rgb(51, 51, 51);
font-size: 11pt;
height: 45px; transition: all .2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s;
line-height: 45px;
text-align: left}
.listof a {color: #333}
.listof a:hover {color: #666}
.listof:hover {border-bottom: 1px solid #FFF; background: #DDD}
.listof img {float: left;
margin-right: 20px;
padding: 2px; margin-left: 10px;
max-height: 40px}

.listof .calendarevent {float: left;
margin-right: 20px;
margin-left: 10px;
padding: 2px;
width: 130px;
/*background: none repeat scroll 0% 0% rgb(238, 238, 238); */
height: 40px}


.listof .dayevent {font-size: 40px;
display: block;
height: 40px;
line-height: 40px;
text-align: right;
float: left; margin-left: 5px;
width: 46px}

.listof .monthevent {font-size: 10pt;
display: inline;
width: 80px;
height: 20px;
margin: 0 0 0 0;
padding: 0;
position: absolute;
line-height: 20px;
text-align: center}
.listof .yearevent {font-size: 16pt;
display: inline;
height: 20px;
margin: 20px 0 0 0;
padding: 0;
width: 80px;
position: absolute;
line-height: 20px;
text-align: center}


.hiddencontentbox {transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s; opacity: 0;
z-index: -1; background-size: 35% !important; background-position: 97% !important; background-repeat:no-repeat !important;
width: 64%;
height: 72%;
position: fixed;
top: 13%;
left: -70%}

.visiblecontentbox {transition: all .6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; -ms-transition: all 0.6s ease-in-out 0s; opacity: 1;
z-index: 8; background-size: 35% !important; background-position: 97% !important; background-repeat:no-repeat !important;
width: 64%;
height: 72%;
position: fixed;
top: 13%;
left: 16%}

.contentboxtitle {width: 21%;
position: absolute;
top: 16%;
right: 9.5%;
font-size: 200%;
color: white}

.contentboxcontent {width: 50%;
position: absolute;
top: 29.5%;
overflow-y: auto;
overflow-x: hidden;
left: 10%;
font-size: 100%;
color: white;
height: 41%;
background: none}

.riferims {width: 100%; height: 36%; overflow:auto}
.riferims img {padding: 2px}


/*Staff e simili*/
.squared {width: 21%;
background: #333; display:inline-table;
border-radius: 2px; margin: 2% 1.2%;
transition: all 0.3s ease-in-out 0s;
color: #DDD; -moz-transition: all .3s ease-in-out 0s;
-o-transition: all .3s ease-in-out 0s;
-ms-transition: all .3s ease-in-out 0s;
transition: all .3s ease-in-out 0s;
-webkit-transition: all .3s ease-in-out 0s}

.squared:hover {-moz-transform: scale(1.2); transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transition: all .3s ease-in-out 0s;
-o-transition: all .3s ease-in-out 0s;
-ms-transition: all .3s ease-in-out 0s;
transition: all .3s ease-in-out 0s;
-webkit-transition: all .3s ease-in-out 0s}
.squared a img {width: 100%}

.role {-moz-transition: all .3s ease-in-out 0s;
-o-transition: all .3s ease-in-out 0s;
-ms-transition: all .3s ease-in-out 0s;
transition: all .3s ease-in-out 0s;
-webkit-transition: all .3s ease-in-out 0s;
position: absolute;
top: 70%;
height: 11%;
padding: 3px 0;
opacity: 0; z-index: -1;
width: 100%;
font-size: 8pt;
background: rgba(0, 0, 0, 0.5)}


.squared:hover .role {font-size: 8pt;
opacity: 1; z-index: 9}