/*
 Theme Name:   Quark Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Theme URI: http://quarktheme.com
 Description:    Custom child theme for the Quark theme Author: Anthony Hortin
 Template:     quark-master
 Version:      1.3
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  quark
*/




/*@import url("../quark-master/style.css");
/*
Innehåll
0. Grid
1. Allmänt
2. Fonter
3. Min enda sida







/************************  0. Grid **************************/
*/





/************************  1. Allmänt **************************/



a:hover {
    color: #0b5743;
} 


.nd-block{
	position:relative;
	padding:50px 20px;
}

.nd-block:after{
	content:"";
	height:0;
	clear:both
}


.nd-page-container{
	max-width:940px;
	width: auto;
	margin:0 auto
}


.nd-page-container:after{
	content:"";
	clear:both;
	display:table;
	height:0
}

.centrerat{ 
    text-align: center!important;
}

.smallprint p{   /* text längst ner i footer */
    color: #bcb8ae;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    font-size: 8px;
}

.smallprint a{   /* text längst ner i footer */
    color: #bfbfbf!important;
}
.smallprint a:hover{   /* text längst ner i footer */
    color: #660066 !important;
}


.kolumner-tva {
    -webkit-column-count: 2; /*** Chrome, Safari, Opera ***/
    -moz-column-count: 2; /** Firefox ***/
    column-count: 2;

    -webkit-column-gap: 70px; /* Chrome, Safari, Opera */
    -moz-column-gap: 70px; /* Firefox */
    column-gap: 70px;
    
    margin: 0 200px 200px 200px;
}


a {
	text-decoration: none;
	
}

li{
	list-style-type: none;
}


.social-media-icons  {
	bottom: 0px ;
	right: 3px;
	position: fixed;
	text-align: right;
}

.social-media-icons a:hover  {
	color: #cc0033;
	}
	
#footercontainer {
    background-color: transparent!important;
}	

.nd-bredd{
    max-width: 900px;
}


.mini_bredd{
    margin: 0 70px 0 70px;
}

/** Animations **/
.ettan {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
}

.tvaan {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
}

.trean {
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
}

.fyran {
    animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
    -o-animation-delay: 2.5s;
}

/****************   2. Fonts       ************/



/*p {
    font-family: 'Halant', serif;
    font-weight: 300;
}*/



.fredericka {
    font-family: 'Fredericka the Great', cursive;
    font-weight: 400;
}



.amatic {
    font-family: 'Amatic SC', cursive;
    font-weight: 400;
}

.martel {
    font-family: 'Martel', serif;
    font-weight: 300;
}

.halant {
    font-family: 'Halant', serif;
    font-weight: 300;
}

.oldstandard {
    font-family: 'Old Standard TT', serif;
}

.crimson{
    font-family: 'Crimson Text', serif;
}
.hind {
    font-family: 'Hind', sans-serif;
}


@font-face {
  font-family: 'Fredericka the Great';
  font-style: normal;
  font-weight: 400;
  src: local('Fredericka the Great'), local('FrederickatheGreat'), url(/fonts/fredericka.woff2) format('woff2');
}



@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(/fonts/amatic.woff2) format('woff2');
}


/* 
@font-face {
  font-family: 'Martel';
  font-style: normal;
  font-weight: 300;
  src: local('Martel Light'), local('Martel-Light'), url(/fonts/martel.woff2) format('woff2');
}
*/

/* 3. Min enda sida */


html {
    height: 100%;
    background:  url("/img/wavegrid.png") repeat; 
}

.page-id-855 {
    background:  url("/img/wavegrid.png") repeat; 
    background-color: #d9deda;
    height: 100%;
}
#wrapper {
   /* background:  url("/Lydnadsapp/wp-content/uploads/2017/02/gras.png") repeat; 
    width: cover;
    height: 430px; */
}

.tomrad{
    height:50px;
}

.logo {
    height: 300px;
    width: 300px;
    position:relative;
}



 .rubrik_spalt rubrik1 {
    font-size: 40px;
    color: #935959!important;
}

.rubrik_spalt img {
    width: 150px;
    margin-left: 30px;
    
}

.rubrik_spalt p {
    color: #746060!important;

}

.logo img{
    position: absolute;
    /*top:10%;
    left: 23%;*/
    
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    
    height: 200px;
    width: 200px;
    border-radius: 40px;
    background-color: #392923;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}


 #headercontainer underrubrik {
    font-size: 40px;
    color: #fff!important;
    text-align: center;
    margin-top: 10px;

}


