@font-face {
    font-family: 'OpenSansRegular';
    src: url("/Sandbox2/stylesheets/OpenSansRegular.ttf");
    src: url("/Sandbox2/stylesheets/OpenSansRegular.woff") format('woff'), url("/Sandbox2/stylesheets/OpenSansRegular.woff2") format('woff2'), url("/Sandbox2/stylesheets/OpenSansRegular.ttf") format('truetype');
    font-style: light;
}

@font-face {
    font-family: 'OpenSansSemibold';
    src: url("/Sandbox2/stylesheets/OpenSansSemibold.ttf");
    src: url("/Sandbox2/stylesheets/OpenSansSemibold.woff") format('woff'), url("/Sandbox2/stylesheets/OpenSansSemibold.woff2") format('woff2'), url("/Sandbox2/stylesheets/OpenSansSemibold.ttf") format('truetype');
    font-style: light;
}


body {
  margin: 0;
  font-family: 'OpenSansRegular';
  font-size: 24px; }

.container {
  position: relative;
  margin: 0 auto;
  max-width: 1440px;
 height: 40px;
  }

#logo {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  position: relative;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  top: 5px;
  left: 40px; 
  height: 40px;
}


#logoImg {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  background-image: url('/images/logo.png');
  height: 62px;
  width: 62px; }

#macm {
order: 2;
color: #fff;
width: 751px;
position: relative;
font-size: 21px;
font-family: OpenSansSemibold;
background-image: url(https://www.hcltech.com/sites/all/themes/hcl_tech_bootstrap/images/orange-new.png) !important;
background-size: 58px 35%;
background-position-x: 44px,0;
background-repeat: no-repeat;
border-radius: 6px !important;
background-position-y: 24px,0;
bottom: 6px;
}



.btn {
position: absolute;
right: 46px;
top: 10px;
border-radius: 2px;
color: #ffffff;
font-size: 16px;
background: #f58220;
padding: 0px 11px;
text-decoration: none;
cursor: pointer;
}


.btn:hover {
  background: #D19334;
  text-decoration: none; }

.closeButton {
  background: #24485E;
  padding: 10px 54px; }

.closeButton:hover {
  background: #73B5DE; }

.btn2 {
  position: relative;
  /* right: 40%; */
  top: 175px;
  border-radius: 2px;
  color: #ffffff;
  font-size: 20px;
  background: #f58220;
  padding: 10px 28px;
  text-decoration: none;
  cursor: pointer;
}
@media screen and (max-height: 414px) {
	.btn2 {
		top: 120px;
	}}
	@media screen and (max-height: 315px) {
	.btn2 {
		top: 80px;
	}}

.footerBtn {
	text-align: center;
	width: 85%;
	margin: 0 auto;
}

.btn2:hover {
  background: #D19334;
  text-decoration: none; }

.terminal {
  font-family: 'OpenSansRegular';
  position: absolute;
  z-index: 6;
  color: black;
  font-size: 72px;
  top: 160px;
  left: 150px;
  font-weight: 300;
  width: 338px; }
  @media screen and (max-width: 1280px) {
    .terminal {
      font-size: 62px;
      top: 240px;
      left: 75px; } }
  @media screen and (max-height: 700px) {
    .terminal {
      top: 350px;
      left: 0px;
      font-size: 55px; } }
  @media screen and (max-height: 650px) {
    .terminal {
      top: 400px;
      left: 45px;
      font-size: 50px; } }
/*      
#iphone {
  background-image: url('../images/back.png');
   background-repeat: no-repeat;

  height: 480px;
  width: 640px;
  position: absolute;
  left: 5px;
  top: -10px; }

  @media screen and (max-width: 1280px) {
    #iphone {
      background-image: url('../images/back.png');
      background-repeat: no-repeat;
      top: -10px; } }
  @media screen and (max-width: 1024px) {
    #iphone {
      background-image: url('../images/backsmall.png'); 
      top: 10px; }} 
*/
/*
.phone-rel {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1; }
  @media screen and (max-width: 1024px) {
    .phone-rel {
      left: -110px; } }
*/
.iphone {
  width: 551px;
  background-image: url('../images/back.png');
  background-repeat: no-repeat;
  position: absolute;
  top: 38%;
  left: 200px;
  /*right: 0;*/
  height: 322px;
  z-index: 2;
  }
  @media screen and (max-width: 1280px) {
    .iphone {
      left: 18px;
      /*background-image: url('../images/back.png');
	  background-repeat: no-repeat;*/
   } }
  @media screen and (max-width: 1080px) {
    .iphone {
	  height: 187px;
  	  top: 45%;
	  left: 29px;
	  background-image: url('../images/backsmall.png');
	  background-repeat: no-repeat;
	  }}
   @media screen and (max-width: 767px) {
    .iphone { 
	  background-image: none;  
	  display:none;
   }}
   /*
  @media screen and (max-height: 700px) {
    .iphone {
	  height: 187px;
	  background-image: url('../images/backsmall.png');
	  background-repeat: no-repeat;
       } }
  @media screen and (max-height: 650px) {
    .iphone {
	  height: 187px;
	  background-image: url('../images/backsmall.png');
	  background-repeat: no-repeat;
      } }
      */

.screen-frame {
  height: 228px;
  width: 429px;
  overflow: hidden;
  position: absolute;
  top: 331px;
  left: 36px;
  z-index: 3;
  background: none; }
  @media screen and (max-width: 1280px) {
    .screen-frame {
      height: 516px;
      width: 357px;
      top: 210px;
      left: 56px; } }
  @media screen and (max-height: 700px) {
    .screen-frame {
      height: 444px;
      top: 272px;
      left: 75px;
      width: 321px; } }
  @media screen and (max-height: 650px) {
    .screen-frame {
      height: 228px;
      width: 429px;
      top: 400px;
      left: -98px; } }

.pic_placement {
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease; }

#topBar {
  position: fixed;
  width: 100%;
  height: 40px;
  top: 0;
    background-color: #333;
    z-index: 2;
    border-bottom: #f58220;
    border-width: 1px;
    border-bottom-style: solid;
}

