* {
    box-sizing: border-box;
}

body {
    font-family: Arial;
    padding: 10px;
    background: #f1f1f1;
}

/* Header/Blog Title */
.header {

    text-align: center;
    background: white;
}

.header h1 {
    font-size: 50px;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

.logo a,img{

width: 10%;


 background-color:none;
}




.social a,img{

width: 7%;

background-color:white;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 16px 18px;
    text-decoration: none;


}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
    background-color: #666;
    color: white;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
    color: black;
    
}

.logo a:hover{
    background-color:#333;
    color: none;
}
/* Style the top navigation bar */
.bottumnav {
    overflow: hidden;
    background-color: #333;


}

/* Style the topnav links */
.bottumnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 103px;
    text-decoration: none;
}

/* Change color on hover */
.bottumnav a:hover {
    background-color: #ddd;
    color: black;
}







/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
    float: left;
    width: 33.3%;
    padding-right: 5px;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 33.3%;
    background-color: #f1f1f1;
    padding-left: 5px;
}

/* Fake image */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 0px;
}

/* Add a card effect for articles */
.card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}

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

/* Footer */
.footer {
    padding: 1%;
    text-align: center;
    background: #333;
    margin-top: 20px ;
    text-decoration: none;
}

.footer a{
     padding: 4px;
    color: #ddd;
    text-decoration: none;
}

.footer a:hover{
     color:white;

    text-decoration: none;
}


/*
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);*/

/*body { 
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}*/

.text-1, 
.text-2, 
.text-3 {
    position: absolute;
    display: block;
    top: 9em;
    width: 50%;
    font-size: 1.5em;
    text-transform: uppercase;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    color: black;
    background-color: #eee3ff;
    border-radius: 5px;
    padding: 15px;

}

.text-1{
    animation-name: anim-1;
}

.text-2{
    animation-name: anim-2;

}

.text-3{
    animation-name: anim-3;
}

@keyframes anim-1 {
    0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 0.5; }
  33.33%, 100% { left: 50%; opacity: 0; }
}

@keyframes anim-2 {
    0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 0.5; }
  66.66%, 100% { left: 50%; opacity: 0; }
}

@keyframes anim-3 {
    0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 0.5; }
  100% { left: 50%; opacity: 0; }
}







/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}