/* ----------------------
  Datacenter Header
----------------------- */

header.datacenter {
	position: relative;
}

header.datacenter .cover {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background-image: url(/imgs/banners/dc_bg.webp);
	background-size: cover;
	z-index:0;
}

header.datacenter .slider {
	color: #fff;
}

header.datacenter .slider h1 {
	font-size: 20px;
	font-family: 'poppins', Arial, sans-serif;
	font-weight: 600;
	margin-bottom: 20px;
	position: relative;
}

header.datacenter .slider h2 {
	font-size: 17px;
	font-weight: 200;
	font-family: 'poppins', Arial, sans-serif;
	margin-bottom: 25px;
	position: relative;
}

header.datacenter .slider h2 strong {
	font-weight: 600;
}

header.datacenter .slider p {
	position: relative;
	font-size: 14px;
	opacity: 0.7;
}

/* ----------------------
	Datacenter > Layer 1
----------------------- */

.datacenter .layer-1{
	background-color: #f0f3f6;
}

.datacenter .layer-1 .wrapper{
	padding-bottom: 40px;
	font-size: 0;

}

.datacenter .layer-1 .group {
	padding-top: 30px;
	position: relative;
}

.datacenter .layer-1 .col {
	background: rgba(228, 235, 240, 0.25);
	border-radius: 12px;
	padding: 10px;	
	box-shadow: 0px 0px 0px 13px rgba(255, 255, 255, 0) inset;
	transition: box-shadow 200ms;
}

.datacenter .layer-1 .col:hover {
	box-shadow: 0px 0px 0px 13px rgba(255, 255, 255, 0.3) inset;
}

.datacenter .layer-1 .col .inner{
	padding: 0 20px;
	background-color: #fff;
	border-radius: 12px;
	color: #1f5475;
	padding-bottom: 20px;
}

.datacenter .layer-1 .col .title{
	padding: 20px 0;
	text-align: center;
	position: relative;
}

.datacenter .layer-1 .col .title:after{
	display: block;
	content: '';
	position: absolute;
	left: auto;
	bottom: 0;
	width: 100%;
	height: 1px;	
	background-image: linear-gradient( 0deg, rgba(20,69,104,0) 0%, rgba(20,69,104,0.30196) 46%, rgba(20,69,104,0) 100%);
}

.datacenter .layer-1 .col h3{
	font-size: 18px;
	font-family: 'poppins', Arial, sans-serif;
}

.datacenter .layer-1 .col ul{
	list-style-type: none;
	margin-top: 15px;
	white-space: nowrap;
}

.datacenter .layer-1 .col ul > li{
	padding: 7px 0;
}

.datacenter .layer-1 .col ul > li span{
	font-size: 13px;
	opacity: 0.96;
	display: inline-block;
	vertical-align: middle;
}

.datacenter .layer-1 .col ul > li i{
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	width: 45px;
	height: 45px;
}

.datacenter .layer-1 .col ul > li i.ic-1{
	background-position: -4px -567px;
}

.datacenter .layer-1 .col ul > li i.ic-2{
	background-position: -4px -612px;
}

.datacenter .layer-1 .col ul > li i.ic-3{
	background-position: -274px -567px;
}

.datacenter .layer-1 .col ul > li i.ic-4{
	background-position: -139px -567px;
}

.datacenter .layer-1 .col ul > li i.ic-5{
	background-position: -184px -612px;
}

.datacenter .layer-1 .col ul > li i.ic-6{
	background-position: -94px -567px;
}

.datacenter .layer-1 .col ul > li i.ic-7{
	background-position: -49px -612px;
}

.datacenter .layer-1 .col ul > li i.ic-8{
	background-position: -229px -567px;
}

.datacenter .layer-1 .col ul > li i.ic-9{
	background-position: -274px -612px;
}

.datacenter .layer-1 .col ul > li i.ic-10{
	background-position: -139px -612px;
}

.datacenter .layer-1 .col ul > li i.ic-11{
	background-position: -229px -612px;
}

.datacenter .layer-1 .col ul > li i.ic-12{
	background-position: -49px -567px;
}

.datacenter .layer-1 .col ul > li i.ic-13{
	background-position: -94px -612px;
}

