@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body{
	margin: 0;
	font-family: 'Poppins', sans-serif; 
}

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

/*header*/

header{
	height: 8vh;
	background-color: #1b1e27ee;
	position: absolute;
	z-index: 1;
	display: grid;
	grid-template-columns: 10% 40% 40% 10%;
	grid-template-rows: 100%;
	width: 100%;
}
header .brand{
	grid-column: 2/3;
	display: flex;
	align-items: center;
}
header .nav{
	grid-column: 3/4;
	align-items: center;
	display: flex;
	justify-content: center;
}
header .brand img{
	width: 6vh;
	height:6vh;
	display: flex;
}
header .brand h2{
	padding: 0;
	margin: 0;
	font-size: 4vh;
	font-weight: 700;
	color: #fde250;
	align-self: flex-end;
	letter-spacing: .4vh;
}
header .nav .toggler{
	display: none;
}
header .nav .hamburger{
	display: none;
}
header .nav .menu{
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding-bottom: .5vh;
}
header .nav .menu a{
	text-decoration: none;
	text-transform: uppercase;
	color: #f4f8a7;
	font-size: 2.4vh;
	font-weight: 300;
	padding-bottom: .5vh;
}
header .nav .menu a::before{
	content:'';
	height: 2px;
	width: 0%;
	background-color: #fde250;
	transition: all 1s ease;
	display: block;
	position: relative;
	top:33px; 
}
header .nav .menu a:hover::before{
	width: 100%;
}
header .nav .menu a.active::before{
	width: 100%;
}
header .nav .menu a.active{
	color: #fde250;
}

@media only screen and (max-width: 1000px){
header{
	display: flex;
	width: 100%;
	padding-left: 2.5%;
	padding-right:2.5%;
}
header .brand{
	display: flex;
	max-width: 50%;
	flex:0 0 50%;
}
header .nav{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	max-width: 50%;
	flex:0 0 50%;
}
header .nav .toggler{
	display: flex;
	z-index: 2;
	height: 6vh;
	width: 6vh;
	position: absolute;
	cursor: pointer;
	background-color: transparent;
	opacity: 0;
}
header .nav .hamburger{
	display: flex;
	z-index: 3;
	position: absolute;
	height:2vh; 
	width: .5vh;
	background-color: #fde250;
	top:2.5vh;
	right: 2.75vh;
}
header .nav .hamburger{
	display: flex;
	z-index: 3;
	position: absolute;
	height:.5vh; 
	width:4vh;
	background-color: #fde250;
	top:4.5vh;
	right: 1.5vh;
	transition: all .5s ease;
}
header .nav .hamburger::before{
	content: '';
	display: flex;
	z-index: 3;
	position: absolute;
	height:.5vh; 
	width: 4vh;
	background-color: #fde250;
	top: 1.5vh;
}
header .nav .hamburger::after{
	content: '';
	display: flex;
	z-index: 3;
	position: absolute;
	height:.5vh; 
	width: 4vh;
	background-color: #fde250;
	top: -1.5vh;
}
header .nav .menu{
	visibility: hidden;
	display:flex;
	transform: translateX(-50%) translateY(325%) scale(2);
	background-color: #1b1e27ee;
	padding-bottom: 0;
}
header .nav .menu a{
	font-size: 1vh;
	padding-bottom: 0;
}
header .nav input:checked +.hamburger{
	transform: rotate(135deg);
}
header .nav input:checked +.hamburger::before{
	transform: rotate(90deg);
	top: 0;
	left:0;
}
header .nav input:checked +.hamburger::after{
	transform: rotate(90deg);
	top: 0;
	left: 0;
}
header .nav input:checked ~.menu{
	visibility: visible;
}
}


/*intro*/

