@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Lato:300,400");
/* Montserrat:300,400,500,600||Zilla+Slab:300,400,500,600,700|Patua+One */

:root {
    --drjg-dark-blue: #284255;
    --drjg-light-blue: #00a7cf;
    --drjg-light-grey: #efe9e7;
    --drjg-sides: #284255; 
    --drjg-altfontcolor: #3d7f8f;
    --drjg-edge: #d3e0eb;
    --drjg-gal-back: #0c161d;

    --drjg-grn-lightest: #f0f0f8;
    --drjg-grn-light: #b8e1d9;
    --drjg-grn-mid: #5ebaa6;
    --drjg-grn-darker: #237c6c;
    --drjg-grn-darkest: #2d554a;

    --drjg-turq-bg: #f5f5f5;
    --drjg-turq-lightest: #dae4e5;
    --drjg-turq-light: #94c0c2;
    --drjg-turq-mid: #69c0c2;
    --drjg-turq-darker: #296e6b;
    --drjg-turq-darkest: #2b4a4a;

    --drjg-teal-bg: #f5f5f5;
    --drjg-teal-lightest: #dae4e5;
    --drjg-teal-light: #66b2b2;
    --drjg-teal-mid: #008080;
    --drjg-teal-darker: #006666;
    --drjg-teal-darkest: #004c4c;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


body {
  margin: 0px;
  font-family: "Open Sans", "sans-serif";
  font-size: 62.5%;
  font-weight: 300;
  background-color: var(--drjg-teal-bg);
  color: var(--drjg-teal-darkest);
}


html * {max-height:1000000px;}
p { max-height: 999999px; }

h1,
p {
  font-size: 1.6em;
  margin: 5px 0 5px 0;
}

h1 { font-size: 3.5em; }
h2{ font-size: 2.2em; }
h3 { font-size: 1.8em; }

/* no grid support? */
/* TODO NOW */

#wrapper {
    display: grid;
    grid-template-columns: minmax(10px, auto) minmax(150px, 940px) minmax(10px, auto) ;
    grid-template-rows: auto auto 1fr 40px;
    gap: 0px;
    grid-template-areas: "left vtopbanner right" "left topbanner right" "left maincontent right" "left footer right";
    /* align-items:center;  */
    background-color: var(--drjg-teal-bg);
    margin: 10px 0 10px 0;
} 

#vtopbanner {
  display: grid;
  grid-area: vtopbanner;
  grid-template-columns: 1fr 44px 44px 44px 44px 60px;
  align-items:center; 
  /* background-color: var(--drjg-teal-mid); */
  border-radius: 10px;
  color: white;
  margin: 0px 0 0px 0;
  padding: 0px 20px 0 20px;  
  
}

/* #email-link, #insta-link, #tel-link {
  display:flex;
  align-items:center;
} */
#vtop-l, #vtop-r { 
    height: 2px;
    border: 0;
    background-color: var(--drjg-teal-darker);
    margin: 0px 20px 0px 20px;
}
#vtop-r {
  margin-left: 0px;
}

#vtop-l {     grid-area: 1 / 1 / 1 / 2; }
#linkedin-link-img {   grid-area: 1 / 2 / 1 / 3; }
#insta-link-img {   grid-area: 1 / 3 / 1 / 4; }
#email-link-img {   grid-area: 1 / 4 / 1 / 5; }
#tel-link-img {     grid-area: 1 / 5 / 1 / 6; }
#vtop-r {     grid-area: 1 / 6 / 1 / 7; }

#email-link-img, #insta-link-img, #tel-link-img, #linkedin-link-img {
  display: flex;
  align-items: center;
  background-position: 50% 50%;
}

#email-img, #insta-img, #tel-img, #linkedin-img {
  /* display: flex; */
  align-self: center;
  background-position: 50% 50%;
  content: "";  
  width: 26px;
  height: 26px;
  
}
#email-img {
  background: transparent url('/images/envelope.svg') center center no-repeat;
  margin: 0 0px 0 0x;
  align-self: center;
}
#insta-img {
  margin: 0 0px 0 0px;
  background: transparent url('/images/instagram.svg') center center no-repeat;
}
#linkedin-img {
  background: transparent url('/images/linkedin-in.svg') center center no-repeat;
  margin: 0 0px 0 0px;
}
#tel-img {
  background: transparent url('/images/phone-outline-4.svg') center center no-repeat;
  margin: 0 0px 0 0px;
}

