/*global styles*/
body{
    font-size: 18px;
    line-height:1.65em;
    background-color:white;   

}
.container{
    padding-right:2.5%;
    padding-left:2.5%;
    background-color:white;
   
    

}

.navbar-brand{
    font-size: 2em;
    margin-bottom: 0.5%;
    margin-bottom: -0%;
    margin-bottom: -30%;
    font-family: 'Black Han Sans', sans-serif;
    

}
.navbar-nav{
    margin-left:-1.3%;
    margin-top:1.2%;
    margin-bottom:0.5%;
    clear:both;
    font-family: 'Black Han Sans', sans-serif;
    float: right;
    font-size: 80%;
    
}
.navbar-default{
    border-bottom:transparent;
    background-color:white;
}

.article{
    font-family: 'Raleway', sans-serif;
    
}
h4{
    font-size: 1em;
    font-family: 'Black Han Sans', sans-serif;
}

    
#content{
    margin-top:8%;
}

.mainContent{
    float: left;
    margin-top: 6%;
}

footer{
    font-family: 'Raleway', sans-serif;
    float:right;
    font-size: 0.7em;
    opacity: 0.6;
}

p{
    font-family:'Raleway', sans-serif;
}
.row div:nth-child(1){
    position: relative;
    z-index: 1;
    opacity: 1;
}

.row div:nth-child(1):hover{
    position: relative;
    z-index: 1;
    opacity: 0.5;
    
}

.row div:nth-child(2){
    position: relative;
    z-index: 1;
    opacity: 1;

}

.row div:nth-child(2):hover{
    position: relative;
    z-index: 1;
    opacity: 0.5;

}
.row div:nth-child(3){
    position: relative;
    z-index: 1;
    opacity: 1;

}
.row div:nth-child(3):hover{
    position: relative;
    z-index: 1;
    opacity: 0.5;

}

.row div:nth-child(4){
    position: relative;
    z-index: 1;
    opacity: 1;
}
.row div:nth-child(4):hover{
    position: relative;
    z-index: 1;
    opacity: 0.5;
}

@media only screen and (max-width:768px){
 .navbar-brand{
        font-size:1em;
    }
 .nav-toggle{
        margin:5%;
    }
    
    
/*
@media only screen and (max-width:680px){
    .navbar-brand{
        font-size:.75em;
        margin-top:-5%;
    }
    .nav-toggle{
        margin:1%;
    
    }
    
}
@media only screen and (min-width:1025px){
    body{ background-color: gray;
    
    }
}

@media only screen and (min-width:769px) and (max-width:1024px){
    body{ background-color: yellow;
    
    }
}

@media only screen and (min-width:581px) and (max-width:768px){
    body{ background-color: red;
    
    }
}

@media only screen and (min-width:300px) and (max-width:580px){
    body{ background-color: blue;
    
    }
}
*/

#myCarousel{
    margin-top: 13%;
    }