*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body { max-width: 1200px; margin: auto; padding: 0 1em; font-family: 'Lexend Exa', Helvetica, Arial, sans-serif; }

nav ul { display: flex; flex-direction: row; flex-wrap: wrap-reverse; justify-content: space-between; align-items: center; }

nav ul { text-align: center; padding: 0; margin: 0; font-size: 1.1em; }

nav ul li { display: inline; text-decoration: none; /*padding: 0 2em 0 0;*/ font-family: 'Lexend Exa', Helvetica, Arial, sans-serif; }

nav ul li a { text-decoration: none; /* font-size: 1em; */ font-weight: 500; color: #313131; line-height: 150%; padding: 5px 0; }

nav ul li a:hover { border-bottom: 2px solid black; }

h1 { text-align: center; font-family: 'Dawning of a New Day', cursive; font-size: 4em; font-weight: 600; margin-bottom: 1.3em; }

h1 span { font-family: 'Lexend Exa', Helvetica, Arial, sans-serif; font-size: 0.5em !important; line-height: 0.2em; margin-bottom: -20px; display: block; font-weight: bold; color: #eee; }

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

ul li { line-height: 1.5em; }

.container { max-width: 1200px; margin: 0 auto; }

footer { text-align: center; padding: 40px; font-family: 'Lexend Exa', Helvetica, Arial, sans-serif; }

.heading { width: 100%; height: 20em; display: flex; align-items: center; justify-content: center; margin-bottom: 2em; }

.heading.Commissions { background-image: url(/img/commissions-tittle.jpg); background-repeat: no-repeat; }

.heading.Licensing { background-image: url(http://www.colorfulmondays.com/img/pattern_mockup.jpg); background-repeat: no-repeat; }

.heading.Shop { background-image: url(http://www.colorfulmondays.com/img/pattern-slideshow3.jpg); background-repeat: no-repeat; }

.heading.About { background-image: url(/img/about-tittle.jpg); background-repeat: no-repeat; }

.heading.Contact { background-image: url(/img/contacts-tittle.jpg); background-repeat: no-repeat; }

.heading.Patterns { background-image: url(/img/patterns-tittle.jpg); background-repeat: no-repeat; }

.heading.Illustrations { background-image: url(/img/illustrations-tittle3.jpg); background-repeat: no-repeat; }

.heading.Textures { background-image: url(http://www.colorfulmondays.com/img/textures-tittle.jpg); background-repeat: no-repeat; }

.heading.Graphic { background-image: url(http://www.colorfulmondays.com/img/graphic-assets-tittle.jpg); background-repeat: no-repeat; }

.active { padding: 5px 0 !important; border-bottom: 2px solid black; }

nav { margin-bottom: 1.5em; }

.heading h2 { background: #fff; padding: 3em 5em; opacity: 0.9; margin: 0; }

h2 { text-align: center; font-family: 'Lexend Exa', Helvetica, Arial, sans-serif; margin-top: 3em; display: inline-block; vertical-align: middle; }

.fa-caret-down { display: inherit; width: 0; height: 0; border-style: solid; border-width: 12px 6px 0 6px; border-color: #000000 transparent transparent transparent; -webkit-transform: rotate(360deg); border-style: inset; }

.dropbtn { font-family: 'Lexend Exa', Helvetica, Arial, sans-serif; font-weight: 500; color: #313131; line-height: 150%; padding: 5px 0; font-size: 1em; border: none; background: none; }

.dropbtn.active { padding: 5px 0 !important; border-bottom: 2px solid black; }

.dropdown { position: relative; display: inline-block; }

.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }

.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; border-bottom: 2px solid #f1f1f1; }

.dropdown:hover .dropdown-content { display: block; }

#myBtnContainer { margin: 0.7em 0; font-family: Helvetica, Arial, sans-serif; font-size: 1em; /* text-align: center; */ margin: 2.2em 0 1.8em; }

.btn.activeS { background-color: #666; color: white; }

.btn { border: none; outline: none; padding: 12px 16px !important; background-color: #f1f1f1; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 0.9em; }

.container_square_grid { display: grid; grid-gap: 15px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: 350px; grid-auto-flow: dense; }

.container_square_grid > div { display: flex; justify-content: center; align-items: center; font-size: 2em; color: #ffeead; font-family: Helvetica, Arial, sans-serif; }

.discription { position: relative; width: 100%; max-width: 600px; /* width: 50%; */ }

.filterDiv { float: left; /*background-color: #2196F3;*/ color: #ffffff; /*width: 100px;*/ line-height: 100px; text-align: center; margin: 2px; display: none !important; }

.show { display: flex !important; }

.middle { transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }

.text { background-color: #fff; color: black; font-size: 0.5em; padding: 0.2em 0.5em; }

.container_square_grid > div > img { width: 100%; height: 100%; object-fit: cover; }

.image { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; }

.discription:hover .image { opacity: 0.3; }

.discription:hover .middle { opacity: 1; }

.row { display: flex; flex-wrap: wrap; padding: 0 4px; }

.column { flex: 49%; max-width: 49%; padding: 0 4px; }

.instagram a { background-image: url(http://www.colorfulmondays.com/img/instagram.png) !important; background-repeat: no-repeat; }

.facebook a { background-image: url(http://www.colorfulmondays.com/img/facebook.png) !important; background-repeat: no-repeat; }

.pinterest a { background-image: url(http://www.colorfulmondays.com/img/pinterest.png) !important; background-repeat: no-repeat; }

.email a { background-image: url(http://www.colorfulmondays.com/img/email.png) !important; background-repeat: no-repeat; }

#social-media a { width: 25px; height: 25px; display: block; }

#social-media li { width: 25px; height: 25px; display: inline; /*border: 1px solid black;*/ margin: 0 8px; }

#social-media { display: flex; flex-direction: row; flex-wrap: wrap-reverse; justify-content: flex-end; align-items: center; }

p { font-family: 'Lexend Exa', Helvetica, Arial, sans-serif; line-height: 1.8em; }

header, section, footer, aside, nav, main, article, figure { display: block; }

.fa-caret-down { display: inherit; width: 0; height: 0; border-style: solid; border-width: 12px 6px 0 6px; border-color: #000000 transparent transparent transparent; -webkit-transform: rotate(360deg); border-style: inset; }

.dropbtn { font-family: 'Lexend Exa', Helvetica, Arial, sans-serif; font-weight: 500; color: #313131; line-height: 150%; padding: 5px 0; font-size: 1em; border: none; background: none; }

.dropdown { position: relative; display: inline-block; }

.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }

.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; border-bottom: 2px solid #f1f1f1; }

.dropdown:hover .dropdown-content { display: block; }

.mobile-container { display: none; }

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { .mobile-container { display: block !important; } .block-caption-container { display: block !important; position: relative; max-height: 300px; margin: 0.2em 0.5em; } .block-caption { height: 2.8em; width: 8em; position: absolute; left: 50%; margin-left: -4em !important; top: 50%; margin-top: -1.4em !important; max-width: 100% !important; } .block-caption a { font-size: 1em; padding: 1em !important; } h1 { font-size: 2em; } nav, h1 { display: none; } .topnav { overflow: hidden; background-color: white; color: black; position: relative; text-align: center; } .topnav #myLinks { display: none; } .topnav li { display: block; } .topnav a.icon { background: #fff; display: block; position: absolute; right: 0; top: 0; padding: 26px 28px; } .topnav a:hover { background-color: #fff; color: black; } .topnav a.icon { background: #fff; display: block; position: absolute; right: 0; top: 0; padding: 26px 28px; } .container-mobile-menu { display: inline-block; cursor: pointer; } .icon { background: #000; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } .change .bar2 { opacity: 0; } .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); } .topnav a { font-family: 'Lexend Exa', Helvetica, Arial, sans-serif; padding: 16px 18px; text-decoration: none; font-size: 1.2em; display: block; font-weight: 500; color: #313131; line-height: 280%; } #myLinks a { line-height: 120%; } .heading h2 { padding: 2em 3em !important; } }

/** Syntax highlighting styles */
.highlight { background: #fff; }

.highlight .c { color: #998; font-style: italic; }

.highlight .err { color: #a61717; background-color: #e3d2d2; }

.highlight .k { font-weight: bold; }

.highlight .o { font-weight: bold; }

.highlight .cm { color: #998; font-style: italic; }

.highlight .cp { color: #999; font-weight: bold; }

.highlight .c1 { color: #998; font-style: italic; }

.highlight .cs { color: #999; font-weight: bold; font-style: italic; }

.highlight .gd { color: #000; background-color: #fdd; }

.highlight .gd .x { color: #000; background-color: #faa; }

.highlight .ge { font-style: italic; }

.highlight .gr { color: #a00; }

.highlight .gh { color: #999; }

.highlight .gi { color: #000; background-color: #dfd; }

.highlight .gi .x { color: #000; background-color: #afa; }

.highlight .go { color: #888; }

.highlight .gp { color: #555; }

.highlight .gs { font-weight: bold; }

.highlight .gu { color: #aaa; }

.highlight .gt { color: #a00; }

.highlight .kc { font-weight: bold; }

.highlight .kd { font-weight: bold; }

.highlight .kp { font-weight: bold; }

.highlight .kr { font-weight: bold; }

.highlight .kt { color: #458; font-weight: bold; }

.highlight .m { color: #099; }

.highlight .s { color: #d14; }

.highlight .na { color: #008080; }

.highlight .nb { color: #0086B3; }

.highlight .nc { color: #458; font-weight: bold; }

.highlight .no { color: #008080; }

.highlight .ni { color: #800080; }

.highlight .ne { color: #900; font-weight: bold; }

.highlight .nf { color: #900; font-weight: bold; }

.highlight .nn { color: #555; }

.highlight .nt { color: #000080; }

.highlight .nv { color: #008080; }

.highlight .ow { font-weight: bold; }

.highlight .w { color: #bbb; }

.highlight .mf { color: #099; }

.highlight .mh { color: #099; }

.highlight .mi { color: #099; }

.highlight .mo { color: #099; }

.highlight .sb { color: #d14; }

.highlight .sc { color: #d14; }

.highlight .sd { color: #d14; }

.highlight .s2 { color: #d14; }

.highlight .se { color: #d14; }

.highlight .sh { color: #d14; }

.highlight .si { color: #d14; }

.highlight .sx { color: #d14; }

.highlight .sr { color: #009926; }

.highlight .s1 { color: #d14; }

.highlight .ss { color: #990073; }

.highlight .bp { color: #999; }

.highlight .vc { color: #008080; }

.highlight .vg { color: #008080; }

.highlight .vi { color: #008080; }

.highlight .il { color: #099; }

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