/* CSS

R.J.I. 
Design, tech. Infrastruktur und Website Architektur: R.Infantino 

*/
        
       
        
/* Google Webfont*/
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,600,700&display=swap');
@import url ('https://fonts.googleapis.com/css?family= Source + Sans + Pro: 400.600.700 & display = swap'); 
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,400i,500,500i,600,700');


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
    border: 0;
	outline: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
body {
    line-height: 1;
    background: #ffffff ;
    font-family: Open Sans;
    color: #333333;
    font-size: 16px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
body, html{
    height: 80%;
    min-height: 80%;
    
}

html{ 
}

ol, ul {
	list-style: none;
    line-height: 1.2em;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
    outline: inherit;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
p {
    line-height: 1.5em;
    margin: 20px 0;
}
ul, li{
    line-height: 1.5em;
}

/* HTML 5 Elemente = display:block;  */
header, nav, section, footer, article, figure, aside, content{ 
    display: block;   
}
mark{
    background-color: #EDFFED;
}



::-moz-selection { /* Code for Firefox */
    color: #ffffff;
    background-color: #666666;
}

::selection {
    color: #ffffff;
    background-color: #666666;
}        /* Headlines  */

h1{ font-family: 'Work Sans'; font-weight: 300; font-size: 38px;  line-height: 1.2em;}
h2{ font-family: 'Work Sans'; font-weight: 300; font-size: 30px; line-height: 1.2em;}
h3{line-height: 1.4; font-weight: 700;}
h4{color: #ffffff; font-size:30px; line-height: 1.2em; font-weight: 300;}
h5{color: #ffffff; line-height: 1.2em; font-weight: 300;}

/* Basic Elements -------------------------------------*/

hr{
    border: 0;
    height: 1px;
    background-color: #ebebeb;
}
.floatleft{
    float: left;
}
.floatright{
    float: right;
}
.center{
    text-align: center;
}
.lightgrey{
    background-color: #f1f1f1;
}

.overflow{
    overflow: hidden;
}

.padding{
    padding: 20px;
}

strong{
    line-height: 1.4em;
}

.pic{
    width: 100%;
    background-color: #f1f1f1;
    min-height:  300px;
    display: block;
}

.dezimal li{
    list-style-type: decimal;
}

a:link{
    color: #40C4FF;
    
}
a:hover{
    color: #777777;
}

/* Goldener Schnitt / Strecke ----------------------------------*/

.shortway{
    width: 35%;
}
.longway{
    width: 65%;
}
.halfway{
    width: 49%; 
}

.firstcolumn{
    width: 33%;
}
.centercolumn{
    width: 33%;
}
.lastcolumn{
    width: 33%;
}


ol{
    margin: 20px;
    padding: 0 0 0 0px;
}
ol li{
    font-weight: 600;
    margin-bottom: 30px;
}
ol li ul li{
    list-style: square;
    font-weight: 300;
    margin-bottom: 0px;
}
ol li ul li ul li{
    list-style: decimal;
    font-weight: 300;
    font-size: 0.8em;
    color: #999999;
}
.date{
    font-size: 0.7em;
    color:#4ECDC4;
}

/* VCard ---------------------------------------------------------------*/

.vcard{
 
}


.vcard_container{
    position: relative;
    background-color: #ffffff;
   /* -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05); */
    border: 0px solid #ffffff;
    width: 61%;
    max-width: 1147px;
    min-width: 1147px;
    margin: 0 auto;
    padding: 0;
    min-height: 150px;
    box-sizing: border-box;
    z-index: 100;
    
}
.flex{
     display: flex;
}

.picture{
    background: url('../img/Roberto-Infantino-Profile.jpg');
    background-position: center center;
    background-size: cover;
}

.vcard_box_right{
    color: #333333;
    background-color: #ffffff;
    
    /* background-size: 600% 600%;
    background: linear-gradient(60deg, #1C202D, #25475E, #1C202D);

    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    -o-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite; */
}
.vcard_box_right p{
    font-family: 'Cormorant Garamond';
    font-weight: 500;
    font-size: 2.8em;
    line-height: 50px;
    text-align: center;
    font-style: italic;
    padding: 50px 40px;
}

.vcard_wrap{
    width: 100%;
    min-height: 360px;
}

.skill_wrap{
    width: 100%;
}

.article_teaser p, .skill_box p{
    padding: 10px 20px 0;
}
.article_teaser h2, .skill_box h2{
    padding: 20px;
}

.socialmedia{
    float: right;
}
.socialmedia img{
    height: 20px;
    margin-right: 10px;
    margin-top: 5px;
}
.whatido{
    color: #ffffff;
    background-color: #FF6B6B;
    font-family: 'Cormorant Garamond';
    font-weight: 300;
    padding-bottom: 20px !important; 
    font-size: 1.4em;
    font-style: italic;
}
/* Header -------------------------------------*/

header{
    /* border:1px solid red !important; */
    background-color: #00CCC0;
    padding:00px !important;
    color: #ffffff;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05);
}



#menu{
    max-width: 100%;
}
#menu li{
    display:inline-block;
    padding:0px 10px;
    cursor:default;
}
#menu li:first-child{
    margin-left:0;
    padding-left:0;
}
#menu li ul:last-child{
    border-bottom: 3px solid rgba(0, 0, 0, 0.2);
}

