body, html {
  height: 100%;
  margin: 0;
  color: #777;
}


strong{
	font-weight:600;
	color:orange;
}

.proImageL, .learnImgR{
height: auto;
    width: 50%;
    padding-top: 16px;
    padding-left: 18px;
	float:left;
	text-align:center;
}

div.learnImgR{
	float:right;
	width: 43%;
}

.proImageL img, .learnImgR img{ 
width: 74%;
    max-height: 410px;
	max-width:310px;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}



.usmsgblock{
display:none;	
}

.bgimg-1 {
  background-image: url("/img/training.JPG");
  min-height: 500px;
}

.bgimg-2 {
   background-image: url("/img/range_large.JPG");
  min-height: 400px;
}

.homeLogo1 {
    /*background-image: url("/img/homeLogo1.png");
    
    /* background-position: center; */
	min-height: 650px;
    background-size: 1200px;
    background-repeat: no-repeat;
    background-position: bottom 4px right 50%;
}

.caption2 {
    font-size: 25px;
    color: #f7f7f7;
background-color: #111!important;
    color: #fff;
    padding: 18px;
    font-size: 25px;
    text-decoration: none;
	text-align:center;
}
.homeLogo2 {
    min-height: 650px;
    background-size: 1200px;
    background-repeat: no-repeat;
    background-position: bottom 4px right 50%;
    float: left;
    /* z-index: 100; */
    position: absolute;
    left: 36%;
}


.colour1 {
    background: linear-gradient(-45deg, #94B239, #33760A, #E2AA7B, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    display: inline-block;
    width: 100%;
    height: 100%;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.bgimg-3 {
  background-image: url("/img/stats.JPG");
  min-height: 400px;
}

.caption {
  position: absolute;
  left: 0;
  top: 20%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border, .loginOptions a {
  background-color: #111!important;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  text-decoration:none;
}

.loginOptions a {
    border: 1px solid white;
    margin-top: 10px;
    position: relative;
    /* right: 10px; */
    float: right;
    margin-right: 10px;
}

h3 {
  font: 20px "Lato", sans-serif;
  color: #111;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }	
}

/* Fix quick links on homepage mobile */
@media screen and (max-width: 900px) {
	.setup, .buttonHolder Button{
			width: 100%!important;
		margin-left: 0px!important;
	}
	.buttonHolder Button{
		margin-bottom:5px;
	}
}

.usmsgblock{
	display:none;
}

@media screen and (max-width: 400px) {
	.homePage{
		padding:5px 10px!important;
	}
	
	.main{
		display:none;
	}
}

@media screen and (max-width: 500px) {
	h2.header2, #subHeader2 {
		font-size: 1.4em!important;
	    line-height: 4em;
}

.homeTextLeft {
    width: 90%!important;
}

.colour2 .text {
    width: 93%!important;
    float: left!important;
    padding-left: 4%!important;
}

p.homeScreenText {
    padding: 0px 20px!important;
    width: 86%!important;
    margin-left: 2%!important;
}
div.learnImgR {
    float: left!important;
    width: 90%!important;
}

}

.homePage{
	color: #777;
	background-color:white;
	text-align:center;
	padding:50px 80px;
	text-align: justify;
color:#ddd;background-color:#282E34;text-align:center;text-align: justify;   }

nav.navbar{
	display:none;
}

.homePage{
	
}




.main {
    height: 50vh;
    width: 50vw;
    position: relative;
    /* float: right; */
    margin-left: 10%;
}



.learnImgL {
    text-align: center;
    width: 47%;
    float: left;
}

.learnImg{
    float: right;
    width: 45%;
	margin-top:60px;
}


.learnImgL img,.learnImgR img {
    height: 343px;
    padding-top: 16px;
    padding-left: 18px;
}

.endOfParagraph {
    height: 13px;
    width: 200px;
    background-color: darkgreen;
	float:left;
    margin-bottom: 10px;
    margin-left: 10px;
}

.homePage {
	padding:0px;
}

.colour1{
	padding: 50px 80px;
	background-color: darkseagreen;
    color: white;
}

.colour2{
	padding: 50px 80px;	
	width:100%;
}

.colour2 .text {
    float: right;
    width: 45%;
}

.main{
	margin-top:675px;
}

.marker{
    float: left;
    width: 100%;
}

.adjustPadding{
	padding: 143px 93px!important;
}

#fillWidth .setup{
	width:auto;
	margin-left:5%;
}


#fillWidth{
	width: auto!important;
	width:68%!important;
    margin-left: 0%!important;
    font-size: 1.3em!important;
}



.d1 {
  position: absolute;
  background-image: url(http://golf.east-iron.com/img/training.JPG);
  background-size: 2700px 1500px;
  height: 15vh;
  width: 5vw;
  background-position: 0 50%;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  animation: dd1 10s 1, dd12 10s 1;
  animation-delay: 0s, 14s;
}
.d2 {
  position: absolute;
  background-image: url(http://golf.east-iron.com/img/training.JPG);
  background-size: 2700px 1500px;

  height: 25vh;
  width: 12vw;

  background-position: -10vw 50%;
  left: 10vw;

  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  animation: dd2 10s 2;
  animation-delay: 4s;
}
.d3 {
  position: absolute;
  background-image: url(http://golf.east-iron.com/img/training.JPG);
  background-size: 2700px 1500px;
  overflow: hidden;

  height: 50vh;
  width: 20vw;
  left: 25vw;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
  background-position: -35vw 50%;

  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  animation: dd3 10s 2;
  animation-delay: 4s;
}
.d4 {
  position: absolute;
  overflow: hidden;
  background-image: url(http://golf.east-iron.com/img/training.JPG);
  background-size: 2700px 1500px;

  height: 40vh;
  width: 12vw;
  left: 50vw;
  background-position: -70vw 50%;

  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  animation: dd4 10s 2;
  animation-delay: 4s;
}

@keyframes dd1 {
  0% {
  }
  50% {
    width: 95vw;
  }
}
@keyframes dd12 {
  0% {
  }
  50% {
    background-position: Calc(0vw - 40px) 50%;
  }
}
@keyframes dd2 {
  0% {
  }
  50% {
    background-position: Calc(-10vw - 40px) 50%;
  }
}
@keyframes dd3 {
  0% {
  }
  50% {
    background-position: Calc(-35vw - 40px) 50%;
  }
}
@keyframes dd4 {
  0% {
  }
  50% {
    background-position: Calc(-70vw - 40px) 50%;
  }
}

.homeVideo {
    /* max-height: 1000px; */
    object-fit: fill;
    width: 100%;
}

.videoHolder {
    display: inline-block;
    width: 100%;
    /* max-height: 100px; */
    text-align: -webkit-center;
    background-color: #111;
}

.mainLogoOptions{
	margin-top:-000px;
}

.filler {
    display: block;
    width: 100%;
    height: 1000px;
}

.loginOptions{
    position: absolute;
    top: 0;
    right: 0px;
	z-index:100;
}



.mainLogo2 {
    position: absolute;
    top: 10%;
    left: 40%;
}


.colour1, .colour2{
	padding:0px;
}

.colour2{
	display:inline-block;
}

.holder{
	padding:50px 80px;
	background-color: #282E34;
}

.holderNoColour {
    max-width: 1248px;
    margin: 0 auto;
    width: 100%;
}

.homeTextLeft{
float: left;
width: 50%;
padding-left:20px;

border-radius:5px;
margin-top:20px;
}

.fullWidthDiv{
	display: inline-block;
    width: 100%;
}

p.homeScreenText{
	
}

.colour1 h1 {
    color: darkslategrey;
    background-color: white;
    padding: 10px;
    border-radius: 3px;
    text-align: center;
}


#textOnBG{
	width:100%;
	color:#ddd;
	background-color:#282E34;
	text-align:center;
	
	text-align: justify;
	display:inline-block;
}

.textLeft{
    float: left;
    width: 50%;
}

.learnImg img, .learnImgR img{
	width:90%;
}

.learnImgL{
		float:left;
		margin-top:0px;
	}


p.homeScreenText {
    margin-bottom: 20px;
    background-color: white;
    padding: 5px;
    border-radius: 3px;
    color: black;
}
#subText{
font-size:1.4em;	
}

h2.header2, #subHeader2{
   text-align: center;
    color: orange;
    font-size: 3.4em;
}

#subText span{
	font-weight:800;
}

#image2{
	 display:none;
 }

