/****** CSS Reset *********/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, h7, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/****** CSS Reset End *********/

/********************* Interent Font *******************/

@font-face {
	font-family: 'Museo-Slab-900';
	src: url('../fonts/Museo_Slab_900.otf');
	font-display: swap;
}

@font-face {
	font-family: 'Museo-Slab-100';
	src: url('../fonts/Museo_Slab_100.otf');
	font-display: swap;
}

@font-face {
	font-family: 'Figtree-Regular';
	src: url('../fonts/Figtree-Regular.otf');
	font-display: swap;
}

@font-face {
	font-family: 'Figtree-Light';
	src: url('../fonts/Figtree-Light.otf');
	font-display: swap;
}

@font-face {
	font-family: 'Figtree-Medium';
	src: url('../fonts/Figtree-Medium.otf');
	font-display: swap;
}

@font-face {
	font-family: 'Figtree-Bold';
	src: url('../fonts/Figtree-Bold.otf');
	font-display: swap;
}

@font-face{
	font-family:'Figtree-ExtraBold';
	src:url('../fonts/Figtree-ExtraBold.otf');
	font-display: swap;
}


/********************* Internet Font End *******************/

body { 
	color: #545861;
	font-family: 'Figtree-Regular', helvetica, arial, sans-serif;
}

h1,
.subhead  {
	font-family: 'Museo-Slab-900', helvetica, arial, sans-serif;
	font-weight: 700;
}
h7,
.subhead {
	font-family: 'Museo-Slab-900', helvetica, arial, sans-serif;
	font-weight: 700;
}

.subhead { 
	font-size:14px;
	text-transform: uppercase; 
}

