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

html {
	height: 100%;
}

body {
	background-color: #9b7545;
	min-height: 100%;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}

img {
	width: 100%;
	height: auto;
	display: block;
}


/* ========== MAIN CONTENT CONTAINERS ========= */
/* Desktops */
@media (min-width:768px) { .container-block { padding: 4% 8% } }

/* Mobiles */
@media (max-width:767px) { .container-block { padding: 11% 8% } }




/* ========== FLEXBOX PARENT AND CHILD COLUMN ELEMENTS ========= */

/* Flexbox parent container */
.container-flexbox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* Desktops: flexbox child columns */
@media (min-width: 768px) {
    .item-col-2 { width: 47% }
}

/* Mobiles: flexbox child columns */
@media (max-width: 767px) {
    .item-col-2 { width: 100% }
    /* Vertical spacing under first child column */
    .item-col-2:first-child { margin-bottom: 32px }
    /* No vertical spacing under last child column */
    .item-col-2:last-child  { margin-bottom: 0 } 
}

/* Desktops: inner padding for child columns */
@media (min-width: 768px) {
    .item-col-2.item-col-padding { padding: 1.8% 2% 2.2% 2% }
}

/* Mobiles: inner padding for child columns  */
@media (max-width: 767px) {
    .item-col-2.item-col-padding { padding: 6.5% 7% 7% 7% }
}


/* =========== SUB-HEADINGS AND PARAGRAPHS ============*/

/* Sub-headings inside flexbox child columns */
.item-col-2 h3 { 
    font-size: calc(32px + (48 - 32) * ((100vw - 320px) / (1600 - 320)));
    letter-spacing: -2px;
    margin-bottom: 6px;
}

/* Paragraphs inside flexbox child columns */
.item-col-2 p { 
    font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1600 - 320)));
}

/* Desktops: paragraph line-spacing and bottom margin */
@media (min-width: 768px) {
    .item-col-2 p { line-height: 1.6; margin-bottom: 20px }
}

/* Mobiles: paragraph line-spacing and bottom margin */
@media (max-width: 767px) {
    .item-col-2 p { line-height: 1.4; margin-bottom: 14px }
}

/* No vertical spacing under final item inside child columns */
.item-col-2 *:last-child { margin-bottom: 0 }






nav {
  position: sticky;
  top: 0;
  z-index: 99;
  width: 100%;
  background: #242526;
}

nav .wrapper{
  position: relative;
  max-width: 1300px;
  padding: 0px 30px;
  height: 70px;
  line-height: 70px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wrapper .nav-links{
  display: inline-flex;
}
.nav-links li{
  list-style: none;
}
.nav-links li a{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.nav-links li a:hover{
  background: #3A3B3C;
}
.nav-links .mobile-item{
  display: none;
}
.nav-links .drop-menu{
  position: absolute;
  background: #242526;
  width: 180px;
  line-height: 45px;
  top: 85px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box{
  transition: all 0.3s ease;
  top: 70px;
  opacity: 1;
  visibility: visible;
}
.drop-menu li a{
  width: 100%;
  display: block;
  padding: 0 0 0 15px;
  font-weight: 400;
  border-radius: 0px;
}
.mega-box{
  position: absolute;
  left: 0;
  width: 100%;
  padding: 0 30px;
  top: 85px;
  opacity: 0;
  visibility: hidden;
}
.mega-box .content{
  background: #242526;
  padding: 25px 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
.mega-box .content .row{
  width: calc(25% - 30px);
  line-height: 45px;
}
.content .row img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content .row header{
  color: #f2f2f2;
  font-size: 20px;
  font-weight: 500;
}
.content .row .mega-links{
  margin-left: -40px;
  border-left: 1px solid rgba(255,255,255,0.09);
}
.row .mega-links li{
  padding: 0 20px;
}
.row .mega-links li a{
  padding: 0px;
  padding: 0 20px;
  color: #d9d9d9;
  font-size: 17px;
  display: block;
}
.row .mega-links li a:hover{
  color: #f2f2f2;
}
.wrapper .btn{
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: none;
}
.wrapper .btn.close-btn{
  position: absolute;
  right: 30px;
  top: 10px;
}



.spotlight {
    background: radial-gradient(circle at center, #e7dbac14 10rem, #9b7545 15rem) center left / 100% 100%;
}


.sidebar {
	padding: 20px;
}

.col2 {
	width:45%;
	float:left;
	height:100%;
}

.aboutme {
	font-style: italic;
	padding-left: 3rem;
	font-size: 20px;
	line-height: 26.22px;
	font-family: 'Franziska, Georgia, Cambria';
}

.aboutme p {
	color: #ffffff;
}

.align-items-center {
	-ms-flex-align: center !important;
	align-items: center !important;
}

.d-flex {
	display: -ms-flexbox !important;
	display: flex !important;
	flex-wrap: wrap;
	align-content: center;
}

.profile-picture {
   position: relative;
   left: 50%;
   right: 50%;
   transform: translate(-50%, 5%);

   background-color: #ffffff;
   border-radius: 50%;
   height: 200px;
   width: 200px;
   overflow: hidden;
}

#circle {
	height:200px;
	width:170px;
	background-image: url('../images/profile-image.png');
	background-size: cover;
	background-position: 15px 0px;
	background-repeat: no-repeat;
}

.profile-name {
  text-align: center;

  padding: 30px;
  font-size: 28px;
}

h4.social-networks {
	text-align: center;
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 20px;
	font-weight: 400;
	margin: 10px 0;
}

.profile-links {
  text-align: center;
  margin-top: 20px;
  border-width: 2px;
  padding: 20px;

  width: 290px;
  display: block;
  margin-left: auto;
  margin-right: auto;

  border-radius: 40px;

  font-size: 18px;
}

.list-links a {
  position: relative;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: #777;
  padding: 1.1rem 3rem;
  letter-spacing: 0.1rem;
  transition: all .2s;
  background-color: white;
  border-radius: 100px;
  font-weight: 400;
}

.list-links a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  /* to see the SMOOTH EFFECT for duration of time we use transition */
  transition: all .2s; 
  border-radius: 100px;
/*  put pseudo class before button */
  z-index: -1;
}
/* when hover on a, select before pseudo  
and scale the size of  pseudo element 
and opacity  invisible the pseudo element*/
.list-links a:hover::before{
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;

}

.list-links a:hover{
    transform: translateY(-.2rem); 
    font-size: 1.2rem;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.2);
}


.list-links a:active{
    transform: translateY(.2rem);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
}