@media screen and (max-width: 900px) {
	.holder{
		padding:0px 0px;
	}
	
	.homeTextLeft{
		width:95%;
	}
	
	
	.holderNoColour{
		padding:0px 0px;
	}
	
	.videoHolder video{
		height:300px;
	}
	
	p.homeScreenText{
		padding:0px 20px;
	}


	.mainLogo2 {
		position: absolute;
		top: 10%;
		margin-top: 5px;
		margin-left: 5px;
		left:1%;
		width:90%;
	}
	
	.adjustPadding{
		padding:0px 0px!important;
	}
	
	img.homeLogo{
		width:100%;
	}
	
	
	.learnImg, .learnImgR{
		float:left;
		margin-top:0px;
		padding-top:0px;
	}
	.colour2 .text{
		width:100%;
	}
	
	.window.floating.right{
		width: 98%!important;
	}
	
	.colour1{
		height:auto;
	}
	
	.learnImg img, .learnImgR img{
		width: 210%;
	 }
	 
	 .learnImgL, .proImageL, .learnImgR{
		 max-width:93%;
		 width:93%;
	 }
	 
	 .textLeft{
		 width:100%;
	 }
	 
	 #image2{
		 display:block;
	 }
	 
	  #image1{
		 display:none;
	 }
}

@media screen and (max-width: 400px){
.homePage {
    padding: 0px 0px!important; 
}
}

.learnImgL img ,.learnImgR img {
    height: auto;
    width: 100%;
    padding-top: 16px;
    padding-left: 18px;
}


.mainLogo2 {
    margin-top: -56%;
    /* z-index: 100; */
    position: relative;
	top:auto;
	left:auto;
}

img.homeLogo {
    width: 34%;
    padding: 10px;
    border-radius: 10px;
    background: transparent;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important;
    margin-left: 29%;
}

#addMargin{
	margin-top:13%;
}



#page-wrapper{
	background-color:#111!important
}

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

}

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

#image2 {
    display: block;
   
    width: 73%;
    margin-left: 18%;
}}