/*
* Table of Contents
*
* 1.0 - body
* 2.0 - div elements
* 3.0 - lists
* 4.0 - typography
* 5.0 - images
* 6.0 - form elements
* 7.0 - navigation
*
*/

/*
* 1.0 - body
*/

body.page-background-0{
    background-attachment:fixed;
    background-image:url(../images/office.jpg);
    background-repeat:no-repeat;
    background-size:100% 90%;
}

body.page-background-1{
    background-attachment:fixed;
    background-image:url(../images/keyboard.jpg);
    background-repeat:no-repeat;
    background-size:100% 90%;
}

body.page-background-2{
    background-attachment:fixed;
    background-image:url(../images/drawing-board.jpg);
    background-repeat:no-repeat;
    background-size:100% 90%;
}

body.page-background-3{
    background-attachment:fixed;
    background-image:url(../images/program.jpg);
    background-repeat:no-repeat;
    background-size:100% 90%;
}

/*
* 2.0 - div elements
*/

div.page-section-mobile{
    /*padding:auto;
    padding-bottom:10%;*/
}

div.carousel{
    /*position:fixed;*/
}

div#buttons{
    margin:none;
    margin-top:7%;
    padding-bottom:12%;
}

div#button1{
    position:absolute;
    left:0%;
    top:20%;
    width:17%;
    height:auto;
    z-index:2;
}

div#button2{
    position:absolute;
    left:19%;
    top:31%;
    width:12%;
    height:auto;
    z-index:1;
}

div#button3{
    position:absolute;
    left:40%;
    top:10%;
    width:20%;
    height:auto;
    z-index:3;
}

div#button4{
    position:absolute;
    left:69%;
    top:31%;
    width:12%;
    height:auto;
    z-index:1;
}

div#button5{
    position:absolute;
    left:83%;
    top:20%;
    width:17%;
    height:auto;
    z-index:2;
}

div#animate1{
    position:absolute;
    transform:scale(1,1) rotate(0deg);
    left:0%;
    top:20%;
    width:17%;
    height:auto;
    z-index:2;
}

div#animate2{
    position:absolute;
    transform:scale(1,1) rotate(0deg);
    left:19%;
    top:31%;
    width:12%;
    height:auto;
    z-index:1;
}

div#animate3{
    position:absolute;
    transform:scale(1,1) rotate(0deg);
    left:40%;
    top:10%;
    width:20%;
    height:auto;
    z-index:3;
}

div#animate4{
    position:absolute;
    transform:scale(1,1) rotate(0deg);
    left:69%;
    top:31%;
    width:12%;
    height:auto;
    z-index:1;
}

div#animate5{
    position:absolute;
    transform:scale(1,1) rotate(0deg);
    left:83%;
    top:20%;
    width:17%;
    height:auto;
    z-index:2;
}

div#buttonShadow{
    width:100%;
    position:relative;
    margin:auto;
    margin-bottom:3%;
    z-index:0;
}

div.page-main-content{
    background-color:#FFFFFF;
    margin:auto;
    padding:auto;
    padding-top:5%;
    padding-bottom:5%;
}

div.image-container-0{
    background-color:#000000;
    height:100%;
    margin:auto;
    vertical-align:center;
    text-align:center;
    color:#FFFFFF;
}

div.page-alt-content{
    background-color:#FFFFFF;
    padding:2.5%;
    text-align:center;
    margin:auto;
}

div.page-container{
    margin:auto;
    margin-top:20%;
}

div.page-project-content{
    background-color:#FFFFFF;
    margin:auto;
    padding:auto;
    padding-top:5%;
    padding-bottom:5%;
    text-align:center;
}

div.project-row{
    margin:auto;
    margin-top:5%;
    margin-bottom:5%;
}

div.reader-sections{
    padding:5%;
    padding-top:5%;
    padding-bottom:5%;
}

div#section-1{
    background-color:#333333;
}

div#section-2{
    background-color:#222222;
}

div#section-3{
    background-color:#111111;
}

div#section-4{
    background-color:#000000;
}

div#section-5{
    background-color:#333333;
}

div#section-6{
    background-color:#222222;
}

div#section-7{
    background-color:#111111;
}

div#section-8{
    background-color:#000000;
}

div.page-break{
    margin:20%;
}

div.card-container{
    margin:auto;
    margin-top:10%;
}

