@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Lora|Playfair+Display:700i,900');

html,
body {
	margin: 100px 0 0 0;
	width: 100%;
	--ratio: 360 / 640;
}

h1,
h2,
p,
i,
a,
.first-letter,
.authorName a {
  color: rgba(0, 0, 0, 0.84);
  text-rendering: optimizeLegibility;
}

h1 {
  font-family: "Playfair Display", serif;
  font-size: 48px;
  text-align: left;
  margin-bottom: 8px;
}

h2 {
	font-family: "Lora", serif;
	font-size: 50px;
	font-weight: 700;
	padding: 0;
	margin: 56px 0 26px -1.883px;
	text-align: left;
/*	line-height: 40px;*/
	letter-spacing: -0.30px;
}

h3 {
	font-family: "Lora", serif;
	font-size: 25px;
	font-weight: 500;
	padding: 0;
	margin: 20px 0 50px -1.883px;
	text-align: left;
	line-height: 34.5px;
	letter-spacing: -0.30px;
}


/*
p, i, a {
  margin-top: 21px;
  font-family: "Lora";
  font-size: 21px;
  letter-spacing: -0.03px;
  line-height: 1.58;
}
*/
a {
  text-decoration: none;
}

blockquote {
  font-family: "Playfair Display", serif;
  font-size: 30px;
  font-style: italic;
  letter-spacing: -0.36px;
  line-height: 44.4px;
  overflow-wrap: break-word;
  margin: 55px 0 33px 0;
  /* text-align: center; */
  color: rgba(0, 0, 0, 0.68);
  padding: 0 0 0 50px;
}

  color: rgba(0, 0, 0, 0.68);
  padding: 0 0 0 50px;
}

  color: rgba(0, 0, 0, 0.68);
  padding: 0 0 0 50px;
}

code {
  font-size: 18px;
  background: rgba(0,0,0,.05);
  border-radius: 2px;
  padding: 3px 5px;
}

.highlighted {
  background: #d7f700;
}

.first-letter {
  overflow-wrap: break-word;
  font-family: "Playfair Display", serif;
  font-size: 60px;
  line-height: 60px;
  display: block;
  position: relative;
  float: left;
  margin: 0px 7px 0 -5px;
}

.subtitle {
  font-family: "Helvetica", sans-serif;
  color: rgba(0, 0, 0, 0.54);
  margin: 0 0 24px 0;
}

/* ##################################################################################
########################################  LAYOUT  ###################################
##################################################################################### */

.container_stylish {
  display: -ms-grid;
  display: grid;
      -ms-grid-columns: auto 166px 740px 166px auto;
      grid-template-columns: auto 166px 740px 166px auto;
      -ms-grid-rows: 450px auto 150px;
      grid-template-rows: 450px auto 150px;
      grid-template-areas:
    ". img img img ."
    ". . article . ."
    ". . footer . .";
}

.meta {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
  grid-area: img;
  margin: 10px;

  display: -ms-grid;

  display: grid;
      -ms-grid-rows: auto;
      grid-template-rows: auto;
      -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
    "info image";
}

.info {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-area: info;
	padding: 60px 60px 0 0;
	margin-bottom: 0px;
}
.info h1 {
	font-family: Playfair Display, serif;
	font-size: 3em;
}

.author {
  display: -ms-grid;
  display: grid;
      -ms-grid-columns: 60px auto;
      grid-template-columns: 60px auto;
      -ms-grid-rows: 60px;
      grid-template-rows: 60px;
      grid-template-areas:"authorImage authorInfo";
  margin-bottom: 10px;
}
.grande {
  margin-top: 21px;
  font-family: "Lora";
  font-size: 21px;
  letter-spacing: -0.03px;
  line-height: 1.58;
}

.authorInfo {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: authorInfo;
  padding-left: 10px;
}

.authorName {
  font-family: "Helvetica", serif;
  font-size: 20px;
  font-weight: 700;
  margin-top: 6px;
}

.authorName a {
  font-size: inherit;
  font-family: inherit;
  text-decoration: none;
}

.authorName a:hover {
  color: #d7f700;
}

.authorSub {
  font-family: "Helvetica", serif;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.54);
}

.median-divider {
  padding: 0 6px;
}

.lineLength {
  border: 2px dashed rgba(0, 0, 0, 0.54);
}

