/*

Global CSS Normalizing and Defaults

*/

html { font-size: 100%; line-height: 1.0; box-sizing: border-box; overflow-y: scroll; }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }
* { font-family: inherit; line-height: inherit; color: inherit; padding: 0; margin: 0; }
*, *::before, *::after { box-sizing: inherit; }

body { width: 100%; font-size: 100%; }
img { display: block; max-width: 100%; border: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; }
ul { list-style: none; }
svg { display: inline-block; }

sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sup { top: -0.50em; }
sub { bottom: -0.25em; }

*.desktop { display: block !important; }
*.mobile { display: none !important; }
.group::after { content: ""; display: table; clear: both; }

div.container { width: 100%; }
div.container::after { content: ""; display: table; clear: both; }
div.container div.column { float: left; }





/*

Project Specific

*/

html { font-family: 'Source Sans Pro', sans-serif; font-weight: 300; color: #000; }
p { font-size: 125%; line-height: 1.6; margin: 0 0 30px 0; }
div.content-container { width: 100%; max-width: 1200px; background-color: #fff; margin: 0 auto 0 auto; }





/*

Web Fonts

*/

@font-face {
  font-family: 'MyWebFont';
  src: url('../fonts/name.woff2') format('woff2'),
       url('../fonts/name.woff') format('woff'),
       url('../fonts/name.ttf') format('truetype');
}



h2 { font-size: 187.5%; font-weight: 400; margin: 0 0 30px 0; }

header { padding: 0 0 40px 0; border-bottom: 1px solid #304ffe; margin: 25px 0 40px 0; }
header .social { margin: 0 0 75px 0; }
header .social ul { float: right; }
header .social li { float: left; width: 30px; margin: 0 0 0 15px; }
header .logo { width: 180px; }

main p a { font-weight: bold; }
main p a:hover { text-decoration: underline; }
main .intro-image { padding: 0 0 40px 0; border-bottom: 1px solid #304ffe; margin: 0 0 40px 0; }
main .text-block { padding: 0 0 20px 0; border-bottom: 1px solid #304ffe; margin: 0 0 30px 0; }
main .social { width: 100%; margin: 0 0 10px 0; }
main .social li { float: left; width: 25%; font-size: 15px; font-weight: normal; }
main .social a:hover { text-decoration: none; }
main .social li img { display: inline; vertical-align: middle; margin: 0 5px 0 0; }

footer { font-size: 81.25%; font-weight: normal; text-transform: uppercase; margin: 0 0 50px 0; }



/*

Responsive Styles

*/

@media only screen and (max-width: 767px) {
    *.desktop { display: none !important; }
    *.mobile { display: block !important; }
    div.content-container { width: 90%; }

    div.container div.column { width: 100% !important; }
    div.container div.column { padding-left: 0 !important; padding-right: 0 !important; }
    div.container div.column { margin-left: 0 !important; margin-right: 0 !important; }

    h2 { font-size: 150%; }
    p { font-size: 100%; }
    header .social { margin: 0 0 30px 0; }
    main .social li { width: 100%; margin: 0 0 20px 0; }

}



@media only screen and (min-width: 768px) and (max-width: 1023px) {
    div.content-container { width: 90%; }
}



@media only screen and (min-width: 1024px) {
    div.content-container { width: 90%; }
}