.intro{
	background-color: #1b1e27;
	display: grid;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 20vh;
	padding-bottom: 10vh;
	grid-template-columns: 35% 55%;
	grid-column-gap: 10%;
	grid-template-rows: 55vh 85vh;
	grid-row-gap: 10vh;
}
.intro .info{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	grid-row:1/2;
	transform: translateY(-2vh);
}
.intro .gif{
	display: flex;
	justify-content: flex-end;
}
.intro .chal{
	display: flex;
	flex-direction: column;
	grid-column: 1/3;
	transform: translateY(-5vh);
}
.intro .gif img{
	display: flex;
	width: 100%;
	height: 100%;
}
.intro .info .title h2{
	font-size: 4.5vh;
	font-size: 600;
	text-transform: uppercase;
	color: #f4f8a7ee;
	letter-spacing: .5vh;
	padding: 0;
	margin: 0;
}
.intro .info .para p{
	font-size: 2vh;
	color: #f4f8a7cc;
}
.intro .info .rest{
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: repeat(6, 4vh);
	grid-row-gap: 4vh;
	transform: translateY(3vh);
}
.intro .info .rest .table{
	border-bottom: 1px solid #f4f8a788;
	display: flex;
}
.intro .info .rest .table label{
	font-size: 2vh;
	font-weight:400;
	color: #f4f8a777;
	margin-right: 1vh;
}
.intro .info .rest .table h6{
	font-size: 2vh;
	font-weight:600;
	color: #f4f8a799;
}
.intro .chal h3{
	font-weight:600;
	color: #f4f8a799;
	font-size: 2.5vh;
	margin-top: 5vh;
	margin-bottom: 2vh;
}
.intro .chal p{
	font-size: 300;
	color: #f4f8a777;
	font-size: 2vh;
}
.intro .chal img{
	height: 50vh;
	opacity: .6;
}
@media only screen and (max-width: 1000px){
.intro{
	padding-left: 2.5%;
	padding-right: 2.5%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 140vh;
}
.intro .info{
	transform: translateY(-50%);
}
.intro .gif{
	display: flex;
	justify-content: center;
	transform: translateY(20%);
}
.intro .chal{
	transform: translateY(60%);
	padding-bottom: 15vh;
}
.intro .info .title h2{
	text-align: center;
}
.intro .info .para p{
	font-size: 2vh;
	color: #f4f8a777;
	text-align: center;
}
.intro .info .rest{
	display: none;
}
.intro .gif img{
	transform: scale(2);
}
.intro .chal h3{
	font-weight:600;
	color: #f4f8a799;
	font-size: 3vh;
}
.intro .chal p{
	font-size: 300;
	color: #f4f8a777;
	font-size: 2.25vh;
}
}

/*discover*/

.discover{
	padding:0;
	font-family: 'Poppins', sans-serif;
	padding-bottom: 50px;
	padding-top: 50px;
	background-color: #dddddd;
}
.discover .container{
	width: 80%;
	margin:auto;
}
.discover .season{
	padding:0;
	margin:0;
	padding-top: 50px;
	padding-bottom: 50px;
	display: inline-block;
}
.discover .season h2{
	margin: 0;
	padding: 0;
	font-size: 5vh;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1vh;
	border-bottom: 0.25vh solid #ec8c26;
	color: #444444;
}
.discover .chapter{
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2.5vh;
	margin-bottom: 10vh;
}
.discover .chapter .text{
	display: flex;
	flex:0 0 100%;
	max-width: 100%;
	flex-direction: column;
	margin-bottom: 5vh;
}
.discover .chapter .text h4{
	margin-bottom: 2.5vh;
	font-size: 2.5vh;
	font-weight: 600;
	color: #444444;
	transform: translateX(2.5vh);
}
.discover .chapter .text h4::before{
	content: '';
	height: 1vh;
	width: 1vh;
	background-color: black;
	position: absolute;
	transform: translateX(-2.5vh) translateY(1.5vh);
	border-radius: 50%;
}
.discover .chapter .text p{
	margin: 0;
	padding:0;
	font-size: 18px;
	color: #222222;
	font-weight: 400;
}
.discover .images2{
	display: flex;
	padding-left: 0;
	padding-right:0;
	justify-content: space-between;
}
.discover .images2 a{
	display:contents;
}
.discover .images2 img{
	display: flex;
	flex:0 0 47.5%;
	max-width: 47.5%;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #aaaaaa;
}
.discover .images3{
	display: flex;
	padding-left: 0;
	padding-right:0;
	justify-content: space-between;
}
.discover .images3 img{
	display: flex;
	flex:0 0 30%;
	max-width: 30%;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #aaaaaa;
}
.discover .images3 a{
	display:contents;
}
.discover .images6{
	display: grid;
	padding-left: 0;
	padding-right:0;
	grid-template-columns: 30% 30% 30%;
	grid-column-gap: 5%;
	grid-template-rows: auto;
	grid-row-gap: 7.5vh;
}
.discover .images6 a{
	display:contents;
}
.discover .images6 img{
	display: flex;
	margin: 0;
	padding: 0;
	width: 100%;
	max-height: 100%;
	border: 3px solid #aaaaaa;
}
.discover .chapter .text ol{
	margin-left: 5vh;
	font-size: 18px;
}
.discover .chapter .text li{
	margin-top: 2vh;
}
@media only screen and (max-width: 1000px){
.discover .container{
	width: 95%;
}
.discover .images{
	grid-template-rows: repeat(4, 200px);
}
}


