/* CSS for the website in general */

body, html {
    height: 100%;
    font-family: 'Signika', sans-serif;
    background-color: #fdfdfd;
}

h1 {
  font-size: 65px;
  font-family: 'Slabo 27px', serif !important;
  text-align: center;
}

p {
  font-size: 15px;
  font-family:'Signika', sans-serif;
}

.container-fluid {
    width: 100%;
}

#translate {
    display:none;
    }

/* CSS for the home section*/

#arrow {
    font-size: 36px;
    font-weight:bold;
    background-color: #ffffff;
    border-radius: 50%;
    color: #261583;
    cursor: pointer;
    height: 39px;
    line-height: 41px;
    margin-left: 5vw;
    position: relative;
    text-align: center;
    top: 6vh;
    width: 38px;
    }

#font_home {
     color: #ffffff;
     font-size: 90px;
     font-family: 'Signika', sans-serif;
     text-align: center;
    }

#button_home {
    background-color: transparent;
    border: 3px solid #ffffff;
    border-radius: 5px;
    color: #ffffff;
    font-size: 18px;
    padding: 20px 42px;
    }
    
#logo_weidmann {
    width: 80%;
    display:block;
    margin: auto;
    }
    
#change_lang {
    color: #999999;
    float:right;
    font-size: 14px;
    }
    
#change_lang a {
     color: #999999;
    }
    
#change_lang a:visited {
     color: #ffffff;
    }
    
#logo_linkedin {
    margin-right: 10px;
    }

/*CSS for a little part of the navigation*/

#change_lang1 {
    float: right;
    color: #cccccc;
    font-size: 12px;
    border-left: 1px solid #cccccc;
    line-height: 35px;
    padding: 0 1%;
    }
    
#change_lang1 a {
     color: #cccccc;
     text-transform: none;
     margin-right:0;
    }
    
#change_lang1 a:visited { 
     color: #000000;
    }
    
#linkedin_logo1 {
    display: inline-block;
    }

#lang_change1{
    display: inline-block;
    margin-left: 30px;
    }
    
nav ul li a:hover {
    text-decoration:none;    
}

nav ul li a:active {
    color:#C64743;
    }
    
nav ul li a:focus {
    color:#C64743;
    text-decoration:none;  
    }
    
/* CSS for the parallax */
    
.over_parallax {
     height: 300px;
     background-color: #ffffff;
     font-size: 25px;
    }

.parallax {
   background-image: url('../themes/weidmann/assets/images/bg-world.svg');
   background-color: #261583;
   margin: 0;
   height: 100%; 
   /* Create the parallax scrolling effect */
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

/* CSS for the about section */

#about {
    margin-bottom: 15%;
}

#profil_bild {
    border-radius: 90%;
    width: 40%;
    display: block;
    margin: auto;
}

#about_content {
    width:75%;
    }
    
#about_title {
    color: #C64743;
    font-family: 'Slabo 27px', serif;
    font-size: 68px; 
    }

#about_contact {
    background-color: #261583;
    border-radius: 5px;
    border: 3px solid transparent;
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
    margin-right: 10px;
    padding: 10px 30px;
    }

#about_service {
    background-color: #ffffff;
    border: 3px solid #C64743;
    border-radius: 5px;
    color: #C64743;
    font-size: 16px;
    margin-right: 10px;
    padding: 10px 30px;
    }

/* CSS for the service section */

.lang {
    display: block;
    margin: auto;
    width: 30%;
    }

.lang p {
    text-align: center;
   }
 
.firstlang {
    color: #261583;
    }

.secondlevel {
     color:#cccccc;
    }
    
/*CSS for service slider */


.slide-point {
    margin: 5px;
    color: #000;
    text-align: center;
    transition: background-color 2s;
    -webkit-transition: background-color 2s;
    
    }

.slide-point.slick-slide {
    height: 280px;
    width:300px;
    }

.slide-point.slick-slide.slick-current.slick-active.slick-center {
    background-color: #261583;
    color: #fff;
    text-align: center;
    border-radius: 5%;
    }
    
.slide-point img {
    opacity:.7;
	height:25px;
}

.redcheck {
    bottom: 0;
    position: absolute;
    margin-bottom: 2vh;
    margin-left:6vw;
    }

.service-slider .slick-prev:before {
     content: '\f137';
     color: #261583;
     font-size: 45px;
     opacity: 1;
    }

.service-slider .slick-next:before {
     content: '\f138';
     color: #261583;
     font-size: 45px;
     opacity: 1;
    }

.row_carousel {
	width:100%;
	margin:0 auto;
	display:block;
	position:relative;
	background-color:#ffffff;
}

.carouselwrap {
	position:relative;
	width:100%;
	max-width:960px;
	overflow:hidden;
	margin:30px auto 5% auto;
}

.carousel {
	position:relative;
	overflow:hidden;
	white-space:nowrap;
    font-size: 0;
}

.carousel .item {
	display:inline-block;
	text-align:center;
	margin:0;
	padding:0;
	overflow:hidden;
	vertical-align:top;
	width:300px;
	height: 280px; 
	
}