.datacenter .layer-1 .col ul > li i.ic-14{
	background-position: -184px -567px;
}

.datacenter .layer-1 .xcol {
	margin-top: 30px;
	white-space: nowrap;
}

.datacenter .layer-1 .xcol h4{
	font-size: 16px;
	font-weight: 600;
	font-family: 'poppins', Arial, sans-serif;
	text-align: center;
}

.datacenter .layer-1 .xcol ul > li {
	padding: 8px 0;
}

.datacenter .layer-1 .xcol ul > li span {
	display: inline-block;
	vertical-align: middle;
	opacity: 0.95;
	font-size: 13px;
}

.datacenter .layer-1 .xcol ul > li strong {
	display: block;
}

.datacenter .layer-1 .xcol ul > li i {
	display: inline-block;
	vertical-align: middle;
	width: 58px;
	height: 32px;
	margin-right: 3px;
}

.datacenter .layer-1 .xcol ul > li i.ic-rds{
	background-position: -384px -624px;
}

.datacenter .layer-1 .xcol ul > li i.ic-upc{
	background-position: -326px -560px;
}

.datacenter .layer-1 .xcol ul > li i.ic-orange{
	background-position: -558px -592px;
}

.datacenter .layer-1 .xcol ul > li i.ic-telekom{
	background-position: -326px -624px;
}

.datacenter .layer-1 .xcol ul > li i.ic-interlink{
	background-position: -500px -560px;
}

.datacenter .layer-1 .xcol ul > li i.ic-interlan{
	background-position: -500px -560px;
}

.datacenter .layer-1 .xcol ul > li i.ic-bensoft{
	background-position: -442px -560px;
}

.datacenter .layer-1 .xcol ul > li i.ic-vodafone{
	background-position: -442px -592px;
}

.datacenter .layer-1 .xcol ul > li i.ic-prime{
	background-position: -326px -592px;
}

.datacenter .layer-1 .xcol ul > li i.ic-level3{
	background-position: -500px -624px;
}

.datacenter .layer-1 .xcol ul > li i.ic-hurricane{
	background-position: -384px -592px;
}

.datacenter .layer-1 .xcol ul > li i.ic-telia{
	background-position: -558px -560px;
}

.datacenter .layer-1 .xcol ul > li i.ic-cogent{
	background-position: -500px -592px;
}

.datacenter .layer-1 .xcol ul > li i.ic-ntt{
	background-position: -442px -624px;
}

.datacenter .layer-1 .xcol ul > li i.ic-mc{
	background-position: -384px -560px;
}

.datacenter .layer-1 .xcol ul > li i.ic-mt{
	background-position: -326px -624px;
}

/* ----------------------
	Datacenter > Layer 2
----------------------- */

.datacenter .layer-2 .wrapper{
	padding: 50px 0px;
	color: #144568;
}

.datacenter .layer-2 .text h2{
	font-size: 20px;
	font-weight: 600;
	font-family: 'poppins', Arial, sans-serif;
	margin-bottom: 20px;
}

.datacenter .layer-2 .text h3{
	font-size: 17px;
	line-height: 26px;
	font-family: 'poppins', Arial, sans-serif;
}

.datacenter .layer-2 .im-diagram{
	margin-top: 40px;
}

/* ----------------------
	Datacenter > Layer 3
----------------------- */

.datacenter .layer-3{
	background-image: url(/imgs/dc_infra.webp);
	background-size: cover;
}

.datacenter .layer-3 .wrapper{
	padding: 50px 0;
	color: #fff;
}

.datacenter .layer-3 .text h2{
	font-size: 20px;
	font-family: 'poppins', Arial, sans-serif;
	margin-bottom: 20px;	
}

.datacenter .layer-3 .text h3{
	font-size: 17px;
	font-family: 'poppins', Arial, sans-serif;
	line-height: 26px;
}

.datacenter .layer-3 .row{
	margin-top: 40px;
	text-align: center;
}

.datacenter .layer-3 .col{
	padding: 30px;
	text-align: center;
	border-radius: 500px;
	vertical-align: middle;
	box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0) inset;
	transition: border-color 200ms, box-shadow 200ms;
}

