* {
box-sizing: border-box;
font-family: roboto;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th, td {
text-align: left;
vertical-align: top;
}
h1, h2, h3, h4, h5, h6, th, td, caption { 
font-weight: normal;
}
img { 
border: 0; 
height: auto;
} body {
margin: 0;
padding: 0;
background-color: #F8F8F8;
max-width: 2048px;
margin: auto;
-webkit-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.75);
box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.75);
}
img,
iframe {
max-width: 100%;
}
iframe {
display: block;
margin: 0 auto;
}
.header {
background: url(//international.ags-erfurt.de/wp-content/themes/erasmusblog/img/background.jpg) no-repeat;
background-size: cover;
background-position-x: center;
background-position-y: center;
height: 400px;
color: white;
text-align: center;
}
.navheadline {
display: block;
text-align: center;
position: absolute;
margin: 120px auto 0px;
padding: 0px 10px 0px 10px;
top: 0;
left: 0;
right: 0;
font-size: 35pt;
color: white;
font-weight: 100;
text-transform: uppercase;
text-shadow: 2px 2px 12px #000000;
}
.wrapper {
margin: 0 auto;
max-width: 1020px;
}
.wrapper h1 {
margin-top: 30px;
}
.full-nav {
width: 100%;
background: rgba(0, 0, 0, 0.8);
}
#main-nav a {
color: #f6f7f8;
height: 45px;
font-weight: 500;
font-size: 10pt;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.4s;
}
#main-nav ul li a:hover {
background: rgba(0, 0, 0, 1.0);
}
#main-nav {
display: block;
}
#menu-icon {
display: none;
padding-left: 15px;
}
#main-nav ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
#main-nav li {
width: 100%;
text-align: center;
position: relative;
z-index: 100;
}
.submenu {
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
}
.submenu li {
display: none;
position: absolute;
top: 0px;
}
.submenu a {
background: rgba(0, 0, 0, 1.0);
}
.submenu a:hover {
background: rgba(0, 0, 0, 1.0) !important;
}
.submenu-2 li {
display: none;
}
.submenu-2 {
display: flex;
flex-direction: column;
position: absolute;
top: 0px;
left: 100%;
width: 120px;
}
.fas {
padding-left: 10px;
}
@media screen and (min-width: 781px) {
#main-nav {
display: block;
}
#main-nav li:hover .submenu > li {
display: block;
top: 0px;
}
.submenu li:hover .submenu-2 li {
display: block;
}
}
@media screen and (max-width: 780px) {
.header {
height: 400px;
}
#main-nav {
display: none;
background: #0c0c0c;
}
#main-nav ul {
flex-direction: column;
}
#main-nav a {
background: #0c0c0c;
height: 48px;
text-align: left;
display: block;
line-height: 3.5em;
padding-left: 25px;
}
.submenu,
.submenu-2 {
position: static;
width: 100%;
}
.submenu a {
margin: 0 auto;
display: flex;
line-height: 3.5em;
padding-left: 50px !important;
}
.display-block > li {
display: block !important;
}
.submenu li {
display: none;
}
#menu-icon {
display: block;
height: 48px;
background: #0c0c0c;
color: white;
cursor: pointer;
text-align: left;
font-size: 24px;
line-height: 2em;
font-family: roboto, sans-serif;
}
.navheadline {
margin-top: 120px;
font-size: 22pt;
}
}
@media(max-width: 530px) {
.header {
height: 300px;
}
.navheadline {
margin-top: 100px;
font-size: 14pt;
padding: 0px 10px 0px 10px;
}
}
#features {
display: block;
text-align: center;
margin-bottom: 40px;
}
.cards {
display: grid;
grid-template-columns: repeat(3, 320px);
grid-gap: 30px;
}
.cards a, 
.cards a:link,
.cards a:visited,
.cards a:hover,
.cards a:active,
.last-project a, 
.last-project a:link,
.last-project a:visited,
.last-project a:hover,
.last-project a:active {
text-decoration: none;
color: #232323;
cursor: pointer;
}
.feature-link {
text-decoration: none;
}
.effect:hover {
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.5);
}
.feature-card {
background: white;
padding: 30px 20px 10px 20px;
box-shadow: 0 12px 10px -10px rgba(0, 0, 0, 0.5);
color: #232323;
height: 200px;
background-size: cover;
background-position-x: center;
background-position-y: center;
}
.feature-card img {
width: 50%;
height: 50%;
}
.feature-card .card-headline-background {
background-color: rgba(0, 0, 0, 0.8);
width: 0 auto;
}
.feature-card .card-headline-background h3 {
margin: 130px 0 0;
padding: 5px;
color: #ffffff;
text-align: center;
}
.last-project-card .card-headline-background { 
background-color: rgba(0, 0, 0, 0.8);
width: fit-content;
padding-left: 40px;
padding-right: 40px;
margin: 0 auto;
}
.last-project-card .card-headline-background h3 {
margin: 80px 0 0;
padding: 5px;
color: #ffffff;
}
.last-project {
grid-template-columns: repeat(1, 1020px);
grid-gap: 30px;    
}
.last-project-card {
background: white;
padding: 30px 20px 10px 20px;
box-shadow: 0 12px 10px -10px rgba(0, 0, 0, 0.5);
color: #232323;
height: 260px;  
background-position-y: center;
background-position-x: center;
background-size: cover;  
} #blog {
margin-top: 20px;
margin-bottom: 20px;
}
#last-articles {
background: #F8F8F8;
padding: 0 20px 0 20px;
}
#last-articles h1 {
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 20px 0 20px 0;
}
.blog-table {
display: grid;
grid-template-columns: repeat(2, minmax(300px, 480px));
grid-gap: 20px;
}
.articles {
display: grid;
grid-template-columns: repeat(1, 100%);
grid-gap: 30px;
margin: 0 10px 0 10px;
}
.article {
background: white;
box-sizing: border-box;
margin-top: 20px;
}
.article:hover {
cursor: pointer;
}
.article::after {
transition: all 250ms ease;
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 3px;
background-color: #0077c9;
}
.article:hover::after {
width: 100%;
}
.articlelink {
display: flex;
width: 100%;	
}
.image img {
background: url(//international.ags-erfurt.de/wp-content/themes/erasmusblog/img/KeinBildVorhandenThumbnail.jpg) no-repeat;
background-size: cover;
float: left;
width: 215px;
height: 160px;
max-width: none;
}
.article a:first {
width: 100%;
color: #000000;
cursor: pointer;
}
.article a {
color: #000000;
cursor: pointer;
text-decoration: none;
}
.text {
padding: 10px;
width: 100%;
min-width: 0;    
display: inline-block;
box-sizing: border-box;
border-top: 2px solid #232323; 
border-bottom: 2px solid #232323; 
border-right: 2px solid #232323; 
}
.article-headline {
margin-bottom: 0;
font-size: 14pt;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.article-headline:hover {
color: #0077c9;
transition: all .3s;   
}
.article-infos {
margin-top: 1px;
font-size: 10pt;
line-height: 1em;
color: #000000; 
}
.article-text {
font-size: 11pt;
margin: 0;
}
.article-text:hover {
cursor: pointer;
}
@media screen and (max-width: 1000px) {
.article-text {
font-size: 1.38vw;   
}
}
@media screen and (max-width: 830px) {
.blog-table {
grid-template-columns: repeat(1, 100%);
}
.article-headline {
font-size: 13pt;
text-overflow: unset;
white-space: unset;
overflow: unset;
}
.article-text {
font-size: 11pt;   
}
}
@media screen and (max-width: 690px) { 
.image img {
width: 220px;
height: 150px;
}
}
@media screen and (max-width: 590px) { 
.article-headline {
font-size: 12pt;
}
.article-infos {
font-size: 9pt;
}
.article-text {
font-size: 10pt;   
}
.image img {
width: 200px;
height: 150px;
}
}
@media screen and (max-width: 460px) {
#last-articles {
padding: 0 10% 0 10%;
}
.article {
flex-direction: column;
}
.articlelink {
display: grid;    		
}  
.image img {
width: 100%;
height: auto;
max-height: 220px;
}
.text {
padding-left: 10px;
padding-right: 10px;
height: 100%;
border-top: 0;
border-left: 2px solid #232323;
}
.article-headline {
font-size: 12pt;
}
.article-infos {
font-size: 10pt;
}
.article-text { 
font-size: 11pt;
}
.youtubevideo {
position: relative; 
padding-bottom: 56.25%; height: 0; 
overflow: hidden; 
width: 100%;
height: auto;
}
.youtubevideo iframe {
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;	
}
}
#footer {
background: #232323;
box-sizing: border-box;
}
#footer-div {
color: #F8F8F8;
display: flex;
flex-direction: column;
justify-content: center;
padding: 15px 10px 15px 10px;
font-weight: 100;
font-size: 10pt;
}
#footer-image {
margin: 10px auto;
}
#footer-infos {
display: flex;
justify-content: center;
padding-bottom: 5px;
}
#menu-footermenue {
margin: 0;
padding: 0;
text-align: center;
}
#menu-footermenue li {
display: inline;
}
#menu-footermenue li a {
color: #F8F8F8;
text-decoration: none;
padding-left: 20px;
}
#menu-footermenue li a:hover {
text-decoration: underline;
}
#menu-footermenue li:first-child a {
padding-left: 0px;
}
#footer-copyright {
display: flex;
justify-content: center;
}
#footer-copyright p {
margin: 0;
text-align: center;
}
@media(max-width: 1050px) {
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px; }
.feature-card h3 {
margin: 10px 0 0;
font-size: 10pt;
}
.box-padding {
margin-left: 5px;
margin-right: 5px;
}
}
@media(max-width: 780px) {
.feature-card {
padding: 30px 10px 10px 10px;
}
}
@media(max-width: 530px) {
.cards {
grid-template-columns: repeat(1, 1fr);
}
} #main-article {
padding: 15px 15px 15px 15px;
background: white;
}
#main-article p, ul li {
word-break: break-word;
}
#main-article h1, h2, h3 {
word-break: break-word;
margin: 0;
}
#main-article h3 {
font-size: 17pt;
}
#main-article > *:first-child {
margin-top: 0;
}
#main-article > *:last-child {
margin-bottom: 0;
}
.link,
.link:visited {
color: #EA2027 !important;
text-decoration: none !important;
}
.link:hover {
color: #EA2027 !important;
text-decoration: underline !important;
} #article-navigation {
width:100%;
padding: 15px 15px 15px 15px;
text-align: center;
}
#article-navigation div a,
#article-navigation div a:link,
#article-navigation div a:visited,
#article-navigation div a:active {
text-decoration: none;
color: #232323;
cursor: pointer;
}
#article-navigation div a:hover {
text-decoration: underline;
color: #0077c9;
cursor: pointer;
}
#next-post{
float: left;
text-align: left;
}
#back-to-overview {
display: inline-block;
margin: 0 auto;
text-align: center;
}
#previous-post {
float: right;
text-align: right;
}
.button-article-navigation {
color: #0077c9;
padding: 5px;    
}
h3.article-headline-post{
font-size: 20px;
}
h3.exchange_land{
font-size: 25px;
margin-top: 50px;
color: #1d2224;
text-align: center;
}
.divider
{
position: relative;
margin-top: 5px; 
margin-bottom: 20px; 
height: 1px;
}
.div-transparent:before
{
content: "";
position: absolute;
top: 0;
left: 5%;
right: 5%;
width: 90%;
height: 1px;
background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);
}