.article {
	-ms-grid-row: 2;
	-ms-grid-column: 3;
	grid-area: article;
	margin: 40px 10px 10px 10px;
}
/*
.footer {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: footer;
  background: #333333;
}
*/

/* Full-width video */
.full-width {
  width: 100vw; // we know it will be full-width
  height: calc(100vw * var(--ratio));
}

/* Constrained */
.max-width {
  --container-width: 50em;
  
  height: calc(100vw * var(--ratio));
  max-height: calc(var(--container-width) * var(--ratio));

  width: 100%;
  max-width: var(--container-width);  
}

iframe {
  display: block;
  margin: 0 auto 1em;
}

/*========= 11. Footer Area CSS ==========*/

.big-footer {
	background-color: #151723;
	padding: 120px 0 120px 0;
	background-image: url('../../../../../fix/img/f-pattern.png');
	color:#fff;
}

#footer-fixed {
	width: 100%;
}

.footer-logo img {
	width: 200px
}

.footer-logo p {
	color: #fff;
	line-height: 26px;
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 15px;
}

/*12.1 Footer Social*/
.social ul li {
	display: inline-block;
	margin-right: 15px;
	color:#fff;
}

.social ul li:last-child {
	margin-right: 0
}

#footer-fixed .social ul li a {
	display: inline-block;
	color: #fff;
	font-size: 20px;
	text-align: center;
	-webkit-transition: .5s;
	transition: .5s;
}

.social ul li a:hover {
	color: #d7f700
}

/*12.2 Footer Content*/
.footer-heading h3 {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-top: 5px
}

.footer-content ul {
	margin-top: 30px
}

.footer-content.footer-cont-mar-40 ul {
	margin-top: 0px;
	color:#fff;
}

.footer-content ul li {
  min-width:250px;
}

.footer-content ul li a {
	color: #fff;
	font-size: 16px;
	text-transform: capitalize;
	line-height: 30px;
}

.footer-content ul li a:hover {
	color: #d7f700;
	font-size: 17px;
}

.footer-content form {
	margin-top: 20px
}

.footer-content form input#leadgenaration {
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #fff;
	color: #fff;
	padding: 15px 0px;
	margin-bottom: 30px;
	-webkit-transition: .5s;
	transition: .5s;
	display: block;
	width: 100%
}

.footer-content form input#subscribe {
	background: linear-gradient(252.62deg, #48D6F2 8.92%, #84FC6A 96.59%);
	box-shadow: 0px 2px 15px rgba(164, 164, 164, 0.25);
	border-radius: 68px;
	border: none;
	color: #fff;
	padding: 10px 25px;
	cursor: pointer;
	-webkit-transition: all .5s;
	transition: all .5s;
	font-size: 15px;
	-webkit-transition: .5s;
	transition: .5s
}

.footer-content form input#subscribe:hover {
	background: linear-gradient(252.62deg, #84FC6A 8.92%, #48D6F2 96.59%)
}

.footer-content form input#leadgenaration:focus {
	padding: 15px 10px;
}

/*12.3 Copyright Text*
footer {
	background-color: #090c21;
	text-align: center;
	padding: 20px 0;
	width: 100%;
	color:#fff;
}

footer p {
	margin: 0;
	color: #fff;
	font-size: 15px
}

footer p a {
   color:red;
}

footer p a:hover {
	color: red;
	font-size: 18px;
	color: #d7f700;
}

footer p h15 {
	color: #d7f700;
}

footer p span {
	color: #d7f700;
}

*/
@media screen and (max-width: 1072px) {
  .container_stylish {
        -ms-grid-columns: auto 740px auto;
        grid-template-columns: auto 740px auto;
        grid-template-areas:
      ". img ."
      ". article ."
      ". footer  .";
  }
  .meta {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
  .article {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
/*
  .footer {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
 */
}

@media screen and (max-width: 740px) {
  .container_stylish {
	-ms-grid-rows: auto auto 150px;
	grid-template-rows: auto auto 150px;
	-ms-grid-columns: auto;
	grid-template-columns: auto;
	grid-template-areas: "img" "article" "footer";
}
	.grande {
		font-size:18px;
	  font-family: "Lora", serif;
	}

  .meta {
        -ms-grid-rows: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
      "info"
      "image";
  }
  .info {
    padding-top: 0;
  }
  .meta {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .image {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }

  .info {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}
  .info h1 {
  font-family: Playfair Display, serif;
  font-size: x-large;
}
  .article {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  /*
  .footer {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  */
}