outcome_BSE.css

h2{
    color:black;
}
p{
    color:black;
}

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
}

.img_1-1{background-image:url('awareness_button.jpg');}

.click { 
		position: absolute; 
        left:0px;
		width:100%; 
		height:100%;
		background-color: transparent; 
		border: 1px solid yellow; }

.fit_screen {
    width:100%;
    left:33%;
    top:25%;
    position:absolute;
    margin:0px auto;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover}


#text {
    display:none;}

#voiceselection {
    float:right;
    position:relative;
    top:46px;
    left:-20px;}

input {
    float:right;
    position:relative;
    top:-965px;
    left:-10px}

.button{
   background: url("play.png") no-repeat 0 0;
   height: 50px;
   width: 50px;
    top:30px;
    left:-40px;
    float:right;
    border:none;
   }

/*  following just for the demo */


body {
    font-size:20px;
    font-family: 'Lato',verdana, sans-serif;
    color: #fff;
    text-align:center;
    background:#40ba40;
}

#bottom {
    clear:both;
    margin:0 1.66%;
    width:89.68%;
    padding: 3.5%;
    background-color:#1E1E1E;
    color: #fff;
}
#bottom p{
    text-align:center;
    line-height:2em;
}
#bottom a{
    color: #000;
    text-decoration:none;
    border:1px solid #000;
    padding:10px 20px 12px;
    line-height:70px;
    background:#ccc;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#bottom a:hover{
    background:#ECECEC;
    border:1px solid #fff;
}

p{
}