.cyan { color: #23abd7;}

.big {
	font-family: 'Museo-Slab-100', helvetica, arial, sans-serif;
	font-weight: 100;
}

header {
	background-color: rgba(0,0,0,.8);
	width: 100%;
	height: 85px;
}

header .container { padding-top: 20px; }

p span.cyan { font-weight: 600; }

.block { display: block; }

.container { 
	margin: 0 auto; 
	position: relative; 
}

.logo {
	background:url('../img/logo.png') no-repeat;
	width: 80px;
	height: 40px;
}

.hero {
	background: url(../img/ngh_header_backgroundimage.jpg);
	background-size: cover;
	float: left;
	width: 100%;
}

section { clear:both; }

section img {
	position: relative;
	bottom: 0;
}

section.hero {
	-webkit-box-shadow: inset 0px 5px 5px -3px rgba(0,0,0,0.2), inset 0px -5px 5px -3px rgba(0,0,0,0.2);
	box-shadow: inset 0px 5px 5px -3px rgba(0,0,0,0.2), inset 0px -5px 5px -3px rgba(0,0,0,0.2);
}

.whitebar { 
	width: 100%; 
	background: rgba(255,255,255,.8);
	position: relative;
}

.betaBar {
	background-color: #23abd7;
	color: #fff;
	transform:rotate(45deg);
	-ms-transform:rotate(45deg); /* IE 9 */
	-webkit-transform:rotate(45deg); /* Safari and Chrome */
	text-transform: uppercase;
	text-align: center;
	font-family: 'Figtree-Regular', helvetica, arial, sans-serif;
	position: absolute;
	z-index: 1;
}

.betaBar:after,
.betaBar:before {
	content: "";
	display: block;
	position: absolute;
}

.redButton {
	-moz-text-shadow: 0 -1px 1px rgba(0,0,0,.5);
	-webkit-text-shadow: 0 -1px 1px rgba(0,0,0,.5); 
	text-shadow: 0 -1px 1px rgba(0,0,0,.5);
	
	background: #e13827; /* Old browsers */
	background: -moz-linear-gradient(top,  #e13827 0%, #c61d15 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e13827), color-stop(100%,#c61d15)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e13827 0%,#c61d15 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e13827 0%,#c61d15 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e13827 0%,#c61d15 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #e13827 0%,#c61d15 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e13827', endColorstr='#c61d15',GradientType=0 ); /* IE6-8 */

	border-radius: .25em;
	text-decoration: none;
}

.redButton:hover { background: #ca2c25; }

.redButton span {
		color: #fff;
		width: 100%;
		text-align: center;
		font-weight: 700;
	}

.redbar { border-left: solid 5px #D52B1E; }

.hero img { position:absolute; }

.one p,
.three p
 { float: right; }
.two p { float: left; }

.three .big.cyan {
    float: left;
}

#cta { border-bottom: none; }
#intro {border-bottom: none; }

h2.intro {
	font-family: 'Museo-Slab-900';
	font-weight: 700;
}
 
 h4.endText{
   padding-bottom: 10px;
 }

/*-------------------------------------------Per screen size configurations -----------------*/
/*---------------------min-width: 1025px -------------------------------------------------*/
@media screen and (min-width: 1025px) {

	.big { font-size: 272px; }

	h1 { font-size: 47px; }
    h7 { font-size: 32px; }

	p { font-size:20px; }

	.hero .subhead { 
		font-size: 16px; 
		margin-bottom: 10px;
		padding-top: 55px;
	}

	.hero h1 { margin-bottom: 25px }
    .hero h7 { margin-bottom: 25px }
	
	.container { width: 940px; }

	.hero { height: 510px; }

	.whitebar { 
		height: 360px; 
		margin-top: 90px;
		box-sizing: border-box;
	}

	.betaBar {
		width: 330px;
		height: 30px;
		padding-top: 10px;
		right: -35px;
		top: 21px;
	}

	.betaBar span { 
		margin-top: 10px;
		font-size: 18px;
		font-weight: 900;
	}

	.redButton {
		width: 355px;
		height: 40px;
	}

	.redButton span { 
        padding-top: 12px;
        margin-top: 10px;


     }
	
	.hero img {
		right: -135px;
        bottom: -130px;
	}

	section p { line-height: 35px; }

	.one .container { 
		padding-top: 60px; 
	}

	span.big.cyan { 
			padding-right: 10px;
		      }

        .one .big.cyan {
                float: left;
                padding-bottom: 70px;
        }

	.one .container p { 
		width: 460px; 
		padding-top: 70px;
	}

	.two .container p {
		width: 400px;
		padding: 120px 20px 0 0 ;
	}

	.two .big.cyan {
		/*float: left;*/
		padding-top: 40px;
	}

	.two img { right: 0; }

	.three .container { height: 315px; } 

	.three .container p { 
		width: 400px;
		padding-top: 130px;
	}
	            
	.cta { 
		height: 185px; 
		border: none;
		padding-top: 30px;
	}

	.cta a.redButton { 
        
        /*if want to do it manually instead of auto*/
       /* margin: 30px 50px 30px 700px ;*/
        margin: auto; 
        border-bottom: 50px;

     }
     
      h4.endText{
        position:  relative;
        left: 26% ;
        top : 35px;
        font-size: 150%;
        text-align: center;
        width: 1000px;
        line-height: 30px;
        margin: auto auto 40px auto;
    }
    
    /*image position fix to touch the bottom border of eacah section */
    .one img {
        position: relative;
        bottom: -4px;
    }
    #securityCert{
        position: relative;
        bottom: -44px;
    }
    img.welcome{
        position: relative;
        bottom: -20px;
    }
    
         h2.intro {
        position: relative;
        left: 0%;
        line-height: 36px;
        top: 8px;
        width: 100%;
        font-size: 2.1em;
    }
    
}/*-----end min-width: 1025px (big screens) -----------------*/

/* ------------------------ (min-width: 768px) and (max-width: 1024px)-------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {

	.container { width: 724px; }

	h1 { font-size: 36px; }

    h7 {font-size: 28px;}

	p { 
		font-size: 18px; 
		line-height: 24px;
	}

	.big { font-size: 220px; }

	.hero {     height: 386px; }

	.redButton {
		width: 300px;
        height: 50px;
	}
    
    /*affects all buttons */
	.redButton span { 
        font-size: 16px;
        padding-top: 16px;
        margin-top: -29px;
        
	}
    /*affects only bottom button buttos */
    #bottomBtn{
       margin-top: 0px;
    }

	.whitebar { 
		margin-top: 40px;
        height: 305px;
	}

	.hero .container { height:100%; }

	.hero h1 { width: 60%;
        line-height: 40px;
     }
    .hero h7 { width: 60%;
        line-height: 40px;
     }
	.hero .subhead { padding: 35px 0 10px; }

	.hero img {
		right: -15px;
		bottom: -41px;
		width: 350px;
		height: 390px;
	}

	.hero a.redButton {    margin-top: 39px; }

	.betaBar {
		width: 180px;
		height: 30px;
		padding-top: 10px;
		right: -8px;
		top: 17px;
	}

	.betaBar span { 
		font-size: 18px;
		font-weight: 900;
	}

	.one .container { 
		height: 100%; 
		padding-top: 50px; }


	.one img {
		width: 335px;
		height: 225px;
		margin-left: 15px;
	}

	.one h1 { padding-bottom: 60px; }

    .one h7 { padding-bottom: 60px; }

	.one p { 
		width: 255px;
		padding-top: 35px;
	}

        .one .big.cyan {
		float: left;
                padding-top: 20px;
        }

	.two .container { 
		height: 250px;
		padding-top: 25px; 
	}

	.two img {
		width: 245px;
		height: 220px;
		right: 0;
	}
    
    #securityCert{
        position: relative;
        bottom: -29px; 
    }

	.two p {
		width: 225px;
		padding: 60px 25px 0 0;
	}

	.three .container { 
		height: 207px;
		padding-top: 65px; }

	.three img {
		width: 228px;
		height: 205px;
		margin-left: 65px;
	}

	.three p {
		width: 215px;
		padding-top: 40px;
	}


	.cta { height: 100px; }

	.cta a.redButton { 	margin: 40px auto 0; }
    
     h2.intro {
        font-size: 1.8em;
    }

    h4.endText{
        position:  relative;
        left: 26% ;
        top : 35px;
        font-size: 150%;
        width: 1000px;
        line-height: 30px;
        text-align: center;
        margin: auto auto 40px auto;
    }
    
    
    
}  /* ------------------------ End (min-width: 768px) and (max-width: 1024px)-------------------------- */



