body{
  background-color:#363636;
  color:#474747;
}

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

p{
  font-family: 'Rambla', sans-serif;
  line-height:36px;
  font-size:12pt;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Sanchez', serif;
}

hr {
 border: 0;
 height: 1px;
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
 margin-bottom:20px;
 }

 a{
   -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
   -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
   -o-transition: font-size 0.3s ease, background-color 0.3s ease;
   -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
   transition: font-size 0.3s ease, background-color 0.3s ease;
 }

#nav-background{
  background-color:#205475;
  background:
   url("https://mediacross.com/sentinel/images/top-dots-01.png") repeat-x,
   url("https://mediacross.com/sentinel/images/blue-leather.jpg");
  color:white;
  padding:0px 0px;
  font-family: 'Rambla', sans-serif;
  padding:0 5%;
}

#logo{
}

#logo img{
  max-width:400px;
}

#topnav{
  padding:0px;
}

#right{
float:right;
}

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    font-size: 11pt;
    padding:30px 10px 20px 10px;
    text-transform:uppercase;
    color:#fff;
    letter-spacing:3px;
    text-shadow: 1px 1px 1px #000;
}

/* Change background color of links on hover */
ul.topnav li a:hover {
  color:#e29512;
  background-color:#143647;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}



#main-container{
  margin-left:5%;
  margin-right:5%;
  width:90%;
  background-color:#f2f2f2;
  padding:0px;
}

#main-hero{
  max-height:450px;
  width:100%;
  background-color:#363636;
  text-align:center;
  border-bottom:2px solid grey;
  padding:0px;
  color:#fff;
  background-image:
   url("https://mediacross.com/sentinel/images/hero-img.png");
   background-size:cover;
   text-shadow: 4px 4px 15px #000;
   letter-spacing:2.5px;
}

#hero-dots1{
    padding:125px 0px 0px 0px;
    border-bottom:5px dotted white;
    width:25px;
    height:10px;
    margin:0px auto 10px auto;
}

#hero-dots2{
    padding:0px 0px 125px 0px;
    border-top:5px dotted white;
    width:25px;
    height:10px;
    margin:10px auto 0px auto;
}

#main-hero h1{
  margin:0px;
  font-size:30px;
  font-weight:normal;
  font-style: italic;;
}

#main-hero h2{
  margin:0px;
  padding:0px;
  font-size:50px;
  font-weight:normal;
  font-style: italic;;
  color:#fff;
}

#main-hero h4{
  margin-top:0px;
}

#home-form{
  width:100%;
  background-image:url("https://mediacross.com/sentinel/images/diagonal-lines.jpg");
  border-bottom:1px solid #f9f9f9;
  padding:20px 30px 0px 30px;
}

#home-form h1{
  font-style: italic;
  font-size:18pt;
  font-weight:bold;
}

#home-form p{
}

#home-form h3{
  font-size:16pt;
}

.postit{
  background-color:#fff;
  padding:15px 20px;
  color:#3a3a3a;
  margin-top:-80px;
  margin-bottom:60px;
   position:relative;
   z-index:99;
  -webkit-box-shadow:0 5px 25px 0 #8f8f8f;
  -moz-box-shadow:0 5px 25px 0 #8f8f8f;
  box-shadow: 0 5px 25px 0 #8f8f8f;
  -webkit-transform:rotate(-2deg);
  -moz-transform:rotate(-2deg);
  transform:rotate(-2deg);
}



.postit img{
  padding-bottom:10px;
}

.postit label{
  margin-bottom:0px;
  padding-bottom:0px;
  padding-top:5px;
}

.postit form {
  margin: auto;
  position: relative;
  font-size: 14px;
  line-height: 24px;
  color:#63636;
  text-decoration: none;
overflow:hidden;
}

.postit input {
  width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
  display: inline-block;
  border:none;
  padding:5px 10px;
  overflow:hidden;
}

.postit input#email{
  background-color:#efefef;
}

.postit input#phone{
  background-color:#efefef;
}

.postit input#name{
  background-color:#efefef;
}

.postit input#business{
  background-color:#efefef;
}

.postit input#button{}

.postit input#button a{}

.postit input#button a:hover{
  color:pink;
  background-color:#000;
}

#home-partnership{
  background-color:#f2f2f2;
  padding-bottom:60px;
  -webkit-box-shadow:0 5px 5px 0 #BFB2B3;
  -moz-box-shadow:0 5px 5px 0 #BFB2B3;
  box-shadow: 0 5px 5px 0 #BFB2B3;
}

#home-partnership img{
  max-width:275px;
  max-height:275px;
  display: block;
   margin-left: auto;
   margin-right: auto
}

