/**top animation*/
.anim-area {
  height: 280px;
  max-width: 1820px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.sky {
  height: 280px;
  width: 3840px;
  background: url(https://dynamolights.com/wp-content/uploads/2018/01/Header-image-background-6.png);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}

.midground {
  height: 280px;
  width: 3840px;
  background: url(https://dynamolights.com/wp-content/uploads/2018/01/Road_Midground.png);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}

.scroll-slow {
  animation: moveSlideshow 60s linear infinite;
}

.scroll-fast {
  animation: moveSlideshow 10s linear infinite;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-50%);  
  }
}

/*Wheel*/
.wheel{
  position:absolute;
  bottom:-4px;
  z-index:0;
}
.wheel-f{
  left:144px;
}
.wheel-r{
  left:21px;
}
.wheel-roll{
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.bike-frame-container{
  position:absolute;
  bottom:11px;
	left:35%;
  height:125px;
  width:496px;
  z-index:1; 
	
}
@media only screen and (max-width: 700px)
{
	.bike-frame-container{
	left:1em;
	}
}
	
.bike-frame{
  position:absolute;
  z-index:5;
}

.header-text-container{
	position:absolute;
	z-index:10;
	margin:aut0;
	width:100%;
}

.header-text{
	position:relative;
  font-size:3em;
	font-weight:700;
  text-shadow:0 0 0.04em rgb(0, 9, 36);
	color:gold;
	max-width:1000px;
	margin:auto;
}

.tagline{
	color:whitesmoke;
	font-size:1.2em;
	font-weight:500;
	width:100%;
	text-shadow:0 0 0.04em rgb(0, 9, 36);
	max-width:1000px;
	margin:auto;
	margin-top:-0.4em;
}

.header-text, .tagline{
	font-family:open sans;
	line-height:1.5em
}

@media only screen and (max-width: 600px)
{
	.header-text{
		line-height:1em;
		font-size:2.5em;
	}
	.tagline{
		margin-top:0;
	}
}


/** theme fixes*/

::selection{
	background-color:gold;
	color:rgb(0, 9, 36);
}

.inside-header{
	padding:0px;
}

.sidebar .widget{
	background:transparent;
	max-width:12em;
	margin:auto;
}

@media (max-width: 800px){
.sidebar .widget{
	max-width:none;
}
}

.main-wrapper{
	background-color:rgb(0, 9, 36);
}

.separate-containers .inside-article{
	background:transparent;
	padding-right:10px;
	padding-left:10px;
}

.separate-containers .comments-area{
	background:none;
}

a:active{
	color:red;
}

.separate-containers .inside-article{
	padding-top:1em;
}

.inside-article{
	margin:auto;
	max-width:32em;
}

.entry-title{
	border-bottom:solid;
	border-color:gold;
	padding-bottom:0.3em;
	border-width:0.08em;
}

#main > header{
	background-color:transparent;
	color:gold;
	margin-bottom:-2em;
}

.site-header{
	background-color:#000519;
}

/**Typography**/
h2{
	font-size:2em;
	margin-top:1em;
}
h3{
	font-size:1.5em;
}
h4{
	font-size:1.2em;
}

h2, h3, h4{
	color:#ffd131;
	font-family:open sans;
}

h1{
	font-family:open sans;
}

p{
 font-family:open sans;
	font-size:1em;
	line-height:1.7em;
}
    /**li font not working*/
li{
	font-family:open sans;
}

/**Top menu*/
.main-navigation .main-nav ul li a {
	line-height:1.6em
}

.main-navigation{
	background-color:transparent;
	border-bottom:solid;
	border-top:solid;
	border-color:gold;
	border-bottom-width:3px;
	border-top-width:2px
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a{
	background-color:transparent;
}
.main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li:focus > a, .main-navigation .main-nav ul li.sfHover > a{
	background-color:gold;
	color:rgb(0, 9, 36);
	font-weight:400;
	}

.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover, .main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a{
	background-color:gold;
	color:rgb(0, 9, 36);
	font-weight:400;
}

.main-navigation .main-nav ul ul li:hover > a, .main-navigation .main-nav ul ul li:focus > a, .main-navigation .main-nav ul ul li.sfHover > a{
	background-color:gold;
		color:rgb(0, 9, 36);
	font-weight:500;
}

.main-navigation a{
	font-size:1.2em;
	font-weight:200;
}

.menu-toggle{
	font-size:1.1em;
	line-height:2em;
}

@media (min-width: 1025px){
.grid-25{
	width:20%;
}

.grid-50{
	width:60%;
}

.push-25{
	left:20%;
}

.pull-50{
	left:-60%;
} 
}

/**buttons*/
.image-button{
	border-style:solid;
	border-width:0.1em;
	border-radius:0.12em;
	font-size:1em;
	font-weight:400;
	color:whitesmoke;
	padding-left:0.2em;
	padding-right:0.2em;
	margin-bottom:0.3em;
	display:block;
	transition: margin 0.3s, background-color 0.1s, color 0.1s;
	white-space: nowrap;
	overflow:hidden;
}

.image-button:hover{
	background:none;
}

.image-button-gold{
	border-color:gold;
}

a.image-button:visited{
	color:inherit;
}

.image-button-gold:hover, a.image-button:visited:hover{
	background-color:gold;
	color:rgb(0, 9, 36);
	/**box-shadow:0em 0em 0.5em gold;*/
	transition: margin 0.5s, background-color 0.1s, color 0.1s;
	font-weight:500;
}

/**Buttom Slide Anim*/
#left-sidebar .image-button-gold:hover, a.image-button:visited:hover{
	margin-left:0.25em;
	margin-right:-0.25em;
}

#right-sidebar .image-button-gold:hover, a.image-button:visited:hover{
	margin-left:-0.25em;
	margin-right:0.25em;
}

/**Turn of button anim for mobile*/
@media (max-width: 800px){
	#left-sidebar .image-button-gold:hover, a.image-button:visited:hover{
	margin-left:inherit;
	margin-right:inherit;
}

#right-sidebar .image-button-gold:hover, a.image-button:visited:hover{
	margin-left:inherit;
	margin-right:inherit;
}
}

