/*
	Theme Name: LL Design
  Theme URI: https://www.lindgrendesign.com/
  Author: Example7
  Author URI: https://www.example7.com
  Version: 2.0 / 2022

    Colors
    ------
		Green     #b6c041   182,192,65
		Orange    #faa017   250,160,23
		Blue      #708cb8   112,140,184
		Red       #cf412b   207,65,43
		Black     #000
		Gray dk   #999
		Gray lt   #CCC

    Webfonts
    --------
    Europa         europa, sans-serif;       300/400/700 i
    Old Standard   old-standard, serif;      400/700 i

*/





/* ====================================================================
   Global
   ==================================================================== */

/* -------------------[ Layout ]------------------- */

* {
  position: relative;  
  margin: 0; padding: 0;
}

body { 
  background-color: #FFF; 
}

#wrap {
  width: 90%; max-width: 1100px; margin: 0 auto; padding: 20px 5%;
}

/* -------------------[ Columns and DIVs ]------------------- */

.columns {
	display: -webkit-box; display: -ms-flexbox; display: flex; 
	flex-direction: row; 
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%; 
}

/* -------------------[ Type ]------------------- */

body, html { 
  color: #000; font-family: europa, sans-serif; font-size: 17px; line-height: 24px; font-weight: 300; letter-spacing: 0.02em;
}

a:link, a:visited, a:active { 
  color: #999; text-decoration: none; 
}

a:hover { 
  color: #000; text-decoration: none; 
}

a,
a span,
i {
  -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; transition: .2s;
}

h1 { 
  margin-bottom: 12px;
  font-size: 20px; line-height: 28px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em;
}

h2 { 
  margin-bottom: 12px;
  font-size: 18px; line-height: 24px; font-weight: 400; 
}

h3 { 
  margin-bottom: 12px;
  font-size: 16px; line-height: 22px; font-weight: 400; 
}

h4 { 
  margin-bottom: 12px;
  font-size: 18px; line-height: 20px; font-weight: 300; 
}

h5,
h6 { 
  margin-bottom: 12px;
  font-size: 14px; line-height: 20px; font-weight: 400; 
}

          @media only screen and (max-width : 800px) {
						body, html { 
							font-size: 15px; line-height: 22px; 
						}
						h1 { 
							font-size: 16px; line-height: 22px; 
						}
          }

/* -----[ Images ]----- */

.content-sm img,
.content img {
  width: auto; max-width: 100%; height: auto;
}

/* -------------------[ Header ]------------------- */

.header { 
  width: 100%; padding: 0 0 30px 0;
  text-align: center;
}

          @media only screen and (max-width : 600px) {
						.header { 
							padding: 0 0 10px 0;
						}
          }

/* -----[ Logo ]----- */

.logo { 
  position: relative; 
}

.logo img { 
  width: 100%; max-width: 360px; height: auto; 
}

          @media only screen and (max-width : 600px) {
            .logo img { 
              max-width: 220px; 
            }
          }

/* -----[ Nav ]----- */

.nav li {
  display: inline-block; 
}

.nav li::after { 
  position: relative; top: -2px;
  padding: 0 14px;
	color: #CCC; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 100;
  content: "|";
}

.nav li#menu-item-58::after { 
  display: none;
}

.nav a {
  padding-bottom: 10px;
  color: #CCC; font-size: 16px; line-height: 17px; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; 
}

.nav a:hover, 
.nav li.current_page_item a,
.nav li.current-menu-item a { 
  color: #000; 
}

body.home .nav a, body.home .nav li::after { color: #000; }
body.home .nav a:hover { color: #CCC; }

.nav .menu ul { list-style: none; }
.nav .menu li { position: relative; }

/* -----[ Mobile ]----- */

.mobile-menu-panel { 
	display: none;
}

					@media only screen and (max-width : 600px) {
            .nav { 
              display: none;
            }
            #click-menu { 
               display: block; position: fixed; top: 34px; right: 4%; z-index: 999999;
            }
            .menu-link {
              position: relative; display: inline-block;
              width: 24px; height: 16px !important; margin-right: 0.3em; 
              border-top: 2px solid #000; border-bottom: 2px solid #000;
              font-size: 12px !important; 
            }
            .menu-link:before {
              position: absolute; top: 7px; left: 0px;
              width: 100%;
              border-top: 2px solid #000;
              content: "";
            }
            .mobile-menu-panel {
              display: block; position: fixed; right: -100%; z-index: 99999999; overflow: auto;
              width: 100%; margin: 0; 
  						/*background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.9);*/ 
              background-color: #FFF;
            }
            .mobile-menu-panel a.menu-close {
              position: absolute; top: 25px; right: 5%; z-index: 100;
              color: #000; font-size: 30px; line-height: 30px; font-weight: 400; 
            }
            .mobile-menu-panel ul {
              clear: both; display: block;
              margin: 0; padding: 85px 0 0 0;
              list-style-type: none;
              text-align: right;
            }
            .mobile-menu-panel ul a {
              clear: both; display: block;
              margin: 0; padding: 0 5% 15px 0; 
              color: #000; font-size: 15px; line-height: 18px; font-weight: 300; text-decoration: none; 
            }
            .mobile-menu-panel ul a:hover { 
              color: #CCC;
            }
					}

/* -------------------[ Home ]------------------- */

#home { 
  width: 800px; margin: 0 auto;
	font-size: 0;
}

