/* fonts */
/*@font-face{font-family:Maax;src:url("../fonts/maax.eot");src:url("../fonts/maax.eot?#iefix") format("embedded-opentype"),url("../fonts/maax.woff") format("woff"),url("../fonts/maax.ttf") format("truetype");font-weight:400}@font-face{font-family:Maax;src:url("../fonts/maax-medium.eot");src:url("../fonts/maax-medium.eot?#iefix") format("embedded-opentype"),url("../fonts/maax-medium.woff") format("woff"),url("../fonts/maax-medium.ttf") format("truetype");font-weight:500}@font-face{font-family:Maax;src:url("../fonts/maax-bold.eot");src:url("../fonts/maax-bold.eot?#iefix") format("embedded-opentype"),url("../fonts/maax-bold.woff") format("woff"),url("../fonts/maax-bold.ttf") format("truetype");font-weight:600}@font-face{font-family:Maax;src:url("../fonts/maax-black.eot");src:url("../fonts/maax-black.eot?#iefix") format("embedded-opentype"),url("../fonts/maax-black.woff") format("woff"),url("../fonts/maax-black.ttf") format("truetype");font-weight:800}@font-face{font-family:Ivar Text;src:url("../fonts/ivar-text.eot");src:url("../fonts/ivar-text.eot?#iefix") format("embedded-opentype"),url("../fonts/ivar-text.woff") format("woff"),url("../fonts/ivar-text.ttf") format("truetype");font-weight:400}.h1,h1{font-family:Maax,sans-serif;font-style:normal;font-stretch:normal}.h1 small,h1 small{line-height:0}.h2,h2{font-family:Maax,sans-serif;font-style:normal;font-stretch:normal}.h2 small,h2 small{line-height:0}.h3,h3{font-family:Maax,sans-serif;font-style:normal;font-stretch:normal}.h3 small,h3 small{line-height:0}.h4,h4{font-family:Maax,sans-serif;font-style:normal;font-stretch:normal}.h4 small,h4 small{line-height:0}.h5,h5{font-family:Maax,sans-serif;font-style:normal;font-stretch:normal}.h5 small,h5 small{line-height:0}.h6,h6{font-family:Maax,sans-serif;font-style:normal;font-stretch:normal}
*/
#home { background: url(../img/headermain.jpg) center top no-repeat; background-size: cover; }
#home header { position: absolute; bottom: 0; left: 50%; margin-left: -420px; width: 1000px; text-align: center; }

#home header img { height: 100vh; }
/*#homepage { background: url(../img/homepage.jpg) center center no-repeat; background-size: cover; padding: 0; }*/
#homepagevideo { width: 100% !important; height: auto; margin-top: -100px }
#home header { position: absolute; bottom: 0; left: 50%; margin-left: -420px; width: 1000px; text-align: center; }

#service { background: url(../img/bgService.jpg) center top no-repeat; background-size: cover; }
#service header { position: absolute; bottom: 0; left: 50%; margin-left: -420px; width: 1000px; text-align: center; }
#service header img { height: 100vh; }
#service header { position: absolute; bottom: 0; left: 50%; margin-left: -420px; width: 1000px; text-align: center; }

#environment { background: url(../img/bgEnvironment.jpg) center -100px no-repeat; background-size: cover; }
#environment header { position: absolute; bottom: 0; left: 50%; margin-left: -420px; width: 1000px; text-align: center; }
#environment header img { height: 100vh; }
#environment header { position: absolute; bottom: 0; left: 50%; margin-left: -420px; width: 1000px; text-align: center; }

#employees { background: url(../img/bgEmployees.jpg) center top no-repeat; background-size: cover; }
#employees header { position: absolute; bottom: 0; left: 50%; margin-left: -420px; width: 1000px; text-align: center; }
#employees header img { height: 100vh; }
#employees header { position: absolute; bottom: 0; left: 50%; margin-left: -420px; width: 1000px; text-align: center; }

#community { background: url(../img/bgCommunity.jpg) center top no-repeat; background-size: cover; }
#community header { position: absolute; bottom: 0; left: 50%; margin-left: -420px; width: 1000px; text-align: center; }
#community header img { height: 100vh; }
#community header { position: absolute; bottom: 0; left: 50%; margin-left: -420px; width: 1000px; text-align: center; }

