@font-face {
    font-family: GeorgiaFont;
    src: url('../font/georgia.ttf');

}

@font-face {
    font-family: ArialNarrow;
    src: url('../font/arial_narrow.ttf');

}

@font-face {
    font-family: OpenSans;
    src: url('../font/OpenSans-CondBold.ttf');

}

body {
    background: white;
   
}


h1 {
    font-family: 'OpenSans';
    font-size: 28px;
    font-weight: bold;
    color: #00A8E4;
    line-height: 0.8;
    
}

.textBlock {
    font-family: 'ArialNarrow';
    font-size: 18px;
    text-align: justify;
    max-width:1024px;
    padding-bottom: 15px;
    padding-top: 15px;
}

#interactworld {
    background-image: url('../img/interact/interact_into_the_world.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#topheader {
 
    height: 80px;
    background-color: #00A8E4;
    padding: 10px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    width: 100%;
     transition: transform .2s ease-in-out;
}

#main_block {
    background-image: url('../img/interact/interact_main_photo.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    height: 32vh;
    width: 100%;
    
}

#headlogo {
    cursor: pointer;
/*    border: 1px solid red;*/
    width: auto;
    max-width: 300px;
    position: relative;
    z-index: 250;

}

#headlogo img {
    max-height: 70px;
}

#main_logo {
    max-width: 300px;
    position: relative;
    z-index: 250;
    margin-left: 10px;
     transition: transform .5s ease-in-out;
}

#main_logo span {
    display: inline-table;
}

#main_logo .rotarytext {
    font-family: OpenSans;
    font-size: 32px;
     color: white;
     vertical-align: middle;
     line-height: 10px;
}

#main_logo .rotaryclub {
    font-family: OpenSans;
    font-size: 16px;
    color: white;
    vertical-align: middle;
    line-height: 18px;
}

#main_logo .rotarylogo {
      width: 65px;
      margin-left: 10px;
      margin-right: 10px;
}


.biginfo {
    color : #0c3c7c;

}


.bigtitle {
    color: white;
    font-weight: bold;
    padding: 15px;
    font-size: 38px;
    
}
.bigtext {
    font-size: 22px;
    text-align: justify;
}



#slide_events_box {
    height: 60vh;
    width: 100%;
    background-color: #005DAA;
    position: relative;

    //border: 1px solid red;
  overflow: hidden;
  //overflow-y: auto;
}



#righheadzone {
    position: absolute;
    right: 15px;
    top: 20px;
    text-align: right;
    width: 60%;
    z-index: 260;
/*   max-width: calc(100% - 350px);*/
/*    border: 1px solid red;*/
        
}

#righheadzone div {
   display: inline-block;
}

.rhead {
    margin-right: 18px;
}

.iconimg  {
    width: 28px;
    cursor: pointer;
}


#googlesearch {
 border-bottom: 1px solid white;
    width: 100%;
    max-width: 300px;
    padding: 2px;
    display: none;
}

#googlesearch input {

    display: inline-table;
}

#menuIcon {

    width: 100%;
    max-width: 60px;
    cursor: pointer;
}

#notificationIcon {

    max-width: 60px;
     cursor: pointer;
    
}


#search_input_box {
    border: 0px;
   
    background-color: transparent;
    color: lightgray;
    padding: 5px;
    margin-right: 10px;
    width: calc(100% - 40px);
}

.slide_header img {
    height: 100%;
}

.slide_header {
  width: 80%;
  height: 90%;
  
 position: absolute;   

 top: 50%;
 left: 50%;
 transform: translate3D(-50%, -50%, 0);

 background-position: center;
 background-size: cover;

 overflow: hidden;
 transition: transform 0.6s ease-out;

    
}

*:not(html) {
   -webkit-overflow-scrolling: touch
}

.center_header {
    
          transform-origin: -50% -50%;
        -ms-transform-origin: -50% -50%;
        -webkit-transform-origin: -50% -50%;
      z-index: 30;

      
}

#leftarrow {
    position: absolute;
    width: 64px;
    left: 10px;
    z-index: 120;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
     cursor: pointer;
     opacity: 0.7;
}

.title_block {
    width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    text-transform: uppercase;
    
}

#rightarrow {
        position: absolute;
    right: 10px;
     width: 64px;
    z-index: 120;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    cursor: pointer;
    opacity: 0.7;
}

#slideContent {
    width: 100%;
    height: 100%;
    position: relative;
}

.side {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  
  -webkit-filter: grayscale(1) blur(3px);;
   webkit-filter: grayscale(100%) blur(3px);
	
	filter: grayscale(100%) blur(3px);
}

.left_header {

    
      transform-origin: -50% -50%;
        -ms-transform-origin: -50% -50%;
        -webkit-transform-origin: -170% -50%;
    
    transform: scale3D(0.5, 0.5, 1); 
     z-index: 28;
     border: 2px solid #01B4E7;

    

}



.right_header {
    
    
      transform-origin: -50% -50%;
    -ms-transform-origin: -50% -50%;
    -webkit-transform-origin: 70% -50%;
    
    transform: scale3D(0.5, 0.5, 1); 
     z-index: 28;
     border: 2px solid #01B4E7;
    
    
}