.intro siffra {
    text-align: center;
    color: #fff ;
    font-size: 80px;
    position:absolute;
    top: -10%;
    left: 40%;
}
.intro rubrik2 {
    text-align: center;
    color: #fff ;
    font-size: 30px;
    line-height: 28px;
    position:absolute;
    top:46%;
    
}




.ramcirkel{
    border-radius: 50%;
	width: 200px;
	height: 200px;
    background-color: #fff;
    position:relative;

}
.cirkel {
    border-radius: 50%;
	width: 180px;
	height: 180px;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
        position: absolute;
}
.rutaett {
    background-color: #FF8D00;
    
}
.rutaett rubrik2 {
    
    left:26%;
} 
    

.rutatva { 

    background-color: #0094DC;
}

.rutatva h6 {
   left:0%;
}

.rutatre { 
    background-color: #003C69;
}
.rutafyra {
    background-color: /*#FF5B00*/ #0DB900;
}

.rutatre h6 {
    
}


@media screen and (max-width: 553px) {
    .rubrik_spalt{
        width: 100%;
        margin-left: 10px;
        margin-right: 10px;
    }
    .logo {
        width: 100%;
       
    }
    
    .ramcirkel, .ramcirkel .col {
        margin-left: auto!important;
        margin-right: auto;
        float: none;
        margin-top: 10px;
    }
}

/* Om appen */


.omappen_section .text{
    border: 1px solid #d4d1d1;
    background-color: #fefffe;
    color: #746060;
    text-align: center;
    padding: 10px;
    border-radius: 15px;
}

.omappen_section rubrik {
    font-size: 30px;
    text-align: center;
}

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

@media screen and (max-width: 549px) {
    
}

/*** ettan ***/



.ettan_section img{
    /*height: 300px;*/
    width: 200px;
    border-radius: 15px;
    border: 1px solid #000;
    padding: 10px;
    background: #000;
}


.ettan_section .text {
    border: 1px solid #d4d1d1;
    background-color: #fefffe;
    color: #746060;
    text-align: center;
    padding: 10px;
    border-radius: 15px;
}

.ettan_section rubrik {
    font-size: 30px;
    text-align: center;

}

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

@media screen and (max-width: 650px) {
    
    .ettan_section .grid_3_of_12.telefon, .ettan_section .grid_5_of_12.text{
        width: 100%!important;
    }
    
    .ettan_section .col {
        float: none!Important;

    }

    
    .ettan_section img {
        
        margin-top: 10px;
        margin-bottom: 10px;
        width:150px;
        margin-top: 10px!important;
        margin-left: auto!important;
        margin-right: auto!important;
        display: block;
    }

    
    .ettan_section .ramcirkel, .ettan_section .ramcirkel .col {
        margin-left: auto!important;
        margin-right: auto;
        float: none;
        margin-top: 10px;
    }
}
@media screen and (min-width: 651px) and (max-width: 867px) {
    .ettan_section img {
        width:150px;
    }
}



/* tassar */

.tassar_section .box {
    
    height: 200px;
    width: 800px;
    position: relative;
    border-style: none;
    
}

.tassar_section img {
    height: 50px;
}

.tassar_section .tass1{
    position:absolute;
    top: 87%;
    left: 10%;
}

.tassar_section .tass2{
    position:absolute;
    top: 97%;
    left: 20%;
}
.tassar_section .tass3{
    position:absolute;
    top: 30%;
    left: 40%;
}
.tassar_section .tass4{
    position:absolute;
    top: 8%;
    left: 50%;
}
.tassar_section .tass5{
    position:absolute;
    top: 80%;
    left: 70%;
}
.tassar_section .tass6{
    position:absolute;
    top: 75%;
    left: 80%;
}
.tassar_section .tass7{
    position:absolute;
    top: 15%;
    left: 90%;
}
.tassar_section .tass8{
    position:absolute;
    top: 8%;
    left: 100%;
}
/* detalj sektionen med programmets längd osv */

.detalj_section {
    background-color: rgba(255, 141, 0, 0.77);
}

.detalj_section .box{
    height: 300px;
    min-width: 310px;
    
    margin-bottom: 20px;
    margin-top: 20px;

}

.detalj_section .box img{
    min-width: 300px;
    width: 32.26%;
    margin-top: 20px;
}



