body,html{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;

}



body{
  width: 100%;
  height: 100%;
  position: relative;

  background-image: url(img/Backgorund-photos1.jpg);
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;

  animation-name: change;
  animation-duration: 35s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;

 


/*
  -moz-animation-name: move;
  -moz-animation-duration: 35s;
  -moz-animation-timing-function: ease-in;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;

  -webkit-animation-name: move;
  -webkit-animation-duration: 35s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
*/

}



@keyframes change{
 0%
  {
      background-image: url(img/Backgorund-photos1.jpg), url(img/Backgorund-photos2.jpg);
  }
  14.28%
  {
      background-image: url(img/Backgorund-photos2.jpg), url(img/youth-girl-longjump.jpg);
  }
  28.56%
  {
      background-image: url(img/crosscountry.jpg), url(img/crosscountry.jpg);
  }
  42.8%
  {
      background-image: url(img/youth-girl-longjump.jpg), url(img/Backgorund-photos3.jpg);
  }
  57.08%
  {
      background-image: url(img/Backgorund-photos3.jpg), url(img/Backgorund-photos4.jpg);
  }
  71.36%
  {
      background-image: url(img/Backgorund-photos4.jpg), url(img/Backgorund-photos5-highjump.jpg);
  }
  85.64%
  {
      background-image: url(img/Backgorund-photos5-highjump.jpg), url(img/Backgorund-photos1.jpg);
  }
  
  100%
  {
      background-image: url(img/Backgorund-photos1.jpg);
  }

}

/*
@-moz-keyframes change{
  0%
  {
      background-image: url(img/Backgorund-photos1.png), url(img/Backgorund-photos2.png);
  }
  16.66%
  {
      background-image: url(img/Backgorund-photos2.png), url(img/youth-girl-longjump.png);
  }
  33.32%
  {
      background-image: url(img/youth-girl-longjump.png), url(img/Backgorund-photos3.png);
  }
  49.98%
  {
      background-image: url(img/Backgorund-photos3.png), url(img/Backgorund-photos4.png);
  }
  66.64%
  {
      background-image: url(img/Backgorund-photos4.png), url(img/Backgorund-photos5-highjump.png);
  }
  83.3%
  {
      background-image: url(img/Backgorund-photos5-highjump.png), url(img/Backgorund-photos1.png);
  }
  
  100%
  {
      background-image: url(img/Backgorund-photos1.png);
  }

}


@-webkit-keyframes change{
  0%
  {
      background-image: url(img/Backgorund-photos1.png), url(img/Backgorund-photos2.png);
  }
  16.66%
  {
      background-image: url(img/Backgorund-photos2.png), url(img/youth-girl-longjump.png);
  }
  33.32%
  {
      background-image: url(img/youth-girl-longjump.png), url(img/Backgorund-photos3.png);
  }
  49.98%
  {
      background-image: url(img/Backgorund-photos3.png), url(img/Backgorund-photos4.png);
  }
  66.64%
  {
      background-image: url(img/Backgorund-photos4.png), url(img/Backgorund-photos5-highjump.png);
  }
  83.3%
  {
      background-image: url(img/Backgorund-photos5-highjump.png), url(img/Backgorund-photos1.png);
  }
  
  100%
  {
      background-image: url(img/Backgorund-photos1.png);
  }

}
*/


















/* -------------------------------------------------------
Hide Arrows From Input Number */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type=number] {-moz-appearance: textfield;}
/* -------------------------------------------------------*/





/* -------------------------------------------------------*/ 
.noselect {
    -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 */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
/* -------------------------------------------------------*/




/* ------------------------------------------------------- 
Remove "focus glow" from input, select, textarea*/
.special input:focus, select:focus, textarea:focus{
  outline:none !important;
  outline:0px !important;
  -webkit-appearance:none !important;
  box-shadow: none !important;
  border-color:none !important;
}
/* -------------------------------------------------------*/






/* ------------------------------------------------------- 
Date Picker */
.ui-datepicker {
  width: 275px;    
  margin: 5px auto auto -10px;
  font-size:12px;
  font-family:Arial;
  background-color:#ffffff;
  border:1px solid #DDDDDD;
  border-radius:3px;
  padding:3px;    
  /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);*/
}
.ui-datepicker table {
      width: 100%;
}
.ui-datepicker-header {
  background: #154062;
  color: #ffffff;
  font-family:'Arial';
  border-width: 0px;
  border-radius:3px;
}
.ui-datepicker-title {
  font-family:'Arial';
  text-align: center;
  font-size: 14px;
  text-transform:lowercase;
  padding:5px;
  border-radius:3px;
}
.ui-datepicker-prev {
  float: left;
  cursor: pointer;
  background-position: center -30px;
  position:relative;
  color: #154062;
}
.ui-datepicker-next {
  float: right;
  cursor: pointer;
  background-position: center 0px;
  position:relative;
  color: #154062;    
}
.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
  color: #154062;   
}
.ui-datepicker-prev:before, .ui-datepicker-next:before {
  color: #ffffff;
  font-family: FontAwesome;    
  position:absolute;left:10px;top:8px;    
}
.ui-datepicker-prev span, .ui-datepicker-next span {
  background-image: none !important;
  padding:0px 0px 14px 6px;  
}
.ui-datepicker-next:before {
  content: "\f054"; 
}
.ui-datepicker-prev:before {
  content: "\f053"; 
}
.ui-datepicker thead {
  background-color: #f7f7f7;

  /*border-bottom: 1px solid #bbb;*/
}
.ui-datepicker th {
  background-color:#ffffff;
  text-transform: uppercase;
  font-size: 8pt;
  color: #666666;
  text-align:center;
  /*text-shadow: 1px 0px 0px #fff;*/
  /*filter: dropshadow(color=#fff, offx=1, offy=0);*/
}
.ui-datepicker tbody td {
  padding: 0;
  /*border-right: 1px solid #808080;*/
}

  .ui-datepicker tbody td:last-child {
      border-right: 0px;
  }

.ui-datepicker tbody tr {
  border-bottom: 0px solid #bbb;
}

  .ui-datepicker tbody tr:last-child {
      border-bottom: 0px;
  }

.ui-datepicker a {
  text-decoration: none;
}
.ui-datepicker td span, .ui-datepicker td a {
  display: inline-block;
  /*font-weight: bold;*/
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: #ffffff;
  /*text-shadow: 1px 1px 0px #fff;*/
  /*filter: dropshadow(color=#fff, offx=1, offy=1);*/
}
.ui-datepicker-calendar .ui-state-default {
  background: #154062;
      color:#ffffff;
      border-radius:3px;
      width:36px;
      margin:1px;

}
.ui-datepicker-calendar .ui-state-hover {
  background: #2ebec7;
  color: #FFFFFF;
}
.ui-datepicker-calendar .ui-state-active {
  background: #2ebec7;
  /*-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
  -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
  box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);    
  text-shadow: 0px 1px 0px #4d7a85;
  margin: -1px;*/
  color: #e0e0e0;
  border: 0px solid #55838f;
  position: relative;
  
}
.ui-datepicker-unselectable .ui-state-default {
  background: #D6E4BE;
  color: #000;
}

 #home{
     width:100%;
     height:100%;
     margin:0px;
     padding-top:130px;
     padding-left:110px;
     padding-right:25px;
        
    }

@media screen and (max-width: 600px){
    #home{
        
    }
               
            }
/* -------------------------------------------------------
*/