/* -----------------------------------------------------------------------------
   STYLESHEET MEDIA-SCREEN

   web:     www.c3design.jecool.cz
   date:    1.10.2014
   author:  Tomáš Chlebek, chlebek.tomas@seznam.cz
   note:    Watch and learn. Do not steal!
     
   ----------------------------------------------------------------------------- */
   
/*   GENERAL 
----------------------*/

*
{
	margin: 0px;
	padding: 0px;
	color: rgb(102,102,102);
	font: 14px "Segoe UI", "Calibri", "Sans-Serif";
	text-align: left;
	line-height: 20px;
}

a
{
  color: rgb(255,255,255);
}

a:link,a:visited
{
  text-decoration: none;
}

a:hover
{
  color: rgb(205,205,205);
}

html, body
{
  height: 100%;
  margin: 0;
}

.error
{
  color: rgb(223,0,44);
}

/*   HEADER 
----------------------*/

#header
{
  min-height: 100%;
  background: rgb(51,51,51); /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2NjY2NjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(51,51,51,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(100%,rgba(102,102,102,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(102,102,102,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(102,102,102,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(102,102,102,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(51,51,51,1) 0%,rgba(102,102,102,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#666666',GradientType=0 ); /* IE6-8 */
}

#header-content
{ 
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#logo
{ 
  -webkit-animation: fadeIn 4s infinite; /* Safari 4+ */
  -moz-animation:    fadeIn 4s infinite; /* Fx 5+ */
  -o-animation:      fadeIn 4s infinite; /* Opera 12+ */
  animation:         fadeIn 4s infinite; /* IE 10+, Fx 29+ */
  animation-iteration-count: 1; 
}

.menu
{
  list-style: none;
  padding: 20px 0px 0px 30px;  
}

.menu li
{
  float: left;
  padding: 10px;
  -webkit-animation: fadeInUpBig 2s infinite; /* Safari 4+ */
  -moz-animation:    fadeInUpBig 2s infinite; /* Fx 5+ */
  -o-animation:      fadeInUpBig 2s infinite; /* Opera 12+ */
  animation:         fadeInUpBig 2s infinite; /* IE 10+, Fx 29+ */
  animation-iteration-count: 1;
}

.menu a
{
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;;
}

.menu a:hover
{
  opacity: 0.3;
}

#thx
{
  color: white;
}

/*   WHO AM I 
----------------------*/

#me
{
  background: rgb(230,230,230); /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(230,230,230,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(230,230,230,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(230,230,230,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(230,230,230,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(230,230,230,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}

#me-content
{ 
  margin:0 auto;
  width: 960px; 
  text-align: center;
  padding: 50px 0px 50px 0px; 
}

#me p
{
  padding: 20px;
  text-align: center;
}

/*   WHAT I DO 
----------------------*/

#work
{
  background: rgb(230,230,230); /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(230,230,230,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(230,230,230,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(230,230,230,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(230,230,230,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(230,230,230,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
  height: 2000px;
}

#work-content
{ 
  margin:0 auto;
  width: 960px; 
  text-align: center;
  padding-top: 50px;
}

.portfolio
{
  list-style: none;
  margin-top: 40px;
  padding-left: 70px;

}

.portfolio li
{
  float: left;
  width: 250px;
  height: 260px;
  padding-right: 20px;
  padding-bottom: 50px;
}

.portfolio a img
{
  -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.49);
  -moz-box-shadow:    0px 0px 12px 0px rgba(0, 0, 0, 0.49);
  box-shadow:         0px 0px 12px 0px rgba(0, 0, 0, 0.49);
  margin-bottom: 10px; 
}

.portfolio a
{
  font: 12px "Segoe UI", "Calibri", "Sans-Serif";
  color: rgb(150,150,150); 
  font-style: italic;
  text-decoration: underline; 
    -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;; 
}

h5
{
  font-weight: bold;
}

.portfolio a:hover
{
  opacity: 0.5;
  
}

.portfolio p
{
  padding-bottom: 3px;
}

hr
{ 
  align: center;
  width: 790px;
  color: rgb(51,51,51);
}

/*   CONTACT FORM 
----------------------*/

#contact
{
  background: rgb(230,230,230); /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(230,230,230,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(230,230,230,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(230,230,230,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(230,230,230,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(230,230,230,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}

#contact-content
{ 
  margin:0 auto;
  width: 960px; 
  text-align: center;
  padding-top: 50px;
}

form.email
{
  padding: 20px 0px 50px 320px;
}

form.email table
{
  width: 300px;
}

form.email td
{
  padding: 5px;
}
 
form.email input
{
  background: rgb(230,230,230);
  padding: 4px;
  border: 1px solid rgb(170,170,170);
  border-radius: 5px;
  width: 215px; 
}

form.email textarea
{
  background: rgb(230,230,230);
  padding: 5px;
  border: 1px solid rgb(170,170,170);
  border-radius: 5px;
  width: 280px;
  height: 130px;
}

form.email input.send
{
  color: rgb(255,255,255);
  background: rgb(110,110,110);
  border: none;
  padding: 10px 20px 10px 20px;
  cursor: pointer;
  width: 100px;
  float: right;
    -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;;
}

form.email input.send:hover
{
  color: rgb(255,255,255);
  background: rgb(51,51,51)
}

/*   FOOTER 
----------------------*/

#footer
{
  background: rgb(102,102,102); /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMzMzMzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(102,102,102,1) 0%, rgba(51,51,51,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,102,102,1)), color-stop(100%,rgba(51,51,51,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333',GradientType=0 ); /* IE6-8 */
  height: 60px; /* height: 40px; without ad*/
}

#footer-content
{ 
  margin-left: auto;
  margin-right: auto;
  width: 960px; 
  text-align: center;
  color: white;
  padding-top: 8px;
}

#endora-ad
{
  padding-left: 250px;
  text-align: center;
  color: rgb(51,51,51);
}

#endora-ad  a
{
  color: rgb(102,102,102);  
}

/*   ANIMATIONS 
----------------------*/

/* fadeIn
------------ */

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/* fadeInUp
------------ */

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
          animation-name: fadeInUpBig;
}