#email-link-img, #insta-link-img, #tel-link-img, #linkedin-link-img {
  margin: 0px 0px 0px 0px;
}

/* Top Banner */
#topbanner {
  display: grid;
  grid-area: topbanner;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "bannerleftimg" "bannerrighttext";
  background-color: var(--drjg-teal-darker);
  color: white;
  margin: 20px 40px 10px 40px;
  padding: 0 10px 0 10px;
  border-radius: 5px;
}
#bannerbot {
  display: none;
  grid-area: 2 / 1 / 3 / 3;
}

#bannerleftimg {
  display: grid;
  grid-area: 1 / 1 / 1 / 2;
  padding: 0;
  margin: 10px 0 10px 0;
}

#bannerrighttext {
  display: grid;
  grid-area: 1 / 2 / 1 / 3;
  grid-template-areas: "bannerrighttexttop bannerrighttexttopright" "bannerrighttextmid bannerrighttextmid" "bannerrighttextbot bannerrighttextbot";
  grid-template-columns: max-content 1fr;
  grid-template-rows: auto auto auto;  
  padding: 0;
  margin: 0px 0 0px 25px;
}

#bannerrighttexttop {
  display: grid;
  grid-area: bannerrighttexttop;
  padding: 0;
  margin: 10px 0 0px 0px;
  align-self: center;
}
#bannerrighttexttopright {
  display: grid;
  grid-area: bannerrighttexttopright;
  padding: 0;
  margin: 0px 0 10px 15px;
  align-self: flex-end;
}
/* #bannerrighttexttopright h1 {
  margin: 0;
  padding: 0;
} */
#bannerrighttexttopright h2 {
  font-size: 2em;
  /* margin: 0; */
}
#bannerrighttextmid {
  grid-area: bannerrighttextmid;
  padding: 0;
  margin: 0px 0 0px 0px;
  align-self: top;
}
#bannerrighttextbot {
  grid-area: bannerrighttextbot;
  padding: 0;
  margin: 0px 0 15px 0px;
  align-self: end;
}

#topbanner h1 {
  font-family: "Open Sans", "sans-serif";
  font-weight: 600;
  padding: 0;
  margin: 0;
}
#topbanner h2 {
  font-family: "Open Sans", "sans-serif";
  font-weight: 300;
  padding: 0;
  margin: 8px 0 0px 0px;
}
#topbanner h3 {
  font-family: "Open Sans", "sans-serif";
  font-weight: 300;
  font-style: italic;
  padding: 0;
  margin: 0px 0 0px 0px;
}

.head-img {
  display: flex;
  content: "";
  /* background: transparent url('../images/head2.jpg') center left no-repeat; */
  height: 150px;
  border-radius: 5px;
}

/* Content */
#maincontent {
  display: grid;
  grid-area: maincontent;
  /* grid-template-columns: auto ; */
  grid-template-areas: "header" "detail" "header2" "detail2" "header3" "contact";
  grid-template-rows: auto auto auto auto auto auto;
  row-gap: 0px;
  margin-top: 10px;
  /* font-size: 1.6em; */
}


.header {
  display: grid;
  font-family: "Lato", "sans-serif";
  grid-area: header;
  grid-template-columns: 1fr max-content 1fr;
  /* background-color: var(--drjg-teal-mid); */
  align-items: center;
  padding: 0px 20px 1px 20px; 
  margin: 0px 0px 0px 0px;
  color: var(--drjg-teal-darker);
  border-radius: 10px;
}

.header h2, .header2 h2 , .header3 h2 {
  font-family: "Open Sans", "sans-serif";
  font-weight: 400;
  padding: 0;
  margin: 0px 0 0px 0px;
  text-align: center;
  font-size: 2em;
}

#hl,#hr {
  height: 2px;
  border: 0;
  background-color: var(--drjg-teal-darker);
  margin: 0px 20px 0px 20px;
}


#header { grid-area: 1 / 1 / 2 / 1; }
#detail { grid-area: 2 / 1 / 3 / 1; }
#header2 { grid-area: 3 / 1 / 4 / 1; }
#detail2 { grid-area: 4 / 1 / 5 / 1; }
#header3 { grid-area: 5 / 1 / 6 / 1; }
#contact { grid-area: 6 / 1 / 7 / 1; }

