/*!
Theme Name: CL 20.20
Theme URI: https://chrislow.org/
Author: Chris Low
Author URI: https://chrislow.org/
Description: The MCM CL 20.20 theme.
Version: CL 20.20
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cl-2020
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

cl-2020 is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font-size: 100%;
	 font: inherit;
	 vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, main, menu, nav, section {
	 display: block;
	 box-sizing: border-box;
 }
 body {
    line-height: 1;
	width:100%;
    overflow-x:hidden;
    font-family:'Roboto', sans-serif;
 }
 ol, ul {
	 list-style: none;
	 margin:0;
	 padding:0;
 }
 blockquote, q {
	 quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
	 content: '';
	 content: none;
 }
 table {
	 border-collapse: collapse;
	 border-spacing: 0;
 }
 div, ul, li, a, input, label {
	 box-sizing: border-box;
 }

.skip-link {position:absolute; left:-100vw;}
.clearfix {clear:both; display:block; width:100%; height:0;}

.fade-in        {opacity:0; transition:opacity 0.5s ease-in-out;}
.fade-in.start  {opacity:1;}

.fade-in-up         {position:relative; top:30px; opacity:0; transition:opacity 0.5s ease-in-out, top 0.5s ease-in-out;}
.fade-in-up.start   {opacity:1; top:0;}

#summary h3 {opacity:0; position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:1;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dfe583+0,a2dcb0+50,7ed3d0+100 */
    background: #dfe583; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #dfe583 0%, #a2dcb0 50%, #7ed3d0 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #dfe583 0%,#a2dcb0 50%,#7ed3d0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #dfe583 0%,#a2dcb0 50%,#7ed3d0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfe583', endColorstr='#7ed3d0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#summary h3 + h3 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c2e5ca+0,ede7a4+33,f9bfcc+67,cdbde1+100 */
    background: #c2e5ca; /* Old browsers */
    background: -moz-linear-gradient(45deg, #c2e5ca 0%, #ede7a4 33%, #f9bfcc 67%, #cdbde1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #c2e5ca 0%,#ede7a4 33%,#f9bfcc 67%,#cdbde1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #c2e5ca 0%,#ede7a4 33%,#f9bfcc 67%,#cdbde1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2e5ca', endColorstr='#cdbde1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#summary h3 + h3 + h3 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eb1f6c+0,c881bf+50,5784c8+100 */
    background: #eb1f6c; /* Old browsers */
    background: -moz-linear-gradient(45deg, #eb1f6c 0%, #c881bf 50%, #5784c8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #eb1f6c 0%,#c881bf 50%,#5784c8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #eb1f6c 0%,#c881bf 50%,#5784c8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb1f6c', endColorstr='#5784c8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#summary h3 + h3 + h3 + h3 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3b3889+0,f7aaaa+100 */
    background: #3b3889; /* Old browsers */
    background: -moz-linear-gradient(top, #3b3889 0%, #f7aaaa 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #3b3889 0%,#f7aaaa 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #3b3889 0%,#f7aaaa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3889', endColorstr='#f7aaaa',GradientType=0 ); /* IE6-9 */
}
#summary h3 + h3 + h3 + h3 + h3 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9d86c8+0,b4d1ef+50,b4e2db+100 */
    background: #9d86c8; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #9d86c8 0%, #b4d1ef 50%, #b4e2db 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #9d86c8 0%,#b4d1ef 50%,#b4e2db 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #9d86c8 0%,#b4d1ef 50%,#b4e2db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d86c8', endColorstr='#b4e2db',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#summary h3:first-child {opacity:1 !important;}
#summary h3 span {display:block; text-indent:-10000em;}

#main {position:relative; z-index:10;}

h1 {position:fixed; top:0; left:0; margin:25vh 0 0; width:100%; color:rgba(255,255,255,1); text-align:center; font-size:50vh; line-height:47.5vh; font-weight:400;}


#main section {position:relative; width:100vw; height:100vh; padding:25vh 25vw; border-top:1px solid #fff; z-index:10000;}
#main section:first-child {padding:0;}

#introduction-content {position:fixed; top:50vh; left:50vw; width:0; height:1px; max-width:60vw; max-height:60vh; background:#fff; overflow:hidden;}
#introduction-content.full {margin:-30vh 0 0 -30vw; width:60vw; height:60vh;}
#introduction-content div.col {opacity:0;}
#introduction-content h2 {position:relative; margin:7.5vh 5vw; font-size:32px; line-height:32px; font-weight:400; text-align:center;}
#introduction-content h2 span {position:relative; padding:0 30px; background:#fff;}
#introduction-content h2::before {content:''; position:absolute; top:16px; left:0; display:block; width:100%; height:1px; background:#777;}
#introduction-content h3 {position:relative; padding:0 5vw 7.5vh; font-size:20px; line-height:20px; font-weight:400; color:#000;}
#introduction-content h3 a {color:#000; text-decoration:none; border-bottom:1px dashed #aaa; transition:border 0.5s ease-in-out;}
#introduction-content h3 a:hover {border-bottom:1px solid #666;}
#introduction-content p  {position:relative; padding:0 5vw; font-size:16px; line-height:22px;}

#grid {position:relative; width:52vw; height:52vh;}
#grid div {position:absolute; top:19.5vh; left:19.5vw; width:13vw; height:13vh; background:#fff;}

#shape {position:fixed; top:25vh; left:0; padding:0; margin:0 auto; width:100%; height:50vh; z-index:1; background:none;}
#shape.orbit {animation:circle 30s infinite linear;}

#sky,
#wal,
#ker {position:absolute; top:0; left:50%; margin:0 auto; padding:0; width:0; max-width:calc(50vw + 100px); height:50vh; background:#fff; border-radius:0;}

#sky.animate-card,
#sky.card,
#wal.card,
#ker.card {left:calc(25vw - 50px); width:75vw;}

#sky.squish,
#wal.squish,
#ker.squish {left:calc(33.33vw + 30px); width:calc(33.34vw - 60px); border-radius:50px;}

#sky.animate-bucket,
#sky.bucket {left:60px; width:calc(33.33vw - 60px); border-radius:50px;}

#wal.animate-bucket,
#wal.bucket {left:calc(33.33vw + 30px); width:calc(33.34vw - 60px); border-radius:50px;}

#ker.animate-bucket,
#ker.bucket {left:66.67vw; width:calc(33.33vw - 60px); border-radius:50px;}

#sky.animate-circle,
        #sky.circle {top:-12.5vh; left:calc(50% - 37.5vh); width:75vh; height:75vh; border-radius:75vh;}
#wal.animate-circle,
        #wal.circle {top:-6.25vh; left:calc(50% - 60vh);   width:20vh; height:20vh; border-radius:20vh;}
#ker.animate-circle,
        #ker.circle {top:50%;     left:calc(50% - 60vh);   width:10vh; height:10vh; border-radius:10vh;}
#ker.animate-circle::before,
        #ker.circle::before {content:''; position:absolute; display:block; background:#fff; top:20vh; left:50%; width:5vh; height:5vh; border-radius:10vh;}

@keyframes circle { to { transform: rotate(1turn); } }

/*#page::after {content:''; position:fixed; top:0; bottom:0; left:50%; width:1px; background:#0f0; z-index:100000;}

#shape > div            {margin:0 auto; padding:0; width:0; max-width:calc(50vw + 100px); height:50vh; background:#fff; border-radius:0; position:relative;}
#shape > div.width      {margin:0 auto; width:75vw;}
#shape > div.corners    {margin:0 auto; width:75vw;}
#shape > div.round      {margin:0 auto; width:50vh; height:50vh; border-radius:0; background:none;}

#shape > div.width.buckets {background:none;}
#shape > div.width.buckets div {position:absolute; top:0; right:0; bottom:0; left:0; background:#fff;}

#shape > div.corners.buckets {background:none;}
#shape > div.corners.buckets div {position:absolute; top:0; right:0; bottom:0; left:0; background:#fff; border-radius:0px;}
#shape > div.corners.buckets div.split1 {right:calc(67% + 15px); border-radius:30px; background:#fff;}
#shape > div.corners.buckets div.split2 {right:calc(33% + 15px); left:calc(33% + 15px); border-radius:30px; background:#fff;}
#shape > div.corners.buckets div.split3 {right:0; left:calc(67% + 15px); border-radius:30px; background:#fff;}
#shape > div.corners.buckets div.circle {right:auto; left:calc(50% - 25vh); width:50vh; height:50vh; border-radius:50vh;}

#shape > div.round.buckets {background:none; border-radius:50vh; overflow:hidden;}
#shape > div.round.buckets div {position:absolute; top:0; right:0; bottom:0; left:0; background:#fff; border-radius:0;}
*/
@media (max-width:800px) {
    h1 {font-size:50vw; line-height:50vh;}
}