#menu {
  position: absolute;
  top: 116px;
  width: 100%;
  height: 310px;
  background-color: #3D7292;
  z-index: 2;
  display: none; }

#menucontainer {
  position: relative;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 170px;
  width: 80%;
  height: 350px; }

#menuMacbook {
  background-image: url('../../images/bm_laptop_large.png');
  width: 460px;
  height: 264px;
  background-repeat: no-repeat;
  left: -60px; }
  @media screen and (max-width: 1200px) {
    #menuMacbook {
      background-image: url('../../images/bm_laptop_small.png');
      background-repeat: no-repeat;
      height: 201px;
      width: 400px;
      margin-left: -90px; } }

.menubtn {
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 60px;
  border: solid #fff 2px;
  text-decoration: none;
  width: 110px; }

.menubtn:hover {
  background: #fff;
  color: #3D7292;
  text-decoration: none; }

#menuContent {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
  color: #fff;
  margin-top: -29px;
  margin-left: 30px;
  margin-bottom: 20px;
  width: 490px; }

.panel {
  position: relative;
  width: 100%;
  height: 1000px; }

#one {
  background-image: url("photo_p1@2x.jpg");
  background-position: 25% 25%; }
  #one h1 {
    font-size: 42px;
    font-weight: bold;
    top: 30px; 
     margin-bottom: 50px;}

    @media screen and (max-width: 1280px) {
      #one h1 {
        font-size: 42px; } }
    @media screen and (max-height: 414px), screen and (max-width: 414px) {
      #one h1 {
        font-size: 30px; } }
  #one h4 {
    font-size: 30px; }
    
.downArrowContainer {
	position: absolute;
	text-align:center;
	bottom: 17px;
	width: 100%;
}
.downArrow {
	position: relative;
	display: inline-block;
	cursor: pointer;
	background-image: url("downArrowWhite.png");
	width: 44px;
	height: 27px;
}
#five .downArrow {
	background-image: url("downArrowBlue.png"); 
	width: 42px;
	height: 26px;
	
}


.sectionLeft {
   position: relative;
  top: -100px;
  color: white;
  width: 403px;
  left: 60%;
  }
  .sectionLeft h1 {
    line-height: 1; }
  .sectionLeft p {
    position: relative;
    bottom: 32px; }
  @media screen and (max-width: 1080px) {
    .sectionLeft {
      left: 49%;
      width: 293px;
      } }
 @media screen and (max-width: 767px) {
    .sectionLeft {
      left:28%;
      } }
      @media screen and (max-height: 414px) {
    .sectionLeft {
      left: 21%;
      width: 358px;
      } }
      @media screen and (max-width: 414px) {
    .sectionLeft {
      left: 8%;
      width: 280px;
      } }
    
