body {margin: 0;
	  font-family:helvetica;
	  font-size:medium;
	  background-image: linear-gradient(to bottom right, #005EAA , white);}

#wrapper { width: 85%;
          margin-right: auto;
		  margin-left: auto;
		  background-color:white;
		  color: #34495E;
}

header { 
       
        color:#005EAA;
       background-image: url('/150.5/img/hp_img.jpg');
	   background-position: center;
	   background-repeat: no-repeat;
	   margin-bottom:-60;
}

h1,h2,h3{
	text-align:center;
	
	}
h1.header
{ text-align: center;
     font-size: 3em;
     padding: 50px;
	 line-height: 150%;
	 text-shadow: 3px 3px 3px #CCCCCC;
	 font-style:italic;
}

/*navigation bar*/
ul.topnav {
    list-style-type: none;
    margin: 0;
    top-margin:0;
    overflow: hidden;
    text-align:center;
    background-color: #005EAA;
	
	
}

ul.topnav li {display:inline;
	
    }

ul.topnav li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family:Arial Black;
    font-style:bold;
    position: relative;
    
}

ul.topnav li a:hover:not(.active) {color: grey;}

ul.topnav li a.active {color: grey;}



ul.language{
    list-style-type: none;
    margin: 0;
    top-margin:0;
    overflow: hidden;
    text-align:center;}
    
ul.language li {display:inline;
	
    }

ul.language li a {
    display: inline-block;
    color: #005EAA;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family:Arial Black;
    font-style:bold;
    position: relative;
    
}

ul.language li a:hover:not(.active) {color: grey;}

ul.language li a.active {color: grey;}


@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}

/*Footer*/

.footer-distributed{
	background-color: #ffffff;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: normal 16px sans-serif;

	padding: 45px 50px;
	margin-top: 60px;
}

.footer-distributed .footer-left p{
	color:  black;
	font-size: 14px;
	margin: 0;
}

/* Footer links */

.footer-distributed p.footer-links{
	font-size:18px;
	font-weight: bold;
	color:  #39729B;
	margin: 0 0 10px;
	padding: 0;
}


.footer-distributed p.footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}

.footer-links a:hover{
    
    opacity:0.6;}


.footer-distributed .footer-right{
	float: right;
	margin-top: 6px;
	max-width: 200px;
}


/*.footer-distributed .footer-right a{
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 2px;

	font-size: 20px;
	color: #39729B;
	text-align: center;
	line-height: 65px;

	margin-left: 3px;
}*/

.fa {

  padding: 20px;
  font-size: 30px;
  width: 70px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 2px;
}

.fa:hover {
    opacity: 0.7;
}


.fa-youtube {
  background: #bb0000;
  color: white;
}
.fa-youtube1 {
  background: #39729B;
  color: white;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}





.fa-hand-o-right {
  background: transparent;
  color: #F44336;
}



/* Responsive Footer Layout*/

@media (max-width: 600px) {

	.footer-distributed .footer-left,
	.footer-distributed .footer-right{
		text-align: center;
	}

	.footer-distributed .footer-right{
		float: none;
		margin: 0 auto 20px;
	}

	.footer-distributed .footer-left p.footer-links{
		line-height: 1.8;
	}
}



/* Button for gradient color*/
.button {
  display: inline-block;
  border-radius: 4px;
  background-image: linear-gradient(to bottom right,#4d79ff, #002f55 );
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 270px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}


/* For center div*/
.div_center
{width: 500px; 
 margin: 0 auto;}
 
 @media screen and (max-width: 600px) {
    .div_center {
        width: 100%;
    }
}

/* Create two equal columns for homepage */
* {
    box-sizing: border-box;
}


.column {
    float: left;
    width: 50%;
    padding: 10px;
    height: 500px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        height:auto;
    }
}


/* Colums for 30% + 70%*/
.column_left {
    float: left;
    width: 30%;
    padding: 10px;
    height: 320px;
}
.column_right {
    float: left;
    width: 70%;
    padding: 10px;
    height: 320px;
}

.column_left a{
    font-size:15px;
	font-weight: bold;
	color:  #39729B;
	margin: 0 0 10px;
	padding: 0;
	text-decoration: none;
	display:inline-block;
	line-height: 1.8;
    font-size: 17px;
}

.column_left a:hover{
    opacity:0.6;}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 600px) {
    .column_left {
        width: 100%;
        height:auto;
    }
    .column_right {
        width: 100%;
    }
	}


	
	
/* Three equal columns */
.column3 {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row3:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
	


/*insert a line */
hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
    width: 40px;
    text-align:left;
}