html, body {
    width:100%;
    height:100%;
}  

html {display:table;}

body {
  display:table-cell;
  vertical-align:middle;
  font-family: 'Source Sans Pro', sans-serif;
}  

  
#content {
  padding: 0 15px;
  max-width:320px;
  margin:15px auto;
}

@media (min-width: 480px) {
  #content {
    max-width:420px;
  }  
}

@media (min-width: 768px) {
  #content {
    max-width:768px;
    margin-top:30px
  }  
}

#interface {
  margin-bottom:25px;
}


#device-wrap {
  position:relative;
}

#device {
  cursor:pointer;
  margin: 0 auto 10px;
  width:48%;
  max-width:290px;
}

@media (min-width: 480px) {
  #device {
    margin: 0 auto;
    width:100%;
  }
}

#calltoaction-wrap {
  position:absolute; 
  left: 50%;
	  top: 18%;    
  margin: 0 auto;
}
#btn-calltoaction {
  position:relative; 
  left: -50%;
	top: -18%;
  box-shadow:1px 1px 2px rgba(0,0,0,.3);
}


@media (min-width: 768px) {
	#calltoaction-wrap {
	  top: 23%;    
	}
	#btn-calltoaction {
	  top: -23%;
	}
}

#sayings {
  text-align:center; 
  margin-bottom:20px;
}

@media (min-width: 480px) {
  #sayings {
    margin-top:15px;
  }
}

@media (min-width: 768px) {
  #sayings {
    margin-top:50px;
    margin-bottom:50px;
  }
}


  .saying {
    text-transform:uppercase; 
    display:table;
    margin:0 auto;
    color:#d8e2e9;  
    font-weight:900;
    cursor:pointer;
    font-size:27px;
     transition: color .25s ease-in-out;
     -moz-transition: color .25s ease-in-out;
     -webkit-transition: color .25s ease-in-out;
  }
  

  @media (min-width: 480px) {
    .saying {
      font-size:24px;
    }
  }
  @media (min-width: 768px) {
    .saying {
      font-size:48px;
    }  
  }

  .saying:hover {
    color:#b7c9d7;
  }

  .saying.selected {
    color:#86a4bc;  
  }

hr {
  margin-top:17px; margin-bottom:17px;
}

#share-wrap {
  margin: 0 auto;
  text-align:center; 
}
 
.btn-share {
 margin:0 5px; 
 border: 1px solid #d8e2e9;
 color: #86a4bc;
}

  .btn-share:hover {
   border: 1px solid #428bca;
   background-color: #428bca;
  }

  .btn-share:hover .text-primary {
   color: #fff;
  }

#spons {
  width:100%;
  color:#86a4bc;  
  display:table;
  background-color:#e8eef2;
  padding:10px 15px;
  margin: 0 auto 20px;
  border-radius:8px;
  border: 1px solid #d8e2e9;
  text-align:center;
}

#spons:hover {
  text-decoration:none;
  background-color:#d8e2e9;
  color:#658baa;
}
 

#footer {
  width:100%;
  color:#86a4bc;  
  display:table;
  margin: 0 auto;
}

  #footer p {
    margin-bottom: 3px;
    font-weight:700;
  }  
  
  #footer p:last-child {
    margin-bottom: 0;
    font-weight:400;
  }