@import url("/pages/commercial/it/assets/css/font-awesome.min.css");
/* common */
*{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
h1,h2,h3,h4,p,span,.button,a{
    font-family: 'Open Sans', sans-serif;
}
#page-wrapper{
    background-color: #f7f7f7;
}
html, body {height:100%; width:100%; margin:0}
#page-wrapper{
    width: 100%;
}
#header{
    height: 660px;
    background: url("/pages/commercial/it/images/philly.jpg");
    background-size: cover;
    
    color: #ffffff;
}
header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width:100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
#header header h1{
    margin: 25px 100px;
}
#header header h2{
    margin: auto;
    font-size: 2em;
}
#hamburger div {
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 6px 0;
}
nav a{
    margin: 0 15px 0 0;
    font-size: 1.2em;
    font-weight: 500;
    color: white;
    text-decoration: none;
}
#nav-wrapper a:hover{
    color: #C4C4C4;
}

/* 2k pixels to move nav back and forth */
#call-out{
    position: absolute;
    margin: auto;
    min-width: 380px;
}
#call-out h2{
    text-align: center
}

#products-services{
    max-width: 1500px;
    margin: auto;
}
/* fancy line for products and services */
#products-services > header{
    border-top: solid 1px #ccc;
    height: auto;
    margin: 100px 0 50px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

#products-services > header > h2{
    margin-top: -25px;
    padding: 5px;
    background-color: #f7f7f7;
}

#products-services .container{
    display: -ms-grid;
    display: grid;
}
section.grid-item{
    font-size: 150%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    background-color: #ffffff;
    border-bottom: solid 1px #ccc;
    text-align: center;
}
section.grid-item img{
    width: 100%;
}
section.grid-item h3,p{
    padding: 0 15px;
}
.grid-item header{
    min-height: 50px;
    width: 100%;
    margin: 10px 0;
    
}
.grid-item header h3{
    width: 100%;
    margin: 0;
}
.caption{
    font-size: 16px;
    line-height: 2em;
    -ms-flex-item-align: start;
        align-self: flex-start
}
.grid-item div{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
/**** footer ****/
#footer{
    background-color: #252122;
    color: white;
    margin-top:100px;
}
#footer .container{
    padding-top: 25px;
}
#itc-story{
    margin: auto;
    margin-top: 0;
}
#nasc-logo{
    width: 100%;
}
#nasc-logo img{
    max-width: 300px;
}
#itc-story p{
    /*duplicate style set */
    font-size: 15px;
    padding: 0;
    font-weight: 500;
    color:#858484;
}
#copy-right{
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-column-span: 2;
    grid-column-end: 3;
    text-align: center;
}
#social-links li{
    height: 60px;
    width: 60px;
    padding:5px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 5px;
}
#social-links li i{
    color:white;
    width: 100%;
    text-align: center;
}
#facebook{
    background-color: #3c5a98;
}
#twitter{
    background-color: #2daae4
}
#linkedin{
    background-color: #006599;
}
#contact{
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
#contact header h2{
   width:100%;
    text-align: center;
}
#contact-info li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-bottom: solid 1px white;
}
#contact-info h3{
    min-width: 75px;
    text-align: right;
    margin-right: 15px;
}
.button{
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    border-radius: 5px;
    color: white;
    outline: 0;
    font-size: 1em;
    padding: 1em;
    text-align: center;
    background-color: #9C2D27;
}

.grid-item .button{
    padding: .25em;
    margin: 10px;
}
#footer .button{
    padding: 1em;
}

#copy-right{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
#copy-right ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color:#302C2D;
    list-style: none;
    margin: 100px 0 0 0;
    padding: 15px;
    border-radius: 5px;
}

#copy-right ul li{
    font-size: 18px;
    color: #858484;
    padding: 0 15px;
}
/ Media Queries /

/*
    header 
*/
@media all and (max-width:599px){
        header{
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
       #header header h1{
            margin: 0;
        }
    nav{
        position: absolute;
        margin-left: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        left: 0;
        top:0;
        margin: 10px;
    }
    #nav-wrapper{
        position: absolute;
        width: calc(75vw);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        background-color: black;
        top: 0;
        margin-top: 40px;
        z-index: 99;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        padding:15px;
        -webkit-transition: margin-left .2s ease;
        -o-transition: margin-left .2s ease;
        transition: margin-left .2s ease;
    }
    nav[data-mobile-active="true"] #nav-wrapper{
    margin-left: -15px;
        border: solid 5px;
        border-color: rgba(255,255,255,.5);
}
    nav[data-mobile-active="false"] #nav-wrapper{
        margin-left: -2000px;
    }
#nav-wrapper a{
    display: block;
    width:100%;
    border-bottom: solid 1px #9C2D27;
    font-size: 22px;
}
    #call-out{
        width:100%;
    }
        #call-out h2{
            font-size: 25px;
        }
        #call-out p{
            font-size: 20px;
        }
}
@media all and (min-width:600px) and (max-width:999px){
    header{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
        #header header h1{
            margin: 50px 0 25px 0;
            width: 100%;
            text-align: center;
        }
    nav{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width:100%;
        padding: 0 10px;
        text-align: center;
    }
    nav #hamburger{
        display: none;
    }
        nav a{

        }
    #call-out{
        width:100%;
        margin-top:50px;
    }
        #call-out h2{
            font-size: 25px;
            margin: 25px 0;
        }
        #call-out p{
            font-size: 20px;
            line-height: 1.6em;
            text-align: center;
        }
}
@media all and (min-width:1000px){
    header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width:100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}
