/* Global changes */ 

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Open Sans', sans-serif;   
}

body{
    background-image: url(../img/Background/Gulet\ Carpe\ Diem\ 7\ -\ High\ Point\ Yachting1.jpg); background-size:100% auto; background-repeat: no-repeat;
}


/* --- Right-box changes --- */


@media screen and (min-width:1921px) and (max-width:2560px){
    .right-box{
        width:100%;
        color:#fff;
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        align-items:flex-end;
        padding-top:0em;
        padding-right:2em;
    }
    
    .right-box .logo{
        width:40%;
        
    }
    
    .right-box img{
        width:65%;
        display:block;
        margin:0 auto;
        
    }
    
    
    .right-box h4{
        width:50%;
        text-align:center;
        padding-bottom:1em;
        padding-left:5em;
    }
    
    .right-box p{
        width:42%;
        font-size:1.4em;
        line-height:1.8em;
        padding:0em 1em;
        text-align:justify;
    }

    .right-box p a{
        color:#fff;
        text-decoration:underline;
    }

    .right-box p a:hover{
        
        color:yellow;
    }


    
    .right-box a{
        width:48%;
        text-decoration:none;   
    }

    .right-box a img{
        width:70%;
        padding-left:10em;
    }

    .right-box .btn{
        width:auto;
        font-size:1.5em;
        padding:0.3em;  
        display:block;
        margin:0 auto;
    }
    
    
    .redes-cont{display:flex;flex-direction:row;justify-content: space-around;margin-top:1em; margin-bottom:0em;}
    .redes-cont ul{width:8%;display:flex;flex-direction:row;list-style:none;}
    .redes-cont ul li i{font-size:2.4em; color:#fff; margin-left:0.6em;}
    .redes-cont ul li i:hover{
        color:yellow;  
    }
    
    /* --- Left-box changes --- */
    
    .left-box{
        width:25%;
        height:auto;  
        color:#fff;
        text-align:center;
    }
    
    .left-box .carousel{
        width:23%;
        display:flex;
        position:relative;
        top:8em;
        left:5em;
        opacity: 0.8;
        
    }
    
    .left-box .carousel img{
        width:100%;
        height:20em;
        border-radius:0.5em;
    }
}


@media screen and (min-width:1600px) and (max-width:1920px){
    .right-box{
        width:100%;
        color:#fff;
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        align-items:flex-end;
        padding-top:0em;
        padding-right:2em;
    }
    
    .right-box .logo{
        width:40%;
        
    }
    
    .right-box img{
        width:65%;
        display:block;
        margin:0 auto;
        
    }
    
    
    .right-box h4{
        width:49.5%;
        text-align:center;
        padding-bottom:1em;
        padding-left:5em;
    }
    
    .right-box p{
        width:42%;
        font-size:1em;
        line-height:1.8em;
        padding:0em 1em;
        text-align:justify;
    }

    .right-box p a{
        color:#fff;
        text-decoration:underline;
    }

    .right-box p a:hover{
        
        color:yellow;
    }


    
    .right-box a{
        width:48%;
        text-decoration:none;   
    }

    .right-box a img{
        width:70%;
        padding-left:10em;
    }
    
    .right-box .btn{
        width:auto;
        font-size:1.5em;
        padding:0.3em;  
        display:block;
        margin:0 auto;
    }
    
    
    .redes-cont{display:flex;flex-direction:row;justify-content: space-around;margin-top:1em; margin-bottom:0em;}
    .redes-cont ul{width:8%;display:flex;flex-direction:row;list-style:none;}
    .redes-cont ul li i{font-size:2.4em; color:#fff; margin-left:0.6em;}
    .redes-cont ul li i:hover{
        color:yellow;  
    }
    
    /* --- Left-box changes --- */
    
    .left-box{
        width:25%;
        height:auto;  
        color:#fff;
        text-align:center;
    }
    
    .left-box .carousel{
        width:23%;
        display:flex;
        position:relative;
        top:8em;
        left:5em;
        opacity: 0.8;
        
    }
    
    .left-box .carousel img{
        width:100%;
        height:20em;
        border-radius:0.5em;
    }
}

@media screen and (min-width:1201px) and (max-width:1599px){
    .right-box{
        width:100%;
        color:#fff;
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        align-items:flex-end;
        padding-top:0em;
        padding-right:0em;
    }
    
    .right-box .logo{
        width:35%;
        
    }
    
    .right-box img{
        width:80%;
        display:block;
        margin:0 auto;
        
    }
    
    
    .right-box h4{
        width:35%;
        text-align:center;
    }
    
    .right-box p{
        width:35%;
        font-size:1em;
        line-height:1.8em;
        padding:0em 0em;
        text-align:justify;
    }

    .right-box p a{
        color:#fff;
        text-decoration:underline;
    }

    .right-box p a:hover{
        
        color:yellow;
    }

    
    .right-box a{
        width:25%;
        text-decoration:none;   
    }

    
    
    .right-box a img{
        width:80%;
        padding-left:0em;
    }



    .right-box .btn{
        width:auto;
        font-size:1.6em;
        padding:0.3em;  
        display:block;
        margin:0 auto;
    }
    
    
    .redes-cont{display:flex;flex-direction:row;justify-content: space-around;margin-top:1em; margin-bottom:0em;}
    .redes-cont ul{width:1%;display:flex;flex-direction:row;list-style:none;}
    .redes-cont ul li i{font-size:2em; color:#fff; margin-left:1.5em;}
    .redes-cont ul li i:hover{
        color:yellow;  
    }
    
    /* --- Left-box changes --- */
    
    .left-box{
        width:25%;
        height:auto;  
        color:#fff;
        text-align:center;
    }
    
    .left-box .carousel{
        width:23%;
        display:flex;
        position:relative;
        top:8em;
        left:5em;
        opacity: 0.8;
        
    }
    
    .left-box .carousel img{
        width:100%;
        height:20em;
        border-radius:0.5em;
    }
}

@media screen and (min-width:1000px) and (max-width:1200px){

    body{
        background-image: url(../img/Background/Gulet\ Carpe\ Diem\ 7\ -\ High\ Point\ Yachting1.jpg); background-size:140%; background-position:top; background-repeat: no-repeat;
    }

    .right-box{
        width:100%;
        color:#fff;
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        align-items:flex-end;
        padding-top:0em;
        padding-right:2em;
    }
    
    .right-box .logo{
        width:100%;
        
    }
    
    .right-box img{
        width:50%;
        display:block;
        margin:0 auto;
        
    }
    
    
    .right-box h4{
        width:100%;
        text-align:center;
        padding-bottom:1em;
        padding-left:5em;
    }
    
    .right-box p{
        width:100%;
        font-size:1em;
        line-height:1.8em;
        padding:0em 1em;
        text-align:justify;
    }

    .right-box p a{
        color:#fff;
        text-decoration:underline;
    }

    .right-box p a:hover{
        
        color:yellow;
    }


    
    .right-box a{
        width:100%;
        margin-top:5em;
        text-decoration:none;   
    }

    .right-box a img{
        width:35%;
        padding-left:0em;
    }

    
    .right-box .btn{
        width:auto;
        font-size:1.5em;
        padding:0.3em;  
        display:block;
        margin:0 auto;
    }
    
    
    .redes-cont{width:100%;display:flex;flex-direction:row;justify-content: center;margin-top:1em; margin-bottom:0em; }
    .redes-cont ul{width:100%;display:flex;flex-direction:row;list-style:none; }
    .redes-cont ul li i{font-size:2.4em; color:#fff; margin-left:1em;}
    .redes-cont ul li i:hover{
        color:yellow;  
    }
    
    /* --- Left-box changes --- */
    
    .left-box{
        width:25%;
        height:auto;  
        color:#fff;
        text-align:center;
    }
    
    .left-box .carousel{
        width:23%;
        display:flex;
        position:relative;
        top:8em;
        left:5em;
        opacity: 0.8;
        
    }
    
    .left-box .carousel img{
        width:100%;
        height:20em;
        border-radius:0.5em;
    }
}

@media screen and (min-width:300px) and (max-width:850px){

    body{
        width:100%;
        height:auto;
        background-image: url(../img/Background/Oysters.jpeg); background-size:cover;background-position:center; background-repeat: no-repeat;
        
    }

    .right-box{
        width:100%;
        height:51em;
        color:#fff;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        padding-top:0em;
        padding-bottom:2em;
        padding-right:0em;
    }
    
    .right-box .logo{   
        margin:0 auto;
        position:relative;
        top:-1em;
    }

    .right-box .logo img{
        width:60%;
        display:block;
        margin:0 auto;
        padding-bottom:0em;
        background-color:#2869a3;
    }

    .right-box .logo img, .right-box h4{
        margin-top:1em;
        position:relative;
        top:-7em !important ;
    }

    .right-box h4{
        width:100%;
        font-size:1.2em;
        text-align:center;
        padding-bottom:1.5em;
        position:relative;
        top:-2em;
    }
    
    .right-box p{
        width:90%;
        font-size:1.2em;
        line-height:1.5em;
        text-align:center;
        padding-bottom:0em;  
        position:relative;
        top:-2em;
    }

    .right-box p span{
        display:none;
    }

    .right-box a{
        width:100%;
        color:#fff;
        text-decoration:none;
    }

    .right-box a:hover{
        color:yellow;
    }

    .right-box a img{
        width:100%;
        padding-left:0em;
    }

    .right-box .btn{
        display:block;
        margin:0 auto;
        margin-top:0.5em;
    }

    .redes-cont{width:100%;display:flex;flex-direction:row;justify-content: center; align-items:center;margin-top:1em; margin-bottom:0em;}
    .redes-cont ul{width:100%;display:flex;flex-direction:row; list-style:none;}
    .redes-cont ul li i{font-size:2.4em; color:#fff; margin-left:1.12em;}
    .redes-cont ul li i:hover{color:yellow;}
    
    /* --- Left-box changes --- */
    
    .left-box{
        width:25%;
        height:auto;  
        color:#fff;
        text-align:center;
        display:none;
    }
    
    .left-box .carousel{
        width:100%;
        display:flex;
        position:relative;
        top:0em;
        left:0em;
        opacity: 0.8;
        
    }
    
    .left-box .carousel img{
        width:100%;
        height:15em;
        border-radius:0.5em;
    }
}

@media screen and (min-width:100px) and (max-width:500px){
    
}