/*  

CORPORATE COLOURS
Blue = #106CB2

Roll-over Blue #0C5387

Light Grey = #EBEBE0
    */


@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);

@font-face {font-family: 'PathwayGothicOne-Regular';
  	src: url('fonts/pathway-gothic-one/PathwayGothicOne-Regular.ttf') format('truetype'); }


/* --------------------- GLOBAL FORMATING ----------------- */

body {
    margin:0;
    font-family: veranda, helvetica, arial, sans-serif;
    font-weight:400;
    font-size:14px;
    line-height:160%;
    color:DimGray;
    background-color:white;
    -webkit-text-size-adjust: none;
    }

@media only screen and (max-device-width: 480px) { body {font-size:16px}  }

/* tells browsers that don't read html 5 tags to render like divs */
header, footer, aside, nav, article, section {display: block; margin: 0; padding: 0;}

/* clears containers with floated elements, no need for extra markup! */
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clear {clear:both; }

/* -------  SITE WIDE TEXT SETTINGS --------   */

#page_wrapper {background-color:#fff;width:100%;}
.page_container {width:1200px; margin-left:auto; margin-right:auto; clear:both; margin-top:70px}
@media only screen and (max-device-width: 1000px) {.page_container {width:100%}  }

.nav .navbar-nav li a {letter-spacing:1px; font-family: 'PathwayGothicOne-Regular', sans-serif; font-weight:400; }

