@import url('https://fonts.googleapis.com/css?family=Caveat+Brush|Permanent+Marker|Walter+Turncoat');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');


.tag-mob-right {
    color: white;
      background-color: #000000;
font-family: 'Walter Turncoat', cursive;

	margin:50px;
	padding:10px;
    font-size: 200%;
margin-right:80px;

	float:right;
}

.tag-mob-left {
    color: white;
      background-color: #000000;
font-family: 'Walter Turncoat', cursive;
	margin:50px;
	padding:10px;
      font-size: 200%;
	float:left;
	margin-left:80px;

}


.logo-mob {
   
    z-index: 2;
    width: 80%;
	    margin-left: 10%;

}

.intro-text-mob{
position: absolute;
    background-color: black;
    padding: 5px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    text-align: center;
    color: white;
    box-shadow: 5px 7px 8px #00000075;
    margin-top: 241px;
    width: 80%;
    margin-left: 10%;
    font-size: 141%;
    transform: rotate(-2deg);
    border: 3px solid white;
}



/* On screens that are 650px or less, hide desktop website */
@media screen and (max-width: 650px) {
 .intro-text-mob{
    margin-top: 177px;
  }
  .tag-mob-right {
        background-color: #000000c2;
			float:left;
}

.tag-mob-left{
	 background-color: #000000c2;
}
}


/* On screens that are 337px or less, hide desktop website */
@media screen and (max-width: 337px) {
 .intro-text-mob{
    margin-top: 120px;
  }
}


/* On screens that are 1000px or less, hide desktop website */
@media screen and (max-width: 1000px) {
  .container {
    display: none;
  }
  
    body{ 
margin:0px;
 overflow:scroll;
}
}

.ss-menu-button-mob{
position: absolute;
       left: 89%;
    top: 3%;
    z-index: 1000;
    background-color: black;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    transform: rotate(8deg);
	 box-shadow: 5px 7px 8px #00000075;
    border: 2px solid white;
	cursor:pointer;
}

.ss-menu-button-mob img{
	width: 56%;
	box-sizing:content-box;
    padding: 11px;
    padding-top: 14px;
}



.mobile-container{
  max-width:1000px;
}

.one{
  width:100%;
  height:350px;
    background:url(images/intro-mob.jpg)  no-repeat center;
  -webkit-clip-path:  polygon(0 0, 100% 0, 100% 95%, 0% 100%);
	 clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
	float: left;
}




.two{
 width:100%;
  height:250px;
     background:url(images/young-carers-mob.jpg)  no-repeat right;

  -webkit-clip-path:  polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
	    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
	  float: left;
}


.two:hover { 
  background:url(images/young-carers-mob-bw.jpg)  no-repeat right;
   }

.three{
 width:100%;
  height:250px;
  background:url(images/prevent-mob.jpg)  no-repeat left;
 -webkit-clip-path:  polygon(0 5%, 100% 0, 100% 100%, 0% 95%);
	  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 95%);
	 float: left;
}


.three:hover{
  background:url(images/prevent-mob-bw.jpg)  no-repeat left;
}


.four{
  width:100%;
  height:250px;
  background:url(images/bullying-mob.jpg)  no-repeat left;
  -webkit-clip-path:  polygon(0 0%, 100% 5%, 100% 100%, 0% 95%);
    clip-path: polygon(0 0%, 100% 5%, 100% 100%, 0% 95%);
float: left;}



.four:hover{
  background:url(images/bullying-mob-bw.jpg)  no-repeat left;
}


.five{
  width:100%;
  height:250px;
  background:url(images/exploitation-mob.jpg)  no-repeat right;
 -webkit-clip-path:  polygon(0 0%, 100% 5%, 100% 100%, 0% 95%);
    clip-path: polygon(0 0%, 100% 5%, 100% 100%, 0% 95%);
float: left;}


.five:hover{
  background:url(images/exploitation-mob-bw.jpg)  no-repeat right;
  }


.six{
  width:100%;
  height:250px;
 background:url(images/relationship-abuse-mob.jpg)  no-repeat left;
   -webkit-clip-path: polygon(0 0%, 100% 5%, 100% 95%, 0% 100%);
   clip-path: polygon(0 0%, 100% 5%, 100% 95%, 0% 100%);
float: left;}

.six:hover{
  background:url(images/relationship-abuse-mob-bw.jpg)  no-repeat left;
 }





.seven{
  width:100%;
  height:250px;
  background:url(images/fgm-mob.jpg)  no-repeat right;
    -webkit-clip-path:  polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
	 clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
float: left;}


.seven:hover{
   background:url(images/fgm-mob-bw.jpg)  no-repeat right;
    }



.eight{
  width:100%;
  height:250px;
 background:url(images/homelessness-mob.jpg)  no-repeat right;
     -webkit-clip-path:  polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
	  clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
float: left;}

.eight:hover{
  background:url(images/homelessness-mob-bw.jpg)  no-repeat right;
     }


.nine{
  width:100%;
  height:250px;
 background:url(images/forced-marriage-mob.jpg)  no-repeat left;
   -webkit-clip-path:  polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
	 clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
float: left;}


.nine:hover{
   background:url(images/forced-marriage-mob-bw.jpg)  no-repeat left;
    }

