@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.woff2') format('woff2'),
        url('../fonts/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Bold';
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2'),
        url('../fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, h4 {
	padding:0px;
	margin:0px;
	font-size:inherit;
}

a {
	text-decoration: none;
	color:inherit;
}

html {
	scroll-behavior: smooth;
}

body {
	margin:0px;
	padding:0px;
	font-family: 'Montserrat';
	font-weight:600;
	color:#fafafc;
	background-color:#191923;
}

.defaulttext {
	font-size:13px;
	line-height:22px;
}
.font_bold {
	font-family: 'Montserrat Bold';
}

.container {
	position:relative;
	float:left;
	width:70%;
	margin-left:15%;
	margin-top:25px;
	display:flex;
	justify-content: center;
}

.bar {
	position:relative;
	float:left;
	width:250px;
	padding:50px 25px;
	box-shadow: 0 3px 8px 0 rgba(15,15,20,.5);
	background-color:#20202a;
	z-index:10;
}
.bar_photo {
	position:relative;
	float:left;
	width:100%;
	text-align:center;
}
.bar_photo img {
	width:120px;
}
.bar_name {
	position:relative;
	float:left;
	width:100%;
	text-align:center;
	margin-top:20px;
}
.bar_function {
	position:relative;
	float:left;
	width:100%;
	color:#8c8c8e;
	font-size:12px;
	text-align:center;
	margin-top:8px;
}
.bar_details {
	position:relative;
	float:left;
	width:100%;
	padding:50px 0%;
	padding-bottom:0px;
	background-color:#20202a;
}
.bar_details_ab {
	position:relative;
	float:left;
	width:100%;
	font-size:12px;
	margin-bottom:10px;
}
.bar_details_ab span:nth-child(1) {
	position:relative;
	float:left;
}
.bar_details_ab span:nth-child(2) {
	position:relative;
	float:right;
	color:#8c8c8e;
}

.bar_skill_ab {
	position:relative;
	float:left;
	width:100%;
	margin-top:12px;
	margin-bottom:10px;
	height:3px;
	background-color:#191923;
}
.bar_skill_ab div {
	position:absolute;
	height:100%;
	background-color:#ffc107;
}

.bar_langs {
	position:relative;
	float:left;
	width:100%;
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.bar_lang_i {
	position:relative;
	float:left;
	width:40%;
}
.bar_lang_i:nth-child(1){
	margin-bottom:30px;
}
.bar_lang_circle {
	position:relative;
	float:left;
	width:80%;
	margin-left:10%;
	display:flex;
	justify-content: center;
}
.bar_lang_circle svg {
	overflow: hidden;
}
.bar_lang_circle .art-cirkle-progress {
    position: relative;
    width: 60px;
    height: 60px;
}
.bar_lang_circle svg {
    transform: rotate(90deg);
}

.bar_lang_circle path {
    transition: stroke-dashoffset 1s ease-out;
}

.bar_lang_circle .progressbar-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
}

.bar_lang_description {
	position:relative;
	float:left;
	width:100%;
	margin-top:10px;
	text-align:center;
	font-size:12px;
}

.bar_spacerline {
	position:relative;
	float:left;
	width:100%;
	height:1px;
	background-color:#34343c;
	margin:20px 0px;
}

.content {
	position: relative;
	float:left;
	width:calc(90% - 300px);
	padding:50px 5%;
	background-color:#1e1e28;
}
.con_about {
	position:relative;
	float:left;
	width:100%;
}
.con_about_title {
	position:relative;
	float:left;
	width:100%;
	font-size:22px;
}
.con_about_title span {
	color:#ffc107;
}
.con_about_text {
	position:relative;
	float:left;
	width:100%;
	margin-top:12px;
}
.con_about_text span {
	color:#ffc107;
}

.con_boxes_title {
	position:relative;
	float:left;
	width:100%;
	font-size:22px;
	margin-top:30px;
}
.con_boxes_title span {
	color:#ffc107;
}
.con_boxes {
	position:relative;
	float:left;
	width:100%;
	margin-top:20px;
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;	
}
.con_box {
	position:relative;
	float:left;
	width:calc(48% - 80px);
	padding:40px 40px;
	margin-bottom:40px;
	background: linear-gradient(159deg,#2d2d3a,#2b2b35);
}
.con_box_decoline {
	position:absolute;
	top:0px;
	left:0px;
	height:3px;
	width:0px;
	background-color:#ffc107;
	transition-duration: 0.3s;
}
.con_box:hover .con_box_decoline {
	width:100%;
}
.con_box_title {
	position:relative;
	float:left;
	width:100%;
	font-size:14px;
}
.con_box_title span {
	color:#ffc107;
}
.con_box_text {
	position:relative;
	float:left;
	width:100%;
	margin-top:16px;
	font-size:12px;
	line-height:22px;
}
.con_box_img {
	position:relative;
	float:left;
	width:calc(48% - 80px);
	padding:40px 40px;
	margin-bottom:40px;
}
.con_box_img img {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	object-fit: cover; /* Ensures the image fills the container and crops excess */
  	object-position: center;
}

.con_exp {
	position:relative;
	float:left;
	width:100%;
	margin-top:50px;
}
.con_about_title {
	position:relative;
	float:left;
	width:100%;
}
.con_exp .con_about_title {
	margin-bottom:20px;
}
.con_box_subtitle {
	position:relative;
	float:left;
	width:100%;
	margin-top:8px;
	font-size:13px;
	color:#ffc107;
}
.con_exp_boxes {
	position:relative;
	float:left;
	width:100%;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}

.examp_container {
	position:relative;
	float:left;
	width:100%;
	margin-top:20px;
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.examp_i {
	position:relative;
	float:left;
	width:48%;
	margin-bottom:40px;
}
.examp_i_l {
	width:100%;
}
.examp_i img {
	position:relative;
	float:left;
	width:100%;
}


@media only screen and (max-width: 1800px) {
	.container {
		width:90%;
		margin-left:5%;
	}
}
@media only screen and (max-width: 1700px) {

}
@media only screen and (max-width: 1600px) {
	
}
@media only screen and (max-width: 1400px) {
	.container {
		width:98%;
		margin-left:1%;
	}
}
@media only screen and (max-width: 1200px) {
	.container {
		flex-wrap:wrap;
	}
	.bar {
		width:calc(85% - 150px);
		padding:50px 75px;
	}
	.bar_lang_i {
		width:19%;
	}
	.content {
		width:calc(85% - 150px);
		padding:50px 75px;
	}
}
@media only screen and (max-width: 1000px) {
	.bar {
		width:calc(100% - 100px);
		padding:50px 50px;
	}
	.content {
		width:calc(100% - 100px);
		padding:50px 50px;
	}
	.con_box {
		width:calc(100% - 80px);
		padding:40px 40px;
	}
	.con_box_img {
		min-height:300px;
		width:100%;
	}
}
@media only screen and (max-width: 800px) {
	.bar {
		width:calc(100% - 50px);
		padding:50px 25px;
	}
	.content {
		width:calc(100% - 50px);
		padding:50px 25px;
	}
	.bar_lang_i {
		width:46%;
	}
	.examp_i {
		width:100%;
	}
}