/* 	simplesass3.scss 	Nov 2017 */
/*	_fonts
	nov 2017
*/
/*
fonts @font-face
Value	Common weight name

100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

*/
@font-face {
  font-family: "Mosk";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Mosk400.ttf") format("truetype");
}
@font-face {
  font-family: "Mosk";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/Mosk600.ttf") format("truetype");
}
@font-face {
  font-family: "Clarendon";
  src: url("../fonts/Clarendon.ttf") format("truetype");
}
@font-face {
  font-family: "Crystal";
  src: url("../fonts/Crystalsymphony.ttf") format("truetype");
}
@font-face {
  font-family: "Parisienne", cursive;
}
/*	
 _functions.scss
	Nov 2017
*/
/************************************************/
/*
		VARS
	Nov 2017
*/
/* mixin
 Nov 2017
*/
html {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  color: #3A3A3A;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

h1 {
  line-height: 2.2rem;
}

.floatleft {
  float: left;
}

#MainContainer {
  display: grid;
  grid-template-areas: "header header header header header header header header header header" "hero hero hero hero hero hero hero hero hero hero" "nav nav nav nav nav langs langs side side side " "content content content content content content content side side side" "footer footer footer footer footer footer footer footer footer footer";
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto auto 1fr 1fr 1fr;
  grid-template-rows: 6vw auto 2rem 1fr auto;
  grid-gap: 0.6rem;
  height: 100vh;
  color: #3A3A3A;
}

header {
  grid-area: header;
  margin: 0rem 1.5rem;
  display: grid;
  grid-gap: 0.1rem;
  grid-template-areas: "logo";
  grid-template-columns: 84%;
  grid-template-rows: 6vw;
  grid-gap: 0.5rem;
}

.showbrowser {
  display: inline;
  font-size: 20px;
  float: left;
  color: white;
}

#BlockLogo {
  grid-area: logo;
  margin: 0rem 0.375rem;
  align-self: end;
}
#BlockLogo img {
  width: 60%;
}

.Hero {
  grid-area: hero;
  height: 470px;
}

.BlockHero {
  background: url("../img/street.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}

.BlockHeroSectores {
  background: url("../img/Patchwork_black_1000_2.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 94%;
  margin: 0 auto;
}

.BlockHeroGDD {
  background: url("../img/manholdinghishead2000x1333.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}

.BlockHeroContacto {
  background: url("../img/norway1200x300at240.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}

.BlockHeroNosotros {
  background: url("../img/montserrat1200x300at120.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}

.BlockHero #Motto {
  float: left;
  margin-top: 4%;
  margin-left: 3%;
}

.BlockHeroKeys #Motto {
  float: left;
  margin-top: 2%;
  margin-left: 61%;
  font-size: 30.3184239775px;
}

#Motto {
  font-size: 39.150857409px;
  height: 75%;
  width: 90%;
  margin: 0 auto;
}
#Motto #MottoH {
  width: 100%;
  height: 30px;
  position: relative;
  top: 240px;
  font-family: "Mosk";
  font-weight: bold;
  letter-spacing: 3px;
  color: white;
  text-shadow: 2px 2px #404040;
}
#Motto #MottoP {
  font-family: "Parisienne";
  font-weight: 600;
  font-style: italic;
  width: 100%;
  height: 50px;
  font-size: 2.6rem;
  letter-spacing: 5px;
  line-height: 1.82rem;
  color: white;
}

#BlockMenuNav {
  margin-left: 1.5rem;
}
#BlockMenuNav .MenuNav {
  width: 85%;
}
#BlockMenuNav .MenuNav li {
  float: left;
  width: 21%;
  margin: 0 0.2rem;
  text-align: center;
  font-size: 18.1818181818px;
}
#BlockMenuNav .MenuNav a {
  display: block;
  padding: 0.3rem;
  background-color: #06567D;
  color: white;
  text-decoration: none;
  border: none;
}
#BlockMenuNav .MenuNav a:hover {
  transition: background-color 0.75s ease;
  background-color: #C66A00;
}
#BlockMenuNav .MenuNav a:visited {
  xbackground-color: #00009a;
  xcolor: paleblue;
}

