.container { margin:0 auto; max-width:1200px; }

#wrapper {min-height: 100%; height: auto !important; height:100%; margin: 0 0 -260px 0; }

#push-footer, #footer { height:260px; }
#footer { background:#3d5567; }
  #footer-inner { position:relative;height:260px;padding-top: 40px; }

/* ====================================================================================================================
 * HEADER
 * ====================================================================================================================*/
#header { background: #3d5567;margin:0;overflow: hidden}
  #header-container {position:relative;height:90px;}
  #logo { position:absolute; left:0; top:15px; }
  #header .title {width:600px;margin:0 auto;padding-top: 20px;text-align: center}
  #language {position: absolute;top:25px;right: 0px}
  #language a {display: block;width: 41px;height: 38px; text-indent: 10000px;float: left;}
  #language a.gr {background: url('../img/gr.png');}
  #language a.en {background: url('../img/en.png');}
  #language a.gr:hover {background: url('../img/gr-hover.png');}
  #language a.en:hover {background: url('../img/en-hover.png');}
  #language a.gr.active {background: url('../img/gr-hover.png');}
  #language a.en.active {background: url('../img/en-hover.png');}


#top {border-bottom: 7px solid #0087cd;
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(184,212,239,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(184,212,239,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(184,212,239,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(184,212,239,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(184,212,239,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(184,212,239,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b8d4ef', GradientType=0 );
}
#top-container {height:425px;position: relative;background: url('../img/main.png') no-repeat right bottom;}
#top-container.en {background: url('../img/main-en.png') no-repeat right bottom;}
#top-container .text {padding: 105px 0px 0px 170px;}
#top-container h2 {font-size:60px;color: #939598;margin:0px;}
#top-container h3 {font-size:55px; color: #939598; }
#top-container .button1 {position:absolute;bottom:30px;left: 50%;margin-left: -134px;}

#fourcolumn {overflow: hidden}
#fourcolumn .column{width:25%;float:left;min-width: 300px;}
  #fourcolumn .column .title{height: 165px;position: relative;border-left:7px solid #0087cd;margin-bottom: 25px;}
  #fourcolumn .column .title h4 {display:block;position: absolute;bottom:0px;width:200px;color:#0087cd;}
  #fourcolumn .column .text {min-height: 125px;margin-bottom: 25px;padding-right: 40px;}
#fourcolumn .column .image {border-left:7px solid #0087cd;}
#fourcolumn .column .button2 {margin-bottom: 25px;}
#middletitle { background: #3d5567;} 
 #middletitle-container {position:relative;text-align: center;padding: 30px 0px;}

#fourcolumn #column-2 .title h4 {color: #8dc63f}
#fourcolumn #column-2 .title h4 span{font-size: 45px;}

#fourcolumn #column-2 .title {border-left:7px solid #8dc63f;}
#fourcolumn #column-2 .image {border-left:7px solid #8dc63f;}

#fourcolumn #column-3 .title h4 {color: #e5087d}
#fourcolumn #column-3 .title {border-left:7px solid #e5087d;}
#fourcolumn #column-3 .image {border-left:7px solid #e5087d;}
#fourcolumn #column-3 .title h4 span{font-size: 50px;}


 #bottom {border-bottom: 7px solid #0087cd;
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(184,212,239,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(184,212,239,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(184,212,239,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(184,212,239,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(184,212,239,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(184,212,239,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b8d4ef', GradientType=0 );
}
#bottom .bg {  position: absolute;width:100%;height:380px;background: url('../img/apologismos.png') no-repeat 92% bottom;}
#bottom .bg.en {background: url('../img/apologismos-en.png') no-repeat 92% bottom;}
#bottom-container {height:380px;position: relative;}
#bottom-container .text {padding: 25px 0px 0px 170px;max-width: 675px;}
#bottom-container h2 {color: #939598;margin:0px;  line-height: 40px;font-size:45px;margin-bottom: 10px;}
#bottom-container h2 .small {font-size:36px;}
#bottom-container h2 .medium {font-size:42px;}
#bottom-container h2 .big {font-size:58px;}
#bottom-container .button1 {position:absolute;bottom:30px;left: 50%;margin-left: -96px;}

#books {float:right;}
#footer .book {float: left;  width: 390px;  height: 210px;}
#footer .text { color:#0086c9; font-size:16px;font-family: 'InterstateGR' , sans-serif;width:225px;text-align: right}
#footer .text span {color:white;font-size:15px;}
#book1 {background: url('../img/book1.jpg') no-repeat right bottom;}
#book2 {background: url('../img/book2.jpg') no-repeat right bottom;}
.copyright {color:white;font-family: 'InterstateGR' , sans-serif;font-size:15px;display: block;position: absolute;bottom: 20px;left: 20px;}
.scrollToTop {display:block;position: fixed; right: 50px; bottom: 10px;}
/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/
@media screen and (max-width: 1200px) {
  .container {margin: 0px 10px;}
  #logo {}
  #fourcolumn .column .image {display: none;}
  #top-container .text { padding: 10% 0px 0px 10%;}
  #top-container .button1 {margin-left: 0; left:10%;}
  #bottom-container .text { padding: 10% 0px 0px 10%;}
  #bottom-container .button1 {margin-left: 0; left:10%;}
  #bottom-container p {display:none;}
  #books {width:100%;}
  #footer .book  {width:50%;}
  #bottom .bg.en {background: url('../img/apologismos-small-en.png') no-repeat right bottom;}
  #bottom .bg {background: url('../img/apologismos-small.png') no-repeat right bottom;}
  #fourcolumn .column {width: 50%}
}

@media screen and (max-width: 800px) {
  #header-container {height: 130px;}
  #header .title {padding-top: 90px;}
  .copyright {bottom: 0;}
  #footer .book {background: none}
  #footer .text {width: 100%;  text-align: center;  padding: 0;  margin: 0;}
}

@media screen and (max-width: 580px) {  
  #header .title {text-align: center;width:100%;}
  #header .title h1{font-size: 25px;}
  #top-container {background: none;}
  #top-container .text { padding: 0;text-align: left;padding-top: 100px;}
  #top-container .button1 {left:50%;margin-left: -134px;}
  #middletitle-container h1{font-size: 25px;}
  #top-container.en {background: none;}
  #bottom .bg.en {background: none;}
  #bottom .bg {background: none;}
  #bottom-container .text { padding: 0;text-align: left;padding-bottom: 100px;margin-top: 50px;}
  #bottom-container .button1 {left:50%;margin-left: -96px;}
  .scrollToTop {display: none!important;}
  #fourcolumn .column {width: 100%}
}

@media screen and (max-width: 480px) {
  #top-container h3{font-size: 30px;line-height :30px;}
  #bottom-container h2 .small {font-size: 30px;line-height :30px;}
  #bottom-container h2 .medium {font-size: 30px;line-height :30px;}
  #bottom-container h2 .big {font-size: 30px;line-height :30px;}
}
@media screen and (max-width: 420px) {
  #header .title h1{font-size: 18px;}
  #middletitle-container h1{font-size: 18px;}
}