templates/alexandrosstergiou.github.io/css/design.css

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);




#social-platforms {
  position:relative;
  font-size:1.2rem;
  text-align:center;
  height:auto;
  overflow:hidden;
}

#social-platforms a {
  background: rgba(230, 230, 230, 0.1);
  text-align:center;
  position:relative;
  display:inline-block;
  width:1.4em;
  height:1.4em;
  font-size:1.75em;
  color:#fff;
  line-height:1.05em;
  border:0;
  cursor:pointer;
  margin:0.9em 0.2em;
  padding:0.15em;
  box-shadow: 0em 0.5em 0.5em 0em rgba(0, 0, 0, 0.55);
  border-radius:0.2em 0.2em 0.2em 0.2em;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
}

#social-platforms a span {
  display:none;
}

#social-platforms a:after {
  opacity:0;
  font-size:.5em;
  font-weight:30em;
  color:#fff;
  background:#000;
  content:attr(data-title);
  white-space:nowrap;
  display:block;
  position:absolute;
  left:0;
  bottom:60em;
  z-index:-5;
  cursor:help;
  padding:3em 8em;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
}

#social-platforms a:before {
  opacity:0;
  display:block;
  position:absolute;
  bottom:5em;
  left:50%;
  margin-left:-5em;
  z-index:9;
  cursor:help;
  content:'';
  width:0;
  height:0;
  border-left:5em solid transparent;
  border-right:5em solid transparent;
  border-top:5em solid #000;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  }

#social-platforms a:hover {
  background-color: #1E4258;
  box-shadow: 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.45);
  }

#social-platforms a:hover:before, #social-platforms a:hover:after {
  opacity:1;
  z-index:50;
}






#project-platforms {
  position:relative;
  font-size:1.2rem;
  text-align:center;
  height:auto;
  overflow:hidden;
}

#project-platforms a {
  background: rgba(170, 170, 170, 0.1);
  text-align:center;
  position:relative;
  display:inline-block;
  width:1.4em;
  height:1.4em;
  font-size:1.75em;
  color:#000;
  line-height:1.05em;
  border:0;
  cursor:pointer;
  margin:0.9em 0.2em;
  padding:0.15em;
  box-shadow: 0em 0.3em 0.3em 0em rgba(170, 170, 170, 0.65);
  border-radius:0.2em 0.2em 0.2em 0.2em;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
}

#project-platforms a span {
  display:none;
}

#project-platforms a:after {
  opacity:0;
  font-size:.5em;
  font-weight:30em;
  color:#000;
  background:#000;
  content:attr(data-title);
  white-space:nowrap;
  display:block;
  position:absolute;
  left:0;
  bottom:60em;
  z-index:-5;
  cursor:help;
  padding:3em 8em;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
}

#project-platforms a:before {
  opacity:0;
  display:block;
  position:absolute;
  bottom:5em;
  left:50%;
  margin-left:-5em;
  z-index:9;
  cursor:help;
  content:'';
  width:0;
  height:0;
  border-left:5em solid transparent;
  border-right:5em solid transparent;
  border-top:5em solid #000;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  }

#project-platforms a:hover {
  background-color: #1E4258;
  color:#fff;
  box-shadow: 0 0.1em 0.1em 0 rgba(70, 70, 70, 0.45);
  }


.facebook:hover{
    background:#00ff00;
}


.back{
    background-color: #000;
}


*{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

html{
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}

body{
	margin:0;
}

a{
	background-color:transparent;
}

a:active,a:hover{
	outline:0;
}


img{
	border:0;
}

html,body{
	font-family:Verdana,sans-serif;
	font-size:14px;
	line-height:1.5;
}

html{
	overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
	font-family:"Segoe UI",Arial,sans-serif;
}

h1{
	font-size:36px;
}

h2{
	font-size:30px;
}

h3{
	font-size:24px;
}

h4{
	font-size:20px;
}

h5{
	font-size:18px;
}

h6{
	font-size:16px;
}

h1,h2,h3,h4,h5,h6{
	font-weight:400;
	margin:10px 0
}


h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
	font-weight:inherit;
}


img{
	margin-bottom:-5px;
}

a{
	color:inherit;
}

footer {
	background-color: black;
	color: #ADADAD;
}


@media only screen {
.col.m6{width:40%
}

.row-padding,.row-padding>.col{padding:0 8px}

.section{
	margin-top:.5em;
	margin-bottom:1em;
}

@media (max-width:600px){
	.hide-small{
		display:none;
	}
}

.wide {
	letter-spacing: .1em;
}
.hover-opacity {
	cursor: pointer;
}


a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}


/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100em;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30,30,30,0.6);
}

/* Modal Content */
.modal-content {
    background-color: #ACACAC;
    margin: auto;
    padding: 6em;
    border: 1em solid #ADADAD;
}

.modal-content-horizontal-50 {
    width: 50%;
}

.modal-content-horizontal-40 {
    width: 40%;
}

.modal-content-vertical-23{
	width: 23%
}

/* The Close Button */
.close {
    color: #000;
    float: right;
    font-size: 8em;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #ADADAD;
}


.display-m{
	position:absolute;top:50%;left:50%;
	transform:translate(-50%,-50%);

}


.display-container{
	position:relative
}


.content{
	max-width:80em;
	margin:auto;
  background-color: #fff
}

.container:after,.row:after,.row-padding:after{
	content:"";
	display:table;
	clear:both;
	}

.container{
	padding:0.01em 3em
}

.padding{
	padding-top:1em;
	padding-bottom:1em;
}

.col{
	float:left;
	width:100%
}

.fade{
   animation: fadein 6s;
    -webkit-animation: fadein 6s; /* Safari & Chrome */
    -moz-animation: fadein 6s; /* Firefox*/
    -ms-animation: fadein 6s; /* IE*/
    -o-animation: fadein 6s; /* Opera*/


}

.fadex3{
   animation: fadein 2s;
    -webkit-animation: fadein 2s; /* Safari & Chrome */
    -moz-animation: fadein 2s; /* Firefox*/
    -ms-animation: fadein 2s; /* IE*/
    -o-animation: fadein 2s; /* Opera*/


}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari & Chrome*/
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox*/
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* IE */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.drop {
    margin-top: 5em;
    position: relative;
    -webkit-animation-name: drp; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: drp;
    animation-duration: 2s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes drp {
    0%  {top:-100em;}
    100% {top:0em;}
}
/*Firefox*/
@-moz-keyframes drp{
	0%  {top:-100em;}
    100% {top:0em;}
}

@keyframes drp {
    0%  {top:-100em;}
    100% {top:0em;}
}