/*####################################
	
Theme Name: CJNET BIO
Author URI: https://cjnet.com.br
Version: 0.2

####################################*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/*####################################
CONTAINERS
####################################*/

html { 
	background: url(images/bg1.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}

body {
	font-family:"Poppins", Helvetica, Arial, sans-serif;
	font-size:18px;
	line-height:27px;
	color:#454545;
	text-align:center;
	margin:10px auto;
	width:330px;
	}

.profile {
	background:url(images/profile.png) no-repeat;
	background-size:cover;
	margin:40px auto;
	width:150px;
	height:150px;
	}

h1 {
	margin:5px auto;
	font-size:24px;
	color:#C60;
	}

.topline {
	background:url(images/line.svg) no-repeat top center;
	width:60px;
	height:6px;
	margin:0 auto;
	padding:0;
	}

.bio p {
	font-size:15px;
	width:100%;
	margin:10px auto 20px auto;
	padding:10px 0;
	}

/*####################################
BUTTONS
####################################*/

button {
	font-family:"Poppins", Helvetica, Arial, sans-serif;
	background:#FFF;
	color:#454545;
	font-size:16px;
	line-height:16px;
	width:100%;
	margin:10px auto;
	padding:10px 0;
	font-weight:bold;
	-moz-border-radius:60px; 
	-webkit-border-radius:60px; 
	border-radius:60px;
	border:#FFF 2px solid;
	box-shadow:0 0 9px rgba(0, 0, 0, 0.1);
	cursor:pointer;
	}

button:hover {
	background:#F60;
	color:#FFF;
	transition:.5s;
	border:#e05a00 2px solid;
	}
	
button span {
	font-weight:normal;
	font-size:11px;
	line-height:11px;
	letter-spacing:0.6px;
	opacity:.75;
	}

/*####################################
ICONS
####################################*/

button.ios {
	background:#FFF url(images/icon-ios.svg) no-repeat left center;
	}

button.android {
	background:#FFF url(images/icon-android.svg) no-repeat left center;
	}

button.whatsapp {
	background:#FFF url(images/icon-whatsapp.svg) no-repeat left center;
	}

button.localizacao {
	background:#FFF url(images/icon-localizacao.svg) no-repeat left center;
	}

button.instagram {
	background:#FFF url(images/icon-instagram.svg) no-repeat left center;
	}

button.play {
	background:#FFF url(images/icon-play.svg) no-repeat left center;
	}
	
button.food {
	background:#FFF url(images/icon-food.svg) no-repeat left center;
	}

button.bt {
	background:#FFF url(images/icon-bt.svg) no-repeat left center;
	}

button.ios, button.android, button.whatsapp, button.localizacao, button.instagram, button.play, button.food, button.bt {
	background-position:left 15px center;
	background-size:30px 30px;
	}
	
/*####################################
ICONS HOVER
####################################*/

button.ios:hover {
	background:#F60 url(images/icon-ios-hover.svg) no-repeat left center;
	}
	
button.android:hover {
	background:#F60 url(images/icon-android-hover.svg) no-repeat left center;
	}
	
button.whatsapp:hover {
	background:#F60 url(images/icon-whatsapp-hover.svg) no-repeat left center;
	}

button.localizacao:hover {
	background:#F60 url(images/icon-localizacao-hover.svg) no-repeat left center;
	}

button.instagram:hover {
	background:#F60 url(images/icon-instagram-hover.svg) no-repeat left center;
	}

button.play:hover {
	background:#F60 url(images/icon-play-hover.svg) no-repeat left center;
	}
	
button.food:hover {
	background:#F60 url(images/icon-food-hover.svg) no-repeat left center;
	}
	
button.bt:hover {
	background:#F60 url(images/icon-bt-hover.svg) no-repeat left center;
	}

button.ios:hover, button.android:hover, button.whatsapp:hover,
button.localizacao:hover, button.instagram:hover,
button.play:hover, button.food:hover, button.bt:hover {
	background-position:left 15px center;
	background-size:30px 30px;
	color:#FFF;
	}

/*####################################
ANIMATIONS
####################################*/

.shake {
	animation:shake-animation 3.21s ease infinite;
	transform-origin:50% 50%;
	}

@keyframes shake-animation {
	0%{transform:translate(0,0)}
	1.78571%{transform:translate(5px,0)}
	3.57143%{transform:translate(0,0)}
	5.35714%{transform:translate(5px,0)}
	7.14286%{transform:translate(0,0)}
	8.92857%{transform:translate(5px,0)}
	10.71429%{transform:translate(0,0)}
	100%{transform:translate(0,0)}
	}

.pulse {
	animation:pulse-animation 2s infinite;
	}

@keyframes pulse-animation {
	0%{box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.3);}
	100%{box-shadow: 0 0 0 9px rgba(0, 0, 0, 0);}
}

/*####################################
MISCELANEA
####################################*/

.cjnet a {
	background:url(images/cjnet_white.svg) no-repeat;
	width:60px;
	height:30px;
	display:block;
	margin:45px auto 30px auto;
	padding:0;
	}

.clear {
	clear:both;
	}