.carousel .item img {
	opacity:.6;
	max-height:25px;
	margin-top:30%;
	
}

.carousel .item p {
    height: 40px;
    margin-top: 25%;
    width: 300px;
    }

.ic_active {
	opacity:1;
	background-color: #261583;
    color:#ffffff;
    border-radius: 10px;
}
  
.carousel .item .mainimg {
	opacity:1;
	
}

.back_btn {
	background-color: #261583;
    border-radius: 65%;
    color: #ffffff;
    cursor: pointer;
    font-size: 25px;
    height: 40px;
    left: 10px;
    padding-top: 2px;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 40px;
    z-index:50000000;
}

.next_btn {
	right:10px;
	z-index:50000000;
	cursor:pointer;
	background-color: #261583;
	color:#ffffff;
	border-radius:65%;
	font-size:25px;
	height:40px;
	padding-top: 2px;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 40px;
}

.no_select {
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
   
/* CSS for time line */


:before,
:after {
  margin: 0;
  padding: 0;
  
}

.timeline ul {
  background: #ffffff;
  padding: 50px 0;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #261583;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  background: transparent;
  font: 15px;
}

.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  display:none;
}

.timeline ul li:nth-child(odd) .dates {
  left:-450px;
  text-align:center;
}

.timeline ul li:nth-child(even) .dates {
  left:-450px;
  text-align:center;
}

.timeline ul li:nth-child(even) div::before {
  display:none;
}

time {
  display: block;
  font-size: 16px;
}


/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: #C64743;
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}


/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 900px) {
  .timeline ul li div {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div {
    left: -289px;
    /*250+45-6*/
  }
}

@media screen and (max-width: 600px) {
  .timeline ul li {
    margin-left: 20px;
  }
  .timeline ul li div {
    width: calc(100vw - 91px);
  }
  .timeline ul li:nth-child(even) div {
    left: 45px;
  }
  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F45B69 transparent transparent;
  }
  .timeline ul li:nth-child(odd) .dates {
  left:45px;
  text-align: left;
  }
  .timeline ul li:nth-child(even) .dates {
  left:45px;
  text-align: left;
  }
  
  #button_div {
    display: block;
    margin: 0 auto;
    width: 65%;
    }
    
  #arrow {
      margin-left:38vw;
      }
      
  #about_service {
      margin-top: 10px; 
      }
      
  .modals {
      margin-bottom:50px;
      }
      
   #font_home {
       font-size:65px;
       }
       
    .comp_logo {
    display: block;
    margin: auto;
    width: 250px;
    }
}


/* CSS for modals */

.modals {
    margin-left:6vw;
    margin-right:6vw; 
    }

.modals a {
    color: #C64743;
    float: right;
    }

.ref_img img{
    width:100%;
    
    }    
    
/* CSS for the text slider */

blockquote {
    border:none !important;
    font-family:'Signika', sans-serif;
    max-width: 800px; 
    margin: 0 auto; 
    padding-left: 0.4em; 
    position:relative;
    
}

blockquote:before { 
    content: open-quote;
    font-size:185px;
    color:#c64743;
    position: absolute; 
    top: -5vh;
    left: 10px; 
   
} 
blockquote:after { 
    content: close-quote;
    font-size:185px;
    color:#c64743;
    position: absolute; 
    bottom: -22vh;
    right: 10px; 
}

.slide-content-head {
    margin-left: 6vw;
    }

.span_place {
    color: #c64743;
    font-size: 15px;
    font-family: 'Signika', sans-serif;
    }
    
#content-headline {
    text-indent: 4.1em;
    }   
    
#content-motivation {
    text-indent: 5em;
    }

@media screen and (max-width: 600px) {
   .slide-content-head {
    margin-left: 16vw;
    } 
    
    blockquote:after {
        right:-30px;
        }
        
        #content-headline {
    text-indent: 38%;
        }
}    

/* CSS for company logos */

#we_h1 {
    font-size: 40px;
    }

.company {
    display: block;
    margin:auto;
    }

.comp_logo {
    width: 250px;
    }
    
#comp_logo {
    width: 120px;
    display:block;
    margin:auto;
    }

#comp_logo2 {
    width: 250px;
    display:block;
    margin:auto;
    }

/* CSS for contact */
    
.form-group{
    border: 2px solid #261583;
    border-radius: 5px;
    }
    
#sendbtn {
    background-color: #261583;
    border: 3px solid transparent;
    border-radius: 5px;
    color: #ffffff;
    font-size: 16px;
    margin-right: 10px;
    padding: 8px 25px;
    float:right;
    }    
    
#sendbtn:hover {
    background-color: #ffffff;
    border: 3px solid #C64743;
    border-radius: 5px;
    color: #C64743;
    font-size: 16px;
    margin-right: 10px;
    padding: 8px 25px;
    }

/* CSS for footer */

footer {
    color: #ffffff; 
    background-color: #261583;
    text-align: center;
    height: 40px; 
    }
    
.footer_a, .footer_a:visited {
    color: #ffffff;
    margin: 0 25px;
    }

.footer_container {
    padding: 10px 0;
    }