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

body {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size:16px;  
  color:#333333;     
}

p {
    line-height:1.55em;
}

.buttons-group .btn {
    margin:5px;
}

.red {
    color:#df0033;
}

.btn {
    text-transform:uppercase;
    display:inline-block;
    font-size:18px;
    font-weight:600;
    padding:15px 25px;
    border-radius:0;
    transition: all 250ms ease-out;
}

.btn-red {
    background:#df0033;
    color:#fff;
    font-weight:900;
    border:2px solid #df0033;
}

.btn-red:hover {
    color:#fff;
    background:#9A0127;
    border-color:#9A0127;
    transition: all 250ms ease-out;
}

.btn-white {
    background:#fff;
    color:#df0033;
    font-weight:900;
    border:2px solid #fff;
}

.btn-white:hover {
    color:#df0033;    
    background:rgba(255,255,255,.8);
    border-color:rgba(255,255,255,.8);
    transition: all 250ms ease-out;
}

.btn-shadow {
    border:2px solid #5D687D;
    color:#5D687D;
}

.btn-shadow:hover {
    box-shadow:0 3px 8px rgba(18, 23, 28, 0.25);
    transition: all 250ms ease-out;
}

.btn-shadow-white {
    border:2px solid #fff;
    color:#fff;
}

.btn-shadow-white:hover {
    color:#fff;
    box-shadow:0 3px 8px rgba(18, 23, 28, 0.25);
    transition: all 250ms ease-out;
}

.container-max {
    width:2560px;
    max-width:100%;
    margin:0 auto;
    box-shadow:0 3px 8px rgba(18, 23, 28, 0.25);    
}

.container {
    width:1460px;
    max-width:100%;
    margin:0 auto;
}

#main-screen {
    min-height:100vh;
    display: flex;
    align-items: center;    
    background:url('/img/germanica/main-image.jpg') no-repeat center center;
    background-size:cover;
    color:#fff;
    font-size:20px;
    font-weight:300;
    position:relative;    
}

#main-screen:after {
    content:'';
    position:absolute;
    transform:translate(-50%, -50%);
    left:50%;
    bottom:-185px;
    width:50px;
    height:180px;    
    background:url('/img/pomaturitni/arrow-down.svg') no-repeat center top;
    background-size:auto 100%;    
}

#main-screen .container {
    position:relative;
    z-index:10;        
}

#main-screen .inner {        
    display:block;
    padding-left:40%;
}

#main-screen .logo img {       
    width:180px;
    margin-right:40px;    
}

#main-screen .logo img.gc {
    position:relative;
    top:-6px;
}

#main-screen h1 {
    font-weight:900;
    text-transform:uppercase;
    font-size:150px;    
    line-height:1;
    margin:60px 0;        
    display:inline-block;
}

#main-screen .headline {
    width:550px;        
    max-width:100%;    
                
}

#introduction {
    padding:130px 0 80px 0;
}


#introduction h2 {
    color:#df0033;
    font-weight:900;
    font-size:60px;
    text-transform:uppercase;
    line-height:1;        
}

#introduction .bigger {
    font-size:1.4em;    
}

#introduction p {
    margin:1.2em 0;
}

#introduction hr {
    margin:40px 0 40px 0;
}

#introduction .intro-image {
    position:relative;
    display:inline-block;
    margin-top:20px;
}

#introduction .intro-image img {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    position:relative;
    width:500px;
    z-index:10;
}

#introduction .intro-image:before {
    content:'';
    background:rgba(238,238,238,.5);
    border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;
    width:calc(100% + 20px);
    height:calc(100% + 20px);
    position:absolute;
    left:-10px;
    top:20px; 
    z-index:0;
    transform:rotate(10deg);
}


#advantages {
    min-height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:#df0033;
    color:#fff;    
    font-weight:300;
    position:relative;    
    padding:80px 0;
}

#advantages:before {
    content:'';
    width:50%;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    z-index:0;
    background:url('/img/pomaturitni/vyhody-bg.jpg') no-repeat center center;
    background-size:cover;
}

#advantages .container {
    position:relative;
    z-index:10;    
}

#advantages .inner {
    width:50%;
    padding-right:30px;
}

#advantages h2 {
    color:#fff;
    font-weight:900;
    font-size:60px;
    text-transform:uppercase;
}

#advantages ul {
    margin:60px 0;
}

#advantages li {
    list-style:none;
    position:relative;
    margin:13px 0;
}

#advantages li:before {
    content:'';
    position:absolute;
    left:-30px;
    top:0;
    width:22px;
    height:22px;    
    background:url('/img/pomaturitni/ico-check.svg')no-repeat center center;
    background-size:22px auto;
}



#step-by-step {
    padding:80px 0;
}

#step-by-step .row.row-flex {  
  display: flex;
  display: -webkit-flex;      
  display: -ms-flex;
  margin:30px -15px;         
  /*
  flex-wrap: wrap;    
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  */                                  
}