#home-partnership h1{
  color:#965e1a;
  font-weight:normal;
  text-align:center;
  margin:10px 0px;
  padding:40px 0px 0px 0px;
  font-size:3em;
}

#home-partnership h2{
  color:#965e1a;
  font-weight:normal;
  text-align:center;
  margin:0px;
  padding:0px 0px 40px 0px;
  font-size:16pt;
}

#home-partnership h3{
  font-size:28px;
  font-style: italic;
  font-weight: bold;
  margin-top:10px;
  padding:0px;
  font-family: 'Rambla', sans-serif;
}

#home-partnership p{
  margin-bottom:20px;
  font-size:1.2em;
}

.calltoaction{
}

.calltoaction a{
  background-repeat: : #d87f1f; /* For browsers that do not support gradients */
   background: -webkit-linear-gradient(#d87f1f, #c26909); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(#d87f1f, #c26909); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(#d87f1f, #c26909); /* For Firefox 3.6 to 15 */
   background: linear-gradient(#d87f1f, #c26909); /* Standard syntax */
  color:#fff;
  text-align:center;
  display:block;
  padding:10px;
  border-radius: 15px;
  width:150px;
  text-decoration:none;
  font-weight:bold;
  margin:0 auto;
}

.calltoaction a:hover{
  background:#8f4c04;
}




#bottom-banner{
  background-image:url("https://mediacross.com/sentinel/images/white_carbonfiber.png");
  padding:20px;
  text-align:center;
  border-top:1px solid #A5A4A6;
}

#bottom-banner p{
font-size:12px;
line-height:26px;
letter-spacing:1px;
  text-align:center;
}

#bottom-banner img{
  width:25px;
  padding-top:20px;
  margin:20px 0px 0px 0px;
  display:block;
    opacity: .7;
    margin:0 auto;
}

#bottom-banner ul{
  list-style-type: none;
  padding:0px 10px 0px 10px;
  line-height: 2em;
  clear: left;
}

#bottom-banner li{
  display:inline-block;
}

#bottom-banner li a{
color:#7F7777;
text-decoration:underline;
margin:0 3px;
font-weight:bold;
font-style: italic;
font-family: 'Rambla', sans-serif;
}

#bottom-banner li a:hover{
  color:#403B3C;
}

#bottom-banner h1{
  font-size:12pt;
  color:#7F7777;
  line-height:24px;
  font-style: italic;
  text-align:center;
  letter-spacing:1px;
}

#main-footer{
  background-color:#545354;
  color:#474747;
  padding-top:30px;
  padding-bottom:60px;
}

#main-footer p{
  width:80%;
  font-size:9pt;
  margin:0 auto;
  padding-bottom:50px;
  padding-top:20px;
  line-height:20px;
  color:#D7D7D7;
  text-align:left;

}

#team-members{
  padding:0 3%;
}

#team-members img{
  border:2px inset #D7D7D7;
  border-radius: 5px 5px:
  -moz-border-radius: 5px 5px;
-webkit-border-radius: 5px 5px;
border-radius: 5px 5px; /* future proofing */
-khtml-border-radius: 5px 5px; /* for old Konqueror browsers */
}

#team-members h1{
  font-size:16pt;
  color:#965e1a;
  padding:0px 0px 10px 10px;
  border-bottom:1px solid #965e1a;
}

#team-members p{ line-height:28px;
font-size:10pt;}



#resource{
  border: 1px solid gray;margin-left:10px; background-color:#f2f2f2;
}

#resource h1{
    color:#965e1a;
    text-align:center;
}
#resource ul{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

  #resource ul li{
    border-bottom: 1px solid #ccc;
    padding:0px;
    color:#626262;
    text-align:center;
    width:100%;
    margin:0px;
  }

#resource ul li a{
  color:#626262;
    padding:0px;
    margin:0px;
}

#resource ul li a:hover{
  background-color:#fff;
  text-decoration:none;
  color:#626262;
}

#mainform{
  background-color:#cacaca;
  padding:20px 30px 30px 30px;
  margin-bottom:30px;
  border:1px solid orange;
}

#mainform input{
  width:100%;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  display: inline-block;
  border:none;
  padding:5px 10px;
  overflow:hidden;
  background-color:#efefef;
}

#mainform label{
  display:block;
  letter-spacing:2px;
  margin-top:10px;
}

#mainform textarea{
  width:100%;
  overflow:hidden;
  background-color:#efefef;
  min-height:100px;
}

#formnotes{
  text-align:center;
}

#formnotes h1{
   margin:20px 0px 0px 0px;
}

#audiences{
  background-color:#c37528;
  font-family: 'Rambla', sans-serif;
}

#audiences ul{
margin:0 auto;
padding:0px;
text-align: center;
}

