@import url("./web/wp-content/themes/alto_child/fonts/stylesheet.css");
html, body {height:100%; background-color: #ffffff;font-family:"klavika_basic_regularregular"!important;} 
body {margin:0; padding:0; overflow:hidden;}
div {display:block;}
#all {margin-top:9%; width:100%!important; margin-left:auto; margin-right:auto;}
*, *:before, *:after {box-sizing: border-box;}
a.button span:after {content: "▶"; font-size: 10px; position: relative; right: -2px; top: -2px;}
a.button span {margin-right:50px; background-color: rgba(180, 216, 151, 0.7); color: rgb(255, 255, 255); float: right; font-family: "klavika_basic_regularregular" !important; margin-top: 12px; padding-bottom: 8px; padding-left: 18px; padding-right: 18px; padding-top: 8px; margin-top:-10%!important;}
a.button {position:relative!important; z-index: 500!important;}
a.button span:hover {background-color: rgb(128, 168, 23);}
#triangles img {position:absolute; height:310px;}
#layer1 {z-index: 5;}
#layer2 {z-index: 4;}
#layer3 {z-index: 3;}
#layer4 {z-index: 2;}
#layer5 {z-index: 1;}
#mask-layer7, #mask-layer2, #mask-layer3, #mask-layer4, #mask-layer5, #mask-layer6, #layer-text7, #layer-text2, #layer-text3, #layer-text4, #layer-text5, #layer-text6,  #layer-text8, .layer-text2 {opacity:0; z-index:6;}
#layer-text7, #layer-text2, #layer-text3, #layer-text4, #layer-text5, #layer-text6, .layer-text2 {position: absolute;width:330px; height:30px;margin-left: auto;margin-right:auto;}
#layer1, #layer2, #layer3, #layer4, #layer5 {opacity:0.3;}
#layer-text {text-align: center; width:345px; height:30px; margin-bottom:60px;}
#logo {text-align:center; margin-top:30px;}
#triangles img, #triangles, #logo img, #logo {cursor: pointer;}
/*@media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
	#all {margin-top: 0px!important; height: 420px !important;}
	#layer-text {margin-top:30px!important; margin-bottom: 30px!important;}
	#layer-text div {margin-left:3%; margin-right:3%; width:94%;}
	#triangles img {height: auto; margin-left: 5%; margin-right: 5%; position: absolute; width: 90%;}
}*/
@media screen and (min-width: 1025px) {
	#all {margin-top: 0px!important; max-width:345px; height: 550px !important;}
	#layer-text {margin-top:60px!important; margin-bottom: 60px!important;}
	a.button {float: right!important; position: absolute!important; right: 0!important; top: 560px!important; z-index: 500 !important;}
}
@media screen and (min-width:768px) and (max-width: 1024px) {
	#all {margin-top: 0px!important; max-width:345px; height: 480px !important;}
	#layer-text {margin-top:40px!important; margin-bottom: 40px!important;}
	a.button {float: right!important; position: absolute!important; right: 0!important; top: 512px!important; z-index: 500 !important;}
}
@media screen and (min-width:441px) and (max-width: 767px) {
	#all {margin-top: 0px!important; height: 230px !important;}
	#logo img {width: 120px!important;}
	#logo {margin-top: 20px!important;}

	#layer-text {margin-top:15px!important; margin-bottom: 15px!important;}
	#layer-text div {margin-left:5%; margin-right:5%; width:90%;}
	#triangles img {height: auto; margin-left: 35%; margin-right: 35%; position: absolute; width: 30%;}
}
@media screen and (min-width:376px) and (max-width:440px) {
	#logo img {width: 110px!important;}
	#logo {margin-top: 20px!important;}
	#all {margin-top: 0px!important; height: 300px !important;}
	#layer-text {margin-top:15px!important; margin-bottom: 15px!important;}
	#layer-text div {margin-left:5%; margin-right:5%; width:90%;}
	#triangles img {height: auto; margin-left: 25%; margin-right: 25%; position: absolute; width: 50%;}
}
@media screen and (min-width:321px) and (max-width:375px) {
	#logo img {width: 110px!important;}
	#logo {margin-top: 20px!important;}
	#all {margin-top: 0px!important; height: 270px !important;}
	#layer-text {margin-top:15px!important; margin-bottom: 15px!important;}
	#layer-text div {margin-left:3%; margin-right:3%; width:94%;}
	#triangles img {height: auto; margin-left: 25%; margin-right: 25%; position: absolute; width: 50%;}
}
@media screen and (max-width:320px) {
	#logo img {width: 110px!important;}
	#logo {margin-top: 20px!important;}
	#all {margin-top: 0px!important; height: 240px !important;}
	#layer-text {margin-top:15px!important; margin-bottom: 15px!important;}
	#layer-text div {margin-left:2%; margin-right:2%; width:96%;}
	#triangles img {height: auto; margin-left: 25%; margin-right: 25%; position: absolute; width: 50%;}
}