#home div {
  display: inline-block; vertical-align: top;
  margin: 0 0 5px 0; padding: 0 16px 0 0;
}

#home div:nth-child(4n+4) { 
	padding: 0;
}

#home img { 
	width: auto; height: 100%; max-height: 215px; 
}

#homepage #portfolio { 
	display: none;
}

					@media only screen and (max-width : 900px) {
						#home { 
							width: 600px;
						}
						#home img { 
							max-height: 158px; margin: 0 0 5px 0;
						}
					}

					@media only screen and (max-width : 700px) {
						#home { 
							width: 486px;
						}
						#home img { 
							max-height: 130px; margin: 0;  padding: 0 10px 0 0;
						}
					}

					@media only screen and (max-width : 600px) {
						#homepage #portfolio { 
							display: block;
						}
						#home,
						#homepage #portfolio .mobile { 
							display: none;
						}
					}

/* -------------------[ Portfolio ]------------------- */

/* -----[ Menu ]----- */

#portfolio {
  width: 100%; max-width: 1100px; margin: 0 auto;
	text-align: center;
}

#portfolio .port-menu {
  width: 100%; margin: 0 0 20px 0;
	border-top: 1px solid #999;
	font-size: 14px; line-height: 18px; font-weight: 300; letter-spacing: 0.02em; text-align: center;
}

#portfolio .port-menu .columns .col { 
  flex: 1 1 25%;
}

#portfolio .port-menu a {
  color: #999;
}

#portfolio .port-menu a:hover {
  color: #000;
}

#portfolio .port-menu .square {
  display: block; margin: 0 auto 5px auto;
  width: 26px; height: 32px;
	border-right: 1px solid #999; border-bottom: 1px solid #999; border-left: 1px solid #999;
}

#portfolio .port-menu .square1 { background-color: #b6c041; }
#portfolio .port-menu .square2 { background-color: #faa017; }
#portfolio .port-menu .square3 { background-color: #708cb8; }
#portfolio .port-menu .square4 { background-color: #cf412b; }

body.term-13 #portfolio .port-menu .p1 span,
body.term-14 #portfolio .port-menu .p2 span,
body.term-15 #portfolio .port-menu .p3 span,
body.term-16 #portfolio .port-menu .p4 span { 
  color: #000;
}

#portfolio .port-menu img {
  width: 100px; height: 100px; margin: 10px 3px;
}

#portfolio .port-menu .mobile {
  display: none;
}

          @media only screen and (max-width : 1050px) {
						#portfolio .port-menu img {
							width: 60px; height: 60px; margin: 10px 2px 5px 2px;
						}
          }

          @media only screen and (max-width : 950px) {
						#portfolio .port-menu .mobile {
							display: block;
						}
						#portfolio .port-menu .desktop span {
							display: none;
						}
          }

          @media only screen and (max-width : 600px) {
						#portfolio .port-menu .square {
							width: 18px; height: 24px;
						}
          }

          @media only screen and (max-width : 400px) {
						#portfolio .port-menu {
							font-size: 12px; letter-spacing: 0; 
						}
          }

#selected {
  width: 100%; max-width: 960px; margin: 0 auto;
  text-align: center;
}

#selected ul { 
  margin: 0; padding: 0;
	text-align: left;
  -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;
  -webkit-column-gap: 40px; moz-column-gap: 40px; column-gap: 40px; 
  -webkit-column-rule: none; -moz-column-rule: none; column-rule: none;
  -moz-column-fill: balance;
}

#selected ul li {
  display: inline-block; 
  -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid-column;
  width: 100%; margin: 0; padding: 10px 0;
}

#selected .selected-title {
  font-weight: 400; font-style: italic;
}

#selected a {
  color: #000;
}

#selected a:hover {
  color: #999;
}

          @media only screen and (max-width : 950px) {
						#selected { 
						  padding-top: 30px;
						}
          }

          @media only screen and (max-width : 600px) {
						#selected ul { 
						  text-align: center;
							-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;
							-webkit-column-gap: 0; moz-column-gap: 0; column-gap: 0; 
						}
          }

/* -----[ Category Pages ]----- */

.books {
	margin-top: 30px;
}

.books .columns .col {
	position: relative; display: inline-block; 
	width: 24.1%; margin: 0 0 10px 0; padding: 0 1.2% 0 0;
	font-size: 15px; line-height: 17px; text-align: center;
}

