/* General CSS */
@font-face {
    font-family: 'FontAwesome';
    src: url('/fonts/fontawesome-webfont.eot?v=4.3.0');
    src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body { padding: 0; margin: 0; background-color: #333333; }
div { padding: 5px; }
.container { padding: 5px; }
#contact-banner-section { background-color: black;font-size: small; color: white; font-family: "franklin-gothic-urw",sans-serif; text-align: right; }
#contact-banner-section a, #contact-banner-section a:visited { color: white; text-decoration: none;margin-left: 5px;}
#contact-banner-section a:hover { text-decoration: underline; }
#logo { padding: 0px; float: left; padding-top: 12px;}
#logo-and-navigation-section { background-color: white; }
#logo-and-navigation-section .container { border-bottom: 5px solid #666666;  }
#content-section { background-color: white;font-family: "proxima-nova",arial;color: #333333; text-justify: distribute }
#navigation { font-family: "franklin-gothic-urw",sans-serif; float: right; padding-top: 0px; padding-right: 0; padding-left: 0; font-weight: bold; }
#navigation a, #navigation a:visited { color: black; text-decoration: none; font-size: 1.3em; }
#navigation a:hover { text-decoration: underline; }
#navigation ul { list-style: none; margin-left: 0; padding-left: 0 }
#navigation li { float: left; padding-left: 5px; padding-right: 3px; }
#last-navigation-item { padding-right: 0 !important; }
.icon { font-family: "FontAwesome" }
#footer-section { font-size: small; color: white; font-family: "franklin-gothic-urw", sans-serif; text-align: right; }

@media screen and (max-width: 350px) 
{
    #contact-banner-section { text-align: left; padding-left: 0; }
    #footer-section { text-align: left; }
}

@media screen and (min-width: 900px) 
{
    .container { width: 900px; margin: auto;padding: 0; }
}

/* Homepage CSS */

#rebranding { background-color: #36364a; color: white}
#connectivity { background-color: lavender; color: black}
#mobile { background-color: palegoldenrod; color: black}
#maintenance
{
    background-color: #993333;
    color: white;
}
#services-container { padding: 0; }
#also-offer-list { padding-left: 18px; }

@media screen and (min-width: 900px) 
{
    #rebranding, #connectivity, #mobile, #maintenance { width: 440px; height: 10em; float: left;}
    .clear { clear: both; }
    #services-container { margin: auto;}
}

/* Contact Page CSS */

input.input, textarea.input {
        background-color: #ffffff;
        border: 1px solid #cccccc;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
            -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
            -o-transition: border linear 0.2s, box-shadow linear 0.2s;
                transition: border linear 0.2s, box-shadow linear 0.2s;
        display: block;
        padding: 4px 6px;
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 20px;
        color: #555555;
        -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
                border-radius: 4px;
    width: 98%;
}
input.input {
    height: 20px;
    vertical-align: middle;
}
input.input, textarea.input { font-family: Helvetica, Arial, sans-serif }
#contact-form-section {padding-left: 0; padding-right: 4px}
.field-validation-error {
    display: block;
    text-align: right;
    color: #a94442;
    font-size: small;
    margin-bottom: 10px;
    margin-top: -10px;
}
input.input-validation-error, textarea.input-validation-error {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
}
input.button {
    color: #ffffff;
    background-color: #286090;
    border-color: #204d74;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4285;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
@media screen and (min-width: 900px) 
{
    #contact-form-section, #contact-details-section { width: 420px; float: left;}
    #contact-details-section { margin-left: 20px; }
    .clear { clear: both; }
    #services-container { margin: auto;}
}