/*define*/

.define{
	padding:0;
	font-family: 'Poppins', sans-serif;
	padding-bottom: 50px;
	padding-top: 50px;
	background-color: #eeeeee;
}
.define .container{
	width: 80%;
	margin:auto;
}
.define .season{
	padding:0;
	margin:0;
	padding-top: 50px;
	padding-bottom: 50px;
	display: inline-block;
}
.define .season h2{
	margin: 0;
	padding: 0;
	font-size: 5vh;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1vh;
	border-bottom: 0.25vh solid #ec8c26;
	color: #444444;
}
.define .text .prototype li{
	transform: translateX(-2vh);
}
.define .images2{
	display: flex;
	padding-left: 0;
	padding-right:0;
	justify-content: space-between;
}
.define .images2 a{
	display:contents;
}
.define .images2 img{
	display: flex;
	flex:0 0 47.5%;
	max-width: 47.5%;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #aaaaaa;
}

.define .chapter{
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2.5vh;
	margin-bottom: 10vh;
}
.define .chapter .text{
	display: flex;
	flex:0 0 100%;
	max-width: 100%;
	flex-direction: column;
	margin-bottom: 5vh;
}
.define  .text h6{
	font-size: 1.8vh;
	font-weight: 500;
	color: #555555;
}
.define .text h5{
	display: inline-block;
	margin: 0;
	padding:0;
	font-size: 18px;
	color: #222222;
	font-weight: 400;
}
.define .text span{
	color: #ec8c26;
}
.define .text span::before{
	content: '';
	height:3vh;
	width: auto;
	border-radius: 1vh;
	color: #444444;
	position: absolute;
	background-color: white;
	transform: translateY(-4vh);
	padding: .5vh;
	font-size: 14px;
	visibility: hidden;
}
.define .text .insight1::before{
	content: 'The portal is not perceived as alive.'
}
.define .text .insight2::before{
	content: 'People`s perception is that the information is not updated and organized intuitively.'
}
.define .text .insight3::before{
	content: 'There are too many tools and it is not clear what their operation is and what their goal is; tools that are not allowed are used despite safety concerns.'
}
.define .text .insight4::before{
	content: 'The menu is complex: it is not easy to use.'
}
.define .text .insight5::before{
	content: 'The relationship with the news is mainly impulsive; there are different types of news in different sections of the page and this is not intuitive for the user.'
}
.define .text .insight6::before{
	content: 'Access to the tools and information used daily is complex: The possibility of customization is seen as an added value for the portal.'
}
.define .text .insight7::before{
	content: 'Information about people is not enough and the organization chart it is not navigable.'
}
.define .text .insight8::before{
	content: 'The integration between personal calendar and corporate events and courses is missing.'
}
.define .text span:hover::before{
	visibility: visible;
}
.define .table{
	display: flex;
}
.define .text .table ul{
	list-style-image: url(define/arrow1.png);
	margin-left: 5vh;
}
.define .table li h5{
	margin-left: 4vh;
}
.define .text ul{
	list-style: none;
}
.define  .text li{
	margin-left: 2.5vh;
	margin-top: 2.5vh;
}
.define .chapter .text h4{
	margin-bottom: 2.5vh;
	font-size: 2.5vh;
	font-weight: 600;
	color: #444444;
	transform: translateX(2.5vh);
}
.define .chapter .text h4::before{
	content: '';
	height: 1vh;
	width: 1vh;
	background-color: black;
	position: absolute;
	transform: translateX(-2.5vh) translateY(1.5vh);
	border-radius: 50%;
}
.define .chapter .text p{
	margin: 0;
	padding:0;
	font-size: 18px;
	color: #222222;
	font-weight: 400;
}
.define .image img{
	display: flex;
	flex:0 0 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #aaaaaa;
}
.define .images2{
	display: flex;
	padding-left: 0;
	padding-right:0;
	justify-content: space-between;
}
.define .images2 a{
	display:contents;
}
.define .images2 img{
	display: flex;
	flex:0 0 47.5%;
	max-width: 47.5%;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #aaaaaa;
}
.define .images3{
	display: flex;
	padding-left: 0;
	padding-right:0;
	justify-content: space-between;
}
.define .images3 img{
	display: flex;
	flex:0 0 30%;
	max-width: 30%;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #aaaaaa;
}
.define .images3 a{
	display:contents;
}
.define .images6{
	display: grid;
	padding-left: 0;
	padding-right:0;
	grid-template-columns: 30% 30% 30%;
	grid-column-gap: 5%;
	grid-template-rows: auto;
	grid-row-gap: 7.5vh;
}
.define .images6 a{
	display:contents;
}
.define .images6 img{
	display: flex;
	margin: 0;
	padding: 0;
	width: 100%;
	max-height: 100%;
	border: 3px solid #aaaaaa;
}
.define .chapter .text ol{
	margin-left: 5vh;
	font-size: 18px;
}
.define .chapter .text li{
	margin-top: 2vh;
}
@media only screen and (max-width: 1000px){
.define .container{
	width: 95%;
}
.define .images{
	grid-template-rows: repeat(4, 200px);
}
}