.detalj_section p b {
    font-size: 25px;
}

.detalj_section p {
    font-size: 18px;
    text-align: left;
    border-radius: 15px;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #d4d1d1;
    color: #746060;
    
}

@media screen and (max-width: 650px) {
    .detalj_section .col{
        max-height: 250px;
        float: none;
    }
}
/*
@media screen and (min-width: 650px) {
    .detalj_section .col{
        margin-top: 20px;
        max-height: 250px;
    }
    */
}


/* Switchar */

.switchar_section {
    min-height: 500px;
}

.switchar_section .box{
    height: 200px;
    width: 400px;
    
}


.switchar_section rubrik{
    font-size: 35px;
    /*color: #ffba00;*/
    color:  #0094DC;
}

.box_fallande {
    min-width: 400px;

}


.switchar_section .text {
    background-color: #746060;
    color: #746060;
    text-align: center;
    padding: 10px;
    
    
}



.switchar_section p {
    font-size: 25px;
    text-align: left;
    margin-top: 20px;
    color: #2e2917;
}
@media screen and (max-width: 650px) {
    .switchar_section .box_fallande{
        margin-top: 100px;
        width: 100%;
    }
}


/* Belöningssignal */

.beloning_section {
    padding-top: 0px;
    padding-bottom: 0px;
}

.beloning_section .box img{
    min-width: 300px;
    width: 32.26%;

}

.beloning_section rubrik{
    font-size: 35px;
    color: #FF5B00;
    
}

.beloning_section p {
    font-size: 25px;
    text-align: left;
    margin-top: 20px;
}

@media screen and (max-width: 650px) {
    .beloning_section .grid_6_of_12 {
        width: 100%;
    }
}


/* Tävlingsledare */

.tavlingsledare_section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.tavlingsledare_section .box img{
    min-width: 300px;
    width: 32.26%;

}

.tavlingsledare_section rubrik{
    font-size: 35px;
    color: #48b3ff;
    
}

.tavlingsledare_section p {
    font-size: 25px;
    text-align: left;
    margin-top: 20px;
}

@media screen and (max-width: 650px) {
    .tavlingsledare_section .grid_6_of_12 {
        width: 100%;
    }
}



/* Slumpas -sektionen */

.slumpas_section .text {
    border: 1px solid #d4d1d1;
    background-color: #fff;
    color: #746060;
    text-align: center;
    padding: 10px;
    border-radius: 15px;
    min-width: 300px;
}

.slumpas_section rubrik {
    font-size: 30px;
}

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


.start img, .lista img, .tavling img{
    height: 300px;
    border-radius: 15px;
    border: 1px solid #000;
    padding: 10px;
    background: #000;
    position: absolute;
    top: 0%;
    left: 0%;
}
.start {
    margin-top: 10px;
    /*background:  url("/Lydnadsapp/wp-content/uploads/2017/02/sid2LJUSBLA.png") no-repeat top center;*/
    max-width: 200px;
    height: 300px;
    background-size: contain;
    position: relative;
}

.start .lasa {
    color: #b1adac;
    position: absolute;
    top:13%;
    right: 12%;
    /*top:80%;
    left: 39%;*/
}

.start .lasatext {
    color: #4e4e4d;
    position: absolute;
    top:23%;
    right: 0%;
    /*top:65%;
    left: 10%;*/
    font-size: 25px;
    line-height: 22px;
    width: 80px;
    background-color: #fff;
    border-radius: 10px;
    padding: 3px;
        -ms-transform: rotate(-15deg); /* IE 9 */
    -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
    transform: rotate(-15deg);
}

.start .lyssna {
    color: #b1adac;
    position: absolute;
    top:27%;
    left: 20%;
     -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
}