.row.row-flex>[class*=col-] {
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  background-clip: content-box;     
}

#step-by-step .box {    
  height:100%;  
  flex-grow: 1;  
  width: 100%;  
  padding:50px 40px;      
  background:#df0033;
  color:#fff;    
}


#step-by-step .box h2 {
    font-size:60px;
    font-weight:900;
    text-transform:uppercase;
}

#step-by-step .box.covered {
    background:url('/img/germanica/01.jpg') no-repeat center center;
    background-size:cover;
}

#step-by-step .square {    
  height:100%;  
  flex-grow: 1;  
  width: 100%;  
  padding:40px;      
  background:#eee;   
  display: flex;
  align-items: center;
  justify-content: center;  
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out; 
}

#step-by-step .square:hover {
  box-shadow:0 5px 10px rgba(0,0,0,.2);
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  cursor:default;
}

#step-by-step .square.im01 {
    background:url('/img/germanica/02.jpg') no-repeat center center;
    background-size:cover;
}

#step-by-step .square.im02 {
    background:url('/img/germanica/03.jpg') no-repeat center center;
    background-size:cover;
}

#step-by-step .square.im03 {
    background:url('/img/germanica/04.jpg') no-repeat center center;
    background-size:cover;
}

#step-by-step .square.im04 {
    background:url('/img/germanica/05.jpg') no-repeat center center;
    background-size:cover;
}



#letter {
    min-height:100vh;
    background:#E5E6E8;
    font-family: 'Homemade Apple', cursive;         
}

#letter .container {
    background:url('/img/germanica/girl.jpg') no-repeat right top;
    background-size:auto;
}

#letter h2 {
    font-size:3.8em;
    transform:rotate(-3deg);
    color:#df0033;
    margin:180px 0 60px 0;
}

#letter p {
    font-size:1.2em;
    margin:2em 0;
}

#letter .signature {
    font-size:2em;
    transform:rotate(-5deg);
    margin:20px 0 180px 0;
}

#topics {
    padding:90px 0;
    background:#df0033;
    min-height:100vh;
}

#topics h2 {
    font-size:60px;
}

#topics h2, #topics h3 {
    color:#fff;
    font-weight:800;
}

#topics p {
    color:#fff;
}



#info {
    min-height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:#535E72 url('/img/pomaturitni/o-prijeti-bg.jpg') no-repeat center top;
    background-size:cover;
    color:#fff;    
    font-weight:300;
    position:relative;   
    padding:80px 0; 
}

#info:before {
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:0;
    background:rgba(83,94,114,.9);    
}

#info .container {
    position:relative;
    z-index:10;    
}

#info .col-md-6 {
    padding:0 35px;
}

#info .col-md-6:first-of-type {
    text-align:right;
}

#info h2 {
    font-size:4vw;
    text-transform:uppercase;
    font-weight:900;
}

#info h3 {
    font-size:30px;
    text-transform:uppercase;
    font-weight:900;
}

#info .basic-link {
    color:#fff;
    font-weight:600;
    text-decoration:underline;
}

#info .basic-link:hover {
    color:#fff;    
    text-decoration:none;
}

#info .headline {
    margin:35px 0;
    width:450px;
    max-width:100%;
    display:inline-block;
    font-size:26px;
}

#info ul {
    margin:15px 0 60px 0;
}

#info li {
    list-style:none;
    position:relative;
    margin:13px 0;
}

#info li:before {
    content:'';
    position:absolute;
    left:-30px;
    top:0;
    width:22px;
    height:22px;    
    background:url('/img/pomaturitni/ico-check.svg')no-repeat center center;
    background-size:22px auto;
}

#info hr {
    margin:70px 0;
}



#copyright {
    padding:30px;
    text-align:center;
}



#cbar {
  width:auto;
  max-width:96%;
  max-height:96%;
  padding:30px 20px 15px 20px;
  border-radius:15px;
  position:fixed;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  text-align:center;
  background:rgba(255,255,255,.99);
  z-index:9999;
  box-shadow: 0 50px 100px -20px rgba(50,50,93,0.50), 0 30px 60px -30px rgba(0,0,0,0.6);
  overflow:auto;
  text-align:left;
  border-top:15px solid #e00034;
}


#cbar .basic-c-setting p {
    text-align:center;
}


#cbar .cookies-setting-headline {
    font-weight:800;
    font-size:26px;
}


#cbar #cookies-setting {
    margin:0 auto;
    text-align:left;    
}

#cbar label {
    font-weight:400;
}

#cbar .cookies-setting-headline {
      font-weight:600;
      font-size:22px;
      margin:15px 0 10px 0;
}

#cbar input {
      float:left;
      margin:3px 10px 0 0;
}