div#contact-header{
    margin-left:2%;
}

div#email-form{
    margin-left:2%;
    margin-top:5%;
}

div.footer{
    background-color:#FFFFFF;
    position:relative;
    width:100%;
    bottom:0;
    text-align:center;
    padding:auto;
    padding-top:5%;
}

div.header{
    position:relative;
    margin-left:3%;
    margin-right:3%;
    margin-bottom:15%;
}

div.header-container{
    margin:auto;
    margin-top:1%;
    margin-bottom:1%;
}

div.site-section-desktop{
    background-color:#000000;
    position:fixed;
    top:0;
    width:100%;
    margin:auto;
    margin-bottom:30%;
    z-index:7;
}

div.project{
    padding:0;
    margin:auto;
    margin-top:5%;
}

div.section-reader{
    vertical-align:center;
    text-align:center;
    width:100%;
    height:auto;
    margin:auto;
    margin-top:7%;
    overflow-x:hidden;
    overflow-y:hidden;
}

div.nav-container{
    
}

div.social-nav-container{
    position:fixed;
    top:25%;
    right:0;
    opacity:0.9;
    z-index:7;
}

div.social-element-container{
    background-color:#000000;
    width:100%;
    margin:auto;
}

div.social-nav{
    padding:0;
    float:right;
    clear:left;
}

div.news-content{
    margin:auto;
    margin-bottom:5%;
}

div.mobile-social-container{
    position:fixed;
    background-color:#000000;
    width:100%;
    margin:auto;
    bottom:0;
    opacity:0.9;
    z-index:7;
}

img.site-laptop-mobile{
    width:80%;
    height:auto;
    max-height:80%;
    margin:auto;
}

img.site-cell-mobile{
    width:80%;
    height:auto;
    max-height:80%;
    margin:auto;
    margin-top:10%;
}

div.site-mobile{
    padding:0;
}

/*div#header{
    position:relative;
    margin-left:3%;
    margin-right:3%;
    margin-bottom:3%%;
}*/

/*
* 3.0 - lists
*/

img.social-image{
    margin:15%;
    margin-top:25%;
    margin-bottom:25%;
}

img.content-images{
    position:relative;
    width:100%;
    height:100%;
    max-height:100%;
    opacity:0.6;
    overflow:hidden;
    z-index:1;
}

img.business-card{
    width:100%;
    height:auto;
    margin:auto;
    max-width:100%;
}

img.laptop{
    width:90%;
    height:auto;
    margin:auto;
    margin-left:5%;
    margin-right:5%;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}

img.site-laptop{
    width:90%;
    height:auto;
    margin:auto;
    margin-left:5%;
    margin-right:5%;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}

img.cell{
    width:60%;
    margin:auto;
    margin-left:5%;
    margin-top:20%;
    margin-right:35%;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}

img.site-cell{
    width:60%;
    margin:auto;
    margin-left:5%;
    margin-top:20%;
    margin-right:35%;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}

h4.project-reader:hover{
    color:#FF0000;
    /*text-shadow:3px 3px 5px #FFFFFF;*/
}

h4.project-reader{
    margin:0;
    vertical-align:center;
    text-align:center;
    color:#FFFFFF;
}

br{
    /*margin-top:5%;
    margin-bottom:5%;*/
}

img.service-image{
    width:90%;
    height:auto;
    max-width:90%;
    margin:auto;
}

img#laptop{
    margin:auto;
    margin-left:5%;
    margin-right:5%;
}

img#tablet{
    margin:auto;
    margin-left:5%;
    margin-right:5%;
}

img#cell{
    width:60%;
    margin:auto;
    margin-left:5%;
    margin-top:40%;
    margin-right:35%;
    bottom:0;
}

h4.image-text{
    position:absolute;
    text-align:center;
    vertical-align:center;
    top:25%;
    left:5%;
    width:90%;
    height:auto;
    font-size:2.5vmax;
    font-weight:600;
    margin:auto;
    color:#C70404;
    text-shadow:3px 3px 5px #FFFFFF;
    z-index:2;
}

img.page-image{
    width:100%;
    height:auto;
}

.temp{
    padding:0 !important;
    max-height:75%;
}

h1.reader-title{
    font-family:arial;
    font-size:5vw;
    font-weight:600;
    margin:auto;
    width:90%;
    height:auto;
    color:#C70404;
    text-shadow:3px 3px 5px #000000;
    overflow-x:hidden;
    overflow-y:hidden;
}

