/* #df8644  orange*/
/* #2c2927 dark gray */
/* #6abdc9 #c0d7d9 b8c6c7 blue */
/* #5ca4ae dark blue */
/* #023439 super dark blue */
/* #81f1f1 less acid blue  */



body,
html {
	margin: 0px;
	font-family: 'Barlow Semi Condensed', sans-serif;
	--orange: #df8644;
	--black: #023439;
	--lightblue: #81f1f1;
	scroll-behavior: smooth;

}
a {
	text-decoration: none;
	margin:0;
	color: var(--black);
	font-size: 80%;
	font-weight: 700;
}

div {
	top: 0;
	left: 0;
	position: relative;
	box-sizing: border-box;
/* 	border: 1px solid black; */
}

p,
h1,
h2,
h3,
h4,
span {
	margin:0;
	color: var(--black);
	font-weight: bold;
	font-size: 250%;
	line-height: 100%;
	line-height: 35px;
	font-weight: 700;
	
}

.bigpage {
	width: 100%;
	height: auto;
	background-image: url("bigpagebgpale5.jpg");
	background-size: cover;
		background-position: 50% 50%;
		background-repeat: no-repeat;
			user-select: none;
			-webkit-touch-callout: none; /* iOS Safari */
			-webkit-user-select: none; /* Safari */
			-khtml-user-select: none; /* Konqueror HTML */
			-moz-user-select: none; /* Old versions of Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
	 
}


.pageone {
	width: 100%;
	height: 630px;
}
.pagetwo,
.pagethree,
.pagefour{
	width: 100%;
	height: auto;
	background-color: transparent;
}
.pagefour {
	text-align: center;
}
.pagefive {
	text-align: center;
	width: 100%;
	overflow: hidden;
	height: 870px;
	background-color: transparent;
	
}



/* --------------TITLES ----------- */


.projectstitleleft h1,
.projectstitleright h1,
.interiortitleleft h1,
.interiortitleright h1,
.abouttitleleft h1,
.abouttitleright h1,
.contactstitleleft h1,
.contactstitleright h1 {
	display: inline-block;
	font-size: 350%;
	color: var(--orange);
	font-weight: 500;
	font-stretch: ultra-condensed;
	line-height: 120px;
}


.projectstitle,
.interiortitle, 
.abouttitle,
.contactstitle {
	position: relative;
	width: 100%;
	height: 120px;
	display: inline-block;
	margin-top: 60px;
}
#titleleft {
	position: absolute;
	height: 100%;
	text-align: right;
}
#titleright {
	position: absolute;
	height: 100%;
	text-align: left;
}

.projectstitleleft {
	width: 50%;
	overflow: hidden;
}
.projectstitleright {
	width: 50%;
	left: 50%;
}
.projectstitleright h1 {
	margin: 0 1.5%;
}
.projectstitleleft h1 {
	margin: 0 1%;
	
}



.interiortitleleft {
	width: 55%;
}
.interiortitleright {
	width: 45%;
	left: 55%;
}
.interiortitleleft h1 {
	margin: 0 4%;
}
.interiortitleright h1 {
	margin: 0 0.8%;
}





.abouttitleleft {
	width: 45%;
}
.abouttitleright {
	left: 45%;
	width: 55%;
}




.contactstitleleft {
	width: 50%;
}
.contactstitleright {
	width: 50%;
	left: 50%;
}


.contactstitleleft h1 {
	margin: 0 2%;
}
.contactstitleright h1 {
	margin: 0 1%;
}



.projectstitle:hover h1,
.interiortitle:hover h1,
.abouttitle:hover h1, 
.contactstitle:hover h1,
.contactstitle:hover .tline,
.contactstitle:hover .tlinemob {
	animation: titles 0.6s ease-in-out forwards;
}

@keyframes titles {
	
0% { 
	transform: translateY(0px) 
} 
60%{ 
    transform: translateY(-30px) ;
} 
85% {
    transform:  translateY(0px) ;
}
95% { 
    transform: translateY(-3px) ;
} 
100%{ 
    transform: translateY(0px) ;
} 
}


.boxtop a {
	font-size: 100%;
}

.subtitle h1,
.subtitleback h1 {
	font-size: 120%;
	line-height: 40px;
	letter-spacing: 2px;
	color: var(--orange);
		
	transition-property: all;
	transition-duration: 1s;
	transition-delay: 0.5s;
}

/* --------------CONNECTION LINES-------------- */

.bartopconnectline {
	position: relative;
	display: inline-block;
	vertical-align: top;
	top: 0px;
	left: -5%;
	width: 5.5%;
	height: 100px;
	 border-radius: 0px 0px 20px 0px;
	 border-right: 5px solid var(--orange);
	 border-bottom: 5px solid var(--orange);

	
}

.textconnectline {
	position: absolute;
	overflow: visible;
	width: 5%;
	left: 50%;
	height: 660px;  /*  ****pageone height - bartop height + extra tail*** */
	top: 95px; /* ***bartop height***  */
	 border-radius: 20px 0px 0px 0px;
	 border-top: 5px solid var(--orange);
/* 	 border-right: 5px solid transparent;
	 border-bottom: 5px solid transparent; */
	 border-left: 5px solid var(--orange);
}

.projectsconnectline {
	position: absolute;
	overflow: visible;
	height: 660px;
	top: -663px;
	width: 25%;
	left: calc(25% + 5px);	
	 border-radius: 0px 0px 30px 0px;
	 border-right: 5px solid var(--orange);
	 border-bottom: 5px solid var(--orange);

}
.boxtopconnectline {
	position: absolute;
	overflow: visible;
	height: calc(100% + 73px); /* including top -8 and margin sotto +5px bordersize*/
	top: -8px;
	width: 40%;
	left: 3%;	
	 border-radius: 30px 0px 0px 30px;
	 border-top: 5px solid var(--orange);
	 border-bottom: 5px solid var(--orange);
	 border-left: 5px solid var(--orange);
}

.interiorconnectlineone {
	position: absolute;
	overflow: visible;
	height: 60%; 
	width: 30%;
	left: 25%;
	 border-radius: 0px 10px 0px 0px;
	 border-top: 5px solid var(--orange);
	 border-right: 5px solid var(--orange);
}
.interiorconnectlinetwo {
	position: absolute;
	overflow: visible;
	top: -163px;
	height: 100px; 
	width: 30%;
	left: calc(55% - 5px);
	 border-radius: 0px 0px 0px 10px;
	 border-bottom: 5px solid var(--orange);
	 border-left: 5px solid var(--orange);
}

.galleryconnectline {
	position: absolute;
	overflow: visible;
	top: -68px;
	left: 75%;
	width: 22%;
	height: calc(100% + 128px);
	/* background-color: green; */
	border-radius: 0px 30px 30px 0px;
	border-left: 5px solid transparent;
	border-bottom: 5px solid var(--orange);
	border-top: 5px solid var(--orange);
	border-right: 5px solid var(--orange);
}

.aboutconnectlineone {
	position: absolute;
	overflow: visible;
	top: -5px; /* border size */
	left: calc(45% + 3px);
	width: 33%;
	height: 100px;
	border-radius: 10px 0px 0px 0px;
	border-top: 5px solid var(--orange);
	border-left: 5px solid var(--orange);
	
	
}

.aboutconnectlinetwo {
	position: absolute;
	overflow: visible;
	top: 25px; 
	left: 10%;
	width: calc(35% + 8px);
	height: 100px;
	border-radius: 0px 0px 10px 0px;
	border-right: 5px solid var(--orange);
	border-bottom: 5px solid var(--orange);
	
}
.pagefourconnectline {
	position: absolute;
	overflow: visible;
	top: 180px; 
	left: 3%;
	width: 25%;
	height: calc(100% - 115px);
	border-radius: 30px 0px 0px 30px;
	border-top: 5px solid var(--orange);
	border-bottom: 5px solid var(--orange);
	border-left: 5px solid var(--orange);
}

.contactsconnectlineone{
	position: absolute;
	overflow: visible;
	top: 0px;
	left: 10%;
	width: 40%;
	height: 100px;
	border-radius: 0px 10px 0px 0px;
	border-top: 5px solid var(--orange);
	border-right: 5px solid var(--orange);
	
}
.contactsconnectlinetwo {
	position: absolute;
	overflow: visible;
	top: 25px; 
	left: calc(50% - 5px);
	width: 30%;
	height: 100px;
	border-radius: 0px 0px 0px 10px;
	border-bottom: 5px solid var(--orange);
	border-left: 5px solid var(--orange);
	
	
	
}

.tline {
	position: absolute;
	top: 53px;
	left: calc(50% - 0.5rem);
	width: 14px;
	height: 90px;
	border-top: 5px solid var(--orange);
	
}

.pagefiveconnectline {
	position: absolute;
	overflow: visible;
	top: 180px; 
	left: 60%;
	width: 25%;
	height: 720px;
	border-radius: 0px 30px 0px 0px;
	border-top: 5px solid var(--orange);
	border-right: 5px solid var(--orange);

}



/* ---------------general bigpage animation---------------- */


.snail {
	position: absolute;
    top: 0px;
	left: 26%;
	width: 200px;
	height: 100px;
	background-image: url("snailtoleft0.png");
	background-size:  auto 80%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 0;
	z-index: 1;
	animation: snailtoleft 30s ease-in-out infinite;

	
}

@keyframes snailtoleft {
0% { 
	opacity: 0;
	transform:  translateY(0px) translateX(0px);
}
1% {
	opacity: 1;
	transform:  translateY(724px) translateX(0px);
}

5% {
	transform:  translateY(724px) translateX(0px);
}
6% {
	transform: translateY(724px) translateX(1px);
}
10% {
	transform: translateY(724px) translateX(-25px);
}
11% {
	transform: translateY(724px) translateX(-24px);
}
15% {
	transform: translateY(724px) translateX(-50px);
}
16% {
	transform: translateY(724px) translateX(-49px);
}
20% {
	transform: translateY(724px) translateX(-75px);
}
21% {
	transform: translateY(724px) translateX(-74px);
}
25% {
	transform: translateY(724px) translateX(-100px);
}
26% {
	transform: translateY(724px) translateX(-99px);
}
30% {
	transform: translateY(724px) translateX(-125);
}
31% {
	transform: translateY(724px) translateX(-124px);
}
35% {
	transform: translateY(724px) translateX(-150px);
}
36% {
	transform: translateY(724px) translateX(-149px);
}
40% {
	transform: translateY(724px) translateX(-175px);
}
41% {
	transform: translateY(724px) translateX(-174px);
}
45% {
	transform: translateY(724px) translateX(-200px);
}
46% {
	transform: translateY(724px) translateX(-199px);
} 
50% {
	transform: translateY(724px) translateX(-225px);
}
51% {
	transform: translateY(724px) translateX(-224px);
}   
55% { 
	transform: translateY(724px) translateX(-250px);
}
56% {
	transform: translateY(724px) translateX(-249px);
}   
60% { 
	transform: translateY(724px) translateX(-275px);
}
70% {
	transform: translateY(724px) translateX(-275px);
}
71% { 
	transform: scaleY(-1) translateY(-792px) translateX(-275px);
}
80% { 
	transform: scaleY(-1) translateY(-792px) translateX(-275px);
	opacity: 1;
}
84% { 
	transform: scaleY(-1) translateY(-3000px) translateX(-275px);
	opacity: 0;
}
87% { 
	transform: scaleY(-1) translateY(-3000px) translateX(-275px);
	opacity: 0;
}
99% { 
	transform: translateY(0px) translateX(0px);
	opacity: 0;
}
100% { 
	transform: translateY(0px) translateX(0px);
	opacity: 0;
}

}

