body.val{font-size:18px; font-family: 'GothamBlack';}
.val h1{  font-family: 'GothamBlack'; text-transform:uppercase;}
.val h2{   font-family: 'GothamBold';}

/* banner start */
.val section.banner{height:100%; background:url(../portfolio/voice-alarm-branding/images/main-bg.png) no-repeat; background-size:cover; background-attachment:fixed; background-position:center;}
/* banner end */



/* about-us start */
.val section.about-us{ padding-top:45px; padding-bottom:35px; background-color:#bf1e2e; overflow:hidden;}
.val section.about-us h1{margin-top:40px; font-size:54px; color:#fcb040; line-height:1.1;}
.val section.about-us h2{margin-top:15px; font-size:43px; color:#fff; line-height:1.1; margin-bottom:0;}
.val section.about-us .absout-image{display:inline-block; width:100%; position:relative; left:68%;}
.val section.about-us .absout-image img{display:inline-block; }
/* about-us end */


/*assets start */
.val section.assets{width:100%; padding-top:90px;}
.val section.assets .top{display:block;} 
.val section.assets .bottom{display:block;  margin-top:265px;}
.val section.assets .bottom ul.assets-bar{margin:0 auto; padding:0; display:table; margin-bottom:100px;}
.val section.assets .bottom ul.assets-bar li{display:table-cell; list-style:none; vertical-align:middle; padding:0 35px;}
.val section.assets .bottom ul.assets-bar li .image-assets{display:block; text-align:center; height:120px;}
.val section.assets .bottom ul.assets-bar li .plus{display:block; text-align:center; margin-top:25px;}
.val section.assets .bottom ul.assets-bar li .name-assets{ display:block; text-align:center; font-size:20px; color:#fcb040;     font-family: 'GothamMedium'; text-transform:uppercase;}
.val section.assets .bottom ul.assets-bar li:nth-child(even){vertical-align:top;}
/*assets end */


/* logo section start */
.val section.logo-sec{width:100%;}
.val section.logo-sec #parallax {background:url(../portfolio/voice-alarm-branding/images/backgroung.jpg) no-repeat; background-size:cover; background-attachment:fixed; height:600px; margin:auto; margin-top:2em; position:relative; width: 100%;}
.val section.logo-sec #parallax img {position:absolute; top:0; left:0;}
.val section.logo-sec .logo-color{width:100%; }
.val section.logo-sec .logo-color .inner{width:100%;display:inline-block;}
.val section.logo-sec .logo-color .inner img{margin-top:-125px;}
.val section.logo-sec .logo-bar{display:inline-block; width:100%; padding-top:90px;}
.val section.logo-sec .logo-bar ul.logos{display:block; margin:0; padding:0; margin-top:135px; margin-bottom:50px;}
.val section.logo-sec .logo-bar ul.logos li{display:inline-block; list-style:none; padding:0 74px 50px 74px; }
.val section.logo-sec .logo-golden-ratio { padding-top:60px; padding-bottom:55px; background-color:#fcb040;}
.val section.logo-sec .logo-golden-ratio img{ max-width:100%;}
/* logo section end */


/* typography start */
.val section.typography{padding:100px 0; position:relative;}
.val section.typography:before{content:"";position:absolute; border-right:2px solid #d6d6d6; left:50%; top:100px; bottom:100px;}
.val section.typography h1{margin-top:55px;}
.val section.typography ul.font{margin-top:80px; float:left; display:table; padding:0;}
.val section.typography ul.font li{display:table-cell; list-style:none; color:#727272;}
.val section.typography ul.font li:nth-child(2){padding-left:25px;}
.val section.typography ul.font li h2{font-size:132px; margin:0;}
.val section.typography ul.font li h4{font-size:25px; margin:0; font-family: 'GothamBold'; text-transform:uppercase;}
.val section.typography ul.colorcd{padding:0; margin-top:92px;}
.val section.typography ul.colorcd li{display:inline-block; margin:0 50px;}
.val section.typography ul.colorcd li .color{height:88px; width:88px; background-color:transparent; display:block; border-radius:50%;}
.val section.typography ul.colorcd li .code{color:#727272; font-size:15px;   font-family: 'GothamMedium'; margin-top:18px; display:block;}
.val section.typography ul.colorcd li:nth-child(1) .color{background-color:#fcb040;}
.val section.typography ul.colorcd li:nth-child(2) .color{background-color:#bf1e2e;}
/* typography end */

 /* card start */
.val section.card{width:100%;}
.val section.card .card-image{ float:left;width:100%;}
.val section.card .card-image img{width:100%;}
.val section.card .card-print{float:left;width:100%;}
.val section.card .card-print img{width:100%;}
 /* card end */
 
 
	/* usaes start */
.val section.uses{width:100%; }
.val section.uses .watch{ width:100%; padding:100px 0;}
.val section.uses .app{ width:100%; padding:100px 0;}
.val section.uses .uses-in .dtsell:nth-child(1){ background-color:#fcb040;}
.val section.uses .uses-in .dtsell:nth-child(2){background-color:#bf1e2e;}
.val section.uses .uses-in .dtsell img{display:inline-block; max-width:100%;}
	/* usaes and */
 
/* footer css start */
.val footer.voafooter{height:100%;background:url(../portfolio/voice-alarm-branding/images/footer.jpg) no-repeat; background-size:cover; background-attachment:fixed; background-position:center;}
/* footer css end */
 
 
 
 
 
 
 
 
 
   /* media quaries start */

@media(min-width:768px){
.val .no-padding{padding:0;}
.val section.uses .uses-in{width:100%; display:table; float:none;}
.val .dtsell{display:table-cell; float:none;}

}

@media(max-width:1199px){
.val section.assets .bottom ul.assets-bar li{padding:0 20px;}
.val section.logo-sec .logo-bar ul.logos li{padding:0 40px 50px 40px;}
.val section.about-us h1{font-size:45px;}
.val section.about-us h2{font-size:36px;}
.val section.assets .bottom{margin-top:180px;}
.val section.typography ul.font{margin-top:50px;}
.val section.typography ul.colorcd{margin-top:65px;}
.val section.typography ul.colorcd li{margin:0 35px;}
}   
 
@media(max-width:991px){
.val section.assets .bottom ul.assets-bar li{padding:0 10px;}
.val section.logo-sec .logo-bar ul.logos li{padding:0 20px 50px 20px;}
.val section.about-us h1{font-size:32px;}
.val section.about-us h2{font-size:28px;}
.val section.typography ul.font li h2{font-size:90px;}
.val section.typography ul.font li h4{font-size:22px;}
.val section.about-us .absout-image{left:46%;}
}
 
@media(max-width:767px){
.val section.about-us .absout-image{left:0; text-align:center; margin-top:50px;}
.val section.about-us .absout-image img{width:60%;}
.val section.assets .bottom{margin-top:115px;}
.val section.assets .bottom ul.assets-bar{margin-bottom:60px;}
.val section.logo-sec .logo-bar{padding-top:70px;}
.val section.logo-sec .logo-bar ul.logos{margin-top:90px;}
.val section.typography{padding-top:40px ;}
.val section.typography .col-xs-12:nth-child(2) h1{margin-top:0;}
.val section.typography ul.font{margin-top:20px; float:none; margin-left:auto; margin-right:auto;}
.val section.typography:before{    border-top: 2px solid #d6d6d6; top:45%; left:5%; right:5%; border-right:0; bottom:inherit;}
.val section.typography h1{margin-top:55px;}
.val section.typography ul.colorcd{margin-top:45px;}
.val section.typography ul.font{margin-bottom:90px; margin-top:15px;}
.val section.logo-sec .logo-bar ul.logos li{padding:0 10px 50px 10px;}
.val section.assets .bottom ul.assets-bar li{width:100%; float:left;}
.val section.assets .bottom ul.assets-bar li .image-assets{height:100px;}
.val section.assets .bottom ul.assets-bar li + li{padding-top:40px;}
.val section.assets .bottom ul.assets-bar li .plus{margin-top:0;}


}
@media(max-width:480px){
.val section.logo-sec .logo-bar ul.logos{float:left; margin-top:75px;}
.val section.logo-sec .logo-bar ul.logos li{width:100%; float:left; padding:0;}
.val section.logo-sec .logo-bar ul.logos li + li{margin-top:40px;}
.val section.typography h1{ margin-top:40px;}
.val section.typography ul.font li h2{font-size:68px;}
.val section.typography{padding-bottom:40px;}
.val section.logo-sec .logo-golden-ratio img{max-width:70%;}
.val section.logo-sec #parallax{height:400px;}
.val section.typography ul.colorcd{margin-top:35px;}
.val section.uses .watch, section.uses .app{padding:40px 0;}
.val section.typography ul.font li:nth-child(2){padding-left:10px;}
.val section.typography ul.colorcd li{margin:0 10px;}
.val section.uses .uses-in .dtsell img{max-width:60%;}

}