* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
 @font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

 @font-face {
    font-family: "Roboto Light";
    src: url("fonts/Roboto-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

 html {
    scroll-behavior: smooth;
  }

body {
    background: #f6f6f6; 
    margin: 0;
    padding: 0;
    font-family: "Roboto Light",'Open Sans', sans-serif;
    font-size: 1.3rem;
    line-height: 1.2;
}

h1, h2, h3, h4 , h5{
    font-family: "Roboto";
    font-weight: 400;
    margin: 0;
    color:#3d0303;
}
h1 {
    font-size: 7rem;
    line-height: 0.85;
}
h2 {
    font-size: 3.6rem;
}
h3 {
    font-size: 2.4rem;
}

.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color:#082bf7;
}

.faqs li a,.faqs li a:focus{
    color:#000;
    text-decoration: none;
}

.faqs li a:hover {
    background: none;
    border: none;
    color:#082bf7;
}

.infolist li {
    padding: 6px;
}

.drivelogin{
    position:absolute;
    top:16px;
    right:16px;
    font-size: 1rem;
}

.drivelogin a,
.drivelogin a:visited{
    color: #000;text-decoration: none;font-weight:100; border:0;
}

.drivelogin a:hover,
.drivelogin a:focus {
    background: none;
    border: none;
    color:#082bf7;
}

.container_header{
    width:100%;
    position: fixed;
    top:0;
    left:0;
    background: #f6f6f6;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.47);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.47);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.47);
}

.container{
    min-height: 575px;
}

.dynamic{
    min-height: 100px;
    padding-top: 56px;
    padding-bottom: 56px;
}

.container1st{
    height:100VH;
}

.sloganleft{
    text-align: left;

    height:100vh;
    padding-top:240px;
    padding-left: 152px;
}



.sloganleft h2,.sloganleft h3,.sloganleft h4,.sloganleft p{
    color:#fff;
}

.greyleft{
   
    padding-right: 26px;
    background: #e4e3e3;
    min-height: 575px;
    text-align: right;
}

.dark{
    background: #1b1b1b;
    color:#e4dfdf;
    text-align: center;
}

.light{
    background: #fbfceb;
    color:#3f3f3f;
    text-align: center;
}

.white{
    background: #ffffff;
    color:#000000;
    text-align: center;
}

.darkred{
    background: #350606;
    color:#e4dfdf;
    text-align: center;
}

.lightred{
    background: #fccccc;
    color:#000000;
    text-align: center;
}

.whitebg{
    background: #ffffff;
    color:#000000;
    text-align: center;
}



.beige {
    background: #e9e9e9f1;
    color:#000000;
    text-align: center;
}

.pink {
    background: #ff78a5f1;
    color:#000000;
    text-align: center;
}

.pic_left_001{
    background: url('../img/family_003.jpg') no-repeat center;
    background-size: cover;
}

.ctr
{
  min-height: 575px;
  line-height: 575px;
}

.container_centered{
    max-width: 1880px;
    margin: auto auto auto auto;
}
.container_centered_mini{
    max-width: 980px;
    margin: auto auto auto auto;
}

.container_vertical { 
    display: flex; 
    align-items: center; /* Centers the items vertically */ 
    justify-content: center; /* Centers the items horizontally (optional) */ 
    min-height: 575px; /* Example height */
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 22px; /* <-- adjust this */
  padding: 56px;
}


.s_leftgrey
{
  line-height: 32px; /* <-- adjust this */
 }

 .lefttext{
    text-align: left;
}


.picone{
    background: url('../img/torontodowntown.png') no-repeat center;
    background-size: cover;
    z-index: 1;
}

.picthree{
    background: url('../img/helping.png') no-repeat center;
    background-size: cover;
    z-index: 1;
}

.picfour{
    background: url('../img/freedom.png') no-repeat center;
    background-size: cover;
    z-index: 1;
}

.pictwo{
    background: url('../img/teamwork.jpg') no-repeat center;
    background-size: cover;
    z-index: 1;
}

.picfive{
    background: url('../img/happy_families.jpg') no-repeat top;
    background-size: cover;
}

.picsix{
    background: url('../img/together_001.jpg') no-repeat center;
    background-size: cover;
}

.picseven{
    background: url('../img/services.png') no-repeat center;
    background-size: cover;
}

.piceight{
    background: url('../img/contactus.jpg') no-repeat center;
    background-size: cover;
}

.picnine{
    background: url('../img/working_together.jpg') no-repeat center;
    background-size: cover;
}



header{
    height: 89px;
    max-width: 1680px;
    margin:auto auto auto auto;
    margin-bottom: 0;
}

.header_logo{
    height:100px;
    padding:0;
    margin:0;
}

.wrapper{
    padding:26px;
}

.extratop{
    padding-top: 82px;
}

.extra_all{
    padding: 82px;
}

.toppad52{
    padding-top: 52px;
}

.toppad104{
    padding-top: 104px;
}

.wrapper_header{
    padding:0;
    padding-left:16px;
    padding-right:16px;
}

section{
    max-width: 980px;
    margin:auto auto auto auto;
}

.menutop{
    min-width: 50px;
    float:right;
    margin-top: 56px;
}

.home-menu a {
    color: #353434;
    font-size: 1rem;
    text-transform: uppercase;
}

#menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#menu{
    background: #f3f2f2;
    position:fixed;
    top:0;
    right:0;
    height: 100vh;
    display:none;
    border-left: 1px solid black;
    z-index: 21;
}

#menubutton{
    position:relative;
    width:75px;
    height:75px;
    float:right;
}

#menubuttonClose{
    width:75px;
    height:75px;
    margin:auto auto auto auto;
}