/* Content */
.detail {
  grid-area: detail;
  padding: 0;
  margin: 0 0 10px 0;
  font-size: 1.2em;
}
.detail p {
  color: #284255;
  font-weight: 300;
  padding: 0px 50px 10px 50px;
  margin-top: 15px;
}

.detail h2 {  
  text-align: center;
  text-transform: uppercase;
  font-weight: 300;
  color: #284255;
  margin: 10px 0px;
}

.detail a {
  /* font-size: 1.1em; */
  /* font-weight: 400; */
  text-decoration: none;
  color: #00a7cf;
}
.detail a:hover {
  /* font-weight: 400; */
  text-decoration: underline;
  /* color: #284255; */
}

/* Footer */
#footer {
  grid-area: footer;
  font-size: 1.2em;
  font-weight: 300;
  padding: 8px 18px 7px 0px;
  margin-top: 20px;
  margin-bottom: 12px;
  text-align: right;
  color: var(--drjg-teal-light);
  /* background-color: var(--drjg-teal-mid); */
  border-top: none;
  border-style: none;
  border-radius: 10px;
}


/* Contact Links */
#contact-links {
  display: grid;
  grid-template-columns: 3em 1.5fr 3em 1fr;
  grid-template-rows: 3em 3em;
  grid-column-gap: 10px;
  grid-row-gap: 20px;
  align-items:center;
  margin: 20px 100px 40px 120px;
  text-align: left;
  font-size: 1.4em;
}

#contact-links a {
  font-family: "Lato", "sans-serif";
  font-weight: 400;
  color: var(--drjg-teal-darker);
}

#cp-tel-link-before-img { grid-area: 1 / 1 / 1 / 2; }
#cp-email-link-before-img { grid-area: 1 / 3 / 1 / 4; }
#cp-insta-link-before-img { grid-area: 2 / 1 / 2 / 2; }
#cp-linkedin-link-before-img { grid-area: 2 / 3 / 2 / 4; }

#cp-tel-link-before {
  grid-area: 1 / 2 / 1 / 3;
  /* font-size: 1.1em; */
}
#cp-email-link-before {
  grid-area: 1 / 4 / 1 / 5;
  /* font-size: 1.1em; */
}
#cp-insta-link-before {
  grid-area: 2 / 2 / 2 / 3;
  /* font-size: 1.1em; */
}
#cp-linkedin-link-before {
  grid-area: 2/ 4 / 2 / 5;
  /* font-size: 1.1em; */
}

#cp-tel-img, #cp-email-img, #cp-insta-img, #cp-linkedin-img{
  display: block;
  content: "";
  background: transparent url('/images/phone-outline-4.svg') center center no-repeat;
  width: 2.5em;
  height: 2.5em; 
}
#cp-email-img {
  background: transparent url('/images/envelope.svg') center center no-repeat;
}
#cp-insta-img {
  background: transparent url('/images/instagram.svg') center center no-repeat;
}
#cp-linkedin-img {
  background: transparent url('/images/linkedin-in.svg') center center no-repeat;
}

/* -====== Responsive ======- */
/* Tablet*/
@media screen and (max-width: 60em) {
  body {
    margin: 0px;    
  }
  /* h1 { font-size: 2em; } */

  #topbanner {
    /* padding-left: 20px; */
    /* padding-right: 20px; */
  }

  #topbanner h1 {
    /* font-size: 2.5em; */
    /* padding: 0; */
    /* margin:0px 0 0 0; */
  }
  #topbanner h2 {
    font-size: 2em;
    /* padding: 0 0px 0 0; */
    /* margin: 0 0px 0 0; */
  }    
  
  #topbanner h3 {
    font-size: 1.8em;
    /* padding: 0; */
    /* margin: 0px 0 8px 0px; */
    /* text-align: center; */
  }

  #bannerrighttext {
    grid-template-rows: min-content auto auto; 
    grid-template-columns: max-content 1fr;
    /* grid-template-areas: "bannerrighttexttop" "bannerrighttexttopright" "bannerrighttextmid" "bannerrighttextbot" */
  }

  #bannerrighttexttop {
    display: grid;
    grid-area: bannerrighttexttop;
    padding: 0;
    margin: 10px 0 0px 0px;
    align-self: auto;
  }
  #bannerrighttexttopright {
    display: grid;
    grid-area: bannerrighttexttopright;
    padding: 0;
    margin: 0px 0 5px 15px;
    /* align-self: auto; */
    /* text-align: end; */
  }
  #bannerrighttexttopright h2 {
    font-size: 1.8em;
    /* margin: 0; */
  }

  .detail p {
    /* padding-left: 20px;
    padding-right: 20px; */
  }
}