h2.reader-content{
    font-family:arial;
    font-size:3vmax;
    font-weight:600;
    margin:auto;
    width:90%;
    height:auto;
    color:#C70404;
    text-shadow:3px 3px 5px #000000;
    overflow-x:hidden;
    overflow-y:hidden;
}

h1.main-title{
    text-align:center;
}

h3.main-content{
    text-align:center;
}

h1#title-1{
    position:absolute;
    display:block;
    margin:auto;
    margin-left:5%;
    z-index:1;
}

h2#content-1{
    position:absolute;
    display:block;
    margin:auto;
    margin-left:5%;
    margin-top:5%;
    z-index:1;
}

h1#title-2{
    position:absolute;
    display:none;
    margin:auto;
    margin-left:5%;
    z-index:2;
}

h2#content-2{
    position:absolute;
    display:none;
    margin:auto;
    margin-left:5%;
    margin-top:5%;
    z-index:2;
}

h1#title-3{
    position:absolute;
    display:none;
    margin:auto;
    margin-left:5%;
    z-index:3;
}

h2#content-3{
    position:absolute;
    display:none;
    margin:auto;
    margin-left:5%;
    margin-top:5%;
    z-index:3;
}

h3.tech-script{
    width:86%;
    height:auto;
    max-height:60%;
    margin:7%;
    margin-top:5%;
}

img.tech-images{
    width:60%;
    height:auto;
    max-height:60%;
    margin:20%;
    margin-bottom:5%;
}

h1.section-title{
    margin:auto;
    margin-bottom:5%;
}

img.graphic-images{
    width:80%;
    height:auto;
    max-width:80%;
    margin:10%;
}

p.page-body-text{
    color:#000000;
    font-size:3vmin;
}

p.page-body-text-left{
    color:#000000;
    font-size:3vmin;
    text-align:left;
}

h2.page-body-text-center{
    color:#000000;
    font-size:3vmin;
    text-align:center;
}

h3.page-body-text-left{
    color:#000000;
    font-size:3vmin;
    text-align:left;
}

img.mobile-nav{
    position:relative;
    width:100%;
    height:auto;
    margin:auto;
}
span#temp{
}

button.nav-menu-mobile{
    background-color:#DDDDDD;
    width:auto;
    height:100%;
    margin:5%;
    margin-top:15%;
    padding:20%;
    padding-top:9%;
    padding-bottom:9%;
    border-radius:2px;
    border-width:1px;
}

ul.nav-drop{
    padding:auto;
    padding-left:1%;
    padding-top:1%;
    padding-right:2%;
    padding:bottom:1%;
    background-color:#000000;
    position:absolute;
    display:none;
    list-style-type:none;
    border-radius:2px;
}

hr.drop-break{
    margin:0;
    margin-top:1%;
    margin-bottom:7%;
}

a.nav-element{
    width:auto;
    height:auto;
    margin:auto;
}

ul.navigation{
    position:relative;
    list-style-type:none;
    width:100%;
    height:auto;
    margin:auto;
    margin-top:2.5%;
    margin-right:5%;
    vertical-align:center;
    text-align:center;
}

ul.nav-drop-mobile{
    padding:auto;
    padding-left:1%;
    padding-top:1%;
    padding-right:2%;
    padding-bottom:1%;
    background-color:#000000;
    position:absolute;
    display:none;
    list-style-type:none;
    border-radius:2px;
    vertical-align:center;
    text-align:center;
}

li.mobile-drop-item{
    margin:auto;
    margin-left:3%;
    margin-right:3%;
    vertical-align:center;
    text-align:center;
}

li.site-nav-items{
    float:right;
    display:table;
    margin:auto;
    margin-left:3%;
    margin-right:3%;
    vertical-align:center;
    text-align:center;
}

p.nav-text{
    color:#FFFFFF;
    font-family:arial;
    font-size:1vmax;
    font-weight:500;
    cursor:pointer;
}

p.drop-text{
    color:#FFFFFF;
    font-family:arial;
    z-index:10;
    cursor:pointer;
}

body{
    background-color:#000000 !important;
    padding:none;
    padding-top:10%;
}

img#logo{
    width:100%;
    height:auto;
    max-width:100%;
    margin:auto;
    /*margin-top:5%;*/
    margin-left:10%;
}