#two {
  background-image: url("photo_p2@2x.jpg");
  background-position: center; }
  #two h1 {
    font-size: 42px;
    font-weight: bold; 
     top: 30px; 
   margin-bottom: 50px;}
    @media screen and (max-width: 1280px) {
      #two h1 {
        font-size: 42px; } }
 @media screen and (max-height: 414px), screen and (max-width: 414px) {
      #two h1 {
        font-size: 30px; } }

#three {
  background-image: url("photo_p3@2x.jpg");
 background-size: 105%;
  }
  #three h1 {
    font-size: 42px;
    font-weight: bold;

     top: 30px; 
   margin-bottom: 50px;}
    @media screen and (max-width: 1280px) {
      #three h1 {
        font-size: 50px; } }
@media screen and (max-height: 414px), screen and (max-width: 414px) {
      #three h1 {
        font-size: 30px;} }

#four {
  background-color: white; }
  #four h1 {
    color: #424143;
    top: 100px;
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 20px;
    width: 85%;
    text-align: center;
    max-width: 900px;
    }
    @media screen and (max-width: 1280px) {
      #four h1 {
        font-size: 30px; } }
       @media screen and (max-height: 315px) {
      #four h1 {
        top: 42px; } }

    @media screen and (max-height: 414px), screen and (max-width: 414px) {
      #four h1 {
        font-size: 30px; } }
  #four p {
    color: #626566; }
       @media screen and (max-height: 315px) {
      #four p {
        top: 54px;
        } }

.phonepic {
  display: none;
  top: -54px;
  width: 500px;
  height: 620px;
  position: absolute;
  left: 130px; }
  @media screen and (max-width: 1280px) {
    .phonepic {
      top: -40px;
      width: 300px;
      height: 500px; } }



.moveLeft {
  -webkit-transform: translateX(300px);
  transform: translateX(300px); }

.moveRight {
  -webkit-transform: translateX(-300px);
  transform: translateX(-300px); }

#five {
  background-color: #d1d2d4; }
  #five h1 {
    color: #424143;
    font-size: 42px;
    font-weight: bold;
    padding-bottom: 20px;
    width: 415px;
    }
    @media screen and (max-width: 767px) {
    	#five h1 {
    		width: auto;
    	}}
   @media screen and (max-height: 414px), screen and (max-width: 414px) {
    	#five h1 {
    		font-size: 30px;
    	}}
  #five p {
    color: #676B6E; }
  #five .sectionLeft {
    bottom: 30px; }

#imac {
   background-image: url('FEBiphone.png');
   background-repeat: no-repeat;

  height: 480px;
  width: 640px;
  position: absolute;
  left: 5px;
  top: -150px; }

  @media screen and (max-width: 1280px) {
    #imac {
      background-image: url('FEBiphone.png');
      background-repeat: no-repeat;
      top: -10px; } }
  @media screen and (max-width: 1075px) {
    #imac {
      background-image: url('FEBiphonesmall.png'); 
      top: 10px; }} 
       @media screen and (max-width: 767px) {
    #imac {
      background-image: none; 
      display : none}} 

#footer {
  position: relative;
  bottom: 40px;
  height: 94px !important;
  width: 100%;
  background-color: #3D7292; }

#footerContainer {
  position: relative;
  margin: 0 auto;
  /* width: 1000px; */
  height: 600px;
  /* top: 30px; */
  /* left: -40px; */
  }
  
  @media screen and (max-width: 768px) {
    #footerContainer {
      /* left: -135px; */
      }} 

.footerContent {
  font-family: "OpenSansRegular";
  color: #FFF;
  font-size: 48px;
  position: relative;
  /* right: -120px; */
  top: 20px;
  margin: 0 auto;
  }

.footerP {
  position: relative;
  color: #FFF;
  top: 127px;
  /* left: 224px; */
  margin: 0 auto;
  text-align: center;
  width: 85%;
  }
  @media screen and (max-width: 1280px) {
    .footerP {
      /* left: 313px; */
      } }

#fp-nav .right {
  right: 17px; }
#fp-nav ul li {
  display: block;
  width: 14px;
  height: 13px;
  margin: 17px 6px;
  position: relative; }