@font-face {
    font-family: Baton;
    src: url(/fonts/BatonTurboWeb-Regular.woff);
}

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
	margin:0;
	padding:0;
	border-width:0;
}

span {
	text-transform: lowercase;}

html, body {
	hyphens: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	/* height: 100%; */
/*	overflow: hidden;*/
}

div.didascalia {
position: fixed;
top: 48px;
width: 41%;
left: 9%;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
cursor: default;
}

#fotografie {
	width:60%;
	float: right;
}

#container {
	top: 21px;
	bottom: 21px;
	margin-left: 6%;
	right: 6%; 	
	position: absolute;
}

#menu {
	position:fixed;
	bottom:48px;
	margin-left:9%;
	z-index: 99;
}

#mainDiv {
	top: 21px;
	bottom: 21px;
	margin-left: 6%; /*28px;*/
	right: 6%; /*28px;*/
	/* max-width: 1200px; */
	/* max-height: 768px; */
	float: right;
	/* width: 100%; */
	/* height: 100%; */
	position: fixed;
	display: block;
}

div.boh {
    /* float: right; */
    height: 100%;
    width: 100%;
}

p.Basic-Paragraph {
	color:#000000;
	font-family: Baton, sans-serif;
	font-size:21px;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:1.2;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	orphans:1;
	page-break-after:auto;
	page-break-before:auto;
	text-align:left;
	text-decoration:none;
	text-indent:0;
	text-transform:none;
	widows:1;
}

p.b_Basic-Paragraph {
	color:#000000;
	font-family: Baton, sans-serif;
	font-size:12px;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:1.2;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	orphans:1;
	page-break-after:auto;
	page-break-before:auto;
	text-align:left;
	text-decoration:none;
	text-indent:0;
	text-transform:none;
	widows:1;
}

span.b_titoli {
	font-family: Baton, sans-serif;
	font-size:18px;
	font-style:normal;
	font-weight:normal;
	padding-right: 24px;
}

span.scimmia {
	position:relative; 
	top: 35px;
	left: -15px;
} 

.scritta {
		width: 123px;
		height: 87px;
    	background-image: url("../monkey.png");
    	background-size: contain;
		display: inline-block;
} 

.scritta:hover {
        background-image: url("../monkey_hover.png");
}

.scritta2 {
		width: 65px;
		height: 56px;
/*    	background-image: url("../buy_hover.png");
*/    	background-size: contain;
		display: inline-block;
		cursor:grab;
} 

/*.scritta2:hover {
        background-image: url("../buy_hover.png");
}*/

#descrizione {display: inherit;}

span.sotto_titoli {
	font-family: Baton, sans-serif;
	font-size:12px;
	font-style:normal;
	font-weight:normal;
	padding-right: 24px;
}

.carbon > span {
	font-family: Baton, sans-serif;
	font-size:12px;
	font-style:normal;
	font-weight:normal;
	padding-right: 0;
}

p.ParaOverride-1 {
	-epub-hyphens:none;
}
span.CharOverride-1 {
	font-style:italic;
	font-weight:normal;
}
span.CharOverride-2 {
	font-style:normal;
	font-weight:normal;
}

a {text-decoration: none;
	color:black;
}

a:hover {text-decoration: none;
	font-style: italic;
	color:black;
}

img {
max-width: 100%;
max-height: 100%;
margin-bottom: 21px;
}

@keyframes oscillate {
    0% {
        transform: rotate(-15deg)
    }

    50% {
        transform: rotate(15deg)
    }

    100% {
        transform: rotate(-15deg)
    }
}

@keyframes flap-left {
    0% {
        transform: rotateY(0deg)
    }

    30% {
        transform: rotateY(-60deg)
    }

    60% {
        transform: rotateY(60deg)
    }

    90% {
        transform: rotateY(0deg)
    }
}

@keyframes flap-right {
    0% {
        transform: rotateY(0deg)
    }

    30% {
        transform: rotateY(60deg)
    }

    60% {
        transform: rotateY(-60deg)
    }

    90% {
        transform: rotateY(0deg)
    }
}

.cloud {
    width: 78.5px;
    height: 42.5px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    background-image: url('../cloud.png');
    background-size: contain;
}

.giraffe {
    width: 189.5px;
    height: 300px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    background-image: url('../giraffa.png');
    background-size: contain;
}

.carbon {
    position: fixed;
    bottom: 48px;
    right: 9%;
    width:25%;
}

/**
 * 15.4 Desktop Small 955px
 */

@media screen and (max-width: 955px) {
}

/**
 * 15.3 Tablet Large 880px
 */

@media screen and (max-width: 800px) {

div.didascalia {
    top: 24px;
    width: 90%;
    left: 21px;
    }

#mainDiv {
    top: 10px;
    bottom: 10px;
    margin-left: 10px;
    right: 10px;
	}
	
#fotografie {
	width:100%;
    }

#container {
	top: 10px;
	bottom: 10px;
	margin-left: 10px;
	right: 10px;
    }
	
img {margin-bottom: 6px;}
	
#menu {
	bottom:24px;
	margin-left: 21px;
	margin-right: 21px;
    }
	
p.Basic-Paragraph {
	font-size:16px;
    }

span.b_titoli {
	font-size:16px;
	}

span.scimmia {
    top: initial;
    left: initial;
    bottom: 6px;
    right: 10px;
    position: fixed;
}  
	
#descrizione {display: none;}

	.cloud {
/*  width: 100px;
    height: 58px;*/
    }
 	.giraffe {
/*  width: 122px;
    height: 195px;*/
    }
	
.carbon {
    position: relative;
    bottom: 0;
    right: 0;
    width:100%;
}
    
    #thirdTitle {
        display: none;
    }
    
}

/** 
 * 15.3 Tablet Large 880px
 */
@media screen and (max-width: 350px) {
	
	span.scritta::after {content: "Monkey factor";}
	
    span.scritta {background-image: none; width: auto; height: auto;}
	
    .scritta:hover {background-image: none;}
    
    span.scimmia {
    top: initial;
    left: initial;
    bottom: initial;
    right: initial;
    position: inherit;
    }  

    	
.carbon {
    display: none;
}
}