#BlockMenuNav {
  grid-area: nav;
}

#BlockLangs {
  grid-area: langs;
  margin: 0;
}
#BlockLangs .MenuLangs {
  /* preferred order LVFHA last vintage FUR hat available
  https://tympanus.net/codrops/css_reference/visited/ 		*/
}
#BlockLangs .MenuLangs ul {
  margin-top: 15px;
}
#BlockLangs .MenuLangs li {
  float: right;
  width: 2.2rem;
  text-align: center;
  font-size: 14.08px;
}
#BlockLangs .MenuLangs a {
  position: relative;
  text-decoration: none;
  width: 1.1rem;
  height: 1.1rem;
  background: none;
  color: #06567d;
  display: block;
}
#BlockLangs .MenuLangs a:after {
  content: "";
  position: absolute;
  bottom: 0rem;
  left: 0;
  width: 0%;
  border-bottom: 2px solid #06567D;
  transition: 0.3s;
}
#BlockLangs .MenuLangs a:hover:after {
  width: 100%;
  cursor: pointer;
}

main {
  text-align: justify;
  text-justify: inter-word;
  grid-area: content;
  background: #FFFFE4;
  font-size: 0.85rem;
  margin: 0 1.5rem;
  /*
  	#euflag {
  		@if ($showborders==true) {
  			border:solid 2px green;
  		}
  		width:map-get($euflagwh, w); height:map-get($euflagwh, h);
  		float: left;

  //		@debug 'euflag... flag is ' + $f_euflag;
  		@if ($f_euflag==false) {
  			display:none;
  		}
  		@else {
  			display:block;
  		}
  	}
  	.svgeuflag {
  		width:map-get($euflagwh, w); height:map-get($euflagwh, h);
  		@if ($showborders==true) {
  			border:solid 2px pink;
  		}
  	}
  	*/
}
main h1 {
  font-weight: bold;
  font-size: 1.6rem;
}
main p {
  line-height: 1.3rem;
}
main #maintitle, main #mainkeys, main #mainbodycontacto, main #mainbodynosotros, main #subscribelabel, main #mainbodygdd {
  padding: 1rem 1.8rem;
}
main #mainbody, main #mainbodygdd {
  padding: 0 1.8rem 1rem 1.6rem;
}
main #formsubscribe input[type=text] {
  font-size: 1rem;
  color: #C66A00;
}
main #formsubscribe input[type=submit] {
  font-size: 1rem;
}
main #mainkeyschoice {
  clear: both;
  float: left;
}
main #mainkeystitle h1 {
  font-size: 2.1rem;
  padding-left: 1.8rem;
}
main #mainkeys {
  padding-left: 2.4rem;
}
main #mainkeys h2 {
  font-family: "Noto sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 200;
}
main #mainkeys p {
  padding-right: 1.2rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
main #mainkeys .topicimg {
  display: none;
  background-size: cover;
  background-repeat: no-repeat;
  width: 75px;
  height: 55px;
  float: left;
}
main #logos {
  height: 10vh;
  border-top: 1px solid #444444;
  margin-top: 10px;
}
main #logos img {
  height: 100px;
}
main .half {
  width: 45%;
  float: left;
}
main .center {
  display: block;
  margin: 0 auto;
}

aside {
  grid-area: side;
  margin: 0 1.5rem;
  font-size: 0.95rem;
  align-items: center;
}
aside #datiumON {
  border: solid 1px grey;
  border-radius: 20px;
  margin: 10px;
}
aside #datiumON h1 {
  text-align: center;
  background: grey;
  color: white;
  margin: 0.9rem auto;
  font-size: 23.4785875282px;
  border-radius: 14px;
  width: 60%;
  box-shadow: 3px 3px #A0A0A0;
}
aside #datiumON #datiumONinner p {
  padding: 0.8rem 1rem 0rem 1rem;
  font-size: 14.08px;
  line-height: 1.1rem;
  color: #3A3A3A;
}
aside #datiumON #datiumONinner .blog_button {
  background: transparent;
  border: 1px solid grey;
  text-align: center;
  display: block;
  height: 2.1rem;
  font-weight: bold;
  color: #04354c;
  width: 60%;
  margin: 1rem auto;
  font-size: 14.08px;
  border-radius: 10px;
}
aside #datiumON #datiumONinner .blog_button:hover {
  cursor: hand;
}
aside #datiumON #datiumONinner .blog_button a {
  text-decoration: none;
}
aside #datiumON #datiumONinner .blog_button a:visited {
  color: #04354c;
}