/* Mobile */
@media screen and (max-width: 40em) {
    body {
      margin: 0px;      
    }
    #wrapper {

    }

    #vtopbanner {
      padding: 0px 20px 0 20px;
      grid-template-columns: 1fr 44px 44px 44px 44px 1fr;
    }
    #vtop-l, #vtop-r {       
      /* margin: 0px 20px 0px 20px; */
    }
    #vtop-l { margin: 0px 10px 0px 0px  }
    #vtop-r { margin: 0px 0px 0px 10px }

    #email-link-img, #insta-link-img, #tel-link-img, #linkedin-link-img {
      /* display: flex; */
      /* align-self: center; */
      background-position: 50% 50%;
    }
    #email-img, #insta-img, #tel-img, #linkedin-img {
      margin-left: 9px
    }
    #insta-img {
      margin-left: 7px
    }
    #linkedin-img {
      
    }

    #topbanner {
      margin: 15px 20px 10px 20px;
      padding: 0 10px 0 10px;
      border-radius: 3px;

      grid-template-rows: 1fr auto;
    }

    #bannerbot {
      display: grid;
      grid-area: 2 / 1 / 3 / 3;
    }
    #bannerleftimg { 
      /* display: none; */
      margin: 10px 0 10px 0;
    }
    .head-img {     
      height: 100px;
      border-radius: 3px;
    }
    #bannerrighttext {
      margin: 10px 0 0px 12px;
    }
    #topbanner h1 {
      font-size: 2.5em;
      padding: 0;
      margin:0px 0 0 0;
    }
    #topbanner h2 {
      font-size: 1.3em;
      padding: 0 10px 0 0;
    }    
    
    #topbanner h3 {
      font-size: 1.4em;
      padding: 0;
      margin: 0px 0 8px 0px;
      text-align: center;
    }
    #bannerrighttext {
      grid-template-rows: max-content min-content 1fr;
      grid-template-columns: auto;
      grid-template-areas: "bannerrighttexttop" "bannerrighttexttopright" "bannerrighttextmid"
    }

    #bannerrighttexttop {
      padding: 0;
      margin: 0px 0 0px 0px;
      align-self: center;
    }
    #bannerrighttexttopright {
      display: grid;
      grid-area: bannerrighttexttopright;
      padding: 0;
      margin: 0px 0 0px 0px;
    }
    #bannerrighttexttopright h2 {
      font-size: 1.2em;
      padding: 0;
      margin: 0px 0 0px 0px;
    }
    #bannerrighttextmid {
      padding: 0;
      margin: 0px 0 0px 0px;
      align-self: bottom;
    }
    #bannerrighttextbot h3 {
      display: none;
    }
    .header {      
      padding: 0px 0px 1px 0px; 
    }
    .header h2, .header2 h2 , .header3 h2{
      font-size: 1.8em;
    }

    .detail p {     
      margin-top: 6px;
    }
    .detail p {
      padding: 0px 20px 0px 20px;
      font-size: 1.4em;
    }

    #contact-links {
      /* display: none; */
      grid-template-columns: 3em 1.5fr;
      grid-template-rows: 3em 3em 3em 3em;
      margin: 20px 20px 20px 50px;
    }


    #cp-tel-link-before-img {      grid-area: 1 / 1 / 2 / 2; }
    #cp-email-link-before-img {    grid-area: 2 / 1 / 3 / 2; }
    #cp-insta-link-before-img {    grid-area: 3 / 1 / 4 / 2; }
    #cp-linkedin-link-before-img { grid-area: 4 / 1 / 5 / 2; }

    #cp-tel-link-before {
      grid-area: 1 / 2 / 2 / 3;
      /* font-size: 1.1em; */
    }
    #cp-email-link-before {
      grid-area: 2 / 2 / 3 / 3;
      /* font-size: 1.1em; */
    }
    #cp-insta-link-before {
      grid-area: 3 / 2 / 4 / 3;
      /* font-size: 1.1em; */
    }
    #cp-linkedin-link-before {
      grid-area: 4 / 2 / 5 / 3;
      /* font-size: 1.1em; */
}

}

/* Mobile small */
@media screen and (max-width:320px) {
}