.button-indent-1{
	margin-left:0.3em;
}

.button-indent-2{
	margin-left:0.6em;
}

.sidebar-heading{
	margin-top:1em;
	margin-bottom:0.4em;
	font-size:1.3em;
	font-weight:500
	}

.about-table{
	font-size:0.8em;
	font-weight:500;
		}

/**Links*/
a:hover{
	color:gold;
}

a{
	color:cornflowerblue;
}

a:visited{
	color:#99A3B6;
}

a:visited:hover{
	color:gold;
}

h2 a:visited, h2 a{
	color:inherit;
}

.widget-area .widget{
	padding-left:0.5em;
	padding-right:0.5em;
	padding-top:0;
	padding-bottom:0;
}

table *{
	border-color:gold;
	border:none;
}

/**tr:nth-of-type(odd){
	background-color:rgb(0, 9, 40);
}*/

table th{
	border-right:solid;
	border-width:1px;
	border-color:gold;
}

table tr td, th{
	border-bottom:solid;
	border-width:1px;
	border-color:gold
}

table{
	border-left:none;
	border-right:none;
	border-top:solid;
	border-width:4px;
	border-color:gold;
	border-radius:3px;
	font-family:roboto;
}

.nested-table{
	border-top:none;
	border-bottom:none;
	margin:0;
}

.nested-table td{
	border-bottom:solid;
	border-right:solid;
	border-color:gold;
	border-width:1px;
}
.nested-table td:last-of-type{
	border-right:none;
}

.nested-table tr:last-of-type td{
	border-bottom:none;
}

.table-list{
	margin-left:1em;;
	margin-bottom:inherit;
}

/**Figures*/
figure{
	/**border-top:solid;
	border-bottom:solid;
	border-width:2px;*/
	padding-top:0.8em;
	padding-bottom:0.6em;
	margin:1.5em;
	margin-top:0;
	margin-left:0;
	margin-right:0;
}

figcaption{
	box-sizing:border-box;
	padding:0.3em;
  margin:auto;
	max-width:30em
}

.fig-float-right{
	float:right;
}

.fig-float-left{
	float:left;
}

@media (max-width: 1200px){
.fig-float-right, .fig-float-left{
	float:none;
	display:inline-block;
}
}


.img-med{
	max-height:15em;
	width:auto;
	display: block;
  margin-left: auto;
  margin-right: auto;
}

	
.fig-cap-med{
	font-size:0.8em;
	font-weight: 500;
}

.img-lrg, .fig-cap-lrg{
	max-height:20em;
	width:auto;
}

	
.fig-cap-lrg{
	font-size:0.8em;
	font-weight: 500;
}

.med-anim-area{
	height:300px;
	width:400px;
	border:solid;
	position:relative;
}

.mag-rotate{
	position:absolute;
  animation-name: magnet-rotate-anim;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
	top:0
}

 @keyframes magnet-rotate-anim {
   from {}
   to {transform: rotate(90deg);}
}

.coils{
	position:absolute;
	top:0;
}

.bulb{
	position:absolute;
	top:50px;
	left:300px
}
.on{
  position:absolute;
  animation-name: light-on-anim;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.off{
	z-index:10;
}

 @keyframes light-on-anim {
   from {opacity:1;}
   50% {opacity:0;}
   to {opacity:1;}
}

/**Added Elements*/
/**Horizontal line*/
.hor-line{
	margin-top:2em;
	margin-bottom:2em;
	border-bottom:solid;
	border-width:0.1em;
	border-color:gold;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}

.shop-box{
	border-style:solid;
	border-width:0.1em;
	padding:0.3em;
	border-color:gold;
	border-radius:0.5em;
	margin-top:2em;
}

/**elementor main page*/
.mainpageimagebuttons img, .mainpageimagebuttonssmall img{
	border:solid;
	border-radius:.4em;
	border-color:gold;
	padding:0;
}

.mainpageimagebuttons figcaption, .mainpageimagebuttonssmall figcaption{
	position:absolute;
	bottom:20px;
	left:0;
	width:100%;
	font-size:5em;
}

.mainpageimagebuttons .wp-caption .wp-caption-text{
	font-size:2em;
}

.mainpageimagebuttonssmall .wp-caption .wp-caption-text{
	font-size:1em;
	color:gold;
}

/**Cards*/
.card{
	border:solid;
	padding:1em;
	border-radius:0.5em;
	border-color:gold;
	transition:0.5s;
}

.card:hover{
	box-shadow: 0px 0px 15px gold;
	transition:0.5s;
}