html {
	scroll-behavior: smooth;
  }
  
  #myBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	font-size: 27px;
	border: none;
	outline: none;
	background-color: red;
	color: white;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
  }
  
  #myBtn:hover {
	background-color: #555;
  }
         /* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}
.columnAvatar {
  float: left;
  width: 33.3%;
  margin-bottom: 8px;
  margin-left: 16px;
  padding: 8px 8px;
}
.columnAvatarInfo {
  float: left;
  width: 62%;
  margin-right: 16px;
}

/* Add some shadows to create a card effect */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding-left: 16px;
  padding-right: 16px;
}

/* Clear floats */
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}


 body {
    background: #fff;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.06);
	color: dodgerblue;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
}


.w3-sidebar {
    height: 100%;
    width: 200px;
    background-color: #fff;
    position: fixed!important;
    z-index: 1;
    overflow: auto
}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover {
    color: #000!important;
    background-color: #f1f1f1!important
}
.w3-bar-block {
    width: 100%;
    text-align: left;
    padding: 8px 16px
}
.w3-bar-item {
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0
}
.w3-teal{
    color: #fff!important;
    background-color: #009688!important
}
.w3-teal-about-me{
    color: #fff!important;
    background-color: #040530  !important
}
.w3-container:after,.w3-container:before{
    content: "";
    display: table;
    clear: both;
}
.w3-theme {color:#fff !important; 
	background-color:#009688 !important
}
.w3-margin-top {
    margin-top: 16px!important;
	padding: 16px;
}
.ed-container-header{
	padding:0.01em 16px
}
.header {
  overflow: hidden;
  background-color: #D5F5E3;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-family: "Bungee Tint", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.header a:hover {
  background-color: #F9E79F;
  color: black;
}