/*develop*/

.develop{
	padding:0;
	font-family: 'Poppins', sans-serif;
	padding-bottom: 50px;
	padding-top: 50px;
	background-color: #dddddd;
}
.develop .container{
	width: 80%;
	margin:auto;
}
.develop .season{
	padding:0;
	margin:0;
	padding-top: 50px;
	padding-bottom: 50px;
	display: inline-block;
}
.develop .season h2{
	margin: 0;
	padding: 0;
	font-size: 5vh;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1vh;
	border-bottom: 0.25vh solid #ec8c26;
	color: #444444;
}
.develop .chapter{
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2.5vh;
	margin-bottom: 10vh;
}
.develop .chapter .text{
	display: flex;
	flex:0 0 100%;
	max-width: 100%;
	flex-direction: column;
	margin-bottom: 5vh;
}
.develop .chapter .text h4{
	margin-bottom: 2.5vh;
	font-size: 2.5vh;
	font-weight: 600;
	color: #444444;
	transform: translateX(2.5vh);
}
.develop .chapter .text h4::before{
	content: '';
	height: 1vh;
	width: 1vh;
	background-color: black;
	position: absolute;
	transform: translateX(-2.5vh) translateY(1.5vh);
	border-radius: 50%;
}
.develop .chapter .text p{
	margin: 0;
	padding:0;
	font-size: 18px;
	color: #222222;
	font-weight: 400;
}
.develop  .text h6{
	font-size: 1.8vh;
	font-weight: 500;
	color: #555555;
}
.develop .images3{
	display: flex;
	padding-left: 0;
	padding-right:0;
	justify-content: space-between;
}
.develop .images3 img{
	display: flex;
	flex:0 0 30%;
	max-width: 30%;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #aaaaaa;
}
.develop .images3 a{
	display:contents;
}
.develop .images9{
	display: grid;
	padding-left: 0;
	padding-right:0;
	grid-template-columns: 30% 30% 30%;
	grid-column-gap: 5%;
	grid-template-rows: auto;
	grid-row-gap: 7.5vh;
	margin-bottom: 10vh;
}
.develop .images9 a{
	display:contents;
}
.develop .images9 img{
	display: flex;
	margin: 0;
	padding: 0;
	width: 100%;
	max-height: 30vh;
	height: 30vh;
	border: 3px solid #aaaaaa;
}
.develop .table{
	display: flex;
}
.develop .text h5{
	display: inline-block;
	margin: 0;
	padding:0;
	font-size: 18px;
	color: #222222;
	font-weight: 400;
}
.develop .text span{
	color: #ec8c26;
}
.develop .text span::before{
	content: '';
	height:3vh;
	width: auto;
	border-radius: 1vh;
	color: #444444;
	position: absolute;
	background-color: white;
	transform: translateY(-4vh);
	padding: .5vh;
	font-size: 14px;
	visibility: hidden;
}
.develop .text .Design1::before{
	content: 'Social Features'
}
.develop .text .Design2::before{
	content: 'Simplified Search Engine'
}
.develop .text .Design3::before{
	content: 'Toolbox'
}
.develop .text .Design4::before{
	content: 'Speak my Language(menu)'
}
.develop .text .Design5::before{
	content: 'Organized News Section'
}
.develop .text .Design6::before{
	content: 'Personalized Section'
}
.develop .text .Design7::before{
	content: 'Synced Calendar'
}
.develop .text .Design8::before{
	content: 'Personal Profiles'
}
.develop .text span:hover::before{
	visibility: visible;
}
.develop h3{
	font-size: 2vh;
	color: #444444;
	margin-bottom: 5vh;
}
.develop .text .prototype li{
	transform: translateX(-2vh);
}
.develop .text ul{
	list-style: none;
}
.develop  .text li{
	margin-left: 2.5vh;
	margin-top: 2.5vh;
}
.develop .chapter .table ol{
	margin-left: 1.5vh;
	font-size: 18px;
}
.develop .table .first{
	display: flex;
	flex: 0 0 33%;
	max-width: 33%;
}
.develop .table .first li{
	margin-bottom: 6vh;
}
@media only screen and (max-width: 1000px){
.develop .container{
	width: 95%;
}
.develop .images{
	grid-template-rows: repeat(4, 200px);
}
}