.books .columns .col:nth-child(4n+4) {
  padding: 0;
}

.books .columns .col img { 
	width: 100%; height: auto; 
}

					@media only screen and (max-width : 990px) {
						.books .columns .col {
							margin: 0 0 7px 0; 
						}
					}

					@media only screen and (max-width : 600px) {
						.books .columns .col {
							width: 49%; margin: 0 0 5px 0; 
						}
						.books .columns .col:nth-child(even) {
							padding: 0;
						}
						.books .columns .col:nth-child(odd) {
							padding: 0 2% 0 0;
						}
					}

					@media only screen and (max-width : 400px) {
						.books .columns .col {
							width: 100%; padding: 0 !important;
						}
					}

/* -----[ Single ]----- */

#book .columns .col {
	margin: 0 0 30px 0; 
}

#book .columns .col:nth-child(1) {
	width: 25%; padding: 0 10% 0 0;
}

#book .columns .col:nth-child(2) {
	width: 65%; 
}

#book .book-header {
	font-size: 18px; line-height: 30px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em;
}

#book .book-header a {
	color: #000;
}

#book .book-header a:hover {
	color: #999;
}

#book .book-terms {
  margin: 10px 0;
	font-size: 15px; line-height: 20px; font-weight: 400; text-transform: lowercase; letter-spacing: 0.02em;
}

#book .book-terms .bh-link1 a { color: #b6c041; }
#book .book-terms .bh-link2 a { color: #faa017; }
#book .book-terms .bh-link3 a { color: #708cb8; }
#book .book-terms .bh-link4 a { color: #cf412b; }
#book .book-terms a:hover { color: #000; }

#book .book-menu {
  width: 90%; margin: 20px 0; padding: 10px 5%;
}

#book .book-menu1 { background: rgb(182,192,65); background: rgba(182,192,65, 0.2); }
#book .book-menu2 { background: rgb(250,160,23); background: rgba(250,160,23, 0.2); }
#book .book-menu3 { background: rgb(112,140,184); background: rgba(112,140,184, 0.2); }
#book .book-menu4 { background: rgb(207,65,43); background: rgba(207,65,43, 0.2); }


#book .book-menu li {
  margin: 0 0 3px 0;
}

#book .book-menu a {
  color: #999; font-family: old-standard, serif; font-size: 14px; line-height: 14px !important; font-weight: 400; letter-spacing: 0.02em; text-decoration: none; 
}

#book .book-menu a:hover { 
  color: #000; 
}

#book .book-menu li.current_page_item a,
#book .book-menu li.current-menu-item a { 
  color: #000; font-weight: 700;
}

#book img.book-badge {
  margin-top: 15px;
}

#book img.size-book-cover {
	width: 100%; height: auto; margin: 0 0 10px 0;
}

#book .book-info {
  font-size: 16px; font-weight: 400; 
}

#book .book-info .book-credits {
  text-transform: uppercase; 
}

#book .book-info .book-about p {
  display: inline;
}

#book .book-info .book-quotes span,
#book .book-info span.book-about-sep {
  color: #999;
}

#book .book-images {
  margin: 60px 0 0 0;
}

#book .book-images img {
  width: 100%; height: auto; margin: 0 0 30px 0;
}

					@media only screen and (max-width : 1150px) {
						#book .columns .col:nth-child(1) {
							width: 30%; padding: 0 5% 0 0;
						}
					}

					@media only screen and (max-width : 950px) {
						#book .columns {
						  display: block;
						}
						#book .columns .col {
							width: 100% !important; padding: 0 !important;
						}
						#book .book-menu {
						  display: none;
						}
						#book .book-images {
							margin: 30px 0 0 0;
						}
						#book .book-images img {
							width: 100%; height: auto; margin: 0 0 20px 0;
						}
					}

/* -------------------[ About ]------------------- */

#about {
  width: 100%; max-width: 700px; margin: 0 auto;
	text-align: center;
}

#about .clients {
  width: 94%; margin: 40px auto 50px auto; padding: 0 0 0 6%;
	text-align: left;
}

#about .clients .columns .col:nth-child(1) { 
  flex: 1 1 40%;
	margin-right: 8%; 
}

#about .clients .columns .col:nth-child(2) { 
  flex: 1 1 52%;
}

#about .clients .columns .col:nth-child(2) { 
  flex: 1 1 52%;
}

#about .bottom a {
	color: #000;
}

#about .bottom a:hover {
	color: #999;
}

#about .bottom .quote {
  margin: 40px 0;
	color: #999;
}

          @media only screen and (max-width : 800px) {
						#about {
							text-align: left;
						}
						#about .clients {
							width: 100%; padding: 0;
						}
						#about .clients .columns { 
							display: block;
						}
						#about .clients .columns .col:nth-child(1) {
							margin-right: 0;
						}
						#about .bottom span {
							display: block;
							height: 0;
							font-size: 0;
						}
          }