.header a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  float: right;
}
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}
		.tp {
		   background-color: #D5F5E3;
		   display: flex;
		   justify-content: center;
		}
		.tp a {
		   color: #6C3483;
		   font-family: verdana;
		   text-align: center;
		   padding: 10px 10px;
		   text-decoration: none;
		   font-size: 20px;
		}
		.tp a:hover {
		   background-color: #F9E79F;
		   color: #212F3D;
		}
		.tp a.active {
		   background-color: #DE3163;
		   color: #FBFCFC;
		}
	
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.text-center {
    text-align: center;
}
.footer {
  background-image: url("image/meAi.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.logo great-vibes-regular {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;
}


.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

*, ::before, ::after {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}
@import url(https://weloveiconfonts.com/api/?family=entypo|fontawesome);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

/* Utils */

.clear {
	clear: both;
}
.purple {
	color: #837c9a;
}
.highlite {
	color: #5aecaf;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
}
.footerP {
	color: #ffffff;
	text-align: justify;
	font-family: 'Times New Roman', Times, serif;
}
.footerForP {
	color: #ffffff;
	text-align: center;
	font-family: 'Times New Roman', Times, serif;
}
.footera,.footerli {
	color: #ffffff;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
.block {
	margin: 25px 30px;
}
	.block h1 {
		margin-left: -5px;
		font-weight: 200;
	}

.last.block {
	margin-bottom: 110px;
}

.horizontal_list {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
	.horizontal_list li {
		float: left;
	}
	.horizontal_list li:before {
		content: none;
	}
	.horizontal_list li { 
		padding-left: 0; 
		text-indent: 0;
	}

.horizontal_line{
	margin: 34px 0 0 30px;
	height: 26px;
	position: relative;	
}
	.line_left,
	.line_right{
		border-top: 1px solid #434247;
		width: 305px;
		margin-top: 13px;
	}
	.line_left{
		float: left;
	}
	.line_right {
		float: right;
	}
	.left_circle, 
	.central_circle, 
	.right_circle {
		background: rgb(69,68,73);
		background: rgba(255,255,255, 0.15);
		position: absolute;
		border-radius: 50px;
	}
	.left_circle, 
	.right_circle {
		width: 13px;
		height: 13px;
		top: 7px;
	}
	.left_circle{
		left: 314px;
	}
	.central_circle{
		width: 26px;
		height: 26px;		
		top: 0px;
		left: 322px;
	}
	.right_circle{
		left: 343px;
	}
	
/* Main tags */

body {
	background: url(https://www.toptal.com/designers/subtlepatterns/patterns/dark_wall.png) repeat;
	margin: 0;
}

h1,h2,h3, h4 {
	font-family: 'Lato', Helvetica, sans-serif;
	font-weight: 300;
	color: #48DA9B;
}
	h1 {
		font-size: 48px;
		font-weight: 300;
		margin: 20px 0;
	}
	h2 {
		font-size: 28px;
		margin: 32px 0 24px;
	}
	h3 {
		font-size: 24px;
	}
	h4 {
		font-size: 18px;
		font-weight: 400;
	}

blockquote {
	font-style: italic;
	margin: 25px 0;
	padding-left: 20px;
	border-left: 2px solid #48DA9B;
}
	
blockquote, p , li {
	font-family: 'Lato', Helvetica, sans-serif;
	font-weight: 300;
	font-size: 15px;
	color: #1668b4;
}
 a:focus { 
    outline: none;
	}

ul {
    list-style: none;
    padding:0;
    margin:0;
}
	li { 
		padding-left: 1em; 
		text-indent: -.7em;
	}
	li:before {
		content: "• ";
		color: #837c9a;
		font-size: 20px;
		padding-right: 8px;
	}

/* Containers size */

#main_container {
	width: 960px;
	margin: 0 auto;
}
	#header {
		height: 130px;
		border-bottom: 1px solid #403F44;
	}
		.header_logotype_container {
			width: 260px;
			height: 130px;
			border-right: 1px solid #403F44;
			float: left;
		}
		.header_menu_container {
			height: 130px;
			width: 699px;
			float: left;
		}
			.header_menu_container a {
				font-family: 'Lato', Helvetica, sans-serif;
			}
	#left_col {
		width: 260px;
		float: left;
	}
	#content_container {
		width: 699px;
		border-left: 1px solid #403F44;
		float: left;
	}
	#footer {
		width: 960px;
		height: 60px;
		border-top: 1px solid #403F44;
		display: inline-block;
	}

/* HEADER */

.logotype_name{
	text-transform: uppercase;
	font-size: 32px;
	margin: 43px 0 0;
}
.logotype_occupation{
	text-transform: uppercase;
	margin-top: 5px;
	color: #5ce2af;
	font-size: 10px;
	letter-spacing: 2px;
	padding-left: 7px;
}

.download_print_buttons {
	width: 225px;
	height: 45px;
	float: right;
}
	.download_print_buttons a {
		text-decoration: none;
		font-size: 12px;
		font-family: 'Lato', Helvetica, sans-serif;
		font-style: italic;
		line-height: 45px;
		padding: 16px 17px;
		background: #353638;
	}
		.download_print_buttons a:hover {
			background: #020609;
		}
		.download_print_buttons .icon {
			color: #02070a;
			padding-right: 6px;
			font-style: normal;
			font-size: 18px;
		}
		.icon-angle-double-right {
			position: relative;
			top: 2px;
		}
			.download_print_buttons a:hover .icon {
				color: #e4e3e8;
			}
			
.header_menu {
	width: 699px;
	margin-top: 40px;
	margin-left: 5px;
}
	.header_menu a{
		text-decoration: none;
		padding: 0 20px;
		border-left: 1px solid #e4e3e8;
		font-size: 16px;
		font-weight: 400;
	}
	.header_menu a.no_border{
		border-left: none;
	}
		.header_menu a:hover {
			color: #837c9a;
		}
		
/* LEFT NAV */

#left_nav h2 {
	margin: 0;
	font-size: 24px;
}

