@charset "utf-8";
/* CSS Document */
body {padding: 0px; margin:0px; background-image:url("oscar-nilsson-sY0czx8abLY-unsplash.jpg"); background-repeat:no-repeat; background-attachment:fixed; background-size:cover; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}

/* sticky header start */
.header {width:100%; background-image: linear-gradient(black, rgba(255,0,0,0)); height:140px; margin:0px; position:fixed; top:0; z-index:99999999999999999999;}

#menu a {width:50%; text-align:center; float:left; text-decoration:none; color:white; transition:1s;}
#menu a:link {text-decoration:none; color:white;}
#menu a:visited {text-decoration:none; color:white;}
#menu a:active {text-decoration:none; color:white;}
#menu a:hover {background:white; color:black; transition:1s; border-radius:5px;}
	#menu {width:50%; margin-left:25%; margin-right:25%; transition:2s;  }

#logo {width:50%; margin-left:25%; margin-right:25%; transition:2s; margin-top:5px;}
/* sticky header end */

.content {margin-top:140px; transition:2s;}


.bgbox {width:60%;margin-left:20%; margin-right:20%; height:460px; text-align:center; transition:2s; vertical-align:middle; }
			#Box1 {background-image:url("BG-1.gif"); background-repeat:no-repeat; background-size:cover; color:white;}
			#Box2 {background-image:url("BG-2.gif"); background-repeat:no-repeat; background-size:cover; color:white;}
						#ARTISTRY {font-size:50px; color:#BDD3EA; padding-top:65px; text-align:center; width:40%;}
											.bgbox h1, h2 {filter: drop-shadow(2px 2px 2px navy);}

.container {width:60%; height:460px; text-align:center; transition:2s; position:absolute; color:white;}
.viewfinder {opacity:0.6;  width:100%; height:100%;}
.viewfinder img {position:absolute;} 

.embedframe {width:600px; height:auto; margin-left:auto; margin-right:auto; margin-bottom:50px; margin-top:50px; transition:2s;}

.testimonials {width:90%; margin-left:5%; margin-right:5%;}
.testbubble { width:80%; height: auto; margin-left:10%; margin-right:10%; background-color: rgba(255, 255, 255, 0.3);  transition:2s; border-radius:10px; color:white; padding:2%; margin-bottom:5px;}

.contact {text-align:center; width:70%; height: auto; margin-left:15%; margin-right:15%; background-color: rgba(255, 255, 255, 0.3); padding:2%; transition:2s; border-radius:10px; color:white;}

.footer {width:100%; text-align:center;}



hr {border-bottom:thick; border-color: #BDD3EA; border-style:solid; margin-top:2%; margin-bottom:2%;}

.EXAMPLEVIDEOS {text-align:center; font-size:40px; color:white; font-family:Garamond; width:60%; margin-left:auto; margin-right:auto;}
#ARTISTRY {font-size:50px; color:white; transition:2s;}

#a1 {font-size:30px; padding-top:100px; padding-left:20%; padding-right:20%; transition:2s; font-weight:normal;}
#a2 {font-size:30px; padding-left:20%; padding-right:20%; transition:2s; font-weight:normal;}
#b2 {font-size:30px; font-weight:normal; padding-left:20%; padding-right:20%; transition:2s; padding-top:100px;}

/*Screen-size compatability*/

@media screen and (max-width: 650px) {
  #logo {width:100%; margin:4px; transition:2s;}
	
	#menu {width:100%; margin:0px; transition:2s;}
	
	.contact {width:100%; margin:0px; transition:2s; padding-left:5%; padding-right:5%; height:auto;}
	
	.bgbox {width:100%; margin:0px; transition:2s;}
	.container {width:100%; margin:0px; transition:2s;}
	
	.embedframe {width:100%; margin-left:0%; margin-right:0%; height:auto; transition:2s;}
	.testimonials {width:100%; margin:0px; height:auto;}
	.testbubble {width:100%; margin:0px; margin-bottom:5px; height:auto;}
	
}


.backupbg {display:none; width:100%; height:100%; z-index:-999999; position:fixed; top:0; }
				

@media screen and (max-width:1200px) {
	#a1 {padding-top:60px; transition:2s;}
	#ARTISTRY {padding-top:20px; transition:2s;}
	.contact {width:90%; margin-left:5%; margin-right:5%; height:auto;}
	
}

													@media screen and (max-width:900px) {
														#a1 {padding-top:0px; font-size:25px; transition:1s; padding-left:5%; padding-right:5%;}
														#a2 {font-size:25px; transition:1s; padding-left:5%; padding-right:5%;}
														.container {display:none;}
														.bgbox {background:#315A9A; background-image:none; height:auto; padding-top:10px; padding-bottom:10px; padding-left:0px; padding-right:0px;}
														#Box1 {}
														#u {}
														.EXAMPLEVIDEOS{font-size:30px; padding:0px; width:90%;}
														#ARTISTRY {font-size:20px; padding-top:90px; transition:1s;}
														#b2 {font-size:25px; transition:1s; padding-left:5%; padding-right:5%; padding-top:10px;}
														.testbubble {padding-left:0px; padding-right:0px;}
														.testbubble h3,p {margin-left:1%; margin-right:1%;}
														.embedframe {height:auto;}
														
														
														.contact {width:100%; margin:0px; font-size:15px; padding-top:4px; padding-bottom:4px; padding-left:0px; padding-right:0px; height:auto;}
														
														.contact h1 {font-size:20px;}
														
														.backupbg {display:flex; top:0;}
														
														.content {margin-top:110px; transition:2s;}
														}


	
	

	
.footer {color:white;}
	

#my{
zoom: 100%;
}

/*Webkit stuff*/

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(navy,  black);;
}

::-webkit-scrollbar-thumb {
  background: #315A9A; border-top:thick; border-bottom:thick; border-color: #BDD3EA; border-style:solid; border-left:none; border-right:none;
}

::-webkit-scrollbar-thumb:hover {
  background: #BDD3EA; border-color:#315A9A;}