@charset "utf-8";
/* CSS Document */

.introduction {
    height: 200px;  
    background: #70a1ff; 
    margin: 20px 41px 0 ; 
    padding: 10px 20px;     
    text-transform: capitalize;   
    color: #f2f2f2;
    background-position: center;
}

.introduction h2 {
    text-align: left; 
    margin-bottom: 10px; 
}

.introduction p {
    text-align: justify; 
    text-transform: none;
    font-style: italic; 
}

.path {
    width: 120px; 
    border-top: 1px solid #d0d0d0; 
    border-bottom: 1px solid #D0D0D0;   
    line-height: 17px;   
    margin: 5px 0 0 40px; 
    font-size: 15px; 
    text-transform: lowercase; 
    color: #5B5B5B; 
}

.path>span>a, .path>span>a:link {
    color: #5F85AA; 
    text-decoration: none; 
}

.path>span>a:hover, .path>span>a:active {
    color: #941B1D; 
    text-decoration:underline;
    
}


#introHome {
    background: url("../images/greatwall.png"); 
}

#introAbout {
    background: url("../images/empirecastle.png"); 
    background-position: center;
}

#introServices {
    background: url(../images/hongkong.png);  

}

#introBlog {
    background: url("../images/galacier.png"); 
    background-position: center;

}

#introPhotoCountries {
     background: url("../images/ceske.png");    
}

#introContact{
    background: url("../images/FestivalWalk.png");
    background-position: center; 
}

#introAbout p {
    color: #f2f2f2;   
}

#more1, #more2, #more3, #more4 {
    display: none; 
}


.moreBtn:hover {
    opacity: 90%; 
    cursor: pointer; 
}

#container {
    margin: 0 10px 0 10px ; 
    padding: 10px; 
    display: flex;
    flex-direction: row; 
    flex-wrap: wrap; 
    min-height: 55vh;
}

#container:after {
    content:"";
    display: block; 
    height: 20px; 
}

#album {
    margin: 0 30px 0 30px ; 
    padding: 10px; 
    min-height: 50vh;
}

#album:after {
    content:"";
    display: block; 
    height: 20px; 
}

#album img{
    height: 650px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    
.item {
    margin: auto; 
}

.box {
    justify-content: space-around;     
    overflow: hidden; 
    height: 300px; 
    margin: 20px; 
    width: 30%; 
    text-align: justify; 
    padding: 10px 20px;
    overflow-y: auto; 
}

.box p {
    padding: 10px 0; 
    line-height: 1.6; 
}

.box h2, .box h3 {
    text-transform: capitalize; 
}

.box b{
    color: #050505; 
    text-decoration: none;
}

.box b:hover, .box5 b:active{
    color: #F9AA33;
    text-decoration: none; 
}

.moreBtn {
    float: right; 
    opacity: 75%; 
    padding: 2px 5px; 
    text-align: center; 
    text-decoration: none;
    display: inline-block; 
    font-size: 0.9rem;  
    border-radius: 3px; 
    text-transform: capitalize; 

    z-index: -0.5; 
}

.box:nth-child(4n+1){
    background: #03dac5; 
}

.box:nth-child(4n + 2){
    background: #F9AA33; 
}

.box:nth-child(4n + 3){
    background: #FFF1AD; 
}

.box:nth-child(4n){
    background: #C1E581; 
}

.empty {
    opacity: 30%;     
}

.empty p {
    position: relative;
    top: 45%;
    text-align: center; 
    text-transform: uppercase; 
}

.aBox {
    justify-content: space-around; 
    overflow: hidden; 
    height: 400px; 
    margin: 10px; 
    width: 48%; 
    text-align: justify; 
    padding: 10px 20px;
    overflow-y: auto; 
}


.aBox p{
    line-height: 20px; 
}

.aBox:nth-child(2n+1){
    background: #03dac5;
    width: 64%;
}

.aBox:nth-child(2n){
    background: #25DDE0;
    width: 32%; 
}

.containerBlog a {
    color: red; 
}

.containerBlog a:hover, .containerBlog a:active {
    color:chocolate; 
}

.contactMean a {
    color: #000000; 
    text-decoration: none; 
        
}

.contactMean a:hover, .contactMean a:active {
    color: azure; 
    background: #1b9bff; 
    transition: .35s; 
    text-decoration: none; 
}


@media screen and (max-width: 1260px) {
    
    #container {
        margin: 0 8px 0 8px ; 
    }
    .box {
        width: 46%; 
    }
    
    .aBox:nth-child(2n+1){
        width: 50%;
    }

    .aBox:nth-child(2n){
        width: 45%; 
    }

}

@media screen and (max-width: 1050px) {
    
    #introduction {
        margin-right: 90px; 

    }
    
    #container {
        margin: 0 8px 0 8px ; 
    }
    .box {
        width: 43%; 
    }
    
    
     .aBox:nth-child(2n+1){
        width: 96%;
    }

    .aBox:nth-child(2n){
        width: 96%; 
    }   
    
    
    
}

@media screen and (max-width: 868px) {
    
    #introduction {
        margin-right: 41px; 
        height: 100px; 
    }
    
    #container {
        margin: 0 8px 0 8px ; 
    }
    .box {
        height: 330px; 
        width: 95%; 
    }
    
    
}