@font-face {  font-family: 'Raleway-Thin';  src: url('./fonts/Raleway.eot'); /* IE9 Compat Modes */  src: url('./fonts/Raleway.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */    url('./fonts/Raleway.woff2') format('woff2'), /* Modern Browsers */    url('./fonts/Raleway.woff') format('woff'), /* Modern Browsers */    url('./fonts/Raleway.ttf') format('truetype'), /* Safari, Android, iOS */    url('./fonts/Raleway.svg') format('svg'); /* Legacy iOS */  font-weight: normal;  font-style: normal;  }@font-face {  font-family: 'District Pro Thin';  src: url('./fonts/DistProTh.otf');    src: url('./fonts/DistrictPro-Thin.eot');  src: url('./fonts/DistrictPro-Thin.eot?#iefix') format('embedded-opentype'),       url('./fonts/DistrictPro-Thin.woff2') format('woff2'),       url('./fonts/DistrictPro-Thin.woff') format('woff'),       url('./fonts/DistrictPro-Thin.ttf') format('truetype'),       url('./fonts/DistrictPro-Thin.svg#DistrictPro-Thin') format('svg');  font-weight: normal;  font-style: normal;}



.city {        margin: 30px;    padding: 60px ,60px ,60px ,60px;    width: 600px;        } 	  



h1 {color:black ;font-family: Raleway-Thin ;font-size:350%;font-style: normal;  font-weight: 100; padding:0px 0px 0px 0px }



a:link    {color:black; background-color:transparent; text-decoration:none; font-style: strong; font-weight: 500}



a:visited {color:black; background-color:transparent; text-decoration:none; font-style: bold}



a:hover   {color:grey; background-color:transparent; text-decoration:none; font-style: bold}



a:active  {color:black; background-color:transparent; text-decoration:none; font-style: bold}




a {    color:black;    font-family: District Pro Thin;    font-size:170%;	padding: 0px 45px 0px 35px;	font-style: bold;  font-weight: 500;	}



p { color:black ;font-family: District Pro Thin ;font-size:115%;font-style: normal;  font-weight: 100 }	



div.cities {     margin: 38px;    padding:0px 30px 0px 0px;	width: 600px;	 	}	



pre {  color:black;    font-size:150%;		  }	



.floatTL{ position:absolute;    top:25px;    left:42px	}



h2 {color:black ;font-family: Raleway-Thin ;font-size:120%; font-style: normal; font-weight: 500;padding:100px 30px 25px 42px }



h3 {color:black ;font-family: District Pro Thin;font-size:120%; font-style: normal; font-weight: 100;padding: 0px 30px 25px 35px ;text-decoration: underline }



h4 {color:black ;font-family: Raleway-Thin ;font-size:120%; font-style: normal; font-weight: 500;padding:30px 30px 25px 270px }
h5 {color:black ;font-family: Raleway-Thin ;font-size:120%; font-style: normal; font-weight: 500;padding:0px 0px 0px 0px }



a.error {    color: black;	padding: 0px 0px 0px 0px;	margin: 72px;	font-size:100%;}



div.desc {	border-style: solid;     border-width: 1px;	 padding: 10px;	 margin: 0% 0% 0% 50px;	 	 position: relative;	 	 }



div.villa{        margin: 38px;    padding:0px 30px 25px 0px;    width: 600px;	 line-height: 170%;        } 



.floatTL1{ position:absolute;    top:10px;    right:42px;	font-size: 70%;	font-style: strong;	font-family: Distric Pro Thin;}



/* added css - Yasmine */

.contentbox {

    padding: 50px 0;

    width: 50%;

    margin:0 auto;

}

.contentbox1 {

    position:absolute;    top:200px;    right:60px;
    

}


.contentbox-info {

    display: flex;

    align-items: center;

}



.contentbox-contact {

    margin-left: 40px;

}



.contact-button {

    border: 1px solid #000;

    padding:20px;

}



.contentbox h2 {

    padding: 0;

}



/* media querie */

@media only screen and (min-device-width : 320px) and (max-device-width : 600px) {

    .contentbox {

        width: 90%;

        margin:0 auto;


    }

    

    .contentbox-info {

        display: flex;

        flex-direction: column;

    }

    .contentbox-contact {

        margin-top: 40px;

        margin-left:0;

    }

    

    .contentbox h2 {

        padding: 0;

    }

}