/* 
    OLLA Site Stylesheet
    Version 2.0 (alpha)
    Format: CSS
  
*/





/* ---------- RESET ---------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}





/* ---------- HTML5 DISPLAY-ROLE RESET FOR OLDER BROWSERS ---------- */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block }

body { font: 12px/21px 'Montserrat', sans-serif; line-height: 100% }

p { margin-bottom: 1em }
  
  ::selection         { background: #6e4eb0; color:#fff }
  ::-moz-selection    { background: #6e4eb0; color:#fff }
  ::-webkit-selection { background: #6e4eb0; color:#fff }

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

.cb { clear: both  }
.fl { float: left  }
.fr { float: right }

a, a:focus, a:hover {
  color: #fff;
  outline:         none;
  text-decoration: none;
}





  /* ---------- JUMBO ---------- */

  .main-image { 

  //background-color: #cbd2e8; 
  //background-image: url("../images/bg/baloons-image.png");

    background-position: center; 
    background-size: cover;
    height: 250px;
    margin-top: 0
  }
    .main-image img { 
      height: 100px; 
      margin-top: 70px; 
      width: auto

     -moz-transition:    all 1.5s cubic-bezier(0.25,0.1,0.25,1);
     -o-transition:      all 1.5s cubic-bezier(0.25,0.1,0.25,1);      
     -webkit-transition: all 1.5s cubic-bezier(0.25,0.1,0.25,1);
    }
      .main-image img:hover { transform: translateY(20%) }
   




  /* ---------- COLOPHON ---------- */

  .colophon-container { 
    height:     100px; 
    margin-top: 100px
  }
    .colophon-container p {
      color: #5858cf;
      font-size:   20px;
      font-weight: 500;
      line-height: 1.75em
    }

 
  




  /* ---------- ICONS SECTION ---------- */

  .icons-section { 
    margin-bottom: 100px; 
    margin-top:    100px  
  } 
    .icons-section .icons-section-group figure {
      background: rgb(92,49,163);
      background-color: #eee;
      background: linear-gradient(90deg, rgba(92,49,163,1) 0%, rgba(56,84,169,1) 100%);
      border-radius: 50%;
      height: 100px;
      margin-left: 37%;
      width: 100px      
    }
      .icons-section .icons-section-group figure:hover { opacity: 0.75 }
      .icons-section .icons-section-group:nth-child(1) img { height: auto; width: 35px; margin-top: 33px }
      .icons-section .icons-section-group:nth-child(2) img { height: auto; width: 33px; margin-top: 35px }
      .icons-section .icons-section-group:nth-child(3) img { height: auto; width: 40px; margin-top: 35px }


    .icons-section .icons-section-group h4 { 
      color: #625ab2;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: -0.025em;
      line-height: 1.2em;     
      margin-bottom: 0px;
      margin-top: 20px     
    }
    .icons-section .icons-section-group p {  
      font-size:   11px;
      line-height: 1.75em;
      margin-top: 20px
    }


    










/* ---------- SECTIONS ---------- */

/* HEADER */

.section   { }
.colour-bg { background-color: #c3cbe5 }
.white-bg  { background-color: white   }

.crm-berkana           { height: 500px }
.olla-telecom          { height: 500px }
.internet-for-business { height: 530px }
.olla-services         { height: 530px }





/* TEXT */

.section .section-text {
  color:       black;
  font-size:   11px;
  font-weight: 300;
  line-height: 1.75em;
  margin-top:  0px;
}
  .section .section-text h2 { 
    color:         #6e4eb0;
    font-size:     30px;
    font-weight:   900;
    line-height:   1.05em;
    margin-bottom: 50px;
    margin-top:    80px;
    text-transform: uppercase
  }

  .bold-text { font-weight: 700; }




/* BUTTONS */

.button {
  background: rgb(92,49,163);
  background: linear-gradient(90deg, rgba(92,49,163,1) 0%, rgba(56,84,169,1) 100%);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  margin-top: 20px;
  padding: 15px 35px;
  text-transform: uppercase;
 }  
  .button:hover {  
    color: #fff;  
    background: linear-gradient(-90deg, rgba(92,49,163,1) 0%, rgba(56,84,169,1) 100%) 
  }





/* IMAGES */

.section-image img { 
  -moz-transition:    all 1.5s cubic-bezier(0.25,0.1,0.25,1);
  -o-transition:      all 1.5s cubic-bezier(0.25,0.1,0.25,1);      
  -webkit-transition: all 1.5s cubic-bezier(0.25,0.1,0.25,1);
}
  .section-image img:hover { transform: translateY(5%) }





  /* by pictures */
  
  .laptop img { 
    height: auto; 
    margin-left:  0px; 
    margin-top:  90px; 
    width: 450px 
  }

  .iphone img { 
    height: auto; 
    margin-left: -50px; 
    margin-top:   40px; 
    width:       400px 
  }

  .imac   img { 
    height: auto; 
    margin-left:  0px; 
    margin-top: 100px; 
    width:      500px 
  }

  .server img { 
    height: auto; 
    margin-top: 100px; 
    width:      350px 
  }










/* ---------- FOOTER ---------- */

.footer { background-color: #6945ac; height: 40px }
  .footer .copyright { margin-top: 12px }
    .footer .copyright span { color: white; font-size: 10px }
    .footer .copyright img  { 
       height: auto;
       margin-left: 4px;
       margin-top:  3px;  
       position:    absolute;      
       width:       17px
    }
      .footer .copyright img:hover { opacity: 0.75 }

.dl-link { text-decoration: underline }
.dl-link:hover { text-decoration: none }










/* ---------- FLOATING ARROW ---------- */

  .floating-arrow {  
    background-color: rgba(172, 131, 53, 1);
    border-radius: 35px;
    bottom:        66px;
    cursor:        pointer;
    padding:       25px 25px;
    position:      fixed;
    right:         25px;  
  }
    .floating-arrow img {
      height: auto;
      width:  15px;  
    }
      .floating-arrow:hover { opacity: 0.85 }










/* ---------- MEDIA Q ---------- */
  

  /* ---------- 1199px-1017px ---------- */
  @media only screen and (max-width: 1199px) { 
    
    .icons-section .icons-section-group figure { margin-left: 34% } 
  }





  /* ---------- 991px-790px ---------- */
  @media only screen and (max-width: 991px) {       
    
    .icons-section .icons-section-group figure  { margin-left: 28% }
    .colophon-container p { font-size: 16px }
    .colophon-container p span {
      background-color: #6945ac;
      color:   white;
      padding: 2px
    }

    .section { 
      height:  800px; 
      padding: 20px 
    }
      .section-image img { 
        height: auto;
        width:  300px 
      }
        .section .section-text h2 { margin-top: 40px }   
        .crm-berkana           { height: 670px }
        .olla-telecom          { height: 720px }
        .internet-for-business { height: 650px }
        .olla-services         { height: 700px }
          .laptop img { margin-top: 40px }
          .iphone img { margin:      0   }
          .imac   img { margin-top: 10px }
          .server img { margin:      0   }
  }





  /* ---------- 730px-680px ---------- */
  @media only screen and (max-width: 730px) {

    .icons-section-group:nth-child(1) { float: left; width: 250px }
    .icons-section-group:nth-child(2) { display: none }
    .icons-section-group:nth-child(3) { float: right; width: 250px } 
  }



  /* ---------- 540px-0px ---------- */
  @media only screen and (max-width: 540px) {

    .icons-section { 
      margin-bottom: 0; 
      margin-top:    0;
      padding-top:   0
    }
    
    .icons-section .icon-section-group figure { margin-left: 27% }    
      .icons-section-group:nth-child(1) { 
        float: none; 
        margin: 20% auto; 
        text-align: center 
      }

      .icons-section-group:nth-child(2) { 
        float: none; 
        display: block; 
        margin: 20% auto; 
        text-align: center; 
        width: 250px 
      }

      .icons-section-group:nth-child(3) { 
        float: none; 
        margin: 20% auto; 
        text-align: center 
      }

    .colophon-container { margin-top: 75px; }
   
   }





/* 
  End 
  stylesheet
   
 */