/* iam.dawid.ch - personal portfolio stylesheet*/
body {
  margin:0;
  padding:0;
  font-family: Arial, Helvetica, sans-serif;
}

p {
  text-indent:35px;
  line-height:18px;
  margin-left:15px;
  margin-right:25px;
  text-align: justify;
  text-justify: auto;
}

li {
  margin-left:45px;
  line-height:20px;
}

#showContact {
	margin-left:100px;
	height:25px;
	width:130px;
	border-radius:5px;
	display: block;
	background-color: #DCA02D;
	text-align: center;
}

#showContact a {
  padding-top:3px;
  font-family: Tahoma;
  font-weight:550;
  display: block;
  color: #462DDC;
  text-decoration: none;
  font-size: 15px;
}

#showContact a:hover {
	background-color: #FF9600;
	font-weight:550;
	padding-top:3px;
	height:20px;
	border-radius:5px;
	display: block;
}

.highlight {
  font-size:15px;
  font-weight:550;
  color:#F9F5AD;
}

.envi {
  margin-left:10px;
  font-size:14px;
  color:#F9F5AD;
}

#quote {
	position:relative;
	top:18px;
	left:35px;
	background:none;
	border:none;

	color: #F5F3CE;
    display: block;
    font-family: sans-serif;
    font-size: 14px;
    width: 300px;
    outline: none;
}

.plMain {
 margin-top:20px;
  margin-left:40px;
border-style:solid 1px;
height:30px;
width:120px;
overflow:hidden;
}

.plMain > .plButton {
position:relative;
left:-10px;
  height: 95px;
  width: 95px;
  top:-47px;
  transform: rotate(45deg);
background-color:#3FA4D4;
}

.enMain {
position:relative;
 margin-top:-29px;
  margin-left:102px;
border-style:solid 1px;
height:30px;
width:120px;
overflow:hidden;
}

.enMain > .enButton {
position:relative;
left:37px;
  height: 95px;
  width: 95px;
  top:-15px;
  transform: rotate(45deg);
background-color:#0EEDE0;
}

.container {
border-style:solid;
border-radius:20px;
border-width:2px;
border-left-color:#e13acB;
border-right-color:#e13acB;
display:block;
font-size:14px;
color:#fff;
text-align:left;
height:auto;
background-color:#535050;
}

.container2 {
border-radius:20px;
display:block;
font-size:14px;
color:#fff;
text-align:left;
font-size:14px;
height:auto;
background-color:#535050;
}

.header {
position:relative;
border-style:solid;
border-radius:20px;
border-width:2px;
border-color:#e13acB;
display:block;
color:#fff;
text-align:left;
height:90px;
top:-2px;
left:-2px;
margin-right:-4px;
background-color:#851276;
overflow:hidden;
}

.header > .hline {
  position:absolute;
  margin-top:47px;
  margin-left:185px;
  width: 150px;
  height: 2px;
  filter: blur(2px);
  background-color: #e4addd;
}

.header > .circle {
  position:absolute;
  margin-top:-10px;
  margin-left:20px;
  height: 45px;
  width: 45px;
  background-color: #e4addd;
  filter: blur(2px);
  border-radius: 50%;
  opacity:60%;
  display: inline-block;
}

.header > .trapeze {
  position:absolute;
  margin-top:-10px;
  margin-left:-1px;
  height: 45px;
  width: 45px;
  transform: rotate(45deg);
  background-color: #e4addd;
  filter: blur(2px);
  opacity:60%;
  display: inline-block;
}

.header > .square {
  position:absolute;
  margin-top:-10px;
  margin-left:-4px;
  height: 45px;
  width: 45px;
  background-color: #e4addd;
  filter: blur(2px);
  opacity:60%;
  display: inline-block;
}

.header > .triangle {
  position:absolute;
  margin-top:26px;
  margin-left:5px;
  border-left: 20px solid cyan;
  border-right: 20px solid red;
  border-bottom: 20px solid #e4addd;
  border-top: 20px solid blue;
  transform: rotate(45deg);
  filter: blur(2px);
  opacity:60%;
  display: inline-block;
}


.footer {
position:relative;
border-style:solid;
border-radius:20px;
border-width:2px;
border-color:#e13acB;
display:block;
height:40px;
bottom:-2px;
left:-2px;
margin-right:-4px;
background-color:#851276;
}

#footerBox > .hline1 {
  position:relative;
  margin-top:4px;
  margin-left:auto;
  margin-right:15px;
  width: 70px;
  height: 2px;
  filter: blur(2px);
  background-color: #e4addd;
}

#footerBox > .hline2 {
  position:relative;
  margin-top:9px;
  margin-left:auto;
  margin-right:25px;
  width: 150px;
  height: 2px;
  filter: blur(2px);
  background-color: #e4addd;
}

.breaker1 {
position:relative;
border-style:solid;
border-width:2px;
border-top-color:#e13acB;
border-left-color:#535050;
border-right-color:#535050;
border-bottom-color:#535050;
display:block;
height:20px;
top:-20px;
left:0px;
margin-right:0px;
background-color:#535050;
}

.breaker2 {
position:relative;
border-style:solid;
border-width:2px;
border-top-color:#535050;
border-left-color:#535050;
border-right-color:#535050;
border-bottom-color:#e13acB;
display:block;
height:20px;
bottom:-17px;
left:0px;
margin-right:0px;
background-color:#535050;
z-index:1;
}

.hideContainer {
visibility: hidden;
opacity: 0;
transition: visibility 0s .5s, opacity .5s linear, margin-left .5s ease-out;
margin-left:-400px;
}

.showContainer {
visibility: visible;
opacity: 1;
transition: opacity .5s linear, margin-left .5s ease-out;
margin-left:15px;
}

.menuIcon {
  display: none;
  cursor: pointer;
	float:right;
	margin-right:10px;
}


.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.animeCross .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.animeCross .bar2 {opacity: 0;}

.animeCross .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

.menu {
	margin:0 0px;
  background-color: #1C5875;
}

.myMenu {
	margin:0 60px;
  overflow: hidden;
  background-color: #1C5875;
}

.myMenu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
  text-transform:uppercase;
}

.myMenu a:hover {
  background-color: #a51792;
  font-weight:550;
  color: #e4addd;
}

.myMenu a.active {
  background-color: #851276;
  color: #03DDD5;
}

.myMenu .menuIcon {
  display: none;
}

@media screen and (max-width: 1000px) {
  .myMenu a:not(:first-child) {display: none;}

 .menuIcon {
  display: block;
  cursor: pointer;
	float:right;
	margin-right:10px;
}
}

@media screen and (max-width: 1000px) {
  .myMenu.responsive {position: relative;}
  .myMenu.responsive .menuIcon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
 .myMenu.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}