#header header h1{
    margin: 25px 100px;
}
#header header h2{
    margin: auto;
    font-size: 2em;
}
#hamburger div {
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 6px 0;
}

nav{
    margin-left: 50px
}
    nav #hamburger{
        display: none;
    }
nav a{
    margin: 0 15px 0 0;
    font-size: 1.2em;
    font-weight: 500;
    color: white;
    text-decoration: none;
}

#call-out{
    position: absolute;
    top:20%;
    margin: auto;
    width: 75%;
    right: 10%;
    left: 10%;
}

#call-out p{
    font-size: 1.75em;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
}

#call-out h2{
    font-size: 48px;
    font-weight: 700;
    text-align: center
    }
}
/ End Header Media Queries /

/*
    Main/box content
*/
@media all and (max-width:499px){
    #products-services{
    width: 90%;
}
#products-services .container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
}
section.grid-item{
    margin: 0 0 15px 0;
    }
    /* IE doesnt do auto placement :( */
    #networking-product{
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    #systems-product{
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }
    #security-product{
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }
    #communication-product{
        -ms-grid-row: 4;
        -ms-grid-column: 1;
    }
    #web-product{
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }
    #hardware-product{
        -ms-grid-row: 6;
        -ms-grid-column: 1;
    }
    #media-product{
        -ms-grid-row: 7;
        -ms-grid-column: 1;
    }
    #support-product{
        -ms-grid-row: 8;
        -ms-grid-column: 1;
    }
}
@media all and (min-width:500px) and (max-width:649px){
    #products-services{
    width: 80%;
}
#products-services .container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
}
section.grid-item{
    margin: 0 0 15px 0;
    }
        /* IE doesnt do auto placement :( */
        #networking-product{
            -ms-grid-row: 1;
            -ms-grid-column: 1;
        }
        #systems-product{
            -ms-grid-row: 2;
            -ms-grid-column: 1;
        }
        #security-product{
            -ms-grid-row: 3;
            -ms-grid-column: 1;
        }
        #communication-product{
            -ms-grid-row: 4;
            -ms-grid-column: 1;
        }
        #web-product{
            -ms-grid-row: 5;
            -ms-grid-column: 1;
        }
        #hardware-product{
            -ms-grid-row: 6;
            -ms-grid-column: 1;
        }
        #media-product{
            -ms-grid-row: 7;
            -ms-grid-column: 1;
        }
        #support-product{
            -ms-grid-row: 8;
            -ms-grid-column: 1;
        }
}
@media all and (min-width:650px) and (max-width:749px){
    #products-services{
    width: 70%;
}
#products-services .container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
}
section.grid-item{
    margin: 0 0 15px 0;
    }
        /* IE doesnt do auto placement :( */
        #networking-product{
            -ms-grid-row: 1;
            -ms-grid-column: 1;
        }
        #systems-product{
            -ms-grid-row: 2;
            -ms-grid-column: 1;
        }
        #security-product{
            -ms-grid-row: 3;
            -ms-grid-column: 1;
        }
        #communication-product{
            -ms-grid-row: 4;
            -ms-grid-column: 1;
        }
        #web-product{
            -ms-grid-row: 5;
            -ms-grid-column: 1;
        }
        #hardware-product{
            -ms-grid-row: 6;
            -ms-grid-column: 1;
        }
        #media-product{
            -ms-grid-row: 7;
            -ms-grid-column: 1;
        }
        #support-product{
            -ms-grid-row: 8;
            -ms-grid-column: 1;
        }
}
@media all and (min-width:750px) and (max-width:999px){
    #products-services{
    width: 95%;
}
#products-services .container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
}
section.grid-item{
    margin: 0 10px 15px 5px;
    }
        /* IE doesnt do auto placement :( */
        #networking-product{
            -ms-grid-row: 1;
            -ms-grid-column: 1;
        }
        #systems-product{
            -ms-grid-row: 1;
            -ms-grid-column: 2;
        }
        #security-product{
            -ms-grid-row: 2;
            -ms-grid-column: 1;
        }
        #communication-product{
            -ms-grid-row: 2;
            -ms-grid-column: 2;
        }
        #web-product{
            -ms-grid-row: 3;
            -ms-grid-column: 1;
        }
        #hardware-product{
            -ms-grid-row: 3;
            -ms-grid-column: 2;
        }
        #media-product{
            -ms-grid-row: 4;
            -ms-grid-column: 1;
        }
        #support-product{
            -ms-grid-row: 4;
            -ms-grid-column: 2;
        }
}
@media all and (min-width:1000px) and (max-width:1299px){
    #products-services{
    width: 95%;
}
#products-services .container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
}
section.grid-item{
    margin: 0 1em 1em 1em;;
    }
    /* IE doesnt do auto placement :( */
    #networking-product{
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    #systems-product{
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }
    #security-product{
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }
    #communication-product{
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }
    #web-product{
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }
    #hardware-product{
        -ms-grid-row: 3;
        -ms-grid-column: 2;
    }
    #media-product{
        -ms-grid-row: 4;
        -ms-grid-column: 1;
    }
    #support-product{
        -ms-grid-row: 4;
        -ms-grid-column: 2;
    }
}
@media all and (min-width:1300px) and (max-width:1599px){
    #products-services{
    width: 95%;
}
#products-services .container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 33% 33% 33%;
    grid-template-columns: 33% 33% 33%;
}
section.grid-item{
    margin: 0 1em 1em 1em;;
    }
    /* IE doesnt do auto placement :( */
    #networking-product{
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    #systems-product{
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }
    #security-product{
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }
    #communication-product{
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }
    #web-product{
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }
    #hardware-product{
        -ms-grid-row: 2;
        -ms-grid-column: 3;
    }
    #media-product{
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }
    #support-product{
        -ms-grid-row: 3;
        -ms-grid-column: 2;
    }
}
@media all and (min-width:1600px){
    #products-services{
    width: 80%;
}
#products-services .container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 33% 33% 33%;
    grid-template-columns: 33% 33% 33%;
}
section.grid-item{
    margin: 0 1em 1em 1em;
    }
    /* IE doesnt do auto placement :( */
    #networking-product{
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    #systems-product{
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }
    #security-product{
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }
    #communication-product{
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }
    #web-product{
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }
    #hardware-product{
        -ms-grid-row: 2;
        -ms-grid-column: 3;
    }
    #media-product{
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }
    #support-product{
        -ms-grid-row: 3;
        -ms-grid-column: 2;
    }
}
/ End Main/Box Media Queries /

