/*custom code*/
/*BARBARA RODEL*/

/*FONTS*/
body {font-family: Comfortaa, "Helvetica Neue", Helvetica, Arial, "sans-serif"}
.h1, h1, .sp-page-title .sp-page-title-heading {font-size: 3rem; color:#fff;}
.h2, h2 {font-size: 2.5rem; color: #30bfbf}
h3 {font-size: 1.2rem}
.page-header h2, .sp-page-title-heading {text-transform: uppercase}
.qx-subtitle p {padding: 0; margin: 0}
.emphase {color:#30bfbf!important; font-style: italic}
.sp-page-title {background: none}


/*LINKS*/
a, a:link, a:active, a:visited, .article-list .article .article-header h1 a, .article-list .article .article-header h2 a {color:#d30000}
a:hover, a:focus {color:#f59999}
.mod-languages li a {color:#fff!important}
.mod-languages li a:hover, .mod-languages li a:focus {color:#f59999!important}
.mod-languages li.lang-active a, .mod-languages li.lang-active a:hover, .mod-languages li.lang-active a:focus {color:#aaa!important}

/*HEADER*/
#sp-top-bar {background-color: #111}
#sp-header {height: 80px; background-color: #333}
#sp-header .logo {padding-top:16px; font-family: 'Comfortaa', serif;}
#sp-header .logo a {font-size: 26px; font-weight: 700; color: #fff}
#sp-header .logo a:hover, #sp-header .logo a:focus {color: #d30000}
#sp-header .logo, #sp-header .logo-slogan  {height:25px!important; line-height: 100%}

/*MENU LANGUES*/
.sp-module-content .mod-languages ul.lang-inline li {margin: 0 8px 0 0;}
ul.lang-inline li a {font-weight: 700; color: #fff!important}
ul.lang-inline li.lang-active a {color: #f59999!important}
ul.lang-inline li a:hover, ul.lang-inline li a:focus {color: #d30000!important}

/*MENU*/
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {height: 80px; line-height: 80px; font-size: 16px}
.sp-megamenu-parent > li > a {color:#fff; font-weight: 700}
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {color:#f59999; font-weight: 700}
.sp-megamenu-parent > li:hover > a {color:#d30000}

/*MENU OFF CANEVAS*/.offcanvas-menu {background-color:#111}
.offcanvas-menu .logo {font-size: 1.3rem}
.offcanvas-menu .logo-slogan {position: absolute; top: 25px}
.offcanvas-menu .offcanvas-inner {padding:16px}
.offcanvas-menu .offcanvas-inner .sp-module {margin-top:16px}
.offcanvas-menu .offcanvas-inner .sp-module ul > li a, .offcanvas-menu .offcanvas-inner .sp-module ul > li span {
	padding:8px;
	font-weight: 700;
	border-bottom:#000 1px solid
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li a {color:#fff}
.offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover {color:#d30000}
.offcanvas-menu .offcanvas-inner .sp-module ul > li.active a, .offcanvas-menu .offcanvas-inner .sp-module ul > li.active a:hover {color:#f59999}
.burger-icon>span {background-color: #fff}

/*SECTIONS*/
#sp-main-body {padding:0!important}
#home-welcome {padding-top:80px; padding-bottom: 80px}
#home-portfolio {padding-top:80px; padding-bottom: 80px; background: #fff}
#home-about {padding-top:80px; padding-bottom: 80px}


/*PAGE HOME - SECTION MY PORTFOLIO*/
#home-welcome img, #home-portfolio img {
	-webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}
#home-welcome img {
	border:#30bfbf 4px solid
}
#home-welcome p {
	color:#fff
}
#home-portfolio img {
	-webkit-transition: 300ms ease all;
    -moz-transition: 300ms ease all;
    -o-transition: 300ms ease all;
    transition: 300ms ease all;
	-webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
	margin: 0 auto;
    max-width: 90%;
}
#home-portfolio img:hover {
	-webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
}
#home-portfolio p {color: #333}

/*PAGE ABOUT ME*/
#aboutme #profil img {
	-webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
	border:#30bfbf 4px solid
}

/* PAGE PORTFOLIO */
#jsn_is_list_wapper .jsn-is-list-thumbnail {margin:8px 4px}
#jsn_is_list_wapper .jsn-is-list-thumbnail, #jsn_is_list_wapper .jsn-is-list-thumbnail .item-thumb-loading-container {
	background-color: #666;
	border-radius: 16px;
    overflow: hidden;
}
#jsn_is_list_wapper .jsn-is-list-thumbnail .jsn-is-gallery-text {margin:0; padding:16px}
#jsn_is_list_wapper .jsn-is-list-thumbnail .jsn-is-gallery-text h2 {color:#30bfbf; font-size: 120%}
#jsn_is_list_wapper .jsn-is-list-thumbnail .jsn-is-gallery-text p {font-size:80%; color:#fff}

.itemid-106 .qx-column {padding-top: 0; padding-bottom: 0}

/*PAGE INFOS/NEWS*/
.article-list, .article-details {padding-top:36px}
.article-list .article {border: none}
.article-list .article .readmore a, .article-list .article .readmore a:link, .article-list .article .readmore a:visited {color:#d30000}
.article-list .article .readmore a:hover, .article-list .article .readmore a:focus {color:#f59999}
.article-body .category-name {display: none}
.article-info > span a {background: #999; color: #fff; font-size: 12px; padding: 5px 10px;}
.article-info > span a:hover {background: #888; color:#fff; text-decoration: none;}
.article-info > span a::before {content:"<< "}

/*BOUTONS*/
.qx-btn {text-transform: uppercase; padding:8px 16px; font-size: 15px; font-weight: 700}
.qx-btn-default, .qx-btn-primary {
    color: #d30000;
    background-color: #fff;
    border-color: #f59999;
}
.qx-btn-primary:hover, .qx-btn-default:hover {
    color: #fff;
    background-color: #d30000;
    border-color: #f59999;
}
.form-horizontal .controls {margin: 0; text-align: center}

/*** RESPONSIVE ***/
@media (min-width: 321px){
.col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
	}
.col-lg-6#sp-top1 .text-center {text-align:left!important}
.col-lg-6#sp-top2 .text-center {text-align:right!important}
}