* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

#analog-clock {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: grey;
}

.outer {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28rem;
	width: 28rem;
	background: grey;
	border-radius: 50%;
	border: 10px solid black;
	box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.5);
}

.inner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 26rem;
	width: 26rem;
	border-radius: 50%;
	border: 20px solid blue;
	background: radial-gradient(circle, grey 45%, black 80%);
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.5rem;
	width: 1.5rem;
	background: #0b0b0b;
	border-radius: 50%;
}

.center-second {
	background: red;
	height: 0.8rem;
	width: 0.8rem;
}

.second-hand {
	height: 14rem;
	width: 0.1rem;
	background: white;
	transform: translateY(-4rem);
}

.minute-hand {
	height: 0;
	width: 1rem;
	border-bottom: 13rem solid red;
	border-right: 0.4rem solid transparent;
	border-left: 0.4rem solid transparent;
	transform: translateY(-4.5rem);
}

.hour-hand {
	height: 0;
	width: 1rem;
	border-bottom: 10rem solid red;
	border-right: 0.4rem solid transparent;
	border-left: 0.4rem solid transparent;
	transform: translateY(-3rem);
}

.segments {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%);
}

.segment {
	position: absolute;
	top: 0;
	left: 0;
	height: 12.8rem;
	width: 0px;
	background: green;
	transform-origin: center top;
}

.mark {
	height: 1.2rem;
	width: 1px;
	background: white;
}

.mark-hour {
	height: 1.2rem;
	transform: translateX(-2px);
	width: 4px;
}

.num {
	color: green;
	position: absolute;
	top: 2.7rem;
	left: 50%;
	text-align: center;
	line-height: 0;
	font-size: 2rem;
	font-weight: 700;
	font-family: helvetica;
}

#digital-clock {
    border-style: solid;
    border-color: blue;
    border-radius: 5px;
    border-width: 3px;
    padding: 5px;
    text-align: center;
    background: linear-gradient(to top, grey, black);
    font-size: 24px;
    font-weight: bold;
    color: yellow;
    margin: 5px 0px 5px 25px;
    margin: auto;
    width: 25%;
	float:left;
	position: absolute;
	bottom:5vh;
	left:5vw;
}

.smallHeader {
	float:left;
	position: absolute;
	top:2vh;
	width:100vw;
}

#leftsecRow {
    float: left;
    padding-left: 10px;
    padding-right: 15px;
}
#rightsecRow {
    float: right;
    margin-right: 10px;
}
#logoText {
    float: left;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 2px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.button {
    border: none;
    border-radius: 4px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    box-shadow: 5px 10px 18px #888888;
    background-image: linear-gradient(to bottom, #a1c4fd 0%, rgba(66,108,128,1) 100%);
}
.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: blue; /* Grey */
    color: black;
}

#wrap3 {
    width: 160px;
    height: 180px;
    padding: 0;
    overflow: hidden;
	float:right;
	position: absolute;
	bottom:1px;
	right:1px;
}
#scaled-frame3 {
    width: 1280px;
    height: 800px;
    border: 0px;
}
#scaled-frame3 {
    zoom: 0.26;
    -moz-transform: scale(0.21);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.21);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.21);
    -webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #scaled-frame3 {
    zoom: 1;
	}
}