.menuwrap,
.menu,
.menucolor {
	position: fixed;
	left: calc(100% - 60px);
	width: 60px;
	top: 0px;
	height: 60px;
	border-radius: 0 0 0 50px;
	overflow: visible;
	z-index: 98;
		transition-property: all;
		transition-duration: 0.5s;		
}
.menucolor {
	background-color: var(--lightblue);
	box-shadow: 0 0 8px 2px #7c9393;
	opacity: 0.5;
}

.menuclose {
	position: absolute;
	top: 0px;
	left: 12px;
	width: 0px;
	height: 0px;
	z-index: 99;
		transition-property: all;
		transition-duration: 0.5s;
		transition-delay: 1s;

}
.menuwrap:hover .menuclose {
	width: 20px;
	height: 20px;
}
.stripes {
	position: absolute;
	left: 22px;
	top: 10px;
	width: 24px;
	height: 24px;
	z-index: 98;
		transition-property: all;
		transition-duration: 0.5s;	
}
.menutop,
.menucenter,
.menubottom {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	margin: 0;
	height: 8px;
	border-bottom: 2px solid var(--black);
	overflow: hidden;
	transform-origin: 15% 15%;
	z-index: 99;
		transition-property: all;
		transition-duration: 0.7s;
}
.menuone,
.menutwo,
.menuthree,
.menufour,
.menufive {
	transform: scaleY(0);
	box-sizing: border-box;
	position: relative;
	left: 50%;
	top: 35px;
	width: 0;
	height: 0;
	overflow: hidden;
	text-align: center;
	z-index: 99;
		transition-property: all;
		transition-duration: 0.7s;
		
}

.menuone h1,
.menutwo h1,
.menuthree h1,
.menufour h1,
.menufive h1 {
	font-size: 90%;
	line-height: 30px;
	color: var(--black);
		transition-property: all;
		transition-duration: 1s;
}

.menu:hover,
.menu:hover .menucolor {
	height: 240px;
	border-radius: 0 0 0 15px;
	width: 80px;
	left: calc(100% - 80px);
	opacity: 1;

}
.menu:hover #menusections {
	transform: scaleY(1);
	top: 60px;
	left: 0;
	height: 30px;
	width: 100%;
	border-bottom: 2px solid var(--orange);
}
.menu:hover .menuone {
	border-top: 2px solid var(--orange);
}
.menu:hover .stripes {
	transform: rotate(90deg);
	top: 5px;
	left: 31px;
}
.menu:hover .menutop {
	width: 50%;
	transform: skewY(45deg);
}
.menu:hover .menubottom {
	width: 50%;
	transform: skewY(-45deg);
}
.menu:hover .menucenter {
	display: none;
}

.menu:hover .menutop,
.menu:hover .menubottom {
	border-bottom: 2px solid var(--orange);
}

.menuone:hover h1,
.menutwo:hover h1,
.menuthree:hover h1,
.menufour:hover h1,
.menufive:hover h1 {
	background: radial-gradient(white, transparent);
}





/* 1ST PAGE */


.bartop {

	z-index:10;
	width: auto;
	margin: auto;
	text-align: center;
	height: 90px;
}
.bartoplogo {
	display: inline-block;
	vertical-align: top;
	height: 90px;
	width: 100%;
}
.bartoplogo img {
	height: 100%;
}


/* -------------- BLOCK PICTURE LEFT  AND RIGHT  ---------------- */



.blockpicleft,
.blockpicright {
	position: absolute;
	width: 50%;
	height: 720px;
	overflow: visible;
}
/* 

.blockleft,
.blockright {
	position: absolute;
	width: 100%;
	height: 720px;
}

.fakeone {
	position: absolute;
	top: 0;
	left: 0;
	width: 25%;
	height: 70%;
}
.faketwo {
	position: absolute;

	top: 0;
	left: 0;
	width: 25%;
	height: 70%;
	left:75%;
}
 */

.blockpicleft {
	
	background-image: url("elephantbg1.png");
	background-size:  auto 100%;
	background-position: -30% 90%;
	background-repeat: no-repeat;
	opacity: 1;
		transition-property: all;
		transition-delay: 1s;
		transition-duration: 5s;
}

.blockpicright {

	left: 50%;
	background-image: url("rhinobg1.png");
	background-size:  auto 100%;
	 background-position: 140% 70%;
	 background-repeat: no-repeat;
	 transition-property: all;
	 transition-duration: 5s;
	 transition-delay: 1s;
	 opacity: 1;
	
}

.blockpicleft:hover {
	opacity: 1;
	background-image: url("elephantbg.png");

	background-size:  auto 105%;
	
	

}
.blockpicright:hover {
	opacity: 1;
	background-size:  auto 105%;
	background-image: url("rhinobg.png");
	

}



























/* -------------------------- BLOCKTEXT ------------------------- */



.blocktextsinistra,
.blocktextdestra {
	position: absolute;
	top: 200px;
	height: 510px;
	z-index:1;
}
.blocktextsinistra {
	width: 25%;
	left: 26%;
}
.blocktextdestra {
	width: 25%;
	left: 52%;
}

.blockone,
.blockfour,
.blockfive,
.blocksix,
.blockeight,
.blocknine,
.blockten {
	display: inline-block;
	position: relative; 
	text-align: center;
	vertical-align: top;
	box-sizing: content-box;
	padding: 0;
	font-weight: bold;
        transition-property: all;
		transition-duration: 0.5s;
}


/*-------------------- BLOCKONE--------------------- */

.blockone {
	margin-top: 0px;
	width: 90%;
	text-align: right;
	height: 70px;
	z-index: 99;
		transition-property: all;
		transition-duration: 1s;	
	
}


.layerone,
.layertwo {
	position: absolute;
	width: 100%;
	height: 100%;	
}

.layerone span,
.layertwo span {
	display: inline-block;
	vertical-align: top;
	color: var(--black); 
		transition-property: all;
		transition-duration: 1s;
}


@keyframes one {
0% { 
    transform:  translateX(0px)translateY(0px);	
}
20%{ 
    transform: rotate(50deg);
	font-size: 100%;
}
50% {
    transform: rotate(360deg) translateX(-80px)translateY(-70px); ; 	
}
90% {
    transform: rotate(10deg) translateX(-20px) translateY(-30px);
}
100% {
    transform: rotate(0deg) translateX(0px) translateY(0px);
}
}
@keyframes two {
0% { 
    transform:  translateX(0px)translateY(0px);
}
20%{ 
    transform: rotate(-50deg);   
	font-size: 100%;
}
50% {
    transform: rotate(-360deg) translateX(10px)translateY(-80px);; 
}
90% {
    transform: rotate(-10deg) translateX(20px) translateY(-30px);
}
100% {
    transform:  translateX(0px) translateY(0px);
}
}


.blockone:hover .layerone span {
	animation: one 2s linear ;
	color: var(--orange);
}


.blockone:hover .layerone span:nth-child(1){
 	animation-delay: 0.5s;
}
.blockone:hover .layerone span:nth-child(2){
	animation-delay: 2s;
}
.blockone:hover .layerone span:nth-child(3){
	animation-delay: 1.2s;
}
.blockone:hover .layerone span:nth-child(4){
	animation-delay: 0.9s;
}
.blockone:hover .layerone span:nth-child(5){
	animation-delay: 0.1s;
}
.blockone:hover .layerone span:nth-child(6){
	animation-delay: 0.4s;
}
.blockone:hover .layerone span:nth-child(7){
	animation-delay: 1.3s;
}
.blockone:hover .layerone span:nth-child(8){
	animation-delay: 0.8s;
}
.blockone:hover .layerone span:nth-child(10){
	animation-delay: 0.6s;
}
.blockone:hover .layerone span:nth-child(11){
	animation-delay: 0.9s;
}
.blockone:hover .layerone span:nth-child(12){
	animation-delay: 1.1s;
}
.blockone:hover .layerone span:nth-child(13){
	animation-delay: 0.2s;
}



.blockone:hover .layertwo span {
	animation: two 2s linear ;
	color: var(--orange);
}

.blockone:hover .layertwo span:nth-child(1){
    animation-delay: 0.2s;
}
.blockone:hover .layertwo span:nth-child(2){
    animation-delay: 0.7s;
}
.blockone:hover .layertwo span:nth-child(3){
    animation-delay: 1.2s;
}
.blockone:hover .layertwo span:nth-child(4){
    animation-delay: 1.1s;
}
.blockone:hover .layertwo span:nth-child(5){
    animation-delay: 2s;
}
.blockone:hover .layertwo span:nth-child(6){
    animation-delay: 0.6s;
}
.blockone:hover .layertwo span:nth-child(7){
    animation-delay: 0.4s;
}	
.blockone:hover .layertwo span:nth-child(8){
    animation-delay: 1.6s;
}
.blockone:hover .layertwo span:nth-child(10){
    animation-delay: 0.8s;
}
.blockone:hover .layertwo span:nth-child(11){
    animation-delay: 1.3s;
}	
.blockone:hover .layertwo span:nth-child(12){
    animation-delay: 0.7s;
}
.blockone:hover .layertwo span:nth-child(13){
    animation-delay: 0.1s;
}
	
	
	
/* 	--------------------- BLOCKTHREE ---------------------- */
	
.blockthree {
	text-align: right;
	width: 90%;
	height: 175px;
    
}

.blockthreetext {
	text-align: right;
	height: 100%;
	transition: text-shadow 0.5s, top 0.5s;
/* 	transition-property: all;
	transition-duration: 0.5s; */
	background-color: transparent;
	
}

.blockthree span {
	text-transform: uppercase;
	display: inline-block;
	vertical-align: top;

	color: var(--black);
	opacity: 1;
		transition-property: all;
		transition-duration: 1s;
		transition-delay: 1s;
}

.blockthree:hover span {
	z-index: -1;
}
.blockthree:hover span {
	margin-top: -1px;
	color: #6abdc9;
	text-shadow: 
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
	1px 2px 1px #5ca4ae,
		1px 15px 5px #518a92,
		1px 20px 10px #518a92,
		1px 25px 20px #518a92,
		1px 30px 40px #518a92,
		1px 35px 60px #518a92;
 
}



/* ---------------BLOCKFOUR----------------- */

