@import url('https://fonts.googleapis.com/css?family=Montserrat:200,800');
       body {
           margin: 0;
           padding: 0;
           font-family: serif;
       }
       
       .header {
           width: 100%;
           height: 400px;
           position: relative;
       }

       img.house1img {
        margin-left: 0!important;
    }

    .wrapper1.wrapper2 {
            bottom: 7vw!important;
    }

    .wrapper1.wrapper2:before {
        position: absolute;
        width: 100%;
        height: 100%;
        content: '';
        background: inherit;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform-origin: top right;
        transform: skewY(5deg);
    }
       
       
       .name h2 {
           position: absolute;
           text-align: center;
           padding: 0;
           left: 50%;
           top: 35%;
           transform: translate(-50%, -50%);
           font-family: sans-serif;
           font-size: 4vw;
           max-width: 100%;
           -webkit-text-stroke: 1px #fff;
           -ms-text-stroke: 1px #fff;
       }
       
       .name {
           position: relative;
           width: 100%;
       }
       
       .tag h4 {
           position: absolute;
           left: 50%;
           top: 45%;
           transform: translate(-50%, -50%);
           color: #fff;
           font-size: 15px;
           font-family: cursive, sans-serif, "Montserrat";
       }
       
       .circle {
           border: 6px solid #fff;
           border-radius: 50%;
           width: 80px;
            height: 80px;
           position: absolute;
           top: 30px;
           margin: 0 30px;
           font-weight: bold;
       }
       
       .category {
           position: fixed;
           right: 300px;
           top: 20px;
           height: 80px;
           z-index: 9999;
       }
       
       .category li {
           list-style-type: none;
           float: left;
           margin: 10px;
       }
       
       .category a {
           padding: 20px;
           display: inline-block;
           text-decoration: none;
           color: #fff;
       }
       
       .logo p {
           float: left;
           color: #fff;
           margin: 10px 0 0 5px;
           font-size: 30px;
           display: inline-block;
           position: absolute;
           top: 40%;
           left: 45%;
           transform: translate(-50%, -50%);
           font-family: sans-serif;
       }
       
       .r {
           font-size: 20px;
       }
       
       .dropbtn {
           background-color: #C0392B;
           color: white;
           padding: 16px;
           font-size: 16px;
           border: none;
           cursor: pointer;
       }
       
       .dropdown {
           position: relative;
           display: inline-block;
           z-index: 1;
       }
       
       .dropdown-content {
           display: none;
           position: absolute;
           background-color: rgba(74, 150, 238, 0.8);
           min-width: 160px;
           box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
           z-index: 1;
       }
       
       .dropdown-content a {
           color: black;
           padding: 12px 16px;
           text-decoration: none;
           display: block;
           font-weight: bold;
       }
       
       .dropdown-content a:hover {
           background-color: #0B75EE;
           color: #fff;
       }
       
       .dropdown:hover .dropdown-content {
           display: block;
       }
       
       .dropdown:hover .dropbtn {
           background-color: #EE3232;
       }
       
       @keyframes spin {
           0% {
               transform: rotate(0deg);
           }
           100% {
               transform: rotate(360deg);
           }
       }
       
       .fa-navicon:before,
       .fa-reorder:before,
       .fa-bars:before {
           content: "\f0c9";
           font-size: 25px;
       }
       
       .nav {
           float: right;
           margin: 60px;
           font-family: cursive;
       }
       
       .fa-bars {
           position: absolute;
           top: 60px;
           color: #000;
           font-size: 25px;
           cursor: pointer;
           display: block;
       }
       
       ul {
           width: 300px;
           max-width: 100%;
           position: absolute;
           right: 70px;
           top: 100px;
           list-style-type: none;
           background: rgba(52, 152, 219, 0.3);
           display: none;
           z-index: 1;
       }
       
       ul li {
           margin: 20px;
       }
       
       ul li a {
           display: block;
           text-decoration: none;
           color: #fff;
           padding: 10px;
           font-size: 20px;
       }
       
       li:hover {
           position: relative;
           background: rgba(11, 117, 238, 0.6);
       }
       
       input[type=checkbox] {
           display: none;
       }
       /*Show menu when invisible checkbox is checked*/
       
       input[type=checkbox]:checked~#menu {
           display: block;
       }
       
       .clr {
           clear: both;
       }
       
       .wrapper {
           width: 100%;
           margin: auto;
           height: 400px;
           position: relative;
           background: #fff;
           margin-top: -200px;
       }
       
       .wrapper:before {
           position: absolute;
           width: 100%;
           height: 100%;
           content: '';
           background: inherit;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
           transform-origin: top right;
           transform: skewY(6deg);
       }
       
       .wrapper1 {
           width: 100%;
           height: auto;
           position: relative;
           background: #42C1EE;
           text-align: justify;
           margin-top: 100px;
       }
       
       .wrapper1:before {
           position: absolute;
           width: 100%;
           height: 100%;
           content: '';
           background: inherit;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
           transform-origin: top left;
           transform: skewY(-6deg);
       }
       
       .wrapper-container {
           max-width: 100%;
           height: auto;
           position: absolute;
           z-index: 999;
       }
       
       .wrapper-internal-cover {
           width: 1260px;
           max-width: 100%;
           margin: auto;
       }

       
       .wrapper-internal-container {
           width: 42%;
           float: left;
           padding: 20px;
       }
       
       .wrapper-internal-container img {
           width: 500px;
           max-width: 100%;
           height: auto;
           box-shadow: 10px 10px 5px #000;
       }
       
       .wrapper-internal-container p {
           text-align: justify;
       }
       
       .wrapper1-container {
           width: 1260px;
           max-width: 100%;
           margin: auto;
           height: auto;
           position: relative;
           z-index: 999;
       }
       
       .wrapper1-container img {
           max-width: 100%;
           width: 500px;
           height: auto;
           margin-left: 100px;
           box-shadow: -10px 10px 5px #000;
       }
       
       .wrapper1-container-internal {
           float: left;
           width: 45%;
           padding: 10px;
       }
       
       .footer {
           background: #000;
           min-height: 300px;
           position: relative;
       }
       
       .footer_content {
           width: 400px;
           max-width: 100%;
           color: #fff;
           position: absolute;
           left: 80px;
       }
       
       .footer_content a {
           color: #fff;
           text-decoration: none;
           display: inline-block;
           margin: 20px 0 0 60px;
       }
       
       .icon {
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%, -50%);
       }
       
       .icon i {
           color: #fff;
           font-size: 20px;
           padding: 10px;
           border: 1px solid #fff;
       }
       
       .icon .fa-facebook-f:hover {
           background: #1D36BC;
       }
       
       .icon .fa-twitter:hover {
           background: #13A6F2;
       }
       
       .icon .fa-pinterest:hover {
           background: #c8232c;
       }
       
       .copyright {
           background: #1C2833;
           height: 35px;
           line-height: 10px;
           color: #fff;
           padding: 10px;
           text-align: center;
           font-family: "Montserrat";
       }
       
       @media screen and (max-width: 1200px) {
           .wrapper-internal-container {
               width: 45%;
               float: left;
               padding: 10px;
           }
           .wrapper1-container img {
               margin-left: 0;
           }
       }
       
       @media screen and (max-width: 768px) {
           ul {
               right: 0;
               z-index: 9999;
               background: rgba(0, 0, 0, 0.7);
           }

           ul li {
               margin: 7px;
               float: left;
               width: 190px;
           }
           .name h2 {
               font-size: 30px;
               width: 100%;
           }
           .tag h4 {
               font-size: 14px;
               margin-top: 20px;
           }
           .category {
               position: fixed;
               display: inline-table;
               left: 0;
               top: 200px;
               height: 220px;
               z-index: 9999;
           }
           .dropdown {
               position: relative;
               display: block;
           }
           .dropdown-content {
               display: none;
               position: absolute;
               left: 60px;
               top: 5px;
               background-color: #f1f1f1;
               background-color: rgba(166, 172, 175, 0.7);
               box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
               z-index: 1;
           }
           .dropbtn {
               width: 60px;
               margin-top: 5px;
           }
       }
       
       @media screen and (max-width: 568px) {
           .wrapper-internal-container {
               width: 95%;
               float: none;
           }

           .wrapper1 {
            margin-top: 0;
            margin-bottom: 70px;
        }
           .wrapper1-container-internal {
               width: 95%;
               float: none;
           }
           .footer_content {
               left: 0;
           }
           .footer_content a {
               margin: 20px 0 0 40px;
           }

           .logo p{
            top: 31%;
           left: 43%;
           }
           .circle {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            margin: 4px 10px;
           }
           .tag h4 {
               font-size: 14px;
               margin-top: 20px;
               width: 200px;
           }
           .bx-wrapper .bx-pager.bx-default-pager a {
               margin-top: -90px;
           }
       }