
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v10/1Ptgg87LROyAm3Kz-C8CSKlv.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans SC';
  font-style: normal;
  font-weight: 900;
  src: local('Alegreya Sans SC Black'), local('AlegreyaSansSC-Black'), url(https://fonts.gstatic.com/s/alegreyasanssc/v8/mtGm4-RGJqfMvt7P8FUr0Q1j-Hf1DspC4iNhMKB8O-8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  src: local('Chivo Black'), local('Chivo-Black'), url(https://fonts.gstatic.com/s/chivo/v10/va9F4kzIxd1KFrjrZvZ4sK3kQz__.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 900;
  src: local('Alegreya Sans Black'), local('AlegreyaSans-Black'), url(https://fonts.gstatic.com/s/alegreyasans/v9/5aUu9_-1phKLFgshYDvh6Vwt5dlKqEp2i0VBuxM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  margin: 0;
  padding: 0;
	box-sizing: border-box;
}

html {
	overflow-y: scroll;
	width: 100%;
}

body {
	background-color: #FFF5D6;
	font-family: Arial, Verdana;
	font-size: 1.2rem;
}

nav {
	font-family: 'Alegreya Sans', Chivo, 'Alegreya Sans SC', Anton, sans-serif;
	background-color: #ac1414;
	width: 100%;
	font-size: 1.3rem; 
	text-align: right;
	position: fixed;
  padding-top: 6px;
  margin: 0;
	top: 0;
	z-index: 10;
	white-space: nowrap;
	overflow: hidden;
}

nav a {
	color: #fff;
	opacity: 0.9;
	padding-left: 16px;
	padding-right: 50px;
}

/* Hide the link that should open and close the topnav on small screens */
nav .icon {
	display: none;
}

header {
	padding-top: 29px;
	text-align: center;
	position: relative;
}

main {
  min-height: 600px;
	width: 75%;
	margin: 0 auto;
	padding: 20px 0;
	position: relative;
	overflow: hidden;
}

a {
	text-decoration: none;
}

img {
	border: 0;
	vertical-align: bottom;
}

h1 {
	font-family: 'Alegreya Sans', Chivo, 'Alegreya Sans SC', Anton, sans-serif;
	font-size: 1.8rem;
  text-align: center;
}

footer {
	background-color: #000;
	padding: 15px;
	font-size: 1.1rem;
	color: #fff;
	position: relative;
	width: 100%;
}

footer a {
	color: #fff;
}

footer p {
	display: inline-block;
}

#intro {
  padding-top: 10px;
}

#intro img {
	margin-right: 20px;
}

#contact {
  text-align: center;
  padding-top: 10px;
  font-size: 1.4rem;
  font-weight: bold;
}

#contact a {
  color: blue;
}

#contact a:hover {
  text-decoration: underline;
}

#specialties {
  width: 85%;
  margin: 15px auto;
}

#specialties table {
  margin: 0 auto;
  width: 100%;
}

#specialties td {
  width: 30%; 
  text-align: center; 
  vertical-align: top;
  padding-bottom: 10px;
}

#specialties img {
  width: 75%; 
  height: 165px;
}

#specialties th, td {
  width: 30%;
  text-align: center;
  vertical-align: top;
}

#newsletter {
	padding-top: 25px;
  width: 300px;
  margin: 15px auto;

}

#newsletter table {
  margin: 0 auto;
}

#newsletter td {
	padding: 3px 0;
}

#container {
  margin: 0 auto;
  padding: 0 10px;
 	opacity: 0.6;
}

#copyright {
	text-align: left;
}

#sociallinks {
	text-align: right;
}

.subscriptionverify {
  font-size: 2rem;
  text-align: center;
  padding-top: 30px;
}

.floatRight {
	float: right;
}

.floatLeft {
	float: left;
}


/* ======================== Responsive Design  =============================== */
@media only screen and (max-width: 1100px) {
  #specialties img {
    width: 80%; 
    height: 140px;
  }
}

@media only screen and (max-width: 950px) {
  main {
    width: 85%;
  }
  header img {
  	width: 102%;
  	height: auto;
  }
}

@media only screen and (max-width: 795px), (orientation: portrait) {
/* When the screen is less than 795 pixels wide, hide all links, except for the first 
one ("Home"). Show the link that contains should open and close the nav (.icon) */
  header img {
  	width: 103%;
  	height: auto;
  }
  nav {
  	text-align: left;
    border-bottom: 1px solid grey;
    margin: 0;
    padding-top: 8px;
    font-size: 1.1rem;
  }
  nav a:not(:first-child) {
    display: none;
  }
  nav a.icon {
    float: right;
    display: block;
    padding-right: 15px;
  }
  nav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    padding-top: 7px;
  }
  nav.responsive a {
  	float: none;
    display: block;
    margin: 0;
    text-align: left;
    line-height: 30px;
  }
  #navlinks {
  	padding-top: 6px;
  	padding-bottom: 3px;
  }
  #navlinks:hover {
    background: #000;
  }
  main {
    width: 90%;
  }
  #specialties {
    font-size: 1rem;
  }
  #specialties img {
    width: 85%; 
    height: 120px;
  }
  .subscriptionverify {
    font-size: 1.6rem;
  }
}

@media only screen and (max-width: 700px), (orientation: portrait) {
  #contact {
    font-size: 1.1rem;
  }
}

@media only screen and (max-width: 300px), (orientation: portrait) {
  main {
    width: 98%;
    padding-left: 4px;
  }
  body {
  font-size: 1.1rem;
  }
  h1 {
    font-size: 1.5rem;
  }
  #specialties {
    font-size: 0.8rem;
    font-weight: bold;
  }
  #specialties img {
    width: 96%; 
    height: 105px;
  }
  footer {
    font-size: 0.9rem;
  }
  footer img {
    width: 14%;
    height: auto;
  }
}
