/* alex cartoon css - version 0.1 */

/* ++  home page ++ */

.home {
  padding: 10px 50px 20px 50px;
  display:grid;
  grid-template-columns: 1fr 1fr;
 grid-column-gap: 20px;
  grid-template-areas:
  "date date"
  "strip strip"
  "s-nav s-nav"
  "delay-message delay-message"
  "undr-strip undr-strip" 
  "bann-c bann-d"
  "bann-a bann-b";
}

.date {
  grid-area: date;
  padding: 5px 0 5px 0;
}

.strip {
  padding: 10px;
}

.s-nav {
  padding: 0 10px 0 10px;
  grid-area: s-nav;
  display: flex;
  justify-content: space-between;
}

.previous, .next  {
	width:155px;
	height:45px;
	background-repeat: no-repeat;
	background-size: 155px 55px;

}

.previous:hover, .next:hover  {
	opacity:0.8;
	width:158px;
	height:56px;
	background-size: 158px 56px;
}

.previous {
	padding: 0px 0px 20px 10px;
	background-image:url('../img/previous-2.jpg');
}

.next {
 	float:right;
	background-image: url('../img/next-2.jpg');
	padding: 0px 0px 20px 0px; 
}


.undr-strip {
	grid-area: undr-strip;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0px 0 30px 0;
}

.telegraph {
  width: 220px;
  margin-top: 15px;
  margin-right: 10%;
}

.signed {
  margin-top: 17px;
  margin-left: 2%;
}

.share {
  width: 180px;
  margin: auto;
  background-color: #F0E2BE;
  text-align: center;
  padding:5px 10px 10px 10px;
}

.share-icons{
  column-count: 4;
  display:grid;
  padding:2px 0px 2px 2px;
  grid-template-columns: 1.3fr 1fr 1.15fr 1fr;
  grid-template-rows: 1;
  grid-template-areas:
  "twitter fb linkedin email";
}

.twitter {
  grid-area:twitter;
  width:27px;
  height:20px;
	background:url('../img/social/twitter.svg');
	background-size: 27px 20px;
}

.twitter:hover {
	background:url('../img/social/twitter-w.svg');
	background-size: 27px 20px;
}

.fb {
  grid-area:fb;
  width:15px;
  height:20px;
	background:url('../img/social/fb.svg');
	background-size: 15px 20px;
}

.fb:hover {
	background:url('../img/social/fb-w.svg');
	background-size: 20px 20px;
}

.linkedin {
  grid-area:linkedin;
  display:block;
  width:20px;
  height:20px;
	background:url('../img/social/linkedin.svg');
	background-size: 20px 20px;
}

.linkedin:hover {
	background:url('../img/social/linkedin-w.svg');
	background-size: 20px 20px;
}

.email {
  grid-area:email;
  display:block;
  width:30px;
  height:20px;
	background:url('../img/social/email.svg');
	background-size: 30px 20px;
}

.email:hover {
	background:url('../img/social/email-w.svg');
	background-size: 30px 20px;
}

.bann-a {
  grid-area: bann-a;
  margin-top: 20px;
}

.bann-b {
  grid-area: bann-b;
  margin-top: 20px;
}

.bann-c {
  grid-area: bann-c;
  margin-top: 20px;
}

.bann-d {
  grid-area: bann-d;
  margin-top: 20px;
}

.delay-message  {
	grid-area: delay-message;
}


.delay-message img {
	margin:0 auto 8px auto;
	max-width: 400px;
	height:auto;
}


@media only screen and (min-width:1750px){

.home {
  padding-right:200px;
  padding-left: 200px;  
}
}

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

.home {
  padding: 10px;
  display:grid;
  grid-template-areas:
  "date date"
  "strip strip"
  "s-nav s-nav"
  "delay-message delay-message"
  "undr-strip undr-strip"
  "bann-a bann-b"
  "bann-c bann-d";
}

.bann1 {
  margin-bottom: 30px;

}
}

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

.home {
  padding: 0px;
  grid-template-columns: 1fr;
  grid-template-areas:
  "bann-a"
  "date"
  "strip"
  "s-nav"
  "delay-message"
  "undr-strip" 
  "bann-b"
  "bann-c"
  "bann-d";
}

.bann-a img {
  max-width: 100%;
  height:auto;
}

.bann-a {
  margin: 0px 0px 0px 0px;
  height: auto; 
  /*background:url('../img/banners/banner-mobile.jpg');  
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-repeat: 0;
  */
}
}


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

 .bann-a {
  height: 170px;
} 

.share {
  margin: 20px;
}

.telegraph {
  margin: 20px 0 0 0;
}

.signed {
  margin: 0px;
}
}

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