img#title{
    width:90%;
    height:auto;
    max-width:90%;
    float:left;
    margin:auto;
    margin-top:3%;
}

img.contactIcons{
    width:5%;
    height:auto;
    max-width:5%;
    margin:auto;
    float:right;
    position:relative;
    margin-left:5%;
    margin-top:5%;
    margin-right:5%;
}

img.mobile-button{
    width:90%;
    height:auto;
    max-width:90%;
    margin:auto;
    margin-left:5%;
    margin-top:15%;
    margin-right:5%;
}

img#shadows{
    width:100%;
}

img.hubs{
    width:100%;
    height:auto;
}

img#button1{
    width:100%;
    height:auto;
    left:10%;
}

img#button2{
    width:100%;
    height:auto;
}

img#button3{
    width:100%;
    height:auto;
}

img#button4{
    width:100%;
    height:auto;
}

img#button5{
    width:100%;
    height:auto;
}

h3#description{
    font-family:arial;
    font-size:2vmax;
    color:#FFFFFF;
    text-align:center;
    margin:auto;
    margin-top:7%;
}

h3.bodyTitle{
    font-family:arial;
    color:#FFFFFF;
    text-align:center;
    margin:auto;
}

p.bodyContentCenter{
    font-family:arial;
    color:#FFFFFF;
    text-align:center;
    margin:auto;
}

p{
    font-family:arial;
    color:#FFFFFF;
}

hr#body{
    margin:auto;
    margin-top:1%;
    margin-bottom:3%;
}

hr#footer{
    margin:auto;
    margin-top:1%;
    margin-bottom:3%;
}

p#footer{
    margin:auto;
    margin-top:5%;
    font-family:arial;
    color:#FFFFFF;
}

ul.footerList{
    text-align:left;
    margin:auto;
    padding:auto;
}

li.footerHead{
    list-style-type:none;
    text-align:left;
    margin:auto;
    margin-left:0;
    margin-bottom:3%;
    font-weight:700;
    font-family:arial;
    color:#FFFFFF;
}

a.footerItems:hover{
    text-align:left;
    font-family:arial;
    color:#000000;
}

a.footerItems{
    text-align:left;
    font-family:arial;
    color:#000000;
}

p.footerItems{
    text-align:left;
    font-family:arial;
    color:#000000;
    cursor:pointer;
}

/*
* 3.0 - lists
*/

li.navLink{
    display:inline-block;
    width:20%;
    font-size:2vmax;
    color:#000000;
    background-color:#BBBBBB;
    border:none;
    border-radius:2px;
    margin:auto;
    margin-left:2%;
    margin-right:2%;
}

ul#navBar{
    list-style-type:none;
    width:100%;
    float:right;
    text-align:center;
    margin:auto;
    margin-top:7%;
}

ul.footerList{
    text-align:left;
    margin:auto;
    padding:auto;
}

li.footerHead{
    list-style-type:none;
    text-align:left;
    margin:auto;
    margin-left:0;
    margin-bottom:3%;
    font-weight:700;
    font-family:arial;
    color:#000000;
}

/*
* 4.0 - typography
*/

hr#header{
    color:#333333 !important;
    border-color:#333333 !important;
    border:1%;
    margin-left:5%;
    margin-right:5%;
}

hr.body{
    color:#333333 !important;
    border-color:#333333 !important;
    border:1%;
    margin-left:5%;
    margin-right:5%;
}

h2{
    font-size:300%;
    font-weight:200;
    font-family:arial;
    color:#333333;
}

h3{
    font-size:150%;
    font-weight:300;
    font-family:arial;
    color:#333333;
    margin:auto;
}

h4.contactForm{
    font-size:100%;
    font-weight:200;
    font-family:arial;
    color:#333333;
    text-align:center;
    display:inline;
    float:left;
}

h3.titleCenter{
    text-align:center;
    margin:auto;
    margin-top:7%;
    margin-bottom:7%;
}

h3.navLink{
    font-size:3vmax;
    color:#000000;
    border:none;
}

h4.projectTitle{
    margin:auto;
    margin-bottom:5%;
}

h4.contentCenter{
    text-align:center;
}

h3#description{
    font-size:2vmax;
    color:#000000;
    text-align:center;
    margin:auto;
    margin-top:5%;
}