@media screen and (min-width: 768px) {

	.mobile {display: none;}
    
    
	section { border-bottom: solid 1px #dddedf; }

    
	.betaBar:after {
		content: "";
		display: block;
		position: absolute;
		width: 40px;
		border-left: solid 40px #23ABD7;
		border-top: solid 41px transparent;
		top: -1px;
		right: -79px;
	}

	.betaBar:before {
		content: "";
		display: block;
		position: absolute;
		width: 40px;
		border-right: solid 40px #23ABD7;
		border-top: solid 41px transparent;
		top: -1px;
		left: -79px;
	}

    h4.endText{
        position: relative;
        top: 35px;
        font-size: 16px;
        text-align: center;
        width: 70%;
        left: 0%;
        margin: auto auto 40px auto;
        line-height: 25px;
        
    }
    
}

/*------------------------ settings for phones--------------------*/

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

	.hero img{
		display:none;
	}

	.laptop {display: none;}
	
	section .container { border-bottom: solid 1px #dddedf; }

	.hero .container { border: none;}

	.container { 
		position: relative;
		width: 280px; 
		z-index: 1;
	}

	h1 { font-size: 26px; }

	.hero h1 { font-size: 28px; }

    h7 { font-size: 26px; }

    .hero h7 { font-size: 28px; }

	p { 
		font-size: 16px; 
		line-height: 23px;
		width: 280px;
	}

	.big { font-size: 148px; }

	.hero { 
        height: 280px;
        position: relative;
	}

	.redButton {
		width: 280px;
		height: 40px;
	}
		

	.redButton span { 
        font-size: 15px;
        padding-top: 13px;
        margin-top: -11px;
	}

	.whitebar { 
	    margin-top: 20px;
        height: 228px;
	}

	.hero .container { height:100%; }

	.hero .subhead { padding: 26px 0 10px; }

	.mobileContainer {
		width:280px;
		margin: auto;
		position: relative;
		z-index: 0;
	}
    
  	.hero img {
		width: 257px;
        height: 179px;
        margin: auto;
        top: 378px;
	}
      /* To fix an issue with firefox on mobile with the hand img (.hero img)*/
    @-moz-document url-prefix() {
        .hero img {
            top: 35px;
        }
    }

	.hero a.redButton { margin-top: 20px; }

	.betaBar {
		width: 156px;
		height: 22px;
		padding-top: 10px;
		right: -8px;
		top: 30px;
	}

	.betaBar:after {
		width: 32px;
		border-left: solid 32px #23ABD7;
		border-top: solid 33px transparent;
		top: -1px;
		right: -63px;
	}

	.betaBar:before {
		width: 32px;
		border-right: solid 32px #23ABD7;
		border-top: solid 33px transparent;
		top: -1px;
		left: -63px;
	}

	.betaBar span { 
		font-size: 14px;
		font-weight: 900;
	}

	.one .container { 
		padding-top: 35px; 
     }


	.one img {
		width: 200px;
		height: 120px;
		right: 8px;
	}

	.one .big.cyan { 
		padding-left: 5px;
        position: relative;
        bottom: -14px;
	}

	.one h1 { padding-bottom: 40px; }
    .one h7 { padding-bottom: 40px; }

	.one p { margin-top: -10px; }

	.two .container { 
        height: 250px;
        padding-top: 15px;
	}

	.two img {
		width: 160px;
		height: 150px;
		left: 0;
	}

	.two .big.cyan{ 
		float: right;
		margin: 40px 0 10px;
	}

	.three .container { height: 243px; }

	.three .big.cyan {
	  display: block;
      padding-top: 35px;
	}

	.three img {
	    width: 163px;
        height: 143px;
        right: -40%;
	}

	.cta  {
		padding-top: 25px;
		margin: 0 auto 20px;
		width: 280px;
	}
    
    h2.intro {
        position: relative;
        font-size: 1.2em;
        line-height: 23px;
        width: 100%;
    }

    h4.endText{
        position: relative;
        top: 20px;
        font-size: 71%;
        width: 100%;
        line-height: 125%;
        text-align: center;
        margin: auto auto 25px auto;
    }
    
    header {
        background-color: rgba(0,0,0,.8);
        width: 100%;
        height: 65px;
    
    }    
    header .container { padding-top: 14px; }
    
    .one img{
          position: relative;
        bottom: -23px;
    }
    
    #securityCert{
        position: relative;
        bottom: -30px;
    }
     img.welcome{
        position: relative;
        bottom: -30px;
        right: -47px;
    }
    
   
    
}