.bann-a {
  height: 150px;
}

.fb {
  margin:auto;
}

.previous, .next {
	width:105px;
	height:40px;
	background-size: 105px 40px;
}

.previous:hover, .next:hover  {
  opacity:0.8;
  width:108px;
  height:41px;
  background-size: 108px 41px;
}

}

/* ++  contact ++ */

.contact-us {
 padding: 15px 0 50px 0;
 display: grid;
 grid-template-columns: 1fr 500px 500px 1fr;
 grid-template-rows: 4;
 grid-template-areas:
 "mailing-t mailing-t mailing-t mailing-t"
 ". mailing-list mailing-list ."
 ". contact-t contact-t ."
 ". contact-box blackberry .";
}

.mailing-t {
  grid-area: mailing-t;
  margin-bottom: 15px;

}

.mailing-list {
  grid-area: mailing-list;
  padding: 0 20% 0 20%;
}

.mail-head {
 margin: 0 0 10px 0;
 text-align: center;
}

.email-box {

   display: grid;
   border: 2px solid #F0E2BE;
   margin-top:10px;
   padding: 25px;
   grid-template-columns: 90px auto;
   grid-template-areas: 
   "label-email email-input"
   ". join"
}

.label-email {
  grid-area: label-email;
  padding-top: 5px;
}

#email-input {
  grid-area: email-input;
}

input.text, textarea.textarea {
  width: 100%;
  height:45px;
  font-size: 18px;
  color: #7B7B7B;
  background-color: #F0E2BE;  
  font-family: verdana, serif;
  border: none;
  text-align: left;
  padding-left:10px;
}

textarea.textarea {
  height:100px;
  padding-top:5px;
	margin-bottom:10px;
}

input.text:focus {
  border: 1px solid #FFD362;
}

textarea.textarea:focus {
  border: 1px solid #FFD362; 
}

.black-button2 {
  margin: 0;
}

.join {
  grid-area: join;
}

.send {
  grid-area: send;
}

.join, .send {
  width: 150px;
  margin-top: 20px;
  justify-self: end;
  margin: 20px -8px 0 0;
}


.blackberry {
  grid-area: blackberry;
  width: auto;
   margin: 5px 0 0 30px;
  /*-- align-items: center;
  justify-self: center;
  background-image: url('../img/biz-chair.jpg');
  width: 480px;
  height: 361px;
  background-size: 100% 100%; --*/
}

.contact-t {
  grid-area: contact-t;
  margin: 25px 0 15px 0;
}

.contact-box {
  grid-area: contact-box;
  display: grid;
  border: 2px solid #F0E2BE;
  margin: 10px 0 8px 0;
  padding: 25px;
  grid-template-columns: 90px auto;
  grid-template-rows: 60px 60px 100px auto; 
  grid-template-areas: 
  "label-email email-input"
  "lable-name name-input"
  "message-label message"
  ". send"
}

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

.blackberry {
  margin: 5px 100px 0 30px;
}

  }


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

.contact-us {
 padding: 15px 10px 50px 10px;
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 grid-template-rows: 5;
 grid-template-areas:
 "mailing-t mailing-t mailing-t"
 ". mailing-list ."
 ". contact-t ."
 ". contact-box ."
 ". blackberry .";
}

.mailing-list {
  padding: 0px;
}

.contact-t {
  margin:15px;
}

.mail-head {
 margin-top: 0px;
}

.blackberry {
  margin: 10px 0 0 10px;
}
}

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



.contact-box {
  grid-area: contact-box;
  display: grid;
  border: 2px solid #F0E2BE;
  margin-top:10px;
  padding: 25px;
  grid-template-columns: 90px auto;
  grid-template-rows: 70px 70px 75px auto;
  grid-template-areas: 
  "label-email email-input"
  "lable-name name-input"
  "message-label message"
  ". send"
}

.email-box {
  display: grid;
  border: 2px solid #F0E2BE;
  margin-top:10px;
  padding: 10px 20px 15px 10px;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "label-email" 
  "email-input"
  "join";

}

.mail-head {
 text-align: center;
}

.label-email, .label-name, .message-label {
  justify-self: start;

}

.join {
  width: 100%;
}

.send {
  width: 100%;
}

.contact-t {
  margin-top:40px;
}

.contact-box {
  grid-area: contact-box;
  display: grid;
  border: 2px solid #F0E2BE;
  margin-top:10px;
  padding: 25px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
  "label-email" 
  "email-input"
  "lable-name" 
  "name-input"
  "message-label"
  "message"
  "send"
}

.blackberry {
  margin: 10px 0 0 10px;
  width: 288px;
  height: 218px;
}
}