.datacenter .layer-3 .col:hover {
	border-color:rgba(255, 255, 255, 0.5);
	box-shadow: 0px 0px 25px 25px rgba(255, 255, 255, 0.08) inset;
}

.datacenter .layer-3 .col i{
	margin: 0 auto 20px auto;
	width: 165px;
	height: 74px;
	display: block;
	transition: transform 300ms ease-out;
}

.datacenter .layer-3 .col:hover i{
	transform: translateY(8px);
}

.datacenter .layer-3 .col i.ic-cisco{
	background-position: -620px -560px;
}

.datacenter .layer-3 .col i.ic-mikrotik{
	background-position: -620px -634px;
}

.datacenter .layer-3 .col p{
	font-size: 14px;
	opacity: 0.8;
}

/* ----------------------
	Datacenter > Layer 4
----------------------- */

.datacenter .layer-4{
	background-color: #f3f7f9;
}

.datacenter .layer-4 .wrapper{
	color: #144568;
	padding: 100px 0;
}

.datacenter .layer-4 .text h2{
	font-size: 36px;
	font-weight: 600;
	font-family: 'poppins', Arial, sans-serif;
	margin-bottom: 20px;
}

.datacenter .layer-4 .text h3{
	font-size: 22px;
	font-family: 'poppins', Arial, sans-serif;
}

/* ----------------------
	Datacenter > Layer 5
----------------------- */

.datacenter .layer-5{
	background-image: url(/imgs/domains_adv.webp);
	background-size: cover;
}

.datacenter .layer-5 .wrapper{
	padding: 50px 0;
	color: #fff;
	text-align: center;
}

.datacenter .layer-5 .text h2{
	font-size: 20px;
	font-weight: 600;
	font-family: 'poppins', Arial, sans-serif;
	margin-bottom: 15px;
}

.datacenter .layer-5 .text h3{
	font-size: 17px;
	line-height: 26px;
	font-family: 'poppins', Arial, sans-serif;
}

.datacenter .layer-5 .benefits {
	margin-top: 40px;
}

.datacenter .layer-5 .col {
	border-radius: 30px;
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0) inset;
	transition: border-color 200ms, box-shadow 200ms;
}

.datacenter .layer-5 .col:hover {
	border-color:rgba(255, 255, 255, 0.5);
	box-shadow: 0px 0px 25px 25px rgba(255, 255, 255, 0.08) inset;
}

.datacenter .layer-5 .col i{
	display: block;
	margin: 0 auto 20px auto;
	width: 76px;
	height: 76px;
	transition: transform 300ms ease-out;
}

.datacenter .layer-5 .col:hover i {
	transform: translateY(-6px);
}

.datacenter .layer-5 .col i.ic-1{
	background-position: -459px -664px;
}

.datacenter .layer-5 .col i.ic-2{
	background-position: -4px -664px;
}

.datacenter .layer-5 .col i.ic-3{
	background-position: -307px -664px;
}

.datacenter .layer-5 .col i.ic-4{
	background-position: -535px -664px;
}

.datacenter .layer-5 .col i.ic-5{
	background-position: -155px -664px;
}

.datacenter .layer-5 .col i.ic-6{
	background-position: -80px -664px;
}

.datacenter .layer-5 .col i.ic-7{
	background-position: -231px -664px;
}

.datacenter .layer-5 .col i.ic-8{
	background-position: -383px -664px;
}

.datacenter .layer-5 .col h3{
	font-size: 18px;
	font-family: 'poppins', Arial, sans-serif;
	white-space: nowrap;
}

.datacenter .layer-5 .col p{
	opacity: 0.7;
	font-size: 13px;
	line-height: 1.6;
}

/* ----------------------
	Datacenter > Layer 6
----------------------- */

.datacenter .layer-6{
	height: 819px;
	background-image: url(/imgs/dc_cams_bg.webp);
	background-repeat: no-repeat;
	position: relative;
}

.datacenter .layer-6 .wrapper{
	padding-top: 90px;
	color: #3e5569;
}

.datacenter .layer-6 .text h2{
	font-family: 'poppins', Arial, sans-serif;
	font-size: 34px;
	margin-bottom: 20px;
}

.datacenter .layer-6 .text h2 strong{
	font-weight: 600;
}