#formsubscribe {
  font-size: 1rem;
  border: 1px solid #C66A00;
  height: 13rem;
  width: 80%;
  margin: 0 auto;
}
#formsubscribe div {
  margin: 0 1rem;
}
#formsubscribe label, #formsubscribe input {
  display: inline-block;
  width: 40vw;
  float: left;
  margin: 0.5rem 0.8rem;
}
#formsubscribe input[type=submit] {
  width: 10vw;
  clear: both;
}

#canvas {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fff8dc+0,c9efd2+100 */
  background: #fff8dc;
  /* Old browsers */
  background: -moz-linear-gradient(top, #fff8dc 0%, #c9efd2 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #fff8dc 0%, #c9efd2 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #fff8dc 0%, #c9efd2 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fff8dc", endColorstr="#c9efd2",GradientType=0 );
  /* IE6-9 */
  margin: 0 auto;
  width: 90%;
  height: 300px;
  border: 1px solid grey;
  overflow: hidden;
  text-align: left;
}

.particle {
  font-family: "Noto Sans", sans-serif;
  font-weight: bold;
  position: absolute;
  visibility: hidden;
  padding: 0rem 1rem;
  float: left;
}

footer {
  grid-area: footer;
  width: 100vw;
  margin: 0 1.5rem;
  background: #323030;
  text-align: center;
  padding: 0.6rem 0.8rem;
  font-family: "Gudea", serif;
  font-size: 0.72rem;
}

#footernotice {
  display: grid;
  grid-template-areas: "link email telephone photoby dimensions";
  grid-template-columns: 2fr 4fr 2fr 6fr 5fr;
  grid-template-rows: 1fr;
  grid-gap: 0.5rem;
}
#footernotice div {
  color: white;
  height: 1.5rem;
}
#footernotice .dimensions {
  display: none;
}
#footernotice .footerlink {
  grid-area: link;
}
#footernotice .footerlink a:hover {
  color: maroon;
}
#footernotice .footerlink a:visited {
  color: wheat !important;
}
#footernotice .footeremail {
  grid-area: email;
}
#footernotice .footertelephone {
  grid-area: telephone;
}
#footernotice #PhotoBy {
  grid-area: photoby;
}