#menu li a{
    text-decoration:none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size:12px;
    font-weight: 600;
    margin-right: 20px;
}
#menu a:hover{
    color: ;
}
#menu li ul{
    display:none;
    text-align: left;
    margin-left:-15px;

}
#menu li:hover ul{
    display:block;
    position:absolute;
    width:220px;
}
#menu li ul li{
    padding:0;
    margin:0;
    width:100%;
    width: 190px !important;
}
#menu li ul li a{
    width:100%;
    display:block;
    padding: 8px 15px;
    background-color:#ffffff;
}
#menu li ul li a:hover{
    color:#666666;
    background-color: #eeeeee;

}
.slicknav_menu{
    display:none;
}
.nav a{
    color: #ffffff;
}
.nav{
    position:relative;
    text-align: right;
    z-index:1;
    float:right;
    display: inline-block;
    max-width 100%;
    padding: 0px;
    background:}

.namelogo{
    font-family: Montserrat;
    font-weight: 700 !important;
    color: #ffffff;
    top:28px;
    font-size:22px;
    display: inline-block;
    font-weight:300;
    border-bottom: 0px solid #333333}
.namelogo_black{
    color: rgba(51, 51, 51, 0.2) !important;
    font-style: normal;
}

.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}
.siteinfo{
    position: absolute;
    left: -120px;
    top: 50%;
    display: inline-block;
    text-transform: uppercase;
    font-family: Montserrat;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Intro ----------------------------------*/

.intro h1{
    color: #ffffff;
}
.pem{
    padding: 30px 0 0 0 ;
    width: 100px;
}

.intro{
    background: #ffffff;
    min-height: 100%;  
    overflow: hidden;
}
.intro article{
    max-width: 1120px;
    margin: 0 auto;
}

.newsletter{
    background: linear-gradient(60deg, #4ECDC4, #4ECDC4, #4ECDC4);
    background-size: 600% 600%;
    padding-top: 60px;
    padding-bottom: 60px;
    font-family: 'Montserrat';
    font-weight: 300;
    width: 61%;
    max-width: 1147px;
    min-width: 1147px;
    margin: 0 auto;
    padding: 0;

    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    -o-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite;
}
.newsletter h4{
    Font-weight: 500;
}
.newsletter h5{
    font-family: 'Open Sans';
}


@-webkit-keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
@keyframes AnimationName { 
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
/* Top News & My Profile----------------------------------*/

.top_news, .my_profile{
    display:inline-block;
}

.top_news{
    width: 70%;
    max-width: 760px;
    float: left;
}
.top_news div{
    background-color:rgba(0, 0, 0, 0.2);
    color: #ffffff;
    min-height: 250px;
}
.top_news div h1{
    color: #ffffff;
    font-size: 40px;
    font-weight: 600;
    padding: 42px 30px 0;
}
.top_news div p{
    font-size: 20px;
    margin: 10px 0 0 0 ;
    padding: 0px 30px 30px;
}
.top_news ul p{
    margin: 25px 0 0 0;
    font-size: 14px;
}
.top_news ul{
    margin-bottom: 40px; 
    overflow: hidden;
}
.top_news ul h2{
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
}

.top_news ul li a{
    text-decoration: none;
    color: #181818;
    background-color: #ffffff;
    display: inline-block;
    width: 300px; 
    padding: 30px 30px;
}
.top_news ul li a:hover{}
.top_news span{
    display:block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 29px;
    color: #ffffff;
}

.top_news ul li:nth-child(1){
    float: left;
}
.top_news ul li:nth-child(2){
    float: right;
}
/* My Profile----------------------------------*/
.my_profile{
    text-align: center;
    margin: 0px auto ;
    width: 95%;
    min-width: 300px;  
    color:#333333;
    background-size: cover;
}
.my_profile img{
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
}

.my_profile h2{
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    margin-top: 20px;
}
.my_profile p{
    margin: 0 0 0 0;
    font-size: 16px;
}
.my_profile a{
    margin: 40px 0 0 0;
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.xing_profile{
    padding: 10px 15px;
    background-color: #181818;
    border-radius: 2px;
}

.linkedin_profile{
    padding: 10px 15px;
    background-color: #181818;
    border-radius: 2px;
}
.xing_profile:hover{
    background-color: #b5da67;
}

.linkedin_profile:hover{
    background-color: #0073b1;
}

/* Main Content ---------------------------------------------------------------*/

.main_content, .main_content_title{
    width: 61%;
    margin: 0px auto;
    max-width: 1147px;
    min-width: 1147px;
    display: flex;
    flex-direction: row;
    font-family: 'Open Sans';
}


.main_content_title p{
    margin: 0px;
    font-size: 0.8em;
    color: #999999;
}
.main_content_title div{
    padding: 25px 15px;
    margin: 15px 15px 0px 0px;
    text-align: center;
}
.main_content_title div:last-child{
    margin: 15px 0px 0px 4px;
}


.main_content h2, .main_content_title h2{
    font-family: 'Montserrat';
    display: block;
    text-align: center;
    font-weight: 400;
    font-size: 26px;
}

.main_content div{
    padding: 25px 15px;
    min-height: 150px;
    background-color: #ffffff;
    margin: 15px 15px 0px 0px; 
}
.main_content div:last-child{
    margin: 15px 0px 0px 4px;
}

.main_content p{
    margin: 0px !important;
    padding: 0px 20px;
}

.main_content ul{
    margin: 10px 20px;
}

.seo_list li{
    display: block;
    color: #333333;
    background-color: #FFEB89;
    padding: 8px 10px;
}
.graphic_list li{
    background-color: #4ECDC4;
    display: block;
    color: #ffffff;
    padding: 8px 10px;
}
.mark_list li{
    background-color: #FF6B6B;
    display: block;
    color: #ffffff;
    padding: 8px 10px;
}



.zitate{
    font-family: 'Cormorant Garamond';
    color: #4ECDC4;
    font-weight: 500;
    font-style: italic;
    font-size: 1.8em;
    text-align: center;
}
.smh{
    padding: 10px 20px 20px;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Open Sans';
    color: #333333;
    opacity: 0.3;
    font-size: 0.7em !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
}


/* Section -------------------------------------*/
section, header, copyright{
    max-width: ;
    margin: 0 auto;
    border: 0px solid red;
    padding: 20px;
    
}
section.vcard section{
    padding: 0 0 0 0;
}

section{
    padding: 30px 20px 0;
}
section img{
    width: 100%;
}

.titlearea{
    background-color: #f1f1f1; 
    padding: 10px 20px;
    background: linear-gradient(60deg, #4ECDC4, #4ECDC4, #4ECDC4);
    background-size: 600% 600%;
    color: #ffffff;

    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    -o-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite;
}

/* Article -------------------------------------*/
article{
    max-width: 1100px;
    margin: 0 auto;

}
.div_box_article{
    max-width: 61%;
    max-width: 1147px;
    min-width: 1147px;
   
}
.div_box_article a{
    margin: 0px 15px 0px 5px;
    text-decoration: none;
    font-size: 0.9em;
    color: #333333;
}
.div_box_article a:first-child{
    font-weight: 600;
}

/* Referenzen ----------------------------------*/
.ref{
    background-color: #f1f1f1;
    min-height: 500px;
}
/* Newsletter -------------------------------------*/
.mc-field-group{
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;   
}
.mc-field-group label{
    display: none;
}

.mc-field-group .email{
    border: 2px solid #ffffff;
    float: left;
    width: 53%;
    height: 50px;
    padding: 0 20px;
    font-size: 14px;
}
.button{
    border: 2px solid #ffffff;
    float: left;
    color: #ffffff;
    background: none;
    font-weight: 600;
    width: 32%;
    height: 54px;
    cursor: pointer;
}
.button:hover{
    background-color: #181818;
}

::-webkit-input-placeholder {
    color:  #afafaf;
    font-style: italic;
}
:-moz-placeholder {
    color:  #afafaf;
    font-style: italic;
}
::-moz-placeholder {
    color: #afafaf;
    font-style: italic;
}
:-ms-input-placeholder {
    color: #afafaf;
    font-style: italic;
}


/* Footer -------------------------------------*/

footer{
    max-width: ;
    margin: 0 auto;
    padding: 0px;
}

footer a, .sm_l {
    padding: 2px 5px;
    display: inline;
    text-decoration: none;
    font-family: 'Open Sans';
    color: #333333;
    opacity: 0.3;
    font-size: 0.7em !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
}
footer a:hover, .sm_l:hover{
    opacity: 1;
}


        .slicknav_btn { 
    position: relative; 
    display: block; 
    vertical-align: middle; 
    float: right; 
    padding: 1px 10px; 
    line-height: 1.125em; 
    cursor: pointer; 
}

.slicknav_menu  .slicknav_menutxt { 
    display: block; 
    line-height: 1.188em; 
    float: left; 
}


.slicknav_menu .slicknav_icon { 
    float: left; 
    margin: 0.188em 0 0 0.438em; 
}

.slicknav_menu .slicknav_no-text { margin: 0 }
.slicknav_menu .slicknav_icon-bar { 
    display: block; 
    width: 1.125em; 
    height: 0.125em; 
    -webkit-border-radius: 1px; 
    -moz-border-radius: 1px; 
    border-radius: 1px; 
}

.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em }
.slicknav_nav { clear: both }
.slicknav_nav ul { display: block; text-align: center; padding-bottom: 60px; }
.slicknav_nav li { display: block; text-align: center; max-width: 500px; margin: 0 auto; padding: 1px 0;}
.slicknav_nav li:last-child { margin-bottom: 30px;}


.slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; }
.slicknav_nav .slicknav_item { display: block; cursor: pointer; }
.slicknav_nav a { display: block; font-size: 38px; font-weight: 600; line-height: 50px;}
.slicknav_nav .slicknav_item a { display: inline;}
.slicknav_menu:before,
.slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both }

/* IE6/7 support */
.slicknav_menu { *zoom: 1 }


/* Button */
.slicknav_btn {
	margin: 5px 5px 6px;	
	text-decoration:none;	

}

/* Button Text */
.slicknav_menu  .slicknav_menutxt {	
	color: #777777;
    font-weight: 700;
    margin-top: 3px;
    margin-right: 5px;
}

/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
    background-color: #777777;
    font-size: 160%;
}

.slicknav_menu {
	padding: 0px;
}

.slicknav_nav {
	color:#fff;
	margin:0;	
	padding:0;
	font-size:0.875em;
}

.slicknav_nav, .slicknav_nav ul {
	list-style: none;
	overflow:hidden;
}

.slicknav_nav ul {
	padding:0;
	margin:0 0 0 20px;
}

.slicknav_nav .slicknav_item {
	padding:5px 10px;
	margin:2px 5px;
}

.slicknav_nav a{
	padding: 8px 10px;
	margin:2px 5px;
	text-decoration:none;
	color:#777777;
}

.slicknav_nav .slicknav_item a {
	padding:0;
	margin:0;
}

.slicknav_nav .slicknav_item:hover {
	background: none;
	color:#222222;	
}

.slicknav_nav a:hover{
	background: none;
	color:#222;
}

.slicknav_nav .slicknav_txtnode {
    margin-left:15px;   
}




/* small Desctop
-------------------------------------------------------------------------------------------- */
/* --- Tablet & small Desctop --- */
@media screen and (max-width: 1500px) {  

    
}


/* Tablet & small Desctop
-------------------------------------------------------------------------------------------- */
/* --- Tablet & small Desctop --- */
@media screen and (max-width: 1024px) {  

}



/* Tablet
-------------------------------------------------------------------------------------------- */
/* --- Tablet --- */
@media screen and (max-width: 768px) {  

h5{
    margin-bottom: 15px;
}
.intro span{
    display: none;
}    
.floatleft{
    float: none;
    width: 100%;
}
.floatright{
    float: none;
    width: 100%;
}    
        
}



/* Smartphone
-------------------------------------------------------------------------------------------- */
/* --- Smartphone --- */
@media screen and (max-width: 480px) {  

section, header, footer, copyright, .titlearea{
    padding-left: 10px;
    padding-right: 10px;
}
  
}