/*
Theme name: Not Skate Camp
Author:  briian rose
iambrianrose.com @b___Ro
*/

/* Reset */

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; 
	}

html { width: 100%; text-align: center;    height: 100%;
}




body {
	background: url('/assets/css/images/background.jpg') no-repeat top center fixed;
	background-color: #13152C;
	background-size: cover;  
	position: relative;
	height: 100%;
	margin: 0 auto;
	}


.electric-overlay {	
	background: url('/assets/css/images/circuit-bg3.png') no-repeat top center fixed;
  position: absolute;
  	background-size: cover;  
	height: 100%;
	margin: 0 auto;
 background-repeat: repeat-y;
  top: 0;
  left: 0;
  width: 100%;

  z-index: -1;
  opacity: .2;
-webkit-animation: cloudmove 14s infinite linear;
animation: cloudmove 14s infinite linear;
}

@keyframes cloudmove{
  0%,100% { opacity: 0; }
  50% { opacity: .2; }
}

@-webkit-keyframes cloudmove{
  0%,100% { opacity: 0; }
  50% { opacity: .2; }
}




/* Basic */

	body, input, select, textarea {
		color: #fff;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 12pt;
		font-weight: 300 !important;
		letter-spacing: -0.025em;
		line-height: 1.75em;
		text-align: center;
		overflow-x: hidden;

	}


strong {font-weight: 400;}


	a {
		transition: border-color 0.2s ease-in-out;
	
		color: #fff;
		outline: 0;
		text-decoration: none;
	}

		a:hover {
			border-color: transparent;
			cursor: pointer!important;
		}




#servicesinfo a, #getyourboxtext a {
		transition: border-color 0.2s ease-in-out;
		color: blue;
		outline: 0;
		text-decoration: none;
	}


	h1 {
		font-weight: 600; 
		font-size: 3em;
		text-align: center;
    color: skyblue;
    border-bottom: dotted 1px;
    width: 50%;
    margin: 0 auto;
    margin-top: 1%;
    letter-spacing: .1em;
    line-height: 1em;
	}

#boxespage h1 {font-size: 26px;}

	h2 {
		font-weight: 100;
		font-size: 2em;
  

	}

/* Social Icons */
.dlicon2 {font-size: 80%; }
.dlicon {color: #fff border-color:  #8ac440; font-size: 80%; }

	.icon {
		text-decoration: none;
		position: relative;
	}

		.icon:before {
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

		.icon > .label { display: none; }


	/* Header */
	.logoimg img {width:350px;  }



/* Skate Scroll */

#skatescroll {
  background: url('/assets/css/images/logoscroll-mini.png');
  background-size: contain;
  background-repeat: repeat-x;
  width: 100%;
  height: 40px;
  animation: bgScrollLeft 80s linear infinite;
  opacity: .5;
   
}


/*
marquee {      background: rgba(0, 0, 0, 0.3);
  background-repeat: repeat-x;
  width: 100%;
  height: 150px;
  animation: bgScrollLeft 8000s linear infinite;
  border-bottom:  1px dotted #fff;
  opacity: .8;
  overflow: hidden;
}
*/

@keyframes bgScrollLeft {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -800px 0;
  }
}

#directelectric-scroll {
  background: url('/assets/css/images/logo-scroll.png');
    background: rgba(0, 0, 0, 0.3);
  background-repeat: repeat-x;
  width: 100%;
  height: 150px;
  animation: bgScrollLeft 800s linear infinite;
  margin:  2em auto;
  border-top:  1px dotted #fff;
  border-bottom:  1px dotted #fff;
  opacity: .8;
  overflow: hidden;
}

#directelectric-scroll img {margin-right: 5%;}



body p {  border-bottom: 1px  dotted #fff;

	margin: 1em auto;
	display: block;
	width: 70%;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: .1em;
	color: #fff;
}



	#aboutinfo, #servicesinfo, #contactinfo {
	    width: 65%;
	    background: #ffffff;
		color: #000000;
	    border-radius: 50px; 
		display: none;
	    margin: 2em auto;
	    margin-bottom: 3em;
		font-size: .8em;
		line-height: 2em;
		letter-spacing: .02em;
		padding: 3%;
		z-index: 2;
		position: relative;

	}


 #about, #services, #contact {display: inline-block;
	font-weight: 300 !important;
		letter-spacing: .1em;
		border: 1px dotted;
		border-color: #fff;
		width: 9%;
		margin:  0 3px;}

#reefybox {display: block;
	font-weight: 300 !important;
		letter-spacing: .1em;
		border: 1px dotted;
		border-color: #fff;
		color:  #d5dd26;
		width: 20%;
	   margin: 2em auto;
     padding: 1%;
}





	@keyframes header {
		0% {

			transform: translate3d(0,1em,0);
			opacity: 0;
		}

		100% {

			transform: translate3d(0,0,0);
			opacity: 1;
		}
	}



	@keyframes nav-icons {
		0% {

			transform: translate3d(0,1em,0);
			opacity: 0;
		}

		100% {

			transform: translate3d(0,0,0);
			opacity: 1;
		}
	}




			#header nav li {