/*
    Footer
*/
@media all and (max-width:599px){
        #footer{
        padding: 0 10px;
    }
    #footer .container{
        display: block;
    }
    #itc-story{
        width: 100%;
        text-align: center;
    }
    #itc-story p{
        line-height: 1.5em;
        font-size: 15px;
    }
    #itc-story a{
        width:100%;
    }
    #contact{
        display: block;
    }
    #social-links{
        text-align: center;
        padding: 0;
    }
    #contact-info{
        padding: 0;
    }
}
@media all and (min-width:600px) and (max-width:799px){
    #footer{
        padding: 0 10px;
    }
    #footer .container{
        display: block;
    }
    #itc-story{
        width: 100%;
        text-align: center;
    }
    #itc-story p{
        line-height: 1.5em;
        font-size: 15px;
        text-align: left;
    }
    #contact{
        display: block;
        margin-top: 25px;
        text-align: center;
    }
    #social-links{
        text-align: center;
        padding: 0;
    }
    #contact-info{
        padding: 0;
        display: inline-block;
    }
    #copy-right ul{
        margin: 25px 0 0 0;
    }
}
@media all and (min-width:800px) and (max-width:1199px){
    #footer .container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns:  60% 40%;
    grid-template-columns:  60% 40%;
}
    #contact-info .button{
        padding: .25em;
    }
#itc-story{
    /*width: 75%;*/
    margin: auto;
    margin-top: 0;
    padding: 0 0 0 10px;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}
#itc-story p{
    /*duplicate style set */
    font-size: 15px;
    padding: 0;
    font-weight: 500;
    line-height: 1.5em;
    color:#858484;
}
    #contact{
        padding: 0 10px 0 0;
        -ms-grid-column: 2;
        -ms-grid-row: 1;
    }
#copy-right{
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-column-span: 2;
    grid-column-end: 3;
    text-align: center;
    -ms-grid-row: 2;
}
    #social-links{
        padding: 0;
        text-align: center;
    }
#social-links li{
    height: 60px;
    width: 60px;
    padding:5px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 5px;
}
#social-links li i{
    color:white;
    width: 100%;
    text-align: center;
    }
    #nasc-logo{
        text-align: center;
    }
}
@media all and (min-width:1200px){
    #footer .container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns:  70% 30%;
    grid-template-columns:  70% 30%;
}
    #footer{
        padding: 100px;
    }
    #contact-info .button{
        padding: .5em;
    }
#itc-story{
    /*width: 75%;*/
   margin: auto;
    margin-top: 0;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}
#itc-story p{
    /*duplicate style set */
    font-size: 15px;
    padding: 0;
    font-weight: 500;
    line-height: 2em;
    color:#858484;
}
    #contact{
        padding: 0 10px 0 0;
        -ms-grid-column: 2;
        -ms-grid-row: 1;
    }
#copy-right{
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-column-span: 2;
    grid-column-end: 3;
    text-align: center;
    -ms-grid-row: 2;
}
    #social-links{
        padding: 0;
        text-align: center;
    }
#social-links li{
    height: 60px;
    width: 60px;
    padding:5px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 5px;
}
#social-links li i{
    color:white;
    width: 100%;
    text-align: center;
    }
    #nasc-logo{
        text-align: center;
    }
}