*{
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Arial, Helvetica, sans-serif;
	vertical-align: baseline;
    scroll-behavior: smooth;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav {
	display: block;
}
html, body {
    scroll-behavior: smooth;
}
#thelogo {
    background-image: url(images/Chadlogo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
    height:200px;
    position:relative;
    top: 20px;
}
.container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.slides{
    width: 100%;
    height: 100vh;
    color: #FFF;
    background: linear-gradient(200deg, #4f4080, #9553ff);
    scroll-snap-align: start;
    scroll-behavior:smooth;
}

.slide2{
    background: linear-gradient(470deg, #161f73, #53daff);
}

.slide3{
    background: linear-gradient(470deg, #cab693, #53daff);
}

.slide4{
    background: linear-gradient(320deg, rgb(255, 141, 0), #0403a2);
}

.slide5{
    background: linear-gradient(120deg, rgb(19, 49, 19), #98c7a5);
}

.slide6{
    background: linear-gradient(320deg, rgb(165, 0, 114), rgba(255, 100, 0, 0.81));
}
.homeimage {
    transition: all 0.5s ease-out;
}
.homeimage:hover {
    margin-left:20px;
    margin-right:20px;
    opacity:0.6;
}
.panel {
	height:100vh;
}

pre {
	background:rgba(0,0,0,0.2);
	padding:2em 0 2em 0;
	font-size:2.1em;
	margin-top:0.7em;
}
	h1,h2,h3,p,pre,dl {
		margin-left:30px;
		margin-right:30px;
        font-weight: 100;
	}
h1, h3 {color:#000;}
h2 {
    font-family: Franklin Gothic medium;
    padding-top:30px;
}
header {
	padding-bottom:5em;
}
/* animated chevron missing webkit:::
.scroll {
	position:relative;
	margin-top:1em;
    margin-bottom:1em;
	display:inline-block;
}
 .scroll:after {
	content:'';
	width:40px;
	height:40px;
	position:absolute;
	top:40px;
	margin:auto;
	right:0;
	bottom:0;
	left:0;
	-webkit-animation:3s arrow infinite ease;
	animation:3s arrow infinite ease;
}

.scroll:after {
	border-right:2px solid #000;
	border-bottom:2px solid #000;
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	
}*/

dt {
	font-size:2.3em;
}
dd {
	font-size:1.9em;
	padding:0.6em 0 0.9em 0;
}
p {
	font-size:110%;
	padding:0.4em 0 0.4em 0;
    font-weight: 100   ;   
}



a:link,
a:visited {
	color:#000;
	text-decoration:none;
}
a:hover,
a:focus,
a:active {
	text-decoration:underline;
}
a.twitter:link,
a.twitter:visited {
	font-size:1.3em;
	line-height:4em;
    position:relative;


}
a.twitter img {
	border-radius:50%;

	border:6px solid #bbbbbb;
	padding:11px;
	background:#FFF;
}
.home {
	background: #FFFFFF;
	text-align:center;
}
.inner {
	width:960px;
	margin:0 auto;
}
.beinner {
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
}

h1 {
	font-size:4em;
	padding:1.7em 0 0 0;
    margin-bottom:20px;
}
/*header animation attempt*/
.fader {
    animation: fade-in-slide linear forwards;
    animation-timeline: view();
    animation-range: 0px 500px;
}

.fader2 {
    animation: fade-in-slide ease-in-out forwards;
    animation-timeline: view();
    animation-range: 0px 700px;
}

@keyframes fade-in-slide{
    from {transform: translateX(-100px); opacity: 0;}
    to {transform: translateX(0); opacity: 1;}
    
}
@keyframes fade-in{
    from { opacity: 0;}
    to { opacity: 1;}
    
}
video {
  display: block;
  margin: auto;
}

    .bio {
        min-height:100px;
        width: 70% ;
        margin:auto;
        background-color: #ececec;
        font-size: 1.5rem;
    }

/* slide content stylings*/
#BEimage1 {
    background-image: url(images/BElogo.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height:300px;

}
#BEimage2 {
    background-image: url(images/BEwebsite.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height:300px;

}
.BEcaselink:hover,
.BEcaselink:focus,
.BEcaselink:active,
.BEcaselink:visited {
	text-decoration:none;
}

#BSCMimage1 {
    background-image: url(images/TeepublicSkew.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height:300px;
}

#BSCMimage2 {
    background-image: url(images/TeepublicAmaze.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height:300px;
}

#cacaoimage1 {
    background-image: url(images/cacao1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height:300px;
}

#cacaoimage2 {
    background-image: url(images/cacao2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height:300px;
}
/* CASE STUDY STYLINGS */

.BEcase {
    position: sticky;
	top: 0;
	height: 100vh;
    background: linear-gradient(430deg, #33658a, #a6c0ff);
}

.Partycase {
    position: sticky;
	top: 0;
	height: 100vh;
    background: linear-gradient(430deg, #33658a, #b8dde7);
}

#BEcase1 {
    background-image: url(images/BEold.png);
}

#becase2 {
    background-image: url(images/BElogo1.jpg);
}
#becase3 {
    background-image: url(images/BElogo2.jpg);
}
#becase4 {
    background-image: url(images/BElogo3.jpg);
}
#becase5 {
    background-image: url(images/20160607_175913.jpg);
}
#becase6 {
    background-image: url(images/BEwebsite.jpg);
}
#Party1 {
    background-image: url(images/80sDeitiesVideoProgress.png)
}
#Party2 {
    background-image: url(images/80sDeitiesLogoProcess.png)
}
#Party3 {
    background-image: url(images/OtherParties.png)
}

.CAcase {
    position: sticky;
	top: 0;
	height: 100vh;
    background: linear-gradient(470deg, #cab693, #53daff);
}
#CAcase1 {
    background-image: url(images/Cacase1.jpg);
}
#CAcase2 {
    background-image: url(images/Cacase2.png);
}
#CAcase3 {
    background-image: url(images/Cacase3.png);
}
.pre {
	background:rgba(0,0,0,0.2);
	padding:2em 0 2em 0;
	font-size:2.1em;
	margin-top:0.7em;
}

.csi {
    animation: fade-in ease-in-out forwards;
    animation-timeline: view();
    animation-range: 0px 400px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height:300px;

} 
.contain {
    white-space: pre-wrap;
    word-wrap: break-word;
    width:80%;
    margin: auto;
    text-align:left;
    position: relative;
    padding:0;
    font-size: 0.6em;
}
/*responsive stylings*/
@media (max-width:960px) {
	.inner {
		width:100%;

	}

	h1,h2,h3,p,pre,dl {
		margin-left:30px;
		margin-right:30px;
	}
    .bio {
        min-height:100px;
        width: 70% ;
        margin:auto;
        background-color: #ececec;
        
    }
}
@media (max-width: 480px) {
    h1 {
        font-size: 10vw;
    }
     h2, h3 {
        font-size:6vw;
    }

    .panel {
        height:100vh;
    }
    .section {
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        scroll-snap-align: start;  
        height:100vh;
    }
    a {
        font-size:6vw;
    }
    .regular {
        font-size:100%;
    }
    .scroll{
        font-size:6vw;
        margin-bottom:20px;
    }
    .scroll:after{
        margin-top:20px;
        border-right:4px solid #000;
        border-bottom: 4px solid #000;
    }
    .csi {
        background-position:left;
    }
    .contain {
        font-size: .75em;
    }
}