.profile_frame{
	width: 230px;
	height: 265px;
	background: white;
	border: 1px solid #403F44;
	margin-top: 30px;
}
	.profile_picture{
		width: 210px;
		height: 250px;
		margin:10px;
		background: url("image/me.JPG") 100% /210px no-repeat;
	}

.hello_content,
.contact_details_content {
	margin-top: 25px;
}

.hello_content{
	width: 230px;
}
.contact_details_content h2 + p.purple{
	margin-top: 10px;
}
.contact_details_content p{
	margin: 0;
}
.contact_details_content p.purple{
	margin-top: 25px;
}

.send_message_button,
.special_button {
	margin-top: 25px;
	display: block;
	background: #48DA9B;
	width: 230px;
	height: 50px;
	position: relative;
	z-index: 1;
}
	.cut1:after {
		content: "";
		position: absolute;
		bottom: -19px;
		left: -20px;
		width: 30px;
		height: 30px;
		z-index: 9;
		background: url(https://www.toptal.com/designers/subtlepatterns/patterns/dark_wall.png) repeat;
    transform: rotate(45deg);
	}
	.cut2:before {
	    content: "";
	    position: absolute;
	    top: -19px;
	    right: -20px;
	    width: 30px;
	    height: 30px;
	    z-index: 9;
	    background: url(https://www.toptal.com/designers/subtlepatterns/patterns/dark_wall.png) repeat;
      transform: rotate(45deg);
	}
	.content {
	    text-align: center;		
	    color: #04080b;
	    width: 100%;
	    height: 40px;
	    position: absolute;
	    z-index: 2;
	    font: 18px 'Lato', Arial, sans-serif;
	    margin: 0;
	    padding: 16px 0 0;
        top: -4px;
        bottom: 10px;
	    border-top: 1px solid #403F44;
	    border-bottom: 1px solid #403F44;
	}
	.send_message_button:hover,
	.special_button:hover {
		background: #29C782;
	}

.get_social_content {
	margin-top: 15px;
}
  .get_social_content h2{
    margin-bottom: 8px;
  }
	.social_icons {
		margin-left: -8px;
	}
	.social_icons a {
		font-size: 35px;
		text-decoration: none;
		color: #000507;
		padding: 0;
		padding: 0 5px;
	}
		.social_icons a span.invisible {
			display:contents;
		}
		.social_icons .facebook:hover{
			background: #3b5998;
			color: #dfe3ee;
			border-top-right-radius: 50px;
			border-bottom-left-radius: 50px;
		}
		.social_icons .twitter:hover{
			background: #00B0ED;
			color: #fff;
			border-top-left-radius: 50px;
			border-bottom-right-radius: 50px;
		}
		.social_icons .linkedin:hover{
			background: #007bb6;
			color: #fff;
			border-top-right-radius: 50px;
			border-bottom-left-radius: 50px;
		}

.footer_name {
	font-style: italic;
	margin-top: 20px;
}


/* Profile Content */

.profile_quote {
	position: relative;
	/* margin-left: 5px; */
}
	.profile_quote p {
		font-size: 17px;
		width: 455px;
	}
	.profile_quote  .entypo-quote {
		color: #7115ea;
		font-size: 80px;
    font-style: normal;
		position: absolute;
		top: -20px;
		right: 70px;
		cursor: default;
	}

.philosophy_content {
	margin-top: 20px;
}
	.philosophy_content p {
		margin: 0;
		width: 370px;
		float: left;
	}
	.philosophy_content ul {
		float: left;
		padding-left: 40px;
	}
	.mycontainer_with_horizontal_fotter {
		display: flex;
	  }
	  .mycontainer_with_horizontal_fotter > div {
		width:33%;
	  }
	  @media screen and (min-width: 20em) {

		mycontainer_with_horizontal_fotter
		{
		  width: 20%;
		}
	  
	  }