@font-face{
    font-family: "Roma";
    src: url(fonts/BauTF-Regular.ttf), url(fonts/BauTF-Regular.otf)
}
html, body{margin:0;padding:0;}
body{
     font-family: "Roma";
     background-color: #162298;
     color: #FFFFFF;
   }

h1.title{font-weight:300;margin:0;padding:0;font-size: 43px;margin-top:80px;text-align: center;}
 .footer{
     position: absolute;
     bottom: 0;
     width: 100%;
     margin: 0 0 40px 0;
 }
 .footer h1{font-weight: normal;}


 .barcelona{
     float: right;
     text-align: center;
     margin-right: 80px;
 }

 .rio{
     text-align: center;
     margin-left: 19px;
 }

 .text-left p{
     margin:0;padding:0;
     font-weight: normal;
     color:#fff;
 }
 .text-left a{text-decoration: none;}
.letter{
    display: block;
    margin:0 auto;
    margin-bottom:20px;
    margin-left:5px;
    width:36px;
}

 .text-right p{
     font-weight: normal;
     margin:0;padding: 0;
     color:#fff;
 }
.text-right a{text-decoration: none;}
.phone{
    width:28px;
    display: block;
    margin:0 auto;
    margin-bottom:20px;
    margin-right:5px;
}
.text-right p span{margin-bottom:10px;}


/** Mediaqueeries **/
@media only screen and (max-width: 768px) {

    h1.title{font-size: 22px;margin:30px 0;}
    #roma{max-width:90%;margin:20px auto 30px auto;display: block;}

    .text-left{margin-bottom:10px;}
    .text-left p{font-size: 18px;display: inline-block;vertical-align: middle;}
    .text-left img{margin:0;margin-right:6px;height: 30px;vertical-align: middle;display: inline-block;}

    .text-right p{font-size: 18px;display: inline-block;vertical-align: middle;}
    .text-right img{margin:0;vertical-align:middle;height: 30px;display: inline-block;}

    .div-left{width: 100%;float:none;clear: both;}
    .div-right{width: 100%;float:none;clear: both;}

    .footer{position: relative;clear: both;bottom:auto;margin-top:30px;}
    .footer h1{margin:10px 0;font-size: 20px;}
    .footer p{font-size: 13px;font-weight: normal;margin:0;padding: 0;}

    .barcelona{float:none;display: inline-block;margin:0 auto;margin-bottom:40px;}
    .rio{float:none;display: inline-block;margin:0 auto;}

    .container{text-align: center;width: 100%;}
    body{text-align: center;}
}


@media only screen and (min-width: 768px) {
    .div-left{
        width: 50%;
        float: left;
    }

    .div-right{
        float: left;
    }
    .text-left{
        line-height: 40px;
        width:40px;
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        left: 2%;
        min-height: 350px;
    }
    .text-left p {
        writing-mode: vertical-lr;
        transform: rotate(180deg);
        font-size:29px;
    }
    .text-right{
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        right: 2%;
        width: 38px;
        min-height: 350px;
    }
    .text-right p {
        writing-mode: vertical-lr;
        font-size:27px;
    }
    #roma {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width:80%;
    }

}

@media only screen and (min-width: 992px) {
    #roma{width:788px;}
}