/*deliver*/

.deliver{
	padding:0;
	font-family: 'Poppins', sans-serif;
	padding-bottom: 50px;
	padding-top: 50px;
	background-color: #eeeeee;
}
.deliver .container{
	width: 80%;
	margin:auto;
}
.deliver .season{
	padding:0;
	margin:0;
	padding-top: 50px;
	padding-bottom: 50px;
	display: inline-block;
}
.deliver .season h2{
	margin: 0;
	padding: 0;
	font-size: 5vh;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1vh;
	border-bottom: 0.25vh solid #ec8c26;
	color: #444444;
}
.deliver .chapter{
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2.5vh;
	margin-bottom: 10vh;
}
.deliver .chapter .text{
	display: flex;
	flex:0 0 100%;
	max-width: 100%;
	flex-direction: column;
	margin-bottom: 5vh;
}
.deliver .chapter .text h4{
	margin-bottom: 2.5vh;
	font-size: 2.5vh;
	font-weight: 600;
	color: #444444;
	transform: translateX(2.5vh);
}
.deliver .chapter .text h4::before{
	content: '';
	height: 1vh;
	width: 1vh;
	background-color: black;
	position: absolute;
	transform: translateX(-2.5vh) translateY(1.5vh);
	border-radius: 50%;
}
.deliver .chapter .text p{
	margin: 0;
	padding:0;
	font-size: 18px;
	color: #222222;
	font-weight: 400;
}
.deliver  .text h6{
	font-size: 1.8vh;
	font-weight: 500;
	color: #555555;
}
.deliver .images3{
	display: flex;
	padding-left: 0;
	padding-right:0;
	justify-content: space-between;
}
.deliver .images3 img{
	display: flex;
	flex:0 0 30%;
	max-width: 30%;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #aaaaaa;
}
.deliver .images3 a{
	display:contents;
}
.deliver .images9{
	display: grid;
	padding-left: 0;
	padding-right:0;
	grid-template-columns: 30% 30% 30%;
	grid-column-gap: 5%;
	grid-template-rows: auto;
	grid-row-gap: 7.5vh;
	margin-bottom: 10vh;
}
.deliver .images9 a{
	display:contents;
}
.deliver .images9 img{
	display: flex;
	margin: 0;
	padding: 0;
	width: 100%;
	max-height: 30vh;
	height: 30vh;
	border: 3px solid #aaaaaa;
}
.deliver .table{
	display: flex;
}
.deliver .text h5{
	display: inline-block;
	margin: 0;
	padding:0;
	font-size: 18px;
	color: #222222;
	font-weight: 400;
}
.deliver .text span{
	color: orange;
}
.deliver .text span::before{
	content: '';
	height:3vh;
	width: auto;
	border-radius: 1vh;
	color: #444444;
	position: absolute;
	background-color: white;
	transform: translateY(-4vh);
	padding: .5vh;
	font-size: 14px;
	visibility: hidden;
}
.deliver .text .Design1::before{
	content: 'Social Features'
}
.deliver .text .Design2::before{
	content: 'Simplified Search Engine'
}
.deliver .text .Design3::before{
	content: 'Toolbox'
}
.deliver .text .Design4::before{
	content: 'Speak my Language(menu)'
}
.deliver .text .Design5::before{
	content: 'Organized News Section'
}
.deliver .text .Design6::before{
	content: 'Personalized Section'
}
.deliver .text .Design7::before{
	content: 'Synced Calendar'
}
.deliver .text .Design8::before{
	content: 'Personal Profiles'
}
.deliver .text span:hover::before{
	visibility: visible;
}
.deliver h3{
	font-size: 2vh;
	color: #444444;
	margin-bottom: 5vh;
}