#cbar .c-headline {
      font-weight:600;
      font-size:16px;
      display:inline-block;
      margin:0;
}

#cbar .btn {
  display:inline-block;
  background:#e00034 url('/img/web/right-chevron.png') no-repeat right 15px center;
  background-size:13px 13px;
  border-radius:0;  
  padding:10px 35px 10px 20px;
  font-size:16px;
  border:0;
  text-decoration:none !important;
  -webkit-transition: all 250ms ease-out;
  -moz-transition: all 250ms ease-out;
  -o-transition: all 250ms ease-out;
  transition: all 250ms ease-out;
  color:#fff !important;
}

#cbar .btn:hover {
  background-color:#9A0127;
  -webkit-transition: all 250ms ease-out;
  -moz-transition: all 250ms ease-out;
  -o-transition: all 250ms ease-out;
  transition: all 250ms ease-out;
}

@media (max-width:991px) {

     #cbar {
    width:94%;
    }

    #main-screen h1 {
        font-size:13vw;
    }
    
    #main-screen .headline {
        font-size:24px;
    }
    
    #introduction .info {
        margin-left:0;
    }
    
    #introduction .row {
        display:flex;
         flex-wrap: wrap;    
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
    }
    
    #introduction .col-sm-6 {
        padding-bottom:60px;
    }
    
    #introduction .col-sm-6:after {     
        position:absolute;
        width:calc(100% - 40px);
        height:1px;
        background:#ccc;
        left:20px;
        bottom:30px;
        content:'';
    }
    
    #introduction .col-md-3:first-of-type .image:before {
        display:none;
    }
    
    
    #info h2 {
        font-size:60px;
    }
}


@media (max-width:768px) {

    img {
        max-width:100%;
    }
    
    #letter .container {
        background-image:none;
        text-align:center;
    }
    
    #letter h2 {
        margin:100px 0 20px 0;
        font-size:3em;
    }
    
    #letter .signature {
        margin:40px 0 0 0;
    }

    .container {
        padding:0 20px;
    }

    #main-screen {
        display:block;
        flex:none;
        background-color:#97CCD9;
        background-position:left bottom;
        background-size:auto 50%;
    }

    #main-screen .logo img {
        width:100px;
        margin:0 10px;
    }
    
    #main-screen .inner {
        padding:40px 0 0 0;
        text-align:center;
    }
    
    #main-screen h1 {
        font-size:15vw;
        margin:26px 0;
    }
    
    #main-screen .headline {
        font-size:16px;
    }
    
    #introduction {
        text-align:center;
    }
    
    #introduction h2,
    #introduction h2 strong {
        font-size:10vw;
    }
    
    #advantages .inner {
        width:80% !important;
        padding-right:0;
    }
    
    #advantages h2 {
        font-size:13vw;
    }
    
    #advantages ul {
        background:#df0034;
        margin:0 0 30px 10px;
        padding:30px;
    }
    
    #step-by-step .row-flex {
         flex-wrap: wrap;    
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;    
    }
    
    #step-by-step .box h2 {
        font-size:10vw;
    }
    
    
    #step-by-step .main {
        position:relative;
    }
    
    #step-by-step .main:before {
        content:'';
        position:absolute;
        transform:translate(-50%, -50%);
        left:80%;
        bottom:-185px;
        width:50px;
        height:180px;    
        background:url('/img/pomaturitni/arrow-down.svg') no-repeat center top;
        background-size:auto 100%;
        z-index:999; 
    }
    
    #step-by-step .col-md-3 {
        width:100%;
        min-height:350px;        
    }
    
    #step-by-step .col-md-3.sector {
        border-top:30px solid #fff;
    }
    
    #step-by-step .im01:before {
        content:'';
        position:absolute;
        width:60px;
        height:60px;
        border-radius:50%;
        background:#fff;
        top:270px;
        right:-5px;
        z-index:666;
    }
    
    #step-by-step .im02:before {
        content:'';
        position:absolute;
        width:60px;
        height:60px;
        border-radius:50%;
        background:#fff;
        top:210px;
        left:5px;
        z-index:666;
    }
    
    #step-by-step .im03:before {
        content:'';
        position:absolute;
        width:60px;
        height:60px;
        border-radius:50%;
        background:#fff;
        top:110px;
        right:5px;
        z-index:666;
    }
    
    #step-by-step .im04:before {
        content:'';
        position:absolute;
        width:60px;
        height:60px;
        border-radius:50%;
        background:#fff;
        top:300px;
        left:5px;
        z-index:666;
    }
    
    
    #step-by-step .box.covered {        
        width:100%;
        position:relative;
        top:-30px;
        right:-30px;
    }
    
    #info .col-md-6:first-of-type {
        text-align:left;
    }
    
    #info h2 {
        font-size:13vw;
    }
    
    
    #info .headline {
        font-size:20px;
    }
    
}