.singleContentBox {
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 30px;
    padding-right: 30px;
    min-height: 120px;
    width: 100%;
    background-color: #E7E7E8;
    position: relative;
    overflow: hidden;
   
}

.singleContentBox img {
/*    width: 100%;*/
}

.halfLeft {
   
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    min-height: 80px;
    width: 35%;
    display: inline-block;
    box-sizing: border-box;

}

.halfLeft img {
  width: 100%;
  padding: 10%;
  max-width: 450px;

/*  transform: translate(-50%, -50%);*/
}

.halfRight {
   width: 60%;
    font-family: 'ArialNarrow';
/*   background-color: white;*/
   box-sizing: border-box;
   display: inline-block;
   text-align: right;
   padding: 2%;
   font-size: 18px;
   min-height: 80px;
     
       vertical-align: top;
}

.contentTitle {
     font-family: 'OpenSans';
    color : #005DAA;
    font-weight: bold;
    font-size: 22px;
    vertical-align: top;
 
}

.halfContainer {
   
        
/*    background-color: white;*/

}
.halfContainerZ {

/*   transform: rotateY(180deg) translateZ(-150px);*/

}


.slide_content_area {
    background-color: rgba(0,0,0,0.8);
   
  // background-color: red;
    color: white;
    padding: 10px;
    min-height: 120px;
    width: 100%;
    bottom: 0px;
    position: absolute;
/*    transform: translateY(+100%) translateZ(0);;
    transition: transform 1.0s ease-out;*/
}

.slide_title {
    position: relative;
    right: 10px;
    font-family:   'OpenSans';
    color : #F7A81B;
    font-weight: bold;
    font-size: 22px;
    text-align: right;
    
}

.slide_title a {
    text-decoration:  none;
    color : #F7A81B;
}

.slide_subtitle {
    
        position: relative;
    right: 10px;
    font-family:   'Arial Narrow';
    color : #F7A81B;
    font-weight: bold;
    font-size: 14px;
    text-align: right;
}

.slide_text {
    
    position: relative;
    right: 10px;
   font-family:   'OpenSans';
    color : white;
    font-weight: normal;
    font-size: 18px;
    text-align: right;

}

.slide_button {
    margin-top: 10px;
    width: 200px;
    color: #005DAA;
    background-color: #F7A81B;
    padding: 3px 5px 3px 5px;
    cursor: pointer;
    text-align: center;
    position: absolute;
    right: 10px;
    
}

.clickEvent {
    cursor: pointer;
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
        
}

.box_head_title {
    
   font-family: 'OpenSans';
    color : #005DAA;
    font-weight: bold;
    font-size: 32px;
    text-align: center;
}

.box_head_subtitle {
    
       font-family: 'OpenSans';
    color : #FF7600;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
}

.blend {
    mix-blend-mode: multiply;
}

#allcontainer {
       -moz-transition: all 900ms ease-in-out;
  -webkit-transition: all 900ms ease-in-out;
  -o-transition: all 900ms ease-in-out;
  transition: all 900ms ease-in-out;
}



@media screen and (max-width: 800px) { /* Specific to this particular image */


    #googlesearch {
        display: none !important;
      
    }
    
    
        .slide_header {
        width: 90%;
        height: 90%;
    }


    
}


@media screen and (max-width: 500px) { /* Specific to this particular image */


        .halfLeft {
        width: 100%;
    }
    
    .halfLeft img {
        width: 100%;
        padding: 2%;
        max-width: 2550px;

      /*  transform: translate(-50%, -50%);*/
      }
    .halfRight {
        width: 100%;
    }
    
    
    .slide_header {
        width: 100%;
        height: 100%;
    }
    
    
    #main_logo .rotarytext {
   
    font-size: 26px;
    display: none;

}
    
    
    #googlesearch {
        display: none !important;
    }
    
    #headlogo img {
    max-height: 50px;
}
}


@media screen and (max-height: 400px)
{
    #slide_events_box {
    height: 100vh;
    width: 100%;
    background-color: #005DAA;
    position: relative;

        //border: 1px solid red;
      overflow: hidden;
      //overflow-y: auto;
    }
}


@media screen and (max-width: 400px) { /* Specific to this particular image */


    #googlesearch {
        display: none !important;
    }
    
    #headlogo img {
    max-height: 30px;
    }
    
    #menuIcon {
    position: absolute;
    right: -20px;
    top: 20px;
    width: 100%;
    max-width: 60px;
    cursor: pointer;
    }
    
    #menuIcon img {
        width: 30px;
    }

    #main_logo {
        margin-left: -10px;
        margin-top: 5px;
    }    
    
#main_logo .rotarytext {
   
    font-size: 26px;
    display: none;

}

#main_logo .rotaryclub {
   
    font-size: 14px;

}

#main_logo .rotarylogo {
      width: 50px;
      margin-left: 10px;
      margin-right: 10px;
}
    
    .rhead {
    margin-right: 12px;
    }

    .iconimg  {
        width: 24px;
        cursor: pointer;
    }
}