img {border:0 }    
@media only screen and (max-device-width: 480px) { #img {width:100%;}  }


@media only screen and (max-device-width: 480px) { .footer-image a {color:white;  text-decoration:none;}  }             

h1{
   font-size:30px;
   color:Black;
   line-height:110%;
   text-transform:uppercase;
   font-family: 'PathwayGothicOne-Regular', sans-serif;
   font-weight:400;
   letter-spacing:2px
   
   }
   @media only screen and (max-device-width: 480px) { h1, h2, h3, h4, h4 {padding:0 10px}  }
   @media only screen and (max-device-width: 480px) { h1 {font-size:30px; padding-top:30px;}  }
h2{
   font-size:20px;
   color:#15365D;
   font-family: 'PathwayGothicOne-Regular', sans-serif;
   font-weight:400;
   letter-spacing:2px;
   text-transform:uppercase;
   }
h3{
   font-size:16px;
   color:#005398;
   line-height:160%;
   font-weight:bold;
   }
h4{
   font-size:11px;
   color:red;
   line-height:120%;
   font-weight:bold;
   }   

p {
  color:inherit;
  line-height:160%;
  font-size:14px;
  font-weight:normal;
  }
  @media only screen and (max-device-width: 480px) { p, ul, li, ol, dl {font-size:16px;padding:0 10px}  }
  
ul {
  color:inherit;
  line-height:160%;
  font-size:inherit;
  font-weight:normal;
  margin-bottom:5px;
   margin-top:5px
  }
  @media only screen and (max-device-width: 480px) { ul {margin-left:20px; font-size:16px}  }
  
ol {
  color:inherit;
  line-height:160%;
  font-size:inherit;
  font-weight:normal;
  margin-bottom:5px;
   margin-top:5px;
   margin-left:20px
  }
  @media only screen and (max-device-width: 480px) { ol {font-size:16px}  }
  
li {
   margin-top:5px;
   font-size:14px;
   color:inherit;
    }
   @media only screen and (max-device-width: 480px) { li {font-size:16px}  } 

input[type=text], textarea {width: 280px; }
input[value] {color:DimGray } 



/* ----- HEADER -------- */
#header-outer {
    width: 100%;
    border:0px solid green;
    background-color:#EBEBED;
    }
    @media only screen and (max-device-width: 480px) {#header-outer {margin-top:0; border:1px #EBEBED solid;}  }
    
header {
    margin-left:auto;
    margin-right:auto;
    width: 1200px;
    min-height: 115px;
    border:0px solid pink;
    display: -webkit-flex;
    display: flex;
        }
    @media only screen and (max-device-width: 480px) { header {width:100%; min-height:500px; display:inline;}  }


/* Marshall logo  */   
#header-logo-1{width:250px; padding-top:18px; padding-bottom:18px}
             @media only screen and (max-device-width: 480px) { #header-logo-1 {width:270px; padding:0; text-align:center; margin:20px auto 0 auto; border:0px teal dashed;}  }    
    
/* CA logo  */    
#header-logo-2 {width:155px; margin:8px 0 0 auto}
    @media only screen and (max-device-width: 480px) { #header-logo-2 {padding-left:10px; width:150px; margin:10px 0 10px 0; border:0px teal dashed;}  }

/* Count logo  */     
#header-logo-3 {width:95px; margin:24px 10px 0 30px;}
    @media only screen and (max-device-width: 480px) { #header-logo-3 {float:right; width:130px; margin:-120px 10px 0 0; border:0px teal dashed;}  }

/* Fin logo  */     
#header-logo-4 {width:170px; margin:53px 0 0 15px;}
           @media only screen and (max-device-width: 480px) { #header-logo-4 {float:right; width:150px; margin:-40px 10px 0 0; }  } 
           


/* --------   Footer  ------------- */  
          
#footer-outer {
	border:0px green dotted;
    background-color:#106CB2;
    width:100%;
    margin:0;
    }
    @media only screen and (max-device-width: 480px) { #footer-outer {width:100%;margin-top:-10px;}  }

footer {
	border:0px red dotted;
    width:1200px;
    margin:0 auto 0 auto;
    min-height:150px;
    }
    @media only screen and (max-device-width: 480px) { footer {width:100%;margin-top:10px;}  }

#footer-inner p {
    padding-top:10px;
	margin:0;
    font-size:12px;
    line-height:150%;
    font-family:inherit;
    color:white;
    }

.footer-logo {float:left; margin:20px 0px 0px 10px; }
              

.footer-logo img {width:177px;}
                 @media only screen and (max-device-width: 480px) {.footer-logo img {width:200px;}  }

.footer-logo p {color:white }  


.tags h1 {font-size:9px; color:#888888; line-height:140%; font-family: veranda, helvetica, arial, sans-serif; letter-spacing:0px; margin-top:8px} 

.tags p {line-height:110%; color:#fff; font-size:12px; font-style:italic; }

.page-tags h1 {font-size:9px; color:#888888; line-height:140%; font-family: veranda, helvetica, arial, sans-serif; letter-spacing:0px; margin-top:25px; margin-bottom:6px} 

#footer-container ul { list-style-type: none; } 

#footer-container li {color:#fff; padding-left:0; margin-left:0 }

#footer-container li a {color:#fff; font-size:14px; font-family: veranda, helvetica, arial, sans-serif; text-transform:none; }

#footer-container h2 {color:#fff; font-size:18px; }


#footer-container {
    width:100%;
    display:table;
    border-collapse: separate;
    border-spacing:1px 10px;
    }
    @media (min-width: 320px) and (max-width: 1024px) { #footer-container {display:inline; border-collapse:collapse;border-spacing:0;} }

     .footer-col-1 {
     display:table-cell;
     width:25%;
     vertical-align:middle;
     }
     @media (min-width: 320px) and (max-width: 1024px) { .footer-col-1 {display:inline-block;width:100%; margin-top:30px} }
     .footer-col-2 {
     display:table-cell;
     width: 25%;
     text-indent:10px;
     }
     @media (min-width: 320px) and (max-width: 1024px) { .footer-col-2 {display:inline-block;width:100%} }
     
     .footer-col-3 {
    display:table-cell;
     width: 25%;
     text-indent:10px;
     }
     @media (min-width: 320px) and (max-width: 1024px) { .footer-col-3 {display:inline-block;width:100%} }
     
     .footer-col-4 {
     display:table-cell;;
     width: 24%;
     text-indent:10px;
     }
     @media (min-width: 320px) and (max-width: 1024px) { .footer-col-4 {display:inline-block;width:100%} }
     
    .footer-row {
     display:table-row;
     margin-bottom: 2px;
     }
     
     /* Indents in li in footer */
     .footer-col-2>ul>li {margin-left:-30px; text-indent:0; padding-left:0 }
     .footer-col-3>ul>li {margin-left:-30px; text-indent:0; padding-left:0 }
     .footer-col-4>ul>li {margin-left:-30px; text-indent:0; padding-left:0 }     
        
/* ---- Ideograph Panel -------- */  

#ideo {
     background-color:#0C5387;
    width:100%;
    padding-bottom:15px;
    padding-top:15px;
    font-family:verdana, sans-serif;
    font-weight:normal;
    font-size:12px;
    color:#FFFFFF;
    text-align:center;
    }
    @media only screen and (max-device-width: 480px) { #ideo {width:100%;}  }
    
#ideo a {
	color:#FFFFFF;
	text-decoration:none;
    font-size:9px;
    font-weight:normal;
    font-family:veranda, arial, sans-serif;
}

    @media only screen and (max-device-width: 480px) { #ideo a {padding-right:10px;}  }
    
#ideo a:link {
	color:#FFFFFF;
	text-decoration:none;
    font-size:9px;
    font-weight:normal;
    font-family:veranda, arial, sans-serif;
}
#ideo a:hover {
	color:#FFFFFF;
	text-decoration:none;
    font-size:9px;
    font-weight:normal;
    }       
              
              

/* ----Home Page ------ */

#home-image-container-outer {
    width:100%;
    background-image:url('images/background-image.jpg');
    background-position:top center;
    background-repeat:no-repeat;
    height:500px;
    margin-top:0px;
    z-index:1;
    }
    @media only screen and (max-device-width: 480px) { #home-image-container-outer {width:100%;background-image:url('images/background-image2.jpg'); background-size:100%; background-position:top center; background-repeat:no-repeat; height:270px;}  }
    
#home-image-container-inner {
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    width:1200px;
    border:0px red solid;
    }
    @media only screen and (max-device-width: 480px) { #home-image-container-inner {width:100%;}  }

#marshall-logo {width:300px;padding-top:50px }
               @media only screen and (max-device-width: 480px) { #marshall-logo {width:250px; padding:80px 0 0 10px;}  }
               
             
.experience_counts {padding-top:60px; margin-bottom:20px;}               
                   @media only screen and (max-device-width: 480px) { .experience_counts {margin-top:30px; margin-bottom:10px; }  }
                                  
.experience_counts h1{
   font-size:80px;
   color:#000;
   line-height:110%;
   text-transform:uppercase;
   font-family: 'PathwayGothicOne-Regular', sans-serif;
   font-weight:400;
   letter-spacing:2px;
   margin-top:15px;
   }
   @media only screen and (max-device-width: 480px) {.experience_counts h1 {margin-top:30px; font-size:40px}  }               
    
h1.family_owned {
                                   padding-top:70px; 
                                   margin-bottom:10px; 
                                   font-size:48px; 
                                   text-transform:none; 
                                   letter-spacing:-1px;
                                   text-shadow: 2px 2px 2px #fff; 
                                   }               
                                   @media only screen and (max-device-width: 480px) { h1.family_owned {
                                                                                      padding-top:20px; 
                                                                                      font-size:26px;
                                                                                      color: #fff;
                                                                                      text-shadow: 2px 2px 2px #000; 
                                                                                      letter-spacing:0px; 
                                                                                      }  } 

            



@media only screen and (max-device-width: 480px) {#phone-only-intro {display:block;}  } 

.login-wrapper {width:100%; background-color:#106CB2}
               @media only screen and (max-device-width: 480px){.login-wrapper{display:none; } }

.login {border-bottom:1px #fff solid; padding:10px; width:1200px; margin:0 auto; text-align:center;}
       @media only screen and (max-device-width: 480px){.login {width:100%; text-align:left; } }

	button {
    background-color: #000; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    margin-top:10px;
}

.login img {width:60px; margin-bottom:-20px }

button:hover {
    background-color: #333; /* Lt Purple */
    color: white;
	}
    
#phone-only-intro {display:none; }     
                  @media only screen and (max-device-width: 480px){#phone-only-intro {display:inline-block; } }
             
 /* --------   Normal Page ------------- */                
#page-container {
    margin-left:auto;
    margin-right:auto;
    margin-top:50px;
    width:1200px;
    border:0px red solid;
    }
    @media only screen and (max-device-width: 480px) { #page-container {width:100%;margin-top:90px}  }
    
.image-right {float:right; width:600px; margin:0 0 10px 15px}
             @media only screen and (max-device-width: 480px) { .image-right {float:none; width:95%; margin:10px}  }
    
 /* --------   Contact Page ------------- */ 
     
#address {float:left; width:650px; border:0px dotted }
          @media only screen and (max-device-width: 480px) { #address {float:none; width:100%}  }


#contact-form { float:right; width:450px; margin-bottom:20px; border:0px dotted}
                @media only screen and (max-device-width: 480px) { #contact-form {float:none; width:100%}  }

iframe {width:600px; height:450px; margin-bottom: 10px;}
            @media only screen and (max-device-width: 500px) { iframe {width:85%; height:400px}  }

#contact-form form input[type=text], textarea {width:100% }

.var_code {width:100px }

input[type="submit"] {
    font-size:16px;;
    display: inline;
    padding:5px 15px;
    margin-bottom: 10px;
    background-color:#106CB2;
    color:#fff;
    border:none;
    }
input[type="submit"]:hover {
    background-color:#0C5387;
}

input[type=text] {height:25px; color:#A6A6A6; font-size:14px; }

textarea {color:#A6A6A6; font-size:14px; font-family:sans-serif; }




  /* --------   Footer Table ------------- */  

#table-container-team {
    display:table;
    float:right;
    width:75%;
     margin:0;
     border:0px yellow dashed;
     vertical-align:top;
     border-spacing: 5px;
     border-collapse: separate;
    }
    @media only screen and (max-device-width: 480px) { #table-container-team {display:none;}  }
    
    .row-team { display:table-row; margin-bottom:10px;}
    
   
   
     .cell-team {
     color:#EBEBE0;
     display:table-cell;
     width:25%;
     padding:10px;
     border:0px teal solid;
     text-align:left;
     vertical-align:top;
     }
     @media only screen and (max-device-width: 480px) { .cell-team {display:inline;width:100%;margin-top:10px;float:left;margin-left:-100px}  }
     
     .cell-team a { color:#EBEBE0; line-height:130%; text-decoration:none;text-transform:none;font-size:13px;font-family:veranda, arial, sans-serif;}
                  @media only screen and (max-device-width: 480px) { .cell-team a {font-size:15px}  }
     .cell-team a:visited { color:#EBEBE0;  text-decoration:none;text-transform:none;}
     .cell-team a:hover   { color:#DBD7D7;  text-decoration:none;text-transform:none;}
     .cell-team a:active  { color:#DBD7D7;  text-decoration:none;text-transform:none;}
      
      
      
 /* --------   Teams Page ------------- */  
    

.circle {border:1px #A6A6A6 solid; border-radius:80px; width:160px; height:160px; float:left; margin-right:15px; margin-bottom:30px}
@media only screen and (max-device-width: 480px) {.circle {margin-left:10px; float:none; margin:0 10px; text-align:center;}  }
@media only screen and (max-device-width: 480px) {.circle img {margin:15px auto 0 auto; text-align:center;}  }

.team {margin:40px 0; clear:both;}


 /* --------   Menu  ------------- */  

@media only screen and (max-device-width: 600px) {.nav {min-height:450px}  }



 /* --------   fsg Page ------------- */  
 
table.fsg {min-width:500px; background-color:#F6F6F6; border:1px #CCC8C8; solid; border-collapse:collapse}

table.fsg td {padding:3px 8px; border:1px #fff solid; border-collapse:collapse; }

table.fsg tr:first-child {background-color:#ABD6F5; font-weight:bold; }

.nav li, a {font-family: 'PathwayGothicOne-Regular', sans-serif; font-weight:400; font-size:17px }