/* 
* Always set the map height explicitly to define the size of the div element
* that contains the map. 
*/
#map {
    height: 100%;
    width: 100%;
}

#frame_tl {
    width: 800px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
#frame_tl:after {
    content: '';
    background: #1d2c4d;

    width: 100%;
    height: 300%;
    position: absolute;
    transform: rotate(15deg) translate(-10%,-30%);;
}

#frame_tr {
    width: 800px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
}
#frame_tr:after {
    content: '';
    background: #1d2c4d;
    width: 100%;
    height: 300%;
    position: absolute;
    transform: rotate(-15deg) translate(80%,-30%);;
}

#frame_bl {
    width: 800px;
    height: 50px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
}
#frame_bl:after {
    content: '';
    background: #1d2c4d;
    width: 100%;
    height: 300%;
    position: absolute;
    transform: rotate(-15deg) translate(-60%,-70%);;
}

#frame_br1 {
    width: 800px;
    height: 50px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
}
#frame_br1:after {
    content: '';
    background: #1d2c4d;
    width: 100%;
    height: 300%;
    position: absolute;
    transform: rotate(15deg) translate(40%,-60%);;
}

#frame_br2 {
    width: 100px;
    height: 600px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
}
#frame_br2:after {
    content: '';
    background: #1d2c4d;
    width: 300%;
    height: 100%;
    position: absolute;
    transform: rotate(-15deg) translate(-50%,40%);;
}

#title_tl {
    position: absolute;
    top: 10;
    left: 30;
    color: #98a5be;
    font-family: 'Courier New', Courier, monospace;
    font-size: 70px;
}
#logo_tr {
    position: absolute;
    top: 20;
    right: 25;
    height: 60px;
    opacity: 0.9;
}
/* 
* Optional: Makes the sample page fill the window. 
*/
html,
body {
    margin: 10px;
    padding: 0;
    background-color: #1d2c4d;
}
  
  /*
   * Map styling

   [
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8ec3b9"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1a3646"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#4b6878"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#64779e"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#4b6878"
      }
    ]
  },
  {
    "featureType": "landscape.man_made",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#334e87"
      }
    ]
  },
  {
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#283d6a"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6f9ba5"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#3C7680"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#304a7d"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#98a5be"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#2c6675"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#255763"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#b0d5ce"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#98a5be"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#283d6a"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#3a4762"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#0e1626"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#4e6d70"
      }
    ]
  }
]