/*-------------------------------------------------------
Theme Name: Atte Sailola
Theme URI: https://tovari.fi/ 
Description: A child theme for Atte Sailola
Author: Tovari
Author URI: https://tovari.fi/
Template: Divi
Version: 1.0.0
----------------- ADDITIONAL CSS HERE ------------------*/

/********************************************************
****************** Tekstimuokkaukset ********************
********************************************************/

.h1-etusivu h1 {
    text-align: center;
    color: rgb(218, 218, 218);
    text-shadow: rgb(49, 49, 49) 1px 1px 1px;
    font-size: 8vw;
    font-family: Jomhuria, cursive;
    text-transform: uppercase;
    padding-bottom: 0px;
}

.p-header p {
    text-align: center;
    color: rgb(218, 218, 218);
    text-shadow: rgb(49, 49, 49) 1px 1px 1px;
    font-size: 60px;
    font-family: Jomhuria, cursive;
}

.p-footer p {
    text-align: center;
    color: black;
    font-size: 40px;
    font-family: Jomhuria, cursive;
    text-transform: uppercase;
}

.h2-etusivu h2 {
    text-align: center;
    color: black;
    font-size: 70px;
    font-family: Jomhuria, cursive;
    text-transform: uppercase;
}

.h2-text h2 {
    text-align: center;
    color: black;
    font-size: 45px;
    font-family: Jomhuria, cursive;
    text-transform: uppercase;
}

.p-text p {
    text-align: center;
    font-size: 18px;
    font-family: Tajawal, cursive;
}

.p-otayhteytta p {
    text-align: center;
    color: black;
    font-size: 35px;
    font-family: Jomhuria, cursive;
    text-transform: uppercase;
}

.p-yhteydenotot p {
    text-align: center;
    font-size: 20px;
    font-family: Tajawal, cursive;
}

/*****************************************************
******************* Paddings & Margins ***************
*****************************************************/

.pad-atte {
    padding-top: 17.5vw!important;
    padding-bottom: 17.5vw!important;
}

.pad-someatte {
    padding-top: 40px!important;
    padding-bottom: 0px!important;
}

.pad-sponsorit {
    padding-top: 50px!important;
    padding-bottom: 50px!important;
}

.pad-etusivu {
    padding-top: 18.5vw!important;
    padding-bottom: 18.5vw!important;
}

.pad-tietoa {
    padding-top: 50px!important;
    padding-bottom: 0px!important;
}

.pad-yhteystiedot {
    padding-bottom: 10px!important;
    padding-top: 50px!important;
}

.pad-sponsorisivu {
    padding-top: 17.5vw!important;
    padding-bottom: 17.5vw!important;
}

.margin-sponsorit {
    width: 100%;
    max-width: 1700px;
}

.pad-footer {
    width: 100% !important;
    max-width: 1300px!important;
    margin: auto;
    padding-bottom: 10px!important;
}

.pad-etusivutiedot {
    padding-bottom: 0px!important;
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: auto;
}

.pad-yhteydenotto {
    padding-top: 18.5vw!important;
    padding-bottom: 18.5vw!important;
}

.pad-otayhteytta {
    padding-bottom: 0px!important;
}

/********************************************************
**************** Kuvien muokkaukset *********************
********************************************************/

.margin-lahikuva img {
    position: relative;
    max-width: 120%!important;
    height: auto;
}

.margin-tietojakuva img {
    max-width: 75%;
    height: auto;
}

.margin-yhteyskuva img {
    position: relative;
    max-width: 150%!important;
    height: auto;
    right: 300px;
}

/**************************************************
****************** Valikko ************************
**************************************************/

.mobile_menu_bar.et_pb_header_toggle {
    display: none;
    width: 80px;
    cursor: pointer;
}

.mobile_menu_bar:before {
    position: relative;
    font-size: 60px;
    content: "\61";
    cursor: pointer;
}

.mobile_menu_bar:before {
    position: relative;
    font-size: 60px;
    content: "\61";
    cursor: pointer;
    margin-right: 20px;
}

/****************************************************
**************** Mobiilihommelit ********************
****************************************************/

