/* Code By Webdevtrick ( https://webdevtrick.com ) */


body {
 

   background-position: center;
  background-repeat: repeat;
  background-size: cover;
  position: relative;


}

#Page0 label {
    display:none;
}

body .list ::-webkit-input-placeholder {

  color: #cecece;
}


body .list span:hover {
  transform: rotate(180deg);
}
body ul {


  padding: 0px;
}


body ul .draggable {

  will-change: transform;

  font-family: "Raleway", sans-serif;
  font-weight: 600;
  height: 50px;
  list-style-type: none;
  margin: 10px;
  background-color: #3385ff;
  color: white;
  width: 100%;

  padding-left: 10px;
  cursor: move;
  transition: all 200ms;
  user-select: none;
  margin: 10px auto;
  position: relative;
}
body ul .draggable:after {
  content: '';
  right: 7px;
  font-size: 10px;
  position: absolute;
  cursor: pointer;
  line-height: 5;
  transition: all 200ms;
  transition-timing-function: cubic-bezier(0.48, 0.72, 0.62, 1.5);
  transform: translateX(120%);
  opacity: 0;
}
body ul .draggable:hover:after {
  opacity: 1;
  transform: translate(0);
}

.over {
  transform: scale(1.1, 1.1);
}

.box-element{
	/*box-shadow:hsl(0, 0%, 80%) 0 0 16px;*/
	background-color: #fff;
	border-radius: 4px;
	padding: 10px;
	  font-size: 15px;


}

span {
        text-align: center;
       text-decoration:underline;
       color:blue;
       cursor:pointer;
     }


option {
  word-wrap: break-word;
}







body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}




.clickable {
    cursor: pointer;
    text-decoration: underline;
}


.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}

.aesthetic{
	box-shadow:hsl(0, 0%, 80%) 0 0 16px;
    background-color: rgba(255, 99, 132, 0.5);
    border-radius: 4px;
    padding: 10px;
    font-size: 15px;

    }

.economic{
    box-shadow:hsl(0, 0%, 80%) 0 0 16px;
    background-color: rgba(54, 162, 235, 0.5);
    border-radius: 4px;
    padding: 10px;
    font-size: 15px;

    }

.individualistic{
   	box-shadow:hsl(0, 0%, 80%) 0 0 16px;
    background-color: rgba(255, 206, 86, 0.5);
    border-radius: 4px;
    padding: 10px;
    font-size: 15px;

    }

.political{
   	box-shadow:hsl(0, 0%, 80%) 0 0 16px;
    background-color: rgba(75, 192, 192, 0.5);
    border-radius: 4px;
    padding: 10px;
    font-size: 15px;

    }

.altruist{
   	box-shadow:hsl(0, 0%, 80%) 0 0 16px;
    background-color: rgba(153, 102, 255, 0.5);
    border-radius: 4px;
    padding: 10px;
    font-size: 15px;

    }

.regulatory{
  	box-shadow:hsl(0, 0%, 80%) 0 0 16px;
    background-color: rgba(255, 159, 64, 0.5);
    border-radius: 4px;
    padding: 10px;
    font-size: 15px;

    }

.theoretical{
   	box-shadow:hsl(0, 0%, 80%) 0 0 16px;
    background-color: rgba(66, 245, 99,0.5);
    border-radius: 4px;
    padding: 10px;
    font-size: 15px;

    }




    *{padding: 0; margin: 0; box-sizing: border-box;}
    body{height: 900px;}
    header {
      background: url('https://cyberbacker.ph/wp-content/uploads/2019/11/sub-1.jpg');
      text-align: center;
      width: 100%;
      height: 200px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: left bottom;
      position: relative;
      overflow: hidden;
      
    }
    header .overlay{
      width: 100%;
      height: 30%;
      padding: 10px;
      color: #FFF;
      text-shadow: 1px 1px 1px #333;
      background-image: linear-gradient( 135deg);
      
    }
    
    header.h1 {
      font-family: 'Dancing Script', cursive;
      margin-bottom: 30px;
    }
    
    header.h3{
      font-family: 'Open Sans', sans-serif;
      margin-bottom: 30px;
    }

    h4{
      font-weight: 600;
    }

    h1{
      font-weight: 600;
    }
    

input[type=checkbox]:checked + label {
  font-weight: 600;
  font-style: normal;
 
} 


.btn {
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
    width:50%;    //Specify your width here
}

.border-success {
    border-color:transparent !important;
}