#audiences ul li{
  padding:0px;
  font-weight:bold;
  font-style: italic;
  padding:0px;
  margin:0px;
  list-style-type: none;
  display:inline-block
}

#audiences ul li a{
  color:#fff;
  font-size:14pt;
  padding:10px 20px;
  letter-spacing:2px;
  display:inline-block;
  text-decoration:none;
}

#audiences ul li a:hover{
  background-color:#af6925;
}

#offerings{
}

#offerings ul{}

#offerings ul li{padding:5px 0px;font-size:12pt;}

#offerings h2{
  font-family: 'Rambla', sans-serif; font-size:18pt; text-transform:uppercase;
}

#serv-info{
  padding:40px 0px;
  border-bottom:1px dotted gray;
}

#serv-info h1{
  margin:0px;
  padding:0px;
  color:#965e1a;
}

#serv-info h1 a{
  color:#965e1a;
}

#serv-info h1 a:hover{
  text-decoration: none;
}

#serv-info img{

}

#serv-info p{
  line-height:36px;
  font-size:12pt;
}

#resource{}

#resource h1{
    color:#965e1a;
    text-align:center;
}
#resource ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

  #resource ul li{
    border-bottom: 1px solid #ccc;
  padding:10px;
    color:#626262;
    display:block;
    text-align:center;
    width:100%;
  }

  #resource ul li:last-child{
    border-bottom: none;
  }

#resource ul li a{
  color:#626262;
    padding:10px;
}

#resource ul li a:hover{
  background-color:#fff;
  text-decoration:none;
  color:#626262;
}

#pagedivide{
  width:20px;
  display:block;
  margin:50px auto 10px auto;
  padding:0px;
}

#ability-choose{
  background-color:#f1f1f1;
  padding:1% 2%;
  margin-top:60px;
}

#ability-choose p{
  line-height:28px;
  font-size:11pt;
}

#ability-choose ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#ability-choose ul li {
  border-bottom: 1px solid #ccc;
  padding:10px 0px;
  list-style-type: none;
  list-style-position:inside;
  color:#626262;
}

#ability-choose ul ul li{
  border:none;
  padding:5px 0px;
  margin:0px;
  color:#626262;
  list-style-type: square;
   list-style-position: inside;
   text-indent: -1em;
   padding-left: 1em;
}

#ability-choose ul li:last-child {
  border: none;
}

#ability-choose ul li a {
  text-decoration: none;
  color: #000;
  display: block;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

#ability-choose ul li a:hover {
  font-size: 30px;
  background: #f6f6f6;
}

#top-button{
}

#top-button a{
  background-color:#1c5069;
  color:#fff;
  text-decoration:none;
  display:block;
  width:50px;
  padding:5px;
  margin:0 auto;
}

#top-button a:hover{
  background-color:#227ca4;
}

#nodis{
  display:none;
}

#nodis2{}


/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }

  #topnav ul{
    background-color:#143647;
  }

  #right{
  float:none;
  }

  .postit{
    margin-top:20px;
    margin-bottom:20px;
  }

  ul.topnav li a {
      padding:5px;
  }

  #logo{
  }

  #logo img{
    min-width:320px;
    margin:0 auto;
  }

  #audiences ul li a{
    color:#fff;
    font-size:12pt;
    padding:10px 10px;
    letter-spacing:2px;
    display:block;
    text-decoration:none;
  }

  #offerings{
    margin-top:60px;
  }

    #offerings ul{}
    #offerings ul li{padding:5px 0px;font-size:12pt;}

    #ability-choose{
      background-color:#f1f1f1;
      padding:1% 2%;
    }

    #ability-choose p{
      line-height:28px;
      font-size:11pt;
    }

    #ability-choose ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #ability-choose ul li {
      border-bottom: 1px solid #ccc;
      padding:10px 0px;
      list-style-type: none;
      list-style-position:inside;
      color:#626262;
    }

    #ability-choose ul ul li{
      border:none;
      padding:5px 0px;
      margin:0px;
      color:#626262;
      list-style-type: square;
       list-style-position: inside;
       text-indent: -1em;
       padding-left: 1em;
    }

    #ability-choose ul li:last-child {
      border: none;
    }

    #ability-choose ul li a {
      text-decoration: none;
      color: #000;
      display: block;

      -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
      -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
      -o-transition: font-size 0.3s ease, background-color 0.3s ease;
      -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
      transition: font-size 0.3s ease, background-color 0.3s ease;
    }

    #ability-choose ul li a:hover {
      font-size: 30px;
      background: #f6f6f6;
    }


    #nodis{
display:inline-block;
    }

    #nodis2{
      display:none;
    }





}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}