/* CSS Document for Screens */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Amatic+SC:400,700);

body { font-family: 'Amatic SC', sans-serif;font-size:48px;font-weight:300;background-color:#000000;color:#ffffff;margin:0;padding:0}

#page { max-width:1200px; margin:0 auto; position: relative; }

/* Text */

h1 { margin:0; padding:0; font-size:1em; font-weight:700; }
h2 { margin:0; padding:0; font-size:0.75em; font-weight:700;color: #ffff00;}
h3 { margin:0; padding:0; font-size:0.5em; font-weight:700}
h4 { margin:0; padding:0; font-size:1em; font-weight:700}

p { margin:0; padding:0; font-size:1em; font-weight:700; }

h1 a { text-decoration: none }
h1 a:link {  text-decoration: none}
h1 a:visited {  text-decoration: none}
h1 a:hover { text-decoration: underline}

h2 a { text-decoration: none;color: #ffff00 }
h2 a:link {  text-decoration: none;color: #ffff00}
h2 a:visited {  text-decoration: none;color: #ffff00}
h2 a:hover { text-decoration: underline;color: #ffff00}

.submit {font-size:1em; border:1px solid #ffff00;color:#ffff00; background-color:transparent;
         margin-top: 10px; padding:4px 15px;font-family: 'Amatic SC', sans-serif;}
.submit:hover {background-color: rgba(0,0,0,.3); }

/* Header */

header {
	position: relative;
    -ms-transform: rotate(-3deg); /* IE 9 */
    -webkit-transform: rotate(-3deg); /* Chrome, Safari, Opera */
   transform: rotate(-3deg);
    }
header img {margin-top:40px;width:100%;}
header div.intouch {position:absolute; top:10%;left:20px;text-shadow: 1px 1px #000000;}
header div.intouch h1 {font-size:1.5em;}
header div.subscription {margin-top:40px;width:100%; position:absolute; top:0px; right:0px;}
header div.subscription aside {float:right; margin:10px;}

/* Section All */

section {padding:30px 30px; }
section::after { content:''; display:block; clear:both; }

header div.links { position:absolute; bottom:5%; right:2.4%;}
header div.links aside {float:right; margin-right:0px;}
header div.links aside .box {padding: 8px 8px 8px 8px;text-align:center;}
header div.links aside .box img {display:block; margin-left:auto; margin-right:auto; margin-bottom:0px; width:45px; height:45px;}

.subscription-tiny {display:none;}
.intouch-tiny {display:none;}

section.links2 { position:relative;}
section.links2 aside {float:right; margin-right:0px;}
section.links2 aside .box {padding: 8px 8px 8px 8px;text-align:center;}
section.links2 aside .box img {display:block; margin-left:auto; margin-right:auto; margin-bottom:0px; width:45px; height:45px;}

section.gcontent {position:relative;padding-top:0px;padding-bottom:0px;}
section.gcontent aside {width:100%; float:left; /*margin-right:0px;*/}
section.gcontent aside img {float:left; padding: 10px 30px 0px 0px;}        /* gives space to RHS of image */
section.gcontent aside .citem {padding: 30px 0px 0px 0px;}                  /* gives space at top of image */

footer {font-family: 'Open Sans', sans-serif;font-size:12px;font-weight:400;margin:0 0 30px 30px;}

/* Media Queries */

@media screen and (max-width:1199px) {

    section.gcontent aside img {width:50%}
    h1 {font-size:.85em;}
    header div.intouch h1 {font-size:1.2em;}
    h2 {font-size:.5em;}
	header img {width:100%; }
	header {  width:90%;   display: block; margin: 0 auto;}
}

@media screen and (max-width:825px) {

    h1 {font-size:.65em;}
    header div.intouch h1 {font-size:0.9em;}
    h2 {font-size:.4em;}
}

@media screen and (max-width:680px) {

    a.btn {font-size:1em;}
    header div.subscription {     width:80%;
                  clear:both; position:relative; top:auto; left:auto; display:none; }
    header div.intouch {width:80%;position:relative;text-align:center;top:auto;left:auto;bottom:auto;right:auto;clear:both; display:none;}
    header div.links { display:none; }

    .subscription-tiny {display:block; margin:0;}
    .subscription-tiny aside {float:left;margin:30px 0 0 30px;}
    .intouch-tiny {display:block; width:100%; margin:0 auto; }
    .intouch-tiny h1 {text-align: center; font-size:1.2em; }

    section.gcontent aside { float:none;margin-right:0px;}
    section.gcontent aside img {width:100%; float:none;}

    h1 {font-size:.75em;}
    h2 {font-size:.5em;}

    h3 { margin-bottom:0px;}
    a.btn {font-size:.9em;}

    section.links2 aside .box {padding: 10px 10px 10px 10px;text-align:center;}
}

@media screen and (max-width:315px) {
      .intouch-tiny h1 {text-align: center; font-size:1em; }
}