*{  box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;}
        body{background:#eff4c9; font-size: 1.25rem;}
       #wrapper{overflow: hidden; }
        h1,h2,h3,#video{text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 700; color:#d60db0; text-transform: uppercase;}
        h1,h1 span{font-size:5rem; font-size:6vw; }
        h1{border-bottom:#503F3C solid 1rem;}
        h1 span{color:#503F3C;}
        h2{padding:2rem 4rem 2rem 4rem;  font-size: 4rem; font-size: 4vw; text-align: left; overflow: hidden; transition:1s left ease-out; position:relative; left:-100rem;}
		h3{font-size:2rem; text-align:left;}
	 .quote{font-style:italic; font-size:2rem; margin:2rem 1rem 0rem 1rem; padding:1rem; border-top:solid 2px #503F3C; border-bottom:solid 2px black; display: block; text-align: center;}
		p em{display:block; margin-bottom:2rem;}
        .heading{border-left:#503F3C solid 1rem; overflow: hidden; transition:2s left ;}
        
          .pure-g div{ /*border-bottom:#503F3C solid 0.25rem ;*/ margin:4% 0 4% 0; padding:4%; }
        div.title{margin-bottom:5rem; margin-top:5rem;}
        .title div{padding:0; }
        .title > div{margin:0;}
        .title h1{margin-bottom:0;margin-top:0;  }
        .title img{margin:0 auto; display:block;}
       .pure-g{width:100%; max-width:1250px; padding:0 2.5% 0 2.5%;margin:0 auto;  color: #d60db0; position: relative; }
        p,li{margin:0;  font-family: 'Montserrat', sans-serif; font-weight: 100; line-height:2rem; padding:1rem; }
		
        p span{font-size:3rem; color:#503F3C; font-weight:700; }
        li{margin:1rem 0 1rem 0;}
        .tips{text-align: center; font-size:2rem; }
        .tips p{line-height:3rem; margin-top:-3rem; padding-top:0;}
        .tips h3{/*border:solid #503F3C 1rem; border-radius: 50%;*/ width:16rem; height:16rem; line-height:16rem; margin:0 auto; margin-bottom:0; text-align:center; 
		background-image:url(img/trollCircle.png);	
		background-repeat:no-repeat;
		background-position:49% 50%; }
        .tips div{padding-top:0;}
        .pure-g .pure-u-8-24{margin-top: 0;}
        .pure-u-1-1{text-align: justify; }
        #social{position:fixed; bottom:1rem; right:1rem;width: 50px; z-index: 10;}
        #social a{background: #503F3C; width:50px; height:50px; float: right; border-radius: 50%; display: block; margin-bottom: 0.25rem;}
        #social a:nth-child(1):hover{background: #3b5998;}
        #social a:nth-child(2):hover{background: #4099FF;}
        #social a:nth-child(3):hover{background: #e52d27;}
        #menu{position: fixed; top:0rem; left:0rem;  z-index:10;}
        #menu img{background:#503F3C; padding: 0.75rem; z-index: 11; position: relative; cursor: pointer;}
        #menu ul{list-style: none; padding:0; padding-top:5rem; top:0; margin: 0;background:#503F3C; left:-20rem; position: absolute; transition:0.5s; z-index: 5;}
        #menu:hover ul{left:0rem;}
        #menu li{padding:0; margin: 0; }
        #menu li a{display: block;  padding: 1rem; text-align: left; color: white; text-decoration: none;}
        #menu li a:hover{background:#d60db0;}

        #video{max-width: 1250px; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin:0 auto; display:block; }
        #video iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height:750px; padding-left:2.5%; padding-right: 2.5%;}
        .purp,.grey{background:#d60db0; color: #fff; position: relative; }
        .grey{background:#503F3C;}
        .purp p,.purp h2,.purp ol,.grey p,.grey ol{color: #fff;}
		.grey a{color:#d60db0;}
        .grey .heading{border-left:#fff solid 1rem;}
        .grey span{color:#d60db0;}

        #welcome{padding: 0; margin-top: 0;}
        #intro p img{width: 100%;}
		#know{z-index:2;}
		#deal{z-index:1;}
        ol li{border-left:solid #503F3C 1px;}
        ol.six li{padding:2rem; width:45%; float: left; margin-left:5%; text-align:left;}

  

    .resources p{padding-top:0;}
		.resources h3{margin-top:4rem;}

        #cover{background-image:url("img/seamlesstexture2.jpg"); position: fixed; width: 100%; height: 100%; top:0; right:0; opacity: 0.5;}

        .trollImg{position: absolute; bottom:-10rem; width:200px; height:auto; transition:2s;}
		.two:before{position:absolute; top:2px; right:-25px; content:"Fake and gay"; font-size:1.5rem; color:#503F3C; letter-spacing:0.1rem; background-image:url(img/bubble.svg);	
		background-repeat:no-repeat; background-position:cover; width:75px; height:75px;text-align:center; line-height:1.5rem; padding:2rem;font-style:italic; font-family: 'Montserrat', sans-serif;}
      .one{left:40%;}
        .two{ bottom:-50rem; left:6rem;  width:300px;}
	.four img{ -webkit-transform:rotate(-90deg);
				-moz-transform:rotate(-90deg);
				-ms-transform:rotate(-90deg);
				-o-transform:rotate(-90deg);
				transform:rotate(-90deg);}
		.three{top:-40rem; right:10rem; width:300px; }
		.four{top:5rem; right:-100rem;width:350px; }
		
		.three:before{position:absolute; top:20rem; right:-4rem; content:"U r bias!"; font-size:1.5rem; color:#503F3C; letter-spacing:0.1rem; line-height:1rem; background-image:url(img/bubbleTopLeft.svg);	
		background-repeat:no-repeat; background-position:cover; width:55px; height:55px;text-align:center; line-height:1.5rem; padding:2rem;font-style:italic; font-family: 'Montserrat', sans-serif}
		.three img{-webkit-transform:rotate(-180deg);
		-moz-transform:rotate(-180deg);
		-ms-transform:rotate(-180deg);
		-o-transform:rotate(-180deg);
		transform:rotate(-180deg);}
		
		.four:before{position:absolute; top:1rem; right:5.5rem; content:"Worse than Hitler"; font-size:1.5rem; color:#fff; letter-spacing:0.1rem; background-image:url(img/bubbleWhite.svg);	
		background-repeat:no-repeat; background-position:cover; width:80px; height:80px;text-align:center; line-height:1.5rem; padding:2rem;font-style:italic; font-family: 'Montserrat', sans-serif; }
		
        #info{position: fixed; width:20rem; height:10rem; background:grey; color:black; font-size: 2rem; z-index: 10;display:none;}
        svg{margin: 0 auto;width: 60%; }
        svg path{display: none;}


      .path {
  stroke-dasharray: 1594.0618896484375;
  stroke-dashoffset: 0;
  -moz-animation: dash 10s linear normal 1;
  -webkit-animation: dash 10s linear normal 1;
  -o-animation: dash 10s linear normal 1;
  -ms-animation: dash 10s linear normal 1;
  animation: dash 10s linear normal 1;
}

@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 1594.0618896484375;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes dash {
  from {
    stroke-dashoffset: 1594.0618896484375;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes dash {
  from {
    stroke-dashoffset: 1594.0618896484375;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  from {
    stroke-dashoffset: 1594.0618896484375;
  }
  to {
    stroke-dashoffset: 0;
  }
}