.ten{
 width:100%;
  height:250px;
  background:url(images/hate-crime-mob.jpg)  no-repeat right;
       -webkit-clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
	   clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
float: left;}


.ten:hover{
  background:url(images/hate-crime-mob-bw.jpg)  no-repeat right;
    }

.eleven{
 width:100%;
  height:250px;
   background:url(images/violence-mob.jpg)  no-repeat left;
     -webkit-clip-path:  polygon(0 5%, 100% 0, 100% 100%, 0% 95%);
	    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 95%);
float: left;}

.eleven:hover{
    background:url(images/violence-mob-bw.jpg)  no-repeat left;
     }



.twelve{
  width:100%;
  height:250px;
 background:url(images/fabricated-illness-mob.jpg)  no-repeat right;
   -webkit-clip-path: polygon(0 0%, 100% 5%, 100% 100%, 0% 95%);
     clip-path: polygon(0 0%, 100% 5%, 100% 100%, 0% 95%);
float: left;}


.twelve:hover{
  background:url(images/fabricated-illness-mob-bw.jpg)  no-repeat right;
  }



.thirteen{
  width:100%;
  height:250px;
  background:url(images/children-missing-care-mob.jpg)  no-repeat right;
   -webkit-clip-path: polygon(0 0%, 100% 5%, 100% 100%, 0% 95%);
   clip-path: polygon(0 0%, 100% 5%, 100% 100%, 0% 95%);
float: left;}


.thirteen:hover{
   background:url(images/children-missing-care-mob-bw.jpg)  no-repeat right;
 }


.fourteen{
  width:100%;
  height:250px;
 background:url(images/cyberbullying-mob.jpg)  no-repeat left;
  -webkit-clip-path: polygon(0 0%, 100% 5%, 100% 95%, 0% 100%);
   clip-path: polygon(0 0%, 100% 5%, 100% 95%, 0% 100%);
float: left;}


.fourteen:hover{
   background:url(images/cyberbullying-mob-bw.jpg)  no-repeat left;
  }


.fifteen{
  width:100%;
  height:250px;
  background:url(images/mental-health-mob.jpg)  no-repeat left;
    -webkit-clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
	  clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
float: left;}


.fifteen:hover{
   background:url(images/mental-health-mob-bw.jpg)  no-repeat left;
   }





.sixteen{
  width:100%;
  height:250px;
  background:url(images/children-missing-education-mob.jpg)  no-repeat left;
     -webkit-clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
	  clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
float: left;}

.sixteen:hover{
   background:url(images/children-missing-education-mob-bw.jpg)  no-repeat left;
   }



.seventeen{
  width:100%;
  height:250px;
   background:url(images/sexting-mob.jpg)  no-repeat center;
    -webkit-clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
	 clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
	 float: left;}


.seventeen:hover{
   background:url(images/sexting-mob-bw.jpg)  no-repeat center;
   }



.eighteen{
 width:100%;
  height:250px;
 background:url(images/discrimination-mob.jpg)  no-repeat right;
   -webkit-clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
	    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
float: left;}


.eighteen:hover{
  background:url(images/discrimination-mob-bw.jpg)  no-repeat right;
      }




.nineteen{
 width:100%;
  height:250px;
 background:url(images/illegal-drugs-mob.jpg)  no-repeat left;
     -webkit-clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 95%);
	  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 95%);
float: left;}

.nineteen:hover{
  background:url(images/illegal-drugs-mob-bw.jpg)  no-repeat left;
   }



.twenty{
  width:100%;
  height:250px;
 background:url(images/faith-abuse-mob.jpg)  no-repeat left;
   -webkit-clip-path: polygon(0 0%, 100% 5%, 100% 100%, 0% 95%);
   clip-path: polygon(0 0%, 100% 5%, 100% 100%, 0% 95%);
float: left;}


.twenty:hover{
  background:url(images/faith-abuse-mob-bw.jpg)  no-repeat left;
   }



.twentyone{
  width:100%;
  height:250px;
 background:url(images/gang-violence-mob.jpg)  no-repeat left;
  -webkit-clip-path: polygon(0 0%, 100% 5%, 100% 100%, 0% 95%);
    clip-path: polygon(0 0%, 100% 5%, 100% 100%, 0% 95%);
float: left;}

.twentyone:hover{
  background:url(images/gang-violence-mob-bw.jpg)  no-repeat left;
 }



.twentytwo{
  width:100%;
  height:250px;
 background:url(images/relationships-sex-mob.jpg)  no-repeat left;
  -webkit-clip-path: polygon(0 0%, 100% 5%, 100% 95%, 0% 100%);
    clip-path: polygon(0 0%, 100% 5%, 100% 95%, 0% 100%);
float: left;}


.twentytwo:hover{
  background:url(images/relationships-sex-mob-bw.jpg)  no-repeat left;
 }


.twentythree{
  width:100%;
  height:250px;
 background:url(images/human-trafficking-mob.jpg)  no-repeat right;
   -webkit-clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);
	 clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);
float: left;}


.twentythree:hover{
  background:url(images/human-trafficking-mob-bw.jpg)  no-repeat right;
  }