#mainNav { background: #000; /* background: rgba(0,0,0,.7) !important; */ }
.text-shadow { text-shadow: 2px 7px #fff !important; }
.homedesign { background: #000; /*border: 27px solid #495969;*/ overflow-x: hidden; }
.pagenav__button--right { right: 77px; transition: all .25s; }
.pagenav__button--right:hover { -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }
.fa-play-circle { transition: all .25s }
.fa-play-circle:hover { -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }

h1 { background: #ff7700; color: #fff; width: auto; padding: 10px 20px; font-size: 77px; box-shadow: 17px 17px 0px rgba(0,0,0, .7); text-transform: uppercase; }

.titleholder { background: #fff !important; padding: 20px 30px 30px 30px; position: absolute; top: 40%; right: -500px; width: 400px; height: 215px; z-index: 100; overflow-y: hidden; transition: all .37s ease; }

.titleholder:hover { background: #f7f4f4 !important; padding: 100px 30px 30px 30px !important; position: absolute; top: 0; margin-top: 0; right: 0; width: 400px; height: 100vh !important; z-index: 100; bottom: 0; overflow: visible; }


.titleholder p { padding: 0; margin: 0 0 10px 0; font-size: 13px; }

.titleholder:hover p { font-size: 14px; }
.titleholder:hover ul { font-size: 14px; }
.titleholder ul { font-size: 13px; }

.titleholder .readmore { font-weight: bold; font-style: italic; text-transform: uppercase; font-size: 14px; margin-bottom: 40px; display: block; }

.num { font-size: 21px; font-weight: 700; }
h2 { font-size: 70px; color: #ff5100; /* text-shadow: 2px 2px 2px rgba(0,0,0,.7); */ }
h3 { color: #ff5100; /* text-shadow: 2px 2px 2px rgba(0,0,0,.7); */ }
.desc { font-size: 14px; }
button { background: none; border: 0; display: block; position: relative; right: 0 !important; top: 0 !important; margin: 0 !important; display: block; }

.clear { clear: both !important; }
.btn-primary { background: #f85d13 !important; color: #fff; border-color: #f85d13 !important; font-size: 14px; font-weight: bold; text-transform: uppercase;  font-style: italic; }
.anim--effect-4 .page:nth-child(2) { background: #d9d9d9; color: #000; /* border: 27px solid #fff; */ }
wave { border-color: #ff5100 !important; overflow: hidden !important; }
#waveform { overflow: hidden; }
.text-orange { color: #ff5100; }
.scrolly { overflow-x: hidden; overflow-y: auto; padding-bottom: 0px; }
.w100 { width: 100% !important; }
.p0 { padding: 0 !important; }

.nextsec { cursor: url('path-to-image.png'), auto; }
.carlice { position: fixed; z-index: 1000; bottom: 0px; left: 0; color: #fff; background: #393939; width: 100%; padding: 10px 40px; }
.carlice h5 { font-size: 12px; padding-top: 10px }
.ci { height: 50px; width: auto; float: left; margin-right: 10px; }
.jfab_wrapper { position: fixed; z-index: 9999; bottom: -175px; right: 20px; display: none; }
.jfab_btns_wrapper { background: #817980; color: #fff; font-weight: 700; padding: 0; width: 200px; right: 100px; bottom: 20px; }
.jfab_btns_wrapper button { background: none; width: 100%; height: auto; box-shadow: none; border-radius: 0; font-size: 16px; margin: 0; padding: 10px 20px; text-align: left; }
.jfab_btns_wrapper button:hover { background: #ff5000; box-shadow: none; color: #fff; }
wave { height: 50px !important; }
.animate-show {
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
    opacity: 1;
}


.logotxt { font-size: 21px; font-weight: bold; text-transform: uppercase;  font-style: italic; color: #fff; vertical-align: top; display: table; padding: 0 20px !important; }

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
    display: inline-block !important;
}
.animate-show.ng-hide {
    opacity: 0;
}
    
/* overrides */
.navbar-nav a { color: #fff; }
.carousel-control-next-icon, .carousel-control-prev-icon { width: 40px; height: 40px; }



.quote { font-size: 30px; }
/* padding */
.p-copy { padding: 100px 20px; }
.p0 { padding: 0 !important; }

.p20 { padding: 20px !important; }
.p40 { padding: 40px !important; }
.p-l-0 { padding-left: 0 !important; }
.p-r-0 { padding-right: 0 !important; }
.p-b-0 { padding-bottom: 0 !important; }
.p-b-20 { padding-bottom: 20 !important; }
.p-t-50 { padding-top: 50px !important; }
.p-l-20 { padding-left: 20px !important; }
.p-l-10 { padding-left: 10px !important; }
.p-l-5 { padding-left: 5px !important; }
.p-r-20 { padding-right: 20px !important; }
.p-r-10 { padding-right: 10px !important; }
.p-r-5 { padding-right: 5px !important; }


/* margin */
.m0 { margin: 0 !important; }
.m10 { margin: 10px; }
.m20 { margin: 20px; }
.m40 { margin: 40px; }
.m-t-50 { margin-top: 50px !important;}
.m-t-20 { margin-top: 20px !important;}
.m-r-20 { margin-right: 20px !important; }
.m-l-20 { margin-left: 20px !important; }
.m-r-0 { margin-right: 0px !important; }
.m-l-0 { margin-left: 0px !important; }
.m-r-40 { margin-right: 40px !important; }
.m-b-20 { margin-bottom: 20px !important; }
.m-b-40 { margin-bottom: 40px !important; }
.leftside { min-height: 500px; margin: 0; }
.rightside { min-height: 500px; }

/*videojs*/
.video-background video { width: 100%; }


/* background and images */
.imgSafetya { position: relative; margin-bottom: 20px; text-align: center; }
.imgSafetya blockquote { position: absolute; z-index: 100; right: 0; top: 150px; text-align: left; }
.imgSafetya blockquote p { background: #fff; padding: 10px 40px; box-shadow: 17px 17px 0px #000; }
.imgSafetyb { position: relative; margin-bottom: 20px; text-align: center; }
.imgSafetyb blockquote { position: absolute; z-index: 100; right: 0; top: 150px; text-align: left; }
.imgSafetyb blockquote p { background: #fff; padding: 10px 40px; box-shadow: 17px 17px 0px #000; }

.imgServicea { position: relative; margin-bottom: 20px; text-align: center; }
.imgServicea blockquote { position: absolute; z-index: 100; right: 0; top: 150px; text-align: left; }
.imgServicea blockquote p { background: #fff; padding: 10px 40px; box-shadow: 17px 17px 0px #000; }
/* up next */
.upnextholder { background: #fff; padding: 20px; width: 100%; }
.upnextholder p { padding: 0; margin: 0; }
.upnextholder h2 { font-size: 40px }
.footerService { background: url('../img/footerService.jpg') no-repeat center center; height: 180px }

/* train */
#containertrain { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; padding: 0 !important; background: url(../images/flatmountains2.jpg) no-repeat #f7f7f7 center bottom; background-size: cover; }
            #mainlogo { position: absolute; top: 0px; left: 0px; width: 100%; background: #fff; text-align: center; padding: 10px 0 10px 20px; z-index: 9999; }
            #mainlogo img { width: 120px; display: block; }
            #logo { position: absolute; top: 0; left: 0; width: 100%; text-align: center; padding: 0 0 10px 0; z-index: 1000; }
            #logo img { width: 200px; margin: auto; display: block; }
#logo { position: absolute; top: -200px; left: 0; width: 100%; text-align: center; padding: 0 0 10px 0; z-index: 9999; }
#logo img { width: 200px; margin: auto; display: block; }




#explorebtn { position: absolute; bottom: -57px; left: 50%; width: 220px; text-align: center; padding: 0; z-index: 9999; background: #f85d13; margin-left: -110px; box-shadow: 0px 1px 7px #222; transition: all .57s ease; }
#explorebtn button { height: 100%; display: block; padding: 10px; margin: auto; width: 100%; border-top: 2px solid #fff !important; border-radius: 0 !important; }
.bye { bottom: -100px !important; }

#trainmenu { position: absolute; top: 25%; left: 0; width: 100%; text-align: center; padding: 10px 0; z-index: 100; opacity: 0; }
#trainmenu ul { margin: 0 auto; display: block; width: 647px; padding: 0 !important; }
#trainmenu ul li { list-style: none; float: left; }
#trainmenu img { height: 40px; width: auto; margin: auto; display: block; }


video { position: absolute; z-index: 1; top: 0; left: -10%; bottom: 0; right: 0; width: 120%; height: 110%; }
.firstcharacter {
  color: #f85d13;
  float: left;
  font-size: 75px;
    
  line-height: 60px;
  padding-top: 0;
  padding-right: 10px;
  padding-left: 0;
    font-style: italic;
    font-weight: bold; 
}

.theCube{
  margin: 0 auto;
  width: 200px;
  /** Prserve the 3D space for its child elements **/
  -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
  
  /** Let's transfom in a smooth way **/
	-webkit-transition: -webkit-transform 1s;
	transition: transform .3s; /* Animate the transform properties */
}
.topFlip, .bottomFlop{
  text-align: center;
  border-bottom: 2px solid #fff;
  -webkit-box-shadow: 0 0 3px #222;
          box-shadow: 0 0 3px #222;
  height: 70px;
    
  line-height: 70px;
  border-radius: 0px;
  background: #f85d13;
    padding: 10px 0;

}
.topFlip{
    -webkit-transform: translateZ(50px) translateY(20px);
            transform: translateZ(50px);
}
.bottomFlop{
 -webkit-transform: rotateX(-90deg) translateZ(-60px);
        transform: rotateX(-90deg)  translateZ(-60px);
    background: #fff;
}

.infobox { position: absolute; top: 34%; left: 50%; width: 500px; margin-left: -250px; color: #fff; }
.circle {
  background: #fff;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  transition: all .2s ease-in-out;
  margin: auto;
  position: relative;
 opacity: 0;
}

.square {
  border-radius: 10px;  
  cursor: pointer;
  width: 400px;
  min-height: 150px;
    
  padding: 20px 30px 0 30px;
    opacity: 1;
    display: block;
    /*box-shadow: 0px 1px 7px #222;*/
}

.infobox .text {
  color: #000;
  opacity: 0;

    transition: all .3s ease-in-out;
  font-size: 12px;
}
.infobox .cta { text-transform: uppercase; font-weight: bold; font-style: italic; display: none !important;}
.infobox h5 { text-transform: uppercase; font-weight: bold; font-style: italic; }
.square .text {
  opacity: 1;
    display: block;
}

.square:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
   
    border-top: solid 15px #fff;
    border-left: solid 15px transparent;
    border-right: solid 15px transparent;
}
/* infoboxes */
#locomotivebox { display: none; }
#railcarsbox { display: none; }
#tankbox { display: none; }
#gondolabox { display: none; }

#centerbeambox { display: none; }
#boxcarbox { display: none; }
#flatcarbox { display: none; }
#windbox { display: none; }
#autocarbox { display: none; }
#signalsbox { display: none !important; }


#locobox { display: none; }
#railcarsbox { display: none; }
#tankbox { display: none; }

.on { display: block !important; }

.off { display: none; }
.instructions { font-style: italic; font-weight: bold; text-transform: uppercase; font-size: 14px; margin-top: 10px; }
body { background: #fff !important; overflow-x: hidden !important; }

#thetrain { width: 15000px; position: absolute; bottom: 14px; right: -17000px; }
#thetrain a { float: left; }
#thetrain img { height: 352px; }

#bottomtracks { background: url(../images/bottomtracks.jpg) repeat-x; height: 28px; width: 100%; position: absolute; bottom: 0; z-index: 9999;} /* CHANGED By BNSF Web Publishing 6645 request Per Steve Manning  */

.underline { text-decoration: underline !important; font-weight: 900; color: #ff5100; }

.newbox { position: absolute; top: 30%; left: 50%; width: 800px; margin-left: -400px; color: #fff; }
.newbox .wordsholder { position: absolute; top: 0; left: 50%; width: 500px; z-index: 999; margin-left: -250px; }
.newbox .words { position: relative; }
.newbox .title { font-size: 77px; color: #000 !important; font-weight: bold; line-height: 67px; margin-bottom: 20px; text-align: center; }
.newbox .desc { font-size: 16px; color: #000; }
.newbox .vid { position: absolute; top: 0; right: 0; width: 67%; height: 0; overflow: hidden; bottom: 0; opacity: .4; z-index: 100; }



#posX { position: absolute; z-index: 999999; bottom: 0; right: 0; text-align: right; background: #fff; width: 100%; padding: 10px; color: #000; display: none;}
.icontrain { position: absolute; bottom: 300px; left:50%; margin-left: -50px; width: 150px; height: 150px !important; z-index: 99999; text-align: center; font-size: 13px; font-weight: bold; font-style: italic; }
.icontrain img { -webkit-transform: scaleX(-1); transform: scaleX(-1); width: 0; height: 0; transform-origin: center; display: block; margin: auto; }
.iconhovertrain { position: absolute; top: 100px; left:20%; margin-left: -50px; width: 150px; height: 150px !important; z-index: 99999; text-align: center; font-size: 13px; font-weight: bold; font-style: italic; }
.iconhovertrain img { -webkit-transform: scaleX(-1); transform: scaleX(-1); width: 0; height: 0; transform-origin: center; display: block; margin: auto; }
.instructtext { display: none; }

iframe { display: none; }
.train1desc { display: none; }
.train2desc { display: none; }
.enterbig { font-size: 17px !important; font-weight: bold;}
#angbox { display: none; }

#dragdesc { display: none; }
#dragdesc .vid { display: none !important; }
.flatb { margin-top: -142px; height: 482px !important }
 .instructionsm { display: none; }
    #portrait { display: none; }
.eotd {margin: 53px 0 0 -39px; height: 220px !important;}
     #infoboxmobile { display: none; }

/* mobile */
@media (max-width: 820px) {
         #infoboxmobile { display: block; text-align: center; width: 100%; top: 23%; left: 0%; position: absolute; font-weight: bold; font-style: italic; z-index: 100; }

    .readmore { display: none !important; }
    .eotd {margin: 11px 0 0 -25px; height: 142px !important;}

 #mainlogo { display: none !important; }  
 .titleholder { padding: 15px; height: 100vh; width: 200px; top: 0; }
 
 .firstcharacter { font-size: 55px; line-height: 47px; }
 #logo img { width: 140px; }
 .topFlip, .bottomFlop { height: 50px; }
 .theCube { width: 150px; }
 .enterbig { font-size: 14px !important; }
 .titleholder { overflow-y: scroll !important; }
 .titleholder:hover { width: 200px; padding: 10px !important; }
 .titleholder:hover p { font-weight: normal; font-size: 13px !important; }
 .titleholder:hover ul { font-size: 13px !important; }
 
 #thetrain img { height: 202px; }
 #thetrain { bottom: 17px; }
 #trainmenu ul { width: 610px; display: none; }
 #trainmenu img { height: 35px; }
 .instructions { font-size: 12px; display: none !important; }
 .instructionsm { font-style: italic; font-weight: bold; text-transform: uppercase; font-size: 12px; margin-top: 20px; display: block; }
 #railcarsbox, .wordsholder { display: none !important; height: 0 !important; }
 .flatb { margin-top: -48px; height: 240px !important }
 
 .flatb { height: 276px !important; margin-top: -83px; }
 .windmobile { height: 277px !important; margin-top: -71px !important; }
 .automobile { height: 297px !important; margin-top: -91px !important; }
 .coalmobile { margin-top: -5px !important; }
 #angbox { display: none !Important; } 
 #thetrain { right: -10700px; left: 67px;  bottom: 17px !important; }
 /* Line removed per Web Request 6645 .newbox { top: 100px; left: 0; width: 100%; margin-left: 0; height: 100px; text-align: center; }  */

    #trainmenu { display: none !important; }
    #portrait { position: fixed; z-index: 99999; top: 0; left: 0; bottom: 0; right: 0; display: block; background: url(../images/turnyourphone.jpg) center center; background-size: cover; }
    #portrait img { width: 100%; display: none; }
}

canvas { height: 550px !important; } 


@media(min-width: 667px) {
 #portrait { display: none; }
 #landscape { display: none; }
}