.start .lyssnatext {
    color: #696766;
    position: absolute;
    top:33%;
    left: 0%;
    /*top:7%;
    left: 5%;*/
    font-size: 25px;
    line-height: 22px;
    width: 50px;
    background-color: #fff;
    border-radius: 10px;
    padding: 3px;
        -ms-transform: rotate(15deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
    transform: rotate(15deg);
}


.lista {
    
  /*  background:  url("/Lydnadsapp/wp-content/uploads/2017/02/sid4GRON.png") no-repeat top center; */
    max-width: 200px;
    height: 300px;
    background-size: contain;
    position: relative;
    margin-top: 10px;
} 

.lista .lyssna {
    color: #b1adac;
    position: absolute;
    top:68%;
    left: 63%;
    /*top:82%;
    left: 65%;*/
}

.lista .lasa {
    color: #a3a2a2;
    position: absolute;
    top:65%;
    left: 4%;
    /*top:75%;
    left: 10%;*/
}

.lista .lasatext {
    color: #696766;
    position: absolute;
    top:32%;
    left: 0%;
    /*top:47%;
    left: 10%;*/
    font-size: 25px;
    line-height: 22px;
    width: 80px;
    background-color: #fff;
    border-radius: 10px;
    padding: 3px;
        -ms-transform: rotate(-15deg); /* IE 9 */
    -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
    transform: rotate(-15deg);
}

.lista .lyssnatext {
    color: #696766;
    position: absolute;
    top:35%;
    left: 65%;
    font-size: 25px;
    line-height: 22px;
    width: 70px;
    background-color: #fff;
    border-radius: 10px;
    padding: 3px;
        -ms-transform: rotate(15deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
    transform: rotate(15deg);
}
@media screen and (max-width: 650px) {
    .slumpas_section .text{
        margin-top: 20px;
    }
    .slumpas_section .start, .slumpas_section .lista {
        margin-left: 20px;
    }
    
    .slumpas_section .lista .lyssnatext{
        top:48%;
        left: 80%;
    }
    .slumpas_section .lista .lasatext{
        top:30%;
    }
}

@media screen (min-width: 651px) and (max-width: 1080px) {
    /*
    
    .slumpas_section .lista .lyssnatext{
        top:48%;
        left: 80%;
    }
    .slumpas_section .lista .lasatext{
        top:30%;
    }
    */
}


/***   Tävlingsprogrammet   ***/

.tavling_section {
    padding-top: 100px;
    padding-bottom: 100px;
}

/**.tavling_section .box img{
    min-width: 300px;
    width: 32.26%;

} **/


.tavling_section rubrik{
    font-size: 35px;
    color: #48b3ff;
    
}

.tavling_section p {
    font-size: 25px;
    text-align: left;
    margin-top: 20px;
}




.tavling {
    margin-top: 10px;
    /*background:  url("/Lydnadsapp/wp-content/uploads/2017/02/sid2LJUSBLA.png") no-repeat top center;*/
    max-width: 200px;
    height: 300px;
    background-size: contain;
    position: relative;
}

.tavling .tavlingpil {
    color: #b1adac;
    position: absolute;
    top:30%;
    left: 0%;

}

.tavling .tavlingstext {
    color: #4e4e4d;
    position: absolute;
    top:43%;
    right: 60%;
    
    font-size: 25px;
    line-height: 22px;
    width: 80px;
    background-color: #fff;
    border-radius: 10px;
    padding: 3px;
        -ms-transform: rotate(-15deg); /* IE 9 */
    -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
    transform: rotate(-15deg);
}





@media screen and (max-width: 650px) {
    .tavling_section .grid_6_of_12 {
        width: 100%;
    }
}



/*4. Lyssna  */

.lyssna_section img{
    /*height: 300px;*/
    width: 200px;
    border-radius: 15px;
    border: 1px solid #000;
    padding: 10px;
    background: #000;
}


.lyssna_section .text {
    border: 1px solid #d4d1d1;
    background-color: #fefffe;
    color: #746060;
    text-align: center;
    padding: 10px;
    border-radius: 15px;
}

.lyssna_section rubrik {
    font-size: 30px;
    text-align: center;

}

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

@media screen and (max-width: 650px) {
    
    .lyssna_section .grid_3_of_12.telefon, .lyssna_section .grid_5_of_12.text{
        width: 100%!important;
    }
    
    .lyssna_section .col {
        float: none!Important;

    }

    
    .lyssna_section img {
        
        margin-top: 10px;
        margin-bottom: 10px;
        width:150px;
        margin-top: 10px!important;
        margin-left: auto!important;
        margin-right: auto!important;
        display: block;
    }

    
    .lyssna_section .ramcirkel, .lyssna_section .ramcirkel .col {
        margin-left: auto!important;
        margin-right: auto;
        float: none;
        margin-top: 10px;
    }
}
@media screen and (min-width: 651px) and (max-width: 867px) {
    .lyssna_section img {
        width:150px;
    }
}




/* Kontakt */

.kontakt_section rubrik{
    font-size: 35px;
    color: #FF5B00;
    
}

.kontakt_section p {
    font-size: 25px;
    text-align: left;
    margin-top: 20px;
}





/*klocka*/
.ramclock{
    border-radius: 50%;
	width: 200px;
	height: 200px;
    background-color: #fff;
    position:relative;
}

.clock {
   width: 180px;
   height: 180px;
   background: #0094DC;
   margin: 0 auto;
   border-radius: 50%;
   position: absolute;
    top:50%;
    left:50%;
        margin-right: -50%;
    transform: translate(-50%, -50%);
}

.short-hand, .long-hand {
   width: 2px;
   background: #0DB900;
   position: absolute;
    top: 92px;
   left: 92px;
   -webkit-transform: rotate(-180deg);
   -moz-transform: rotate(-180deg);
   -o-transform: rotate(-180deg);
   transform: rotate(-180deg);
   -webkit-transform-origin: 0 1px;
   -moz-transform-origin: 0 1px;
   -o-transform-origin: 0 1px;
   transform-origin: 0 1px;
}

.nut {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   position: absolute;
    top: 85px;
   left: 85px;
   /*top: 93px;
   left: 93px;*/
   background: #fff
}

.vanster {
    width:40px;
    height: 40px;
    position: absolute;
    top: 40%;
    left: 0%;
}

.hoger {
    width:40px;
    height: 40px;
    position: absolute;
    top: 40%;
    left: 78%;
}
.short-hand {
   height: 50px;
   -webkit-animation: rotation 400s infinite linear;
   -moz-animation: rotation 400s infinite linear;
   -o-animation: rotation 400s infinite linear;
   animation: rotation 400s infinite linear
}
.long-hand {
   height: 80px;
   -webkit-animation: rotation 100s infinite linear;
   -moz-animation: rotation 100s infinite linear;
   -o-animation: rotation 100s infinite linear;
   animation: rotation 100s infinite linear
}

@-webkit-keyframes rotation {
   0% {
      -webkit-transform: rotate(-180deg);
      transform: rotate(-180deg);
   }
   100% {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
   }
}

@-moz-keyframes rotation {
   0% {
      -moz-transform: rotate(-180deg);
      transform: rotate(-180deg);
   }
   100% {
      -moz-transform: rotate(180deg);
      transform: rotate(180deg);
   }
}

@-o-keyframes rotation {
   0% {
      -o-transform: rotate(-180deg);
      transform: rotate(-180deg);
   }
   100% {
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
   }
}

@keyframes rotation {
   0% {
      -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
      transform: rotate(-180deg);
   }
   100% {
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
   }
}

@media screen and (max-width: 480px) {
    .col.ramclock {
       margin-left: 50px;
    }
    
}



/*Kugghjul*/
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}


.container {
    z-index: -10;
      width: 480px;
      height: 328px;
      margin: 20px auto;
      position: relative;
}
.container .gear {
  position: absolute;
}
.container .gear.one {
  top: 33%;
  width: 31.7%;
  height: 46%;
  background: url("http://www.danyuschick.com/codepen/gears/gear-one.png") no-repeat;
  background-size: cover;
  -webkit-animation: rotate 10s linear;
  -moz-animation: rotate 10s linear;
  animation: rotate 10s linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.container .gear.one.reverse {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}
.container .gear.two {
  top: 66%;
  left: 24.2%;
  width: 23.7%;
  height: 34.6%;
  background: url("http://www.danyuschick.com/codepen/gears/gear-two.png") no-repeat;
  background-size: cover;
  -webkit-animation: rotate 10s linear reverse;
  -moz-animation: rotate 10s linear reverse;
  animation: rotate 10s linear reverse;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.container .gear.two.reverse {
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  animation-direction: normal;
}
.container .gear.three {
  top: 49%;
  left: 40.2%;
  width: 17.6%;
  height: 25.7%;
  background: url("http://www.danyuschick.com/codepen/gears/gear-three.png") no-repeat;
  background-size: cover;
  -webkit-animation: rotate 6.75s linear;
  -moz-animation: rotate 6.75s linear;
  animation: rotate 6.75s linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.container .gear.three.reverse {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}
.container .gear.four {
  top: 44%;
  left: 56.5%;
  width: 24%;
  height: 35%;
  background: url("http://www.danyuschick.com/codepen/gears/gear-four.png") no-repeat;
  background-size: cover;
  -webkit-animation: rotate 10s linear reverse;
  -moz-animation: rotate 10s linear reverse;
  animation: rotate 10s linear reverse;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.container .gear.four.reverse {
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  animation-direction: normal;
}
.container .gear.five {
  left: 51%;
  width: 31.2%;
  height: 45.6%;
  background: url("http://www.danyuschick.com/codepen/gears/gear-five.png") no-repeat;
  background-size: cover;
  -webkit-animation: rotate 10.5s linear;
  -moz-animation: rotate 10.5s linear;
  animation: rotate 10.5s linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.container .gear.five.reverse {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}
.container .gear.six {
  top: 10%;
  left: 81.5%;
  width: 17%;
  height: 24.9%;
  background: url("http://www.danyuschick.com/codepen/gears/gear-six.png") no-repeat;
  background-size: cover;
  -webkit-animation: rotate 7s linear reverse;
  -moz-animation: rotate 7s linear reverse;
  animation: rotate 7s linear reverse;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.container .gear.six.reverse {
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  animation-direction: normal;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Trillande switchar */

.box_fallande {
    position: relative;
    overflow: hidden;
    height: 450px;
    margin-top: 90px;
}

.switchar_section img {
    width: 300px;

}


.rw-words{
    display: inline;
}
.rw-words-2 span {
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #888;
	-webkit-transform-origin: 10% 75%;
	transform-origin: 10% 75%;
	-webkit-animation: rotateWord 18s linear infinite 0s;
	-ms-animation: rotateWord 18s linear infinite 0s;
	animation: rotateWord 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
	-ms-animation-delay: 3s; 
	animation-delay: 3s; 
	color: #6b889d;
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
	color: #6b739d;	
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 9s; 
	-ms-animation-delay: 9s; 
	animation-delay: 9s; 
	color: #7a6b9d;
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 12s; 
	-ms-animation-delay: 12s; 
	animation-delay: 12s; 
	color: #8d6b9d;
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 15s; 
	-ms-animation-delay: 15s; 
	animation-delay: 15s; 
	color: #9b6b9d;
}
@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -webkit-transform: rotate(0deg); }
	19% { opacity: 1; -webkit-transform: rotate(98deg); }
	21% { opacity: 1; -webkit-transform: rotate(86deg); }
	23% { opacity: 1; -webkit-transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; -webkit-transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -ms-transform: rotate(0deg); }
	19% { opacity: 1; -ms-transform: rotate(98deg); }
	21% { opacity: 1; -ms-transform: rotate(86deg); }
	23% { opacity: 1; -ms-transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; -ms-transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	19% { opacity: 1; -webkit-transform: rotate(98deg); transform: rotate(98deg); }
	21% { opacity: 1; -webkit-transform: rotate(86deg); transform: rotate(86deg); }
	23% { opacity: 1; -webkit-transform: translateY(85px) rotate(83deg); transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; -webkit-transform: translateY(170px) rotate(80deg); transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@media screen and (max-width: 768px){
}
@media screen and (max-width: 320px){
}




/**** ANIMERING ***/



.animatable {
  
  /* initially hide animatable objects */
  visibility: hidden;
  
  /* initially pause animatable objects their animations */
  -webkit-animation-play-state: paused;   
  -moz-animation-play-state: paused;     
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;   
  animation-play-state: paused; 
}

/* show objects being animated */
.animated {
  visibility: visible;
  
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

/* CSS Animations (extracted from http://glifo.uiparade.com/) */
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}



@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}
	60% {
		-webkit-transform: translateX(20px);
	}

	80% {
		-webkit-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}

	60% {
		-moz-transform: translateX(20px);
	}

	80% {
		-moz-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-2000px);
	}

	60% {
		opacity: 1;
		-o-transform: translateX(20px);
	}

	80% {
		-o-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}

	60% {
		transform: translateX(20px);
	}

	80% {
		transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@-webkit-keyframes bounceInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
	}

	60% {
		-webkit-transform: translateX(-20px);
	}

	80% {
		-webkit-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(2000px);
	}

	60% {
		-moz-transform: translateX(-20px);
	}

	80% {
		-moz-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(2000px);
	}

	60% {
		-o-transform: translateX(-20px);
	}

	80% {
		-o-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes bounceInRight {
	0% {
		opacity: 0;
		transform: translateX(2000px);
	}

	60% {
		transform: translateX(-20px);
	}

	80% {
		transform: translateX(5px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInUp {
	0% {
		opacity: 0;
		-o-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}
	50% {
		-webkit-transform: scale(1.05);
	}

	70% {
		-webkit-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes bounceIn {
	0% {
		opacity: 0;
		-moz-transform: scale(.3);
	}

	50% {
		-moz-transform: scale(1.05);
	}

	70% {
		-moz-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-moz-transform: scale(1);
	}
}

@-o-keyframes bounceIn {
	0% {
		opacity: 0;
		-o-transform: scale(.3);
	}

	50% {
		-o-transform: scale(1.05);
	}

	70% {
		-o-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-o-transform: scale(1);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}

	50% {
		transform: scale(1.05);
	}

	70% {
		transform: scale(.9);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@-webkit-keyframes moveUp {
	0% {
		opacity: 1;
		-webkit-transform: translateY(40px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes moveUp {
	0% {
		opacity: 1;
		-moz-transform: translateY(40px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes moveUp {
	0% {
		opacity: 1;
		-o-transform: translateY(40px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes moveUp {
	0% {
		opacity: 1;
		transform: translateY(40px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#464646;
	}
}
@-o-keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#464646;
	}
}
@keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#464646;
	}
}





/*alive 2*/
@-webkit-keyframes alive2 {
      10%, 90% {
    -webkit-transform: rotate(-1deg);
  }
  
  20%, 80% {
    -webkit-transform: rotate(1deg);
  }

  30%, 50%, 70% {
    -webkit-transform: rotate(-1deg);
  }

  40%, 60% {
    -webkit-transform: rotate(1deg);
  }
    
	
}

@-moz-keyframes alive2 {
  10%, 90% {
    -moz-transform: rotate(-1deg);
  }
  
  20%, 80% {
    -moz-transform: rotate(1deg);
  }

  30%, 50%, 70% {
    -moz-transform: rotate(-1deg);
  }

  40%, 60% {
    -moz-transform: rotate(1deg);
  }
    
}

@-o-keyframes alive2 {
  10%, 90% {
    -o-transform: rotate(-1deg);
  }
  
  20%, 80% {
    -o-transform: rotate(1deg);
  }

  30%, 50%, 70% {
    -o-transform: rotate(-1deg);
  }

  40%, 60% {
    -o-transform: rotate(1deg);
  }
}

@keyframes alive2 {
  10%, 90% {
    transform: rotate(-1deg);
  }
  
  20%, 80% {
    transform: rotate(1deg);
  }

  30%, 50%, 70% {
    transform: rotate(-1deg);
  }

  40%, 60% {
    transform: rotate(1deg);
  }
}


.animated.alive2{
    -webkit-animation-name: alive2;
	-moz-animation-name: alive2;
	-o-animation-name: alive2;
	animation-name: alive2;
    -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-iteration-count: infinite;
}

.animated.animationDelay{
	animation-delay:.6s;
	-webkit-animation-delay:.6s;
}

.animated.animationDelaySmall{
	animation-delay:0.8s;
	-webkit-animation-delay:0.8s;
}
.animated.animationDelayMed{
	animation-delay:1s;
	-webkit-animation-delay:1s;
}
.animated.animationDelayLong{
	animation-delay:1.2s;
	-webkit-animation-delay:1.s;
}

.animated.animationDelayXLong{
	animation-delay:1.4s;
	-webkit-animation-delay:1.4s;
}

.animated.animationDelayXXLong{
	animation-delay:1.6s;
	-webkit-animation-delay:1.6s;
}
.animated.animationDelayXXXLong{
	animation-delay:1.8s;
	-webkit-animation-delay:1.8s;
}


.animated.bounceIn {
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
}
.animated.bounceInRight {
	-webkit-animation-name: bounceInRight;
	-moz-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name: bounceInRight;
}
.animated.bounceInLeft {
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
}
.animated.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}
.animated.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.animated.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
.animated.moveUp {
	-webkit-animation-name: moveUp;
	-moz-animation-name: moveUp;
	-o-animation-name: moveUp;
	animation-name: moveUp;
}


@media screen and (max-width: 553px) {

    .animated.animationDelay, .animated.animationDelaySmall, .animated.animationDelayMed, .animated.animationDelayLong, .animated.animationDelayXLong, .animated.animationDelayXXLong, .animated.animationDelayXXXLong{
	animation-delay:0s;
	-webkit-animation-delay:0s;
}


}