.deliver .text ul{
	list-style: none;
}
.deliver  .text li{
	margin-left: 2.5vh;
	margin-top: 2.5vh;
}
.deliver .chapter .table ol{
	margin-left: 1.5vh;
	font-size: 18px;
}
.deliver .table .first{
	display: flex;
	flex: 0 0 33%;
	max-width: 33%;
}
.deliver .table .first li{
	margin-bottom: 6vh;
}
@media only screen and (max-width: 1000px){
.deliver .container{
	width: 95%;
}
.deliver .images{
	grid-template-rows: repeat(4, 200px);
}
}

/*footer*/

footer{
	margin-top: 20px;
	padding: 10px 15px;
	background-color: #1b1e27ee;
}
footer .logo img{
	height: 80px;
	margin-bottom: 10px;
	margin-top: 10px;
}
footer .logo{display: flex;
	flex: 0 0 100%;
	max-width: 100%;
	justify-content:center;
}
footer .social{
	display: flex;
	flex:0 0 100%;
	justify-content: center;
	margin-bottom: 10px;
	margin-top: 5px;
}
footer .social a{
	height:30px;
	width:30px;
	background-color: #000000;
	border-radius:3px;
	display:inline-block;
	border: 1px solid #000000;
	line-height:28px;
	text-align: center;
	margin: 0 1px;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
footer .social a:hover{
	background-color: transparent;
}
footer .social a .fa{
	color: #ffffff;
	font-size: 12px;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
footer .social a:hover .fa{
	color: #ffffff;
}

.copyright{
	background-color: #1b1e27ee;
	border-top: 1px solid #a9a9a9;
	padding: 5px;
}
.copyright p{
	color: #a9a9a9;
	margin: 0;
	text-align:center;
	font-weight: 400;
	font-size:15px;
	font-family: 'Poppins' , sans-serif;
}