margin-bottom: 5px;
				animation: nav-icons 0.5s ease-in-out forwards;
			
				transform: translate3d(0,0,0);
				display: inline-block;
				height: 5.35em;
				line-height: 5.885em;
				opacity: 0;
				position: relative;
				top: 0;
				width: 5.35em;
			}

				#header nav li:nth-child(1) {

					animation-delay: .2s;
				}

				#header nav li:nth-child(2) {

					animation-delay: .4s;
				}

				#header nav li:nth-child(3) {

					animation-delay: .6s;
				}


				#header nav li:nth-child(4) {

					animation-delay: .8s;
				}



			#header nav a {
				border: 0;
				display: inline-block;
			}

				#header nav a:before {
					transition: all 0.2s ease-in-out;
					border-radius: 100%;
					border: solid 1px #fff;
					display: block;
					font-size: 1.25em;
					height: 2.5em;
					line-height: 2.5em;
					position: relative;
					text-align: center;
					top: 0;
					width: 2.5em;
				}

				#header nav a:hover {
					font-size: 1.1em;
				}

					#header nav a:hover:before {
						background-color: rgba(255, 255, 255, 0.175);
						color: #fff;
					}

				#header nav a:active {
					font-size: 0.95em;
					background: none;
				}

					#header nav a:active:before {
						background-color: rgba(255, 255, 255, 0.35);
						color: #fff;
					}

				#header nav a span {
					display: none;
				}














/* Footer */

	#payment-options img {width: 20%;}
	#payment-options {
	   	height: 1%;
		padding-left: 1%;
		padding-bottom: 2%;
		line-height: 1%;
		bottom: 0;
		left: 0;
		position: fixed;
		text-align: left;
		width: 100%;
		font-size: 80%;
			
		}


	#footer {
	   	height: 1%;
		padding-right: 1.5%;
		padding-bottom: 1%;
		line-height: 1%;
		bottom: 0;
		right: 0;
		position: fixed;
		text-align: right;
		width: 100%;
		font-size: 80%;
				opacity: .5;
		}





#box1 {background: url('/assets/css/images/IMG_0517.jpg'); background-repeat: no-repeat;
  background-position: center center; background-size: cover; }
#box2 {background: url('/assets/css/images/IMG_0656.jpeg'); background-repeat: no-repeat;
  background-position: center center; background-size: cover; }
#box3 {background: url('/assets/css/images/IMG_1494.jpg'); background-repeat: no-repeat;
  background-position: center center; background-size: cover;  }
#box4 {background: url('/assets/css/images/IMG_2080.PNG'); background-repeat: no-repeat;
  background-position: center center; background-size: cover;  }
#box5 {background: url('/assets/css/images/IMG_2498.jpeg'); background-repeat: no-repeat;
  background-position: center center; background-size: cover;  }
#box6 {background: url('/assets/css/images/IMG_2800.jpeg'); background-repeat: no-repeat;
  background-position: center center; background-size: cover;  }
#box7 {background: url('/assets/css/images/IMG_2905.jpeg'); background-repeat: no-repeat;
  background-position: center center; background-size: cover; 	}
#box8 {background: url('/assets/css/images/IMG_3355.jpg'); background-repeat: no-repeat;
  background-position: bottom center; background-size: cover;  }
#box9 {background: url('/assets/css/images/workexample.png'); background-repeat: no-repeat;
  background-position: center center; background-size: cover; 	 }
#box10 {background: url('/assets/css/images/de_van.png'); background-repeat: no-repeat;
  background-position: center center; background-size: cover;  }
#box11 {background: url('/assets/css/images/tesla-charger.jpeg'); background-repeat: no-repeat;
  background-position: center center; background-size: cover;  }
#box12 {background: url('/assets/css/images/de_van2.png'); background-repeat: no-repeat;
  background-position: center center; background-size: cover;  }  



#boxespage {
        display:flex;
         flex-direction:row;
           justify-content:space-around; 
            align-items:center;
            width: 80%;
            margin: 0 auto;

       flex-wrap: wrap;


}
  
.boxcontainer p { width: 100%; font-size: 75%; border: none; line-height:1.5em; letter-spacing: .04em;}
  
.boxcontainer { 
  position: relative;
  width: 100%;
  height: 20%;
  display: flex;
  flex-wrap: wrap;
 align-items: center;
            justify-content: center;

            margin-bottom: 50px;
    
}



.boxes {
  display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
   border: 1px dotted #fff;
	    border-radius: 50px; 
	    margin: 2%;
		font-size: 1em;
		padding: 1%;
		width: 20%; height: 200px;
background-color: rgba(255, 255, 255, 0.1);   
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8);

}


.boxes:hover { background: rgba(4,59,92,0.8);
                   cursor: pointer; }



	#getyourboxtext img {
		width: 50%; 
		display: block;
    margin: 0 auto;
	}

	#getyourboxtext {
	    width: 40%;
	    background: #ffffff;
		color: #000000;
	    border-radius: 50px; 
	    margin: .5em auto;
		font-size: .8em;
		line-height: 2em;
		letter-spacing: .02em;
		padding: 2.25em;
		position: relative;
		margin-bottom: ;
	}







/* Responsive */
	@media screen and (max-width: 768px) {
		body p {width:  90%; font-size: 11.5px;}
		#about, #story, #services, #contact {width: 20%;}
		#reefybox { width: 70%; }
		#aboutinfo, #storyinfo, #servicesinfo, #contactinfo {width: 80%;}
			.logoimg img {width:200px;}
			#skatescroll { height:30px;  }
      #boxespage {    flex-direction: row;}
         h1 {width:  80%; margin-bottom: 10%;}
         .boxcontainer { flex-direction: row;}
         .boxes {width: 100%;}
         	#getyourboxtext { width: 65%; margin-top: 10%;}
         		#payment-options img {width: 40%; }
         		#payment-options { padding-left: 2%;	padding-bottom: 5%;}
         			#footer {padding-bottom: 3.5%; padding-right: 5%; }

}