#toggleButton{
    display:none;
    background: url('../img/menu.png') center center no-repeat;
    background-size: 30px 30px;
    width:75px;
    height:75px;
    border: none;
    margin-top: 25px;
}

#toggleButtonClose{
    display:none;
    background: url('../img/close.png') center center no-repeat;
    background-size: 30px 30px;
    width:75px;
    height:75px;
    border: none;
    margin-top: 25px;
}

.selected{
    background: #f8e5e5;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
}
    /*
    This styles a link within a selected menu item `<li>`.
    */
    #menutop .pure-menu-selected a {
        color: #fff;
    }

.pure-menu-link .selected a{
    color: rgb(68, 247, 68);
}

.whitefont{
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.nopad{
    padding: 0px;
}


.cont_showcase{
    padding:20px;
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap:30px 30px;
    justify-content: center;

}

.showcase_item{

    padding: 16px;
    background: #f3feff;
    min-height:400px;
    max-width:300px;
    border-radius: 6px;
    box-shadow: 0px 10px 5px -3px rgba(0,0,0,0.42);
    -webkit-box-shadow: 0px 10px 5px -3px rgba(0,0,0,0.42);
    -moz-box-shadow: 0px 10px 5px -3px rgba(0,0,0,0.42);
}

.cont_showcase_us{
    padding:20px;
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap:30px 30px;
    justify-content: center;

}

.cont_showcase_us ul{
    list-style-type:none;
    padding:6px;
    padding-top: 12px;
    margin:0px;
    padding-left: 14px;
    text-align: left;
    font-size: 0.7em;
}

.cont_showcase_us ul li{
    padding:2px;
    /**font-family: 'Brush Script MT', cursive;**/
    /**font-family: 'Caveat', cursive;**/
    
}


.cont_showcase_us h4{
    background: #bb0224;
    width:100%;
    padding:12px;
    color:#fff;
    margin-top: -6px;
    font-weight: 100;
}

.showcase_item_us{

    padding: 16px;
    background: #f3feff;
    background: #f8e5e5;
    background: none;
    height:585px;
    width:300px;
    border-radius: 6px;
    /**box-shadow: 0px 10px 5px -3px rgba(0,0,0,0.42);
    -webkit-box-shadow: 0px 10px 5px -3px rgba(0,0,0,0.42);
    -moz-box-shadow: 0px 10px 5px -3px rgba(0,0,0,0.42);**/
}

.sc_pic{

    background: #f8e5e5;
    border-radius: 12px 12px 0 0;
    padding-top: 12px;

}

.sc_lang{
    padding:6px;
    padding-top: 16px;
    text-align: left;
    height:80px;
    border-left:solid 1px rgba(0, 0, 0, 0.233);
    border-right:solid 1px rgba(0,0,0,0.233);
}

.sc_hobb{
    padding:6px;
    padding-top: 16px;
    text-align: left;
    height:160px;
    border-left:solid 1px rgba(0, 0, 0, 0.233);
    border-right:solid 1px rgba(0,0,0,0.233);
}

.sc_loc img{
   float: right;
   margin-top: -30px;
   height:35px;
}

.sc_loc{
    padding:6px;
    padding-top: 16px;
    padding-bottom: 24px;
    text-align: left;
    height:85px;
    border-left:solid 1px rgba(0, 0, 0, 0.233);
    border-right:solid 1px rgba(0,0,0,0.233);
    border-bottom:solid 1px rgba(0,0,0,0.233);
    box-shadow: 1px 10px 5px -3px rgba(0,0,0,0.42);
    -webkit-box-shadow: 0px 10px 5px -3px rgba(0,0,0,0.42);
    -moz-box-shadow: 0px 10px 5px -3px rgba(0,0,0,0.42);
    border-radius: 0px 0px 12px 12px;

}

.cont_offer{
    padding:20px;
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap:30px 30px;
    justify-content: center;

}

.offer_item{
    background: #f3f3f3;
    min-height:500px;
    max-width:400px;
    box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.12);
    -webkit-box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.12);
    -moz-box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.12);
    font-size: 1.1rem;
}

.serv_item img{
    width:100%;
}

.cont_serv{
    padding:20px;
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap:30px 30px;
    justify-content: center;

}

.serv_item{
    background: #f3f3f3;
    min-height:100px;
    width:125px;
    box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.12);
    -webkit-box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.12);
    -moz-box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.12);
    font-size: 1.1rem;
}

.offer_item img{
    width:100%;
}

.showcase_item img{
    width:100%;
    border-radius: 6px 6px 0px 0px;
    margin-bottom: 12px;
}

.shadow_top_bottom{
    box-shadow: 
        inset 0px 11px 8px -10px #111111,
        inset 0px -11px 8px -10px #111111;
}

.faqs {
    list-style-type: none;
}


.faqs li{
    padding-bottom: 26px;
    width:80%;
}

.faqs li:nth-child(1n) {
    border-top: #b6b6b6 solid 2px;
    padding-top: 26px;
  }

.faqs li:nth-child(2n) {
    padding-right: 26px;
    padding-left: 0;
    padding-top: 0;
    font-size: 1.1rem;
    font-style: italic;
    quotes: '”' '„';
    border:none;
  }

.notification{
    position:absolute;
    width:100%;
    top:95px;
    left:0;
    z-index: 1000;
}

.n_cont{
    max-width: 480px;
    margin:auto auto auto auto;
    background: rgb(190, 243, 190);
    text-align: center;
    padding: 26px;
}

@media (max-width: 56em) {

    .menutop{
        display: none;
    }

    #toggleButton{
        display:block;
    }

    #toggleButtonClose{
        display:block;
    }

    .sloganleft{
        padding-left: 26px;
    }

    .extra_all{
        padding: 26px;
    }

    .container_header{
      height: 100px;
    }

}