.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}
body{
margin:0;
padding:0;
}
h1{
  font-family: 'Raleway', sans-serif;
  font-size:35px;
  font-weight:800;
  text-align: center;
  line-height: 1em;
}
h2{
  font-family: 'Raleway', sans-serif;
 font-size:15px;
  font-weight:800;
  text-align: center;
  line-height: 1em;
}
input, textarea, select { -webkit-appearance: none; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
#wrapper{
float:left;
width:100%;
  margin:0 auto;
	overflow: hidden;
}
.gridcenter{
	margin:0 auto;
	padding: 0px 10px;
	width: 100%;
	max-width:860px;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
#header{
	float:left;
	width: 100%;
	background: url('images/bg.png');
	height:60px;
	padding: 10px 0;
	position:fixed;
	z-index:100;
	box-shadow:3px 3px 3px grey;
}
.nav {
	position: relative;
  float:left;
  width:100%;
  font-family: 'Raleway', sans-serif;
  font-weight:700;
  padding:0;
  
}
.nav ul {
	list-style: none;
	float:left;
}
	@media only screen and (max-width:650px) { .nav ul { padding: 0px 0px 0px 10px; } }
.nav ul li{
  float:left;
  padding:0px;
 margin-top:5px;
}
.nav ul li a {
  color:white;
  padding:10px;
	margin: 0px 10px;
  text-decoration: none;
}
@media only screen and (max-width:620px) { .nav ul li a { padding: 10px 5px; } }
@media only screen and (max-width:430px) { .nav ul li a { font-size: 13px; } }
@media only screen and (max-width:390px) { .nav ul li a { font-size: 12px; margin: 0px 0px; } }
.nav ul li a:hover {
  background:#ff6c00;
  border-radius:3px;
}
#main{
	float:left;
	background:#f6f7f9;
	width:100%;
	padding:70px 0;
	position: relative;
	margin-top:70px;
}
@media only screen and (max-width:810px) { #main{ padding:0px 0px 30px 0px; } }
/*login*/
/*----------------------*/
#login {
	position: absolute;
	top: 5px;
	right: 15px;
	padding: 10px 0;
}
@media only screen and (max-width:580px) { #login { top: 65px; } }
@media only screen and (max-width:430px) { #login { top: 60px; } }
#login-trigger {
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	background: #ff6c00;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
#login-trigger:hover,
#login .active {
	background: #ff6c00;
}

#login-content {
	display: none;
	position: absolute;
	right: 11px;
	top: 37px;
	z-index: 999;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	background-image: -webkit-linear-gradient(top, #fff, #eee);
	background-image: -moz-linear-gradient(top, #fff, #eee);
	background-image: -ms-linear-gradient(top, #fff, #eee);
	background-image: -o-linear-gradient(top, #fff, #eee);
	background-image: linear-gradient(top, #fff, #eee);
	padding: 15px;
	box-shadow: 0px 2px 2px -1px rgba(0, 0, 0, 0.9);
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	border:3px solid #ff6c00;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
@media only screen and (max-width:390px) { #login-content { right: 0px; } }


/*--------------------*/



/*login*/
#main:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #f6f7f9;
	border-width: 30px;
	margin-left: -30px;
}
.tm {
	float:left;
	font-weight:800;
	font-size:20px;
	margin-top:10px;
	background:white;
	padding:10px;
	margin-left: 10px;
	color:#ff6c00;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;
}
.tm a {
  color:#ff6c00;
  text-decoration:none;
}
.name {
	float:left;
	width:300px;
	padding:20px 0px;
	margin: 0px;
	font-family: 'Raleway', sans-serif;
	margin-top:20px;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
@media only screen and (max-width:810px) {
	.name {
		float: none;
		display: table;
		margin:30px auto 10px auto;
	}
}
.toli{
	float:left;
	font-size:55px;
	width:100%;
	font-weight:400;
	margin:0;
	padding:0;
	color:#262020;
	line-height: 1em;
}
.matoulas{
	float:left;
	font-size:55PX;
	font-weight:800;
	color:#ff6c00;
	margin:0;
	padding:0;
	width:100%;
	line-height: 1em
}
.voiceovers{
	float:left;
	/* text-align: right; */
	width:100%;
	font-weight:500;
	font-size:20px;
	color:#262020;
	line-height: 1em;
}
.playerarea {
	float:right;
	font-family: 'Raleway', sans-serif;
	width: 100%;
	max-width:422px;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
@media only screen and (max-width:810px) {
	.playerarea {
		float: none;
		margin: 0px auto;
	}
}
.listen{
	float:left;
	width: 100%;
	margin-bottom: 3px;
	font-weight:Bold;
}
.player {
	float:left;
	width:100%;
	height:195px;
	padding:10px;
	border:1px solid #262020;
	border-radius:6px;
	background:#ff6c00;
	box-shadow: 3px 3px 3px #aeaeb0;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
@media only screen and (max-width:415px) { .player{height: auto;} }
#aboutme{
	font-family: 'Noto Sans', sans-serif;
	float:left;
	width:100%;
	padding:20px;
	margin-top:70px;
	border:3px solid #e1e1e1;
	text-align: center; 
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
.quotes{
  font-size:30px;
  font-weight:700;
  color:orange;
  line-height:1em;
}
.quote{
  font-size:19px;
  font-weight:700;
  color:#262020;
}
.bio{
  float:left;
  padding:10px;
  color:#262020;
  font-size:15px;
  line-height:1.3em;
}
#clients{
  float:left;
  width:100%;
 background: url('images/bg.png');
  padding:60px 0;
  font-family: 'Raleway', sans-serif;
   color:white;
  border-bottom:5px solid grey;
}

.clientlist{
	display: block;
	margin: 0px auto;
}
.clientitem {
	float:left;
	min-width:170px;
	width: 25%;
	padding:21px;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
@media only screen and (max-width:800px) { .clientitem { width: 33.3333%; padding:10px; } }
@media only screen and (max-width:530px) { .clientitem { min-width: 50%; width: 50%; } }
.clientlogo {
	float:left;
	width: 100%;
	padding:10px 0;
	text-align: center;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
.clientlogo img {}
@media only screen and (max-width:423px) { .clientlogo img { float: left; width: 100%; height: auto; } }
.clientname,
.clientcountry {
	float: left;
	width: 100%;
	text-align: center;
	width:100%;
	font-size:12px;
	font-weight:800;
}
.moreclients{
  border: 3px solid white;
  text-align: center;
  padding:10px 0;
  font-size:15px;
  font-weight:800;
  margin-top:19px;
}
#contact{
  float:left;
  width:100%;
padding:60px 0;
  font-family: 'Raleway', sans-serif;
}
#contact h1{
  color:#ff6c00;
}
#contact h2{
  color:#262020;
}
.contactarea {
	float:left;
	width: 100%;
	padding-top:50px;
}
@media only screen and (max-width:790px) { .contactarea { padding-top:10px; } }
.contactdetails{
	float:left;
	width:200px;
	padding:0 10px;
}
@media only screen and (max-width:790px) {
	.contactdetails {
		display: block;
		float: none;
		margin: 0px auto;
	}
}
.form {
	float:right;
	width:550px;
}
@media only screen and (max-width:790px) {
	.form {
		display: block;
		float: none;
		margin: 0px auto;
	}
}
@media only screen and (max-width:600px) {
	.form {
		width: 100%;
	}
}
.contactbox {
  float:left;
  width:100%;
  padding:10px 0;
}
.contacticon {
	float:left;
	background:white;
	border:1px dotted #FBB040;
	width:50px;
	height:50px;
	padding:8px;
	text-align: center;
	border-radius: 40px;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
.contactflag {
	float: left;
	width: 20px;
	margin-left:5px;
}
.contacttype {
  color: #E89221;
  float:left;
  width:145px;
  margin-left:5px;
  font-weight:bold;
}
.contactnumber {
  color:#262020;
  float:left;
  width:140px;
  margin-left:10px;
}
input {
	float:left;
	width:48%;
	padding:10px;
	margin: 0px 1%;
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
	border-radius:3px;
	background:#f6f7f9;
	border: 1px solid #ff6800;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
@media only screen and (max-width:440px) {
	input {
		width: 100%;
		margin: 0px 0px 20px 0px;
	}
}
textarea {
	float:left;
	width: 98%;
	padding:10px;
	margin: 20px 1% 20px 1%;
	font-family: 'Raleway', sans-serif;
	font-size:15px;
	background:#f6f7f9;
	border-radius:3px;
	border: 1px solid #ff6800;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
@media only screen and (max-width:440px) {
	textarea {
		width: 100%;
		margin: 0px 0px 20px 0px;
	}
}
#formy,
fieldset {
	float: left;
	width: 100%;
	border: 0px;
	padding: 0px;
	margin: 0px;
}
#submit {
	color: #fff;
	font-size:15px;
	background:#ff6800;
}
#submit:hover{
  pointer:cursor;
}
#formy-error{
  background:red;
  float:left;
  padding:10px;
  color:white;
  margin-left:20px;
}
#formy-success{
  background:green;
  float:left;
  padding:10px;
  color:white;
  margin-left:20px;
}
/*----- Tabs -----*/
.tabs {
	position: relative;
	float: left;
	width:100%;
	display:inline-block;
	padding:0;
	margin:0;
}
.tab-links {
	float: left;
	width:200px;
	padding:0;
}
@media only screen and (max-width:435px) {
	.tab-links {
		float: left;
		width: 100%;
		padding:0px 0px 0px 170px;
		box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	}
}
@media only screen and (max-width:330px) {
	.tab-links {
		padding:0px 0px 0px 0px;
	}
}
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }
 
    .tab-links li {
        margin:0;
        float:left;
		width: 100%;
        list-style:none;
    }
 
        .tab-links a {
			float:left;
			padding:5px 10px;
			width:100%;
			display:inline-block;
			border-radius:0px 9px 6px 0px;
			background:#fff;
			font-size:14px;
			font-weight:400;
			color:#4c4c4c;
			margin-bottom: 8px;
			transition:all linear 0.15s;
			text-decoration: none;
			box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
        }
	.tab-links a:hover {
		background:#05A6DA;
		text-decoration:none;
		color:white;
	}
 
    li.active a, li.active a:hover {
        background:BLACK;
        color:WHITE;
      text-decoration: none;
    }
    .tab-content {
		position: relative;
		z-index: 10;
		padding:0 10px 0 30px;
		float:left;
		width:140px;
		margin-right:10px;
		color:white;
		font-size:13px;
    }
	@media only screen and (max-width:435px) { .tab-content { position: absolute; } }
	@media only screen and (max-width:330px) {
		.tab-content {
			position: relative;
			width: 100%;
		}
	}
 
        .tab {
            display:none;
        }
 
        .tab.active {
            display:block;
        }
.dl{
  float:left;
  background:#f1f1f1;
  padding:10px;
  width:17px;
  height:17px;
  border-radius:30px;
  margin-top:-30px;
  margin-left:-30px;
}
#abouttolis{
  float:left;
  margin-top:-120px;
  height:1px;
  width:1px;
}
#footer{
  float:left;
  background: url('images/bg.png');
  color:white;
  width:100%;
  padding:30px 0;
  border-top:5px solid grey;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  font-size:14px;
}
#footer a{
  color:white;
}
#myclients{
  float:left;
  width:100%;
  height:1px;
  margin-top:-40px;
}

#contactme{
  float:left;
  width:100%;
  height:1px;
  margin-top:-40px;
}
@media only screen and 
  (min-device-width : 320px) and
  (max-device-width : 639px) 
{
  #contactme{
  float:left;
  width:100%;
  height:1px;
  margin-top:0px;
}

  #abouttolis{
    margin-top:-70px;
  }
  #myclients{
    margin-top:0px;
  }
  h2{
    font-size:12px;
  }
  .quotes{
    line-height: 0;
  } 
}