.datacenter .layer-6 .text h3{
	font-family: 'poppins', Arial, sans-serif;
	font-size: 22px;
	opacity: 0.8;
}

.datacenter .layer-6 .im-robo{
	position: absolute;
	background-image: url(/imgs/dc_cams_robo.webp);
	width: 132px;
	height: 98px;
	right: 514px;
	bottom: 353px;
}

/* Breakpoint 768 */

@media only screen and (min-width : 768px) {

	header.datacenter .slider h1 {
		font-size: 26px;
	}
	
	header.datacenter .slider h2 {
		font-size: 20px;
	}
	
	.datacenter .layer-1 .col h3{
		font-size: 20px;
	}
	
	.datacenter .layer-1 .xcol h4{
		text-align: left;
	}
	
	.datacenter .layer-1 .col ul > li span{
		font-size: 15px;
	}
	
	.datacenter .layer-1 .xcol ul > li span{
		font-size: 13px;
	}
	
	.datacenter .layer-2 .text h2{
		font-size: 26px;
	}
	
	.datacenter .layer-2 .text h3{
		font-size: 20px;
		line-height: normal;
	}
	
	.datacenter .layer-3 .text h2{
		font-size: 26px;
	}
	
	.datacenter .layer-3 .text h3{
		font-size: 20px;
		line-height: normal;
	}
	
	.datacenter .layer-5 .text h2{
		font-size: 26px;
	}
	
	.datacenter .layer-5 .text h3{
		font-size: 20px;
		line-height: normal;
	}
}

/* Breakpoint 992 */

@media only screen and (min-width : 992px) {

	header.datacenter {
		height: 870px;
	}
	
	header.datacenter .slider h1 {
		font-size: 44px;
	}
	
	header.datacenter .slider h2 {
		font-size: 22px;
	}
	
	.datacenter .layer-1 .group {
		padding-top: 0;
		margin-top: -300px;
	}
	
	.datacenter .layer-1 .col h3{
		font-size: 26px;
	}
	
	.datacenter .layer-1 .col ul > li{
		padding: 14px 0;
	}
	
	.datacenter .layer-1 .xcol ul > li{
		padding: 8px 0;
	}
	
	.datacenter .layer-1 .col .inner{
		padding: 0 10px;
		height: 650px;
		padding-bottom: 0;
	}
	
	.datacenter .layer-1 .col .title{
		padding: 30px 0;
		text-align: center;
	}
	
	.datacenter .layer-1 .wrapper{
		padding-bottom: 75px;
	}
	
	.datacenter .layer-2 .wrapper{
		padding: 100px 0px;
	}
	
	.datacenter .layer-2 .text h2{
		font-size: 36px;
	}
	
	.datacenter .layer-2 .text h3{
		font-size: 22px;
	}
	
	.datacenter .layer-2 .im-diagram{
		margin-top: 80px;
	}
	
	.datacenter .layer-3{
		height: 730px;
	}
	
	.datacenter .layer-3 .wrapper{
		padding: 100px 0;
	}
	
	.datacenter .layer-3 .text h2{
		font-size: 36px;
	}
	
	.datacenter .layer-3 .text h3{
		font-size: 22px;
	}
	
	.datacenter .layer-3 .row{
		margin-top: 80px;
	}
	
	.datacenter .layer-3 .col{
		padding: 70px;
		margin: 0 -30px;
		border: 2px solid rgba(255, 255, 255, 0.3);
	}
	
	.datacenter .layer-3 .col i{
		margin: 0 auto 40px auto;
	}
	
	.datacenter .layer-5 .wrapper{
		padding: 100px 0;
	}
	
	.datacenter .layer-5 .text h2{
		font-size: 36px;
	}
	
	.datacenter .layer-5 .text h3{
		font-size: 22px;
	}
	
	.datacenter .layer-5 .benefits {
		margin-top: 80px;
	}
}

/* Breakpoint 1200 */

@media only screen and (min-width : 1200px) {

	.datacenter .layer-1 .col .inner{
		padding: 0 30px;
	}
	
	.datacenter .layer-1 .col .title{
		text-align: left;
	}
	
	.datacenter .layer-3 .col{
		padding: 70px 120px;
	}
}