@media all and (max-width: 980px) {
    /*** wrap row in a flex box ***/
    .custom_row {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
    }
     
    /*** custom classes that will designate the order of columns in the flex box row ***/
    .first-on-mobile {
    -webkit-order: 1;
    order: 1;
    }
     
    .second-on-mobile {
    -webkit-order: 2;
    order: 2;
    margin-bottom: 0px;
    }
     
    .third-on-mobile {
    -webkit-order: 3;
    order: 3;
    margin-bottom: 0px;
    }
     
    .fourth-on-mobile {
    -webkit-order: 4;
    order: 4;
    }
     
    }


/*******************************************************
************** Mobiilihommelien skaalaus ***************
*******************************************************/


    /*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
    .h1-etusivu h1 {
        font-size: 14vw;
    }

    .p-header p {
        font-size: 50px;
    }

    .h2-etusivu h2 {
        font-size: 50px;
    }

    .p-text p {
        font-size: 17px;
    }
    
    .margin-tietojakuva img {
        max-width: 70%;
        height: auto;
    }

    .margin-attelogo img {
        max-width: 50%;
        height: auto;
    }

    .margin-yhteyskuva img {
        position: relative;
        max-width: 140%!important;
        height: auto;
        right: 80px;
        padding-top: 20px;
    }

    .mobile_menu_bar.et_pb_header_toggle {
        display: none;
        width: 30px;
        cursor: pointer;
    }
    
    .mobile_menu_bar:before {
        position: relative;
        font-size: 60px;
        content: "\61";
        cursor: pointer;
    }
    
    .mobile_menu_bar:before {
        position: relative;
        font-size: 60px;
        content: "\61";
        cursor: pointer;
        margin-right: 20px;
    }
}

/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
    .h1-etusivu h1 {
        font-size: 10vw;
    }

    .p-header p {
        font-size: 40px;
    }

    .h2-etusivu h2 {
        font-size: 60px;
    }

    .p-text p {
        font-size: 18px;
    }
    
    .margin-tietojakuva img {
        max-width: 50%;
        height: auto;
        padding-top: 20px;
    }

    .margin-attelogo img {
        max-width: 50%;
        height: auto;
        padding-top: 20px;
    }

    .margin-yhteyskuva img {
        position: relative;
        max-width: 60%!important;
        height: auto;
        right: 80px;
        padding-top: 20px;
    }

    .margin-lahikuva img {
        position: relative;
        max-width: 50%!important;
        height: auto;
        padding-top: 20px;
    }

    .mobile_menu_bar.et_pb_header_toggle {
        display: none;
        width: 30px;
        cursor: pointer;
    }
    
    .mobile_menu_bar:before {
        position: relative;
        font-size: 60px;
        content: "\61";
        cursor: pointer;
    }
    
    .mobile_menu_bar:before {
        position: relative;
        font-size: 60px;
        content: "\61";
        cursor: pointer;
        margin-right: 20px;
    }
}

/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 980px) and (max-width: 1405px) {
    .h1-etusivu h1 {
        font-size: 9vw;
    }

    .p-header p {
        font-size: 40px;
    }

    .h2-etusivu h2 {
        font-size: 60px;
    }

    .p-text p {
        font-size: 18px;
    }

    .p-lineheight p {
        line-height: 0.9;
    }
    
    .margin-tietojakuva img {
        max-width: 90%;
        height: auto;
        left: 40px;
    }

    .margin-attelogo img {
        max-width: 100%;
        height: auto;
    }

    .margin-yhteyskuva img {
        position: relative;
        max-width: 60%!important;
        height: auto;
    }

    .margin-yhteyskuva img {
        position: relative;
        max-width: 140%!important;
        height: auto;
        right: 80px;
        padding-top: 20px;
    }

    .mobile_menu_bar.et_pb_header_toggle {
        display: none;
        width: 30px;
        cursor: pointer;
    }
    
    .mobile_menu_bar:before {
        position: relative;
        font-size: 60px;
        content: "\61";
        cursor: pointer;
    }
    
    .mobile_menu_bar:before {
        position: relative;
        font-size: 60px;
        content: "\61";
        cursor: pointer;
        margin-right: 20px;
    }
}