.blockfour {
	text-align: right;
	width: 90%;
	height: 35px;
	overflow: visible;
	background-color: transparent;

		transition-property: all;
		transition-duration: 0.5s;
		transition-delay: 0s; 
		
}	

.blockfourtext {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: transparent;
	
}
.blockfourbgback {
	position: absolute;
	clip-path: inset(0 0 0 100% round 10%); 
	width: calc(86% + 3px);
	height: 70px;
	text-align: left;
	margin: 0 15%;
	left: 5%;
	background: repeating-radial-gradient(circle, var(--orange), var(--orange) 10px, #f9b284 10px, #f9b284 20px); 
		transition: clip-path 0.3s linear 0.2s;
}

.blockfourtext span {
	
	color: var(--orange);
	text-transform: uppercase; 
		transition-property: all;
		transition-duration: 0.5s;
		transition-delay: 0.4s;
		
}

.blockfourtext:hover span {
	color: white;
	line-height: 70px;
}
.blockfour:hover {
	height: 70px;
}

.blockfour:hover .blockfourtext {
	z-index: 20;
}

.blockfour:hover .blockfourbgback{
	animation: hypnotic 0.5s linear infinite/* , shape 5s linear forwards */;
	animation-delay: 0.5s;
	opacity: 1;
	z-index: 10;
	clip-path: inset(0 0 0 0 round 0%);
}


@keyframes shape {
0% { 
	clip-path: inset(0 100% 0 0);
}
100% {
	clip-path: inset(0 0 0 0);
}
}

@keyframes hypnotic {
0% { 
	background-image: repeating-radial-gradient(circle, var(--orange), var(--orange) 10px, #f9b284 10px, #f9b284 20px);
}
20% {
	background-image: repeating-radial-gradient(circle, var(--orange), var(--orange) 8px, #f9b284 8px, #f9b284 20px);
}
60% {
	background-image: repeating-radial-gradient(circle, #f9b284, #f9b284 12px, var(--orange) 12px, var(--orange) 20px);
} 
80% {
	background-image: repeating-radial-gradient(circle, #f9b284, #f9b284 8px, var(--orange) 8px, var(--orange) 20px);
}
100% {
	background-image: repeating-radial-gradient(circle, var(--orange), var(--orange) 10px, #f9b284 10px, #f9b284 20px);
}
} 




/* -------------------------- BLOCKSIX ---------------------- */

.blocksix,
.fading {
	height: 105px;
	margin: 0 auto;
		transition-property: all;
		transition-duration: 1s;
		transition-delay: 0.5s;
}
.blocksix {
	width: 90%;
	position: relative;
}

.fading {
	width: auto;
	text-align: right;
}
.fading span {
	text-transform: uppercase; 
    margin: 0;
    padding: 0;
    display: inline-block;
    text-align: center;
	color: var(--black);
		transition-property: all;
		transition-duration: 2s;
}


.fading:hover span:nth-child(1){
    transition-delay: 1s;
	transform: skew(45deg) translateY(-350px);
    filter: blur(30px);
	opacity: 0;
	
}
.fading:hover span:nth-child(2){
    transition-delay: 1.2s;
	transform: skew(35deg) translateY(-300px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(3){
    transition-delay: 1.4s;
	transform: skew(25deg) translateY(-400px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(4){
    transition-delay: 1s;
	transform: skew(-35deg) translateY(-400px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(5){
    transition-delay: 1.5s;
	transform: skew(-45deg) translateY(-300px);
    filter: blur(30px);
	opacity: 0;
}

.fading:hover span:nth-child(7){
    transition-delay: 1.1s;
	transform: skew(45deg) translateX(-200px) translateY(-20px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(8){
    transition-delay: 1.4s;
	transform: skew(35deg) translateX(-200px) translateY(50px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(9){
    transition-delay: 1s;
	transform: skew(-25deg) translateX(200px) translateY(-50px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(10){
    transition-delay: 1.5s;
	transform: skew(-35deg) translateX(200px) translateY(20px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(11){
    transition-delay: 1.1s;
	transform: skew(-45deg) translateX(200px) translateY(-50px);
    filter: blur(30px);
	opacity: 0;
}

.fading:hover span:nth-child(13){
    transition-delay: 1.2s;
	transform: skew(-55deg) translateY(300px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(14){
    transition-delay: 1.1s;
	transform: skew(-45deg) translateY(350px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(15){
    transition-delay: 1.4s;
	transform: skew(-25deg) translateY(250px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(16){
    transition-delay: 1s;
	transform: skew(25deg) translateY(250px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(17){
    transition-delay: 1.1s;
	transform: skew(35deg) translateY(300px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(18){
    transition-delay: 1.2s;
	transform: skew(45deg) translateY(300px);
    filter: blur(30px);
	opacity: 0;
}
.fading:hover span:nth-child(19){
    transition-delay: 1.4s;
	transform: skew(55deg) translateY(350px);
    filter: blur(30px);
	opacity: 0;
}

/* ---------------------------- BLOCKEIGHT ------------------------- */

.blockeight {
	width: 100%;
	height: 80px;
	margin: 5px 0 3px 0;
	text-align: center;
}
.eighttopone,
.eightbottomone {
	position: relative;
	width: 240px;
	height: 40px;
	transform-style: preserve-3d;
	transition: 0.5s;
}
.eighttopone {
	transform-origin: 100%;
}
.eightbottomone {
	transform-origin: 0px;
}
.eighttoptwo {
	transform: rotateY(90deg) translateX(-50%);
	transform-origin: 0px;
}
.eightbottomtwo {
	transform: rotateY(-90deg) translateX(50%);
	transform-origin: 100%;
}

.eighttoptwo,
.eightbottomtwo {
	position: absolute;
	width: 240px;
	height: 40px;
	transform-style: preserve-3d;
	transition: 0.5s;
}
.eightbottomtwo {
	top: 40px;
}
.eighttopone,
.eightbottomtwo {
	background-color: var(--black);
	
}
.eighttoptwo,
.eightbottomone {
	background-color: var(--orange);
}

.blockeight span {
    text-align: center;
	box-sizing: border-box;
	text-transform: uppercase;
    transition: 0.5s;
	transform-style: preserve-3d;
}
.eighttopone span,
.eightbottomtwo span {
	color: var(--orange);
}
.eighttoptwo span,
.eightbottomone span {
	color: white;
}

.blockeight:hover .eighttopone {
	transform: rotateY(90deg) translateX(50%);
}
.blockeight:hover .eighttoptwo {
	transform: rotateY(0deg) translateX(0);
}
.blockeight:hover .eightbottomone {
	transform: rotateY(-90deg) translateX(-50%);
}
.blockeight:hover .eightbottomtwo {
	transform: rotateY(0deg) translateX(0);
}


/* ------------------------ BLOCKNINE -------------------------- */

.blocknine {
    padding: 0;
	height: 35px;
	width: 100%;
	margin: 0 ;
	color: var(--black);
	text-align: left;
	margin-top:0px;
}
.conjunction {
  width: 100%;
  height: 100%;
  margin: 0;
  text-align: left;
  position: absolute;
  padding: 0;
  transition-property: all;
 transition-duration: 0.5s;
	transition-delay: 0s;
 
}
.horizontalline {
	position: absolute;
	width: 0;
	height: 10%;
	background-color: var(--black);
	opacity: 1;
	top: 55%;
	left: 70%;
	transition-property: all;
	transition-duration: 0.5s;
	transition-delay: 0.2s;
}
.conjunction span {
	margin: 0;
	text-align: left;
	display: inline-block;
	position: relative;
  	transition-property: all;
	transition-duration: 0.5s;
	transition-delay: 0.2s;
}
.blocknine:hover .horizontalline {
	width: 220px;
	left: 0%;
	height: 100%;
	opacity: 0.8;
	top: 0;
	border-radius: 3px;
	animation: horizontal 2s infinite ease-in-out;
	animation-delay: 0.5s;	
}
.blocknine:hover #disappear {
	/* font-size: 300%; */
	color: #6abdc9;
	opacity: 0.8;
	/* top: 0; */
	z-index: 10;
	text-shadow:  2px 4px 0 #6abdc9, -2px -6px 0 #6abdc9, -2px 4px 0 #6abdc9, 2px -6px 0 #6abdc9;
	transform: translateX(20px);
	animation: vertical 2s infinite ease-in-out;
	animation-delay: 0.5s;
}
.blocknine:hover .conjunction span{
	color: var(--orange) ;
}
.blocknine:hover #horizontal {
	opacity: 0;
	transform: translateX(-150px);
   /*  animation: vertical 2s infinite ease-in-out; */
	
} 

@keyframes vertical {
0%{
	transform:translateX(20px);
}
50%{
	transform:translateX(-15px);
}
100%{
	transform:translateX(20px);
}

 
}
@keyframes horizontal {
0% {
	transform:translateX(-12px);
}
50% {
	transform:translateX(20px);
}
100% {
	transform:translateX(-12px);
}
}

/* 	--------------------------- BLOCKTEN ---------------------------- */



.blockten,
.blockeleven {
	height: 105px;
	width: 100%;
	margin: 0 0 5px 0;
	text-align: left;
	background-color: transparent;
		transition-property: all;
		transition-duration: 1s;
		
}
.blockeleven {
	overflow: hidden;
}
.frontten,
.backone,
.backtwo {
	position: absolute;
	text-align: left;
	height: 105px;
	margin: 0;
	width: 100%;
	background-color: transparent;
		transition-property: all;
		transition-duration: 1s;
}
.frontten {
	transition-property: all;
	transition-duration: 2s;	
}
.backone p {
	opacity: 1;
	color: var(--black);
	font-size: 200%;	
}
.backtwo span {
	color: var(--orange);
	transition-property: all;
	transition-duration: 2s;
}
.frontten span,
.frontten p,
.backtwo span {
	display: inline-block;
	text-transform: uppercase;
}
.frontten p {
	font-size: 300%;
	transition-property: all;
	transition-duration: 0.5s;
}
.blockten:hover .frontten p:nth-child(6) {
	animation: jump 4s infinite linear;
	opacity: 1;
	animation-delay: 1.8s;
	color: var(--orange);
} 
.blockten:hover .frontten p:nth-child(7) {
	animation: jump 4s infinite linear;
	opacity: 1;
	animation-delay: 1.2s;
	color: #6abdc9;
} 
.blockten:hover .frontten p:nth-child(8) {
	animation: jump 4s infinite linear;
	opacity: 1;
	animation-delay: 0.6s;
} 
#hide {
	transform: translateX(-70px);/* (-45px); */
	color: var(--orange);
}
#hidetwo {
	transform: translateX(-150px);/* (-108px); */
	color: #6abdc9;
}
#hidethree {
	transform: translateX(-150px);/* (-100px); */
	color: var(--black);
}
.blockeleven:hover .backone {
	display: none;
}
.blockeleven:hover #hide {
	animation: slide 1.2s ease-in-out forwards;
}
.blockeleven:hover #hidetwo {
	animation: slide 1.2s ease-in-out forwards;
	animation-delay: 0.2s;
}
.blockeleven:hover #hidethree {
	animation: slide 1.2s ease-in-out forwards;
	animation-delay: 0.4s;
}

@keyframes slide {
0% { 
   
} 
45%{ 
    transform: translateX(100px) ;
} 
96% {
    transform:  translateX(0px) ;  
}
98% { 
    transform: translateX(3px) ;
} 
100%{ 
    transform: translateX(0px) ;
} 
}

@keyframes jump {
0% { 
    transform: translateX(0px) translateY(0px);
} 
5%{ 
    transform: translateX(10px) translateY(-10px);
} 
10% {
    transform:  translateX(20px) translateY(0px);
}
15% { 
    transform: translateX(30px) translateY(-10px);
} 
20%{ 
    transform: translateX(40px) translateY(0px);
} 
25%{
    transform: translateX(50px) translateY(-10px);
}
30%{
    transform:  translateX(60px) translateY(0px);
}
35%{
    transform: translateX(70px) translateY(-10px);
}	
40%{
    transform:  translateX(80px) translateY(0px);
}
45%{
    transform:  translateX(80px) translateY(-10px);
}	
50%{
    transform:  translateX(70px) translateY(0px);
}
55%{
    transform: translateX(60px) translateY(-10px);
}	
60% {
    transform:  translateX(50px) translateY(0px);
}
65% {
    transform: translateX(40px) translateY(-10px);
}
70% {
    transform:  translateX(30px) translateY(0px);
}
75% {
    transform: translateX(20px) translateY(-10px);
}
80% {
    transform:  translateX(10px) translateY(0px);
}
85%{ 
    transform: translateY(-10px);
} 
90% {
    transform: translateX(0px) translateY(0px);
}
95% { 
    transform:  translateY(-10px);
} 
100%{ 
    transform: translateX(0px) translateY(0px);
} 
	
}







/* ---------2ND SECTION OF THE PAGE---------------  */

/* pagetwo {} --see in the beginning before 1st section */


/*  projectstitle {}--see in the beginning in TITLES SECTION----------- */


.boxtop {
	position: relative;
	width: 100%;
	height: auto;
	text-align: center;
	margin: 0 auto;

}

.projectone,
.projecttwo,
.projectthree,
.projectfour {
	padding: 0;
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 250px;
	height: 300px;
	margin: 60px 9%;
	 background-size: cover;
	 background-position: center center;
	 background-repeat: no-repeat;
}

.subtitle,
.subtitleback {
	text-transform: uppercase;
	padding: 0;
	position: absolute;
	width: 50%;
	height: 40px;
	margin: 0 25%;
	top: 0px;
	text-align: center;
	transition-property: all;
	transition-duration: 1s;
	transition-delay: 0.5s;
}
.bordertop,
.borderbottom,
.borderupone,
.borderuptwo {
	position: absolute;
	width: 0%;
	height: 40px;
	margin: 0 25%;
	top: 0px;
	left: 25%;
	transition-property: all;
	transition-duration: 0.8s;
	transition-delay: 0.5s;

}
.bordertop {
	border-top: 2px solid var(--lightblue);
}
.borderbottom {
	border-bottom: 2px solid var(--lightblue);
	width: 20%;
	left:15%;
}

.borderupone {
	border-top: 2px solid var(--orange); 
	opacity: 1;
	width: 0%;
	left: 0;
}
.borderuptwo {
	border-top: 2px solid var(--orange);
	width: 0%;
	left: 50%;
}
.projectone:hover .borderupone,
.projecttwo:hover .borderupone,
.projectthree:hover .borderupone,
.projectfour:hover .borderupone {
	left: 0%;
	width: 25%;
	top: 20px;
}
.projectone:hover .borderuptwo,
.projecttwo:hover .borderuptwo,
.projectthree:hover .borderuptwo,
.projectfour:hover .borderuptwo {
	width: 25%;
	left: 25%;
	top: 20px;
}
.projectone:hover .subtitle,
.projecttwo:hover .subtitle,
.projectthree:hover .subtitle,
.projectfour:hover .subtitle {
	top: 20px;
	background: radial-gradient(white, transparent);
}
.projectone:hover .subtitle h1,
.projecttwo:hover .subtitle h1,
.projectthree:hover .subtitle h1,
.projectfour:hover .subtitle h1 {
	color:  var(--lightblue);
}
.projectone:hover .bordertop,
.projectone:hover .borderbottom,
.projecttwo:hover .bordertop,
.projecttwo:hover .borderbottom,
.projectthree:hover .bordertop,
.projectthree:hover .borderbottom,
.projectfour:hover .bordertop,
.projectfour:hover .borderbottom {
	width: 50%;
	left: 0;
	top: 20px;
	opacity: 1;
	border-bottom: 2px solid var(--orange);
	
}
.gridone,
.gridtwo,
.gridthree,
.gridfour {
	top: 150px;
	display: grid;
    grid-template-columns: repeat(6, 40px);
    grid-template-rows: repeat(6, 27px);
    grid-gap: 0px;
	box-shadow: 0px 0px 40px 30px #FFFFFF;
	background-color: white;
}
.gridoneitems,
.gridtwoitems,
.gridthreeitems,
.gridfouritems {
		transition-property: all;
	    transition-duration: 1s;
}
.gridoneimg,
.gridtwoimg,
.gridthreeimg,
.gridfourimg {
    width: 40px;
    height: 27px;
    object-fit: cover;
}
.gridoneitem1,
.gridtwoitem1,
.gridthreeitem1,
.gridtfouritem1 {
    transform: translateX(-5px) translateY(-50px) rotateZ(45deg);
}
.gridoneitem2,
.gridtwoitem2,
.gridthreeitem2,
.gridfouritem2 {
    transform: translateX(-20px) translateY(-40px) rotateZ(-235deg);
}
.gridoneitem3,
.gridtwoitem3,
.gridthreeitem3,
.gridfouritem3 {
    transform: translateX(-10px) translateY(-60px) rotateZ(15deg);
}
.gridoneitem4,
.gridtwoitem4,
.gridthreeitem4,
.gridfouritem4 {
    transform: translateX(0px) translateY(-40px) rotateZ(-185deg);
}
.gridoneitem5,
.gridtwoitem5,
.gridthreeitem5,
.gridfouritem5 {
    transform: translateX(10px) translateY(-55px) rotateZ(45deg);
}
.gridoneitem6,
.gridtwoitem6,
.gridthreeitem6,
.gridfouritem6 {
    transform: translateX(20px) translateY(-50px) rotateZ(-35deg);
}


.gridoneitem7,
.gridtwoitem7,
.gridthreeitem7,
.gridfouritem7 {
    transform: translateX(-25px) translateY(-40px) rotateZ(225deg);
}
.gridoneitem8,
.gridtwoitem8,
.gridthreeitem8,
.gridfouritem8 {
   transform: translateX(-45px) translateY(-30px) rotateZ(15deg);
}
.gridoneitem9,
.gridtwoitem9,
.gridthreeitem9,
.gridfouritem9 {
    transform: translateX(-15px) translateY(-20px) rotateZ(-185deg);
}
.gridoneitem10,
.gridtwoitem10,
.gridthreeitem10,
.gridfouritem10 {
   transform: translateX(0px) translateY(-30px) rotateZ(-70deg);
}
.gridoneitem11,
.gridtwoitem11,
.gridthreeitem11,
.gridfouritem11 {
    transform: translateX(25px) translateY(-10px) rotateZ(45deg);
}
.gridoneitem12,
.gridtwoitem12,
.gridthreeitem12,
.gridfouritem12 {
    transform: translateX(30px) translateY(-20px) rotateZ(-35deg);
}


.gridoneitem13,
.gridtwoitem13,
.gridthreeitem13,
.gridfouritem13 {
    transform: translateX(-40px) translateY(-15px) rotateZ(15deg);
}
.gridoneitem14,
.gridtwoitem14,
.gridthreeitem14,
.gridfouritem14 {
    transform: translateX(-55px) translateY(-20px) rotateZ(-95deg);
}
.gridoneitem15,
.gridtwoitem15,
.gridthreeitem15,
.gridfouritem15 {
    transform: translateX(-40px) translateY(-25px) rotateZ(45deg);
}
.gridoneitem16,
.gridtwoitem16,
.gridthreeitem16,
.gridfouritem16 {
    transform: translateX(60px) translateY(95px) rotateZ(75deg);
}
.gridoneitem17,
.gridtwoitem17,
.gridthreeitem17,
.gridfouritem17 {
    transform: translateX(-5px) translateY(-40px) rotateZ(-25deg);
}
.gridoneitem18,
.gridtwoitem18,
.gridthreeitem18,
.gridfouritem18 {
   transform: translateX(40px) translateY(-30px) rotateZ(85deg);
}


.gridoneitem19,
.gridtwoitem19,
.gridthreeitem19,
.gridfouritem19 {
    transform: translateX(-5px) translateY(-5px) rotateZ(-25deg);
}
.gridoneitem20,
.gridtwoitem20,
.gridthreeitem20,
.gridfouritem20 {
   transform: translateX(-10px) translateY(-20px) rotateZ(-190deg);
}
.gridoneitem21,
.gridtwoitem21,
.gridthreeitem21,
.gridfouritem21 {
    transform: translateX(-5px) translateY(-10px) rotateZ(45deg);
}
.gridoneitem22,
.gridtwoitem22,
.gridthreeitem22,
.gridfouritem22 {
    transform: translateX(-5px) translateY(-25px) rotateZ(-35deg);
}
.gridoneitem23,
.gridtwoitem23,
.gridthreeitem23,
.gridfouritem23 {
    transform: translateX(15px) translateY(-20px) rotateZ(15deg);
}
.gridoneitem24,
.gridtwoitem24,
.gridthreeitem24,
.gridfouritem24 {
    transform: translateX(25px) translateY(-10px) rotateZ(-95deg);
}


.gridoneitem25,
.gridtwoitem25,
.gridthreeitem25,
.gridfouritem25 {
    transform: translateX(-30px) translateY(-5px) rotateZ(45deg);
}
.gridoneitem26,
.gridtwoitem26,
.gridthreeitem26,
.gridfouritem26 {
    transform: translateX(-20px) translateY(-10px) rotateZ(-75deg);
}
.gridoneitem27,
.gridtwoitem27,
.gridthreeitem27,
.gridfouritem27 {
    transform: translateX(-10px) translateY(-5px) rotateZ(25deg);
}
.gridoneitem28,
.gridtwoitem28,
.gridthreeitem28,
.gridfouritem28 {
   transform: translateX(10px) translateY(-10px) rotateZ(85deg);
}
.gridoneitem29,
.gridtwoitem29,
.gridthreeitem29,
.gridfouritem29 {
    transform: translateX(20px) translateY(-5px) rotateZ(-25deg);
}
.gridoneitem30,
.gridtwoitem30,
.gridthreeitem30,
.gridfouritem30 {
    transform: translateX(30px) translateY(10px) rotateZ(-25deg);
}


.gridoneitem31,
.gridtwoitem31,
.gridthreeitem31,
.gridfouritem31 {
    transform: translateX(-35px) translateY(-80px) rotateZ(45deg);
}
.gridoneitem32,
.gridtwoitem32,
.gridthreeitem32,
.gridfouritem33 {
    transform: translateX(-5px) translateY(-145px) rotateZ(-35deg);
}
.gridoneitem33,
.gridtwoitem33,
.gridthreeitem33,
.gridfouritem33 {
    transform: translateX(-15px) translateY(15px) rotateZ(215deg);
}
.gridoneitem34,
.gridtwoitem34,
.gridthreeitem34,
.gridfouritem34 {
    transform: translateX(25px) translateY(20px) rotateZ(-95deg);
}
.gridoneitem35,
.gridtwoitem35,
.gridthreeitem35,
.gridfouritem35 {
    transform: translateX(50px) translateY(-95px) rotateZ(195deg);
}
.gridoneitem36,
.gridtwoitem36,
.gridthreeitem36,
.gridfouritem36 {
    transform: translateX(-200px) translateY(20px) rotateZ(-75deg);
}


.projectone:hover .gridoneitems, 
.projecttwo:hover .gridtwoitems, 
.projectthree:hover .gridthreeitems,
.projectfour:hover .gridfouritems {
	transform: translateX(0px) translateY(0px) rotateZ(0deg);
}



/*  -----------interiortitle -- see in TITLES SECTION---------- */


/* ------------SLIDESHOW GALLERY----------------*/

.gallery {
	width: 100%;
	height: auto;
}
.slideshow-container {
  max-width: 60%;
  position: relative;
  margin: 60px auto 0 auto;
  box-shadow: 0px 0px 40px 25px #FFFFFF;
}
.mySlides {
  display: none;
}
.prev, 
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: var(--orange);
  font-weight: bold;
  font-size: 28px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, 
.next:hover {
  background-color: rgba(0,0,0,0.8);
  color: var(--lightblue);
}
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: var(--orange);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: var(--lightblue);
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}


/* ---------abouttitle see in TITLES SECTION------------ */

.aboutboxleft,
.aboutboxright {
	width: 420px;
	height: auto;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	margin: 0 3%;
}
.aboutboxtop {
	padding: 0;
	position: relative;
	width: 240px;
	height: 50px;
	margin: 60px auto;
}
.aboutboxleft:hover .borderupone,
.aboutboxright:hover .borderupone {
	left: 0%;
	width: 25%;
	top: 10px;
}
.aboutboxleft:hover .borderuptwo,
.aboutboxright:hover .borderuptwo{
	width: 25%;
	left: 25%;
	top: 10px;
}
.aboutboxleft:hover .subtitle,
.aboutboxright:hover .subtitle{
	top: 10px;
	background: radial-gradient(white, transparent);
}
.aboutboxleft:hover .subtitle h1,
.aboutboxright:hover .subtitle h1{
	color:  var(--lightblue);
}
.aboutboxleft:hover .bordertop,
.aboutboxleft:hover .borderbottom,
.aboutboxright:hover .bordertop,
.aboutboxright:hover .borderbottom {
	width: 50%;
	left: 0;
	top: 10px;
	opacity: 1;
	border-bottom: 2px solid var(--orange);
}
.avatarbox,
.avatarboxcolor,
.avatarboxtextone,
.avatarboxtexttwo {
	width: 100%;
	height: 630px;	
}
.avatarbox {
	background-image: url("avatar.jpg");
	background-size: auto 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	overflow: hidden;
	box-shadow: 0px 0px 40px 25px #FFFFFF;
		transition-property: all;
		transition-duration: 1s;
		transition-delay: 1s;
}
.avatarboxcolor {
	clip-path: ellipse(399px 190px at 355px 617px);
	position: absolute;
	top: 0%;
	opacity: 0.6;
	background-color: var(--black);
		transition-property: all;
		transition-duration: 0.7s;
}
.avatarboxtextone {
	position: absolute;
	top: 75%;
	text-align: right;
		transition-property: all;
		transition-duration: 0.4s;
		transition-delay: 0.3s;
}
.avatarboxtextone h2 {
	font-size: 220%;
	color: white;
	line-height: 50px;
	display: block;
	vertical-align: bottom;
	margin-right: 10%;
}
.avatarboxtextone span {
	margin-right: 10%;
	display: inline-block;
	vertical-align: bottom;
	font-size: 220%;
	color: white;
	font-weight: 500;
}
.avatarboxtexttwo {
	top: 110%;
	padding: 15% 10%;
	text-align: left;
		transition-property: all;
		transition-duration: 0.4s;
		transition-delay: 0.3s;
}
.avatarboxtexttwo h2 {
	font-size: 120%;
	color: white;
	font-weight: 700;
	font-stretch: ultra-condensed;
	line-height: 20px;
}
.avatarboxtexttwo p {
	font-size: 100%;
	color: white;
	font-weight: 500;
	font-stretch: ultra-condensed;
	line-height: 20px;
	margin: 2% 0;
}
.avatarboxtexttwo h3 {
	font-size: 80%;
	color: white;
	font-weight: 200;
	font-stretch: ultra-condensed;
	line-height: 15px;
	margin: 0 0 0 8%;
}
.avatarbox:hover .avatarboxcolor {
	clip-path: ellipse(334px 453px at 206px 308px);
	top: 0;
}
.avatarbox:hover .avatarboxtextone {
	top: -50%;
}
.avatarbox:hover .avatarboxtexttwo {
	top: 0;
}

#toright {
	display: block;
	margin: 5px 0 0 auto;
	text-align: right;
	line-height: 10px;
}




/* -----------------workshop slideshow------------------- */

.workshop-container {
  max-width: 100%;
  position: relative;
  margin: 30px auto;

}

.myFrames {
  display: none;
}
.myFrames img {
	width: 100%;
	box-shadow: 0px 0px 40px 25px #FFFFFF;
}
.backw, 
.forw {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: var(--orange);
  font-weight: bold;
  font-size: 28px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.backw {
	left: 0;
}
.forw {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.backw:hover, 
.forw:hover {
  background-color: rgba(0,0,0,0.8);
  color: var(--lightblue);
}
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.punto {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: var(--orange);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .punto:hover {
  background-color: var(--lightblue);
}


/* --------------------PageFIVE-------------- */

/* page five-see in the beginning */
/* contacts title --see in the beginning in TITLES SECTION */


.contactssocial {
	position: absolute;
	top: 240px;
	width: 10%;
	left: 15%;
	height: 660px;
	text-align: center;
	
}
#social {
	position: relative;
	width: 50%;
	margin: auto;
	height: 15%;
	top: 12.5%;
}
.socialone {
	background-image: url("facebook.png");
	background-size:  auto 40%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.socialtwo {
	background-image: url("instagram.png");
	background-size:  auto 40%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.socialthree {
	background-image: url("etsy.png");
	background-size:  auto 40%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.socialfour {
	background-image: url("artstation2.png");
	background-size:  auto 40%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.socialfive {
	background-image: url("mail.png");
	background-size:  auto 40%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.socialone:hover {
	background-image: url("facebook1.png");
	animation: social 0.5s linear infinite;
}
.socialtwo:hover {
	background-image: url("instagram1.png");
	animation: social 0.5s linear infinite;
}
.socialthree:hover {
	background-image: url("etsy1.png");
	animation: social 0.5s linear infinite;
}
.socialfour:hover {
	background-image: url("artstation3.png");
	animation: social 0.5s linear infinite;
}
.socialfive:hover {
	background-image: url("mail1.png");
	animation: social 0.5s linear infinite;
}

@keyframes social {
0% {
	transform:translateY(0px);
}
50% {
	transform:translateY(-10px);
}
100% {
	transform:translateY(0px);
}
}

.contactsform {
	position: absolute;
	width: 50%;
	top: 240px;
	left: 25%;
	height: 660px;
}
.contactsboxtopx {
	padding: 0;
	position: relative;
	width: 480px;
	height: 50px;
	margin: 30px auto ;
	overflow: hidden;
}
.borderupone,
.borderuptwo,
.bordertop,
.borderbottom {
	overflow: hidden;
}
.subtitle h1 {
	transition: transform 0.4s ease-in-out;
	overflow: hidden;
}
.subtitleback h1 {
	opacity: 1;
	transform: translateY(-100%);
	transition: transform 0.4s ease-in-out;
	overflow: hidden;
	transition: background 1s;
}
.contactsboxtopx:hover .borderupone{
	left: 0%;
	width: 25%;
}
.contactsboxtopx:hover .borderuptwo{
	width: 25%;
	left: 25%;
}
.contactsboxtopx:hover .subtitle h1 {
	color:  var(--lightblue);
	opacity: 1;
	transform: translateY(-100%);
}
.contactsboxtopx:hover .subtitleback h1 {
	opacity: 1;
	color:  var(--lightblue);
	transform: translateY(0);
	transition: transform 0.5s;
	background: radial-gradient(white, transparent);
}
.contactsboxtopx:hover .bordertop,
.contactsboxtopx:hover .borderbottom {
	width: 50%;
	left: 0;
	opacity: 1;
	border-bottom: 2px solid var(--orange);
}


/* ------------CONTACT FORM-------------- */

/* Add a background color and some padding around the form */
.contactformbox {
	width: 80%;
	margin: 0 10%;
	border-radius: 5px;
	background-color: #023439;
	padding: 20px;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
	width: 100%; /* Full width */
	padding: 12px; /* Some padding */ 
	border: 1px solid var(--lightblue); 
	border-radius: 4px; /* Rounded borders */
	box-sizing: border-box; /* Make sure that padding and width stays in place */
	margin-top: 6px; /* Add a top margin */
	margin-bottom: 16px; /* Bottom margin */
	resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
	background-color: white;
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
/* 	background-color: var(--orange);
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px; */
	background-color: transparent;
	border: none;
	cursor: pointer;
	text-transform: uppercase;
	
	padding: 0;
	position: relative;
	width: 50%;
	height: 40px;
	margin: 0 25%;
	top: 0px;
	text-align: center;
	transition-property: all;
	transition-duration: 0.5s;
/* 	transition-delay: 0.5s; */
	font-size: 100%;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: 2px;
	color: var(--orange);
}

input[type=submit]:hover {
	color:  var(--lightblue);
	
}
input[type=text]:hover {
	background-color:  var(--lightblue);
	border: 1px solid var(--orange);
}
#subject:hover {
	background-color:  var(--lightblue);
	border: 1px solid var(--orange);
}

#formtext {
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 100%;
	color: var(--orange);
}
#name,
#email,
#subject,
#submit {
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 100%;
}
.submitbox {
	padding: 0;
	position: relative;
	width: 50%;
	height: 40px;
	margin: 0 auto;
	top: 0px;
	text-align: center;
	transition-property: all;
	transition-duration: 1s;
	transition-delay: 0.5s;
}
.bordertopx,
.borderbottomx,
.borderuponex,
.borderuptwox {
	position: absolute;
	width: 0%;
	height: 40px;
	margin: 0 25%;
	top: 0px;
	left: 25%;
	transition-property: all;
	transition-duration: 0.8s;
	transition-delay: 0.5s;
}
.bordertopx {
	border-top: 2px solid transparent;
}
.borderbottomx {
	border-bottom: 2px solid var(--lightblue);
	width: 20%;
	left:15%;
}
.borderuponex {
	border-top: 2px solid var(--orange); 
	opacity: 1;
	width: 0%;
	left: 0;
}
.borderuptwox {
	border-top: 2px solid var(--orange);
	width: 0%;
	left: 50%;
}
.submitbox:hover .borderuponex {
	left: 0%;
	width: 25%;
}

.submitbox:hover .borderuptwox {
	width: 25%;
	left: 25%;
}
.submitbox:hover .bordertopx,
.submitbox:hover .borderbottomx {
	width: 50%;
	left: 0;
	opacity: 1;
	border-bottom: 2px solid var(--orange);
}
.snailcontacts {
	position: absolute;
	top: 870px;
	left: calc(85% - 18px);
	width: 100px;
	height: 150px;
	overflow: hidden;
	background-image: url("snailrighttotop.png");
	background-size: 80% auto;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	animation: snailtotop 100s ease-in-out infinite;
	z-index: 99;
}

@keyframes snailtotop {
0% { 
	transform:translateY(-30px);
}
1% {
	transform:translateY(-28px);
}
2% {
	transform:translateY(-60px);
}
3% {
	transform:translateY(-58px);
}
4% {
	transform:translateY(-90px);
}
5% {
	transform:translateY(-88px);
}
6% {
	transform:translateY(-120px);
}
7% {
	transform:translateY(-118px);
}
8% {
	transform:translateY(-150px);
}
9% {
	transform:translateY(-148px);
}
10% {
	transform:translateY(-180px);
}
11% {
	transform:translateY(-178px);
}
12% {
	transform:translateY(-210px);
} 
13% {
	transform:translateY(-208px);
}
14% {
	transform:translateY(-240px);
}   
15% { 
	transform:translateY(-238px);
}
16% { 
	transform:translateY(-270px);
}

/* 17%{ 
	 transform:translateY(-270px);
} */

18% { 
	transform:translateY(-270px);

}
19% {
	transform:translateY(-268px);
}
20% {
	transform:translateY(-300px);
}
21% {
	  transform:translateY(-298px);
}
22% {
	transform:translateY(-330px);
}

23% {
	transform:translateY(-328px);
}
24% {
	transform:translateY(-360px);
}
25% {
	transform:translateY(-358px);
}
26% {
	transform:translateY(-390px);
}
27% {
	transform:translateY(-240px);
}
28% {
	transform:translateY(-240px);
}
29% {
	transform:translateY(-240px);
} 
30% {
	transform:translateY(-240px);
}
31% {
	transform:translateY(-238px);
}   
32% { 
	transform:translateY(-270px);
}
33% { 
	transform:translateY(-268px);
} 
34% { 
	transform:translateY(-300px);
}
35% { 
	transform:translateY(-298px);
}
36% { 
	transform:translateY(-330px);
}
37% {
	transform:translateY(-328px);
}
38% {
	transform:translateY(-360px);
} 
39% {
	transform:translateY(-358px);
}
40% {
	transform:translateY(-390px);
}   
41%{ 
	transform:translateY(-388px);
}
42%{ 
	transform:translateY(-420px);
}
43%{ 
	transform:translateY(-418px);
}
44%{
	transform:translateY(-450px);
}
45%{
	transform:translateY(-448px);
}
46%{
	transform:translateY(-480px);
}
47%{
	transform:translateY(-340px);
}
48% {
	transform:translateY(-330px);
}
49% {
	transform:translateY(-330px);
}
50% {
	transform:translateY(-330px);
}
51% {
	transform:translateY(-328px);
}
52% {
	transform:translateY(-350px);
} 
53% {
	transform:translateY(-348px);
}
54% {
	transform:translateY(-380px);
}   
55% { 
	transform:translateY(-378px);
}
56% { 
	transform:translateY(-410px);
}
57% { 
	transform:translateY(-408px);
}
58% { 
	transform:translateY(-440px);
}
59% {
	transform:translateY(-438px);
}
60% {
	transform:translateY(-470px);
}
61% {
	transform:translateY(-468px);
}
62% {
	transform:translateY(-500px);
}
63% {
	transform:translateY(-498px);
}
64% {
	  transform:translateY(-530px);
}
65% {
	transform:translateY(-528px);
}
66% {
	transform:translateY(-560px);
}
67% {
	transform:translateY(-558px);
}
68% {
	transform:translateY(-590px);
}
69% {
	transform:translateY(-588px);
} 
70% {
	transform:translateY(-620px);
}
71% {
	transform:translateY(-618px);
}   
72% { 
	transform:translateY(-650px);
}
73% { 
	transform:translateY(-530px);
} 
74% { 
	transform:translateY(-530px);
}
75% { 
	transform:translateY(-530px);
}

76% { 
	transform:translateY(-528px);
} 
77% {
	transform:translateY(-560px);
}
78% {
	transform:translateY(-558px);
}
79% {
	transform:translateY(-590px);
}
80% {
	transform:translateY(-588px);
}   
81% { 
	transform:translateY(-620px);
}
82% { 
	transform:translateY(-618px);
}
83% { 
	transform:translateY(-650px);
}
84% { 
	transform:translateY(-650px);
}
85% {
	transform:translateY(-650px);
}   
86% { 
	transform:translateY(-650px);
}
87% { 
	transform:translateY(-650px);
}
88% { 
	transform:translateY(-648px);
} 
89% { 
	transform:translateY(-680px);
}
89% { 
	transform:translateY(-678px);
}
89% { 
	transform:translateY(-710px);
}
90% { 
	transform:translateY(0px);
}

/* 95%{ 
transform:translateY(0px);
}
96%{ 
transform:translateY(0px);
}
 */

99%{ 
transform:translateY(0px);
}
100%{ 
transform:translateY(2px);
}
}


































/* -------------------------- RESPONSIVE -------------------------- */

@media only screen and (max-width: 2600px) {
.bartopconnectline {
	left: -2.6%;
	width: 4.4%;
}
.textconnectline {	
	width: 4.5%;
	left: 50%;
}

.blockpicleft,
.blockpicright {

	height: 710px;

}

.blockpicleft {
	background-image: url("bugleftlayers1.png");
}

.blockpicleft:hover {
	background-image: url("bugleftlayers2.png");
}
.blockpicright {
	background-image: url("bugrightlayers1.png");
	 background-position: 130% 70%;
}

.blockpicright:hover {
	background-image: url("bugrightlayers2.png");
}

.projectone,
.projecttwo,
.projectthree,
.projectfour {
	margin: 60px 12%;
}
.contactsconnectlinetwo {
	left: calc(50% - 6px);
}
.tline {
	left: calc(50% - 0.6rem);
}

}

@media only screen and (max-width: 1600px) {
.bartopconnectline {
	left: -5%;
	width: 5.5%;
}
.textconnectline {	
	width: 5%;
	left: 50%;
}
.blockpicleft,
.blockpicright {
	height: 720px;
}
.blockpicleft {
	background-image: url("elephantbg1.png");
}
.blockpicleft:hover {
	background-image: url("elephantbg.png");
}

.blockpicright {
	background-image: url("rhinobg1.png");
	background-position: 140% 70%;
}

.blockpicright:hover {
	background-image: url("rhinobg.png");
}

.projectone,
.projecttwo,
.projectthree,
.projectfour {
	margin: 60px 9%;
}

.contactsconnectlinetwo {
	left: calc(50% - 5px);
}

.tline {
	left: calc(50% - 0.5rem);
}
}

@media only screen and (max-width: 1300px) {
	
.blockpicleft {
	background-image: url("bugdown.png");
	background-size: auto 95%;
	background-position:  0% 50%;
}	
.blockpicleft:hover {
	background-image: url("bugdownblack.png");
	background-size: auto 100%;
	 background-position:  0% 150%;
}
.blockpicright {
	background-image: url("bugleft.png");
	background-size: auto 95%;
	background-position: 100% 50%;
}
.blockpicright:hover {
	background-image: url("bugleftblack.png");
	background-size:  auto 100%;
	background-position: 100% 150%;
}	
.blockfourbgback {
	width: 100%;
	margin-left: 0;
}
.projectstitleleft h1,
.projectstitleright h1 {
	font-size: 300%;
	margin-left: 2%;
}
.slideshow-container {
  max-width: 65%;
}
		
}





/* -------------for about section----------------- */

@media only screen and (max-width: 1090px) {
	
.bartopconnectline {
	left: -6%;
	width: 6.5%;
}


}
/* ----------------for division lines --------------- */

@media only screen and (max-width: 1037px) {
	
.slideshow-container {
  max-width: 70%;
}


}
/* ------------------TABLETS--- and large smartphones------------- */
@media only screen and (max-width: 991px) {
	
	
a {
	
	font-size: 70%;
}

p,
h1,
h2,
h3,
h4,
span {
	margin: 0;
	font-size: 180%;
	line-height: 25px;
}
 
.pageone {
	height: 435px;
} 

.pagefive {
	text-align: center;
	width: 100%;
	overflow: hidden;
	height: 900px;
}
 .boxtop a {
	font-size: 90%;
}
 
.projectstitleleft h1,
.projectstitleright h1,
.interiortitleleft h1,
.interiortitleright h1,
.abouttitleleft h1,
.abouttitleright h1,
.contactstitleleft h1,
.contactstitleright h1 {
	font-size: 250%;
}
.contactstitleleft h1 {
	margin: 0 1.9%;
}
.contactstitleright h1 {
	margin: 0 0.9%;
}
.bartopconnectline {
	 width: 6.5%;
	 border-right: 4px solid var(--orange);
	 border-bottom: 4px solid var(--orange);
}


.textconnectline {
	width: 7%;
	left: 50%;
	height: 480px;  /*  ****pageone height - bartop height + extra tail*** */
	top: 96px; /* ***bartop height***  */
	 border-radius: 20px 0px 0px 0px;
	 border-top: 4px solid var(--orange);
	 border-left: 4px solid var(--orange);
}
.projectsconnectline {
	position: absolute;
	overflow: visible;
	height: 26.209rem;
	top: -26.4125rem;
	width: 25%;
	left: calc(25% + 4px);
	 border-radius: 0px 0px 30px 0px;
	 border-right: 4px solid var(--orange);
	 border-bottom: 4px solid var(--orange);
}
.boxtopconnectline {
	position: absolute;
	overflow: visible;
	height: calc(100% + 4.5812rem ); /*73px including top -8 and margin sotto +5px bordersize*/
	top: -0.4562rem; /* -7px */
	width: 40%;
	left: 3%;
	 border-radius: 30px 0px 0px 30px;
	 border-top: 4px solid var(--orange);
	 border-bottom: 4px solid var(--orange);
	 border-left: 4px solid var(--orange);
}
.interiorconnectlineone {
	top: 2px;
	position: absolute;
	overflow: visible;
	height: 60%; 
	width: 30%;
	left: 25%;
	 border-radius: 0px 10px 0px 0px;
	 border-top: 4px solid var(--orange);
	 border-right: 4px solid var(--orange);
}
.interiorconnectlinetwo {
	position: absolute;
	overflow: visible;
	top: -10.1906rem;
	height: 6.241rem; 
	width: 30%;
	left: calc(55% - 4px);
	 border-radius: 0px 0px 0px 10px;
	 border-bottom: 4px solid var(--orange);
	 border-left: 4px solid var(--orange);
}
.galleryconnectline {
	position: absolute;
	overflow: visible;
	top: -4.2062rem;/* -67px; */
	left: 75%;
	width: 22%;
	height: calc(100% + 8.0188rem);/*  +128px */
	border-radius: 0px 30px 30px 0px;
	border-left: 4px solid transparent;
	border-bottom: 4px solid var(--orange);
	border-top: 4px solid var(--orange);
	border-right: 4px solid var(--orange);
}
.aboutconnectlineone {
	position: absolute;
	overflow: visible;
	top: -3px; /* border size */
	left: calc(45% + 2px);
	width: 33%;
	height: 100px;
	border-radius: 10px 0px 0px 0px;
	border-top: 4px solid var(--orange);
	border-left: 4px solid var(--orange);
}

.aboutconnectlinetwo {
	position: absolute;
	overflow: visible;
	top: 25px; 
	left: 10%;
	width: calc(35% + 6px);
	height: 100px;
	border-radius: 0px 0px 10px 0px;
	border-right: 4px solid var(--orange);
	border-bottom: 4px solid var(--orange);
}
.pagefourconnectline {
	top: 181px; 
	left: 3%;
	width: 25%;
	height: calc(100% - 117px);
	border-radius: 30px 0px 0px 30px;
	border-top: 4px solid var(--orange);
	border-bottom: 4px solid var(--orange);
	border-left: 4px solid var(--orange);
}
.contactsconnectlineone{
	top: 0px;
	left: 10%;
	width: 40%;
	height: 100px;
	border-radius: 0px 10px 0px 0px;
	border-top: 4px solid var(--orange);
	border-right: 4px solid var(--orange);
}
.contactsconnectlinetwo {
	top: 25px; 
	left: calc(50% - 0.2596rem);
	width: 30%;
	height: 100px;
	border-radius: 0px 0px 0px 10px;
	border-bottom: 4px solid var(--orange);
	border-left: 4px solid var(--orange);
}
.tline {
	position: absolute;
	top: 55px;
	left: calc(50% - 0.4rem);
	width: 10px;
	height: 90px;
	border-top: 4px solid var(--orange);
}
.pagefiveconnectline {
	top: 181px; 
	left: 60%;
	width: 25%;
	height: 720px;
	border-radius: 0px 30px 0px 0px;
	border-top: 4px solid var(--orange);
	border-right: 4px solid var(--orange);
}
.bartoplogo img {
	height: 90%;
}


.blocktextsinistra {
	top: 180px;
	height: 345px;
	width: 35%;
	left: 17%;
}
.blocktextdestra {
	height: 345px;
	top: 180px;
	width: 35%;
	left: 52%;
}
.blockpicleft {
	top: 45px;
	background-image: url("bugdown.png");
	height: 480px;
	background-size: auto 80%;
	background-position:  0% 60%;
}	
.blockpicleft:hover {
	background-image: url("bugdownblack.png");
	background-size: auto 85%;
	 background-position:  0% 50%;
}
.blockpicright {
	top: 45px;
	background-image: url("bugleft.png");
	height: 480px;
	background-size: auto 80%;
	background-position: 100% 60%;
}
.blockpicright:hover {
	background-image: url("bugleftblack.png");
	background-size:  auto 85%;
	background-position: 100% 50%;
}	
.blockone {
	margin-top: 0px;
	height: 50px;
}
.blockthree {
	height: 125px;
}
.blockfour {
	height: 25px;
}
.blockfourbgback {
	height: 50px;
	width: 100%;
	margin: 0;
}
.blockfourtext:hover span {
	line-height: 50px;
}
.blockfour:hover {
	height: 50px;
}
.blocksix,
.fading {
	height: 75px;
}

.blockeight {
	height: 60px;
}
.eightbottomtwo {
	top: 30px;
}
#flipsides {
	width: 170px;
	height: 30px;
}

.blocknine {
	height: 25px;
}
.conjunction span {
	line-height: 25px;
}
.horizontalline {
	left: 91%;
}
.blocknine:hover .horizontalline {
	width: 160px;
	left: 0%;
}
.blocknine:hover .verticalline {
	width: 5px;
	height: 25px;
}
@keyframes vertical {
0% {
	transform:translateX(5px);
}
50%  {
	transform:translateX(-13px);
}
100% {
	transform:translateX(5px);
}
}

@keyframes horizontal {
0% {
	transform:translateX(-5px);
}
50% {
	transform:translateX(10px);
}
100% {
	transform:translateX(-5px);
}
}

.blockten,
.blockeleven {
	height: 80px;
}
.projectone,
.projecttwo,
.projectthree,
.projectfour {
	margin: 60px 5%;
}
.frontten p,
.backone p {
	font-size: 150%;
}
.aboutboxleft,
.aboutboxright {
	width: 100%;
}
.avatarbox,
.avatarboxcolor,
.avatarboxtextone,
.avatarboxtexttwo {
	width: 480px;
	margin: auto;	
}
.avatarbox:hover .avatarboxcolor  {
	clip-path: ellipse(418px 447px at 247px 317px);
}
.avatarboxtexttwo {
	padding: 10%;
}

.avatarboxtexttwo h2 {
	font-size: 120%;
	line-height: 18px;
}
.avatarboxtexttwo p {
	font-size: 100%;
	line-height: 18px;
}
.avatarboxtexttwo h3 {
	font-size: 80%;
	line-height: 14px;
}

#toright {
	margin: 10px 0 0 0;
	text-align: right;
	line-height: 10px;
}


.workshop-container {
	width: 480px;
}
.myFrames img {
	max-height: 630px;
	width: auto;
}
.snail {
	background-size:  auto 40%;
	animation: snailtoleft 30s ease-in-out infinite;
	left: 24%;
}

@keyframes snailtoleft {
0% { 
	transform: translateY(0px) translateX(0px);
	opacity: 0;
}
2% {
	transform: translateY(546px) translateX(0px);
	opacity:1;
}
5% {
	transform: translateY(546px) translateX(0px);
}
6% {
	transform: translateY(546px) translateX(1px);
}
10% {
	transform: translateY(546px) translateX(-20px);
}
11% {
	transform: translateY(546px) translateX(-19px);
}
15% {
	transform: translateY(546px) translateX(-40px);
}
16% {
	transform: translateY(546px) translateX(-39px);
}
20% {
	transform: translateY(546px) translateX(-60px);
}
21% {
	transform: translateY(546px) translateX(-59px);
}
25% {
	transform: translateY(546px) translateX(-80px);
}
26% {
	transform: translateY(546px) translateX(-79px);
}
30% {
	transform: translateY(546px) translateX(-100);
}
31% {
	transform: translateY(546px) translateX(-99px);
}
35% {
	transform: translateY(546px) translateX(-120px);
}
36% {
	transform: translateY(546px) translateX(-119px);
}
40% {
	transform: translateY(546px) translateX(-140px);
}
41% {
	transform: translateY(546px) translateX(-139px);
}
45% {
	transform: translateY(546px) translateX(-160px);
}
46% {
	transform: translateY(546px) translateX(-159px);
} 
50% {
	transform: translateY(546px) translateX(-180px);
}
51% {
	transform: translateY(546px) translateX(-179px);
}   
55% { 
	transform: translateY(546px) translateX(-200px);
}
56% {
	transform: translateY(546px) translateX(-200px);
}   
60% { 
	transform: translateY(546px) translateX(-200px);
}
/* 70%{
	     transform: translateY(546px) translateX(-220px);
}
 */

61% { 
	transform: scaleY(-1) translateY(-581px) translateX(-200px);
}
70% { 
	transform: scaleY(-1) translateY(-581px) translateX(-200px);
	opacity: 1;
}
83% { 
	transform: scaleY(-1) translateY(-3000px) translateX(-200px);
	opacity: 0;
}
/* 90% { 
	transform: scaleY(-1) translateY(-4000px) translateX(-200px);
	opacity: 0;
} */
99% { 
	transform: translateY(0px) translateX(0px);
	opacity: 0;
}
100% { 
	transform: translateY(0px) translateX(0px);
	opacity: 0;
}
}
.contactsform {
	position: absolute;
	width: 80%;
	top: 240px;
	left: 10%;
	height: 560px;
}
.contactsboxtopx {
	padding: 0;
	position: relative;
	width: 480px;
	height: 50px;
	margin: 10px auto 20px auto ;
	overflow: hidden;
}
.contactssocial {
	position: absolute;
	top: 780px;
	width: 50%;
	left: 25%;
	height: 90px;
	text-align: center;
	z-index: 99;
}

#social {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 15%;
	margin: 0 auto;
	height: 100%;
}






/* -------------for the division lines--------------- */


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

.bartopconnectline {
	 left: -7.5%;
	 width: 9.5%;
	 border-right: 4px solid var(--orange);
	 border-bottom: 4px solid var(--orange);
}

.textconnectline {
	width: 9%;
}
.contactstitleleft h1 {
	margin: 0 2.3%;
}
.contactstitleright h1 {
	margin: 0 1%;
}
	
	
	
}






/* -----------------------SMARTPHONES and portrait tablets--------------------- */

@media only screen and (max-width: 599px) {
	
a {
	
	font-size: 70%;
}

p,
h1,
h2,
h3,
h4,
span {
	margin: 0;
	font-size: 180%;
	line-height: 25px;
}

.menu:hover #menusections {
	border-bottom: 0px solid transparent;
	
}
.menu:hover .menuone {
	border-top: 0px solid transparent;
}

.bigpage {
	height: auto;
}
.pagefive {
	text-align: center;
	width: 100%;
	overflow: hidden;
	height: 850px;
}
.subtitle h1, 
.subtitleback h1 {
	font-size: 100%;
	letter-spacing: 2px;
}
.projectstitleright h1,
.projectstitleleft h1,
.interiortitleright h1,
.interiortitleleft h1,
.abouttitleleft h1,
.abouttitleright h1,
.contactstitleleft h1,
.contactstitleright h1 {
	font-size: 210%;
}
.interiortitleright h1 {
	margin: 0 2.5%;
}
.abouttitleright {
	overflow: hidden;
}
.abouttitleleft h1 {
	margin: 0 4px;
}
.abouttitleright {
	left: calc(45% - 4px);
	overflow: hidden;
}
.contactstitleleft h1 {
	margin: 0 2%;
}
.contactstitleright h1 {
	margin: 0 2.4%;
}
.projectstitle,
.interiortitle,
.abouttitle,
.contactstitle {
	margin-top: 0;
}
.bartopconnectline,
.textconnectline, 
.projectsconnectline,
.boxtopconnectline, 
.interiorconnectlineone, 
.interiorconnectlinetwo,
.galleryconnectline, 
.aboutconnectlineone, 
.aboutconnectlinetwo, 
.pagefourconnectline, 
.contactsconnectlineone, 
.contactsconnectlinetwo, 
.tline,
.pagefiveconnectline {
	display: none;
	
}
.connectlinemobone {
	box-sizing: content-box;
	position: absolute;
	width: 60%;
	height: 95px;
	left: 3%;
	border-radius: 0px 0px 0px 20px;
	border-bottom: 3px solid var(--orange);
	border-left: 3px solid var(--orange);
}
.connectlinemobtwo {
	box-sizing: content-box;
	position: absolute;
	width: 60%;
	top: 95px;
	height: 321px;
	left: 35%;
	border-radius: 0px 20px 0px 0px;
	border-top: 3px solid var(--orange);
	border-right: 3px solid var(--orange);
}
.connectlinemobthree {
	box-sizing: content-box;
	position: absolute;
	width: 60%;
	top: -35.2875rem;
	height: 54px;
	left: 35%;
	border-radius: 0px 0px 20px 0px;
	border-right: 3px solid var(--orange);
	border-bottom: 3px solid var(--orange);
}
.connectlinemobfour {
	box-sizing: content-box;
	position: absolute;
	top: -31.925rem;
	width: 35%;
	height: 23.156rem;
	left: 3%;
	border-radius: 30px 0px 0px 30px;
	border-top: 3px solid var(--orange);
	border-bottom: 3px solid var(--orange);
	border-left: 3px solid var(--orange);
}
.connectlinemobfive {
	box-sizing: content-box;
	position: absolute;
	top: -8.594rem;
	width: 39%;
	height: 9.375rem;
	left: 11%;
	border-radius: 0px 30px 30px 0px;
	border-bottom: 3px solid var(--orange);
	border-right: 3px solid var(--orange);
	border-top: 3px solid var(--orange);
}
.connectlinemobsix {
	box-sizing: content-box;
	position: absolute;
	top: 0.9688rem;
	width: 40%;
	height: 100%;
	left: 3%;
	border-radius: 30px 0px 0px 30px;
	border-bottom: 3px solid var(--orange);
	border-left: 3px solid var(--orange);
	border-top: 3px solid var(--orange);
}
.connectlinemobseven{
	box-sizing: content-box;
	position: absolute;
	top: 1.15625rem;
	width: 20%;
	height: 70px;
	left: 35%;
	border-radius: 0px 10px 0px 0px;
	border-right: 3px solid var(--orange);
	border-top: 3px solid var(--orange);
}
.connectlinemobeight{
	box-sizing: content-box;
	position: absolute;
	top: -5.83rem;
	width: 25%;
	height: 3.0129rem;
	left: 55%;
	border-radius: 0px 0px 0px 10px;
	border-bottom: 3px solid var(--orange);
	border-left: 3px solid var(--orange);
}
/* .connectlinemobninetop {
	box-sizing: content-box;
	overflow: visible;
	position: absolute;
	top: 7.025rem;  
	width: 30%;
	height: 60px; 
	left: 65%;
	border-radius: 0px 30px 0px 0px;
	border-top: 3px solid var(--orange);
	border-right: 3px solid var(--orange);
	
} */
.connectlinemobninebottom {
	box-sizing: content-box;
	overflow: visible;
	position: absolute;
	top: -2.81316rem;
	width: 30%;
	height: calc(100% + 4.815rem); 
	left: 65%;
	border-radius: 0px 30px 30px 0px;
	border-top: 3px solid var(--orange);
	border-right: 3px solid var(--orange);
	border-bottom: 3px solid var(--orange);
}
.connectlinemobten {
	box-sizing: content-box;
	overflow: visible;
	position: absolute;
	top: 5px;
	width: 33%;
	height: 65px;
	left: calc(45% - 2px);
	border-radius: 10px 0px 0px 0px;
	border-top: 3px solid var(--orange);
	border-left: 3px solid var(--orange);
}
.connectlinemobeleven {
	box-sizing: content-box;
	overflow: visible;
	position: absolute;
	top: 50px;
	width: 30%;
	height: 65px;
	left: calc(15% - 2px);
	border-radius: 0px 0px 10px 0px;
	border-right: 3px solid var(--orange);
	border-bottom: 3px solid var(--orange);
}
.connectlinemobtwelve {
	box-sizing: content-box;
	overflow: visible;
	position: absolute;
	top: 115px;
	width: 30%;
	height: calc(100% - 115px);
	left: 3%;
	border-radius: 30px 0px 0px 30px;
	border-top: 3px solid var(--orange);
	border-bottom: 3px solid var(--orange);
	border-left: 3px solid var(--orange);
}
.connectlinemobthirteen {
	box-sizing: content-box;
	overflow: visible;
	position: absolute;
	top: 3px;
	width: 30%;
	height: 70px;
	left: calc(20% - 2px);
	border-radius: 0px 10px 0px 0px;
	border-top: 3px solid var(--orange);
	border-right: 3px solid var(--orange);
}
.connectlinemobfourteen {
	box-sizing: content-box;
	overflow: visible;
	position: absolute;
	top: 48px;
	width: 30%;
	height: 70px;
	left: calc(50% - 2px);
	border-radius: 0px 0px 0px 10px;
	border-bottom: 3px solid var(--orange);
	border-left: 3px solid var(--orange);
}
.tlinemob {
	position: absolute;
	top: 55px;
	left: calc(50% - 0.25rem);
	width: 9px;
	height: 90px;
	border-top: 3px solid var(--orange);
}
.connectlinemobfifteen {
	box-sizing: content-box;
	overflow: visible;
	position: absolute;
	top: 118px;
	width: 20%;
	height: calc(100% - 118px);
	left: 77%;
	border-radius: 0px 30px 0px 0px;
	border-top: 3px solid var(--orange);
	border-right: 3px solid var(--orange);
}
.snail {
	display: none;
}
.bartoplogo img {
	height: 90%;
	transform: translateX(-30px); 
}

.snailcontacts {
	position: absolute;
	top: 870px;
	left: calc(97% - 70px);
	width: 100px;
	height: 150px;
	overflow: hidden;
	background-image: url("snaillefttotop.png");
	background-size: 50% auto;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	animation: snailtotop 100s ease-in-out infinite;
	z-index: 99;
}
.pageone {
	width: 100%;
	height: 860px;
	background-size: auto 100%;
}
.blockpicleft {
	/* display: none; */
	top: 120px;
	position: absolute;
	width: 50%;
	height: 360px;
	background-image: url("bugdown.png");
	background-size: auto 80%;
	background-position:  0% 50%;
	opacity: 1;
}
.blockpicleft:hover {
	background-image: url("bugdownblack.png");
	background-size: auto 85%;
}
.blockpicright {
	width: 50%;
	height: 360px;
	top: 500px;
	left: 50%;
	opacity: 1;
	 background-image: url("bugleft.png");
	 background-size:  auto 80%;
	 background-position: 100% 50%;
}
.blockpicright:hover {
	background-image: url("bugleftblack.png");
	background-size:  auto 85% ;
}

.blocktextsinistra,
.blocktextdestra {
	position: absolute;
	z-index:1;
}
.blocktextsinistra {
	width: 55%;
	left: 43%;
	top: 150px;
	height: 350px;
}
.blocktextdestra {
	height: 300px;
	top: 530px;
	width: 50%;
	left: 8%;
}

.blocknine:hover .horizontalline {
	width: 160px;
	left: 0%;
}

.blocknine:hover .verticalline {
	width: 5px;
	height: 25px;
}
@keyframes vertical {
0% {
	transform:translateX(4px);
}
50%  {
	transform:translateX(-12px);
}
100% {
	transform:translateX(4px);
}
}
.gridone,
.gridtwo,
.gridthree {
	box-shadow: 0px 0px 10px 20px #FFFFFF;
}
.gallery {
	margin-bottom: 30px;
}
.slideshow-container {
	margin: 30px auto 0 auto;
	box-shadow: 0px 0px 20px 10px #FFFFFF;
}

.prev, 
.next,
.backw,
.forw {
  font-size: 22px;
}

.dot,
.punto {
  height: 10px;
  width: 10px;
}
#punto {
	transform: translateY(-200%);
}
.aboutboxleft,
.aboutboxright {
	width: 80%;
}
.aboutboxtop {
	margin: 30px auto;
}
.aboutboxleft,
.aboutboxright {
	width: 80%;
}

.avatarbox,
.avatarboxcolor,
.avatarboxtextone,
.avatarboxtexttwo {
	width: 100%;
	margin: auto;
}
.avatarbox {
	box-shadow: 0px 0px 20px 10px #FFFFFF;
}
.avatarboxtexttwo h2 {
	font-size: 100%;
	line-height: 20px;
} 
.avatarboxtexttwo p {
	font-size: 90%;
	line-height: 18px;
	margin: 2% 0;
} 
.avatarboxtexttwo h3 {
	font-size: 85%;
	line-height: 10px;
	margin: 0 0 0 8%;
	display: inline-block; 
	vertical-align: top;
} 
.avatarboxtexttwo {
	padding: 10%;
}
#toright {
	margin: 5px 0 0 0;
	font-size: 75%;
}
.workshop-container {
	width: auto;
}
.myFrames img {
	width: 100%;
	height: auto;
	box-shadow: 0px 0px 20px 10px #FFFFFF;
}
.contactsboxtopx {
	width: 100%;
}
.contactsform {
	top: 180px;
}
.submitbox {
	width: 100%;
}
.contactssocial {
	top: 720px;
	height: 90px;
	width: 90%;
	left: 5%;
}
#social {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 15%;
	margin: 0 auto;
	height: 100%;	
}

.socialone {
	background-size:  auto 30%;
}
.socialtwo {
	background-size:  auto 30%;
}
.socialthree {
	background-size:  auto 30%;
}
.socialfour {
	background-size:  auto 30%;
}
.socialfive {
	background-size:  auto 30%;
}

}



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

.bartoplogo img {
	height: 80%;
}

.avatarboxtextone h2 {
	font-size: 180%;
	line-height: 40px;
}
.avatarboxtextone span {
	margin-top: 10px;
	font-size: 180%;
}
.avatarboxtexttwo h2 {
	font-size: 95%;
	line-height: 20px;
} 
.avatarboxtexttwo p {
	font-size: 85%;
	line-height: 15px;
	margin: 2% 0;
} 
.avatarboxtexttwo h3 {
	font-size: 85%;
	line-height: 10px;
	margin: 0 0 0 8%;
	display: inline-block; 
	vertical-align: top;
} 
.avatarboxtexttwo {
	padding: 10%;
}	
.punto {
  height: 8px;
  width: 8px; 
}
	
}