@media screen and (max-width: 960px) {
  #footernotice {
    display: grid;
    font-size: 0.9rem;
    grid-template-areas: "link" "email" "telephone" "photoby" "dimensions";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 0.2rem;
  }
}
@media screen and (min-width: 1200px) {
  html {
    font-size: 20px;
  }

  .dimensions:after {
    content: " bk min-1200";
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 18px;
  }

  .dimensions:after {
    content: " bk-1200";
  }

  .MenuNav a {
    font-size: 18.1818181818px;
    color: red;
  }

  .BlockHeroKeys #Motto {
    font-size: 23.4785875282px;
  }

  #Motto {
    font-size: 30.3184239775px;
    color: green;
  }
}
/***********************************************************/
/********************** 960px ******************************/
/***********************************************************/
@media screen and (max-width: 960px) {
  html {
    font-size: 16px;
  }

  .dimensions {
    font-size: 0.8rem;
    font-style: normal;
    font-family: Arial;
  }
  .dimensions:after {
    content: " bk-960";
  }

  #MainContainer {
    grid-template-areas: "header header" "hero hero" "nav langs" "content content" "side side" "footer footer";
    grid-template-columns: 75% 1fr;
    grid-template-rows: 6vw auto auto 1fr auto auto;
    /* footer */
    grid-gap: 0.5rem;
  }
  #MainContainer header {
    grid-area: header;
  }
  #MainContainer .Hero {
    grid-area: hero;
  }
  #MainContainer .BlockHero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
  }
  #MainContainer .BlockHero #Motto {
    font-size: 20.6611570248px;
  }
  #MainContainer .BlockHero #Motto #MottoH {
    top: 60px;
  }
  #MainContainer .BlockHero #Motto #MottoP {
    font-size: 26.6802131002px;
  }
  #MainContainer .BlockHeroKeys {
    background: url("../img/sea1000x200at300.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
  }
  #MainContainer .BlockHeroContacto {
    background: url("../img/montserrat1000x200at120.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
  }
  #MainContainer .BlockHeroNosotros {
    background: url("../img/pc1000x200at120.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
  }
  #MainContainer #BlockMenuNav {
    grid-area: nav;
  }
  #MainContainer #BlockMenuNav .MenuNav a {
    font-size: 16px;
  }
  #MainContainer #BlockLangs {
    grid-area: langs;
  }
  #MainContainer #BlockLangs .MenuLangs ul {
    float: right;
  }
  #MainContainer main {
    grid-area: content;
    font-size: 1rem;
    line-height: 1.35rem;
  }
  #MainContainer #mainkeys p {
    font-size: 0.9rem;
    line-height: 1.35rem;
  }
  #MainContainer aside {
    grid-area: side;
    width: 60%;
    margin: 0 auto;
  }
  #MainContainer footer {
    grid-area: footer;
  }
}
/***********************************************************/
/********************** 768px ******************************/
/***********************************************************/
@media screen and (max-width: 768px) {
  html {
    font-size: 15px;
  }

  .dimensions:after {
    content: " -- 768 ";
  }

  #MainContainer {
    grid-template-areas: "header" "nav" "langs" "content" "side" "footer";
    grid-template-columns: 100%;
    grid-template-rows: 6vw auto auto 1fr auto auto;
    /* footer */
  }
  #MainContainer header {
    grid-area: header;
    margin: 0rem 1.5rem;
    align-self: end;
  }
  #MainContainer #BlockMenuNav {
    grid-area: nav;
  }
  #MainContainer #BlockMenuNav .MenuNav ul {
    margin: 0;
    background: #606060;
  }
  #MainContainer #BlockMenuNav .MenuNav ul li {
    height: 2.5rem;
    line-height: 2.5rem;
  }
  #MainContainer #BlockMenuNav .MenuNav ul a {
    background: none;
    font-size: 16px;
  }
  #MainContainer #BlockMenuNav .MenuNav ul a:hover {
    background: #C66A00;
    color: white;
  }
  #MainContainer #BlockLangs {
    grid-area: langs;
  }
  #MainContainer #BlockLangs .MenuLangs ul {
    margin-left: 2rem;
    float: left;
  }
  #MainContainer #BlockLangs .MenuLangs ul a {
    font-size: 14.08px;
    color: #C66A00;
  }
  #MainContainer #BlockLangs .MenuLangs ul a:hover {
    border-bottom: 1px solid #C66A00;
  }
  #MainContainer main {
    grid-area: content;
    font-size: 1.1rem;
    line-height: 1.35rem;
  }
  #MainContainer main h1 {
    font-size: 1.6rem;
  }
  #MainContainer aside {
    grid-area: side;
    font-size: 1rem;
    width: 85%;
    -webkit-column-count: 1;
    /* Chrome, Safari, Opera */
    -moz-column-count: 1;
    /* Firefox */
    column-count: 1;
  }
}
@media screen and (max-width: 600px) {
  .BlockHero .Hero {
    display: none;
    visibility: hidden;
  }

  .dimensions ::after {
    content: " -- 1200 ";
  }

  main {
    font-size: 1.1rem;
    line-height: 1.35rem;
  }
}
/**********************************************************/
/********************** END OF CODE ***********************/
/**********************************************************/

/*# sourceMappingURL=stylesass.css.map */