/*  
Theme Name: Secret Smile Collective #04
Theme URI:  http://www.secretsmile.flaunt.nu/
Description: Created by Secret Smile Design
Author: Cristina (contatosecretsmile@gmail.com)
Author URI: http://www.secretsmile.flaunt.nu/
Version: 1.0

--------------------------
   Default Colors
--------------------------
#353535
#b5b5b5
#feac5e, #c779d0, #4bc0c8 (for gradient)
#ffffff
#dcdcdc
#494949
#ff0000
*/

html {box-sizing: border-box;}
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

body {background-color: #353535; color: #b5b5b5; font: 400 18px 'Roboto', sans-serif; overflow-x: hidden; margin: 0; text-transform: uppercase;}
a, a:hover {text-decoration: none;}
a {color: #4bc0c8;}
a:hover {color: #c779d0;}
a, .social-menu li a, .collbox-item img, .collbox .title, .collbox .info span, .more-sites a, #footer a, #footer a:before, #credit a {-webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s;}

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

#header {width: 100%; margin: 0 auto; padding: 15px 10px 0 10px ; text-align: center;}
h1 {z-index: 1; font: 400 4.091em/50px 'Abril Fatface', cursive; text-transform: lowercase; margin: 0 auto; color: #ffffff; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRkNDQzkwOyIgLz48c3RvcCBvZmZzZXQ9Ijk5JSIgc3R5bGU9InN0b3AtY29sb3I6I0Q1N0VFQjsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+); background-image: -webkit-gradient(linear, left top, 45deg, color-stop(0%, #feac5e), color-stop(99%, #4bc0c8)); background-image: -moz-linear-gradient(45deg,#feac5e, #c779d0, #4bc0c8); background-image: -webkit-linear-gradient(45deg,#feac5e, #c779d0, #4bc0c8); background-image: -o-linear-gradient(-45deg,#feac5e, #c779d0, #4bc0c8); background-image: -ms-linear-gradient(45deg,#feac5e, #c779d0, #4bc0c8); background-image: linear-gradient(45deg,#feac5e, #c779d0, #4bc0c8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position:relative; display: inline-block;}
.tag {display: block; padding: 0 5px 5px 5px; margin: 0 auto; font-size: 0.909em; letter-spacing: 0.5px; }
.social-menu {padding: 0; display: block; max-width: 1100px; margin: 0 auto;}
.social-menu ul {padding: 0; margin: 0 auto; }
.social-menu li {display: inline-block; padding: 0; margin: 0;}
.social-menu a {color: #ffffff; display: inline-block; font-size: 1.091em; text-decoration: none; margin: 0;  padding: 8px 4px; position: relative; }
.social-menu a:hover {color: #dcdcdc; }
.social-menu a:before {font-family: 'Font Awesome 5 Brands'; font-weight: 400; content: '';}
.social-menu a[href*='mailto:']:before, .social-menu a[href$='/contact/']:before {font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.social-menu a[href*="twitter.com"]:before {content: "\f099"}
.social-menu a[href*="facebook.com"]:before {content: "\f39e"}
.social-menu a[href*="pinterest.com"]:before {content: "\f0d2"}
.social-menu a[href*="plus.google.com"]:before {content: "\f0d5"}
.social-menu a[href*="youtube.com"]:before {content: "\f167"}
.social-menu a[href*="instagram.com"]:before {content: "\f16d"}
.social-menu a[href*="tumblr.com"]:before {content: "\f173"}
.social-menu a[href*="vimeo.com"]:before {content: "\f27d"}
.social-menu a[href*='mailto:']:before, .social-menu a[href$='/contact/']:before {content: "\f0e0";}


/* ----------------- FOOTER ----------------- */
#footer {clear: both; width: 90%; margin: 0 auto 20px auto; position: relative; padding: 0; text-decoration: none; border-top: 1px dashed #494949;}

/* ----------------- RESPONSIVE ----------------- */

@media all and (max-width: 640px) {h1 {font-size: 8vw!important;}}
@media all and (max-width: 480px) {#content {width: 100%!important;}}