hr#footer{
    color:#333333 !important;
    border-color:#333333 !important;
    border:1%;
    margin-left:5%;
    margin-right:5%;
    margin-bottom:7%;
}

p#footer{
    margin:auto;
    margin-top:5%;
    font-family:arial;
    color:#000000;
}

/*
* 5.0 - images
*/

img#logo{
    width:90%;
    height:auto;
    max-width:90%;
    margin:auto;
}

img#title{
    width:90%;
    height:auto;
    max-width:90%;
    float:left;
    margin:auto;
    margin-top:3%;
}

img.contactIcons{
    width:10%;
    height:auto;
    max-width:10%;
    margin:auto;
    float:right;
    position:relative;
    margin-left:5%;
    margin-top:5%;
    margin-right:5%;
}

img.projectMobile{
    width:100%;
    height:auto;
    position:relative;
    margin:auto;
    margin-top:5%;
}

img.businessCard{
    width:100%;
    height:auto;
    border:solid;
    border-width:1px;
    border-color:#000000;
    margin:auto;
    margin-top:15%;
}

/*
* 6.0 - form elements
*/

form#emailForm{
    text-align:center;
}

input.contact-elements[type=text]{
    width:99%;
    padding:auto;
    padding-left:20px;
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    border:solid;
    border-width:1px;
    border-radius:5px;
    box-sizing: border-box;
    display:inline;
    margin:0.5%;
    float:right;
    font-size:150%;
    font-weight:300;
    font-family:arial;
    color:#333333;
    border-color:#222222;
}

/*input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}*/

input#area-code{
    width:27%;
    padding:auto;
    padding-left:20px;
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    border:solid;
    border-width:1px;
    border-radius:5px;
    box-sizing: border-box;
    display:inline;
    margin:0.5%;
    float:left;
    font-size:150%;
    font-weight:300;
    font-family:arial;
    color:#333333;
    border-color:#222222;
}

input#prefix{
    width:29%;
    padding:auto;
    padding-left:20px;
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    border:solid;
    border-width:1px;
    border-radius:5px;
    box-sizing: border-box;
    display:inline;
    margin:0.5%;
    float:left;
    font-size:150%;
    font-weight:300;
    font-family:arial;
    color:#333333;
    border-color:#222222;
}

input#suffix{
    width:41%;
    padding:auto;
    padding-left:20px;
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    border:solid;
    border-width:1px;
    border-radius:5px;
    box-sizing: border-box;
    display:inline;
    margin:0.5%;
    float:left;
    font-size:150%;
    font-weight:300;
    font-family:arial;
    color:#333333;
    border-color:#222222;
}

select#contact-elements{
    width:99%;
    padding:auto;
    padding-left:20px;
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    border:solid;
    border-width:1px;
    border-radius:5px;
    box-sizing: border-box;
    display:inline;
    margin:0.5%;
    float:left;
    font-size:150%;
    font-weight:300;
    font-family:arial;
    color:#333333;
    border-color:#222222;
}

textarea#contact-elements{
    width:99%;
    height:2%;
    resize:vertical;
    padding:auto;
    padding-left:20px;
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    border:solid;
    border-width:1px;
    border-radius:5px;
    box-sizing: border-box;
    display:inline;
    float:left;
    margin:0.5%;
    font-size:150%;
    font-weight:300;
    font-family:arial;
    color:#333333;
    border-color:#222222;
}

input#contact-button{
    width:99%;
    padding:auto;
    padding-left:20px;
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    border-radius:5px;
    box-sizing: border-box;
    display:inline;
    float:right;
    /*color:#FFFFFF;
    font-family:arial;*/
    background-color:#444444;
    border:solid;
    border-width:1px;
    border-color:#222222;
    margin:auto;
    margin-left:0.5%;
    margin-top:3%;
    margin-right:0.5%;
    margin-bottom:0.5%;
    font-size:150%;
    font-weight:300;
    font-family:arial;
    color:#FFFFFF;
}

/*
* 7.0 - navigation
*/

nav.navbar-default{
    background:linear-gradient(to right,rgba(51,51,51,0),rgba(51,51,51,0.4));
}

button.btn-md{
    position:relative;
    width:100%;
    opacity:1;
}

a:link, a:visited{
    color:#222222;
}

a:hover{
    color:#227722;
}

a:active{
    color:#FF0000;
}

a.footerItems{
    text-align:left;
    font-family:arial;
    color:#333333;
}