@keyframes scrollanimation {
  from {
    opacity: 0;
    
  }

  50% {
    opacity: 1;
    transform: translate(0,10px);
  }

  
  to {
    opacity: 0;
  
    transform: translate(0,0);
  }
}


body,html{
	width: 100%;
	height: 100%;
	background: #f7f7f7;
	color: #4a4a4a;
	font-family: 'Open Sans', sans-serif;
	
}
nav{
	
	position: absolute;
	height: 180px;
	transition: all 0.3s linear !important;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0 15px;   
	z-index: 5;
	
}

h1,h2,h3,h4,h5,h6,h7{
	font-family: 'Roboto', sans-serif;
	
}





#myImage{
	
	text-align: center;
	max-width: 690px;
	margin: 0 auto;
	
	
}

#myImage .image{
	
	display: inline-block;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	border: 10px solid white;
	
	
}

#myImage .image img{
	width: 120px;
	height: 120px;
}


body.scrolled{
	
}

body.scrolled nav{
	position: fixed;
	width: 100%;
	height: 60px;
	background: #f7f7f7;
	border-bottom: 1px solid #ccc;
	left: 0;
	top: 0;
	padding: 0 15px;
	margin-top: 0;
}

body.scrolled nav #myImage .image{
	border: 3px solid white;
}

body.scrolled nav #myImage .image img{
	width: 40px;
	height: 40px;
	
}

body.scrolled nav #myImage {
	
}

#mainContainer{
	padding-top: 180px;
	max-width: 720px;
	margin: 0 auto;
	position: relative;
	
}

article.main{
	border-top: 3px solid #ff6600;
	background: white;
	
	
	
	
}

.myShadow{
	box-shadow: 0px 1px 1px 0px rgba(0,0,0,.15);
}

.about{
	text-align: center;
	padding-bottom: 20px;
}

header{
	padding-bottom: 20px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
}

.icon{
	display: inline-block;
	background: white;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
}

.article-title .when{
	font-size: 12px;
}

.article-title .where{
	font-size: 12px;
}

#scrollForContent{
	animation: scrollanimation 1s infinite;
	text-align: center;
	
}

.article-body img{
	max-width: 100%;
	
	
}

.list-articles img{
	width: 64px;
	height: 64px;
	background-color: #f5f5f5;
	background-size: cover;
	background-position: center center;
}

.list-articles a{
	color: black;
	

}

.list-articles li:hover{
	cursor: pointer;
}

.list-articles li{
	 margin-bottom: 1.5rem!important;
	 
}

.list-articles li:first-child{
	 margin-top: 1.5rem!important;
}

.list-articles li:last-child{
	 margin-top: 0!important;
}




.icon{
	cursor: pointer;
}
#likeActions{
	margin-top: 15px;
}

#likeActions .icon{
	margin-right: 5px;
	text-color: black;
}

#likeActions a{
	
}

#likeActions a:hover{
	text-decoration: none;
}

.bg-facebook{
	background-color: #5262b7;
}

.bg-twitter{
	background: linear-gradient(to bottom, #02c9ff 0%, #00b2e3 100%);
}

.bg-pinterest{
	background: linear-gradient(to bottom, #ca091e 0%, #bd081c 100%);
}

#shareArticles .icon{
	color: white;
}

.bg-instagram{
	background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}

.transparent-button{
	background: none;
	border: none;
	padding: 0;
	display: block;
	margin-bottom: 15px;
}

footer{
	height: 60px;
	text-align: center;
	padding: 20px;
}



#listSocialConnections a{
	display: block;
}

#listSocialConnections a:hover{
	text-decoration: none;
}

#listSocialConnections .icon{
	margin-right: 10px;
}

#signatureImage{
	width: 100px;
	height: 100px;
}

#articleFooter{
	background: url(../images/utils/arrow-enjoy.png) top center no-repeat;
	
}

@media (max-width: 575.98px) { 
	#mainContainer{
		margin: 0 !important;
		padding-left: 0!important;
		padding-right: 0!important;
	}
	
	
}

.related-article-image{
	height: 150px;
	width: 100%;
	background-size: cover;
	background-position: center center;
	background-color: #ccc;
	margin-bottom: 10px;
}

.related-article a{
	display: block;
	color: #4a4a4a;
}

.related-article a:hover{
	color: black;
}